diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index d4c697869d0..1d88722122e 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -6,14 +6,14 @@ paths:
 
 # EMCN Components
 
-Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from the `@sim/emcn/icons` subpath, and CSS modules from their file path. Never deep-import other component subpaths. The **chip family** is the platform's primary chrome — always reach for it over the legacy primitives it is progressively replacing (`Input`→`ChipInput`, `Textarea`→`ChipTextarea`, `Modal`→`ChipModal`, `Select`/`Combobox`→`ChipSelect`/`ChipCombobox`/`ChipDropdown`, `Switch`→`ChipSwitch`, date field→`ChipDatePicker`). For context/action menus the canonical control is `DropdownMenu` — the standard menu (not a chip, and never a hand-rolled popover).
+Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from the `@sim/emcn/icons` subpath, and CSS modules from their file path. Never deep-import other component subpaths. The **chip family** is the platform's primary chrome — always reach for it over the legacy primitives it is progressively replacing (`Input`→`ChipInput`, `Textarea`→`ChipTextarea`, `Modal`→`ChipModal`, `Select`/`Combobox`→`ChipSelect`/`ChipCombobox`, `Switch`→`ChipSwitch`, date field→`ChipDatePicker`). For context/action menus the canonical control is `DropdownMenu` — the standard menu (not a chip, and never a hand-rolled popover).
 
 ## Chip chrome — single source of truth
 
 Never hand-roll the chip pill from raw class strings (they go stale). Compose from the canonical sources:
 
 - **Surface, typography + content tokens:** `chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells), and the row-state pair `chipHoverSurfaceClass` / `chipActiveSurfaceClass` (hover vs. selected — mutually exclusive, so a selected row holds its surface through hover; every hand-rolled row imports these rather than restating the literals). All are re-exported from the `@sim/emcn` barrel — no subpath import needed.
-- **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipDropdown`, `ChipSelect`, `ChipSwitch`) reuses it for visual parity.
+- **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipSelect`, `ChipDatePicker`) reuses it for visual parity.
 
 Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border` border (`chip-chrome.ts` still spells it through the legacy alias `--border-1`; new code writes `--border`).
 
@@ -24,15 +24,15 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`Chip` / `ChipLink`** — the pill button (`<button>` / Next `<Link>`). Variants: `primary`, `destructive`, `border-shadow`, `border`, `outline` (a true `--border` border, no shadow or hover fill); the bare chip is implicit (omit `variant`). `filled` is deliberately NOT a `Chip` variant — it is reserved for chip fields/triggers. For a selected/toggle chip use the `active` prop, never a variant. `leftIcon`/`rightIcon`, `active`, `fullWidth`. Chips carry **no outer margin** — space between them is the parent's `gap`, so never give a chip a margin, by default or through `className`.
 - **`ChipInput`** — single-line text field. `icon`, `endAdornment`, `error`, `inputClassName` (inner `<input>`); `className` styles the chrome wrapper.
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
-- **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
-- **`ChipDropdown`** — pill that opens a menu. Single OR multi-select via the discriminated `multiple` prop (one component, not two). Owns its trailing chevron — no `rightIcon`.
-- **`ChipSelect` / `ChipCombobox`** — `Combobox`-backed pickers with search, groups, multi-select; for richer lists than `ChipDropdown`.
-- **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` (with a `title`) is the escape hatch for controls the field doesn't cover. Every body field is a `ChipModalField`; the gutter rhythm that makes this matter is in `sim-styling.md` → "Form / chip-modal layout rhythm".
-- **`ChipSwitch`** — segmented pill control (built from `chipVariants`).
+- **`ChipTextarea`** — multi-line sibling. `monospace` for structured text, `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
+- **`ChipSelect`** — canonical menu selection. Single selection uses `value`/`onChange`; `multiSelect` uses `multiSelectValues`/`onMultiSelectChange`, checkbox rows, and stays open. Supports groups, search aliases, rich labels/icons, disabled options, optional single-selection checks, and trigger refs. Rich labels require a nonempty `searchTerms` array containing their visible text, followed by any aliases; plain string/number labels are searchable automatically. `showAllOption` clears to an empty selection; without it, use `placeholder` for the empty state. Owns its chevron. `dropdownWidth` accepts `'trigger'`, `'content'`, or pixels; `modal={false}` keeps outside-dialog filters non-modal, while nested dialogs retain their focus lock.
+- **`ChipCombobox`** — shared chip styling over the separate `Combobox` engine for editable values, asynchronous results, and virtualized lists. Plain menu selection, including searchable menus, uses `ChipSelect`.
+- **`ChipModal` + `ChipModalField`** — declarative compact modal. `orientation='horizontal'` places a field title beside its control, wraps on narrow surfaces, and keeps error/hint text below the row; vertical is the default. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` (with a `title`) is the escape hatch for controls the field doesn't cover. Every body field is a `ChipModalField`; the gutter rhythm that makes this matter is in `sim-styling.md` → "Form / chip-modal layout rhythm".
+- **`ChipButtonGroup` / `ChipSwitch`** — one Radix radio-group implementation with zero-gap segments and `default`/`compact` density. `ChipButtonGroup` accepts compound children; `ChipSwitch` adapts an options array.
 - **`ChipTag`** — 20px inline tag/badge (`mono`/`gray`/`invite`), not a pill trigger.
 - **`ChipDatePicker`** — chip-styled date field.
 - **`ChipTimePicker`** — minute-granular time sibling of `ChipDatePicker`, a `ChipInput` that leniently parses typed input (`9:47`, `947`, `2:05pm`, `14:30`), commits on Enter/blur, and re-renders the canonical `9:47 AM` label.
-- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
+- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipSelect` instead.
 - **`useScrollEdges` + `scrollFadeClass` / `scrollFadeAttributes`** — the canonical scroll-region edge treatment. The hook reports which edges hide content (tracking scroll and resizes; pass the element itself, held in state, when the region mounts after its owner, e.g. inside a Radix portal); the class and attributes fade a fixed 12px band at an active edge only, so a list that fits or sits at its top is never fogged. A floating control over the top edge sets `--scroll-fade-inset` to its height. A region that scrolls sideways (a tab row, a chip strip) uses `useScrollEdges(ref, { axis: 'x' })` with `scrollFadeXClass`; the attributes helper is shared. Any divider beside the region belongs to the neighboring block (`border-b` above, `border-t` below), never to the masked element, and shows only while that edge is active. Never hand-roll a `mask-image` gradient for a scroll region.
 - **`OverflowText`** — the canonical single-line overflow treatment for read-only human labels and titles. It owns `min-w-0`, fade-only clipping (never an ellipsis), the conditional 18px edge mask, and the full-value floating tooltip; consumers pass only layout/typography through `className`. `overflowTextClipClass` and `overflowTextFadeClass` are the complete base/faded treatments for the rare component that must own measurement itself; never pair either with `truncate`, `text-ellipsis`, or hover-time mask removal. Use `DropdownMenuItemLabel` for a menu label beside icons, checks, or actions. A non-editable `Combobox` passes the full visual value through `overlayLabel`; the combobox owns the visual overlay's fade and keeps its one accessible tooltip on the interactive layer. Keep ordinary `truncate` only for editable values, code/log/path content, dense or virtualized grids, and rich composite content that cannot supply a plain tooltip label. Multiline copy uses an intentional `line-clamp-*` treatment instead.
 
@@ -51,9 +51,27 @@ Declare keyboard intent on the action-owning primitive; never add document-level
 - **One source of truth for shared chrome.** Compose from `chip-chrome.ts` / `chipVariants`; never duplicate the chrome string.
 - **Props over `className` overrides.** When a consumer needs to change chrome, expose a prop (`error`, `icon`, `endAdornment`, `inputClassName`); reaching for `className` to restyle chrome is the smell.
 - **`cn()` for a single state toggle, CVA for genuine multiple variants.** A lone `error` boolean is `cn()`, not a CVA variant.
-- **Discriminated-union props for modes** (e.g. `multiple`, the modal field `type`) instead of near-duplicate components.
+- **Discriminated-union props for modes** (e.g. `multiSelect`, the modal field `type`) instead of near-duplicate components.
 - **Delete legacy variants after migration** — leave no dead paths.
 - **Verify CSS vars exist.** An undefined var resolves to `currentColor`, which draws black borders. Align to the canonical tokens: normal weight, `--text-body`, `--text-icon`.
 - Use Radix UI primitives for accessibility. Export the component and its `variants` (when using CVA). Document with TSDoc + a usage example.
 
 Color tokens and icon-size conventions are canonical in `.claude/rules/sim-styling.md` — follow it rather than restating.
+
+
+## Ordinary Button action geometry
+
+`Button` retains its existing appearance variants. For square actions use `iconSize`:
+`compact` (24px on the spacing scale), `compact-fixed` (24px), `regular` (28px),
+`roomy` (32px), or `touch` (40px). These values follow the root spacing scale;
+only `compact-fixed` stays fixed when root text is enlarged.
+Use `{ base: 'touch', sm: 'regular' }` for mobile/desktop targets. These props own
+geometry only; colour, radius and SVG stroke continue to come from the selected
+`variant` and `size`. `iconPadding` explicitly overrides the zero-padding geometry.
+Use `shape='round'` for circular actions, or omit it to retain the current radius.
+`size='inline'` is a 20px-high action with caption typography and compact horizontal
+padding. Prefer these supported props to size, padding and radius overrides.
+
+### Chip sizing and centered actions
+
+`Chip`, `ChipLink`, and `ChipInput` retain their default 30px height. Use `size="lg"` for the existing auth-scale 36px controls; the larger size follows the root font size. `Chip` and `ChipLink` accept `align="center"` to center their icon/label group, including full-width form actions. Long labels still shrink and retain their overflow treatment. Avoid descendant flex overrides to center chip labels. The default geometry exports remain unchanged for static consumers.
diff --git a/.claude/rules/sim-styling.md b/.claude/rules/sim-styling.md
index f146e7a547c..76b8cc0c54c 100644
--- a/.claude/rules/sim-styling.md
+++ b/.claude/rules/sim-styling.md
@@ -48,7 +48,11 @@ setWidth: (width) => {
 
 ## Text Scale
 
-The `@theme` block in `apps/sim/app/_styles/globals.css`: `text-micro` 10px, `text-xs` 11px, `text-caption` 12px, `text-small` 13px, `text-sm` 14px (Tailwind default), `text-base` 15px, `text-md` 16px, `text-lg` 18px (Tailwind default). `text-xs` is 11px here, so a caption written as `text-xs` is a pixel short. Field titles use `text-small`; hints/errors use `text-caption`. A literal `text-[Npx]` is either a rename to the matching token or an unmigrated straggler.
+Use the named scale in `apps/sim/app/_styles/globals.css`: `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px, `text-md`=16px, `text-title`=28px, `text-title-lg`=32px, and `text-display`=40px. The explicitly adopted stock entries retain their rem units and default leading: `text-sm`=0.875rem, `text-lg`=1.125rem, `text-xl`=1.25rem, and `text-2xl`=1.5rem (14/18/20/24px at the default root size). Field titles use `text-small`; hints/errors use `text-caption`; workflow titles use `text-md`.
+
+Preserve explicit line heights when replacing arbitrary sizes. Where the old size inherited its line height, use `leading-[inherit]` if the named utility would otherwise add a different default. Keep document-relative heading/code recipes and the thinking loader's proportional label sizing distinct from ordinary UI text.
+
+Use `font-inter` within the existing scoped Inter loading boundary; the utility does not load the font globally. Keep monospace for code, JSON, and credentials.
 
 Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), never `h-N w-N` or `h-[Npx] w-[Npx]`.
 
@@ -68,7 +72,7 @@ A scroll region that can hide rows past an edge uses `useScrollEdges` with `scro
 
 ## Font Weight
 
-Three steps, Tailwind's stock scale, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class only to step *up* from body.
+Three steps, explicitly adopted from Tailwind's stock scale in globals.css, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class to step *up* from body or to reset meaningful inherited weight. Raw CSS references the same `--font-weight-normal`, `--font-weight-medium`, and `--font-weight-semibold` definitions; their values remain 400/500/600.
 
 Never write an arbitrary weight (`font-[380]`, `font-[450]`, …) or a `--font-weight-*` variable, and never set `fontWeight` in an inline `style`: values clustered between the three steps do not read as hierarchy. Off-scale values are acceptable only where the design system cannot reach — react-email templates and the static `apps/sim/emails/broadcasts/*.html`, which email clients render without CSS variables.
 
diff --git a/.cursor/rules/emcn-components.mdc b/.cursor/rules/emcn-components.mdc
index b4743462057..e91304d188e 100644
--- a/.cursor/rules/emcn-components.mdc
+++ b/.cursor/rules/emcn-components.mdc
@@ -7,14 +7,14 @@ globs: ["packages/emcn/**"]
 
 # EMCN Components
 
-Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from the `@sim/emcn/icons` subpath, and CSS modules from their file path. Never deep-import other component subpaths. The **chip family** is the platform's primary chrome — always reach for it over the legacy primitives it is progressively replacing (`Input`→`ChipInput`, `Textarea`→`ChipTextarea`, `Modal`→`ChipModal`, `Select`/`Combobox`→`ChipSelect`/`ChipCombobox`/`ChipDropdown`, `Switch`→`ChipSwitch`, date field→`ChipDatePicker`). For context/action menus the canonical control is `DropdownMenu` — the standard menu (not a chip, and never a hand-rolled popover).
+Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from the `@sim/emcn/icons` subpath, and CSS modules from their file path. Never deep-import other component subpaths. The **chip family** is the platform's primary chrome — always reach for it over the legacy primitives it is progressively replacing (`Input`→`ChipInput`, `Textarea`→`ChipTextarea`, `Modal`→`ChipModal`, `Select`/`Combobox`→`ChipSelect`/`ChipCombobox`, `Switch`→`ChipSwitch`, date field→`ChipDatePicker`). For context/action menus the canonical control is `DropdownMenu` — the standard menu (not a chip, and never a hand-rolled popover).
 
 ## Chip chrome — single source of truth
 
 Never hand-roll the chip pill from raw class strings (they go stale). Compose from the canonical sources:
 
 - **Surface, typography + content tokens:** `chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells), and the row-state pair `chipHoverSurfaceClass` / `chipActiveSurfaceClass` (hover vs. selected — mutually exclusive, so a selected row holds its surface through hover; every hand-rolled row imports these rather than restating the literals). All are re-exported from the `@sim/emcn` barrel — no subpath import needed.
-- **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipDropdown`, `ChipSelect`, `ChipSwitch`) reuses it for visual parity.
+- **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipSelect`, `ChipDatePicker`) reuses it for visual parity.
 
 Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border` border (`chip-chrome.ts` still spells it through the legacy alias `--border-1`; new code writes `--border`).
 
@@ -25,15 +25,15 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`Chip` / `ChipLink`** — the pill button (`<button>` / Next `<Link>`). Variants: `primary`, `destructive`, `border-shadow`, `border`, `outline` (a true `--border` border, no shadow or hover fill); the bare chip is implicit (omit `variant`). `filled` is deliberately NOT a `Chip` variant — it is reserved for chip fields/triggers. For a selected/toggle chip use the `active` prop, never a variant. `leftIcon`/`rightIcon`, `active`, `fullWidth`. Chips carry **no outer margin** — space between them is the parent's `gap`, so never give a chip a margin, by default or through `className`.
 - **`ChipInput`** — single-line text field. `icon`, `endAdornment`, `error`, `inputClassName` (inner `<input>`); `className` styles the chrome wrapper.
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
-- **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
-- **`ChipDropdown`** — pill that opens a menu. Single OR multi-select via the discriminated `multiple` prop (one component, not two). Owns its trailing chevron — no `rightIcon`.
-- **`ChipSelect` / `ChipCombobox`** — `Combobox`-backed pickers with search, groups, multi-select; for richer lists than `ChipDropdown`.
-- **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` (with a `title`) is the escape hatch for controls the field doesn't cover. Every body field is a `ChipModalField`; the gutter rhythm that makes this matter is in `sim-styling.md` → "Form / chip-modal layout rhythm".
-- **`ChipSwitch`** — segmented pill control (built from `chipVariants`).
+- **`ChipTextarea`** — multi-line sibling. `monospace` for structured text, `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
+- **`ChipSelect`** — canonical menu selection. Single selection uses `value`/`onChange`; `multiSelect` uses `multiSelectValues`/`onMultiSelectChange`, checkbox rows, and stays open. Supports groups, search aliases, rich labels/icons, disabled options, optional single-selection checks, and trigger refs. Rich labels require a nonempty `searchTerms` array containing their visible text, followed by any aliases; plain string/number labels are searchable automatically. `showAllOption` clears to an empty selection; without it, use `placeholder` for the empty state. Owns its chevron. `dropdownWidth` accepts `'trigger'`, `'content'`, or pixels; `modal={false}` keeps outside-dialog filters non-modal, while nested dialogs retain their focus lock.
+- **`ChipCombobox`** — shared chip styling over the separate `Combobox` engine for editable values, asynchronous results, and virtualized lists. Plain menu selection, including searchable menus, uses `ChipSelect`.
+- **`ChipModal` + `ChipModalField`** — declarative compact modal. `orientation='horizontal'` places a field title beside its control, wraps on narrow surfaces, and keeps error/hint text below the row; vertical is the default. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` (with a `title`) is the escape hatch for controls the field doesn't cover. Every body field is a `ChipModalField`; the gutter rhythm that makes this matter is in `sim-styling.md` → "Form / chip-modal layout rhythm".
+- **`ChipButtonGroup` / `ChipSwitch`** — one Radix radio-group implementation with zero-gap segments and `default`/`compact` density. `ChipButtonGroup` accepts compound children; `ChipSwitch` adapts an options array.
 - **`ChipTag`** — 20px inline tag/badge (`mono`/`gray`/`invite`), not a pill trigger.
 - **`ChipDatePicker`** — chip-styled date field.
 - **`ChipTimePicker`** — minute-granular time sibling of `ChipDatePicker`, a `ChipInput` that leniently parses typed input (`9:47`, `947`, `2:05pm`, `14:30`), commits on Enter/blur, and re-renders the canonical `9:47 AM` label.
-- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
+- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipSelect` instead.
 - **`useScrollEdges` + `scrollFadeClass` / `scrollFadeAttributes`** — the canonical scroll-region edge treatment. The hook reports which edges hide content (tracking scroll and resizes; pass the element itself, held in state, when the region mounts after its owner, e.g. inside a Radix portal); the class and attributes fade a fixed 12px band at an active edge only, so a list that fits or sits at its top is never fogged. A floating control over the top edge sets `--scroll-fade-inset` to its height. A region that scrolls sideways (a tab row, a chip strip) uses `useScrollEdges(ref, { axis: 'x' })` with `scrollFadeXClass`; the attributes helper is shared. Any divider beside the region belongs to the neighboring block (`border-b` above, `border-t` below), never to the masked element, and shows only while that edge is active. Never hand-roll a `mask-image` gradient for a scroll region.
 - **`OverflowText`** — the canonical single-line overflow treatment for read-only human labels and titles. It owns `min-w-0`, fade-only clipping (never an ellipsis), the conditional 18px edge mask, and the full-value floating tooltip; consumers pass only layout/typography through `className`. `overflowTextClipClass` and `overflowTextFadeClass` are the complete base/faded treatments for the rare component that must own measurement itself; never pair either with `truncate`, `text-ellipsis`, or hover-time mask removal. Use `DropdownMenuItemLabel` for a menu label beside icons, checks, or actions. A non-editable `Combobox` passes the full visual value through `overlayLabel`; the combobox owns the visual overlay's fade and keeps its one accessible tooltip on the interactive layer. Keep ordinary `truncate` only for editable values, code/log/path content, dense or virtualized grids, and rich composite content that cannot supply a plain tooltip label. Multiline copy uses an intentional `line-clamp-*` treatment instead.
 
@@ -52,9 +52,27 @@ Declare keyboard intent on the action-owning primitive; never add document-level
 - **One source of truth for shared chrome.** Compose from `chip-chrome.ts` / `chipVariants`; never duplicate the chrome string.
 - **Props over `className` overrides.** When a consumer needs to change chrome, expose a prop (`error`, `icon`, `endAdornment`, `inputClassName`); reaching for `className` to restyle chrome is the smell.
 - **`cn()` for a single state toggle, CVA for genuine multiple variants.** A lone `error` boolean is `cn()`, not a CVA variant.
-- **Discriminated-union props for modes** (e.g. `multiple`, the modal field `type`) instead of near-duplicate components.
+- **Discriminated-union props for modes** (e.g. `multiSelect`, the modal field `type`) instead of near-duplicate components.
 - **Delete legacy variants after migration** — leave no dead paths.
 - **Verify CSS vars exist.** An undefined var resolves to `currentColor`, which draws black borders. Align to the canonical tokens: normal weight, `--text-body`, `--text-icon`.
 - Use Radix UI primitives for accessibility. Export the component and its `variants` (when using CVA). Document with TSDoc + a usage example.
 
 Color tokens and icon-size conventions are canonical in `.claude/rules/sim-styling.md` — follow it rather than restating.
+
+
+## Ordinary Button action geometry
+
+`Button` retains its existing appearance variants. For square actions use `iconSize`:
+`compact` (24px on the spacing scale), `compact-fixed` (24px), `regular` (28px),
+`roomy` (32px), or `touch` (40px). These values follow the root spacing scale;
+only `compact-fixed` stays fixed when root text is enlarged.
+Use `{ base: 'touch', sm: 'regular' }` for mobile/desktop targets. These props own
+geometry only; colour, radius and SVG stroke continue to come from the selected
+`variant` and `size`. `iconPadding` explicitly overrides the zero-padding geometry.
+Use `shape='round'` for circular actions, or omit it to retain the current radius.
+`size='inline'` is a 20px-high action with caption typography and compact horizontal
+padding. Prefer these supported props to size, padding and radius overrides.
+
+### Chip sizing and centered actions
+
+`Chip`, `ChipLink`, and `ChipInput` retain their default 30px height. Use `size="lg"` for the existing auth-scale 36px controls; the larger size follows the root font size. `Chip` and `ChipLink` accept `align="center"` to center their icon/label group, including full-width form actions. Long labels still shrink and retain their overflow treatment. Avoid descendant flex overrides to center chip labels. The default geometry exports remain unchanged for static consumers.
diff --git a/.cursor/rules/sim-styling.mdc b/.cursor/rules/sim-styling.mdc
index 3cc6ebcd23b..6d3783aff58 100644
--- a/.cursor/rules/sim-styling.mdc
+++ b/.cursor/rules/sim-styling.mdc
@@ -48,7 +48,11 @@ setWidth: (width) => {
 
 ## Text Scale
 
-The `@theme` block in `apps/sim/app/_styles/globals.css`: `text-micro` 10px, `text-xs` 11px, `text-caption` 12px, `text-small` 13px, `text-sm` 14px (Tailwind default), `text-base` 15px, `text-md` 16px, `text-lg` 18px (Tailwind default). `text-xs` is 11px here, so a caption written as `text-xs` is a pixel short. Field titles use `text-small`; hints/errors use `text-caption`. A literal `text-[Npx]` is either a rename to the matching token or an unmigrated straggler.
+Use the named scale in `apps/sim/app/_styles/globals.css`: `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px, `text-md`=16px, `text-title`=28px, `text-title-lg`=32px, and `text-display`=40px. The explicitly adopted stock entries retain their rem units and default leading: `text-sm`=0.875rem, `text-lg`=1.125rem, `text-xl`=1.25rem, and `text-2xl`=1.5rem (14/18/20/24px at the default root size). Field titles use `text-small`; hints/errors use `text-caption`; workflow titles use `text-md`.
+
+Preserve explicit line heights when replacing arbitrary sizes. Where the old size inherited its line height, use `leading-[inherit]` if the named utility would otherwise add a different default. Keep document-relative heading/code recipes and the thinking loader's proportional label sizing distinct from ordinary UI text.
+
+Use `font-inter` within the existing scoped Inter loading boundary; the utility does not load the font globally. Keep monospace for code, JSON, and credentials.
 
 Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), never `h-N w-N` or `h-[Npx] w-[Npx]`.
 
@@ -68,7 +72,7 @@ A scroll region that can hide rows past an edge uses `useScrollEdges` with `scro
 
 ## Font Weight
 
-Three steps, Tailwind's stock scale, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class only to step *up* from body.
+Three steps, explicitly adopted from Tailwind's stock scale in globals.css, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class to step *up* from body or to reset meaningful inherited weight. Raw CSS references the same `--font-weight-normal`, `--font-weight-medium`, and `--font-weight-semibold` definitions; their values remain 400/500/600.
 
 Never write an arbitrary weight (`font-[380]`, `font-[450]`, …) or a `--font-weight-*` variable, and never set `fontWeight` in an inline `style`: values clustered between the three steps do not read as hierarchy. Off-scale values are acceptable only where the design system cannot reach — react-email templates and the static `apps/sim/emails/broadcasts/*.html`, which email clients render without CSS variables.
 
diff --git a/CLAUDE.md b/CLAUDE.md
index a3f7da54018..542e3fe1f1a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -104,7 +104,7 @@ The `'use client'` server boundary, the app/worker runtime env split, and featur
 
 - Tailwind only. Inline `style` only for a genuinely dynamic value or a CSS variable. Never update global styles; keep styling local to the component. `cn()` from `@sim/emcn` for conditional classes. `size-*` for equal height and width (icons default `size-[14px]`), never `h-N w-N`.
 - Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons from `@sim/emcn/icons`; CSS modules by file path. Never deep-import other component subpaths.
-- The chip family is the canonical chrome: `ChipInput`, `ChipTextarea`, `ChipModal`/`ChipModalField`, `ChipSelect`/`ChipCombobox`/`ChipDropdown`, `ChipSwitch`, `ChipDatePicker`, `Chip`/`ChipLink`, `ChipTag`; `DropdownMenu` for context/action menus. Components own their chrome: consumers pass props (`error`, `icon`, `endAdornment`, `inputClassName`) and `className` carries only layout/sizing. Every labeled field inside a `ChipModalBody` is a `ChipModalField`.
+- The chip family is the canonical chrome: `ChipInput`, `ChipTextarea`, `ChipModal`/`ChipModalField`, `ChipSelect` (menu selection, including search) / `ChipCombobox` (editable/async/virtualized selection), `ChipSwitch`, `ChipDatePicker`, `Chip`/`ChipLink`, `ChipTag`; `DropdownMenu` for context/action menus. Components own their chrome: consumers pass props (`error`, `icon`, `endAdornment`, `inputClassName`) and `className` carries only layout/sizing. Every labeled field inside a `ChipModalBody` is a `ChipModalField`.
 - Consumer rules, tokens, text scale, and modal rhythm: `.claude/rules/sim-styling.md`. Authoring components in `packages/emcn`: `.claude/rules/emcn-components.md`. Product UI copy: `.claude/rules/sim-ui-copy.md`. Marketing copy and positioning: `.claude/rules/constitution.md`.
 
 ## Testing
diff --git a/apps/sim/app/(auth)/components/auth-header.tsx b/apps/sim/app/(auth)/components/auth-header.tsx
index 803e1b0ec57..1b8d278f9e4 100644
--- a/apps/sim/app/(auth)/components/auth-header.tsx
+++ b/apps/sim/app/(auth)/components/auth-header.tsx
@@ -14,7 +14,9 @@ interface AuthHeaderProps {
 export function AuthHeader({ title, description }: AuthHeaderProps) {
   return (
     <div className='space-y-1 text-center'>
-      <h1 className='text-balance text-[32px] text-[var(--text-primary)] leading-[1.2]'>{title}</h1>
+      <h1 className='text-balance text-[var(--text-primary)] text-title-lg leading-[1.2]'>
+        {title}
+      </h1>
       {description != null && (
         <p className='text-[var(--text-muted)] text-base leading-[1.5]'>{description}</p>
       )}
diff --git a/apps/sim/app/(auth)/components/auth-input.tsx b/apps/sim/app/(auth)/components/auth-input.tsx
index 396bae64cf8..a2c3bc12979 100644
--- a/apps/sim/app/(auth)/components/auth-input.tsx
+++ b/apps/sim/app/(auth)/components/auth-input.tsx
@@ -1,20 +1,11 @@
 'use client'
 
 import * as React from 'react'
-import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
-import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
+import { ChipInput, type ChipInputProps } from '@sim/emcn'
 
-/**
- * The auth text field — a {@link ChipInput} raised to the auth control height
- * ({@link AUTH_CONTROL_HEIGHT}) so every labeled field on the auth and invite
- * surfaces shares one slightly-taller geometry. All chip props pass through
- * (`error`, `endAdornment`, `icon`, …); only the height is owned here, and a
- * caller's `className` (layout only) still composes on top.
- */
-export const AuthInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
-  ({ className, ...props }, ref) => (
-    <ChipInput ref={ref} className={cn(AUTH_CONTROL_HEIGHT, className)} {...props} />
-  )
+/** Auth fields use the larger shared chip size while retaining native input props and refs. */
+export const AuthInput = React.forwardRef<HTMLInputElement, Omit<ChipInputProps, 'size'>>(
+  (props, ref) => <ChipInput {...props} ref={ref} size='lg' />
 )
 
 AuthInput.displayName = 'AuthInput'
diff --git a/apps/sim/app/(auth)/components/auth-nav-prompt.tsx b/apps/sim/app/(auth)/components/auth-nav-prompt.tsx
index d479a273b4a..bdea32fa50f 100644
--- a/apps/sim/app/(auth)/components/auth-nav-prompt.tsx
+++ b/apps/sim/app/(auth)/components/auth-nav-prompt.tsx
@@ -19,7 +19,7 @@ export function AuthNavPrompt({ prompt, href, linkLabel, onNavigate }: AuthNavPr
   return (
     <div className='flex items-center justify-center gap-1 text-sm'>
       {prompt && <span className='text-[var(--text-muted)]'>{prompt}</span>}
-      <ChipLink href={href} onClick={onNavigate} className='border border-[var(--border-1)]'>
+      <ChipLink href={href} onClick={onNavigate} variant='outline'>
         {linkLabel}
       </ChipLink>
     </div>
diff --git a/apps/sim/app/(auth)/components/auth-submit-button.tsx b/apps/sim/app/(auth)/components/auth-submit-button.tsx
index 5d37ecb12ea..139bec31892 100644
--- a/apps/sim/app/(auth)/components/auth-submit-button.tsx
+++ b/apps/sim/app/(auth)/components/auth-submit-button.tsx
@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react'
 import { Chip, Loader } from '@sim/emcn'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 interface AuthSubmitButtonProps {
   children: ReactNode
@@ -32,7 +31,8 @@ export function AuthSubmitButton({
       onClick={onClick}
       disabled={disabled || loading}
       fullWidth
-      className={AUTH_BUTTON_CLASS}
+      size='lg'
+      align='center'
     >
       {loading ? (
         <span className='flex items-center gap-2'>
diff --git a/apps/sim/app/(auth)/components/constants.ts b/apps/sim/app/(auth)/components/constants.ts
deleted file mode 100644
index beb515c525d..00000000000
--- a/apps/sim/app/(auth)/components/constants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Auth and invite surfaces use a slightly taller control than the 30px chip
- * default, matching the landing `HeroCta` field family (the landing's own
- * auth-adjacent CTA renders taller fields than in-app chips). Applied as the
- * single source of truth for every auth field and button height so the inputs,
- * submit, social, SSO, and invite action buttons stay on one line.
- */
-export const AUTH_CONTROL_HEIGHT = 'h-9'
-
-/**
- * Shared layout for full-width auth/invite chip buttons (submit, social, SSO,
- * invite actions). `[&>span]:flex-none` collapses the chip's stretching label
- * span — which carries `flex-1` — so the icon + label cluster truly centers
- * under `justify-center` (the landing `HeroCta` idiom). Height-only inputs use
- * {@link AUTH_CONTROL_HEIGHT}; buttons compose this on top of it.
- */
-export const AUTH_BUTTON_CLASS = `${AUTH_CONTROL_HEIGHT} justify-center [&>span]:flex-none`
diff --git a/apps/sim/app/(auth)/components/password-input.tsx b/apps/sim/app/(auth)/components/password-input.tsx
index f62e9c23ad3..e1c4867f24e 100644
--- a/apps/sim/app/(auth)/components/password-input.tsx
+++ b/apps/sim/app/(auth)/components/password-input.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
+import { ChipInput, type ChipInputProps } from '@sim/emcn'
 import { Eye, EyeOff } from '@sim/emcn/icons'
-import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
 
-type PasswordInputProps = Omit<ChipInputProps, 'type' | 'icon' | 'endAdornment'>
+type PasswordInputProps = Omit<ChipInputProps, 'type' | 'icon' | 'endAdornment' | 'size'>
 
 /**
  * A {@link ChipInput} that owns the password reveal toggle — the eye button is
@@ -19,7 +18,8 @@ export function PasswordInput({ error, className, ...props }: PasswordInputProps
   return (
     <ChipInput
       {...props}
-      className={cn(AUTH_CONTROL_HEIGHT, className)}
+      size='lg'
+      className={className}
       type={visible ? 'text' : 'password'}
       error={error}
       endAdornment={
diff --git a/apps/sim/app/(auth)/components/social-login-buttons.tsx b/apps/sim/app/(auth)/components/social-login-buttons.tsx
index 37df7815ed7..c4e944f01d7 100644
--- a/apps/sim/app/(auth)/components/social-login-buttons.tsx
+++ b/apps/sim/app/(auth)/components/social-login-buttons.tsx
@@ -1,13 +1,12 @@
 'use client'
 
 import { type ReactNode, useState } from 'react'
-import { Chip, cn } from '@sim/emcn'
+import { Chip } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { GithubIcon, GoogleIcon, MicrosoftIcon } from '@/components/icons'
 import { client } from '@/lib/auth/auth-client'
 import { DEFAULT_POST_AUTH_ROUTE } from '@/app/(auth)/auth-redirect'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 const logger = createLogger('SocialLoginButtons')
 
@@ -73,7 +72,9 @@ export function SocialLoginButtons({
     <Chip
       fullWidth
       leftIcon={GithubIcon}
-      className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+      variant='outline'
+      size='lg'
+      align='center'
       disabled={!githubAvailable || isGithubLoading}
       onClick={signInWithGithub}
     >
@@ -85,7 +86,9 @@ export function SocialLoginButtons({
     <Chip
       fullWidth
       leftIcon={GoogleIcon}
-      className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+      variant='outline'
+      size='lg'
+      align='center'
       disabled={!googleAvailable || isGoogleLoading}
       onClick={signInWithGoogle}
     >
@@ -97,7 +100,9 @@ export function SocialLoginButtons({
     <Chip
       fullWidth
       leftIcon={MicrosoftIcon}
-      className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+      variant='outline'
+      size='lg'
+      align='center'
       disabled={!microsoftAvailable || isMicrosoftLoading}
       onClick={signInWithMicrosoft}
     >
diff --git a/apps/sim/app/(auth)/components/sso-login-button.tsx b/apps/sim/app/(auth)/components/sso-login-button.tsx
index 1bbd06d5591..03ac768b86f 100644
--- a/apps/sim/app/(auth)/components/sso-login-button.tsx
+++ b/apps/sim/app/(auth)/components/sso-login-button.tsx
@@ -1,8 +1,7 @@
 'use client'
-import { Chip, cn } from '@sim/emcn'
+import { Chip } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
 import { isSsoEnabled } from '@/lib/core/config/env-flags'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 interface SSOLoginButtonProps {
   callbackURL?: string
@@ -28,14 +27,12 @@ export function SSOLoginButton({
 
   return (
     <Chip
-      variant={variant === 'primary' ? 'primary' : undefined}
+      variant={variant}
       fullWidth
       onClick={handleSSOClick}
-      className={cn(
-        AUTH_BUTTON_CLASS,
-        variant === 'outline' && 'border border-[var(--border-1)]',
-        className
-      )}
+      size='lg'
+      align='center'
+      className={className}
     >
       Sign in with SSO
     </Chip>
diff --git a/apps/sim/app/(auth)/oauth/consent/consent-view.tsx b/apps/sim/app/(auth)/oauth/consent/consent-view.tsx
index b083ef34f92..460cecf107d 100644
--- a/apps/sim/app/(auth)/oauth/consent/consent-view.tsx
+++ b/apps/sim/app/(auth)/oauth/consent/consent-view.tsx
@@ -14,7 +14,6 @@ import {
   AuthSubmitButton,
   AuthTextLink,
 } from '@/app/(auth)/components'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 import { OAuthConsentLoading } from '@/app/(auth)/oauth/consent/loading'
 import {
   useOAuthConsent,
@@ -166,7 +165,8 @@ export function OAuthConsentView({
           variant='border'
           fullWidth
           disabled={isPending}
-          className={AUTH_BUTTON_CLASS}
+          size='lg'
+          align='center'
           onClick={() => decide(false)}
         >
           {consent.isPending && consent.variables === false ? 'Declining…' : 'Deny'}
diff --git a/apps/sim/app/(auth)/verify/otp-error-source.test.tsx b/apps/sim/app/(auth)/verify/otp-error-source.test.tsx
new file mode 100644
index 00000000000..c87de642b6b
--- /dev/null
+++ b/apps/sim/app/(auth)/verify/otp-error-source.test.tsx
@@ -0,0 +1,174 @@
+/** @vitest-environment jsdom */
+import { act, type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react'
+import { emcnMock } from '@sim/testing/mocks/emcn.mock'
+import { nextNavigationMock } from '@sim/testing/mocks/next-navigation.mock'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  chatRequest: vi.fn(),
+  chatVerify: vi.fn(),
+  fileRequest: vi.fn(),
+  fileVerify: vi.fn(),
+}))
+
+vi.mock('@sim/emcn', () => ({
+  ...emcnMock,
+  ChipInput: ({
+    error: _error,
+    size: _size,
+    ...props
+  }: Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    error?: boolean
+    size?: string
+  }) => <input {...props} />,
+  Label: ({ children, htmlFor }: { children: ReactNode; htmlFor?: string }) => (
+    <label htmlFor={htmlFor}>{children}</label>
+  ),
+  InputOTP: ({
+    children,
+    value,
+    onChange,
+    'aria-invalid': invalid,
+  }: {
+    children: ReactNode
+    value: string
+    onChange: (value: string) => void
+    'aria-invalid'?: boolean
+  }) => (
+    <div>
+      <input
+        data-testid='otp-code'
+        aria-invalid={invalid}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      />
+      {children}
+    </div>
+  ),
+  InputOTPGroup: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  InputOTPSlot: ({ invalid, index }: { invalid?: boolean; index: number }) => (
+    <span data-otp-slot={index} data-invalid={invalid} />
+  ),
+}))
+vi.mock('@/lib/messaging/email/validation', () => ({
+  quickValidateEmail: () => ({ isValid: true }),
+}))
+vi.mock('@/app/(auth)/components', () => ({
+  AuthSubmitButton: ({
+    children,
+    loading: _loading,
+    loadingLabel: _loadingLabel,
+    ...props
+  }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    loading?: boolean
+    loadingLabel?: string
+  }) => (
+    <button type='submit' {...props}>
+      {children}
+    </button>
+  ),
+  AuthTextLink: (props: ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button type='button' {...props} />
+  ),
+}))
+vi.mock('@/app/(auth)/components/auth-button-classes', () => ({ AUTH_TEXT_LINK: '' }))
+vi.mock('@/components/auth/public-auth-header', () => ({
+  PublicAuthHeader: ({ title }: { title: string }) => <h1>{title}</h1>,
+}))
+vi.mock('@/app/f/[token]/public-file-auth-shell', () => ({
+  PublicFileAuthShell: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+}))
+vi.mock('next/navigation', () => nextNavigationMock)
+vi.mock('@/hooks/queries/chats', () => ({
+  useChatEmailOtpRequest: () => ({ mutateAsync: mocks.chatRequest, isPending: false }),
+  useChatEmailOtpVerify: () => ({ mutateAsync: mocks.chatVerify, isPending: false }),
+}))
+vi.mock('@/hooks/queries/public-shares', () => ({
+  usePublicFileOtpRequest: () => ({ mutateAsync: mocks.fileRequest, isPending: false }),
+  usePublicFileOtpVerify: () => ({ mutateAsync: mocks.fileVerify, isPending: false }),
+}))
+
+import EmailAuth from '@/app/(interfaces)/chat/components/auth/email/email-auth'
+import { PublicFileEmailAuth } from '@/app/f/[token]/public-file-email-auth'
+
+let root: Root
+let container: HTMLDivElement
+
+function changeInput(input: HTMLInputElement, value: string) {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, value)
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
+function input(selector: string) {
+  const found = container.querySelector<HTMLInputElement>(selector)
+  if (!found) throw new Error(`Missing input: ${selector}`)
+  return found
+}
+
+function button(label: string) {
+  const found = Array.from(container.querySelectorAll('button')).find(
+    (candidate) => candidate.textContent?.trim() === label
+  )
+  if (!found) throw new Error(`Missing button: ${label}`)
+  return found
+}
+
+function expectOtpInvalid(invalid: boolean) {
+  expect(container.querySelector('[data-testid="otp-code"]')?.getAttribute('aria-invalid')).toBe(
+    String(invalid)
+  )
+  const slots = container.querySelectorAll('[data-otp-slot]')
+  expect(slots).toHaveLength(6)
+  for (const slot of slots) expect(slot.getAttribute('data-invalid')).toBe(String(invalid))
+}
+
+beforeEach(() => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  mocks.chatRequest.mockResolvedValue({})
+  mocks.chatVerify.mockResolvedValue({})
+  mocks.fileRequest.mockResolvedValue({})
+  mocks.fileVerify.mockResolvedValue({})
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+describe('OTP error provenance', () => {
+  it('keeps the chat code valid on resend failure and marks only a failed verification invalid', async () => {
+    act(() => root.render(<EmailAuth identifier='chat-1' />))
+    act(() => changeInput(input('#email'), 'member@example.com'))
+    await act(async () => button('Continue').click())
+
+    mocks.chatRequest.mockRejectedValueOnce(new Error('Delivery failed'))
+    await act(async () => button('Resend').click())
+    expect(container.textContent).toContain('Delivery failed')
+    expectOtpInvalid(false)
+
+    mocks.chatVerify.mockRejectedValueOnce(new Error('Incorrect code'))
+    await act(async () => changeInput(input('[data-testid="otp-code"]'), '123456'))
+    expect(container.textContent).toContain('Incorrect code')
+    expectOtpInvalid(true)
+  })
+
+  it('keeps the public-file code valid on resend failure and marks only a failed verification invalid', async () => {
+    act(() => root.render(<PublicFileEmailAuth token='share-1' />))
+    act(() => changeInput(input('#email'), 'member@example.com'))
+    await act(async () => button('Continue').click())
+
+    mocks.fileRequest.mockRejectedValueOnce(new Error('Delivery failed'))
+    await act(async () => button('Resend').click())
+    expect(container.textContent).toContain('Delivery failed')
+    expectOtpInvalid(false)
+
+    mocks.fileVerify.mockRejectedValueOnce(new Error('Incorrect code'))
+    await act(async () => changeInput(input('[data-testid="otp-code"]'), '123456'))
+    expect(container.textContent).toContain('Incorrect code')
+    expectOtpInvalid(true)
+  })
+})
diff --git a/apps/sim/app/(auth)/verify/verify-content.tsx b/apps/sim/app/(auth)/verify/verify-content.tsx
index 88d1c2e9d67..3e45a82f3fb 100644
--- a/apps/sim/app/(auth)/verify/verify-content.tsx
+++ b/apps/sim/app/(auth)/verify/verify-content.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Suspense, useEffect, useState } from 'react'
-import { cn, InputOTP, InputOTPGroup, InputOTPSlot } from '@sim/emcn'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@sim/emcn'
 import { POST_AUTH_REDIRECT_STORAGE_KEY } from '@/app/(auth)/auth-redirect'
 import {
   AuthFormMessage,
@@ -84,14 +84,16 @@ function VerificationForm({
             </p>
 
             <div className='flex justify-center'>
-              <InputOTP maxLength={6} value={otp} onChange={handleOtpChange} disabled={isLoading}>
+              <InputOTP
+                maxLength={6}
+                value={otp}
+                onChange={handleOtpChange}
+                disabled={isLoading}
+                aria-invalid={isInvalidOtp}
+              >
                 <InputOTPGroup>
                   {OTP_SLOTS.map((index) => (
-                    <InputOTPSlot
-                      key={index}
-                      index={index}
-                      className={cn(isInvalidOtp && 'border-[var(--text-error)]')}
-                    />
+                    <InputOTPSlot key={index} index={index} invalid={isInvalidOtp} />
                   ))}
                 </InputOTPGroup>
               </InputOTP>
@@ -149,8 +151,8 @@ function VerificationFormFallback() {
   return (
     <div className='text-center'>
       <div className='animate-pulse'>
-        <div className='mx-auto mb-4 h-8 w-48 rounded bg-[var(--surface-4)]' />
-        <div className='mx-auto h-4 w-64 rounded bg-[var(--surface-4)]' />
+        <div className='mx-auto mb-4 h-8 w-48 rounded-sm bg-[var(--surface-4)]' />
+        <div className='mx-auto h-4 w-64 rounded-sm bg-[var(--surface-4)]' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/(interfaces)/chat/[identifier]/loading.tsx b/apps/sim/app/(interfaces)/chat/[identifier]/loading.tsx
index 405a06bc0e7..8393900a280 100644
--- a/apps/sim/app/(interfaces)/chat/[identifier]/loading.tsx
+++ b/apps/sim/app/(interfaces)/chat/[identifier]/loading.tsx
@@ -8,10 +8,10 @@ export default function ChatLoading() {
       <div className='border-[var(--border-1)] border-b px-4 py-3'>
         <div className='mx-auto flex max-w-3xl items-center justify-between'>
           <div className='flex items-center gap-[12px]'>
-            <Skeleton className='size-[28px] rounded-[6px]' />
-            <Skeleton className='h-[18px] w-[120px] rounded-[4px]' />
+            <Skeleton className='size-[28px] rounded-md' />
+            <Skeleton className='h-[18px] w-[120px] rounded-sm' />
           </div>
-          <Skeleton className='h-[28px] w-[80px] rounded-[6px]' />
+          <Skeleton className='h-[28px] w-[80px] rounded-md' />
         </div>
       </div>
       <div className='flex min-h-0 flex-1 items-center justify-center px-4'>
@@ -24,16 +24,16 @@ export default function ChatLoading() {
             <div className='mt-8 w-full space-y-8'>
               <div className='space-y-2'>
                 <Skeleton className='h-4 w-16' />
-                <Skeleton className='h-10 w-full rounded-[10px]' />
+                <Skeleton className='h-10 w-full rounded-lg' />
               </div>
-              <Skeleton className='h-10 w-full rounded-[10px]' />
+              <Skeleton className='h-10 w-full rounded-lg' />
             </div>
           </div>
         </div>
       </div>
       <div className='relative p-3 pb-4 md:p-4 md:pb-6'>
         <div className='relative mx-auto max-w-3xl md:max-w-[748px]'>
-          <Skeleton className='h-[48px] w-full rounded-[12px]' />
+          <Skeleton className='h-[48px] w-full rounded-xl' />
         </div>
       </div>
     </div>
diff --git a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
index 685f833aa33..c21790d4692 100644
--- a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
@@ -1,9 +1,10 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { cn, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
+import { ChipInput, cn, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { AuthSubmitButton, AuthTextLink } from '@/app/(auth)/components'
 import { useChatEmailOtpRequest, useChatEmailOtpVerify } from '@/hooks/queries/chats'
@@ -32,13 +33,17 @@ const validateEmailField = (emailValue: string): string[] => {
 
 export default function EmailAuth({ identifier }: EmailAuthProps) {
   const [email, setEmail] = useState('')
-  const [authError, setAuthError] = useState<string | null>(null)
+  const [authError, setAuthError] = useState<{
+    kind: 'verification' | 'request'
+    message: string
+  } | null>(null)
   const [emailErrors, setEmailErrors] = useState<string[]>([])
   const hasEmailError = emailErrors.length > 0
 
   const [showOtpVerification, setShowOtpVerification] = useState(false)
   const [otpValue, setOtpValue] = useState('')
   const [countdown, setCountdown] = useState(0)
+  const isInvalidOtp = authError?.kind === 'verification'
 
   const requestOtp = useChatEmailOtpRequest(identifier)
   const verifyOtp = useChatEmailOtpVerify(identifier)
@@ -87,7 +92,10 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
       await verifyOtp.mutateAsync({ email, otp: codeToVerify })
     } catch (error) {
       logger.error('Error verifying OTP:', error)
-      setAuthError(toError(error).message || 'Invalid verification code')
+      setAuthError({
+        kind: 'verification',
+        message: toError(error).message || 'Invalid verification code',
+      })
     }
   }
 
@@ -100,7 +108,10 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
       setOtpValue('')
     } catch (error) {
       logger.error('Error resending OTP:', error)
-      setAuthError(toError(error).message || 'Failed to resend verification code')
+      setAuthError({
+        kind: 'request',
+        message: toError(error).message || 'Failed to resend verification code',
+      })
       setCountdown(0)
     }
   }
@@ -109,16 +120,14 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
     <div className='flex flex-1 items-center justify-center px-4 py-16'>
       <div className='w-full max-w-[410px]'>
         <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              {showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              {showOtpVerification
+          <PublicAuthHeader
+            title={showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
+            description={
+              showOtpVerification
                 ? `A verification code has been sent to ${email}`
-                : 'This chat requires email verification'}
-            </p>
-          </div>
+                : 'This chat requires email verification'
+            }
+          />
 
           <div className='mt-8 w-full max-w-[410px]'>
             {!showOtpVerification ? (
@@ -133,7 +142,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
                   <div className='flex items-center justify-between'>
                     <Label htmlFor='email'>Email</Label>
                   </div>
-                  <Input
+                  <ChipInput
                     id='email'
                     name='email'
                     placeholder='Enter your email'
@@ -143,9 +152,8 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
                     autoCorrect='off'
                     value={email}
                     onChange={handleEmailChange}
-                    className={cn(
-                      hasEmailError && 'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                    )}
+                    size='lg'
+                    error={Boolean(hasEmailError)}
                   />
                   {hasEmailError && (
                     <div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
@@ -182,15 +190,12 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
                       }
                     }}
                     disabled={verifyOtp.isPending}
-                    className={cn('gap-2', authError && 'otp-error')}
+                    className={cn('gap-2', isInvalidOtp && 'otp-error')}
+                    aria-invalid={isInvalidOtp}
                   >
                     <InputOTPGroup>
                       {[0, 1, 2, 3, 4, 5].map((index) => (
-                        <InputOTPSlot
-                          key={index}
-                          index={index}
-                          className={cn(authError && 'border-[var(--text-error)]')}
-                        />
+                        <InputOTPSlot key={index} index={index} invalid={isInvalidOtp} />
                       ))}
                     </InputOTPGroup>
                   </InputOTP>
@@ -198,7 +203,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
 
                 {authError && (
                   <div className='mt-1 space-y-1 text-center text-[var(--text-error)] text-xs'>
-                    <p>{authError}</p>
+                    <p>{authError.message}</p>
                   </div>
                 )}
 
@@ -229,7 +234,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
                   </p>
                 </div>
 
-                <div className='text-center font-light text-sm'>
+                <div className='text-center font-normal text-sm'>
                   <AuthTextLink
                     onClick={() => {
                       setShowOtpVerification(false)
diff --git a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
index 378fba15cdc..cd49a26fa28 100644
--- a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import { useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
-import { Eye, EyeOff } from '@sim/emcn/icons'
+import { cn, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { AuthSubmitButton } from '@/app/(auth)/components'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
+import { AuthSubmitButton, PasswordInput } from '@/app/(auth)/components'
 import { useChatPasswordAuth } from '@/hooks/queries/chats'
 
 const logger = createLogger('PasswordAuth')
@@ -16,7 +16,6 @@ interface PasswordAuthProps {
 
 export default function PasswordAuth({ identifier }: PasswordAuthProps) {
   const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const hasPasswordError = passwordErrors.length > 0
   const authenticate = useChatPasswordAuth(identifier)
@@ -46,14 +45,10 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
     <div className='flex flex-1 items-center justify-center px-4 py-16'>
       <div className='w-full max-w-[410px]'>
         <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              Password Required
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              This chat is password-protected
-            </p>
-          </div>
+          <PublicAuthHeader
+            title='Password Required'
+            description='This chat is password-protected'
+          />
 
           <form
             onSubmit={(e) => {
@@ -67,37 +62,19 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
                 <Label htmlFor='password'>Password</Label>
               </div>
               <div className='relative'>
-                <div className='relative'>
-                  <Input
-                    id='password'
-                    name='password'
-                    required
-                    type={showPassword ? 'text' : 'password'}
-                    autoCapitalize='none'
-                    autoComplete='new-password'
-                    autoCorrect='off'
-                    placeholder='Enter password'
-                    value={password}
-                    onChange={handlePasswordChange}
-                    className={cn(
-                      'pr-10',
-                      hasPasswordError &&
-                        'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                    )}
-                  />
-                  <button
-                    type='button'
-                    onClick={() => setShowPassword(!showPassword)}
-                    className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
-                    aria-label={showPassword ? 'Hide password' : 'Show password'}
-                  >
-                    {showPassword ? (
-                      <EyeOff className='size-[18px]' />
-                    ) : (
-                      <Eye className='size-[18px]' />
-                    )}
-                  </button>
-                </div>
+                <PasswordInput
+                  id='password'
+                  name='password'
+                  required
+                  autoCapitalize='none'
+                  autoComplete='new-password'
+                  autoCorrect='off'
+                  placeholder='Enter password'
+                  value={password}
+                  onChange={handlePasswordChange}
+                  className='h-[34px]'
+                  error={hasPasswordError}
+                />
                 <div
                   className={cn(
                     'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
diff --git a/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx b/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
index c91c687b41e..c9bf0312f37 100644
--- a/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, StatusPageContent } from '@sim/emcn'
+import { Chip, StatusPageContent } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
 import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
@@ -14,14 +14,15 @@ export function ChatErrorState({ error }: ChatErrorStateProps) {
   return (
     <div className='flex flex-1 items-center justify-center px-4 py-16 text-center'>
       <StatusPageContent title='Chat Unavailable' description={error}>
-        <Button
-          type='button'
+        <Chip
           variant='primary'
-          className='h-[32px] w-full gap-2 px-2.5 text-sm'
           onClick={() => router.push(APP_ENTRY_PATH)}
+          fullWidth
+          type='button'
+          align='center'
         >
           Open Sim
-        </Button>
+        </Chip>
       </StatusPageContent>
     </div>
   )
diff --git a/apps/sim/app/(interfaces)/chat/components/input/input.tsx b/apps/sim/app/(interfaces)/chat/components/input/input.tsx
index 9bd9c9b8b60..95256482f3e 100644
--- a/apps/sim/app/(interfaces)/chat/components/input/input.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/input/input.tsx
@@ -130,7 +130,7 @@ export const ChatInput: React.FC<{
         {uploadErrors.length > 0 && (
           <div className='mb-3 flex flex-col gap-2'>
             {uploadErrors.map((error, idx) => (
-              <Badge key={`${error}-${idx}`} variant='red' size='lg' dot className='max-w-full'>
+              <Badge key={`${error}-${idx}`} variant='red' size='md' dot className='max-w-full'>
                 {error}
               </Badge>
             ))}
@@ -172,7 +172,7 @@ export const ChatInput: React.FC<{
               {attachedFiles.map((file) => (
                 <Tooltip.Root key={file.id}>
                   <Tooltip.Trigger asChild>
-                    <div className='group relative size-[56px] shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-3)]'>
+                    <div className='group relative size-[56px] shrink-0 cursor-pointer overflow-hidden rounded-lg border border-[var(--border-1)] bg-[var(--surface-3)]'>
                       {file.dataUrl ? (
                         <img
                           src={file.dataUrl}
@@ -182,7 +182,7 @@ export const ChatInput: React.FC<{
                       ) : (
                         <div className='flex size-full flex-col items-center justify-center gap-0.5 text-[var(--text-muted)]'>
                           <Paperclip className='size-[18px]' />
-                          <span className='max-w-[48px] truncate px-[2px] text-[9px]'>
+                          <span className='max-w-[48px] truncate px-[2px] text-micro'>
                             {file.name.split('.').pop()}
                           </span>
                         </div>
@@ -215,7 +215,7 @@ export const ChatInput: React.FC<{
             onKeyDown={handleKeyDown}
             placeholder={isDragOver ? 'Drop files here...' : 'Enter a message...'}
             rows={1}
-            className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[15px] text-[var(--text-primary)] leading-[24px] caret-[var(--text-primary)] outline-hidden [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
+            className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[var(--text-primary)] text-base leading-[24px] caret-[var(--text-primary)] outline-hidden [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
           />
 
           <div className='flex items-center justify-between'>
diff --git a/apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx b/apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx
index 838051a1817..0ac57babb30 100644
--- a/apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx
@@ -4,7 +4,7 @@ import { Button } from '@sim/emcn'
 interface PublicChatActionButtonProps
   extends Omit<
     ComponentProps<typeof Button>,
-    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'className'
+    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'className' | 'shape'
   > {
   variant: 'primary' | 'quiet'
   'aria-label': string
@@ -12,6 +12,6 @@ interface PublicChatActionButtonProps
 
 /** Public chat's circular composer action, retaining its primary and quiet palettes. */
 export const PublicChatActionButton = forwardRef<HTMLButtonElement, PublicChatActionButtonProps>(
-  (props, ref) => <Button {...props} ref={ref} className='size-[28px] rounded-full p-0' />
+  (props, ref) => <Button {...props} ref={ref} iconSize='regular' shape='round' />
 )
 PublicChatActionButton.displayName = 'PublicChatActionButton'
diff --git a/apps/sim/app/(interfaces)/chat/components/loading-state/loading-state.tsx b/apps/sim/app/(interfaces)/chat/components/loading-state/loading-state.tsx
index 5f7270578cd..9f4c2c0b0c6 100644
--- a/apps/sim/app/(interfaces)/chat/components/loading-state/loading-state.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/loading-state/loading-state.tsx
@@ -18,9 +18,9 @@ export function ChatLoadingState() {
             <div className='mt-8 w-full space-y-8'>
               <div className='space-y-2'>
                 <Skeleton className='h-4 w-16' />
-                <Skeleton className='h-10 w-full rounded-[10px]' />
+                <Skeleton className='h-10 w-full rounded-lg' />
               </div>
-              <Skeleton className='h-10 w-full rounded-[10px]' />
+              <Skeleton className='h-10 w-full rounded-lg' />
             </div>
           </div>
         </div>
diff --git a/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx b/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
index 9a355614557..b9dd835af01 100644
--- a/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
@@ -72,7 +72,8 @@ export function ChatMessageContainer({
           <Button
             onClick={scrollToBottom}
             size='sm'
-            className='gap-1 rounded-full px-3 shadow-medium'
+            shape='round'
+            className='gap-1 px-3 shadow-medium'
           >
             <ArrowDown className='size-3.5' />
             <span className='sr-only'>Scroll to bottom</span>
diff --git a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
index 938ea3f2b3c..10a96947a0f 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
@@ -172,7 +172,7 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
         variant='default'
         onClick={handleDownload}
         disabled={isDownloading}
-        className='group flex h-auto w-[200px] gap-2 rounded-lg px-3 py-2'
+        className='group flex w-[200px] gap-2 rounded-lg px-3 py-2'
       >
         <div className='flex size-8 shrink-0 items-center justify-center'>{renderIcon()}</div>
         <div className='min-w-0 flex-1 text-left'>
diff --git a/apps/sim/app/(interfaces)/chat/components/message/components/markdown-renderer.tsx b/apps/sim/app/(interfaces)/chat/components/message/components/markdown-renderer.tsx
index dd6199e063e..616dfda617e 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/components/markdown-renderer.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/components/markdown-renderer.tsx
@@ -101,7 +101,7 @@ const COMPONENTS = {
   },
 
   inlineCode: ({ children }: { children?: React.ReactNode }) => (
-    <code className='rounded bg-[var(--surface-5)] px-1 py-0.5 font-mono text-[var(--text-primary)] text-inherit'>
+    <code className='rounded-sm bg-[var(--surface-5)] px-1 py-0.5 font-mono text-[var(--text-primary)] text-inherit'>
       {children}
     </code>
   ),
diff --git a/apps/sim/app/(interfaces)/chat/components/message/message.tsx b/apps/sim/app/(interfaces)/chat/components/message/message.tsx
index 9458ed16be7..95cb39bf938 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/message.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/message.tsx
@@ -192,7 +192,7 @@ export const ClientChatMessage = memo(function ClientChatMessage({
                         />
                       ) : (
                         <>
-                          <div className='flex size-10 shrink-0 items-center justify-center rounded bg-[var(--surface-3)] md:size-12'>
+                          <div className='flex size-10 shrink-0 items-center justify-center rounded-sm bg-[var(--surface-3)] md:size-12'>
                             {getFileIcon(attachment.type)}
                           </div>
                           <div className='min-w-0 flex-1'>
diff --git a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/loading.tsx b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/loading.tsx
index 37d6027a3cb..e725843d701 100644
--- a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/loading.tsx
+++ b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/loading.tsx
@@ -5,34 +5,34 @@ export default function ResumeLoading() {
     <div className='bg-background'>
       <div className='border-b px-4 py-3'>
         <div className='mx-auto flex max-w-[1200px] items-center justify-between'>
-          <Skeleton className='h-[24px] w-[80px] rounded-[4px]' />
-          <Skeleton className='h-[28px] w-[100px] rounded-[6px]' />
+          <Skeleton className='h-[24px] w-[80px] rounded-sm' />
+          <Skeleton className='h-[28px] w-[100px] rounded-md' />
         </div>
       </div>
       <div className='mx-auto max-w-[1200px] px-6 py-8'>
         <div className='grid grid-cols-[280px_1fr] gap-6'>
           <div className='space-y-[8px]'>
-            <Skeleton className='h-[20px] w-[120px] rounded-[4px]' />
+            <Skeleton className='h-[20px] w-[120px] rounded-sm' />
             {Array.from({ length: 3 }).map((_, i) => (
-              <Skeleton key={i} className='h-[48px] w-full rounded-[8px]' />
+              <Skeleton key={i} className='h-[48px] w-full rounded-lg' />
             ))}
           </div>
-          <div className='rounded-[8px] border p-6'>
-            <Skeleton className='h-[24px] w-[200px] rounded-[4px]' />
-            <Skeleton className='mt-[12px] h-[16px] w-[320px] rounded-[4px]' />
+          <div className='rounded-lg border p-6'>
+            <Skeleton className='h-[24px] w-[200px] rounded-sm' />
+            <Skeleton className='mt-[12px] h-[16px] w-[320px] rounded-sm' />
             <div className='mt-[24px] space-y-[16px]'>
               <div className='space-y-[8px]'>
-                <Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
-                <Skeleton className='h-[40px] w-full rounded-[8px]' />
+                <Skeleton className='h-[14px] w-[80px] rounded-sm' />
+                <Skeleton className='h-[40px] w-full rounded-lg' />
               </div>
               <div className='space-y-[8px]'>
-                <Skeleton className='h-[14px] w-[100px] rounded-[4px]' />
-                <Skeleton className='h-[80px] w-full rounded-[8px]' />
+                <Skeleton className='h-[14px] w-[100px] rounded-sm' />
+                <Skeleton className='h-[80px] w-full rounded-lg' />
               </div>
             </div>
             <div className='mt-[24px] flex gap-[12px]'>
-              <Skeleton className='h-[40px] w-[120px] rounded-[8px]' />
-              <Skeleton className='h-[40px] w-[120px] rounded-[8px]' />
+              <Skeleton className='h-[40px] w-[120px] rounded-lg' />
+              <Skeleton className='h-[40px] w-[120px] rounded-lg' />
             </div>
           </div>
         </div>
diff --git a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx
index 5a88444c95a..b33eb45ecde 100644
--- a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx
+++ b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx
@@ -146,7 +146,7 @@ function renderStructuredValuePreview(value: unknown) {
           className='max-h-[220px]'
         />
         {truncated && (
-          <p className='mt-1 text-[11px] text-[var(--text-muted)]'>
+          <p className='mt-1 text-[var(--text-muted)] text-xs leading-[inherit]'>
             Value truncated for preview ({DISPLAY_VALUE_PREVIEW_MAX_CHARS.toLocaleString()} of{' '}
             {prettyPrinted.length.toLocaleString()} characters shown).
           </p>
@@ -158,11 +158,11 @@ function renderStructuredValuePreview(value: unknown) {
   const { text: stringValue, truncated } = truncateForPreview(String(value))
   return (
     <div className='max-w-full'>
-      <div className='inline-flex max-w-full rounded-[6px] border border-[var(--border)] bg-[var(--surface-5)] px-2 py-1 font-mono text-[var(--text-primary)] text-caption leading-4 [white-space:pre-wrap] [word-break:break-word]'>
+      <div className='inline-flex max-w-full rounded-md border border-[var(--border)] bg-[var(--surface-5)] px-2 py-1 font-mono text-[var(--text-primary)] text-caption leading-4 [white-space:pre-wrap] [word-break:break-word]'>
         {truncated ? `${stringValue}…` : stringValue}
       </div>
       {truncated && (
-        <p className='mt-1 text-[11px] text-[var(--text-muted)]'>
+        <p className='mt-1 text-[var(--text-muted)] text-xs leading-[inherit]'>
           Value truncated for preview ({DISPLAY_VALUE_PREVIEW_MAX_CHARS.toLocaleString()} of{' '}
           {String(value).length.toLocaleString()} characters shown).
         </p>
@@ -759,24 +759,27 @@ export default function ResumeExecutionPage({
         {/* Header */}
         <div className='mb-8 flex items-center justify-between'>
           <div>
-            <h1 className='text-[20px] text-[var(--text-primary)]'>Paused Execution</h1>
-            <p className='mt-1 text-[14px] text-[var(--text-secondary)]'>
+            <h1 className='text-[var(--text-primary)] text-xl leading-[inherit]'>
+              Paused Execution
+            </h1>
+            <p className='mt-1 text-[var(--text-secondary)] text-sm leading-[inherit]'>
               Select a pause point to review and resume
             </p>
           </div>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <Button
+              <Chip
                 variant='outline'
-                size='sm'
+                type='button'
                 onClick={handleRefreshExecution}
                 disabled={refreshingExecution}
-                className='gap-1.5 px-2.5'
+                leftAdornment={
+                  <RefreshCw className={cn('size-[14px]', refreshingExecution && 'animate-spin')} />
+                }
                 aria-label='Refresh execution details'
               >
-                <RefreshCw className={cn('size-[14px]', refreshingExecution && 'animate-spin')} />
                 Refresh
-              </Button>
+              </Chip>
             </Tooltip.Trigger>
             <Tooltip.Content>Refresh</Tooltip.Content>
           </Tooltip.Root>
@@ -785,7 +788,7 @@ export default function ResumeExecutionPage({
         {/* Main Layout */}
         <div className='grid grid-cols-[280px_1fr] gap-6'>
           {/* Pause Points List */}
-          <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
+          <div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
             <div className='border-[var(--border)] border-b px-4 py-3'>
               <Label>Pause Points</Label>
             </div>
@@ -817,17 +820,17 @@ export default function ResumeExecutionPage({
           {/* Detail Panel */}
           <div>
             {loadingDetail && !selectedDetail ? (
-              <div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
+              <div className='flex h-[200px] items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
                 <span className='text-[var(--text-secondary)] text-small'>Loading…</span>
               </div>
             ) : !selectedContextId ? (
-              <div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
+              <div className='flex h-[200px] items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
                 <span className='text-[var(--text-secondary)] text-small'>
                   Select a pause point
                 </span>
               </div>
             ) : !selectedDetail ? (
-              <div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
+              <div className='flex h-[200px] items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
                 <span className='text-[var(--text-secondary)] text-small'>
                   Could not load details
                 </span>
@@ -835,7 +838,7 @@ export default function ResumeExecutionPage({
             ) : (
               <div className='flex flex-col gap-4'>
                 {/* Status Header */}
-                <div className='flex items-center justify-between rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'>
+                <div className='flex items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'>
                   <div>
                     <Label>{getBlockName(selectedDetail.pausePoint)}</Label>
                     <p className='mt-[2px] text-[var(--text-muted)] text-caption'>
@@ -853,7 +856,7 @@ export default function ResumeExecutionPage({
                 </div>
 
                 {selectedDetail.pausePoint.automaticResumeWaitingReason && (
-                  <div className='rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'>
+                  <div className='rounded-lg border border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'>
                     <Label>Waiting to resume automatically</Label>
                     <p className='mt-1 text-[var(--text-secondary)] text-small'>
                       {selectedDetail.pausePoint.automaticResumeWaitingReason}
@@ -866,7 +869,7 @@ export default function ResumeExecutionPage({
 
                 {/* Already resolved - show form fields with submitted values */}
                 {selectedStatus === 'resumed' || selectedStatus === 'failed' ? (
-                  <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
+                  <div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
                     <div className='border-[var(--border)] border-b px-4 py-3'>
                       <Label>Resume Form</Label>
                     </div>
@@ -917,7 +920,7 @@ export default function ResumeExecutionPage({
                   <>
                     {/* Display Data */}
                     {responseStructureRows.length > 0 ? (
-                      <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
+                      <div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
                         <div className='border-[var(--border)] border-b px-4 py-3'>
                           <Label>Display Data</Label>
                         </div>
@@ -943,7 +946,7 @@ export default function ResumeExecutionPage({
                         </div>
                       </div>
                     ) : (
-                      <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
+                      <div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
                         <div className='border-[var(--border)] border-b px-4 py-3'>
                           <Label>Display Data</Label>
                         </div>
@@ -957,7 +960,7 @@ export default function ResumeExecutionPage({
 
                     {/* Resume Form */}
                     {isHumanMode && hasInputFormat ? (
-                      <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
+                      <div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
                         <div className='border-[var(--border)] border-b px-4 py-3'>
                           <Label>Resume Form</Label>
                         </div>
@@ -986,7 +989,7 @@ export default function ResumeExecutionPage({
                         </div>
                       </div>
                     ) : (
-                      <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
+                      <div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
                         <div className='border-[var(--border)] border-b px-4 py-3'>
                           <Label>Resume Input (JSON)</Label>
                         </div>
@@ -1005,7 +1008,8 @@ export default function ResumeExecutionPage({
                             placeholder='{"example": "value"}'
                             rows={6}
                             spellCheck={false}
-                            className='min-h-[180px] font-mono'
+                            monospace
+                            className='min-h-[180px]'
                           />
                         </div>
                       </div>
diff --git a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
index 4fbba3d3750..5787f2c8560 100644
--- a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
+++ b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
@@ -9,7 +9,7 @@ type LandingCtaSize = 'compact' | 'default' | 'display'
 
 export type LandingCtaSection = PostHogEventMap['landing_cta_clicked']['section']
 
-interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant'> {
+interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant' | 'size'> {
   size?: LandingCtaSize
   variant?: 'primary' | 'outline'
   /** Adds the animated chevron used by demo actions. */
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx
index 5d187bb7345..0d3ca4fb9d1 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx
@@ -1,4 +1,4 @@
-import { Chip, ChipDropdown, cn } from '@sim/emcn'
+import { Chip, ChipSelect, cn } from '@sim/emcn'
 import { Building, MoreHorizontal, Plus } from '@sim/emcn/icons'
 import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
 import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
@@ -47,11 +47,14 @@ export function EnterpriseMenuPreview({ layout = 'menu' }: EnterpriseMenuPreview
                 image={null}
                 status=''
                 roleControl={
-                  <ChipDropdown
+                  <ChipSelect
+                    showSelectedCheck
+                    modal={false}
+                    className='w-auto max-w-none'
                     value={member.role}
                     options={[{ value: member.role, label: member.role }]}
                     disabled={member.role === 'Owner'}
-                    matchTriggerWidth={false}
+                    dropdownWidth='content'
                   />
                 }
                 menu={<MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />}
diff --git a/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx b/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx
index bf89ed90878..7066f483191 100644
--- a/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx
+++ b/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx
@@ -2,7 +2,7 @@
 
 import { type ReactNode, useId, useRef, useState } from 'react'
 import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
-import { Chip, ChipDropdown, ChipInput, ChipTextarea, Label } from '@sim/emcn'
+import { Chip, ChipInput, ChipSelect, ChipTextarea, Label } from '@sim/emcn'
 import { Check } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import {
@@ -286,7 +286,10 @@ export function ContactForm() {
             />
           </ContactField>
           <ContactField label='Topic' required error={errors.topic}>
-            <ChipDropdown
+            <ChipSelect
+              showSelectedCheck
+              dropdownWidth='trigger'
+              modal={false}
               fullWidth
               className={FIELD_HEIGHT}
               value={form.topic || undefined}
diff --git a/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx b/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx
index 0a9f9c47f48..979ac1ef458 100644
--- a/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx
+++ b/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { type ReactNode, useEffect, useId, useState } from 'react'
-import { Chip, ChipDropdown, ChipInput, ChipTextarea, Label } from '@sim/emcn'
+import { Chip, ChipInput, ChipSelect, ChipTextarea, Label } from '@sim/emcn'
 import {
   DEMO_REQUEST_COMPANY_SIZE_OPTIONS,
   type DemoRequestBody,
@@ -302,7 +302,10 @@ export function DemoForm({ onComplete }: DemoFormProps) {
         </DemoField>
 
         <DemoField label='Company size' required>
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
             fullWidth
             className={FIELD_HEIGHT}
             value={form.companySize || undefined}
@@ -313,7 +316,10 @@ export function DemoForm({ onComplete }: DemoFormProps) {
         </DemoField>
 
         <DemoField label='What can we help you with?'>
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
             fullWidth
             className={FIELD_HEIGHT}
             value={form.topic}
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx
index 074ad524750..f4e1b23bd4f 100644
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { ChipDropdown, ChipInput } from '@sim/emcn'
+import { ChipInput, ChipSelect } from '@sim/emcn'
 import { Building, Search } from '@sim/emcn/icons'
 import {
   MemberRow,
@@ -64,7 +64,10 @@ export function EnterpriseMembersPreview() {
                 image={null}
                 status=''
                 roleControl={
-                  <ChipDropdown
+                  <ChipSelect
+                    showSelectedCheck
+                    modal={false}
+                    className='w-auto max-w-none'
                     aria-label={`Organization role for ${member.name}: ${ORGANIZATION_ROLES.find((option) => option.value === (organizationRoles[member.email] ?? member.role))?.label ?? 'Owner'}`}
                     value={organizationRoles[member.email] ?? member.role}
                     options={
@@ -76,7 +79,7 @@ export function EnterpriseMembersPreview() {
                       setOrganizationRoles((roles) => ({ ...roles, [member.email]: role }))
                     }
                     disabled={member.role === 'owner'}
-                    matchTriggerWidth={false}
+                    dropdownWidth='content'
                   />
                 }
               />
@@ -95,7 +98,10 @@ export function EnterpriseMembersPreview() {
                 image={null}
                 status=''
                 roleControl={
-                  <ChipDropdown
+                  <ChipSelect
+                    showSelectedCheck
+                    modal={false}
+                    className='w-auto max-w-none'
                     aria-label={`Workspace role for ${member.name}: ${WORKSPACE_ROLES.find((option) => option.value === (workspaceRoles[member.email] ?? (member.role === 'owner' ? 'admin' : 'write')))?.label}`}
                     value={
                       workspaceRoles[member.email] ?? (member.role === 'owner' ? 'admin' : 'write')
@@ -105,7 +111,7 @@ export function EnterpriseMembersPreview() {
                       setWorkspaceRoles((roles) => ({ ...roles, [member.email]: role }))
                     }
                     disabled={member.role === 'owner'}
-                    matchTriggerWidth={false}
+                    dropdownWidth='content'
                   />
                 }
               />
diff --git a/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx b/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx
index 2e1dba49f5f..af9574dcb6f 100644
--- a/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx
+++ b/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useId, useRef, useState } from 'react'
-import { Badge, Chip, ChipDropdown, ChipInput } from '@sim/emcn'
+import { Badge, Chip, ChipInput, ChipSelect } from '@sim/emcn'
 import { Library, ListFilter, Search, X } from '@sim/emcn/icons'
 import {
   MenuPreviewHeader,
@@ -109,13 +109,16 @@ export function LogHistoryPreview() {
             onChange={(event) => setQuery(event.target.value)}
             className='mr-auto min-w-0 flex-1'
           />
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            modal={false}
+            className='w-auto max-w-none'
             leftIcon={ListFilter}
             aria-label={`Filter sample logs by status: ${FILTERS.find((option) => option.value === filter)?.label ?? filter}`}
             value={filter}
             options={FILTERS}
             onChange={setFilter}
-            matchTriggerWidth={false}
+            dropdownWidth='content'
           />
         </MenuPreviewToolbar>
         <div className='relative flex min-h-0 flex-1 flex-col'>
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx
index 9eb6378eb52..7236265ea4b 100644
--- a/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import {
-  ChipDropdown,
   ChipModal,
   ChipModalBody,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  ChipSelect,
 } from '@sim/emcn'
 import { TagIcon, TypeNumber, TypeText } from '@sim/emcn/icons'
 import type { LeadRecord } from '@/app/(landing)/tables/components/tables-records-preview/data'
@@ -65,7 +65,11 @@ export function LeadRecordDetail({ record, onClose, onSave }: LeadRecordDetailPr
             </span>
           }
         >
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
+            className='w-auto max-w-none'
             value={draft.status}
             options={[
               { value: 'Qualified', label: 'Qualified' },
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 78b947eac66..5afb09d5693 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -71,6 +71,7 @@
     "Noto Color Emoji";
 
   --font-season: var(--font-season);
+  --font-inter: var(--font-inter);
   --font-body:
     ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial,
     sans-serif, Segoe UI Emoji, Segoe UI Symbol;
@@ -90,19 +91,34 @@
   --breakpoint-xl: 1280px;
   --breakpoint-2xl: 1536px;
 
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
   --text-micro: 10px;
   /**
-   * `xs` is the one size here that also exists in Tailwind's own scale, so it
-   * inherits `--text-xs--line-height` unless that is overridden too. v4's ratio
-   * (4/3) against an 11px size yields 14.67px, where v3 resolved 16.5px; the
-   * paired value keeps the leading where it was.
+   * Tailwind pairs `xs` with a default line-height ratio. Its v4 ratio (4/3)
+   * against our 11px size yields 14.67px; the explicit 1.5 preserves the
+   * existing 16.5px leading.
    */
   --text-xs: 11px;
   --text-xs--line-height: 1.5;
   --text-caption: 12px;
   --text-small: 13px;
+  /** Adopt the imported scale without changing its rem units or default leading. */
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
   --text-base: 15px;
   --text-md: 16px;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-title: 28px;
+  --text-title-lg: 32px;
+  --text-display: 40px;
 
   /**
    * Hairline scale key. Overriding `spacing` rather than `width`/`height` keeps
@@ -191,6 +207,9 @@
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
 
   /**
    * These names intentionally match the app's own `:root` custom properties, so
diff --git a/apps/sim/app/cli/auth/cli-auth-view.tsx b/apps/sim/app/cli/auth/cli-auth-view.tsx
index f7865af95da..18483fe7792 100644
--- a/apps/sim/app/cli/auth/cli-auth-view.tsx
+++ b/apps/sim/app/cli/auth/cli-auth-view.tsx
@@ -94,9 +94,9 @@ export function CliAuthView() {
         description='Approve only if the code below matches the one in your terminal.'
       />
       <div className='space-y-4'>
-        <div className='flex items-center justify-center rounded-[10px] border border-[var(--border-1)] py-5'>
+        <div className='flex items-center justify-center rounded-lg border border-[var(--border-1)] py-5'>
           {/* `pl` offsets the trailing letter-space `tracking` adds after the last glyph, which would otherwise pull the code left of optical center. */}
-          <code className='pl-[0.2em] font-mono text-[28px] text-[var(--text-primary)] leading-none tracking-[0.2em]'>
+          <code className='pl-[0.2em] font-mono text-[var(--text-primary)] text-title leading-none tracking-[0.2em]'>
             {request.pairing}
           </code>
         </div>
diff --git a/apps/sim/app/cli/auth/loading.tsx b/apps/sim/app/cli/auth/loading.tsx
index e6a96d20127..911ae79010e 100644
--- a/apps/sim/app/cli/auth/loading.tsx
+++ b/apps/sim/app/cli/auth/loading.tsx
@@ -11,11 +11,11 @@ import { AuthShell } from '@/app/(auth)/components'
 export function CliAuthLoading() {
   return (
     <div className='flex w-full flex-col items-center'>
-      <Skeleton className='h-[38px] w-[280px] rounded-[4px]' />
-      <Skeleton className='mt-1 h-[23px] w-[360px] rounded-[4px]' />
-      <Skeleton className='h-[23px] w-[240px] rounded-[4px]' />
-      <Skeleton className='mt-6 h-[70px] w-full rounded-[10px]' />
-      <Skeleton className='mt-4 h-9 w-full rounded-[10px]' />
+      <Skeleton className='h-[38px] w-[280px] rounded-sm' />
+      <Skeleton className='mt-1 h-[23px] w-[360px] rounded-sm' />
+      <Skeleton className='h-[23px] w-[240px] rounded-sm' />
+      <Skeleton className='mt-6 h-[70px] w-full rounded-lg' />
+      <Skeleton className='mt-4 h-9 w-full rounded-lg' />
     </div>
   )
 }
diff --git a/apps/sim/app/f/[token]/public-file-auth-shell.tsx b/apps/sim/app/f/[token]/public-file-auth-shell.tsx
index 24da9e8d470..8953a5a5895 100644
--- a/apps/sim/app/f/[token]/public-file-auth-shell.tsx
+++ b/apps/sim/app/f/[token]/public-file-auth-shell.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { SupportFooter } from '@/app/(auth)/components/support-footer'
 import { LogoShell } from '@/app/(landing)/components/logo-shell'
 
@@ -17,14 +18,7 @@ export function PublicFileAuthShell({ title, subtitle, children }: PublicFileAut
   return (
     <LogoShell center footer={<SupportFooter position='static' />}>
       <div className='flex w-full max-w-lg flex-col items-center justify-center px-4'>
-        <div className='space-y-1 text-center'>
-          <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-            {title}
-          </h1>
-          <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-            {subtitle}
-          </p>
-        </div>
+        <PublicAuthHeader title={title} description={subtitle} />
         <div className='mt-8 w-full max-w-[410px]'>{children}</div>
       </div>
     </LogoShell>
diff --git a/apps/sim/app/f/[token]/public-file-auth.tsx b/apps/sim/app/f/[token]/public-file-auth.tsx
index c0682b0d123..cf63af1b2fc 100644
--- a/apps/sim/app/f/[token]/public-file-auth.tsx
+++ b/apps/sim/app/f/[token]/public-file-auth.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
-import { Eye, EyeOff } from '@sim/emcn/icons'
+import { Label } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
-import { AuthSubmitButton } from '@/app/(auth)/components'
+import { AuthSubmitButton, PasswordInput } from '@/app/(auth)/components'
 import { PublicFileAuthShell } from '@/app/f/[token]/public-file-auth-shell'
 import { usePublicFileAuth } from '@/hooks/queries/public-shares'
 
@@ -21,7 +20,6 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) {
   const router = useRouter()
   const authenticate = usePublicFileAuth(token)
   const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   const handleAuthenticate = async () => {
@@ -49,35 +47,21 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) {
       >
         <div className='space-y-2'>
           <Label htmlFor='password'>Password</Label>
-          <div className='relative'>
-            <Input
-              id='password'
-              name='password'
-              required
-              type={showPassword ? 'text' : 'password'}
-              autoCapitalize='none'
-              autoComplete='current-password'
-              autoCorrect='off'
-              placeholder='Enter password'
-              value={password}
-              onChange={(e) => {
-                setPassword(e.target.value)
-                setError(null)
-              }}
-              className={cn(
-                'pr-10',
-                error && 'border-[var(--text-error)] focus:border-[var(--text-error)]'
-              )}
-            />
-            <button
-              type='button'
-              onClick={() => setShowPassword(!showPassword)}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
-              aria-label={showPassword ? 'Hide password' : 'Show password'}
-            >
-              {showPassword ? <EyeOff className='size-[18px]' /> : <Eye className='size-[18px]' />}
-            </button>
-          </div>
+          <PasswordInput
+            id='password'
+            name='password'
+            required
+            autoCapitalize='none'
+            autoComplete='current-password'
+            autoCorrect='off'
+            placeholder='Enter password'
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value)
+              setError(null)
+            }}
+            error={Boolean(error)}
+          />
           {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}
         </div>
 
diff --git a/apps/sim/app/f/[token]/public-file-email-auth.tsx b/apps/sim/app/f/[token]/public-file-email-auth.tsx
index 8839f44f4a7..fb84af1d8b4 100644
--- a/apps/sim/app/f/[token]/public-file-email-auth.tsx
+++ b/apps/sim/app/f/[token]/public-file-email-auth.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { cn, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
+import { ChipInput, cn, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { normalizeEmail } from '@sim/utils/string'
 import { useRouter } from 'next/navigation'
@@ -27,8 +27,12 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
   const [email, setEmail] = useState('')
   const [otp, setOtp] = useState('')
   const [sent, setSent] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+  const [error, setError] = useState<{
+    kind: 'verification' | 'request'
+    message: string
+  } | null>(null)
   const [countdown, setCountdown] = useState(0)
+  const isInvalidOtp = error?.kind === 'verification'
 
   useEffect(() => {
     if (countdown <= 0) return
@@ -38,7 +42,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
 
   const sendCode = async () => {
     if (!quickValidateEmail(normalizeEmail(email)).isValid) {
-      setError('Please enter a valid email address.')
+      setError({ kind: 'request', message: 'Please enter a valid email address.' })
       return
     }
     setError(null)
@@ -47,7 +51,10 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
       setSent(true)
       setOtp('')
     } catch (err) {
-      setError(getErrorMessage(err, 'Failed to send verification code'))
+      setError({
+        kind: 'request',
+        message: getErrorMessage(err, 'Failed to send verification code'),
+      })
     }
   }
 
@@ -58,7 +65,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
       await verifyOtp.mutateAsync({ email: normalizeEmail(email), otp: code })
       router.refresh()
     } catch (err) {
-      setError(getErrorMessage(err, 'Invalid verification code'))
+      setError({ kind: 'verification', message: getErrorMessage(err, 'Invalid verification code') })
     }
   }
 
@@ -70,7 +77,10 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
       setError(null)
     } catch (err) {
       setCountdown(0)
-      setError(getErrorMessage(err, 'Failed to resend verification code'))
+      setError({
+        kind: 'request',
+        message: getErrorMessage(err, 'Failed to resend verification code'),
+      })
     }
   }
 
@@ -89,7 +99,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
         >
           <div className='space-y-2'>
             <Label htmlFor='email'>Email</Label>
-            <Input
+            <ChipInput
               id='email'
               name='email'
               type='email'
@@ -103,9 +113,10 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
                 setEmail(e.target.value)
                 setError(null)
               }}
-              className={cn(error && 'border-[var(--text-error)] focus:border-[var(--text-error)]')}
+              size='lg'
+              error={Boolean(error)}
             />
-            {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}
+            {error ? <p className='text-[var(--text-error)] text-xs'>{error.message}</p> : null}
           </div>
 
           <AuthSubmitButton
@@ -141,21 +152,20 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
               if (value.length === 6) verifyCode(value)
             }}
             disabled={verifyOtp.isPending}
-            className={cn('gap-2', error && 'otp-error')}
+            className={cn('gap-2', isInvalidOtp && 'otp-error')}
+            aria-invalid={isInvalidOtp}
           >
             <InputOTPGroup>
               {[0, 1, 2, 3, 4, 5].map((i) => (
-                <InputOTPSlot
-                  key={i}
-                  index={i}
-                  className={cn(error && 'border-[var(--text-error)]')}
-                />
+                <InputOTPSlot key={i} index={i} invalid={isInvalidOtp} />
               ))}
             </InputOTPGroup>
           </InputOTP>
         </div>
 
-        {error ? <p className='text-center text-[var(--text-error)] text-xs'>{error}</p> : null}
+        {error ? (
+          <p className='text-center text-[var(--text-error)] text-xs'>{error.message}</p>
+        ) : null}
 
         <AuthSubmitButton
           type='button'
@@ -182,7 +192,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
           </p>
         </div>
 
-        <div className='text-center font-light text-sm'>
+        <div className='text-center font-normal text-sm'>
           <AuthTextLink
             onClick={() => {
               setSent(false)
diff --git a/apps/sim/app/f/[token]/public-file-sso-auth.tsx b/apps/sim/app/f/[token]/public-file-sso-auth.tsx
index 3e73581f715..20b38e83579 100644
--- a/apps/sim/app/f/[token]/public-file-sso-auth.tsx
+++ b/apps/sim/app/f/[token]/public-file-sso-auth.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
+import { ChipInput, Label } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { normalizeEmail } from '@sim/utils/string'
 import { useRouter } from 'next/navigation'
@@ -68,7 +68,7 @@ export function PublicFileSSOAuth({ token }: PublicFileSSOAuthProps) {
       >
         <div className='space-y-2'>
           <Label htmlFor='email'>Work Email</Label>
-          <Input
+          <ChipInput
             id='email'
             name='email'
             required
@@ -82,7 +82,8 @@ export function PublicFileSSOAuth({ token }: PublicFileSSOAuthProps) {
               setEmail(e.target.value)
               setError(null)
             }}
-            className={cn(error && 'border-[var(--text-error)] focus:border-[var(--text-error)]')}
+            size='lg'
+            error={Boolean(error)}
           />
           {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}
         </div>
diff --git a/apps/sim/app/invite/[id]/loading.tsx b/apps/sim/app/invite/[id]/loading.tsx
index b26abbbaf59..31e3d619994 100644
--- a/apps/sim/app/invite/[id]/loading.tsx
+++ b/apps/sim/app/invite/[id]/loading.tsx
@@ -3,11 +3,11 @@ import { Skeleton } from '@sim/emcn'
 export default function InviteLoading() {
   return (
     <div className='flex flex-col items-center justify-center'>
-      <Skeleton className='size-[48px] rounded-[12px]' />
-      <Skeleton className='mt-[16px] h-[24px] w-[200px] rounded-[4px]' />
-      <Skeleton className='mt-[8px] h-[14px] w-[280px] rounded-[4px]' />
-      <Skeleton className='mt-[4px] h-[14px] w-[240px] rounded-[4px]' />
-      <Skeleton className='mt-[24px] h-[44px] w-[200px] rounded-[10px]' />
+      <Skeleton className='size-[48px] rounded-xl' />
+      <Skeleton className='mt-[16px] h-[24px] w-[200px] rounded-sm' />
+      <Skeleton className='mt-[8px] h-[14px] w-[280px] rounded-sm' />
+      <Skeleton className='mt-[4px] h-[14px] w-[240px] rounded-sm' />
+      <Skeleton className='mt-[24px] h-[44px] w-[200px] rounded-lg' />
     </div>
   )
 }
diff --git a/apps/sim/app/invite/components/index.ts b/apps/sim/app/invite/components/index.ts
index f72433bf8a8..817d145aaae 100644
--- a/apps/sim/app/invite/components/index.ts
+++ b/apps/sim/app/invite/components/index.ts
@@ -1,4 +1,5 @@
 export { InvitationDisclosure } from '@/app/invite/components/invitation-disclosure'
 export { InvitationWorkspaceAccess } from '@/app/invite/components/invitation-workspace-access'
+export { InviteHeading } from '@/app/invite/components/invite-heading'
 export { default as InviteLayout } from '@/app/invite/components/layout'
 export { InviteStatusCard } from '@/app/invite/components/status-card'
diff --git a/apps/sim/app/invite/components/invite-heading.tsx b/apps/sim/app/invite/components/invite-heading.tsx
new file mode 100644
index 00000000000..c2b54626498
--- /dev/null
+++ b/apps/sim/app/invite/components/invite-heading.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+
+interface InviteHeadingProps {
+  title: ReactNode
+  children: ReactNode
+}
+
+/** Heading shared by invitation and email-preference states; subcopy stays with each caller. */
+export function InviteHeading({ title, children }: InviteHeadingProps) {
+  return (
+    <div className='space-y-1 text-center'>
+      <h1 className='text-[var(--text-primary)] text-title-lg tracking-tight'>{title}</h1>
+      {children}
+    </div>
+  )
+}
diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
index f137111f4c1..403e64fdb1e 100644
--- a/apps/sim/app/invite/components/status-card.tsx
+++ b/apps/sim/app/invite/components/status-card.tsx
@@ -1,7 +1,7 @@
 'use client'
-import { Chip, cn, Loader } from '@sim/emcn'
+import { Chip, Loader } from '@sim/emcn'
 import { AuthSubmitButton } from '@/app/(auth)/components'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
+import { InviteHeading } from '@/app/invite/components/invite-heading'
 
 /** A document navigation, so the marketing surface initializes its own theme store. */
 function returnHome(): void {
@@ -37,10 +37,9 @@ export function InviteStatusCard({
   if (type === 'loading') {
     return (
       <>
-        <div className='space-y-1 text-center'>
-          <h1 className='text-[32px] text-[var(--text-primary)] tracking-tight'>Loading</h1>
+        <InviteHeading title={'Loading'}>
           <p className='text-[var(--text-muted)]'>{description}</p>
-        </div>
+        </InviteHeading>
         <div className='mt-8 flex w-full items-center justify-center py-8'>
           <Loader className='size-8 text-[var(--text-muted)]' animate />
         </div>
@@ -50,10 +49,9 @@ export function InviteStatusCard({
 
   return (
     <>
-      <div className='space-y-1 text-center'>
-        <h1 className='text-[32px] text-[var(--text-primary)] tracking-tight'>{title}</h1>
+      <InviteHeading title={title}>
         <p className='text-[var(--text-muted)]'>{description}</p>
-      </div>
+      </InviteHeading>
 
       <div className='mt-8 w-full max-w-[410px] space-y-3'>
         {details}
@@ -81,7 +79,9 @@ export function InviteStatusCard({
               fullWidth
               onClick={action.onClick}
               disabled={action.disabled || action.loading}
-              className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border)]')}
+              variant='outline'
+              size='lg'
+              align='center'
             >
               {action.loading ? (
                 <span className='flex items-center gap-2'>
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index fa5a295eacd..a1ece9e3835 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -172,7 +172,7 @@ export default function PlaygroundPage() {
                   aria-label='Go back'
                   variant='ghost'
                   onClick={() => router.back()}
-                  className='size-8 p-0'
+                  iconSize='roomy'
                 >
                   <ArrowLeft className='size-4' />
                 </Button>
@@ -187,7 +187,7 @@ export default function PlaygroundPage() {
                   aria-label={isDarkMode ? 'Light mode' : 'Dark mode'}
                   variant='default'
                   onClick={toggleDarkMode}
-                  className='size-8 p-0'
+                  iconSize='roomy'
                 >
                   {isDarkMode ? <Sun className='size-4' /> : <Moon className='size-4' />}
                 </Button>
@@ -307,12 +307,6 @@ export default function PlaygroundPage() {
               <VariantRow label='destructive'>
                 <Button variant='destructive'>Destructive</Button>
               </VariantRow>
-              <VariantRow label='secondary'>
-                <Button variant='secondary'>Secondary</Button>
-              </VariantRow>
-              <VariantRow label='tertiary'>
-                <Button variant='tertiary'>Tertiary</Button>
-              </VariantRow>
               <VariantRow label='ghost'>
                 <Button variant='ghost'>Ghost</Button>
               </VariantRow>
@@ -344,14 +338,8 @@ export default function PlaygroundPage() {
                   <ChipButtonGroupItem value='javascript'>JavaScript</ChipButtonGroupItem>
                 </ChipButtonGroup>
               </VariantRow>
-              <VariantRow label='gap none'>
-                <ChipButtonGroup value='opt1' gap='none'>
-                  <ChipButtonGroupItem value='opt1'>Option 1</ChipButtonGroupItem>
-                  <ChipButtonGroupItem value='opt2'>Option 2</ChipButtonGroupItem>
-                </ChipButtonGroup>
-              </VariantRow>
-              <VariantRow label='gap sm'>
-                <ChipButtonGroup value='opt1' gap='sm'>
+              <VariantRow label='compact'>
+                <ChipButtonGroup value='opt1' size='compact'>
                   <ChipButtonGroupItem value='opt1'>Option 1</ChipButtonGroupItem>
                   <ChipButtonGroupItem value='opt2'>Option 2</ChipButtonGroupItem>
                 </ChipButtonGroup>
@@ -410,9 +398,6 @@ export default function PlaygroundPage() {
               <VariantRow label='amber'>
                 <Badge variant='amber'>Amber</Badge>
               </VariantRow>
-              <VariantRow label='teal'>
-                <Badge variant='teal'>Teal</Badge>
-              </VariantRow>
               <VariantRow label='cyan'>
                 <Badge variant='cyan'>Cyan</Badge>
               </VariantRow>
@@ -425,7 +410,6 @@ export default function PlaygroundPage() {
               <VariantRow label='sizes'>
                 <Badge size='sm'>Small</Badge>
                 <Badge size='md'>Medium</Badge>
-                <Badge size='lg'>Large</Badge>
               </VariantRow>
             </Section>
 
@@ -525,10 +509,7 @@ export default function PlaygroundPage() {
                 <Checkbox size='md' />
                 <span className='text-[var(--text-secondary)] text-sm'>Medium (16px)</span>
               </VariantRow>
-              <VariantRow label='size lg'>
-                <Checkbox size='lg' />
-                <span className='text-[var(--text-secondary)] text-sm'>Large (20px)</span>
-              </VariantRow>
+
               <VariantRow label='disabled'>
                 <Checkbox disabled />
                 <Checkbox disabled checked />
@@ -879,7 +860,7 @@ export default function PlaygroundPage() {
               <VariantRow label='inverted color scheme'>
                 <Popover colorScheme='inverted'>
                   <PopoverTrigger asChild>
-                    <Button variant='secondary'>Inverted Popover</Button>
+                    <Button variant='primary'>Inverted Popover</Button>
                   </PopoverTrigger>
                   <PopoverContent>
                     <PopoverItem>Item 1</PopoverItem>
diff --git a/apps/sim/app/unsubscribe/loading.tsx b/apps/sim/app/unsubscribe/loading.tsx
index 5f625c75bbd..e5a3aa10a8f 100644
--- a/apps/sim/app/unsubscribe/loading.tsx
+++ b/apps/sim/app/unsubscribe/loading.tsx
@@ -3,11 +3,11 @@ import { Skeleton } from '@sim/emcn'
 export default function UnsubscribeLoading() {
   return (
     <div className='flex flex-col items-center justify-center'>
-      <Skeleton className='size-[48px] rounded-[12px]' />
-      <Skeleton className='mt-[16px] h-[24px] w-[180px] rounded-[4px]' />
-      <Skeleton className='mt-[8px] h-[14px] w-[300px] rounded-[4px]' />
-      <Skeleton className='mt-[4px] h-[14px] w-[260px] rounded-[4px]' />
-      <Skeleton className='mt-[24px] h-[44px] w-[200px] rounded-[10px]' />
+      <Skeleton className='size-[48px] rounded-xl' />
+      <Skeleton className='mt-[16px] h-[24px] w-[180px] rounded-sm' />
+      <Skeleton className='mt-[8px] h-[14px] w-[300px] rounded-sm' />
+      <Skeleton className='mt-[4px] h-[14px] w-[260px] rounded-sm' />
+      <Skeleton className='mt-[24px] h-[44px] w-[200px] rounded-lg' />
     </div>
   )
 }
diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx
index b5f265fd18e..34083d2b4ee 100644
--- a/apps/sim/app/unsubscribe/unsubscribe.tsx
+++ b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -1,13 +1,12 @@
 'use client'
 
 import { Suspense } from 'react'
-import { Chip, cn, Loader } from '@sim/emcn'
+import { Chip, Loader } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useSearchParams } from 'next/navigation'
 import type { UnsubscribeType } from '@/lib/api/contracts/user'
 import { AuthSubmitButton } from '@/app/(auth)/components'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
-import { InviteLayout } from '@/app/invite/components'
+import { InviteHeading, InviteLayout } from '@/app/invite/components'
 import { useUnsubscribe, useUnsubscribeMutation } from '@/hooks/queries/unsubscribe'
 
 function UnsubscribeContent() {
@@ -39,10 +38,9 @@ function UnsubscribeContent() {
   if (loading) {
     return (
       <InviteLayout>
-        <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>Loading</h1>
+        <InviteHeading title={'Loading'}>
           <p className={'text-[var(--text-muted)] text-md'}>Validating your unsubscribe link…</p>
-        </div>
+        </InviteHeading>
         <div className={'mt-8 flex w-full items-center justify-center py-8'}>
           <Loader className='size-8 text-[var(--text-muted)]' animate />
         </div>
@@ -53,12 +51,9 @@ function UnsubscribeContent() {
   if (error) {
     return (
       <InviteLayout>
-        <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
-            Invalid Unsubscribe Link
-          </h1>
+        <InviteHeading title={'Invalid Unsubscribe Link'}>
           <p className={'text-[var(--text-muted)] text-md'}>{error}</p>
-        </div>
+        </InviteHeading>
 
         <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
           <AuthSubmitButton type='button' onClick={() => window.history.back()} loadingLabel=''>
@@ -72,15 +67,12 @@ function UnsubscribeContent() {
   if (data?.isTransactional) {
     return (
       <InviteLayout>
-        <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
-            Important Account Emails
-          </h1>
+        <InviteHeading title={'Important Account Emails'}>
           <p className={'text-[var(--text-muted)] text-md'}>
             Transactional emails like password resets, account confirmations, and security alerts
             cannot be unsubscribed from as they contain essential information for your account.
           </p>
-        </div>
+        </InviteHeading>
 
         <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
           <AuthSubmitButton type='button' onClick={() => window.close()} loadingLabel=''>
@@ -94,15 +86,12 @@ function UnsubscribeContent() {
   if (unsubscribed) {
     return (
       <InviteLayout>
-        <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
-            Successfully Unsubscribed
-          </h1>
+        <InviteHeading title={'Successfully Unsubscribed'}>
           <p className={'text-[var(--text-muted)] text-md'}>
             You have been unsubscribed from our emails. You will stop receiving emails within 48
             hours.
           </p>
-        </div>
+        </InviteHeading>
 
         <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
           <AuthSubmitButton type='button' onClick={() => window.close()} loadingLabel=''>
@@ -117,15 +106,12 @@ function UnsubscribeContent() {
 
   return (
     <InviteLayout>
-      <div className='space-y-1 text-center'>
-        <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
-          Email Preferences
-        </h1>
+      <InviteHeading title={'Email Preferences'}>
         <p className={'text-[var(--text-muted)] text-md'}>
           Choose which emails you'd like to stop receiving.
         </p>
         <p className={'text-[var(--text-muted)] text-sm'}>{data?.email}</p>
-      </div>
+      </InviteHeading>
 
       <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
         <AuthSubmitButton
@@ -152,7 +138,9 @@ function UnsubscribeContent() {
             isAlreadyUnsubscribedFromAll ||
             data?.currentPreferences.unsubscribeMarketing
           }
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+          variant='outline'
+          size='lg'
+          align='center'
         >
           {data?.currentPreferences.unsubscribeMarketing
             ? 'Unsubscribed from Marketing'
@@ -167,7 +155,9 @@ function UnsubscribeContent() {
             isAlreadyUnsubscribedFromAll ||
             data?.currentPreferences.unsubscribeUpdates
           }
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+          variant='outline'
+          size='lg'
+          align='center'
         >
           {data?.currentPreferences.unsubscribeUpdates
             ? 'Unsubscribed from Updates'
@@ -182,7 +172,9 @@ function UnsubscribeContent() {
             isAlreadyUnsubscribedFromAll ||
             data?.currentPreferences.unsubscribeNotifications
           }
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+          variant='outline'
+          size='lg'
+          align='center'
         >
           {data?.currentPreferences.unsubscribeNotifications
             ? 'Unsubscribed from Notifications'
@@ -205,10 +197,9 @@ export default function Unsubscribe() {
     <Suspense
       fallback={
         <InviteLayout>
-          <div className='space-y-1 text-center'>
-            <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>Loading</h1>
+          <InviteHeading title={'Loading'}>
             <p className={'text-[var(--text-muted)] text-md'}>Validating your unsubscribe link…</p>
-          </div>
+          </InviteHeading>
           <div className={'mt-8 flex w-full items-center justify-center py-8'}>
             <Loader className='size-8 text-[var(--text-muted)]' animate />
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx
new file mode 100644
index 00000000000..b91cc7e471e
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx
@@ -0,0 +1,159 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, createRef } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  CodeSearchOverlay,
+  type CodeSearchOverlayProps,
+} from '@/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay'
+
+let host: HTMLDivElement
+let root: Root
+const inputRef = createRef<HTMLInputElement>()
+
+const callbacks = {
+  onQueryChange: vi.fn(),
+  onPrevious: vi.fn(),
+  onNext: vi.fn(),
+  onClose: vi.fn(),
+}
+const parentClick = vi.fn()
+
+function renderOverlay(props: Partial<CodeSearchOverlayProps> = {}) {
+  act(() =>
+    root.render(
+      <div onClick={parentClick}>
+        <CodeSearchOverlay
+          className='top-0 right-0'
+          inputKind='chip'
+          inputRef={inputRef}
+          query='error'
+          matchCount={3}
+          currentMatchIndex={1}
+          {...callbacks}
+          {...props}
+        />
+      </div>
+    )
+  )
+  const overlay = host.firstElementChild?.firstElementChild as HTMLDivElement
+  const input = overlay.querySelector('input') as HTMLInputElement
+  return { overlay, input }
+}
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.clearAllMocks()
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+})
+
+describe('CodeSearchOverlay', () => {
+  it('shares the floating chrome and routes query, navigation, and close actions', () => {
+    const { overlay, input } = renderOverlay()
+    expect(overlay.className).toContain('h-[34px]')
+    expect(overlay.className).toContain('rounded-sm bg-[var(--surface-1)]')
+    expect(overlay.className).toContain('top-0 right-0')
+    expect(overlay.getAttribute('role')).toBe('presentation')
+    expect(inputRef.current).toBe(input)
+    expect(input.getAttribute('aria-label')).toBe('Search code')
+    expect(input.value).toBe('error')
+    expect(overlay.textContent).toContain('2/3')
+    const tally = overlay.querySelector('[aria-live="polite"][aria-atomic="true"]')
+    expect(tally?.textContent).toBe('2/3')
+
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+    act(() => {
+      setter?.call(input, 'failed')
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+    expect(callbacks.onQueryChange).toHaveBeenCalledWith('failed')
+    act(() => {
+      overlay.querySelector<HTMLButtonElement>('[aria-label="Previous match"]')?.click()
+      overlay.querySelector<HTMLButtonElement>('[aria-label="Next match"]')?.click()
+      overlay.querySelector<HTMLButtonElement>('[aria-label="Close search"]')?.click()
+    })
+    expect(callbacks.onPrevious).toHaveBeenCalledTimes(1)
+    expect(callbacks.onNext).toHaveBeenCalledTimes(1)
+    expect(callbacks.onClose).toHaveBeenCalledTimes(1)
+    expect(parentClick).not.toHaveBeenCalled()
+
+    renderOverlay({ matchCount: 0, currentMatchIndex: 0 })
+    expect(tally?.textContent).toBe('0/0')
+  })
+
+  it('keeps preview search compact in a floating overlay with a usable input ref', () => {
+    const { overlay, input } = renderOverlay({
+      inputKind: 'plain',
+      className: 'top-10 right-[8px]',
+    })
+    expect(overlay.getAttribute('role')).toBe('presentation')
+    expect(overlay.className).toContain('top-10 right-[8px]')
+    expect(overlay.hasAttribute('data-toolbar-root')).toBe(false)
+    expect(input.parentElement?.className).toContain('h-[23px]')
+    expect(inputRef.current).toBe(input)
+
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+    act(() => {
+      setter?.call(input, 'preview')
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      overlay.querySelector<HTMLButtonElement>('[aria-label="Next match"]')?.click()
+    })
+    expect(callbacks.onQueryChange).toHaveBeenCalledWith('preview')
+    expect(callbacks.onNext).toHaveBeenCalledTimes(1)
+    expect(parentClick).not.toHaveBeenCalled()
+  })
+
+  it('retains the attached terminal edge, marker, wider tally, and disabled navigation', () => {
+    const { overlay, input } = renderOverlay({
+      appearance: 'attached',
+      inputKind: 'plain',
+      className: 'top-[30px] right-[8px]',
+      query: '',
+      matchCount: 0,
+      currentMatchIndex: 0,
+    })
+    expect(overlay.className).toContain('rounded-b-sm border-t-0 bg-[var(--bg)]')
+    expect(overlay.getAttribute('data-toolbar-root')).toBe('true')
+    expect(overlay.getAttribute('data-search-active')).toBe('true')
+    expect(overlay.hasAttribute('role')).toBe(false)
+    expect(input.parentElement?.className).toContain('h-[23px]')
+    expect(input.parentElement?.className).toContain('w-[94px]')
+    expect(input.className).toContain('text-caption')
+    expect(overlay.textContent).toContain('No results')
+    expect(overlay.querySelector('span.w-\\[58px\\]')).not.toBeNull()
+    const previous = overlay.querySelector<HTMLButtonElement>('[aria-label="Previous match"]')
+    const next = overlay.querySelector<HTMLButtonElement>('[aria-label="Next match"]')
+    const close = overlay.querySelector<HTMLButtonElement>('[aria-label="Close search"]')
+    expect(previous?.disabled).toBe(true)
+    expect(next?.disabled).toBe(true)
+    expect(close?.disabled).toBe(false)
+    expect(previous?.className).toContain('-m-1.5')
+    expect(previous?.querySelector('svg')?.getAttribute('class')).toContain('size-[14px]')
+    act(() => {
+      previous?.click()
+      next?.click()
+      close?.click()
+    })
+    expect(callbacks.onPrevious).not.toHaveBeenCalled()
+    expect(callbacks.onNext).not.toHaveBeenCalled()
+    expect(callbacks.onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows the compact no-results tally for other code panels', () => {
+    const { overlay } = renderOverlay({ matchCount: 0, currentMatchIndex: 0 })
+    expect(overlay.textContent).toContain('0/0')
+    expect(overlay.getAttribute('data-toolbar-root')).toBeNull()
+    expect(
+      overlay.querySelector<HTMLButtonElement>('[aria-label="Previous match"]')?.disabled
+    ).toBe(true)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx
new file mode 100644
index 00000000000..d8750794cf5
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx
@@ -0,0 +1,100 @@
+import type { ChangeEvent, Ref } from 'react'
+import { Button, ChipInput, cn } from '@sim/emcn'
+import { ArrowDown, ArrowUp, X } from '@sim/emcn/icons'
+
+export interface CodeSearchOverlayProps {
+  /** The attached terminal panel has a joined lower edge and wider result tally. */
+  appearance?: 'floating' | 'attached'
+  /** Position relative to the owning code panel. */
+  className: string
+  /** Logs use the 30px chip field; previews and terminal output use compact search. */
+  inputKind: 'chip' | 'plain'
+  inputRef: Ref<HTMLInputElement>
+  query: string
+  onQueryChange: (query: string) => void
+  matchCount: number
+  currentMatchIndex: number
+  onPrevious: () => void
+  onNext: () => void
+  onClose: () => void
+}
+
+/** Shared controls for searching a Code.Viewer without owning its search state. */
+export function CodeSearchOverlay({
+  appearance = 'floating',
+  className,
+  inputKind,
+  inputRef,
+  query,
+  onQueryChange,
+  matchCount,
+  currentMatchIndex,
+  onPrevious,
+  onNext,
+  onClose,
+}: CodeSearchOverlayProps) {
+  const attached = appearance === 'attached'
+  const inputProps = {
+    ref: inputRef,
+    type: 'text',
+    value: query,
+    onChange: (event: ChangeEvent<HTMLInputElement>) => onQueryChange(event.target.value),
+    placeholder: 'Search...',
+    'aria-label': 'Search code',
+  } as const
+  const actionProps = {
+    type: 'button' as const,
+    variant: 'ghost' as const,
+    iconPadding: attached ? ('md' as const) : ('sm' as const),
+    className: attached ? '-m-1.5' : undefined,
+  }
+  const iconClass = attached ? 'size-[14px]' : 'size-[12px]'
+
+  return (
+    <div
+      role={attached ? undefined : 'presentation'}
+      className={cn(
+        'absolute z-30 flex h-[34px] items-center gap-1.5 border border-[var(--border)] px-1.5 shadow-xs',
+        attached ? 'rounded-b-sm border-t-0 bg-[var(--bg)]' : 'rounded-sm bg-[var(--surface-1)]',
+        className
+      )}
+      onClick={(event) => event.stopPropagation()}
+      data-toolbar-root={attached ? true : undefined}
+      data-search-active={attached ? true : undefined}
+    >
+      {inputKind === 'chip' ? (
+        <ChipInput {...inputProps} className='mr-0.5 w-[94px]' />
+      ) : (
+        <ChipInput {...inputProps} appearance='compactSearch' className='mr-0.5 w-[94px]' />
+      )}
+      <span
+        aria-live='polite'
+        aria-atomic='true'
+        className={cn(
+          attached ? 'w-[58px] text-xs' : 'min-w-[45px] text-center text-xs',
+          matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
+        )}
+      >
+        {matchCount > 0
+          ? `${currentMatchIndex + 1}/${matchCount}`
+          : attached
+            ? 'No results'
+            : '0/0'}
+      </span>
+      <Button
+        {...actionProps}
+        onClick={onPrevious}
+        disabled={matchCount === 0}
+        aria-label='Previous match'
+      >
+        <ArrowUp className={iconClass} />
+      </Button>
+      <Button {...actionProps} onClick={onNext} disabled={matchCount === 0} aria-label='Next match'>
+        <ArrowDown className={iconClass} />
+      </Button>
+      <Button {...actionProps} onClick={onClose} aria-label='Close search'>
+        <X className={iconClass} />
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
index ceb2b0b709b..6ec4de4377e 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
@@ -129,7 +129,8 @@ export const FindBar = memo(function FindBar({
             type='button'
             variant='ghost'
             size='icon'
-            className='size-6 shrink-0'
+            iconSize='compact'
+            className='shrink-0'
             aria-label={showReplace ? 'Hide replace' : 'Show replace'}
             aria-expanded={showReplace}
             onClick={() => setShowReplace((visible) => !visible)}
@@ -179,7 +180,8 @@ export const FindBar = memo(function FindBar({
           type='button'
           variant='ghost'
           size='icon'
-          className='size-6 shrink-0'
+          iconSize='compact'
+          className='shrink-0'
           aria-label='Previous match'
           title='Previous match (Shift+Enter)'
           disabled={!navEnabled}
@@ -191,7 +193,8 @@ export const FindBar = memo(function FindBar({
           type='button'
           variant='ghost'
           size='icon'
-          className='size-6 shrink-0'
+          iconSize='compact'
+          className='shrink-0'
           aria-label='Next match'
           title='Next match (Enter)'
           disabled={!navEnabled}
@@ -203,7 +206,8 @@ export const FindBar = memo(function FindBar({
           type='button'
           variant='ghost'
           size='icon'
-          className='size-6 shrink-0'
+          iconSize='compact'
+          className='shrink-0'
           aria-label='Close find'
           title='Close (Esc)'
           onClick={onClose}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/folders/use-row-drag-ghost.ts b/apps/sim/app/workspace/[workspaceId]/components/folders/use-row-drag-ghost.ts
index ee37ca45a8c..a7bc8d07fc3 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/folders/use-row-drag-ghost.ts
+++ b/apps/sim/app/workspace/[workspaceId]/components/folders/use-row-drag-ghost.ts
@@ -11,7 +11,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
  * the label inherit the app font and match the row it was lifted from.
  */
 const DRAG_GHOST_STYLE =
-  'position:fixed;top:-500px;left:0;display:inline-flex;align-items:center;padding:4px 10px;background:var(--surface-active);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text-body);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-medium);z-index:var(--z-toast)'
+  'position:fixed;top:-500px;left:0;display:inline-flex;align-items:center;padding:4px 10px;background:var(--surface-active);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:13px;color:var(--text-body);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-medium);z-index:var(--z-toast)'
 
 const DRAG_GHOST_LABEL_STYLE = 'max-width:200px;overflow:hidden;text-overflow:ellipsis'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/components/index.ts b/apps/sim/app/workspace/[workspaceId]/components/index.ts
index 57d83213e0e..3eea2a00448 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/components/index.ts
@@ -2,7 +2,6 @@ export {
   isResourceListEmpty,
   resourceListState,
 } from '@/app/workspace/[workspaceId]/components/resource/is-resource-list-empty'
-export { ResourceNotFound } from '@/app/workspace/[workspaceId]/components/resource/resource-not-found'
 export { ConversationListItem } from './conversation-list-item'
 export type { ErrorBoundaryProps, ErrorStateProps } from './error'
 export { ErrorShell, ErrorState } from './error'
@@ -43,7 +42,6 @@ export type {
   PaginationConfig,
   ResourceCell,
   ResourceCellEditing,
-  ResourceColumn,
   ResourceRow,
   ResourceTableHandle,
   RowDragDropConfig,
diff --git a/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.tsx
index f2efc1446eb..d51c928c90f 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.tsx
@@ -2,14 +2,14 @@
 
 import { useCallback, useMemo, useState } from 'react'
 import {
-  ChipDropdown,
-  type ChipDropdownOption,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  ChipSelect,
+  type ChipSelectOption,
   toast,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
@@ -160,7 +160,7 @@ export function InviteModal({
     { enabled: open && isOrganizationInvite && !organizationOnly }
   )
 
-  const workspaceOptions = useMemo<ChipDropdownOption[]>(() => {
+  const workspaceOptions = useMemo<ChipSelectOption[]>(() => {
     if (!isOrganizationInvite) {
       return workspaceId ? [{ value: workspaceId, label: workspaceName ?? 'This workspace' }] : []
     }
@@ -316,12 +316,15 @@ export function InviteModal({
         {!organizationOnly && (
           <>
             <ChipModalField type='custom' title='Workspaces'>
-              <ChipDropdown
-                multiple
-                value={selectedWorkspaceIds}
-                onChange={setSelectedWorkspaceIds}
+              <ChipSelect
+                placeholder='Select workspaces'
+                dropdownWidth='trigger'
+                modal={false}
+                multiSelect
+                multiSelectValues={selectedWorkspaceIds}
+                onMultiSelectChange={setSelectedWorkspaceIds}
                 options={workspaceOptions}
-                allLabel='Select workspaces'
+                allOptionLabel='Select workspaces'
                 showAllOption={false}
                 searchable={isOrganizationInvite}
                 searchPlaceholder='Search workspaces...'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
index b82ab88f86d..b749a82a41b 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
@@ -2,6 +2,7 @@
 
 import { memo, useEffect, useRef, useState } from 'react'
 import {
+  Button,
   Check,
   ChipModal,
   ChipModalBody,
@@ -28,8 +29,6 @@ import { useForkMothershipChat } from '@/hooks/queries/mothership-chats'
 import { useFolderStore } from '@/stores/folders/store'
 
 const ICON_CLASS = 'size-[14px]'
-const BUTTON_CLASS =
-  'flex size-[26px] items-center justify-center rounded-[6px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-hidden'
 
 interface MessageActionsProps {
   content: string
@@ -170,14 +169,15 @@ export const MessageActions = memo(function MessageActions({
         {canCopyContent && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <button
+              <Button
                 type='button'
                 aria-label='Copy message'
                 onClick={copyToClipboard}
-                className={BUTTON_CLASS}
+                variant='quiet'
+                iconSize='compact-fixed'
               >
                 {copied ? <Check className={ICON_CLASS} /> : <Duplicate className={ICON_CLASS} />}
-              </button>
+              </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>
               {copied ? 'Copied message' : 'Copy message'}
@@ -188,27 +188,29 @@ export const MessageActions = memo(function MessageActions({
           <>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
-                <button
+                <Button
                   type='button'
                   aria-label='Like'
                   onClick={() => handleFeedbackClick('up')}
-                  className={BUTTON_CLASS}
+                  variant='quiet'
+                  iconSize='compact-fixed'
                 >
                   <ThumbsUp className={ICON_CLASS} />
-                </button>
+                </Button>
               </Tooltip.Trigger>
               <Tooltip.Content side='top'>Good response</Tooltip.Content>
             </Tooltip.Root>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
-                <button
+                <Button
                   type='button'
                   aria-label='Dislike'
                   onClick={() => handleFeedbackClick('down')}
-                  className={BUTTON_CLASS}
+                  variant='quiet'
+                  iconSize='compact-fixed'
                 >
                   <ThumbsDown className={ICON_CLASS} />
-                </button>
+                </Button>
               </Tooltip.Trigger>
               <Tooltip.Content side='top'>Bad response</Tooltip.Content>
             </Tooltip.Root>
@@ -217,15 +219,16 @@ export const MessageActions = memo(function MessageActions({
         {canFork && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <button
+              <Button
                 type='button'
                 aria-label='Fork in new chat'
                 onClick={handleFork}
                 disabled={forkChat.isPending}
-                className={cn(BUTTON_CLASS, forkChat.isPending && 'cursor-not-allowed opacity-50')}
+                variant='quiet'
+                iconSize='compact-fixed'
               >
                 <Split className={cn(ICON_CLASS, 'rotate-90')} />
-              </button>
+              </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>Fork in new chat</Tooltip.Content>
           </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx
index 7ded34f10d0..65442f93310 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx
@@ -2,6 +2,7 @@
 
 import type { ComponentType } from 'react'
 import {
+  BulkActionBar,
   BulkActionButton,
   cn,
   DropdownMenu,
@@ -91,57 +92,48 @@ export function ResourceActionBar({
         className
       )}
     >
-      <div className='flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'>
-        <span
-          className={cn(
-            'px-1 text-small',
-            exceedsLimit ? 'text-[var(--text-error)]' : 'text-[var(--text-secondary)]'
-          )}
-        >
-          {exceedsLimit
-            ? `${selectedCount} selected · select ${maxSelectable} or fewer`
-            : `${selectedCount} selected`}
-        </span>
-        <div className='flex items-center gap-[5px]'>
-          {onDownload && (
-            <ActionButton
-              icon={Download}
-              label='Download'
-              onClick={onDownload}
-              disabled={actionsDisabled}
-            />
-          )}
-          {onMove && moveOptions && (
-            <DropdownMenu>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <DropdownMenuTrigger asChild>
-                    <BulkActionButton aria-label='Move' disabled={actionsDisabled}>
-                      <Folder className='size-[12px]' />
-                    </BulkActionButton>
-                  </DropdownMenuTrigger>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top'>Move</Tooltip.Content>
-              </Tooltip.Root>
-              <DropdownMenuContent
-                side='top'
-                align='center'
-                className='max-h-[240px] overflow-y-auto'
-              >
-                {renderMoveOptions(moveOptions, onMove)}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-          {onDelete && (
-            <ActionButton
-              icon={Trash}
-              label='Delete'
-              onClick={onDelete}
-              disabled={actionsDisabled}
-            />
-          )}
-        </div>
-      </div>
+      <BulkActionBar
+        label={
+          <span className={exceedsLimit ? 'text-[var(--text-error)]' : undefined}>
+            {exceedsLimit
+              ? `${selectedCount} selected · select ${maxSelectable} or fewer`
+              : `${selectedCount} selected`}
+          </span>
+        }
+      >
+        {onDownload && (
+          <ActionButton
+            icon={Download}
+            label='Download'
+            onClick={onDownload}
+            disabled={actionsDisabled}
+          />
+        )}
+        {onMove && moveOptions && (
+          <DropdownMenu>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <BulkActionButton aria-label='Move' disabled={actionsDisabled}>
+                    <Folder className='size-[12px]' />
+                  </BulkActionButton>
+                </DropdownMenuTrigger>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>Move</Tooltip.Content>
+            </Tooltip.Root>
+            <DropdownMenuContent
+              side='top'
+              align='center'
+              className='max-h-[240px] overflow-y-auto'
+            >
+              {renderMoveOptions(moveOptions, onMove)}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+        {onDelete && (
+          <ActionButton icon={Trash} label='Delete' onClick={onDelete} disabled={actionsDisabled} />
+        )}
+      </BulkActionBar>
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx
deleted file mode 100644
index fa6007c8e02..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { ComponentType } from 'react'
-
-interface ResourceNotFoundProps {
-  icon: ComponentType<{ className?: string }>
-  title: string
-  description: string
-}
-
-/**
- * Full-page screen for a resource that could not be loaded and has no shell left to
- * draw — a knowledge base or a document that was deleted or moved.
- *
- * Distinct from the `emptyState` slot on {@link Resource.Table}: that one keeps the
- * chrome and reports a failure *within* a page that still exists. This replaces the
- * page, so it is only right when the thing the page is about is the thing that is gone.
- */
-export function ResourceNotFound({ icon: Icon, title, description }: ResourceNotFoundProps) {
-  return (
-    <div className='flex h-full flex-col items-center justify-center gap-3'>
-      <Icon className='size-[32px] text-[var(--text-muted)]' />
-      <div className='flex flex-col items-center gap-1'>
-        <h2 className='text-[20px] text-[var(--text-secondary)]'>{title}</h2>
-        <p className='text-[var(--text-muted)] text-small'>{description}</p>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
index 95bf5999af8..b20af9cd3c0 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
@@ -536,12 +536,10 @@ const Pagination = memo(function Pagination({
               <Button
                 key={page}
                 type='button'
-                variant='ghost'
+                variant={page === currentPage ? 'subtle' : 'ghost'}
+                size='inline'
+                aria-current={page === currentPage ? 'page' : undefined}
                 onClick={() => onPageChange(page)}
-                className={cn(
-                  'h-auto p-0 text-sm hover-hover:bg-transparent hover-hover:text-[var(--text-body)]',
-                  page === currentPage ? 'text-[var(--text-body)]' : ''
-                )}
               >
                 {page}
               </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.css b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.css
index 43e6809375e..43c821a2ce0 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.css
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.css
@@ -54,14 +54,14 @@
   padding: 0.5rem 0.75rem;
   text-align: left;
   vertical-align: top;
-  font-size: 14px;
+  font-size: var(--text-sm);
   line-height: 1.5rem;
 }
 
 .rich-markdown-prose th,
 .document-table th {
   background: var(--surface-4);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 /* Cell editors are invisible until focused: they take the cell's own typography and color. */
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
index 52407bbf750..c30a44d78d8 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
@@ -427,7 +427,7 @@ const MediaPreview = memo(function MediaPreview({
       <div className='flex h-full flex-col items-center justify-center gap-4 bg-[var(--surface-1)] p-8'>
         <div className='flex flex-col items-center gap-2 text-center'>
           <Music className='size-[32px] text-[var(--text-muted)]' />
-          <p className='text-[14px] text-[var(--text-primary)]'>{file.name}</p>
+          <p className='text-[var(--text-primary)] text-sm leading-[inherit]'>{file.name}</p>
         </div>
         {blobUrl && (
           // biome-ignore lint/a11y/useMediaCaption: audio from workspace files
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx
index 9e8c3c634c4..cde4083d589 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx
@@ -53,9 +53,9 @@ function MermaidSourcePreview({
   return (
     <div className='my-4 overflow-hidden rounded-lg border border-[var(--border)]'>
       <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-3)] px-3 py-1.5'>
-        <span className='text-[11px] text-[var(--text-tertiary)]'>mermaid</span>
+        <span className='text-[var(--text-tertiary)] text-xs leading-[inherit]'>mermaid</span>
         {(isRendering || status) && (
-          <span className='text-[11px] text-[var(--text-muted)]'>
+          <span className='text-[var(--text-muted)] text-xs leading-[inherit]'>
             {isRendering ? 'Rendering…' : status}
           </span>
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
index 598e330ca5a..3b255d082a1 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
@@ -43,7 +43,7 @@ interface PdfViewerCoreProps {
 function PdfError({ error }: { error: string }) {
   return (
     <div className='flex flex-1 flex-col items-center justify-center gap-[8px]'>
-      <p className='text-[14px] text-[var(--text-body)]'>Failed to preview PDF</p>
+      <p className='text-[var(--text-body)] text-sm leading-[inherit]'>Failed to preview PDF</p>
       <p className='text-[var(--text-muted)] text-small'>{error}</p>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx
index ed585e4c382..1b5ca5f1932 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx
@@ -18,7 +18,7 @@ export const UnsupportedPreview = memo(function UnsupportedPreview({ name }: { n
 
   return (
     <div className='flex flex-1 flex-col items-center justify-center gap-[8px]'>
-      <p className='text-[14px] text-[var(--text-primary)]'>
+      <p className='text-[var(--text-primary)] text-sm leading-[inherit]'>
         Preview not available{ext ? ` for .${ext} files` : ' for this file'}
       </p>
       <p className='text-[var(--text-muted)] text-small'>
@@ -31,7 +31,9 @@ export const UnsupportedPreview = memo(function UnsupportedPreview({ name }: { n
 export function PreviewError({ label, error }: { label: string; error: string }) {
   return (
     <div className='flex flex-1 flex-col items-center justify-center gap-[8px]'>
-      <p className='text-[14px] text-[var(--text-primary)]'>Failed to preview {label}</p>
+      <p className='text-[var(--text-primary)] text-sm leading-[inherit]'>
+        Failed to preview {label}
+      </p>
       <p className='text-[var(--text-muted)] text-small'>{error}</p>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx
index d6623e648d6..76f43919127 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx
@@ -282,11 +282,13 @@ export function ResizableImageView({ node, selected, editor, getPos }: ReactNode
           type='button'
           variant='ghost'
           size='icon'
+          iconSize={{ base: 'touch', sm: 'roomy' }}
+          iconPadding='sm'
           aria-label='Resize image'
           onPointerDown={startResize}
-          className='absolute right-0 bottom-0 flex size-10 cursor-nwse-resize touch-none items-end justify-end p-1 sm:size-8'
+          className='absolute right-0 bottom-0 cursor-nwse-resize touch-none items-end justify-end'
         >
-          <span className='size-3 rounded-[3px] border border-[var(--bg)] bg-[var(--brand-secondary)]' />
+          <span className='size-3 rounded-sm border border-[var(--bg)] bg-[var(--brand-secondary)]' />
         </Button>
       )}
     </NodeViewWrapper>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts
index 918934aa0e1..353c615db0d 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts
@@ -17,7 +17,7 @@ export const SUGGESTION_SCROLL_CLASS = 'max-h-[240px] scroll-py-1.5 overflow-y-a
 /** A selectable row: icon + label, 14px icon in `--text-icon`, truncating label. The `img` rules
  * size custom-block image icons (rendered as `<img>`, so the `svg` rules never reach them). */
 export const SUGGESTION_ITEM_CLASS =
-  'relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-1.5 text-left text-[var(--text-body)] text-caption outline-hidden transition-colors [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)] [&_img]:pointer-events-none [&_img]:size-[14px] [&_img]:shrink-0'
+  'relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-left text-[var(--text-body)] text-caption outline-hidden transition-colors [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)] [&_img]:pointer-events-none [&_img]:size-[14px] [&_img]:shrink-0'
 
 /** A group heading above a run of rows. */
 export const SUGGESTION_GROUP_LABEL_CLASS =
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx
index 4bdcb5b19d8..7d2aa9f6a58 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx
@@ -1,5 +1,5 @@
 import type { ComponentType, SVGProps } from 'react'
-import { Button, cn, Tooltip } from '@sim/emcn'
+import { Button, Tooltip } from '@sim/emcn'
 
 interface ToolbarButtonProps {
   /** Any SVG icon component, e.g. from `@sim/emcn/icons`. */
@@ -28,17 +28,15 @@ export function ToolbarButton({
       <Tooltip.Trigger asChild>
         <Button
           type='button'
-          variant={isActive ? 'active' : 'ghost'}
+          variant={isActive ? 'active' : 'quiet'}
           size='icon'
+          iconSize={{ base: 'touch', sm: 'regular' }}
           aria-label={label}
           aria-pressed={isActive}
           disabled={disabled}
           onPointerDown={(event) => event.preventDefault()}
           onClick={onClick}
-          className={cn(
-            'size-10 focus-visible:bg-[var(--surface-hover)] sm:size-[28px]',
-            !isActive && 'hover-hover:bg-[var(--surface-hover)]'
-          )}
+          className='focus-visible:bg-[var(--surface-hover)]'
         >
           <Icon className={iconSize === 'compact' ? 'size-[12px]' : 'size-[14px]'} />
         </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/raw-markdown-snippet.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/raw-markdown-snippet.tsx
index ea4058895e7..0713cf189c4 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/raw-markdown-snippet.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/raw-markdown-snippet.tsx
@@ -3,7 +3,7 @@ import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap
 import { FootnoteDef, RawHtmlBlock } from './raw-markdown-snippet-schema'
 
 const BLOCK_CONTROL_CLASS =
-  'pointer-events-none absolute top-1.5 right-2 select-none rounded-md bg-[var(--surface-4)] px-1.5 py-0.5 text-[10px] text-[var(--text-muted)] uppercase tracking-wide opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100'
+  'pointer-events-none absolute top-1.5 right-2 select-none rounded-md bg-[var(--surface-4)] px-1.5 py-0.5 text-micro text-[var(--text-muted)] uppercase tracking-wide opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100'
 
 /** Badge text per block node type name — kept here rather than threaded through node options since
  * {@link NodeViewProps} exposes no options/extension reference to the rendering component. */
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css
index 902baad1c02..adcb3ea373e 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css
@@ -18,8 +18,8 @@
   outline: none;
   color: var(--text-primary);
   font-family: var(--font-inter);
-  font-size: 15px;
-  font-weight: 400;
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-normal);
   line-height: 25px;
   letter-spacing: 0;
   overflow-wrap: anywhere;
@@ -28,7 +28,7 @@
 .rich-markdown-nodes img {
   max-width: 100%;
   height: auto;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   border: var(--border-width) solid var(--border);
 }
 
@@ -37,7 +37,7 @@
 .rich-markdown-nodes .ProseMirror-selectednode {
   outline: 2px solid var(--brand-secondary);
   outline-offset: 2px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 /* An image is its own framed element; ring the image itself so the indicator hugs the picture
@@ -73,7 +73,7 @@
 .rich-markdown-prose h4,
 .rich-markdown-prose h5,
 .rich-markdown-prose h6 {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   line-height: 1.3;
   color: var(--text-primary);
 }
@@ -117,7 +117,7 @@
  * the surrounding color, not reset it; omitting `color` here lets normal CSS inheritance do that
  * correctly in every context, including ones this file doesn't know about yet. */
 .rich-markdown-prose strong {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 .rich-markdown-prose em {
@@ -226,7 +226,7 @@
   height: 16px;
   margin: 0;
   border: var(--border-width) solid var(--border-1);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   background: transparent;
   cursor: pointer;
 }
@@ -258,7 +258,7 @@
   font-family: var(--font-martian-mono, ui-monospace, monospace);
   font-size: 0.875em;
   background: var(--surface-5);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 0.125rem 0.375rem;
 }
 
@@ -278,7 +278,7 @@
 
 .rich-markdown-prose pre {
   background: var(--surface-5);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   overflow-x: auto;
 }
@@ -319,7 +319,7 @@
 .rich-markdown-prose pre code {
   background: none;
   padding: 0;
-  font-size: 13px;
+  font-size: var(--text-small);
   line-height: 21px;
 }
 
@@ -343,12 +343,12 @@
 }
 
 .rich-markdown-nodes .raw-markdown-block {
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   padding: 0.75rem 1rem;
 }
 
 .rich-markdown-nodes .raw-markdown-inline {
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 0.0625rem 0.3rem;
 }
 
@@ -375,7 +375,7 @@
 .rich-markdown-nodes img.rich-leaf-in-selection {
   outline: 2px solid var(--selection-bg);
   outline-offset: 2px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 /* Borders, padding, typography, and header fill come from document-table.css — the chrome shared
@@ -457,7 +457,7 @@
 .rich-markdown-nodes mark {
   background-color: color-mix(in srgb, var(--color-amber-400) 40%, transparent);
   color: inherit;
-  border-radius: 2px;
+  border-radius: var(--radius-xs);
   padding: 0 0.1em;
   margin: 0 -0.1em;
   box-decoration-break: clone;
@@ -473,8 +473,8 @@
  * set their own 600, so only body text and the placeholder are affected.
  */
 .rich-markdown-field-prose {
-  font-size: 14px;
-  font-weight: 400;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-normal);
   line-height: 22px;
 }
 
@@ -563,7 +563,7 @@
   left: -1px;
   width: 8px;
   height: 5px;
-  border-radius: 2px 2px 2px 0;
+  border-radius: var(--radius-xs) var(--radius-xs) var(--radius-xs) 0;
   background-color: var(--caret-color);
   transition: opacity 0.2s ease;
 }
@@ -601,10 +601,10 @@
   max-width: 10rem;
   overflow: hidden;
   padding: 0.1rem 0.35rem;
-  border-radius: 2px 2px 2px 0;
+  border-radius: var(--radius-xs) var(--radius-xs) var(--radius-xs) 0;
   /* 11px = the `text-xs` the canvas/tables presence tags use, for pixel parity. */
-  font-size: 11px;
-  font-weight: 500;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
   line-height: 1.2;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -626,12 +626,12 @@
 .rich-markdown-nodes .collaboration-carets__caret--flip .collaboration-carets__label {
   left: auto;
   right: -1px;
-  border-radius: 2px 2px 0 2px;
+  border-radius: var(--radius-xs) var(--radius-xs) 0 var(--radius-xs);
 }
 
 .rich-markdown-nodes .collaboration-carets__selection {
   background-color: color-mix(in srgb, var(--caret-color) 20%, transparent);
-  border-radius: 2px;
+  border-radius: var(--radius-xs);
   pointer-events: none;
 }
 
@@ -640,7 +640,7 @@
 .rich-markdown-nodes .rich-find-match {
   background-color: var(--highlight-match-bg);
   color: var(--highlight-match-text);
-  border-radius: 2px;
+  border-radius: var(--radius-xs);
 }
 
 /* The active hit is a stronger fill of the same hue, never a ring: an outline drawn
diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
index 9cb16f9a489..99c7d1981c6 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Avatar,
-  Button,
+  Chip,
   ChipCombobox,
   ChipConfirmModal,
   Columns2,
@@ -2061,13 +2061,9 @@ function FilesContent() {
           </ResourceFilterSection>
         )}
         {hasActiveFilters && (
-          <Button
-            variant='ghost'
-            onClick={clearFileFilters}
-            className='h-[32px] w-full text-caption hover-hover:bg-[var(--surface-active)]'
-          >
+          <Chip fullWidth onClick={clearFileFilters} align='center'>
             Clear all filters
-          </Button>
+          </Chip>
         )}
       </ResourceFilterPanel>
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/knowledge-search-results/search-filters.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/knowledge-search-results/search-filters.tsx
index c1d28baf693..e4e51728732 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/knowledge-search-results/search-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/knowledge-search-results/search-filters.tsx
@@ -1,4 +1,4 @@
-import { ChipDatePicker, ChipDropdown } from '@sim/emcn'
+import { ChipDatePicker, ChipSelect } from '@sim/emcn'
 import { useQueryStates } from 'nuqs'
 import { connectorDisplayName } from '@/lib/sim-search/connectors'
 import {
@@ -20,11 +20,12 @@ export function SearchFilters({ sourceTypes }: SearchFiltersProps) {
       aria-label='Search filters'
       className='flex flex-wrap items-center gap-2 px-2 py-2'
     >
-      <ChipDropdown
+      <ChipSelect
         variant='ghost'
-        shape='round'
         aria-label={`Filter by source: ${filters.source ? (filters.source === 'upload' ? 'Uploads' : connectorDisplayName(filters.source)) : 'All sources'}`}
-        matchTriggerWidth={false}
+        dropdownWidth='content'
+        modal={false}
+        showSelectedCheck
         value={filters.source ?? ''}
         options={[
           { value: '', label: 'All sources' },
@@ -35,11 +36,12 @@ export function SearchFilters({ sourceTypes }: SearchFiltersProps) {
         ]}
         onChange={(source) => void setFilters({ source: source || null })}
       />
-      <ChipDropdown
+      <ChipSelect
         variant='ghost'
-        shape='round'
         aria-label={`Filter by date: ${UPDATED_WINDOWS.find((window) => window.id === filters.updated)?.label ?? 'Any time'}`}
-        matchTriggerWidth={false}
+        dropdownWidth='content'
+        modal={false}
+        showSelectedCheck
         value={filters.updated}
         options={UPDATED_WINDOWS.map((window) => ({ value: window.id, label: window.label }))}
         onChange={(value) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/browser-agent-icon.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/browser-agent-icon.tsx
index 5bf1c53ac4d..925e6451401 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/browser-agent-icon.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/browser-agent-icon.tsx
@@ -127,7 +127,7 @@ function BrowserAgentFavicon({ url, canLoad }: BrowserAgentFaviconProps) {
           referrerPolicy='no-referrer'
           alt=''
           className={cn(
-            'size-full rounded-[3px]',
+            'size-full rounded-sm',
             status !== 'loaded' && 'pointer-events-none absolute opacity-0'
           )}
           onLoad={() => setStatus('loaded')}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/message-sources/message-sources.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/message-sources/message-sources.tsx
index 3de491dad48..3210aafabda 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/message-sources/message-sources.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/message-sources/message-sources.tsx
@@ -20,7 +20,7 @@ import type { SourceTagData } from '@/app/workspace/[workspaceId]/home/component
 
 /** The action-row button, matching the copy and vote buttons beside it with room for a count. */
 const BUTTON_CLASSES =
-  'flex h-[26px] items-center gap-1 rounded-[6px] px-1.5 text-[var(--text-icon)] text-caption transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-hidden data-[state=open]:bg-[var(--surface-active)] data-[state=open]:hover-hover:bg-[var(--surface-active)]'
+  'flex h-[26px] items-center gap-1 rounded-md px-1.5 text-[var(--text-icon)] text-caption transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-hidden data-[state=open]:bg-[var(--surface-active)] data-[state=open]:hover-hover:bg-[var(--surface-active)]'
 
 interface MessageSourcesProps {
   sources: readonly SourceTagData[]
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
index e04ea68b9bd..c9fe3be0646 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
@@ -1227,7 +1227,9 @@ function MessageContentInner({
         <>
           <div className='mt-[10px] flex items-center gap-[8px]'>
             <CircleStop className='size-[16px] shrink-0 text-[var(--text-icon)]' />
-            <span className='text-[14px] text-[var(--text-body)]'>Stopped by user</span>
+            <span className='text-[var(--text-body)] text-sm leading-[inherit]'>
+              Stopped by user
+            </span>
           </div>
           {actions && <div className='mt-[10px]'>{actionsRow}</div>}
         </>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/mothership-chat-skeleton/mothership-chat-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/mothership-chat-skeleton/mothership-chat-skeleton.tsx
index 9b32c21b1dd..8c4714a5c1e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/mothership-chat-skeleton/mothership-chat-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/mothership-chat-skeleton/mothership-chat-skeleton.tsx
@@ -27,24 +27,24 @@ export function MothershipChatSkeleton({
   return (
     <div className={styles.content}>
       <div className={styles.userRow}>
-        <Skeleton className='h-[40px] w-[55%] rounded-[16px]' />
+        <Skeleton className='h-[40px] w-[55%] rounded-2xl' />
       </div>
 
       <div className='space-y-3'>
-        <Skeleton className='h-[14px] w-[90%] rounded-[4px]' />
-        <Skeleton className='h-[14px] w-[75%] rounded-[4px]' />
-        <Skeleton className='h-[14px] w-[82%] rounded-[4px]' />
-        <Skeleton className='h-[14px] w-[40%] rounded-[4px]' />
+        <Skeleton className='h-[14px] w-[90%] rounded-sm' />
+        <Skeleton className='h-[14px] w-[75%] rounded-sm' />
+        <Skeleton className='h-[14px] w-[82%] rounded-sm' />
+        <Skeleton className='h-[14px] w-[40%] rounded-sm' />
       </div>
 
       <div className={styles.userRow}>
-        <Skeleton className='h-[32px] w-[40%] rounded-[16px]' />
+        <Skeleton className='h-[32px] w-[40%] rounded-2xl' />
       </div>
 
       <div className='space-y-3'>
-        <Skeleton className='h-[14px] w-[85%] rounded-[4px]' />
-        <Skeleton className='h-[14px] w-[70%] rounded-[4px]' />
-        <Skeleton className='h-[14px] w-[60%] rounded-[4px]' />
+        <Skeleton className='h-[14px] w-[85%] rounded-sm' />
+        <Skeleton className='h-[14px] w-[70%] rounded-sm' />
+        <Skeleton className='h-[14px] w-[60%] rounded-sm' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
index f93063bd6be..a27c7f5703b 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
@@ -153,7 +153,7 @@ const LAYOUT_STYLES = {
     rowGap: 'pb-6',
     userRow: 'flex flex-col items-end gap-[6px] pt-3',
     attachmentWidth: 'max-w-[70%]',
-    userBubble: 'max-w-[70%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3.5 py-2',
+    userBubble: 'max-w-[70%] overflow-hidden rounded-2xl bg-[var(--surface-5)] px-3.5 py-2',
     assistantRow: 'group/msg',
     footer: 'shrink-0 px-[24px] pb-[16px]',
     footerInner: 'mx-auto max-w-chat',
@@ -165,7 +165,7 @@ const LAYOUT_STYLES = {
     rowGap: 'pb-4',
     userRow: 'flex flex-col items-end gap-[6px] pt-2',
     attachmentWidth: 'max-w-[85%]',
-    userBubble: 'max-w-[85%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3 py-2',
+    userBubble: 'max-w-[85%] overflow-hidden rounded-2xl bg-[var(--surface-5)] px-3 py-2',
     assistantRow: 'group/msg',
     footer: 'shrink-0 px-3 pb-3',
     footerInner: '',
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
index ed3ae9e2eb1..a694dc21271 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import type { BrowserDownloadInfo } from '@sim/desktop-bridge'
 import {
-  Button,
   cn,
   DropdownMenu,
   DropdownMenuContent,
@@ -18,6 +17,7 @@ import {
   showBrowserDownloadInFolder,
   showBrowserDownloadsMenu,
 } from '@/lib/browser-agent/transport'
+import { BrowserToolbarButton } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button'
 
 /** Aggregate byte progress for the toolbar rail; unknown-size downloads are ignored. */
 export function aggregateDownloadPercent(downloads: BrowserDownloadInfo[]): number | null {
@@ -127,14 +127,11 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
       }}
     >
       <DropdownMenuTrigger asChild>
-        <Button
+        <BrowserToolbarButton
           ref={buttonRef}
-          type='button'
-          variant='ghost-secondary'
-          size='sm'
           aria-label={label}
           title={label}
-          className='relative size-[30px] shrink-0 overflow-hidden p-0'
+          className='relative overflow-hidden'
           onClick={() => setHasUnviewedCompletion(false)}
         >
           {hasActiveDownloads ? (
@@ -160,7 +157,7 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
               />
             </span>
           )}
-        </Button>
+        </BrowserToolbarButton>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end' sideOffset={5} className='w-[320px]'>
         <DropdownMenuLabel>Downloads</DropdownMenuLabel>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
index 8a1f2bc6539..1170962715a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
@@ -106,7 +106,8 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               size='sm'
               aria-label='Previous match'
               disabled={!result?.matches}
-              className='size-[24px] shrink-0 p-0'
+              iconSize='compact-fixed'
+              className='shrink-0'
               onClick={() => step('back')}
             >
               <ArrowUp className='size-[13px]' />
@@ -117,7 +118,8 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               size='sm'
               aria-label='Next match'
               disabled={!result?.matches}
-              className='size-[24px] shrink-0 p-0'
+              iconSize='compact-fixed'
+              className='shrink-0'
               onClick={() => step('forward')}
             >
               <ArrowDown className='size-[13px]' />
@@ -127,7 +129,8 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               variant='ghost-secondary'
               size='sm'
               aria-label='Close find bar'
-              className='size-[24px] shrink-0 p-0'
+              iconSize='compact-fixed'
+              className='shrink-0'
               onClick={dismiss}
             >
               <X className='size-[13px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-page-issue.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-page-issue.tsx
index d59a858afd0..e180b2508e9 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-page-issue.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-page-issue.tsx
@@ -160,7 +160,7 @@ export function BrowserPageIssueView({ issue, onReload, focusRecovery }: Browser
         <h2
           ref={headingRef}
           id='browser-page-issue-heading'
-          className='rounded-[4px] font-medium text-[var(--text-primary)] text-base outline-hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--border-1)]'
+          className='rounded-sm font-medium text-[var(--text-primary)] text-base outline-hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--border-1)]'
           tabIndex={-1}
         >
           {copy.headline}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
index 86b7174a037..e9704626fd1 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
@@ -12,7 +12,6 @@ import type {
 import { isBrowserTheme } from '@sim/browser-protocol'
 import type { BrowserAddToChatPayload, DesktopAppearanceTheme } from '@sim/desktop-bridge'
 import {
-  Button,
   ChipConfirmModal,
   ChipInput,
   chipVariants,
@@ -80,6 +79,7 @@ import {
   useBrowserPanelOcclusion,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-panel-occlusion'
 import { BrowserThemeNotice } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-theme-notice'
+import { BrowserToolbarButton } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button'
 import {
   buildOmniboxSuggestions,
   googleSearchUrl,
@@ -115,7 +115,7 @@ function BrowserSuggestionIcon({ suggestion }: { suggestion: UrlSuggestion }) {
     <img
       src={source}
       alt=''
-      className='size-4 shrink-0 rounded-[3px]'
+      className='size-4 shrink-0 rounded-sm'
       onError={() => setFailed(true)}
     />
   )
@@ -1016,38 +1016,26 @@ export function BrowserSession({
     <div ref={panelRef} className='flex h-full flex-col overflow-hidden'>
       <div className='relative shrink-0 border-[var(--border)] border-b bg-[var(--bg)]'>
         <div className='flex items-center gap-1 px-2.5 py-1.5'>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          <BrowserToolbarButton
             aria-label='Back'
             disabled={!pageState?.canGoBack}
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('back', {}, scopeId)}
           >
             <ArrowLeft className='size-[14px]' />
-          </Button>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          </BrowserToolbarButton>
+          <BrowserToolbarButton
             aria-label='Forward'
             disabled={!pageState?.canGoForward}
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('forward', {}, scopeId)}
           >
             <ArrowRight className='size-[14px]' />
-          </Button>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          </BrowserToolbarButton>
+          <BrowserToolbarButton
             aria-label='Reload page'
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('reload', {}, scopeId)}
           >
             <RefreshCw className='size-[14px]' />
-          </Button>
+          </BrowserToolbarButton>
           {/* URL bar: Enter navigates the agent browser. */}
           <Popover
             open={suggestionsOpen}
@@ -1247,6 +1235,7 @@ export function BrowserSession({
           {findOpen && (
             <BrowserFindBar inputRef={findInputRef} onClose={closeFind} scopeId={scopeId} />
           )}
+
           <BrowserDownloads
             scopeId={scopeId}
             open={activeOverlay === 'downloads'}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx
new file mode 100644
index 00000000000..0fe76340771
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx
@@ -0,0 +1,27 @@
+import { type ComponentProps, forwardRef } from 'react'
+import { Button, cn } from '@sim/emcn'
+
+interface BrowserToolbarButtonProps
+  extends Omit<
+    ComponentProps<typeof Button>,
+    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'type'
+  > {
+  'aria-label': string
+}
+
+/** Browser navigation and utility action; forwards menu-anchor refs and native events. */
+export const BrowserToolbarButton = forwardRef<HTMLButtonElement, BrowserToolbarButtonProps>(
+  ({ className, ...props }, ref) => (
+    <Button
+      {...props}
+      ref={ref}
+      type='button'
+      variant='ghost-secondary'
+      size='sm'
+      iconSize='regular'
+      className={cn('size-[30px] shrink-0', className)}
+    />
+  )
+)
+
+BrowserToolbarButton.displayName = 'BrowserToolbarButton'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
index 0685009d447..23e49df1643 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   OverflowText,
   PlayOutline,
+  ResourceEmptyState,
   Skeleton,
   TabStripAction,
   Tooltip,
@@ -840,15 +841,11 @@ function EmbeddedFile({
 
   if (!file) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-3'>
-        <FileX className='size-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[20px] text-[var(--text-primary)]'>File not found</h2>
-          <p className='text-[var(--text-body)] text-small'>
-            This file may have been deleted or moved
-          </p>
-        </div>
-      </div>
+      <ResourceEmptyState
+        icon={FileX}
+        title='File not found'
+        description='This file may have been deleted or moved'
+      />
     )
   }
 
@@ -893,21 +890,17 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) {
 
   if (!folder) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-3'>
-        <FolderIcon className='size-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[20px] text-[var(--text-primary)]'>Folder not found</h2>
-          <p className='text-[var(--text-body)] text-small'>
-            This folder may have been deleted or moved
-          </p>
-        </div>
-      </div>
+      <ResourceEmptyState
+        icon={FolderIcon}
+        title='Folder not found'
+        description='This folder may have been deleted or moved'
+      />
     )
   }
 
   return (
     <div className='flex h-full flex-col overflow-y-auto p-6'>
-      <h2 className='mb-4 text-[16px] text-[var(--text-primary)]'>{folder.name}</h2>
+      <h2 className='mb-4 text-[var(--text-primary)] text-md'>{folder.name}</h2>
       {folderWorkflows.length === 0 ? (
         <p className='text-[var(--text-muted)] text-small'>No workflows in this folder</p>
       ) : (
@@ -917,7 +910,7 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) {
               key={w.id}
               type='button'
               onClick={() => openInternalLink(`/workspace/${workspaceId}/w/${w.id}`)}
-              className='flex items-center gap-2 rounded-[6px] px-3 py-2 text-left transition-colors hover:bg-[var(--surface-4)]'
+              className='flex items-center gap-2 rounded-md px-3 py-2 text-left transition-colors hover:bg-[var(--surface-4)]'
             >
               <WorkflowIcon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
               <OverflowText label={w.name} className='text-[var(--text-primary)] text-small' />
@@ -959,15 +952,11 @@ function EmbeddedLog({ workspaceId, logId, executionId, onNotFound }: EmbeddedLo
 
   if (!log) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-3'>
-        <Library className='size-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[20px] text-[var(--text-primary)]'>Log not found</h2>
-          <p className='text-[var(--text-body)] text-small'>
-            This log may have been deleted or is no longer available
-          </p>
-        </div>
-      </div>
+      <ResourceEmptyState
+        icon={Library}
+        title='Log not found'
+        description='This log may have been deleted or is no longer available'
+      />
     )
   }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/browser-tab-icon.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/browser-tab-icon.tsx
index cb0d6042c20..432ea7f74e9 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/browser-tab-icon.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/browser-tab-icon.tsx
@@ -64,7 +64,7 @@ export function BrowserTabIcon({ tabId, scopeId, className }: BrowserTabIconProp
               src={faviconUrl(hostname, 32)}
               alt=''
               className={cn(
-                'size-[16px] rounded-[3px]',
+                'size-[16px] rounded-sm',
                 !faviconLoaded && 'pointer-events-none absolute opacity-0'
               )}
               onLoad={() => setFavicon({ hostname, status: 'loaded' })}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
index 466afe3e7de..57a8c63949b 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
@@ -49,7 +49,7 @@ export function QueuedMessages({
   return (
     <div
       ref={containerRef}
-      className='-mb-3 mx-3.5 overflow-hidden rounded-t-[16px] border border-[var(--border-1)] border-b-0 bg-[var(--surface-3)] pb-3'
+      className='-mb-3 mx-3.5 overflow-hidden rounded-t-2xl border border-[var(--border-1)] border-b-0 bg-[var(--surface-3)] pb-3'
     >
       <button
         type='button'
@@ -97,7 +97,7 @@ export function QueuedMessages({
                 </div>
 
                 {msg.fileAttachments && msg.fileAttachments.length > 0 && (
-                  <span className='inline-flex min-w-0 max-w-[40%] shrink items-center gap-1 rounded-[5px] bg-[var(--surface-5)] px-[5px] py-0.5 text-[var(--text-primary)] text-small'>
+                  <span className='inline-flex min-w-0 max-w-[40%] shrink items-center gap-1 rounded-sm bg-[var(--surface-5)] px-[5px] py-0.5 text-[var(--text-primary)] text-small'>
                     <Paperclip className='size-[12px] shrink-0 text-[var(--text-icon)]' />
                     {isNarrow ? (
                       <span className='shrink-0 text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
index 4bb8d632e97..116b43f6497 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
@@ -62,7 +62,7 @@ export const PROMPT_TEXT_CLASSES = 'font-body text-[14px] leading-[24px] trackin
  * Box and typography shared by the textarea and its mirror overlay — both must
  * produce identical line wrapping so the overlay text sits exactly over the
  * (transparent) textarea text. The scale is the chat input's native prompt
- * scale (`text-[14px]`, `-0.015em` tracking); the task modal's body inherits it
+ * scale (`text-sm`, 14px at the default root, `-0.015em` tracking); the task modal's body inherits it
  * so the editor reads the same whether it's the chat input or inside the modal.
  */
 export const PROMPT_FIELD_CLASSES = cn(
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/conversation-mode-selector.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/conversation-mode-selector.tsx
index 0052c01aad5..4b3e0f00f0e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/conversation-mode-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/conversation-mode-selector.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { ChipDropdown, Tooltip } from '@sim/emcn'
+import { ChipSelect, Tooltip } from '@sim/emcn'
 import { getConversationModes } from '@/app/workspace/[workspaceId]/home/components/user-input/utils/conversation-modes'
 import type { ChatRequestMode } from '@/app/workspace/[workspaceId]/home/types'
 import { useFeatureFlag } from '@/app/workspace/[workspaceId]/providers/feature-flags-provider'
@@ -26,15 +26,15 @@ export function ConversationModeSelector({
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
         <span className='inline-flex shrink-0'>
-          <ChipDropdown
+          <ChipSelect
             variant='ghost'
-            shape='round'
             aria-label='Conversation mode'
             options={options}
             value={value}
             disabled={!onChange}
             align='start'
-            matchTriggerWidth={false}
+            dropdownWidth='content'
+            modal={false}
             showSelectedCheck={false}
             onOpenChange={setOpen}
             onChange={(mode) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx
index 2bc3eb549a4..e48ff68d63a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx
@@ -88,11 +88,13 @@ export const MicButton = memo(function MicButton({
         <Button
           type='button'
           variant={isListening ? 'active' : 'ghost'}
+          iconSize='regular'
+          shape='round'
           onClick={onToggle}
           aria-label={isListening ? 'Stop listening' : 'Voice input'}
           aria-pressed={isListening}
           className={cn(
-            'relative size-[28px] overflow-hidden rounded-full p-0 transition-[background-color,color,scale] duration-150 ease-out active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100',
+            'relative overflow-hidden transition-[background-color,color,scale] duration-150 ease-out active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100',
             !isListening &&
               'text-[var(--text-icon)] hover-hover:bg-[var(--surface-hover)] hover-hover:text-[var(--text-icon)]'
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
index af31043f573..aa14ffd07ee 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Chip, ChipDropdown, ChipLink, cn } from '@sim/emcn'
+import { Chip, ChipLink, ChipSelect, cn } from '@sim/emcn'
 import { ArrowLeft, Plus } from '@sim/emcn/icons'
 import { useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
@@ -193,14 +193,16 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
             </Chip>
           ) : oauthService ? (
             connectOptions.length > 1 ? (
-              <ChipDropdown
+              <ChipSelect
+                modal={false}
+                className='w-auto max-w-none'
                 variant='primary'
                 leftIcon={Plus}
                 placeholder='Add to Sim'
                 showSelectedCheck={false}
                 options={connectOptions}
                 onChange={handleSelectConnectOption}
-                matchTriggerWidth={false}
+                dropdownWidth='content'
               />
             ) : oauthAvailable ? (
               <Chip variant='primary' leftIcon={Plus} onClick={() => setOAuthOpen(true)}>
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx
index d01953901f4..959e9a3e6aa 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx
@@ -275,7 +275,8 @@ function ClientCredentialAccountModalForm({
                     value={value}
                     onChange={(event) => setField(field.id, event.target.value)}
                     placeholder={field.placeholder}
-                    className='min-h-[120px] font-mono'
+                    monospace
+                    className='min-h-[120px]'
                     // Browser spell-check and autofill ship textarea contents to
                     // third-party services — an exfiltration route for a pasted
                     // private key. `ChipModalField type='textarea'` exposes none
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
index fd3d9ec48c7..d577366a639 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
@@ -4,10 +4,10 @@ import { type ReactNode, useEffect, useMemo, useState } from 'react'
 import {
   Button,
   Chip,
-  ChipDropdown,
-  type ChipDropdownOption,
   ChipInput,
   ChipModalField,
+  ChipSelect,
+  type ChipSelectOption,
   Wizard,
 } from '@sim/emcn'
 import { Loader, Plus, Trash } from '@sim/emcn/icons'
@@ -53,7 +53,7 @@ const DEFAULT_CAPABILITIES = new Set(
   )
 )
 
-const CAPABILITY_OPTIONS: ChipDropdownOption[] = CUSTOM_BOT_CAPABILITIES.map((capability) => ({
+const CAPABILITY_OPTIONS: ChipSelectOption[] = CUSTOM_BOT_CAPABILITIES.map((capability) => ({
   value: capability.id,
   label: capability.label,
 }))
@@ -418,13 +418,16 @@ function StepConfigure({
               : undefined
           }
         >
-          <ChipDropdown
-            multiple
+          <ChipSelect
+            placeholder='No additional permissions'
+            dropdownWidth='trigger'
+            modal={false}
+            multiSelect
             fullWidth
-            value={capabilityIds}
-            onChange={onCapabilityIdsChange}
+            multiSelectValues={capabilityIds}
+            onMultiSelectChange={onCapabilityIdsChange}
             options={CAPABILITY_OPTIONS}
-            allLabel='No additional permissions'
+            allOptionLabel='No additional permissions'
             showAllOption={false}
           />
         </ChipModalField>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
index 13819242fb2..9e77f52767b 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -12,10 +12,8 @@ import {
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  handleKeyboardActivation,
   Label,
 } from '@sim/emcn'
-import { Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { formatDate } from '@sim/utils/formatting'
 import {
@@ -27,6 +25,7 @@ import {
 } from '@/lib/knowledge/constants'
 import type { DocumentTag } from '@/lib/knowledge/tags/types'
 import type { DocumentData } from '@/lib/knowledge/types'
+import { KnowledgeTagRow } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row'
 import {
   type TagDefinition,
   useKnowledgeBaseTagDefinitions,
@@ -385,40 +384,19 @@ export function DocumentTagsModal({
           <div className='space-y-2'>
             {documentTags.map((tag, index) => (
               <div key={tag.displayName} className='space-y-2'>
-                <div
-                  role='button'
-                  tabIndex={0}
-                  className='flex cursor-pointer items-center gap-2 rounded-sm border p-2 hover-hover:bg-[var(--surface-2)]'
-                  onClick={() => startEditingTag(index)}
-                  onKeyDown={(event) => {
-                    if (event.target !== event.currentTarget) return
-                    handleKeyboardActivation(event, () => startEditingTag(index))
+                <KnowledgeTagRow
+                  onActivate={() => startEditingTag(index)}
+                  activateLabel={`Edit ${tag.displayName}`}
+                  name={tag.displayName}
+                  typeLabel={FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
+                  detail={formatValueForDisplay(tag.value, tag.fieldType)}
+                  truncateDetail
+                  removeLabel={`Remove ${tag.displayName}`}
+                  onRemove={(e) => {
+                    e.stopPropagation()
+                    handleRemoveTag(index)
                   }}
-                >
-                  <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
-                    {tag.displayName}
-                  </span>
-                  <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
-                    {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
-                  </span>
-                  <div className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]' />
-                  <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-caption'>
-                    {formatValueForDisplay(tag.value, tag.fieldType)}
-                  </span>
-                  <div className='flex shrink-0 items-center gap-1'>
-                    <Button
-                      aria-label='Remove tag'
-                      variant='ghost'
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        handleRemoveTag(index)
-                      }}
-                      className='size-4 p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
-                    >
-                      <Trash className='size-3' />
-                    </Button>
-                  </div>
-                </div>
+                />
 
                 {editingTagIndex === index && (
                   <div className='space-y-2 rounded-md border p-3'>
@@ -701,7 +679,7 @@ export function DocumentTagsModal({
                   !kbTagDefinitions.find(
                     (def) => def.displayName.toLowerCase() === editTagForm.displayName.toLowerCase()
                   ) && (
-                    <Badge variant='amber' size='lg' dot className='max-w-full'>
+                    <Badge variant='amber' size='md' dot className='max-w-full'>
                       Maximum tag definitions reached. You can still use existing tag definitions,
                       but cannot create new ones.
                     </Badge>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
index 9de2b6c4cb5..6ad276ebe32 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -1,7 +1,14 @@
 'use client'
 
 import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
-import { Badge, ChipCombobox, ChipConfirmModal, chipContentLabelClass, cn } from '@sim/emcn'
+import {
+  Badge,
+  ChipCombobox,
+  ChipConfirmModal,
+  chipContentLabelClass,
+  cn,
+  ResourceEmptyState,
+} from '@sim/emcn'
 import {
   ChevronDown,
   ChevronUp,
@@ -53,7 +60,6 @@ import {
   EMPTY_CELL_PLACEHOLDER,
   Resource,
 } from '@/app/workspace/[workspaceId]/components/resource/resource'
-import { ResourceNotFound } from '@/app/workspace/[workspaceId]/components/resource/resource-not-found'
 import { SearchHighlight } from '@/app/workspace/[workspaceId]/components/search-highlight/search-highlight'
 import {
   ChunkContextMenu,
@@ -1173,7 +1179,7 @@ export function Document({
    */
   if (documentError && !documentData) {
     return (
-      <ResourceNotFound
+      <ResourceEmptyState
         icon={FileX}
         title='Document not found'
         description='This document may have been deleted or moved'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
index d9121eeb437..6a217ea54f9 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -7,18 +7,19 @@ import {
   ChipConfirmModal,
   type ChipConfirmTextSegment,
   ChipDatePicker,
-  ChipDropdown,
-  type ChipDropdownOption,
   ChipInput,
   ChipModal,
   ChipModalBody,
   ChipModalHeader,
+  ChipSelect,
+  type ChipSelectOption,
   cellIconNodeClass,
   chipContentGap,
   chipContentLabelClass,
   cn,
   FloatingTooltip,
   isTextClipped,
+  ResourceEmptyState,
   Tooltip,
   useFloatingTooltip,
 } from '@sim/emcn'
@@ -82,7 +83,6 @@ import type {
   SelectableConfig,
 } from '@/app/workspace/[workspaceId]/components/resource/resource'
 import { Resource } from '@/app/workspace/[workspaceId]/components/resource/resource'
-import { ResourceNotFound } from '@/app/workspace/[workspaceId]/components/resource/resource-not-found'
 import { SearchHighlight } from '@/app/workspace/[workspaceId]/components/search-highlight/search-highlight'
 /**
  * Deep import on purpose: the `[documentId]/components` barrel also exports `ChunkEditor`,
@@ -164,7 +164,7 @@ const PROCESSING_POLL_INTERVAL_MS = 3000
 /** Slower cadence while only a connector sync is running: rows arrive in batches. */
 const CONNECTOR_SYNC_DOCUMENT_POLL_INTERVAL_MS = 5000
 
-const STATUS_FILTER_OPTIONS: ChipDropdownOption[] = [
+const STATUS_FILTER_OPTIONS: ChipSelectOption[] = [
   { value: 'all', label: 'All' },
   { value: 'enabled', label: 'Enabled' },
   { value: 'disabled', label: 'Disabled' },
@@ -1097,7 +1097,10 @@ export function KnowledgeBase({
               </Chip>
             )}
           </div>
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
             options={STATUS_FILTER_OPTIONS}
             value={enabledFilter}
             onChange={(value) => {
@@ -1308,7 +1311,7 @@ export function KnowledgeBase({
 
   if (error && !knowledgeBase) {
     return (
-      <ResourceNotFound
+      <ResourceEmptyState
         icon={DatabaseX}
         title='Knowledge base not found'
         description='This knowledge base may have been deleted or moved'
@@ -1731,7 +1734,7 @@ function TagFilterValueControl({ entry, onChange }: TagFilterValueControlProps)
 function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectionProps) {
   const activeCount = entries.filter((f) => f.tagSlot && f.value.trim()).length
 
-  const tagOptions: ChipDropdownOption[] = tagDefinitions.map((t) => ({
+  const tagOptions: ChipSelectOption[] = tagDefinitions.map((t) => ({
     value: t.displayName,
     label: t.displayName,
   }))
@@ -1801,7 +1804,7 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
       >
         {filtersToShow.map((entry, index) => {
           const operators = getOperatorsForFieldType(entry.fieldType)
-          const operatorOptions: ChipDropdownOption[] = operators.map((op) => ({
+          const operatorOptions: ChipSelectOption[] = operators.map((op) => ({
             value: op.value,
             label: op.label,
           }))
@@ -1818,24 +1821,29 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
               )}
               <div className='flex items-start gap-2'>
                 <div className='flex min-w-0 flex-1 flex-wrap items-center gap-2'>
-                  <ChipDropdown
+                  <ChipSelect
+                    showSelectedCheck
+                    modal={false}
                     options={tagOptions}
                     value={entry.tagName}
                     onChange={(value) => handleTagChange(entry.id, value)}
                     placeholder='Select tag'
                     align='start'
-                    matchTriggerWidth={false}
+                    dropdownWidth='content'
                     contentClassName='max-h-[240px] overflow-y-auto'
-                    className='max-w-[150px]'
+                    className='w-auto max-w-[150px]'
                   />
                   {entry.tagSlot && (
-                    <ChipDropdown
+                    <ChipSelect
+                      showSelectedCheck
+                      modal={false}
+                      className='w-auto max-w-none'
                       options={operatorOptions}
                       value={entry.operator}
                       onChange={(value) => updateEntry(entry.id, { operator: value, valueTo: '' })}
                       placeholder='Operator'
                       align='start'
-                      matchTriggerWidth={false}
+                      dropdownWidth='content'
                     />
                   )}
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
index 01dbfaead48..3bd0cab96d4 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
@@ -1,4 +1,4 @@
-import { BulkActionButton, cn, Tooltip } from '@sim/emcn'
+import { BulkActionBar, BulkActionButton, cn, Tooltip } from '@sim/emcn'
 import { Ban, Circle, Trash } from '@sim/emcn/icons'
 import { domAnimation, LazyMotion, m } from 'framer-motion'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -53,70 +53,70 @@ export function ActionBar({
         transition={{ duration: 0.2 }}
         className={cn('-translate-x-1/2 fixed bottom-6 left-1/2 z-[var(--z-dropdown)]', className)}
       >
-        <div className='flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'>
-          <span className='px-1 text-[var(--text-secondary)] text-small'>
-            {isAllSelected ? totalCount : selectedCount} selected
-            {showSelectAllOption && (
-              <>
-                {' · '}
-                <button
-                  type='button'
-                  onClick={onSelectAll}
-                  className='text-[var(--brand-secondary)] hover-hover:underline'
-                >
-                  Select all
-                </button>
-              </>
-            )}
-            {isAllSelected && onClearSelectAll && (
-              <>
-                {' · '}
-                <button
-                  type='button'
-                  onClick={onClearSelectAll}
-                  className='text-[var(--brand-secondary)] hover-hover:underline'
-                >
-                  Clear
-                </button>
-              </>
-            )}
-          </span>
+        <BulkActionBar
+          label={
+            <>
+              {isAllSelected ? totalCount : selectedCount} selected
+              {showSelectAllOption && (
+                <>
+                  {' · '}
+                  <button
+                    type='button'
+                    onClick={onSelectAll}
+                    className='text-[var(--brand-secondary)] hover-hover:underline'
+                  >
+                    Select all
+                  </button>
+                </>
+              )}
+              {isAllSelected && onClearSelectAll && (
+                <>
+                  {' · '}
+                  <button
+                    type='button'
+                    onClick={onClearSelectAll}
+                    className='text-[var(--brand-secondary)] hover-hover:underline'
+                  >
+                    Clear
+                  </button>
+                </>
+              )}
+            </>
+          }
+        >
+          {showEnableButton && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <BulkActionButton aria-label='Enable' onClick={onEnable} disabled={isLoading}>
+                  <Circle className='size-[12px]' />
+                </BulkActionButton>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>Enable</Tooltip.Content>
+            </Tooltip.Root>
+          )}
 
-          <div className='flex items-center gap-[5px]'>
-            {showEnableButton && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <BulkActionButton aria-label='Enable' onClick={onEnable} disabled={isLoading}>
-                    <Circle className='size-[12px]' />
-                  </BulkActionButton>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top'>Enable</Tooltip.Content>
-              </Tooltip.Root>
-            )}
+          {showDisableButton && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <BulkActionButton aria-label='Disable' onClick={onDisable} disabled={isLoading}>
+                  <Ban className='size-[12px]' />
+                </BulkActionButton>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>Disable</Tooltip.Content>
+            </Tooltip.Root>
+          )}
 
-            {showDisableButton && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <BulkActionButton aria-label='Disable' onClick={onDisable} disabled={isLoading}>
-                    <Ban className='size-[12px]' />
-                  </BulkActionButton>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top'>Disable</Tooltip.Content>
-              </Tooltip.Root>
-            )}
-
-            {onDelete && canEdit && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <BulkActionButton aria-label='Delete' onClick={onDelete} disabled={isLoading}>
-                    <Trash className='size-[12px]' />
-                  </BulkActionButton>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top'>Delete</Tooltip.Content>
-              </Tooltip.Root>
-            )}
-          </div>
-        </div>
+          {onDelete && canEdit && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <BulkActionButton aria-label='Delete' onClick={onDelete} disabled={isLoading}>
+                  <Trash className='size-[12px]' />
+                </BulkActionButton>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>Delete</Tooltip.Content>
+            </Tooltip.Root>
+          )}
+        </BulkActionBar>
       </m.div>
     </LazyMotion>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
index 46163ac91ea..e4b54cdfc22 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -12,9 +12,7 @@ import {
   ChipModalFooter,
   ChipModalHeader,
   type ComboboxOption,
-  handleKeyboardActivation,
 } from '@sim/emcn'
-import { Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import type { TagUsageData } from '@/lib/api/contracts/knowledge'
@@ -24,6 +22,7 @@ import {
   SUPPORTED_FIELD_TYPES,
   TAG_SLOT_CONFIG,
 } from '@/lib/knowledge/constants'
+import { KnowledgeTagRow } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row'
 import {
   type TagDefinition,
   useKnowledgeBaseTagDefinitions,
@@ -270,41 +269,23 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
               {kbTagDefinitions.map((tag) => {
                 const usage = getTagUsage(tag.tagSlot)
                 return (
-                  <div
+                  <KnowledgeTagRow
                     key={tag.id}
-                    role='button'
-                    tabIndex={0}
-                    className='flex cursor-pointer items-center gap-2 rounded-sm border p-2 hover-hover:bg-[var(--surface-2)]'
-                    onClick={() => handleViewDocuments(tag)}
-                    onKeyDown={(event) => {
-                      if (event.target !== event.currentTarget) return
-                      handleKeyboardActivation(event, () => handleViewDocuments(tag))
+                    onActivate={() => handleViewDocuments(tag)}
+                    activateLabel={`View documents for ${tag.displayName}`}
+                    name={tag.displayName}
+                    typeLabel={FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
+                    detail={
+                      <>
+                        {usage.documentCount} document{usage.documentCount !== 1 ? 's' : ''}
+                      </>
+                    }
+                    removeLabel={`Delete ${tag.displayName}`}
+                    onRemove={(e) => {
+                      e.stopPropagation()
+                      handleDeleteTagClick(tag)
                     }}
-                  >
-                    <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
-                      {tag.displayName}
-                    </span>
-                    <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
-                      {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
-                    </span>
-                    <div className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]' />
-                    <span className='min-w-0 flex-1 text-[var(--text-muted)] text-caption'>
-                      {usage.documentCount} document{usage.documentCount !== 1 ? 's' : ''}
-                    </span>
-                    <div className='flex shrink-0 items-center gap-1'>
-                      <Button
-                        aria-label='Delete Tag'
-                        variant='ghost'
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          handleDeleteTagClick(tag)
-                        }}
-                        className='size-4 p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
-                      >
-                        <Trash className='size-3' />
-                      </Button>
-                    </div>
-                  </div>
+                  />
                 )
               })}
 
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.tsx
index fb1d1dda457..1a62e6009a6 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.tsx
@@ -5,9 +5,9 @@ import {
   ChipButtonGroup,
   ChipButtonGroupItem,
   ChipCombobox,
-  ChipDropdown,
   ChipLink,
   ChipModalField,
+  ChipSelect,
   type ComboboxOption,
   Tooltip,
 } from '@sim/emcn'
@@ -171,12 +171,15 @@ export function ConnectorAccessField({
           <Tooltip.Root>
             <Tooltip.Trigger asChild tabIndex={0}>
               <span className='inline-flex w-fit cursor-not-allowed'>
-                <ChipDropdown
+                <ChipSelect
+                  showSelectedCheck
+                  dropdownWidth='trigger'
+                  modal={false}
                   aria-label={`Sync using: ${currentMode?.label ?? 'Unavailable'}`}
                   value={value.accessMode}
                   options={visibleModes.map(({ mode, label }) => ({ value: mode, label }))}
                   disabled
-                  className='pointer-events-none w-fit'
+                  className='pointer-events-none w-fit max-w-none'
                 />
               </span>
             </Tooltip.Trigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-documents/connector-document-status-filter.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-documents/connector-document-status-filter.tsx
index 749b08d852c..6a5843c27f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-documents/connector-document-status-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-documents/connector-document-status-filter.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { ChipDropdown } from '@sim/emcn'
+import { ChipSelect } from '@sim/emcn'
 import type {
   ConnectorDocumentFilter,
   ConnectorDocumentsData,
@@ -20,14 +20,17 @@ export function ConnectorDocumentStatusFilter({
   isLoading,
 }: ConnectorDocumentStatusFilterProps) {
   return (
-    <ChipDropdown
+    <ChipSelect
+      showSelectedCheck
+      modal={false}
+      className='w-auto max-w-none'
       aria-label='Document status'
       value={filter}
       onChange={(value) => {
         if (value === 'active' || value === 'excluded' || value === 'failed' || value === 'skipped')
           onFilterChange(value)
       }}
-      matchTriggerWidth={false}
+      dropdownWidth='content'
       options={[
         { value: 'active', label: isLoading ? 'Included' : `Included (${counts.active})` },
         { value: 'excluded', label: isLoading ? 'Excluded' : `Excluded (${counts.excluded})` },
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/document-columns.ts b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/document-columns.ts
index d2a3746c010..44fc70e6a91 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/document-columns.ts
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/document-columns.ts
@@ -1,4 +1,4 @@
-import type { ResourceColumn } from '@/app/workspace/[workspaceId]/components'
+import type { ResourceColumn } from '@/app/workspace/[workspaceId]/components/resource/resource'
 
 export const DOCUMENT_COLUMNS: ResourceColumn[] = [
   { id: 'name', header: 'Name', widthMultiplier: 0.8 },
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/index.ts b/apps/sim/app/workspace/[workspaceId]/knowledge/components/index.ts
index f8a396f34b0..32d4f68c0d8 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/index.ts
@@ -1,3 +1,4 @@
+export { KnowledgeFilterHeading } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading'
 export { CreateBaseModal } from './create-base-modal'
 export { DeleteKnowledgeBaseModal } from './delete-knowledge-base-modal'
 export { EditKnowledgeBaseModal } from './edit-knowledge-base-modal'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading.tsx
new file mode 100644
index 00000000000..b396e9bde9f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading.tsx
@@ -0,0 +1,22 @@
+import { Button } from '@sim/emcn'
+import { FILTER_SECTION_LABEL_CLASS } from '@/app/workspace/[workspaceId]/components/resource/components/resource-options'
+
+interface KnowledgeFilterHeadingProps {
+  title: string
+  active: boolean
+  onClear: () => void
+}
+
+/** Heading and conditional clear action for a knowledge-list filter. */
+export function KnowledgeFilterHeading({ title, active, onClear }: KnowledgeFilterHeadingProps) {
+  return (
+    <div className='flex h-5 items-center justify-between'>
+      <span className={FILTER_SECTION_LABEL_CLASS}>{title}</span>
+      {active && (
+        <Button variant='ghost-secondary' size='inline' onClick={onClear} className='-mr-1'>
+          Clear
+        </Button>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row.test.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row.test.tsx
new file mode 100644
index 00000000000..4f800581fb9
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row.test.tsx
@@ -0,0 +1,53 @@
+/** @vitest-environment jsdom */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { KnowledgeTagRow } from './knowledge-tag-row'
+
+let root: Root | undefined
+let container: HTMLDivElement | undefined
+
+afterEach(() => {
+  act(() => root?.unmount())
+  container?.remove()
+})
+
+describe('KnowledgeTagRow actions', () => {
+  it('keeps activation and removal as separate keyboard-accessible buttons', () => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+    const onActivate = vi.fn()
+    const onRemove = vi.fn()
+
+    act(() =>
+      root?.render(
+        <KnowledgeTagRow
+          name='Customer'
+          typeLabel='Text'
+          detail='3 documents'
+          activateLabel='View documents for Customer'
+          removeLabel='Delete Customer'
+          onActivate={onActivate}
+          onRemove={onRemove}
+        />
+      )
+    )
+
+    const buttons = container.querySelectorAll('button')
+    expect(buttons).toHaveLength(2)
+    expect(buttons[0].contains(buttons[1])).toBe(false)
+    expect(buttons[0].getAttribute('type')).toBe('button')
+    expect(buttons[0].getAttribute('aria-label')).toBe('View documents for Customer')
+    expect(buttons[1].getAttribute('aria-label')).toBe('Delete Customer')
+
+    act(() => buttons[0].click())
+    expect(onActivate).toHaveBeenCalledTimes(1)
+    expect(onRemove).not.toHaveBeenCalled()
+
+    act(() => buttons[1].click())
+    expect(onActivate).toHaveBeenCalledTimes(1)
+    expect(onRemove).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row.tsx
new file mode 100644
index 00000000000..b8d1c86c726
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row.tsx
@@ -0,0 +1,63 @@
+import type { MouseEventHandler, ReactNode } from 'react'
+import { Button, cn } from '@sim/emcn'
+import { Trash } from '@sim/emcn/icons'
+
+interface KnowledgeTagRowProps {
+  name: string
+  typeLabel: string
+  detail: ReactNode
+  truncateDetail?: boolean
+  activateLabel: string
+  removeLabel: string
+  onActivate: MouseEventHandler<HTMLButtonElement>
+  onRemove: MouseEventHandler<HTMLButtonElement>
+}
+
+/** Shared tag summary; callers retain activation, keyboard and removal behavior. */
+export function KnowledgeTagRow({
+  name,
+  typeLabel,
+  detail,
+  truncateDetail = false,
+  activateLabel,
+  removeLabel,
+  onActivate,
+  onRemove,
+}: KnowledgeTagRowProps) {
+  return (
+    <div className='flex items-center rounded-sm border hover-hover:bg-[var(--surface-2)]'>
+      <button
+        type='button'
+        onClick={onActivate}
+        aria-label={activateLabel}
+        className='flex min-w-0 flex-1 cursor-pointer items-center gap-2 p-2 text-left'
+      >
+        <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>{name}</span>
+        <span className='rounded-sm bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
+          {typeLabel}
+        </span>
+        <span
+          aria-hidden='true'
+          className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]'
+        />
+        <span
+          className={cn(
+            'min-w-0 flex-1 text-[var(--text-muted)] text-caption',
+            truncateDetail && 'truncate'
+          )}
+        >
+          {detail}
+        </span>
+      </button>
+      <Button
+        aria-label={removeLabel}
+        variant='ghost-destructive-muted'
+        onClick={onRemove}
+        size='icon'
+        className='mr-2'
+      >
+        <Trash className='size-3' />
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
index bc26441338b..d6b907ffedc 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { ChipDropdownOption } from '@sim/emcn'
-import { Avatar, Button, ChipConfirmModal, ChipDropdown, Tooltip, toast } from '@sim/emcn'
+import type { ChipSelectOption } from '@sim/emcn'
+import { Avatar, ChipConfirmModal, ChipSelect, Tooltip, toast } from '@sim/emcn'
 import { Database, FolderPlus, Pencil, Plus, Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -53,7 +53,6 @@ import type {
   SearchConfig,
   SortConfig,
 } from '@/app/workspace/[workspaceId]/components/resource/components/resource-options'
-import { FILTER_SECTION_LABEL_CLASS } from '@/app/workspace/[workspaceId]/components/resource/components/resource-options'
 import { timeCell } from '@/app/workspace/[workspaceId]/components/resource/components/time-cell'
 import { resourceListState } from '@/app/workspace/[workspaceId]/components/resource/is-resource-list-empty'
 import type {
@@ -73,6 +72,7 @@ import {
   DeleteKnowledgeBaseModal,
   EditKnowledgeBaseModal,
   KnowledgeBaseContextMenu,
+  KnowledgeFilterHeading,
   KnowledgeListContextMenu,
 } from '@/app/workspace/[workspaceId]/knowledge/components'
 import KnowledgeLoading from '@/app/workspace/[workspaceId]/knowledge/loading'
@@ -130,13 +130,13 @@ const SEARCH_COLUMNS: ResourceColumn[] = [...COLUMNS, FOLDER_LOCATION_COLUMN]
 
 const KNOWLEDGE_BASE_ICON = <Database className='size-[14px]' />
 
-const CONNECTOR_FILTER_OPTIONS: ChipDropdownOption[] = [
+const CONNECTOR_FILTER_OPTIONS: ChipSelectOption[] = [
   { value: 'all', label: 'All' },
   { value: 'connected', label: 'With connectors' },
   { value: 'unconnected', label: 'Without connectors' },
 ]
 
-const CONTENT_FILTER_OPTIONS: ChipDropdownOption[] = [
+const CONTENT_FILTER_OPTIONS: ChipSelectOption[] = [
   { value: 'all', label: 'All' },
   { value: 'has-docs', label: 'Has documents' },
   { value: 'empty', label: 'Empty' },
@@ -1326,7 +1326,7 @@ function KnowledgeContent() {
     [activeSort, setListSort, clearListSort]
   )
 
-  const memberOptions: ChipDropdownOption[] = useMemo(
+  const memberOptions: ChipSelectOption[] = useMemo(
     () =>
       (members ?? []).map((m) => ({
         value: m.userId,
@@ -1340,19 +1340,15 @@ function KnowledgeContent() {
     () => (
       <div className='flex w-[260px] flex-col gap-3 p-3'>
         <div className='flex flex-col gap-2'>
-          <div className='flex h-5 items-center justify-between'>
-            <span className={FILTER_SECTION_LABEL_CLASS}>Connectors</span>
-            {connectorFilter.length > 0 && (
-              <Button
-                variant='ghost'
-                onClick={() => setConnectorFilter([])}
-                className='-mr-1 h-auto px-1 py-0.5 text-[var(--text-muted)] text-xs hover-hover:text-[var(--text-secondary)]'
-              >
-                Clear
-              </Button>
-            )}
-          </div>
-          <ChipDropdown
+          <KnowledgeFilterHeading
+            title='Connectors'
+            active={connectorFilter.length > 0}
+            onClear={() => setConnectorFilter([])}
+          />
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
             options={CONNECTOR_FILTER_OPTIONS}
             value={connectorFilter[0] ?? 'all'}
             onChange={(value) => setConnectorFilter(value === 'all' ? [] : [value])}
@@ -1361,19 +1357,15 @@ function KnowledgeContent() {
           />
         </div>
         <div className='flex flex-col gap-2'>
-          <div className='flex h-5 items-center justify-between'>
-            <span className={FILTER_SECTION_LABEL_CLASS}>Content</span>
-            {contentFilter.length > 0 && (
-              <Button
-                variant='ghost'
-                onClick={() => setContentFilter([])}
-                className='-mr-1 h-auto px-1 py-0.5 text-[var(--text-muted)] text-xs hover-hover:text-[var(--text-secondary)]'
-              >
-                Clear
-              </Button>
-            )}
-          </div>
-          <ChipDropdown
+          <KnowledgeFilterHeading
+            title='Content'
+            active={contentFilter.length > 0}
+            onClear={() => setContentFilter([])}
+          />
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
             options={CONTENT_FILTER_OPTIONS}
             value={contentFilter[0] ?? 'all'}
             onChange={(value) => setContentFilter(value === 'all' ? [] : [value])}
@@ -1383,24 +1375,21 @@ function KnowledgeContent() {
         </div>
         {memberOptions.length > 0 && (
           <div className='flex flex-col gap-2'>
-            <div className='flex h-5 items-center justify-between'>
-              <span className={FILTER_SECTION_LABEL_CLASS}>Owner</span>
-              {ownerFilter.length > 0 && (
-                <Button
-                  variant='ghost'
-                  onClick={() => setOwnerFilter([])}
-                  className='-mr-1 h-auto px-1 py-0.5 text-[var(--text-muted)] text-xs hover-hover:text-[var(--text-secondary)]'
-                >
-                  Clear
-                </Button>
-              )}
-            </div>
-            <ChipDropdown
-              multiple
+            <KnowledgeFilterHeading
+              title='Owner'
+              active={ownerFilter.length > 0}
+              onClear={() => setOwnerFilter([])}
+            />
+            <ChipSelect
+              placeholder='All'
+              showAllOption
+              dropdownWidth='trigger'
+              modal={false}
+              multiSelect
               options={memberOptions}
-              value={ownerFilter}
-              onChange={setOwnerFilter}
-              allLabel='All'
+              multiSelectValues={ownerFilter}
+              onMultiSelectChange={setOwnerFilter}
+              allOptionLabel='All'
               searchable
               searchPlaceholder='Search members...'
               align='start'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
index b4010129495..14f5f928171 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
@@ -85,7 +85,7 @@ function StatusBarInner({
               role='button'
               tabIndex={0}
               aria-pressed={isSelected}
-              className={`h-6 flex-1 rounded-[3px] ${color} ${hoverBrightness} cursor-pointer transition-all ${
+              className={`h-6 flex-1 rounded-sm ${color} ${hoverBrightness} cursor-pointer transition-all ${
                 isSelected
                   ? 'relative z-10 scale-105 shadow-xs ring-1 ring-[var(--text-secondary)]'
                   : 'relative z-0'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
index 20fa8185d79..e6ba5f38e50 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
@@ -28,7 +28,7 @@ function WorkflowsListInner({
   return (
     <div className='flex h-full flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
       {/* Table header */}
-      <div className='shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-6 py-2.5 dark:bg-[var(--surface-3)]'>
+      <div className='shrink-0 rounded-t-md bg-[var(--surface-3)] px-6 py-2.5 dark:bg-[var(--surface-3)]'>
         <div className='flex items-center gap-4'>
           <span className='w-[160px] shrink-0 text-[var(--text-tertiary)] text-caption'>
             Workflow
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
index 9a009452d21..f816e380cfc 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
@@ -408,7 +408,7 @@ function DashboardInner({ stats, isLoading, error, searchQuery }: DashboardProps
                 </span>
               )}
             </div>
-            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
+            <div className='flex-1 overflow-y-auto rounded-t-md bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
               {globalDetails ? (
                 <LineChart
                   data={globalDetails.executionCounts}
@@ -433,7 +433,7 @@ function DashboardInner({ stats, isLoading, error, searchQuery }: DashboardProps
                 </span>
               )}
             </div>
-            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
+            <div className='flex-1 overflow-y-auto rounded-t-md bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
               {globalDetails ? (
                 <LineChart
                   data={globalDetails.failureCounts}
@@ -458,7 +458,7 @@ function DashboardInner({ stats, isLoading, error, searchQuery }: DashboardProps
                 </span>
               )}
             </div>
-            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
+            <div className='flex-1 overflow-y-auto rounded-t-md bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
               {globalDetails ? (
                 <LineChart
                   data={globalDetails.latencies}
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
index 8d310f38b29..9bf2efce0a0 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
@@ -106,11 +106,7 @@ function FileCard({ file, isExecutionFile = false, workspaceId }: FileCardProps)
           {file.type}
           {file.version === undefined ? '' : ` · v${file.version}`}
         </span>
-        <Button
-          variant='ghost'
-          className='h-[20px]! px-1.5! py-0! text-xs'
-          onClick={handleDownload}
-        >
+        <Button variant='ghost' size='inline' onClick={handleDownload} className='text-xs'>
           <Download className='mr-1 size-[10px]' />
           Download
         </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
index 6b5f0a54988..eab5ed975ac 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
@@ -15,23 +15,16 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Duplicate,
+  OverlayActionButton,
   Search as SearchIcon,
   Tooltip,
   useCopyToClipboard,
 } from '@sim/emcn'
-import {
-  ArrowDown,
-  ArrowUp,
-  Check,
-  ChevronsDownUp,
-  ChevronsUpDown,
-  Clipboard,
-  Search,
-  X,
-} from '@sim/emcn/icons'
+import { Check, ChevronsDownUp, ChevronsUpDown, Clipboard, Search } from '@sim/emcn/icons'
 import { formatDuration } from '@sim/utils/formatting'
 import { createPortal } from 'react-dom'
 import type { TraceSpan } from '@/lib/logs/types'
+import { CodeSearchOverlay } from '@/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay'
 import {
   adjustBgForContrast,
   formatCostAmount,
@@ -494,7 +487,8 @@ function DetailCodeSection({
             <Code.Viewer
               code={jsonString}
               language='json'
-              className='max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!'
+              appearance='inspection'
+              className='max-w-full [word-break:break-all]'
               wrapText
               searchQuery={isSearchActive ? searchQuery : undefined}
               currentMatchIndex={currentMatchIndex}
@@ -504,39 +498,35 @@ function DetailCodeSection({
               <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <Button
+                    <OverlayActionButton
                       aria-label={copied ? 'Copied' : 'Copy'}
                       type='button'
-                      variant='default'
                       onClick={(e) => {
                         e.stopPropagation()
                         handleCopy()
                       }}
-                      className='size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                     >
                       {copied ? (
                         <Check className='size-[10px] text-[var(--text-success)]' />
                       ) : (
                         <Clipboard className='size-[10px]' />
                       )}
-                    </Button>
+                    </OverlayActionButton>
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
                 </Tooltip.Root>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <Button
+                    <OverlayActionButton
                       aria-label='Search'
                       type='button'
-                      variant='default'
                       onClick={(e) => {
                         e.stopPropagation()
                         activateSearch()
                       }}
-                      className='size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                     >
                       <Search className='size-[10px]' />
-                    </Button>
+                    </OverlayActionButton>
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top'>Search</Tooltip.Content>
                 </Tooltip.Root>
@@ -544,54 +534,18 @@ function DetailCodeSection({
             )}
           </div>
           {isSearchActive && (
-            <div
-              role='presentation'
-              className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-xs'
-              onClick={(e) => e.stopPropagation()}
-            >
-              <ChipInput
-                ref={searchInputRef}
-                type='text'
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder='Search...'
-                className='mr-0.5 w-[94px]'
-              />
-              <span
-                className={cn(
-                  'min-w-[45px] text-center text-xs',
-                  matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-                )}
-              >
-                {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
-              </span>
-              <Button
-                variant='ghost'
-                iconPadding='sm'
-                onClick={goToPreviousMatch}
-                disabled={matchCount === 0}
-                aria-label='Previous match'
-              >
-                <ArrowUp className='size-[12px]' />
-              </Button>
-              <Button
-                variant='ghost'
-                iconPadding='sm'
-                onClick={goToNextMatch}
-                disabled={matchCount === 0}
-                aria-label='Next match'
-              >
-                <ArrowDown className='size-[12px]' />
-              </Button>
-              <Button
-                variant='ghost'
-                iconPadding='sm'
-                onClick={closeSearch}
-                aria-label='Close search'
-              >
-                <X className='size-[12px]' />
-              </Button>
-            </div>
+            <CodeSearchOverlay
+              className='top-0 right-0'
+              inputKind='chip'
+              inputRef={searchInputRef}
+              query={searchQuery}
+              onQueryChange={setSearchQuery}
+              matchCount={matchCount}
+              currentMatchIndex={currentMatchIndex}
+              onPrevious={goToPreviousMatch}
+              onNext={goToNextMatch}
+              onClose={closeSearch}
+            />
           )}
           {typeof document !== 'undefined' &&
             createPortal(
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
index b3a28c53f71..d336e7a461f 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -15,7 +15,6 @@ import {
   Badge,
   Button,
   Chip,
-  ChipInput,
   ChipModalTabs,
   Code,
   cn,
@@ -28,14 +27,13 @@ import {
   Duplicate,
   Eye,
   handleKeyboardActivation,
+  OverlayActionButton,
   Redo,
   Search as SearchIcon,
   Tooltip,
   useCopyToClipboard,
 } from '@sim/emcn'
 import {
-  ArrowDown,
-  ArrowUp,
   Check,
   ChevronUp,
   Clipboard,
@@ -59,6 +57,7 @@ import { filterHiddenOutputKeys } from '@/lib/logs/execution/trace-spans/trace-s
 import type { TraceSpan } from '@/lib/logs/types'
 import { sendMothershipMessage } from '@/lib/mothership/events'
 import { DELETED_WORKFLOW_LABEL } from '@/lib/workflows/workflow-labels'
+import { CodeSearchOverlay } from '@/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay'
 /**
  * Deep imports on purpose: importing these back through the parent `logs/components`
  * barrel forms a parent->child cycle that would keep the barrel edge to the snapshot
@@ -158,7 +157,8 @@ export const WorkflowOutputSection = memo(
           <Code.Viewer
             code={jsonString}
             language='json'
-            className='max-h-[300px] min-h-0 max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!'
+            appearance='inspection'
+            className='max-h-[300px] min-h-0 max-w-full [word-break:break-all]'
             wrapText
             searchQuery={isSearchActive ? searchQuery : undefined}
             currentMatchIndex={currentMatchIndex}
@@ -169,39 +169,35 @@ export const WorkflowOutputSection = memo(
             <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Button
+                  <OverlayActionButton
                     aria-label={copied ? 'Copied' : 'Copy'}
                     type='button'
-                    variant='default'
                     onClick={(e) => {
                       e.stopPropagation()
                       handleCopy()
                     }}
-                    className='size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                   >
                     {copied ? (
                       <Check className='size-[10px] text-[var(--text-success)]' />
                     ) : (
                       <Clipboard className='size-[10px]' />
                     )}
-                  </Button>
+                  </OverlayActionButton>
                 </Tooltip.Trigger>
                 <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
               </Tooltip.Root>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Button
+                  <OverlayActionButton
                     aria-label='Search'
                     type='button'
-                    variant='default'
                     onClick={(e) => {
                       e.stopPropagation()
                       activateSearch()
                     }}
-                    className='size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                   >
                     <Search className='size-[10px]' />
-                  </Button>
+                  </OverlayActionButton>
                 </Tooltip.Trigger>
                 <Tooltip.Content side='top'>Search</Tooltip.Content>
               </Tooltip.Root>
@@ -211,54 +207,18 @@ export const WorkflowOutputSection = memo(
 
         {/* Search Overlay */}
         {isSearchActive && (
-          <div
-            role='presentation'
-            className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-xs'
-            onClick={(e) => e.stopPropagation()}
-          >
-            <ChipInput
-              ref={searchInputRef}
-              type='text'
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder='Search...'
-              className='mr-0.5 w-[94px]'
-            />
-            <span
-              className={cn(
-                'min-w-[45px] text-center text-xs',
-                matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-              )}
-            >
-              {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
-            </span>
-            <Button
-              variant='ghost'
-              iconPadding='sm'
-              onClick={goToPreviousMatch}
-              disabled={matchCount === 0}
-              aria-label='Previous match'
-            >
-              <ArrowUp className='size-[12px]' />
-            </Button>
-            <Button
-              variant='ghost'
-              iconPadding='sm'
-              onClick={goToNextMatch}
-              disabled={matchCount === 0}
-              aria-label='Next match'
-            >
-              <ArrowDown className='size-[12px]' />
-            </Button>
-            <Button
-              variant='ghost'
-              iconPadding='sm'
-              onClick={closeSearch}
-              aria-label='Close search'
-            >
-              <X className='size-[12px]' />
-            </Button>
-          </div>
+          <CodeSearchOverlay
+            className='top-0 right-0'
+            inputKind='chip'
+            inputRef={searchInputRef}
+            query={searchQuery}
+            onQueryChange={setSearchQuery}
+            matchCount={matchCount}
+            currentMatchIndex={currentMatchIndex}
+            onPrevious={goToPreviousMatch}
+            onNext={goToNextMatch}
+            onClose={closeSearch}
+          />
         )}
 
         {/* Context Menu - rendered in portal to avoid transform/overflow clipping */}
@@ -517,7 +477,7 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
                       target='_blank'
                       rel='noopener noreferrer'
                       prefetch={false}
-                      className='-mx-1.5 -my-0.5 group flex w-fit min-w-0 max-w-[calc(100%+0.75rem)] items-center gap-1.5 rounded-[5px] px-1.5 py-0.5 transition-colors hover-hover:bg-[var(--surface-active)] focus-visible:bg-[var(--surface-active)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)]'
+                      className='-mx-1.5 -my-0.5 group flex w-fit min-w-0 max-w-[calc(100%+0.75rem)] items-center gap-1.5 rounded-sm px-1.5 py-0.5 transition-colors hover-hover:bg-[var(--surface-active)] focus-visible:bg-[var(--surface-active)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)]'
                     >
                       <span className='inline-grid size-[14px] shrink-0 place-items-center'>
                         <Workflow className='col-start-1 row-start-1 size-[14px] text-[var(--text-icon)] opacity-100 blur-none transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-[0.25] group-hover:opacity-0 group-hover:blur-[2px] group-focus-visible:scale-[0.25] group-focus-visible:opacity-0 group-focus-visible:blur-[2px] motion-reduce:transition-none' />
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index ff435d7d94b..e39b5b58892 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -14,6 +14,7 @@ import {
 import {
   Button,
   Calendar,
+  Chip,
   ChipCombobox,
   type ComboboxOption,
   cn,
@@ -198,7 +199,7 @@ function getColorIcon(color: string): React.ComponentType<{ className?: string }
 
   const ColorIcon = ({ className }: { className?: string }) => (
     <div
-      className={cn(className, 'shrink-0 rounded-[3px]')}
+      className={cn(className, 'shrink-0 rounded-sm')}
       style={{
         backgroundColor: color,
         width: 10,
@@ -1446,7 +1447,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
             <span className='flex w-full min-w-0 items-center gap-1.5 text-[var(--text-primary)]'>
               {selectedStatusColor && (
                 <div
-                  className='shrink-0 rounded-[3px]'
+                  className='shrink-0 rounded-sm'
                   style={{ backgroundColor: selectedStatusColor, width: 8, height: 8 }}
                 />
               )}
@@ -1561,13 +1562,9 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
       </div>
 
       {filtersActive && (
-        <Button
-          variant='active'
-          onClick={handleClearFilters}
-          className='h-[32px] w-full rounded-md'
-        >
+        <Chip variant='border-shadow' fullWidth onClick={handleClearFilters} align='center'>
           Clear All Filters
-        </Button>
+        </Chip>
       )}
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
index 2ea78d2cc95..2f049a1de59 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
@@ -14,7 +14,7 @@ interface MemberRowProps {
   image: string | null
   /** Muted trailing text, e.g. "Joined 6/3/2026" or "Invite pending". */
   status: string
-  /** Role control rendered before the actions menu (e.g. a `ChipDropdown`). */
+  /** Role control rendered before the actions menu (e.g. a `ChipSelect`). */
   roleControl?: ReactNode
   /** Trailing actions menu (e.g. the `...` `DropdownMenu`). */
   menu?: ReactNode
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx
index c2efa65b787..2a76a5c7997 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import {
   Badge,
-  Button,
+  Chip,
   ChipCopyInput,
   ChipInput,
   ChipModalTabs,
@@ -402,14 +402,13 @@ function LicensesTab({ environment }: { environment: MothershipEnv }) {
             className='w-[160px]'
           />
         </div>
-        <Button
+        <Chip
           variant='primary'
-          className='h-[32px]'
           onClick={handleGenerate}
           disabled={generateLicense.isPending || !newName.trim() || !approvalReference.trim()}
         >
           {generateLicense.isPending ? 'Generating...' : 'Generate'}
-        </Button>
+        </Chip>
       </div>
 
       {generatedKey && (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-create-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-create-modal.tsx
index 6ccc9de9c41..436bbbdb33b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-create-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-create-modal.tsx
@@ -2,13 +2,13 @@
 
 import { useState } from 'react'
 import {
-  ChipDropdown,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  ChipSelect,
 } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useParams } from 'next/navigation'
@@ -152,7 +152,11 @@ export function SandboxCreateModal({
             />
 
             <ChipModalField type='custom' title='Language'>
-              <ChipDropdown
+              <ChipSelect
+                showSelectedCheck
+                dropdownWidth='trigger'
+                modal={false}
+                className='w-auto max-w-none'
                 value={draft.language}
                 onChange={(language) =>
                   setDraft((prev) => ({ ...prev, language: language as SandboxLanguage }))
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.tsx
index 51e6ff33c52..0ae26090ab8 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { Chip, ChipDropdown, ChipInput, ChipTextarea, cn } from '@sim/emcn'
+import { Chip, ChipInput, ChipSelect, ChipTextarea, cn } from '@sim/emcn'
 import type { SandboxDependencyIssue } from '@/lib/api/contracts/sandboxes'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import { ManagedCliSelect } from '@/app/workspace/[workspaceId]/settings/components/sandboxes/components/managed-cli-select'
@@ -67,7 +67,11 @@ export function SandboxEditor({
             />
           </SettingsField>
           <SettingsField label='Language'>
-            <ChipDropdown
+            <ChipSelect
+              showSelectedCheck
+              dropdownWidth='trigger'
+              modal={false}
+              className='w-auto max-w-none'
               value={draft.language}
               onChange={(language) => onChange({ ...draft, language: language as SandboxLanguage })}
               options={LANGUAGE_OPTIONS.map((option) => ({
@@ -238,7 +242,7 @@ export function SandboxStatus({
                 {showLog ? 'Hide log' : 'Show log'}
               </Chip>
               {showLog && (
-                <pre className='max-h-64 overflow-auto whitespace-pre-wrap rounded-[8px] bg-[var(--surface-3)] p-3 text-[var(--text-muted)] text-caption'>
+                <pre className='max-h-64 overflow-auto whitespace-pre-wrap rounded-lg bg-[var(--surface-3)] p-3 text-[var(--text-muted)] text-caption'>
                   {sandbox.errorDetail}
                 </pre>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
index a843694bfe8..fa0e488c761 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
@@ -11,7 +11,7 @@ const VIEWER_MASK_LENGTH = 10
 
 type SecretValueFieldProps = Omit<
   ComponentProps<'input'>,
-  'type' | 'value' | 'onChange' | 'readOnly' | 'style'
+  'type' | 'value' | 'onChange' | 'readOnly' | 'style' | 'size'
 > & {
   /** The chip owns field styling; callers use className for layout. */
   style?: never
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
index 82c1009e63d..9e00fc9c38a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
@@ -83,18 +83,16 @@ export function NoOrganizationView({
 
             <div>
               <Label htmlFor='orgSlug'>Team URL</Label>
-              <div className='mt-1 flex items-center'>
-                <div className='rounded-l-[6px] border border-[var(--border-1)] border-r-0 bg-[var(--surface-4)] px-3 py-1.5 text-[var(--text-muted)] text-small'>
-                  sim.ai/team/
-                </div>
-                <ChipInput
-                  id='orgSlug'
-                  value={orgSlug}
-                  onChange={(e) => setOrgSlug(e.target.value)}
-                  placeholder='my-team'
-                  className='rounded-l-none'
-                />
-              </div>
+              <ChipInput
+                id='orgSlug'
+                value={orgSlug}
+                onChange={(e) => setOrgSlug(e.target.value)}
+                placeholder='my-team'
+                className='mt-1'
+                startAdornment={
+                  <span className='shrink-0 text-[var(--text-muted)] text-small'>sim.ai/team/</span>
+                }
+              />
             </div>
 
             <div className='flex flex-col gap-2'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
index 42ca096a093..43e5f9d25a5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { ChipDropdown, ChipTag, toast } from '@sim/emcn'
+import { ChipSelect, ChipTag, toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { isOrgAdminRole } from '@sim/platform-authz/predicates'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -138,7 +138,10 @@ export function OrganizationMemberLists({
         }
         roleControl={
           editable ? (
-            <ChipDropdown
+            <ChipSelect
+              showSelectedCheck
+              modal={false}
+              className='w-auto max-w-none'
               value={member.role}
               onChange={(role) =>
                 updateMemberRole
@@ -150,7 +153,7 @@ export function OrganizationMemberLists({
                   .catch((error) => logger.error('Failed to update member role', { error }))
               }
               options={ORG_ROLE_OPTIONS}
-              matchTriggerWidth={false}
+              dropdownWidth='content'
               disabled={updateMemberRole.isPending}
             />
           ) : (
@@ -263,7 +266,10 @@ export function OrganizationMemberLists({
           {isExternal ? 'External' : invitation.role === 'admin' ? 'Admin' : 'Member'}
         </ChipTag>
       ) : (
-        <ChipDropdown
+        <ChipSelect
+          showSelectedCheck
+          modal={false}
+          className='w-auto max-w-none'
           value={invitation.role === 'admin' ? 'admin' : 'member'}
           onChange={(role) =>
             updateInvitation
@@ -275,7 +281,7 @@ export function OrganizationMemberLists({
               .catch((error) => logger.error('Failed to update invitation role', { error }))
           }
           options={ORG_ROLE_OPTIONS}
-          matchTriggerWidth={false}
+          dropdownWidth='content'
           disabled={updateInvitation.isPending}
         />
       )
@@ -315,7 +321,10 @@ export function OrganizationMemberLists({
         }
         roleControl={
           <RoleLockTooltip reason={lockReason}>
-            <ChipDropdown
+            <ChipSelect
+              showSelectedCheck
+              modal={false}
+              className='w-auto max-w-none'
               value={access.permission}
               onChange={(permission) =>
                 updatePermissions
@@ -329,7 +338,7 @@ export function OrganizationMemberLists({
                   )
               }
               options={WORKSPACE_ROLE_OPTIONS}
-              matchTriggerWidth={false}
+              dropdownWidth='content'
               disabled={disabled}
             />
           </RoleLockTooltip>
@@ -364,7 +373,10 @@ export function OrganizationMemberLists({
     access: RosterWorkspaceAccess
   ) => {
     const roleControl = (
-      <ChipDropdown
+      <ChipSelect
+        showSelectedCheck
+        modal={false}
+        className='w-auto max-w-none'
         value={access.permission}
         onChange={(permission) =>
           updateInvitation
@@ -376,7 +388,7 @@ export function OrganizationMemberLists({
             .catch((error) => logger.error('Failed to update invitation grant', { error }))
         }
         options={WORKSPACE_ROLE_OPTIONS}
-        matchTriggerWidth={false}
+        dropdownWidth='content'
         disabled={!canManage || updateInvitation.isPending}
       />
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
index de8294ee6c5..133c90c68b9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { ChipDropdown, Plus, toast } from '@sim/emcn'
+import { ChipSelect, Plus, toast } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { formatDate } from '@sim/utils/formatting'
 import { useQueryClient } from '@tanstack/react-query'
@@ -238,11 +238,14 @@ export function Teammates() {
                 status={teammate.status}
                 roleControl={
                   <RoleLockTooltip reason={lockReason}>
-                    <ChipDropdown
+                    <ChipSelect
+                      showSelectedCheck
+                      modal={false}
+                      className='w-auto max-w-none'
                       value={teammate.role}
                       onChange={(role) => handleRoleChange(teammate, role as WorkspacePermission)}
                       options={ROLE_OPTIONS}
-                      matchTriggerWidth={false}
+                      dropdownWidth='content'
                       disabled={
                         teammate.isPending ||
                         !canManage ||
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index f712133d9b9..878e7165988 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -607,7 +607,7 @@ function ServerDetailView({
                               : 'json'
                         }
                         wrapText
-                        className='min-h-0! rounded-sm border border-[var(--border-1)]'
+                        className='min-h-0!'
                       />
                       {activeConfigTab === 'cursor' && (
                         <a
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
index abf3f9391a0..a1db5e3daf5 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
@@ -5,7 +5,6 @@ import {
   Button,
   ChipCombobox,
   ChipInput,
-  cn,
   FieldDivider,
   Label,
   Switch,
@@ -25,6 +24,14 @@ import {
   FieldError,
   RequiredLabel,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
+import {
+  TableSidebarScrollBody,
+  TableSidebarShell,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout'
 import { useAddTableColumn, useUpdateColumn } from '@/hooks/queries/tables'
 import { SelectOptionsEditor } from '../select-field'
 import { columnTypeOptionsForTable } from './column-types'
@@ -96,18 +103,11 @@ export function ColumnConfigSidebar(props: ColumnConfigSidebarProps) {
   // different column / mode remounts and re-seeds state from props.
   const open = props.config !== null
   return (
-    <aside
-      role='dialog'
-      aria-label='Configure column'
-      className={cn(
-        'absolute top-0 right-0 bottom-0 z-[var(--z-modal)] flex w-[400px] flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)] transition-transform duration-200 ease-out',
-        open ? 'translate-x-0 shadow-overlay' : 'translate-x-full'
-      )}
-    >
+    <TableSidebarShell open={open} aria-label='Configure column'>
       {props.config && (
         <ColumnConfigBody key={configKey(props.config)} {...props} config={props.config} />
       )}
-    </aside>
+    </TableSidebarShell>
   )
 }
 
@@ -263,21 +263,14 @@ function ColumnConfigBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <h2 className='text-[var(--text-primary)] text-small'>Configure column</h2>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
-      <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
+      <TableSidebarScrollBody>
         {/* `disabled` on the fieldset reaches every native control inside,
             including the comboboxes' trigger buttons; `contents` keeps the
             existing layout. Values stay readable and selectable. */}
@@ -386,7 +379,7 @@ function ColumnConfigBody({
             </>
           )}
         </fieldset>
-      </div>
+      </TableSidebarScrollBody>
 
       <div className='flex items-center justify-end gap-2 border-[var(--border)] border-t px-2 py-3'>
         <Button variant='default' size='sm' onClick={onClose}>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
index f411281d21e..2cbf1f8c564 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
@@ -21,6 +21,11 @@ import type { ColumnDefinition, WorkflowGroup, WorkflowGroupOutput } from '@/lib
 import { columnMatchesRef, getColumnId } from '@/lib/table/column-keys'
 import { deriveOutputColumnName } from '@/lib/table/column-naming'
 import { FieldError } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
+import { TableSidebarScrollBody } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout'
 import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
 import {
   useAddWorkflowGroup,
@@ -232,33 +237,23 @@ export function EnrichmentConfig({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <div className='flex min-w-0 items-center gap-1.5'>
-          <Button
-            variant='ghost'
-            size='sm'
+          <TableSidebarHeaderAction
             onClick={onBack}
-            iconPadding='sm'
-            className='size-7 flex-none'
+            className='flex-none'
             aria-label='Back to enrichments'
           >
             <ArrowLeft className='size-[14px]' />
-          </Button>
+          </TableSidebarHeaderAction>
           <OverflowText label={enrichment.name} className='text-[var(--text-primary)] text-small' />
         </div>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7 flex-none'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
-      <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
+      <TableSidebarScrollBody>
         <div className='flex flex-col gap-[9.5px]'>
           <Label className='flex items-baseline gap-1.5 whitespace-nowrap pl-0.5'>Inputs</Label>
           {enrichment.inputs.length === 0 ? (
@@ -368,7 +363,7 @@ export function EnrichmentConfig({
             />
           </>
         )}
-      </div>
+      </TableSidebarScrollBody>
 
       <div className='flex items-center justify-end gap-2 border-[var(--border)] border-t px-2 py-3'>
         <Button variant='default' size='sm' onClick={onClose}>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
index 0aebd34cb4c..22a0134a7f2 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
@@ -1,9 +1,14 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, ChipInput, cn } from '@sim/emcn'
+import { ChipInput } from '@sim/emcn'
 import { Search, X } from '@sim/emcn/icons'
 import type { ColumnDefinition, WorkflowGroup } from '@/lib/table'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
+import { TableSidebarShell } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout'
 import { ALL_ENRICHMENTS } from '@/enrichments'
 import { getEnrichment } from '@/enrichments/registry'
 import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
@@ -27,16 +32,9 @@ interface EnrichmentsSidebarProps {
  */
 export function EnrichmentsSidebar({ open, ...rest }: EnrichmentsSidebarProps) {
   return (
-    <aside
-      role='dialog'
-      aria-label='Enrichments'
-      className={cn(
-        'absolute top-0 right-0 bottom-0 z-[var(--z-modal)] flex w-[400px] flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)] transition-transform duration-200 ease-out',
-        open ? 'translate-x-0 shadow-overlay' : 'translate-x-full'
-      )}
-    >
+    <TableSidebarShell open={open} aria-label='Enrichments'>
       {open && <EnrichmentsSidebarBody {...rest} />}
-    </aside>
+    </TableSidebarShell>
   )
 }
 
@@ -71,19 +69,12 @@ function EnrichmentsSidebarBody({
   if (editGroup && !editEnrichment) {
     return (
       <div className='flex h-full flex-col'>
-        <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+        <TableSidebarHeader>
           <h2 className='text-[var(--text-primary)] text-small'>Enrichment</h2>
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={onClose}
-            iconPadding='sm'
-            className='size-7 flex-none'
-            aria-label='Close'
-          >
+          <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
             <X className='size-[14px]' />
-          </Button>
-        </div>
+          </TableSidebarHeaderAction>
+        </TableSidebarHeader>
         <div className='flex flex-1 items-center justify-center px-6 text-center'>
           <p className='text-[var(--text-tertiary)] text-small'>
             This enrichment ("{editGroup.enrichmentId}") is no longer available. Delete the column
@@ -118,19 +109,12 @@ function EnrichmentsSidebarBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <h2 className='text-[var(--text-primary)] text-small'>Enrichments</h2>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7 flex-none'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
       <div className='px-2 pt-3'>
         <ChipInput
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/lock-settings-modal/lock-settings-modal.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/lock-settings-modal/lock-settings-modal.tsx
index e72cdce34ad..694361bc085 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/lock-settings-modal/lock-settings-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/lock-settings-modal/lock-settings-modal.tsx
@@ -95,7 +95,7 @@ export function LockSettingsModal({
           <ChipModalField
             key={field.key}
             type='custom'
-            className='flex-row items-center justify-between'
+            orientation='horizontal'
             title={
               <span className='inline-flex items-center gap-1.5'>
                 {field.label}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
index 4319140413d..0fba77cbe81 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
@@ -80,7 +80,8 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
             size='sm'
             onClick={() => remove(option.id)}
             iconPadding='sm'
-            className='size-7 shrink-0'
+            iconSize='regular'
+            className='shrink-0'
             aria-label={`Remove ${option.name || 'option'}`}
           >
             <X className='size-[12px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-value-editor.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-value-editor.tsx
index cdd89e8e821..44cf3ae11bb 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-value-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-value-editor.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { ChipDropdown } from '@sim/emcn'
+import { ChipSelect } from '@sim/emcn'
 import type { ColumnDefinition } from '@/lib/table'
 import { SelectPill, selectedOptionIds } from './select-pill'
 
@@ -18,7 +18,7 @@ const CLEAR_VALUE = ''
 
 /**
  * Option picker for `select`/`multiselect` cells in a form context (the row
- * modal) — a `ChipDropdown` pill that lists each option as its colored pill and
+ * modal) — a `ChipSelect` pill that lists each option as its colored pill and
  * writes option ids back through `onChange`. Inline grid editing uses a bare
  * `DropdownMenu` instead (see `InlineSelectEditor`).
  */
@@ -35,31 +35,30 @@ export function SelectValueEditor({
       (column.options ?? []).map((option) => ({
         value: option.id,
         label: <SelectPill option={option} />,
+        searchTerms: [option.name] as const,
       })),
     [column.options]
   )
 
   if (isMulti) {
     return (
-      <ChipDropdown
-        multiple
-        value={selectedOptionIds(column, value)}
+      <ChipSelect
+        placeholder='Select options'
+        modal={false}
+        className={fullWidth ? undefined : 'w-auto max-w-none'}
+        multiSelect
+        multiSelectValues={selectedOptionIds(column, value)}
         // A required multiselect can't be emptied — ignore the toggle that would
         // remove the last option, since an empty selection can never be committed.
-        onChange={(ids) => {
+        onMultiSelectChange={(ids) => {
           if (column.required && ids.length === 0) return
           onChange(ids)
         }}
         options={options}
         showAllOption={false}
-        // In multiple mode ChipDropdown ignores `placeholder` and renders
-        // `allLabel` when nothing is selected — which would read as if every
-        // option were chosen. There is no "All" entry here, so this is the
-        // empty label.
-        allLabel='Select options'
         align={align}
         fullWidth={fullWidth}
-        matchTriggerWidth={false}
+        dropdownWidth='content'
       />
     )
   }
@@ -69,19 +68,26 @@ export function SelectValueEditor({
   const singleOptions = column.required
     ? options
     : [
-        { value: CLEAR_VALUE, label: <span className='text-[var(--text-muted)]'>None</span> },
+        {
+          value: CLEAR_VALUE,
+          label: <span className='text-[var(--text-muted)]'>None</span>,
+          searchTerms: ['None'] as const,
+        },
         ...options,
       ]
 
   return (
-    <ChipDropdown
+    <ChipSelect
+      showSelectedCheck
+      modal={false}
+      className={fullWidth ? undefined : 'w-auto max-w-none'}
       value={selectedOptionIds(column, value)[0] ?? CLEAR_VALUE}
       onChange={(id) => onChange(id === CLEAR_VALUE ? null : id)}
       options={singleOptions}
       placeholder='Select an option'
       align={align}
       fullWidth={fullWidth}
-      matchTriggerWidth={false}
+      dropdownWidth='content'
     />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx
index b04257ae755..9922997c840 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type React from 'react'
-import { BulkActionButton, cn, Tooltip } from '@sim/emcn'
+import { BulkActionBar, BulkActionButton, cn, Tooltip } from '@sim/emcn'
 import { Eye, PlayOutline, RefreshCw, Square } from '@sim/emcn/icons'
 import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
 
@@ -89,47 +89,42 @@ export function TableActionBar({
               className
             )}
           >
-            <div className='pointer-events-auto flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'>
-              <span className='px-1 text-[var(--text-secondary)] text-small'>
-                {selectedCellCount === 1
+            <BulkActionBar
+              className='pointer-events-auto'
+              label={
+                selectedCellCount === 1
                   ? 'Selected 1 workflow cell'
-                  : `Selected ${selectedCellCount} workflow cells`}
-              </span>
+                  : `Selected ${selectedCellCount} workflow cells`
+              }
+            >
+              {showPlay && (
+                <ActionIconButton label={playLabel} onClick={onPlay} disabled={isLoading}>
+                  <PlayOutline className='size-[12px]' />
+                </ActionIconButton>
+              )}
 
-              <div className='flex items-center gap-[5px]'>
-                {showPlay && (
-                  <ActionIconButton label={playLabel} onClick={onPlay} disabled={isLoading}>
-                    <PlayOutline className='size-[12px]' />
-                  </ActionIconButton>
-                )}
+              {showRefresh && (
+                <ActionIconButton label={refreshLabel} onClick={onRefresh} disabled={isLoading}>
+                  <RefreshCw className='size-[12px]' />
+                </ActionIconButton>
+              )}
 
-                {showRefresh && (
-                  <ActionIconButton label={refreshLabel} onClick={onRefresh} disabled={isLoading}>
-                    <RefreshCw className='size-[12px]' />
-                  </ActionIconButton>
-                )}
+              {runningCount > 0 && (
+                <ActionIconButton label={stopLabel} onClick={onStopWorkflows} disabled={isLoading}>
+                  <Square className='size-[12px]' />
+                </ActionIconButton>
+              )}
 
-                {runningCount > 0 && (
-                  <ActionIconButton
-                    label={stopLabel}
-                    onClick={onStopWorkflows}
-                    disabled={isLoading}
-                  >
-                    <Square className='size-[12px]' />
-                  </ActionIconButton>
-                )}
-
-                {onViewExecution && (
-                  <ActionIconButton
-                    label='View execution'
-                    onClick={onViewExecution}
-                    disabled={isLoading}
-                  >
-                    <Eye className='size-[12px]' />
-                  </ActionIconButton>
-                )}
-              </div>
-            </div>
+              {onViewExecution && (
+                <ActionIconButton
+                  label='View execution'
+                  onClick={onViewExecution}
+                  disabled={isLoading}
+                >
+                  <Eye className='size-[12px]' />
+                </ActionIconButton>
+              )}
+            </BulkActionBar>
           </m.div>
         )}
       </AnimatePresence>
@@ -152,12 +147,7 @@ function ActionIconButton({ label, onClick, disabled, children }: ActionIconButt
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        <BulkActionButton
-          onClick={onClick}
-          disabled={disabled}
-          surface='uniform'
-          aria-label={label}
-        >
+        <BulkActionButton onClick={onClick} disabled={disabled} aria-label={label}>
           {children}
         </BulkActionButton>
       </Tooltip.Trigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
index bc1e125b79d..a1d885c9b1b 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
-import { Button, ChipDropdown, ChipInput, cn } from '@sim/emcn'
+import { Button, Chip, ChipInput, ChipSelect, cn } from '@sim/emcn'
 import { Plus, X } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import type { ColumnDefinition, FilterRule, TablePredicate } from '@/lib/table'
@@ -243,20 +243,19 @@ export function TableFilter({
         ))}
 
         <div className={cn('mt-1 flex items-center', !autoApply && 'justify-between')}>
-          <Button variant='ghost' size='sm' onClick={handleAdd} className='px-2 text-xs'>
-            <Plus className='mr-1 size-[10px]' />
+          <Chip type='button' onClick={handleAdd} leftIcon={Plus}>
             Add filter
-          </Button>
+          </Chip>
           {!autoApply && (
             <div className='flex items-center gap-1.5'>
               {filter !== null && (
-                <Button variant='ghost' size='sm' onClick={handleClear} className='px-2 text-xs'>
+                <Chip type='button' onClick={handleClear}>
                   Clear filters
-                </Button>
+                </Chip>
               )}
-              <Button variant='default' size='sm' onClick={handleApply} className='text-xs'>
+              <Chip type='button' variant='border-shadow' onClick={handleApply}>
                 Apply filter
-              </Button>
+              </Chip>
             </div>
           )}
         </div>
@@ -323,43 +322,49 @@ const FilterRuleRow = memo(function FilterRuleRow({
       ) : (
         <button
           onClick={() => onToggleLogical(rule.id)}
-          className='w-[42px] shrink-0 rounded-full py-0.5 text-right text-[10px] text-[var(--text-muted)] uppercase tracking-wide transition-colors hover:text-[var(--text-secondary)]'
+          className='w-[42px] shrink-0 rounded-full py-0.5 text-right text-[var(--text-muted)] text-micro uppercase tracking-wide transition-colors hover:text-[var(--text-secondary)]'
         >
           {rule.logicalOperator}
         </button>
       )}
 
-      <ChipDropdown
+      <ChipSelect
+        showSelectedCheck
+        modal={false}
         options={columnOptions}
         value={rule.column}
         onChange={(value) => onColumnChange(rule.id, value)}
         placeholder='Column'
         align='start'
-        matchTriggerWidth={false}
-        className='min-w-[100px]'
+        dropdownWidth='content'
+        className='w-auto min-w-[100px] max-w-none'
       />
 
-      <ChipDropdown
+      <ChipSelect
+        showSelectedCheck
+        modal={false}
         options={operatorOptions}
         value={rule.operator}
         onChange={(value) => onUpdate(rule.id, 'operator', value)}
         placeholder='Operator'
         align='start'
-        matchTriggerWidth={false}
-        className='min-w-[90px]'
+        dropdownWidth='content'
+        className='w-auto min-w-[90px] max-w-none'
       />
 
       {VALUELESS_OPS.has(rule.operator) ? (
         <div className='h-[30px] flex-1' />
       ) : isSelect ? (
-        <ChipDropdown
+        <ChipSelect
+          showSelectedCheck
+          modal={false}
           options={selectValueOptions}
           value={rule.value}
           onChange={(value) => onUpdate(rule.id, 'value', value)}
           placeholder='Select a value'
           align='start'
-          matchTriggerWidth={false}
-          className='min-w-[100px] flex-1'
+          dropdownWidth='content'
+          className='w-auto min-w-[100px] max-w-none flex-1'
         />
       ) : autoApply ? (
         <FilterValueInput
@@ -383,7 +388,8 @@ const FilterRuleRow = memo(function FilterRuleRow({
         size='sm'
         onClick={() => onRemove(rule.id)}
         iconPadding='sm'
-        className='size-7 shrink-0'
+        iconSize='regular'
+        className='shrink-0'
         aria-label='Remove filter'
       >
         <X className='size-[12px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx
index 6e9045f2bd4..bb468ac963d 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx
@@ -412,7 +412,7 @@ export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactEle
             alt=''
             width={12}
             height={12}
-            className='shrink-0 rounded-[2px]'
+            className='shrink-0 rounded-xs'
             onError={(e) => {
               e.currentTarget.style.display = 'none'
             }}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx
index 5fb467f4d3f..dfb6c820d33 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx
@@ -178,7 +178,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
       ghost.textContent = ghostLabel
       ghost.className = 'text-small'
       ghost.style.cssText =
-        'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;white-space:nowrap;color:var(--text-primary)'
+        'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);white-space:nowrap;color:var(--text-primary)'
       document.body.appendChild(ghost)
       e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
       requestAnimationFrame(() => ghost.parentNode?.removeChild(ghost))
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx
index 69c159e585b..0c760235c2b 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx
@@ -475,7 +475,7 @@ export function WorkflowGroupMetaCell({
     ghost.textContent = name
     ghost.className = 'text-xs'
     ghost.style.cssText =
-      'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;white-space:nowrap;color:var(--text-primary)'
+      'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);white-space:nowrap;color:var(--text-primary)'
     document.body.appendChild(ghost)
     e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
     requestAnimationFrame(() => ghost.parentNode?.removeChild(ghost))
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
index 0cabf2f1666..554b011d854 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
@@ -2,7 +2,7 @@
 
 import type React from 'react'
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { cn, toast, useToast } from '@sim/emcn'
+import { cn, ResourceEmptyState, toast, useToast } from '@sim/emcn'
 import { Loader, TableX } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import type { TableCellSelection } from '@sim/realtime-protocol/table-presence'
@@ -4694,15 +4694,11 @@ export function TableGrid({
 
   if (!isLoadingTable && !tableData) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-3'>
-        <TableX className='size-[32px] text-[var(--text-muted)]' />
-        <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[20px] text-[var(--text-secondary)]'>Table not found</h2>
-          <p className='text-[var(--text-muted)] text-small'>
-            This table may have been deleted or moved
-          </p>
-        </div>
-      </div>
+      <ResourceEmptyState
+        icon={TableX}
+        title='Table not found'
+        description='This table may have been deleted or moved'
+      />
     )
   }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
new file mode 100644
index 00000000000..99892eb15fb
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
@@ -0,0 +1,38 @@
+import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
+import { Button } from '@sim/emcn'
+
+interface TableSidebarHeaderProps {
+  children: ReactNode
+}
+
+/** Shared header row for table configuration sidebars. */
+export function TableSidebarHeader({ children }: TableSidebarHeaderProps) {
+  return (
+    <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      {children}
+    </div>
+  )
+}
+
+interface TableSidebarHeaderActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'aria-label': string
+}
+
+/** Button treatment for actions in a table sidebar header. */
+export const TableSidebarHeaderAction = forwardRef<
+  HTMLButtonElement,
+  TableSidebarHeaderActionProps
+>(({ className, ...props }, ref) => (
+  <Button
+    {...props}
+    ref={ref}
+    variant='ghost'
+    size='sm'
+    iconSize='regular'
+    iconPadding='sm'
+    focusRing='muted'
+    className={className}
+  />
+))
+
+TableSidebarHeaderAction.displayName = 'TableSidebarHeaderAction'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx
new file mode 100644
index 00000000000..65dd9ada49b
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx
@@ -0,0 +1,70 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import {
+  TableSidebarScrollBody,
+  TableSidebarShell,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout'
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+describe('table sidebar layout', () => {
+  it('keeps the labeled dialog and its form mounted while the sidebar slides closed', () => {
+    function render(open: boolean) {
+      act(() => {
+        root.render(
+          <TableSidebarShell open={open} aria-label='Configure workflow'>
+            <TableSidebarScrollBody>
+              <input aria-label='Workflow name' defaultValue='Existing workflow' />
+            </TableSidebarScrollBody>
+          </TableSidebarShell>
+        )
+      })
+    }
+
+    render(true)
+    const dialog = container.querySelector<HTMLElement>('[role="dialog"]')
+    const input = container.querySelector<HTMLInputElement>('input')
+    if (!dialog || !input) throw new Error('Missing sidebar dialog or workflow input')
+    const scrollBody = input.parentElement
+    if (!scrollBody) throw new Error('Missing sidebar scroll body')
+    expect(dialog.getAttribute('aria-label')).toBe('Configure workflow')
+    expect(dialog.classList.contains('translate-x-0')).toBe(true)
+    expect(dialog.classList.contains('shadow-overlay')).toBe(true)
+    expect(dialog.hasAttribute('inert')).toBe(false)
+
+    input.value = 'Edited workflow'
+    scrollBody.scrollTop = 64
+    render(false)
+    expect(container.querySelector('[role="dialog"]')).toBe(dialog)
+    expect(container.querySelector('input')).toBe(input)
+    expect(input.value).toBe('Edited workflow')
+    expect(input.parentElement).toBe(scrollBody)
+    expect(scrollBody.scrollTop).toBe(64)
+    expect(dialog.classList.contains('translate-x-full')).toBe(true)
+    expect(dialog.classList.contains('shadow-overlay')).toBe(false)
+    expect(dialog.hasAttribute('inert')).toBe(true)
+
+    render(true)
+    expect(dialog.classList.contains('translate-x-0')).toBe(true)
+    expect(dialog.hasAttribute('inert')).toBe(false)
+    expect(input.value).toBe('Edited workflow')
+    expect(scrollBody.scrollTop).toBe(64)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx
new file mode 100644
index 00000000000..728d6e4c410
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx
@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+
+interface TableSidebarShellProps {
+  open: boolean
+  'aria-label': string
+  children: ReactNode
+}
+
+/** The shared sliding shell for table configuration sidebars. */
+export function TableSidebarShell({
+  open,
+  children,
+  'aria-label': ariaLabel,
+}: TableSidebarShellProps) {
+  return (
+    <aside
+      role='dialog'
+      aria-label={ariaLabel}
+      inert={!open}
+      className={cn(
+        'absolute top-0 right-0 bottom-0 z-[var(--z-modal)] flex w-[400px] flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)] transition-transform duration-200 ease-out',
+        open ? 'translate-x-0 shadow-overlay' : 'translate-x-full'
+      )}
+    >
+      {children}
+    </aside>
+  )
+}
+
+interface TableSidebarScrollBodyProps {
+  children: ReactNode
+}
+
+/** The scrolling form area shared by column, workflow, and enrichment settings. */
+export function TableSidebarScrollBody({ children }: TableSidebarScrollBodyProps) {
+  return (
+    <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
+      {children}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index b2e4c98f5a7..8059502c114 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -6,19 +6,18 @@ import {
   ChipCombobox,
   ChipInput,
   type ComboboxOptionGroup,
-  cn,
-  DashedDividerLine,
+  FieldDisclosure,
   FieldDivider,
   Label,
   Loader,
   OverflowText,
   Switch,
-  Tooltip,
   toast,
 } from '@sim/emcn'
-import { ArrowLeft, ChevronDown, SquareArrowUpRight, X } from '@sim/emcn/icons'
+import { ArrowLeft, SquareArrowUpRight, X } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
 import type {
   AddWorkflowGroupBodyInput,
@@ -46,6 +45,14 @@ import {
   FieldError,
   RequiredLabel,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
+import {
+  TableSidebarScrollBody,
+  TableSidebarShell,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout'
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { BlockTile } from '@/blocks/block-tile'
 import { useDeployedWorkflowState } from '@/hooks/queries/deployments'
@@ -146,18 +153,11 @@ interface BlockOutputGroup {
 export function WorkflowSidebar(props: WorkflowSidebarProps) {
   const open = props.config !== null
   return (
-    <aside
-      role='dialog'
-      aria-label='Configure workflow'
-      className={cn(
-        'absolute top-0 right-0 bottom-0 z-[var(--z-modal)] flex w-[400px] flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)] transition-transform duration-200 ease-out',
-        open ? 'translate-x-0 shadow-overlay' : 'translate-x-full'
-      )}
-    >
+    <TableSidebarShell open={open} aria-label='Configure workflow'>
       {props.config && (
         <WorkflowSidebarBody key={configKey(props.config)} {...props} config={props.config} />
       )}
-    </aside>
+    </TableSidebarShell>
   )
 }
 
@@ -630,37 +630,27 @@ export function WorkflowSidebarBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <div className='flex min-w-0 items-center gap-1.5'>
           {showBackButton && (
-            <Button
-              variant='ghost'
-              size='sm'
+            <TableSidebarHeaderAction
               onClick={onBack}
-              iconPadding='sm'
-              className='size-7 flex-none'
+              className='flex-none'
               aria-label='Back to enrichments'
             >
               <ArrowLeft className='size-[14px]' />
-            </Button>
+            </TableSidebarHeaderAction>
           )}
           <h2 className='flex min-w-0'>
             <OverflowText label={title} className='text-[var(--text-primary)] text-small' />
           </h2>
         </div>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7 flex-none'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
-      <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
+      <TableSidebarScrollBody>
         {/* Single-output mode renames this column directly. */}
         {isEditOutputMode && (
           <>
@@ -717,26 +707,18 @@ export function WorkflowSidebarBody({
                       />
                     </div>
                     {!isEnrichment && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Button
-                            aria-label='Open workflow'
-                            type='button'
-                            variant='ghost'
-                            onClick={() =>
-                              window.open(
-                                `/workspace/${workspaceId}/w/${selectedWorkflowId}`,
-                                '_blank',
-                                'noopener,noreferrer'
-                              )
-                            }
-                            className='absolute right-[6px] bottom-1.5 z-10 size-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
-                          >
-                            <SquareArrowUpRight className='size-[12px]' />
-                          </Button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content side='top'>Open workflow</Tooltip.Content>
-                      </Tooltip.Root>
+                      <WorkflowPreviewAction
+                        aria-label='Open workflow'
+                        onClick={() =>
+                          window.open(
+                            `/workspace/${workspaceId}/w/${selectedWorkflowId}`,
+                            '_blank',
+                            'noopener,noreferrer'
+                          )
+                        }
+                      >
+                        <SquareArrowUpRight className='size-[12px]' />
+                      </WorkflowPreviewAction>
                     )}
                   </>
                 ) : (
@@ -837,23 +819,9 @@ export function WorkflowSidebarBody({
             )}
             {selectedWorkflowId && (
               <>
-                <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
-                  <DashedDividerLine className='flex-1' />
-                  <button
-                    type='button'
-                    onClick={() => setShowAdvanced((v) => !v)}
-                    className='flex items-center gap-1.5 whitespace-nowrap text-[var(--text-secondary)] text-small hover-hover:text-[var(--text-primary)]'
-                  >
-                    {showAdvanced ? 'Hide additional fields' : 'Show additional fields'}
-                    <ChevronDown
-                      className={cn(
-                        'size-[14px] transition-transform duration-200',
-                        showAdvanced && 'rotate-180'
-                      )}
-                    />
-                  </button>
-                  <DashedDividerLine className='flex-1' />
-                </div>
+                <FieldDisclosure expanded={showAdvanced} onClick={() => setShowAdvanced((v) => !v)}>
+                  {showAdvanced ? 'Hide additional fields' : 'Show additional fields'}
+                </FieldDisclosure>
                 {showAdvanced && (
                   <>
                     <InputMappingSection
@@ -868,7 +836,7 @@ export function WorkflowSidebarBody({
             )}
           </>
         )}
-      </div>
+      </TableSidebarScrollBody>
 
       <div className='flex items-center justify-end gap-2 border-[var(--border)] border-t px-2 py-3'>
         <Button variant='default' size='sm' onClick={onClose}>
diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx b/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx
index c14dfdeeda4..90e13df381c 100644
--- a/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx
@@ -78,13 +78,15 @@ export function UpgradePlanCard({
     >
       <div className='flex flex-col gap-4'>
         <div className='flex items-start justify-between gap-2'>
-          <h3 className='text-[24px] text-[var(--text-primary)]'>{name}</h3>
+          <h3 className='text-2xl text-[var(--text-primary)] leading-[inherit]'>{name}</h3>
           {bannerText && <ChipTag variant='gray'>{bannerText}</ChipTag>}
         </div>
 
         <div className='flex flex-col'>
           <div className='flex items-center gap-2'>
-            <span className='text-[20px] text-[var(--text-primary)] tabular-nums'>{price}</span>
+            <span className='text-[var(--text-primary)] text-xl tabular-nums leading-[inherit]'>
+              {price}
+            </span>
             {discountLabel && <ChipTag variant='mono'>{discountLabel}</ChipTag>}
           </div>
           <p className='text-[var(--text-muted)] text-base'>{priceSubtext ?? '\u00A0'}</p>
diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx b/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
index 7ec5cadb581..a69dd3eea4f 100644
--- a/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
@@ -192,7 +192,7 @@ export function Upgrade({ workspaceId }: UpgradeProps) {
       <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
         <div className='mx-auto flex w-full max-w-[960px] flex-col gap-7 pt-6 pb-3'>
           <div className='flex flex-col items-center gap-4'>
-            <h1 className='text-balance text-center font-season text-[30px] text-[var(--text-primary)]'>
+            <h1 className='text-balance text-center font-season text-[var(--text-primary)] text-title'>
               {header}
             </h1>
             {state.showUpgradePlans && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index c42c236d1c3..4bd3f1c6c00 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -36,7 +36,7 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
 
 const ACTION_BUTTON_STYLES = [
-  'size-[24px] rounded-md p-0',
+  'rounded-md',
   'border-none bg-transparent text-[var(--text-icon)]',
   'hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]!',
   'dark:hover-hover:bg-[var(--surface-4)]',
@@ -472,6 +472,7 @@ export const ActionBar = memo(
                       }
                       if (canRunBlock) handleRunFromBlockClick()
                     }}
+                    iconSize='compact-fixed'
                     className={cn(getActionButtonStyles('run'), isWorkflowRunning && 'group/run')}
                     disabled={!canStopWorkflow && !canRunBlock}
                   >
@@ -517,6 +518,7 @@ export const ActionBar = memo(
                         collaborativeBatchToggleBlockEnabled([blockId])
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('enabled')}
                     disabled={
                       isWorkflowRunning ||
@@ -553,6 +555,7 @@ export const ActionBar = memo(
                   <DropdownMenuTrigger asChild>
                     <Button
                       variant='ghost'
+                      iconSize='compact-fixed'
                       className={getActionButtonStyles('color')}
                       disabled={
                         isWorkflowRunning ||
@@ -618,6 +621,7 @@ export const ActionBar = memo(
                         collaborativeBatchToggleLocked([blockId])
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('lock')}
                     disabled={isWorkflowRunning || disabled || (isLocked && isParentLocked)}
                   >
@@ -650,6 +654,7 @@ export const ActionBar = memo(
                         handleDuplicateBlock()
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('duplicate')}
                     disabled={isWorkflowRunning || disabled || isLocked || isParentLocked}
                   >
@@ -682,6 +687,7 @@ export const ActionBar = memo(
                         )
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('remove')}
                     disabled={
                       isWorkflowRunning ||
@@ -717,6 +723,7 @@ export const ActionBar = memo(
                       collaborativeBatchRemoveBlocks([blockId])
                     }
                   }}
+                  iconSize='compact-fixed'
                   className={getActionButtonStyles('delete')}
                   disabled={isWorkflowRunning || disabled || isLocked || isParentLocked}
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index e4e41f81a14..0c1075bb2c7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -2,7 +2,6 @@
 
 import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
-  Badge,
   Button,
   ComposerActionButton,
   cn,
@@ -130,7 +129,7 @@ function ChatFilePreview({ file, onRemove }: ChatFilePreviewProps) {
       ) : (
         <div className='min-w-0 flex-1'>
           <div className='truncate font-medium text-[var(--white)] text-micro'>{file.name}</div>
-          <div className='text-[9px] text-[var(--text-tertiary)]'>{formatFileSize(file.size)}</div>
+          <div className='text-[var(--text-tertiary)] text-micro'>{formatFileSize(file.size)}</div>
         </div>
       )}
 
@@ -1074,16 +1073,21 @@ export function Chat() {
               <div className='-translate-y-1/2 absolute top-1/2 right-[2px] flex items-center gap-2.5'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <Badge
-                      onClick={() => document.getElementById('floating-chat-file-input')?.click()}
-                      className={cn(
-                        'cursor-pointer rounded-md border-0! bg-transparent! p-[0px]',
-                        (!activeWorkflowId || isExecuting || chatFiles.length >= MAX_CHAT_FILES) &&
-                          'cursor-not-allowed opacity-50'
-                      )}
-                    >
-                      <Paperclip className='h-3.5! w-3.5!' />
-                    </Badge>
+                    <span className='inline-flex'>
+                      <Button
+                        type='button'
+                        variant='ghost'
+                        size='icon'
+                        aria-label='Attach file'
+                        onClick={() => document.getElementById('floating-chat-file-input')?.click()}
+                        disabled={
+                          !activeWorkflowId || isExecuting || chatFiles.length >= MAX_CHAT_FILES
+                        }
+                        className='rounded-md focus-visible:ring-1 focus-visible:ring-[var(--text-muted)] disabled:opacity-50'
+                      >
+                        <Paperclip className='h-3.5! w-3.5!' />
+                      </Button>
+                    </span>
                   </Tooltip.Trigger>
                   <Tooltip.Content>Attach file</Tooltip.Content>
                 </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
index 88478ea513c..5851d2bb03b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
@@ -79,7 +79,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
         )}
 
         {formattedContent && !formattedContent.startsWith('Uploaded') && (
-          <div className='rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] transition-all duration-200'>
+          <div className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] transition-all duration-200'>
             <div className='whitespace-pre-wrap break-words font-sans text-[var(--text-primary)] text-sm leading-[1.25rem]'>
               <WordWrap text={formattedContent} />
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
index 3d2e7e8b88a..f8cc36b1ef6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
@@ -208,7 +208,7 @@ export function CommandList() {
               {/* Right side: Keyboard Shortcut */}
               <div className='flex items-center gap-1'>
                 <Button
-                  className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
+                  className='group-hover:-translate-y-0.5 w-[26px] py-[3px] hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
                   variant='3d'
                 >
                   <span>⌘</span>
@@ -216,7 +216,7 @@ export function CommandList() {
                 {shortcuts.map((shortcut) => (
                   <Button
                     key={shortcut}
-                    className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
+                    className='group-hover:-translate-y-0.5 w-[26px] py-[3px] hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
                     variant='3d'
                   >
                     {shortcut}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
index adc95e4e4ef..7b80ab05388 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
@@ -95,7 +95,7 @@ export const DiffControls = memo(function DiffControls() {
           }}
         >
           Accept
-          <kbd className='ml-2 rounded border border-white/20 bg-white/10 px-1.5 py-0.5 font-medium font-sans text-micro'>
+          <kbd className='ml-2 rounded-sm border border-white/20 bg-white/10 px-1.5 py-0.5 font-medium font-sans text-micro'>
             ⇧⌘<span className='translate-y-[-1px]'>⏎</span>
           </kbd>
         </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
index e4b63ed76e0..2aa6c76129d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -480,7 +480,7 @@ console.log(limits);`
           code={getSyncCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='min-h-0! rounded-sm border border-[var(--border-1)]'
+          className='min-h-0!'
         />
       </div>
 
@@ -518,7 +518,7 @@ console.log(limits);`
           code={getStreamCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='min-h-0! rounded-sm border border-[var(--border-1)]'
+          className='min-h-0!'
         />
       </div>
 
@@ -562,7 +562,7 @@ console.log(limits);`
             code={getAsyncCommand()}
             language={LANGUAGE_SYNTAX[language]}
             wrapText
-            className='min-h-0! rounded-sm border border-[var(--border-1)]'
+            className='min-h-0!'
           />
         </div>
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat-field-error.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat-field-error.test.tsx
new file mode 100644
index 00000000000..3330346065d
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat-field-error.test.tsx
@@ -0,0 +1,84 @@
+import type { ComponentProps, PropsWithChildren } from 'react'
+import { deploymentShapeMock } from '@sim/testing/mocks/deployment-shape.mock'
+import { emcnMock } from '@sim/testing/mocks/emcn.mock'
+import { emcnIconsMock } from '@sim/testing/mocks/emcn-icons.mock'
+import { JSDOM } from 'jsdom'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+const validation = vi.hoisted(() => ({
+  current: { isChecking: false, error: 'Use lowercase letters', isValid: false } as {
+    isChecking: boolean
+    error: string | null
+    isValid: boolean
+  },
+}))
+
+vi.mock('@sim/emcn', () => ({
+  ...emcnMock,
+  Input: (props: ComponentProps<'input'>) => <input {...props} />,
+  Label: (props: ComponentProps<'label'>) => (
+    <label htmlFor={props.htmlFor} className={props.className}>
+      {props.children}
+    </label>
+  ),
+  Tooltip: {
+    Root: ({ children }: PropsWithChildren) => <>{children}</>,
+    Trigger: ({ children }: PropsWithChildren) => <>{children}</>,
+    Content: ({ children }: PropsWithChildren) => <>{children}</>,
+  },
+}))
+vi.mock('@sim/emcn/icons', () => emcnIconsMock)
+vi.mock('@/components/ui', () => ({ GeneratedPasswordInput: () => null }))
+vi.mock('@/lib/core/config/deployment-shape', () => deploymentShapeMock)
+vi.mock('@/lib/messaging/email/validation', () => ({ validateAllowlistEntry: () => true }))
+vi.mock('@/lib/workflows/streaming/output-selector', () => ({
+  formatInternalOutputSelector: () => '',
+}))
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select',
+  () => ({
+    OutputSelect: () => null,
+  })
+)
+vi.mock('@/hooks/queries/chats', () => ({
+  useCreateChat: () => ({}),
+  useDeleteChat: () => ({}),
+  useRevealChatPassword: () => ({}),
+  useUpdateChat: () => ({}),
+}))
+vi.mock('@/hooks/use-permission-config', () => ({ usePermissionConfig: () => ({}) }))
+vi.mock('./hooks', () => ({ useIdentifierValidation: () => validation.current }))
+
+import { IdentifierInput } from './chat'
+
+function renderIdentifier() {
+  return new JSDOM(renderToStaticMarkup(<IdentifierInput value='bad path' onChange={vi.fn()} />))
+    .window.document
+}
+
+describe('deploy URL field error', () => {
+  it('announces and associates the URL validation error with its input', () => {
+    validation.current = { isChecking: false, error: 'Use lowercase letters', isValid: false }
+    const document = renderIdentifier()
+    const input = document.querySelector<HTMLInputElement>('#chat-url')
+    const alert = document.querySelector<HTMLElement>('[role="alert"]')
+
+    expect(alert?.textContent).toBe('Use lowercase letters')
+    expect(alert?.className).toBe('mt-[6.5px] text-[var(--text-error)] text-caption')
+    expect(input?.getAttribute('aria-invalid')).toBe('true')
+    expect(input?.getAttribute('aria-describedby')).toBe(alert?.id)
+    expect(alert?.id).toBeTruthy()
+    expect(document.querySelector('label')?.htmlFor).toBe(input?.id)
+  })
+
+  it('omits the error relationship when the URL is valid', () => {
+    validation.current = { isChecking: false, error: null, isValid: true }
+    const document = renderIdentifier()
+    const input = document.querySelector<HTMLInputElement>('#chat-url')
+
+    expect(document.querySelector('[role="alert"]')).toBeNull()
+    expect(input?.getAttribute('aria-invalid')).toBe('false')
+    expect(input?.hasAttribute('aria-describedby')).toBe(false)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
index 8ce604f967b..b90788f6f3b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -1,19 +1,19 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useId, useRef, useState } from 'react'
 import {
   ChipButtonGroup,
   ChipButtonGroupItem,
   ChipConfirmModal,
   ChipEmailsInput,
   ChipInput,
+  ChipModalField,
   cn,
   Input,
   Label,
   Loader,
   Skeleton,
   Switch,
-  Textarea,
   Tooltip,
 } from '@sim/emcn'
 import { Check, TriangleAlert } from '@sim/emcn/icons'
@@ -49,6 +49,19 @@ const logger = createLogger('ChatDeploy')
 
 const IDENTIFIER_PATTERN = /^[a-z0-9-]+$/
 
+interface DeployFieldErrorProps {
+  children: ReactNode
+  id?: string
+}
+
+function DeployFieldError({ children, id }: DeployFieldErrorProps) {
+  return (
+    <p id={id} role='alert' className='mt-[6.5px] text-[var(--text-error)] text-caption'>
+      {children}
+    </p>
+  )
+}
+
 interface ChatDeployProps {
   workflowId: string
   existingChat: ExistingChat | null
@@ -331,12 +344,7 @@ export function ChatDeploy({
 
   return (
     <>
-      <form
-        id='chat-deploy-form'
-        ref={formRef}
-        onSubmit={handleSubmit}
-        className='-mx-1 space-y-4 px-1'
-      >
+      <form id='chat-deploy-form' ref={formRef} onSubmit={handleSubmit} className='space-y-4'>
         {errors.general && (
           <div className='flex items-center gap-2 rounded-md border border-[color-mix(in_srgb,var(--text-error)_20%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] px-3 py-2 text-[var(--text-error)] text-small'>
             <TriangleAlert className='size-4 shrink-0' />
@@ -354,24 +362,21 @@ export function ChatDeploy({
             isEditingExisting={!!existingChat}
           />
 
-          <div>
-            <Label htmlFor='title' className='mb-[6.5px] block pl-0.5 text-small'>
-              Title
-            </Label>
-            <ChipInput
-              id='title'
-              placeholder='Customer Support Assistant'
-              value={formData.title}
-              onChange={(e) => updateField('title', e.target.value)}
-              required
-              disabled={chatSubmitting}
-            />
-            {errors.title && (
-              <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{errors.title}</p>
+          <ChipModalField type='custom' title='Title' htmlFor='title' error={errors.title}>
+            {(aria) => (
+              <ChipInput
+                id='title'
+                placeholder='Customer Support Assistant'
+                value={formData.title}
+                onChange={(e) => updateField('title', e.target.value)}
+                required
+                disabled={chatSubmitting}
+                {...aria}
+              />
             )}
-          </div>
+          </ChipModalField>
 
-          <div>
+          <div className='px-2'>
             <Label className='mb-[6.5px] block pl-0.5 text-small'>Output</Label>
             <OutputSelect
               workflowId={workflowId}
@@ -384,14 +389,10 @@ export function ChatDeploy({
               className='w-full'
               disablePortal
             />
-            {errors.outputBlocks && (
-              <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>
-                {errors.outputBlocks}
-              </p>
-            )}
+            {errors.outputBlocks && <DeployFieldError>{errors.outputBlocks}</DeployFieldError>}
           </div>
 
-          <div className='flex items-center justify-between gap-3'>
+          <div className='flex items-center justify-between gap-3 px-2'>
             <div className='min-w-0'>
               <Label className='block pl-0.5 text-small'>Include thinking</Label>
             </div>
@@ -403,7 +404,7 @@ export function ChatDeploy({
             />
           </div>
 
-          <div className='flex items-center justify-between gap-3'>
+          <div className='flex items-center justify-between gap-3 px-2'>
             <div className='min-w-0'>
               <Label className='block pl-0.5 text-small'>Include tool calls</Label>
             </div>
@@ -430,23 +431,17 @@ export function ChatDeploy({
             hasExistingPassword={existingPassword}
             error={errors.password || errors.emails}
           />
-          <div>
-            <Label htmlFor='welcomeMessage' className='mb-[6.5px] block pl-0.5 text-small'>
-              Welcome message
-            </Label>
-            <Textarea
-              id='welcomeMessage'
-              placeholder='Enter a welcome message for your chat'
-              value={formData.welcomeMessage}
-              onChange={(e) => updateField('welcomeMessage', e.target.value)}
-              rows={3}
-              disabled={chatSubmitting}
-              className='min-h-[80px] resize-none'
-            />
-            <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
-              This message will be displayed when users first open the chat
-            </p>
-          </div>
+          <ChipModalField
+            type='textarea'
+            title='Welcome message'
+            placeholder='Enter a welcome message for your chat'
+            value={formData.welcomeMessage}
+            onChange={(value) => updateField('welcomeMessage', value)}
+            rows={3}
+            disabled={chatSubmitting}
+            minHeight={80}
+            hint='This message will be displayed when users first open the chat'
+          />
 
           <button
             type='button'
@@ -500,7 +495,7 @@ export function ChatDeploy({
 
 function LoadingSkeleton() {
   return (
-    <div className='-mx-1 space-y-4 px-1'>
+    <div className='space-y-4 px-2'>
       <div className='space-y-3'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[26px]' />
@@ -543,7 +538,7 @@ const getDomainPrefix = (() => {
   return () => prefix
 })()
 
-function IdentifierInput({
+export function IdentifierInput({
   value,
   onChange,
   originalIdentifier,
@@ -551,6 +546,7 @@ function IdentifierInput({
   onValidationChange,
   isEditingExisting = false,
 }: IdentifierInputProps) {
+  const errorId = useId()
   const { isChecking, error, isValid } = useIdentifierValidation(
     value,
     originalIdentifier,
@@ -570,7 +566,7 @@ function IdentifierInput({
   const displayUrl = fullUrl.replace(/^https?:\/\//, '')
 
   return (
-    <div>
+    <div className='px-2'>
       <Label htmlFor='chat-url' className='mb-[6.5px] block pl-0.5 text-small'>
         URL
       </Label>
@@ -591,6 +587,8 @@ function IdentifierInput({
             onChange={(e) => handleChange(e.target.value)}
             required
             disabled={disabled}
+            aria-invalid={Boolean(error)}
+            aria-describedby={error ? errorId : undefined}
             className={cn(
               'rounded-none border-0 bg-transparent pl-0 shadow-none disabled:bg-transparent disabled:opacity-100',
               (isChecking || (isValid && value)) && 'pr-8'
@@ -618,7 +616,7 @@ function IdentifierInput({
           )}
         </div>
       </div>
-      {error && <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{error}</p>}
+      {error && <DeployFieldError id={errorId}>{error}</DeployFieldError>}
       <p className='mt-[6.5px] truncate text-[var(--text-secondary)] text-xs'>
         {isEditingExisting && value ? (
           <>
@@ -710,7 +708,7 @@ function AuthSelector({
   }, [authOptions, authType, onAuthTypeChange])
 
   return (
-    <div className='space-y-4'>
+    <div className='space-y-4 px-2'>
       <div>
         <Label className='mb-[6.5px] block pl-0.5 text-small'>Access control</Label>
         <ChipButtonGroup
@@ -742,9 +740,7 @@ function AuthSelector({
             }
           />
           {canRevealPassword && revealPasswordMutation.isError && (
-            <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>
-              Failed to load the current password
-            </p>
+            <DeployFieldError>Failed to load the current password</DeployFieldError>
           )}
           <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             {getPasswordHelperText(hasExistingPassword)}
@@ -769,7 +765,7 @@ function AuthSelector({
         </div>
       )}
 
-      {error && <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{error}</p>}
+      {error && <DeployFieldError>{error}</DeployFieldError>}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
index 66b018a4def..7a21bfd9882 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
@@ -6,13 +6,13 @@ import {
   ChipButtonGroup,
   ChipButtonGroupItem,
   ChipConfirmModal,
+  ChipInput,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  Input,
   Label,
 } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -254,7 +254,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
                     <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
                       <div className='flex flex-col gap-1.5'>
                         <Label className='text-small'>Description</Label>
-                        <Input
+                        <ChipInput
                           value={paramDescriptions[field.name] || ''}
                           onChange={(e) => handleParamDescriptionChange(field.name, e.target.value)}
                           placeholder={`Enter description for ${field.name}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/compare-versions-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/compare-versions-modal.tsx
index c97f786ce96..f2a3d0ac7c1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/compare-versions-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/compare-versions-modal.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { ChipDropdown, type ChipDropdownOption } from '@sim/emcn'
+import { ChipSelect, type ChipSelectOption } from '@sim/emcn'
 import { ArrowRight } from '@sim/emcn/icons'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
 import { formatVersionLabel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/format-version-label'
@@ -15,7 +15,7 @@ export type CompareSide = { kind: 'draft' } | { kind: 'version'; version: number
 const DRAFT_OPTION_VALUE = 'draft'
 
 /** The visible label of the selected option, so each picker's accessible name says what it holds. */
-function optionLabel(options: ChipDropdownOption[], value: string): string {
+function optionLabel(options: ChipSelectOption[], value: string): string {
   const label = options.find((option) => option.value === value)?.label
   return typeof label === 'string' ? label : ''
 }
@@ -60,7 +60,7 @@ export function CompareVersionsModal({
     base.kind === 'draft' || target.kind === 'draft'
   )
 
-  const options = useMemo((): ChipDropdownOption[] => {
+  const options = useMemo((): ChipSelectOption[] => {
     const sorted = [...versions].sort((a, b) => b.version - a.version)
     return [
       { value: DRAFT_OPTION_VALUE, label: 'Draft' },
@@ -99,19 +99,25 @@ export function CompareVersionsModal({
       header={
         <div className='flex items-center gap-2'>
           <span>Compare</span>
-          <ChipDropdown
+          <ChipSelect
             options={options}
             value={sideToValue(base)}
             onChange={(value) => setBase(valueToSide(value))}
             align='start'
+            dropdownWidth='trigger'
+            className='max-w-none'
+            showSelectedCheck
             aria-label={`Compare from ${optionLabel(options, sideToValue(base))}`}
           />
           <ArrowRight className='size-[12px] shrink-0 text-[var(--text-icon)]' />
-          <ChipDropdown
+          <ChipSelect
             options={options}
             value={sideToValue(target)}
             onChange={(value) => setTarget(valueToSide(value))}
             align='start'
+            dropdownWidth='trigger'
+            className='max-w-none'
+            showSelectedCheck
             aria-label={`Compare to ${optionLabel(options, sideToValue(target))}`}
           />
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
index c636b2d5f65..bb2d441cd70 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -238,7 +238,7 @@ export function Versions({
               className={cn(
                 'flex h-[36px] cursor-pointer items-center px-4 transition-colors duration-100',
                 isSelected
-                  ? 'bg-[color-mix(in_srgb,var(--accent)_10%,transparent)] hover-hover:bg-[color-mix(in_srgb,var(--accent)_15%,transparent)]'
+                  ? 'bg-[color-mix(in_srgb,hsl(var(--accent))_10%,transparent)] hover-hover:bg-[color-mix(in_srgb,hsl(var(--accent))_15%,transparent)]'
                   : 'hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--border)]'
               )}
               onClick={() => handleRowClick(v.version)}
@@ -336,12 +336,8 @@ export function Versions({
                   <Tooltip.Trigger asChild>
                     <Button
                       aria-label={v.description ? 'Edit description' : 'Add description'}
-                      variant='ghost'
-                      iconPadding='sm'
-                      className={cn(
-                        !v.description &&
-                          'text-[var(--text-quaternary)] hover-hover:text-[var(--text-tertiary)]'
-                      )}
+                      variant={v.description ? 'ghost' : 'ghost-secondary'}
+                      size='inline'
                       onClick={(e) => {
                         e.stopPropagation()
                         handleOpenDescriptionModal(v.version)
@@ -366,7 +362,7 @@ export function Versions({
                     <Button
                       aria-label='Version actions'
                       variant='ghost'
-                      iconPadding='sm'
+                      size='inline'
                       disabled={isPromotingVersion}
                       onClick={(e) => e.stopPropagation()}
                     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
index 2419d11fa88..0492f76efd6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -2,7 +2,6 @@
 
 import { lazy, Suspense, useId, useState } from 'react'
 import {
-  Button,
   ChipButtonGroup,
   ChipButtonGroupItem,
   ChipConfirmModal,
@@ -12,6 +11,7 @@ import {
   cn,
   Expand,
   Label,
+  OverlayActionButton,
   Skeleton,
   Tooltip,
 } from '@sim/emcn'
@@ -256,15 +256,15 @@ export function GeneralDeploy({
                 </div>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <Button
+                    <OverlayActionButton
                       aria-label='See preview'
                       type='button'
-                      variant='default'
+                      size='md'
                       onClick={() => setShowExpandedPreview(true)}
-                      className='absolute right-[8px] bottom-2 z-10 size-[28px] cursor-pointer bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
+                      className='absolute right-[8px] bottom-2 z-10'
                     >
                       <Expand className='size-[14px]' />
-                    </Button>
+                    </OverlayActionButton>
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top'>See preview</Tooltip.Content>
                 </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
index 85eb10ed9dd..b02d1cc1606 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -1,16 +1,14 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useId, useMemo, useState } from 'react'
 import {
   Badge,
   Chip,
   ChipCombobox,
   ChipInput,
+  ChipModalField,
   type ComboboxOption,
-  cn,
-  Label,
   Skeleton,
-  Textarea,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
@@ -133,6 +131,7 @@ export function McpDeploy({
   onActiveServerChange,
 }: McpDeployProps) {
   const params = useParams()
+  const toolNameId = useId()
   const workspaceId = params.workspaceId as string
   const [showCreateModal, setShowCreateModal] = useState(false)
 
@@ -480,7 +479,7 @@ export function McpDeploy({
 
   if (isLoadingServers || (isLoadingDeployedState && !deployedState)) {
     return (
-      <div className='-mx-1 space-y-4 px-1'>
+      <div className='space-y-4 px-2'>
         <div className='space-y-3'>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[70px]' />
@@ -522,7 +521,7 @@ export function McpDeploy({
   return (
     <form
       id='mcp-deploy-form'
-      className='-mx-1 space-y-3 px-1'
+      className='space-y-3'
       onSubmit={(e) => {
         e.preventDefault()
         handleSave()
@@ -540,45 +539,41 @@ export function McpDeploy({
         />
       ))}
 
-      <div>
-        <Label className='mb-[6.5px] block pl-0.5 text-small'>Tool name</Label>
-        <ChipInput
-          value={toolName}
-          onChange={(e) => setToolName(e.target.value)}
-          placeholder='e.g., book_flight'
-          aria-invalid={!!toolNameError}
-          error={Boolean(toolNameError)}
-        />
-        <p
-          className={cn(
-            'mt-[6.5px] text-xs',
-            toolNameError ? 'text-[var(--text-error)]' : 'text-[var(--text-secondary)]'
-          )}
-        >
-          {toolNameError ?? 'Use lowercase letters, numbers, and underscores only'}
-        </p>
-      </div>
-
-      <div>
-        <Label className='mb-[6.5px] block pl-0.5 text-small'>Description</Label>
-        <Textarea
-          placeholder={
-            workflowDescriptionFallback
-              ? `Defaults to the workflow description: ${workflowDescriptionFallback}`
-              : 'Describe what this tool does...'
-          }
-          className='min-h-[100px] resize-none'
-          value={toolDescription}
-          onChange={(e) => setToolDescription(e.target.value)}
-        />
-      </div>
+      <ChipModalField
+        type='custom'
+        title='Tool name'
+        htmlFor={toolNameId}
+        error={toolNameError}
+        hint='Use lowercase letters, numbers, and underscores only'
+      >
+        {(aria) => (
+          <ChipInput
+            id={toolNameId}
+            value={toolName}
+            onChange={(e) => setToolName(e.target.value)}
+            placeholder='e.g., book_flight'
+            error={Boolean(toolNameError)}
+            {...aria}
+          />
+        )}
+      </ChipModalField>
+
+      <ChipModalField
+        type='textarea'
+        title='Description'
+        placeholder={
+          workflowDescriptionFallback
+            ? `Defaults to the workflow description: ${workflowDescriptionFallback}`
+            : 'Describe what this tool does...'
+        }
+        minHeight={100}
+        value={toolDescription}
+        onChange={setToolDescription}
+      />
 
       {inputFormat.length > 0 && (
-        <div>
-          <Label className='mb-[6.5px] block pl-0.5 text-small'>
-            Parameters ({inputFormat.length})
-          </Label>
-          <p className='mb-[6.5px] pl-0.5 text-[var(--text-secondary)] text-xs'>
+        <ChipModalField type='custom' title={`Parameters (${inputFormat.length})`}>
+          <p className='pl-0.5 text-[var(--text-secondary)] text-xs'>
             Descriptions default to your Start block inputs; edit to override for this tool.
           </p>
           <div className='flex flex-col gap-2'>
@@ -598,58 +593,61 @@ export function McpDeploy({
                   </div>
                 </div>
                 <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
-                  <div className='flex flex-col gap-1.5'>
-                    <Label className='text-small'>Description</Label>
-                    <ChipInput
-                      value={
-                        parameterDescriptions[field.name] ??
-                        startBlockDescriptions[field.name] ??
-                        ''
-                      }
-                      onChange={(e) =>
-                        setParameterDescriptions((prev) => ({
-                          ...prev,
-                          [field.name]: e.target.value,
-                        }))
-                      }
-                      placeholder={startBlockDescriptions[field.name] || `Describe ${field.name}`}
-                    />
-                  </div>
+                  <ChipModalField
+                    type='input'
+                    title='Description'
+                    flush
+                    value={
+                      parameterDescriptions[field.name] ?? startBlockDescriptions[field.name] ?? ''
+                    }
+                    onChange={(value) =>
+                      setParameterDescriptions((prev) => ({
+                        ...prev,
+                        [field.name]: value,
+                      }))
+                    }
+                    placeholder={startBlockDescriptions[field.name] || `Describe ${field.name}`}
+                  />
                 </div>
               </div>
             ))}
           </div>
-        </div>
+        </ChipModalField>
       )}
 
-      <div>
-        <Label className='mb-[6.5px] block pl-0.5 text-small'>Servers</Label>
-        <ChipCombobox
-          options={serverOptions}
-          multiSelect
-          multiSelectValues={selectedServerIdsForForm}
-          onMultiSelectChange={handleServerSelectionChange}
-          placeholder='Select servers...'
-          searchable
-          searchPlaceholder='Search servers...'
-          disabled={!toolName.trim() || !!toolNameError || isPending}
-          overlayContent={
-            <span className='truncate text-[var(--text-primary)]'>{selectedServersLabel}</span>
-          }
-        />
-        {!toolName.trim() ? (
-          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
-            Enter a tool name to select servers
-          </p>
-        ) : toolNameError ? (
-          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
-            Fix the tool name to select servers
-          </p>
-        ) : null}
-      </div>
+      <ChipModalField
+        type='custom'
+        title='Servers'
+        submitOnEnter={false}
+        hint={
+          !toolName.trim()
+            ? 'Enter a tool name to select servers'
+            : toolNameError
+              ? 'Fix the tool name to select servers'
+              : undefined
+        }
+      >
+        {(aria) => (
+          <ChipCombobox
+            aria-label='Servers'
+            {...aria}
+            options={serverOptions}
+            multiSelect
+            multiSelectValues={selectedServerIdsForForm}
+            onMultiSelectChange={handleServerSelectionChange}
+            placeholder='Select servers...'
+            searchable
+            searchPlaceholder='Search servers...'
+            disabled={!toolName.trim() || !!toolNameError || isPending}
+            overlayContent={
+              <span className='truncate text-[var(--text-primary)]'>{selectedServersLabel}</span>
+            }
+          />
+        )}
+      </ChipModalField>
 
       {saveErrors.length > 0 && (
-        <div className='mt-[6.5px] flex flex-col gap-0.5'>
+        <div className='mt-[6.5px] flex flex-col gap-0.5 px-2'>
           {saveErrors.map((error) => (
             <p key={error} className='text-[var(--text-error)] text-caption'>
               {error}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
index a88ac9fe855..3a0608762bc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
@@ -569,7 +569,7 @@ export function DeployModal({
           />
           {deployError && (
             <div role='alert'>
-              <Badge variant='red' size='lg' dot className='max-w-full truncate'>
+              <Badge variant='red' size='md' dot className='max-w-full truncate'>
                 {deployError}
               </Badge>
             </div>
@@ -778,7 +778,7 @@ function StatusBadge({
     return (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Badge variant='amber' size='lg' dot className='cursor-default'>
+          <Badge variant='amber' size='md' dot className='cursor-default'>
             {isRetrying ? 'Retrying' : 'Pending'}
           </Badge>
         </Tooltip.Trigger>
@@ -802,7 +802,7 @@ function StatusBadge({
     return (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Badge variant='red' size='lg' dot className='cursor-default'>
+          <Badge variant='red' size='md' dot className='cursor-default'>
             Failed
           </Badge>
         </Tooltip.Trigger>
@@ -821,7 +821,7 @@ function StatusBadge({
   if (!isDeployed) return null
 
   return (
-    <Badge variant={needsRedeployment ? 'amber' : 'green'} size='lg' dot>
+    <Badge variant={needsRedeployment ? 'amber' : 'green'} size='md' dot>
       {needsRedeployment ? 'Update deployment' : 'Live'}
     </Badge>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index a92f6b04e41..b4a81000b64 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -912,10 +912,10 @@ export function ConditionInput({
               className={cn(
                 'flex items-center justify-between overflow-hidden bg-transparent px-2.5 py-[5px]',
                 isRouterMode
-                  ? 'rounded-t-[4px] border-[var(--border-1)] border-b'
+                  ? 'rounded-t-sm border-[var(--border-1)] border-b'
                   : isElseConditionTitle(block.title)
                     ? 'rounded-sm border-0'
-                    : 'rounded-t-[4px] border-[var(--border-1)] border-b'
+                    : 'rounded-t-sm border-[var(--border-1)] border-b'
               )}
             >
               <span className='text-[var(--text-tertiary)] text-sm'>
@@ -932,7 +932,7 @@ export function ConditionInput({
                         disabled ||
                         (!isRouterMode && isElseConditionTitle(block.title))
                       }
-                      className='h-auto p-0'
+                      size='bare'
                     >
                       <Plus className='size-[14px]' />
                       <span className='sr-only'>Add Block</span>
@@ -952,7 +952,7 @@ export function ConditionInput({
                         disabled ||
                         (!isRouterMode && isElseConditionTitle(block.title))
                       }
-                      className='h-auto p-0'
+                      size='bare'
                     >
                       <ChevronUp className='size-[14px]' />
                       <span className='sr-only'>Move Up</span>
@@ -974,7 +974,7 @@ export function ConditionInput({
                           isElseConditionTitle(conditionalBlocks[index + 1]?.title)) ||
                         (!isRouterMode && isElseConditionTitle(block.title))
                       }
-                      className='h-auto p-0'
+                      size='bare'
                     >
                       <ChevronDown className='size-[14px]' />
                       <span className='sr-only'>Move Down</span>
@@ -986,12 +986,12 @@ export function ConditionInput({
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Button
-                      variant='ghost'
+                      variant='ghost-destructive'
                       onClick={() => removeBlock(block.id)}
                       disabled={
                         isPreview || disabled || conditionalBlocks.length <= (isRouterMode ? 1 : 2)
                       }
-                      className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+                      size='bare'
                     >
                       <Trash className='size-[14px]' />
                       <span className='sr-only'>Delete Block</span>
@@ -1080,6 +1080,7 @@ export function ConditionInput({
                       overlayRefs.delete(block.id)
                     }
                   }}
+                  data-preview-full-opacity={isPreview || undefined}
                   className={cn(
                     'pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-3 py-2 font-sans text-sm',
                     (isPreview || disabled) && 'opacity-50'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index 1fc1b8bb4e0..e3d22a96515 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -4,12 +4,13 @@ import { useMemo, useRef } from 'react'
 import {
   Badge,
   Button,
+  CollapsibleCard,
   Combobox,
   type ComboboxOption,
   cn,
-  handleKeyboardActivation,
   Input,
   Label,
+  OverflowText,
   Trash,
 } from '@sim/emcn'
 import { Plus } from '@sim/emcn/icons'
@@ -235,55 +236,41 @@ export function DocumentTagEntry({
   }
 
   /**
-   * Renders the tag header with name, badge, and action buttons
+   * Renders the tag summary with its type badge
    * Shows tag name only when collapsed (as summary), generic label when expanded
    */
-  const renderTagHeader = (tag: DocumentTag, index: number) => (
-    <div
-      role='group'
-      aria-label={`Tag ${index + 1}`}
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => toggleCollapse(tag.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => toggleCollapse(tag.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-          {tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
-        </span>
-        {tag.collapsed && tag.tagName && (
-          <Badge variant='type' size='sm'>
-            {FIELD_TYPE_LABELS[tag.fieldType] || 'Text'}
-          </Badge>
-        )}
-      </div>
-      <div
-        role='presentation'
-        className='flex items-center gap-2 pl-2'
-        onClick={(e) => e.stopPropagation()}
+  const renderTitle = (tag: DocumentTag, index: number) => (
+    <span className='flex min-w-0 items-center gap-2'>
+      <OverflowText
+        label={tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
+        focusTarget='nearest-interactive'
       >
-        <Button
-          variant='ghost'
-          onClick={addTag}
-          disabled={isReadOnly || !canAddMoreTags}
-          className='h-auto p-0'
-        >
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add Tag</span>
-        </Button>
-        <Button
-          variant='ghost'
-          onClick={() => removeTag(tag.id)}
-          disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Tag</span>
-        </Button>
-      </div>
-    </div>
+        {tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
+      </OverflowText>
+      {tag.collapsed && tag.tagName && (
+        <Badge variant='type' size='sm'>
+          {FIELD_TYPE_LABELS[tag.fieldType] || 'Text'}
+        </Badge>
+      )}
+    </span>
+  )
+
+  const renderActions = (tag: DocumentTag) => (
+    <>
+      <Button variant='ghost' onClick={addTag} disabled={isReadOnly || !canAddMoreTags} size='bare'>
+        <Plus className='size-[14px]' />
+        <span className='sr-only'>Add Tag</span>
+      </Button>
+      <Button
+        variant='ghost-destructive'
+        onClick={() => removeTag(tag.id)}
+        disabled={isReadOnly}
+        size='bare'
+      >
+        <Trash className='size-[14px]' />
+        <span className='sr-only'>Delete Tag</span>
+      </Button>
+    </>
   )
 
   /**
@@ -384,7 +371,7 @@ export function DocumentTagEntry({
     }))
 
     return (
-      <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+      <>
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Tag</Label>
           <Combobox
@@ -400,24 +387,25 @@ export function DocumentTagEntry({
           <Label className='text-small'>Value</Label>
           {renderValueInput(tag)}
         </div>
-      </div>
+      </>
     )
   }
 
   return (
     <div className='space-y-2'>
       {tags.map((tag, index) => (
-        <div
+        <CollapsibleCard
           key={tag.id}
           data-tag-id={tag.id}
-          className={cn(
-            'rounded-sm border border-[var(--border-1)]',
-            tag.collapsed ? 'overflow-hidden' : 'overflow-visible'
-          )}
+          role='group'
+          aria-label={`Tag ${index + 1}`}
+          title={renderTitle(tag, index)}
+          actions={renderActions(tag)}
+          collapsed={Boolean(tag.collapsed)}
+          onToggleCollapse={() => toggleCollapse(tag.id)}
         >
-          {renderTagHeader(tag, index)}
           {!tag.collapsed && renderTagContent(tag)}
-        </div>
+        </CollapsibleCard>
       ))}
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index bb09af0b74f..0e6899abf86 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -138,7 +138,7 @@ export function EvalInput({
   }
 
   const renderMetricHeader = (metric: EvalMetric, index: number) => (
-    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-[var(--surface-4)] px-2.5 py-[5px]'>
+    <div className='flex items-center justify-between overflow-hidden rounded-t-sm border-[var(--border-1)] border-b bg-[var(--surface-4)] px-2.5 py-[5px]'>
       <span className='text-[var(--text-tertiary)] text-sm'>Metric {index + 1}</span>
       <div className='flex items-center gap-2'>
         <Tooltip.Root key={`add-${metric.id}`}>
@@ -147,7 +147,7 @@ export function EvalInput({
               variant='ghost'
               onClick={addMetric}
               disabled={isPreview || disabled}
-              className='h-auto p-0'
+              size='bare'
             >
               <Plus className='size-[14px]' />
               <span className='sr-only'>Add Metric</span>
@@ -159,10 +159,10 @@ export function EvalInput({
         <Tooltip.Root key={`remove-${metric.id}`}>
           <Tooltip.Trigger asChild>
             <Button
-              variant='ghost'
+              variant='ghost-destructive'
               onClick={() => removeMetric(metric.id)}
               disabled={isPreview || disabled || metrics.length === 1}
-              className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+              size='bare'
             >
               <Trash className='size-[14px]' />
               <span className='sr-only'>Delete Metric</span>
@@ -197,6 +197,7 @@ export function EvalInput({
                   className='text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50'
                 />
                 <div
+                  data-preview-full-opacity={isPreview || undefined}
                   className={cn(
                     'pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm',
                     (isPreview || disabled) && 'opacity-50'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index 44065aa2c4f..350ba482263 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -208,14 +208,16 @@ function SingleFileSelector({
         aria-label='Remove file'
         type='button'
         variant='ghost'
-        className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 size-6 p-0'
+        iconSize='compact'
+        className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10'
         onClick={onClear}
-        disabled={isDeleting}
+        disabled={disabled || isDeleting}
+        data-preview-full-opacity={disabled || undefined}
       >
         {isDeleting ? (
           <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
         ) : (
-          <X className='size-4 opacity-50 hover-hover:opacity-100' />
+          <X className='size-4 opacity-50 hover-hover:opacity-100' data-preview-full-opacity />
         )}
       </Button>
     </div>
@@ -762,14 +764,16 @@ export function FileUpload({
           aria-label='Remove file'
           type='button'
           variant='ghost'
-          className='-translate-y-1/2 absolute top-1/2 right-[4px] size-6 p-0'
+          iconSize='compact'
+          className='-translate-y-1/2 absolute top-1/2 right-[4px]'
           onClick={(e) => handleRemoveFile(file, e)}
-          disabled={isDeleting}
+          disabled={disabled || isPreview || isDeleting}
+          data-preview-full-opacity={isPreview || undefined}
         >
           {isDeleting ? (
             <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
           ) : (
-            <X className='size-4 opacity-50' />
+            <X className='size-4 opacity-50' data-preview-full-opacity />
           )}
         </Button>
       </div>
@@ -965,7 +969,7 @@ export function FileUpload({
           onOpenChange={(open) => {
             if (open) void refetchWorkspaceFiles()
           }}
-          disabled={disabled}
+          disabled={disabled || isPreview}
           isLoading={loadingWorkspaceFiles}
           truncateMiddle={truncateMiddle}
           isDeleting={deletingFiles[filesArray[0]?.path || '']}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
index 1417f773d43..8017b7d9dcc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
@@ -2,12 +2,13 @@ import { useRef } from 'react'
 import {
   Badge,
   Button,
+  CollapsibleCard,
   Combobox,
   type ComboboxOption,
   cn,
-  handleKeyboardActivation,
   Input,
   Label,
+  OverflowText,
   Trash,
 } from '@sim/emcn'
 import { Plus } from '@sim/emcn/icons'
@@ -101,56 +102,46 @@ export function FilterRuleRow({
       label,
     })
 
-  const renderHeader = () => (
-    <div
-      role='group'
-      aria-label={`Condition ${index + 1}`}
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => onToggleCollapse(rule.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => onToggleCollapse(rule.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-          {rule.collapsed && rule.column
-            ? formatDisplayText(getColumnLabel(rule.column), {
-                workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
-              })
-            : `Condition ${index + 1}`}
-        </span>
-        {rule.collapsed && rule.column && (
-          <Badge variant='type' size='sm'>
-            {formatDisplayText(getOperatorLabel(rule.operator), {
-              workflowSearchHighlight: getLabelHighlight(
-                'operator',
-                getOperatorLabel(rule.operator)
-              ),
-            })}
-          </Badge>
-        )}
-      </div>
-      <div
-        role='presentation'
-        className='flex items-center gap-2 pl-2'
-        onClick={(e) => e.stopPropagation()}
+  const renderTitle = () => (
+    <span className='flex min-w-0 items-center gap-2'>
+      <OverflowText
+        label={
+          rule.collapsed && rule.column ? getColumnLabel(rule.column) : `Condition ${index + 1}`
+        }
+        focusTarget='nearest-interactive'
       >
-        <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add Condition</span>
-        </Button>
-        <Button
-          variant='ghost'
-          onClick={() => onRemove(rule.id)}
-          disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Condition</span>
-        </Button>
-      </div>
-    </div>
+        {rule.collapsed && rule.column
+          ? formatDisplayText(getColumnLabel(rule.column), {
+              workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
+            })
+          : `Condition ${index + 1}`}
+      </OverflowText>
+      {rule.collapsed && rule.column && (
+        <Badge variant='type' size='sm'>
+          {formatDisplayText(getOperatorLabel(rule.operator), {
+            workflowSearchHighlight: getLabelHighlight('operator', getOperatorLabel(rule.operator)),
+          })}
+        </Badge>
+      )}
+    </span>
+  )
+
+  const renderActions = () => (
+    <>
+      <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} size='bare'>
+        <Plus className='size-[14px]' />
+        <span className='sr-only'>Add Condition</span>
+      </Button>
+      <Button
+        variant='ghost-destructive'
+        onClick={() => onRemove(rule.id)}
+        disabled={isReadOnly}
+        size='bare'
+      >
+        <Trash className='size-[14px]' />
+        <span className='sr-only'>Delete Condition</span>
+      </Button>
+    </>
   )
 
   const renderValueInput = () => (
@@ -208,7 +199,7 @@ export function FilterRuleRow({
   )
 
   const renderContent = () => (
-    <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+    <>
       {index > 0 && (
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Logic</Label>
@@ -280,19 +271,20 @@ export function FilterRuleRow({
         <Label className='text-small'>Value</Label>
         {renderValueInput()}
       </div>
-    </div>
+    </>
   )
 
   return (
-    <div
+    <CollapsibleCard
       data-filter-id={rule.id}
-      className={cn(
-        'rounded-sm border border-[var(--border-1)]',
-        rule.collapsed ? 'overflow-hidden' : 'overflow-visible'
-      )}
+      role='group'
+      aria-label={`Condition ${index + 1}`}
+      title={renderTitle()}
+      actions={renderActions()}
+      collapsed={Boolean(rule.collapsed)}
+      onToggleCollapse={() => onToggleCollapse(rule.id)}
     >
-      {renderHeader()}
       {!rule.collapsed && renderContent()}
-    </div>
+    </CollapsibleCard>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index d385a77ab71..3e542ffdfce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -4,11 +4,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
   Checkbox,
+  Chip,
   ChipModal,
   ChipModalBody,
   ChipModalField,
   ChipModalHeader,
-  cn,
 } from '@sim/emcn'
 import { ManageWorkspace } from '@sim/emcn/icons'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -97,10 +97,10 @@ export function GroupedCheckboxList({
   const noneSelected = selectedValues.length === 0
 
   useEffect(() => {
-    if (activeSearchTarget?.subBlockId === subBlockId) {
+    if (!isPreview && activeSearchTarget?.subBlockId === subBlockId) {
       setOpen(true)
     }
-  }, [activeSearchTarget, subBlockId])
+  }, [activeSearchTarget, isPreview, subBlockId])
 
   useEffect(() => {
     if (!open || activeSearchTarget?.subBlockId !== subBlockId) return
@@ -113,26 +113,31 @@ export function GroupedCheckboxList({
 
   return (
     <>
-      <Button
-        variant='ghost'
-        disabled={disabled}
+      <Chip
+        variant='outline'
+        fullWidth
+        leftAdornment={
+          <ManageWorkspace className='size-4 shrink-0 opacity-50' data-preview-full-opacity />
+        }
+        disabled={disabled || isPreview}
+        data-preview-full-opacity={isPreview || undefined}
         onClick={() => setOpen(true)}
-        className={cn(
-          'flex w-full cursor-pointer justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] font-sans text-[var(--text-primary)] text-sm focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
-          'hover-hover:bg-[var(--surface-active)]'
-        )}
+        rightAdornment={
+          <SelectedCountDisplay
+            noneSelected={noneSelected}
+            allSelected={allSelected}
+            count={selectedValues.length}
+          />
+        }
+      >
+        Configure PII Types
+      </Chip>
+      <ChipModal
+        open={open && !isPreview}
+        onOpenChange={setOpen}
+        srTitle='Select PII Types to Detect'
+        size='lg'
       >
-        <span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
-          <ManageWorkspace className='size-4 shrink-0 opacity-50' />
-          <span className='truncate'>Configure PII Types</span>
-        </span>
-        <SelectedCountDisplay
-          noneSelected={noneSelected}
-          allSelected={allSelected}
-          count={selectedValues.length}
-        />
-      </Button>
-      <ChipModal open={open} onOpenChange={setOpen} srTitle='Select PII Types to Detect' size='lg'>
         <ChipModalHeader onClose={() => setOpen(false)}>Select PII Types to Detect</ChipModalHeader>
         <ChipModalBody onWheel={(e) => e.stopPropagation()}>
           <ChipModalField
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index 8ec5ae157a3..0e022a4430e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -4,12 +4,13 @@ import { useRef } from 'react'
 import {
   Badge,
   Button,
+  CollapsibleCard,
   Combobox,
   type ComboboxOption,
   cn,
-  handleKeyboardActivation,
   Input,
   Label,
+  OverflowText,
   Trash,
 } from '@sim/emcn'
 import { Plus } from '@sim/emcn/icons'
@@ -228,57 +229,52 @@ export function KnowledgeTagFilters({
   }
 
   /**
-   * Renders the filter header with name, badge, and action buttons
+   * Renders the filter summary with its type badge
    * Shows tag name only when collapsed (as summary), generic label when expanded
    */
-  const renderFilterHeader = (filter: TagFilter, index: number) => (
-    <div
-      role='button'
-      tabIndex={0}
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => toggleCollapse(filter.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => toggleCollapse(filter.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-          {filter.collapsed ? filter.tagName || `Filter ${index + 1}` : `Filter ${index + 1}`}
-        </span>
-        {filter.collapsed && filter.tagName && (
-          <Badge variant='type' size='sm'>
-            {FIELD_TYPE_LABELS[filter.fieldType] || 'Text'}
-          </Badge>
-        )}
-      </div>
-      <div className='flex items-center gap-2 pl-2'>
-        <Button
-          variant='ghost'
-          onClick={(e) => {
-            e.stopPropagation()
-            addFilter()
-          }}
-          disabled={isReadOnly}
-          className='h-auto p-0'
-        >
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add Filter</span>
-        </Button>
-        <Button
-          variant='ghost'
-          onClick={(e) => {
-            e.stopPropagation()
-            removeFilter(filter.id)
-          }}
-          disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Filter</span>
-        </Button>
-      </div>
-    </div>
+  const renderTitle = (filter: TagFilter, index: number) => (
+    <span className='flex min-w-0 items-center gap-2'>
+      <OverflowText
+        label={filter.collapsed ? filter.tagName || `Filter ${index + 1}` : `Filter ${index + 1}`}
+        focusTarget='nearest-interactive'
+      >
+        {filter.collapsed ? filter.tagName || `Filter ${index + 1}` : `Filter ${index + 1}`}
+      </OverflowText>
+      {filter.collapsed && filter.tagName && (
+        <Badge variant='type' size='sm'>
+          {FIELD_TYPE_LABELS[filter.fieldType] || 'Text'}
+        </Badge>
+      )}
+    </span>
+  )
+
+  const renderActions = (filter: TagFilter) => (
+    <>
+      <Button
+        variant='ghost'
+        onClick={(e) => {
+          e.stopPropagation()
+          addFilter()
+        }}
+        disabled={isReadOnly}
+        size='bare'
+      >
+        <Plus className='size-[14px]' />
+        <span className='sr-only'>Add Filter</span>
+      </Button>
+      <Button
+        variant='ghost-destructive'
+        onClick={(e) => {
+          e.stopPropagation()
+          removeFilter(filter.id)
+        }}
+        disabled={isReadOnly}
+        size='bare'
+      >
+        <Trash className='size-[14px]' />
+        <span className='sr-only'>Delete Filter</span>
+      </Button>
+    </>
   )
 
   /**
@@ -382,7 +378,7 @@ export function KnowledgeTagFilters({
     const isBetween = filter.operator === 'between'
 
     return (
-      <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+      <>
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Tag</Label>
           <Combobox
@@ -417,24 +413,25 @@ export function KnowledgeTagFilters({
             renderValueInput(filter, 'tagValue')
           )}
         </div>
-      </div>
+      </>
     )
   }
 
   return (
     <div className='space-y-2'>
       {filters.map((filter, index) => (
-        <div
+        <CollapsibleCard
           key={filter.id}
           data-filter-id={filter.id}
-          className={cn(
-            'rounded-sm border border-[var(--border-1)]',
-            filter.collapsed ? 'overflow-hidden' : 'overflow-visible'
-          )}
+          role='group'
+          aria-label={`Filter ${index + 1}`}
+          title={renderTitle(filter, index)}
+          actions={renderActions(filter)}
+          collapsed={Boolean(filter.collapsed)}
+          onToggleCollapse={() => toggleCollapse(filter.id)}
         >
-          {renderFilterHeader(filter, index)}
           {!filter.collapsed && renderFilterContent(filter)}
-        </div>
+        </CollapsibleCard>
       ))}
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index e25ac99312f..46bcc0052ae 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -376,6 +376,7 @@ export function LongInput({
               />
               <div
                 ref={overlayRef}
+                data-preview-full-opacity={isPreview || undefined}
                 className={cn(
                   'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 font-sans text-sm',
                   (isPreview || disabled) && 'opacity-50',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index 4e5284575a6..d330dbbade7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -547,6 +547,7 @@ export function MessagesInput({
       {currentMessages.map((message, index) => (
         <div
           key={messageIdsRef.current[index] ?? `fallback-${index}`}
+          data-preview-full-opacity={isPreview || undefined}
           className={cn(
             'relative flex w-full flex-col rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] transition-colors dark:bg-[var(--surface-5)]',
             disabled && 'opacity-50'
@@ -612,7 +613,7 @@ export function MessagesInput({
                         type='button'
                         disabled={isPreview || disabled}
                         className={cn(
-                          'group -ml-1.5 -my-1 flex items-center gap-1 rounded px-1.5 py-1 text-[var(--text-primary)] text-small leading-none transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-secondary)]',
+                          'group -ml-1.5 -my-1 flex items-center gap-1 rounded-sm px-1.5 py-1 text-[var(--text-primary)] text-small leading-none transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-secondary)]',
                           (isPreview || disabled) &&
                             'cursor-default hover-hover:bg-transparent hover-hover:text-[var(--text-primary)]'
                         )}
@@ -659,7 +660,8 @@ export function MessagesInput({
                               deleteMessage(index)
                             }}
                             disabled={disabled}
-                            className='-my-1 -mr-1 size-6 p-0'
+                            iconSize='compact'
+                            className='-my-1 -mr-1'
                             aria-label='Delete message'
                           >
                             <Trash className='size-3' />
@@ -671,7 +673,8 @@ export function MessagesInput({
                               moveMessageUp(index)
                             }}
                             disabled={disabled || index === 0}
-                            className='-my-1 -mr-1 size-6 p-0'
+                            iconSize='compact'
+                            className='-my-1 -mr-1'
                             aria-label='Move message up'
                           >
                             <ChevronUp className='size-3' />
@@ -683,7 +686,8 @@ export function MessagesInput({
                               moveMessageDown(index)
                             }}
                             disabled={disabled || index === currentMessages.length - 1}
-                            className='-my-1 -mr-1 size-6 p-0'
+                            iconSize='compact'
+                            className='-my-1 -mr-1'
                             aria-label='Move message down'
                           >
                             <ChevronDown className='size-3' />
@@ -697,7 +701,8 @@ export function MessagesInput({
                           addMessageAfter(index)
                         }}
                         disabled={disabled}
-                        className='-mr-1.5 -my-1 size-6 p-0'
+                        iconSize='compact'
+                        className='-mr-1.5 -my-1'
                         aria-label='Add message below'
                       >
                         <Plus className='size-3.5' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
index 049a1170e21..8b6fb37b4e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
@@ -62,6 +62,21 @@ vi.mock('@sim/emcn', () => ({
       ))}
     </div>
   ),
+  ChipSelect: ({
+    options,
+    value,
+    placeholder,
+  }: {
+    options: Array<{ value: string; label: string }>
+    value?: string
+    placeholder?: string
+  }) => (
+    <div data-combobox={placeholder} data-value={value}>
+      {options.map((option) => (
+        <span key={option.value}>{option.label}</span>
+      ))}
+    </div>
+  ),
   Label: ({ children }: { children?: React.ReactNode }) => <span>{children}</span>,
   Tooltip: {
     Root: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
index 6ddf80cb533..3c527c360e9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
-import { Button, Chip, Combobox, type ComboboxOption, Label, Tooltip } from '@sim/emcn'
+import { Button, Chip, ChipSelect, Combobox, type ComboboxOption, Label, Tooltip } from '@sim/emcn'
 import { ChevronDown, ChevronUp, Plus, Trash } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
@@ -124,7 +124,7 @@ const FallbackRow = memo(function FallbackRow({
 
   return (
     <div data-fallback-row-id={row.id} className='min-w-0 rounded-sm border border-[var(--border)]'>
-      <div className='flex items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-1'>
+      <div className='flex items-center justify-between gap-2 rounded-t-sm bg-[var(--surface-4)] px-2 py-1'>
         <span className='text-[var(--text-secondary)] text-small'>{ordinalChoiceLabel(index)}</span>
         <div className='flex shrink-0 items-center gap-1'>
           {canMove && (
@@ -179,7 +179,7 @@ const FallbackRow = memo(function FallbackRow({
         </div>
       </div>
 
-      <div className='flex flex-col gap-2.5 rounded-b-[4px] border-[var(--border)] border-t bg-[var(--surface-2)] p-2'>
+      <div className='flex flex-col gap-2.5 rounded-b-sm border-[var(--border)] border-t bg-[var(--surface-2)] p-2'>
         <Combobox
           options={modelOptions}
           value={row.model}
@@ -212,14 +212,17 @@ const FallbackRow = memo(function FallbackRow({
         {tuningFields.map(({ knob, options }) => (
           <div key={knob} className='flex flex-col gap-2.5'>
             <Label className='pl-0.5'>{FALLBACK_TUNING_LABELS[knob]}</Label>
-            <Combobox
+            <ChipSelect
+              showSelectedCheck
+              dropdownWidth='trigger'
+              modal={false}
               options={options}
               value={row[knob] ?? options[0]?.value ?? ''}
               onChange={(value) => onChangeTuning(row.id, knob, value)}
               placeholder={`Select ${FALLBACK_TUNING_LABELS[knob].toLowerCase()}`}
               aria-label={`${ordinalChoiceLabel(index)} ${FALLBACK_TUNING_LABELS[knob].toLowerCase()}`}
               disabled={readOnly}
-              className='w-full'
+              className='w-full max-w-none'
             />
           </div>
         ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
index 3130bf0f9ca..720a511c18c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
@@ -340,7 +340,8 @@ export function SelectorCombobox({
                 aria-label='Clear selection'
                 type='button'
                 variant='ghost'
-                className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 size-6 p-0'
+                iconSize='compact'
+                className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10'
                 onClick={handleClear}
               >
                 <X className='size-4 opacity-50 hover-hover:opacity-100' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-input/selector-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-input/selector-input.tsx
index 6f1ea112c87..f9bc9bf8ede 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-input/selector-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-input/selector-input.tsx
@@ -77,7 +77,7 @@ export function SelectorInput({
     return (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <div className='w-full rounded border p-4 text-center text-muted-foreground text-sm'>
+          <div className='w-full rounded-sm border p-4 text-center text-muted-foreground text-sm'>
             Selector not supported for service: {serviceId}
           </div>
         </Tooltip.Trigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index c5ac7b4c69f..22ab1188773 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -386,6 +386,7 @@ export const ShortInput = memo(function ShortInput({
                 />
                 <div
                   ref={overlayRef}
+                  data-preview-full-opacity={isPreview || undefined}
                   className={cn(
                     'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 pr-3 font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
                     (isPreview || disabled) && 'opacity-50',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
index dea669b0d4e..1becdfeeafd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
@@ -161,7 +161,7 @@ export function SkillInput({
                 className='group relative flex flex-col overflow-hidden rounded-sm border border-[var(--border-1)] transition-all duration-200 ease-in-out'
               >
                 <div
-                  className='flex cursor-pointer items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]'
+                  className='flex cursor-pointer items-center justify-between gap-2 rounded-t-sm bg-[var(--surface-4)] px-2 py-[6.5px]'
                   onClick={() => {
                     if (fullSkill && !disabled && !isPreview) {
                       setEditingSkillId(fullSkill.id)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slider-input/slider-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slider-input/slider-input.tsx
index 22f41eb6348..7e4c066acd6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slider-input/slider-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slider-input/slider-input.tsx
@@ -59,7 +59,10 @@ export function SliderInput({
   const isDisabled = isPreview || disabled
 
   return (
-    <div className={cn('relative pt-2 pb-[22px]', isDisabled && 'opacity-50')}>
+    <div
+      data-preview-full-opacity={isPreview || undefined}
+      className={cn('relative pt-2 pb-[22px]', isDisabled && 'opacity-50')}
+    >
       <Slider
         value={[normalizedValue]}
         min={min}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
index 9c13ee26ecd..3ad8ea32959 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
@@ -1,11 +1,11 @@
 import {
   Badge,
   Button,
+  CollapsibleCard,
   Combobox,
   type ComboboxOption,
-  cn,
-  handleKeyboardActivation,
   Label,
+  OverflowText,
   Trash,
 } from '@sim/emcn'
 import { Plus } from '@sim/emcn/icons'
@@ -61,60 +61,51 @@ export function SortRuleRow({
       label,
     })
 
-  const renderHeader = () => (
-    <div
-      role='group'
-      aria-label={`Sort ${index + 1}`}
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => onToggleCollapse(rule.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => onToggleCollapse(rule.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-          {rule.collapsed && rule.column
-            ? formatDisplayText(getColumnLabel(rule.column), {
-                workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
-              })
-            : `Sort ${index + 1}`}
-        </span>
-        {rule.collapsed && rule.column && (
-          <Badge variant='type' size='sm'>
-            {formatDisplayText(getDirectionLabel(rule.direction), {
-              workflowSearchHighlight: getLabelHighlight(
-                'direction',
-                getDirectionLabel(rule.direction)
-              ),
-            })}
-          </Badge>
-        )}
-      </div>
-      <div
-        role='presentation'
-        className='flex items-center gap-2 pl-2'
-        onClick={(e) => e.stopPropagation()}
+  const renderTitle = () => (
+    <span className='flex min-w-0 items-center gap-2'>
+      <OverflowText
+        label={rule.collapsed && rule.column ? getColumnLabel(rule.column) : `Sort ${index + 1}`}
+        focusTarget='nearest-interactive'
       >
-        <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add Sort</span>
-        </Button>
-        <Button
-          variant='ghost'
-          onClick={() => onRemove(rule.id)}
-          disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Sort</span>
-        </Button>
-      </div>
-    </div>
+        {rule.collapsed && rule.column
+          ? formatDisplayText(getColumnLabel(rule.column), {
+              workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
+            })
+          : `Sort ${index + 1}`}
+      </OverflowText>
+      {rule.collapsed && rule.column && (
+        <Badge variant='type' size='sm'>
+          {formatDisplayText(getDirectionLabel(rule.direction), {
+            workflowSearchHighlight: getLabelHighlight(
+              'direction',
+              getDirectionLabel(rule.direction)
+            ),
+          })}
+        </Badge>
+      )}
+    </span>
+  )
+
+  const renderActions = () => (
+    <>
+      <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} size='bare'>
+        <Plus className='size-[14px]' />
+        <span className='sr-only'>Add Sort</span>
+      </Button>
+      <Button
+        variant='ghost-destructive'
+        onClick={() => onRemove(rule.id)}
+        disabled={isReadOnly}
+        size='bare'
+      >
+        <Trash className='size-[14px]' />
+        <span className='sr-only'>Delete Sort</span>
+      </Button>
+    </>
   )
 
   const renderContent = () => (
-    <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+    <>
       <div className='flex flex-col gap-1.5'>
         <Label className='text-small'>Column</Label>
         <Combobox
@@ -157,19 +148,20 @@ export function SortRuleRow({
           }
         />
       </div>
-    </div>
+    </>
   )
 
   return (
-    <div
+    <CollapsibleCard
       data-sort-id={rule.id}
-      className={cn(
-        'rounded-sm border border-[var(--border-1)]',
-        rule.collapsed ? 'overflow-hidden' : 'overflow-visible'
-      )}
+      role='group'
+      aria-label={`Sort ${index + 1}`}
+      title={renderTitle()}
+      actions={renderActions()}
+      collapsed={Boolean(rule.collapsed)}
+      onToggleCollapse={() => onToggleCollapse(rule.id)}
     >
-      {renderHeader()}
       {!rule.collapsed && renderContent()}
-    </div>
+    </CollapsibleCard>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index c3c3abf3270..e7b7cc26093 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -411,15 +411,15 @@ export function FieldFormat({
         className='flex items-center gap-2 pl-2'
         onClick={(e) => e.stopPropagation()}
       >
-        <Button variant='ghost' onClick={addField} disabled={isReadOnly} className='h-auto p-0'>
+        <Button variant='ghost' onClick={addField} disabled={isReadOnly} size='bare'>
           <Plus className='size-[14px]' />
           <span className='sr-only'>Add {title}</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={() => removeField(field.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)] hover-hover:opacity-90'
+          className='h-auto p-0 hover-hover:opacity-90'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Field</span>
@@ -718,6 +718,7 @@ export function FieldFormat({
                         ref={(el) => {
                           if (el) descriptionOverlayRefs.current[field.id] = el
                         }}
+                        data-preview-full-opacity={isPreview || undefined}
                         style={{ scrollbarWidth: 'none' }}
                         className={cn(
                           'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
index f9327663ac3..8bebd8bed5b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
@@ -33,7 +33,7 @@ export function Text({ blockId, subBlockId, content, className }: TextProps) {
         className={`rounded-md border bg-[var(--surface-2)] p-4 shadow-xs ${className || ''}`}
       >
         <div
-          className='max-w-none break-words text-[var(--text-secondary)] text-sm [&_a]:text-[var(--brand-secondary)] [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover-hover:brightness-110 [&_code]:rounded [&_code]:bg-[var(--surface-5)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[var(--text-tertiary)] [&_code]:text-xs [&_strong]:font-medium [&_strong]:text-[var(--text-primary)] [&_ul]:ml-5 [&_ul]:list-disc [&_ul]:marker:text-[var(--text-muted)]'
+          className='max-w-none break-words text-[var(--text-secondary)] text-sm [&_a]:text-[var(--brand-secondary)] [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover-hover:brightness-110 [&_code]:rounded-sm [&_code]:bg-[var(--surface-5)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[var(--text-tertiary)] [&_code]:text-xs [&_strong]:font-medium [&_strong]:text-[var(--text-primary)] [&_ul]:ml-5 [&_ul]:list-disc [&_ul]:marker:text-[var(--text-muted)]'
           dangerouslySetInnerHTML={{ __html: content }}
         />
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
index bb82ec4e2d5..737158f6ee6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -1645,8 +1645,11 @@ export const ToolInput = memo(function ToolInput({
               onDrop={(e) => handleDrop(e, toolIndex)}
             >
               <div
+                data-preview-full-opacity={
+                  (isPreview && !(showToolControl && isToolDisabled)) || undefined
+                }
                 className={cn(
-                  'flex items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]',
+                  'flex items-center justify-between gap-2 rounded-t-sm bg-[var(--surface-4)] px-2 py-[6.5px]',
                   (isCustomTool || hasToolBody) && 'cursor-pointer',
                   showToolControl && isToolDisabled && 'opacity-50 grayscale'
                 )}
@@ -1824,7 +1827,7 @@ export const ToolInput = memo(function ToolInput({
               </div>
 
               {isExpandedForDisplay && (
-                <div className='flex flex-col gap-2.5 overflow-visible rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] p-2'>
+                <div className='flex flex-col gap-2.5 overflow-visible rounded-b-sm border-[var(--border-1)] border-t bg-[var(--surface-2)] p-2'>
                   {showToolControl && (
                     <>
                       <ToolUsageControl
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index bb9352bef92..743686abe8f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -422,19 +422,19 @@ export function VariablesInput({
                         addAssignment()
                       }}
                       disabled={isReadOnly || allVariablesAssigned}
-                      className='h-auto p-0'
+                      size='bare'
                     >
                       <Plus className='size-[14px]' />
                       <span className='sr-only'>Add Variable</span>
                     </Button>
                     <Button
-                      variant='ghost'
+                      variant='ghost-destructive'
                       onClick={(e) => {
                         e.stopPropagation()
                         removeAssignment(assignment.id)
                       }}
                       disabled={isReadOnly}
-                      className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+                      size='bare'
                     >
                       <Trash className='size-[14px]' />
                       <span className='sr-only'>Delete Variable</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 4795928d1c6..ee2ae17ce60 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -302,7 +302,8 @@ const renderLabel = (
             {!wandState.isSearchActive ? (
               <Button
                 variant='active'
-                className='-my-1 h-5 py-0 text-xs'
+                size='inline'
+                className='-my-1'
                 onClick={wandState.onSearchClick}
               >
                 Generate
@@ -1244,6 +1245,7 @@ function SubBlockComponent({
       onMouseDown={handleMouseDown}
       data-workflow-search-subblock-id={config.id}
       data-workflow-search-canonical-id={config.canonicalParamId ?? config.id}
+      data-preview-readonly={(isPreview && !disabled) || undefined}
       className='subblock-content flex flex-col gap-2.5'
     >
       {renderLabel(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 6a8f5fc45c3..b1b9d2ec97d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -1,11 +1,17 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, DashedDividerLine, FieldDivider, Loader, Tooltip } from '@sim/emcn'
+import {
+  Button,
+  DashedDividerLine,
+  FieldDisclosure,
+  FieldDivider,
+  Loader,
+  Tooltip,
+} from '@sim/emcn'
 import {
   BookOpen,
   Check,
-  ChevronDown,
   ChevronUp,
   Lock,
   Pencil,
@@ -22,6 +28,7 @@ import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
 import { isMcpRuntimeReference } from '@/lib/mcp/operation-policy'
 import { resolveMcpBlockConfig } from '@/lib/mcp/workflow-config'
 import { captureEvent } from '@/lib/posthog/client'
@@ -607,20 +614,12 @@ export function Editor() {
                                 lightweight
                               />
                             </div>
-                            <Tooltip.Root>
-                              <Tooltip.Trigger asChild>
-                                <Button
-                                  aria-label='Open workflow'
-                                  type='button'
-                                  variant='ghost'
-                                  onClick={handleOpenChildWorkflow}
-                                  className='absolute right-[6px] bottom-1.5 z-10 size-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
-                                >
-                                  <SquareArrowUpRight className='size-[12px]' />
-                                </Button>
-                              </Tooltip.Trigger>
-                              <Tooltip.Content side='top'>Open workflow</Tooltip.Content>
-                            </Tooltip.Root>
+                            <WorkflowPreviewAction
+                              aria-label='Open workflow'
+                              onClick={handleOpenChildWorkflow}
+                            >
+                              <SquareArrowUpRight className='size-[12px]' />
+                            </WorkflowPreviewAction>
                           </>
                         ) : (
                           <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
@@ -745,22 +744,14 @@ export function Editor() {
                     })}
 
                     {hasAdditionalFields && canEditBlock && (
-                      <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
-                        <DashedDividerLine className='flex-1' />
-                        <button
-                          type='button'
-                          onClick={handleToggleAdditionalFields}
-                          className='flex items-center gap-1.5 whitespace-nowrap text-[var(--text-secondary)] text-small hover-hover:text-[var(--text-primary)]'
-                        >
-                          {displayAdvancedOptions
-                            ? 'Hide additional fields'
-                            : 'Show additional fields'}
-                          <ChevronDown
-                            className={`size-[14px] transition-transform duration-200 ${displayAdvancedOptions ? 'rotate-180' : ''}`}
-                          />
-                        </button>
-                        <DashedDividerLine className='flex-1' />
-                      </div>
+                      <FieldDisclosure
+                        expanded={displayAdvancedOptions}
+                        onClick={handleToggleAdditionalFields}
+                      >
+                        {displayAdvancedOptions
+                          ? 'Hide additional fields'
+                          : 'Show additional fields'}
+                      </FieldDisclosure>
                     )}
                     {hasAdditionalFields && !canEditBlock && displayAdvancedOptions && (
                       <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
index 0c7d85480b1..43215c2a7d2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
@@ -19,7 +19,7 @@ export function createDragPreview(info: DragItemInfo): HTMLElement {
   preview.style.cssText = `
     width: 250px;
     background: var(--surface-1);
-    border-radius: 8px;
+    border-radius: var(--radius-lg);
     padding: 8px 9px;
     display: flex;
     align-items: center;
@@ -37,7 +37,7 @@ export function createDragPreview(info: DragItemInfo): HTMLElement {
     : document.createElement('div')
   iconContainer.style.width = '24px'
   iconContainer.style.height = '24px'
-  iconContainer.style.borderRadius = '6px'
+  iconContainer.style.borderRadius = 'var(--radius-md)'
   iconContainer.style.display = 'flex'
   iconContainer.style.alignItems = 'center'
   iconContainer.style.justifyContent = 'center'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 7b5c6e25470..b9025235211 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -7,6 +7,7 @@ import {
   Button,
   Chip,
   ChipConfirmModal,
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -113,6 +114,33 @@ function copilotDraftKey(
 ): string | undefined {
   return workflowId ? `${workspaceId}:workflow-copilot:${workflowId}:${chatId ?? 'new'}` : undefined
 }
+
+interface PanelTabButtonProps {
+  tab: PanelTab
+  active: boolean
+  onClick: () => void
+  children: string
+}
+
+function PanelTabButton({ tab, active, onClick, children }: PanelTabButtonProps) {
+  return (
+    <Button
+      className={cn(
+        'h-[28px] rounded-md border py-[5px] text-[12.5px]',
+        tab === 'copilot' && 'truncate',
+        active
+          ? 'border-[var(--border-1)]'
+          : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
+      )}
+      variant={active ? 'active' : 'ghost'}
+      aria-pressed={active}
+      onClick={onClick}
+      data-tab-button={tab}
+    >
+      {children}
+    </Button>
+  )
+}
 /**
  * Panel component with resizable width and tab navigation that persists across page refreshes.
  *
@@ -857,43 +885,28 @@ export const Panel = memo(function Panel() {
           <div className='flex shrink-0 items-center justify-between px-2 pt-3.5'>
             <div className='flex gap-1'>
               {isCopilotTabAvailable && (
-                <Button
-                  className={`h-[28px] truncate rounded-md border py-[5px] text-[12.5px] ${
-                    _hasHydrated && activeTab === 'copilot'
-                      ? 'border-[var(--border-1)]'
-                      : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
-                  }`}
-                  variant={_hasHydrated && activeTab === 'copilot' ? 'active' : 'ghost'}
+                <PanelTabButton
+                  tab='copilot'
+                  active={_hasHydrated && activeTab === 'copilot'}
                   onClick={() => handleTabClick('copilot')}
-                  data-tab-button='copilot'
                 >
                   Chat
-                </Button>
+                </PanelTabButton>
               )}
-              <Button
-                className={`h-[28px] rounded-md border py-[5px] text-[12.5px] ${
-                  _hasHydrated && activeTab === 'toolbar'
-                    ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
-                }`}
-                variant={_hasHydrated && activeTab === 'toolbar' ? 'active' : 'ghost'}
+              <PanelTabButton
+                tab='toolbar'
+                active={_hasHydrated && activeTab === 'toolbar'}
                 onClick={() => handleTabClick('toolbar')}
-                data-tab-button='toolbar'
               >
                 Toolbar
-              </Button>
-              <Button
-                className={`h-[28px] rounded-md border py-[5px] text-[12.5px] ${
-                  _hasHydrated && activeTab === 'editor'
-                    ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
-                }`}
-                variant={_hasHydrated && activeTab === 'editor' ? 'active' : 'ghost'}
+              </PanelTabButton>
+              <PanelTabButton
+                tab='editor'
+                active={_hasHydrated && activeTab === 'editor'}
                 onClick={() => handleTabClick('editor')}
-                data-tab-button='editor'
               >
                 Editor
-              </Button>
+              </PanelTabButton>
             </div>
           </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/components/replacement-controls/replacement-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/components/replacement-controls/replacement-controls.tsx
index 454e82bd55f..aacb2e93688 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/components/replacement-controls/replacement-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/components/replacement-controls/replacement-controls.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, Combobox, Input } from '@sim/emcn'
+import { Chip, ChipCombobox, ChipInput } from '@sim/emcn'
 import type { WorkflowSearchReplacementOption } from '@/lib/workflows/search-replace/types'
 
 interface ReplacementControlsProps {
@@ -33,7 +33,7 @@ export function ReplacementControls({
   return (
     <div className='space-y-2'>
       {usesResourceReplacement ? (
-        <Combobox
+        <ChipCombobox
           options={compatibleResourceOptions.map((option) => ({
             label: option.label,
             value: option.value,
@@ -47,7 +47,7 @@ export function ReplacementControls({
           disabled={disabled || compatibleResourceOptions.length === 0}
         />
       ) : (
-        <Input
+        <ChipInput
           value={replacement}
           placeholder='Replace'
           disabled={disabled}
@@ -60,22 +60,22 @@ export function ReplacementControls({
           {eligibleCount} replaceable match{eligibleCount === 1 ? '' : 'es'}
         </span>
         <div className='flex gap-1.5'>
-          <Button
-            className='h-8 text-xs'
-            variant='default'
+          <Chip
+            type='button'
+            variant='outline'
             disabled={disabled || isApplying || !canReplaceActive}
             onClick={onReplaceActive}
           >
             Replace
-          </Button>
-          <Button
-            className='h-8 text-xs'
-            variant='active'
+          </Chip>
+          <Chip
+            type='button'
+            active
             disabled={disabled || isApplying || !canReplaceAll}
             onClick={onReplaceAll}
           >
             {isApplying ? 'Replacing...' : 'Replace All'}
-          </Button>
+          </Chip>
         </div>
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
index 2a886016aa9..103b53feeb9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, cn, Input, toast } from '@sim/emcn'
+import { Button, ChipInput, cn, toast } from '@sim/emcn'
 import { ChevronDown, ChevronRight, ChevronUp, X } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
 import { useShallow } from 'zustand/react/shallow'
@@ -575,12 +575,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
           onMouseDown={(event) => event.stopPropagation()}
         >
           <span className='text-[var(--text-muted)] text-xs'>{matchCountLabel}</span>
-          <Button
-            aria-label='Close search'
-            variant='ghost'
-            className='size-[26px] p-0'
-            onClick={close}
-          >
+          <Button aria-label='Close search' variant='ghost' iconSize='regular' onClick={close}>
             <X className='size-[14px]' />
           </Button>
         </div>
@@ -589,7 +584,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
       <div className='grid grid-cols-[2rem_minmax(0,1fr)_2rem_2rem] items-start gap-1.5'>
         <Button
           variant='ghost'
-          className='size-8 p-0'
+          iconSize='roomy'
           aria-label={isReplaceExpanded ? 'Hide replace controls' : 'Show replace controls'}
           onClick={() => setIsReplaceExpanded((expanded) => !expanded)}
         >
@@ -600,7 +595,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
             )}
           />
         </Button>
-        <Input
+        <ChipInput
           ref={searchInputRef}
           value={query}
           placeholder='Search'
@@ -614,7 +609,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
         <Button
           aria-label='Previous match'
           variant='ghost'
-          className='size-8 p-0'
+          iconSize='roomy'
           disabled={hydratedMatches.length === 0}
           onClick={() => handleMoveActiveMatch(-1)}
         >
@@ -623,7 +618,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
         <Button
           aria-label='Next match'
           variant='ghost'
-          className='size-8 p-0'
+          iconSize='roomy'
           disabled={hydratedMatches.length === 0}
           onClick={() => handleMoveActiveMatch(1)}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index 7eb787be542..7e4026b6473 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -3,9 +3,9 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
+  Chip,
   Code,
   cn,
-  Input,
   Popover,
   PopoverContent,
   PopoverItem,
@@ -13,8 +13,6 @@ import {
   Tooltip,
 } from '@sim/emcn'
 import {
-  ArrowDown,
-  ArrowUp,
   Check,
   Clipboard,
   Download,
@@ -26,6 +24,7 @@ import {
 } from '@sim/emcn/icons'
 import Link from 'next/link'
 import { AgentStreamThinkingChrome } from '@/components/agent-stream/agent-stream-chrome'
+import { CodeSearchOverlay } from '@/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay'
 import {
   OutputContextMenu,
   StructuredOutput,
@@ -66,7 +65,8 @@ const OutputCodeContent = React.memo(function OutputCodeContent({
       code={code}
       showGutter
       language={language}
-      className='m-0 min-h-full rounded-none border-0 bg-[var(--bg)] dark:bg-[var(--bg)]'
+      appearance='flat'
+      className='m-0 min-h-full'
       paddingLeft={8}
       gutterStyle={{ backgroundColor: 'transparent' }}
       wrapText={wrapText}
@@ -308,29 +308,23 @@ export const OutputPanel = React.memo(function OutputPanel({
           onClick={handleHeaderClick}
         >
           <div className='flex items-center'>
-            <Button
-              variant='ghost'
-              className={cn(
-                'text-small',
-                !showInput ? 'text-[var(--text-primary)]!' : 'text-[var(--text-icon)]!'
-              )}
+            <Chip
+              active={!showInput}
+              aria-pressed={!showInput}
               onClick={handleOutputButtonClick}
               aria-label='Show output'
             >
               Output
-            </Button>
+            </Chip>
             {hasInputData && (
-              <Button
-                variant='ghost'
-                className={cn(
-                  'text-small',
-                  showInput ? 'text-[var(--text-primary)]!' : 'text-[var(--text-icon)]!'
-                )}
+              <Chip
+                active={showInput}
+                aria-pressed={showInput}
                 onClick={handleInputButtonClick}
                 aria-label='Show input'
               >
                 Input
-              </Button>
+              </Chip>
             )}
           </div>
           <div className='flex shrink-0 items-center gap-2'>
@@ -492,58 +486,19 @@ export const OutputPanel = React.memo(function OutputPanel({
 
         {/* Search Overlay */}
         {isOutputSearchActive && (
-          <div
-            className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--bg)] px-1.5 shadow-xs'
-            onClick={(e) => e.stopPropagation()}
-            data-toolbar-root
-            data-search-active='true'
-          >
-            <Input
-              ref={outputSearchInputRef}
-              type='text'
-              value={outputSearchQuery}
-              onChange={(e) => setOutputSearchQuery(e.target.value)}
-              placeholder='Search...'
-              className='mr-0.5 h-[23px] w-[94px] text-caption'
-            />
-            <span
-              className={cn(
-                'w-[58px] text-xs',
-                matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-              )}
-            >
-              {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : 'No results'}
-            </span>
-            <Button
-              variant='ghost'
-              onClick={goToPreviousMatch}
-              aria-label='Previous match'
-              iconPadding='md'
-              className='-m-1.5'
-              disabled={matchCount === 0}
-            >
-              <ArrowUp className='size-[14px]' />
-            </Button>
-            <Button
-              variant='ghost'
-              onClick={goToNextMatch}
-              aria-label='Next match'
-              iconPadding='md'
-              className='-m-1.5'
-              disabled={matchCount === 0}
-            >
-              <ArrowDown className='size-[14px]' />
-            </Button>
-            <Button
-              variant='ghost'
-              onClick={closeOutputSearch}
-              aria-label='Close search'
-              iconPadding='md'
-              className='-m-1.5'
-            >
-              <X className='size-[14px]' />
-            </Button>
-          </div>
+          <CodeSearchOverlay
+            appearance='attached'
+            className='top-[30px] right-[8px]'
+            inputKind='plain'
+            inputRef={outputSearchInputRef}
+            query={outputSearchQuery}
+            onQueryChange={setOutputSearchQuery}
+            matchCount={matchCount}
+            currentMatchIndex={currentMatchIndex}
+            onPrevious={goToPreviousMatch}
+            onNext={goToNextMatch}
+            onClose={closeOutputSearch}
+          />
         )}
 
         {/* Content */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
index 3ac1be74166..eef1c0d1072 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -126,12 +126,12 @@ function VariableHeader({
         )}
       </div>
       <Button
-        variant='ghost'
+        variant='ghost-destructive'
         onClick={(e) => {
           e.stopPropagation()
           onRemove()
         }}
-        className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+        size='bare'
         disabled={readOnly}
         aria-label={`Delete ${variable.name || `variable ${index + 1}`}`}
       >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/canvas-control-button.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/canvas-control-button.tsx
new file mode 100644
index 00000000000..9adcad9155a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/canvas-control-button.tsx
@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react'
+import { forwardRef } from 'react'
+import { Button } from '@sim/emcn'
+
+interface CanvasControlButtonProps
+  extends Omit<
+    ComponentProps<typeof Button>,
+    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'shape' | 'className'
+  > {
+  active?: boolean
+  'aria-label': string
+}
+
+/** Square action in the canvas navigation toolbar. */
+export const CanvasControlButton = forwardRef<HTMLButtonElement, CanvasControlButtonProps>(
+  ({ active = false, ...props }, ref) => (
+    <Button {...props} ref={ref} variant={active ? 'active' : 'ghost-hover'} iconSize='regular' />
+  )
+)
+
+CanvasControlButton.displayName = 'CanvasControlButton'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
index 82974257851..2765cd5baa5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
@@ -1,11 +1,11 @@
 'use client'
 
+/** biome-ignore assist/source/organizeImports: Keep the local feature import after shared hooks and stores, per AGENTS.md. */
 import { memo, useCallback, useRef, useState } from 'react'
 import {
   Button,
   ChevronDown,
   Cursor,
-  chipHoverSurfaceClass,
   cn,
   disclosureChevronClass,
   Hand,
@@ -32,6 +32,8 @@ import { useCanvasModeStore } from '@/stores/canvas-mode'
 import { useUndoRedoStore } from '@/stores/undo-redo'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
+import { CanvasControlButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/canvas-control-button'
+
 const logger = createLogger('WorkflowControls')
 
 /**
@@ -100,7 +102,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
          * CONTENT_WINDOW_GAP; these controls measure from the canvas floor and
          * wall, so they take the 12 directly.
          */
-        className='absolute bottom-3 left-3 z-10 flex h-[36px] items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] p-1'
+        className='absolute bottom-3 left-3 z-10 flex h-9 items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] p-1'
         onContextMenu={handleContextMenu}
       >
         {/* Canvas Mode Selector */}
@@ -109,23 +111,15 @@ export const WorkflowControls = memo(function WorkflowControls() {
             <PopoverTrigger asChild>
               <div className='flex cursor-pointer items-center gap-1'>
                 <Tooltip.Trigger asChild>
-                  <Button
-                    aria-label={mode === 'hand' ? 'Mover' : 'Pointer'}
-                    className='size-[28px] rounded-sm p-0'
-                    variant='active'
-                  >
+                  <CanvasControlButton aria-label={mode === 'hand' ? 'Mover' : 'Pointer'} active>
                     {mode === 'hand' ? (
                       <Hand className='size-[14px]' />
                     ) : (
                       <Cursor className='size-[14px]' />
                     )}
-                  </Button>
+                  </CanvasControlButton>
                 </Tooltip.Trigger>
-                <Button
-                  aria-label='Change canvas mode'
-                  variant='ghost'
-                  className={cn('size-[20px] rounded-sm p-0', chipHoverSurfaceClass)}
-                >
+                <Button aria-label='Change canvas mode' variant='ghost-hover' size='icon'>
                   <ChevronDown
                     className={cn(disclosureChevronClass, isCanvasModeOpen && 'rotate-180')}
                   />
@@ -160,15 +154,9 @@ export const WorkflowControls = memo(function WorkflowControls() {
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
-            <Button
-              aria-label='Undo'
-              variant='ghost'
-              className={cn('size-[28px] rounded-sm p-0', chipHoverSurfaceClass)}
-              onClick={undo}
-              disabled={!canUndo}
-            >
+            <CanvasControlButton aria-label='Undo' onClick={undo} disabled={!canUndo}>
               <Undo className='size-[14px]' />
-            </Button>
+            </CanvasControlButton>
           </Tooltip.Trigger>
           <Tooltip.Content side='top'>
             <Tooltip.Shortcut keys='⌘Z'>Undo</Tooltip.Shortcut>
@@ -177,15 +165,9 @@ export const WorkflowControls = memo(function WorkflowControls() {
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
-            <Button
-              aria-label='Redo'
-              variant='ghost'
-              className={cn('size-[28px] rounded-sm p-0', chipHoverSurfaceClass)}
-              onClick={redo}
-              disabled={!canRedo}
-            >
+            <CanvasControlButton aria-label='Redo' onClick={redo} disabled={!canRedo}>
               <Redo className='size-[14px]' />
-            </Button>
+            </CanvasControlButton>
           </Tooltip.Trigger>
           <Tooltip.Content side='top'>
             <Tooltip.Shortcut keys='⌘⇧Z'>Redo</Tooltip.Shortcut>
@@ -196,14 +178,9 @@ export const WorkflowControls = memo(function WorkflowControls() {
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
-            <Button
-              aria-label='Fit to View'
-              variant='ghost'
-              className={cn('size-[28px] rounded-sm p-0', chipHoverSurfaceClass)}
-              onClick={handleFitToView}
-            >
+            <CanvasControlButton aria-label='Fit to View' onClick={handleFitToView}>
               <SelectAll className='size-[14px]' />
-            </Button>
+            </CanvasControlButton>
           </Tooltip.Trigger>
           <Tooltip.Content side='top'>
             <Tooltip.Shortcut keys='⌘⇧F'>Fit to View</Tooltip.Shortcut>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index b3c752fb6d0..c1d9c2d2645 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -12,11 +12,10 @@ import {
   Input,
   Label,
   OverflowText,
+  OverlayActionButton,
   Tooltip,
 } from '@sim/emcn'
 import {
-  ArrowDown,
-  ArrowUp,
   Check,
   ChevronDown,
   ChevronUp,
@@ -29,6 +28,7 @@ import {
 import { formatDuration } from '@sim/utils/formatting'
 import { ReactFlowProvider } from '@xyflow/react'
 import { useParams } from 'next/navigation'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
 import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
 import {
   buildCanonicalIndexForSurface,
@@ -39,8 +39,10 @@ import {
   isToolInputOnlySubBlock,
 } from '@/lib/workflows/subblocks/visibility'
 import { DELETED_WORKFLOW_LABEL } from '@/lib/workflows/workflow-labels'
+import { CodeSearchOverlay } from '@/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay'
 import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components'
 import { PreviewContextMenu } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-context-menu'
+import { READONLY_PREVIEW_STYLES } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles'
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow'
 import { getBlock } from '@/blocks'
 import { BlockTile } from '@/blocks/block-tile'
@@ -52,31 +54,6 @@ import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import { useContextMenu } from '@/hooks/use-context-menu'
 import type { BlockState, Loop, Parallel, WorkflowState } from '@/stores/workflows/workflow/types'
 
-/**
- * CSS override to show full opacity and prevent interaction in readonly preview mode.
- * Extracted to avoid duplicating the style block in multiple places.
- */
-const READONLY_PREVIEW_STYLES = `
-  .readonly-preview,
-  .readonly-preview * {
-    cursor: default !important;
-  }
-  .readonly-preview [disabled],
-  .readonly-preview [data-disabled],
-  .readonly-preview input,
-  .readonly-preview textarea,
-  .readonly-preview [role="combobox"],
-  .readonly-preview [role="slider"],
-  .readonly-preview [role="switch"],
-  .readonly-preview [role="checkbox"] {
-    opacity: 1 !important;
-    pointer-events: none;
-  }
-  .readonly-preview .opacity-50 {
-    opacity: 1 !important;
-  }
-`
-
 /**
  * Format a value for display as JSON string
  */
@@ -435,7 +412,7 @@ function ConnectionsSection({
               }
             >
               <div className='relative flex size-[14px] shrink-0 items-center justify-center overflow-hidden rounded-sm bg-violet-500'>
-                <span className='text-[9px] text-white'>V</span>
+                <span className='text-micro text-white'>V</span>
               </div>
               <OverflowText
                 label='Variables'
@@ -484,7 +461,7 @@ function ConnectionsSection({
               }
             >
               <div className='relative flex size-[14px] shrink-0 items-center justify-center overflow-hidden rounded-sm bg-cool-gray-500'>
-                <span className='text-[9px] text-white'>E</span>
+                <span className='text-micro text-white'>E</span>
               </div>
               <OverflowText
                 label='Secrets'
@@ -604,7 +581,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
   return (
     <div className='flex-1 overflow-y-auto overflow-x-hidden pt-2 pb-2'>
       {/* Type Selection - matches SubflowEditor */}
-      <div>
+      <div data-preview-readonly>
         <Label className='mb-[6.5px] block pl-0.5 text-small'>
           {isLoop ? 'Loop Type' : 'Parallel Type'}
         </Label>
@@ -625,7 +602,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
         <Label className='mb-[6.5px] block pl-0.5 text-small'>{getConfigLabel()}</Label>
 
         {isCountMode ? (
-          <div>
+          <div data-preview-readonly>
             <Input
               type='text'
               value={iterations.toString()}
@@ -1062,7 +1039,7 @@ function PreviewEditorContent({
     return (
       <div className='relative flex size-full flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
         {/* Header - styled like subflow header */}
-        <div className='mx-[-1px] flex shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
+        <div className='mx-[-1px] flex shrink-0 items-center gap-2 rounded-b-sm border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
           <BlockTile blockType={block.type} size='lg' />
           <OverflowText label={subflowName} className='flex-1 text-[var(--text-primary)] text-sm' />
           {onClose && (
@@ -1152,7 +1129,7 @@ function PreviewEditorContent({
   return (
     <div className='relative flex size-full flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
       {/* Header - styled like editor */}
-      <div className='mx-[-1px] flex shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
+      <div className='mx-[-1px] flex shrink-0 items-center gap-2 rounded-b-sm border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
         {block.type !== 'note' && <BlockTile blockType={block.type} size='lg' />}
         <OverflowText
           label={block.name || blockConfig.name}
@@ -1222,7 +1199,8 @@ function PreviewEditorContent({
                   <Code.Viewer
                     code={formatValueAsJson(executionData.input)}
                     language='json'
-                    className='max-h-[300px] min-h-0 max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!'
+                    appearance='inspection'
+                    className='max-h-[300px] min-h-0 max-w-full [word-break:break-all]'
                     wrapText={wrapText}
                     searchQuery={isSearchActive ? searchQuery : undefined}
                     currentMatchIndex={currentMatchIndex}
@@ -1233,22 +1211,20 @@ function PreviewEditorContent({
                     <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
-                          <Button
+                          <OverlayActionButton
                             aria-label={copiedSection === 'input' ? 'Copied' : 'Copy'}
                             type='button'
-                            variant='ghost'
                             onClick={(e) => {
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.input), 'input')
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             {copiedSection === 'input' ? (
                               <Check className='size-[10px] text-[var(--text-success)]' />
                             ) : (
                               <Clipboard className='size-[10px]' />
                             )}
-                          </Button>
+                          </OverlayActionButton>
                         </Tooltip.Trigger>
                         <Tooltip.Content side='top'>
                           {copiedSection === 'input' ? 'Copied' : 'Copy'}
@@ -1256,18 +1232,16 @@ function PreviewEditorContent({
                       </Tooltip.Root>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
-                          <Button
+                          <OverlayActionButton
                             aria-label='Search'
                             type='button'
-                            variant='ghost'
                             onClick={(e) => {
                               e.stopPropagation()
                               activateSearch()
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             <Search className='size-[10px]' />
-                          </Button>
+                          </OverlayActionButton>
                         </Tooltip.Trigger>
                         <Tooltip.Content side='top'>Search</Tooltip.Content>
                       </Tooltip.Root>
@@ -1293,8 +1267,9 @@ function PreviewEditorContent({
                   <Code.Viewer
                     code={formatValueAsJson(executionData.output)}
                     language='json'
+                    appearance='inspection'
                     className={cn(
-                      'max-h-[300px] min-h-0 max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!',
+                      'max-h-[300px] min-h-0 max-w-full [word-break:break-all]',
                       executionData.status === 'error' && 'text-[var(--text-error)]'
                     )}
                     wrapText={wrapText}
@@ -1307,22 +1282,20 @@ function PreviewEditorContent({
                     <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
-                          <Button
+                          <OverlayActionButton
                             aria-label={copiedSection === 'output' ? 'Copied' : 'Copy'}
                             type='button'
-                            variant='ghost'
                             onClick={(e) => {
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.output), 'output')
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             {copiedSection === 'output' ? (
                               <Check className='size-[10px] text-[var(--text-success)]' />
                             ) : (
                               <Clipboard className='size-[10px]' />
                             )}
-                          </Button>
+                          </OverlayActionButton>
                         </Tooltip.Trigger>
                         <Tooltip.Content side='top'>
                           {copiedSection === 'output' ? 'Copied' : 'Copy'}
@@ -1330,18 +1303,16 @@ function PreviewEditorContent({
                       </Tooltip.Root>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
-                          <Button
+                          <OverlayActionButton
                             aria-label='Search'
                             type='button'
-                            variant='ghost'
                             onClick={(e) => {
                               e.stopPropagation()
                               activateSearch()
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             <Search className='size-[10px]' />
-                          </Button>
+                          </OverlayActionButton>
                         </Tooltip.Trigger>
                         <Tooltip.Content side='top'>Search</Tooltip.Content>
                       </Tooltip.Root>
@@ -1385,30 +1356,18 @@ function PreviewEditorContent({
                             cursorStyle='grab'
                           />
                         </div>
-                        <Tooltip.Root>
-                          <Tooltip.Trigger asChild>
-                            <Button
-                              aria-label={
-                                isExecutionMode && onDrillDown
-                                  ? 'Expand workflow'
-                                  : 'Open in new tab'
-                              }
-                              type='button'
-                              variant='ghost'
-                              onClick={handleExpandChildWorkflow}
-                              className='absolute right-[6px] bottom-1.5 z-10 size-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
-                            >
-                              {isExecutionMode && onDrillDown ? (
-                                <Expand className='size-[12px]' />
-                              ) : (
-                                <SquareArrowUpRight className='size-[12px]' />
-                              )}
-                            </Button>
-                          </Tooltip.Trigger>
-                          <Tooltip.Content side='top'>
-                            {isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'}
-                          </Tooltip.Content>
-                        </Tooltip.Root>
+                        <WorkflowPreviewAction
+                          aria-label={
+                            isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'
+                          }
+                          onClick={handleExpandChildWorkflow}
+                        >
+                          {isExecutionMode && onDrillDown ? (
+                            <Expand className='size-[12px]' />
+                          ) : (
+                            <SquareArrowUpRight className='size-[12px]' />
+                          )}
+                        </WorkflowPreviewAction>
                       </>
                     ) : (
                       <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
@@ -1447,7 +1406,6 @@ function PreviewEditorContent({
                           ...subBlockValues,
                           __canonicalModes: canonicalModeOverrides,
                         }}
-                        disabled={true}
                       />
                       {index < visibleSubBlocks.length - 1 && (
                         <FieldDivider
@@ -1493,49 +1451,18 @@ function PreviewEditorContent({
 
       {/* Search Overlay */}
       {isSearchActive && (
-        <div
-          role='presentation'
-          className='absolute top-10 right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-xs'
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Input
-            ref={searchInputRef}
-            type='text'
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder='Search...'
-            className='mr-0.5 h-[23px] w-[94px] text-caption'
-          />
-          <span
-            className={cn(
-              'min-w-[45px] text-center text-xs',
-              matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-            )}
-          >
-            {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
-          </span>
-          <Button
-            variant='ghost'
-            iconPadding='sm'
-            onClick={goToPreviousMatch}
-            disabled={matchCount === 0}
-            aria-label='Previous match'
-          >
-            <ArrowUp className='size-[12px]' />
-          </Button>
-          <Button
-            variant='ghost'
-            iconPadding='sm'
-            onClick={goToNextMatch}
-            disabled={matchCount === 0}
-            aria-label='Next match'
-          >
-            <ArrowDown className='size-[12px]' />
-          </Button>
-          <Button variant='ghost' iconPadding='sm' onClick={closeSearch} aria-label='Close search'>
-            <X className='size-[12px]' />
-          </Button>
-        </div>
+        <CodeSearchOverlay
+          className='top-10 right-[8px]'
+          inputKind='plain'
+          inputRef={searchInputRef}
+          query={searchQuery}
+          onQueryChange={setSearchQuery}
+          matchCount={matchCount}
+          currentMatchIndex={currentMatchIndex}
+          onPrevious={goToPreviousMatch}
+          onNext={goToNextMatch}
+          onClose={closeSearch}
+        />
       )}
 
       {/* Context Menu */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.test.tsx
new file mode 100644
index 00000000000..2b817583d2f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.test.tsx
@@ -0,0 +1,116 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { nextNavigationMock, nextNavigationMockFns } from '@sim/testing/mocks/next-navigation.mock'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('next/navigation', () => nextNavigationMock)
+vi.mock('@/hooks/use-webhook-management', () => ({
+  useWebhookManagement: () => ({ webhookUrl: null }),
+}))
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value',
+  () => ({ useSubBlockValue: () => [undefined, vi.fn()] })
+)
+
+import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block'
+import { READONLY_PREVIEW_STYLES } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles'
+import type { SubBlockConfig } from '@/blocks/types'
+
+const config: SubBlockConfig = { id: 'enabled', type: 'switch', title: 'Enabled' }
+const piiConfig: SubBlockConfig = {
+  id: 'pii-types',
+  type: 'grouped-checkbox-list',
+  title: 'PII Types',
+  options: [{ id: 'email', label: 'Email', group: 'Personal' }],
+}
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  nextNavigationMockFns.mockUseParams.mockReturnValue({ workspaceId: 'workspace-1' })
+  nextNavigationMockFns.mockUsePathname.mockReturnValue('/workspace/workspace-1/w/workflow-1')
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+describe('workflow preview read-only appearance', () => {
+  it('shows a preview value at full opacity while retaining the disabled interaction state', () => {
+    act(() =>
+      root.render(
+        <>
+          <style>{`button[disabled] { opacity: 0.5; } ${READONLY_PREVIEW_STYLES}`}</style>
+          <div className='readonly-preview'>
+            <div data-testid='preview'>
+              <SubBlock
+                blockId='block-1'
+                config={config}
+                isPreview
+                subBlockValues={{ enabled: { value: true } }}
+              />
+              <SubBlock
+                blockId='block-1'
+                config={piiConfig}
+                isPreview
+                subBlockValues={{ 'pii-types': { value: ['email'] } }}
+              />
+              <div data-preview-readonly>
+                <button type='button' disabled>
+                  Remove file
+                </button>
+              </div>
+            </div>
+            <div data-testid='disabled'>
+              <SubBlock blockId='block-1' config={config} disabled />
+            </div>
+          </div>
+        </>
+      )
+    )
+
+    const preview = container.querySelector('[data-testid="preview"]')
+    const disabled = container.querySelector('[data-testid="disabled"]')
+    if (!preview || !disabled) throw new Error('Missing preview or disabled section')
+    const previewSwitch = preview.querySelector<HTMLButtonElement>('[role="switch"]')
+    const disabledSwitch = disabled.querySelector<HTMLButtonElement>('[role="switch"]')
+    if (!previewSwitch || !disabledSwitch) throw new Error('Missing preview or disabled switch')
+
+    expect(preview.querySelector('[data-preview-readonly]')).not.toBeNull()
+    expect(previewSwitch.hasAttribute('disabled')).toBe(true)
+    expect(previewSwitch.getAttribute('aria-checked')).toBe('true')
+    expect(getComputedStyle(previewSwitch).opacity).toBe('1')
+    expect(getComputedStyle(previewSwitch).pointerEvents).toBe('none')
+    const piiTrigger = Array.from(preview.querySelectorAll('button')).find((button) =>
+      button.textContent?.includes('Configure PII Types')
+    )
+    if (!piiTrigger) throw new Error('Missing PII configuration trigger')
+    expect(piiTrigger.disabled).toBe(true)
+    expect(piiTrigger.hasAttribute('data-preview-full-opacity')).toBe(true)
+    const removeButton = Array.from(preview.querySelectorAll('button')).find((button) =>
+      button.textContent?.includes('Remove file')
+    )
+    if (!removeButton) throw new Error('Missing remove file button')
+    expect(getComputedStyle(removeButton).pointerEvents).toBe('none')
+    expect(getComputedStyle(removeButton).opacity).toBe('0.5')
+
+    act(() => {
+      previewSwitch.click()
+      previewSwitch.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
+    })
+    expect(previewSwitch.getAttribute('aria-checked')).toBe('true')
+
+    expect(disabled.querySelector('[data-preview-readonly]')).toBeNull()
+    expect(disabledSwitch.hasAttribute('disabled')).toBe(true)
+    expect(getComputedStyle(disabledSwitch).opacity).toBe('0.5')
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.ts b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.ts
new file mode 100644
index 00000000000..3fe8107450f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.ts
@@ -0,0 +1,27 @@
+/**
+ * Keep preview fields noninteractive while showing intentionally read-only controls
+ * and their marked value overlays at full opacity in both preview sections.
+ */
+export const READONLY_PREVIEW_STYLES = `
+  .readonly-preview,
+  .readonly-preview * {
+    cursor: default !important;
+  }
+  .readonly-preview [data-preview-readonly] :is(
+    input,
+    textarea,
+    [role="combobox"],
+    [role="slider"],
+    [role="switch"],
+    [role="checkbox"]
+  ) {
+    opacity: 1 !important;
+    pointer-events: none;
+  }
+  .readonly-preview [data-preview-readonly] :is(button, [role="button"]) {
+    pointer-events: none;
+  }
+  .readonly-preview [data-preview-readonly] [data-preview-full-opacity] {
+    opacity: 1 !important;
+  }
+`
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
index e5d7fd54389..3f6b4986eea 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
@@ -72,9 +72,8 @@ interface SubBlockValueEntry {
 const HANDLE_STYLES = {
   horizontal: 'border-none! bg-[var(--surface-7)]! h-5! w-[7px]! rounded-xs!',
   right:
-    'z-[10]! border-none! bg-[var(--workflow-edge)]! h-5! w-[7px]! rounded-r-[2px]! rounded-l-none!',
-  error:
-    'z-[10]! border-none! bg-[var(--text-error)]! h-[7px]! w-6! rounded-b-[2px]! rounded-t-none!',
+    'z-[10]! border-none! bg-[var(--workflow-edge)]! h-5! w-[7px]! rounded-r-xs! rounded-l-none!',
+  error: 'z-[10]! border-none! bg-[var(--text-error)]! h-[7px]! w-6! rounded-b-xs! rounded-t-none!',
 } as const
 
 /** Reusable style object for error handles positioned at bottom-right */
@@ -497,7 +496,7 @@ function WorkflowPreviewBlockInner({ id, data }: NodeProps<WorkflowPreviewBlockN
         <div className='relative z-10 flex min-w-0 flex-1 items-center'>
           <OverflowText
             label={humanizeBlockName(canvasPresentation.title)}
-            className={!enabled ? 'text-[17px] text-[var(--text-muted)]' : 'text-[17px]'}
+            className={!enabled ? 'text-[var(--text-muted)] text-md' : 'text-md'}
           />
         </div>
         {!isNoteBlock && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
index 1a93e446901..d7a478a1ddc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
@@ -2,7 +2,15 @@
 
 import type React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Button, cn, OverflowText, Tooltip } from '@sim/emcn'
+import {
+  Chip,
+  chipBorderShadowRing,
+  chipContentLabelClass,
+  chipGeometryClass,
+  cn,
+  OverflowText,
+  Tooltip,
+} from '@sim/emcn'
 import { ArrowLeft } from '@sim/emcn/icons'
 import { redactApiKeys } from '@/lib/core/security/redaction'
 import { PreviewEditor } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor'
@@ -295,23 +303,21 @@ export function Preview({
         <div className='absolute top-3 left-[12px] z-20 flex items-center gap-1.5'>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={handleGoBack}
-                className='flex h-[28px] gap-[5px] rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 shadow-xs hover-hover:bg-[var(--surface-4)]'
-              >
-                <ArrowLeft className='size-[12px]' />
-                <span className='text-caption'>Back</span>
-              </Button>
+              <Chip variant='border-shadow' leftIcon={ArrowLeft} onClick={handleGoBack}>
+                Back
+              </Chip>
             </Tooltip.Trigger>
             <Tooltip.Content side='bottom'>Go back to parent workflow</Tooltip.Content>
           </Tooltip.Root>
           {currentWorkflowName && (
-            <div className='flex h-[28px] max-w-[200px] items-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 shadow-xs'>
-              <OverflowText
-                label={currentWorkflowName}
-                className='text-[var(--text-secondary)] text-caption'
-              />
+            <div
+              className={cn(
+                chipGeometryClass,
+                chipBorderShadowRing,
+                'inline-flex max-w-[200px] bg-[var(--surface-2)]'
+              )}
+            >
+              <OverflowText label={currentWorkflowName} className={chipContentLabelClass} />
             </div>
           )}
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx
index 29426771cc7..5fdcbaccbc8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx
@@ -1,4 +1,5 @@
 import { type ButtonHTMLAttributes, forwardRef } from 'react'
+import { cn, mutedFocusRingClass } from '@sim/emcn'
 
 interface SidebarRowActionProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type'> {
@@ -12,7 +13,7 @@ export const SidebarRowAction = forwardRef<HTMLButtonElement, SidebarRowActionPr
       {...props}
       ref={ref}
       type='button'
-      className='flex size-[18px] items-center justify-center rounded-sm focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+      className={cn('flex size-[18px] items-center justify-center rounded-sm', mutedFocusRingClass)}
     />
   )
 )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 683439f271b..f11cf792768 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -1522,7 +1522,7 @@ export const Sidebar = memo(function Sidebar({ organizationHref }: SidebarProps)
                                           }
                                           onKeyDown={chatFlyoutRename.handleKeyDown}
                                           onBlur={handleChatRenameBlur}
-                                          className='min-w-0 flex-1 border-none bg-transparent text-[14px] text-[var(--text-body)] outline-hidden'
+                                          className='min-w-0 flex-1 border-none bg-transparent text-[var(--text-body)] text-sm leading-[inherit] outline-hidden'
                                         />
                                       </div>
                                     )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts
index 62f818b88bb..2d601a4c5a5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts
@@ -63,7 +63,7 @@ export function createSidebarDragGhost(label: string, icon?: SidebarDragGhostIco
     padding: 4px 10px;
     background: var(--surface-active);
     border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 8px;
+    border-radius: var(--radius-lg);
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 13px;
     color: var(--text-body);
diff --git a/apps/sim/blocks/custom/custom-block-icon.tsx b/apps/sim/blocks/custom/custom-block-icon.tsx
index e767dbadf76..c482727e8f8 100644
--- a/apps/sim/blocks/custom/custom-block-icon.tsx
+++ b/apps/sim/blocks/custom/custom-block-icon.tsx
@@ -34,7 +34,7 @@ export function makeImageIcon(url: string): BlockIcon {
       src={url}
       alt=''
       style={style}
-      className={cn('size-full rounded-[4px] object-contain', className)}
+      className={cn('size-full rounded-sm object-contain', className)}
     />
   ))
   // double-cast-allowed: an <img> renderer must satisfy the SVG-typed BlockIcon slot
diff --git a/apps/sim/components/auth/public-auth-header.module.css b/apps/sim/components/auth/public-auth-header.module.css
new file mode 100644
index 00000000000..3e69a3a58e2
--- /dev/null
+++ b/apps/sim/components/auth/public-auth-header.module.css
@@ -0,0 +1,3 @@
+.description {
+  color: var(--text-muted);
+}
diff --git a/apps/sim/components/auth/public-auth-header.tsx b/apps/sim/components/auth/public-auth-header.tsx
new file mode 100644
index 00000000000..b9611f3bed6
--- /dev/null
+++ b/apps/sim/components/auth/public-auth-header.tsx
@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+import styles from './public-auth-header.module.css'
+
+interface PublicAuthHeaderProps {
+  title: ReactNode
+  description: ReactNode
+}
+
+/** Heading shared by public chat, file-share and SSO access gates. */
+export function PublicAuthHeader({ title, description }: PublicAuthHeaderProps) {
+  return (
+    <div className='space-y-1 text-center'>
+      <h1 className='text-balance text-[var(--text-primary)] text-display leading-[110%] tracking-[-0.02em]'>
+        {title}
+      </h1>
+      <p className={`${styles.description} text-lg leading-[125%] tracking-[0.02em]`}>
+        {description}
+      </p>
+    </div>
+  )
+}
diff --git a/apps/sim/components/dashboards/dashboard-controls.tsx b/apps/sim/components/dashboards/dashboard-controls.tsx
index a30f22a95a2..c87c325de6e 100644
--- a/apps/sim/components/dashboards/dashboard-controls.tsx
+++ b/apps/sim/components/dashboards/dashboard-controls.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 import {
   Calendar,
   Chip,
-  ChipDropdown,
+  ChipSelect,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -126,13 +126,15 @@ export function DashboardControls({
           )}
         </PopoverContent>
       </Popover>
-      <ChipDropdown
+      <ChipSelect
         aria-label='Dashboard timezone'
         variant='outline'
         leftIcon={Clock}
-        className='shrink-0'
+        className='max-w-none shrink-0'
         value={zone}
-        matchTriggerWidth={false}
+        dropdownWidth='content'
+        modal={false}
+        showSelectedCheck
         options={[
           { value: 'local', label: zoneLabel },
           { value: 'utc', label: 'UTC' },
diff --git a/apps/sim/components/permissions/member-row.tsx b/apps/sim/components/permissions/member-row.tsx
index 07cb8fa251a..1dc7683b449 100644
--- a/apps/sim/components/permissions/member-row.tsx
+++ b/apps/sim/components/permissions/member-row.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Avatar, Chip, ChipDropdown, cn, OverflowText } from '@sim/emcn'
+import { Avatar, Chip, ChipSelect, cn, OverflowText } from '@sim/emcn'
 import type { MemberRole } from './member-role-options'
 import { RoleLockTooltip } from './role-lock'
 
@@ -72,7 +72,11 @@ export function MemberRow<TRole extends string = MemberRole>({
         </div>
       </div>
       <RoleLockTooltip reason={lockReason}>
-        <ChipDropdown
+        <ChipSelect
+          showSelectedCheck
+          dropdownWidth='trigger'
+          modal={false}
+          className='w-auto max-w-none'
           options={roleOptions}
           value={member.role}
           placeholder='Role'
diff --git a/apps/sim/components/ui/thinking-loader.module.css b/apps/sim/components/ui/thinking-loader.module.css
index 52703157b5e..8a884235143 100644
--- a/apps/sim/components/ui/thinking-loader.module.css
+++ b/apps/sim/components/ui/thinking-loader.module.css
@@ -85,14 +85,14 @@
    is 400, never medium. */
 .label {
   composes: shimmer from "./shimmer-text.module.css";
-  font-size: var(--tl-label-size, 14px);
-  font-weight: 400;
+  font-size: var(--tl-label-size, var(--text-sm));
+  font-weight: var(--font-weight-normal);
 }
 
 /* Static label (shimmer off): the phrase in solid body ink, no gradient sweep. */
 .labelStatic {
-  font-size: var(--tl-label-size, 14px);
-  font-weight: 400;
+  font-size: var(--tl-label-size, var(--text-sm));
+  font-weight: var(--font-weight-normal);
   color: var(--text-body);
 }
 
diff --git a/apps/sim/components/workflow/workflow-preview-action.tsx b/apps/sim/components/workflow/workflow-preview-action.tsx
new file mode 100644
index 00000000000..ce613948b1b
--- /dev/null
+++ b/apps/sim/components/workflow/workflow-preview-action.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { type ComponentProps, forwardRef } from 'react'
+import { OverlayActionButton, Tooltip } from '@sim/emcn'
+
+interface WorkflowPreviewActionProps
+  extends Omit<
+    ComponentProps<typeof OverlayActionButton>,
+    'size' | 'type' | 'className' | 'shape'
+  > {
+  'aria-label': string
+}
+
+/** Overlay corner action shared by embedded workflow previews. */
+export const WorkflowPreviewAction = forwardRef<HTMLButtonElement, WorkflowPreviewActionProps>(
+  ({ 'aria-label': label, ...props }, ref) => (
+    <Tooltip.Root preferAbove>
+      <Tooltip.Trigger asChild>
+        <OverlayActionButton
+          {...props}
+          ref={ref}
+          type='button'
+          aria-label={label}
+          size='md'
+          className='absolute right-[6px] bottom-1.5 z-10'
+        />
+      </Tooltip.Trigger>
+      <Tooltip.Content>{label}</Tooltip.Content>
+    </Tooltip.Root>
+  )
+)
+
+WorkflowPreviewAction.displayName = 'WorkflowPreviewAction'
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index 16e819069bd..d4e3d5fddeb 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -6,7 +6,6 @@ import {
   Checkbox,
   Chip,
   ChipConfirmModal,
-  ChipDropdown,
   ChipInput,
   ChipModal,
   ChipModalBody,
@@ -15,6 +14,7 @@ import {
   ChipModalFooter,
   ChipModalHeader,
   ChipModalTabs,
+  ChipSelect,
   ChipTag,
   cn,
   Info,
@@ -153,12 +153,14 @@ interface StatusFilterChipProps {
 /** The All/Enabled/Disabled narrowing control shared by the three list tabs. */
 function StatusFilterChip({ value, onChange }: StatusFilterChipProps) {
   return (
-    <ChipDropdown
+    <ChipSelect
+      showSelectedCheck
+      modal={false}
       value={value}
       onChange={(next) => onChange(next as StatusFilter)}
       options={STATUS_FILTER_OPTIONS}
-      matchTriggerWidth={false}
-      className='w-[140px] shrink-0'
+      dropdownWidth='content'
+      className='w-[140px] max-w-none shrink-0'
     />
   )
 }
@@ -185,22 +187,24 @@ function AllowlistField({ label, value, onChange, options, disabled }: Allowlist
       <span id={labelId} className='text-[var(--text-muted)] text-caption'>
         {label}
       </span>
-      <ChipDropdown
-        multiple
+      <ChipSelect
+        placeholder='None allowed'
+        modal={false}
+        multiSelect
         showAllOption={false}
         id={triggerId}
         // Both ids: `aria-labelledby` replaces the content-derived name, so
         // naming it with the label alone would drop the selected value.
         aria-labelledby={`${labelId} ${triggerId}`}
-        value={value}
-        onChange={onChange}
+        multiSelectValues={value}
+        onMultiSelectChange={onChange}
         options={options}
         disabled={disabled}
         // An empty allow-list denies every option, so the multi-select's default
         // empty label — 'All' — states the opposite of what the server enforces.
-        allLabel='None allowed'
-        matchTriggerWidth={false}
-        className='w-[200px]'
+        allOptionLabel='None allowed'
+        dropdownWidth='content'
+        className='w-[200px] max-w-none'
       />
     </div>
   )
diff --git a/apps/sim/ee/access-control/components/workspace-select.tsx b/apps/sim/ee/access-control/components/workspace-select.tsx
index 0b5c758c32a..ea1437e5d25 100644
--- a/apps/sim/ee/access-control/components/workspace-select.tsx
+++ b/apps/sim/ee/access-control/components/workspace-select.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import { ChipDropdown, type ChipDropdownProps } from '@sim/emcn'
+import { ChipSelect, type ChipSelectProps, cn } from '@sim/emcn'
 
 interface WorkspaceSelectProps
   extends Pick<
-    ChipDropdownProps,
+    ChipSelectProps,
     'id' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-required' | 'aria-invalid'
   > {
   workspaceIds: string[]
@@ -38,18 +38,26 @@ export function WorkspaceSelect({
   ...fieldAria
 }: WorkspaceSelectProps) {
   return (
-    <ChipDropdown
+    <ChipSelect
+      placeholder={
+        isLoading
+          ? 'Loading workspaces…'
+          : allowAllWorkspaces
+            ? 'All workspaces'
+            : 'Select workspaces…'
+      }
+      modal={false}
       {...fieldAria}
-      multiple
+      multiSelect
       searchable
       align={fullWidth ? 'start' : 'end'}
-      matchTriggerWidth={fullWidth}
+      dropdownWidth={fullWidth ? 'trigger' : 'content'}
       options={options}
-      value={workspaceIds}
-      onChange={onChange}
+      multiSelectValues={workspaceIds}
+      onMultiSelectChange={onChange}
       disabled={disabled || isLoading}
       showAllOption={allowAllWorkspaces}
-      allLabel={
+      allOptionLabel={
         isLoading
           ? 'Loading workspaces…'
           : allowAllWorkspaces
@@ -58,7 +66,7 @@ export function WorkspaceSelect({
       }
       searchPlaceholder='Search workspaces…'
       fullWidth={fullWidth}
-      className={className}
+      className={cn(fullWidth ? undefined : 'w-auto max-w-none', className)}
     />
   )
 }
diff --git a/apps/sim/ee/access-requests/components/organization-access-requests.tsx b/apps/sim/ee/access-requests/components/organization-access-requests.tsx
index 40ed426fa99..ba18a0b3922 100644
--- a/apps/sim/ee/access-requests/components/organization-access-requests.tsx
+++ b/apps/sim/ee/access-requests/components/organization-access-requests.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Chip, ChipDropdown, ChipSwitch, ChipTag, toast } from '@sim/emcn'
+import { Chip, ChipSelect, ChipSwitch, ChipTag, toast } from '@sim/emcn'
 import { useQueryStates } from 'nuqs'
 import type { SettingsAction } from '@/components/settings/settings-header'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
@@ -104,7 +104,11 @@ export function OrganizationAccessRequests({
       <SettingsSection
         label={requestCount === undefined ? requestLabel : `${requestLabel} (${requestCount})`}
         action={
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
+            className='w-auto max-w-none'
             value={params['request-status']}
             onChange={(value) =>
               void setParams({
diff --git a/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.test.tsx b/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.test.tsx
index d944ba82b74..25aee4690a5 100644
--- a/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.test.tsx
+++ b/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.test.tsx
@@ -57,7 +57,7 @@ describe('workspace integration grant editor', () => {
     return result
   }
   function integrationOption(label: string) {
-    const result = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')].find(
+    const result = [...document.querySelectorAll<HTMLElement>('[role="menuitemcheckbox"]')].find(
       (element) => element.textContent === label
     )
     if (!result) throw new Error(`Missing ${label} option`)
@@ -71,8 +71,9 @@ describe('workspace integration grant editor', () => {
     )
   }
   async function closeIntegrations() {
+    const trigger = document.querySelector<HTMLButtonElement>('[aria-label="Integrations"]')
     await act(async () =>
-      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      trigger?.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }))
     )
   }
   async function click(label: string) {
@@ -107,7 +108,9 @@ describe('workspace integration grant editor', () => {
   it('narrows broad access when a specific integration is selected', async () => {
     await render()
     await openIntegrations()
-    expect(document.querySelector('[role="menuitem"]')?.textContent).toBe('All integrations')
+    expect(document.querySelector('[role="menuitemcheckbox"]')?.textContent).toBe(
+      'All integrations'
+    )
     await act(async () => integrationOption('Gmail').click())
     await closeIntegrations()
     await click('Save access')
diff --git a/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.tsx b/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.tsx
index fdc2eb01f69..83791ac491e 100644
--- a/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.tsx
+++ b/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from 'react'
 import {
-  ChipDropdown,
   ChipModal,
   ChipModalBody,
   ChipModalError,
@@ -108,14 +107,18 @@ export function OrganizationWorkspaceGrantModal(props: OrganizationWorkspaceGran
           hint={access.mode === 'all' ? 'Includes integrations added in the future.' : undefined}
         >
           {(aria) => (
-            <ChipDropdown
-              multiple
+            <ChipSelect
+              placeholder='Select integrations'
+              modal={false}
+              multiSelect
               options={[
                 { value: ALL_INTEGRATIONS, label: 'All integrations' },
                 ...credentialTypes.map((type) => ({ value: type.id, label: type.label })),
               ]}
-              value={access.mode === 'all' ? [ALL_INTEGRATIONS] : access.credentialTypes}
-              onChange={(values) => {
+              multiSelectValues={
+                access.mode === 'all' ? [ALL_INTEGRATIONS] : access.credentialTypes
+              }
+              onMultiSelectChange={(values) => {
                 if (access.mode !== 'all' && values.includes(ALL_INTEGRATIONS)) {
                   setAccess({ mode: 'all' })
                   return
@@ -125,14 +128,14 @@ export function OrganizationWorkspaceGrantModal(props: OrganizationWorkspaceGran
                   throw new Error('Unknown credential type')
                 setAccess({ mode: 'selected', credentialTypes: selected })
               }}
-              allLabel='Select integrations'
+              allOptionLabel='Select integrations'
               aria-label='Integrations'
               showAllOption={false}
               searchable
               searchPlaceholder='Search integrations'
               disabled={disabled}
               fullWidth
-              matchTriggerWidth
+              dropdownWidth='trigger'
               align='start'
               {...aria}
             />
diff --git a/apps/sim/ee/credential-groups/components/slack-managed-users-modal.tsx b/apps/sim/ee/credential-groups/components/slack-managed-users-modal.tsx
index 5f0909d6d5a..9d0460805da 100644
--- a/apps/sim/ee/credential-groups/components/slack-managed-users-modal.tsx
+++ b/apps/sim/ee/credential-groups/components/slack-managed-users-modal.tsx
@@ -514,7 +514,7 @@ export function SlackManagedUsersModal({
             )
           ) : isLoading ? (
             <div className='flex flex-col gap-[9px] px-2'>
-              <Skeleton className='h-4 w-24 rounded' />
+              <Skeleton className='h-4 w-24 rounded-sm' />
               <Skeleton className='h-[30px] w-full rounded-lg' />
             </div>
           ) : noBots ? (
diff --git a/apps/sim/ee/custom-blocks/components/custom-block-detail.tsx b/apps/sim/ee/custom-blocks/components/custom-block-detail.tsx
index 3b79b88f587..57278ed22c0 100644
--- a/apps/sim/ee/custom-blocks/components/custom-block-detail.tsx
+++ b/apps/sim/ee/custom-blocks/components/custom-block-detail.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react'
 import {
   Badge,
   Button,
+  Chip,
   ChipCombobox,
   ChipConfirmModal,
   ChipInput,
@@ -533,26 +534,23 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
                   ) : null}
                 </UploadPreviewButton>
               </DropZone>
-              <div className='flex gap-2'>
-                <Button
+              <div className='flex items-center gap-2'>
+                <Chip
                   type='button'
                   variant='outline'
-                  size='sm'
                   onClick={iconUpload.handleThumbnailClick}
                   disabled={iconUpload.isUploading || !canManageBlock}
-                  className='text-small'
                 >
                   {iconUrl ? 'Change' : 'Upload'}
-                </Button>
+                </Chip>
                 {iconUrl && (
                   <Button
                     type='button'
                     variant='ghost'
-                    size='sm'
+                    size='icon'
                     onClick={iconUpload.handleRemove}
                     aria-label='Remove icon'
                     disabled={iconUpload.isUploading || !canManageBlock}
-                    className='text-[var(--text-muted)] text-small hover:text-[var(--text-primary)]'
                   >
                     <X className='size-[14px]' />
                   </Button>
diff --git a/apps/sim/ee/data-retention/components/data-retention-settings.tsx b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
index f6ce7420e81..d106c7a7226 100644
--- a/apps/sim/ee/data-retention/components/data-retention-settings.tsx
+++ b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
@@ -5,7 +5,6 @@ import {
   Checkbox,
   Chip,
   ChipConfirmModal,
-  ChipDropdown,
   ChipInput,
   ChipSelect,
   ChipSwitch,
@@ -531,14 +530,17 @@ function PolicyDetail({
                   ? `Overrides ${draft.workspaceIds.length} workspace${draft.workspaceIds.length === 1 ? '' : 's'}`
                   : 'Select the workspaces this override applies to'}
               </span>
-              <ChipDropdown
-                multiple
+              <ChipSelect
+                placeholder='Select workspaces'
+                dropdownWidth='trigger'
+                modal={false}
+                multiSelect
                 showAllOption={false}
-                allLabel='Select workspaces'
-                value={draft.workspaceIds}
-                onChange={(workspaceIds) => onChange({ ...draft, workspaceIds })}
+                allOptionLabel='Select workspaces'
+                multiSelectValues={draft.workspaceIds}
+                onMultiSelectChange={(workspaceIds) => onChange({ ...draft, workspaceIds })}
                 options={workspaceOptions}
-                className='shrink-0'
+                className='w-auto max-w-none shrink-0'
               />
             </div>
           </SettingsSection>
diff --git a/apps/sim/ee/organization-usage/components/activity-panel.tsx b/apps/sim/ee/organization-usage/components/activity-panel.tsx
index d3aff2fca49..7d66c260aa0 100644
--- a/apps/sim/ee/organization-usage/components/activity-panel.tsx
+++ b/apps/sim/ee/organization-usage/components/activity-panel.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Chip, ChipDropdown } from '@sim/emcn'
+import { Chip, ChipSelect } from '@sim/emcn'
 import { ArrowLeft } from '@sim/emcn/icons'
 import { isApiClientError } from '@/lib/api/client/errors'
 import {
@@ -90,9 +90,11 @@ export function ActivityPanel({ organizationId }: ActivityPanelProps) {
       <SettingsSection label='Breakdown'>
         <div className='flex flex-col gap-3'>
           <div className='flex flex-wrap items-center justify-between gap-2'>
-            <ChipDropdown
-              matchTriggerWidth={false}
-              className='max-w-full'
+            <ChipSelect
+              showSelectedCheck
+              modal={false}
+              dropdownWidth='content'
+              className='w-auto max-w-full'
               options={DIMENSIONS}
               value={activityDimension}
               onChange={(value) =>
@@ -101,9 +103,11 @@ export function ActivityPanel({ organizationId }: ActivityPanelProps) {
               aria-label='Group activity by'
             />
             {activityDimension !== 'member' && (
-              <ChipDropdown
-                matchTriggerWidth={false}
-                className='max-w-full'
+              <ChipSelect
+                showSelectedCheck
+                modal={false}
+                dropdownWidth='content'
+                className='w-auto max-w-full'
                 options={SORTS}
                 value={sort}
                 onChange={(value) =>
diff --git a/apps/sim/ee/sso/components/sso-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx
index 0af36c8de01..0b8deb58c9e 100644
--- a/apps/sim/ee/sso/components/sso-auth.tsx
+++ b/apps/sim/ee/sso/components/sso-auth.tsx
@@ -1,9 +1,10 @@
 'use client'
 
 import { type KeyboardEvent, useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
+import { ChipInput, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { ApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { chatSSOContract } from '@/lib/api/contracts/chats'
@@ -98,14 +99,10 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
     <div className='flex flex-1 items-center justify-center px-4 py-16'>
       <div className='w-full max-w-[410px]'>
         <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              SSO Authentication
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              This chat requires SSO authentication
-            </p>
-          </div>
+          <PublicAuthHeader
+            title='SSO Authentication'
+            description='This chat requires SSO authentication'
+          />
 
           <form
             onSubmit={(e) => {
@@ -118,7 +115,7 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
               <div className='flex items-center justify-between'>
                 <Label htmlFor='email'>Work Email</Label>
               </div>
-              <Input
+              <ChipInput
                 id='email'
                 name='email'
                 required
@@ -130,11 +127,8 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
                 value={email}
                 onChange={handleEmailChange}
                 onKeyDown={handleKeyDown}
-                className={cn(
-                  showEmailValidationError &&
-                    emailErrors.length > 0 &&
-                    'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                )}
+                size='lg'
+                error={showEmailValidationError && emailErrors.length > 0}
               />
               {showEmailValidationError && emailErrors.length > 0 && (
                 <div className='mt-1 space-y-1 text-[var(--text-error)] text-caption'>
diff --git a/apps/sim/ee/sso/components/sso-form.test.tsx b/apps/sim/ee/sso/components/sso-form.test.tsx
index 54e7e7537d3..2987a145125 100644
--- a/apps/sim/ee/sso/components/sso-form.test.tsx
+++ b/apps/sim/ee/sso/components/sso-form.test.tsx
@@ -1,7 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
-import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react'
+import type { InputHTMLAttributes, ReactNode } from 'react'
 import { apiClientRequestMock } from '@sim/testing/mocks/api-client-request.mock'
 import { authClientMock } from '@sim/testing/mocks/auth-client.mock'
 import { envMockFns, resetEnvMock } from '@sim/testing/mocks/env.mock'
@@ -20,12 +20,16 @@ vi.mock('next/link', () => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
-  Button: ({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => (
-    <button type='button' {...props}>
-      {children}
-    </button>
+  ChipLink: ({ href, children }: { href: string; children?: ReactNode }) => (
+    <a href={href}>{children}</a>
+  ),
+  ChipInput: ({
+    error: _error,
+    size: _size,
+    ...props
+  }: Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & { error?: boolean; size?: string }) => (
+    <input {...props} />
   ),
-  Input: (props: InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
   Label: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
   cn: (...values: unknown[]) => values.filter(Boolean).join(' '),
 }))
diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx
index 450865afc1b..369de48c16d 100644
--- a/apps/sim/ee/sso/components/sso-form.tsx
+++ b/apps/sim/ee/sso/components/sso-form.tsx
@@ -1,10 +1,11 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Button, cn, Input, Label } from '@sim/emcn'
+import { ChipInput, ChipLink, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { resolveSsoProviderContract } from '@/lib/api/contracts/auth'
@@ -186,22 +187,7 @@ function SSOFormContent({
 
   return (
     <>
-      <div className='space-y-1 text-center'>
-        <h1
-          className={
-            'text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'
-          }
-        >
-          Sign in with SSO
-        </h1>
-        <p
-          className={
-            'text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'
-          }
-        >
-          Enter your work email to continue
-        </p>
-      </div>
+      <PublicAuthHeader title='Sign in with SSO' description='Enter your work email to continue' />
 
       <form onSubmit={onSubmit} className={'mt-8 space-y-8'}>
         {formError && (
@@ -215,7 +201,7 @@ function SSOFormContent({
             <div className='flex items-center justify-between'>
               <Label htmlFor='email'>Work email</Label>
             </div>
-            <Input
+            <ChipInput
               id='email'
               name='email'
               placeholder='Enter your work email'
@@ -227,9 +213,8 @@ function SSOFormContent({
               onChange={handleEmailChange}
               aria-invalid={hasEmailError || undefined}
               aria-describedby={hasEmailError ? 'sso-email-errors' : undefined}
-              className={cn(
-                hasEmailError && 'border-[var(--text-error)] focus:border-[var(--text-error)]'
-              )}
+              size='lg'
+              error={Boolean(hasEmailError)}
             />
             {hasEmailError && (
               <div
@@ -252,7 +237,7 @@ function SSOFormContent({
 
       {emailEnabled && (
         <>
-          <div className='relative my-6 font-light'>
+          <div className='relative my-6 font-normal'>
             <div className='absolute inset-0 flex items-center'>
               <div className='w-full border-[var(--border)] border-t' />
             </div>
@@ -262,19 +247,21 @@ function SSOFormContent({
           </div>
 
           <div className='space-y-3'>
-            <Link
+            <ChipLink
               href={`/login${callbackUrl ? `?callbackUrl=${encodeURIComponent(callbackUrl)}` : ''}`}
+              variant='outline'
+              fullWidth
+              size='lg'
+              align='center'
             >
-              <Button variant='outline' className='w-full rounded-[10px]' type='button'>
-                Sign in with email
-              </Button>
-            </Link>
+              Sign in with email
+            </ChipLink>
           </div>
         </>
       )}
 
       {emailEnabled && !registrationDisabled && (
-        <div className='pt-6 text-center font-light text-base'>
+        <div className='pt-6 text-center font-normal text-base'>
           <span className='font-normal'>Don't have an account? </span>
           <Link
             href={`/signup${callbackUrl ? `?callbackUrl=${encodeURIComponent(callbackUrl)}` : ''}`}
diff --git a/packages/emcn/src/components/badge/badge.test.tsx b/packages/emcn/src/components/badge/badge.test.tsx
new file mode 100644
index 00000000000..a5acc1b33af
--- /dev/null
+++ b/packages/emcn/src/components/badge/badge.test.tsx
@@ -0,0 +1,30 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Badge } from './badge'
+
+function Icon({ className }: { className?: string }) {
+  return <svg className={className} aria-hidden />
+}
+
+describe('Badge', () => {
+  it.each([
+    ['sm', 'text-xs', 'size-[5px]', 'size-2.5'],
+    ['md', 'text-caption', 'size-1.5', 'size-3'],
+  ] as const)('keeps the %s label, dot and icon proportions', (size, text, dot, icon) => {
+    const status = renderToStaticMarkup(
+      <Badge size={size} variant='green' dot>
+        Live
+      </Badge>
+    )
+    expect(status).toContain(text)
+    expect(status).toContain(dot)
+    expect(status).toContain('Live')
+    expect(
+      renderToStaticMarkup(
+        <Badge size={size} icon={Icon}>
+          Download
+        </Badge>
+      )
+    ).toContain(icon)
+  })
+})
diff --git a/packages/emcn/src/components/badge/badge.tsx b/packages/emcn/src/components/badge/badge.tsx
index cb0d1c3cd7f..b580a5aed83 100644
--- a/packages/emcn/src/components/badge/badge.tsx
+++ b/packages/emcn/src/components/badge/badge.tsx
@@ -21,7 +21,6 @@ const badgeVariants = cva('inline-flex items-center focus:outline-hidden transit
       purple: `${STATUS_BASE} bg-[var(--badge-purple-bg)] text-[var(--badge-purple-text)]`,
       orange: `${STATUS_BASE} bg-[var(--badge-orange-bg)] text-[var(--badge-orange-text)]`,
       amber: `${STATUS_BASE} bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]`,
-      teal: `${STATUS_BASE} bg-[var(--badge-teal-bg)] text-[var(--badge-teal-text)]`,
       cyan: `${STATUS_BASE} bg-[var(--badge-cyan-bg)] text-[var(--badge-cyan-text)]`,
       pink: `${STATUS_BASE} bg-[var(--badge-pink-bg)] text-[var(--badge-pink-text)]`,
       'gray-secondary': `${STATUS_BASE} bg-[var(--surface-4)] text-[var(--text-secondary)]`,
@@ -29,7 +28,6 @@ const badgeVariants = cva('inline-flex items-center focus:outline-hidden transit
     size: {
       sm: 'px-[7px] py-[1px] text-xs',
       md: 'px-[9px] py-0.5 text-caption',
-      lg: 'px-[9px] py-[2.25px] text-caption',
     },
   },
   defaultVariants: {
@@ -48,7 +46,6 @@ const STATUS_VARIANTS = [
   'purple',
   'orange',
   'amber',
-  'teal',
   'cyan',
   'pink',
   'gray-secondary',
@@ -58,14 +55,12 @@ const STATUS_VARIANTS = [
 const DOT_SIZES: Record<string, string> = {
   sm: 'size-[5px]',
   md: 'size-1.5',
-  lg: 'size-1.5',
 }
 
 /** Icon sizes corresponding to badge size variants */
 const ICON_SIZES: Record<string, string> = {
   sm: 'size-2.5',
   md: 'size-3',
-  lg: 'size-3',
 }
 
 export interface BadgeProps
@@ -84,7 +79,7 @@ export interface BadgeProps
  * Supports two categories of variants:
  * - **Bordered**: `default`, `outline`, `type` - traditional badges with borders
  * - **Status colors**: `green`, `red`, `gray`, `blue`, `blue-secondary`, `purple`,
- *   `orange`, `amber`, `teal`, `cyan`, `pink`, `gray-secondary` - borderless colored badges
+ *   `orange`, `amber`, `cyan`, `pink`, `gray-secondary` - borderless colored badges
  *
  * Status color variants can display a dot indicator via the `dot` prop.
  * All variants support an optional `icon` prop for leading icons.
diff --git a/packages/emcn/src/components/bulk-action-bar/bulk-action-bar.tsx b/packages/emcn/src/components/bulk-action-bar/bulk-action-bar.tsx
new file mode 100644
index 00000000000..2b90c8cfb03
--- /dev/null
+++ b/packages/emcn/src/components/bulk-action-bar/bulk-action-bar.tsx
@@ -0,0 +1,31 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../../lib/cn'
+
+export interface BulkActionBarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Selection summary, including optional inline selection actions or limit warnings. */
+  label: ReactNode
+  children: ReactNode
+}
+
+/**
+ * Shared selection-action surface. Callers own visibility, positioning, animation
+ * and commands; compose actions with BulkActionButton.
+ * @example <BulkActionBar label='2 selected'><BulkActionButton aria-label='Delete'><Trash /></BulkActionButton></BulkActionBar>
+ */
+export const BulkActionBar = forwardRef<HTMLDivElement, BulkActionBarProps>(
+  ({ label, children, className, ...props }, ref) => (
+    <div
+      {...props}
+      ref={ref}
+      className={cn(
+        'flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5',
+        className
+      )}
+    >
+      <span className='px-1 text-[var(--text-secondary)] text-small'>{label}</span>
+      <div className='flex items-center gap-[5px]'>{children}</div>
+    </div>
+  )
+)
+
+BulkActionBar.displayName = 'BulkActionBar'
diff --git a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
index b24e402e274..02d8924e96b 100644
--- a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
+++ b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
@@ -1,32 +1,15 @@
 import { forwardRef } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
 import { Button, type ButtonProps } from '../button/button'
 import { chipFilledFillTokens, chipRadiusClass } from '../chip/chip-chrome'
 
 /** The shared 28px geometry and brand-hover treatment of selection action bars. */
-export const bulkActionButtonVariants = cva(
-  `${chipRadiusClass} size-[28px] p-0 hover-hover:bg-[var(--brand-secondary)] hover-hover:text-[var(--text-inverse)]!`,
-  {
-    variants: {
-      surface: {
-        adaptive: chipFilledFillTokens,
-        uniform: 'bg-[var(--surface-5)]',
-      },
-    },
-    defaultVariants: { surface: 'adaptive' },
-  }
-)
+const BULK_ACTION_BUTTON_CLASS = `${chipRadiusClass} ${chipFilledFillTokens} size-[28px] p-0 hover-hover:bg-[var(--brand-secondary)] hover-hover:text-[var(--text-inverse)]!`
 
-export interface BulkActionButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
+export interface BulkActionButtonProps
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize' | 'shape'> {
   /** Accessible name for the icon action; tooltip content is supplied separately. */
   'aria-label': string
-  /**
-   * `adaptive` follows the filled chip surface: surface-5 in light mode and surface-4 in dark.
-   * `uniform` retains surface-5 in both themes, as used by table-cell action bars.
-   * @default 'adaptive'
-   */
-  surface?: NonNullable<VariantProps<typeof bulkActionButtonVariants>['surface']>
 }
 
 /**
@@ -38,13 +21,13 @@ export interface BulkActionButtonProps extends Omit<ButtonProps, 'variant' | 'si
  * @example <BulkActionButton aria-label='Delete' onClick={onDelete}><Trash className='size-[12px]' /></BulkActionButton>
  */
 export const BulkActionButton = forwardRef<HTMLButtonElement, BulkActionButtonProps>(
-  ({ surface, className, ...props }, ref) => (
+  ({ className, ...props }, ref) => (
     <Button
       {...props}
       ref={ref}
       variant='ghost'
       size='md'
-      className={cn(bulkActionButtonVariants({ surface }), className)}
+      className={cn(BULK_ACTION_BUTTON_CLASS, className)}
     />
   )
 )
diff --git a/packages/emcn/src/components/button/button.test.tsx b/packages/emcn/src/components/button/button.test.tsx
new file mode 100644
index 00000000000..25080bdc468
--- /dev/null
+++ b/packages/emcn/src/components/button/button.test.tsx
@@ -0,0 +1,137 @@
+/** @vitest-environment jsdom */
+/** biome-ignore assist/source/organizeImports: Preserve the documented core/external/UI import order. */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Button } from '@sim/emcn'
+
+function normalizeClasses(markup: string) {
+  return markup.replace(
+    /class="([^"]+)"/g,
+    (_, classes: string) => `class="${classes.split(/\s+/).sort().join(' ')}"`
+  )
+}
+
+/** The three existing Button treatments used by compact product actions. */
+const TREATMENTS = [
+  { size: undefined, variant: 'ghost' },
+  { size: 'sm', variant: 'ghost-secondary' },
+  { size: 'icon', variant: 'ghost' },
+] as const
+
+describe('Button iconSize', () => {
+  for (const [iconSize, previousClass] of [
+    ['compact', 'size-6 p-0'],
+    ['compact-fixed', 'size-[24px] p-0'],
+    ['regular', 'size-7 p-0'],
+    ['roomy', 'size-8 p-0'],
+    ['touch', 'size-10 p-0'],
+  ] as const) {
+    it.each(TREATMENTS)(
+      `preserves the ${iconSize} treatment with size=$size and variant=$variant`,
+      (treatment) => {
+        const icon = <svg className='size-[14px]' strokeWidth={1.55} aria-hidden='true' />
+        const before = renderToStaticMarkup(
+          <Button
+            {...treatment}
+            type='button'
+            aria-label='Previous match'
+            className={`${previousClass} shrink-0`}
+          >
+            {icon}
+          </Button>
+        )
+        const after = renderToStaticMarkup(
+          <Button
+            {...treatment}
+            type='button'
+            aria-label='Previous match'
+            iconSize={iconSize}
+            className='shrink-0'
+          >
+            {icon}
+          </Button>
+        )
+        expect(normalizeClasses(after)).toBe(normalizeClasses(before))
+      }
+    )
+  }
+
+  it('allows explicit padding and consumer width to take precedence', () => {
+    const markup = renderToStaticMarkup(
+      <Button iconSize='compact-fixed' iconPadding='sm' className='w-[40px]!' aria-label='Run' />
+    )
+    expect(markup).toContain('size-[24px]')
+    expect(markup).toContain('w-[40px]!')
+    expect(markup).toContain('p-1')
+    expect(markup).not.toContain('p-0')
+    expect(markup).not.toContain('iconSize')
+    expect(markup).not.toContain('iconPadding')
+  })
+})
+
+describe('Button shared action geometry', () => {
+  it('keeps the existing zero-padding workflow action geometry', () => {
+    const before = renderToStaticMarkup(
+      <Button variant='ghost-destructive' className='h-auto p-0' aria-label='Delete condition' />
+    )
+    const after = renderToStaticMarkup(
+      <Button variant='ghost-destructive' size='bare' aria-label='Delete condition' />
+    )
+    expect(normalizeClasses(after)).toBe(normalizeClasses(before))
+  })
+
+  it('composes responsive geometry, explicit padding and round shape without changing icon treatment', () => {
+    const markup = renderToStaticMarkup(
+      <Button
+        variant='ghost'
+        size='icon'
+        iconSize={{ base: 'touch', sm: 'regular' }}
+        iconPadding='sm'
+        shape='round'
+        aria-label='Edit'
+      >
+        <svg strokeWidth={1.55} />
+      </Button>
+    )
+    expect(markup).toContain('size-10')
+    expect(markup).toContain('sm:size-7')
+    expect(markup).not.toContain('size-[20px]')
+    expect(markup).toContain('p-1')
+    expect(markup).not.toContain('p-0')
+    expect(markup).toContain('rounded-full')
+    expect(markup).not.toContain('rounded-sm')
+    expect(markup).toContain('[stroke-width:1.25]')
+    expect(markup).toContain('text-[var(--text-icon-muted)]')
+    expect(markup).not.toMatch(/(?:iconSize|iconPadding|shape)=/)
+  })
+
+  it('retains an inline caption size and supports a base-only responsive value', () => {
+    const inline = renderToStaticMarkup(<Button size='inline'>Generate</Button>)
+    expect(inline).toContain('h-[20px]')
+    expect(inline).toContain('text-caption')
+    expect(inline).toContain('px-1.5 py-0')
+    const baseOnly = renderToStaticMarkup(<Button iconSize={{ base: 'roomy' }} aria-label='Run' />)
+    expect(baseOnly).toContain('size-8')
+    expect(baseOnly).not.toContain('sm:size')
+  })
+
+  it('offers the shared keyboard ring without changing the default', () => {
+    const before = renderToStaticMarkup(
+      <Button
+        variant='ghost'
+        size='sm'
+        className='focus-visible:ring-2 focus-visible:ring-[var(--text-icon)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+      >
+        Open
+      </Button>
+    )
+    const after = renderToStaticMarkup(
+      <Button variant='ghost' size='sm' focusRing='muted'>
+        Open
+      </Button>
+    )
+    expect(normalizeClasses(after)).toBe(normalizeClasses(before))
+    expect(after).not.toContain('focusRing=')
+    expect(renderToStaticMarkup(<Button>Open</Button>)).not.toContain('focus-visible:ring-2')
+  })
+})
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index 4ad21bc4a37..785127523dc 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -1,6 +1,7 @@
 import { type ButtonHTMLAttributes, forwardRef } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
+import { mutedFocusRingClass } from '../../lib/focus-ring'
 
 /**
  * `size='icon'` is the square 20px icon-only button — a chip field's trailing
@@ -37,9 +38,19 @@ const buttonVariants = cva(
         destructive:
           'bg-[var(--text-error)] text-white hover-hover:text-white hover-hover:brightness-106',
         secondary: 'bg-[var(--brand-secondary)] text-[var(--text-primary)]',
-        tertiary:
-          'bg-[var(--brand-accent)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--brand-accent-hover)] dark:bg-[var(--brand-accent)] dark:hover-hover:bg-[var(--brand-accent-hover)] dark:text-[var(--text-inverse)] dark:hover-hover:text-[var(--text-inverse)]',
         ghost: 'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]',
+        'ghost-hover':
+          'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-hover)]',
+        /**
+         * Destructive action without a filled surface; stays red on hover.
+         * @example <Button variant='ghost-destructive'>Delete</Button>
+         */
+        'ghost-destructive': 'text-[var(--text-error)] hover-hover:text-[var(--text-error)]',
+        /**
+         * Muted destructive action that turns red on hover.
+         * @example <Button variant='ghost-destructive-muted'>Remove</Button>
+         */
+        'ghost-destructive-muted': 'text-[var(--text-muted)] hover-hover:text-[var(--text-error)]',
         subtle:
           'text-[var(--text-body)] hover-hover:text-[var(--text-body)] hover-hover:bg-[var(--surface-4)]',
         'ghost-secondary': 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]',
@@ -49,6 +60,21 @@ const buttonVariants = cva(
         sm: 'px-1.5 py-1 text-[length:11px]',
         md: 'px-2 py-1.5 text-[length:12px]',
         icon: 'size-[20px] rounded-sm p-0 [&_svg]:[stroke-width:1.25]',
+        inline: 'h-[20px] px-1.5 py-0 text-caption',
+        bare: 'h-auto p-0 text-[length:12px]',
+      },
+      iconSize: {
+        compact: 'size-6 p-0',
+        'compact-fixed': 'size-[24px] p-0',
+        regular: 'size-7 p-0',
+        roomy: 'size-8 p-0',
+        touch: 'size-10 p-0',
+      },
+      shape: {
+        round: 'rounded-full',
+      },
+      focusRing: {
+        muted: mutedFocusRingClass,
       },
       iconPadding: {
         sm: 'p-1',
@@ -64,6 +90,7 @@ const buttonVariants = cva(
        */
       { size: 'icon', variant: 'quiet', className: 'text-[var(--text-icon-muted)]' },
       { size: 'icon', variant: 'ghost', className: 'text-[var(--text-icon-muted)]' },
+      { size: 'icon', variant: 'ghost-hover', className: 'text-[var(--text-icon-muted)]' },
     ],
     defaultVariants: {
       variant: 'default',
@@ -72,9 +99,31 @@ const buttonVariants = cva(
   }
 )
 
+type ButtonIconSize = NonNullable<VariantProps<typeof buttonVariants>['iconSize']>
+
+const responsiveIconSizes = {
+  compact: 'sm:size-6',
+  'compact-fixed': 'sm:size-[24px]',
+  regular: 'sm:size-7',
+  roomy: 'sm:size-8',
+  touch: 'sm:size-10',
+} as const satisfies Record<ButtonIconSize, string>
+
 export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+    Omit<VariantProps<typeof buttonVariants>, 'iconSize'> {
+  /**
+   * Square icon-action geometry without changing the selected size's typography,
+   * corner radius, icon stroke or color. `compact` follows the spacing scale
+   * (24px at the default root font size); `compact-fixed` stays at 24px.
+   * Regular, roomy and touch follow the spacing scale (28px, 32px and 40px
+   * at the default root font size). A responsive
+   * value changes geometry at the standard sm breakpoint. All remove padding;
+   * explicit iconPadding or className can override it.
+   * Omit to retain the selected size's geometry.
+   * @example <Button variant='ghost' iconSize='compact' aria-label='Remove'><X /></Button>
+   */
+  iconSize?: ButtonIconSize | { base: ButtonIconSize; sm?: ButtonIconSize } | null
   /**
    * Symmetric padding for icon actions whose content or layout determines their size.
    * Preserves the selected size's typography, corner radius and icon stroke.
@@ -85,11 +134,24 @@ export interface ButtonProps
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, iconPadding, ...props }, ref) => {
+  ({ className, variant, size, iconSize, iconPadding, shape, focusRing, ...props }, ref) => {
+    const baseIconSize = typeof iconSize === 'object' ? iconSize?.base : iconSize
+    const smIconSize = typeof iconSize === 'object' ? iconSize?.sm : undefined
     return (
       <button
         ref={ref}
-        className={cn(buttonVariants({ variant, size, iconPadding }), className)}
+        className={cn(
+          buttonVariants({
+            variant,
+            size,
+            iconSize: baseIconSize,
+            iconPadding,
+            shape,
+            focusRing,
+          }),
+          smIconSize && responsiveIconSizes[smIconSize],
+          className
+        )}
         {...props}
       />
     )
diff --git a/packages/emcn/src/components/chip-button-group/chip-button-group.tsx b/packages/emcn/src/components/chip-button-group/chip-button-group.tsx
index 5b779537ff6..7598ec01a42 100644
--- a/packages/emcn/src/components/chip-button-group/chip-button-group.tsx
+++ b/packages/emcn/src/components/chip-button-group/chip-button-group.tsx
@@ -8,12 +8,8 @@ import { cn } from '../../lib/cn'
 import { segmentedControlItemVariants, segmentedControlVariants } from '../chip/segmented-control'
 import { scrollFadeAttributes, scrollFadeXClass } from '../scroll-fade/scroll-fade'
 
-/** Shared chip chrome; preserves the compound control's existing gap default. */
-const chipButtonGroupVariants = ({
-  gap = 'sm',
-  ...props
-}: Parameters<typeof segmentedControlVariants>[0] = {}) =>
-  segmentedControlVariants({ gap, ...props })
+/** Shared zero-gap chip chrome for both segmented APIs. */
+const chipButtonGroupVariants = segmentedControlVariants
 
 interface ChipButtonGroupContextValue {
   value: string | undefined
@@ -58,7 +54,6 @@ export interface ChipButtonGroupProps
  */
 function ChipButtonGroup({
   className,
-  gap,
   size = 'default',
   value,
   onValueChange,
@@ -78,7 +73,7 @@ function ChipButtonGroup({
       >
         <div
           ref={groupRef}
-          className={cn(scrollFadeXClass, chipButtonGroupVariants({ gap, size }), className)}
+          className={cn(scrollFadeXClass, chipButtonGroupVariants({ size }), className)}
           {...scrollFadeAttributes(edges)}
           {...props}
         >
diff --git a/packages/emcn/src/components/chip-combobox/chip-combobox.tsx b/packages/emcn/src/components/chip-combobox/chip-combobox.tsx
index 9650a9892f7..52e548d1931 100644
--- a/packages/emcn/src/components/chip-combobox/chip-combobox.tsx
+++ b/packages/emcn/src/components/chip-combobox/chip-combobox.tsx
@@ -1,12 +1,13 @@
 'use client'
 
 import { cn } from '../../lib/cn'
+import { chipFilledFillTokens, chipHeightClass, chipRadiusClass } from '../chip/chip-chrome'
 import { Combobox, type ComboboxProps } from '../combobox/combobox'
 
 /**
  * Chip-styled {@link Combobox}. A thin wrapper that skins the trigger to match
  * the 30px chip pill (`rounded-lg`, chip surface tokens) shared by
- * `ChipDropdown`, `ChipModal`, and `ChipInput`.
+ * `ChipSelect`, `ChipModal`, and `ChipInput`.
  *
  * Reuses 100% of `Combobox` — search, editable entry, multi-select, groups,
  * async loading, per-option icons, and `overlayContent` all work unchanged.
@@ -18,7 +19,7 @@ import { Combobox, type ComboboxProps } from '../combobox/combobox'
  * label span with `--text-muted` independently of the trigger className.
  *
  * Use this in chip-styled surfaces (settings pages, chip forms). For the
- * lightweight no-search case, prefer `ChipDropdown`.
+ * menu-selection case, including searchable menus, prefer `ChipSelect`.
  *
  * @example
  * <ChipCombobox options={SOURCE_OPTIONS} value={source} onChange={setSource} />
@@ -28,7 +29,10 @@ export function ChipCombobox({ className, ...props }: ComboboxProps) {
     <Combobox
       {...props}
       className={cn(
-        'h-[30px] rounded-lg text-[var(--text-body)] dark:bg-[var(--surface-4)]',
+        chipRadiusClass,
+        chipFilledFillTokens,
+        chipHeightClass,
+        'text-[var(--text-body)]',
         className
       )}
     />
diff --git a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
index ca65061ab31..c4b0af3a679 100644
--- a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
+++ b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
@@ -69,7 +69,7 @@ interface ChipDatePickerRangeProps extends ChipDatePickerBaseProps {
 export type ChipDatePickerProps = ChipDatePickerSingleProps | ChipDatePickerRangeProps
 
 /**
- * Date counterpart to {@link ChipDropdown} — a chip-styled trigger that opens a
+ * Date counterpart to {@link ChipSelect} — a chip-styled trigger that opens a
  * {@link Calendar} in a popover. The default `filled` trigger reuses
  * `chipVariants` (filled + border) and the owned chevron for visual parity with
  * the other chip field controls; `ghost` renders the bare toolbar pill instead.
diff --git a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx b/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
deleted file mode 100644
index ce0c5bcd524..00000000000
--- a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
+++ /dev/null
@@ -1,438 +0,0 @@
-'use client'
-
-import {
-  type AriaAttributes,
-  type ComponentType,
-  forwardRef,
-  type ReactNode,
-  useContext,
-  useId,
-  useMemo,
-  useState,
-} from 'react'
-import type { VariantProps } from 'class-variance-authority'
-import { Check, ChevronDown } from '../../icons'
-import { cn } from '../../lib/cn'
-import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
-import { chipIconSlotClass } from '../chip/chip-chrome'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuItemLabel,
-  DropdownMenuSearchInput,
-  DropdownMenuTrigger,
-} from '../dropdown-menu/dropdown-menu'
-import { InsideModalContext } from '../modal/modal'
-import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
-
-type ChipIcon = ComponentType<{ className?: string }>
-
-/**
- * Single option rendered inside a {@link ChipDropdown}.
- */
-interface ChipDropdownOption {
-  /** Stable identifier returned via `onChange`. */
-  value: string
-  /** Visual label rendered both inside the trigger (when selected) and in the menu. */
-  label: ReactNode
-  /**
-   * Optional leading icon rendered inside the menu item. Auto-sized to
-   * `size-[14px]` and tinted with `--text-icon` via the item's base classes
-   * (see {@link dropdownMenuRowClass}).
-   */
-  icon?: ChipIcon
-  /** Pre-rendered leading element (e.g. an avatar) — takes precedence over `icon`. */
-  iconElement?: ReactNode
-}
-
-/**
- * Trigger + menu chrome props shared by both selection modes.
- */
-interface ChipDropdownBaseProps extends Omit<VariantProps<typeof chipVariants>, 'variant'> {
-  /**
-   * Trigger chrome. `filled` (default) is the bordered field chip; `ghost` is
-   * the bare toolbar pill — no border, hover-only surface, label and chevron
-   * both `--text-icon` — for visual parity with neighboring icon-toolbar
-   * buttons (mirrors {@link ChipDatePicker}'s `ghost`).
-   * Unlike the date picker's, a ghost dropdown keeps the owned chevron: its
-   * label changes with the selected value, so the chevron is the one stable
-   * cue that this is a picker. Other `chipVariants` values pass through
-   * (e.g. `primary` for an inverse call-to-action trigger).
-   */
-  variant?: VariantProps<typeof chipVariants>['variant'] | 'ghost'
-  /** Options to render in the menu. */
-  options: ReadonlyArray<ChipDropdownOption>
-  /** Shown in the trigger when nothing is selected. */
-  placeholder?: string
-  /** Aligns the dropdown popover relative to the trigger. */
-  align?: 'start' | 'center' | 'end'
-  /**
-   * Whether the menu width should match the trigger's. When `true` (default),
-   * the menu pins to `--radix-dropdown-menu-trigger-width`. Set `false` to let
-   * the menu size to its widest item (avoids truncating long option labels on
-   * narrow triggers). For anything finer-grained, pass `contentClassName`.
-   */
-  matchTriggerWidth?: boolean
-  /**
-   * Forwarded to the inner `DropdownMenuContent`. Use this as the shadcn-style
-   * escape hatch when neither `matchTriggerWidth` value fits (e.g. a fixed
-   * pixel width, a different `max-width`, a wider `min-width` floor than the
-   * `min-w-[8rem]` baked into `DropdownMenuContent`).
-   */
-  contentClassName?: string
-  /** Disables the trigger. */
-  disabled?: boolean
-  /** Reports menu visibility so adjacent UI can dismiss transient affordances. */
-  onOpenChange?: (open: boolean) => void
-  /** Optional icon rendered before the label (mirrors `Chip`'s `leftIcon`). */
-  leftIcon?: ChipIcon
-  /** Forwarded class for the trigger button. */
-  className?: string
-  /**
-   * Accessible name for the trigger. Use when the visible label sits outside
-   * the component (a field label above it) rather than in the selected value.
-   */
-  'aria-label'?: string
-  /**
-   * Ids of the elements naming the trigger. Because `aria-labelledby` REPLACES
-   * the name derived from the trigger's contents, include the trigger's own id
-   * alongside the external label's — `\`${labelId} ${triggerId}\`` — or the
-   * selected value is dropped from the accessible name.
-   */
-  'aria-labelledby'?: string
-  /** Required state announced through the menu button's accessible description. */
-  'aria-required'?: AriaAttributes['aria-required']
-  /** Validation state announced through the menu button's accessible description. */
-  'aria-invalid'?: AriaAttributes['aria-invalid']
-  /** Hint and error descriptions supplied by the enclosing field. */
-  'aria-describedby'?: AriaAttributes['aria-describedby']
-  /** Id for the trigger button. Needed to reference it from `aria-labelledby`. */
-  id?: string
-}
-
-/**
- * Single-select props (the default). Picking an option closes the menu and
- * reports the new value via `onChange`.
- */
-interface ChipDropdownSingleProps extends ChipDropdownBaseProps {
-  multiple?: false
-  /** Show `leftIcon` with the chevron instead of the selected label. */
-  iconOnly?: boolean
-  /** Currently selected value. */
-  value?: string
-  /** Called when the user picks a different option from the menu. */
-  onChange?: (value: string) => void
-  /**
-   * Whether to render a trailing check icon on the currently selected item
-   * (default `true`). When `false`, items render without the check affordance.
-   */
-  showSelectedCheck?: boolean
-}
-
-/**
- * Multi-select props. The menu stays open across toggles; each active option is
- * marked with a trailing check, and `onChange` reports the next selected set.
- */
-interface ChipDropdownMultiProps extends ChipDropdownBaseProps {
-  multiple: true
-  /** Currently selected values. Empty array reads as "all" / no filter. */
-  value?: string[]
-  /** Called with the next selected values when an option is toggled. */
-  onChange?: (values: string[]) => void
-  /** Label shown in the trigger and as the reset row when nothing is selected. */
-  allLabel?: string
-  /**
-   * Whether to render the leading "all" reset row inside the menu. Defaults to
-   * `true` for filter-style use (empty selection reads as "all"). Set `false`
-   * for selection-style pickers where an empty list is a real "nothing
-   * selected" state rather than an "all" shortcut.
-   */
-  showAllOption?: boolean
-  /** Renders a search field at the top of the menu that filters options by label. */
-  searchable?: boolean
-  /** Placeholder for the search field. */
-  searchPlaceholder?: string
-}
-
-type ChipDropdownProps = ChipDropdownSingleProps | ChipDropdownMultiProps
-
-/**
- * Dropdown counterpart to {@link Chip} — a 30px pill that opens a menu of
- * options. In single mode (the default) it reports the picked value; in
- * `multiple` mode it toggles values, keeps the menu open across selections,
- * and optionally renders an "all" reset row and a search field.
- *
- * The trigger reuses `chipVariants` for visual parity with `Chip` — the
- * default `filled` variant with the trigger border, or the bare toolbar pill
- * via `variant='ghost'` (see the prop doc). The label
- * is `flex-1`, so the trailing chevron is pushed flush right. The chevron is
- * owned by the component and rendered at `size-[14px]` (matching the
- * workspace-header chevron) — there is intentionally no `rightIcon` prop. The
- * trigger and menu shell are identical across modes; only the selection
- * semantics (label, item handlers, open state, search) branch on `multiple`.
- *
- * @example
- * // Single-select
- * <ChipDropdown
- *   value={member.role}
- *   onChange={(role) => updateRole(role)}
- *   options={ROLE_OPTIONS}
- *   placeholder='Select role'
- * />
- *
- * @example
- * // Multi-select
- * <ChipDropdown
- *   multiple
- *   value={ownerFilter}
- *   onChange={setOwnerFilter}
- *   options={memberOptions}
- *   allLabel='All'
- *   searchable
- *   searchPlaceholder='Search members...'
- *   fullWidth
- * />
- */
-const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
-  function ChipDropdown(props, ref) {
-    const {
-      options,
-      placeholder,
-      align = 'end',
-      matchTriggerWidth = true,
-      contentClassName,
-      disabled,
-      onOpenChange,
-      leftIcon: LeftIcon,
-      className,
-      variant = 'filled',
-      shape,
-      active,
-      fullWidth,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      'aria-required': ariaRequired,
-      'aria-invalid': ariaInvalid,
-      'aria-describedby': ariaDescribedBy,
-      id,
-    } = props
-
-    const fieldStateId = useId()
-    const fieldState = [
-      (ariaRequired === true || ariaRequired === 'true') && 'Required.',
-      ariaInvalid && ariaInvalid !== 'false' && 'Invalid selection.',
-    ]
-      .filter(Boolean)
-      .join(' ')
-    const describedBy = [ariaDescribedBy, fieldState && fieldStateId].filter(Boolean).join(' ')
-
-    const isMultiple = props.multiple === true
-    const selectedValues = useMemo<string[]>(
-      () => (isMultiple ? (props.value ?? []) : props.value != null ? [props.value] : []),
-      [isMultiple, props.value]
-    )
-
-    /**
-     * Inside a modal dialog the menu must be modal too: a non-modal menu
-     * portaled to `body` inherits the dialog's `pointer-events: none` body
-     * lock and outside-scroll lock (unclickable, unscrollable), and the
-     * dialog's still-active focus trap fights item focus. Outside dialogs we
-     * stay non-modal so filter chips don't lock page scroll while open.
-     */
-    const insideModal = useContext(InsideModalContext)
-
-    const [open, setOpen] = useState(false)
-    const [search, setSearch] = useState('')
-    const searchable = isMultiple && props.searchable === true
-    const searchPlaceholder = isMultiple ? (props.searchPlaceholder ?? 'Search...') : 'Search...'
-    const allLabel = isMultiple ? (props.allLabel ?? 'All') : ''
-    const showAllOption = isMultiple ? props.showAllOption !== false : false
-    const showSelectedCheck = isMultiple || props.showSelectedCheck !== false
-
-    const filteredOptions = useMemo(() => {
-      const query = search.trim().toLowerCase()
-      if (!searchable || !query) return options
-      return options.filter(
-        (option) => typeof option.label === 'string' && option.label.toLowerCase().includes(query)
-      )
-    }, [options, searchable, search])
-
-    const isGhost = variant === 'ghost'
-    const isInverse = variant === 'primary' || variant === 'destructive'
-    const hasTriggerBorder = !isGhost && !isInverse
-
-    const selectedOption = options.find((option) => option.value === selectedValues[0])
-    let displayLabel: ReactNode
-    if (isMultiple) {
-      displayLabel =
-        selectedValues.length === 0
-          ? allLabel
-          : selectedValues.length === 1
-            ? (options.find((option) => option.value === selectedValues[0])?.label ?? allLabel)
-            : `${selectedValues.length} selected`
-    } else {
-      displayLabel = selectedOption?.label ?? placeholder ?? 'Select...'
-    }
-    const isPlaceholder = !isMultiple && selectedValues.length === 0
-
-    const iconClass = cn('size-[16px] shrink-0', !isInverse && 'text-[var(--text-icon)]')
-    const iconOnly = !isMultiple && props.iconOnly === true && Boolean(LeftIcon)
-    /**
-     * The chevron glyph stays at its conventional subtle size, but is rendered
-     * inside a `size-[16px]` slot so its bounding box matches `leftIcon`'s. The
-     * chip's `gap-2` then produces visually equal spacing on both sides of the
-     * label — without this, the smaller glyph's bounding box would let the
-     * chevron read as glued to the text relative to the leading icon.
-     */
-    const chevronSlotClass = cn(chipIconSlotClass, !isInverse && 'text-[var(--text-icon)]')
-    /**
-     * `flex-1` is always applied so the chevron is pushed flush against the
-     * trailing edge whenever the trigger gets stretched — by `fullWidth`, by a
-     * flex parent with `grow`, or by a CSS grid cell with a fixed track.
-     * On intrinsic-width triggers (`inline-flex` with no parent constraint) the
-     * container is sized to max-content, so `grow` has no leftover space to
-     * consume and the layout collapses to the natural `gap-2` between items.
-     *
-     * The ghost pill's label is `--text-icon` (matching its chevron), not
-     * `--text-body`: it sits in toolbars beside icon-only buttons, and a
-     * body-colored label would read louder than every control around it.
-     */
-    const labelClass = cn(
-      'flex-1 text-sm',
-      !isInverse && (isGhost ? 'text-[var(--text-icon)]' : 'text-[var(--text-body)]')
-    )
-
-    const triggerLabelClass = cn(
-      labelClass,
-      isPlaceholder && !isInverse && 'text-[var(--text-muted)]'
-    )
-    const renderLabel = (label: ReactNode) => {
-      const textLabel =
-        typeof label === 'string' || typeof label === 'number' ? String(label) : null
-      return textLabel == null ? (
-        <span className={cn(overflowTextClipClass, triggerLabelClass)}>{label}</span>
-      ) : (
-        <OverflowText
-          label={textLabel}
-          className={triggerLabelClass}
-          focusTarget='nearest-interactive'
-        />
-      )
-    }
-
-    const renderItem = (option: ChipDropdownOption) => {
-      const isSelected = selectedValues.includes(option.value)
-      const OptionIcon = option.icon
-      return (
-        <DropdownMenuItem
-          key={option.value}
-          onSelect={(event) => {
-            if (isMultiple) {
-              event.preventDefault()
-              props.onChange?.(
-                isSelected
-                  ? selectedValues.filter((v) => v !== option.value)
-                  : [...selectedValues, option.value]
-              )
-            } else {
-              props.onChange?.(option.value)
-            }
-          }}
-        >
-          {option.iconElement ?? (OptionIcon ? <OptionIcon /> : null)}
-          {typeof option.label === 'string' || typeof option.label === 'number' ? (
-            <DropdownMenuItemLabel label={String(option.label)} />
-          ) : (
-            <span className={cn(overflowTextClipClass, 'flex-1')}>{option.label}</span>
-          )}
-          {showSelectedCheck && isSelected ? <Check className='ml-auto! size-[16px]!' /> : null}
-        </DropdownMenuItem>
-      )
-    }
-
-    return (
-      <DropdownMenu
-        modal={insideModal}
-        open={open}
-        onOpenChange={(next) => {
-          setOpen(next)
-          if (!next) setSearch('')
-          onOpenChange?.(next)
-        }}
-      >
-        <DropdownMenuTrigger asChild disabled={disabled}>
-          <button
-            ref={ref}
-            id={id}
-            type='button'
-            disabled={disabled}
-            aria-label={
-              ariaLabel ?? (iconOnly && typeof displayLabel === 'string' ? displayLabel : undefined)
-            }
-            aria-labelledby={ariaLabelledBy}
-            aria-describedby={describedBy || undefined}
-            className={cn(
-              chipVariants({
-                variant: isGhost ? 'default' : variant,
-                shape: iconOnly ? 'round' : shape,
-                active,
-                fullWidth,
-              }),
-              hasTriggerBorder && TRIGGER_BORDER_CLASS,
-              className
-            )}
-          >
-            {LeftIcon ? <LeftIcon className={iconClass} /> : null}
-            {!iconOnly && renderLabel(displayLabel)}
-            <span aria-hidden className={chevronSlotClass}>
-              <ChevronDown className='size-[14px]' />
-            </span>
-          </button>
-        </DropdownMenuTrigger>
-        {fieldState && (
-          <span id={fieldStateId} className='sr-only'>
-            {fieldState}
-          </span>
-        )}
-        <DropdownMenuContent
-          align={align}
-          onOpenAutoFocus={searchable ? (event) => event.preventDefault() : undefined}
-          className={cn(
-            matchTriggerWidth && 'w-[var(--radix-dropdown-menu-trigger-width)] max-w-none',
-            insideModal && 'max-h-[min(240px,var(--radix-popper-available-height,240px))]',
-            contentClassName
-          )}
-        >
-          {searchable && (
-            <DropdownMenuSearchInput
-              placeholder={searchPlaceholder}
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              onKeyDown={(event) => {
-                if (event.key === 'Escape') setOpen(false)
-              }}
-            />
-          )}
-          {showAllOption && (
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault()
-                if (isMultiple) props.onChange?.([])
-              }}
-            >
-              <DropdownMenuItemLabel label={allLabel} />
-              {selectedValues.length === 0 ? <Check className='ml-auto! size-[16px]!' /> : null}
-            </DropdownMenuItem>
-          )}
-          {filteredOptions.map(renderItem)}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    )
-  }
-)
-
-ChipDropdown.displayName = 'ChipDropdown'
-
-export { ChipDropdown }
-export type { ChipDropdownOption, ChipDropdownProps }
diff --git a/packages/emcn/src/components/chip-input/chip-input.tsx b/packages/emcn/src/components/chip-input/chip-input.tsx
index 3bddc6e28b3..872fb249e59 100644
--- a/packages/emcn/src/components/chip-input/chip-input.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.tsx
@@ -14,6 +14,8 @@
  * same 1.5 gap as `Chip`. It shares the chip-field chrome with
  * {@link ChipTextarea}, shows no focus ring — keep the surface calm and rely on
  * the caret for focus. Pass `error` to swap the border to the error token.
+ * `appearance='compactSearch'` owns the existing 23px code-search field
+ * treatment without changing the 30px chip default.
  *
  * @example
  * ```tsx
@@ -27,12 +29,37 @@
  * ```
  */
 import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
-import { chipFieldSurfaceClass, chipFieldTextClass, chipGeometryClass } from '../chip/chip-chrome'
+import {
+  chipContentGap,
+  chipContentGeometryClass,
+  chipFieldSurfaceClass,
+  chipFieldTextClass,
+  chipRadiusClass,
+  chipSizeClasses,
+} from '../chip/chip-chrome'
 
 type ChipInputIcon = React.ComponentType<{ className?: string }>
 
-export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+/** The compact search field keeps the existing code-viewer input geometry. */
+export const chipInputVariants = cva('', {
+  variants: {
+    appearance: {
+      chip: '',
+      compactSearch: `${chipFieldSurfaceClass} ${chipContentGap} h-[23px] items-center rounded-sm px-2 dark:bg-[var(--surface-5)]`,
+    },
+  },
+  defaultVariants: { appearance: 'chip' },
+})
+
+export interface ChipInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof chipInputVariants> {
+  /** The default chip field or the compact code-search field. */
+  appearance?: VariantProps<typeof chipInputVariants>['appearance']
+  /** Control height for the standard chip appearance: 30px by default, or 36px for auth fields. */
+  size?: keyof typeof chipSizeClasses
   /** Leading icon component (e.g. `Search` from `@sim/emcn/icons`). Rendered at 14px in `--text-icon`, with the chip's 1.5 gap. */
   icon?: ChipInputIcon
   /** Custom leading content, such as a color swatch. Takes precedence over `icon`. */
@@ -54,6 +81,7 @@ export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
 export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
   (
     {
+      appearance = 'chip',
       className,
       inputClassName,
       icon: Icon,
@@ -62,6 +90,7 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
       error,
       disabled,
       type = 'text',
+      size = 'md',
       ...props
     },
     ref
@@ -69,8 +98,11 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
     <div
       className={cn(
         'flex w-full',
-        chipGeometryClass,
-        chipFieldSurfaceClass,
+        appearance === 'chip' && chipContentGeometryClass,
+        appearance === 'chip' && chipRadiusClass,
+        appearance === 'chip' && chipSizeClasses[size],
+        appearance === 'chip' && chipFieldSurfaceClass,
+        chipInputVariants({ appearance }),
         error && 'border-[var(--text-error)]',
         disabled && 'opacity-50',
         className
@@ -83,8 +115,12 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
         type={type}
         disabled={disabled}
         className={cn(
-          '-ml-1 size-full bg-transparent indent-1 disabled:cursor-not-allowed',
-          chipFieldTextClass,
+          appearance === 'compactSearch'
+            ? 'size-full touch-manipulation scroll-pr-1 bg-transparent font-sans text-[var(--text-primary)] text-caption outline-hidden [letter-spacing:inherit] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed'
+            : cn(
+                '-ml-1 size-full bg-transparent indent-1 disabled:cursor-not-allowed',
+                chipFieldTextClass
+              ),
           inputClassName
         )}
         {...props}
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index fe0f428bbfa..63fa7408ffd 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -39,15 +39,16 @@
 'use client'
 
 import * as React from 'react'
+import { cva } from 'class-variance-authority'
 import { Eye, EyeOff, Loader, X } from '../../icons'
 import { cn } from '../../lib/cn'
 import { Button } from '../button/button'
 import { Chip, type ChipProps } from '../chip/chip'
 import { chipContentIconClass, chipContentLabelClass } from '../chip/chip-chrome'
 import { ChipCopyInput } from '../chip-copy-input/chip-copy-input'
-import { ChipDropdown, type ChipDropdownOption } from '../chip-dropdown/chip-dropdown'
 import { ChipEmailsInput, type ChipEmailsInputProps } from '../chip-emails-input/chip-emails-input'
 import { ChipInput } from '../chip-input/chip-input'
+import { ChipSelect, type ChipSelectOption } from '../chip-select/chip-select'
 import { ChipSwitch } from '../chip-switch/chip-switch'
 import { ChipTextarea } from '../chip-textarea/chip-textarea'
 import { Label } from '../label/label'
@@ -515,17 +516,19 @@ ChipModalPromptBody.displayName = 'ChipModalPromptBody'
 
 /**
  * Option entry for the `dropdown` branch of {@link ChipModalField}. Aliases the
- * canonical {@link ChipDropdownOption} so the modal dropdown stays in lockstep
- * with `ChipDropdown` (gains the optional leading `icon`).
+ * canonical {@link ChipSelectOption} so the modal dropdown stays in lockstep
+ * with `ChipSelect` (gains the optional leading `icon`).
  */
-export type ChipModalDropdownOption = ChipDropdownOption
+export type ChipModalDropdownOption = ChipSelectOption
 
 /**
  * Props shared by every {@link ChipModalField} branch.
  */
 interface ChipModalFieldBaseProps {
-  /** Field title rendered above the control. Replaces the legacy `label` slot. */
+  /** Field title rendered above or beside the control. Replaces the legacy `label` slot. */
   title: React.ReactNode
+  /** Places the title beside the control, wrapping when space is limited. Defaults to vertical. */
+  orientation?: 'vertical' | 'horizontal'
   /** Optional field actions beside the title, outside its label. */
   titleActions?: React.ReactNode
   /**
@@ -734,6 +737,8 @@ export interface ChipModalFieldAria {
 
 interface ChipModalCustomFieldProps extends ChipModalFieldBaseProps {
   type: 'custom'
+  /** Associates the field label with the custom control's existing ID. */
+  htmlFor?: string
   /**
    * Whether Enter in a nested plain single-line input should trigger the
    * footer's default primary action. Set `false` when the custom control owns
@@ -763,6 +768,21 @@ export type ChipModalFieldProps =
   | ChipModalEmailsFieldProps
   | ChipModalCustomFieldProps
 
+/** Shared field orientation and gutter geometry. */
+const chipModalFieldVariants = cva('gap-y-[9px]', {
+  variants: {
+    orientation: {
+      vertical: 'flex flex-col',
+      horizontal: 'flex flex-wrap items-center justify-between gap-x-3',
+    },
+    flush: {
+      true: 'px-0',
+      false: 'px-2',
+    },
+  },
+  defaultVariants: { orientation: 'vertical', flush: false },
+})
+
 /**
  * Declarative labeled field row. The `type` discriminator selects which
  * control renders, and the field owns all chrome internally — consumers
@@ -779,7 +799,17 @@ function ChipModalField(props: ChipModalFieldProps) {
   const id = React.useId()
   const errorId = `${id}-error`
   const hintId = `${id}-hint`
-  const { title, titleActions, required, error, hint, flush = false, className } = props
+  const {
+    title,
+    titleActions,
+    required,
+    error,
+    hint,
+    flush = false,
+    orientation = 'vertical',
+    className,
+  } = props
+  const horizontal = orientation === 'horizontal'
   const associatesLabel =
     props.type === 'input' ||
     props.type === 'email' ||
@@ -788,7 +818,10 @@ function ChipModalField(props: ChipModalFieldProps) {
     props.type === 'file' ||
     props.type === 'emails'
   const label = (
-    <Label htmlFor={associatesLabel ? id : undefined} className='pl-0.5 text-[var(--text-muted)]'>
+    <Label
+      htmlFor={props.type === 'custom' ? props.htmlFor : associatesLabel ? id : undefined}
+      className='pl-0.5 text-[var(--text-muted)]'
+    >
       {title}
       {required && (
         <span aria-hidden className='ml-0.5 text-[var(--text-error)]'>
@@ -798,28 +831,47 @@ function ChipModalField(props: ChipModalFieldProps) {
     </Label>
   )
 
+  const titleContent = titleActions ? (
+    <div className='flex flex-wrap items-center justify-between gap-2'>
+      {label}
+      {titleActions}
+    </div>
+  ) : (
+    label
+  )
+  const control = renderChipModalControl(props, id, errorId, hintId)
+
   return (
     <div
-      className={cn('flex flex-col gap-[9px]', flush ? 'px-0' : 'px-2', className)}
+      className={cn(chipModalFieldVariants({ orientation, flush }), className)}
       data-chip-modal-enter-owner={
         props.type === 'custom' && props.submitOnEnter === false ? '' : undefined
       }
     >
-      {titleActions ? (
-        <div className='flex flex-wrap items-center justify-between gap-2'>
-          {label}
-          {titleActions}
-        </div>
+      {horizontal ? (
+        <>
+          <div className='min-w-0 flex-[1_1_10rem] [overflow-wrap:anywhere]'>{titleContent}</div>
+          <div className='min-w-0 max-w-full'>{control}</div>
+        </>
       ) : (
-        label
+        <>
+          {titleContent}
+          {control}
+        </>
       )}
-      {renderChipModalControl(props, id, errorId, hintId)}
       {error && props.type !== 'emails' ? (
-        <p id={errorId} role='alert' className={CHIP_MODAL_FIELD_ERROR_CLASS}>
+        <p
+          id={errorId}
+          role='alert'
+          className={cn(CHIP_MODAL_FIELD_ERROR_CLASS, horizontal && 'basis-full')}
+        >
           {error}
         </p>
       ) : hint ? (
-        <p id={hintId} className='text-[var(--text-muted)] text-caption'>
+        <p
+          id={hintId}
+          className={cn('text-[var(--text-muted)] text-caption', horizontal && 'basis-full')}
+        >
           {hint}
         </p>
       ) : null}
@@ -898,7 +950,7 @@ function renderChipModalControl(
           disabled={props.disabled}
           viewOnly={props.viewOnly}
           resizable={props.resizable}
-          className={props.mono ? 'font-mono' : undefined}
+          monospace={props.mono}
           style={props.minHeight ? { minHeight: props.minHeight } : undefined}
           {...aria}
         />
@@ -915,7 +967,10 @@ function renderChipModalControl(
       )
     case 'dropdown':
       return (
-        <ChipDropdown
+        <ChipSelect
+          showSelectedCheck
+          dropdownWidth='trigger'
+          modal={false}
           value={props.value}
           onChange={props.onChange}
           options={props.options}
@@ -1229,7 +1284,7 @@ export type ChipModalFooterAction = ChipModalFooterActionBase &
 /**
  * Escape hatch for the left-docked footer cluster: renders the given node in
  * place of a declarative action Chip. Reserve it for chip-chrome controls
- * (`ChipDatePicker`, `ChipTimePicker`, `ChipDropdown`, ...) so the footer
+ * (`ChipDatePicker`, `ChipTimePicker`, `ChipSelect`, ...) so the footer
  * stays visually canonical — the cluster's `gap-2` alone sets the rhythm, as
  * it does for the footer's own Chips, so the control must carry no outer
  * margin. The primary action stays declarative by design; only
@@ -1807,6 +1862,7 @@ export {
   ChipModalBody,
   ChipModalError,
   ChipModalField,
+  chipModalFieldVariants,
   ChipModalFooter,
   ChipModalHeader,
   ChipModalPromptBody,
diff --git a/packages/emcn/src/components/chip-select/chip-select.tsx b/packages/emcn/src/components/chip-select/chip-select.tsx
index 739960e7c5f..f97e65f2694 100644
--- a/packages/emcn/src/components/chip-select/chip-select.tsx
+++ b/packages/emcn/src/components/chip-select/chip-select.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { ChevronDown } from '../../icons'
+import { Check, ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
 import { chipIconSlotClass } from '../chip/chip-chrome'
@@ -15,42 +15,45 @@ import {
   DropdownMenuSearchInput,
   DropdownMenuTrigger,
 } from '../dropdown-menu/dropdown-menu'
+import { InsideModalContext } from '../modal/modal'
 import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 
-/** A selectable option in a {@link ChipSelect}. */
-export interface ChipSelectOption {
-  label: string
+interface ChipSelectOptionBase {
   value: string
-  /** Additional search-only terms. These are never rendered in the option label. */
-  searchTerms?: readonly string[]
   /** Optional leading icon. */
   icon?: React.ComponentType<{ className?: string }>
+  /** Pre-rendered leading element, such as an avatar; takes precedence over `icon`. */
+  iconElement?: React.ReactNode
   /** Whether this option is non-selectable. */
   disabled?: boolean
 }
 
+/**
+ * A selectable option in a {@link ChipSelect}. Rich labels must supply their
+ * visible text in `searchTerms`, followed by any aliases, so they remain searchable.
+ * Search terms are never rendered. Plain text labels are matched automatically.
+ */
+export type ChipSelectOption = ChipSelectOptionBase &
+  (
+    | { label: string | number; searchTerms?: readonly string[] }
+    | {
+        label: React.ReactNode
+        searchTerms: readonly [string, ...string[]]
+      }
+  )
+
 /** A labeled group of options. When `groups` is set, `options` is ignored. */
 export interface ChipSelectOptionGroup {
   /** Optional section header rendered above the group. */
   section?: string
-  items: ChipSelectOption[]
+  items: readonly ChipSelectOption[]
 }
 
-export interface ChipSelectProps {
+interface ChipSelectBaseProps {
   /** Options in display order. Ignored when `groups` is provided. */
-  options?: ChipSelectOption[]
+  options?: readonly ChipSelectOption[]
   /** Grouped options with optional section headers. */
-  groups?: ChipSelectOptionGroup[]
-  /** Selected value (single-select mode). */
-  value?: string
-  /** Called with the next value when an option is chosen (single-select). */
-  onChange?: (value: string) => void
-  /** Enable multi-select: options render as checkbox rows and the menu stays open. */
-  multiSelect?: boolean
-  /** Selected values (multi-select mode). */
-  multiSelectValues?: string[]
-  /** Called with the next values when a checkbox toggles (multi-select). */
-  onMultiSelectChange?: (values: string[]) => void
+  groups?: readonly ChipSelectOptionGroup[]
   /** Trigger text when nothing is selected. */
   placeholder?: string
   /** Overrides the computed trigger label (e.g. a custom "N selected" string). */
@@ -72,9 +75,9 @@ export interface ChipSelectProps {
    * use inside form fields. Defaults to a content-width chip (toolbar filters).
    */
   fullWidth?: boolean
-  /** Menu width — 'trigger' matches the trigger, a number is px; defaults to a 160px min. */
-  dropdownWidth?: 'trigger' | number
-  /** Max height of the menu in px (defaults to the menu's 240px). */
+  /** Menu width: trigger width, intrinsic content width, or pixels; defaults to a 160px minimum. */
+  dropdownWidth?: 'trigger' | 'content' | number
+  /** Max menu height in pixels; modal menus are constrained to the available space. */
   maxHeight?: number
   /**
    * Keep the menu below its trigger and shrink it to the remaining viewport
@@ -86,6 +89,15 @@ export interface ChipSelectProps {
   className?: string
   /** Forwarded to the menu content. */
   contentClassName?: string
+  /** A filled or outlined form/filter control, a primary action, or a bare round toolbar picker. */
+  variant?: 'filled' | 'outline' | 'primary' | 'ghost'
+  /** Reports menu visibility, for example to hide a tooltip while its menu is open. */
+  onOpenChange?: (open: boolean) => void
+  /** Optional leading trigger icon. */
+  leftIcon?: React.ComponentType<{ className?: string }>
+  /** Trigger id, also usable in `aria-labelledby`. */
+  id?: string
+  'aria-labelledby'?: string
   /** Accessible label for the trigger. */
   'aria-label'?: string
   /** Marks the trigger as required. */
@@ -104,11 +116,36 @@ export interface ChipSelectProps {
   modal?: boolean
 }
 
+/** Single selection closes the menu and reports one value. */
+interface ChipSelectSingleProps extends ChipSelectBaseProps {
+  multiSelect?: false
+  value?: string
+  onChange?: (value: string) => void
+  multiSelectValues?: never
+  onMultiSelectChange?: never
+  /** Show a trailing check on the selected row. Defaults to false. */
+  showSelectedCheck?: boolean
+}
+
+/** Multiple selection uses checkbox rows and keeps the menu open. */
+interface ChipSelectMultiProps extends ChipSelectBaseProps {
+  multiSelect: true
+  multiSelectValues?: readonly string[]
+  onMultiSelectChange?: (values: string[]) => void
+  value?: never
+  onChange?: never
+  showSelectedCheck?: never
+}
+
+export type ChipSelectProps = ChipSelectSingleProps | ChipSelectMultiProps
+
 /** Matches an option label or one of its search-only aliases. */
 export function chipSelectOptionMatchesSearch(option: ChipSelectOption, query: string): boolean {
   const normalizedQuery = query.trim().toLowerCase()
   if (!normalizedQuery) return true
-  return [option.label, ...(option.searchTerms ?? [])].some((term) =>
+  const label =
+    typeof option.label === 'string' || typeof option.label === 'number' ? String(option.label) : ''
+  return [label, ...(option.searchTerms ?? [])].some((term) =>
     term.trim().toLowerCase().includes(normalizedQuery)
   )
 }
@@ -133,40 +170,67 @@ export function chipSelectOptionMatchesSearch(option: ChipSelectOption, query: s
  * />
  * ```
  */
-export function ChipSelect({
-  options,
-  groups,
-  value,
-  onChange,
-  multiSelect = false,
-  multiSelectValues,
-  onMultiSelectChange,
-  placeholder = 'Select...',
-  displayLabel,
-  disabled = false,
-  searchable = false,
-  searchPlaceholder = 'Search...',
-  showAllOption = false,
-  allOptionLabel = 'All',
-  align = 'end',
-  fullWidth = false,
-  dropdownWidth,
-  maxHeight,
-  stayBelow = false,
-  className,
-  contentClassName,
-  'aria-label': ariaLabel,
-  'aria-required': ariaRequired,
-  'aria-invalid': ariaInvalid,
-  'aria-describedby': ariaDescribedBy,
-  modal,
-}: ChipSelectProps) {
+export const ChipSelect = React.forwardRef<HTMLButtonElement, ChipSelectProps>(function ChipSelect(
+  {
+    options,
+    groups,
+    value,
+    onChange,
+    multiSelect = false,
+    multiSelectValues,
+    onMultiSelectChange,
+    placeholder = 'Select...',
+    displayLabel,
+    disabled = false,
+    searchable = false,
+    searchPlaceholder = 'Search...',
+    showAllOption = false,
+    allOptionLabel = 'All',
+    align = 'end',
+    fullWidth = false,
+    dropdownWidth,
+    maxHeight,
+    stayBelow = false,
+    className,
+    contentClassName,
+    variant = 'filled',
+    onOpenChange,
+    leftIcon: LeftIcon,
+    id,
+    showSelectedCheck = false,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-label': ariaLabel,
+    'aria-required': ariaRequired,
+    'aria-invalid': ariaInvalid,
+    'aria-describedby': ariaDescribedBy,
+    modal,
+  },
+  ref
+) {
+  const insideModal = React.useContext(InsideModalContext)
+  const fieldStateId = React.useId()
+  const [open, setOpen] = React.useState(false)
   const [query, setQuery] = React.useState('')
+  const fieldState = [
+    (ariaRequired === true || ariaRequired === 'true') && 'Required.',
+    ariaInvalid && ariaInvalid !== 'false' && 'Invalid selection.',
+  ]
+    .filter(Boolean)
+    .join(' ')
+  const describedBy = [ariaDescribedBy, fieldState && fieldStateId].filter(Boolean).join(' ')
+  const inverse = variant === 'primary'
+  const ghost = variant === 'ghost'
+  const isPlaceholder = !multiSelect && value == null && displayLabel == null
+  const labelClass = cn(
+    'flex-1 text-sm',
+    !inverse && (ghost ? 'text-[var(--text-icon)]' : 'text-[var(--text-body)]'),
+    isPlaceholder && !inverse && 'text-[var(--text-muted)]'
+  )
 
   const selectedValues = multiSelectValues ?? []
 
   /** Normalized sections — either the provided groups or a single anonymous group. */
-  const sections = React.useMemo<ChipSelectOptionGroup[]>(
+  const sections = React.useMemo<readonly ChipSelectOptionGroup[]>(
     () => groups ?? [{ items: options ?? [] }],
     [groups, options]
   )
@@ -181,7 +245,7 @@ export function ChipSelect({
       }
       return `${selectedValues.length} selected`
     }
-    if (value == null || value === '') return placeholder
+    if (value == null) return placeholder
     return allOptions.find((o) => o.value === value)?.label ?? placeholder
   }, [multiSelect, selectedValues, showAllOption, allOptionLabel, placeholder, value, allOptions])
 
@@ -211,10 +275,13 @@ export function ChipSelect({
   const contentStyle: React.CSSProperties = {}
   if (dropdownWidth === 'trigger') contentStyle.width = 'var(--radix-dropdown-menu-trigger-width)'
   else if (typeof dropdownWidth === 'number') contentStyle.width = dropdownWidth
-  if (dropdownWidth != null) contentStyle.maxWidth = 'none'
+  if (dropdownWidth === 'trigger' || typeof dropdownWidth === 'number')
+    contentStyle.maxWidth = 'none'
   if (stayBelow) {
     const preferredMaxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : '240px'
     contentStyle.maxHeight = `min(${preferredMaxHeight}, var(--radix-dropdown-menu-content-available-height))`
+  } else if (insideModal) {
+    contentStyle.maxHeight = `min(${maxHeight ?? 240}px, var(--radix-dropdown-menu-content-available-height))`
   } else if (typeof maxHeight === 'number') {
     contentStyle.maxHeight = maxHeight
   }
@@ -232,7 +299,8 @@ export function ChipSelect({
             toggleValue(opt.value)
           }}
         >
-          {Icon ? <Icon className='mr-2 size-[14px] text-[var(--text-icon)]' /> : null}
+          {opt.iconElement ??
+            (Icon ? <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' /> : null)}
           {opt.label}
         </DropdownMenuCheckboxItem>
       )
@@ -243,8 +311,15 @@ export function ChipSelect({
         disabled={opt.disabled}
         onSelect={() => onChange?.(opt.value)}
       >
-        {Icon ? <Icon /> : null}
-        <DropdownMenuItemLabel label={opt.label} />
+        {opt.iconElement ?? (Icon ? <Icon /> : null)}
+        {typeof opt.label === 'string' || typeof opt.label === 'number' ? (
+          <DropdownMenuItemLabel label={String(opt.label)} />
+        ) : (
+          <span className={cn(overflowTextClipClass, 'flex-1')}>{opt.label}</span>
+        )}
+        {showSelectedCheck && value === opt.value ? (
+          <Check className='ml-auto! size-[16px]!' />
+        ) : null}
       </DropdownMenuItem>
     )
   }
@@ -252,54 +327,77 @@ export function ChipSelect({
   return (
     <DropdownMenu
       modal={modal}
-      onOpenChange={(open) => {
-        if (!open) setQuery('')
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen)
+        if (!nextOpen) setQuery('')
+        onOpenChange?.(nextOpen)
       }}
     >
       <DropdownMenuTrigger asChild>
         <button
+          ref={ref}
+          id={id}
           type='button'
           disabled={disabled}
           aria-label={ariaLabel}
-          aria-required={ariaRequired}
-          aria-invalid={ariaInvalid}
-          aria-describedby={ariaDescribedBy}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={describedBy || undefined}
           className={cn(
-            chipVariants({ variant: 'filled', fullWidth }),
-            TRIGGER_BORDER_CLASS,
-            fullWidth ? 'justify-between' : 'w-fit max-w-[240px]',
+            chipVariants({
+              variant: ghost ? 'default' : variant,
+              shape: ghost ? 'round' : undefined,
+              fullWidth,
+            }),
+            !inverse && !ghost && TRIGGER_BORDER_CLASS,
+            fullWidth ? 'justify-between' : ghost ? 'w-fit' : 'w-fit max-w-[240px]',
             className
           )}
         >
+          {LeftIcon ? (
+            <LeftIcon className={cn(chipIconSlotClass, !inverse && 'text-[var(--text-icon)]')} />
+          ) : null}
           {typeof visibleLabel === 'string' || typeof visibleLabel === 'number' ? (
             <OverflowText
               label={String(visibleLabel)}
-              className='flex-1 text-[var(--text-body)]'
+              className={labelClass}
               focusTarget='nearest-interactive'
             />
           ) : (
-            <span className={cn(overflowTextClipClass, 'flex-1 text-[var(--text-body)]')}>
-              {visibleLabel}
-            </span>
+            <span className={cn(overflowTextClipClass, labelClass)}>{visibleLabel}</span>
           )}
-          <span aria-hidden className={cn(chipIconSlotClass, 'text-[var(--text-icon)]')}>
+          <span
+            aria-hidden
+            className={cn(chipIconSlotClass, !inverse && 'text-[var(--text-icon)]')}
+          >
             <ChevronDown className='size-[14px]' />
           </span>
         </button>
       </DropdownMenuTrigger>
+      {fieldState ? (
+        <span id={fieldStateId} className='sr-only'>
+          {fieldState}
+        </span>
+      ) : null}
       <DropdownMenuContent
         align={align}
         side={stayBelow ? 'bottom' : undefined}
         avoidCollisions={stayBelow ? false : undefined}
         onOpenAutoFocus={searchable ? (e) => e.preventDefault() : undefined}
         style={contentStyle}
-        className={cn('min-w-[160px]', contentClassName)}
+        className={cn(
+          dropdownWidth !== 'trigger' && dropdownWidth !== 'content' && 'min-w-[160px]',
+          contentClassName
+        )}
       >
         {searchable ? (
           <DropdownMenuSearchInput
             placeholder={searchPlaceholder}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') setOpen(false)
+            }}
           />
         ) : null}
 
@@ -330,4 +428,6 @@ export function ChipSelect({
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
+})
+
+ChipSelect.displayName = 'ChipSelect'
diff --git a/packages/emcn/src/components/chip-switch/chip-switch.tsx b/packages/emcn/src/components/chip-switch/chip-switch.tsx
index f3001005d1d..31ff0099f7e 100644
--- a/packages/emcn/src/components/chip-switch/chip-switch.tsx
+++ b/packages/emcn/src/components/chip-switch/chip-switch.tsx
@@ -1,11 +1,7 @@
 'use client'
 
-import { type ComponentType, type ReactNode, useRef } from 'react'
-import * as RadioGroup from '@radix-ui/react-radio-group'
-import { useScrollEdges } from '../../hooks/use-scroll-edges'
-import { cn } from '../../lib/cn'
-import { segmentedControlItemVariants, segmentedControlVariants } from '../chip/segmented-control'
-import { scrollFadeAttributes, scrollFadeXClass } from '../scroll-fade/scroll-fade'
+import type { ComponentType, ReactNode } from 'react'
+import { ChipButtonGroup, ChipButtonGroupItem } from '../chip-button-group/chip-button-group'
 
 /**
  * One segment in a {@link ChipSwitch}. `label` accepts a `ReactNode` so callers
@@ -43,9 +39,8 @@ export interface ChipSwitchProps<T extends string = string> {
 }
 
 /**
- * A segmented chip with the same 30px outer height as `ChipDropdown`. Its
- * inset segments share their chrome with `ChipButtonGroup`. Radix owns radio-group
- * focus, arrow-key selection, and disabled-option behavior.
+ * Options-based adapter over `ChipButtonGroup`. Both APIs share the same
+ * geometry, scrolling, radio-group focus, and disabled-option behavior.
  *
  * @example
  * <ChipSwitch
@@ -66,36 +61,27 @@ export function ChipSwitch<T extends string>({
   'aria-label': ariaLabel,
   className,
 }: ChipSwitchProps<T>) {
-  const groupRef = useRef<HTMLDivElement>(null)
-  const edges = useScrollEdges(groupRef, { axis: 'x' })
   return (
-    <RadioGroup.Root
-      ref={groupRef}
-      {...scrollFadeAttributes(edges)}
+    <ChipButtonGroup
       value={value}
       disabled={disabled}
+      size={size}
       onValueChange={(next) => {
         const option = options.find((entry) => entry.value === next)
         if (!disabled && option && !option.disabled) onChange(option.value)
       }}
       aria-label={ariaLabel}
-      className={cn(scrollFadeXClass, segmentedControlVariants({ size }), className)}
+      className={className}
     >
       {options.map((option) => {
         const Icon = option.icon
-        const isActive = option.value === value
         return (
-          <RadioGroup.Item
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
-            className={cn(segmentedControlItemVariants({ active: isActive, size }))}
-          >
+          <ChipButtonGroupItem key={option.value} value={option.value} disabled={option.disabled}>
             {Icon ? <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' /> : null}
             {option.label}
-          </RadioGroup.Item>
+          </ChipButtonGroupItem>
         )
       })}
-    </RadioGroup.Root>
+    </ChipButtonGroup>
   )
 }
diff --git a/packages/emcn/src/components/chip-textarea/chip-textarea.tsx b/packages/emcn/src/components/chip-textarea/chip-textarea.tsx
index 8f891a11031..471d3eed28a 100644
--- a/packages/emcn/src/components/chip-textarea/chip-textarea.tsx
+++ b/packages/emcn/src/components/chip-textarea/chip-textarea.tsx
@@ -27,6 +27,8 @@ export interface ChipTextareaProps
   extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
   /** Marks the field invalid; swaps the border to the error token. */
   error?: boolean
+  /** Uses the shared monospace font for JSON, keys, and other structured text. */
+  monospace?: boolean
   /** Allows vertical user resizing. Off by default. */
   resizable?: boolean
   /**
@@ -41,7 +43,18 @@ export interface ChipTextareaProps
 
 /** Forwards its ref to the underlying `<textarea>`, exactly like a native textarea. */
 export const ChipTextarea = React.forwardRef<HTMLTextAreaElement, ChipTextareaProps>(
-  ({ className, error, resizable = false, viewOnly = false, readOnly, ...props }, ref) => (
+  (
+    {
+      className,
+      error,
+      monospace = false,
+      resizable = false,
+      viewOnly = false,
+      readOnly,
+      ...props
+    },
+    ref
+  ) => (
     <textarea
       ref={ref}
       readOnly={viewOnly || readOnly}
@@ -49,6 +62,7 @@ export const ChipTextarea = React.forwardRef<HTMLTextAreaElement, ChipTextareaPr
         'w-full px-2 py-1.5 disabled:cursor-not-allowed disabled:opacity-50',
         chipFieldSurfaceClass,
         chipFieldTextClass,
+        monospace && 'font-mono',
         error ? 'border-[var(--text-error)]' : undefined,
         resizable ? 'resize-y' : 'resize-none',
         viewOnly && 'cursor-default',
diff --git a/packages/emcn/src/components/chip/chip-chevron.tsx b/packages/emcn/src/components/chip/chip-chevron.tsx
index 3b4b30d23b5..1db1a4e7b17 100644
--- a/packages/emcn/src/components/chip/chip-chevron.tsx
+++ b/packages/emcn/src/components/chip/chip-chevron.tsx
@@ -10,7 +10,7 @@ interface ChipChevronDownProps {
 /**
  * Canonical trailing chevron adornment for chip-style dropdown triggers — a
  * 16px hidden-from-AT slot centering the 14px {@link ChevronDown} glyph in
- * `--text-icon`, matching the chevron `ChipDropdown` owns internally. Use it
+ * `--text-icon`, matching the chevron `ChipSelect` owns internally. Use it
  * inside hand-built `chipVariants` triggers (breadcrumb dropdowns, header
  * "New column"-style buttons) instead of re-deriving the span + icon markup.
  *
diff --git a/packages/emcn/src/components/chip/chip-chrome.ts b/packages/emcn/src/components/chip/chip-chrome.ts
index b4c5d63c52c..b9e95d45ff4 100644
--- a/packages/emcn/src/components/chip/chip-chrome.ts
+++ b/packages/emcn/src/components/chip/chip-chrome.ts
@@ -3,7 +3,7 @@ export const chipFilledFillTokens = 'bg-[var(--surface-5)] dark:bg-[var(--surfac
 /**
  * The filled surface WITH a `--border-1` border, for chip FIELDS ({@link ChipInput},
  * {@link ChipTextarea}). The `filled` chip variant itself is borderless
- * ({@link chipFilledFillTokens}); pill triggers (`ChipDropdown`/`ChipSelect`/
+ * ({@link chipFilledFillTokens}); pill triggers (`ChipSelect`/
  * `ChipDatePicker`) opt into the border via `TRIGGER_BORDER_CLASS`.
  */
 export const chipFilledSurfaceTokens = `border border-[var(--border-1)] ${chipFilledFillTokens}`
@@ -17,7 +17,7 @@ export const chipPrimaryFillTokens =
   'bg-[var(--text-primary)] text-[var(--text-inverse)] dark:bg-white dark:text-[var(--bg)]'
 /** The default chip corner radius. `chipVariants`' `shape: 'round'` swaps it for `rounded-full`. */
 export const chipRadiusClass = 'rounded-lg'
-/** Filled surface shared by the chip text fields ({@link ChipInput}, {@link ChipTextarea}) — aligned with `Chip` / `ChipDropdown`. */
+/** Filled surface shared by the chip text fields ({@link ChipInput}, {@link ChipTextarea}) — aligned with `Chip` / `ChipSelect`. */
 export const chipFieldSurfaceClass = `${chipRadiusClass} ${chipFilledSurfaceTokens} transition-colors`
 /**
  * The raised "border + drop shadow" ring of the `border-shadow` chip variant: a
@@ -49,13 +49,20 @@ export const chipFieldTextClass =
  */
 export const chipContentGap = 'gap-1.5'
 
+/** Standard chip height, also shared by combobox fields. */
+export const chipHeightClass = 'h-[30px]'
+/** Shared control heights. Large controls follow the auth spacing scale. */
+export const chipSizeClasses = { md: chipHeightClass, lg: 'h-9' } as const
+/** Chip content geometry without height or radius, for sized controls. */
+export const chipContentGeometryClass = `items-center ${chipContentGap} px-2 text-left text-sm`
+
 /**
  * Chip pill geometry minus its corner radius — height, centering, gap, padding,
  * text size. `chipVariants` composes this with its `shape` variant so a raw
  * (non-`cn`) consumer never emits two competing radii; everything else reads
  * {@link chipGeometryClass}, which adds the default radius back.
  */
-export const chipGeometryUnroundedClass = `h-[30px] items-center ${chipContentGap} px-2 text-left text-sm`
+export const chipGeometryUnroundedClass = `${chipHeightClass} ${chipContentGeometryClass}`
 /**
  * Chip pill geometry — height, centering, gap, radius, padding, text size — with
  * NO interactivity (no `cursor-pointer`, no hover). `chipVariants` composes this
diff --git a/packages/emcn/src/components/chip/chip.test.tsx b/packages/emcn/src/components/chip/chip.test.tsx
new file mode 100644
index 00000000000..7ca71576436
--- /dev/null
+++ b/packages/emcn/src/components/chip/chip.test.tsx
@@ -0,0 +1,93 @@
+/** @vitest-environment jsdom */
+import { act, createRef } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Chip, ChipLink, chipVariants } from './chip'
+import { chipGeometryClass, chipGeometryUnroundedClass } from './chip-chrome'
+
+describe('Chip geometry', () => {
+  it.each([undefined, 'lg'] as const)(
+    'uses one height for raw variants, buttons and links at size %s',
+    (size) => {
+      const height = size === 'lg' ? 'h-9' : 'h-[30px]'
+      expect(
+        chipVariants({ size })
+          .split(' ')
+          .filter((token) => token.startsWith('h-'))
+      ).toEqual([height])
+      for (const node of [
+        <Chip key='button' size={size}>
+          Continue
+        </Chip>,
+        <ChipLink key='link' size={size} href='/workspace'>
+          Continue
+        </ChipLink>,
+      ]) {
+        const markup = renderToStaticMarkup(node)
+        expect(markup).toContain(height)
+        expect(markup).not.toContain(size === 'lg' ? 'h-[30px]' : 'h-9')
+        expect(markup).not.toMatch(/ size=/)
+      }
+      expect(chipGeometryUnroundedClass).toContain('h-[30px]')
+      expect(chipGeometryClass).toContain('h-[30px]')
+      expect(chipGeometryClass).toContain('rounded-lg')
+    }
+  )
+
+  it('centers the icon and label without preventing long text from shrinking', () => {
+    const markup = renderToStaticMarkup(
+      <Chip fullWidth align='center' leftAdornment={<svg aria-hidden />}>
+        Continue with your identity provider
+      </Chip>
+    )
+    expect(markup).toContain('justify-center')
+    expect(markup).toContain('flex-initial')
+    expect(markup).toContain('min-w-0')
+    expect(markup).not.toContain('flex-none')
+    expect(markup).not.toMatch(/ align=/)
+  })
+
+  it('preserves native refs, focus, submission, disabled actions and link navigation', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const button = createRef<HTMLButtonElement>()
+    const link = createRef<HTMLAnchorElement>()
+    let submissions = 0
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const render = (disabled: boolean) =>
+      act(() =>
+        root.render(
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              submissions++
+            }}
+          >
+            <Chip ref={button} size='lg' align='center' fullWidth type='submit' disabled={disabled}>
+              <strong>Continue</strong>
+            </Chip>
+            <ChipLink ref={link} size='lg' align='center' href='/workspace'>
+              <strong>Workspace</strong>
+            </ChipLink>
+          </form>
+        )
+      )
+    try {
+      render(false)
+      button.current?.focus()
+      expect(document.activeElement).toBe(button.current)
+      act(() => button.current?.click())
+      expect(submissions).toBe(1)
+      expect(link.current?.getAttribute('href')).toBe('/workspace')
+      render(true)
+      act(() => button.current?.click())
+      expect(submissions).toBe(1)
+      expect(button.current?.disabled).toBe(true)
+    } finally {
+      act(() => root.unmount())
+      container.remove()
+    }
+  })
+})
diff --git a/packages/emcn/src/components/chip/chip.tsx b/packages/emcn/src/components/chip/chip.tsx
index 939e6345594..d8d3fbd2494 100644
--- a/packages/emcn/src/components/chip/chip.tsx
+++ b/packages/emcn/src/components/chip/chip.tsx
@@ -13,17 +13,19 @@ import { cn } from '../../lib/cn'
 import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 import {
   chipActiveSurfaceClass,
+  chipBorderShadowRing,
+  chipContentGeometryClass,
   chipContentIconClass,
   chipContentLabelClass,
   chipFilledFillTokens,
-  chipGeometryUnroundedClass,
   chipHoverSurfaceClass,
   chipPrimaryFillTokens,
   chipRadiusClass,
+  chipSizeClasses,
 } from './chip-chrome'
 
 /**
- * 30px pill — the platform's most common chrome pattern.
+ * 30px pill (36px with `size="lg"` at the default root font size) — the platform's most common chrome pattern.
  *
  * Render targets:
  * - {@link Chip} → `<button>`
@@ -34,12 +36,13 @@ import {
  * The implicit **default** variant is the bare pill — transparent, `--surface-hover` on hover. Omit `variant`
  * to get it (shadcn-style); never write `variant='default'`. Named variants:
  * `filled` (`--surface-5` light / `--surface-4` dark fill, `--surface-hover` hover) — a borderless surface reserved for
- * chip FIELDS/TRIGGERS ({@link ChipInput}/{@link ChipDropdown}/{@link ChipSelect}/{@link ChipDatePicker}), **never `Chip`
+ * chip FIELDS/TRIGGERS ({@link ChipInput}/{@link ChipSelect}/{@link ChipDatePicker}), **never `Chip`
  * itself**; those triggers add the `--border-1` outline themselves via `TRIGGER_BORDER_CLASS`;
  * `primary` (inverse surface), `destructive` (error-token surface), `border-shadow` (raised card-like surface),
  * `border` (the `border-shadow` shadow ring on a transparent surface — an outline drawn purely via box-shadow,
  * no CSS border, no fill); outline (a true border with no shadow or hover fill).
  * `active` renders the default/filled chip in its selected state — `--surface-active`, held through hover.
+ * `align="center"` centers the complete icon/label group while allowing long labels to shrink.
  * `fullWidth` swaps `inline-flex` for block-level `flex`.
  * `shape` picks the corner radius: the implicit `default` is the `rounded-lg` pill; `round` is fully round
  * (`rounded-full`) for a chip sitting in a row of round controls. The radius lives in this variant rather than
@@ -59,7 +62,7 @@ import {
  * {@link chipHoverSurfaceClass}.
  */
 const chipVariants = cva(
-  `group cursor-pointer ${chipGeometryUnroundedClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
+  `group cursor-pointer ${chipContentGeometryClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
   {
     variants: {
       variant: {
@@ -68,12 +71,13 @@ const chipVariants = cva(
         primary: `${chipPrimaryFillTokens} hover-hover:bg-[var(--text-body)] hover-hover:text-[var(--text-inverse)] dark:hover-hover:bg-[var(--text-secondary)] dark:hover-hover:text-[var(--bg)]`,
         destructive:
           'bg-[var(--text-error)] text-white hover-hover:text-white hover-hover:brightness-106',
-        'border-shadow':
-          'bg-[var(--surface-2)] shadow-[0_0_0_1px_rgba(28,40,64,0.08),0_1px_3px_0_rgba(28,40,64,0.1)] hover-hover:bg-[var(--surface-3)] dark:shadow-[0_0_0_1px_var(--border-1),0_1px_3px_0_rgba(0,0,0,0.3)] dark:hover-hover:bg-[var(--surface-4)]',
-        border: `shadow-[0_0_0_1px_rgba(28,40,64,0.08),0_1px_3px_0_rgba(28,40,64,0.1)] ${chipHoverSurfaceClass} dark:shadow-[0_0_0_1px_var(--border-1),0_1px_3px_0_rgba(0,0,0,0.3)]`,
+        'border-shadow': `${chipBorderShadowRing} bg-[var(--surface-2)] hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-4)]`,
+        border: `${chipBorderShadowRing} ${chipHoverSurfaceClass}`,
         outline:
           'border border-[var(--border)] bg-transparent hover-hover:border-[color-mix(in_srgb,var(--border)_80%,var(--text-secondary))]',
       },
+      size: chipSizeClasses,
+      align: { start: '', center: 'justify-center' },
       shape: { default: chipRadiusClass, round: 'rounded-full' },
       active: { true: '', false: '' },
       fullWidth: { true: 'flex w-full', false: 'inline-flex' },
@@ -82,7 +86,14 @@ const chipVariants = cva(
       { variant: ['default', 'filled'], active: false, className: chipHoverSurfaceClass },
       { variant: ['default', 'filled'], active: true, className: chipActiveSurfaceClass },
     ],
-    defaultVariants: { variant: 'default', shape: 'default', active: false, fullWidth: false },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      align: 'start',
+      shape: 'default',
+      active: false,
+      fullWidth: false,
+    },
   }
 )
 
@@ -116,6 +127,7 @@ interface ChipBaseProps extends Omit<VariantProps<typeof chipVariants>, 'variant
  */
 function ChipContent({
   variant,
+  align,
   leftIcon: LeftIcon,
   leftAdornment,
   rightIcon: RightIcon,
@@ -124,7 +136,11 @@ function ChipContent({
 }: ChipBaseProps) {
   const isInverse = variant === 'primary' || variant === 'destructive'
   const iconClass = cn(chipContentIconClass, isInverse && 'text-current')
-  const labelClass = cn(chipContentLabelClass, 'flex-1', isInverse && 'text-current')
+  const labelClass = cn(
+    chipContentLabelClass,
+    align === 'center' ? 'flex-initial' : 'flex-1',
+    isInverse && 'text-current'
+  )
   const textLabel =
     typeof children === 'string' || typeof children === 'number' ? String(children) : null
   return (
@@ -151,6 +167,8 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
   {
     className,
     variant,
+    size,
+    align,
     shape,
     active,
     fullWidth,
@@ -168,11 +186,12 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
     <button
       ref={ref}
       type={type ?? 'button'}
-      className={cn(chipVariants({ variant, shape, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, size, align, shape, active, fullWidth }), className)}
       {...props}
     >
       <ChipContent
         variant={variant}
+        align={align}
         leftIcon={leftIcon}
         leftAdornment={leftAdornment}
         rightIcon={rightIcon}
@@ -196,6 +215,8 @@ const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
   {
     className,
     variant,
+    size,
+    align,
     shape,
     active,
     fullWidth,
@@ -211,11 +232,12 @@ const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
   return (
     <Link
       ref={ref}
-      className={cn(chipVariants({ variant, shape, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, size, align, shape, active, fullWidth }), className)}
       {...props}
     >
       <ChipContent
         variant={variant}
+        align={align}
         leftIcon={leftIcon}
         leftAdornment={leftAdornment}
         rightIcon={rightIcon}
diff --git a/packages/emcn/src/components/chip/segmented-control.ts b/packages/emcn/src/components/chip/segmented-control.ts
index 183a4954d70..c9056325b7e 100644
--- a/packages/emcn/src/components/chip/segmented-control.ts
+++ b/packages/emcn/src/components/chip/segmented-control.ts
@@ -12,10 +12,9 @@ export const segmentedControlVariants = cva(
   ),
   {
     variants: {
-      gap: { none: 'gap-0', sm: 'gap-0.5' },
       size: { default: '', compact: 'h-[22px]' },
     },
-    defaultVariants: { gap: 'none', size: 'default' },
+    defaultVariants: { size: 'default' },
   }
 )
 
diff --git a/packages/emcn/src/components/code/code.tsx b/packages/emcn/src/components/code/code.tsx
index 2e540301caa..2f0a42a5781 100644
--- a/packages/emcn/src/components/code/code.tsx
+++ b/packages/emcn/src/components/code/code.tsx
@@ -13,6 +13,7 @@ import {
 import { escapeRegExp } from '@sim/utils/string'
 import { findWorkflowReferenceTokens } from '@sim/utils/workflow-references'
 import { useVirtualizer } from '@tanstack/react-virtual'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { ChevronRight } from '../../icons'
 import { cn } from '../../lib/cn'
 import './code.css'
@@ -856,6 +857,18 @@ function applySearchHighlightingToLine(
  */
 type CodeViewerDensity = 'default' | 'compact'
 
+/** Container appearances shared by the standard and virtualized viewers. */
+export const codeViewerAppearanceVariants = cva('', {
+  variants: {
+    appearance: {
+      default: '',
+      inspection: 'rounded-md border-0 bg-[var(--surface-4)]! dark:bg-[var(--surface-3)]!',
+      flat: 'rounded-none border-0 bg-[var(--bg)] dark:bg-[var(--bg)]',
+    },
+  },
+  defaultVariants: { appearance: 'default' },
+})
+
 interface CodeViewerProps {
   /** Code content to display */
   code: string
@@ -865,6 +878,8 @@ interface CodeViewerProps {
   language?: 'javascript' | 'json' | 'python' | 'bash' | 'toml'
   /** Additional CSS classes for the container */
   className?: string
+  /** Container appearance for code inspected in logs/previews or on flat surfaces. */
+  appearance?: NonNullable<VariantProps<typeof codeViewerAppearanceVariants>['appearance']>
   /** Visual density for read-only code. */
   density?: CodeViewerDensity
   /** Highlight Sim `{{ENV}}` and `<block.output>` references with the platform accent. */
@@ -948,6 +963,7 @@ type ViewerInnerProps = {
   language: 'javascript' | 'json' | 'python' | 'bash' | 'toml'
   /** Additional CSS classes for the container */
   className?: string
+  appearance: NonNullable<CodeViewerProps['appearance']>
   /** Visual density for read-only code. */
   density: CodeViewerDensity
   highlightWorkflowReferences: boolean
@@ -978,6 +994,7 @@ const VirtualizedViewerInner = memo(function VirtualizedViewerInner({
   showGutter,
   language,
   className,
+  appearance,
   density,
   highlightWorkflowReferences,
   paddingLeft,
@@ -1147,6 +1164,7 @@ const VirtualizedViewerInner = memo(function VirtualizedViewerInner({
         wrapText ? 'overflow-x-hidden' : 'overflow-x-auto',
         'overflow-y-auto',
         'dark:bg-[var(--code-bg)]',
+        codeViewerAppearanceVariants({ appearance }),
         className
       )}
       style={{ height: containerHeight }}
@@ -1196,6 +1214,7 @@ const ViewerInner = memo(function ViewerInner({
   showGutter,
   language,
   className,
+  appearance,
   density,
   highlightWorkflowReferences,
   paddingLeft,
@@ -1309,7 +1328,7 @@ const ViewerInner = memo(function ViewerInner({
   // Grid-based rendering for gutter alignment (works with wrap)
   if (showGutter) {
     return (
-      <Container className={className}>
+      <Container className={cn(codeViewerAppearanceVariants({ appearance }), className)}>
         <Content className='code-editor-theme' editorRef={contentRef}>
           <div
             style={{
@@ -1370,7 +1389,7 @@ const ViewerInner = memo(function ViewerInner({
 
   // Simple display without gutter
   return (
-    <Container className={className}>
+    <Container className={cn(codeViewerAppearanceVariants({ appearance }), className)}>
       <Content className='code-editor-theme' editorRef={contentRef}>
         <pre
           className={cn(
@@ -1417,6 +1436,7 @@ function Viewer({
   showGutter = false,
   language = 'json',
   className,
+  appearance = 'default',
   density = 'default',
   highlightWorkflowReferences = false,
   paddingLeft = 0,
@@ -1434,6 +1454,7 @@ function Viewer({
     showGutter,
     language,
     className,
+    appearance,
     density,
     highlightWorkflowReferences,
     paddingLeft,
diff --git a/packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx b/packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx
new file mode 100644
index 00000000000..6f87adb0e9d
--- /dev/null
+++ b/packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx
@@ -0,0 +1,98 @@
+/** @vitest-environment jsdom */
+import { act, type ReactNode, useState } from 'react'
+import { CollapsibleCard } from '@sim/emcn'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+let container: HTMLDivElement | null = null
+let root: Root | null = null
+
+function mount(children: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(children))
+  return container
+}
+
+afterEach(() => {
+  if (root) act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+})
+
+describe('CollapsibleCard', () => {
+  it('toggles controlled content by click, Enter and Space and forwards root attributes', () => {
+    function Example() {
+      const [collapsed, setCollapsed] = useState(true)
+      return (
+        <CollapsibleCard
+          title='Condition'
+          data-filter-id='condition-1'
+          collapsed={collapsed}
+          onToggleCollapse={() => setCollapsed((value) => !value)}
+        >
+          <input aria-label='Value' defaultValue='Example' />
+        </CollapsibleCard>
+      )
+    }
+    const mountedContainer = mount(<Example />)
+    const card = mountedContainer.querySelector('[data-filter-id="condition-1"]')
+    if (!card) throw new Error('Missing condition card')
+    const trigger = card.querySelector<HTMLElement>('[role="button"]')
+    if (!trigger) throw new Error('Missing collapse trigger')
+    expect(trigger.getAttribute('aria-expanded')).toBe('false')
+    expect(card.querySelector('input')).toBeNull()
+    act(() => trigger.click())
+    expect(trigger.getAttribute('aria-expanded')).toBe('true')
+    expect(card.querySelector('input')?.value).toBe('Example')
+    act(() => trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+    expect(card.querySelector('input')).toBeNull()
+    act(() => trigger.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true })))
+    expect(card.querySelector('input')).not.toBeNull()
+  })
+
+  it('keeps enabled and disabled actions outside the collapse target', () => {
+    const toggle = vi.fn()
+    const add = vi.fn()
+    const remove = vi.fn()
+    const parentClick = vi.fn()
+    const mountedContainer = mount(
+      <CollapsibleCard
+        title={<span>Long condition name</span>}
+        badge={<span>Text</span>}
+        collapsed
+        onToggleCollapse={toggle}
+        onClick={parentClick}
+        actions={
+          <>
+            <button type='button' onClick={add}>
+              Add
+            </button>
+            <button type='button' disabled onClick={remove}>
+              Delete
+            </button>
+          </>
+        }
+      >
+        Content
+      </CollapsibleCard>
+    )
+    const trigger = mountedContainer.querySelector('[role="button"]')
+    const [addButton, deleteButton] = mountedContainer.querySelectorAll('button')
+    if (!trigger || !addButton || !deleteButton) throw new Error('Missing card actions')
+    expect(trigger.contains(addButton)).toBe(false)
+    act(() => {
+      addButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      addButton.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
+      addButton.click()
+      deleteButton.click()
+    })
+    expect(add).toHaveBeenCalledTimes(1)
+    expect(remove).not.toHaveBeenCalled()
+    expect(toggle).not.toHaveBeenCalled()
+    expect(parentClick).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/emcn/src/components/collapsible-card/collapsible-card.tsx b/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
index 9643feed8e1..0811abcfc22 100644
--- a/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
+++ b/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
@@ -5,51 +5,69 @@ import { cn } from '../../lib/cn'
 import { handleKeyboardActivation } from '../../lib/keyboard'
 import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 
-export interface CollapsibleCardProps {
+export interface CollapsibleCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
   /** Header label rendered with the standard fade-only overflow treatment. */
   title: React.ReactNode
   /** Optional trailing header content, e.g. a type `Badge`. */
   badge?: React.ReactNode
+  /** Header actions, outside the collapse target and arranged with standard spacing. */
+  actions?: React.ReactNode
   collapsed: boolean
   /** Selection state when the header also toggles a selection. */
   selected?: boolean
   onToggleCollapse: () => void
   /** Body content, shown when expanded. */
   children: React.ReactNode
-  className?: string
 }
 
 /**
  * A collapsible field card: a `--surface-4` header (click / keyboard to toggle)
  * with a fade-clipped title + optional badge, over a `--surface-2` body. Shared by
  * the workflow input-mapping rows and the enrichment output-column config.
+ *
+ * @example
+ * <CollapsibleCard title='Condition' collapsed={collapsed} onToggleCollapse={toggle}
+ *   actions={<Button onClick={addCondition}>Add condition</Button>}>
+ *   {fields}
+ * </CollapsibleCard>
  */
 export function CollapsibleCard({
   title,
   badge,
+  actions,
   collapsed,
   selected,
   onToggleCollapse,
   children,
   className,
+  ...props
 }: CollapsibleCardProps) {
   return (
     <div
+      {...props}
       className={cn(
         'rounded-sm border border-[var(--border-1)]',
         collapsed ? 'overflow-hidden' : 'overflow-visible',
         className
       )}
     >
-      <div
-        role='button'
-        aria-pressed={selected}
-        tabIndex={0}
-        className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-        onClick={onToggleCollapse}
-        onKeyDown={(event) => handleKeyboardActivation(event, onToggleCollapse)}
-      >
-        <div className='flex min-w-0 flex-1 items-center gap-2'>
+      <div className='flex items-center justify-between rounded-t-[4px] bg-[var(--surface-4)]'>
+        <div
+          role='button'
+          tabIndex={0}
+          aria-expanded={!collapsed}
+          aria-pressed={selected}
+          className={cn(
+            'flex min-w-0 flex-1 cursor-pointer items-center gap-2 px-2.5 py-[5px]',
+            actions && 'pr-2'
+          )}
+          onClick={onToggleCollapse}
+          onKeyDown={(event) => {
+            if (event.target !== event.currentTarget) return
+            handleKeyboardActivation(event, onToggleCollapse)
+          }}
+        >
           {typeof title === 'string' || typeof title === 'number' ? (
             <OverflowText
               label={String(title)}
@@ -65,6 +83,15 @@ export function CollapsibleCard({
           )}
           {badge}
         </div>
+        {actions && (
+          <div
+            role='presentation'
+            className='flex shrink-0 items-center gap-2 py-[5px] pr-2.5'
+            onClick={(event) => event.stopPropagation()}
+          >
+            {actions}
+          </div>
+        )}
       </div>
       {!collapsed && (
         <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
diff --git a/packages/emcn/src/components/combobox/combobox.tsx b/packages/emcn/src/components/combobox/combobox.tsx
index e77eeda0007..00034f40b2e 100644
--- a/packages/emcn/src/components/combobox/combobox.tsx
+++ b/packages/emcn/src/components/combobox/combobox.tsx
@@ -28,16 +28,12 @@ const comboboxVariants = cva(
   'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
-      variant: {
-        default: '',
-      },
       size: {
         sm: 'py-1.5 text-caption',
         md: 'py-1.5 text-sm',
       },
     },
     defaultVariants: {
-      variant: 'default',
       size: 'md',
     },
   }
@@ -185,7 +181,6 @@ const Combobox = memo(
     (
       {
         className,
-        variant,
         size,
         options,
         value,
@@ -866,7 +861,7 @@ const Combobox = memo(
                     aria-disabled={disabled}
                     tabIndex={disabled ? -1 : 0}
                     className={cn(
-                      comboboxVariants({ variant, size }),
+                      comboboxVariants({ size }),
                       'relative cursor-pointer items-center justify-between',
                       disabled && 'cursor-not-allowed opacity-50',
                       className
diff --git a/packages/emcn/src/components/composer-action-button/composer-action-button.tsx b/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
index 806f128a179..d10a9e27b1b 100644
--- a/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
+++ b/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
@@ -26,7 +26,8 @@ export const composerActionButtonVariants = cva('rounded-full p-0', {
   defaultVariants: { size: 'md', active: true },
 })
 
-export interface ComposerActionButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
+export interface ComposerActionButtonProps
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize' | 'shape'> {
   /** Accessible name for the caller's icon action. */
   'aria-label': string
   /** 28px by default; `sm` retains compact chat's 22px geometry and hover treatment. */
diff --git a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
index ae0f078db0b..7312b27de3f 100644
--- a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
@@ -22,16 +22,14 @@
 
 import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { RowActions, rowActionsGroupClass } from '@sim/emcn'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Check, ChevronRight, Circle, Search } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipContentGap, chipFieldSurfaceClass, chipGeometryClass } from '../chip/chip-chrome'
 import { InsideModalContext } from '../modal/modal'
 import { OverflowText, type OverflowTextProps } from '../overflow-text/overflow-text'
-
-const ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
+import { POPOVER_ANIMATION_CLASSES } from '../popover/popover-animation'
+import { RowActions, rowActionsGroupClass } from '../row-actions/row-actions'
 
 /**
  * Menu row geometry. Rows sit 2px flatter than the 30px chip pill — the menu is a
@@ -264,7 +262,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.SubContent
       ref={ref}
-      className={cn(ANIMATION_CLASSES, CONTENT_BASE_CLASSES, 'max-w-[280px]', className)}
+      className={cn(POPOVER_ANIMATION_CLASSES, CONTENT_BASE_CLASSES, 'max-w-[280px]', className)}
       {...props}
       data-native-surface-overlay=''
     />
@@ -298,7 +296,7 @@ const DropdownMenuContent = React.forwardRef<
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
-      className={cn(ANIMATION_CLASSES, CONTENT_BASE_CLASSES, 'max-w-[220px]', className)}
+      className={cn(POPOVER_ANIMATION_CLASSES, CONTENT_BASE_CLASSES, 'max-w-[220px]', className)}
       {...props}
       data-native-surface-overlay=''
     />
@@ -486,7 +484,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-default select-none items-center ${MENU_ROW_RADIUS_CLASS} whitespace-nowrap pr-2 pl-7 text-[var(--text-body)] text-small outline-hidden ${MENU_ROW_TRANSITION_CLASS} ${MENU_ROW_HIGHLIGHT_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50`,
+      `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-default select-none items-center ${chipContentGap} ${MENU_ROW_RADIUS_CLASS} whitespace-nowrap pr-2 pl-7 text-[var(--text-body)] text-small outline-hidden ${MENU_ROW_TRANSITION_CLASS} ${MENU_ROW_HIGHLIGHT_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50`,
       className
     )}
     checked={checked}
diff --git a/packages/emcn/src/components/field-divider/field-divider.dom.test.tsx b/packages/emcn/src/components/field-divider/field-divider.dom.test.tsx
new file mode 100644
index 00000000000..572b26f1787
--- /dev/null
+++ b/packages/emcn/src/components/field-divider/field-divider.dom.test.tsx
@@ -0,0 +1,65 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { FieldDisclosure } from './field-divider'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+afterEach(() => {
+  act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+})
+
+describe('FieldDisclosure', () => {
+  it('leaves expansion to the caller and does not submit its surrounding form', () => {
+    const onClick = vi.fn()
+    const onSubmit = vi.fn((event) => event.preventDefault())
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+    const render = (expanded: boolean, disabled = false) => (
+      <form onSubmit={onSubmit}>
+        <FieldDisclosure
+          expanded={expanded}
+          disabled={disabled}
+          onClick={onClick}
+          aria-controls='additional-fields'
+        >
+          {expanded ? 'Hide additional fields' : 'Show additional fields'}
+        </FieldDisclosure>
+        <div id='additional-fields' hidden={!expanded}>
+          Additional fields
+        </div>
+      </form>
+    )
+    act(() => root?.render(render(false)))
+    const button = container.querySelector('button')
+    if (!button) throw new Error('Missing field disclosure button')
+    expect(button.getAttribute('aria-expanded')).toBe('false')
+    expect(button.getAttribute('aria-controls')).toBe('additional-fields')
+    act(() => {
+      button.focus()
+      button.click()
+    })
+    expect(document.activeElement).toBe(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(button.getAttribute('aria-expanded')).toBe('false')
+
+    act(() => root?.render(render(true)))
+    expect(button.getAttribute('aria-expanded')).toBe('true')
+    expect(button.textContent).toBe('Hide additional fields')
+    expect(container.querySelector<HTMLElement>('#additional-fields')?.hidden).toBe(false)
+
+    act(() => root?.render(render(true, true)))
+    act(() => button.click())
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/emcn/src/components/field-divider/field-divider.tsx b/packages/emcn/src/components/field-divider/field-divider.tsx
index 7408a21360f..9e11f4b5a10 100644
--- a/packages/emcn/src/components/field-divider/field-divider.tsx
+++ b/packages/emcn/src/components/field-divider/field-divider.tsx
@@ -1,4 +1,6 @@
+import { ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
+import { Button, type ButtonProps } from '../button/button'
 
 const DASHED_DIVIDER_STYLE = {
   backgroundImage:
@@ -54,4 +56,41 @@ function FieldDivider({ className, subblockMarker = false, ...props }: FieldDivi
   )
 }
 
-export { DashedDividerLine, FieldDivider }
+export interface FieldDisclosureProps
+  extends Pick<ButtonProps, 'onClick' | 'disabled' | 'aria-controls' | 'children'> {
+  expanded: boolean
+}
+
+/**
+ * Controlled disclosure between field groups. The caller owns the label,
+ * expanded state and fields; this supplies the divider lines and rotating chevron.
+ *
+ * @example
+ * <FieldDisclosure expanded={expanded} onClick={onToggle}>
+ *   {expanded ? 'Hide additional fields' : 'Show additional fields'}
+ * </FieldDisclosure>
+ */
+function FieldDisclosure({ expanded, children, ...props }: FieldDisclosureProps) {
+  return (
+    <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
+      <DashedDividerLine className='flex-1' />
+      <Button
+        {...props}
+        type='button'
+        variant='ghost'
+        size={null}
+        focusRing='muted'
+        aria-expanded={expanded}
+        className='gap-1.5 whitespace-nowrap p-0 text-small'
+      >
+        {children}
+        <ChevronDown
+          className={cn('size-[14px] transition-transform duration-200', expanded && 'rotate-180')}
+        />
+      </Button>
+      <DashedDividerLine className='flex-1' />
+    </div>
+  )
+}
+
+export { DashedDividerLine, FieldDisclosure, FieldDivider }
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 975d060b136..79941cb86e4 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -1,10 +1,10 @@
 export { Avatar, AvatarFallback, AvatarImage } from './avatar/avatar'
 export { Badge, type BadgeProps, badgeVariants } from './badge/badge'
 export { Banner } from './banner/banner'
+export { BulkActionBar, type BulkActionBarProps } from './bulk-action-bar/bulk-action-bar'
 export {
   BulkActionButton,
   type BulkActionButtonProps,
-  bulkActionButtonVariants,
 } from './bulk-action-button/bulk-action-button'
 export { Button, buttonVariants } from './button/button'
 export {
@@ -35,6 +35,7 @@ export {
   chipFilledSurfaceTokens,
   chipGeometryClass,
   chipGeometryUnroundedClass,
+  chipHeightClass,
   chipHoverSurfaceClass,
   chipIconSlotClass,
   chipPrimaryFillTokens,
@@ -55,16 +56,11 @@ export {
   type ChipCopyInputProps,
 } from './chip-copy-input/chip-copy-input'
 export { ChipDatePicker } from './chip-date-picker/chip-date-picker'
-export {
-  ChipDropdown,
-  type ChipDropdownOption,
-  type ChipDropdownProps,
-} from './chip-dropdown/chip-dropdown'
 export {
   ChipEmailsInput,
   type ChipEmailsInputProps,
 } from './chip-emails-input/chip-emails-input'
-export { ChipInput, type ChipInputProps } from './chip-input/chip-input'
+export { ChipInput, type ChipInputProps, chipInputVariants } from './chip-input/chip-input'
 export {
   type ChipConfirmAction,
   type ChipConfirmDefaultAction,
@@ -100,6 +96,7 @@ export {
   type ChipModalTab,
   ChipModalTabs,
   type ChipModalTabsProps,
+  chipModalFieldVariants,
   focusChipModalContent,
 } from './chip-modal/chip-modal'
 export { ChipSelect, type ChipSelectOption, type ChipSelectProps } from './chip-select/chip-select'
@@ -154,7 +151,12 @@ export {
   dropdownMenuRowClass,
 } from './dropdown-menu/dropdown-menu'
 export { Expandable, ExpandableContent } from './expandable/expandable'
-export { DashedDividerLine, FieldDivider } from './field-divider/field-divider'
+export {
+  DashedDividerLine,
+  FieldDisclosure,
+  type FieldDisclosureProps,
+  FieldDivider,
+} from './field-divider/field-divider'
 export { Info } from './info/info'
 export {
   InfoCard,
@@ -165,7 +167,13 @@ export {
   type InfoCardProps,
 } from './info-card/info-card'
 export { Input, type InputProps } from './input/input'
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp/input-otp'
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+  type InputOTPSlotProps,
+} from './input-otp/input-otp'
 export { Label } from './label/label'
 export { Lightbox, type LightboxProps } from './lightbox/lightbox'
 export { focusFirstTextInput, focusFirstTextInputIn } from './modal/auto-focus'
@@ -198,6 +206,11 @@ export {
   overflowTextClipClass,
   overflowTextFadeClass,
 } from './overflow-text/overflow-text'
+export {
+  OverlayActionButton,
+  type OverlayActionButtonProps,
+  overlayActionButtonVariants,
+} from './overlay-action-button/overlay-action-button'
 export { pageHeadingClassName } from './page-heading/page-heading'
 export {
   Popover,
@@ -215,6 +228,10 @@ export {
 } from './popover/popover'
 export { POPOVER_ANIMATION_CLASSES } from './popover/popover-animation'
 export { ProgressItem } from './progress-item/progress-item'
+export {
+  ResourceEmptyState,
+  type ResourceEmptyStateProps,
+} from './resource-empty-state/resource-empty-state'
 export { RowActions, type RowActionsProps, rowActionsGroupClass } from './row-actions/row-actions'
 export { SecretInput } from './secret-input/secret-input'
 export { SecretReveal } from './secret-reveal/secret-reveal'
diff --git a/packages/emcn/src/components/info-card/info-card.tsx b/packages/emcn/src/components/info-card/info-card.tsx
index 11fd521792c..e2ed07e12be 100644
--- a/packages/emcn/src/components/info-card/info-card.tsx
+++ b/packages/emcn/src/components/info-card/info-card.tsx
@@ -22,6 +22,7 @@
 import * as React from 'react'
 import { Check } from '../../icons'
 import { cn } from '../../lib/cn'
+import { chipFilledSurfaceTokens, chipRadiusClass } from '../chip/chip-chrome'
 
 export interface InfoCardProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -31,14 +32,7 @@ export interface InfoCardProps extends React.HTMLAttributes<HTMLDivElement> {}
  * `ChipModalField`.
  */
 const InfoCard = React.forwardRef<HTMLDivElement, InfoCardProps>(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-4)]',
-      className
-    )}
-    {...props}
-  />
+  <div ref={ref} className={cn(chipRadiusClass, chipFilledSurfaceTokens, className)} {...props} />
 ))
 
 InfoCard.displayName = 'InfoCard'
diff --git a/packages/emcn/src/components/input-otp/input-otp.test.tsx b/packages/emcn/src/components/input-otp/input-otp.test.tsx
new file mode 100644
index 00000000000..9d636db5353
--- /dev/null
+++ b/packages/emcn/src/components/input-otp/input-otp.test.tsx
@@ -0,0 +1,70 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from './input-otp'
+
+let root: Root
+let host: HTMLDivElement
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+  )
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+    vi.runOnlyPendingTimers()
+  })
+  host.remove()
+  vi.useRealTimers()
+})
+
+function renderOtp(invalid: boolean) {
+  act(() => {
+    root.render(
+      <InputOTP maxLength={2} value='' onChange={vi.fn()} aria-invalid={invalid}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} invalid={invalid} data-testid='first-slot' />
+          <InputOTPSlot index={1} invalid={invalid} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+  })
+}
+
+describe('InputOTPSlot invalid state', () => {
+  it('keeps the standard border when valid', () => {
+    renderOtp(false)
+    const slot = host.querySelector('[data-testid="first-slot"]')
+    expect(slot?.classList.contains('border-[var(--border-1)]')).toBe(true)
+    expect(slot?.classList.contains('border-[var(--text-error)]')).toBe(false)
+    expect(host.querySelector('input')?.getAttribute('aria-invalid')).toBe('false')
+  })
+
+  it('keeps the error border while the active slot has a focus ring', () => {
+    renderOtp(true)
+    const input = host.querySelector('input')
+    expect(input?.getAttribute('aria-invalid')).toBe('true')
+
+    act(() => input?.focus())
+    const slot = host.querySelector('[data-testid="first-slot"]')
+    expect(slot?.classList.contains('border-[var(--text-error)]')).toBe(true)
+    expect(slot?.classList.contains('ring-1')).toBe(true)
+    expect(slot?.classList.contains('border-[var(--text-muted)]')).toBe(false)
+  })
+})
diff --git a/packages/emcn/src/components/input-otp/input-otp.tsx b/packages/emcn/src/components/input-otp/input-otp.tsx
index cf5da3a0569..be5b5322344 100644
--- a/packages/emcn/src/components/input-otp/input-otp.tsx
+++ b/packages/emcn/src/components/input-otp/input-otp.tsx
@@ -66,32 +66,39 @@ InputOTPGroup.displayName = 'InputOTPGroup'
  *
  * Uses emcn design tokens for consistent styling with the Input component.
  */
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+export interface InputOTPSlotProps extends React.ComponentPropsWithoutRef<'div'> {
+  /** Zero-based position of this slot in the OTP input. */
+  index: number
+  /** Keep the error border visible even while this slot is active. */
+  invalid?: boolean
+}
+
+const InputOTPSlot = React.forwardRef<React.ElementRef<'div'>, InputOTPSlotProps>(
+  ({ index, invalid = false, className, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext)
+    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
 
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'relative flex size-12 items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] text-[var(--text-primary)] text-lg transition-colors',
-        isActive && 'z-10 border-[var(--text-muted)] ring-1 ring-[var(--text-muted)]',
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <div className='h-6 w-px animate-caret-blink bg-[var(--text-primary)] duration-1000 motion-reduce:animate-none' />
-        </div>
-      )}
-    </div>
-  )
-})
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative flex size-12 items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] text-[var(--text-primary)] text-lg transition-colors',
+          isActive && 'z-10 border-[var(--text-muted)] ring-1 ring-[var(--text-muted)]',
+          invalid && 'border-[var(--text-error)]',
+          className
+        )}
+        {...props}
+      >
+        {char}
+        {hasFakeCaret && (
+          <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
+            <div className='h-6 w-px animate-caret-blink bg-[var(--text-primary)] duration-1000 motion-reduce:animate-none' />
+          </div>
+        )}
+      </div>
+    )
+  }
+)
 InputOTPSlot.displayName = 'InputOTPSlot'
 
 /**
diff --git a/packages/emcn/src/components/modal/modal.tsx b/packages/emcn/src/components/modal/modal.tsx
index bbf47f5e36e..6296756365b 100644
--- a/packages/emcn/src/components/modal/modal.tsx
+++ b/packages/emcn/src/components/modal/modal.tsx
@@ -235,7 +235,7 @@ function hasOpenFloatingLayer() {
 
 /**
  * Clears a stale `pointer-events: none` lock Radix can leave on `<body>` when
- * this dialog closes while a nested modal popper (an open `ChipDropdown` /
+ * this dialog closes while a nested modal popper (an open `ChipSelect` /
  * `Select`) is still open: both layers' body locks tear down in the same tick
  * and the release is lost, freezing the page so nothing is clickable.
  *
@@ -266,7 +266,7 @@ function ModalBodyLockReleaser() {
 /**
  * Whether the current subtree renders inside a `ModalContent`.
  *
- * Floating EMCN controls (e.g. `ChipDropdown`) read this to switch their
+ * Floating EMCN controls (e.g. `ChipSelect`) read this to switch their
  * Radix popper to modal behavior. A non-modal popper portaled to `body`
  * underneath a modal dialog inherits the dialog's `pointer-events: none`
  * body lock and its outside-scroll lock, leaving the popper unclickable and
diff --git a/packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx b/packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx
new file mode 100644
index 00000000000..1ddbac6fd41
--- /dev/null
+++ b/packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx
@@ -0,0 +1,121 @@
+/** @vitest-environment jsdom */
+import { act, createRef, type ReactNode } from 'react'
+import { Button, OverlayActionButton, Tooltip } from '@sim/emcn'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(children: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(children))
+  return container
+}
+
+afterEach(() => {
+  if (root) act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+  vi.useRealTimers()
+})
+
+/** Pre-migration recipes from log details and the deployment preview. */
+const PREVIOUS = [
+  {
+    name: 'default 20px adaptive action',
+    props: {},
+    variant: 'default',
+    className:
+      'size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]',
+  },
+  {
+    name: '28px adaptive action',
+    props: { size: 'md' },
+    variant: 'default',
+    className:
+      'size-[28px] cursor-pointer bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]',
+  },
+] as const
+
+describe('OverlayActionButton', () => {
+  it.each(PREVIOUS)(
+    'preserves the previous $name visual treatment',
+    ({ props, variant, className }) => {
+      const view = mount(
+        <>
+          <Button variant={variant} aria-label='Copy' className={`${className} shrink-0`}>
+            <svg className='size-[10px]' aria-hidden='true' />
+          </Button>
+          <OverlayActionButton {...props} aria-label='Copy' className='shrink-0'>
+            <svg className='size-[10px]' aria-hidden='true' />
+          </OverlayActionButton>
+        </>
+      )
+      const [previous, current] = view.querySelectorAll('button')
+      /** The old border-1 token aliases border; its hover border repeats the resting border. */
+      for (const button of [previous, current]) {
+        button.className = button.className
+          .replaceAll('--border-1', '--border')
+          .split(/\s+/)
+          .filter((token) => token !== 'hover-hover:border-[var(--border)]')
+          .sort()
+          .join(' ')
+      }
+      expect(current.outerHTML).toBe(previous.outerHTML)
+    }
+  )
+
+  it('forwards refs and native props through a tooltip and suppresses disabled clicks', () => {
+    vi.useFakeTimers()
+    const ref = createRef<HTMLButtonElement>()
+    const onClick = vi.fn()
+    const onKeyDown = vi.fn()
+    const action = (disabled: boolean) => (
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <OverlayActionButton
+            ref={ref}
+            type='button'
+            aria-label='Copy'
+            data-action='copy'
+            disabled={disabled}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+          />
+        </Tooltip.Trigger>
+        <Tooltip.Content>Copy output</Tooltip.Content>
+      </Tooltip.Root>
+    )
+    const view = mount(action(false))
+    const button = view.querySelector('button')
+    if (!button) throw new Error('Button did not render')
+    expect(view.querySelectorAll('button')).toHaveLength(1)
+    expect(ref.current).toBe(button)
+    expect(button.type).toBe('button')
+    expect(button.dataset.action).toBe('copy')
+    expect(button.getAttribute('aria-label')).toBe('Copy')
+    act(() =>
+      button.dispatchEvent(
+        new MouseEvent('pointerover', { bubbles: true, clientX: 200, clientY: 200 })
+      )
+    )
+    expect(document.querySelector('[role="tooltip"]')?.textContent).toBe('Copy output')
+    act(() => button.focus())
+    expect(document.activeElement).toBe(button)
+    const keyEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+    act(() => button.dispatchEvent(keyEvent))
+    expect(onKeyDown).toHaveBeenCalledTimes(1)
+    expect(onKeyDown.mock.calls[0][0].nativeEvent).toBe(keyEvent)
+    act(() => button.click())
+    expect(onClick).toHaveBeenCalledTimes(1)
+    act(() => root?.render(action(true)))
+    expect(button.disabled).toBe(true)
+    act(() => button.click())
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx b/packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx
new file mode 100644
index 00000000000..fd82dbcdab6
--- /dev/null
+++ b/packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx
@@ -0,0 +1,49 @@
+import { forwardRef } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/cn'
+import { Button, type ButtonProps } from '../button/button'
+
+/** Transparent, bordered icon action over code or preview content. */
+export const overlayActionButtonVariants = cva(
+  'cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-5)]',
+  {
+    variants: {
+      size: {
+        sm: 'size-[20px]',
+        md: 'size-[28px]',
+      },
+    },
+    defaultVariants: { size: 'sm' },
+  }
+)
+
+export interface OverlayActionButtonProps
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
+  /** Accessible name for the icon action; tooltip content is supplied separately. */
+  'aria-label': string
+  /** 20px by default; `md` provides the 28px preview action. */
+  size?: NonNullable<VariantProps<typeof overlayActionButtonVariants>['size']>
+}
+
+/**
+ * Icon action floating over content. Owns geometry, border, blur and hover treatment;
+ * callers supply positioning, icons, labels and command behavior.
+ * Hover uses surface-3 in light mode and surface-5 in dark mode.
+ * Forwards the native button ref and props for tooltip `asChild` composition.
+ * Native form behavior is inherited from Button; pass `type` when it must be explicit.
+ *
+ * @example <OverlayActionButton aria-label='Copy' type='button' onClick={onCopy}><Clipboard className='size-[10px]' /></OverlayActionButton>
+ */
+export const OverlayActionButton = forwardRef<HTMLButtonElement, OverlayActionButtonProps>(
+  ({ size, className, ...props }, ref) => (
+    <Button
+      {...props}
+      ref={ref}
+      variant='ghost'
+      size='md'
+      className={cn(overlayActionButtonVariants({ size }), className)}
+    />
+  )
+)
+
+OverlayActionButton.displayName = 'OverlayActionButton'
diff --git a/packages/emcn/src/components/progress-item/progress-item.tsx b/packages/emcn/src/components/progress-item/progress-item.tsx
index fe08f64dde3..1a26366f883 100644
--- a/packages/emcn/src/components/progress-item/progress-item.tsx
+++ b/packages/emcn/src/components/progress-item/progress-item.tsx
@@ -1,20 +1,8 @@
 import { forwardRef, type HTMLAttributes } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
 import { Check, Loader, Square, TriangleAlert, X } from '../../icons'
 import { cn } from '../../lib/cn'
 
-const progressItemVariants = cva('flex items-start gap-2.5 px-3 py-3 text-[12px]', {
-  variants: {
-    status: {
-      pending: '',
-      success: '',
-      error: '',
-    },
-  },
-  defaultVariants: { status: 'pending' },
-})
-
-type ProgressStatus = NonNullable<VariantProps<typeof progressItemVariants>['status']>
+type ProgressStatus = 'pending' | 'success' | 'error'
 
 const ICON_CLASS = 'mt-px size-[14px] shrink-0'
 
@@ -26,9 +14,7 @@ function StatusIcon({ status }: { status: ProgressStatus }) {
   return <Loader animate className={cn(ICON_CLASS, 'text-[var(--text-icon)]')} />
 }
 
-export interface ProgressItemProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,
-    VariantProps<typeof progressItemVariants> {
+export interface ProgressItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   status: ProgressStatus
   /** Primary line (truncated). */
   title: React.ReactNode
@@ -64,7 +50,11 @@ const ProgressItem = forwardRef<HTMLDivElement, ProgressItemProps>(function Prog
   const trailingAction = onCancel ?? onDismiss
   const trailingLabel = onCancel ? 'Cancel' : (dismissLabel ?? 'Dismiss')
   return (
-    <div ref={ref} className={cn(progressItemVariants({ status }), className)} {...props}>
+    <div
+      ref={ref}
+      className={cn('flex items-start gap-2.5 px-3 py-3 text-[12px]', className)}
+      {...props}
+    >
       <StatusIcon status={status} />
       <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
         <div className='flex items-center gap-2'>
@@ -100,4 +90,4 @@ const ProgressItem = forwardRef<HTMLDivElement, ProgressItemProps>(function Prog
 })
 ProgressItem.displayName = 'ProgressItem'
 
-export { ProgressItem, progressItemVariants }
+export { ProgressItem }
diff --git a/packages/emcn/src/components/resource-empty-state/resource-empty-state.tsx b/packages/emcn/src/components/resource-empty-state/resource-empty-state.tsx
new file mode 100644
index 00000000000..af181c7e890
--- /dev/null
+++ b/packages/emcn/src/components/resource-empty-state/resource-empty-state.tsx
@@ -0,0 +1,24 @@
+import type { ComponentType } from 'react'
+
+export interface ResourceEmptyStateProps {
+  icon: ComponentType<{ className?: string }>
+  title: string
+  description: string
+}
+
+/**
+ * Centered resource-empty state for a page or panel. The caller owns loading and
+ * access decisions; this component only presents the unavailable-resource message.
+ * @example <ResourceEmptyState icon={FileX} title='File not found' description='This file may have been deleted or moved' />
+ */
+export function ResourceEmptyState({ icon: Icon, title, description }: ResourceEmptyStateProps) {
+  return (
+    <div className='flex h-full flex-col items-center justify-center gap-3 text-center'>
+      <Icon className='size-[32px] text-[var(--text-icon)]' />
+      <div className='flex flex-col items-center gap-1'>
+        <h2 className='text-[var(--text-primary)] text-xl leading-[inherit]'>{title}</h2>
+        <p className='text-[var(--text-body)] text-small'>{description}</p>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/emcn/src/components/row-actions/row-actions.tsx b/packages/emcn/src/components/row-actions/row-actions.tsx
index db5f8891a25..72c7e76b207 100644
--- a/packages/emcn/src/components/row-actions/row-actions.tsx
+++ b/packages/emcn/src/components/row-actions/row-actions.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode, Ref } from 'react'
-import { cn } from '@sim/emcn'
+import { cn } from '../../lib/cn'
 
 export const rowActionsGroupClass = 'group/row-actions'
 
diff --git a/packages/emcn/src/components/switch/switch.tsx b/packages/emcn/src/components/switch/switch.tsx
index 1d5b0c8be9c..ed8e455e9f4 100644
--- a/packages/emcn/src/components/switch/switch.tsx
+++ b/packages/emcn/src/components/switch/switch.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react'
 import * as SwitchPrimitives from '@radix-ui/react-switch'
 import { cn } from '../../lib/cn'
+import { mutedFocusRingClass } from '../../lib/focus-ring'
 
 /**
  * Switch component styled to match Sim's design system.
@@ -16,7 +17,8 @@ const Switch = React.memo(
     <SwitchPrimitives.Root
       disabled={disabled}
       className={cn(
-        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        mutedFocusRingClass,
         className
       )}
       {...props}
diff --git a/packages/emcn/src/components/textarea/textarea.tsx b/packages/emcn/src/components/textarea/textarea.tsx
index d1cb2b59309..0d493f9321e 100644
--- a/packages/emcn/src/components/textarea/textarea.tsx
+++ b/packages/emcn/src/components/textarea/textarea.tsx
@@ -1,35 +1,19 @@
 import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
 
 /** `[letter-spacing:inherit]` — see the note on `INPUT_CLASS`; keep the two in step. */
-const textareaVariants = cva(
-  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-hidden resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: '',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
+const TEXTAREA_CLASS =
+  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-hidden resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50'
 
-interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    VariantProps<typeof textareaVariants> {}
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 /**
- * Minimal textarea component matching the user-input styling.
- * Features a resize handle in the bottom right corner.
+ * Native editing foundation for caret mirrors and specialized editors.
+ * Use ChipTextarea for ordinary form fields.
  */
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, variant, ...props }, ref) => {
-    return (
-      <textarea className={cn(textareaVariants({ variant }), className)} ref={ref} {...props} />
-    )
+  ({ className, ...props }, ref) => {
+    return <textarea className={cn(TEXTAREA_CLASS, className)} ref={ref} {...props} />
   }
 )
 
diff --git a/packages/emcn/src/components/time-picker/time-picker.tsx b/packages/emcn/src/components/time-picker/time-picker.tsx
index 009f2815beb..17247c441b5 100644
--- a/packages/emcn/src/components/time-picker/time-picker.tsx
+++ b/packages/emcn/src/components/time-picker/time-picker.tsx
@@ -39,16 +39,12 @@ const timePickerVariants = cva(
   'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-hidden disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
   {
     variants: {
-      variant: {
-        default: '',
-      },
       size: {
         default: 'py-1.5 text-sm',
         sm: 'py-[5px] text-caption',
       },
     },
     defaultVariants: {
-      variant: 'default',
       size: 'default',
     },
   }
@@ -117,7 +113,6 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
   (
     {
       className,
-      variant,
       size,
       value,
       onChange,
@@ -227,7 +222,7 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
               tabIndex={disabled ? -1 : 0}
               aria-disabled={disabled}
               className={cn(
-                timePickerVariants({ variant, size }),
+                timePickerVariants({ size }),
                 'relative cursor-pointer items-center justify-between',
                 disabled && 'cursor-not-allowed opacity-50',
                 className
diff --git a/packages/emcn/src/index.ts b/packages/emcn/src/index.ts
index f89fbb7afd2..1bab126444f 100644
--- a/packages/emcn/src/index.ts
+++ b/packages/emcn/src/index.ts
@@ -15,6 +15,7 @@ export {
   CODE_LINE_HEIGHT_PX,
   Code,
   calculateGutterWidth,
+  codeViewerAppearanceVariants,
   getCodeEditorProps,
 } from './components/code/code'
 export {
@@ -52,5 +53,6 @@ export { usePrefersReducedMotion } from './hooks/use-prefers-reduced-motion'
 export { useScrollEdges } from './hooks/use-scroll-edges'
 export * from './icons'
 export { cn } from './lib/cn'
+export { mutedFocusRingClass } from './lib/focus-ring'
 export { handleKeyboardActivation, isKeyboardActivation } from './lib/keyboard'
 export { bindPreviewHorizontalWheel, bindPreviewWheelZoom } from './lib/preview-wheel-zoom'
diff --git a/packages/emcn/src/lib/cn.ts b/packages/emcn/src/lib/cn.ts
index 44b68c24039..63f87a80c53 100644
--- a/packages/emcn/src/lib/cn.ts
+++ b/packages/emcn/src/lib/cn.ts
@@ -14,7 +14,7 @@ import { extendTailwindMerge } from 'tailwind-merge'
 const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
-      'font-size': [{ text: ['micro', 'caption', 'small', 'md'] }],
+      'font-size': [{ text: ['micro', 'caption', 'small', 'md', 'title', 'title-lg', 'display'] }],
     },
   },
 })
diff --git a/packages/emcn/src/lib/focus-ring.ts b/packages/emcn/src/lib/focus-ring.ts
new file mode 100644
index 00000000000..1e4cad1543c
--- /dev/null
+++ b/packages/emcn/src/lib/focus-ring.ts
@@ -0,0 +1,3 @@
+/** Opt-in ring for controls on `--surface-2`; ordinary Button focus remains unchanged. */
+export const mutedFocusRingClass =
+  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--text-icon)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
diff --git a/packages/workflow-renderer/src/lib/code-hover-card.tsx b/packages/workflow-renderer/src/lib/code-hover-card.tsx
index afc74d47cd4..7ab3d35fb1a 100644
--- a/packages/workflow-renderer/src/lib/code-hover-card.tsx
+++ b/packages/workflow-renderer/src/lib/code-hover-card.tsx
@@ -181,7 +181,8 @@ export function CodeHoverCard({ preview, className, children }: CodeHoverCardPro
           density='compact'
           paddingLeft={8}
           highlightWorkflowReferences
-          className='max-h-[min(16rem,calc(100vh-2rem))] min-h-0 overflow-x-hidden rounded-none border-0 bg-[var(--bg)] shadow-none dark:bg-[var(--bg)]'
+          appearance='flat'
+          className='max-h-[min(16rem,calc(100vh-2rem))] min-h-0 overflow-x-hidden shadow-none'
         />
       </PopoverContent>
     </Popover>
diff --git a/packages/workflow-renderer/src/note/note-block-view.tsx b/packages/workflow-renderer/src/note/note-block-view.tsx
index d47a556d391..9d7642a7a15 100644
--- a/packages/workflow-renderer/src/note/note-block-view.tsx
+++ b/packages/workflow-renderer/src/note/note-block-view.tsx
@@ -108,7 +108,7 @@ const NOTE_REMARK_PLUGINS = [remarkGfm, remarkBreaks]
  */
 const NOTE_TASK_CHECKBOX_CLASS = [
   'mt-[3px] inline-grid size-[16px] shrink-0 appearance-none place-content-center',
-  'rounded-[3px] border border-[var(--border-1)] bg-transparent',
+  'rounded-sm border border-[var(--border-1)] bg-transparent',
   'checked:border-[var(--text-primary)] checked:bg-[var(--text-primary)]',
   "checked:after:size-[10px] checked:after:bg-[var(--surface-2)] checked:after:content-['']",
   'checked:after:[clip-path:polygon(14%_44%,0_65%,50%_100%,100%_16%,80%_0%,43%_62%)]',
@@ -251,14 +251,14 @@ const NOTE_COMPONENTS = {
     />
   ),
   inlineCode: ({ children }: { children?: ReactNode }) => (
-    <code className='whitespace-normal rounded bg-black/10 px-1 py-0.5 font-mono text-current text-xs'>
+    <code className='whitespace-normal rounded-sm bg-black/10 px-1 py-0.5 font-mono text-current text-xs'>
       {children}
     </code>
   ),
   code: ({ children, className, ...props }: { children?: ReactNode; className?: string }) => (
     <code
       {...props}
-      className='block whitespace-pre-wrap break-words rounded bg-black/15 p-2 text-current text-xs'
+      className='block whitespace-pre-wrap break-words rounded-sm bg-black/15 p-2 text-current text-xs'
     >
       {children}
     </code>
@@ -1017,7 +1017,7 @@ export function NoteBlockView({
                     }
                   }}
                   className={cn(
-                    'nodrag nopan nowheel h-7 w-full min-w-0 select-text border-none bg-transparent px-0 text-[17px] text-current caret-current outline-hidden focus-visible:outline-hidden',
+                    'nodrag nopan nowheel h-7 w-full min-w-0 select-text border-none bg-transparent px-0 text-current text-md caret-current outline-hidden focus-visible:outline-hidden',
                     colorOption.selectionClassName,
                     !isEnabled && 'opacity-50'
                   )}
@@ -1033,14 +1033,14 @@ export function NoteBlockView({
                     !isEnabled && 'opacity-50'
                   )}
                 >
-                  <OverflowSpan value={name ?? ''} className='text-[17px] text-current'>
+                  <OverflowSpan value={name ?? ''} className='text-current text-md'>
                     {renderMarkedName(name ?? '', nameSearchRange)}
                   </OverflowSpan>
                 </button>
               ) : (
                 <OverflowSpan
                   value={name ?? ''}
-                  className={cn('text-[17px] text-current', !isEnabled && 'opacity-50')}
+                  className={cn('text-current text-md', !isEnabled && 'opacity-50')}
                 >
                   {renderMarkedName(name ?? '', nameSearchRange)}
                 </OverflowSpan>
@@ -1058,7 +1058,8 @@ export function NoteBlockView({
                       event.stopPropagation()
                       onExpandedChange(!isExpanded)
                     }}
-                    className='nodrag nopan nowheel pointer-events-none ml-1 size-[24px] shrink-0 rounded-md border-none bg-transparent p-0 text-current opacity-0 transition-[background-color,color,opacity,transform] duration-150 hover-hover:bg-current/10 hover-hover:opacity-100 active:scale-[0.96] group-hover:pointer-events-auto group-hover:opacity-70 group-data-[node-selected]:pointer-events-auto group-data-[node-selected]:opacity-70'
+                    iconSize='compact-fixed'
+                    className='nodrag nopan nowheel pointer-events-none ml-1 shrink-0 rounded-md border-none bg-transparent text-current opacity-0 transition-[background-color,color,opacity,transform] duration-150 hover-hover:bg-current/10 hover-hover:opacity-100 active:scale-[0.96] group-hover:pointer-events-auto group-hover:opacity-70 group-data-[node-selected]:pointer-events-auto group-data-[node-selected]:opacity-70'
                   >
                     <span className='relative size-[14px]'>
                       <Expand
diff --git a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
index d085d99272d..fc789b3b823 100644
--- a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
+++ b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
@@ -624,7 +624,7 @@ export function SubflowNodeView({
           >
             <OverflowSpan
               value={blockName}
-              className={cn('text-[17px]', !isEnabled && 'text-[var(--text-muted)]')}
+              className={cn('text-md', !isEnabled && 'text-[var(--text-muted)]')}
             />
           </div>
           <div className='relative z-10 flex shrink-0 items-center gap-1'>
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
index 3e4ab248ff2..ec185f577a6 100644
--- a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
@@ -772,7 +772,7 @@ export function WorkflowBlockView({
             <OverflowSpan
               value={humanizeBlockName(name)}
               className={cn(
-                'text-[17px]',
+                'text-md',
                 !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
               )}
             />
@@ -957,7 +957,7 @@ export function WorkflowBlockView({
             )}
             {showErrorRow && (
               <div
-                className='flex h-[24px] shrink-0 items-center justify-between rounded-[6px] bg-[var(--surface-5)] pr-1 pl-2 dark:bg-[var(--surface-4)]'
+                className='flex h-[24px] shrink-0 items-center justify-between rounded-md bg-[var(--surface-5)] pr-1 pl-2 dark:bg-[var(--surface-4)]'
                 /* The card is a drag handle and the row holds a control, so the
                    pointer must not start a node drag here. */
                 onPointerDown={(event) => event.stopPropagation()}
diff --git a/packages/workflow-renderer/src/workflow-type.tsx b/packages/workflow-renderer/src/workflow-type.tsx
index 234c70bddc2..cedfaaf17f5 100644
--- a/packages/workflow-renderer/src/workflow-type.tsx
+++ b/packages/workflow-renderer/src/workflow-type.tsx
@@ -172,7 +172,7 @@ export function BlockTileView({
         />
       ) : (
         fallbackLabel && (
-          <span className={cn('font-bold text-micro', foregroundClass)}>{fallbackLabel}</span>
+          <span className={cn('font-semibold text-micro', foregroundClass)}>{fallbackLabel}</span>
         )
       )}
     </Element>
diff --git a/scripts/check-unused-exports.baseline.json b/scripts/check-unused-exports.baseline.json
index 16bb8898a49..cee02764f46 100644
--- a/scripts/check-unused-exports.baseline.json
+++ b/scripts/check-unused-exports.baseline.json
@@ -371,7 +371,6 @@
   "apps/sim/app/workspace/[workspaceId]/components/index.ts#ResourceCell",
   "apps/sim/app/workspace/[workspaceId]/components/index.ts#ResourceCellEditing",
   "apps/sim/app/workspace/[workspaceId]/components/index.ts#ResourceChromeFallback",
-  "apps/sim/app/workspace/[workspaceId]/components/index.ts#ResourceNotFound",
   "apps/sim/app/workspace/[workspaceId]/components/index.ts#ResourceRow",
   "apps/sim/app/workspace/[workspaceId]/components/index.ts#ResourceRowSelection",
   "apps/sim/app/workspace/[workspaceId]/components/index.ts#ResourceTableHandle",