diff --git a/.claude/rules/sim-settings-pages.md b/.claude/rules/sim-settings-pages.md
index 8710553e800..114bc1f30a8 100644
--- a/.claude/rules/sim-settings-pages.md
+++ b/.claude/rules/sim-settings-pages.md
@@ -1,6 +1,9 @@
 ---
 paths:
   - "apps/sim/app/workspace/*/settings/**"
+  - "apps/sim/app/workspace/*/{integrations,skills,upgrade}/**"
+  - "apps/sim/app/workspace/*/components/{resource-tile,credential-detail}/**"
+  - "apps/sim/components/{settings,permissions}/**"
   - "apps/sim/ee/**/components/**"
 ---
 
@@ -20,7 +23,7 @@ Do NOT hand-roll any of these in a settings page — they are owned by the layou
 shell (fed through `SettingsPanel`):
 
 - `<div className='flex h-full flex-col bg-[var(--bg)]'>` shell
-- the header bar (`flex flex-shrink-0 … px-[16px] pt-[8.5px] pb-[8.5px]`)
+- the header bar — compose `PAGE_HEADER_BAR` (`@/components/page-header-bar`); never rewrite its padding
 - the scroll container (`min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]`)
 - the content column (`mx-auto … max-w-[48rem] … gap-7`)
 - a title block (`<h1 className='font-medium text-[var(--text-body)] text-lg'>` + `<p className='text-[var(--text-muted)] text-md'>`)
