From 80a01f027bcaf87e0c8e470c9b257e1e3dde844d Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sun, 2 Aug 2026 20:50:39 -0700
Subject: [PATCH 1/4] improvement(settings): consolidate resource UI onto
 shared primitives
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sandboxes, MCP tools, and MCP servers each modeled their list rows and
detail headers differently. Collapse them — and the surfaces they drifted
from — onto one set of primitives.

SettingsResourceRow now owns the row entirely: tile, title/subtitle tokens,
padding and bleed, hover band, hit area, focus ring, and the one navigation
chevron. Adds onClick/href (a stretched overlay, so interactive trailing
controls keep their clicks), navigable, iconVariant='custom', and a badge
slot for decoration that must not swallow row clicks.

Rows that open a detail page get a chevron and a whole-row click; flat
records keep the "..." menu. Delete moves to the detail header as a
destructive chip behind a confirm modal — sandboxes previously deleted with
no confirmation at all.

Also folds in SettingsField (new), SettingsEmptyState tone='error',
RESOURCE_LIST_STACK/GRID, RESOURCE_TILE_PLAIN, and a shared MemberAvatar;
deletes DetailIconTile (byte-identical to ResourceTile); and standardizes
on the emcn ArrowRight, which is a visibly different glyph from lucide's.
---
 .claude/rules/sim-settings-pages.md           | 113 +++++++--
 .../components/credential-detail-heading.tsx  |  16 +-
 .../components/credential-detail-layout.tsx   |   4 +-
 .../components/detail-icon-tile.tsx           |  14 --
 .../components/detail-section.tsx             |  15 +-
 .../components/credential-detail/index.ts     |   1 -
 .../components/resource-tile/index.ts         |   1 +
 .../resource-tile/resource-tile.tsx           |   3 +
 .../[block]/integration-block-detail.tsx      |  72 +++---
 .../[block]/integration-skills-section.tsx    |  46 ++--
 .../integration-section.tsx                   |  20 +-
 .../integrations-showcase.tsx                 |  16 +-
 .../showcase-with-explore.tsx                 |   2 +-
 .../connected-credential-detail.tsx           |  12 +-
 .../integrations/integrations.tsx             |  48 ++--
 .../settings/components/admin/admin.tsx       |   4 +-
 .../settings/components/api-keys/api-keys.tsx | 125 ++++------
 .../settings/components/billing/billing.tsx   |   3 +-
 .../password-detail/password-detail.test.tsx  |   2 +
 .../password-detail/password-detail.tsx       |  25 +-
 .../passwords-view/passwords-view.test.tsx    |  13 +-
 .../passwords-view/passwords-view.tsx         |  55 ++---
 .../components/byok/byok-key-manager.tsx      |  36 ++-
 .../components/byok/byok-skeleton.tsx         |   6 +-
 .../settings/components/copilot/copilot.tsx   |  43 ++--
 .../custom-tool-detail/custom-tool-detail.tsx |  23 +-
 .../components/custom-tools/custom-tools.tsx  |  37 ++-
 .../settings/components/desktop/desktop.tsx   |  41 ++--
 .../inbox-task-list/inbox-task-list.tsx       |  10 +-
 .../settings/components/mcp/mcp.tsx           | 188 +++++++--------
 .../settings/components/member-list/index.ts  |   3 +-
 .../components/member-list/member-list.tsx    |  34 +--
 .../recently-deleted/recently-deleted.tsx     |  15 +-
 .../sandboxes/components/sandbox-editor.tsx   |  11 +-
 .../components/sandboxes/sandboxes.tsx        |  98 ++++----
 .../settings/components/sandboxes/utils.ts    |   9 +
 .../secrets-manager/secrets-manager.tsx       |  13 +-
 .../settings-empty-state.tsx                  |  11 +-
 .../components/settings-field/index.ts        |   1 +
 .../settings-field/settings-field.tsx         |  23 ++
 .../components/settings-resource-row/index.ts |   7 +-
 .../settings-resource-row.tsx                 | 156 +++++++++---
 .../settings-section/settings-section.tsx     |   2 +-
 .../create-workflow-mcp-server-modal.tsx      |   4 +-
 .../workflow-mcp-servers.tsx                  | 224 ++++++++++--------
 .../secrets/[credentialId]/secret-detail.tsx  |   9 +-
 .../skills/[skillId]/skill-detail.tsx         |   5 +-
 .../workspace/[workspaceId]/skills/skills.tsx |  88 +++----
 .../components/plan-card/plan-card.tsx        |   8 +-
 .../components/permissions/member-avatar.tsx  |  29 +++
 .../sim/components/permissions/member-row.tsx |  20 +-
 .../components/access-control.tsx             |  52 ++--
 .../components/group-detail.tsx               |  13 +-
 .../components/custom-blocks.tsx              |  38 ++-
 .../components/data-drains-settings.tsx       |  61 +++--
 .../components/data-retention-settings.tsx    |  52 ++--
 apps/sim/ee/sso/components/sso-auth.tsx       |   2 +-
 apps/sim/ee/sso/components/sso-form.tsx       |   2 +-
 .../components/fork-sync/fork-sync-view.tsx   |   2 +-
 59 files changed, 1036 insertions(+), 950 deletions(-)
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/detail-icon-tile.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/settings-field.tsx
 create mode 100644 apps/sim/components/permissions/member-avatar.tsx

diff --git a/.claude/rules/sim-settings-pages.md b/.claude/rules/sim-settings-pages.md
index 8710553e800..734770a17c5 100644
--- a/.claude/rules/sim-settings-pages.md
+++ b/.claude/rules/sim-settings-pages.md
@@ -107,19 +107,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 +140,98 @@ 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 hover band, the hit area, the focus ring, and the
+navigation chevron. 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. `clickLabel` is the accessible
+  name and is **required** alongside either: the overlay has no text of its own.
+- `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.
+- `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. Note `-mx-2` inside a
+  fixed-height `overflow-y-auto` box forces a horizontal scrollbar; drop the
+  bleed there.
+
+**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`) — 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`
+  (`…/components/resource-tile`) — the 36px tile chrome, for the rare tile
+  outside a row (a detail heading). `ResourceTile` wraps the filled pairing.
+- **`MemberAvatar`** (`@/components/permissions/member-avatar`) — the one avatar
+  for any member row.
+
+## 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
 
@@ -246,4 +318,9 @@ A settings page is design-system-clean when:
 - [ ] 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 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: multi-line bodies (inbox tasks), tabular columns (billing invoices, credit usage), and grids (secrets).