@@ -55,21 +58,23 @@ return (
 ## `SettingsPanel` props
 
 - `actions?: SettingsAction[]` — right-aligned header chips, **data only**:
-  `{ text, icon?, variant?: 'primary'|'destructive', active?, onSelect, disabled?, tooltip? }`.
+  `{ id?, text, textTone?: 'error', icon?, variant?: 'primary'|'destructive', active?,
+  onSelect, onPrefetch?, disabled?, tooltip? }`.
   The shell renders each as a `Chip` — never pass JSX, a `<div>`, or `className`
   (the locked contract: it's structurally impossible to vibe-code a padding
   change). Multiple/conditional actions are a plain array
   (`[...(canManage ? [{…}] : []), …]`). Labels are **sentence case** (`Add override`,
   not `Add Override`). A disabled action that needs to explain itself sets
-  `tooltip` (the shell renders the hover tooltip, disabled chip included) — never
-  hand-roll a tooltip-wrapped chip in `aside`. Save/Discard pairs come from the
-  `saveDiscardActions()` helper (spread it into `actions`). Only a widget that
-  genuinely cannot be a chip (e.g. one needing hover-prefetch) goes in `aside`.
+  `tooltip` (the shell renders the hover tooltip, disabled chip included). An action
+  that wants to warm a route on hover sets `onPrefetch`; the shell wires it. A label
+  that flips while pending (`Delete` → `Deleting...`) sets a stable `id`, or the chip
+  remounts mid-action. Save/Discard pairs come from the `saveDiscardActions()`
+  helper (spread it into `actions`).
 - `back?: SettingsBackAction` (`{ text, icon?, onSelect }`) — left-aligned back
   chip for a **detail sub-view** (e.g. a selected MCP server, a permission group,
   a retention policy). Detail sub-views render through `SettingsPanel` like list
   pages — they do NOT hand-roll their own shell.
-- `aside?: ReactNode` — escape hatch for the rare non-chip header widget. Keep it rare.
+- `docsLink?: string` — renders the header's `Docs` `ChipLink`.
 - `search?: { value; onChange: (value: string) => void; placeholder?; disabled? }` —
   renders the canonical search field directly below the title. Pass `setSearchTerm`
   straight to `onChange`. Use this for a standalone search; if search shares a row
@@ -82,15 +87,15 @@ return (
 
 ## Title + description live in navigation metadata
 
-`apps/sim/app/workspace/[workspaceId]/settings/navigation.ts` is the single source
-of truth. Every `NavigationItem` carries a one-line `description`; `SettingsPanel`
-resolves both via `getSettingsSectionMeta(section)` and the
+`apps/sim/components/settings/navigation.ts` is the single source of truth (the
+`settings/navigation.ts` in the route tree is only a re-export shim). Every `NavigationItem` carries a one-line `description`; `SettingsPanel`
+resolves both via `getSettingsSectionMeta(plane, section)` and the
 `SettingsSectionProvider` the settings shell wraps around the active section.
 
 Adding a new settings page:
 
-1. Add the `SettingsSection` id + a `NavigationItem` (with `label` **and**
-   `description`) in `navigation.ts`. Keep descriptions verb-first, one line,
+1. Add the section id to the `UnifiedSettingsSection` union + a `NavigationItem`
+   (with `label` **and** `description`) in `components/settings/navigation.ts`. Keep descriptions verb-first, one line,
    ~40–55 chars, in the product voice (see `.claude/rules/constitution.md`).
 2. Render the component inside the shell's `effectiveSection` switch in
    `settings/[section]/settings.tsx`.
@@ -107,19 +112,14 @@ token (if the pixel value matches one exactly) or a sign the page never migrated
 grep `text-\[1[0-8]px\]` under `apps/sim/app/workspace/*/settings/**` and
 `apps/sim/ee/**` to find stragglers.
 
-For a two-line list row (title/value on top, a muted subtitle below — a name +
-email, a tool name + description, a server name + status), the established
-pairing is:
+Watch `text-xs`: it is 11px here, so a "caption" written as `text-xs` is a pixel
+short. See `sim-styling.md` for the full scale.
 
-- **Title / row value**: `text-[var(--text-body)] text-sm`
-- **Subtitle / muted description**: `text-[var(--text-muted)] text-caption`
-
-This is not a stylistic guess — it is the tokenized form of the literal-pixel
-pairing (`text-[14px] text-[var(--text-body)]` / `text-[12px]
-text-[var(--text-muted)]`) already used for this exact row shape across
-`member-list.tsx`, `api-keys.tsx`, `mcp.tsx`, `billing.tsx`,
-`workflow-mcp-servers.tsx`, and others — keep new rows consistent with it rather
-than inventing a new size pairing.
+The two-line list row (title over a muted subtitle — a name + email, a tool name
++ description, a server name + status) is **not something you build**: it is
+`SettingsResourceRow`, which owns the pairing
+(`text-[var(--text-body)] text-sm` over `text-[var(--text-muted)] text-caption`).
+See "The resource row" below.
 
 For a toggle row (a `Switch` with a title and optional description), use the emcn
 `Label` component for the title — never a hand-rolled `<span>` — paired with
@@ -145,21 +145,114 @@ independently-defined tokens (not interchangeable — they resolve to different
 colors) and both see legitimate use across settings pages; this rule only pins
 down the **row title/subtitle** shape above, not every text element on every page.
 
+## The resource row
+
+**`SettingsResourceRow`** (`…/components/settings-resource-row`) is *the* list row
+for every settings resource — and for skills, integrations, and the `ee/` surfaces
+too. It owns the tile, the title/subtitle tokens, the row padding and bleed
+(`-mx-2 … rounded-lg p-2`), the hit area, the focus ring, the navigation chevron,
+and — on activatable rows only — the hover band. Never hand-roll any of it, and never wrap the row in your own
+`<button>` or `<Link>` — that is what `onClick`/`href` are for.
+
+```tsx
+<div className={RESOURCE_LIST_STACK}>
+  {items.map((item) => (
+    <SettingsResourceRow
+      key={item.id}
+      icon={<Wrench className='text-[var(--text-icon)]' />}
+      iconFilled
+      title={item.name}
+      description={item.summary}
+      onClick={() => open(item.id)}   // or href={`…/${item.id}`}
+      clickLabel={`Open ${item.name}`}
+      navigable
+    />
+  ))}
+</div>
+```
+
+- `icon?` + `iconVariant` — `tile` (default, the 36px bordered tile), `plain` (a
+  bare 14px glyph), `custom` (you supply the whole tile, e.g. the brand-tinted
+  `IntegrationTile`). Omit `icon` entirely for resources with no identity glyph
+  (an API key, a permission group). `iconFilled` uses the skills/tools fill;
+  `iconFill` lets an uploaded image reach the tile edge.
+- `onClick` / `href` — makes the **whole row** activatable via a stretched
+  overlay. Prefer `href` when the destination is a route, so the row keeps
+  prefetch, middle-click, and open-in-new-tab. Always pass `clickLabel` with
+  either — the overlay holds no text, so it is the control's *only* accessible
+  name. The prop is optional in the type (nothing enforces it), so omitting it
+  ships a nameless button rather than failing the build.
+- `navigable` — appends the one canonical chevron. Set it on rows that open a
+  detail page; leave it off when `onClick` acts in place (revealing a folder).
+  Never import an arrow yourself: `lucide-react` and `@sim/emcn/icons` ship
+  visibly different glyphs, and the row already picked one. A sanctioned bespoke
+  row (below) draws it with `RESOURCE_ROW_ARROW_CLASSES` from the same module.
+- `trailing` vs `badge` — `trailing` is for **interactive** controls (a `Chip`, a
+  `RowActionsMenu`) and sits above the hit area. `badge` is for **decoration** (a
+  status tag) and is click-through. Putting a badge in `trailing` turns the row's
+  right edge into a dead zone.
+- `RESOURCE_LIST_STACK` / `RESOURCE_LIST_GRID` — the single-column and two-up
+  containers. A `SettingsResourceRow` carries its own `-mx-2` bleed and padding,
+  so a container holding one only sets rhythm: never add a second `-mx-2` (they
+  stack into a 16px bleed) and never a different gap. A list of hand-rolled rows
+  is the opposite — there the container owns the bleed. A row inside a
+  fixed-height `overflow-y-auto` box, or a heading that must line up with the
+  section labels under it, passes `flush` to drop the bleed and padding.
+  `RESOURCE_LIST_GRID` budgets its column gap for the bleed (24px of track gap
+  minus 16px of bleed = an 8px gutter); narrowing that gap makes neighbouring
+  rows — and their stretched hit areas — overlap, so a click in the gutter opens
+  the wrong card.
+
+**Three-dots vs. chevron** is not a taste call:
+
+- Opens a **detail page** → `navigable` + a whole-row click, and no `Delete` in
+  the row (it lives in the detail header).
+- **No detail page** → a `RowActionsMenu` in `trailing`, and no `navigable`
+  chevron. The row may still take an `onClick` for an in-place action — a folder
+  mount reveals itself in Finder and also carries a `...` menu — but a row must
+  never offer both a chevron and a menu.
+
 ## Other shared settings primitives (do not re-roll these)
 
+- **`SettingsSection`** (`…/components/settings-section/settings-section` — this
+  directory has no barrel) — muted label, hairline
+  divider, body. Also carries `headerAccessory` and `action` slots. Never
+  re-derive the label/divider chrome; `sim-styling.md` owns those tokens.
+- **`SettingsField`** (`…/components/settings-field`) — a read-only label/value
+  pair in a detail body: muted caption over the value. Pair it with
+  `SETTINGS_FIELD_VALUE_CLASSES` for the value text.
 - **`SettingsEmptyState`** (`…/components/settings-empty-state`) — the canonical
-  muted status message. `variant='fill'` (default) centers in the available
-  height (empty list, or a not-entitled/loading gate); `variant='inline'` sits in
-  flow (a search "no results"). Never hand-roll
-  `<div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>`
-  or `<div className='py-4 text-center …'>`. It owns the `--text-muted` + `text-sm`
-  tokens, so it also keeps these messages consistent across pages.
+  muted status message, for empty lists, "no results", loading gates, **and
+  failed loads** (`tone='error'`). `variant='fill'` (default) centers in the
+  available height; `variant='inline'` sits in flow. Never hand-roll
+  `<div className='flex h-full items-center justify-center …'>` or
+  `<div className='py-4 text-center …'>`.
 - **`RowActionsMenu`** (`…/components/row-actions-menu`) — the trailing `...`
   actions menu for a list row. Pass `label` (aria-label) and
   `actions: RowAction[]` (`{ label, onSelect, destructive?, disabled? }`); the
   component renders the canonical flush `...` trigger + `DropdownMenuContent`.
   Conditional items become array spreads: `...(canManage ? [{…}] : [])`. Never
   hand-roll the `<DropdownMenu>` + `<MoreHorizontal>` trigger per page.
+- **`RESOURCE_TILE_BASE`** + one of `RESOURCE_TILE_FILL` / `RESOURCE_TILE_PLAIN`
+  (`app/workspace/[workspaceId]/components/resource-tile` — note: *not* under
+  `settings/`, unlike the other `…/` paths on this page) — the 36px tile chrome, for
+  any tile the row does not draw itself: a detail heading, or a caller-supplied
+  `iconVariant='custom'` tile. `ResourceTile` wraps the filled pairing. Use
+  `RESOURCE_TILE_FILL` for a glyph, `RESOURCE_TILE_PLAIN` for a brand logo or favicon.
+
+
+**Member avatars are deliberately two components, not one.** `member-list.tsx`
+renders a 14px neutral marker for the dense Teammates/Organization roster, where
+the email is the primary content; `components/permissions/member-row.tsx` renders
+a 36px `getUserColor`-hashed avatar for member *management* rows that carry a name,
+an email, and a role control. Same shape, different job — do not merge them.
+
+## Deleting a resource
+
+Delete lives in the **detail header**, as
+`{ text: 'Delete', variant: 'destructive', onSelect: … }` behind a
+`ChipConfirmModal` — never `textTone: 'error'`, never a bare `Chip`, and never
+unconfirmed. A list row does not carry Delete when the resource has a detail page.
 
 ## Save / Discard + unsaved-changes guard
 
@@ -208,8 +301,9 @@ shells. Reach for it before hand-rolling a `Chip`.
     (from `@/app/workspace/[workspaceId]/components/credential-detail`). The
     in-view header **Discard** chip (via `SaveDiscardActions onDiscard`) is a
     *reset to original* — distinct from the back-confirm's discard, which leaves.
-- **`useSettingsBeforeUnload`** is mounted **once** in the settings shell
-  (`settings/[section]/settings.tsx`) — never add a per-page `beforeunload`.
+- **`useSettingsBeforeUnload`** is mounted by the settings shells
+  (`settings/layout.tsx` and `components/settings/standalone-settings-shell.tsx`) —
+  never add a per-page `beforeunload`.
 - **Dirty *computation* stays local** (shapes differ: field-compare vs
   normalize+stringify) — only how dirty is *consumed* is shared. Derive it (a
   `const`/`useMemo`), never store it in `useState`.
@@ -244,6 +338,11 @@ A settings page is design-system-clean when:
 - [ ] Its `NavigationItem` has an accurate, consistent-length `description`.
 - [ ] Detail sub-views and entitlement/loading gates keep their own chrome (intentional).
 - [ ] If it has editable state: Save/Discard go through `SaveDiscardActions`, dirty is wired via `useSettingsUnsavedGuard` (called before any early-return gate), and there is **no** hand-rolled Save button / `beforeunload` / "Unsaved changes" modal.
-- [ ] No business logic, handlers, or conditional rendering changed by the migration.
+- [ ] No business logic, handlers, or conditional rendering changed by the migration — except where the shared primitive makes a gate structural (a permission gate becomes `onClick={can ? … : undefined}` + `navigable={can}`, which renders a plain non-interactive row).
 - [ ] No literal `text-[Npx]` classes — named scale tokens only (see "Text-scale tokens" above).
+- [ ] Every **resource** list row (a thing with an identity — a tool, a server, a key, a credential) is a `SettingsResourceRow` in a `RESOURCE_LIST_STACK`/`RESOURCE_LIST_GRID` — no wrapper `<button>`/`<Link>`, no hand-passed arrow, no re-derived title/subtitle spans. Rows with a genuinely different shape stay bespoke, and draw their own arrow with `RESOURCE_ROW_ARROW_CLASSES`: multi-line bodies (inbox tasks), tabular columns (billing invoices, credit usage), grids (secrets), and the member rows (see the avatar note above).
+- [ ] Rows that open a detail page use `navigable` + `clickLabel`; flat records use `RowActionsMenu`. Not both.
+- [ ] Decorative trailing content is in `badge`, not `trailing`.
+- [ ] Labeled sections use `SettingsSection`; read-only fields use `SettingsField`; empty/loading/error use `SettingsEmptyState`.
+- [ ] Delete is a `destructive` header action behind a `ChipConfirmModal`.
 - [ ] `tsc`, `biome`, and the page's tests pass.
diff --git a/.claude/rules/sim-styling.md b/.claude/rules/sim-styling.md
index 3f926b78828..837bacc0407 100644
--- a/.claude/rules/sim-styling.md
+++ b/.claude/rules/sim-styling.md
@@ -8,9 +8,13 @@ paths:
 
 ## Tailwind
 
-1. **No inline styles** - Use Tailwind classes
+1. **No inline styles** - Use Tailwind classes. Exception: a genuinely dynamic
+   value (a hashed avatar colour, a brand tile background) that cannot be a class.
 2. **No duplicate dark classes** - Skip `dark:` when value matches light mode
-3. **Exact values** - `text-[14px]`, `h-[26px]`
+3. **Exact values over approximations** - `h-[26px]`, not `h-6`. But **type size is
+   always a named token** (`text-sm`, `text-caption`) — never `text-[14px]`, which
+   sets font-size only and inherits a different line-height. See
+   `sim-settings-pages.md` for the scale.
 4. **Transitions** - `transition-colors` for interactive states
 
 ## Conditional Classes
diff --git a/.claude/skills/add-settings-page/SKILL.md b/.claude/skills/add-settings-page/SKILL.md
index 69173332ad4..5e84bbbc341 100644
--- a/.claude/skills/add-settings-page/SKILL.md
+++ b/.claude/skills/add-settings-page/SKILL.md
@@ -12,7 +12,7 @@ skill is the procedure.
 
 Key paths:
 - Layout primitive: `apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx`
-- Nav metadata (titles + descriptions): `apps/sim/app/workspace/[workspaceId]/settings/navigation.ts`
+- Nav metadata (titles + descriptions): `apps/sim/components/settings/navigation.ts`
 - Section switch + provider: `apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx`
 - Pages: `apps/sim/app/workspace/[workspaceId]/settings/components/<name>/<name>.tsx` and EE pages under `apps/sim/ee/<feature>/components/`
 
@@ -53,7 +53,9 @@ For each page component, confirm the checklist in `.claude/rules/sim-settings-pa
 3. Find literal pixel text sizes (should be 0 — see "Text-scale tokens" in
    `.claude/rules/sim-settings-pages.md` for the token map and the row
    title/subtitle pairing convention):
-   `git grep -n "text-\[1[0-8]px\]" -- 'apps/sim/**/settings/' 'apps/sim/ee/'`
+   `git grep -nE "text-\[1[0-8]px\]" -- 'apps/sim/**/settings/' 'apps/sim/ee/'` — should
+   be 0. Display type above the scale (`text-[40px]` hero headings, the `text-[8px]`
+   member-avatar initial) is deliberate and out of scope.
 4. Confirm each page imports `SettingsPanel` and that its `NavigationItem` has an
    accurate `description` of consistent length with its peers.
    - Editable pages: confirm Save/Discard go through `SaveDiscardActions` and
@@ -77,3 +79,31 @@ For each page component, confirm the checklist in `.claude/rules/sim-settings-pa
 8. **Verify the whole sweep:** `tsc --noEmit`, `biome check` on every touched
    file, and run the affected pages' tests. Diff each file against the base and
    confirm the change is purely structural before shipping.
+
+## Mode C — Migrate list rows to `SettingsResourceRow`
+
+Read "The resource row" in `.claude/rules/sim-settings-pages.md` first — it is the
+contract. Then, per page:
+
+1. Find hand-rolled rows:
+   `git grep -n "truncate text-\[var(--text-body)\] text-sm" -- 'apps/sim/app/workspace/' 'apps/sim/ee/'`
+   Every match outside `settings-resource-row.tsx` is either a row to migrate or a
+   genuinely different shape (multi-line body, tabular columns, a grid) that stays
+   bespoke — decide which, and say so.
+2. Replace the row *and* its wrapper: a `<button>`/`<Link>` around the row becomes
+   `onClick`/`href` on the row itself. Wrapping the row is what the primitive
+   exists to stop — it is also invalid HTML once `trailing` holds a control.
+3. Sort the trailing content: interactive → `trailing`, decorative → `badge`.
+   Getting this backwards makes the row's right edge a dead zone.
+4. Add `navigable` only if the row opens a detail page, and `clickLabel` always.
+5. Drop the container's `-mx-2` — the row now owns the bleed. Use
+   `RESOURCE_LIST_STACK` / `RESOURCE_LIST_GRID`; do not hand-write the gap.
+6. Unlike Mode B, this migration **may** change conditional rendering: a
+   `<button disabled={!can}>` becomes `onClick={can ? … : undefined}` +
+   `navigable={can}`, which renders a plain non-interactive row. Verify the gated
+   state has no clickable affordance left.
+7. Check what the old row rendered *beside* the title (a badge, a timestamp, a
+   transport label). The row's title truncates as one unit, so anything folded
+   into it can be ellipsised away — move it to `description` or `badge`.
+8. Verify: `tsc --noEmit`, `biome check`, the page's tests, and a diff read of
+   every converted block for lost props, conditions, and `key` placement.
diff --git a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-heading.tsx b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-heading.tsx
index b3571c86bab..afea7600937 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-heading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-heading.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 
 interface CredentialDetailHeadingProps {
   /** Leading visual (icon tile or brand tile). */
@@ -8,8 +9,9 @@ interface CredentialDetailHeadingProps {
 }
 
 /**
- * Header row shared by credential detail surfaces: a leading visual beside a
- * title over a muted subtitle.
+ * Header row shared by credential detail surfaces. A thin alias over the static
+ * {@link SettingsResourceRow} — the heading and the list row the user arrived
+ * from are the same object, so they must not drift.
  */
 export function CredentialDetailHeading({
   leading,
@@ -17,14 +19,14 @@ export function CredentialDetailHeading({
   subtitle,
 }: CredentialDetailHeadingProps) {
   return (
-    <div className='flex items-center gap-2.5'>
-      {leading}
-      <div className='flex min-w-0 flex-1 flex-col'>
-        <span className='truncate text-[14px] text-[var(--text-body)]'>{title}</span>
-        {subtitle ? (
-          <span className='truncate text-[12px] text-[var(--text-muted)]'>{subtitle}</span>
-        ) : null}
-      </div>
-    </div>
+    <SettingsResourceRow
+      // A heading is not a list row: no bleed, no row padding.
+      flush
+      iconVariant='custom'
+      icon={leading}
+      title={title}
+      // `''` rendered nothing before; the row only skips a nullish description.
+      description={subtitle || undefined}
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-layout.tsx b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-layout.tsx
index d4099a6a6f7..b6edcb5801d 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-layout.tsx
@@ -21,10 +21,10 @@ export function CredentialDetailLayout({ back, actions, children }: CredentialDe
     <div className='flex h-full flex-col bg-[var(--bg)]'>
       <div className={cn(PAGE_HEADER_BAR, 'justify-between')}>
         {back}
-        {actions ? <div className='flex items-center'>{actions}</div> : null}
+        {actions ? <div className='flex h-[30px] items-center gap-1'>{actions}</div> : null}
       </div>
       <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
-        <div className='mx-auto flex max-w-[48rem] flex-col gap-7 pb-3'>{children}</div>
+        <div className='mx-auto flex w-full max-w-[48rem] flex-col gap-7 pb-6'>{children}</div>
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/detail-icon-tile.tsx b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/detail-icon-tile.tsx
deleted file mode 100644
index 10d17ccc0f6..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/detail-icon-tile.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { ComponentType } from 'react'
-
-interface DetailIconTileProps {
-  icon: ComponentType<{ className?: string }>
-}
-
-/** Square tile with a centered icon, used as a detail header's leading visual. */
-export function DetailIconTile({ icon: Icon }: DetailIconTileProps) {
-  return (
-    <div className='flex size-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[var(--surface-5)]'>
-      <Icon className='size-[18px] text-[var(--text-tertiary)]' />
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/detail-section.tsx b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/detail-section.tsx
index 3038dae285f..7ec2f733cba 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/detail-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/detail-section.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
 interface DetailSectionProps {
   title: ReactNode
@@ -6,16 +7,10 @@ interface DetailSectionProps {
 }
 
 /**
- * Labeled section with a muted title and a thin inset divider above the body.
- * Shared by the credential detail surfaces so every section keeps the same
- * vertical rhythm without repeating markup at the callsites.
+ * Labeled section for the credential detail surfaces. A thin alias over the
+ * shared {@link SettingsSection} so credential pages and settings pages cannot
+ * drift apart; kept for its `title` naming at the existing callsites.
  */
 export function DetailSection({ title, children }: DetailSectionProps) {
-  return (
-    <section className='flex flex-col'>
-      <span className='pl-0.5 text-[var(--text-muted)] text-small'>{title}</span>
-      <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
-      {children}
-    </section>
-  )
+  return <SettingsSection label={title}>{children}</SettingsSection>
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/index.ts b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/index.ts
index 3c076b766fb..3a4d337771d 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/index.ts
@@ -3,7 +3,6 @@ export { CHIP_FIELD_INPUT, CHIP_FIELD_SHELL } from './components/chip-field'
 export { CredentialDetailHeading } from './components/credential-detail-heading'
 export { CredentialDetailLayout } from './components/credential-detail-layout'
 export { CredentialMembersSection } from './components/credential-members-section'
-export { DetailIconTile } from './components/detail-icon-tile'
 export { DetailSection } from './components/detail-section'
 export { UnsavedChangesModal } from './components/unsaved-changes-modal'
 export { useCredentialDetailForm } from './hooks/use-credential-detail-form'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource-tile/index.ts b/apps/sim/app/workspace/[workspaceId]/components/resource-tile/index.ts
index 035cc143cdd..12dcfe6e29c 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource-tile/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource-tile/index.ts
@@ -1,5 +1,6 @@
 export {
   RESOURCE_TILE_BASE,
   RESOURCE_TILE_FILL,
+  RESOURCE_TILE_PLAIN,
   ResourceTile,
 } from '@/app/workspace/[workspaceId]/components/resource-tile/resource-tile'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx
index 91340e06517..72267cfdfc5 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx
@@ -17,6 +17,9 @@ export const RESOURCE_TILE_BASE =
 /** Filled treatment worn by the skills and custom tools resource tiles. */
 export const RESOURCE_TILE_FILL = 'bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
 
+/** Page-background fill, for tiles holding a brand logo or a site favicon. */
+export const RESOURCE_TILE_PLAIN = 'bg-[var(--bg)]'
+
 /**
  * Square glyph tile identifying a workspace resource — the leading visual on a
  * resource's row and on its detail heading.
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 929a673c993..d3af2249c3b 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
@@ -2,8 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Chip, ChipDropdown, ChipLink, cn } from '@sim/emcn'
-import { ArrowLeft, ArrowRight, Plus } from 'lucide-react'
-import Link from 'next/link'
+import { ArrowLeft, Plus } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
 import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
@@ -16,6 +15,7 @@ import {
 } from '@/lib/integrations'
 import { credentialProviderMatchesService } from '@/lib/oauth'
 import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
+import { RESOURCE_TILE_BASE } from '@/app/workspace/[workspaceId]/components/resource-tile'
 import { IntegrationSkillsSection } from '@/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section'
 import { connectParam } from '@/app/workspace/[workspaceId]/integrations/[block]/search-params'
 import {
@@ -26,6 +26,11 @@ import { IntegrationSection } from '@/app/workspace/[workspaceId]/integrations/c
 import { IntegrationTile } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
 import { CONNECT_MODE } from '@/app/workspace/[workspaceId]/integrations/connect-route'
 import { useScrollRestoration } from '@/app/workspace/[workspaceId]/integrations/hooks/use-scroll-restoration'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { getTileIconColorClass } from '@/blocks/icon-color'
 import { storeCuratedPrompt } from '@/blocks/integration-matcher'
 import {
@@ -198,10 +203,7 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
               <IntegrationTile blockType={integration.type} icon={Icon} />
             ) : (
               <div
-                className={cn(
-                  'flex size-9 flex-shrink-0 items-center justify-center rounded-xl border border-[var(--border-1)]',
-                  getTileIconColorClass(integration.bgColor)
-                )}
+                className={cn(RESOURCE_TILE_BASE, getTileIconColorClass(integration.bgColor))}
                 style={{ background: integration.bgColor }}
               >
                 {integration.name.charAt(0)}
@@ -216,22 +218,18 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
           {connectedCredentials.length > 0 && (
             <IntegrationSection label='Connected'>
               {connectedCredentials.map((credential) => (
-                <Link
+                <SettingsResourceRow
                   key={credential.id}
+                  iconVariant='custom'
+                  icon={Icon && <IntegrationTile blockType={integration.type} icon={Icon} />}
+                  title={credential.displayName}
+                  description={
+                    credential.description || resolveCredentialDisplay(credential).subtitle
+                  }
                   href={`/workspace/${workspaceId}/integrations/connected/${credential.id}`}
-                  className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-                >
-                  {Icon && <IntegrationTile blockType={integration.type} icon={Icon} />}
-                  <div className='flex min-w-0 flex-1 flex-col'>
-                    <span className='truncate text-[14px] text-[var(--text-body)]'>
-                      {credential.displayName}
-                    </span>
-                    <span className='truncate text-[12px] text-[var(--text-muted)]'>
-                      {credential.description || resolveCredentialDisplay(credential).subtitle}
-                    </span>
-                  </div>
-                  <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
-                </Link>
+                  clickLabel={`Open ${credential.displayName}`}
+                  navigable
+                />
               ))}
             </IntegrationSection>
           )}
@@ -274,10 +272,8 @@ function TemplatesSection({ integration, templates, workspaceId }: TemplatesSect
   }
 
   return (
-    <section className='flex flex-col'>
-      <span className='pl-0.5 text-[var(--text-muted)] text-small'>Templates</span>
-      <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
-      <div className='-mx-2 flex flex-col gap-y-0.5'>
+    <SettingsSection label='Templates'>
+      <div className={RESOURCE_LIST_STACK}>
         {templates.map((template) => {
           const blockTypes = [integration.type, ...template.otherBlockTypes].slice(
             0,
@@ -294,7 +290,7 @@ function TemplatesSection({ integration, templates, workspaceId }: TemplatesSect
           )
         })}
       </div>
-    </section>
+    </SettingsSection>
   )
 }
 
@@ -306,25 +302,21 @@ interface TemplateRowProps {
 }
 
 /**
- * Template row that mirrors `IntegrationItem` from the integrations index
- * byte-for-byte (icon cluster · title · description · trailing `ArrowRight`).
- * Renders as a `<button>` because click seeds the home page chat with `prompt`
- * and navigates to the workspace home, matching the `ShowcaseWithExplore` flow.
+ * Template row. Click seeds the home page chat with `prompt` and navigates to the
+ * workspace home, matching the `ShowcaseWithExplore` flow — so it activates rather
+ * than links, and its leading visual is an overlapping block cluster.
  */
 function TemplateRow({ blockTypes, title, prompt, onSelect }: TemplateRowProps) {
   return (
-    <button
-      type='button'
+    <SettingsResourceRow
+      iconVariant='custom'
+      icon={<TemplateIcons blockTypes={blockTypes} />}
+      title={title}
+      description={prompt}
       onClick={() => onSelect(prompt)}
-      className='group flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-    >
-      <TemplateIcons blockTypes={blockTypes} />
-      <div className='flex min-w-0 flex-1 flex-col'>
-        <span className='truncate text-[14px] text-[var(--text-body)]'>{title}</span>
-        <span className='truncate text-[12px] text-[var(--text-muted)]'>{prompt}</span>
-      </div>
-      <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
-    </button>
+      clickLabel={`Use template ${title}`}
+      navigable
+    />
   )
 }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section.tsx
index ea4fa847a2b..575a448fe2f 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section.tsx
@@ -6,6 +6,11 @@ import { Check, Plus } from 'lucide-react'
 import { usePostHog } from 'posthog-js/react'
 import { captureEvent } from '@/lib/posthog/client'
 import { SkillTile } from '@/app/workspace/[workspaceId]/components'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { isSkillNameConflictError } from '@/app/workspace/[workspaceId]/skills/components/utils'
 import type { SuggestedSkill } from '@/blocks/types'
 import { useCreateSkill, useSkills } from '@/hooks/queries/skills'
@@ -26,22 +31,23 @@ interface SkillRowProps {
 
 function SkillRow({ skill, added, pending, disabled, onAdd }: SkillRowProps) {
   return (
-    <div className='flex items-center gap-2.5 rounded-lg p-2'>
-      <SkillTile />
-      <div className='flex min-w-0 flex-1 flex-col'>
-        <span className='truncate text-[14px] text-[var(--text-body)]'>{skill.name}</span>
-        <span className='truncate text-[12px] text-[var(--text-muted)]'>{skill.description}</span>
-      </div>
-      {added ? (
-        <Chip leftIcon={Check} disabled flush>
-          Added
-        </Chip>
-      ) : (
-        <Chip variant='primary' leftIcon={Plus} onClick={onAdd} disabled={disabled} flush>
-          {pending ? 'Adding...' : 'Add'}
-        </Chip>
-      )}
-    </div>
+    <SettingsResourceRow
+      iconVariant='custom'
+      icon={<SkillTile />}
+      title={skill.name}
+      description={skill.description}
+      trailing={
+        added ? (
+          <Chip leftIcon={Check} disabled flush>
+            Added
+          </Chip>
+        ) : (
+          <Chip variant='primary' leftIcon={Plus} onClick={onAdd} disabled={disabled} flush>
+            {pending ? 'Adding...' : 'Add'}
+          </Chip>
+        )
+      }
+    />
   )
 }
 
@@ -98,10 +104,8 @@ export function IntegrationSkillsSection({
   }
 
   return (
-    <section className='flex flex-col'>
-      <span className='pl-0.5 text-[var(--text-muted)] text-small'>Skills</span>
-      <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
-      <div className='-mx-2 flex flex-col gap-y-0.5'>
+    <SettingsSection label='Skills'>
+      <div className={RESOURCE_LIST_STACK}>
         {skills.map((skill, index) => (
           <SkillRow
             key={skill.name}
@@ -113,6 +117,6 @@ export function IntegrationSkillsSection({
           />
         ))}
       </div>
-    </section>
+    </SettingsSection>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-section/integration-section.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-section/integration-section.tsx
index 827cbe519c7..08dae05a2cf 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-section/integration-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-section/integration-section.tsx
@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react'
+import { RESOURCE_LIST_GRID } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
 interface IntegrationSectionProps {
   label: string
@@ -6,19 +8,15 @@ interface IntegrationSectionProps {
 }
 
 /**
- * Labeled section used throughout the integrations surface. Renders a small
- * caption, a divider, and a responsive auto-fit grid for its children so the
- * vertical rhythm stays consistent across the integrations list, the connected
- * credentials list, and the integration detail page templates.
+ * Labeled section used throughout the integrations surface: the shared
+ * {@link SettingsSection} label/divider chrome wrapped around the shared
+ * responsive card grid, so the integrations list, the connected credentials
+ * list, and the integration detail templates cannot drift from settings.
  */
 export function IntegrationSection({ label, children }: IntegrationSectionProps) {
   return (
-    <section className='flex flex-col'>
-      <span className='pl-0.5 text-[var(--text-muted)] text-small'>{label}</span>
-      <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
-      <div className='-mx-2 grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-x-2 gap-y-0.5'>
-        {children}
-      </div>
-    </section>
+    <SettingsSection label={label}>
+      <div className={RESOURCE_LIST_GRID}>{children}</div>
+    </SettingsSection>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx
index e3b01070117..43a25c08ba1 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx
@@ -1,5 +1,9 @@
 import type { ComponentType } from 'react'
 import { cn } from '@sim/emcn'
+import {
+  RESOURCE_TILE_BASE,
+  RESOURCE_TILE_PLAIN,
+} from '@/app/workspace/[workspaceId]/components/resource-tile'
 import { getBlock } from '@/blocks'
 import { getTileIconColorClass } from '@/blocks/icon-color'
 
@@ -69,13 +73,11 @@ export function IntegrationTile({ blockType, icon: Icon, framed = false }: Integ
 
   if (!framed) {
     return (
-      <div className='size-9 flex-shrink-0'>
-        <div
-          className='flex size-full items-center justify-center rounded-xl border border-[var(--border-1)] bg-[var(--bg)]'
-          style={brandBg ? { background: brandBg } : undefined}
-        >
-          <Icon className={cn('size-5', getTileIconColorClass(brandBg))} />
-        </div>
+      <div
+        className={cn(RESOURCE_TILE_BASE, RESOURCE_TILE_PLAIN)}
+        style={brandBg ? { background: brandBg } : undefined}
+      >
+        <Icon className={getTileIconColorClass(brandBg)} />
       </div>
     )
   }
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx
index 8009841fe31..f5363986d1f 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Chip } from '@sim/emcn'
-import { ArrowRight } from 'lucide-react'
+import { ArrowRight } from '@sim/emcn/icons'
 import { useParams, useRouter } from 'next/navigation'
 import { isChatEnabled } from '@/lib/core/config/env-flags'
 import { IntegrationsShowcase } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx
index fa40014816c..45ffddc13bf 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx
@@ -8,6 +8,7 @@ import {
   ChipInput,
   ChipLink,
   ChipTextarea,
+  cn,
   Send,
   toast,
 } from '@sim/emcn'
@@ -27,11 +28,16 @@ import {
   UnsavedChangesModal,
   useCredentialDetailForm,
 } from '@/app/workspace/[workspaceId]/components/credential-detail'
+import {
+  RESOURCE_TILE_BASE,
+  RESOURCE_TILE_PLAIN,
+} from '@/app/workspace/[workspaceId]/components/resource-tile'
 import {
   ConnectServiceAccountModal,
   type ServiceAccountProviderId,
 } from '@/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal'
 import { IntegrationTile } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
+import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import {
   useCreateCredentialDraft,
   useDeleteWorkspaceCredential,
@@ -217,7 +223,7 @@ export function ConnectedCredentialDetail({
   if (credentialsLoading && !credential) {
     return (
       <CredentialDetailLayout back={back} actions={actions}>
-        <p className='py-12 text-center text-[var(--text-muted)] text-sm'>Loading…</p>
+        <SettingsEmptyState variant='inline'>Loading…</SettingsEmptyState>
       </CredentialDetailLayout>
     )
   }
@@ -225,7 +231,7 @@ export function ConnectedCredentialDetail({
   if (!credential) {
     return (
       <CredentialDetailLayout back={back} actions={actions}>
-        <p className='py-12 text-center text-[var(--text-muted)] text-sm'>Credential not found.</p>
+        <SettingsEmptyState variant='inline'>Credential not found.</SettingsEmptyState>
       </CredentialDetailLayout>
     )
   }
@@ -241,7 +247,7 @@ export function ConnectedCredentialDetail({
             display?.icon ? (
               <IntegrationTile blockType={integrationBlockType} icon={display.icon} />
             ) : (
-              <div className='flex size-9 flex-shrink-0 items-center justify-center rounded-xl border border-[var(--border-1)] bg-[var(--bg)]'>
+              <div className={cn(RESOURCE_TILE_BASE, RESOURCE_TILE_PLAIN)}>
                 <span className='font-medium text-[var(--text-tertiary)] text-small'>
                   {resolveProviderLabel(credential.providerId).slice(0, 1) || '?'}
                 </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
index 2f04ac50d33..c9a8aa539f4 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
@@ -2,7 +2,6 @@
 
 import { type ComponentType, useCallback, useMemo, useRef } from 'react'
 import {
-  ArrowRight,
   ChevronDown,
   ChipInput,
   chipVariants,
@@ -12,7 +11,6 @@ import {
   DropdownMenuTrigger,
   Search,
 } from '@sim/emcn'
-import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
 import {
@@ -34,18 +32,14 @@ import {
   integrationsParsers,
   integrationsUrlKeys,
 } from '@/app/workspace/[workspaceId]/integrations/search-params'
+import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
+import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { useWorkspaceCredentials, type WorkspaceCredential } from '@/hooks/queries/credentials'
 import { useDebouncedSearchSetter } from '@/hooks/use-debounced-search-setter'
 
 /** Slugs surfaced in the pinned Featured section, in display order. */
 const FEATURED_SLUGS = ['slack', 'gmail', 'jira', 'github', 'google-sheets', 'hubspot'] as const
 
-const LINK_ROW_CLASSES =
-  'flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-const LINK_ROW_TITLE_CLASSES = 'truncate text-[14px] text-[var(--text-body)]'
-const LINK_ROW_SUBTITLE_CLASSES = 'truncate text-[12px] text-[var(--text-muted)]'
-const LINK_ROW_ARROW_CLASSES = 'size-4 flex-shrink-0 text-[var(--text-icon)]'
-
 const FEATURED_INTEGRATIONS: readonly Integration[] = (() => {
   const bySlug = new Map(INTEGRATIONS.map((i) => [i.slug, i]))
   return FEATURED_SLUGS.map((slug) => bySlug.get(slug)).filter(
@@ -85,14 +79,15 @@ function IntegrationItem({
   icon: Icon,
 }: IntegrationItemProps) {
   return (
-    <Link href={`/workspace/${workspaceId}/integrations/${slug}`} className={LINK_ROW_CLASSES}>
-      <IntegrationTile blockType={blockType} icon={Icon} />
-      <div className='flex min-w-0 flex-1 flex-col'>
-        <span className={LINK_ROW_TITLE_CLASSES}>{name}</span>
-        {description && <span className={LINK_ROW_SUBTITLE_CLASSES}>{description}</span>}
-      </div>
-      <ArrowRight className={LINK_ROW_ARROW_CLASSES} />
-    </Link>
+    <SettingsResourceRow
+      iconVariant='custom'
+      icon={<IntegrationTile blockType={blockType} icon={Icon} />}
+      title={name}
+      description={description || undefined}
+      href={`/workspace/${workspaceId}/integrations/${slug}`}
+      clickLabel={`Open ${name}`}
+      navigable
+    />
   )
 }
 
@@ -122,14 +117,15 @@ interface ConnectedItemProps {
 
 function ConnectedItem({ href, blockType, name, description, icon: Icon }: ConnectedItemProps) {
   return (
-    <Link href={href} className={LINK_ROW_CLASSES}>
-      <IntegrationTile blockType={blockType} icon={Icon} />
-      <div className='flex min-w-0 flex-1 flex-col'>
-        <span className={LINK_ROW_TITLE_CLASSES}>{name}</span>
-        <span className={LINK_ROW_SUBTITLE_CLASSES}>{description}</span>
-      </div>
-      <ArrowRight className={LINK_ROW_ARROW_CLASSES} />
-    </Link>
+    <SettingsResourceRow
+      iconVariant='custom'
+      icon={<IntegrationTile blockType={blockType} icon={Icon} />}
+      title={name}
+      description={description}
+      href={href}
+      clickLabel={`Open ${name}`}
+      navigable
+    />
   )
 }
 
@@ -361,11 +357,11 @@ export function Integrations() {
             ))}
 
             {showNoResults && (
-              <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
+              <SettingsEmptyState variant='inline'>
                 {urlSearchTerm.trim()
                   ? `No integrations found matching “${urlSearchTerm}”`
                   : 'No integrations in this category'}
-              </div>
+              </SettingsEmptyState>
             )}
           </div>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
index 5a2daaa70ca..e456d250d1b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
@@ -302,8 +302,8 @@ export function Admin() {
           <>
             <div className='flex items-center justify-between gap-3'>
               <div className='flex flex-col gap-1'>
-                <Label className='text-[var(--text-primary)] text-sm'>Mothership Environment</Label>
-                <p className='text-[var(--text-secondary)] text-xs'>
+                <Label>Mothership Environment</Label>
+                <p className='text-[var(--text-secondary)] text-caption'>
                   Default uses the configured Sim agent URL.
                 </p>
               </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index 2c7b1561383..6daf1e083cb 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
@@ -13,6 +13,10 @@ import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/component
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import {
@@ -198,24 +202,50 @@ export function ApiKeys({ scope = 'workspace' }: ApiKeysProps) {
             {showsWorkspaceKeys && !searchTerm.trim() ? (
               <SettingsSection label='Workspace'>
                 {workspaceKeys.length === 0 ? (
-                  <div className='text-[var(--text-muted)] text-sm'>No workspace API keys yet</div>
+                  <SettingsEmptyState variant='inline'>
+                    No workspace API keys yet
+                  </SettingsEmptyState>
                 ) : (
-                  <div className='flex flex-col gap-2'>
+                  <div className={RESOURCE_LIST_STACK}>
                     {workspaceKeys.map((key) => (
-                      <div key={key.id} className='flex items-center justify-between gap-3'>
-                        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                          <div className='flex items-center gap-1.5'>
-                            <span className='max-w-[280px] truncate text-[var(--text-body)] text-sm'>
-                              {key.name}
-                            </span>
-                            <span className='text-[var(--text-secondary)] text-sm'>
-                              (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
-                            </span>
-                          </div>
-                          <p className='truncate text-[var(--text-muted)] text-caption'>
-                            {key.displayKey}
-                          </p>
-                        </div>
+                      <SettingsResourceRow
+                        key={key.id}
+                        title={key.name}
+                        description={key.displayKey}
+                        badge={
+                          <span className='whitespace-nowrap text-[var(--text-muted)] text-caption'>
+                            {`last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                          </span>
+                        }
+                        trailing={
+                          <ApiKeyRowMenu
+                            keyName={key.name}
+                            onDelete={() => {
+                              setDeleteKey(key)
+                              setShowDeleteDialog(true)
+                            }}
+                            canDelete={canManageWorkspaceKeys}
+                          />
+                        }
+                      />
+                    ))}
+                  </div>
+                )}
+              </SettingsSection>
+            ) : showsWorkspaceKeys && filteredWorkspaceKeys.length > 0 ? (
+              <SettingsSection label='Workspace'>
+                <div className={RESOURCE_LIST_STACK}>
+                  {filteredWorkspaceKeys.map(({ key }) => (
+                    <SettingsResourceRow
+                      key={key.id}
+                      title={key.name}
+                      description={key.displayKey}
+                      badge={
+                        <span className='whitespace-nowrap text-[var(--text-muted)] text-caption'>
+                          {`last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                        </span>
+                      }
+                      trailing={
                         <ApiKeyRowMenu
                           keyName={key.name}
                           onDelete={() => {
@@ -224,38 +254,8 @@ export function ApiKeys({ scope = 'workspace' }: ApiKeysProps) {
                           }}
                           canDelete={canManageWorkspaceKeys}
                         />
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </SettingsSection>
-            ) : showsWorkspaceKeys && filteredWorkspaceKeys.length > 0 ? (
-              <SettingsSection label='Workspace'>
-                <div className='flex flex-col gap-2'>
-                  {filteredWorkspaceKeys.map(({ key }) => (
-                    <div key={key.id} className='flex items-center justify-between gap-3'>
-                      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <div className='flex items-center gap-1.5'>
-                          <span className='max-w-[280px] truncate text-[var(--text-body)] text-sm'>
-                            {key.name}
-                          </span>
-                          <span className='text-[var(--text-secondary)] text-sm'>
-                            (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
-                          </span>
-                        </div>
-                        <p className='truncate text-[var(--text-muted)] text-caption'>
-                          {key.displayKey}
-                        </p>
-                      </div>
-                      <ApiKeyRowMenu
-                        keyName={key.name}
-                        onDelete={() => {
-                          setDeleteKey(key)
-                          setShowDeleteDialog(true)
-                        }}
-                        canDelete={canManageWorkspaceKeys}
-                      />
-                    </div>
+                      }
+                    />
                   ))}
                 </div>
               </SettingsSection>
@@ -263,38 +263,34 @@ export function ApiKeys({ scope = 'workspace' }: ApiKeysProps) {
 
             {showsPersonalKeys && (!searchTerm.trim() || filteredPersonalKeys.length > 0) && (
               <SettingsSection label='Personal'>
-                <div className='flex flex-col gap-2'>
+                <div className={RESOURCE_LIST_STACK}>
                   {filteredPersonalKeys.map(({ key }) => {
                     const isConflict = conflictNames.has(key.name)
                     return (
-                      <div key={key.id} className='flex flex-col gap-2'>
-                        <div className='flex items-center justify-between gap-3'>
-                          <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                            <div className='flex items-center gap-1.5'>
-                              <span className='max-w-[280px] truncate text-[var(--text-body)] text-sm'>
-                                {key.name}
-                              </span>
-                              <span className='text-[var(--text-secondary)] text-sm'>
-                                (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
-                              </span>
-                            </div>
-                            <p className='truncate text-[var(--text-muted)] text-caption'>
-                              {key.displayKey}
-                            </p>
-                          </div>
-                          <ApiKeyRowMenu
-                            keyName={key.name}
-                            onDelete={() => {
-                              setDeleteKey(key)
-                              setShowDeleteDialog(true)
-                            }}
-                          />
-                        </div>
+                      <div key={key.id} className='flex flex-col'>
+                        <SettingsResourceRow
+                          title={key.name}
+                          description={key.displayKey}
+                          badge={
+                            <span className='whitespace-nowrap text-[var(--text-muted)] text-caption'>
+                              {`last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                            </span>
+                          }
+                          trailing={
+                            <ApiKeyRowMenu
+                              keyName={key.name}
+                              onDelete={() => {
+                                setDeleteKey(key)
+                                setShowDeleteDialog(true)
+                              }}
+                            />
+                          }
+                        />
                         {isConflict && (
-                          <div className='text-[var(--text-error)] text-small leading-tight'>
+                          <p className='text-[var(--text-error)] text-caption leading-tight'>
                             Workspace API key with the same name overrides this. Rename your
                             personal key to use it.
-                          </div>
+                          </p>
                         )}
                       </div>
                     )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
index 76c36f517f3..0505c9fb8f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
@@ -47,6 +47,7 @@ import { CreditUsageSection } from '@/app/workspace/[workspaceId]/settings/compo
 import { UsageLimitField } from '@/app/workspace/[workspaceId]/settings/components/billing/components/usage-limit-field/usage-limit-field'
 import { getSubscriptionPermissions } from '@/app/workspace/[workspaceId]/settings/components/billing/subscription-permissions'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import { RESOURCE_ROW_ARROW_CLASSES } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import {
   useBillingUsageNotifications,
@@ -637,7 +638,7 @@ export function Billing({
                   <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-caption'>
                     {invoice.description ?? ''}
                   </span>
-                  <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
+                  <ArrowRight className={RESOURCE_ROW_ARROW_CLASSES} />
                 </>
               )
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/password-detail/password-detail.test.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/password-detail/password-detail.test.tsx
index e154e12b593..5d1d78265e3 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/password-detail/password-detail.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/password-detail/password-detail.test.tsx
@@ -14,6 +14,8 @@ const { mockBridge, mockToast } = vi.hoisted(() => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
+  /** `password-detail` composes the shared tile classes with `cn`. */
+  cn: (...classes: unknown[]) => classes.filter(Boolean).join(' '),
   ArrowLeft: () => <span />,
   Button: ({
     children,
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/password-detail/password-detail.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/password-detail/password-detail.tsx
index 0c301136264..90091fb5f00 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/password-detail/password-detail.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/password-detail/password-detail.tsx
@@ -8,6 +8,7 @@ import {
   ChipConfirmModal,
   ChipCopyInput,
   ChipInput,
+  cn,
   Duplicate,
   Eye,
   EyeOff,
@@ -16,6 +17,11 @@ import {
   toast,
 } from '@sim/emcn'
 import { getDesktopBridge } from '@/lib/desktop'
+import {
+  RESOURCE_TILE_BASE,
+  RESOURCE_TILE_PLAIN,
+} from '@/app/workspace/[workspaceId]/components/resource-tile'
+import { SettingsField } from '@/app/workspace/[workspaceId]/settings/components/settings-field'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
@@ -136,32 +142,27 @@ export function PasswordDetail({ credential, onBack, onForgotten }: PasswordDeta
       >
         <SettingsSection label='Login'>
           <div className='flex flex-col gap-4'>
-            <div className='flex flex-col gap-2'>
-              <span className='text-[var(--text-muted)] text-caption'>Site</span>
+            <SettingsField label='Site'>
               <div className='flex items-center gap-2.5'>
-                <div className='size-9 flex-shrink-0'>
-                  <div className='flex size-full items-center justify-center overflow-hidden rounded-xl border border-[var(--border-1)] bg-[var(--bg)]'>
-                    {credential.icon ? (
-                      // A `data:` URL copied from the source browser at import
-                      // time — never a network request, which would disclose
-                      // which sites the user has passwords for.
-                      <img src={credential.icon} alt='' className='size-full object-contain' />
-                    ) : (
-                      <Key className='size-5 text-[var(--text-icon)]' />
-                    )}
-                  </div>
+                <div className={cn(RESOURCE_TILE_BASE, RESOURCE_TILE_PLAIN)}>
+                  {credential.icon ? (
+                    // A `data:` URL copied from the source browser at import
+                    // time — never a network request, which would disclose
+                    // which sites the user has passwords for.
+                    <img src={credential.icon} alt='' className='size-full object-contain' />
+                  ) : (
+                    <Key className='size-5 text-[var(--text-icon)]' />
+                  )}
                 </div>
                 <ChipCopyInput value={credential.origin} copyLabel='Copy site' />
               </div>
-            </div>
+            </SettingsField>
 
-            <div className='flex flex-col gap-2'>
-              <span className='text-[var(--text-muted)] text-caption'>Username</span>
+            <SettingsField label='Username'>
               <ChipCopyInput value={credential.username || '—'} copyLabel='Copy username' />
-            </div>
+            </SettingsField>
 
-            <div className='flex flex-col gap-2'>
-              <span className='text-[var(--text-muted)] text-caption'>Password</span>
+            <SettingsField label='Password'>
               <ChipInput
                 readOnly
                 aria-label='Password'
@@ -210,7 +211,7 @@ export function PasswordDetail({ credential, onBack, onForgotten }: PasswordDeta
                   </>
                 }
               />
-            </div>
+            </SettingsField>
           </div>
         </SettingsSection>
       </SettingsPanel>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.test.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.test.tsx
index b38ba8b8149..b334e010c14 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.test.tsx
@@ -175,11 +175,14 @@ async function click(button: HTMLButtonElement) {
   })
 }
 
-/** Cards are buttons outside the header; each shows a site and a username. */
-const cards = () =>
-  [...container.querySelectorAll('main > button, main div button')].filter(
+/** Each card's hit area — a stretched overlay button owned by `SettingsResourceRow`. */
+const cardButtons = () =>
+  [...container.querySelectorAll('main button[aria-label^="Open "]')].filter(
     (node) => !node.closest('header')
-  )
+  ) as HTMLButtonElement[]
+
+/** The row wrapping each hit area; it carries the visible site and username. */
+const cards = () => cardButtons().map((button) => button.parentElement as HTMLElement)
 
 const bridge = () => mockBridge.current as ReturnType<typeof createBridge>
 
@@ -220,7 +223,7 @@ describe('PasswordsView', () => {
   it('opens the detail page for the card that was clicked', async () => {
     await render()
 
-    await click(cards()[1] as HTMLButtonElement)
+    await click(cardButtons()[1])
 
     expect(container.querySelector('[aria-label="Password detail"]')?.textContent).toBe(
       'https://fubo.tv'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.tsx
index aad358a1fba..afe1b8fe2e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.tsx
@@ -7,21 +7,18 @@ import type {
   BrowserImportError,
   BrowserImportProfile,
 } from '@sim/desktop-bridge'
-import { ArrowLeft, ArrowRight, ChipConfirmModal, Key, Plus, toast } from '@sim/emcn'
+import { ArrowLeft, ChipConfirmModal, Key, Plus, toast } from '@sim/emcn'
 import { getDesktopBridge } from '@/lib/desktop'
 import { ImportModal } from '@/app/workspace/[workspaceId]/settings/components/browser/components/import-modal/import-modal'
 import { PasswordDetail } from '@/app/workspace/[workspaceId]/settings/components/browser/components/password-detail/password-detail'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
-import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import {
+  RESOURCE_LIST_GRID,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 
-/** The integrations page's responsive card grid (see `integration-section.tsx`, `skills.tsx`). */
-const CARD_GRID = '-mx-2 grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-x-2 gap-y-0.5'
-/** Card hit area; the row chrome inside it comes from {@link SettingsResourceRow}. */
-const CARD_CLASSES =
-  'w-full rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-
 const IMPORT_ERROR_MESSAGES: Record<BrowserImportError, string> = {
   'unsupported-platform': 'Importing from another browser is only supported on macOS.',
   'chrome-not-found': 'Could not find that browser profile.',
@@ -193,32 +190,28 @@ export function PasswordsView({ credentials, onChange, onBack, onImported }: Pas
           </SettingsEmptyState>
         ) : (
           <>
-            <div className={CARD_GRID}>
+            <div className={RESOURCE_LIST_GRID}>
               {filtered.map((credential) => (
-                <button
+                <SettingsResourceRow
                   key={credential.id}
-                  type='button'
-                  className={CARD_CLASSES}
+                  icon={
+                    credential.icon ? (
+                      // A `data:` URL copied from the source browser at
+                      // import time — never a network request, which would
+                      // disclose which sites the user has passwords for.
+                      // Fills the tile like any other brand logo.
+                      <img src={credential.icon} alt='' className='object-contain' />
+                    ) : (
+                      <Key />
+                    )
+                  }
+                  iconFill
+                  title={siteLabel(credential.origin)}
+                  description={credential.username || 'No username'}
                   onClick={() => setSelectedId(credential.id)}
-                >
-                  <SettingsResourceRow
-                    icon={
-                      credential.icon ? (
-                        // A `data:` URL copied from the source browser at
-                        // import time — never a network request, which would
-                        // disclose which sites the user has passwords for.
-                        // Fills the tile like any other brand logo.
-                        <img src={credential.icon} alt='' className='object-contain' />
-                      ) : (
-                        <Key />
-                      )
-                    }
-                    iconFill
-                    title={siteLabel(credential.origin)}
-                    description={credential.username || 'No username'}
-                    trailing={<ArrowRight className='size-4 text-[var(--text-icon)]' />}
-                  />
-                </button>
+                  clickLabel={`Open ${siteLabel(credential.origin)}`}
+                  navigable
+                />
               ))}
             </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-key-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-key-manager.tsx
index 51d3bd630a8..a9d10d9a10d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-key-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-key-manager.tsx
@@ -5,13 +5,13 @@ import {
   Button,
   Chip,
   ChipConfirmModal,
+  ChipInput,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  cn,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -21,9 +21,11 @@ import {
   CHIP_FIELD_SHELL,
 } from '@/app/workspace/[workspaceId]/components/credential-detail/components/chip-field'
 import { BYOKProviderKeysModal } from '@/app/workspace/[workspaceId]/settings/components/byok/byok-provider-keys-modal'
-import { BYOKKeySkeleton } from '@/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
-import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
 const logger = createLogger('BYOKKeyManager')
@@ -308,31 +310,20 @@ export function BYOKKeyManager(props: BYOKKeyManagerProps) {
     <>
       <div className='flex flex-col gap-4.5'>
         {showSearch && (
-          <div className={CHIP_FIELD_SHELL}>
-            <Search
-              className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
-              strokeWidth={2}
-            />
-            <input
-              aria-label='Search providers'
-              placeholder='Search providers...'
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              disabled={isLoading}
-              className={cn(CHIP_FIELD_INPUT, 'disabled:cursor-not-allowed disabled:opacity-60')}
-            />
-          </div>
+          <ChipInput
+            icon={Search}
+            aria-label='Search providers'
+            placeholder='Search providers...'
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            disabled={isLoading}
+            className='w-full'
+          />
         )}
 
         {description && <p className='text-[var(--text-secondary)] text-sm'>{description}</p>}
 
-        {isLoading ? (
-          <div className='flex flex-col gap-2'>
-            {providers.map((p) => (
-              <BYOKKeySkeleton key={p.id} />
-            ))}
-          </div>
-        ) : showNoResults ? (
+        {isLoading ? null : showNoResults ? (
           <SettingsEmptyState variant='inline'>
             No providers found matching "{searchTerm}"
           </SettingsEmptyState>
@@ -346,13 +337,13 @@ export function BYOKKeyManager(props: BYOKKeyManagerProps) {
 
               return (
                 <SettingsSection key={section.label} label={section.label}>
-                  <div className='flex flex-col gap-2'>{rows.map(renderRow)}</div>
+                  <div className={RESOURCE_LIST_STACK}>{rows.map(renderRow)}</div>
                 </SettingsSection>
               )
             })}
           </div>
         ) : (
-          <div className='flex flex-col gap-2'>{filteredProviders.map(renderRow)}</div>
+          <div className={RESOURCE_LIST_STACK}>{filteredProviders.map(renderRow)}</div>
         )}
       </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
deleted file mode 100644
index 71d220b9c37..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Skeleton } from '@sim/emcn'
-
-/**
- * Skeleton component for BYOK provider key items.
- */
-export function BYOKKeySkeleton() {
-  return (
-    <div className='flex items-center justify-between gap-3'>
-      <div className='flex items-center gap-3'>
-        <Skeleton className='size-9 flex-shrink-0 rounded-md' />
-        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-          <Skeleton className='h-[16px] w-[100px]' />
-          <Skeleton className='h-[14px] w-[200px]' />
-        </div>
-      </div>
-      <div className='flex flex-shrink-0 items-center gap-2'>
-        <Skeleton className='h-[32px] w-[72px] rounded-md' />
-        <Skeleton className='h-[32px] w-[64px] rounded-md' />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
index c746dd62828..b7cd5655408 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
@@ -2,7 +2,6 @@
 
 import { useMemo, useState } from 'react'
 import {
-  Chip,
   ChipConfirmModal,
   ChipModal,
   ChipModalBody,
@@ -15,9 +14,14 @@ import {
 import { createLogger } from '@sim/logger'
 import { formatDate } from '@sim/utils/formatting'
 import { Plus } from 'lucide-react'
+import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import {
   type CopilotKey,
@@ -132,30 +136,33 @@ export function Copilot() {
         {isLoading ? null : showEmptyState ? (
           <SettingsEmptyState>Click "Create API key" above to get started</SettingsEmptyState>
         ) : (
-          <div className='flex flex-col gap-2'>
+          <div className={RESOURCE_LIST_STACK}>
             {filteredKeys.map((key) => (
-              <div key={key.id} className='flex items-center justify-between gap-3'>
-                <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                  <div className='flex items-center gap-1.5'>
-                    <span className='max-w-[280px] truncate text-[var(--text-body)] text-sm'>
-                      {key.name || 'Unnamed Key'}
-                    </span>
-                    <span className='text-[var(--text-secondary)] text-sm'>
-                      (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
-                    </span>
-                  </div>
-                  <p className='truncate text-[var(--text-muted)] text-caption'>{key.displayKey}</p>
-                </div>
-                <Chip
-                  className='flex-shrink-0'
-                  onClick={() => {
-                    setDeleteKey(key)
-                    setShowDeleteDialog(true)
-                  }}
-                >
-                  Delete
-                </Chip>
-              </div>
+              <SettingsResourceRow
+                key={key.id}
+                title={key.name || 'Unnamed Key'}
+                description={key.displayKey}
+                badge={
+                  <span className='whitespace-nowrap text-[var(--text-muted)] text-caption'>
+                    {`last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                  </span>
+                }
+                trailing={
+                  <RowActionsMenu
+                    label={`Actions for ${key.name || 'Unnamed Key'}`}
+                    actions={[
+                      {
+                        label: 'Delete',
+                        destructive: true,
+                        onSelect: () => {
+                          setDeleteKey(key)
+                          setShowDeleteDialog(true)
+                        },
+                      },
+                    ]}
+                  />
+                }
+              />
             ))}
             {showNoResults && (
               <SettingsEmptyState variant='inline'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/components/custom-tool-detail/custom-tool-detail.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/components/custom-tool-detail/custom-tool-detail.tsx
index 88788ec0ea7..653bc066b94 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/components/custom-tool-detail/custom-tool-detail.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/components/custom-tool-detail/custom-tool-detail.tsx
@@ -2,15 +2,11 @@
 
 import { useMemo, useState } from 'react'
 import { ChipConfirmModal, toast } from '@sim/emcn'
-import { ArrowLeft, Wrench } from '@sim/emcn/icons'
+import { ArrowLeft } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { saveDiscardActions } from '@/components/settings/save-discard-actions'
-import { ResourceTile } from '@/app/workspace/[workspaceId]/components'
-import {
-  CredentialDetailHeading,
-  UnsavedChangesModal,
-} from '@/app/workspace/[workspaceId]/components/credential-detail'
+import { UnsavedChangesModal } from '@/app/workspace/[workspaceId]/components/credential-detail'
 import {
   CUSTOM_TOOL_DELETE_CONFIRM_TEXT,
   CustomToolCodeField,
@@ -204,6 +200,11 @@ export function CustomToolDetail({
       <SettingsPanel
         back={{ text: 'Custom tools', icon: ArrowLeft, onSelect: () => guard.guardBack(onBack) }}
         title={identity.name || tool?.title || 'New tool'}
+        description={
+          identity.description ||
+          tool?.schema.function.description ||
+          'Define the JSON schema your agents call, and the code that runs.'
+        }
         actions={[
           ...(readOnly
             ? []
@@ -218,6 +219,7 @@ export function CustomToolDetail({
           ...(tool && !readOnly
             ? [
                 {
+                  id: 'delete',
                   text: deleteTool.isPending ? 'Deleting...' : 'Delete',
                   variant: 'destructive' as const,
                   onSelect: () => setShowDeleteConfirm(true),
@@ -228,16 +230,6 @@ export function CustomToolDetail({
         ]}
       >
         <div className='flex flex-col gap-7'>
-          <CredentialDetailHeading
-            leading={<ResourceTile icon={Wrench} />}
-            title={identity.name || tool?.title || 'New tool'}
-            subtitle={
-              identity.description ||
-              tool?.schema.function.description ||
-              'Define the JSON schema your agents call, and the code that runs.'
-            }
-          />
-
           <SettingsSection
             label='Schema'
             headerAccessory={
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
index 1253c36e865..135da61ee03 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import { Wrench } from '@sim/emcn/icons'
 import { getErrorMessage } from '@sim/utils/errors'
-import { ArrowRight, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { useQueryState } from 'nuqs'
 import { canMutateWorkspaceSettingsSection } from '@/components/settings/navigation'
@@ -16,7 +16,10 @@ import { CustomToolDetail } from '@/app/workspace/[workspaceId]/settings/compone
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
-import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import { useCustomTools } from '@/hooks/queries/custom-tools'
 
@@ -106,32 +109,26 @@ export function CustomTools() {
       actions={actions}
     >
       {error ? (
-        <div className='flex h-full flex-col items-center justify-center gap-2'>
-          <p className='text-[var(--text-error)] text-sm leading-tight'>
-            {getErrorMessage(error, 'Failed to load tools')}
-          </p>
-        </div>
+        <SettingsEmptyState tone='error'>
+          {getErrorMessage(error, 'Failed to load tools')}
+        </SettingsEmptyState>
       ) : isLoading ? null : showEmptyState ? (
         <SettingsEmptyState>
           {canEdit ? 'Click "Add tool" above to get started' : 'No custom tools configured'}
         </SettingsEmptyState>
       ) : (
-        <div className='-mx-2 flex flex-col gap-y-0.5'>
+        <div className={RESOURCE_LIST_STACK}>
           {filteredTools.map((tool) => (
-            <button
+            <SettingsResourceRow
               key={tool.id}
-              type='button'
+              icon={<Wrench className='text-[var(--text-icon)]' />}
+              iconFilled
+              title={tool.title || 'Unnamed Tool'}
+              description={tool.schema?.function?.description || undefined}
               onClick={() => void setSelectedToolId(tool.id)}
-              className='w-full rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-            >
-              <SettingsResourceRow
-                icon={<Wrench className='text-[var(--text-icon)]' />}
-                iconFilled
-                title={tool.title || 'Unnamed Tool'}
-                description={tool.schema?.function?.description || undefined}
-                trailing={<ArrowRight className='size-4 text-[var(--text-icon)]' />}
-              />
-            </button>
+              clickLabel={`Open ${tool.title || 'Unnamed Tool'}`}
+              navigable
+            />
           ))}
           {showNoResults && (
             <SettingsEmptyState variant='inline'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/desktop/desktop.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/desktop/desktop.tsx
index d0c06152363..6fe4b1e29f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/desktop/desktop.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/desktop/desktop.tsx
@@ -15,7 +15,10 @@ import { getDesktopBridge, getDesktopShellVersion, getDesktopUpdates } from '@/l
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
-import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
 function getMounts(response: LocalFilesystemResponse): LocalFilesystemMount[] | null {
@@ -297,7 +300,7 @@ export function Desktop() {
               No folder access granted. Chat can only read folders you add here.
             </SettingsEmptyState>
           ) : (
-            <div className='flex flex-col gap-2'>
+            <div className={RESOURCE_LIST_STACK}>
               {mounts.map((mount) => (
                 <SettingsResourceRow
                   key={mount.id}
@@ -306,24 +309,24 @@ export function Desktop() {
                   title={mount.name}
                   onClick={() => void revealFolder(mount)}
                   clickLabel={`Show ${mount.name} in the file manager`}
+                  badge={
+                    !mount.remembered ? (
+                      <span className='text-[var(--text-muted)] text-caption'>
+                        Until app restarts
+                      </span>
+                    ) : undefined
+                  }
                   trailing={
-                    <div className='flex flex-shrink-0 items-center gap-2'>
-                      {!mount.remembered && (
-                        <span className='text-[var(--text-muted)] text-caption'>
-                          Until app restarts
-                        </span>
-                      )}
-                      <RowActionsMenu
-                        label={`${mount.name} actions`}
-                        actions={[
-                          {
-                            label: 'Revoke access',
-                            destructive: true,
-                            onSelect: () => setMountToForget(mount),
-                          },
-                        ]}
-                      />
-                    </div>
+                    <RowActionsMenu
+                      label={`${mount.name} actions`}
+                      actions={[
+                        {
+                          label: 'Revoke access',
+                          destructive: true,
+                          onSelect: () => setMountToForget(mount),
+                        },
+                      ]}
+                    />
                   }
                 />
               ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
index df0a8c8dc1d..e68485d5739 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
@@ -2,8 +2,9 @@
 
 import { useCallback, useMemo } from 'react'
 import { Badge, ChipInput, ChipSelect, Search } from '@sim/emcn'
+import { ArrowRight } from '@sim/emcn/icons'
 import { formatRelativeTime } from '@sim/utils/formatting'
-import { ArrowRight, Paperclip } from 'lucide-react'
+import { Paperclip } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
 import {
@@ -12,6 +13,7 @@ import {
   inboxTaskUrlKeys,
 } from '@/app/workspace/[workspaceId]/settings/components/inbox/search-params'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
+import { RESOURCE_ROW_ARROW_CLASSES } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import type { InboxTaskItem } from '@/hooks/queries/inbox'
 import { useInboxConfig, useInboxTasks } from '@/hooks/queries/inbox'
 import { useDebouncedSearchSetter } from '@/hooks/use-debounced-search-setter'
@@ -119,7 +121,7 @@ export function InboxTaskList() {
             </SettingsEmptyState>
           )
         ) : (
-          <div className='flex flex-col gap-0.5'>
+          <div className='-mx-2 flex flex-col gap-y-0.5'>
             {filteredTasks.map((task) => {
               const statusBadge = STATUS_BADGES[task.status] || STATUS_BADGES.received
               const isClickable =
@@ -177,9 +179,7 @@ export function InboxTaskList() {
                       )}
                       {statusBadge.label}
                     </Badge>
-                    {isClickable && (
-                      <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
-                    )}
+                    {isClickable && <ArrowRight className={RESOURCE_ROW_ARROW_CLASSES} />}
                   </div>
                 </>
               )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
index 5558e23fb35..0c886ebf438 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -8,6 +8,7 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { ChevronDown, Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { useQueryState } from 'nuqs'
+import { McpIcon } from '@/components/icons'
 import { canMutateWorkspaceSettingsSection } from '@/components/settings/navigation'
 import { requestJson } from '@/lib/api/client/request'
 import { getWorkflowStateContract } from '@/lib/api/contracts/workflows'
@@ -25,9 +26,13 @@ import {
 } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
 import { getRefreshActionState } from '@/app/workspace/[workspaceId]/settings/components/mcp/refresh-action-state'
 import { getServerToolsLabel } from '@/app/workspace/[workspaceId]/settings/components/mcp/server-tools-label'
-import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
+import { SettingsField } from '@/app/workspace/[workspaceId]/settings/components/settings-field'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import { useMcpOauthPopup } from '@/hooks/mcp/use-mcp-oauth-popup'
@@ -67,12 +72,10 @@ interface ServerListItemProps {
   canManage: boolean
   server: McpServer
   tools: McpTool[]
-  isDeleting: boolean
   isConnecting: boolean
   isLoadingTools?: boolean
   isRefreshing?: boolean
   discoveryError?: string | null
-  onRemove: () => void
   onViewDetails: () => void
   onAuthorize: () => void
 }
@@ -81,12 +84,10 @@ function ServerListItem({
   canManage,
   server,
   tools,
-  isDeleting,
   isConnecting,
   isLoadingTools = false,
   isRefreshing = false,
   discoveryError = null,
-  onRemove,
   onViewDetails,
   onAuthorize,
 }: ServerListItemProps) {
@@ -110,56 +111,46 @@ function ServerListItem({
     server.connectionStatus === 'disconnected' ||
     showDiscoveryError
 
+  const serverName = server.name || 'Unnamed server'
+  // Transport rides on the description rather than beside the name — inside the
+  // row's truncating title a long name would clip it away entirely.
+  const statusText = isConnecting
+    ? 'Waiting for authorization...'
+    : isRefreshing
+      ? 'Refreshing...'
+      : isLoadingTools && tools.length === 0
+        ? 'Loading...'
+        : showDiscoveryError
+          ? discoveryError
+          : toolsLabel
+
   return (
-    <div className='flex items-center justify-between gap-3'>
-      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <div className='flex items-center gap-1.5'>
-          <span className='max-w-[200px] truncate text-[var(--text-body)] text-sm'>
-            {server.name || 'Unnamed server'}
+    <SettingsResourceRow
+      icon={<McpIcon className='text-[var(--text-icon)]' />}
+      iconFilled
+      title={serverName}
+      description={
+        <>
+          {`${transportLabel} · `}
+          {/* Only the status reddens — the transport is neutral metadata. */}
+          <span
+            className={cn(
+              hasConnectionIssue && !isConnecting ? 'text-[var(--text-error)]' : undefined
+            )}
+          >
+            {statusText}
           </span>
-          <span className='text-[var(--text-muted)] text-caption'>({transportLabel})</span>
-        </div>
-        <p
-          className={cn(
-            'truncate text-caption',
-            hasConnectionIssue && !isConnecting
-              ? 'text-[var(--text-error)]'
-              : 'text-[var(--text-muted)]'
-          )}
-        >
-          {isConnecting
-            ? 'Waiting for authorization...'
-            : isRefreshing
-              ? 'Refreshing...'
-              : isLoadingTools && tools.length === 0
-                ? 'Loading...'
-                : showDiscoveryError
-                  ? discoveryError
-                  : toolsLabel}
-        </p>
-      </div>
-      <div className='flex flex-shrink-0 items-center gap-1'>
-        {canManage && server.authType === 'oauth' && server.connectionStatus !== 'connected' && (
+        </>
+      }
+      onClick={onViewDetails}
+      clickLabel={`Open ${serverName}`}
+      navigable
+      trailing={
+        canManage && server.authType === 'oauth' && server.connectionStatus !== 'connected' ? (
           <Chip onClick={onAuthorize}>{isConnecting ? 'Reopen authorization' : 'Authorize'}</Chip>
-        )}
-        <RowActionsMenu
-          label='Server actions'
-          actions={[
-            { label: 'Details', onSelect: onViewDetails },
-            ...(canManage
-              ? [
-                  {
-                    label: 'Delete',
-                    destructive: true,
-                    disabled: isDeleting,
-                    onSelect: onRemove,
-                  },
-                ]
-              : []),
-          ]}
-        />
-      </div>
-    </div>
+        ) : undefined
+      }
+    />
   )
 }
 
@@ -247,6 +238,9 @@ export function MCP() {
 
     try {
       await deleteServerMutation.mutateAsync({ workspaceId, serverId })
+      // Deleting from the detail view leaves a dead id in the URL — drop it so Back
+      // doesn't land on a server that no longer exists.
+      if (selectedServerId === serverId) handleBackToList()
       logger.info(`Removed MCP server: ${serverId}`)
     } catch (error) {
       logger.error('Failed to remove MCP server:', error)
@@ -402,6 +396,28 @@ export function MCP() {
   const hasServers = servers && servers.length > 0
   const showNoResults = searchTerm.trim() && filteredServers.length === 0 && servers.length > 0
 
+  // Delete is reachable from both the list and the detail header, so the confirm
+  // modal has to render in whichever branch is mounted.
+  const deleteConfirmModal = canEdit ? (
+    <ChipConfirmModal
+      open={showDeleteDialog}
+      onOpenChange={(open) => {
+        if (!open) setServerToDeleteId(null)
+      }}
+      srTitle='Delete MCP server'
+      title='Delete MCP server'
+      text={[
+        'Are you sure you want to delete ',
+        {
+          text: servers.find((s) => s.id === serverToDeleteId)?.name || 'this server',
+          bold: true,
+        },
+        '? This action cannot be undone.',
+      ]}
+      confirm={{ label: 'Delete', onClick: confirmDeleteServer }}
+    />
+  ) : null
+
   if (selectedServer) {
     const { server, tools } = selectedServer
     const transportLabel = formatTransportLabel(server.transport || 'http')
@@ -429,32 +445,31 @@ export function MCP() {
                   text: 'Edit',
                   onSelect: () => setEditingServerId(server.id),
                 },
+                {
+                  id: 'delete',
+                  text: deletingServers.has(server.id) ? 'Deleting...' : 'Delete',
+                  variant: 'destructive' as const,
+                  onSelect: () => handleRemoveServer(server.id),
+                  disabled: deletingServers.has(server.id),
+                },
               ]
             : []
         }
       >
         <SettingsSection label='Server'>
           <div className='flex flex-col gap-4.5'>
-            <div className='flex flex-col gap-2'>
-              <span className='text-[var(--text-muted)] text-caption'>Server name</span>
-              <p className='text-[var(--text-body)] text-sm'>{server.name || 'Unnamed server'}</p>
-            </div>
+            <SettingsField label='Server name'>{server.name || 'Unnamed server'}</SettingsField>
 
-            <div className='flex flex-col gap-2'>
-              <span className='text-[var(--text-muted)] text-caption'>Transport</span>
-              <p className='text-[var(--text-body)] text-sm'>{transportLabel}</p>
-            </div>
+            <SettingsField label='Transport'>{transportLabel}</SettingsField>
 
             {server.url && (
-              <div className='flex flex-col gap-2'>
-                <span className='text-[var(--text-muted)] text-caption'>URL</span>
-                <p className='break-all text-[var(--text-body)] text-sm'>{server.url}</p>
-              </div>
+              <SettingsField label='URL' breakAll>
+                {server.url}
+              </SettingsField>
             )}
 
             {server.connectionStatus !== 'connected' && (
-              <div className='flex flex-col gap-2'>
-                <span className='text-[var(--text-muted)] text-caption'>Status</span>
+              <SettingsField label='Status'>
                 <p className='text-[var(--text-error)] text-sm'>
                   {getServerToolsLabel(
                     [],
@@ -463,12 +478,11 @@ export function MCP() {
                     server.authType
                   )}
                 </p>
-              </div>
+              </SettingsField>
             )}
 
             {canEdit && server.authType === 'oauth' && server.connectionStatus !== 'connected' && (
-              <div className='flex flex-col gap-2'>
-                <span className='text-[var(--text-muted)] text-caption'>Authentication</span>
+              <SettingsField label='Authentication'>
                 <div>
                   <Chip
                     variant='primary'
@@ -479,7 +493,7 @@ export function MCP() {
                     {connectingOauthServers.has(server.id) ? 'Reopen authorization' : 'Authorize'}
                   </Chip>
                 </div>
-              </div>
+              </SettingsField>
             )}
           </div>
         </SettingsSection>
@@ -551,7 +565,7 @@ export function MCP() {
 
                     {isExpanded && hasParams && (
                       <div className='border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 py-2'>
-                        <p className='mb-1.5 font-medium text-[var(--text-muted)] text-xs uppercase tracking-wide'>
+                        <p className='mb-1.5 font-medium text-[var(--text-muted)] text-caption uppercase tracking-wide'>
                           Parameters
                         </p>
                         <div className='flex flex-col gap-1.5'>
@@ -586,7 +600,7 @@ export function MCP() {
                                     )}
                                   </div>
                                   {paramDesc && (
-                                    <p className='mt-[3px] text-[var(--text-tertiary)] text-xs leading-relaxed'>
+                                    <p className='mt-[3px] text-[var(--text-tertiary)] text-caption leading-relaxed'>
                                       {paramDesc}
                                     </p>
                                   )}
@@ -628,6 +642,7 @@ export function MCP() {
             allowedMcpDomains={allowedMcpDomains}
           />
         )}
+        {deleteConfirmModal}
       </SettingsPanel>
     )
   }
@@ -655,11 +670,9 @@ export function MCP() {
         }
       >
         {listError ? (
-          <div className='flex h-full flex-col items-center justify-center gap-2'>
-            <p className='text-[var(--text-error)] text-small leading-tight'>
-              {getErrorMessage(listError, 'Failed to load MCP servers')}
-            </p>
-          </div>
+          <SettingsEmptyState tone='error'>
+            {getErrorMessage(listError, 'Failed to load MCP servers')}
+          </SettingsEmptyState>
         ) : serversLoading ? (
           <SettingsEmptyState>Loading...</SettingsEmptyState>
         ) : !hasServers ? (
@@ -667,7 +680,7 @@ export function MCP() {
             {canEdit ? 'Click "Add server" above to get started' : 'No MCP servers configured'}
           </SettingsEmptyState>
         ) : (
-          <div className='flex flex-col gap-2'>
+          <div className={RESOURCE_LIST_STACK}>
             {filteredServers.map((server) => {
               if (!server?.id) return null
               const tools = toolsByServer[server.id] || []
@@ -682,7 +695,6 @@ export function MCP() {
                   canManage={canEdit}
                   server={server}
                   tools={tools}
-                  isDeleting={deletingServers.has(server.id)}
                   isConnecting={connectingOauthServers.has(server.id)}
                   isLoadingTools={isLoadingTools}
                   isRefreshing={
@@ -692,7 +704,6 @@ export function MCP() {
                   discoveryError={
                     serverToolsState?.error ? getErrorMessage(serverToolsState.error) : null
                   }
-                  onRemove={() => handleRemoveServer(server.id)}
                   onViewDetails={() => handleViewDetails(server.id)}
                   onAuthorize={() => startOauthForServer(server.id)}
                 />
@@ -727,25 +738,7 @@ export function MCP() {
         />
       )}
 
-      {canEdit && (
-        <ChipConfirmModal
-          open={showDeleteDialog}
-          onOpenChange={(open) => {
-            if (!open) setServerToDeleteId(null)
-          }}
-          srTitle='Delete MCP server'
-          title='Delete MCP server'
-          text={[
-            'Are you sure you want to delete ',
-            {
-              text: servers.find((s) => s.id === serverToDeleteId)?.name || 'this server',
-              bold: true,
-            },
-            '? This action cannot be undone.',
-          ]}
-          confirm={{ label: 'Delete', onClick: confirmDeleteServer }}
-        />
-      )}
+      {deleteConfirmModal}
     </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
index df8930fe4ac..3bf5fafbdad 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
@@ -22,7 +22,10 @@ import {
 } from '@/app/workspace/[workspaceId]/settings/components/recently-deleted/search-params'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
-import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import { useFolders, useRestoreFolder } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery, useRestoreKnowledgeBase } from '@/hooks/queries/kb/knowledge'
@@ -526,11 +529,9 @@ export function RecentlyDeleted() {
       />
 
       {error ? (
-        <div className='flex h-full flex-col items-center justify-center gap-2'>
-          <p className='text-[var(--text-error)] text-sm leading-tight'>
-            {toError(error).message || 'Failed to load deleted items'}
-          </p>
-        </div>
+        <SettingsEmptyState tone='error'>
+          {toError(error).message || 'Failed to load deleted items'}
+        </SettingsEmptyState>
       ) : isLoading ? null : filtered.length === 0 ? (
         showNoResults ? (
           <SettingsEmptyState variant='inline'>
@@ -540,7 +541,7 @@ export function RecentlyDeleted() {
           <SettingsEmptyState>No deleted items</SettingsEmptyState>
         )
       ) : (
-        <div className='flex flex-col gap-2'>
+        <div className={RESOURCE_LIST_STACK}>
           {filtered.map((resource) => {
             const isRestoring = restoringIds.has(resource.id)
             const isRestored = restoredItems.has(resource.id)
@@ -561,22 +562,24 @@ export function RecentlyDeleted() {
                     Deleted {formatDate(resource.deletedAt)}
                   </>
                 }
+                badge={
+                  canRestore && isRestored ? (
+                    <span className='text-[var(--text-muted)] text-caption'>
+                      {PAUSED_AUTOMATION_TYPES.has(resource.type)
+                        ? 'Restored \u00b7 schedules and webhooks stay paused'
+                        : 'Restored'}
+                    </span>
+                  ) : undefined
+                }
                 trailing={
                   !canRestore ? null : isRestoring ? (
                     <Chip variant='primary' disabled>
                       Restoring...
                     </Chip>
                   ) : isRestored ? (
-                    <div className='flex items-center gap-2'>
-                      <span className='text-[var(--text-muted)] text-small'>
-                        {PAUSED_AUTOMATION_TYPES.has(resource.type)
-                          ? 'Restored \u00b7 schedules and webhooks stay paused'
-                          : 'Restored'}
-                      </span>
-                      <Chip variant='primary' onClick={() => handleView(resource)}>
-                        View
-                      </Chip>
-                    </div>
+                    <Chip variant='primary' onClick={() => handleView(resource)}>
+                      View
+                    </Chip>
                   ) : (
                     <Chip variant='primary' onClick={() => void handleRestore(resource)}>
                       Restore
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 c6887f23277..c5cb959405f 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
@@ -9,6 +9,7 @@ import {
   type SandboxDraft,
   type SandboxLanguage,
 } from '@/app/workspace/[workspaceId]/settings/components/sandboxes/utils'
+import { SettingsField } from '@/app/workspace/[workspaceId]/settings/components/settings-field'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import type { Sandbox } from '@/hooks/queries/sandboxes'
 
@@ -41,8 +42,7 @@ export function SandboxEditor({
     <div className='flex flex-col gap-7'>
       <SettingsSection label='Details'>
         <div className='flex flex-col gap-4'>
-          <div className='flex flex-col gap-1.5'>
-            <span className='text-[var(--text-muted)] text-caption'>Name</span>
+          <SettingsField label='Name'>
             <ChipInput
               value={draft.name}
               onChange={(event) => onChange({ ...draft, name: event.target.value })}
@@ -51,9 +51,8 @@ export function SandboxEditor({
               maxLength={64}
               autoComplete='off'
             />
-          </div>
-          <div className='flex flex-col gap-1.5'>
-            <span className='text-[var(--text-muted)] text-caption'>Language</span>
+          </SettingsField>
+          <SettingsField label='Language'>
             <ChipDropdown
               value={draft.language}
               onChange={(language) => onChange({ ...draft, language: language as SandboxLanguage })}
@@ -63,7 +62,7 @@ export function SandboxEditor({
               }))}
               disabled={disabled}
             />
-          </div>
+          </SettingsField>
         </div>
       </SettingsSection>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/sandboxes.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/sandboxes.tsx
index 45c2e437303..ed393de09a6 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/sandboxes.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/sandboxes.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { toast } from '@sim/emcn'
+import { ChipConfirmModal, toast } from '@sim/emcn'
 import { ArrowLeft, Plus } from '@sim/emcn/icons'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useParams } from 'next/navigation'
@@ -12,7 +12,6 @@ import { saveDiscardActions } from '@/components/settings/save-discard-actions'
 import type { SandboxDependencyIssue } from '@/lib/api/contracts/sandboxes'
 import { UnsavedChangesModal } from '@/app/workspace/[workspaceId]/components/credential-detail'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import {
   SandboxEditor,
   SandboxStatus,
@@ -28,12 +27,15 @@ import {
   SANDBOX_UPGRADE_DESCRIPTION,
   SANDBOX_UPGRADE_TITLE,
   type SandboxDraft,
+  sandboxDeleteConfirmText,
   toSubmittedLines,
 } from '@/app/workspace/[workspaceId]/settings/components/sandboxes/utils'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
-import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
-import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsUpgradeNotice } from '@/app/workspace/[workspaceId]/settings/components/settings-upgrade-notice'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import { useSettingsUnsavedGuard } from '@/app/workspace/[workspaceId]/settings/hooks/use-settings-unsaved-guard'
@@ -66,6 +68,7 @@ export function Sandboxes() {
   const [draft, setDraft] = useState<SandboxDraft | null>(null)
   const [issues, setIssues] = useState<SandboxDependencyIssue[]>([])
   const [isCreating, setIsCreating] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
 
   // The draft belongs to whatever was open when it was typed. Browser Back
   // clears `selectedId` without going through `closeEditor`, so without this the
@@ -77,6 +80,10 @@ export function Sandboxes() {
       setDraft(null)
       setIssues([])
     }
+    // The confirmation belongs to the sandbox that opened it. Browser Back unmounts
+    // the modal without closing it, so leaving this set would re-open it against
+    // whichever sandbox is selected next — and delete that one instead.
+    setShowDeleteConfirm(false)
     // Creating and having one open are mutually exclusive, and history can land on
     // a sandbox while create mode is still set — Forward after starting a new one.
     // Leaving both on renders an empty "New sandbox" form whose Delete still points
@@ -140,6 +147,7 @@ export function Sandboxes() {
 
   const handleDelete = useCallback(
     async (sandbox: Sandbox) => {
+      setShowDeleteConfirm(false)
       try {
         await deleteSandbox.mutateAsync({ workspaceId, sandboxId: sandbox.id })
         if (selectedId === sandbox.id) closeEditor()
@@ -207,9 +215,10 @@ export function Sandboxes() {
             ...(selected && canAdmin
               ? [
                   {
-                    text: 'Delete',
-                    textTone: 'error' as const,
-                    onSelect: () => void handleDelete(selected),
+                    id: 'delete',
+                    text: deleteSandbox.isPending ? 'Deleting...' : 'Delete',
+                    variant: 'destructive' as const,
+                    onSelect: () => setShowDeleteConfirm(true),
                     disabled: deleteSandbox.isPending,
                   },
                 ]
@@ -225,6 +234,17 @@ export function Sandboxes() {
           />
         </SettingsPanel>
 
+        {selected && (
+          <ChipConfirmModal
+            open={showDeleteConfirm}
+            onOpenChange={setShowDeleteConfirm}
+            srTitle='Delete Sandbox'
+            title='Delete Sandbox'
+            text={sandboxDeleteConfirmText(selected.name)}
+            confirm={{ label: 'Delete', onClick: () => void handleDelete(selected) }}
+          />
+        )}
+
         <UnsavedChangesModal
           open={guard.showUnsavedModal}
           onOpenChange={guard.setShowUnsavedModal}
@@ -256,49 +276,28 @@ export function Sandboxes() {
           : []
       }
     >
-      <SettingsSection label='Sandboxes'>
-        {filtered.length === 0 ? (
-          <SettingsEmptyState variant={searchTerm ? 'inline' : 'fill'}>
-            {searchTerm
-              ? 'No sandboxes match your search.'
-              : 'No sandboxes yet. Create one to let Function blocks import packages.'}
-          </SettingsEmptyState>
-        ) : (
-          <div className='flex flex-col gap-3'>
-            {filtered.map((sandbox) => (
-              <SettingsResourceRow
-                key={sandbox.id}
-                icon={<CodeIcon />}
-                title={
-                  <button
-                    type='button'
-                    className='truncate text-left text-[var(--text-body)] text-sm'
-                    onClick={() => void setSelectedId(sandbox.id)}
-                  >
-                    {sandbox.name}
-                  </button>
-                }
-                description={`${sandbox.language === 'python' ? 'Python' : 'JavaScript'} · ${sandbox.dependencies.length} ${sandbox.dependencies.length === 1 ? 'package' : 'packages'}`}
-                trailing={
-                  canAdmin ? (
-                    <RowActionsMenu
-                      label={`Actions for ${sandbox.name}`}
-                      actions={[
-                        { label: 'Edit', onSelect: () => void setSelectedId(sandbox.id) },
-                        {
-                          label: 'Delete',
-                          destructive: true,
-                          onSelect: () => void handleDelete(sandbox),
-                        },
-                      ]}
-                    />
-                  ) : undefined
-                }
-              />
-            ))}
-          </div>
-        )}
-      </SettingsSection>
+      {filtered.length === 0 ? (
+        <SettingsEmptyState variant={searchTerm ? 'inline' : 'fill'}>
+          {searchTerm
+            ? 'No sandboxes match your search.'
+            : 'No sandboxes yet. Create one to let Function blocks import packages.'}
+        </SettingsEmptyState>
+      ) : (
+        <div className={RESOURCE_LIST_STACK}>
+          {filtered.map((sandbox) => (
+            <SettingsResourceRow
+              key={sandbox.id}
+              icon={<CodeIcon className='text-[var(--text-icon)]' />}
+              iconFilled
+              title={sandbox.name}
+              description={`${sandbox.language === 'python' ? 'Python' : 'JavaScript'} · ${sandbox.dependencies.length} ${sandbox.dependencies.length === 1 ? 'package' : 'packages'}`}
+              onClick={() => void setSelectedId(sandbox.id)}
+              clickLabel={`Open ${sandbox.name}`}
+              navigable
+            />
+          ))}
+        </div>
+      )}
     </SettingsPanel>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/utils.ts b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/utils.ts
index ae5c909621e..8ea2b721667 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/utils.ts
@@ -7,6 +7,20 @@ export const SANDBOX_UPGRADE_TITLE = 'Sandboxes require an active Max plan'
 export const SANDBOX_UPGRADE_DESCRIPTION =
   'Upgrade to Max and ensure billing is active to install Python or npm packages that your Function blocks can import.'
 
+/** Delete-confirmation copy, matching the custom tool detail's wording. Names the
+ *  sandbox so the dialog is self-evidently about the one you opened it from. */
+export function sandboxDeleteConfirmText(name: string) {
+  return [
+    'This will permanently delete ',
+    { text: name, bold: true },
+    {
+      text: ' and remove it from any Function blocks that are using it.',
+      error: true,
+    },
+    ' This action cannot be undone.',
+  ]
+}
+
 /** Ordered to match the Function block's own `language` dropdown. */
 export const LANGUAGE_OPTIONS = [
   { label: 'JavaScript', value: 'javascript' },
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
index 4b6d58ee8ab..2ad13f3d873 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
@@ -19,6 +19,7 @@ import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/component
 import { SecretValueField } from '@/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import { isValidEnvVarName } from '@/executor/constants'
 import { useWorkspaceCredentials, type WorkspaceCredential } from '@/hooks/queries/credentials'
@@ -999,9 +1000,7 @@ export function SecretsManager() {
             {(!searchTerm.trim() ||
               filteredWorkspaceEntries.length > 0 ||
               filteredNewWorkspaceRows.length > 0) && (
-              <section className='flex flex-col'>
-                <span className='pl-0.5 text-[var(--text-muted)] text-small'>Workspace</span>
-                <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
+              <SettingsSection label='Workspace'>
                 <div className={`${GRID_COLS} gap-y-2`}>
                   {(searchTerm.trim()
                     ? filteredWorkspaceEntries
@@ -1044,13 +1043,11 @@ export function SecretsManager() {
                       />
                     ))}
                 </div>
-              </section>
+              </SettingsSection>
             )}
 
             {(!searchTerm.trim() || filteredEnvVars.length > 0) && (
-              <section className='flex flex-col'>
-                <span className='pl-0.5 text-[var(--text-muted)] text-small'>Personal</span>
-                <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
+              <SettingsSection label='Personal'>
                 <div className={`${GRID_COLS} gap-y-2`}>
                   {filteredEnvVars.map(({ envVar, originalIndex }) => (
                     <div key={envVar.id || originalIndex} className='contents'>
@@ -1058,7 +1055,7 @@ export function SecretsManager() {
                     </div>
                   ))}
                 </div>
-              </section>
+              </SettingsSection>
             )}
             {searchTerm.trim() &&
               filteredEnvVars.length === 0 &&
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-empty-state/settings-empty-state.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-empty-state/settings-empty-state.tsx
index c63457a65d6..6e1cc077ce4 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-empty-state/settings-empty-state.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-empty-state/settings-empty-state.tsx
@@ -9,6 +9,8 @@ interface SettingsEmptyStateProps {
    * matched nothing. Defaults to `fill`.
    */
   variant?: 'fill' | 'inline'
+  /** Renders the message in the error tone, for a failed load. */
+  tone?: 'muted' | 'error'
 }
 
 /**
@@ -16,11 +18,16 @@ interface SettingsEmptyStateProps {
  * "no results", and entitlement/loading gates. Centralizes the text token and
  * spacing so every settings page reads identically.
  */
-export function SettingsEmptyState({ children, variant = 'fill' }: SettingsEmptyStateProps) {
+export function SettingsEmptyState({
+  children,
+  variant = 'fill',
+  tone = 'muted',
+}: SettingsEmptyStateProps) {
   return (
     <div
       className={cn(
-        'text-center text-[var(--text-muted)] text-sm',
+        'text-center text-sm',
+        tone === 'error' ? 'text-[var(--text-error)]' : 'text-[var(--text-muted)]',
         variant === 'fill' ? 'flex h-full items-center justify-center' : 'py-4'
       )}
     >
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/index.ts b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/index.ts
new file mode 100644
index 00000000000..2f151bb85c2
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/index.ts
@@ -0,0 +1 @@
+export { SettingsField } from './settings-field'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/settings-field.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/settings-field.tsx
new file mode 100644
index 00000000000..3a8072eb3df
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/settings-field.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+
+interface SettingsFieldProps {
+  label: ReactNode
+  /** Wraps long unbroken values (a URL, a key) instead of overflowing. */
+  breakAll?: boolean
+  children: ReactNode
+}
+
+/**
+ * A read-only label/value pair inside a settings detail body: a muted caption
+ * over the value. Single source for that pairing — before this, the same field
+ * was hand-rolled with three different label sizes and three different gaps.
+ *
+ * Renders the value paragraph itself, so callers never restate its type tokens.
+ * Pass a node instead of text only when the value is a control (a chip, a link).
+ */
+export function SettingsField({ label, breakAll = false, children }: SettingsFieldProps) {
+  return (
+    <div className='flex flex-col gap-2'>
+      <span className='text-[var(--text-muted)] text-caption'>{label}</span>
+      {typeof children === 'string' ? (
+        <p className={cn('text-[var(--text-body)] text-sm', breakAll && 'break-all')}>{children}</p>
+      ) : (
+        children
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/index.ts b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/index.ts
index da29f86f11c..335ecd0a0cb 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/index.ts
@@ -1 +1,6 @@
-export { SettingsResourceRow } from './settings-resource-row'
+export {
+  RESOURCE_LIST_GRID,
+  RESOURCE_LIST_STACK,
+  RESOURCE_ROW_ARROW_CLASSES,
+  SettingsResourceRow,
+} from './settings-resource-row'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx
index d5481416753..01f354c27b2 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx
@@ -1,8 +1,11 @@
-import type { ReactNode } from 'react'
+import { type ReactNode, useId } from 'react'
 import { cn } from '@sim/emcn'
+import { ArrowRight } from '@sim/emcn/icons'
+import Link from 'next/link'
 import {
   RESOURCE_TILE_BASE,
   RESOURCE_TILE_FILL,
+  RESOURCE_TILE_PLAIN,
 } from '@/app/workspace/[workspaceId]/components/resource-tile'
 
 /**
@@ -16,15 +19,20 @@ import {
  * contains to 20px, so callers pass their raw icon node without pre-sizing it.
  */
 interface SettingsResourceRowProps {
-  /** Icon node centered in the tile; a `<svg>` is normalized to 20px, an `<img>` to 20px (or the full tile when `iconFill`). */
-  icon: ReactNode
+  /**
+   * Icon node centered in the tile; a `<svg>` is normalized to 20px, an `<img>` to
+   * 20px (or the full tile when `iconFill`). Omit it for rows whose resource has no
+   * identity glyph (an API key, a permission group) — the row then leads with text.
+   */
+  icon?: ReactNode
   /**
    * Icon chrome. `tile` (default) is the bordered 36px tile for brand/logo and
    * resource icons; `plain` drops the tile for a bare 14px glyph in
    * `--text-icon`, for rows whose icon is a type marker rather than an identity
-   * (e.g. a folder on disk).
+   * (e.g. a folder on disk); `custom` renders `icon` verbatim, for callers that
+   * must supply their own tile (e.g. the brand-tinted `IntegrationTile`).
    */
-  iconVariant?: 'tile' | 'plain'
+  iconVariant?: 'tile' | 'plain' | 'custom'
   /**
    * Let an image icon fill the tile edge-to-edge instead of clamping to 20px.
    * Use for uploaded image/logo icons (e.g. custom blocks); glyph `<svg>`s still
@@ -41,20 +49,72 @@ interface SettingsResourceRowProps {
   /** Secondary muted line — truncates. */
   description?: ReactNode
   /**
-   * Trailing element pinned to the row's end (chips, actions menu, status). The row
-   * keeps it at its natural size — callers never need their own `flex-shrink-0`.
+   * Interactive controls pinned to the row's end (chips, actions menu). These sit
+   * ABOVE the row's own hit area, so their clicks are theirs. The row keeps them at
+   * their natural size — callers never need their own `flex-shrink-0`.
+   *
+   * Decorative trailing content (a status badge, a tag) belongs in {@link badge}:
+   * anything placed here swallows clicks meant for the row.
    */
   trailing?: ReactNode
   /**
-   * Makes the icon + text cluster activatable. `trailing` stays a sibling, so
-   * its own controls keep working — never nest an interactive `trailing` inside
-   * the row's own hit area.
+   * Decorative trailing content — a status badge or tag. Rendered before
+   * {@link trailing} and made click-through, so it never turns the row's right
+   * edge into a dead zone.
+   */
+  badge?: ReactNode
+  /**
+   * Makes the whole row activatable via a stretched overlay button. `trailing`
+   * stacks above it, so interactive trailing controls (menus, chips) keep
+   * working — never nest an interactive `trailing` inside a caller-supplied
+   * wrapper `<button>`, which is invalid HTML.
    */
   onClick?: () => void
-  /** Accessible name for the activatable cluster. Required alongside `onClick`. */
+  /**
+   * Navigates on activation instead of calling `onClick`. Prefer this over
+   * `onClick` + `router.push` so the row keeps real link semantics — prefetch,
+   * middle-click, open-in-new-tab.
+   */
+  href?: string
+  /** Accessible name for the activatable cluster. Required alongside `onClick`/`href`. */
   clickLabel?: string
+  /**
+   * Appends the canonical navigation chevron after `trailing`. Set it on rows that
+   * open a detail page; leave it off for rows whose `onClick` performs an action
+   * in place. The row owns the glyph so callers never pick an arrow themselves —
+   * `lucide-react` and `@sim/emcn/icons` ship visibly different ones.
+   */
+  navigable?: boolean
+  /**
+   * Drops the row's `-mx-2` bleed and padding. For a row that is not in a list —
+   * a detail heading — or one inside a fixed-height `overflow-y-auto` box, where
+   * the bleed would force a horizontal scrollbar.
+   */
+  flush?: boolean
 }
 
+/** The one navigation chevron for every settings resource row. */
+export const RESOURCE_ROW_ARROW_CLASSES = 'size-4 flex-shrink-0 text-[var(--text-icon)]'
+
+/**
+ * Single-column list of {@link SettingsResourceRow}s. The rows carry their own
+ * `-mx-2` bleed and padding, so the container only sets the rhythm.
+ */
+export const RESOURCE_LIST_STACK = 'flex flex-col gap-y-0.5'
+
+/**
+ * Responsive two-up card grid worn by the skills, integrations, and passwords
+ * lists. The column gap budgets for the rows' own `-mx-2`: 24px of track gap
+ * minus 16px of combined bleed leaves the same 8px gutter a stack row gets.
+ * Narrowing it makes neighbouring rows — and their hit areas — overlap.
+ *
+ * The track minimum is 264px, not 280px, for the same reason: `auto-fit` measures
+ * tracks rather than margin boxes, so the wider gap would otherwise drop to one
+ * column 32px earlier than this grid did when the container owned the bleed.
+ */
+export const RESOURCE_LIST_GRID =
+  'grid grid-cols-[repeat(auto-fit,minmax(264px,1fr))] gap-x-6 gap-y-0.5'
+
 const PLAIN_BASE =
   'flex size-[14px] flex-shrink-0 items-center justify-center text-[var(--text-icon)] [&_svg]:size-[14px] [&_img]:size-[14px]'
 
@@ -66,53 +126,105 @@ export function SettingsResourceRow({
   title,
   description,
   trailing,
+  badge,
   onClick,
+  href,
   clickLabel,
+  navigable = false,
+  flush = false,
 }: SettingsResourceRowProps) {
+  const describedById = useId()
   const isTile = iconVariant === 'tile'
   const cluster = (
     <>
-      <div
-        className={
-          isTile
-            ? cn(
-                RESOURCE_TILE_BASE,
-                iconFilled ? RESOURCE_TILE_FILL : 'bg-[var(--bg)]',
-                iconFill ? '[&_img]:size-full' : '[&_img]:size-5'
-              )
-            : PLAIN_BASE
-        }
-      >
-        {icon}
-      </div>
+      {icon == null ? null : iconVariant === 'custom' ? (
+        icon
+      ) : (
+        <div
+          className={
+            isTile
+              ? cn(
+                  RESOURCE_TILE_BASE,
+                  iconFilled ? RESOURCE_TILE_FILL : RESOURCE_TILE_PLAIN,
+                  iconFill ? '[&_img]:size-full' : '[&_img]:size-5'
+                )
+              : PLAIN_BASE
+          }
+        >
+          {icon}
+        </div>
+      )}
       <div className='flex min-w-0 flex-col justify-center gap-[1px] text-left'>
         <span className='truncate text-[var(--text-body)] text-sm'>{title}</span>
         {description != null && (
-          <span className='truncate text-[var(--text-muted)] text-caption'>{description}</span>
+          <span id={describedById} className='truncate text-[var(--text-muted)] text-caption'>
+            {description}
+          </span>
         )}
       </div>
     </>
   )
-  const clusterClass = cn('flex min-w-0 items-center', isTile ? 'gap-2.5' : 'gap-2')
+  const clusterClass = cn(
+    'flex min-w-0 items-center',
+    iconVariant === 'plain' ? 'gap-2' : 'gap-2.5'
+  )
+  const hasEnd = badge != null || trailing != null || navigable
+  // Decoration and the chevron stay click-through so the row's right edge never
+  // becomes a dead zone; only `trailing` takes pointer events back.
+  const end = hasEnd ? (
+    <div className='pointer-events-none relative flex flex-shrink-0 items-center gap-2'>
+      {badge}
+      {trailing != null && <div className='pointer-events-auto flex items-center'>{trailing}</div>}
+      {navigable && <ArrowRight className={RESOURCE_ROW_ARROW_CLASSES} />}
+    </div>
+  ) : null
+
+  // Row geometry is identical whether or not the row is activatable, so a list
+  // mixing clickable and static rows keeps one height and one inset.
+  const rowClass = cn('flex items-center justify-between gap-2.5', !flush && '-mx-2 rounded-lg p-2')
 
+  if (!onClick && !href) {
+    return (
+      <div className={rowClass}>
+        <div className={clusterClass}>{cluster}</div>
+        {end}
+      </div>
+    )
+  }
+
+  // The ring renders on the stretched overlay, which is inset-0 over the row — so a
+  // keyboard focus outline traces the visible row even though the control is empty.
+  const overlayClass =
+    'absolute inset-0 cursor-pointer rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)]'
+
+  // The hit area is a stretched overlay rather than a wrapper around the cluster:
+  // it lets the hover band span the full row (matching every hand-rolled settings
+  // list) while `trailing` — which may hold its own buttons — stacks above it.
   return (
-    <div className='flex items-center justify-between gap-2.5'>
-      {onClick ? (
+    <div
+      className={cn(
+        rowClass,
+        'group relative transition-colors hover-hover:bg-[var(--surface-active)]'
+      )}
+    >
+      {href ? (
+        <Link
+          href={href}
+          aria-label={clickLabel}
+          aria-describedby={description != null ? describedById : undefined}
+          className={overlayClass}
+        />
+      ) : (
         <button
           type='button'
           onClick={onClick}
           aria-label={clickLabel}
-          className={cn(
-            clusterClass,
-            '-mx-2 cursor-pointer rounded-md px-2 py-1 transition-colors hover-hover:bg-[var(--surface-4)] focus:outline-none'
-          )}
-        >
-          {cluster}
-        </button>
-      ) : (
-        <div className={clusterClass}>{cluster}</div>
+          aria-describedby={description != null ? describedById : undefined}
+          className={overlayClass}
+        />
       )}
-      {trailing ? <div className='flex flex-shrink-0 items-center'>{trailing}</div> : null}
+      <div className={cn(clusterClass, 'pointer-events-none')}>{cluster}</div>
+      {end}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-section/settings-section.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-section/settings-section.tsx
index 18fa43c9315..6e80f8b985e 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-section/settings-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-section/settings-section.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 
 interface SettingsSectionProps {
-  label: string
+  label: ReactNode
   /** Optional node rendered immediately to the right of the label (e.g. an info tooltip). */
   headerAccessory?: ReactNode
   /** Optional control pinned to the far right of the header row (e.g. a Select All chip). */
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx
index d5063475eee..2417477fb83 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx
@@ -123,7 +123,9 @@ export function CreateWorkflowMcpServerModal({
               <ButtonGroupItem value='public'>Public</ButtonGroupItem>
             </ButtonGroup>
             {formData.isPublic && (
-              <span className='text-[var(--text-muted)] text-xs'>No authentication required</span>
+              <span className='text-[var(--text-muted)] text-caption'>
+                No authentication required
+              </span>
             )}
           </div>
         </ChipModalField>
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 69fed161b7e..1a7accd3634 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
@@ -27,6 +27,7 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { Check, Clipboard, Plus, Server } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { useQueryState } from 'nuqs'
+import { McpIcon } from '@/components/icons'
 import { canMutateWorkspaceSettingsSection } from '@/components/settings/navigation'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -39,8 +40,13 @@ import {
 import { CreateApiKeyModal } from '@/app/workspace/[workspaceId]/settings/components/api-keys/components'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
+import { SettingsField } from '@/app/workspace/[workspaceId]/settings/components/settings-field'
 import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import { CreateWorkflowMcpServerModal } from '@/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components'
 import { useApiKeys } from '@/hooks/queries/api-keys'
@@ -65,11 +71,22 @@ interface ServerDetailViewProps {
   workspaceId: string
   serverId: string
   onBack: () => void
+  /** Opens the parent's delete confirmation — the modal lives with the mutation.
+   *  Absent until the parent's list resolves, so a deep link never shows an inert Delete. */
+  onDelete?: () => void
+  isDeleting: boolean
 }
 
 type McpClientType = 'sim' | 'cursor' | 'claude-code' | 'claude-desktop' | 'vscode'
 
-function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDetailViewProps) {
+function ServerDetailView({
+  canManage,
+  workspaceId,
+  serverId,
+  onBack,
+  onDelete,
+  isDeleting,
+}: ServerDetailViewProps) {
   const { data, isLoading, error } = useWorkflowMcpServer(workspaceId, serverId)
   const { data: deployedWorkflows = [], isLoading: isLoadingWorkflows } =
     useDeployedWorkflows(workspaceId)
@@ -363,11 +380,7 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
   if (error || !data) {
     return (
       <SettingsPanel back={{ text: 'MCP servers', icon: ArrowLeft, onSelect: onBack }}>
-        <div className='flex min-h-0 flex-1 items-center justify-center'>
-          <p className='text-[var(--text-error)] text-xs leading-tight'>
-            Failed to load server details
-          </p>
-        </div>
+        <SettingsEmptyState tone='error'>Failed to load server details</SettingsEmptyState>
       </SettingsPanel>
     )
   }
@@ -393,6 +406,17 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
                     ? 'All deployed workflows have been added to this server.'
                     : undefined,
                 },
+                ...(onDelete
+                  ? [
+                      {
+                        id: 'delete',
+                        text: isDeleting ? 'Deleting...' : 'Delete',
+                        variant: 'destructive' as const,
+                        onSelect: onDelete,
+                        disabled: isDeleting,
+                      },
+                    ]
+                  : []),
               ]
             : []
         }
@@ -410,25 +434,20 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
           <div className='min-h-[300px] pt-4'>
             {activeServerTab === 'workflows' && (
               <div className='flex flex-col gap-4.5'>
-                <span className='font-medium text-[var(--text-primary)] text-sm'>Workflows</span>
-
                 {tools.length === 0 ? (
                   <p className='text-[var(--text-muted)] text-sm'>
                     No workflows added yet. Click &quot;Add Workflow&quot; to add a deployed
                     workflow.
                   </p>
                 ) : (
-                  <div className='flex flex-col gap-2'>
+                  <div className={RESOURCE_LIST_STACK}>
                     {tools.map((tool) => (
-                      <div key={tool.id} className='flex items-center justify-between gap-3'>
-                        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                          <span className='text-[var(--text-body)] text-sm'>{tool.toolName}</span>
-                          <p className='truncate text-[var(--text-muted)] text-caption'>
-                            {tool.toolDescription || 'No description'}
-                          </p>
-                        </div>
-                        {canManage && (
-                          <div className='flex flex-shrink-0 items-center gap-1'>
+                      <SettingsResourceRow
+                        key={tool.id}
+                        title={tool.toolName}
+                        description={tool.toolDescription || 'No description'}
+                        trailing={
+                          canManage ? (
                             <RowActionsMenu
                               label='Tool actions'
                               actions={[
@@ -441,15 +460,15 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
                                 },
                               ]}
                             />
-                          </div>
-                        )}
-                      </div>
+                          ) : undefined
+                        }
+                      />
                     ))}
                   </div>
                 )}
 
                 {deployedWorkflows.length === 0 && !isLoadingWorkflows && (
-                  <p className='mt-1 text-[var(--text-muted)] text-xs'>
+                  <p className='mt-1 text-[var(--text-muted)] text-caption'>
                     Deploy a workflow first to add it to this server.
                   </p>
                 )}
@@ -459,43 +478,24 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
             {activeServerTab === 'details' && (
               <div className='flex flex-col gap-4.5'>
                 <div className='grid grid-cols-[1fr_1fr_1fr] gap-x-6 gap-y-3.5'>
-                  <div className='flex flex-col gap-1'>
-                    <span className='font-medium text-[var(--text-primary)] text-sm'>
-                      Server Name
-                    </span>
-                    <p className='text-[var(--text-secondary)] text-base'>{server.name}</p>
-                  </div>
-                  <div className='flex flex-col gap-1'>
-                    <span className='font-medium text-[var(--text-primary)] text-sm'>
-                      Transport
-                    </span>
-                    <p className='text-[var(--text-secondary)] text-base'>Streamable-HTTP</p>
-                  </div>
-                  <div className='flex flex-col gap-1'>
-                    <span className='font-medium text-[var(--text-primary)] text-sm'>Access</span>
-                    <p className='text-[var(--text-secondary)] text-base'>
-                      {server.isPublic ? 'Public' : 'API Key'}
-                    </p>
-                  </div>
+                  <SettingsField label='Server Name'>{server.name}</SettingsField>
+                  <SettingsField label='Transport'>Streamable-HTTP</SettingsField>
+                  <SettingsField label='Access'>
+                    {server.isPublic ? 'Public' : 'API Key'}
+                  </SettingsField>
                 </div>
 
                 {server.description?.trim() && (
-                  <div className='flex flex-col gap-1'>
-                    <span className='font-medium text-[var(--text-primary)] text-sm'>
-                      Description
-                    </span>
-                    <p className='text-[var(--text-secondary)] text-base'>{server.description}</p>
-                  </div>
+                  <SettingsField label='Description'>{server.description}</SettingsField>
                 )}
 
-                <div className='flex flex-col gap-1'>
-                  <span className='font-medium text-[var(--text-primary)] text-sm'>URL</span>
-                  <p className='break-all text-[var(--text-secondary)] text-base'>{mcpServerUrl}</p>
-                </div>
+                <SettingsField label='URL' breakAll>
+                  {mcpServerUrl}
+                </SettingsField>
 
                 <div>
                   <div className='mb-[6.5px] flex items-center justify-between'>
-                    <span className='block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
+                    <span className='block pl-0.5 text-[var(--text-muted)] text-small'>
                       MCP Client
                     </span>
                   </div>
@@ -563,7 +563,7 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
                         )}
                       </Button>
                       {addToWorkspaceMutation.isError && (
-                        <p className='text-[var(--text-error)] text-xs'>
+                        <p className='text-[var(--text-error)] text-caption'>
                           {addToWorkspaceMutation.error?.message || 'Failed to add server'}
                         </p>
                       )}
@@ -609,7 +609,7 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
                       )}
                     </div>
                     {!server.isPublic && (
-                      <p className='mt-2 text-[var(--text-muted)] text-xs'>
+                      <p className='mt-2 text-[var(--text-muted)] text-caption'>
                         Replace $SIM_API_KEY with your API key
                         {canManage && (
                           <>
@@ -632,244 +632,235 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
           </div>
         </div>
       </SettingsPanel>
+      canManage && (
+      <ChipConfirmModal
+        open={!!toolToDelete}
+        onOpenChange={(open) => !open && setToolToDelete(null)}
+        srTitle='Remove Workflow'
+        title='Remove Workflow'
+        text={[
+          'Are you sure you want to remove ',
+          { text: toolToDelete?.toolName ?? 'this workflow', bold: true },
+          ' from this server? The workflow will remain deployed and can be added back later.',
+        ]}
+        confirm={{
+          label: 'Remove',
+          onClick: handleDeleteTool,
+          pending: deleteToolMutation.isPending,
+          pendingLabel: 'Removing...',
+        }}
+      />
+      )canManage && (
+      <ChipModal
+        open={!!toolToView}
+        onOpenChange={(open) => {
+          if (!open) {
+            setToolToView(null)
+            setEditingDescription('')
+            setEditingParameterDescriptions({})
+          }
+        }}
+        srTitle={toolToView?.toolName ?? 'Edit Tool'}
+      >
+        <ChipModalHeader onClose={() => setToolToView(null)}>
+          {toolToView?.toolName}
+        </ChipModalHeader>
+        <ChipModalBody>
+          <ChipModalField
+            type='textarea'
+            title='Description'
+            value={editingDescription}
+            onChange={setEditingDescription}
+            placeholder='Describe what this tool does...'
+            minHeight={80}
+          />
 
-      {canManage && (
-        <ChipConfirmModal
-          open={!!toolToDelete}
-          onOpenChange={(open) => !open && setToolToDelete(null)}
-          srTitle='Remove Workflow'
-          title='Remove Workflow'
-          text={[
-            'Are you sure you want to remove ',
-            { text: toolToDelete?.toolName ?? 'this workflow', bold: true },
-            ' from this server? The workflow will remain deployed and can be added back later.',
-          ]}
-          confirm={{
-            label: 'Remove',
-            onClick: handleDeleteTool,
-            pending: deleteToolMutation.isPending,
-            pendingLabel: 'Removing...',
-          }}
-        />
-      )}
-
-      {canManage && (
-        <ChipModal
-          open={!!toolToView}
-          onOpenChange={(open) => {
-            if (!open) {
-              setToolToView(null)
-              setEditingDescription('')
-              setEditingParameterDescriptions({})
-            }
-          }}
-          srTitle={toolToView?.toolName ?? 'Edit Tool'}
-        >
-          <ChipModalHeader onClose={() => setToolToView(null)}>
-            {toolToView?.toolName}
-          </ChipModalHeader>
-          <ChipModalBody>
-            <ChipModalField
-              type='textarea'
-              title='Description'
-              value={editingDescription}
-              onChange={setEditingDescription}
-              placeholder='Describe what this tool does...'
-              minHeight={80}
-            />
-
-            <ChipModalField type='custom' title='Parameters'>
-              {(() => {
-                const schema = toolToView?.parameterSchema as
-                  | { properties?: Record<string, { type?: string; description?: string }> }
-                  | undefined
-                const properties = schema?.properties
-                const hasParams = properties && Object.keys(properties).length > 0
-                return hasParams ? (
-                  <div className='flex flex-col gap-2'>
-                    {Object.entries(properties).map(([name, prop]) => (
-                      <div
-                        key={name}
-                        className='overflow-hidden rounded-sm border border-[var(--border-1)]'
-                      >
-                        <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
-                          <div className='flex min-w-0 flex-1 items-center gap-2'>
-                            <span className='block truncate font-medium text-[var(--text-tertiary)] text-base'>
-                              {name}
-                            </span>
-                            <Badge variant='type' size='sm'>
-                              {prop.type || 'any'}
-                            </Badge>
-                          </div>
+          <ChipModalField type='custom' title='Parameters'>
+            {(() => {
+              const schema = toolToView?.parameterSchema as
+                | { properties?: Record<string, { type?: string; description?: string }> }
+                | undefined
+              const properties = schema?.properties
+              const hasParams = properties && Object.keys(properties).length > 0
+              return hasParams ? (
+                <div className='flex flex-col gap-2'>
+                  {Object.entries(properties).map(([name, prop]) => (
+                    <div
+                      key={name}
+                      className='overflow-hidden rounded-sm border border-[var(--border-1)]'
+                    >
+                      <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
+                        <div className='flex min-w-0 flex-1 items-center gap-2'>
+                          <span className='block truncate font-medium text-[var(--text-tertiary)] text-base'>
+                            {name}
+                          </span>
+                          <Badge variant='type' size='sm'>
+                            {prop.type || 'any'}
+                          </Badge>
                         </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-sm'>Description</Label>
-                            <ChipInput
-                              value={editingParameterDescriptions[name] || ''}
-                              onChange={(e) =>
-                                setEditingParameterDescriptions((prev) => ({
-                                  ...prev,
-                                  [name]: e.target.value,
-                                }))
-                              }
-                              placeholder={`Enter description for ${name}`}
-                            />
-                          </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>Description</Label>
+                          <ChipInput
+                            value={editingParameterDescriptions[name] || ''}
+                            onChange={(e) =>
+                              setEditingParameterDescriptions((prev) => ({
+                                ...prev,
+                                [name]: e.target.value,
+                              }))
+                            }
+                            placeholder={`Enter description for ${name}`}
+                          />
                         </div>
                       </div>
-                    ))}
-                  </div>
-                ) : (
-                  <p className='text-[var(--text-muted)] text-sm'>
-                    No inputs configured for this workflow.
-                  </p>
-                )
-              })()}
-            </ChipModalField>
-          </ChipModalBody>
-          <ChipModalFooter
-            onCancel={() => setToolToView(null)}
-            primaryAction={{
-              label: updateToolMutation.isPending ? 'Saving...' : 'Save',
-              onClick: handleSaveToolEdit,
-              disabled: isSaveToolDisabled,
-            }}
-          />
-        </ChipModal>
-      )}
-
-      {canManage && (
-        <ChipModal
-          open={showAddWorkflow}
-          onOpenChange={(open) => {
-            if (!open) {
-              setShowAddWorkflow(false)
-              setSelectedWorkflowId(null)
-            }
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className='text-[var(--text-muted)] text-sm'>
+                  No inputs configured for this workflow.
+                </p>
+              )
+            })()}
+          </ChipModalField>
+        </ChipModalBody>
+        <ChipModalFooter
+          onCancel={() => setToolToView(null)}
+          primaryAction={{
+            label: updateToolMutation.isPending ? 'Saving...' : 'Save',
+            onClick: handleSaveToolEdit,
+            disabled: isSaveToolDisabled,
           }}
-          srTitle='Add Workflow'
-        >
-          <ChipModalHeader
-            onClose={() => {
-              setShowAddWorkflow(false)
-              setSelectedWorkflowId(null)
-            }}
-          >
-            Add Workflow
-          </ChipModalHeader>
-          <ChipModalBody>
-            <p className='px-2 text-[var(--text-secondary)] text-sm'>
-              Select a deployed workflow to add to this MCP server. The workflow will be available
-              as a tool.
-            </p>
-            <ChipModalField type='custom' title='Select Workflow'>
-              <ChipSelect
-                options={workflowOptions}
-                value={selectedWorkflowId || undefined}
-                onChange={(value: string) => setSelectedWorkflowId(value)}
-                placeholder='Select a workflow...'
-                searchable
-                searchPlaceholder='Search workflows...'
-                disabled={addToolMutation.isPending}
-                fullWidth
-                dropdownWidth='trigger'
-                align='start'
-                displayLabel={selectedWorkflow?.name}
-              />
-            </ChipModalField>
-            <ChipModalError>
-              {addToolMutation.isError
-                ? addToolMutation.error?.message || 'Failed to add workflow'
-                : null}
-            </ChipModalError>
-          </ChipModalBody>
-          <ChipModalFooter
-            onCancel={() => {
-              setShowAddWorkflow(false)
-              setSelectedWorkflowId(null)
-            }}
-            primaryAction={{
-              label: addToolMutation.isPending ? 'Adding...' : 'Add Workflow',
-              onClick: handleAddWorkflow,
-              disabled: !selectedWorkflowId || addToolMutation.isPending,
-            }}
-          />
-        </ChipModal>
-      )}
-
-      {canManage && (
-        <ChipModal
-          open={showEditServer}
-          onOpenChange={(open) => {
-            if (!open) {
-              setShowEditServer(false)
-            }
+        />
+      </ChipModal>
+      )canManage && (
+      <ChipModal
+        open={showAddWorkflow}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowAddWorkflow(false)
+            setSelectedWorkflowId(null)
+          }
+        }}
+        srTitle='Add Workflow'
+      >
+        <ChipModalHeader
+          onClose={() => {
+            setShowAddWorkflow(false)
+            setSelectedWorkflowId(null)
           }}
-          srTitle='Edit Server'
         >
-          <ChipModalHeader onClose={() => setShowEditServer(false)}>Edit Server</ChipModalHeader>
-          <ChipModalBody>
-            <ChipModalField
-              type='input'
-              title='Server name'
-              required
-              value={editServerName}
-              onChange={setEditServerName}
-              placeholder='e.g., My MCP Server'
-            />
-            <ChipModalField
-              type='textarea'
-              title='Description'
-              value={editServerDescription}
-              onChange={setEditServerDescription}
-              placeholder='Describe what this MCP server does (optional)'
-              minHeight={60}
+          Add Workflow
+        </ChipModalHeader>
+        <ChipModalBody>
+          <p className='px-2 text-[var(--text-secondary)] text-sm'>
+            Select a deployed workflow to add to this MCP server. The workflow will be available as
+            a tool.
+          </p>
+          <ChipModalField type='custom' title='Select Workflow'>
+            <ChipSelect
+              options={workflowOptions}
+              value={selectedWorkflowId || undefined}
+              onChange={(value: string) => setSelectedWorkflowId(value)}
+              placeholder='Select a workflow...'
+              searchable
+              searchPlaceholder='Search workflows...'
+              disabled={addToolMutation.isPending}
+              fullWidth
+              dropdownWidth='trigger'
+              align='start'
+              displayLabel={selectedWorkflow?.name}
             />
-            <ChipModalField type='custom' title='Access'>
-              <div className='flex flex-col gap-1.5'>
-                <ButtonGroup
-                  value={editServerIsPublic ? 'public' : 'private'}
-                  onValueChange={(value) => setEditServerIsPublic(value === 'public')}
-                >
-                  <ButtonGroupItem value='private'>API Key</ButtonGroupItem>
-                  <ButtonGroupItem value='public'>Public</ButtonGroupItem>
-                </ButtonGroup>
-                <p className='text-[var(--text-muted)] text-xs'>
-                  {editServerIsPublic
-                    ? 'Anyone with the URL can call this server without authentication'
-                    : 'Requests must include your Sim API key in the X-API-Key header'}
-                </p>
-              </div>
-            </ChipModalField>
-          </ChipModalBody>
-          <ChipModalFooter
-            onCancel={() => setShowEditServer(false)}
-            primaryAction={{
-              label: updateServerMutation.isPending ? 'Saving...' : 'Save',
-              onClick: handleSaveServerEdit,
-              disabled:
-                !editServerName.trim() ||
-                updateServerMutation.isPending ||
-                (editServerName === server.name &&
-                  editServerDescription === (server.description || '') &&
-                  editServerIsPublic === server.isPublic),
-            }}
+          </ChipModalField>
+          <ChipModalError>
+            {addToolMutation.isError
+              ? addToolMutation.error?.message || 'Failed to add workflow'
+              : null}
+          </ChipModalError>
+        </ChipModalBody>
+        <ChipModalFooter
+          onCancel={() => {
+            setShowAddWorkflow(false)
+            setSelectedWorkflowId(null)
+          }}
+          primaryAction={{
+            label: addToolMutation.isPending ? 'Adding...' : 'Add Workflow',
+            onClick: handleAddWorkflow,
+            disabled: !selectedWorkflowId || addToolMutation.isPending,
+          }}
+        />
+      </ChipModal>
+      )canManage && (
+      <ChipModal
+        open={showEditServer}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowEditServer(false)
+          }
+        }}
+        srTitle='Edit Server'
+      >
+        <ChipModalHeader onClose={() => setShowEditServer(false)}>Edit Server</ChipModalHeader>
+        <ChipModalBody>
+          <ChipModalField
+            type='input'
+            title='Server name'
+            required
+            value={editServerName}
+            onChange={setEditServerName}
+            placeholder='e.g., My MCP Server'
           />
-        </ChipModal>
-      )}
-
-      {canManage && (
-        <CreateApiKeyModal
-          open={showCreateApiKeyModal}
-          onOpenChange={setShowCreateApiKeyModal}
-          workspaceId={workspaceId}
-          existingKeyNames={existingKeyNames}
-          allowPersonalApiKeys={allowPersonalApiKeys}
-          canManageWorkspaceKeys={canManageWorkspaceKeys}
-          defaultKeyType={defaultKeyType}
+          <ChipModalField
+            type='textarea'
+            title='Description'
+            value={editServerDescription}
+            onChange={setEditServerDescription}
+            placeholder='Describe what this MCP server does (optional)'
+            minHeight={60}
+          />
+          <ChipModalField type='custom' title='Access'>
+            <div className='flex flex-col gap-1.5'>
+              <ButtonGroup
+                value={editServerIsPublic ? 'public' : 'private'}
+                onValueChange={(value) => setEditServerIsPublic(value === 'public')}
+              >
+                <ButtonGroupItem value='private'>API Key</ButtonGroupItem>
+                <ButtonGroupItem value='public'>Public</ButtonGroupItem>
+              </ButtonGroup>
+              <p className='text-[var(--text-muted)] text-caption'>
+                {editServerIsPublic
+                  ? 'Anyone with the URL can call this server without authentication'
+                  : 'Requests must include your Sim API key in the X-API-Key header'}
+              </p>
+            </div>
+          </ChipModalField>
+        </ChipModalBody>
+        <ChipModalFooter
+          onCancel={() => setShowEditServer(false)}
+          primaryAction={{
+            label: updateServerMutation.isPending ? 'Saving...' : 'Save',
+            onClick: handleSaveServerEdit,
+            disabled:
+              !editServerName.trim() ||
+              updateServerMutation.isPending ||
+              (editServerName === server.name &&
+                editServerDescription === (server.description || '') &&
+                editServerIsPublic === server.isPublic),
+          }}
         />
-      )}
+      </ChipModal>
+      )canManage && (
+      <CreateApiKeyModal
+        open={showCreateApiKeyModal}
+        onOpenChange={setShowCreateApiKeyModal}
+        workspaceId={workspaceId}
+        existingKeyNames={existingKeyNames}
+        allowPersonalApiKeys={allowPersonalApiKeys}
+        canManageWorkspaceKeys={canManageWorkspaceKeys}
+        defaultKeyType={defaultKeyType}
+      />
+      )
     </>
   )
 }
@@ -926,6 +917,12 @@ export function WorkflowMcpServers() {
         workspaceId,
         serverId: serverToDelete.id,
       })
+      // Deleting from the detail view leaves a dead id in the URL; on reload the
+      // detail branch mounts against a server that no longer exists.
+      if (selectedServerId === serverToDelete.id) {
+        void setServerTab(null, { history: 'replace' })
+        void setSelectedServerId(null, { history: 'replace' })
+      }
     } catch (err) {
       logger.error('Failed to delete server:', err)
     } finally {
@@ -951,17 +948,40 @@ export function WorkflowMcpServers() {
   const selectedServerResolves =
     selectedServerId !== null && (isLoading || servers.some((s) => s.id === selectedServerId))
 
+  // Delete is reachable from both the list and the detail header, so the confirm
+  // modal has to render in whichever branch is mounted.
+  const deleteConfirmModal = canAdmin ? (
+    <ChipConfirmModal
+      open={!!serverToDelete}
+      onOpenChange={(open) => !open && setServerToDelete(null)}
+      srTitle='Delete MCP Server'
+      title='Delete MCP Server'
+      text={[
+        'Are you sure you want to delete ',
+        { text: serverToDelete?.name ?? 'this server', bold: true },
+        '? This action cannot be undone.',
+      ]}
+      confirm={{ label: 'Delete', onClick: handleDeleteServer }}
+    />
+  ) : null
+
   if (selectedServerId && selectedServerResolves) {
+    const selectedServer = servers.find((s) => s.id === selectedServerId)
     return (
-      <ServerDetailView
-        canManage={canAdmin}
-        workspaceId={workspaceId}
-        serverId={selectedServerId}
-        onBack={() => {
-          void setServerTab(null, { history: 'replace' })
-          void setSelectedServerId(null, { history: 'replace' })
-        }}
-      />
+      <>
+        <ServerDetailView
+          canManage={canAdmin}
+          workspaceId={workspaceId}
+          serverId={selectedServerId}
+          onBack={() => {
+            void setServerTab(null, { history: 'replace' })
+            void setSelectedServerId(null, { history: 'replace' })
+          }}
+          onDelete={selectedServer ? () => setServerToDelete(selectedServer) : undefined}
+          isDeleting={deletingServers.has(selectedServerId)}
+        />
+        {deleteConfirmModal}
+      </>
     )
   }
 
@@ -989,62 +1009,42 @@ export function WorkflowMcpServers() {
       >
         <div className='min-h-0 flex-1'>
           {error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-2'>
-              <p className='text-[var(--text-error)] text-sm leading-tight'>
-                {getErrorMessage(error, 'Failed to load MCP servers')}
-              </p>
-            </div>
+            <SettingsEmptyState tone='error'>
+              {getErrorMessage(error, 'Failed to load MCP servers')}
+            </SettingsEmptyState>
           ) : isLoading ? null : !hasServers ? (
             <SettingsEmptyState>
               {canAdmin ? 'Click "Add server" above to get started' : 'No MCP servers configured'}
             </SettingsEmptyState>
           ) : (
-            <div className='flex flex-col gap-2'>
+            <div className={RESOURCE_LIST_STACK}>
               {filteredServers.map((server) => {
                 const count = server.toolCount || 0
                 const toolsLabel = `${count} tool${count !== 1 ? 's' : ''}`
-                const isDeleting = deletingServers.has(server.id)
                 return (
-                  <div key={server.id} className='flex items-center justify-between gap-3'>
-                    <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                      <div className='flex items-center gap-1.5'>
-                        <span className='max-w-[200px] truncate text-[var(--text-body)] text-sm'>
-                          {server.name}
-                        </span>
-                        {server.isPublic && (
-                          <Badge variant='outline' size='sm'>
-                            Public
-                          </Badge>
-                        )}
-                      </div>
-                      <p className='truncate text-[var(--text-muted)] text-caption'>{toolsLabel}</p>
-                    </div>
-                    <div className='flex flex-shrink-0 items-center gap-1'>
-                      <RowActionsMenu
-                        label='Server actions'
-                        actions={[
-                          {
-                            label: 'Details',
-                            onSelect: () => {
-                              // A lingering ?server-tab= (dead deep link) must not re-target the next open — reset it in the same batched push.
-                              void setServerTab(null)
-                              void setSelectedServerId(server.id)
-                            },
-                          },
-                          ...(canAdmin
-                            ? [
-                                {
-                                  label: 'Delete',
-                                  destructive: true,
-                                  disabled: isDeleting,
-                                  onSelect: () => setServerToDelete(server),
-                                },
-                              ]
-                            : []),
-                        ]}
-                      />
-                    </div>
-                  </div>
+                  <SettingsResourceRow
+                    key={server.id}
+                    icon={<McpIcon className='text-[var(--text-icon)]' />}
+                    iconFilled
+                    title={server.name}
+                    description={toolsLabel}
+                    onClick={() => {
+                      // A lingering ?server-tab= (dead deep link) must not re-target the next open — reset it in the same batched push.
+                      void setServerTab(null)
+                      void setSelectedServerId(server.id)
+                    }}
+                    clickLabel={`Open ${server.name}`}
+                    navigable
+                    // The badge sits at the row's end, not beside the name — the
+                    // title truncates, so a long name would clip it out of view.
+                    badge={
+                      server.isPublic ? (
+                        <Badge variant='outline' size='sm'>
+                          Public
+                        </Badge>
+                      ) : undefined
+                    }
+                  />
                 )
               })}
               {showNoResults && (
@@ -1066,20 +1066,7 @@ export function WorkflowMcpServers() {
         />
       )}
 
-      {canAdmin && (
-        <ChipConfirmModal
-          open={!!serverToDelete}
-          onOpenChange={(open) => !open && setServerToDelete(null)}
-          srTitle='Delete MCP Server'
-          title='Delete MCP Server'
-          text={[
-            'Are you sure you want to delete ',
-            { text: serverToDelete?.name ?? 'this server', bold: true },
-            '? This action cannot be undone.',
-          ]}
-          confirm={{ label: 'Delete', onClick: handleDeleteServer }}
-        />
-      )}
+      {deleteConfirmModal}
     </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/secrets/[credentialId]/secret-detail.tsx b/apps/sim/app/workspace/[workspaceId]/settings/secrets/[credentialId]/secret-detail.tsx
index b1412d0d7f2..985b35649fa 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/secrets/[credentialId]/secret-detail.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/secrets/[credentialId]/secret-detail.tsx
@@ -4,18 +4,19 @@ import { useState } from 'react'
 import { Chip, ChipCopyInput, ChipLink, Send } from '@sim/emcn'
 import { ArrowLeft, Key } from '@sim/emcn/icons'
 import { SaveDiscardChips } from '@/components/settings/save-discard-actions'
+import { ResourceTile } from '@/app/workspace/[workspaceId]/components'
 import {
   AddPeopleModal,
   CredentialDetailHeading,
   CredentialDetailLayout,
   CredentialMembersSection,
-  DetailIconTile,
   DetailSection,
   UnsavedChangesModal,
   useUnsavedChangesGuard,
 } from '@/app/workspace/[workspaceId]/components/credential-detail'
 import { SecretValueField } from '@/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field'
 import { useSecretValue } from '@/app/workspace/[workspaceId]/settings/components/secrets/hooks/use-secret-value'
+import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { useWorkspaceCredential } from '@/hooks/queries/credentials'
 
 interface SecretDetailProps {
@@ -65,7 +66,7 @@ export function SecretDetail({ workspaceId, credentialId }: SecretDetailProps) {
   if (isPending && !credential) {
     return (
       <CredentialDetailLayout back={back} actions={actions}>
-        <p className='py-12 text-center text-[var(--text-muted)] text-sm'>Loading…</p>
+        <SettingsEmptyState variant='inline'>Loading…</SettingsEmptyState>
       </CredentialDetailLayout>
     )
   }
@@ -73,7 +74,7 @@ export function SecretDetail({ workspaceId, credentialId }: SecretDetailProps) {
   if (!credential) {
     return (
       <CredentialDetailLayout back={back} actions={actions}>
-        <p className='py-12 text-center text-[var(--text-muted)] text-sm'>Secret not found.</p>
+        <SettingsEmptyState variant='inline'>Secret not found.</SettingsEmptyState>
       </CredentialDetailLayout>
     )
   }
@@ -82,7 +83,7 @@ export function SecretDetail({ workspaceId, credentialId }: SecretDetailProps) {
     <>
       <CredentialDetailLayout back={back} actions={actions}>
         <CredentialDetailHeading
-          leading={<DetailIconTile icon={Key} />}
+          leading={<ResourceTile icon={Key} />}
           title={credential.envKey || credential.displayName}
           subtitle={
             isPersonal
diff --git a/apps/sim/app/workspace/[workspaceId]/skills/[skillId]/skill-detail.tsx b/apps/sim/app/workspace/[workspaceId]/skills/[skillId]/skill-detail.tsx
index 9c37ba94fdb..8fe37dcfe52 100644
--- a/apps/sim/app/workspace/[workspaceId]/skills/[skillId]/skill-detail.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/skills/[skillId]/skill-detail.tsx
@@ -15,6 +15,7 @@ import {
   UnsavedChangesModal,
   useUnsavedChangesGuard,
 } from '@/app/workspace/[workspaceId]/components/credential-detail'
+import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SkillEditorsCard } from '@/app/workspace/[workspaceId]/skills/[skillId]/components/skill-editors-card'
 import {
   type SkillFieldErrors,
@@ -199,7 +200,7 @@ export function SkillDetail({ workspaceId, skillId }: SkillDetailProps) {
   if ((skillsLoading || deleteSkill.isPending || deleteSkill.isSuccess) && !skill) {
     return (
       <CredentialDetailLayout back={back} actions={actions}>
-        <p className='py-12 text-center text-[var(--text-muted)] text-sm'>Loading…</p>
+        <SettingsEmptyState variant='inline'>Loading…</SettingsEmptyState>
       </CredentialDetailLayout>
     )
   }
@@ -207,7 +208,7 @@ export function SkillDetail({ workspaceId, skillId }: SkillDetailProps) {
   if (!skill) {
     return (
       <CredentialDetailLayout back={back} actions={actions}>
-        <p className='py-12 text-center text-[var(--text-muted)] text-sm'>Skill not found.</p>
+        <SettingsEmptyState variant='inline'>Skill not found.</SettingsEmptyState>
       </CredentialDetailLayout>
     )
   }
diff --git a/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx b/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
index 2f2dd9ad2ff..b671fb1e84d 100644
--- a/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
@@ -3,12 +3,18 @@
 import { useEffect, useRef } from 'react'
 import { Chip, ChipInput, Search } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
-import { ArrowRight, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
 import { SkillTile } from '@/app/workspace/[workspaceId]/components'
 import { IntegrationTabsHeader } from '@/app/workspace/[workspaceId]/integrations/components/integration-tabs-header'
 import { ShowcaseWithExplore } from '@/app/workspace/[workspaceId]/integrations/components/showcase-with-explore'
+import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
+import {
+  RESOURCE_LIST_GRID,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import {
   skillIdParam,
   skillIdUrlKeys,
@@ -20,48 +26,6 @@ import { useDebouncedSearchSetter } from '@/hooks/use-debounced-search-setter'
 
 const SKILLS_LABEL = 'Skills'
 
-interface SkillItemProps {
-  name: string
-  description: string
-  onClick: () => void
-}
-
-function SkillItem({ name, description, onClick }: SkillItemProps) {
-  return (
-    <button
-      type='button'
-      onClick={onClick}
-      className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-    >
-      <SkillTile />
-      <div className='flex min-w-0 flex-1 flex-col justify-center gap-[1px]'>
-        <span className='truncate text-[var(--text-body)] text-sm'>{name}</span>
-        {description && (
-          <span className='truncate text-[var(--text-muted)] text-caption'>{description}</span>
-        )}
-      </div>
-      <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
-    </button>
-  )
-}
-
-interface SkillSectionProps {
-  label: string
-  children: React.ReactNode
-}
-
-function SkillSection({ label, children }: SkillSectionProps) {
-  return (
-    <section className='flex flex-col'>
-      <span className='pl-0.5 text-[var(--text-muted)] text-small'>{label}</span>
-      <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
-      <div className='-mx-2 grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-x-2 gap-y-0.5'>
-        {children}
-      </div>
-    </section>
-  )
-}
-
 export function Skills() {
   const params = useParams()
   const router = useRouter()
@@ -132,30 +96,36 @@ export function Skills() {
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               disabled={isLoading}
-              className='flex-1'
+              className='min-w-0 flex-1'
             />
           </div>
 
           <div className='flex flex-col gap-7'>
             {error ? (
-              <div className='py-4 text-center text-[var(--error)] text-sm'>
+              <SettingsEmptyState variant='inline' tone='error'>
                 {getErrorMessage(error, 'Failed to load skills')}
-              </div>
+              </SettingsEmptyState>
             ) : filteredSkills.length > 0 ? (
-              <SkillSection label={SKILLS_LABEL}>
-                {filteredSkills.map((s) => (
-                  <SkillItem
-                    key={s.id}
-                    name={s.name}
-                    description={s.description}
-                    onClick={() => router.push(`${skillsHref}/${s.id}`)}
-                  />
-                ))}
-              </SkillSection>
+              <SettingsSection label={SKILLS_LABEL}>
+                <div className={RESOURCE_LIST_GRID}>
+                  {filteredSkills.map((s) => (
+                    <SettingsResourceRow
+                      key={s.id}
+                      iconVariant='custom'
+                      icon={<SkillTile />}
+                      title={s.name}
+                      description={s.description || undefined}
+                      onClick={() => router.push(`${skillsHref}/${s.id}`)}
+                      clickLabel={`Open ${s.name}`}
+                      navigable
+                    />
+                  ))}
+                </div>
+              </SettingsSection>
             ) : showNoResults ? (
-              <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
+              <SettingsEmptyState variant='inline'>
                 No skills found matching “{searchTerm}”
-              </div>
+              </SettingsEmptyState>
             ) : null}
           </div>
         </div>
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 808be0af4a0..a8b6cbeae41 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
@@ -1,5 +1,6 @@
 'use client'
 import { Check, ChipTag, Credit, chipVariants, cn, Info, RefreshCw } from '@sim/emcn'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
 /**
  * Props for {@link UpgradePlanCard}.
@@ -125,10 +126,7 @@ export function UpgradePlanCard({
         )}
       </div>
 
-      {/* Section header + divider matching integrations/skills separator language */}
-      <div className='flex flex-col'>
-        <span className='pl-0.5 text-[var(--text-muted)] text-small'>{segmentLabel}</span>
-        <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
+      <SettingsSection label={segmentLabel}>
         <ul className='flex flex-col gap-2'>
           {features.map((feature) => (
             <li key={feature} className='flex items-center gap-2'>
@@ -137,7 +135,7 @@ export function UpgradePlanCard({
             </li>
           ))}
         </ul>
-      </div>
+      </SettingsSection>
     </article>
   )
 }
diff --git a/apps/sim/ee/access-control/components/access-control.tsx b/apps/sim/ee/access-control/components/access-control.tsx
index ce4330347b1..003ba3eb514 100644
--- a/apps/sim/ee/access-control/components/access-control.tsx
+++ b/apps/sim/ee/access-control/components/access-control.tsx
@@ -14,7 +14,7 @@ import {
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { ArrowRight, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { useQueryState } from 'nuqs'
 import { isEnterprise } from '@/lib/billing/plan-helpers'
@@ -31,6 +31,10 @@ import {
 } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import { GroupDetail } from '@/ee/access-control/components/group-detail'
@@ -252,37 +256,27 @@ export function AccessControl({ isOrganizationAdmin, organizationId }: AccessCon
               No groups found matching "{searchTerm}"
             </SettingsEmptyState>
           ) : (
-            <div className='-mx-2 flex flex-col gap-y-0.5'>
+            <div className={RESOURCE_LIST_STACK}>
               {filteredGroups.map((group) => (
-                <button
+                <SettingsResourceRow
                   key={group.id}
-                  type='button'
+                  title={group.name}
+                  description={
+                    group.isDefault
+                      ? 'Everyone in the organization'
+                      : `${
+                          group.memberCount === 0
+                            ? 'All members'
+                            : `${group.memberCount} member${group.memberCount === 1 ? '' : 's'}`
+                        } · ${group.workspaces.length} workspace${
+                          group.workspaces.length === 1 ? '' : 's'
+                        }`
+                  }
+                  badge={group.isDefault ? <ChipTag variant='gray'>Default</ChipTag> : undefined}
                   onClick={() => openGroupDetail(group.id)}
-                  className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-                >
-                  <div className='flex min-w-0 flex-1 flex-col'>
-                    <div className='flex items-center gap-2'>
-                      <span className='truncate text-[var(--text-body)] text-sm'>{group.name}</span>
-                      {group.isDefault && (
-                        <ChipTag variant='gray' className='flex-shrink-0'>
-                          Default
-                        </ChipTag>
-                      )}
-                    </div>
-                    <span className='truncate text-[var(--text-muted)] text-caption'>
-                      {group.isDefault
-                        ? 'Everyone in the organization'
-                        : `${
-                            group.memberCount === 0
-                              ? 'All members'
-                              : `${group.memberCount} member${group.memberCount === 1 ? '' : 's'}`
-                          } · ${group.workspaces.length} workspace${
-                            group.workspaces.length === 1 ? '' : 's'
-                          }`}
-                    </span>
-                  </div>
-                  <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
-                </button>
+                  clickLabel={`Open ${group.name}`}
+                  navigable
+                />
               ))}
             </div>
           )}
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index 5e47ebee4d2..97e289fb7ab 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -436,9 +436,9 @@ function AddMembersModal({
 
               <div className='max-h-[280px] overflow-y-auto'>
                 {filteredMembers.length === 0 ? (
-                  <p className='py-4 text-center text-[var(--text-muted)] text-sm'>
+                  <SettingsEmptyState variant='inline'>
                     No members found matching "{searchTerm}"
-                  </p>
+                  </SettingsEmptyState>
                 ) : (
                   <div className='flex flex-col'>
                     {filteredMembers.map((member) => {
@@ -451,7 +451,7 @@ function AddMembersModal({
                           key={member.userId}
                           type='button'
                           onClick={() => handleToggleMember(member.userId)}
-                          className='flex items-center gap-2.5 rounded-sm p-2 text-left hover-hover:bg-[var(--surface-active)]'
+                          className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
                         >
                           <Checkbox checked={isSelected} />
                           <MemberAvatar name={name} image={member.user?.image ?? null} />
diff --git a/apps/sim/ee/custom-blocks/components/custom-blocks.tsx b/apps/sim/ee/custom-blocks/components/custom-blocks.tsx
index 50d0b7ebceb..428b433da5f 100644
--- a/apps/sim/ee/custom-blocks/components/custom-blocks.tsx
+++ b/apps/sim/ee/custom-blocks/components/custom-blocks.tsx
@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from 'react'
 import { ChipTag } from '@sim/emcn'
-import { ArrowRight, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { useQueryState } from 'nuqs'
 import { canMutateWorkspaceSettingsSection } from '@/components/settings/navigation'
@@ -13,7 +13,10 @@ import {
 } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
-import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import { getCustomBlockIcon } from '@/blocks/custom/custom-block-icon'
@@ -126,30 +129,21 @@ export function CustomBlocks() {
             No blocks found matching "{searchTerm}"
           </SettingsEmptyState>
         ) : (
-          <div className='-mx-2 flex flex-col gap-y-0.5'>
+          <div className={RESOURCE_LIST_STACK}>
             {filtered.map((cb) => {
               const Icon = getCustomBlockIcon(cb.iconUrl, fallbackIconUrl)
               return (
-                <button
+                <SettingsResourceRow
                   key={cb.id}
-                  type='button'
-                  onClick={() => canAdmin && void setSelectedBlockId(cb.id)}
-                  className='w-full rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-                  disabled={!canAdmin}
-                >
-                  <SettingsResourceRow
-                    icon={<Icon />}
-                    iconFill
-                    title={cb.name}
-                    description={cb.description || undefined}
-                    trailing={
-                      <div className='flex items-center gap-2'>
-                        {!cb.enabled && <ChipTag variant='gray'>Disabled</ChipTag>}
-                        {canAdmin && <ArrowRight className='size-4 text-[var(--text-icon)]' />}
-                      </div>
-                    }
-                  />
-                </button>
+                  icon={<Icon />}
+                  iconFill
+                  title={cb.name}
+                  description={cb.description || undefined}
+                  onClick={canAdmin ? () => void setSelectedBlockId(cb.id) : undefined}
+                  clickLabel={`Open ${cb.name}`}
+                  navigable={canAdmin}
+                  badge={!cb.enabled ? <ChipTag variant='gray'>Disabled</ChipTag> : undefined}
+                />
               )
             })}
           </div>
diff --git a/apps/sim/ee/data-drains/components/data-drains-settings.tsx b/apps/sim/ee/data-drains/components/data-drains-settings.tsx
index 659c758ffb3..9a0235acdf3 100644
--- a/apps/sim/ee/data-drains/components/data-drains-settings.tsx
+++ b/apps/sim/ee/data-drains/components/data-drains-settings.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { ChipTag } from '@sim/emcn'
-import { ArrowRight, Database, Plus } from '@sim/emcn/icons'
+import { Database, Plus } from '@sim/emcn/icons'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useQueryState } from 'nuqs'
 import {
@@ -12,7 +12,10 @@ import {
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
-import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import { DataDrainCreate } from '@/ee/data-drains/components/data-drain-create'
 import { DataDrainDetail } from '@/ee/data-drains/components/data-drain-detail'
@@ -105,42 +108,32 @@ export function DataDrainsSettings({ organizationId }: DataDrainsSettingsProps)
       }}
     >
       {error ? (
-        <div className='flex h-full flex-col items-center justify-center gap-2'>
-          <p className='text-[var(--text-error)] text-sm leading-tight'>
-            {getErrorMessage(error, "Couldn't load data drains")}
-          </p>
-        </div>
+        <SettingsEmptyState tone='error'>
+          {getErrorMessage(error, "Couldn't load data drains")}
+        </SettingsEmptyState>
       ) : isPending ? null : drains && drains.length > 0 ? (
-        <div className='-mx-2 flex flex-col gap-y-0.5'>
+        <div className={RESOURCE_LIST_STACK}>
           {filteredDrains.map((drain) => (
-            <button
+            <SettingsResourceRow
               key={drain.id}
-              type='button'
+              icon={<Database className='text-[var(--text-icon)]' />}
+              iconFilled
+              title={drain.name}
+              description={
+                <>
+                  {`${SOURCE_LABELS[drain.source]} → ${DESTINATION_LABELS[drain.destinationType]} · ${CADENCE_LABELS[drain.scheduleCadence]} · `}
+                  <span suppressHydrationWarning>
+                    {drain.lastRunAt
+                      ? `Last run ${new Date(drain.lastRunAt).toLocaleDateString()}`
+                      : 'Never run'}
+                  </span>
+                </>
+              }
               onClick={() => void setSelectedDrainId(drain.id)}
-              className='w-full rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-            >
-              <SettingsResourceRow
-                icon={<Database className='text-[var(--text-icon)]' />}
-                iconFilled
-                title={drain.name}
-                description={
-                  <>
-                    {`${SOURCE_LABELS[drain.source]} → ${DESTINATION_LABELS[drain.destinationType]} · ${CADENCE_LABELS[drain.scheduleCadence]} · `}
-                    <span suppressHydrationWarning>
-                      {drain.lastRunAt
-                        ? `Last run ${new Date(drain.lastRunAt).toLocaleDateString()}`
-                        : 'Never run'}
-                    </span>
-                  </>
-                }
-                trailing={
-                  <div className='flex flex-shrink-0 items-center gap-2'>
-                    {!drain.enabled && <ChipTag variant='gray'>Disabled</ChipTag>}
-                    <ArrowRight className='size-4 text-[var(--text-icon)]' />
-                  </div>
-                }
-              />
-            </button>
+              clickLabel={`Open ${drain.name}`}
+              navigable
+              badge={!drain.enabled ? <ChipTag variant='gray'>Disabled</ChipTag> : undefined}
+            />
           ))}
           {filteredDrains.length === 0 && (
             <SettingsEmptyState variant='inline'>
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 8359777bd59..8076adbd14b 100644
--- a/apps/sim/ee/data-retention/components/data-retention-settings.tsx
+++ b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
@@ -18,7 +18,7 @@ import { ArrowLeft } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
-import { ArrowRight, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { CustomPatternsEditor } from '@/components/pii/custom-patterns-editor'
 import { saveDiscardActions } from '@/components/settings/save-discard-actions'
 import type { SettingsAction } from '@/components/settings/settings-header'
@@ -45,6 +45,10 @@ import {
 import { UnsavedChangesModal } from '@/app/workspace/[workspaceId]/components/credential-detail'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useSettingsUnsavedGuard } from '@/app/workspace/[workspaceId]/settings/hooks/use-settings-unsaved-guard'
 import {
@@ -994,42 +998,24 @@ export function DataRetentionSettings({ organizationId: orgId }: DataRetentionSe
           ]}
         >
           <SettingsSection label='Retention policies'>
-            <div className='-mx-2 flex flex-col gap-y-0.5'>
-              <button
-                type='button'
+            <div className={RESOURCE_LIST_STACK}>
+              <SettingsResourceRow
+                title='Organization'
+                description={orgRowSummary()}
+                badge={<ChipTag variant='gray'>Default</ChipTag>}
                 onClick={openEditOrg}
-                className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-              >
-                <div className='flex min-w-0 flex-1 flex-col'>
-                  <div className='flex items-center gap-2'>
-                    <span className='truncate text-[var(--text-body)] text-sm'>Organization</span>
-                    <ChipTag variant='gray' className='flex-shrink-0'>
-                      Default
-                    </ChipTag>
-                  </div>
-                  <span className='truncate text-[var(--text-muted)] text-caption'>
-                    {orgRowSummary()}
-                  </span>
-                </div>
-                <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
-              </button>
+                clickLabel='Open organization retention policy'
+                navigable
+              />
               {overrideWorkspaceIds.map((workspaceId) => (
-                <button
+                <SettingsResourceRow
                   key={workspaceId}
-                  type='button'
+                  title={workspaceName(workspaceId)}
+                  description={overrideRowSummary(workspaceId)}
                   onClick={() => openEditOverride(workspaceId)}
-                  className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-                >
-                  <div className='flex min-w-0 flex-1 flex-col'>
-                    <span className='truncate text-[var(--text-body)] text-sm'>
-                      {workspaceName(workspaceId)}
-                    </span>
-                    <span className='truncate text-[var(--text-muted)] text-caption'>
-                      {overrideRowSummary(workspaceId)}
-                    </span>
-                  </div>
-                  <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
-                </button>
+                  clickLabel={`Open ${workspaceName(workspaceId)} retention override`}
+                  navigable
+                />
               ))}
             </div>
           </SettingsSection>
diff --git a/apps/sim/ee/sso/components/sso-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx
index c4e8ac53fe1..0af36c8de01 100644
--- a/apps/sim/ee/sso/components/sso-auth.tsx
+++ b/apps/sim/ee/sso/components/sso-auth.tsx
@@ -137,7 +137,7 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
                 )}
               />
               {showEmailValidationError && emailErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
+                <div className='mt-1 space-y-1 text-[var(--text-error)] text-caption'>
                   {emailErrors.map((error) => (
                     <p key={error}>{error}</p>
                   ))}
diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx
index 638a004e216..1c41e429e3e 100644
--- a/apps/sim/ee/sso/components/sso-form.tsx
+++ b/apps/sim/ee/sso/components/sso-form.tsx
@@ -170,7 +170,7 @@ export default function SSOForm() {
               )}
             />
             {showEmailValidationError && emailErrors.length > 0 && (
-              <div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
+              <div className='mt-1 space-y-1 text-[var(--text-error)] text-caption'>
                 {emailErrors.map((error) => (
                   <p key={error}>{error}</p>
                 ))}
diff --git a/apps/sim/ee/sso/components/verified-domains-section.tsx b/apps/sim/ee/sso/components/verified-domains-section.tsx
index e069fd16d53..bf914a9e005 100644
--- a/apps/sim/ee/sso/components/verified-domains-section.tsx
+++ b/apps/sim/ee/sso/components/verified-domains-section.tsx
@@ -46,16 +46,16 @@ function DomainRow({ organizationId, domain, onRemove }: DomainRowProps) {
         icon={<Link />}
         title={domain.domain}
         description={isVerified ? 'Ownership verified' : 'Awaiting DNS verification'}
+        badge={
+          <ChipTag variant={isVerified ? 'mono' : 'gray'}>
+            {isVerified ? 'Verified' : 'Pending'}
+          </ChipTag>
+        }
         trailing={
-          <div className='flex items-center gap-2'>
-            <ChipTag variant={isVerified ? 'mono' : 'gray'}>
-              {isVerified ? 'Verified' : 'Pending'}
-            </ChipTag>
-            <RowActionsMenu
-              label={`${domain.domain} actions`}
-              actions={[{ label: 'Remove', onSelect: () => onRemove(domain), destructive: true }]}
-            />
-          </div>
+          <RowActionsMenu
+            label={`${domain.domain} actions`}
+            actions={[{ label: 'Remove', onSelect: () => onRemove(domain), destructive: true }]}
+          />
         }
       />
 
diff --git a/apps/sim/ee/workspace-forking/components/fork-sync/fork-sync-view.tsx b/apps/sim/ee/workspace-forking/components/fork-sync/fork-sync-view.tsx
index e7d7a7d6131..02e22593e73 100644
--- a/apps/sim/ee/workspace-forking/components/fork-sync/fork-sync-view.tsx
+++ b/apps/sim/ee/workspace-forking/components/fork-sync/fork-sync-view.tsx
@@ -12,7 +12,7 @@ import {
   Label,
   Tooltip,
 } from '@sim/emcn'
-import { ArrowRight } from 'lucide-react'
+import { ArrowRight } from '@sim/emcn/icons'
 import type {
   ForkCopyableUnmapped,
   ForkDependentReconfig,