+- [ ] 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/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..ef0c775cbf4 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,6 @@ 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 iconVariant='custom' icon={leading} title={title} description={subtitle} />
   )
 }
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..66b256b567a 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 {
@@ -200,22 +204,36 @@ export function ApiKeys({ scope = 'workspace' }: ApiKeysProps) {
                 {workspaceKeys.length === 0 ? (
                   <div className='text-[var(--text-muted)] text-sm'>No workspace API keys yet</div>
                 ) : (
-                  <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} · last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                        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} · last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                      trailing={
                         <ApiKeyRowMenu
                           keyName={key.name}
                           onDelete={() => {
@@ -224,38 +242,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 +251,29 @@ 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} · last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                          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..b16bf4ac2df 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,11 +142,10 @@ 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)]'>
+                <div className={cn(RESOURCE_TILE_BASE, RESOURCE_TILE_PLAIN)}>
+                  <div className='flex size-full items-center justify-center'>
                     {credential.icon ? (
                       // A `data:` URL copied from the source browser at import
                       // time — never a network request, which would disclose
@@ -153,15 +158,13 @@ export function PasswordDetail({ credential, onBack, onForgotten }: PasswordDeta
                 </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 +213,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..3020f7d239c 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'
@@ -23,7 +23,10 @@ import {
 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,26 +311,21 @@ 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'>
+          <div className={RESOURCE_LIST_STACK}>
             {providers.map((p) => (
               <BYOKKeySkeleton key={p.id} />
             ))}
@@ -346,13 +344,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
index 71d220b9c37..edd8c1e6f01 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
@@ -5,9 +5,9 @@ import { Skeleton } from '@sim/emcn'
  */
 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='-mx-2 flex items-center justify-between gap-2.5 rounded-lg p-2'>
+      <div className='flex items-center gap-2.5'>
+        <Skeleton className='size-9 flex-shrink-0 rounded-xl' />
         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
           <Skeleton className='h-[16px] w-[100px]' />
           <Skeleton className='h-[14px] w-[200px]' />
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..93ac321922d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
@@ -18,6 +18,10 @@ import { Plus } from 'lucide-react'
 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,23 @@ 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} · last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                trailing={
+                  <Chip
+                    onClick={() => {
+                      setDeleteKey(key)
+                      setShowDeleteDialog(true)
+                    }}
+                  >
+                    Delete
+                  </Chip>
+                }
+              />
             ))}
             {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..e1119124114 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
             ? []
@@ -228,16 +229,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..681e353b6c9 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,16 @@ 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 {
+  SETTINGS_FIELD_VALUE_CLASSES,
+  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 +75,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 +87,10 @@ function ServerListItem({
   canManage,
   server,
   tools,
-  isDeleting,
   isConnecting,
   isLoadingTools = false,
   isRefreshing = false,
   discoveryError = null,
-  onRemove,
   onViewDetails,
   onAuthorize,
 }: ServerListItemProps) {
@@ -110,56 +114,41 @@ 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 statusLabel = isConnecting
+    ? 'Waiting for authorization...'
+    : isRefreshing
+      ? 'Refreshing...'
+      : isLoadingTools && tools.length === 0
+        ? 'Loading...'
+        : showDiscoveryError
+          ? discoveryError
+          : `${transportLabel} · ${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'}
-          </span>
-          <span className='text-[var(--text-muted)] text-caption'>({transportLabel})</span>
-        </div>
-        <p
+    <SettingsResourceRow
+      icon={<McpIcon />}
+      title={serverName}
+      description={
+        <span
           className={cn(
-            'truncate text-caption',
-            hasConnectionIssue && !isConnecting
-              ? 'text-[var(--text-error)]'
-              : 'text-[var(--text-muted)]'
+            hasConnectionIssue && !isConnecting ? 'text-[var(--text-error)]' : undefined
           )}
         >
-          {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' && (
+          {statusLabel}
+        </span>
+      }
+      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 +236,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 +394,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 +443,34 @@ export function MCP() {
                   text: 'Edit',
                   onSelect: () => setEditingServerId(server.id),
                 },
+                {
+                  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'>
+              <p className={SETTINGS_FIELD_VALUE_CLASSES}>{server.name || 'Unnamed server'}</p>
+            </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'>
+              <p className={SETTINGS_FIELD_VALUE_CLASSES}>{transportLabel}</p>
+            </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'>
+                <p className={`break-all ${SETTINGS_FIELD_VALUE_CLASSES}`}>{server.url}</p>
+              </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 +479,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 +494,7 @@ export function MCP() {
                     {connectingOauthServers.has(server.id) ? 'Reopen authorization' : 'Authorize'}
                   </Chip>
                 </div>
-              </div>
+              </SettingsField>
             )}
           </div>
         </SettingsSection>
@@ -551,7 +566,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 +601,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 +643,7 @@ export function MCP() {
             allowedMcpDomains={allowedMcpDomains}
           />
         )}
+        {deleteConfirmModal}
       </SettingsPanel>
     )
   }
@@ -655,11 +671,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 +681,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 +696,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 +705,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 +739,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/member-list/index.ts b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/index.ts
index 21f94ee9db7..6d5f1e56c8f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/index.ts
@@ -1 +1,2 @@
-export { MemberAvatar, MemberRow, MemberSection } from './member-list'
+export { MemberAvatar } from '@/components/permissions/member-avatar'
+export { MemberRow, MemberSection } from './member-list'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
index 8966401f6b5..cdb12acbe5c 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
@@ -1,41 +1,15 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { MemberAvatar } from '@/components/permissions/member-avatar'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
+import { RESOURCE_LIST_STACK } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
-const ROW_CLASSES = 'flex items-center gap-2.5 p-2'
+const ROW_CLASSES = '-mx-2 flex items-center gap-2.5 rounded-lg p-2'
 const ROW_EMAIL_CLASSES = 'min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'
 const ROW_STATUS_CLASSES = 'flex-shrink-0 text-[var(--text-muted)] text-caption'
 
-interface MemberAvatarProps {
-  name: string
-  image: string | null
-}
-
-/**
- * 14px circular avatar used in member rows. Falls back to the first letter of
- * the member's name when no image is available.
- */
-export function MemberAvatar({ name, image }: MemberAvatarProps) {
-  if (image) {
-    return (
-      <img
-        src={image}
-        alt={name}
-        referrerPolicy='no-referrer'
-        className='size-[14px] flex-shrink-0 rounded-full border border-[var(--border)] object-cover'
-      />
-    )
-  }
-
-  return (
-    <span className='flex size-[14px] flex-shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] font-medium text-[8px] text-[var(--text-secondary)]'>
-      {name.charAt(0).toUpperCase()}
-    </span>
-  )
-}
-
 interface MemberRowProps {
   name: string
   email: string
@@ -91,7 +65,7 @@ export function MemberSection({
       {isEmpty ? (
         <SettingsEmptyState variant='inline'>{emptyText}</SettingsEmptyState>
       ) : (
-        <div className='-mx-2 flex flex-col gap-y-0.5'>{children}</div>
+        <div className={RESOURCE_LIST_STACK}>{children}</div>
       )}
     </SettingsSection>
   )
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..c2af440ea95 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)
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..313a5474b12 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,
@@ -25,6 +24,7 @@ import {
   draftFromSandbox,
   emptyDraft,
   extractIssues,
+  SANDBOX_DELETE_CONFIRM_TEXT,
   SANDBOX_UPGRADE_DESCRIPTION,
   SANDBOX_UPGRADE_TITLE,
   type SandboxDraft,
@@ -32,8 +32,10 @@ import {
 } 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
@@ -140,6 +143,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 +211,9 @@ export function Sandboxes() {
             ...(selected && canAdmin
               ? [
                   {
-                    text: 'Delete',
-                    textTone: 'error' as const,
-                    onSelect: () => void handleDelete(selected),
+                    text: deleteSandbox.isPending ? 'Deleting...' : 'Delete',
+                    variant: 'destructive' as const,
+                    onSelect: () => setShowDeleteConfirm(true),
                     disabled: deleteSandbox.isPending,
                   },
                 ]
@@ -225,6 +229,22 @@ export function Sandboxes() {
           />
         </SettingsPanel>
 
+        {selected && (
+          <ChipConfirmModal
+            open={showDeleteConfirm}
+            onOpenChange={setShowDeleteConfirm}
+            srTitle='Delete Sandbox'
+            title='Delete Sandbox'
+            text={SANDBOX_DELETE_CONFIRM_TEXT}
+            confirm={{
+              label: 'Delete',
+              onClick: () => void handleDelete(selected),
+              pending: deleteSandbox.isPending,
+              pendingLabel: 'Deleting...',
+            }}
+          />
+        )}
+
         <UnsavedChangesModal
           open={guard.showUnsavedModal}
           onOpenChange={guard.setShowUnsavedModal}
@@ -256,49 +276,27 @@ 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 />}
+              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..ab39d7f284f 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,15 @@ 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. */
+export const SANDBOX_DELETE_CONFIRM_TEXT = [
+  {
+    text: 'This will permanently delete the sandbox and remove it from any Function blocks that are using it.',
+    error: true,
+  },
+  ' This action cannot be undone.',
+] as const
+
 /** 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..e2207ab7625
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/index.ts
@@ -0,0 +1 @@
+export { SETTINGS_FIELD_VALUE_CLASSES, 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..a6eaa5ec8f8
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/settings-field.tsx
@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react'
+
+interface SettingsFieldProps {
+  label: ReactNode
+  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.
+ */
+export function SettingsField({ label, children }: SettingsFieldProps) {
+  return (
+    <div className='flex flex-col gap-2'>
+      <span className='text-[var(--text-muted)] text-caption'>{label}</span>
+      {children}
+    </div>
+  )
+}
+
+/** Value text inside a {@link SettingsField}. */
+export const SETTINGS_FIELD_VALUE_CLASSES = 'text-[var(--text-body)] text-sm'
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..f494e552307 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,5 +1,7 @@
 import type { ReactNode } 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,
@@ -16,15 +18,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 +48,57 @@ 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
 }
 
+/** 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. */
+export const RESOURCE_LIST_GRID =
+  'grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-x-2 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,25 +110,32 @@ export function SettingsResourceRow({
   title,
   description,
   trailing,
+  badge,
   onClick,
+  href,
   clickLabel,
+  navigable = false,
 }: SettingsResourceRowProps) {
   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 : 'bg-[var(--bg)]',
+                  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 && (
@@ -93,26 +144,53 @@ export function SettingsResourceRow({
       </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 = '-mx-2 flex items-center justify-between gap-2.5 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 ? (
-        <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={cn(rowClass, 'relative transition-colors hover-hover:bg-[var(--surface-active)]')}
+    >
+      {href ? (
+        <Link href={href} aria-label={clickLabel} className={overlayClass} />
       ) : (
-        <div className={clusterClass}>{cluster}</div>
+        <button type='button' onClick={onClick} aria-label={clickLabel} 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..801b243e3e8 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,16 @@ 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 {
+  SETTINGS_FIELD_VALUE_CLASSES,
+  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 +74,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)
@@ -364,7 +384,7 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
     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'>
+          <p className='text-[var(--text-error)] text-caption leading-tight'>
             Failed to load server details
           </p>
         </div>
@@ -393,6 +413,16 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
                     ? 'All deployed workflows have been added to this server.'
                     : undefined,
                 },
+                ...(onDelete
+                  ? [
+                      {
+                        text: isDeleting ? 'Deleting...' : 'Delete',
+                        variant: 'destructive' as const,
+                        onSelect: onDelete,
+                        disabled: isDeleting,
+                      },
+                    ]
+                  : []),
               ]
             : []
         }
@@ -410,7 +440,7 @@ 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>
+                <span className='text-[var(--text-muted)] text-small'>Workflows</span>
 
                 {tools.length === 0 ? (
                   <p className='text-[var(--text-muted)] text-sm'>
@@ -449,7 +479,7 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
                 )}
 
                 {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 +489,32 @@ 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'>
+                  <SettingsField label='Server Name'>
+                    <p className={SETTINGS_FIELD_VALUE_CLASSES}>{server.name}</p>
+                  </SettingsField>
+                  <SettingsField label='Transport'>
+                    <p className={SETTINGS_FIELD_VALUE_CLASSES}>Streamable-HTTP</p>
+                  </SettingsField>
+                  <SettingsField label='Access'>
+                    <p className={SETTINGS_FIELD_VALUE_CLASSES}>
                       {server.isPublic ? 'Public' : 'API Key'}
                     </p>
-                  </div>
+                  </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'>
+                    <p className={SETTINGS_FIELD_VALUE_CLASSES}>{server.description}</p>
+                  </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'>
+                  <p className={`break-all ${SETTINGS_FIELD_VALUE_CLASSES}`}>{mcpServerUrl}</p>
+                </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 +582,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 +628,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 && (
                           <>
@@ -704,7 +723,7 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
                         </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>
+                            <Label>Description</Label>
                             <ChipInput
                               value={editingParameterDescriptions[name] || ''}
                               onChange={(e) =>
@@ -835,7 +854,7 @@ function ServerDetailView({ canManage, workspaceId, serverId, onBack }: ServerDe
                   <ButtonGroupItem value='private'>API Key</ButtonGroupItem>
                   <ButtonGroupItem value='public'>Public</ButtonGroupItem>
                 </ButtonGroup>
-                <p className='text-[var(--text-muted)] text-xs'>
+                <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'}
@@ -926,6 +945,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 +976,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 +1037,41 @@ 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 />}
+                    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 +1093,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..9c8268c2e3e 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 { AgentSkillsIcon } from '@/components/icons'
 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}
+                      icon={<AgentSkillsIcon className='text-[var(--text-icon)]' />}
+                      iconFilled
+                      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/components/permissions/member-avatar.tsx b/apps/sim/components/permissions/member-avatar.tsx
new file mode 100644
index 00000000000..f13e86f6c21
--- /dev/null
+++ b/apps/sim/components/permissions/member-avatar.tsx
@@ -0,0 +1,29 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@sim/emcn'
+import { getUserColor } from '@/lib/workspaces/colors'
+
+interface MemberAvatarProps {
+  name: string
+  image?: string | null
+  /** Seed for the generated fallback background; defaults to the name. */
+  colorSeed?: string
+}
+
+/**
+ * The one avatar worn by every member row — Teammates, Organization, and the
+ * credential Members sections. Matches `RESOURCE_TILE_BASE`'s 36px footprint so
+ * a member row keeps the same rhythm as a resource row.
+ */
+export function MemberAvatar({ name, image, colorSeed }: MemberAvatarProps) {
+  const initial = (name || '?').charAt(0).toUpperCase()
+  return (
+    <Avatar className='size-9 flex-shrink-0'>
+      {image ? <AvatarImage src={image} alt={name} referrerPolicy='no-referrer' /> : null}
+      <AvatarFallback
+        style={{ background: getUserColor(colorSeed || name || '') }}
+        className='border border-[var(--border-1)] text-small text-white'
+      >
+        {initial}
+      </AvatarFallback>
+    </Avatar>
+  )
+}
diff --git a/apps/sim/components/permissions/member-row.tsx b/apps/sim/components/permissions/member-row.tsx
index 8a235584204..db9b237453a 100644
--- a/apps/sim/components/permissions/member-row.tsx
+++ b/apps/sim/components/permissions/member-row.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { Avatar, AvatarFallback, Chip, ChipDropdown, cn } from '@sim/emcn'
-import { getUserColor } from '@/lib/workspaces/colors'
+import { Chip, ChipDropdown, cn } from '@sim/emcn'
+import { MemberAvatar } from '@/components/permissions/member-avatar'
 import type { MemberRole } from './member-role-options'
 import { RoleLockTooltip } from './role-lock'
 
@@ -49,20 +49,16 @@ export function MemberRow<TRole extends string = MemberRole>({
   return (
     <div
       className={cn(
-        'grid items-center gap-2',
+        '-mx-2 grid items-center gap-2 rounded-lg p-2',
         canManage ? 'grid-cols-[1fr_120px_72px]' : 'grid-cols-[1fr_200px]'
       )}
     >
       <div className='flex min-w-0 items-center gap-2.5'>
-        <Avatar className='size-9 flex-shrink-0'>
-          <AvatarFallback
-            style={{ background: getUserColor(member.userId || member.userEmail || '') }}
-            className='border border-[var(--border-1)] text-small text-white'
-          >
-            {(member.userName || member.userEmail || '?').charAt(0).toUpperCase()}
-          </AvatarFallback>
-        </Avatar>
-        <div className='flex min-w-0 flex-col'>
+        <MemberAvatar
+          name={member.userName || member.userEmail || '?'}
+          colorSeed={member.userId || member.userEmail || ''}
+        />
+        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
           <span className='truncate text-[var(--text-body)] text-sm'>
             {member.userName || member.userEmail || member.userId}
           </span>
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..14696a7cf23 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -48,6 +48,7 @@ import {
 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 { RESOURCE_LIST_STACK } 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 { getAllBlocks } from '@/blocks'
@@ -451,7 +452,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} />
@@ -1619,7 +1620,7 @@ export function GroupDetail({
                     />
                   </div>
                   {viewingGroup.workspaces.length > 0 && (
-                    <div className='-mx-2 flex flex-col gap-y-0.5'>
+                    <div className={RESOURCE_LIST_STACK}>
                       {viewingGroup.workspaces.map((ws) => (
                         <MemberRow
                           key={ws.id}
@@ -1654,17 +1655,17 @@ export function GroupDetail({
                     </Chip>
                   </div>
                   {membersLoading ? (
-                    <div className='-mx-2 flex flex-col gap-y-0.5'>
+                    <div className={RESOURCE_LIST_STACK}>
                       {[1, 2].map((i) => (
-                        <div key={i} className='flex items-center gap-2.5 p-2'>
-                          <Skeleton className='size-[14px] flex-shrink-0 rounded-full' />
+                        <div key={i} className='-mx-2 flex items-center gap-2.5 rounded-lg p-2'>
+                          <Skeleton className='size-9 flex-shrink-0 rounded-full' />
                           <Skeleton className='h-[14px] w-[180px]' />
                         </div>
                       ))}
                     </div>
                   ) : (
                     members.length > 0 && (
-                      <div className='-mx-2 flex flex-col gap-y-0.5'>
+                      <div className={RESOURCE_LIST_STACK}>
                         {members.map((member) => (
                           <MemberRow
                             key={member.id}
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/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,

From f381712ea22b09119a3644c4c65c98f77683820b Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sun, 2 Aug 2026 21:14:07 -0700
Subject: [PATCH 2/4] fix(settings): correct row bleed, delete-confirm binding,
 and avatar seeding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up from review of the consolidation.

The sandbox delete confirmation was boolean-only state. Browser Back unmounts
the modal without closing it, so opening another sandbox re-opened it already
confirmed — against the wrong sandbox. Reset it where the draft guard already
handles the same history hazard.

RESOURCE_LIST_GRID kept an 8px column gap after the bleed moved onto the row,
so neighbouring cards overlapped by exactly the gutter and the right-hand card's
stretched hit area won it: clicking between two cards opened the wrong one.
Budget the gap for the bleed instead.

Also: restore the `group` the template-icon hover outlines depend on; add a
`flush` row for headings and overflow boxes; seed MemberAvatar identically on
every surface; keep the MCP transport label visible in all row states; give the
Delete chip a stable id so it doesn't remount mid-delete; and stop an empty
subtitle rendering a phantom line.

Docs: widen the rule's path globs to the surfaces it now governs, drop the
`text-[14px]` example that contradicted the token rule, and add a Mode C for
migrating rows onto the primitive.
---
 .claude/rules/sim-settings-pages.md           | 24 ++++++++++-----
 .claude/rules/sim-styling.md                  |  8 +++--
 .claude/skills/add-settings-page/SKILL.md     | 30 ++++++++++++++++++-
 .../custom-tool-detail/custom-tool-detail.tsx |  1 +
 .../settings/components/mcp/mcp.tsx           |  6 ++--
 .../components/member-list/member-list.tsx    |  2 +-
 .../components/sandboxes/sandboxes.tsx        |  5 ++++
 .../settings-resource-row.tsx                 | 26 ++++++++++++----
 .../workflow-mcp-servers.tsx                  |  1 +
 .../workspace/[workspaceId]/skills/skills.tsx |  6 ++--
 .../components/group-detail.tsx               | 12 ++++----
 11 files changed, 95 insertions(+), 26 deletions(-)

diff --git a/.claude/rules/sim-settings-pages.md b/.claude/rules/sim-settings-pages.md
index 734770a17c5..12c6159d2cb 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/**"
 ---
 
@@ -173,8 +176,10 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
   `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. `clickLabel` is the accessible
-  name and is **required** alongside either: the overlay has no text of its own.
+  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
@@ -187,9 +192,13 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
   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. Note `-mx-2` inside a
-  fixed-height `overflow-y-auto` box forces a horizontal scrollbar; drop the
-  bleed there.
+  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:
 
@@ -221,7 +230,8 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
   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`
-  (`…/components/resource-tile`) — the 36px tile chrome, for the rare tile
+  (`app/workspace/[workspaceId]/components/resource-tile` — note: *not* under
+  `settings/`, unlike the other `…/` paths on this page) — the 36px tile chrome, for the rare tile
   outside a row (a detail heading). `ResourceTile` wraps the filled pairing.
 - **`MemberAvatar`** (`@/components/permissions/member-avatar`) — the one avatar
   for any member row.
@@ -316,7 +326,7 @@ 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: multi-line bodies (inbox tasks), tabular columns (billing invoices, credit usage), and grids (secrets).
 - [ ] Rows that open a detail page use `navigable` + `clickLabel`; flat records use `RowActionsMenu`. Not both.
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..26eb40b4fec 100644
--- a/.claude/skills/add-settings-page/SKILL.md
+++ b/.claude/skills/add-settings-page/SKILL.md
@@ -53,7 +53,7 @@ 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-\[[0-9]+px\]" -- 'apps/sim/**/settings/' 'apps/sim/ee/'`
 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 +77,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]/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 e1119124114..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
@@ -219,6 +219,7 @@ export function CustomToolDetail({
           ...(tool && !readOnly
             ? [
                 {
+                  id: 'delete',
                   text: deleteTool.isPending ? 'Deleting...' : 'Delete',
                   variant: 'destructive' as const,
                   onSelect: () => setShowDeleteConfirm(true),
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 681e353b6c9..ee2eda8546c 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -117,7 +117,7 @@ function ServerListItem({
   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 statusLabel = isConnecting
+  const statusText = isConnecting
     ? 'Waiting for authorization...'
     : isRefreshing
       ? 'Refreshing...'
@@ -125,7 +125,8 @@ function ServerListItem({
         ? 'Loading...'
         : showDiscoveryError
           ? discoveryError
-          : `${transportLabel} · ${toolsLabel}`
+          : toolsLabel
+  const statusLabel = `${transportLabel} · ${statusText}`
 
   return (
     <SettingsResourceRow
@@ -444,6 +445,7 @@ export function MCP() {
                   onSelect: () => setEditingServerId(server.id),
                 },
                 {
+                  id: 'delete',
                   text: deletingServers.has(server.id) ? 'Deleting...' : 'Delete',
                   variant: 'destructive' as const,
                   onSelect: () => handleRemoveServer(server.id),
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
index cdb12acbe5c..8aac228597e 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
@@ -30,7 +30,7 @@ interface MemberRowProps {
 export function MemberRow({ name, email, image, status, roleControl, menu }: MemberRowProps) {
   return (
     <div className={ROW_CLASSES}>
-      <MemberAvatar name={name} image={image} />
+      <MemberAvatar name={name} image={image} colorSeed={email || name} />
       <span className={ROW_EMAIL_CLASSES}>{email}</span>
       <span className={ROW_STATUS_CLASSES}>{status}</span>
       {roleControl}
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 313a5474b12..30c599e8fe2 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/sandboxes.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/sandboxes.tsx
@@ -80,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
@@ -211,6 +215,7 @@ export function Sandboxes() {
             ...(selected && canAdmin
               ? [
                   {
+                    id: 'delete',
                     text: deleteSandbox.isPending ? 'Deleting...' : 'Delete',
                     variant: 'destructive' as const,
                     onSelect: () => setShowDeleteConfirm(true),
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 f494e552307..b2eaebc1e51 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
@@ -5,6 +5,7 @@ import Link from 'next/link'
 import {
   RESOURCE_TILE_BASE,
   RESOURCE_TILE_FILL,
+  RESOURCE_TILE_PLAIN,
 } from '@/app/workspace/[workspaceId]/components/resource-tile'
 
 /**
@@ -84,6 +85,12 @@ interface SettingsResourceRowProps {
    * `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. */
@@ -95,9 +102,14 @@ export const RESOURCE_ROW_ARROW_CLASSES = 'size-4 flex-shrink-0 text-[var(--text
  */
 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. */
+/**
+ * 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.
+ */
 export const RESOURCE_LIST_GRID =
-  'grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-x-2 gap-y-0.5'
+  'grid grid-cols-[repeat(auto-fit,minmax(280px,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]'
@@ -115,6 +127,7 @@ export function SettingsResourceRow({
   href,
   clickLabel,
   navigable = false,
+  flush = false,
 }: SettingsResourceRowProps) {
   const isTile = iconVariant === 'tile'
   const cluster = (
@@ -127,7 +140,7 @@ export function SettingsResourceRow({
             isTile
               ? cn(
                   RESOURCE_TILE_BASE,
-                  iconFilled ? RESOURCE_TILE_FILL : 'bg-[var(--bg)]',
+                  iconFilled ? RESOURCE_TILE_FILL : RESOURCE_TILE_PLAIN,
                   iconFill ? '[&_img]:size-full' : '[&_img]:size-5'
                 )
               : PLAIN_BASE
@@ -161,7 +174,7 @@ export function SettingsResourceRow({
 
   // 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 = '-mx-2 flex items-center justify-between gap-2.5 rounded-lg p-2'
+  const rowClass = cn('flex items-center justify-between gap-2.5', !flush && '-mx-2 rounded-lg p-2')
 
   if (!onClick && !href) {
     return (
@@ -182,7 +195,10 @@ export function SettingsResourceRow({
   // list) while `trailing` — which may hold its own buttons — stacks above it.
   return (
     <div
-      className={cn(rowClass, 'relative transition-colors hover-hover:bg-[var(--surface-active)]')}
+      className={cn(
+        rowClass,
+        'group relative transition-colors hover-hover:bg-[var(--surface-active)]'
+      )}
     >
       {href ? (
         <Link href={href} aria-label={clickLabel} className={overlayClass} />
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 801b243e3e8..0deda376b30 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
@@ -416,6 +416,7 @@ function ServerDetailView({
                 ...(onDelete
                   ? [
                       {
+                        id: 'delete',
                         text: isDeleting ? 'Deleting...' : 'Delete',
                         variant: 'destructive' as const,
                         onSelect: onDelete,
diff --git a/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx b/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
index 9c8268c2e3e..b671fb1e84d 100644
--- a/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
@@ -6,7 +6,7 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { Plus } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
-import { AgentSkillsIcon } from '@/components/icons'
+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'
@@ -111,8 +111,8 @@ export function Skills() {
                   {filteredSkills.map((s) => (
                     <SettingsResourceRow
                       key={s.id}
-                      icon={<AgentSkillsIcon className='text-[var(--text-icon)]' />}
-                      iconFilled
+                      iconVariant='custom'
+                      icon={<SkillTile />}
                       title={s.name}
                       description={s.description || undefined}
                       onClick={() => router.push(`${skillsHref}/${s.id}`)}
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index 14696a7cf23..5ba3a4140ef 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -28,6 +28,7 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { formatDate } from '@sim/utils/formatting'
 import { ChevronDown, Plus } from 'lucide-react'
 import { useQueryState } from 'nuqs'
+import { MemberAvatar } from '@/components/permissions/member-avatar'
 import { saveDiscardActions } from '@/components/settings/save-discard-actions'
 import type { ShareAuthType } from '@/lib/api/contracts/public-shares'
 import { isBlockTypeAccessControlExempt } from '@/lib/permission-groups/block-access'
@@ -41,10 +42,7 @@ import {
   groupTabParam,
   groupTabUrlKeys,
 } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
-import {
-  MemberAvatar,
-  MemberRow,
-} from '@/app/workspace/[workspaceId]/settings/components/member-list'
+import { MemberRow } from '@/app/workspace/[workspaceId]/settings/components/member-list'
 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'
@@ -455,7 +453,11 @@ function AddMembersModal({
                           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} />
+                          <MemberAvatar
+                            name={name}
+                            image={member.user?.image ?? null}
+                            colorSeed={member.userId || email}
+                          />
                           <div className='min-w-0 flex-1'>
                             <div className='truncate text-[var(--text-body)] text-sm'>{name}</div>
                             <div className='truncate text-[var(--text-muted)] text-caption'>

From 7fd9eba323544cced585a7e11a7eaf65f49b244c Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sun, 2 Aug 2026 22:56:56 -0700
Subject: [PATCH 3/4] revert(settings): keep the dense member roster avatar

Consolidating the Teammates/Organization avatar onto the credential member
row's was a redesign, not a deduplication. The two encode different things:
the roster is a dense list keyed on email where the avatar is a 14px neutral
marker, while a member management row carries a name, an email, and a role
control and earns a 36px hashed avatar.

Merging them made those rows ~70% taller, gave every workspace in a permission
group a colour-hashed "avatar" seeded on its name, and cut the Add Members
picker from ~7 visible rows to ~5 inside its fixed-height box.

Restores both avatars and the containers that owned their bleed, and records
in the rule why they stay separate. Keeps only the unrelated fix in that area:
the picker row was the one settings row rounded at `sm`.
---
 .claude/rules/sim-settings-pages.md           |  9 +++--
 .../settings/components/member-list/index.ts  |  3 +-
 .../components/member-list/member-list.tsx    | 36 ++++++++++++++++---
 .../components/permissions/member-avatar.tsx  | 29 ---------------
 .../sim/components/permissions/member-row.tsx | 20 ++++++-----
 .../components/group-detail.tsx               | 23 ++++++------
 6 files changed, 61 insertions(+), 59 deletions(-)
 delete mode 100644 apps/sim/components/permissions/member-avatar.tsx

diff --git a/.claude/rules/sim-settings-pages.md b/.claude/rules/sim-settings-pages.md
index 12c6159d2cb..36dd418bf70 100644
--- a/.claude/rules/sim-settings-pages.md
+++ b/.claude/rules/sim-settings-pages.md
@@ -233,8 +233,13 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
   (`app/workspace/[workspaceId]/components/resource-tile` — note: *not* under
   `settings/`, unlike the other `…/` paths on this page) — the 36px tile chrome, for the rare tile
   outside a row (a detail heading). `ResourceTile` wraps the filled pairing.
-- **`MemberAvatar`** (`@/components/permissions/member-avatar`) — the one avatar
-  for any member row.
+
+
+**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
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/index.ts b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/index.ts
index 6d5f1e56c8f..21f94ee9db7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/index.ts
@@ -1,2 +1 @@
-export { MemberAvatar } from '@/components/permissions/member-avatar'
-export { MemberRow, MemberSection } from './member-list'
+export { MemberAvatar, MemberRow, MemberSection } from './member-list'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
index 8aac228597e..8966401f6b5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
@@ -1,15 +1,41 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { MemberAvatar } from '@/components/permissions/member-avatar'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
-import { RESOURCE_LIST_STACK } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
-const ROW_CLASSES = '-mx-2 flex items-center gap-2.5 rounded-lg p-2'
+const ROW_CLASSES = 'flex items-center gap-2.5 p-2'
 const ROW_EMAIL_CLASSES = 'min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'
 const ROW_STATUS_CLASSES = 'flex-shrink-0 text-[var(--text-muted)] text-caption'
 
+interface MemberAvatarProps {
+  name: string
+  image: string | null
+}
+
+/**
+ * 14px circular avatar used in member rows. Falls back to the first letter of
+ * the member's name when no image is available.
+ */
+export function MemberAvatar({ name, image }: MemberAvatarProps) {
+  if (image) {
+    return (
+      <img
+        src={image}
+        alt={name}
+        referrerPolicy='no-referrer'
+        className='size-[14px] flex-shrink-0 rounded-full border border-[var(--border)] object-cover'
+      />
+    )
+  }
+
+  return (
+    <span className='flex size-[14px] flex-shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] font-medium text-[8px] text-[var(--text-secondary)]'>
+      {name.charAt(0).toUpperCase()}
+    </span>
+  )
+}
+
 interface MemberRowProps {
   name: string
   email: string
@@ -30,7 +56,7 @@ interface MemberRowProps {
 export function MemberRow({ name, email, image, status, roleControl, menu }: MemberRowProps) {
   return (
     <div className={ROW_CLASSES}>
-      <MemberAvatar name={name} image={image} colorSeed={email || name} />
+      <MemberAvatar name={name} image={image} />
       <span className={ROW_EMAIL_CLASSES}>{email}</span>
       <span className={ROW_STATUS_CLASSES}>{status}</span>
       {roleControl}
@@ -65,7 +91,7 @@ export function MemberSection({
       {isEmpty ? (
         <SettingsEmptyState variant='inline'>{emptyText}</SettingsEmptyState>
       ) : (
-        <div className={RESOURCE_LIST_STACK}>{children}</div>
+        <div className='-mx-2 flex flex-col gap-y-0.5'>{children}</div>
       )}
     </SettingsSection>
   )
diff --git a/apps/sim/components/permissions/member-avatar.tsx b/apps/sim/components/permissions/member-avatar.tsx
deleted file mode 100644
index f13e86f6c21..00000000000
--- a/apps/sim/components/permissions/member-avatar.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@sim/emcn'
-import { getUserColor } from '@/lib/workspaces/colors'
-
-interface MemberAvatarProps {
-  name: string
-  image?: string | null
-  /** Seed for the generated fallback background; defaults to the name. */
-  colorSeed?: string
-}
-
-/**
- * The one avatar worn by every member row — Teammates, Organization, and the
- * credential Members sections. Matches `RESOURCE_TILE_BASE`'s 36px footprint so
- * a member row keeps the same rhythm as a resource row.
- */
-export function MemberAvatar({ name, image, colorSeed }: MemberAvatarProps) {
-  const initial = (name || '?').charAt(0).toUpperCase()
-  return (
-    <Avatar className='size-9 flex-shrink-0'>
-      {image ? <AvatarImage src={image} alt={name} referrerPolicy='no-referrer' /> : null}
-      <AvatarFallback
-        style={{ background: getUserColor(colorSeed || name || '') }}
-        className='border border-[var(--border-1)] text-small text-white'
-      >
-        {initial}
-      </AvatarFallback>
-    </Avatar>
-  )
-}
diff --git a/apps/sim/components/permissions/member-row.tsx b/apps/sim/components/permissions/member-row.tsx
index db9b237453a..8a235584204 100644
--- a/apps/sim/components/permissions/member-row.tsx
+++ b/apps/sim/components/permissions/member-row.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { Chip, ChipDropdown, cn } from '@sim/emcn'
-import { MemberAvatar } from '@/components/permissions/member-avatar'
+import { Avatar, AvatarFallback, Chip, ChipDropdown, cn } from '@sim/emcn'
+import { getUserColor } from '@/lib/workspaces/colors'
 import type { MemberRole } from './member-role-options'
 import { RoleLockTooltip } from './role-lock'
 
@@ -49,16 +49,20 @@ export function MemberRow<TRole extends string = MemberRole>({
   return (
     <div
       className={cn(
-        '-mx-2 grid items-center gap-2 rounded-lg p-2',
+        'grid items-center gap-2',
         canManage ? 'grid-cols-[1fr_120px_72px]' : 'grid-cols-[1fr_200px]'
       )}
     >
       <div className='flex min-w-0 items-center gap-2.5'>
-        <MemberAvatar
-          name={member.userName || member.userEmail || '?'}
-          colorSeed={member.userId || member.userEmail || ''}
-        />
-        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <Avatar className='size-9 flex-shrink-0'>
+          <AvatarFallback
+            style={{ background: getUserColor(member.userId || member.userEmail || '') }}
+            className='border border-[var(--border-1)] text-small text-white'
+          >
+            {(member.userName || member.userEmail || '?').charAt(0).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+        <div className='flex min-w-0 flex-col'>
           <span className='truncate text-[var(--text-body)] text-sm'>
             {member.userName || member.userEmail || member.userId}
           </span>
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index 5ba3a4140ef..f2c13b85d90 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -28,7 +28,6 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { formatDate } from '@sim/utils/formatting'
 import { ChevronDown, Plus } from 'lucide-react'
 import { useQueryState } from 'nuqs'
-import { MemberAvatar } from '@/components/permissions/member-avatar'
 import { saveDiscardActions } from '@/components/settings/save-discard-actions'
 import type { ShareAuthType } from '@/lib/api/contracts/public-shares'
 import { isBlockTypeAccessControlExempt } from '@/lib/permission-groups/block-access'
@@ -42,11 +41,13 @@ import {
   groupTabParam,
   groupTabUrlKeys,
 } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
-import { MemberRow } from '@/app/workspace/[workspaceId]/settings/components/member-list'
+import {
+  MemberAvatar,
+  MemberRow,
+} from '@/app/workspace/[workspaceId]/settings/components/member-list'
 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 { RESOURCE_LIST_STACK } 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 { getAllBlocks } from '@/blocks'
@@ -453,11 +454,7 @@ function AddMembersModal({
                           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}
-                            colorSeed={member.userId || email}
-                          />
+                          <MemberAvatar name={name} image={member.user?.image ?? null} />
                           <div className='min-w-0 flex-1'>
                             <div className='truncate text-[var(--text-body)] text-sm'>{name}</div>
                             <div className='truncate text-[var(--text-muted)] text-caption'>
@@ -1622,7 +1619,7 @@ export function GroupDetail({
                     />
                   </div>
                   {viewingGroup.workspaces.length > 0 && (
-                    <div className={RESOURCE_LIST_STACK}>
+                    <div className='-mx-2 flex flex-col gap-y-0.5'>
                       {viewingGroup.workspaces.map((ws) => (
                         <MemberRow
                           key={ws.id}
@@ -1657,17 +1654,17 @@ export function GroupDetail({
                     </Chip>
                   </div>
                   {membersLoading ? (
-                    <div className={RESOURCE_LIST_STACK}>
+                    <div className='-mx-2 flex flex-col gap-y-0.5'>
                       {[1, 2].map((i) => (
-                        <div key={i} className='-mx-2 flex items-center gap-2.5 rounded-lg p-2'>
-                          <Skeleton className='size-9 flex-shrink-0 rounded-full' />
+                        <div key={i} className='flex items-center gap-2.5 p-2'>
+                          <Skeleton className='size-[14px] flex-shrink-0 rounded-full' />
                           <Skeleton className='h-[14px] w-[180px]' />
                         </div>
                       ))}
                     </div>
                   ) : (
                     members.length > 0 && (
-                      <div className={RESOURCE_LIST_STACK}>
+                      <div className='-mx-2 flex flex-col gap-y-0.5'>
                         {members.map((member) => (
                           <MemberRow
                             key={member.id}

From df4263bbc0984e5f6591ac2b065f0ed7e765b7eb Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sun, 2 Aug 2026 23:15:12 -0700
Subject: [PATCH 4/4] fix(settings): wire flush, drop the lone skeleton, close
 review gaps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Final review round. Two fixes the previous commit claimed but did not land:
`CredentialDetailHeading` never passed `flush`, so every credential detail
heading wore list-row padding, and the empty-subtitle guard was never applied.
Both were scripted replacements that silently no-op'd.

RESOURCE_LIST_GRID also dropped to one column 32px earlier than the grid it
replaced — `auto-fit` measures tracks, not margin boxes, so widening the gap
for the rows' bleed moved the breakpoint. Track minimum now budgets for it.

Removes the BYOK skeleton rather than maintaining a second copy of the row: it
was the only skeleton in settings, and it had already desynced from the row it
imitates. Its peers render nothing while loading.

Also: unify the glyph-tile treatment across MCP/sandboxes/workflow-MCP with
custom tools; move decoration out of `trailing` in verified-domains and
recently-deleted; convert the last hand-rolled row and empty states in
workflow-MCP, api-keys, copilot and group-detail; give copilot's delete the
same `...` affordance as api-keys; announce the row description via
aria-describedby, which the stretched overlay had silenced; and let
SettingsField render its own value so callers stop restating type tokens.

Docs: correct claims that predate this PR — `aside` does not exist, the
navigation source of truth is under components/, beforeunload mounts in the
layouts, `getSettingsSectionMeta` takes two args — and stop asserting a
literal-pixel grep returns zero when display type legitimately uses it.
---
 .claude/rules/sim-settings-pages.md           |  49 +-
 .claude/skills/add-settings-page/SKILL.md     |   6 +-
 .../components/credential-detail-heading.tsx  |  10 +-
 .../settings/components/api-keys/api-keys.tsx |  25 +-
 .../password-detail/password-detail.tsx       |  18 +-
 .../components/byok/byok-key-manager.tsx      |   9 +-
 .../components/byok/byok-skeleton.tsx         |  22 -
 .../settings/components/copilot/copilot.tsx   |  30 +-
 .../settings/components/mcp/mcp.tsx           |  39 +-
 .../recently-deleted/recently-deleted.tsx     |  22 +-
 .../components/sandboxes/sandboxes.tsx        |  14 +-
 .../settings/components/sandboxes/utils.ts    |  21 +-
 .../components/settings-field/index.ts        |   2 +-
 .../settings-field/settings-field.tsx         |  17 +-
 .../settings-resource-row.tsx                 |  28 +-
 .../workflow-mcp-servers.tsx                  | 506 +++++++++---------
 .../components/group-detail.tsx               |   4 +-
 .../components/verified-domains-section.tsx   |  18 +-
 18 files changed, 425 insertions(+), 415 deletions(-)
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx

diff --git a/.claude/rules/sim-settings-pages.md b/.claude/rules/sim-settings-pages.md
index 36dd418bf70..114bc1f30a8 100644
--- a/.claude/rules/sim-settings-pages.md
+++ b/.claude/rules/sim-settings-pages.md
@@ -23,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'>`)
@@ -58,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
@@ -85,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`.
@@ -148,8 +150,8 @@ down the **row title/subtitle** shape above, not every text element on every pag
 **`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 hover band, the hit area, the focus ring, and the
-navigation chevron. Never hand-roll any of it, and never wrap the row in your own
+(`-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
@@ -183,7 +185,8 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
 - `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.
+  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
@@ -211,7 +214,8 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
 
 ## Other shared settings primitives (do not re-roll these)
 
-- **`SettingsSection`** (`…/components/settings-section`) — muted label, hairline
+- **`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
@@ -231,8 +235,10 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
   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 the rare tile
-  outside a row (a detail heading). `ResourceTile` wraps the filled pairing.
+  `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`
@@ -295,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`.
@@ -333,7 +340,7 @@ A settings page is design-system-clean when:
 - [ ] 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 — 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: multi-line bodies (inbox tasks), tabular columns (billing invoices, credit usage), and grids (secrets).
+- [ ] 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`.
diff --git a/.claude/skills/add-settings-page/SKILL.md b/.claude/skills/add-settings-page/SKILL.md
index 26eb40b4fec..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 -nE "text-\[[0-9]+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
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 ef0c775cbf4..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
@@ -19,6 +19,14 @@ export function CredentialDetailHeading({
   subtitle,
 }: CredentialDetailHeadingProps) {
   return (
-    <SettingsResourceRow iconVariant='custom' icon={leading} title={title} description={subtitle} />
+    <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]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index 66b256b567a..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
@@ -202,14 +202,21 @@ 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={RESOURCE_LIST_STACK}>
                     {workspaceKeys.map((key) => (
                       <SettingsResourceRow
                         key={key.id}
                         title={key.name}
-                        description={`${key.displayKey} · last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                        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}
@@ -232,7 +239,12 @@ export function ApiKeys({ scope = 'workspace' }: ApiKeysProps) {
                     <SettingsResourceRow
                       key={key.id}
                       title={key.name}
-                      description={`${key.displayKey} · last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                      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}
@@ -258,7 +270,12 @@ export function ApiKeys({ scope = 'workspace' }: ApiKeysProps) {
                       <div key={key.id} className='flex flex-col'>
                         <SettingsResourceRow
                           title={key.name}
-                          description={`${key.displayKey} · last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                          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}
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 b16bf4ac2df..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
@@ -145,16 +145,14 @@ export function PasswordDetail({ credential, onBack, onForgotten }: PasswordDeta
             <SettingsField label='Site'>
               <div className='flex items-center gap-2.5'>
                 <div className={cn(RESOURCE_TILE_BASE, RESOURCE_TILE_PLAIN)}>
-                  <div className='flex size-full items-center justify-center'>
-                    {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>
+                  {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>
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 3020f7d239c..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
@@ -21,7 +21,6 @@ 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 {
   RESOURCE_LIST_STACK,
@@ -324,13 +323,7 @@ export function BYOKKeyManager(props: BYOKKeyManagerProps) {
 
         {description && <p className='text-[var(--text-secondary)] text-sm'>{description}</p>}
 
-        {isLoading ? (
-          <div className={RESOURCE_LIST_STACK}>
-            {providers.map((p) => (
-              <BYOKKeySkeleton key={p.id} />
-            ))}
-          </div>
-        ) : showNoResults ? (
+        {isLoading ? null : showNoResults ? (
           <SettingsEmptyState variant='inline'>
             No providers found matching "{searchTerm}"
           </SettingsEmptyState>
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 edd8c1e6f01..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='-mx-2 flex items-center justify-between gap-2.5 rounded-lg p-2'>
-      <div className='flex items-center gap-2.5'>
-        <Skeleton className='size-9 flex-shrink-0 rounded-xl' />
-        <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 93ac321922d..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,6 +14,7 @@ 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'
@@ -141,16 +141,26 @@ export function Copilot() {
               <SettingsResourceRow
                 key={key.id}
                 title={key.name || 'Unnamed Key'}
-                description={`${key.displayKey} · last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                description={key.displayKey}
+                badge={
+                  <span className='whitespace-nowrap text-[var(--text-muted)] text-caption'>
+                    {`last used ${formatLastUsed(key.lastUsed).toLowerCase()}`}
+                  </span>
+                }
                 trailing={
-                  <Chip
-                    onClick={() => {
-                      setDeleteKey(key)
-                      setShowDeleteDialog(true)
-                    }}
-                  >
-                    Delete
-                  </Chip>
+                  <RowActionsMenu
+                    label={`Actions for ${key.name || 'Unnamed Key'}`}
+                    actions={[
+                      {
+                        label: 'Delete',
+                        destructive: true,
+                        onSelect: () => {
+                          setDeleteKey(key)
+                          setShowDeleteDialog(true)
+                        },
+                      },
+                    ]}
+                  />
                 }
               />
             ))}
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 ee2eda8546c..0c886ebf438 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -27,10 +27,7 @@ import {
 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 { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
-import {
-  SETTINGS_FIELD_VALUE_CLASSES,
-  SettingsField,
-} from '@/app/workspace/[workspaceId]/settings/components/settings-field'
+import { SettingsField } from '@/app/workspace/[workspaceId]/settings/components/settings-field'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
 import {
   RESOURCE_LIST_STACK,
@@ -126,20 +123,24 @@ function ServerListItem({
         : showDiscoveryError
           ? discoveryError
           : toolsLabel
-  const statusLabel = `${transportLabel} · ${statusText}`
 
   return (
     <SettingsResourceRow
-      icon={<McpIcon />}
+      icon={<McpIcon className='text-[var(--text-icon)]' />}
+      iconFilled
       title={serverName}
       description={
-        <span
-          className={cn(
-            hasConnectionIssue && !isConnecting ? 'text-[var(--text-error)]' : undefined
-          )}
-        >
-          {statusLabel}
-        </span>
+        <>
+          {`${transportLabel} · `}
+          {/* Only the status reddens — the transport is neutral metadata. */}
+          <span
+            className={cn(
+              hasConnectionIssue && !isConnecting ? 'text-[var(--text-error)]' : undefined
+            )}
+          >
+            {statusText}
+          </span>
+        </>
       }
       onClick={onViewDetails}
       clickLabel={`Open ${serverName}`}
@@ -457,17 +458,13 @@ export function MCP() {
       >
         <SettingsSection label='Server'>
           <div className='flex flex-col gap-4.5'>
-            <SettingsField label='Server name'>
-              <p className={SETTINGS_FIELD_VALUE_CLASSES}>{server.name || 'Unnamed server'}</p>
-            </SettingsField>
+            <SettingsField label='Server name'>{server.name || 'Unnamed server'}</SettingsField>
 
-            <SettingsField label='Transport'>
-              <p className={SETTINGS_FIELD_VALUE_CLASSES}>{transportLabel}</p>
-            </SettingsField>
+            <SettingsField label='Transport'>{transportLabel}</SettingsField>
 
             {server.url && (
-              <SettingsField label='URL'>
-                <p className={`break-all ${SETTINGS_FIELD_VALUE_CLASSES}`}>{server.url}</p>
+              <SettingsField label='URL' breakAll>
+                {server.url}
               </SettingsField>
             )}
 
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 c2af440ea95..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
@@ -562,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/sandboxes.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/sandboxes.tsx
index 30c599e8fe2..ed393de09a6 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/sandboxes.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/sandboxes.tsx
@@ -24,10 +24,10 @@ import {
   draftFromSandbox,
   emptyDraft,
   extractIssues,
-  SANDBOX_DELETE_CONFIRM_TEXT,
   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'
@@ -240,13 +240,8 @@ export function Sandboxes() {
             onOpenChange={setShowDeleteConfirm}
             srTitle='Delete Sandbox'
             title='Delete Sandbox'
-            text={SANDBOX_DELETE_CONFIRM_TEXT}
-            confirm={{
-              label: 'Delete',
-              onClick: () => void handleDelete(selected),
-              pending: deleteSandbox.isPending,
-              pendingLabel: 'Deleting...',
-            }}
+            text={sandboxDeleteConfirmText(selected.name)}
+            confirm={{ label: 'Delete', onClick: () => void handleDelete(selected) }}
           />
         )}
 
@@ -292,7 +287,8 @@ export function Sandboxes() {
           {filtered.map((sandbox) => (
             <SettingsResourceRow
               key={sandbox.id}
-              icon={<CodeIcon />}
+              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)}
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 ab39d7f284f..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,14 +7,19 @@ 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. */
-export const SANDBOX_DELETE_CONFIRM_TEXT = [
-  {
-    text: 'This will permanently delete the sandbox and remove it from any Function blocks that are using it.',
-    error: true,
-  },
-  ' This action cannot be undone.',
-] as const
+/** 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 = [
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
index e2207ab7625..2f151bb85c2 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-field/index.ts
@@ -1 +1 @@
-export { SETTINGS_FIELD_VALUE_CLASSES, SettingsField } from './settings-field'
+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
index a6eaa5ec8f8..3a8072eb3df 100644
--- 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
@@ -1,7 +1,10 @@
 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
 }
 
@@ -9,15 +12,19 @@ interface SettingsFieldProps {
  * 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, children }: SettingsFieldProps) {
+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>
-      {children}
+      {typeof children === 'string' ? (
+        <p className={cn('text-[var(--text-body)] text-sm', breakAll && 'break-all')}>{children}</p>
+      ) : (
+        children
+      )}
     </div>
   )
 }
-
-/** Value text inside a {@link SettingsField}. */
-export const SETTINGS_FIELD_VALUE_CLASSES = 'text-[var(--text-body)] text-sm'
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 b2eaebc1e51..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,4 +1,4 @@
-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'
@@ -107,9 +107,13 @@ export const RESOURCE_LIST_STACK = 'flex flex-col gap-y-0.5'
  * 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(280px,1fr))] gap-x-6 gap-y-0.5'
+  '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]'
@@ -129,6 +133,7 @@ export function SettingsResourceRow({
   navigable = false,
   flush = false,
 }: SettingsResourceRowProps) {
+  const describedById = useId()
   const isTile = iconVariant === 'tile'
   const cluster = (
     <>
@@ -152,7 +157,9 @@ export function SettingsResourceRow({
       <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>
     </>
@@ -201,9 +208,20 @@ export function SettingsResourceRow({
       )}
     >
       {href ? (
-        <Link href={href} aria-label={clickLabel} className={overlayClass} />
+        <Link
+          href={href}
+          aria-label={clickLabel}
+          aria-describedby={description != null ? describedById : undefined}
+          className={overlayClass}
+        />
       ) : (
-        <button type='button' onClick={onClick} aria-label={clickLabel} className={overlayClass} />
+        <button
+          type='button'
+          onClick={onClick}
+          aria-label={clickLabel}
+          aria-describedby={description != null ? describedById : undefined}
+          className={overlayClass}
+        />
       )}
       <div className={cn(clusterClass, 'pointer-events-none')}>{cluster}</div>
       {end}
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 0deda376b30..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
@@ -40,10 +40,7 @@ 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 {
-  SETTINGS_FIELD_VALUE_CLASSES,
-  SettingsField,
-} from '@/app/workspace/[workspaceId]/settings/components/settings-field'
+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 {
@@ -383,11 +380,7 @@ function ServerDetailView({
   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-caption leading-tight'>
-            Failed to load server details
-          </p>
-        </div>
+        <SettingsEmptyState tone='error'>Failed to load server details</SettingsEmptyState>
       </SettingsPanel>
     )
   }
@@ -441,25 +434,20 @@ function ServerDetailView({
           <div className='min-h-[300px] pt-4'>
             {activeServerTab === 'workflows' && (
               <div className='flex flex-col gap-4.5'>
-                <span className='text-[var(--text-muted)] text-small'>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={[
@@ -472,9 +460,9 @@ function ServerDetailView({
                                 },
                               ]}
                             />
-                          </div>
-                        )}
-                      </div>
+                          ) : undefined
+                        }
+                      />
                     ))}
                   </div>
                 )}
@@ -490,27 +478,19 @@ function ServerDetailView({
             {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'>
-                  <SettingsField label='Server Name'>
-                    <p className={SETTINGS_FIELD_VALUE_CLASSES}>{server.name}</p>
-                  </SettingsField>
-                  <SettingsField label='Transport'>
-                    <p className={SETTINGS_FIELD_VALUE_CLASSES}>Streamable-HTTP</p>
-                  </SettingsField>
+                  <SettingsField label='Server Name'>{server.name}</SettingsField>
+                  <SettingsField label='Transport'>Streamable-HTTP</SettingsField>
                   <SettingsField label='Access'>
-                    <p className={SETTINGS_FIELD_VALUE_CLASSES}>
-                      {server.isPublic ? 'Public' : 'API Key'}
-                    </p>
+                    {server.isPublic ? 'Public' : 'API Key'}
                   </SettingsField>
                 </div>
 
                 {server.description?.trim() && (
-                  <SettingsField label='Description'>
-                    <p className={SETTINGS_FIELD_VALUE_CLASSES}>{server.description}</p>
-                  </SettingsField>
+                  <SettingsField label='Description'>{server.description}</SettingsField>
                 )}
 
-                <SettingsField label='URL'>
-                  <p className={`break-all ${SETTINGS_FIELD_VALUE_CLASSES}`}>{mcpServerUrl}</p>
+                <SettingsField label='URL' breakAll>
+                  {mcpServerUrl}
                 </SettingsField>
 
                 <div>
@@ -652,244 +632,235 @@ function ServerDetailView({
           </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>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-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),
-            }}
+          </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}
+      />
+      )
     </>
   )
 }
@@ -1053,7 +1024,8 @@ export function WorkflowMcpServers() {
                 return (
                   <SettingsResourceRow
                     key={server.id}
-                    icon={<McpIcon />}
+                    icon={<McpIcon className='text-[var(--text-icon)]' />}
+                    iconFilled
                     title={server.name}
                     description={toolsLabel}
                     onClick={() => {
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index f2c13b85d90..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) => {
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 }]}
+          />
         }
       />