diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md
index 81a41e0c..005438b1 100644
--- a/frontend/DESIGN.md
+++ b/frontend/DESIGN.md
@@ -23,23 +23,23 @@ through `@theme inline`, so `bg-`, `text-`, `border-`, `ring-`, `fill-` and
 `stroke-` all accept them, including opacity modifiers such as
 `bg-success/10`. One token class replaces a light + dark pair.
 
-| Token                                   | Use for                                                         | Replaces                                                            |
-| --------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------- |
-| `background`, `foreground`              | page surface and primary text                                   | `bg-white`, `text-gray-700/800/900`, `dark:text-gray-200/300`       |
-| `card`, `card-foreground`               | raised surfaces (cards, dialogs, dropdowns)                     | `bg-white dark:bg-[#2b2c31]`                                        |
-| `popover`, `popover-foreground`         | floating menus and popovers                                     | same as card                                                        |
-| `muted`, `muted-foreground`             | quiet fills and secondary text, icons, placeholders, timestamps | `bg-gray-100/200`, `text-gray-400/500/600`, `dark:text-gray-400`    |
-| `accent`, `accent-foreground`           | hover and selected fills                                        | `hover:bg-gray-100`, `dark:hover:bg-gray-700`                       |
-| `border`, `input`, `ring`               | dividers, field borders, focus rings                            | `border-gray-200/300`, `dark:border-gray-600/700`                   |
-| `primary`, `primary-foreground`         | brand purple: primary actions, links, selected states           | `bg-purple-*`, `text-purple-*`, `#7D54D1`, `#A076F6`                |
+| Token                                   | Use for                                                                           | Replaces                                                            |
+| --------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| `background`, `foreground`              | page surface and primary text                                                     | `bg-white`, `text-gray-700/800/900`, `dark:text-gray-200/300`       |
+| `card`, `card-foreground`               | raised surfaces (cards, dialogs, dropdowns)                                       | `bg-white dark:bg-[#2b2c31]`                                        |
+| `popover`, `popover-foreground`         | floating menus and popovers                                                       | same as card                                                        |
+| `muted`, `muted-foreground`             | quiet fills and secondary text, icons, placeholders, timestamps                   | `bg-gray-100/200`, `text-gray-400/500/600`, `dark:text-gray-400`    |
+| `accent`, `accent-foreground`           | hover and selected fills                                                          | `hover:bg-gray-100`, `dark:hover:bg-gray-700`                       |
+| `border`, `input`, `ring`               | dividers, field borders, focus rings                                              | `border-gray-200/300`, `dark:border-gray-600/700`                   |
+| `primary`, `primary-foreground`         | brand purple: primary actions, links, selected states                             | `bg-purple-*`, `text-purple-*`, `#7D54D1`, `#A076F6`                |
 | `secondary`, `secondary-foreground`     | pressed and active toggles (a brand tint), secondary buttons, the question bubble | `bg-accent` on an active icon button                                |
-| `destructive`, `destructive-foreground` | errors, failed states, dangerous actions                        | `text-red-*`, `bg-red-50/100`, `#B42318`, `#E60000`                 |
-| `success`, `success-foreground`         | completed, active, healthy                                      | `text-green-*`, `text-emerald-*`, `bg-green-50/100`                 |
-| `warning`, `warning-foreground`         | paused, pending review, degraded                                | `text-amber-*`, `text-yellow-*`, `text-orange-*`, `bg-amber-50/100` |
-| `info`, `info-foreground`               | running, informational                                          | `text-blue-*`, `bg-blue-50/100`                                     |
-| `sidebar-*`                             | the navigation rail                                             |                                                                     |
-| `chart-1` to `chart-5`                  | data series only, never UI chrome (see below)                   |                                                                     |
-| `answer-bubble`                         | assistant message background                                    |                                                                     |
+| `destructive`, `destructive-foreground` | errors, failed states, dangerous actions                                          | `text-red-*`, `bg-red-50/100`, `#B42318`, `#E60000`                 |
+| `success`, `success-foreground`         | completed, active, healthy                                                        | `text-green-*`, `text-emerald-*`, `bg-green-50/100`                 |
+| `warning`, `warning-foreground`         | paused, pending review, degraded                                                  | `text-amber-*`, `text-yellow-*`, `text-orange-*`, `bg-amber-50/100` |
+| `info`, `info-foreground`               | running, informational                                                            | `text-blue-*`, `bg-blue-50/100`                                     |
+| `sidebar-*`                             | the navigation rail                                                               |                                                                     |
+| `chart-1` to `chart-5`                  | data series only, never UI chrome (see below)                                     |                                                                     |
+| `answer-bubble`                         | assistant message background                                                      |                                                                     |
 
 Status colours are tuned to stay vivid rather than turning brown or olive,
 so their contrast is low. Against white in light mode, `destructive` and
@@ -89,11 +89,11 @@ Patterns:
 
 ### Button (`ui/button.tsx`)
 
-| Prop      | Values                                                                                                                                                 |
-| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `variant` | `default`, `secondary`, `outline`, `outline-primary`, `ghost`, `ghost-muted`, `ghost-destructive`, `link`, `destructive`, `destructive-outline`, `combobox`, `sidebar-item`, `tab`, `section-toggle` |
-| `size`    | `xs`, `sm`, `default`, `lg`, `field`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `inline`                                                                |
-| `shape`   | `default` (rounded-md), `pill` (rounded-full, wider padding)                                                                                           |
+| Prop      | Values                                                                                                                                                                                                                                                 |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `variant` | `default`, `secondary`, `outline`, `outline-primary`, `ghost`, `ghost-muted`, `ghost-destructive`, `ghost-on-accent`, `ghost-destructive-on-accent`, `link`, `destructive`, `destructive-outline`, `combobox`, `sidebar-item`, `tab`, `section-toggle` |
+| `size`    | `xs`, `sm`, `default`, `lg`, `field`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `inline`                                                                                                                                                                |
+| `shape`   | `default` (rounded-md), `pill` (rounded-full, wider padding)                                                                                                                                                                                           |
 
 - Round brand buttons (`rounded-3xl px-5`, `rounded-full px-6`): `shape="pill"`,
   plus `size="lg"` if they were `px-6`.
@@ -102,6 +102,14 @@ Patterns:
 - Icon actions that remove something (a trash can on a member or shared
   resource row) are `variant="ghost-destructive"`: muted at rest, red on
   hover, so the warning shows even where the click deletes without asking.
+- Icon buttons on a row that is already `bg-accent` or `bg-sidebar-accent`
+  while you point at it (a highlighted Command item, a card or tile with
+  `hover:bg-accent`, a hovered sidebar row) are `variant="ghost-on-accent"`
+  (delete: `ghost-destructive-on-accent`). They hover with a
+  `foreground/15` (`destructive/15`) tint, which shows on accent where
+  ghost's accent square would not.
+- Icons are `lucide-react` at the default stroke (2). Don't pass
+  `strokeWidth`, and don't use an `<img>` for a glyph lucide has.
 - Bordered purple buttons (`border-primary text-primary hover:bg-primary`):
   `variant="outline-primary"`.
 - Tiny inline actions (`h-auto px-2 py-1 text-xs`): `size="xs"`.
@@ -117,9 +125,10 @@ Patterns:
   while `data-placeholder` is set (`data-placeholder={value ? undefined : ''}`).
   Pass only layout (`w-full justify-between`) and keep the chevron as the
   last child.
-- A button or picker that sits in a row of fields is `size="field"`: 42px,
-  the height of `Input` (default) and `SelectTrigger size="lg"`, so a form
-  column has one height. With `shape="pill"` its text starts 21px in, like
+- A button or picker that sits in a row of fields is `size="field"`: 42px.
+  `Input` and `SelectTrigger` take `size="field"` too (the same 42px as
+  Input `default` and SelectTrigger `lg`), so a form column has one name for
+  one height; prefer `field` in new form rows. With `shape="pill"` its text starts 21px in, like
   the Input and Select pills beside it. The agent form's pickers are
   `combobox field pill`, its Add button `outline-primary field pill`.
 - Rows in the navigation sidebar (`hover:bg-sidebar-accent … pl-3 gap-2.5
@@ -136,20 +145,37 @@ rounded-3xl`) are `variant="sidebar-item"`: left-aligned, full-radius, normal
   gives it `foreground` text and a `primary` underline. Padding-free tabs (a
   sub-nav with `gap-6`) add `size="inline"`, which keeps 4px above the line;
   the row draws the 1px baseline, and `-mb-px` lays the underline over it.
-  Tabs that switch a panel in place use `ui/tabs` instead.
+  Use them for a row of route links (the agent sub-nav: a `<nav>` whose
+  current link carries `aria-current="page"`). Tabs that switch a panel in
+  place are `ui/tabs` with `variant="underline"` on `TabsList` and each
+  `TabsTrigger`: the same pixels, plus `role="tablist"`/`"tab"`,
+  `aria-selected` and arrow-key focus; wrap the panel in `TabsContent`
+  (FilePicker's My Files / Shared with Me). The `default` variant is a pill
+  tab, unused in the app.
 - A section panel's disclosure header (NewAgent's Advanced and Guardrails
   panels) is `variant="section-toggle" size="sm"` with `-ml-3 w-fit
-  justify-start` and `aria-expanded`: a lucide `ChevronRight` first
+justify-start` and `aria-expanded`: a lucide `ChevronRight` first
   (`rotate-90` while open) in primary, then the foreground title, with a
   primary underline on hover. The button draws no focus ring; the panel does,
   so keyboard focus outlines the whole white block:
   `has-[[data-variant=section-toggle]:focus-visible]:ring-3 …:ring-ring/50
-  …:ring-inset` on the panel `<div>` (inset, because a scrolling column clips
+…:ring-inset` on the panel `<div>` (inset, because a scrolling column clips
   an outset ring). Status badges go beside the button, not inside it, or the
   hover underline runs under them.
 - Drop `text-white` on default and destructive buttons; the foreground token
-  already provides it. Drop `disabled:cursor-not-allowed`; the base disables
-  pointer events.
+  already provides it. Drop `disabled:cursor-not-allowed` on buttons; the
+  base disables pointer events. Fields are the other way round (see Focus,
+  elevation and stacking: "Disabled").
+- A button that is busy (saving, creating, testing) takes `loading`: it
+  disables itself, sets `aria-busy`, and draws a 16px spinner over the label,
+  which stays in the layout (invisible) so the width doesn't jump. Keep the
+  idle label; never hand-place a `Spinner` in a button, swap the label for
+  "Saving…", or pin a fixed width to stop the jump. The one exception is a
+  button whose busy state says something the user needs: a progress figure
+  (a connector's Sync shows "42%") or a mode (the composer's Voice button shows
+  "Transcribing"). It keeps its busy label with a spinning mark where its
+  icon was: Sync uses `Spinner size="sm"` at icon size (`size-4`); Voice still
+  spins lucide's `LoaderCircle`.
 
 ### Card (`ui/card.tsx`)
 
@@ -186,15 +212,18 @@ modal) leave it out and stay plain buttons. Only layout classes on it.
 pill, including schedule and run status pills. HTTP method pills take their variant from
 `getMethodBadgeVariant` (`utils/httpMethodColors.ts`): GET `success`, POST
 `info`, PUT `warning`, DELETE `destructive`, PATCH `default`, anything else
-`neutral`.
+`neutral`. `MultiSelect` (`ui/multi-select.tsx`) shows its first two picks as
+`default` Badges with a remove X, then "+N more", on a `Button
+variant="combobox" size="field"` trigger that grows past 42px when the chips
+wrap.
 
 ### Input (`ui/input.tsx`)
 
-| Prop    | Values                                                           |
-| ------- | ---------------------------------------------------------------- |
-| `size`  | `sm` (h-8), `default` (h-10.5, the historical 42px), `lg` (h-12) |
-| `shape` | `default`, `pill`                                                |
-| `variant` | `default`, `bare` (no border, padding, radius, shadow or ring), `filled` (card fill) |
+| Prop      | Values                                                                                                |
+| --------- | ----------------------------------------------------------------------------------------------------- |
+| `size`    | `sm` (h-8), `default` (h-10.5, the historical 42px), `lg` (h-12), `field` (h-10.5, the form-row name) |
+| `shape`   | `default`, `pill`                                                                                     |
+| `variant` | `default`, `bare` (no border, padding, radius, shadow or ring), `filled` (card fill)                  |
 
 Text alignment classes (`text-right`) and `font-mono` (code fields) are
 allowed on Input and Textarea. A floating
@@ -216,9 +245,11 @@ instead of showing the panel through; never pass `bg-card` for it.
 
 ### SelectTrigger (`ui/select.tsx`)
 
-`size`: `sm`, `default`, `lg`; `variant`: `default`, `ghost`; `shape`:
-`default`, `pill`. The large rounded selects (`rounded-3xl px-5 py-3`) are
-`size="lg" shape="pill"`.
+`size`: `sm` (32px), `default` (36px), `lg` (42px), `field` (42px, the
+form-row name); `variant`: `default`, `ghost`; `shape`: `default`, `pill`.
+Pills pad `px-5` at every size but `sm` (`px-3`), so their text starts 21px
+in like the Input and Button field pills. The large rounded selects
+(`rounded-3xl px-5 py-3`) are `size="lg" shape="pill"`.
 
 ### Textarea (`ui/textarea.tsx`)
 
@@ -226,7 +257,51 @@ instead of showing the panel through; never pass `bg-card` for it.
 `none`, `vertical` (default), `both`. Same border, ring and invalid styling
 as Input. `variant`: `default` (transparent), `filled` (card fill), with
 the same rule as Input: a textarea on a muted panel is `variant="filled"`,
-never `bg-card`. Replaces the 21 raw `<textarea>` elements.
+never `bg-card`. Three raw `<textarea>` elements stay, because each sits
+under an overlay it must line up with: the chat composer, PromptTextArea's
+variable highlighter and the chunk editor behind its line-number gutter.
+
+### FormField (`ui/form-field.tsx`)
+
+A labelled field is `<FormField label required hint error disabled>` with
+the field as its only child. It stacks `Label`, the field, a muted `text-xs`
+hint and a red `text-xs` error (`role="alert"`) 6px apart (`gap-1.5`), puts
+the required star 4px after the label (`aria-hidden`; the field gets
+`aria-required`, not native `required`), and dims the label while
+`disabled`. `Input`, `Textarea`, `SelectTrigger` (even nested in `Select`),
+`MultiSelect` and `Checkbox` read their `id`, `aria-invalid`, `aria-describedby`,
+`aria-required` and `disabled` from it, so don't set those by hand; an id
+the field already has wins. Any other control: pass `id` to FormField and
+the same id to the control. One FormField holds one control: a second
+field inside it (an "Add ref" box under a picker) needs its own `id`, or it
+takes the field's. Popovers reset the wiring (`FormFieldBoundary`), so a
+picker's search box is safe. There is one size: labels are `text-sm`
+everywhere, also in dense panels (Guardrails). `className` is layout only.
+Floating-label Inputs (`<Input label>`) label themselves and don't go in a
+FormField. Never hand-build a `<label className="mb-2 block …">` or a
+`div.flex-col` + `Label` + `<p>` stack.
+
+### SettingRow (`ui/setting-row.tsx`)
+
+A setting with a control on the right (a Switch, a short Input) is
+`<SettingRow label description htmlFor alignStart as after>{control}</SettingRow>`,
+grouped in `<SettingRows>`, which splits rows with `divide-border/50` and pads
+each 12px (none at the group's ends). The title is a `Label` for the control
+(`htmlFor` = the control's id), so every switch has a name and clicking the
+title toggles it; `as="h2" | "h3"` keeps a heading tag, and the control then
+needs its own `aria-label`. `alignStart` top-aligns the control for wrapping
+descriptions. `after` holds a field that belongs to the row, 8px under it
+(the agent form's limit Inputs). Inline "switch + label" pairs (a filter
+toggle) are not SettingRows.
+
+### Checkbox (`ui/checkbox.tsx`)
+
+`<Checkbox checked onCheckedChange>` (Radix), never `<input type="checkbox">`:
+native boxes take the OS accent and ignore dark mode. `size`: `default`
+(16px, option rows), `sm` (14px, table cells). Unchecked it is an
+`border-input` box; checked, `primary` with a `primary-foreground` check.
+Name it with a `Label htmlFor` or `aria-label`. For an on/off setting with a
+description use a Switch in a SettingRow instead.
 
 ### Tooltip (`ui/tooltip.tsx`)
 
@@ -238,10 +313,9 @@ button as well.
 ### Spinner and Skeleton (`ui/spinner.tsx`, `ui/skeleton.tsx`)
 
 `Spinner size="sm | default | lg"` draws in `currentColor`, so colour it
-with a `text-*` token on it or its parent. `components/Spinner.tsx` is a
-compatibility wrapper (`small | medium | large`) for existing imports.
-`Skeleton` is a pulsing muted block sized with layout classes and rounded
-as needed; `components/SkeletonLoader.tsx` should compose it.
+with a `text-*` token on it or its parent. `Skeleton` is a pulsing muted
+block sized with layout classes and rounded as needed. Never put one inside
+an element that pulses itself; the two animations multiply.
 
 ### Progress (`ui/progress.tsx`)
 
@@ -333,12 +407,40 @@ rounded box) on a wrapper around `Accordion`.
 rejects imports of it elsewhere. App code uses `Modal` (sizes `sm` to
 `full`, `mobileVariant="sheet"`) or `CommandDialog`.
 
+A modal's heading is its `title` (20px, `text-xl leading-tight
+font-semibold`) and `description` (muted `text-sm`, 8px under the title).
+Don't pass `hideTitle` to draw your own `<h2>`; `hideTitle` is only for
+dialogs whose top line is not a title (MoveToFolderModal's breadcrumb,
+Upload's step headings, ScheduleFormModal's editable name, the search
+palette).
+
+Buttons go in `footer`, never in `children`. The footer stacks full width on
+phones (primary on top) and sits in a right-aligned row from `sm` up. The
+standard pair is `footer={<ModalActions cancelLabel onCancel submitLabel
+onSubmit pending disabled destructive />}`: a ghost Cancel and a primary
+(or `destructive`) submit, both `size="lg" shape="pill"`; `pending` shows
+the submit's `loading` spinner. A left-hand extra (Test connection) is
+`footerStart`, and `submitProps` / `cancelProps` carry `type="submit"`,
+`form` or a test id. A lone button is a `size="lg" shape="pill"` Button.
+
 A search palette is `CommandDialog` on desktop. Pass cmdk options to its
 inner `Command` through `commandProps` (`shouldFilter={false}` when results
 come from a server search, a controlled `value`). On phones the same palette
 goes in `Modal mobileVariant="sheet"` as `<Command variant="palette">`, which
 gives it the dialog's 48px input row and row spacing, so both widths look
-the same (`modals/SearchConversationsModal.tsx`).
+the same (`modals/SearchConversationsModal.tsx`). `CommandDialog` sits on
+`DialogContent`, which has Modal's surface (`bg-card rounded-2xl
+shadow-modal`, no border) and the same blurred overlay.
+
+Every phone bottom sheet has one shape: `bg-card`, 16px top corners, no top
+border, at most 90% of the viewport, and bottom padding that clears the iPhone
+home indicator. `SheetContent side="bottom"` gives it with `pb-safe-0` (the
+bare inset); pass `handle` for the grab bar, and `showCloseButton={false}`
+when the handle is the only dismiss affordance besides the overlay.
+`Modal mobileVariant="sheet"` shares the shape and the `SheetHandle`, with
+`pb-safe` (the inset, at least 1rem) under its footer. `pb-safe` and
+`pb-safe-0` are the `index.css` utilities for `env(safe-area-inset-bottom)`;
+never spell `env()` in a class.
 
 In a picker list, mark the item that is currently chosen with
 `CommandItem checked` (a `secondary` brand tint through `data-checked`), not
@@ -347,6 +449,17 @@ follows the pointer and arrow keys, so an accent fill would look like hover.
 While a checked item is also highlighted it keeps its tint and text and gains
 a 1px inset `primary` ring, so the chosen row never turns plain grey.
 
+### ActionMenu (`ui/dropdown-menu.tsx`)
+
+The three-dots menu on a card, tile or row. Pass `options: MenuOption[]`
+(`label`, `onClick`, optional lucide `icon`, `variant: 'destructive'`,
+`disabled`) and a `triggerLabel`. It renders a `ghost-on-accent` `icon-xs`
+trigger with `EllipsisVertical`, and stops clicks and keys on the trigger and
+the menu from reaching the host, so it can sit inside a clickable card.
+`className` takes layout only (position, margin) and lands on the trigger;
+the menu is at least 144px wide and grows with its labels. `open`/`onOpenChange` make it controlled. Don't hand-build
+this menu from `DropdownMenu`, and don't declare a local option type.
+
 ### Table, Label, dialog text
 
 `TableCell` and `TableHeader` accept typography and alignment classes and
@@ -356,6 +469,10 @@ a 1px inset `primary` ring, so the chosen row never turns plain grey.
 `PopoverContent`, `SheetContent`, `DropdownMenuContent` and `Modal` accept
 `p-0` for edge-to-edge content (MoveToFolderModal's banded folder picker);
 Modal merges it after its own `p-8`, so no `!` is needed. Everything else on these components is layout only.
+`MessageScrollerViewport` and `MessageScrollerContent` accept layout and
+spacing: the primitive measures Content's padding-block for its scroll and
+spacer math, and the Viewport's top gap must scroll with the messages, so
+padding there cannot move to a margin or a wrapper.
 
 ## Spacing, type and radii
 
@@ -372,10 +489,21 @@ or add a token.
   `focus-visible:border-ring` on fields. Never `focus:` (mouse users see it)
   and never `ring-2` or `ring-[3px]`; the `ui/` components already carry it,
   so plain elements should become components rather than copy the classes.
+  Inside `ui/`, spell it with the `focusRing` constant from `lib/utils.ts`
+  (with `invalidState` and `fieldFrame` for fields) rather than retyping it.
+- **Close buttons** on Modal, Sheet and DialogContent are a `ghost-muted`
+  `size="icon-sm"` Button (32px, accent square on hover) at `top-2 right-2`.
+- **Disabled**: buttons (Button, Accordion, Tabs) use
+  `disabled:pointer-events-none disabled:opacity-50`, so the pointer passes
+  through. Fields (Input, SelectTrigger, Switch, Textarea, CommandInput,
+  Label) use `disabled:cursor-not-allowed disabled:opacity-50` and never
+  `pointer-events-none`, which would hide the cursor.
 - **Elevation**: cards have no shadow; fields and outline buttons
   `shadow-xs`; popovers, menus and select lists `shadow-md`; sheets
-  `shadow-lg`; modals `shadow-modal`; toasts `shadow-toast`. Nothing else
-  uses a shadow class.
+  `shadow-lg`; modals (Modal and DialogContent) `shadow-modal`; toasts
+  `shadow-toast`. The one exception is the Switch thumb, `shadow-lg`: a white
+  knob on a white card needs the lift to read as raised. Nothing else uses
+  a shadow class; accordions are panels and have none.
 - **Stacking**: `z-10` sticky headers and table heads inside a page;
   `z-20` in-page floating chrome (banners, scroll-to-bottom, drag
   handles); `z-50` everything portalled (overlay, modal, sheet, popover,
@@ -397,22 +525,18 @@ Places where a rule is knowingly disabled. Each one carries the same reason
 as a comment at the call site; add a row here when you add a disable so the
 list stays reviewable.
 
-| Where                         | Rule                            | Why                                                                                                                                                                                                                                                  |
-| ----------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `components/Notification.tsx` | `shadcn/no-restyle`             | The promo banner's close control is a bare 16px image on the purple gradient: no `size` fits it, and `ghost`'s accent hover fill would paint a grey square on the gradient.                                                                          |
-| `components/ui/calendar.tsx`  | `shadcn/require-static-classes` | The day button merges `defaultClassNames.day`, which react-day-picker returns from `getDefaultClassNames()` at runtime; no static form exists.                                                                                                       |
-| `navigation/SidebarLevel.tsx` | `shadcn/no-arbitrary-values`    | The incoming sidebar panel casts a strong shadow off its left edge while it slides (`shadow-[-12px_0_24px_-6px_rgba(0,0,0,0.45)]`); no scale shadow is horizontal, and the container clips it once the panel comes to rest.                          |
-| `components/ui/modal.tsx`     | `shadcn/no-arbitrary-values`    | The mobile sheet's `pb-[max(env(safe-area-inset-bottom),1rem)]` keeps its footer clear of the iPhone home indicator (about 34px, since `index.html` sets `viewport-fit=cover`) and equals `pb-4` everywhere else; no scale step can express `env()`. |
-| `components/MessageInput.tsx` | `shadcn/no-restyle` | The empty composer's send button is a grey circle (`bg-muted`, `dark:bg-accent`), not a faded brand one; no variant is neutral while disabled, and `secondary` is the brand-tinted pressed state. |
-| `Hero.tsx` | `shadcn/no-restyle` | The landing page's model picker keeps its hero look: a borderless muted pill at 16px (`rounded-4xl px-6 py-4 text-base`) whose menu hangs from it as one shape. Three disables: `SelectTrigger`, `SelectContent`, `SelectItem`. |
-| `agents/AgentsList.tsx`        | `shadcn/no-restyle`  | Inside a folder, the breadcrumb trail replaces the section `<h2>`, so its `BreadcrumbList` keeps heading typography (`text-foreground text-lg font-semibold gap-2`). It's the only breadcrumb that does. |
-| `settings/Prompts.tsx` | `shadcn/no-restyle` | The row icon buttons (edit, duplicate, share, delete) sit in a cmdk row that is already `bg-accent` while highlighted, so ghost's accent hover would be invisible; they keep a `foreground/15` (delete: `destructive/15`) hover tint. Four disables. |
-| `Navigation.tsx` | `shadcn/no-restyle` | The agent pin is a bare 16px image on a sidebar row that already fills on hover; an accent fill would be invisible on it, so hover dims the icon (`hover:opacity-75`) instead. |
-| `conversation/MarkdownAnswer.tsx`, `components/ArtifactSidebar.tsx` | `shadcn/no-inline-styles` | SyntaxHighlighter's `style` prop is its Prism theme object (`oneLight` / `vscDarkPlus`), picked by theme at runtime. It is not CSS, so no class or custom property can replace it. One disable per file. |
-| `components/MultiSelectPopover.tsx` | `shadcn/no-restyle`, `shadcn/no-arbitrary-values` | The phone bottom sheet (`SheetContent side="bottom"`) keeps its sheet shape: a rounded top, no gap, a card fill in dark so it matches the `Command` inside it, and `pb-[env(safe-area-inset-bottom)]` to clear the iPhone home indicator (the same inset as `ui/modal.tsx`). One disable. |
-| `agents/workflow/WorkflowPreview.tsx` | `shadcn/no-restyle` | The Preview minimap's node rows are status tiles: the fill, border and ring follow the step (success, primary running + pulse, destructive, muted pending; a ring on the active row) and stay pinned on hover, pending and running rows stay unfaded while disabled, and clickable rows dim to 80% on hover. No Button variant is status-tinted. The rule reports each string inside `cn(...)`, so it's a `/* eslint-disable */` … `/* eslint-enable */` pair around the `className` attribute. |
-| `components/MermaidRenderer.tsx` | `shadcn/no-restyle` | The zoom − / + buttons sit on the diagram's `bg-black/70` overlay, where ghost's accent hover paints a light square with dark text; they hover to `white/20` with white text instead (`dark:hover:bg-white/20` too, to beat ghost's dark hover). Two disables. |
-| `conversation/ConversationMessages.tsx`, `agents/workflow/WorkflowPreview.tsx` | `shadcn/no-restyle` | MessageScroller padding. The primitive measures `MessageScrollerContent`'s padding-block for its scroll and spacer math, and the Viewport's top gap must scroll with the messages, so neither can move to a margin or a wrapper. The two callers use different values. Five disables. |
+| Where                                                               | Rule                            | Why                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ------------------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `components/Notification.tsx`                                       | `shadcn/no-restyle`             | The promo banner's close X (`ghost icon-xs`) sits on the purple gradient. Any fill would be a grey square on it, so hover dims the icon instead (`hover:bg-transparent hover:opacity-70`, plus `dark:hover:bg-transparent` to beat ghost's dark hover), and `text-primary-foreground` keeps it white, because the button inherits the page colour. One user, so it isn't a variant.                                                                                                             |
+| `components/ui/calendar.tsx`                                        | `shadcn/require-static-classes` | The day button merges `defaultClassNames.day`, which react-day-picker returns from `getDefaultClassNames()` at runtime; no static form exists.                                                                                                                                                                                                                                                                                                                                                  |
+| `navigation/SidebarLevel.tsx`                                       | `shadcn/no-arbitrary-values`    | The incoming sidebar panel casts a strong shadow off its left edge while it slides (`shadow-[-12px_0_24px_-6px_rgba(0,0,0,0.45)]`); no scale shadow is horizontal, and the container clips it once the panel comes to rest.                                                                                                                                                                                                                                                                     |
+| `components/MessageInput.tsx`                                       | `shadcn/no-restyle`             | The empty composer's send button is a grey circle (`bg-muted`, `dark:bg-accent`), not a faded brand one; no variant is neutral while disabled, and `secondary` is the brand-tinted pressed state.                                                                                                                                                                                                                                                                                               |
+| `Hero.tsx`                                                          | `shadcn/no-restyle`             | The landing page's model picker keeps its hero look: a borderless muted pill at 16px (`rounded-4xl px-6 py-4 text-base`) whose menu hangs from it as one shape. Three disables: `SelectTrigger`, `SelectContent`, `SelectItem`.                                                                                                                                                                                                                                                                 |
+| `agents/AgentsList.tsx`                                             | `shadcn/no-restyle`             | Inside a folder, the breadcrumb trail replaces the section `<h2>`, so its `BreadcrumbList` keeps heading typography (`text-foreground text-lg font-semibold gap-2`). It's the only breadcrumb that does.                                                                                                                                                                                                                                                                                        |
+| `conversation/MarkdownAnswer.tsx`, `components/ArtifactSidebar.tsx` | `shadcn/no-inline-styles`       | SyntaxHighlighter's `style` prop is its Prism theme object (`oneLight` / `vscDarkPlus`), picked by theme at runtime. It is not CSS, so no class or custom property can replace it. One disable per file.                                                                                                                                                                                                                                                                                        |
+| `agents/workflow/WorkflowPreview.tsx`                               | `shadcn/no-restyle`             | The Preview minimap's node rows are status tiles: the fill, border and ring follow the step (success, primary running + pulse, destructive, muted pending; a ring on the active row) and stay pinned on hover, pending and running rows stay unfaded while disabled, and clickable rows dim to 80% on hover. No Button variant is status-tinted. The rule reports each string inside `cn(...)`, so it's a `/* eslint-disable */` … `/* eslint-enable */` pair around the `className` attribute. |
+| `agents/schedules/ScheduleFormModal.tsx`                            | `shadcn/no-restyle`             | The schedule's name is the dialog's editable title: a `bare` Input with title type (`text-xl font-semibold`), so the dialog passes `hideTitle`. One disable.                                                                                                                                                                                                                                                                                                                                    |
+| `components/MermaidRenderer.tsx`                                    | `shadcn/no-restyle`             | The zoom − / + buttons sit on the diagram's `bg-black/70` overlay, where ghost's accent hover paints a light square with dark text; they hover to `white/20` with white text instead (`dark:hover:bg-white/20` too, to beat ghost's dark hover). Two disables.                                                                                                                                                                                                                                  |
 
 Note that a multi-line reason has to be a `/* ... */` block comment;
 consecutive `//` lines only disable the next comment line, not the code.
@@ -481,11 +605,12 @@ Known traps:
   files unrelated to design; `npm run lint-fix` clears them.
 - Port 5173 may be held by another checkout; check the Vite banner shows
   this repo's path before trusting what you see.
-- `components/Spinner.tsx` and `components/StatusBadge.tsx` are transitional
-  wrappers; migrate their callers to `ui/spinner` and `ui/badge`, then
-  delete them. `components/SkeletonLoader.tsx` and
-  `components/FileUpload.tsx` keep their logic but should render `Skeleton`
-  and `Dropzone`.
+- `components/SkeletonLoader.tsx` renders `Skeleton` in its table, logs,
+  default and files layouts. Its analysis, dropdown, chunk-card and
+  connected-state layouts, and the four tile mirrors, pulse their own
+  surface, so they wait for the Card work. `components/FileUpload.tsx`
+  keeps its logic but should render `Dropzone`. (`agents/schedules/StatusBadge.tsx`
+  is a status→variant map over `Badge`, not a wrapper; keep it.)
 
 ## Working with the lint
 
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index 511c0b8c..f82da236 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -183,6 +183,13 @@ export default [
               pattern: '^(ToastContent|ToastItem|ToastFooter)$',
               allow: ['layout', 'spacing'],
             },
+            {
+              // The primitive measures Content's padding-block for its scroll
+              // math, and the Viewport's top gap must scroll with the
+              // messages, so padding here is part of the layout.
+              pattern: '^MessageScroller(Viewport|Content)$',
+              allow: ['layout', 'spacing'],
+            },
             {
               pattern: '^OptionCard$',
               allow: ['layout'],
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 84af38d5..53240c38 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,7 +17,7 @@ import DocsGPTMarkWhite from './assets/logo-w.svg';
 import ActionButtons from './components/ActionButtons';
 import AdminRoute from './components/AdminRoute';
 import ErrorBoundary from './components/ErrorBoundary';
-import Spinner from './components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import { Button } from './components/ui/button';
 import { ToastViewport } from './components/ui/toast';
 import UploadToast from './components/UploadToast';
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 0014d8cf..958d06dd 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -7,6 +7,8 @@ import {
   Menu,
   PanelLeftClose,
   PanelLeftOpen,
+  Pin,
+  PinOff,
   Plus,
   Search as SearchIcon,
   Settings as SettingsIcon,
@@ -22,12 +24,10 @@ import conversationService from './api/services/conversationService';
 import userService from './api/services/userService';
 import Discord from './assets/discord.svg';
 import Github from './assets/git_nav.svg';
-import Pin from './assets/pin.svg';
 import { Avatar } from './components/ui/avatar';
 import { Button } from './components/ui/button';
-import Spinner from './components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import Twitter from './assets/TwitterX.svg';
-import UnPin from './assets/unpin.svg';
 import Help from './components/Help';
 import {
   handleAbort,
@@ -405,7 +405,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             onClick={() => setNavOpen(true)}
             aria-label="Open navigation menu"
           >
-            <PanelLeftOpen className="size-5" strokeWidth={1.75} />
+            <PanelLeftOpen className="size-5" />
           </Button>
           {activeSection ? (
             <SectionRail
@@ -425,7 +425,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   onClick={() => newChat()}
                   aria-label="Start new chat"
                 >
-                  <Plus className="size-5" strokeWidth={1.75} />
+                  <Plus className="size-5" />
                 </Button>
               )}
               <Button
@@ -438,7 +438,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 }}
                 aria-label={t('manageAgents')}
               >
-                <LayoutGrid className="size-5" strokeWidth={1.75} />
+                <LayoutGrid className="size-5" />
               </Button>
               {conversations?.data && conversations.data.length > 0 && (
                 <Button
@@ -449,7 +449,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   aria-label={t('modals.searchConversations.searchPlaceholder')}
                   title={t('modals.searchConversations.searchPlaceholder')}
                 >
-                  <SearchIcon className="size-5" strokeWidth={1.75} />
+                  <SearchIcon className="size-5" />
                 </Button>
               )}
               <div className="mt-auto flex flex-col items-center gap-2">
@@ -460,7 +460,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   onClick={() => goToLevel('/settings')}
                   aria-label={t('settings.label')}
                 >
-                  <SettingsIcon className="size-5" strokeWidth={1.75} />
+                  <SettingsIcon className="size-5" />
                 </Button>
               </div>
             </>
@@ -498,15 +498,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             aria-label={navOpen ? 'Collapse sidebar' : 'Expand sidebar'}
           >
             {navOpen ? (
-              <PanelLeftClose
-                className="size-5 transition-all duration-300 ease-in-out hover:scale-110"
-                strokeWidth={1.75}
-              />
+              <PanelLeftClose className="size-5 transition-all duration-300 ease-in-out hover:scale-110" />
             ) : (
-              <PanelLeftOpen
-                className="size-5 transition-all duration-300 ease-in-out hover:scale-110"
-                strokeWidth={1.75}
-              />
+              <PanelLeftOpen className="size-5 transition-all duration-300 ease-in-out hover:scale-110" />
             )}
           </Button>
         </div>
@@ -531,7 +525,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             >
               <Plus
                 className="text-muted-foreground group-hover:text-foreground size-5 shrink-0"
-                strokeWidth={1.75}
                 aria-label="Create new chat"
               />
               <p className="text-muted-foreground group-hover:text-foreground text-sm">
@@ -548,7 +541,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   role="status"
                   aria-label="Loading conversations"
                 >
-                  <Spinner size="small" />
+                  <Spinner size="sm" />
                 </div>
               )}
               {recentAgents?.length > 0 ? (
@@ -585,14 +578,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                             </p>
                           </div>
                           <div
-                            className={`${isMobile || isTablet ? 'flex' : 'invisible flex group-hover:visible'} items-center px-3`}
+                            className={`${isMobile || isTablet ? 'flex' : 'invisible flex group-hover:visible'} items-center px-1.5`}
                           >
                             <Button
                               type="button"
-                              variant="ghost"
-                              size="icon-sm"
-                              /* eslint-disable-next-line shadcn/no-restyle -- the pin is a bare 16px image on a sidebar row that already fills on hover; an accent fill would be invisible on it, so hover dims the icon instead */
-                              className="h-auto w-auto rounded-full p-0 hover:bg-transparent hover:opacity-75"
+                              variant="ghost-on-accent"
+                              size="icon-xs"
                               onClick={(e) => {
                                 e.stopPropagation();
                                 handleTogglePin(agent);
@@ -601,10 +592,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                                 agent.pinned ? 'Unpin agent' : 'Pin agent'
                               }
                             >
-                              <img
-                                src={agent.pinned ? UnPin : Pin}
-                                className="h-4 w-4"
-                              ></img>
+                              {agent.pinned ? <PinOff /> : <Pin />}
                             </Button>
                           </div>
                         </div>
@@ -630,7 +618,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                         <div className="flex w-6 justify-center">
                           <LayoutGrid
                             className="text-muted-foreground size-5"
-                            strokeWidth={1.75}
                             aria-label="manage-agents"
                           />
                         </div>
@@ -661,7 +648,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   >
                     <LayoutGrid
                       className="text-muted-foreground size-5 shrink-0"
-                      strokeWidth={1.75}
                       aria-label="manage-agents"
                     />
                     <p className="text-foreground overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
@@ -688,11 +674,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                       )}
                       title={t('modals.searchConversations.searchPlaceholder')}
                     >
-                      <SearchIcon
-                        className="size-5"
-                        strokeWidth={1.75}
-                        aria-label="search"
-                      />
+                      <SearchIcon className="size-5" aria-label="search" />
                     </Button>
                   </div>
                   <div>
@@ -781,7 +763,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               >
                 <SettingsIcon
                   className="text-muted-foreground size-5 shrink-0"
-                  strokeWidth={1.75}
                   aria-label="Settings"
                 />
                 <p className="text-foreground text-sm dark:text-white">
@@ -849,7 +830,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             onClick={() => setNavOpen(true)}
             aria-label="Toggle mobile menu"
           >
-            <Menu className="size-5" strokeWidth={1.75} />
+            <Menu className="size-5" />
           </Button>
         </div>
       </div>
diff --git a/frontend/src/admin/AdminUI.tsx b/frontend/src/admin/AdminUI.tsx
index 8f5cd650..53780137 100644
--- a/frontend/src/admin/AdminUI.tsx
+++ b/frontend/src/admin/AdminUI.tsx
@@ -1,6 +1,6 @@
 import type { VariantProps } from 'class-variance-authority';
 
-import Spinner from '../components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import type { badgeVariants } from '../components/ui/badge';
 import { formatDateOnly, formatDateTime } from '../utils/dateTimeUtils';
 
@@ -30,9 +30,9 @@ export function StatCard({
   sub?: string;
 }) {
   return (
-    <div className="border-border dark:border-border rounded-2xl border px-6 py-5">
+    <div className="border-border rounded-2xl border px-6 py-5">
       <p className="text-muted-foreground text-sm">{label}</p>
-      <p className="text-foreground dark:text-foreground mt-1 text-2xl font-bold tabular-nums">
+      <p className="text-foreground mt-1 text-2xl font-bold tabular-nums">
         {value}
       </p>
       {sub ? <p className="text-muted-foreground mt-1 text-xs">{sub}</p> : null}
diff --git a/frontend/src/admin/Usage.tsx b/frontend/src/admin/Usage.tsx
index dbaf9c39..df3406eb 100644
--- a/frontend/src/admin/Usage.tsx
+++ b/frontend/src/admin/Usage.tsx
@@ -176,9 +176,9 @@ export default function Usage() {
         />
       </div>
 
-      <div className="border-border dark:border-border mt-4 h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5">
+      <div className="border-border mt-4 h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5">
         <div className="flex flex-row items-center justify-between gap-3">
-          <p className="text-foreground dark:text-foreground font-bold">
+          <p className="text-foreground font-bold">
             {metric === 'cost' ? 'Spend' : 'Token usage'}
           </p>
           <div
@@ -203,10 +203,8 @@ export default function Usage() {
         </div>
       </div>
 
-      <div className="border-border dark:border-border mt-4 w-full overflow-hidden rounded-2xl border px-6 py-5">
-        <p className="text-foreground dark:text-foreground mb-3 font-bold">
-          Top users
-        </p>
+      <div className="border-border mt-4 w-full overflow-hidden rounded-2xl border px-6 py-5">
+        <p className="text-foreground mb-3 font-bold">Top users</p>
         {topUsers.length === 0 ? (
           <p className="text-muted-foreground text-sm">No usage.</p>
         ) : (
diff --git a/frontend/src/admin/Users.tsx b/frontend/src/admin/Users.tsx
index dda2fd60..eedc557a 100644
--- a/frontend/src/admin/Users.tsx
+++ b/frontend/src/admin/Users.tsx
@@ -1,4 +1,5 @@
 import {
+  ChevronDown,
   Eye,
   Gauge,
   LogOut,
@@ -11,14 +12,15 @@ import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import adminService from '../api/services/adminService';
-import ThreeDots from '../assets/three-dots.svg';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import {
+  ActionMenu,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  type MenuOption,
 } from '../components/ui/dropdown-menu';
 import { Input } from '../components/ui/input';
 import { Modal } from '../components/ui/modal';
@@ -337,56 +339,31 @@ export default function Users() {
                           className="flex items-center justify-end"
                           onClick={(e) => e.stopPropagation()}
                         >
-                          <DropdownMenu
+                          <ActionMenu
                             open={menuUserId === u.user_id}
                             onOpenChange={(open) =>
                               setMenuUserId(open ? u.user_id : null)
                             }
-                          >
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                type="button"
-                                variant="ghost-muted"
-                                size="icon"
-                                disabled={disabled}
-                                className="h-[35px] w-7"
-                                aria-label="User actions"
-                              >
-                                <img
-                                  src={ThreeDots}
-                                  alt="User actions"
-                                  className="filter dark:invert"
-                                />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent
-                              align="end"
-                              className="min-w-[176px]"
-                            >
-                              <DropdownMenuItem
-                                onSelect={() => openDetail(u.user_id)}
-                              >
-                                <Eye size={16} />
-                                <span>View details</span>
-                              </DropdownMenuItem>
-                              {buildActions(u.user_id, isAdmin, u.active).map(
-                                (act) => (
-                                  <DropdownMenuItem
-                                    key={act.key}
-                                    variant={
-                                      act.destructive
-                                        ? 'destructive'
-                                        : 'default'
-                                    }
-                                    onSelect={act.perform}
-                                  >
-                                    <act.icon size={16} />
-                                    <span>{act.label}</span>
-                                  </DropdownMenuItem>
-                                ),
-                              )}
-                            </DropdownMenuContent>
-                          </DropdownMenu>
+                            disabled={disabled}
+                            triggerLabel="User actions"
+                            options={[
+                              {
+                                label: 'View details',
+                                icon: Eye,
+                                onClick: () => openDetail(u.user_id),
+                              },
+                              ...buildActions(u.user_id, isAdmin, u.active).map(
+                                (act): MenuOption => ({
+                                  label: act.label,
+                                  icon: act.icon,
+                                  variant: act.destructive
+                                    ? 'destructive'
+                                    : 'default',
+                                  onClick: act.perform,
+                                }),
+                              ),
+                            ]}
+                          />
                         </div>
                       </TableCell>
                     </TableRow>
@@ -450,29 +427,35 @@ export default function Users() {
         size="lg"
         footer={
           detail ? (
-            <div className="flex flex-wrap justify-end gap-2">
-              {buildActions(
-                detail.user.user_id,
-                (detail.roles ?? []).includes('admin'),
-                detail.user?.active ?? true,
-              ).map((act) => (
-                <Button
-                  key={act.key}
-                  type="button"
-                  variant={act.destructive ? 'destructive-outline' : 'outline'}
-                  size="sm"
-                  onClick={() => {
-                    // Close the detail dialog before any confirm dialog opens
-                    // (avoids stacked modals); the list + toast reflect the result.
-                    setDetail(null);
-                    act.perform();
-                  }}
-                >
-                  <act.icon size={16} />
-                  {act.label}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button type="button" variant="outline" size="lg" shape="pill">
+                  Actions
+                  <ChevronDown />
                 </Button>
-              ))}
-            </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {buildActions(
+                  detail.user.user_id,
+                  (detail.roles ?? []).includes('admin'),
+                  detail.user?.active ?? true,
+                ).map((act) => (
+                  <DropdownMenuItem
+                    key={act.key}
+                    variant={act.destructive ? 'destructive' : 'default'}
+                    onSelect={() => {
+                      // Close the detail dialog before any confirm dialog opens
+                      // (avoids stacked modals); the list + toast reflect the result.
+                      setDetail(null);
+                      act.perform();
+                    }}
+                  >
+                    <act.icon aria-hidden="true" />
+                    <span>{act.label}</span>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
           ) : undefined
         }
       >
diff --git a/frontend/src/agents/AgentCard.tsx b/frontend/src/agents/AgentCard.tsx
index a8849c73..8ac30157 100644
--- a/frontend/src/agents/AgentCard.tsx
+++ b/frontend/src/agents/AgentCard.tsx
@@ -1,45 +1,31 @@
-import { SyntheticEvent, useState } from 'react';
+import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Users } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
+import {
+  Activity,
+  Copy,
+  Download,
+  ExternalLink,
+  Folder,
+  Pencil,
+  Pin,
+  PinOff,
+  Trash2,
+  Users,
+} from 'lucide-react';
 
 import userService from '../api/services/userService';
-import Download from '../assets/download.svg';
-import Duplicate from '../assets/duplicate.svg';
-import Edit from '../assets/edit.svg';
-import FolderIcon from '../assets/folder.svg';
-import Link from '../assets/link-gray.svg';
-import Monitoring from '../assets/monitoring.svg';
-import Pin from '../assets/pin.svg';
-import Trash from '../assets/red-trash.svg';
-import ThreeDots from '../assets/three-dots.svg';
-import UnPin from '../assets/unpin.svg';
 import { Avatar } from '../components/ui/avatar';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
 import { Modal } from '../components/ui/modal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import MoveToFolderModal from '../modals/MoveToFolderModal';
 import { ActiveState } from '../models/misc';
 import { useSidebarLevel } from '../navigation/SidebarLevelProvider';
 import ShareToTeamModal from '../teams/ShareToTeamModal';
-
-type AgentMenuOption = {
-  icon: string | LucideIcon;
-  label: string;
-  onClick: (event: SyntheticEvent) => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-};
 import {
   selectAgents,
   selectToken,
@@ -83,57 +69,43 @@ export default function AgentCard({
   const [shareModalOpen, setShareModalOpen] = useState(false);
   const [exportError, setExportError] = useState<string | null>(null);
 
-  const menuOptionsConfig: Record<string, AgentMenuOption[]> = {
+  const openEditor = () => {
+    if (agent.agent_type === 'workflow') {
+      goToLevel(agentEditPath(agent.id, true));
+    } else {
+      goToLevel(agentEditPath(agent.id));
+    }
+  };
+
+  const pinOption: MenuOption = {
+    icon: agent.pinned ? PinOff : Pin,
+    label: agent.pinned ? t('agents.card.unpin') : t('agents.card.pin'),
+    onClick: () => togglePin(),
+  };
+
+  const menuOptionsConfig: Record<string, MenuOption[]> = {
     template: [
       {
-        icon: Duplicate,
+        icon: Copy,
         label: t('modals.prompts.duplicate'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          handleDuplicate();
-        },
-        variant: 'default',
-        iconWidth: 18,
-        iconHeight: 18,
+        onClick: () => handleDuplicate(),
       },
     ],
     user: [
       {
-        icon: Monitoring,
+        icon: Activity,
         label: t('agents.form.buttons.logs'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          goToLevel(agentLogsPath(agent.id));
-        },
-        variant: 'default',
-        iconWidth: 14,
-        iconHeight: 14,
+        onClick: () => goToLevel(agentLogsPath(agent.id)),
       },
       {
-        icon: Edit,
+        icon: Pencil,
         label: t('agents.edit'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          if (agent.agent_type === 'workflow') {
-            goToLevel(agentEditPath(agent.id, true));
-          } else {
-            goToLevel(agentEditPath(agent.id));
-          }
-        },
-        variant: 'default',
-        iconWidth: 14,
-        iconHeight: 14,
+        onClick: openEditor,
       },
       {
         icon: Download,
         label: t('agents.exportAgent'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          handleExport();
-        },
-        variant: 'default',
-        iconWidth: 14,
-        iconHeight: 14,
+        onClick: () => handleExport(),
       },
       // Sharing is an owner-only action: only show it for agents the user
       // owns ('user'), not agents shared into their workspace by a team.
@@ -142,54 +114,21 @@ export default function AgentCard({
             {
               icon: Users,
               label: t('agents.shareWithTeam'),
-              onClick: (e: SyntheticEvent) => {
-                e.stopPropagation();
-                setShareModalOpen(true);
-              },
-              variant: 'default' as const,
-              iconWidth: 14,
-              iconHeight: 14,
-            },
-          ]
-        : []),
-      ...(agent.status === 'published'
-        ? [
-            {
-              icon: agent.pinned ? UnPin : Pin,
-              label: agent.pinned
-                ? t('agents.card.unpin')
-                : t('agents.card.pin'),
-              onClick: (e: SyntheticEvent) => {
-                e.stopPropagation();
-                togglePin();
-              },
-              variant: 'default' as const,
-              iconWidth: 18,
-              iconHeight: 18,
+              onClick: () => setShareModalOpen(true),
             },
           ]
         : []),
+      ...(agent.status === 'published' ? [pinOption] : []),
       {
-        icon: FolderIcon,
+        icon: Folder,
         label: t('agents.folders.moveToFolder'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          setMoveModalState('ACTIVE');
-        },
-        variant: 'default',
-        iconWidth: 16,
-        iconHeight: 15,
+        onClick: () => setMoveModalState('ACTIVE'),
       },
       {
-        icon: Trash,
+        icon: Trash2,
         label: t('agents.form.buttons.delete'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          setDeleteConfirmation('ACTIVE');
-        },
+        onClick: () => setDeleteConfirmation('ACTIVE'),
         variant: 'destructive',
-        iconWidth: 13,
-        iconHeight: 13,
       },
     ],
     // Agents shared with the user via a team. They don't own it, so only
@@ -198,71 +137,24 @@ export default function AgentCard({
     // Logs / Export / Share / Move-to-folder / Delete stay owner-only.
     team: [
       {
-        icon: Edit,
+        icon: Pencil,
         label: t('agents.edit'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          if (agent.agent_type === 'workflow') {
-            goToLevel(agentEditPath(agent.id, true));
-          } else {
-            goToLevel(agentEditPath(agent.id));
-          }
-        },
-        variant: 'default',
-        iconWidth: 14,
-        iconHeight: 14,
+        onClick: openEditor,
       },
-      ...(agent.status === 'published'
-        ? [
-            {
-              icon: agent.pinned ? UnPin : Pin,
-              label: agent.pinned
-                ? t('agents.card.unpin')
-                : t('agents.card.pin'),
-              onClick: (e: SyntheticEvent) => {
-                e.stopPropagation();
-                togglePin();
-              },
-              variant: 'default' as const,
-              iconWidth: 18,
-              iconHeight: 18,
-            },
-          ]
-        : []),
+      ...(agent.status === 'published' ? [pinOption] : []),
     ],
     shared: [
       {
-        icon: Link,
+        icon: ExternalLink,
         label: t('agents.card.open'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          navigate(sharedAgentPath(agent.shared_token));
-        },
-        variant: 'default',
-        iconWidth: 12,
-        iconHeight: 12,
+        onClick: () => navigate(sharedAgentPath(agent.shared_token)),
       },
+      pinOption,
       {
-        icon: agent.pinned ? UnPin : Pin,
-        label: agent.pinned ? t('agents.card.unpin') : t('agents.card.pin'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          togglePin();
-        },
-        variant: 'default',
-        iconWidth: 18,
-        iconHeight: 18,
-      },
-      {
-        icon: Trash,
+        icon: Trash2,
         label: t('agents.card.remove'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          handleHideSharedAgent();
-        },
+        onClick: () => handleHideSharedAgent(),
         variant: 'destructive',
-        iconWidth: 13,
-        iconHeight: 13,
       },
     ],
   };
@@ -404,58 +296,17 @@ export default function AgentCard({
         }
       }}
     >
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button
-            type="button"
-            onClick={(e) => e.stopPropagation()}
-            className="absolute top-4 right-4 z-10 cursor-pointer"
-            aria-label="agent-actions"
-          >
-            <img
-              src={ThreeDots}
-              alt={'use-agent'}
-              className="h-[19px] w-[19px]"
-            />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="min-w-[144px]">
-          {menuOptions.map((option, index) => (
-            <DropdownMenuItem
-              key={index}
-              variant={option.variant}
-              onClick={(e) => e.stopPropagation()}
-              onSelect={(event) => {
-                option.onClick(event as unknown as SyntheticEvent);
-              }}
-            >
-              {typeof option.icon === 'string' ? (
-                <img
-                  src={option.icon}
-                  alt=""
-                  width={option.iconWidth ?? 16}
-                  height={option.iconHeight ?? 16}
-                />
-              ) : (
-                <option.icon
-                  size={Math.max(
-                    option.iconWidth ?? 16,
-                    option.iconHeight ?? 16,
-                  )}
-                  strokeWidth={1.75}
-                  aria-hidden="true"
-                />
-              )}
-              <span>{option.label}</span>
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <ActionMenu
+        options={menuOptions}
+        triggerLabel={t('agents.card.actions')}
+        align="end"
+        className="absolute top-3 right-3 z-10"
+      />
       {/* Team access badge — pinned to the top row, left of the ⋯ menu
-          (right-11 clears the 19px trigger at right-4) so the two align. */}
+          (right-11 clears the 28px trigger at right-3) so the two align. */}
       {agent.ownership === 'team' && (
         <Badge variant="neutral" className="absolute top-4 right-11 z-10">
-          <Users size={11} strokeWidth={2} aria-hidden="true" />
+          <Users size={11} aria-hidden="true" />
           {agent.team_access === 'editor'
             ? t('agents.teamBadge.editor')
             : t('agents.teamBadge.viewer')}
@@ -511,6 +362,7 @@ export default function AgentCard({
           <Button
             type="button"
             onClick={() => setExportError(null)}
+            size="lg"
             shape="pill"
           >
             {t('agents.close')}
diff --git a/frontend/src/agents/AgentsList.tsx b/frontend/src/agents/AgentsList.tsx
index fd3c5265..2bd22da3 100644
--- a/frontend/src/agents/AgentsList.tsx
+++ b/frontend/src/agents/AgentsList.tsx
@@ -191,12 +191,7 @@ export default function AgentsList() {
               label={t('agents.searchPlaceholder')}
               labelSurface="background"
               shape="pill"
-              leftIcon={
-                <Search
-                  className="text-muted-foreground size-4"
-                  strokeWidth={1.75}
-                />
-              }
+              leftIcon={<Search className="text-muted-foreground size-4" />}
             />
           </div>
         </div>
diff --git a/frontend/src/agents/FolderCard.tsx b/frontend/src/agents/FolderCard.tsx
index 5476d7d9..76b97849 100644
--- a/frontend/src/agents/FolderCard.tsx
+++ b/frontend/src/agents/FolderCard.tsx
@@ -1,29 +1,13 @@
-import { SyntheticEvent, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Pencil, Trash2 } from 'lucide-react';
 
-import Edit from '../assets/edit.svg';
-import Trash from '../assets/red-trash.svg';
-import ThreeDots from '../assets/three-dots.svg';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import FolderNameModal from '../modals/FolderManagementModal';
 import { ActiveState } from '../models/misc';
 import { AgentFolder } from './types';
 
-type FolderMenuOption = {
-  icon: string;
-  label: string;
-  onClick: (event: SyntheticEvent) => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-};
-
 type FolderCardProps = {
   folder: AgentFolder;
   agentCount: number;
@@ -47,28 +31,17 @@ export default function FolderCard({
   const [renameModalState, setRenameModalState] =
     useState<ActiveState>('INACTIVE');
 
-  const menuOptions: FolderMenuOption[] = [
+  const menuOptions: MenuOption[] = [
     {
-      icon: Edit,
+      icon: Pencil,
       label: t('agents.folders.rename'),
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        setRenameModalState('ACTIVE');
-      },
-      variant: 'default',
-      iconWidth: 14,
-      iconHeight: 14,
+      onClick: () => setRenameModalState('ACTIVE'),
     },
     {
-      icon: Trash,
+      icon: Trash2,
       label: t('agents.folders.delete'),
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        setDeleteConfirmation('ACTIVE');
-      },
+      onClick: () => setDeleteConfirmation('ACTIVE'),
       variant: 'destructive',
-      iconWidth: 13,
-      iconHeight: 13,
     },
   ];
 
@@ -101,42 +74,15 @@ export default function FolderCard({
             ({agentCount})
           </span>
         </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              onClick={(e) => e.stopPropagation()}
-              onKeyDown={(e) => e.stopPropagation()}
-              className="ml-2 shrink-0 cursor-pointer"
-              aria-label={t('agents.folders.menuAriaLabel', {
-                folderName: folder.name,
-                defaultValue: 'Folder actions',
-              })}
-            >
-              <img src={ThreeDots} alt="" className="h-4 w-4" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="min-w-[144px]">
-            {menuOptions.map((option, index) => (
-              <DropdownMenuItem
-                key={index}
-                variant={option.variant}
-                onClick={(e) => e.stopPropagation()}
-                onSelect={(event) => {
-                  option.onClick(event as unknown as SyntheticEvent);
-                }}
-              >
-                <img
-                  src={option.icon}
-                  alt=""
-                  width={option.iconWidth ?? 16}
-                  height={option.iconHeight ?? 16}
-                />
-                <span>{option.label}</span>
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <ActionMenu
+          options={menuOptions}
+          triggerLabel={t('agents.folders.menuAriaLabel', {
+            folderName: folder.name,
+            defaultValue: 'Folder actions',
+          })}
+          align="end"
+          className="ml-2 shrink-0"
+        />
       </div>
       <ConfirmationModal
         message={t('agents.folders.deleteConfirm')}
diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index 1a34ce58..2a41347a 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -3,12 +3,14 @@ import {
   ChevronRight,
   CircleCheck,
   CircleX,
+  Database,
   MoreHorizontal,
 } from 'lucide-react';
 import React, {
   useCallback,
   useEffect,
   useMemo,
+  useId,
   useRef,
   useState,
 } from 'react';
@@ -25,6 +27,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { FormField } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 
 import {
@@ -34,6 +37,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { SettingRow, SettingRows } from '@/components/ui/setting-row';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
@@ -43,14 +47,12 @@ import modelService from '../api/services/modelService';
 import userService from '../api/services/userService';
 import ScienceSparkDarkIcon from '../assets/science-spark-dark.svg';
 import ScienceSparkIcon from '../assets/science-spark.svg';
-import SourceIcon from '../assets/source.svg';
 import { FileUpload } from '../components/FileUpload';
 import {
   MultiSelectPopover,
   type MultiSelectPopoverItem,
 } from '../components/MultiSelectPopover';
 import SourcesPopoverFooter from '../components/SourcesPopoverFooter';
-import Spinner from '../components/Spinner';
 import ToolIcon from '../components/ToolIcon';
 import AgentDetailsModal from '../modals/AgentDetailsModal';
 import ShareToTeamModal from '../teams/ShareToTeamModal';
@@ -184,6 +186,9 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   const [submitError, setSubmitError] = useState<string | null>(null);
   const [jsonSchemaText, setJsonSchemaText] = useState('');
   const [jsonSchemaValid, setJsonSchemaValid] = useState(true);
+  const tokenLimitSwitchId = useId();
+  const requestLimitSwitchId = useId();
+  const promptOverrideSwitchId = useId();
   const [isAdvancedSectionExpanded, setIsAdvancedSectionExpanded] =
     useState(false);
 
@@ -268,7 +273,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
         own: t('agents.form.sourcePopup.groupOwn'),
         team: t('agents.form.sourcePopup.groupTeam'),
       },
-      SourceIcon,
+      <Database />,
     );
     // An attached source the caller can't list — an owner's private source on
     // a team-shared agent — still needs a row of its own, or it reads as
@@ -276,7 +281,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     const listed = new Set(items.map((item) => item.id));
     const unlisted = Array.from(selectedSourceIds)
       .filter((id) => !listed.has(id))
-      .map((id) => ({ id, label: resolveSourceLabel(id), icon: SourceIcon }));
+      .map((id) => ({ id, label: resolveSourceLabel(id), icon: <Database /> }));
     return [...items, ...unlisted];
   }, [resolveSourceLabel, selectedSourceIds, sourceDocs, t]);
 
@@ -827,32 +832,20 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               variant="outline-primary"
               shape="pill"
               disabled={isDraftBlocked()}
+              loading={draftLoading}
               onClick={handleSaveDraft}
-              className="min-w-28"
             >
-              <span className="flex items-center justify-center transition-all duration-200">
-                {draftLoading ? (
-                  <Spinner size="small" />
-                ) : (
-                  t('agents.form.buttons.saveDraft')
-                )}
-              </span>
+              {t('agents.form.buttons.saveDraft')}
             </Button>
           )}
           <Button
             type="button"
             disabled={!isPublishable() || !hasChanges}
+            loading={publishLoading}
             onClick={handlePublish}
             shape="pill"
-            className="min-w-28"
           >
-            <span className="flex items-center justify-center transition-all duration-200">
-              {publishLoading ? (
-                <Spinner size="small" />
-              ) : (
-                modeConfig[effectiveMode].buttonText
-              )}
-            </span>
+            {modeConfig[effectiveMode].buttonText}
           </Button>
           {modeConfig[effectiveMode].showAccessDetails && (
             <DropdownMenu>
@@ -1174,10 +1167,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                 }
               />
               {selectedModelIds.size > 0 && (
-                <div>
-                  <label className="mb-2 block text-sm font-medium">
-                    {t('agents.form.labels.defaultModel')}
-                  </label>
+                <FormField label={t('agents.form.labels.defaultModel')}>
                   <Select
                     value={agent.default_model_id || undefined}
                     onValueChange={(value) =>
@@ -1201,7 +1191,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         ))}
                     </SelectContent>
                   </Select>
-                </div>
+                </FormField>
               )}
             </div>
           </div>
@@ -1274,17 +1264,36 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   </div>
                 )}
 
-                <div className="mt-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h2 className="text-sm font-medium">
-                        {t('agents.form.advanced.tokenLimiting')}
-                      </h2>
-                      <p className="text-muted-foreground mt-1 text-xs">
-                        {t('agents.form.advanced.tokenLimitingDescription')}
-                      </p>
-                    </div>
+                <SettingRows className="mt-6">
+                  <SettingRow
+                    label={t('agents.form.advanced.tokenLimiting')}
+                    description={t(
+                      'agents.form.advanced.tokenLimitingDescription',
+                    )}
+                    htmlFor={tokenLimitSwitchId}
+                    after={
+                      <Input
+                        type="number"
+                        min="0"
+                        value={agent.token_limit || ''}
+                        onChange={(e) =>
+                          setAgent({
+                            ...agent,
+                            token_limit: e.target.value
+                              ? parseInt(e.target.value)
+                              : undefined,
+                          })
+                        }
+                        disabled={!agent.limited_token_mode}
+                        placeholder={t(
+                          'agents.form.placeholders.enterTokenLimit',
+                        )}
+                        shape="pill"
+                      />
+                    }
+                  >
                     <Switch
+                      id={tokenLimitSwitchId}
                       checked={agent.limited_token_mode}
                       onCheckedChange={(checked) => {
                         setAgent({
@@ -1296,37 +1305,36 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         });
                       }}
                     />
-                  </div>
-                  <Input
-                    type="number"
-                    min="0"
-                    value={agent.token_limit || ''}
-                    onChange={(e) =>
-                      setAgent({
-                        ...agent,
-                        token_limit: e.target.value
-                          ? parseInt(e.target.value)
-                          : undefined,
-                      })
+                  </SettingRow>
+                  <SettingRow
+                    label={t('agents.form.advanced.requestLimiting')}
+                    description={t(
+                      'agents.form.advanced.requestLimitingDescription',
+                    )}
+                    htmlFor={requestLimitSwitchId}
+                    after={
+                      <Input
+                        type="number"
+                        min="0"
+                        value={agent.request_limit || ''}
+                        onChange={(e) =>
+                          setAgent({
+                            ...agent,
+                            request_limit: e.target.value
+                              ? parseInt(e.target.value)
+                              : undefined,
+                          })
+                        }
+                        disabled={!agent.limited_request_mode}
+                        placeholder={t(
+                          'agents.form.placeholders.enterRequestLimit',
+                        )}
+                        shape="pill"
+                      />
                     }
-                    disabled={!agent.limited_token_mode}
-                    placeholder={t('agents.form.placeholders.enterTokenLimit')}
-                    shape="pill"
-                    className="mt-2"
-                  />
-                </div>
-
-                <div className="mt-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h2 className="text-sm font-medium">
-                        {t('agents.form.advanced.requestLimiting')}
-                      </h2>
-                      <p className="text-muted-foreground mt-1 text-xs">
-                        {t('agents.form.advanced.requestLimitingDescription')}
-                      </p>
-                    </div>
+                  >
                     <Switch
+                      id={requestLimitSwitchId}
                       checked={agent.limited_request_mode}
                       onCheckedChange={(checked) => {
                         setAgent({
@@ -1338,42 +1346,16 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         });
                       }}
                     />
-                  </div>
-                  <Input
-                    type="number"
-                    min="0"
-                    value={agent.request_limit || ''}
-                    onChange={(e) =>
-                      setAgent({
-                        ...agent,
-                        request_limit: e.target.value
-                          ? parseInt(e.target.value)
-                          : undefined,
-                      })
-                    }
-                    disabled={!agent.limited_request_mode}
-                    placeholder={t(
-                      'agents.form.placeholders.enterRequestLimit',
+                  </SettingRow>
+                  <SettingRow
+                    label={t('agents.form.advanced.systemPromptOverride')}
+                    description={t(
+                      'agents.form.advanced.systemPromptOverrideDescription',
                     )}
-                    shape="pill"
-                    className="mt-2"
-                  />
-                </div>
-
-                <div className="mt-6">
-                  <div className="flex items-center justify-between gap-4">
-                    <div className="min-w-0 flex-1">
-                      <h2 className="text-sm font-medium">
-                        {t('agents.form.advanced.systemPromptOverride')}
-                      </h2>
-                      <p className="text-muted-foreground mt-1 text-xs">
-                        {t(
-                          'agents.form.advanced.systemPromptOverrideDescription',
-                        )}
-                      </p>
-                    </div>
+                    htmlFor={promptOverrideSwitchId}
+                  >
                     <Switch
-                      className="shrink-0"
+                      id={promptOverrideSwitchId}
                       checked={agent.allow_system_prompt_override}
                       onCheckedChange={(checked) =>
                         setAgent({
@@ -1382,8 +1364,8 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         })
                       }
                     />
-                  </div>
-                </div>
+                  </SettingRow>
+                </SettingRows>
               </div>
             )}
           </div>
diff --git a/frontend/src/agents/SharedAgent.tsx b/frontend/src/agents/SharedAgent.tsx
index 63729dbe..5055a4f3 100644
--- a/frontend/src/agents/SharedAgent.tsx
+++ b/frontend/src/agents/SharedAgent.tsx
@@ -8,7 +8,7 @@ import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import MessageInput from '../components/MessageInput';
 import { Avatar } from '../components/ui/avatar';
-import Spinner from '../components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import ConversationMessages from '../conversation/ConversationMessages';
 import { Query } from '../conversation/conversationModels';
 import {
diff --git a/frontend/src/agents/SharedAgentCard.tsx b/frontend/src/agents/SharedAgentCard.tsx
index 94f8bc9e..91216e7c 100644
--- a/frontend/src/agents/SharedAgentCard.tsx
+++ b/frontend/src/agents/SharedAgentCard.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
+import { Pencil } from 'lucide-react';
 
-import EditIcon from '../assets/edit.svg';
 import ToolIcon from '../components/ToolIcon';
 import { Avatar } from '../components/ui/avatar';
 import { Button } from '../components/ui/button';
@@ -23,7 +23,7 @@ export default function SharedAgentCard({
     agent.shared_metadata !== null &&
     Object.keys(agent.shared_metadata).length > 0;
   return (
-    <div className="border-border dark:border-border flex w-full max-w-[720px] flex-col rounded-3xl border p-6 shadow-xs sm:w-fit sm:min-w-[480px]">
+    <div className="border-border flex w-full max-w-[720px] flex-col rounded-3xl border p-6 shadow-xs sm:w-fit sm:min-w-[480px]">
       <div className="flex items-start gap-3">
         <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
           <Avatar
@@ -52,7 +52,7 @@ export default function SharedAgentCard({
             className="shrink-0"
             aria-label={t('agents.edit')}
           >
-            <img src={EditIcon} alt="" className="h-3.5 w-3.5" />
+            <Pencil />
             {t('agents.edit')}
           </Button>
         )}
diff --git a/frontend/src/agents/components/GuardrailsSection.tsx b/frontend/src/agents/components/GuardrailsSection.tsx
index 574c70e9..a8b3979a 100644
--- a/frontend/src/agents/components/GuardrailsSection.tsx
+++ b/frontend/src/agents/components/GuardrailsSection.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { FormField } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 import {
   Select,
@@ -13,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { SettingRow } from '@/components/ui/setting-row';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
@@ -113,6 +115,8 @@ export default function GuardrailsSection({
   const [catalog, setCatalog] = React.useState<GuardrailCatalog | null>(null);
   const [loadError, setLoadError] = React.useState<string | null>(null);
   const [openSettings, setOpenSettings] = React.useState<string | null>(null);
+  const enabledId = React.useId();
+  const failOpenId = React.useId();
 
   const config = value ?? DEFAULT_GUARDRAILS;
 
@@ -292,53 +296,51 @@ export default function GuardrailsSection({
             </Alert>
           )}
 
-          <div className="mt-4 flex items-center justify-between gap-4">
-            <div className="min-w-0 flex-1">
-              <h3 className="text-sm font-medium">
-                {t('agents.form.guardrails.enable')}
-              </h3>
-              <p className="text-muted-foreground mt-1 text-xs">
-                {t('agents.form.guardrails.enableDescription')}
-              </p>
-            </div>
+          <SettingRow
+            className="mt-4"
+            label={t('agents.form.guardrails.enable')}
+            description={t('agents.form.guardrails.enableDescription')}
+            htmlFor={enabledId}
+          >
             <Switch
-              className="shrink-0"
+              id={enabledId}
               checked={config.enabled}
               disabled={disabled}
               data-testid="guardrails-enabled"
               onCheckedChange={(checked) => patch({ enabled: checked })}
             />
-          </div>
+          </SettingRow>
 
           {config.enabled && (
             <>
               <div className="mt-5">
-                <label className="mb-2 block text-sm font-medium">
-                  {t('agents.form.guardrails.mode')}
-                </label>
-                <Select
-                  value={config.mode}
-                  onValueChange={(mode) =>
-                    patch({ mode: mode as GuardrailsConfig['mode'] })
-                  }
-                  disabled={disabled}
-                >
-                  <SelectTrigger
-                    className="w-full"
-                    size="lg"
-                    shape="pill"
-                    data-testid="guardrails-mode"
+                <FormField label={t('agents.form.guardrails.mode')}>
+                  <Select
+                    value={config.mode}
+                    onValueChange={(mode) =>
+                      patch({ mode: mode as GuardrailsConfig['mode'] })
+                    }
+                    disabled={disabled}
                   >
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {(catalog?.modes ?? Object.keys(MODE_KEYS)).map((mode) => (
-                      <SelectItem key={mode} value={mode}>
-                        {t(MODE_KEYS[mode] ?? mode)}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                    <SelectTrigger
+                      className="w-full"
+                      size="lg"
+                      shape="pill"
+                      data-testid="guardrails-mode"
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(catalog?.modes ?? Object.keys(MODE_KEYS)).map(
+                        (mode) => (
+                          <SelectItem key={mode} value={mode}>
+                            {t(MODE_KEYS[mode] ?? mode)}
+                          </SelectItem>
+                        ),
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormField>
                 {config.mode === 'monitor_only' && (
                   <p className="text-warning mt-2 text-xs">
                     {t('agents.form.guardrails.monitorHint')}
@@ -394,10 +396,11 @@ export default function GuardrailsSection({
                 </div>
               </div>
 
-              <div className="mt-6">
-                <label className="mb-2 block text-sm font-medium">
-                  {t('agents.form.guardrails.blockMessage')}
-                </label>
+              <FormField
+                className="mt-6"
+                label={t('agents.form.guardrails.blockMessage')}
+                hint={t('agents.form.guardrails.blockMessageDescription')}
+              >
                 <Input
                   type="text"
                   value={config.block_message}
@@ -407,33 +410,27 @@ export default function GuardrailsSection({
                   onChange={(e) => patch({ block_message: e.target.value })}
                   shape="pill"
                 />
-                <p className="text-muted-foreground mt-1 text-xs">
-                  {t('agents.form.guardrails.blockMessageDescription')}
-                </p>
-              </div>
+              </FormField>
 
-              <div className="mt-6 flex items-center justify-between gap-4">
-                <div className="min-w-0 flex-1">
-                  <h3 className="text-sm font-medium">
-                    {t('agents.form.guardrails.failOpen')}
-                  </h3>
-                  <p className="text-muted-foreground mt-1 text-xs">
-                    {t('agents.form.guardrails.failOpenDescription')}
-                  </p>
-                </div>
+              <SettingRow
+                className="mt-6"
+                label={t('agents.form.guardrails.failOpen')}
+                description={t('agents.form.guardrails.failOpenDescription')}
+                htmlFor={failOpenId}
+              >
                 <Switch
-                  className="shrink-0"
+                  id={failOpenId}
                   checked={config.fail_open}
                   disabled={disabled}
                   data-testid="guardrails-fail-open"
                   onCheckedChange={(checked) => patch({ fail_open: checked })}
                 />
-              </div>
+              </SettingRow>
 
-              <div className="mt-4">
-                <label className="mb-2 block text-sm font-medium">
-                  {t('agents.form.guardrails.timeout')}
-                </label>
+              <FormField
+                className="mt-4"
+                label={t('agents.form.guardrails.timeout')}
+              >
                 <NumberField
                   value={config.timeout_ms}
                   min={100}
@@ -444,7 +441,7 @@ export default function GuardrailsSection({
                   testId="guardrails-timeout"
                   onCommit={(timeout_ms) => patch({ timeout_ms })}
                 />
-              </div>
+              </FormField>
             </>
           )}
         </div>
@@ -771,8 +768,7 @@ function CheckSettings({
   const set = (next: Record<string, any>) => onChange({ ...s, ...next });
 
   const listField = (fieldKey: string, label: string, placeholder: string) => (
-    <div className="mt-2">
-      <label className="mb-1 block text-xs font-medium">{label}</label>
+    <FormField className="mt-2" label={label}>
       <Textarea
         rows={2}
         size="sm"
@@ -790,7 +786,7 @@ function CheckSettings({
         }
         variant="filled"
       />
-    </div>
+    </FormField>
   );
 
   return (
@@ -851,10 +847,10 @@ function CheckSettings({
       )}
 
       {control.check === 'policy' && (
-        <div className="mt-2">
-          <label className="mb-1 block text-xs font-medium">
-            {t('agents.form.guardrails.policyText')}
-          </label>
+        <FormField
+          className="mt-2"
+          label={t('agents.form.guardrails.policyText')}
+        >
           <Textarea
             rows={4}
             size="sm"
@@ -864,15 +860,12 @@ function CheckSettings({
             onChange={(e) => set({ policy: e.target.value })}
             variant="filled"
           />
-        </div>
+        </FormField>
       )}
 
       {control.check === 'groundedness' && (
         <div className="mt-2 grid grid-cols-2 gap-2">
-          <div>
-            <label className="mb-1 block text-xs font-medium">
-              {t('agents.form.guardrails.minOverlap')}
-            </label>
+          <FormField label={t('agents.form.guardrails.minOverlap')}>
             <NumberField
               value={s.min_overlap ?? 0.3}
               min={0}
@@ -882,11 +875,8 @@ function CheckSettings({
               disabled={disabled}
               onCommit={(min_overlap) => set({ min_overlap })}
             />
-          </div>
-          <div>
-            <label className="mb-1 block text-xs font-medium">
-              {t('agents.form.guardrails.minWords')}
-            </label>
+          </FormField>
+          <FormField label={t('agents.form.guardrails.minWords')}>
             <NumberField
               value={s.min_words ?? 25}
               min={1}
@@ -896,15 +886,16 @@ function CheckSettings({
               disabled={disabled}
               onCommit={(min_words) => set({ min_words })}
             />
-          </div>
+          </FormField>
         </div>
       )}
 
       {control.check === 'policy' && (
-        <div className="mt-2">
-          <label className="mb-1 block text-xs font-medium">
-            {t('agents.form.guardrails.confidence')}
-          </label>
+        <FormField
+          className="mt-2"
+          label={t('agents.form.guardrails.confidence')}
+          hint={t('agents.form.guardrails.confidenceHint')}
+        >
           <NumberField
             value={s.confidence_threshold ?? 0.7}
             min={0}
@@ -914,10 +905,7 @@ function CheckSettings({
             disabled={disabled}
             onCommit={(confidence_threshold) => set({ confidence_threshold })}
           />
-          <p className="text-muted-foreground mt-1 text-xs">
-            {t('agents.form.guardrails.confidenceHint')}
-          </p>
-        </div>
+        </FormField>
       )}
     </div>
   );
diff --git a/frontend/src/agents/schedules/ScheduleFormModal.tsx b/frontend/src/agents/schedules/ScheduleFormModal.tsx
index f14493a7..5c35f56d 100644
--- a/frontend/src/agents/schedules/ScheduleFormModal.tsx
+++ b/frontend/src/agents/schedules/ScheduleFormModal.tsx
@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next';
 
 import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
+import { FormField } from '@/components/ui/form-field';
+import { Input } from '@/components/ui/input';
 import {
   Popover,
   PopoverContent,
@@ -16,6 +18,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
 import { TimePicker } from '@/components/ui/time-picker';
 
 import { Modal } from '../../components/ui/modal';
@@ -196,15 +199,32 @@ export default function ScheduleFormModal({
       mobileVariant="sheet"
       className="w-[min(560px,92vw)]"
       contentClassName="max-h-[80vh]"
+      footer={
+        <Button
+          type="button"
+          size="lg"
+          shape="pill"
+          loading={submitting}
+          onClick={submit}
+        >
+          {isEdit
+            ? t('agents.schedules.modal.save')
+            : t('agents.schedules.modal.create')}
+        </Button>
+      }
     >
       <div className="flex flex-col gap-5">
         <div className="flex items-start gap-3 pr-6">
-          <input
+          <Input
             type="text"
+            variant="bare"
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder={t('agents.schedules.modal.namePlaceholder')}
-            className="text-foreground placeholder:text-muted-foreground w-full bg-transparent text-xl font-semibold outline-none"
+            /* eslint-disable-next-line shadcn/no-restyle -- the schedule's
+               name is the dialog's editable title, so the bare field keeps
+               title type (20px semibold); DESIGN.md Approved exceptions. */
+            className="w-full text-xl font-semibold"
             aria-label={t('agents.schedules.modal.namePlaceholder')}
           />
         </div>
@@ -252,35 +272,16 @@ export default function ScheduleFormModal({
           </div>
         </div>
 
-        <label className="flex flex-col gap-2">
-          <span className="text-foreground text-sm font-medium">
-            {t('agents.schedules.modal.instructionsLabel')}
-          </span>
-          <textarea
+        <FormField label={t('agents.schedules.modal.instructionsLabel')}>
+          <Textarea
             value={instruction}
             onChange={(e) => setInstruction(e.target.value)}
             placeholder={t('agents.schedules.modal.instructionsPlaceholder')}
             rows={5}
-            className="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none focus-visible:ring-2"
           />
-        </label>
+        </FormField>
 
         {error && <p className="text-destructive text-sm">{error}</p>}
-
-        <div className="flex justify-end">
-          <Button
-            type="button"
-            disabled={submitting}
-            onClick={submit}
-            shape="pill"
-          >
-            {submitting
-              ? '…'
-              : isEdit
-                ? t('agents.schedules.modal.save')
-                : t('agents.schedules.modal.create')}
-          </Button>
-        </div>
       </div>
     </Modal>
   );
diff --git a/frontend/src/agents/schedules/SchedulesView.tsx b/frontend/src/agents/schedules/SchedulesView.tsx
index 00723f5f..674ead8a 100644
--- a/frontend/src/agents/schedules/SchedulesView.tsx
+++ b/frontend/src/agents/schedules/SchedulesView.tsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
 import userService from '../../api/services/userService';
-import Spinner from '../../components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import { Button } from '../../components/ui/button';
 import ConfirmationModal from '../../modals/ConfirmationModal';
 import { ActiveState } from '../../models/misc';
diff --git a/frontend/src/agents/workflow/WorkflowBuilder.tsx b/frontend/src/agents/workflow/WorkflowBuilder.tsx
index e22969b7..090c4f67 100644
--- a/frontend/src/agents/workflow/WorkflowBuilder.tsx
+++ b/frontend/src/agents/workflow/WorkflowBuilder.tsx
@@ -8,7 +8,6 @@ import {
   Flag,
   GitBranch,
   Link,
-  Loader2,
   Pencil,
   Play,
   Plus,
@@ -41,6 +40,8 @@ import ReactFlow, {
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { FormField } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 import { MultiSelect } from '@/components/ui/multi-select';
 import {
@@ -52,6 +53,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { SettingRow } from '@/components/ui/setting-row';
 import { Sheet, SheetContent } from '@/components/ui/sheet';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
@@ -1603,34 +1605,29 @@ function WorkflowBuilderInner() {
                   ref={workflowSettingsRef}
                   className="border-border bg-card absolute top-full left-0 z-50 mt-2 w-80 rounded-xl border p-4 shadow-lg"
                 >
-                  <div className="mb-3">
-                    <label className="text-foreground mb-1 block text-sm font-medium">
-                      Workflow Name
-                    </label>
+                  <FormField label="Workflow Name" className="mb-3">
                     <Input
                       type="text"
                       value={workflowName}
                       onChange={(e) => setWorkflowName(e.target.value)}
                       placeholder="Enter workflow name"
                     />
-                  </div>
-                  <div className="mb-3">
-                    <label className="text-foreground mb-1 block text-sm font-medium">
-                      Description
-                    </label>
+                  </FormField>
+                  <FormField label="Description" className="mb-3">
                     <Textarea
                       value={workflowDescription}
                       onChange={(e) => setWorkflowDescription(e.target.value)}
                       rows={3}
                       placeholder="Describe what this workflow does"
                     />
-                  </div>
-                  <div className="mb-3">
-                    <label className="text-foreground mb-1 block text-sm font-medium">
-                      Agent Image
-                    </label>
+                  </FormField>
+                  <FormField
+                    label="Agent Image"
+                    hint="Image updates are included the next time you save."
+                    className="mb-3"
+                  >
                     {currentAgentImage && !imageFile && (
-                      <div className="mb-2 flex items-center gap-2">
+                      <div className="flex items-center gap-2">
                         <img
                           src={currentAgentImage}
                           alt="Agent image"
@@ -1658,25 +1655,15 @@ function WorkflowBuilderInner() {
                         },
                       ]}
                     />
-                    <p className="text-muted-foreground mt-1 text-xs">
-                      Image updates are included the next time you save.
-                    </p>
-                  </div>
+                  </FormField>
                   <div className="mb-3">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <label
-                          htmlFor="workflow-system-prompt-override"
-                          className="text-foreground block text-sm font-medium"
-                        >
-                          {t('agents.form.advanced.systemPromptOverride')}
-                        </label>
-                        <p className="text-muted-foreground mt-0.5 text-xs">
-                          {t(
-                            'agents.form.advanced.systemPromptOverrideDescription',
-                          )}
-                        </p>
-                      </div>
+                    <SettingRow
+                      label={t('agents.form.advanced.systemPromptOverride')}
+                      description={t(
+                        'agents.form.advanced.systemPromptOverrideDescription',
+                      )}
+                      htmlFor="workflow-system-prompt-override"
+                    >
                       <Switch
                         id="workflow-system-prompt-override"
                         checked={Boolean(
@@ -1690,7 +1677,7 @@ function WorkflowBuilderInner() {
                           }))
                         }
                       />
-                    </div>
+                    </SettingRow>
                   </div>
                   <Button
                     type="button"
@@ -1722,10 +1709,10 @@ function WorkflowBuilderInner() {
                 variant="destructive-outline"
                 shape="pill"
                 onClick={() => setDeleteConfirmation('ACTIVE')}
-                disabled={isDeletingAgent}
+                loading={isDeletingAgent}
               >
                 <Trash2 size={16} />
-                {isDeletingAgent ? 'Deleting...' : 'Delete'}
+                Delete
               </Button>
             )}
             <Button
@@ -1749,20 +1736,11 @@ function WorkflowBuilderInner() {
               type="button"
               onClick={handlePrimaryAction}
               disabled={isPrimaryActionDisabled}
+              loading={showPrimaryActionSpinner}
               size="lg"
               shape="pill"
-              className="relative"
             >
-              <span
-                className={
-                  showPrimaryActionSpinner ? 'opacity-0' : 'opacity-100'
-                }
-              >
-                {primaryActionLabel}
-              </span>
-              {showPrimaryActionSpinner ? (
-                <Loader2 size={16} className="absolute animate-spin" />
-              ) : null}
+              {primaryActionLabel}
             </Button>
           </div>
         </div>
@@ -1995,10 +1973,7 @@ function WorkflowBuilderInner() {
                       {selectedNode.type !== 'start' &&
                         selectedNode.type !== 'end' && (
                           <>
-                            <div>
-                              <label className="text-foreground mb-2 block text-sm font-medium">
-                                Title
-                              </label>
+                            <FormField label="Title">
                               <Input
                                 type="text"
                                 value={
@@ -2014,14 +1989,11 @@ function WorkflowBuilderInner() {
                                 }
                                 placeholder="Enter node title"
                               />
-                            </div>
+                            </FormField>
 
                             {selectedNode.type === 'agent' && (
                               <>
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    Agent Type
-                                  </label>
+                                <FormField label="Agent Type">
                                   <Select
                                     value={
                                       selectedNode.data.config?.agent_type ||
@@ -2048,11 +2020,8 @@ function WorkflowBuilderInner() {
                                       </SelectItem>
                                     </SelectContent>
                                   </Select>
-                                </div>
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    Model
-                                  </label>
+                                </FormField>
+                                <FormField label="Model">
                                   <Select
                                     value={
                                       selectedNode.data.config?.model_id || ''
@@ -2126,11 +2095,8 @@ function WorkflowBuilderInner() {
                                       })()}
                                     </SelectContent>
                                   </Select>
-                                </div>
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    System Prompt
-                                  </label>
+                                </FormField>
+                                <FormField label="System Prompt">
                                   <Textarea
                                     value={
                                       selectedNode.data.config?.system_prompt ??
@@ -2147,7 +2113,7 @@ function WorkflowBuilderInner() {
                                     rows={3}
                                     placeholder="System prompt for the agent"
                                   />
-                                </div>
+                                </FormField>
                                 <PromptTextArea
                                   label="Prompt Template"
                                   value={
@@ -2167,10 +2133,7 @@ function WorkflowBuilderInner() {
                                   selectedNodeId={selectedNode.id}
                                   placeholder="Use {{ agent.variable }} for dynamic content"
                                 />
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    Output Variable
-                                  </label>
+                                <FormField label="Output Variable">
                                   <Input
                                     type="text"
                                     value={
@@ -2188,24 +2151,22 @@ function WorkflowBuilderInner() {
                                     }}
                                     placeholder="Variable name for output"
                                   />
-                                </div>
+                                </FormField>
                                 <div className="flex items-center gap-2">
-                                  <input
-                                    type="checkbox"
+                                  <Checkbox
                                     id="stream_to_user"
                                     checked={
                                       selectedNode.data.config
                                         ?.stream_to_user ?? true
                                     }
-                                    onChange={(e) =>
+                                    onCheckedChange={(checked) =>
                                       handleUpdateNodeData({
                                         config: {
                                           ...(selectedNode.data.config || {}),
-                                          stream_to_user: e.target.checked,
+                                          stream_to_user: checked === true,
                                         },
                                       })
                                     }
-                                    className="h-4 w-4"
                                   />
                                   <label
                                     htmlFor="stream_to_user"
@@ -2214,10 +2175,7 @@ function WorkflowBuilderInner() {
                                     Stream output to user
                                   </label>
                                 </div>{' '}
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    Tools
-                                  </label>
+                                <FormField label="Tools">
                                   <MultiSelect
                                     options={availableTools.map((tool) => ({
                                       value: tool.id,
@@ -2238,11 +2196,8 @@ function WorkflowBuilderInner() {
                                     searchPlaceholder="Search tools..."
                                     emptyText="No tools available"
                                   />
-                                </div>
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    Sources
-                                  </label>
+                                </FormField>
+                                <FormField label="Sources">
                                   <MultiSelect
                                     options={sourceOptions}
                                     selected={
@@ -2260,7 +2215,7 @@ function WorkflowBuilderInner() {
                                     searchPlaceholder="Search sources..."
                                     emptyText="No sources available"
                                   />
-                                </div>
+                                </FormField>
                                 <NodeDocumentsControl
                                   key={selectedNode.id}
                                   value={
@@ -2279,10 +2234,10 @@ function WorkflowBuilderInner() {
                                   label="Documents"
                                   helpText="Documents passed to this agent from uploads or upstream nodes."
                                 />
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    File passing
-                                  </label>
+                                <FormField
+                                  label="File passing"
+                                  hint="Auto: send native when the model supports it, otherwise extract text."
+                                >
                                   <Select
                                     value={normalizeFilePassing(
                                       selectedNode.data.config?.file_passing,
@@ -2310,17 +2265,24 @@ function WorkflowBuilderInner() {
                                       ))}
                                     </SelectContent>
                                   </Select>
-                                  <p className="text-muted-foreground mt-1 text-xs">
-                                    Auto: send native when the model supports
-                                    it, otherwise extract text.
-                                  </p>
-                                </div>
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    Structured Output (JSON Schema)
-                                  </label>
+                                </FormField>
+                                <FormField
+                                  label="Structured Output (JSON Schema)"
+                                  hint={
+                                    selectedAgentJsonSchemaText.trim() !== '' &&
+                                    !selectedAgentJsonSchemaError
+                                      ? 'Valid JSON schema'
+                                      : undefined
+                                  }
+                                  error={
+                                    selectedAgentJsonSchemaText.trim() !== '' &&
+                                    selectedAgentJsonSchemaError
+                                      ? `Invalid JSON schema: ${selectedAgentJsonSchemaError}`
+                                      : undefined
+                                  }
+                                >
                                   {!selectedAgentModelSupportsStructuredOutput && (
-                                    <p className="text-destructive mb-2 text-xs">
+                                    <p className="text-destructive text-xs">
                                       Selected model does not support structured
                                       output.
                                     </p>
@@ -2342,29 +2304,12 @@ function WorkflowBuilderInner() {
   "required": ["summary"]
 }`}
                                   />
-                                  {selectedAgentJsonSchemaText.trim() !==
-                                    '' && (
-                                    <p
-                                      className={`mt-2 text-xs ${
-                                        selectedAgentJsonSchemaError
-                                          ? 'text-destructive'
-                                          : 'text-success'
-                                      }`}
-                                    >
-                                      {selectedAgentJsonSchemaError
-                                        ? `Invalid JSON schema: ${selectedAgentJsonSchemaError}`
-                                        : 'Valid JSON schema'}
-                                    </p>
-                                  )}
-                                </div>
+                                </FormField>
                               </>
                             )}
 
                             {selectedNode.type === 'note' && (
-                              <div>
-                                <label className="text-foreground mb-2 block text-sm font-medium">
-                                  Note Content
-                                </label>
+                              <FormField label="Note Content">
                                 <Textarea
                                   value={selectedNode.data.content || ''}
                                   onChange={(e) =>
@@ -2375,7 +2320,7 @@ function WorkflowBuilderInner() {
                                   rows={4}
                                   placeholder="Enter note content"
                                 />
-                              </div>
+                              </FormField>
                             )}
 
                             {selectedNode.type === 'state' && (
@@ -2857,10 +2802,7 @@ function WorkflowBuilderInner() {
                                   Run code in the workflow sandbox. Produced
                                   files are saved as artifacts.
                                 </p>
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    Code
-                                  </label>
+                                <FormField label="Code">
                                   <Textarea
                                     value={selectedNode.data.config?.code ?? ''}
                                     onChange={(e) =>
@@ -2876,7 +2818,7 @@ function WorkflowBuilderInner() {
                                     spellCheck={false}
                                     placeholder={'print("hello world")'}
                                   />
-                                </div>
+                                </FormField>
                                 <NodeDocumentsControl
                                   key={selectedNode.id}
                                   value={selectedNode.data.config?.inputs ?? []}
@@ -2892,10 +2834,7 @@ function WorkflowBuilderInner() {
                                   label="Input files"
                                   helpText="Artifacts/upstream refs staged as files in the sandbox (one becomes inputs/<name>)."
                                 />
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    Output Variable
-                                  </label>
+                                <FormField label="Output Variable">
                                   <Input
                                     type="text"
                                     value={
@@ -2912,11 +2851,8 @@ function WorkflowBuilderInner() {
                                     }
                                     placeholder="Variable name for output"
                                   />
-                                </div>
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    Timeout (seconds)
-                                  </label>
+                                </FormField>
+                                <FormField label="Timeout (seconds)">
                                   <Input
                                     type="number"
                                     min={1}
@@ -2942,11 +2878,22 @@ function WorkflowBuilderInner() {
                                     }}
                                     placeholder="Optional"
                                   />
-                                </div>
-                                <div>
-                                  <label className="text-foreground mb-2 block text-sm font-medium">
-                                    Structured Output (JSON Schema)
-                                  </label>
+                                </FormField>
+                                <FormField
+                                  label="Structured Output (JSON Schema)"
+                                  hint={
+                                    selectedCodeJsonSchemaText.trim() !== '' &&
+                                    !selectedCodeJsonSchemaError
+                                      ? 'Valid JSON schema'
+                                      : undefined
+                                  }
+                                  error={
+                                    selectedCodeJsonSchemaText.trim() !== '' &&
+                                    selectedCodeJsonSchemaError
+                                      ? `Invalid JSON schema: ${selectedCodeJsonSchemaError}`
+                                      : undefined
+                                  }
+                                >
                                   <Textarea
                                     value={selectedCodeJsonSchemaText}
                                     onChange={(e) =>
@@ -2962,20 +2909,7 @@ function WorkflowBuilderInner() {
   "required": ["result"]
 }`}
                                   />
-                                  {selectedCodeJsonSchemaText.trim() !== '' && (
-                                    <p
-                                      className={`mt-2 text-xs ${
-                                        selectedCodeJsonSchemaError
-                                          ? 'text-destructive'
-                                          : 'text-success'
-                                      }`}
-                                    >
-                                      {selectedCodeJsonSchemaError
-                                        ? `Invalid JSON schema: ${selectedCodeJsonSchemaError}`
-                                        : 'Valid JSON schema'}
-                                    </p>
-                                  )}
-                                </div>
+                                </FormField>
                               </>
                             )}
                           </>
diff --git a/frontend/src/agents/workflow/WorkflowPreview.tsx b/frontend/src/agents/workflow/WorkflowPreview.tsx
index 924199b8..ba55d98e 100644
--- a/frontend/src/agents/workflow/WorkflowPreview.tsx
+++ b/frontend/src/agents/workflow/WorkflowPreview.tsx
@@ -1,6 +1,7 @@
 import {
   Bot,
   CheckCircle2,
+  ChevronDown,
   Circle,
   CircleAlert,
   Code2,
@@ -30,7 +31,6 @@ import {
 } from '@/components/ui/message-scroller';
 import { cn } from '@/lib/utils';
 
-import ChevronDownIcon from '../../assets/chevron-down.svg';
 import MessageInput from '../../components/MessageInput';
 import ConversationBubble from '../../conversation/ConversationBubble';
 import { Query } from '../../conversation/conversationModels';
@@ -134,12 +134,10 @@ function ExecutionDetails({
               {completedSteps.length === 1 ? 'step' : 'steps'})
             </span>
           </p>
-          <img
-            src={ChevronDownIcon}
-            alt="ChevronDown"
+          <ChevronDown
             className={cn(
-              'h-4 w-4 transform transition-transform duration-200 dark:invert',
-              isOpen ? 'rotate-180' : '',
+              'transition-transform duration-200',
+              isOpen && 'rotate-180',
             )}
           />
         </Button>
@@ -286,12 +284,10 @@ function RunArtifactsSection({
           className="-ml-2.5"
         >
           <p className="text-base font-semibold">Artifacts</p>
-          <img
-            src={ChevronDownIcon}
-            alt="ChevronDown"
+          <ChevronDown
             className={cn(
-              'h-4 w-4 transform transition-transform duration-200 dark:invert',
-              isOpen ? 'rotate-180' : '',
+              'transition-transform duration-200',
+              isOpen && 'rotate-180',
             )}
           />
         </Button>
@@ -660,10 +656,7 @@ export default function WorkflowPreview({
             ) : (
               <MessageScrollerProvider autoScroll>
                 <MessageScroller>
-                  <MessageScrollerViewport
-                    /* eslint-disable-next-line shadcn/no-restyle -- MessageScroller padding: the primitive measures Content's padding-block for its scroll math, and the Viewport's top gap must scroll with the messages. See DESIGN.md, Approved exceptions. */
-                    className="scrollbar-thin px-4 pt-4"
-                  >
+                  <MessageScrollerViewport className="scrollbar-thin px-4 pt-4">
                     <MessageScrollerContent className="w-full">
                       {queries.map((query, index) => {
                         const querySteps = query.executionSteps || [];
diff --git a/frontend/src/agents/workflow/WorkflowRunArtifacts.tsx b/frontend/src/agents/workflow/WorkflowRunArtifacts.tsx
index 7f7ceb76..280f72e1 100644
--- a/frontend/src/agents/workflow/WorkflowRunArtifacts.tsx
+++ b/frontend/src/agents/workflow/WorkflowRunArtifacts.tsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 
 import userService from '../../api/services/userService';
 import DocumentArtifactView from '../../components/DocumentArtifactView';
-import Spinner from '../../components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import {
   isDocumentArtifact,
   type DocumentArtifact,
@@ -132,7 +132,7 @@ export default function WorkflowRunArtifacts({
   if (loading) {
     return (
       <div className="text-muted-foreground flex items-center gap-2 px-3 py-4 text-sm">
-        <Spinner size="small" /> Loading artifacts...
+        <Spinner size="sm" /> Loading artifacts...
       </div>
     );
   }
diff --git a/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx b/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx
index 50d73793..971fecac 100644
--- a/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx
+++ b/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx
@@ -1,7 +1,8 @@
 import { Plus } from 'lucide-react';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 
 import { Button } from '@/components/ui/button';
+import { FormField } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 import { MultiSelect } from '@/components/ui/multi-select';
 
@@ -41,6 +42,7 @@ export default function NodeDocumentsControl({
     getDocumentsMode(value),
   );
   const [refDraft, setRefDraft] = useState('');
+  const fieldId = useId();
 
   const chosen = documentsModeToInputDocuments('choose', value);
   const showChoose = mode === 'choose';
@@ -59,11 +61,13 @@ export default function NodeDocumentsControl({
   };
 
   return (
-    <div>
-      <label className="text-foreground mb-2 block text-sm font-medium">
-        {label}
-      </label>
-      <div className="border-border bg-card flex gap-1 rounded-xl border p-1">
+    <FormField label={label} hint={helpText} id={fieldId}>
+      <div
+        id={fieldId}
+        role="group"
+        aria-label={label}
+        className="border-border bg-card flex gap-1 rounded-xl border p-1"
+      >
         {MODE_OPTIONS.map(({ mode: optionMode, label: modeLabel }) => (
           <Button
             key={optionMode}
@@ -78,7 +82,7 @@ export default function NodeDocumentsControl({
         ))}
       </div>
       {showChoose && (
-        <div className="mt-2 flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
           <MultiSelect
             options={withChosenDocumentOptions(options, chosen)}
             selected={chosen}
@@ -91,6 +95,7 @@ export default function NodeDocumentsControl({
           />
           <div className="flex gap-2">
             <Input
+              id={`${fieldId}-ref`}
               type="text"
               value={refDraft}
               onChange={(e) => setRefDraft(e.target.value)}
@@ -114,9 +119,6 @@ export default function NodeDocumentsControl({
           </div>
         </div>
       )}
-      {helpText && (
-        <p className="text-muted-foreground mt-1 text-xs">{helpText}</p>
-      )}
-    </div>
+    </FormField>
   );
 }
diff --git a/frontend/src/agents/workflow/components/PromptTextArea.tsx b/frontend/src/agents/workflow/components/PromptTextArea.tsx
index 060ee364..d6610f19 100644
--- a/frontend/src/agents/workflow/components/PromptTextArea.tsx
+++ b/frontend/src/agents/workflow/components/PromptTextArea.tsx
@@ -3,6 +3,7 @@ import {
   type CSSProperties,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -10,6 +11,7 @@ import {
 import { Edge, Node } from 'reactflow';
 
 import { Button } from '@/components/ui/button';
+import { FormField } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 import {
   Popover,
@@ -245,6 +247,10 @@ function VariableListWithSearch({
   onSelect: (templatePath: string) => void;
 }) {
   const [search, setSearch] = useState('');
+  // Own id: this list renders inside PromptTextArea's FormField (also through
+  // the popover portal), whose context would otherwise hand the textarea's id
+  // to this search box too.
+  const searchId = useId();
 
   const filtered = useMemo(
     () =>
@@ -263,6 +269,7 @@ function VariableListWithSearch({
       <div className="border-border flex items-center gap-2 border-b px-3 py-2">
         <Search className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
         <Input
+          id={searchId}
           type="text"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
@@ -330,6 +337,7 @@ export default function PromptTextArea({
   rows = 4,
   label,
 }: PromptTextAreaProps) {
+  const textareaId = useId();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -444,95 +452,96 @@ export default function PromptTextArea({
     }
   }, [showDropdown]);
 
-  return (
-    <div>
-      {label && (
-        <label className="text-foreground mb-2 block text-sm font-medium">
-          {label}
-        </label>
-      )}
+  const field = (
+    <div
+      ref={wrapperRef}
+      className="border-border focus-within:ring-ring bg-card relative rounded-xl border transition-all focus-within:ring-2"
+    >
       <div
-        ref={wrapperRef}
-        className="border-border focus-within:ring-ring bg-card relative rounded-xl border transition-all focus-within:ring-2"
+        ref={overlayRef}
+        aria-hidden
+        className="pointer-events-none absolute inset-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm wrap-break-word whitespace-pre-wrap"
       >
-        <div
-          ref={overlayRef}
-          aria-hidden
-          className="pointer-events-none absolute inset-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm wrap-break-word whitespace-pre-wrap"
-        >
-          {value ? (
-            <HighlightedOverlay text={value} />
-          ) : (
-            <span className="text-muted-foreground">{placeholder}</span>
-          )}
-        </div>
-
-        <textarea
-          ref={textareaRef}
-          value={value}
-          onChange={(e) => {
-            onChange(e.target.value);
-            setTimeout(checkForTrigger, 0);
-          }}
-          onKeyUp={checkForTrigger}
-          onKeyDown={(e) => {
-            if (showDropdown && e.key === 'Escape') {
-              e.preventDefault();
-              e.stopPropagation();
-              setShowDropdown(false);
-            }
-          }}
-          onScroll={() => {
-            if (overlayRef.current && textareaRef.current) {
-              overlayRef.current.scrollTop = textareaRef.current.scrollTop;
-            }
-          }}
-          className="focus-visible:ring-ring/50 focus-visible:border-ring relative w-full rounded-xl bg-transparent px-3 pt-2 pb-8 text-sm text-transparent caret-black outline-none focus-visible:ring-3 dark:caret-white"
-          rows={rows}
-          placeholder={placeholder}
-          spellCheck={false}
-        />
-
-        <div className="absolute right-4 bottom-1.5 z-10">
-          <Popover open={contextOpen} onOpenChange={setContextOpen}>
-            <PopoverTrigger asChild>
-              <Button type="button" variant="link" size="xs">
-                <Plus className="h-3 w-3" />
-                Add context
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent
-              align="end"
-              side="top"
-              className="w-60 p-0"
-              onOpenAutoFocus={(e) => e.preventDefault()}
-            >
-              <VariableListWithSearch
-                variables={variables}
-                onSelect={insertVariableFromButton}
-              />
-            </PopoverContent>
-          </Popover>
-        </div>
-
-        {showDropdown && filtered.length > 0 && (
-          <div
-            ref={dropdownRef}
-            className="border-border bg-card absolute top-(--dropdown-top) left-(--dropdown-left) z-50 w-64 rounded-xl border shadow-lg"
-            style={
-              {
-                '--dropdown-top': `${dropdownPos.top}px`,
-                '--dropdown-left': `${dropdownPos.left}px`,
-              } as CSSProperties
-            }
-          >
-            <VariableListWithSearch
-              variables={filtered}
-              onSelect={insertVariable}
-            />
-          </div>
+        {value ? (
+          <HighlightedOverlay text={value} />
+        ) : (
+          <span className="text-muted-foreground">{placeholder}</span>
         )}
       </div>
+
+      <textarea
+        id={textareaId}
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value);
+          setTimeout(checkForTrigger, 0);
+        }}
+        onKeyUp={checkForTrigger}
+        onKeyDown={(e) => {
+          if (showDropdown && e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            setShowDropdown(false);
+          }
+        }}
+        onScroll={() => {
+          if (overlayRef.current && textareaRef.current) {
+            overlayRef.current.scrollTop = textareaRef.current.scrollTop;
+          }
+        }}
+        className="focus-visible:ring-ring/50 focus-visible:border-ring relative w-full rounded-xl bg-transparent px-3 pt-2 pb-8 text-sm text-transparent caret-black outline-none focus-visible:ring-3 dark:caret-white"
+        rows={rows}
+        placeholder={placeholder}
+        spellCheck={false}
+      />
+
+      <div className="absolute right-4 bottom-1.5 z-10">
+        <Popover open={contextOpen} onOpenChange={setContextOpen}>
+          <PopoverTrigger asChild>
+            <Button type="button" variant="link" size="xs">
+              <Plus className="h-3 w-3" />
+              Add context
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            side="top"
+            className="w-60 p-0"
+            onOpenAutoFocus={(e) => e.preventDefault()}
+          >
+            <VariableListWithSearch
+              variables={variables}
+              onSelect={insertVariableFromButton}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {showDropdown && filtered.length > 0 && (
+        <div
+          ref={dropdownRef}
+          className="border-border bg-card absolute top-(--dropdown-top) left-(--dropdown-left) z-50 w-64 rounded-xl border shadow-lg"
+          style={
+            {
+              '--dropdown-top': `${dropdownPos.top}px`,
+              '--dropdown-left': `${dropdownPos.left}px`,
+            } as CSSProperties
+          }
+        >
+          <VariableListWithSearch
+            variables={filtered}
+            onSelect={insertVariable}
+          />
+        </div>
+      )}
     </div>
   );
+
+  if (!label) return <div>{field}</div>;
+  return (
+    <FormField label={label} id={textareaId}>
+      {field}
+    </FormField>
+  );
 }
diff --git a/frontend/src/agents/workflow/nodes/index.tsx b/frontend/src/agents/workflow/nodes/index.tsx
index 1b211a3d..0a4ef0dd 100644
--- a/frontend/src/agents/workflow/nodes/index.tsx
+++ b/frontend/src/agents/workflow/nodes/index.tsx
@@ -82,7 +82,7 @@ export const AgentNode = memo(function AgentNode({
         )}
         {config.model_id && (
           <div
-            className="text-primary dark:text-primary truncate text-xs"
+            className="text-primary truncate text-xs"
             title={config.model_id}
           >
             {config.model_id}
diff --git a/frontend/src/assets/DragFileUpload.svg b/frontend/src/assets/DragFileUpload.svg
deleted file mode 100644
index 1b41d193..00000000
--- a/frontend/src/assets/DragFileUpload.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="72" height="72" viewBox="0 0 72 72" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M33.8788 9.87836C34.4413 9.31595 35.2043 9 35.9998 9C36.7952 9 37.5582 9.31595 38.1208 9.87836L50.1208 21.8784C50.6672 22.4442 50.9696 23.202 50.9628 23.9886C50.9559 24.7752 50.6404 25.5276 50.0842 26.0838C49.528 26.64 48.7755 26.9555 47.989 26.9624C47.2024 26.9692 46.4446 26.6668 45.8788 26.1204L38.9998 19.2414V47.9994C38.9998 48.795 38.6837 49.5581 38.1211 50.1207C37.5585 50.6833 36.7954 50.9994 35.9998 50.9994C35.2041 50.9994 34.441 50.6833 33.8784 50.1207C33.3158 49.5581 32.9998 48.795 32.9998 47.9994V19.2414L26.1208 26.1204C25.555 26.6668 24.7971 26.9692 24.0106 26.9624C23.224 26.9555 22.4715 26.64 21.9153 26.0838C21.3591 25.5276 21.0436 24.7752 21.0367 23.9886C21.0299 23.202 21.3323 22.4442 21.8788 21.8784L33.8788 9.87836Z" fill="#313131"/>
-<path d="M18 51C18 50.2044 17.6839 49.4413 17.1213 48.8787C16.5587 48.3161 15.7956 48 15 48C14.2044 48 13.4413 48.3161 12.8787 48.8787C12.3161 49.4413 12 50.2044 12 51V52.8C12 58.446 16.554 63 22.2 63H49.8C55.446 63 60 58.446 60 52.8V51C60 50.2044 59.6839 49.4413 59.1213 48.8787C58.5587 48.3161 57.7957 48 57 48C56.2043 48 55.4413 48.3161 54.8787 48.8787C54.3161 49.4413 54 50.2044 54 51V52.8C54 55.134 52.134 57 49.8 57H22.2C19.866 57 18 55.134 18 52.8V51Z" fill="#313131"/>
-</svg>
diff --git a/frontend/src/assets/alert.svg b/frontend/src/assets/alert.svg
deleted file mode 100644
index 07721b57..00000000
--- a/frontend/src/assets/alert.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.16669 11.5H9.83335V13.1666H8.16669V11.5ZM8.16669 4.83329H9.83335V9.83329H8.16669V4.83329ZM8.99169 0.666626C4.39169 0.666626 0.666687 4.39996 0.666687 8.99996C0.666687 13.6 4.39169 17.3333 8.99169 17.3333C13.6 17.3333 17.3334 13.6 17.3334 8.99996C17.3334 4.39996 13.6 0.666626 8.99169 0.666626ZM9.00002 15.6666C5.31669 15.6666 2.33335 12.6833 2.33335 8.99996C2.33335 5.31663 5.31669 2.33329 9.00002 2.33329C12.6834 2.33329 15.6667 5.31663 15.6667 8.99996C15.6667 12.6833 12.6834 15.6666 9.00002 15.6666Z" fill="#ECECF1"/>
-</svg>
diff --git a/frontend/src/assets/arrow-down.svg b/frontend/src/assets/arrow-down.svg
deleted file mode 100644
index a4781b89..00000000
--- a/frontend/src/assets/arrow-down.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-  <path d="M440-800v487L216-537l-56 57 320 320 320-320-56-57-224 224v-487h-80Z" />
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/arrow-full-right.svg b/frontend/src/assets/arrow-full-right.svg
deleted file mode 100644
index d6004b4a..00000000
--- a/frontend/src/assets/arrow-full-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.0303 7.03033C13.3232 6.73744 13.3232 6.26256 13.0303 5.96967L8.25736 1.1967C7.96447 0.903806 7.48959 0.903806 7.1967 1.1967C6.90381 1.48959 6.90381 1.96447 7.1967 2.25736L11.4393 6.5L7.1967 10.7426C6.90381 11.0355 6.90381 11.5104 7.1967 11.8033C7.48959 12.0962 7.96447 12.0962 8.25736 11.8033L13.0303 7.03033ZM0.5 6.5V7.25H12.5V6.5V5.75H0.5V6.5Z" fill="white"/>
-</svg>
diff --git a/frontend/src/assets/arrow-left.svg b/frontend/src/assets/arrow-left.svg
deleted file mode 100644
index 8c7c7972..00000000
--- a/frontend/src/assets/arrow-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="23" viewBox="0 0 13 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.3183 20.8523C12.4198 20.9597 12.4991 21.0861 12.5518 21.2242C12.6044 21.3622 12.6294 21.5093 12.6252 21.657C12.621 21.8047 12.5878 21.9502 12.5274 22.0851C12.467 22.2199 12.3807 22.3416 12.2733 22.4431C12.1659 22.5446 12.0395 22.6239 11.9014 22.6766C11.7634 22.7293 11.6163 22.7542 11.4686 22.75C11.3208 22.7459 11.1754 22.7126 11.0405 22.6522C10.9057 22.5919 10.784 22.5055 10.6825 22.3981L1.12001 12.2731C0.922533 12.0642 0.812501 11.7877 0.812501 11.5002C0.812501 11.2128 0.922533 10.9362 1.12001 10.7273L10.6825 0.601207C10.7833 0.49145 10.905 0.40282 11.0403 0.340468C11.1757 0.278115 11.3221 0.243281 11.4711 0.23799C11.62 0.232697 11.7685 0.257054 11.908 0.309644C12.0474 0.362231 12.175 0.442004 12.2834 0.544328C12.3917 0.646653 12.4787 0.769488 12.5392 0.9057C12.5997 1.04191 12.6325 1.18878 12.6357 1.33779C12.639 1.48679 12.6126 1.63495 12.5581 1.77367C12.5036 1.91238 12.4221 2.03889 12.3183 2.14583L3.48476 11.5002L12.3183 20.8523Z" fill="#7D54D1"/>
-</svg>
diff --git a/frontend/src/assets/arrow-right.svg b/frontend/src/assets/arrow-right.svg
deleted file mode 100644
index a36d6e8f..00000000
--- a/frontend/src/assets/arrow-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="23" viewBox="0 0 13 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.681741 20.8523C0.580245 20.9597 0.500899 21.0861 0.448232 21.2242C0.395564 21.3622 0.370607 21.5093 0.374785 21.657C0.378964 21.8047 0.412197 21.9502 0.472586 22.0851C0.532974 22.2199 0.619336 22.3416 0.726741 22.4431C0.834146 22.5446 0.96049 22.6239 1.09856 22.6766C1.23663 22.7293 1.38372 22.7542 1.53144 22.75C1.67915 22.7459 1.8246 22.7126 1.95947 22.6522C2.09434 22.5919 2.216 22.5055 2.31749 22.3981L11.88 12.2731C12.0775 12.0642 12.1875 11.7877 12.1875 11.5002C12.1875 11.2128 12.0775 10.9362 11.88 10.7273L2.31749 0.601207C2.21666 0.49145 2.09503 0.40282 1.95967 0.340468C1.8243 0.278115 1.67789 0.243281 1.52895 0.23799C1.38 0.232697 1.23149 0.257054 1.09204 0.309644C0.95259 0.362231 0.824978 0.442004 0.716618 0.544328C0.608256 0.646653 0.521307 0.769488 0.46082 0.9057C0.400333 1.04191 0.367515 1.18878 0.364269 1.33779C0.361025 1.48679 0.387418 1.63495 0.441917 1.77367C0.496417 1.91238 0.577936 2.03889 0.681739 2.14583L9.51524 11.5002L0.681741 20.8523Z" fill="#7D54D1"/>
-</svg>
diff --git a/frontend/src/assets/book.svg b/frontend/src/assets/book.svg
deleted file mode 100644
index 596b1114..00000000
--- a/frontend/src/assets/book.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.2857 14H2.57143C1.15179 14 0 12.8242 0 11.375V2.625C0 1.17578 1.15179 0 2.57143 0H10.7143C11.4241 0 12 0.587891 12 1.3125V9.1875C12 9.75898 11.6411 10.2457 11.1429 10.4262V12.25C11.617 12.25 12 12.641 12 13.125C12 13.609 11.617 14 11.1429 14H10.2857ZM2.57143 10.5C2.09732 10.5 1.71429 10.891 1.71429 11.375C1.71429 11.859 2.09732 12.25 2.57143 12.25H9.42857V10.5H2.57143ZM3.42857 4.15625C3.42857 4.51992 3.71518 4.8125 4.07143 4.8125H8.78571C9.14196 4.8125 9.42857 4.51992 9.42857 4.15625C9.42857 3.79258 9.14196 3.5 8.78571 3.5H4.07143C3.71518 3.5 3.42857 3.79258 3.42857 4.15625ZM4.07143 6.125C3.71518 6.125 3.42857 6.41758 3.42857 6.78125C3.42857 7.14492 3.71518 7.4375 4.07143 7.4375H8.78571C9.14196 7.4375 9.42857 7.14492 9.42857 6.78125C9.42857 6.41758 9.14196 6.125 8.78571 6.125H4.07143Z" fill="#6A4DF4"/>
-</svg>
diff --git a/frontend/src/assets/calendar.svg b/frontend/src/assets/calendar.svg
deleted file mode 100644
index d0f67173..00000000
--- a/frontend/src/assets/calendar.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 7.5C6 7.36739 5.94732 7.24021 5.85355 7.14645C5.75979 7.05268 5.63261 7 5.5 7H4.5C4.36739 7 4.24021 7.05268 4.14645 7.14645C4.05268 7.24021 4 7.36739 4 7.5V8.5C4 8.63261 4.05268 8.75979 4.14645 8.85355C4.24021 8.94732 4.36739 9 4.5 9H5.5C5.63261 9 5.75979 8.94732 5.85355 8.85355C5.94732 8.75979 6 8.63261 6 8.5V7.5ZM6 10.5C6 10.3674 5.94732 10.2402 5.85355 10.1464C5.75979 10.0527 5.63261 10 5.5 10H4.5C4.36739 10 4.24021 10.0527 4.14645 10.1464C4.05268 10.2402 4 10.3674 4 10.5V11.5C4 11.6326 4.05268 11.7598 4.14645 11.8536C4.24021 11.9473 4.36739 12 4.5 12H5.5C5.63261 12 5.75979 11.9473 5.85355 11.8536C5.94732 11.7598 6 11.6326 6 11.5V10.5ZM7.5 7H8.5C8.63261 7 8.75979 7.05268 8.85355 7.14645C8.94732 7.24021 9 7.36739 9 7.5V8.5C9 8.63261 8.94732 8.75979 8.85355 8.85355C8.75979 8.94732 8.63261 9 8.5 9H7.5C7.36739 9 7.24021 8.94732 7.14645 8.85355C7.05268 8.75979 7 8.63261 7 8.5V7.5C7 7.36739 7.05268 7.24021 7.14645 7.14645C7.24021 7.05268 7.36739 7 7.5 7ZM8.5 10H7.5C7.36739 10 7.24021 10.0527 7.14645 10.1464C7.05268 10.2402 7 10.3674 7 10.5V11.5C7 11.6326 7.05268 11.7598 7.14645 11.8536C7.24021 11.9473 7.36739 12 7.5 12H8.5C8.63261 12 8.75979 11.9473 8.85355 11.8536C8.94732 11.7598 9 11.6326 9 11.5V10.5C9 10.3674 8.94732 10.2402 8.85355 10.1464C8.75979 10.0527 8.63261 10 8.5 10ZM10 7.5C10 7.36739 10.0527 7.24021 10.1464 7.14645C10.2402 7.05268 10.3674 7 10.5 7H11.5C11.6326 7 11.7598 7.05268 11.8536 7.14645C11.9473 7.24021 12 7.36739 12 7.5V8.5C12 8.63261 11.9473 8.75979 11.8536 8.85355C11.7598 8.94732 11.6326 9 11.5 9H10.5C10.3674 9 10.2402 8.94732 10.1464 8.85355C10.0527 8.75979 10 8.63261 10 8.5V7.5Z" fill="#848484"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 0C4.63261 0 4.75979 0.0526784 4.85355 0.146447C4.94732 0.240215 5 0.367392 5 0.5V1H11V0.5C11 0.367392 11.0527 0.240215 11.1464 0.146447C11.2402 0.0526784 11.3674 0 11.5 0C11.6326 0 11.7598 0.0526784 11.8536 0.146447C11.9473 0.240215 12 0.367392 12 0.5V1C13.66 1 15 2.34 15 4V12C15 13.66 13.66 15 12 15H4C2.34 15 1 13.66 1 12V4C1 2.34 2.34 1 4 1V0.5C4 0.367392 4.05268 0.240215 4.14645 0.146447C4.24021 0.0526784 4.36739 0 4.5 0ZM14 4V5H2V4C2 2.9 2.895 2 4 2V2.5C4 2.63261 4.05268 2.75979 4.14645 2.85355C4.24021 2.94732 4.36739 3 4.5 3C4.63261 3 4.75979 2.94732 4.85355 2.85355C4.94732 2.75979 5 2.63261 5 2.5V2H11V2.5C11 2.63261 11.0527 2.75979 11.1464 2.85355C11.2402 2.94732 11.3674 3 11.5 3C11.6326 3 11.7598 2.94732 11.8536 2.85355C11.9473 2.75979 12 2.63261 12 2.5V2C13.1 2 14 2.895 14 4ZM2 12V6H14V12C14 13.1 13.105 14 12 14H4C2.9 14 2 13.105 2 12Z" fill="#848484"/>
-</svg>
diff --git a/frontend/src/assets/check-circle-filled.svg b/frontend/src/assets/check-circle-filled.svg
deleted file mode 100644
index d67782aa..00000000
--- a/frontend/src/assets/check-circle-filled.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 2.5C17.523 2.5 22 6.977 22 12.5C22 18.023 17.523 22.5 12 22.5C6.477 22.5 2 18.023 2 12.5C2 6.977 6.477 2.5 12 2.5ZM15.22 9.47L10.75 13.94L8.78 11.97C8.63783 11.8375 8.44978 11.7654 8.25548 11.7688C8.06118 11.7723 7.87579 11.851 7.73838 11.9884C7.60097 12.1258 7.52225 12.3112 7.51883 12.5055C7.5154 12.6998 7.58752 12.8878 7.72 13.03L10.22 15.53C10.3606 15.6705 10.5512 15.7493 10.75 15.7493C10.9488 15.7493 11.1394 15.6705 11.28 15.53L16.28 10.53C16.3537 10.4613 16.4128 10.3785 16.4538 10.2865C16.4948 10.1945 16.5168 10.0952 16.5186 9.99452C16.5204 9.89382 16.5018 9.79379 16.4641 9.7004C16.4264 9.60701 16.3703 9.52218 16.299 9.45096C16.2278 9.37974 16.143 9.3236 16.0496 9.28588C15.9562 9.24816 15.8562 9.22963 15.7555 9.23141C15.6548 9.23318 15.5555 9.25523 15.4635 9.29622C15.3715 9.33721 15.2887 9.39631 15.22 9.47Z" fill="#0C9D35"/>
-</svg>
diff --git a/frontend/src/assets/checkMark2.svg b/frontend/src/assets/checkMark2.svg
deleted file mode 100644
index 9ed02cbd..00000000
--- a/frontend/src/assets/checkMark2.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11" fill="none">
-  <path d="M4.95919 10.1906C4.84318 10.1902 4.72847 10.166 4.62222 10.1194C4.51596 10.0729 4.42041 10.0049 4.34152 9.91985L0.229353 5.54538C0.0756344 5.38157 -0.00671208 5.1634 0.000428491 4.93886C0.00756906 4.71433 0.103612 4.50183 0.267428 4.34812C0.431245 4.1944 0.649417 4.11205 0.873948 4.11919C1.09848 4.12633 1.31098 4.22238 1.4647 4.38619L4.95073 8.10068L12.0666 0.316329C12.1389 0.226405 12.2287 0.152193 12.3306 0.0982513C12.4326 0.0443098 12.5445 0.0117775 12.6594 0.00265255C12.7744 -0.00647237 12.89 0.00800286 12.9992 0.045189C13.1084 0.082375 13.2088 0.141487 13.2943 0.218894C13.3798 0.296301 13.4485 0.390369 13.4964 0.49532C13.5442 0.600272 13.57 0.713891 13.5723 0.829198C13.5746 0.944506 13.5534 1.05907 13.5098 1.16585C13.4662 1.27263 13.4012 1.36937 13.3189 1.45014L5.58533 9.91139C5.50718 9.998 5.41197 10.0675 5.30567 10.1156C5.19938 10.1636 5.0843 10.1892 4.96766 10.1906H4.95919Z" fill="#747474"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/checkmark.svg b/frontend/src/assets/checkmark.svg
deleted file mode 100644
index 3923a50a..00000000
--- a/frontend/src/assets/checkmark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16px" height="16px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#11ee1c" stroke="#11ee1c" stroke-width="83.96799999999999"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M866.133333 258.133333L362.666667 761.6l-204.8-204.8L98.133333 618.666667 362.666667 881.066667l563.2-563.2z" fill="#0C9D35"></path></g></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/chevron-down.svg b/frontend/src/assets/chevron-down.svg
deleted file mode 100644
index b2605251..00000000
--- a/frontend/src/assets/chevron-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/chevron-right.svg b/frontend/src/assets/chevron-right.svg
deleted file mode 100644
index 1463b6f7..00000000
--- a/frontend/src/assets/chevron-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.29154 4.88202L1.70154 0.29202C1.60896 0.199438 1.49905 0.125998 1.37808 0.0758932C1.25712 0.0257882 1.12747 -2.37536e-07 0.99654 -2.44235e-07C0.86561 -2.50934e-07 0.735961 0.0257882 0.614997 0.0758931C0.494033 0.125998 0.384122 0.199438 0.29154 0.29202C0.198958 0.384602 0.125519 0.494513 0.0754137 0.615477C0.0253086 0.736441 -0.00048069 0.86609 -0.000480695 0.99702C-0.000480701 1.12795 0.0253086 1.2576 0.0754136 1.37856C0.125519 1.49953 0.198958 1.60944 0.29154 1.70202L4.17154 5.59202L0.29154 9.47202C0.198958 9.5646 0.125518 9.67451 0.0754133 9.79548C0.0253082 9.91644 -0.000481091 10.0461 -0.000481097 10.177C-0.000481102 10.3079 0.0253082 10.4376 0.0754132 10.5586C0.125518 10.6795 0.198958 10.7894 0.29154 10.882C0.384121 10.9746 0.494032 11.048 0.614996 11.0981C0.73596 11.1483 0.865609 11.174 0.99654 11.174C1.12747 11.174 1.25712 11.1483 1.37808 11.0981C1.49905 11.048 1.60896 10.9746 1.70154 10.882L6.29154 6.29202C6.38424 6.19951 6.45779 6.08962 6.50797 5.96864C6.55815 5.84767 6.58398 5.71799 6.58398 5.58702C6.58398 5.45605 6.55815 5.32637 6.50797 5.2054C6.45779 5.08442 6.38424 4.97453 6.29154 4.88202Z" fill="#666666"/>
-</svg>
diff --git a/frontend/src/assets/circle-check.svg b/frontend/src/assets/circle-check.svg
deleted file mode 100644
index f0e8390d..00000000
--- a/frontend/src/assets/circle-check.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(34 197 94)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/circle-x.svg b/frontend/src/assets/circle-x.svg
deleted file mode 100644
index d6bdd2c3..00000000
--- a/frontend/src/assets/circle-x.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(239 68 68)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/clip.svg b/frontend/src/assets/clip.svg
deleted file mode 100644
index a778e06b..00000000
--- a/frontend/src/assets/clip.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.08485 4.07133L3.08485 9.20109C3.08485 9.49263 3.20066 9.77222 3.40681 9.97837C3.61295 10.1845 3.89255 10.3003 4.18408 10.3003C4.47562 10.3003 4.75521 10.1845 4.96136 9.97837C5.1675 9.77222 5.28332 9.49263 5.28332 9.20109L5.28332 3.70492C5.28332 3.12185 5.05169 2.56266 4.6394 2.15037C4.22711 1.73808 3.66792 1.50645 3.08485 1.50645C2.50178 1.50645 1.94259 1.73808 1.5303 2.15037C1.118 2.56266 0.88638 3.12185 0.88638 3.70492L0.886379 9.20109C0.886379 10.0757 1.23381 10.9145 1.85225 11.5329C2.47069 12.1514 3.30948 12.4988 4.18408 12.4988C5.05869 12.4988 5.89747 12.1514 6.51591 11.5329C7.13435 10.9145 7.48178 10.0757 7.48178 9.20109L7.48178 4.07133" stroke="#5D5D5D" stroke-width="1.03637" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/cloud.svg b/frontend/src/assets/cloud.svg
deleted file mode 100644
index 9a8727db..00000000
--- a/frontend/src/assets/cloud.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 16C2.53043 16 3.03914 16.2107 3.41421 16.5858C3.78929 16.9609 4 17.4696 4 18C4 18.5304 3.78929 19.0391 3.41421 19.4142C3.03914 19.7893 2.53043 20 2 20C1.46957 20 0.960859 19.7893 0.585786 19.4142C0.210714 19.0391 0 18.5304 0 18C0 17.4696 0.210714 16.9609 0.585786 16.5858C0.960859 16.2107 1.46957 16 2 16ZM7.5 13C8.16304 13 8.79893 13.2634 9.26777 13.7322C9.73661 14.2011 10 14.837 10 15.5C10 16.163 9.73661 16.7989 9.26777 17.2678C8.79893 17.7366 8.16304 18 7.5 18C6.83696 18 6.20107 17.7366 5.73223 17.2678C5.26339 16.7989 5 16.163 5 15.5C5 14.837 5.26339 14.2011 5.73223 13.7322C6.20107 13.2634 6.83696 13 7.5 13ZM10 0C11.272 0.000250351 12.5033 0.448355 13.4779 1.26572C14.4525 2.08308 15.1082 3.2175 15.33 4.47H15.412C16.4105 4.47 17.3682 4.86667 18.0743 5.57274C18.7803 6.27882 19.177 7.23646 19.177 8.235C19.177 9.23354 18.7803 10.1912 18.0743 10.8973C17.3682 11.6033 16.4105 12 15.412 12H4.588C3.58946 12 2.63182 11.6033 1.92574 10.8973C1.21967 10.1912 0.823 9.23354 0.823 8.235C0.823 7.23646 1.21967 6.27882 1.92574 5.57274C2.63182 4.86667 3.58946 4.47 4.588 4.47H4.67C4.89179 3.2175 5.54749 2.08308 6.52211 1.26572C7.49673 0.448355 8.72801 0.000250351 10 0Z" fill="url(#paint0_linear_6161_11984)"/>
-<defs>
-<linearGradient id="paint0_linear_6161_11984" x1="0" y1="10" x2="19.177" y2="10" gradientUnits="userSpaceOnUse">
-<stop stop-color="#70FDF7"/>
-<stop offset="0.325" stop-color="#747696"/>
-<stop offset="0.68" stop-color="#BD5372"/>
-<stop offset="1" stop-color="#F5A06C"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/frontend/src/assets/copy.svg b/frontend/src/assets/copy.svg
deleted file mode 100644
index 803f82d9..00000000
--- a/frontend/src/assets/copy.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="16" stroke-width="1.15" viewBox="0 0 14 17" >
-<path d="M13.8013 5.01282L8.80645 0.191795C8.67953 0.0691399 8.50734 0.000152609 8.32774 0H6.09677C5.43801 0 4.80623 0.252586 4.34041 0.702193C3.8746 1.1518 3.6129 1.7616 3.6129 2.39744V3.48718H2.48387C1.82511 3.48718 1.19332 3.73977 0.727509 4.18937C0.261693 4.63898 0 5.24878 0 5.88462V14.6026C0 15.2384 0.261693 15.8482 0.727509 16.2978C1.19332 16.7474 1.82511 17 2.48387 17H8.80645C9.46521 17 10.097 16.7474 10.5628 16.2978C11.0286 15.8482 11.2903 15.2384 11.2903 14.6026V13.5128H11.5161C12.1749 13.5128 12.8067 13.2602 13.2725 12.8106C13.7383 12.361 14 11.7512 14 11.1154V5.44872C13.9929 5.28447 13.9219 5.12884 13.8013 5.01282ZM9.03226 2.23179L11.6877 4.79487H9.03226V2.23179ZM9.93548 14.6026C9.93548 14.8916 9.81653 15.1688 9.6048 15.3731C9.39306 15.5775 9.10589 15.6923 8.80645 15.6923H2.48387C2.18443 15.6923 1.89726 15.5775 1.68552 15.3731C1.47379 15.1688 1.35484 14.8916 1.35484 14.6026V5.88462C1.35484 5.5956 1.47379 5.31842 1.68552 5.11405C1.89726 4.90968 2.18443 4.79487 2.48387 4.79487H3.6129V11.1154C3.6129 11.7512 3.8746 12.361 4.34041 12.8106C4.80623 13.2602 5.43801 13.5128 6.09677 13.5128H9.93548V14.6026ZM11.5161 12.2051H6.09677C5.79734 12.2051 5.51016 12.0903 5.29843 11.886C5.08669 11.6816 4.96774 11.4044 4.96774 11.1154V2.39744C4.96774 2.10842 5.08669 1.83124 5.29843 1.62687C5.51016 1.4225 5.79734 1.30769 6.09677 1.30769H7.67742V5.44872C7.67976 5.62143 7.75188 5.78643 7.87842 5.90856C8.00496 6.03069 8.1759 6.10031 8.35484 6.10256H12.6452V11.1154C12.6452 11.4044 12.5262 11.6816 12.3145 11.886C12.1027 12.0903 11.8156 12.2051 11.5161 12.2051Z" fill="#949494"/>
-</svg>
diff --git a/frontend/src/assets/cross.svg b/frontend/src/assets/cross.svg
deleted file mode 100644
index c82c8d87..00000000
--- a/frontend/src/assets/cross.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/disc.svg b/frontend/src/assets/disc.svg
deleted file mode 100644
index 3ea3d451..00000000
--- a/frontend/src/assets/disc.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C8.8144 0 10.4902 0.332143 11.739 0.898571C12.362 1.18143 12.9108 1.53643 13.3119 1.96714C13.7172 2.4 14 2.94429 14 3.57143V6.42857C14 7.05571 13.7172 7.59929 13.3119 8.03286C12.9108 8.46357 12.3627 8.81857 11.739 9.10143C10.4902 9.66786 8.8144 10 7 10C5.1856 10 3.5098 9.66786 2.261 9.10143C1.638 8.81857 1.0892 8.46357 0.6881 8.03286C0.2828 7.6 0 7.05571 0 6.42857V3.57143C0 2.94429 0.2828 2.40071 0.6881 1.96714C1.0892 1.53643 1.6373 1.18143 2.261 0.898571C3.5098 0.332143 5.1856 0 7 0ZM12.6 5.77143C12.3375 5.94714 12.047 6.10429 11.739 6.24429C10.4902 6.81071 8.8144 7.14286 7 7.14286C5.1856 7.14286 3.5098 6.81071 2.261 6.24429C1.96243 6.10966 1.67456 5.95157 1.4 5.77143V6.42857C1.4 6.59071 1.47 6.79857 1.7024 7.04857C1.9383 7.30143 2.3128 7.56214 2.8294 7.79643C3.8612 8.26429 5.3354 8.57143 7 8.57143C8.6646 8.57143 10.1388 8.26429 11.1706 7.79643C11.6872 7.56214 12.0617 7.30143 12.2976 7.04857C12.5307 6.79857 12.6 6.59071 12.6 6.42857V5.77143ZM7 1.42857C5.3347 1.42857 3.8612 1.73571 2.8294 2.20357C2.3128 2.43786 1.9383 2.69857 1.7024 2.95143C1.4693 3.20143 1.4 3.40929 1.4 3.57143C1.4 3.73357 1.47 3.94143 1.7024 4.19143C1.9383 4.44429 2.3128 4.705 2.8294 4.93929C3.8612 5.40714 5.3354 5.71429 7 5.71429C8.6646 5.71429 10.1388 5.40714 11.1706 4.93929C11.6872 4.705 12.0617 4.44429 12.2976 4.19143C12.5307 3.94143 12.6 3.73357 12.6 3.57143C12.6 3.40929 12.53 3.20143 12.2976 2.95143C12.0617 2.69857 11.6872 2.43786 11.1706 2.20357C10.1388 1.73643 8.6646 1.42857 7 1.42857Z" fill="#848484"/>
-</svg>
diff --git a/frontend/src/assets/dislike.svg b/frontend/src/assets/dislike.svg
deleted file mode 100644
index ec1d24c2..00000000
--- a/frontend/src/assets/dislike.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.37776 10.1001V12.9C6.37776 13.457 6.599 13.9911 6.99282 14.3849C7.38664 14.7788 7.92077 15 8.47772 15L11.2777 8.70011V1.00025H3.38181C3.04419 0.996436 2.71656 1.11477 2.45929 1.33344C2.20203 1.55212 2.03246 1.8564 1.98184 2.19023L1.01585 8.49012C0.985398 8.69076 0.998931 8.89563 1.05551 9.09053C1.1121 9.28543 1.21038 9.46569 1.34355 9.61884C1.47671 9.77198 1.64159 9.89434 1.82674 9.97744C2.01189 10.0605 2.2129 10.1024 2.41583 10.1001H6.37776ZM11.2777 1.00025H13.1466C13.5428 0.993247 13.9277 1.13195 14.2284 1.39002C14.5291 1.64809 14.7245 2.00758 14.7776 2.40023V7.30014C14.7245 7.69279 14.5291 8.05227 14.2284 8.31035C13.9277 8.56842 13.5428 8.70712 13.1466 8.70011H11.2777" fill="none"/>
-<path d="M11.2777 8.70011L8.47772 15C7.92077 15 7.38664 14.7788 6.99282 14.3849C6.599 13.9911 6.37776 13.457 6.37776 12.9V10.1001H2.41583C2.2129 10.1024 2.01189 10.0605 1.82674 9.97744C1.64159 9.89434 1.47671 9.77198 1.34355 9.61884C1.21038 9.46569 1.1121 9.28543 1.05551 9.09053C0.998931 8.89563 0.985398 8.69076 1.01585 8.49012L1.98184 2.19023C2.03246 1.8564 2.20203 1.55212 2.45929 1.33344C2.71656 1.11477 3.04419 0.996436 3.38181 1.00025H11.2777M11.2777 8.70011V1.00025M11.2777 8.70011H13.1466C13.5428 8.70712 13.9277 8.56842 14.2284 8.31035C14.5291 8.05227 14.7245 7.69279 14.7776 7.30014V2.40023C14.7245 2.00758 14.5291 1.64809 14.2284 1.39002C13.9277 1.13195 13.5428 0.993247 13.1466 1.00025H11.2777" stroke="current" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/document.svg b/frontend/src/assets/document.svg
deleted file mode 100644
index bf9504c8..00000000
--- a/frontend/src/assets/document.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.9294 5.375V12.4583C12.9294 12.8341 12.7801 13.1944 12.5145 13.4601C12.2488 13.7257 11.8885 13.875 11.5127 13.875H3.01274C2.63701 13.875 2.27668 13.7257 2.011 13.4601C1.74532 13.1944 1.59607 12.8341 1.59607 12.4583V2.54167C1.59607 2.16594 1.74532 1.80561 2.011 1.53993C2.27668 1.27426 2.63701 1.125 3.01274 1.125H8.6794M12.9294 5.375V5.25317C12.9293 4.87747 12.78 4.5172 12.5143 4.25158L9.80282 1.54008C9.53721 1.27439 9.17693 1.12508 8.80124 1.125H8.6794M12.9294 5.375H10.0961C9.72035 5.375 9.36001 5.22574 9.09434 4.96007C8.82866 4.69439 8.6794 4.33406 8.6794 3.95833V1.125" stroke="#949494" stroke-width="1.41667" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/double-arrow-left.svg b/frontend/src/assets/double-arrow-left.svg
deleted file mode 100644
index cab9ff90..00000000
--- a/frontend/src/assets/double-arrow-left.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.41 10.59L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.59Z" fill="black" fill-opacity="0.54" />
-    <path d="M15.41 10.59L10.83 6L15.41 1.41L14 0L8 6L14 12L15.41 10.59Z" fill="black"
-        fill-opacity="0.54" />
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/double-arrow-right.svg b/frontend/src/assets/double-arrow-right.svg
deleted file mode 100644
index 0d5167c2..00000000
--- a/frontend/src/assets/double-arrow-right.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.59 10.59L13.17 6L8.59 1.41L10 0L16 6L10 12L8.59 10.59Z" fill="black"
-        fill-opacity="0.54" />
-    <path d="M0.59 10.59L5.17 6L0.59 1.41L2 0L8 6L2 12L0.59 10.59Z" fill="black" fill-opacity="0.54" />
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/download.svg b/frontend/src/assets/download.svg
deleted file mode 100644
index ee1c091b..00000000
--- a/frontend/src/assets/download.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-  <path d="M7 10l5 5 5-5"/>
-  <path d="M12 15V3"/>
-</svg>
diff --git a/frontend/src/assets/dropdown-arrow.svg b/frontend/src/assets/dropdown-arrow.svg
deleted file mode 100644
index fb88e637..00000000
--- a/frontend/src/assets/dropdown-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0L5 5L10 0H0Z" fill="gray" fill-opacity="0.80"/>
-</svg>
diff --git a/frontend/src/assets/duplicate.svg b/frontend/src/assets/duplicate.svg
deleted file mode 100644
index 06f7a8d3..00000000
--- a/frontend/src/assets/duplicate.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.8984 5.5H7.22656C5.99687 5.5 5 6.49687 5 7.72656V16.3984C5 17.6281 5.99687 18.625 7.22656 18.625H15.8984C17.1281 18.625 18.125 17.6281 18.125 16.3984V7.72656C18.125 6.49687 17.1281 5.5 15.8984 5.5Z" stroke="#949494" stroke-width="1.25" stroke-linejoin="round"/>
-<path d="M14.9805 5.5L15 4.5625C14.9984 3.98285 14.7674 3.4274 14.3575 3.01753C13.9476 2.60765 13.3922 2.37665 12.8125 2.375H4.375C3.71256 2.37696 3.07781 2.64098 2.6094 3.1094C2.14098 3.57781 1.87696 4.21256 1.875 4.875V13.3125C1.87665 13.8922 2.10765 14.4476 2.51753 14.8575C2.9274 15.2674 3.48285 15.4984 4.0625 15.5H5M11.5625 8.9375V15.1875M14.6875 12.0625H8.4375" stroke="#949494" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/edit.svg b/frontend/src/assets/edit.svg
deleted file mode 100644
index 25653776..00000000
--- a/frontend/src/assets/edit.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
-  <path d="M10.0588 2.74568L12.5294 5.15732M8.41176 14H15M1.82353 10.7845L1 14L4.29412 13.1961L13.8355 3.88237C14.1443 3.58087 14.3178 3.172 14.3178 2.74568C14.3178 2.31936 14.1443 1.9105 13.8355 1.609L13.6939 1.47073C13.385 1.16932 12.9662 1 12.5294 1C12.0927 1 11.6738 1.16932 11.3649 1.47073L1.82353 10.7845Z" stroke="#747474" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/envelope.svg b/frontend/src/assets/envelope.svg
deleted file mode 100644
index a4c25032..00000000
--- a/frontend/src/assets/envelope.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.04867 15.49H15.1775C16.5339 15.49 17.3172 14.7067 17.3172 13.1548V4.83755C17.3172 3.29309 16.5265 2.50977 14.9515 2.50977H2.82302C1.47463 2.50977 0.683594 3.28569 0.683594 4.83755V13.1545C0.683594 14.7138 1.48138 15.49 3.04867 15.49ZM8.10441 9.3803L2.41609 3.76816C2.58163 3.70034 2.77738 3.66273 3.01106 3.66273H14.9971C15.2305 3.66273 15.434 3.70034 15.6072 3.78327L9.92692 9.38062C9.60291 9.7043 9.31652 9.84766 9.01534 9.84766C8.71384 9.84766 8.42841 9.70398 8.10441 9.3803ZM1.83559 13.1548V4.76234L6.16717 9.01162L1.84331 13.2824C1.83592 13.2448 1.83559 13.1998 1.83559 13.1548ZM16.1646 4.84494V13.2599L11.8629 9.0113L16.1649 4.78516L16.1646 4.84494ZM3.01106 14.3377C2.79249 14.3377 2.61184 14.3075 2.4537 14.2397L6.95852 9.78723L7.44838 10.2694C7.97552 10.7891 8.48017 11.0077 9.01534 11.0077C9.54249 11.0077 10.0548 10.7891 10.5823 10.2694L11.0718 9.78723L15.5696 14.2319C15.4111 14.3075 15.2154 14.3374 14.9968 14.3374L3.01106 14.3377Z" fill="#6F6F6F"/>
-</svg>
diff --git a/frontend/src/assets/external-link.svg b/frontend/src/assets/external-link.svg
deleted file mode 100644
index 835fcc67..00000000
--- a/frontend/src/assets/external-link.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.4028 7.35671V12.6427C12.4043 12.844 12.3655 13.0436 12.2889 13.2298C12.2122 13.4159 12.0991 13.5849 11.9564 13.7269C11.8136 13.8688 11.6439 13.9808 11.4573 14.0563C11.2706 14.1318 11.0708 14.1694 10.8695 14.1667H3.36483C3.16278 14.1693 2.96226 14.1314 2.77509 14.0553C2.58792 13.9791 2.41789 13.8663 2.27504 13.7234C2.13219 13.5804 2.01941 13.4104 1.94335 13.2232C1.86728 13.036 1.82948 12.8354 1.83217 12.6334V5.12871C1.82975 4.92668 1.86776 4.7262 1.94396 4.53908C2.02017 4.35196 2.13302 4.18196 2.27589 4.0391C2.41875 3.89623 2.58875 3.78338 2.77587 3.70717C2.963 3.63097 3.16347 3.59296 3.3655 3.59537H8.65083M14.1648 1.83337L7.1175 8.88071M14.1648 1.83337H10.6408M14.1648 1.83337V5.35737" stroke="#7D54D1" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/eye-view.svg b/frontend/src/assets/eye-view.svg
deleted file mode 100644
index 1e569cfd..00000000
--- a/frontend/src/assets/eye-view.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_5819_12451)">
-<path d="M8.40039 14.3C5.06706 14.3 2.53372 12.4334 0.533724 8.63338L0.400391 8.30005L0.533724 7.96672C2.53372 4.16672 5.06706 2.30005 8.40039 2.30005C11.7337 2.30005 14.2671 4.16672 16.2671 7.96672L16.4004 8.30005L16.2671 8.63338C14.2671 12.4334 11.7337 14.3 8.40039 14.3ZM1.93372 8.30005C3.60039 11.4334 5.73372 12.9667 8.40039 12.9667C11.0671 12.9667 13.2004 11.4334 14.8671 8.30005C13.2004 5.16672 11.0671 3.63338 8.40039 3.63338C5.73372 3.63338 3.60039 5.16672 1.93372 8.30005Z" fill="#747474"/>
-<path d="M8.40072 11.6333C6.53405 11.6333 5.06738 10.1667 5.06738 8.30001C5.06738 6.43334 6.53405 4.96667 8.40072 4.96667C10.2674 4.96667 11.734 6.43334 11.734 8.30001C11.734 10.1667 10.2674 11.6333 8.40072 11.6333ZM8.40072 6.30001C7.26738 6.30001 6.40072 7.16667 6.40072 8.30001C6.40072 9.43334 7.26738 10.3 8.40072 10.3C9.53405 10.3 10.4007 9.43334 10.4007 8.30001C10.4007 7.16667 9.53405 6.30001 8.40072 6.30001Z" fill="#747474"/>
-</g>
-<defs>
-<clipPath id="clip0_5819_12451">
-<rect width="16" height="16" fill="white" transform="translate(0.400391 0.300049)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/src/assets/file.svg b/frontend/src/assets/file.svg
deleted file mode 100644
index 7120a3c9..00000000
--- a/frontend/src/assets/file.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 1.94971C0 0.983707 0.784 0.199707 1.75 0.199707H8.336C8.8 0.199707 9.245 0.383707 9.573 0.712707L12.487 3.62671C12.816 3.95471 13 4.39971 13 4.86371V14.4497C13 14.9138 12.8156 15.359 12.4874 15.6871C12.1592 16.0153 11.7141 16.1997 11.25 16.1997H1.75C1.28587 16.1997 0.840752 16.0153 0.512563 15.6871C0.184375 15.359 0 14.9138 0 14.4497V1.94971ZM1.75 1.69971C1.6837 1.69971 1.62011 1.72605 1.57322 1.77293C1.52634 1.81981 1.5 1.8834 1.5 1.94971V14.4497C1.5 14.5877 1.612 14.6997 1.75 14.6997H11.25C11.3163 14.6997 11.3799 14.6734 11.4268 14.6265C11.4737 14.5796 11.5 14.516 11.5 14.4497V6.19971H8.75C8.28587 6.19971 7.84075 6.01533 7.51256 5.68714C7.18437 5.35896 7 4.91384 7 4.44971V1.69971H1.75ZM8.5 1.76171V4.44971C8.5 4.58771 8.612 4.69971 8.75 4.69971H11.438L11.427 4.68671L8.513 1.77271L8.5 1.76171Z" fill="#59636E"/>
-</svg>
diff --git a/frontend/src/assets/folder.svg b/frontend/src/assets/folder.svg
deleted file mode 100644
index 2c2217f0..00000000
--- a/frontend/src/assets/folder.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.75 0.599915C1.28587 0.599915 0.840752 0.784289 0.512563 1.11248C0.184374 1.44067 0 1.88579 0 2.34991L0 12.8499C0 13.8159 0.784 14.5999 1.75 14.5999H14.25C14.7141 14.5999 15.1592 14.4155 15.4874 14.0874C15.8156 13.7592 16 13.314 16 12.8499V4.34991C16 3.88579 15.8156 3.44067 15.4874 3.11248C15.1592 2.78429 14.7141 2.59991 14.25 2.59991H7.5C7.46119 2.59991 7.42291 2.59088 7.3882 2.57352C7.35348 2.55616 7.32329 2.53096 7.3 2.49991L6.4 1.29991C6.07 0.859915 5.55 0.599915 5 0.599915H1.75Z" fill="#A382E7"/>
-</svg>
diff --git a/frontend/src/assets/full-logo.svg b/frontend/src/assets/full-logo.svg
deleted file mode 100644
index af581fc9..00000000
--- a/frontend/src/assets/full-logo.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 521.01 85.34">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #4a00e0;
-      }
-    </style>
-  </defs>
-  <g id="Layer_1-2" data-name="Layer 1">
-    <g>
-      <g>
-        <path class="cls-1" d="M152.09,85.34c-5.46,0-10.42-1.3-14.87-3.92-4.45-2.61-7.98-6.14-10.59-10.59-2.61-4.45-3.92-9.4-3.92-14.86s1.31-10.38,3.92-14.75c2.61-4.37,6.15-7.86,10.59-10.48,4.45-2.61,9.4-3.92,14.87-3.92s10.53,1.29,14.98,3.86c4.45,2.58,7.98,6.07,10.59,10.48,2.61,4.41,3.92,9.35,3.92,14.81s-1.31,10.42-3.92,14.86c-2.61,4.45-6.14,7.98-10.59,10.59-4.45,2.62-9.44,3.92-14.98,3.92ZM152.09,72.93c3.2,0,6.03-.72,8.49-2.17,2.46-1.44,4.37-3.45,5.74-6.03,1.36-2.58,2.05-5.5,2.05-8.78s-.7-6.16-2.11-8.66c-1.4-2.5-3.32-4.47-5.74-5.91-2.42-1.44-5.23-2.17-8.43-2.17s-5.91.72-8.37,2.17c-2.46,1.44-4.37,3.41-5.74,5.91-1.37,2.5-2.05,5.38-2.05,8.66s.68,6.2,2.05,8.78c1.36,2.58,3.28,4.58,5.74,6.03,2.46,1.44,5.25,2.17,8.37,2.17Z"/>
-        <path class="cls-1" d="M218.1,85.34c-5.54,0-10.55-1.29-15.04-3.86-4.49-2.58-8.02-6.09-10.59-10.53-2.58-4.45-3.86-9.4-3.86-14.87s1.29-10.51,3.86-14.92c2.58-4.41,6.1-7.9,10.59-10.48,4.49-2.58,9.5-3.86,15.04-3.86,4.37,0,8.44.84,12.23,2.52,3.78,1.68,7,4.08,9.66,7.2l-8.43,8.54c-1.64-1.95-3.61-3.41-5.91-4.39-2.3-.97-4.82-1.46-7.55-1.46-3.2,0-6.03.72-8.49,2.17-2.46,1.44-4.37,3.41-5.74,5.91-1.37,2.5-2.05,5.42-2.05,8.78s.68,6.19,2.05,8.72c1.36,2.54,3.28,4.53,5.74,5.97,2.46,1.44,5.29,2.17,8.49,2.17,2.73,0,5.25-.49,7.55-1.46,2.3-.98,4.27-2.44,5.91-4.39l8.43,8.54c-2.65,3.12-5.87,5.52-9.66,7.2-3.79,1.68-7.86,2.52-12.23,2.52Z"/>
-        <path class="cls-1" d="M267.61,85.34c-3.12,0-6.13-.41-9.01-1.23-2.89-.82-5.54-1.99-7.96-3.51-2.42-1.52-4.53-3.37-6.32-5.56l8.19-8.19c1.95,2.26,4.19,3.96,6.73,5.09,2.54,1.13,5.4,1.7,8.6,1.7,2.89,0,5.07-.43,6.55-1.29,1.48-.86,2.22-2.11,2.22-3.75s-.7-3.04-2.11-3.98c-1.4-.94-3.22-1.74-5.44-2.4-2.22-.66-4.56-1.35-7.02-2.05-2.46-.7-4.8-1.66-7.02-2.87-2.22-1.21-4.04-2.87-5.44-4.97-1.4-2.11-2.11-4.84-2.11-8.19,0-3.59.84-6.67,2.52-9.25,1.68-2.58,4.06-4.57,7.14-5.97,3.08-1.4,6.77-2.11,11.06-2.11,4.52,0,8.52.8,12,2.4,3.47,1.6,6.38,4,8.72,7.2l-8.19,8.19c-1.64-2.03-3.51-3.55-5.62-4.56-2.11-1.01-4.53-1.52-7.26-1.52-2.58,0-4.56.39-5.97,1.17-1.4.78-2.11,1.91-2.11,3.39,0,1.56.7,2.77,2.11,3.63,1.4.86,3.22,1.6,5.44,2.22,2.22.63,4.56,1.31,7.02,2.05,2.46.74,4.8,1.76,7.02,3.04,2.22,1.29,4.04,3.01,5.44,5.15,1.4,2.15,2.11,4.94,2.11,8.37,0,5.46-1.91,9.79-5.74,12.99-3.82,3.2-9.01,4.8-15.57,4.8Z"/>
-        <path class="cls-1" d="M338.31,85.34c-5.62,0-10.93-1.09-15.92-3.28-4.99-2.18-9.36-5.21-13.11-9.07-3.75-3.86-6.69-8.35-8.84-13.46-2.15-5.11-3.22-10.59-3.22-16.45s1.07-11.31,3.22-16.39c2.14-5.07,5.11-9.54,8.9-13.4,3.78-3.86,8.23-6.87,13.34-9.01,5.11-2.15,10.63-3.22,16.56-3.22,6.48,0,12.48,1.25,18.03,3.75,5.54,2.5,10.18,6.05,13.93,10.65l-9.13,9.13c-2.42-3.43-5.66-6.07-9.72-7.9-4.06-1.83-8.43-2.75-13.11-2.75-5.62,0-10.55,1.23-14.81,3.69-4.25,2.46-7.55,5.87-9.89,10.24-2.34,4.37-3.51,9.44-3.51,15.22s1.19,10.87,3.57,15.28c2.38,4.41,5.6,7.86,9.66,10.36,4.06,2.5,8.66,3.75,13.81,3.75,5.46,0,10.16-.99,14.1-2.98,3.94-1.99,6.96-4.95,9.07-8.9,2.11-3.94,3.16-8.8,3.16-14.57l8.43,6.09h-35v-12.29h40.5v1.87c0,9.76-1.74,17.87-5.21,24.35-3.47,6.48-8.21,11.32-14.22,14.51-6.01,3.2-12.88,4.8-20.6,4.8Z"/>
-        <path class="cls-1" d="M391.68,84.17V2.24h13.46v81.93h-13.46ZM400.92,53.27v-11.7h20.48c2.81,0,5.28-.57,7.43-1.7,2.14-1.13,3.84-2.73,5.09-4.8,1.25-2.07,1.87-4.51,1.87-7.32s-.63-5.25-1.87-7.32c-1.25-2.07-2.95-3.67-5.09-4.8-2.15-1.13-4.62-1.7-7.43-1.7h-20.48V2.24h21.18c5.15,0,9.77,1.05,13.87,3.16,4.1,2.11,7.33,5.07,9.72,8.9,2.38,3.82,3.57,8.31,3.57,13.46s-1.19,9.64-3.57,13.46c-2.38,3.82-5.62,6.79-9.72,8.9-4.1,2.11-8.72,3.16-13.87,3.16h-21.18Z"/>
-        <path class="cls-1" d="M454.18,14.53V2.24h66.83v12.29h-66.83ZM480.87,84.17V4.58h13.46v79.59h-13.46Z"/>
-      </g>
-      <path class="cls-1" d="M113.79,25.5c-2.18-5.16-5.24-9.65-9.19-13.48-3.95-3.83-8.62-6.79-14.02-8.88-5.4-2.09-11.24-3.14-17.52-3.14h-33.12v70.4c-3.81.33-7.54.21-11.2-.38-5.68-.91-10.85-2.82-15.52-5.73-4.67-2.9-8.61-6.67-11.84-11.29-.41-.59-.81-1.19-1.19-1.8h-.2c.54,2.88,1.37,5.64,2.47,8.28,2.18,5.2,5.24,9.71,9.19,13.54,3.95,3.83,8.6,6.79,13.96,8.88,4.48,1.75,9.26,2.77,14.33,3.06h0s11.24,0,11.24,0h22.12c6.2,0,11.98-1.05,17.34-3.14,5.36-2.09,10.01-5.06,13.96-8.88,3.95-3.83,7.01-8.34,9.19-13.54,2.18-5.2,3.26-10.86,3.26-16.98s-1.09-11.76-3.26-16.92ZM96.81,57.11c-2.3,4.23-5.52,7.49-9.67,9.79-4.15,2.3-8.92,3.44-14.32,3.44h-16.44V14.62h16.44c5.4,0,10.15,1.17,14.26,3.5,4.11,2.34,7.33,5.56,9.67,9.67,2.34,4.11,3.51,8.94,3.51,14.5s-1.15,10.58-3.44,14.81Z"/>
-      <path class="cls-1" d="M9.74,58.97c.25.21.64.21.99,0h0c.35-.22.6-.61.61-.99l.18-3.94c.02-.51-.37-.84-.87-.74l-1.69.36-2.11.45c-.37.08-.71.37-.87.75h0c-.16.39-.1.77.14.99l3.62,3.11Z"/>
-      <path class="cls-1" d="M14.41,61.98l5.72,2.68c.39.18.9,0,1.3-.45.4-.46.6-1.11.51-1.65l-.94-5.56c-.12-.73-.74-1.01-1.38-.63l-2.12,1.27-2.65,1.59c-.46.28-.83.84-.92,1.44v.02c-.1.6.09,1.11.48,1.29Z"/>
-      <path class="cls-1" d="M25.32,65.34c.14.8.61,1.36,1.18,1.42l8.43.86c.58.06,1.15-.39,1.45-1.15h0c.3-.76.27-1.68-.08-2.32l-3.65-6.61c-.48-.86-1.38-.95-2.02-.18l-2.12,2.54-2.66,3.18c-.46.56-.67,1.43-.53,2.23v.02Z"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/images.svg b/frontend/src/assets/images.svg
deleted file mode 100644
index bd822b96..00000000
--- a/frontend/src/assets/images.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="40" height="39" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9477 3.02295H33.8827C35.898 3.02295 37.5388 4.6819 37.5388 6.71923V22.9819C37.5388 25.0193 35.898 26.6782 33.8827 26.6782H11.9477C9.9328 26.6782 8.29192 25.0193 8.29192 22.9819V6.71923C8.29192 4.6819 9.9328 3.02295 11.9477 3.02295ZM33.8827 5.97992H11.9477C11.5442 5.97992 11.2167 6.31098 11.2167 6.71916V20.6741L15.2527 16.595C16.2515 15.5839 17.8791 15.5839 18.8792 16.595L20.6486 18.3795L26.0799 11.7888C26.5653 11.2003 27.276 10.8603 28.0335 10.856C28.7953 10.8735 29.5046 11.1841 29.9946 11.765L34.614 17.2147V6.71923C34.614 6.31104 34.2866 5.97992 33.8827 5.97992ZM6.40446 25.1242C7.16068 27.3803 9.243 28.8957 11.584 28.8957H32.8128L31.4954 33.1312C31.1223 34.5715 29.7916 35.5487 28.3352 35.5487C28.051 35.5485 27.768 35.5117 27.4929 35.4393L4.88059 29.3169C3.13614 28.8305 2.09642 27.0048 2.55267 25.2438L6.10025 13.2714V23.3516C6.10025 23.8543 6.17497 24.3567 6.35333 24.9542L6.40446 25.1242ZM18.53 10.4151C18.53 12.0459 17.2186 13.3721 15.6055 13.3721C13.9926 13.3721 12.6808 12.0458 12.6808 10.4151C12.6808 8.78445 13.9925 7.45815 15.6055 7.45815C17.2186 7.45815 18.53 8.78438 18.53 10.4151Z" fill="#A3A3A3"/>
-</svg>
diff --git a/frontend/src/assets/info.svg b/frontend/src/assets/info.svg
deleted file mode 100644
index 6f3d2446..00000000
--- a/frontend/src/assets/info.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z" fill="black" fill-opacity="0.54"/>
-</svg>
diff --git a/frontend/src/assets/like.svg b/frontend/src/assets/like.svg
deleted file mode 100644
index c49604ed..00000000
--- a/frontend/src/assets/like.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.39995 5.89997V3.09999C9.39995 2.54304 9.1787 2.0089 8.78487 1.61507C8.39105 1.22125 7.85691 1 7.29996 1L4.49998 7.29996V14.9999H12.3959C12.7336 15.0037 13.0612 14.8854 13.3185 14.6667C13.5757 14.448 13.7453 14.1437 13.7959 13.8099L14.7619 7.50996C14.7924 7.30931 14.7788 7.10444 14.7222 6.90954C14.6657 6.71464 14.5674 6.53437 14.4342 6.38123C14.301 6.22808 14.1362 6.10572 13.951 6.02262C13.7659 5.93952 13.5649 5.89767 13.3619 5.89997H9.39995ZM4.49998 14.9999H2.39999C2.02869 14.9999 1.6726 14.8524 1.41005 14.5899C1.1475 14.3273 1 13.9712 1 13.5999V8.69995C1 8.32865 1.1475 7.97256 1.41005 7.71001C1.6726 7.44746 2.02869 7.29996 2.39999 7.29996H4.49998" fill="none"/>
-<path d="M4.49998 7.29996L7.29996 1C7.85691 1 8.39105 1.22125 8.78487 1.61507C9.1787 2.0089 9.39995 2.54304 9.39995 3.09999V5.89997H13.3619C13.5649 5.89767 13.7659 5.93952 13.951 6.02262C14.1362 6.10572 14.301 6.22808 14.4342 6.38123C14.5674 6.53437 14.6657 6.71464 14.7223 6.90954C14.7788 7.10444 14.7924 7.30931 14.7619 7.50996L13.7959 13.8099C13.7453 14.1437 13.5757 14.448 13.3185 14.6667C13.0612 14.8854 12.7336 15.0037 12.3959 14.9999H4.49998M4.49998 7.29996V14.9999M4.49998 7.29996H2.39999C2.02869 7.29996 1.6726 7.44746 1.41005 7.71001C1.1475 7.97256 1 8.32865 1 8.69995V13.5999C1 13.9712 1.1475 14.3273 1.41005 14.5899C1.6726 14.8524 2.02869 14.9999 2.39999 14.9999H4.49998" stroke="current" stroke-width="1.39999" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/link-gray.svg b/frontend/src/assets/link-gray.svg
deleted file mode 100644
index e6877148..00000000
--- a/frontend/src/assets/link-gray.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 1.5H3C2.46957 1.5 1.96086 1.71071 1.58579 2.08579C1.21071 2.46086 1 2.96957 1 3.5V15.5C1 16.0304 1.21071 16.5391 1.58579 16.9142C1.96086 17.2893 2.46957 17.5 3 17.5H15C15.5304 17.5 16.0391 17.2893 16.4142 16.9142C16.7893 16.5391 17 16.0304 17 15.5V11.5M9 9.5L17 1.5M17 1.5V6.5M17 1.5H12" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/link.svg b/frontend/src/assets/link.svg
deleted file mode 100644
index 67bacd9d..00000000
--- a/frontend/src/assets/link.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 16H2V2H9V0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H16C17.1 18 18 17.1 18 16V9H16V16ZM11 0V2H14.59L4.76 11.83L6.17 13.24L16 3.41V7H18V0H11Z" fill="black" fill-opacity="0.54"/>
-</svg>
diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg
deleted file mode 100644
index 1b70c736..00000000
--- a/frontend/src/assets/logo.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.35 169.38">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #4a00e0;
-      }
-    </style>
-  </defs>
-  <g id="Layer_1-2" data-name="Layer 1">
-    <g>
-      <path class="cls-1" d="M226.85,50.84c-4.34-10.28-10.44-19.23-18.31-26.86-7.87-7.63-17.19-13.53-27.95-17.71-10.76-4.18-22.41-6.26-34.94-6.26h-66.02v140.35c-7.6.66-15.04.42-22.33-.75-11.32-1.82-21.64-5.63-30.94-11.42-9.3-5.79-17.17-13.29-23.6-22.5-.82-1.17-1.61-2.37-2.37-3.59h-.4c1.08,5.74,2.73,11.25,4.93,16.51,4.34,10.36,10.44,19.36,18.31,26.99,7.87,7.63,17.15,13.53,27.83,17.71,8.93,3.49,18.46,5.52,28.56,6.09h0s22.41,0,22.41,0h44.09c12.37,0,23.89-2.09,34.57-6.26,10.68-4.17,19.96-10.08,27.83-17.71,7.87-7.63,13.97-16.62,18.31-26.99,4.34-10.36,6.51-21.64,6.51-33.85s-2.17-23.45-6.51-33.73ZM193,113.84c-4.58,8.43-11,14.94-19.28,19.52-8.27,4.58-17.79,6.87-28.55,6.87h-32.77V29.15h32.77c10.76,0,20.24,2.33,28.43,6.99,8.19,4.66,14.61,11.08,19.28,19.28,4.66,8.19,6.99,17.83,6.99,28.91s-2.29,21.08-6.87,29.52Z"/>
-      <path class="cls-1" d="M19.41,117.55c.49.42,1.27.42,1.97,0h0c.7-.43,1.19-1.21,1.22-1.97l.37-7.84c.05-1.03-.73-1.68-1.74-1.47l-3.36.72-4.21.9c-.73.16-1.42.75-1.74,1.5v.02c-.33.75-.21,1.52.28,1.94l7.21,6.21Z"/>
-      <path class="cls-1" d="M28.73,123.56l11.41,5.35c.78.37,1.8,0,2.6-.9.8-.92,1.2-2.22,1.02-3.29l-1.88-11.08c-.25-1.45-1.47-2.01-2.74-1.25l-4.23,2.53-5.29,3.17c-.92.55-1.65,1.68-1.84,2.87v.03c-.2,1.19.18,2.21.96,2.57Z"/>
-      <path class="cls-1" d="M50.47,130.26c.28,1.59,1.21,2.71,2.36,2.83l16.8,1.72c1.15.12,2.29-.79,2.88-2.29h0c.6-1.52.54-3.34-.16-4.62l-7.28-13.18c-.95-1.72-2.75-1.89-4.02-.37l-4.23,5.07-5.29,6.35c-.92,1.11-1.34,2.86-1.06,4.45v.04Z"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/monitoring.svg b/frontend/src/assets/monitoring.svg
deleted file mode 100644
index bc47212e..00000000
--- a/frontend/src/assets/monitoring.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.85 16.087C4.84924 16.2663 4.91145 16.4239 5.03693 16.5494C5.16233 16.6747 5.31971 16.7373 5.499 16.7373L5.4997 16.7373C5.67889 16.7364 5.83627 16.6743 5.9617 16.5497C6.08758 16.4247 6.15 16.267 6.15 16.0873V10.7993C6.15 10.619 6.08842 10.4607 5.96269 10.3358C5.83772 10.2117 5.68058 10.1501 5.5017 10.1493C5.32173 10.1484 5.16366 10.2105 5.03793 10.3362C4.9124 10.4618 4.85 10.6195 4.85 10.7993V16.087ZM4.85 16.087C4.85 16.0868 4.85 16.0867 4.85 16.0866L5 16.0873M4.85 16.087V16.0873H5M5 16.0873C4.99933 16.2286 5.047 16.3473 5.143 16.4433C5.239 16.5393 5.35767 16.5873 5.499 16.5873L5 16.0873ZM17.4984 0.850356C17.6844 0.844257 17.8447 0.916616 17.9702 1.05647C18.0903 1.18276 18.1491 1.33782 18.1439 1.51269C18.1389 1.6837 18.0787 1.83386 17.9605 1.95296L17.9601 1.95335L12.7431 7.17035L12.7421 7.17131C12.5779 7.33262 12.3846 7.45674 12.1641 7.54381C11.9451 7.63023 11.7235 7.67428 11.5 7.67428C11.277 7.67428 11.0585 7.63017 10.8453 7.54316M17.4984 0.850356L10.8453 7.54316M17.4984 0.850356C17.3204 0.855502 17.1648 0.921665 17.0399 1.04721L17.4984 0.850356ZM10.8453 7.54316C10.632 7.45637 10.4379 7.33351 10.2633 7.17548L10.2578 7.1705L10.258 7.17037L7.83596 4.74937L7.83593 4.74935C7.75166 4.66508 7.6439 4.62029 7.5 4.62029C7.3561 4.62029 7.24834 4.66508 7.16407 4.74935L1.96007 9.95335C1.83516 10.0783 1.67973 10.1443 1.50197 10.1502L1.50128 10.1502C1.31531 10.1555 1.15551 10.0825 1.03084 9.94215C0.910023 9.81657 0.850921 9.66177 0.856065 9.48688C0.861095 9.31586 0.921352 9.1658 1.03993 9.04722L6.25793 3.82922L6.25859 3.82856C6.43436 3.65497 6.63139 3.52612 6.84951 3.44477C7.06174 3.36537 7.27883 3.32528 7.5 3.32528C7.72114 3.32528 7.94133 3.36536 8.15989 3.44418C8.38508 3.5254 8.58031 3.65486 8.74407 3.83122L11.164 6.2502L11.1641 6.25022C11.2483 6.33449 11.3561 6.37928 11.5 6.37928C11.6439 6.37928 11.7517 6.33449 11.8359 6.25022L11.8359 6.25021L17.0396 1.04758L10.8453 7.54316ZM1.5 16.7373L1.5007 16.7373C1.68022 16.7364 1.83649 16.6741 1.9617 16.5497C2.08758 16.4247 2.15 16.267 2.15 16.0873V15.2993C2.15 15.119 2.08842 14.9607 1.96269 14.8358C1.83772 14.7117 1.68058 14.6501 1.5017 14.6493C1.32173 14.6484 1.16366 14.7105 1.03793 14.8362C0.912396 14.9618 0.85 15.1195 0.85 15.2993V16.0873C0.85 16.2663 0.91197 16.4235 1.03657 16.549C1.16172 16.675 1.31979 16.7373 1.5 16.7373ZM9.499 16.7373L9.4997 16.7373C9.67889 16.7364 9.83627 16.6743 9.9617 16.5497C10.0876 16.4247 10.15 16.267 10.15 16.0873V12.7993C10.15 12.619 10.0884 12.4607 9.96269 12.3358C9.83772 12.2117 9.68058 12.1501 9.5017 12.1493C9.32173 12.1484 9.16366 12.2105 9.03793 12.3362C8.9124 12.4618 8.85 12.6195 8.85 12.7993V16.0873C8.85 16.2663 8.91197 16.4235 9.03656 16.549C9.16158 16.6749 9.31924 16.7373 9.499 16.7373ZM13.499 16.7373L13.4997 16.7373C13.6789 16.7364 13.8363 16.6743 13.9617 16.5497C14.0876 16.4247 14.15 16.267 14.15 16.0873V11.2993C14.15 11.119 14.0884 10.9607 13.9627 10.8358C13.8377 10.7117 13.6806 10.6501 13.5017 10.6493C13.3217 10.6484 13.1637 10.7105 13.0379 10.8362C12.9124 10.9618 12.85 11.1195 12.85 11.2993L12.85 16.0866L13 16.0873H12.85V16.0868C12.8492 16.2662 12.9114 16.4238 13.0369 16.5494C13.1623 16.6747 13.3197 16.7373 13.499 16.7373ZM17.499 16.7373L17.4997 16.7373C17.6789 16.7364 17.8363 16.6743 17.9617 16.5497C18.0876 16.4247 18.15 16.267 18.15 16.0873V7.29928C18.15 7.11895 18.0884 6.9607 17.9627 6.83585C17.8377 6.71175 17.6806 6.65013 17.5017 6.64929C17.3217 6.64844 17.1637 6.7105 17.0379 6.83622C16.9124 6.96176 16.85 7.11954 16.85 7.29928L16.85 16.0866L17 16.0873H16.85V16.0868C16.8492 16.2662 16.9114 16.4238 17.0369 16.5494C17.1623 16.6747 17.3197 16.7373 17.499 16.7373Z" fill="#747474" stroke="#747474" stroke-width="0.3"/>
-</svg>
diff --git a/frontend/src/assets/pin.svg b/frontend/src/assets/pin.svg
deleted file mode 100644
index 4e1d1071..00000000
--- a/frontend/src/assets/pin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pin-icon lucide-pin"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/red-trash.svg b/frontend/src/assets/red-trash.svg
deleted file mode 100644
index 8026236e..00000000
--- a/frontend/src/assets/red-trash.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.66574 13.7747C1.66574 14.2168 1.84635 14.6407 2.16784 14.9533C2.48933 15.2658 2.92537 15.4414 3.38002 15.4414H10.2372C10.6918 15.4414 11.1279 15.2658 11.4493 14.9533C11.7708 14.6407 11.9515 14.2168 11.9515 13.7747V3.77474H1.66574V13.7747ZM3.38002 5.44141H10.2372V13.7747H3.38002V5.44141ZM9.80859 1.27474L8.95145 0.441406H4.66574L3.80859 1.27474H0.808594V2.94141H12.8086V1.27474H9.80859Z" fill="#f44336"/>
-</svg>
diff --git a/frontend/src/assets/redirect.svg b/frontend/src/assets/redirect.svg
deleted file mode 100644
index 38432950..00000000
--- a/frontend/src/assets/redirect.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.22066 0.46934C5.36129 0.328889 5.55191 0.25 5.75066 0.25C5.94941 0.25 6.14003 0.328889 6.28066 0.46934L10.5307 4.71934C10.6711 4.85997 10.75 5.05059 10.75 5.24934C10.75 5.44809 10.6711 5.63871 10.5307 5.77934L6.28066 10.0293C6.13851 10.162 5.95041 10.2342 5.75602 10.2309C5.56163 10.2275 5.37614 10.1488 5.23866 10.0113C5.10119 9.87386 5.02247 9.68837 5.01911 9.49398C5.01576 9.29959 5.08802 9.11149 5.22066 8.96934L8.19066 5.99934L0.75066 5.99934C0.551747 5.99934 0.360983 5.92032 0.22033 5.77967C0.0796773 5.63902 0.000659715 5.44825 0.000659724 5.24934C0.000659733 5.05043 0.0796774 4.85966 0.22033 4.71901C0.360983 4.57836 0.551747 4.49934 0.75066 4.49934L8.19066 4.49934L5.22066 1.52934C5.08021 1.38871 5.00132 1.19809 5.00132 0.99934C5.00132 0.800589 5.08021 0.609965 5.22066 0.46934Z" fill="#7D54D1"/>
-</svg>
diff --git a/frontend/src/assets/rounded-tick.svg b/frontend/src/assets/rounded-tick.svg
deleted file mode 100644
index 5ab2e5ef..00000000
--- a/frontend/src/assets/rounded-tick.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 0.75C4.62391 0.75 0.25 5.12391 0.25 10.5C0.25 15.8761 4.62391 20.25 10 20.25C15.3761 20.25 19.75 15.8761 19.75 10.5C19.75 5.12391 15.3761 0.75 10 0.75ZM15.0742 7.23234L8.77422 14.7323C8.70511 14.8147 8.61912 14.8812 8.52207 14.9273C8.42502 14.9735 8.31918 14.9983 8.21172 15H8.19906C8.09394 15 7.99 14.9778 7.89398 14.935C7.79797 14.8922 7.71202 14.8297 7.64172 14.7516L4.94172 11.7516C4.87315 11.6788 4.81981 11.5931 4.78483 11.4995C4.74986 11.4059 4.73395 11.3062 4.73805 11.2063C4.74215 11.1064 4.76617 11.0084 4.8087 10.9179C4.85124 10.8275 4.91142 10.7464 4.98572 10.6796C5.06002 10.6127 5.14694 10.5614 5.24136 10.5286C5.33579 10.4958 5.43581 10.4822 5.53556 10.4886C5.63531 10.495 5.73277 10.5213 5.82222 10.5659C5.91166 10.6106 5.99128 10.6726 6.05641 10.7484L8.17938 13.1072L13.9258 6.26766C14.0547 6.11863 14.237 6.02631 14.4335 6.01066C14.6299 5.99501 14.8246 6.05728 14.9754 6.18402C15.1263 6.31075 15.2212 6.49176 15.2397 6.68793C15.2582 6.8841 15.1988 7.07966 15.0742 7.23234Z" fill="#B5B5B5"/>
-</svg>
diff --git a/frontend/src/assets/single-left-arrow.svg b/frontend/src/assets/single-left-arrow.svg
deleted file mode 100644
index f28b2592..00000000
--- a/frontend/src/assets/single-left-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.41 10.59L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.59Z" fill="black" fill-opacity="0.54" />
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/single-right-arrow.svg b/frontend/src/assets/single-right-arrow.svg
deleted file mode 100644
index 85729e57..00000000
--- a/frontend/src/assets/single-right-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0.59 1.41L5.17 6L0.59 10.59L2 12L8 6L2 0L0.59 1.41Z" fill="black" fill-opacity="0.54" />
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/source.svg b/frontend/src/assets/source.svg
deleted file mode 100644
index 06187a97..00000000
--- a/frontend/src/assets/source.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 10.5994V3.39941M11.6 3.39941V10.5994" stroke="#5D5D5D" stroke-width="0.9" stroke-linecap="round"/>
-<path d="M11.6 7C11.6 8.326 9.4508 9.4 6.8 9.4C4.1492 9.4 2 8.326 2 7M11.6 10.6C11.6 11.926 9.4508 13 6.8 13C4.1492 13 2 11.926 2 10.6M6.8 5.8C9.4508 5.8 11.6 4.726 11.6 3.4C11.6 2.074 9.4508 1 6.8 1C4.1492 1 2 2.074 2 3.4C2 4.726 4.1492 5.8 6.8 5.8Z" stroke="#5D5D5D" stroke-width="0.9"/>
-</svg>
diff --git a/frontend/src/assets/sources.svg b/frontend/src/assets/sources.svg
deleted file mode 100644
index 4bb7d30b..00000000
--- a/frontend/src/assets/sources.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.73517 17.2121L0.538918 17.9125C0.3753 18.0084 0.239616 18.1455 0.145332 18.31C0.0510491 18.4746 0.00144577 18.661 0.00144577 18.8506C0.00144577 19.0403 0.0510491 19.2267 0.145332 19.3912C0.239616 19.5558 0.3753 19.6929 0.538918 19.7888L11.0514 25.9513C11.2181 26.0489 11.4078 26.1004 11.601 26.1004C11.7941 26.1004 11.9838 26.0489 12.1505 25.9513L22.663 19.7888C22.8266 19.6929 22.9623 19.5558 23.0566 19.3912C23.1509 19.2267 23.2005 19.0403 23.2005 18.8506C23.2005 18.661 23.1509 18.4746 23.0566 18.31C22.9623 18.1455 22.8266 18.0084 22.663 17.9125L21.4668 17.2107L13.2511 22.0276C12.7506 22.321 12.1811 22.4757 11.601 22.4757C11.0209 22.4757 10.4513 22.321 9.95087 22.0276L1.73517 17.2121Z" fill="url(#paint0_linear_4013_8178)"/>
-<path d="M1.73517 11.4121L0.538918 12.1124C0.3753 12.2084 0.239616 12.3454 0.145332 12.51C0.0510491 12.6746 0.00144577 12.8609 0.00144577 13.0506C0.00144577 13.2403 0.0510491 13.4266 0.145332 13.5912C0.239616 13.7558 0.3753 13.8928 0.538918 13.9887L11.0514 20.1512C11.2181 20.2489 11.4078 20.3003 11.601 20.3003C11.7941 20.3003 11.9838 20.2489 12.1505 20.1512L22.663 13.9887C22.8266 13.8928 22.9623 13.7558 23.0566 13.5912C23.1509 13.4266 23.2005 13.2403 23.2005 13.0506C23.2005 12.8609 23.1509 12.6746 23.0566 12.51C22.9623 12.3454 22.8266 12.2084 22.663 12.1124L21.4668 11.4106L13.2511 16.2275C12.7506 16.5209 12.1811 16.6756 11.601 16.6756C11.0209 16.6756 10.4513 16.5209 9.95087 16.2275L1.73517 11.4121Z" fill="url(#paint1_linear_4013_8178)"/>
-<path d="M12.152 0.149921C11.9849 0.0517579 11.7947 0 11.601 0C11.4072 0 11.217 0.0517579 11.05 0.149921L0.537472 6.31242C0.373854 6.40835 0.23817 6.5454 0.143887 6.70997C0.0496035 6.87454 0 7.06091 0 7.25057C0 7.44024 0.0496035 7.6266 0.143887 7.79117C0.23817 7.95574 0.373854 8.09279 0.537472 8.18872L11.05 14.3512C11.217 14.4494 11.4072 14.5011 11.601 14.5011C11.7947 14.5011 11.9849 14.4494 12.152 14.3512L22.6645 8.18872C22.8281 8.09279 22.9638 7.95574 23.0581 7.79117C23.1523 7.6266 23.2019 7.44024 23.2019 7.25057C23.2019 7.06091 23.1523 6.87454 23.0581 6.70997C22.9638 6.5454 22.8281 6.40835 22.6645 6.31242L12.152 0.149921Z" fill="url(#paint2_linear_4013_8178)"/>
-<defs>
-<linearGradient id="paint0_linear_4013_8178" x1="0.00144577" y1="21.6555" x2="23.2005" y2="21.6555" gradientUnits="userSpaceOnUse">
-<stop stop-color="#70FDF7"/>
-<stop offset="0.325" stop-color="#747696"/>
-<stop offset="0.68" stop-color="#BD5372"/>
-<stop offset="1" stop-color="#F5A06C"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4013_8178" x1="0.00144577" y1="15.8555" x2="23.2005" y2="15.8555" gradientUnits="userSpaceOnUse">
-<stop stop-color="#70FDF7"/>
-<stop offset="0.325" stop-color="#747696"/>
-<stop offset="0.68" stop-color="#BD5372"/>
-<stop offset="1" stop-color="#F5A06C"/>
-</linearGradient>
-<linearGradient id="paint2_linear_4013_8178" x1="0" y1="7.25057" x2="23.2019" y2="7.25057" gradientUnits="userSpaceOnUse">
-<stop stop-color="#70FDF7"/>
-<stop offset="0.325" stop-color="#747696"/>
-<stop offset="0.68" stop-color="#BD5372"/>
-<stop offset="1" stop-color="#F5A06C"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/frontend/src/assets/speaker.svg b/frontend/src/assets/speaker.svg
deleted file mode 100644
index 6c379177..00000000
--- a/frontend/src/assets/speaker.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 9.59652V6.40372C1 5.94773 1.18114 5.51041 1.50358 5.18797C1.82602 4.86553 2.26334 4.68439 2.71933 4.68439H5.21237C5.38045 4.68435 5.54483 4.63503 5.68518 4.54254L10.8432 1.1417C10.9728 1.05636 11.1231 1.00768 11.2781 1.00084C11.4331 0.993993 11.5871 1.02924 11.7237 1.10283C11.8603 1.17643 11.9745 1.28563 12.054 1.41885C12.1336 1.55207 12.1756 1.70435 12.1757 1.85952V14.1407C12.1756 14.2959 12.1336 14.4482 12.054 14.5814C11.9745 14.7146 11.8603 14.8238 11.7237 14.8974C11.5871 14.971 11.4331 15.0063 11.2781 14.9994C11.1231 14.9926 10.9728 14.9439 10.8432 14.8585L5.68518 11.4577C5.54483 11.3652 5.38045 11.3159 5.21237 11.3159H2.71933C2.26334 11.3159 1.82602 11.1347 1.50358 10.8123C1.18114 10.4898 1 10.0525 1 9.59652Z" stroke="#949494" stroke-width="1.4"/>
-<path d="M15.1846 4.13149C15.1846 4.13149 16.4741 5.42099 16.4741 7.57016C16.4741 9.71932 15.1846 11.0088 15.1846 11.0088M17.7636 1.55249C17.7636 1.55249 19.9127 3.70166 19.9127 7.57016C19.9127 11.4387 17.7636 13.5878 17.7636 13.5878" stroke="#949494" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/stopspeech.svg b/frontend/src/assets/stopspeech.svg
deleted file mode 100644
index f77a235b..00000000
--- a/frontend/src/assets/stopspeech.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 1.14286C9.35622 1.14286 10.682 1.54502 11.8096 2.29849C12.9373 3.05197 13.8162 4.1229 14.3352 5.37588C14.8542 6.62886 14.99 8.0076 14.7254 9.33776C14.4608 10.6679 13.8077 11.8897 12.8487 12.8487C11.8897 13.8077 10.6679 14.4608 9.33776 14.7254C8.00761 14.99 6.62887 14.8542 5.37589 14.3352C4.12291 13.8162 3.05197 12.9373 2.2985 11.8096C1.54502 10.682 1.14286 9.35621 1.14286 8C1.14286 6.18137 1.86531 4.43723 3.15127 3.15127C4.43723 1.8653 6.18137 1.14286 8 1.14286ZM8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346626 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6568C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7601 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34314C12.1566 0.842854 10.1217 0 8 0Z" fill="#949494"/>
-<path d="M10.2857 5.71439V10.2858H5.71427V5.71439H10.2857ZM10.2857 4.57153H5.71427C5.41116 4.57153 5.12047 4.69194 4.90615 4.90627C4.69182 5.1206 4.57141 5.41129 4.57141 5.71439V10.2858C4.57141 10.5889 4.69182 10.8796 4.90615 11.0939C5.12047 11.3083 5.41116 11.4287 5.71427 11.4287H10.2857C10.5888 11.4287 10.8795 11.3083 11.0938 11.0939C11.3081 10.8796 11.4286 10.5889 11.4286 10.2858V5.71439C11.4286 5.41129 11.3081 5.1206 11.0938 4.90627C10.8795 4.69194 10.5888 4.57153 10.2857 4.57153Z" fill="#949494"/>
-</svg>
-
diff --git a/frontend/src/assets/sync.svg b/frontend/src/assets/sync.svg
deleted file mode 100644
index 4733bbdb..00000000
--- a/frontend/src/assets/sync.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#747474"><path d="M.01 0h24v24h-24V0z" fill="none"/><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/three-dots.svg b/frontend/src/assets/three-dots.svg
deleted file mode 100644
index 6462b942..00000000
--- a/frontend/src/assets/three-dots.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="25" viewBox="0 0 10 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 3.5C3.9 3.5 3 4.4 3 5.5C3 6.6 3.9 7.5 5 7.5C6.1 7.5 7 6.6 7 5.5C7 4.4 6.1 3.5 5 3.5ZM5 17.5C3.9 17.5 3 18.4 3 19.5C3 20.6 3.9 21.5 5 21.5C6.1 21.5 7 20.6 7 19.5C7 18.4 6.1 17.5 5 17.5ZM5 10.5C3.9 10.5 3 11.4 3 12.5C3 13.6 3.9 14.5 5 14.5C6.1 14.5 7 13.6 7 12.5C7 11.4 6.1 10.5 5 10.5Z" fill="#747474"/>
-</svg>
diff --git a/frontend/src/assets/tool.svg b/frontend/src/assets/tool.svg
deleted file mode 100644
index 3b4df3e3..00000000
--- a/frontend/src/assets/tool.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.82047 15.07H3.23047C2.40047 15.07 1.73047 14.4 1.73047 13.57V10.98C1.73047 10.58 1.89047 10.2 2.17047 9.91999L4.38047 7.70999C4.58047 7.50999 4.89047 7.50999 5.09047 7.70999C5.29047 7.90999 5.29047 8.21999 5.09047 8.41999L2.88047 10.63C2.78626 10.7223 2.73235 10.8481 2.73047 10.98V13.57C2.73047 13.85 2.95047 14.07 3.23047 14.07H5.82047C5.95047 14.07 6.08047 14.02 6.17047 13.92L8.38047 11.71C8.58047 11.51 8.89047 11.51 9.09047 11.71C9.29047 11.91 9.29047 12.22 9.09047 12.42L6.88047 14.63C6.60047 14.91 6.22047 15.07 5.82047 15.07ZM12.8505 8.44999C12.7849 8.45079 12.7199 8.43786 12.6596 8.41202C12.5993 8.38619 12.5451 8.34803 12.5005 8.29999C12.3005 8.09999 12.3005 7.78999 12.5005 7.58999L14.6005 5.48999C14.7905 5.29999 14.7905 4.97999 14.6005 4.77999L12.0105 2.18999C11.915 2.09844 11.7878 2.04732 11.6555 2.04732C11.5232 2.04732 11.396 2.09844 11.3005 2.18999L9.14047 4.34999C8.94047 4.54999 8.63047 4.54999 8.43047 4.34999C8.23047 4.14999 8.23047 3.83999 8.43047 3.63999L10.5905 1.47999C11.1605 0.90999 12.1405 0.90999 12.7105 1.47999L15.3005 4.06999C15.8805 4.64999 15.8805 5.60999 15.3005 6.18999L13.2005 8.28999C13.1005 8.38999 12.9705 8.43999 12.8505 8.43999V8.44999Z" fill="#5D5D5D"/>
-<path d="M11.6305 15.0605C11.2305 15.0605 10.8505 14.9005 10.5705 14.6205L8.38047 12.4305C8.18047 12.2305 8.18047 11.9205 8.38047 11.7205C8.58047 11.5205 8.89047 11.5205 9.09047 11.7205L11.2805 13.9105C11.4705 14.1005 11.8005 14.1005 11.9905 13.9105L14.5805 11.3205C14.7705 11.1305 14.7705 10.8105 14.5805 10.6105L12.3905 8.42055C12.1905 8.22055 12.1905 7.91055 12.3905 7.71055C12.5905 7.51055 12.9005 7.51055 13.1005 7.71055L15.2905 9.90055C15.8705 10.4805 15.8705 11.4405 15.2905 12.0205L12.7005 14.6105C12.4205 14.8905 12.0405 15.0505 11.6405 15.0505L11.6305 15.0605Z" fill="#5D5D5D"/>
-<path d="M8.98125 12.8195C8.91567 12.8203 8.85066 12.8073 8.79038 12.7815C8.7301 12.7557 8.6759 12.7175 8.63125 12.6695L2.09125 6.13945C1.51125 5.55945 1.51125 4.59945 2.09125 4.01945L4.68125 1.42945C5.25125 0.859453 6.23125 0.859453 6.80125 1.42945L13.3412 7.96945C13.5412 8.16945 13.5412 8.47945 13.3412 8.67945C13.1412 8.87945 12.8312 8.87945 12.6312 8.67945L6.09125 2.13945C5.99574 2.0479 5.86855 1.99678 5.73625 1.99678C5.60395 1.99678 5.47676 2.0479 5.38125 2.13945L2.79125 4.72945C2.60125 4.91945 2.60125 5.23945 2.79125 5.43945L9.33125 11.9795C9.53125 12.1795 9.53125 12.4895 9.33125 12.6895C9.23125 12.7895 9.10125 12.8395 8.98125 12.8395V12.8195Z" fill="#5D5D5D"/>
-<path d="M6.28906 6.01055C6.22349 6.01135 6.15847 5.99841 6.09819 5.97258C6.03791 5.94675 5.98371 5.90858 5.93906 5.86055C5.73906 5.66055 5.73906 5.35055 5.93906 5.15055L7.87906 3.21055C8.07906 3.01055 8.38906 3.01055 8.58906 3.21055C8.78906 3.41055 8.78906 3.72055 8.58906 3.92055L6.64906 5.86055C6.54906 5.96055 6.41906 6.01055 6.29906 6.01055H6.28906ZM8.31906 8.04055C8.25349 8.04135 8.18847 8.02841 8.12819 8.00258C8.06791 7.97675 8.01371 7.93858 7.96906 7.89055C7.76906 7.69055 7.76906 7.38055 7.96906 7.18055L9.90906 5.24055C10.1091 5.04055 10.4191 5.04055 10.6191 5.24055C10.8191 5.44055 10.8191 5.75055 10.6191 5.95055L8.67906 7.89055C8.57906 7.99055 8.44906 8.04055 8.32906 8.04055H8.31906ZM10.3491 10.0705C10.2835 10.0713 10.2185 10.0584 10.1582 10.0326C10.0979 10.0067 10.0437 9.96858 9.99906 9.92055C9.79906 9.72055 9.79906 9.41055 9.99906 9.21055L11.9391 7.27055C12.1391 7.07055 12.4491 7.07055 12.6491 7.27055C12.8491 7.47055 12.8491 7.78055 12.6491 7.98055L10.7091 9.92055C10.6091 10.0205 10.4791 10.0705 10.3591 10.0705H10.3491Z" fill="#5D5D5D"/>
-</svg>
diff --git a/frontend/src/assets/trash.svg b/frontend/src/assets/trash.svg
deleted file mode 100644
index d0e4546a..00000000
--- a/frontend/src/assets/trash.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 12 15" fill="none">
-  <path d="M0.857143 13.3333C0.857143 13.7754 1.03775 14.1993 1.35925 14.5118C1.68074 14.8244 2.11677 15 2.57143 15H9.42857C9.88323 15 10.3193 14.8244 10.6408 14.5118C10.9622 14.1993 11.1429 13.7754 11.1429 13.3333V3.33333H0.857143V13.3333ZM2.57143 5H9.42857V13.3333H2.57143V5ZM9 0.833333L8.14286 0H3.85714L3 0.833333H0V2.5H12V0.833333H9Z" fill="#747474"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/unpin.svg b/frontend/src/assets/unpin.svg
deleted file mode 100644
index edb46d5d..00000000
--- a/frontend/src/assets/unpin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pin-off-icon lucide-pin-off"><path d="M12 17v5"/><path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"/><path d="m2 2 20 20"/><path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/upload.svg b/frontend/src/assets/upload.svg
deleted file mode 100644
index 6ec01239..00000000
--- a/frontend/src/assets/upload.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.35 6.04C18.67 2.59 15.64 0 12 0C9.11 0 6.6 1.64 5.35 4.04C2.34 4.36 0 6.91 0 10C0 13.31 2.69 16 6 16H19C21.76 16 24 13.76 24 11C24 8.36 21.95 6.22 19.35 6.04ZM14 9V13H10V9H7L12 4L17 9H14Z" fill="gray" fill-opacity="0.85"/>
-</svg>
diff --git a/frontend/src/assets/user.svg b/frontend/src/assets/user.svg
deleted file mode 100644
index 970bffb5..00000000
--- a/frontend/src/assets/user.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 855.6 867.3" style="enable-background:new 0 0 855.6 867.3;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#SVGID_1_);}
-</style>
-<g id="Layer_2_00000062898455470481303740000016245162613792141746_">
-	<g id="avatar">
-		
-			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="281.0639" y1="214.2932" x2="737.1139" y2="670.3433" gradientTransform="matrix(1 0 0 -1 0 874.2527)">
-			<stop  offset="0" style="stop-color:#526676"/>
-			<stop  offset="1" style="stop-color:#6B9DBF"/>
-		</linearGradient>
-		<path class="st0" d="M725.1,663.3c-0.8,11.7-8,19.2-17.7,25c-25,14.9-51.5,26.3-79.2,35.1c-70.2,22.4-142.4,30.9-215.8,29.8
-			c-62.5-0.9-123.7-9.8-183.4-28.1c-32-9.8-62.8-22.3-91.7-39.3c-8.9-5.3-13.8-12.1-15-22.5c-2.5-21.2-2.4-42.6,0.3-63.8
-			c3.1-24,18-40.7,35.5-55.3c19.7-16.5,43.2-26,67.6-33c28.6-8.3,57.4-15.8,86-23.8c9.8,25.7,22.8,47,39,63.5
-			c22.4,22.8,50.2,35.3,78.4,35.3c41.9,0,80.6-26.8,103.4-71.6c4.2-8.3,8-16.8,11.3-25.5c7.4,2.5,14.9,4.6,22.5,6.5
-			c16.2,4.1,32.5,7.3,48.6,11.6c26.3,7.1,51.6,16.5,73.8,32.9c24.1,17.8,37.6,41.5,38.6,71.3C727.8,628.7,726.2,646,725.1,663.3z
-			 M317.7,351c2.7,2.5,4.7,5.7,5.8,9.3c3,10.3,4.8,21.1,8.2,31.3c8.2,24.8,20.8,47.4,41,64.4c18.7,15.8,40.5,23.3,61.9,23.3
-			c31.7,0,62.5-16.5,81.5-47.2c13.6-22.1,21.8-45.9,26.2-71.3c0.6-3.4,1.7-8,4.1-9.4c21.5-13,25.1-34,25.7-56.2
-			c0.2-8.3-1.7-9.6-8-10.3c0-17,0.6-33.8-0.2-50.6c-0.4-10.4-2.1-20.6-5-30.6c-8.3-27.4-25.6-46.7-53.6-55.1
-			c-4.3-1.3-10.5,0.2-12.9-3.9c-11-19.4-31.6-25.6-54.4-25.6c-19.3,0-40.2,4.4-58.6,9.2c-21.1,5.4-40.2,14.6-54.8,31.5
-			c-20.4,23.8-26.2,52.1-24.7,82.4c0.7,14.6,2.9,29.1,4.4,44.1c-10.9,0.9-11.2,4.8-11,13.6C293.9,321.5,301.4,336.5,317.7,351z"/>
-	</g>
-</g>
-</svg>
diff --git a/frontend/src/assets/warn.svg b/frontend/src/assets/warn.svg
deleted file mode 100644
index fdac9ad1..00000000
--- a/frontend/src/assets/warn.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 1.83989C16.5202 2.71758 17.7826 3.97997 18.6603 5.50017C19.538 7.02038 20 8.74483 20 10.5002C20 12.2556 19.5379 13.98 18.6602 15.5002C17.7825 17.0204 16.5201 18.2828 14.9999 19.1605C13.4797 20.0381 11.7552 20.5002 9.99984 20.5001C8.24446 20.5001 6.52002 20.038 4.99984 19.1603C3.47965 18.2826 2.21729 17.0202 1.33963 15.5C0.46198 13.9797 -4.45897e-05 12.2553 3.22765e-09 10.4999L0.00500012 10.1759C0.0610032 8.44888 0.563548 6.76585 1.46364 5.29089C2.36373 3.81592 3.63065 2.59934 5.14089 1.75977C6.65113 0.920205 8.35315 0.486289 10.081 0.50033C11.8089 0.514371 13.5036 0.97589 15 1.83989ZM10 13.4999C9.73478 13.4999 9.48043 13.6052 9.29289 13.7928C9.10536 13.9803 9 14.2347 9 14.4999V14.5099C9 14.7751 9.10536 15.0295 9.29289 15.217C9.48043 15.4045 9.73478 15.5099 10 15.5099C10.2652 15.5099 10.5196 15.4045 10.7071 15.217C10.8946 15.0295 11 14.7751 11 14.5099V14.4999C11 14.2347 10.8946 13.9803 10.7071 13.7928C10.5196 13.6052 10.2652 13.4999 10 13.4999ZM10 6.49989C9.73478 6.49989 9.48043 6.60525 9.29289 6.79279C9.10536 6.98032 9 7.23468 9 7.49989V11.4999C9 11.7651 9.10536 12.0195 9.29289 12.207C9.48043 12.3945 9.73478 12.4999 10 12.4999C10.2652 12.4999 10.5196 12.3945 10.7071 12.207C10.8946 12.0195 11 11.7651 11 11.4999V7.49989C11 7.23468 10.8946 6.98032 10.7071 6.79279C10.5196 6.60525 10.2652 6.49989 10 6.49989Z" fill="#EA4335"/>
-</svg>
diff --git a/frontend/src/components/ActionButtons.tsx b/frontend/src/components/ActionButtons.tsx
index 84f556af..ab6ab719 100644
--- a/frontend/src/components/ActionButtons.tsx
+++ b/frontend/src/components/ActionButtons.tsx
@@ -60,7 +60,7 @@ export default function ActionButtons({
             onClick={newChat}
             className="lg:hidden"
           >
-            <Plus className="size-5" strokeWidth={1.75} aria-label="NewChat" />
+            <Plus className="size-5" aria-label="NewChat" />
           </Button>
         )}
 
@@ -74,7 +74,7 @@ export default function ActionButtons({
               title={t('actionButtons.share')}
               onClick={() => setShareModalState(true)}
             >
-              <Share className="size-5" strokeWidth={1.75} aria-label="share" />
+              <Share className="size-5" aria-label="share" />
             </Button>
             {isShareModalOpen && (
               <ShareConversationModal
diff --git a/frontend/src/components/AdminRoute.tsx b/frontend/src/components/AdminRoute.tsx
index 90e9a5cc..c6d857d3 100644
--- a/frontend/src/components/AdminRoute.tsx
+++ b/frontend/src/components/AdminRoute.tsx
@@ -5,7 +5,7 @@ import {
   selectIsAdmin,
   selectRolesResolved,
 } from '../preferences/preferenceSlice';
-import Spinner from './Spinner';
+import { Spinner } from '@/components/ui/spinner';
 
 /**
  * Cosmetic route guard — NOT a security boundary. The server enforces admin
diff --git a/frontend/src/components/ArtifactSidebar.tsx b/frontend/src/components/ArtifactSidebar.tsx
index f32ab4bb..b8a739ec 100644
--- a/frontend/src/components/ArtifactSidebar.tsx
+++ b/frontend/src/components/ArtifactSidebar.tsx
@@ -17,7 +17,7 @@ import { selectToken } from '../preferences/preferenceSlice';
 import { isDocumentArtifact, type DocumentArtifact } from './artifactViewUtils';
 import CopyButton from './CopyButton';
 import DocumentArtifactView from './DocumentArtifactView';
-import Spinner from './Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import { Badge } from './ui/badge';
 import { Button } from './ui/button';
 import { Sheet, SheetContent } from './ui/sheet';
diff --git a/frontend/src/components/Chunks.tsx b/frontend/src/components/Chunks.tsx
index f0f39b89..8e25a3e1 100644
--- a/frontend/src/components/Chunks.tsx
+++ b/frontend/src/components/Chunks.tsx
@@ -1,4 +1,4 @@
-import { Search as SearchIcon } from 'lucide-react';
+import { ArrowLeft, File, Folder, Search as SearchIcon } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -6,9 +6,6 @@ import { useSelector } from 'react-redux';
 import { cn } from '@/lib/utils';
 
 import userService from '../api/services/userService';
-import ArrowLeft from '../assets/arrow-left.svg';
-import FileIcon from '../assets/file.svg';
-import FolderIcon from '../assets/folder.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import {
@@ -326,7 +323,7 @@ const Chunks: React.FC<ChunksProps> = ({
                   : handleGoBack
             }
           >
-            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+            <ArrowLeft />
           </Button>
 
           <div className="flex flex-wrap items-center">
@@ -510,7 +507,6 @@ const Chunks: React.FC<ChunksProps> = ({
           leftIcon={
             <SearchIcon
               className="text-muted-foreground size-4"
-              strokeWidth={1.75}
               aria-label="Search"
             />
           }
@@ -529,17 +525,17 @@ const Chunks: React.FC<ChunksProps> = ({
                     key={index}
                     title={result.path}
                     onClick={() => handleSearchResultClick(result)}
-                    className={`hover:bg-muted dark:hover:bg-muted flex cursor-pointer items-center px-3 py-2 ${
+                    className={`hover:bg-muted flex cursor-pointer items-center px-3 py-2 ${
                       index !== fileSearchResults.length - 1
-                        ? 'border-border dark:border-border border-b'
+                        ? 'border-border border-b'
                         : ''
                     }`}
                   >
-                    <img
-                      src={result.isFile ? FileIcon : FolderIcon}
-                      alt={result.isFile ? 'File' : 'Folder'}
-                      className="mr-2 h-4 w-4 shrink-0"
-                    />
+                    {result.isFile ? (
+                      <File className="text-muted-foreground mr-2 size-4 shrink-0" />
+                    ) : (
+                      <Folder className="text-primary mr-2 size-4 shrink-0" />
+                    )}
                     <span className="truncate text-sm">
                       {result.name ||
                         result.path.split('/').pop() ||
@@ -568,7 +564,7 @@ const Chunks: React.FC<ChunksProps> = ({
           {!editingChunk && !isAddingChunk ? (
             <>
               <div className="mb-3 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
-                <div className="border-border dark:border-border flex h-[38px] w-full flex-1 items-center overflow-hidden rounded-md border">
+                <div className="border-border flex h-[38px] w-full flex-1 items-center overflow-hidden rounded-md border">
                   <div className="text-foreground flex h-full items-center px-4 font-medium whitespace-nowrap">
                     {totalChunks > 999999
                       ? `${(totalChunks / 1000000).toFixed(2)}M`
@@ -577,7 +573,7 @@ const Chunks: React.FC<ChunksProps> = ({
                         : totalChunks}{' '}
                     {t('settings.sources.chunks')}
                   </div>
-                  <div className="bg-border dark:bg-border h-full w-px"></div>
+                  <div className="bg-border h-full w-px"></div>
                   <div className="h-full flex-1 px-3 py-2">
                     <Input
                       type="text"
@@ -622,7 +618,7 @@ const Chunks: React.FC<ChunksProps> = ({
                     filteredChunks.map((chunk, index) => (
                       <div
                         key={index}
-                        className="border-border dark:border-border relative flex h-[197px] w-full max-w-[487px] transform cursor-pointer flex-col justify-between overflow-hidden rounded-md border transition-transform duration-200 hover:scale-105"
+                        className="border-border relative flex h-[197px] w-full max-w-[487px] transform cursor-pointer flex-col justify-between overflow-hidden rounded-md border transition-transform duration-200 hover:scale-105"
                         onClick={() => {
                           setEditingChunk(chunk);
                           setEditingTitle(chunk.metadata?.title || '');
@@ -650,7 +646,7 @@ const Chunks: React.FC<ChunksProps> = ({
             </>
           ) : isAddingChunk ? (
             <div className="w-full">
-              <div className="border-border dark:border-border relative overflow-hidden rounded-lg border">
+              <div className="border-border relative overflow-hidden rounded-lg border">
                 <LineNumberedTextarea
                   value={editingText}
                   onChange={setEditingText}
@@ -662,7 +658,7 @@ const Chunks: React.FC<ChunksProps> = ({
           ) : (
             editingChunk && (
               <div className="w-full">
-                <div className="border-border dark:border-border relative flex w-full flex-col overflow-hidden rounded-md border">
+                <div className="border-border relative flex w-full flex-col overflow-hidden rounded-md border">
                   <div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
                     <div className="text-muted-foreground text-sm">
                       {formatChunkTokens(editingChunk.metadata)}{' '}
diff --git a/frontend/src/components/ConfigFields.tsx b/frontend/src/components/ConfigFields.tsx
index 27ad8e1a..68513901 100644
--- a/frontend/src/components/ConfigFields.tsx
+++ b/frontend/src/components/ConfigFields.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 
 import { ConfigRequirements } from '../modals/types';
+import { FormField } from './ui/form-field';
 import { Input } from './ui/input';
-import { Label } from './ui/label';
 import {
   Select,
   SelectContent,
@@ -59,26 +59,22 @@ export default function ConfigFields({
         const hasEncrypted =
           isEditing && spec.secret && hasEncryptedCredentials;
         const placeholder = hasEncrypted ? '••••••••' : '';
-        const hasError = !!errors[key];
+        const error = errors[key] || undefined;
 
         if (spec.enum) {
           return (
-            <div key={key} className="flex flex-col gap-1.5">
-              <Label htmlFor={key}>
-                {spec.label || key}
-                {spec.required && <span className="text-destructive">*</span>}
-              </Label>
+            <FormField
+              key={key}
+              id={key}
+              label={spec.label || key}
+              required={!!spec.required}
+              error={error}
+            >
               <Select
                 value={value || spec.default || ''}
                 onValueChange={(v) => onChange(key, v)}
               >
-                <SelectTrigger
-                  id={key}
-                  variant="ghost"
-                  size="lg"
-                  aria-invalid={hasError || undefined}
-                  className="w-full"
-                >
+                <SelectTrigger variant="ghost" size="lg" className="w-full">
                   <SelectValue placeholder={spec.label || key} />
                 </SelectTrigger>
                 <SelectContent>
@@ -90,19 +86,17 @@ export default function ConfigFields({
                   ))}
                 </SelectContent>
               </Select>
-              {hasError && (
-                <p className="text-destructive text-xs">{errors[key]}</p>
-              )}
-            </div>
+            </FormField>
           );
         }
 
         return (
-          <div key={key} className="flex flex-col gap-1.5">
-            <Label htmlFor={key}>
-              {spec.label || key}
-              {spec.required && <span className="text-destructive">*</span>}
-            </Label>
+          <FormField
+            key={key}
+            label={spec.label || key}
+            required={!!spec.required}
+            error={error}
+          >
             <Input
               id={key}
               type={
@@ -130,12 +124,8 @@ export default function ConfigFields({
               max={
                 spec.type === 'number' && key === 'timeout' ? 300 : undefined
               }
-              aria-invalid={hasError || undefined}
             />
-            {hasError && (
-              <p className="text-destructive text-xs">{errors[key]}</p>
-            )}
-          </div>
+          </FormField>
         );
       })}
     </div>
diff --git a/frontend/src/components/ConnectorTree.tsx b/frontend/src/components/ConnectorTree.tsx
index abd655e4..9390e8ea 100644
--- a/frontend/src/components/ConnectorTree.tsx
+++ b/frontend/src/components/ConnectorTree.tsx
@@ -1,10 +1,10 @@
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { Check, RefreshCw } from 'lucide-react';
 
 import userService from '../api/services/userService';
-import CheckmarkIcon from '../assets/checkMark2.svg';
-import SyncIcon from '../assets/sync.svg';
+import { Spinner } from '@/components/ui/spinner';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -122,11 +122,19 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
               : t('settings.sources.sync')
         }
       >
-        <img
-          src={syncDone ? CheckmarkIcon : SyncIcon}
-          alt={t('settings.sources.sync')}
-          className={`mr-2 h-4 w-4 brightness-0 invert filter ${isSyncing ? 'animate-spin' : ''}`}
-        />
+        {syncDone ? (
+          <Check className="mr-2 size-4" />
+        ) : isSyncing ? (
+          // The busy state shows its percentage, so it keeps the label and
+          // draws the app's ring spinner at icon size (DESIGN.md, Button).
+          <Spinner
+            size="sm"
+            className="mr-2 size-4"
+            label={t('settings.sources.syncing')}
+          />
+        ) : (
+          <RefreshCw className="mr-2 size-4" />
+        )}
         {isSyncing
           ? `${syncProgress}%`
           : syncDone
diff --git a/frontend/src/components/DocumentArtifactView.tsx b/frontend/src/components/DocumentArtifactView.tsx
index 447dcce2..0ccc891d 100644
--- a/frontend/src/components/DocumentArtifactView.tsx
+++ b/frontend/src/components/DocumentArtifactView.tsx
@@ -7,7 +7,7 @@ import { useDarkTheme } from '../hooks';
 import { selectToken } from '../preferences/preferenceSlice';
 import MarkdownPreview from './MarkdownPreview';
 import { renderMermaidDiagram } from './mermaidSecurity';
-import Spinner from './Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import {
   buildPreviewDocument,
   bytesPreviewModeForMime,
@@ -141,13 +141,9 @@ function DownloadCard({
           variant="outline"
           size="sm"
           onClick={onDownload}
-          disabled={downloading}
+          loading={downloading}
         >
-          {downloading ? (
-            <Spinner size="small" />
-          ) : (
-            <Download className="h-4 w-4" />
-          )}
+          <Download className="h-4 w-4" />
           Download
         </Button>
       </div>
@@ -396,13 +392,9 @@ export default function DocumentArtifactView({
           variant="outline"
           size="sm"
           onClick={handleDownload}
-          disabled={downloading}
+          loading={downloading}
         >
-          {downloading ? (
-            <Spinner size="small" />
-          ) : (
-            <Download className="h-4 w-4" />
-          )}
+          <Download className="h-4 w-4" />
           Download
         </Button>
 
@@ -412,13 +404,9 @@ export default function DocumentArtifactView({
             variant="ghost"
             size="sm"
             onClick={handleRestore}
-            disabled={restoring}
+            loading={restoring}
           >
-            {restoring ? (
-              <Spinner size="small" />
-            ) : (
-              <RotateCcw className="h-4 w-4" />
-            )}
+            <RotateCcw className="h-4 w-4" />
             Restore
           </Button>
         )}
diff --git a/frontend/src/components/DocumentPagination.test.tsx b/frontend/src/components/DocumentPagination.test.tsx
index 489ab9e2..e7b77f0f 100644
--- a/frontend/src/components/DocumentPagination.test.tsx
+++ b/frontend/src/components/DocumentPagination.test.tsx
@@ -73,4 +73,20 @@ describe('DocumentPagination rows-per-page', () => {
     await act(async () => option!.click());
     expect(onChange).toHaveBeenCalledWith(50);
   });
+
+  it('labels the page buttons by their action', async () => {
+    await render();
+    const labels = Array.from(
+      container.querySelectorAll<HTMLButtonElement>('button[aria-label]'),
+    ).map((b) => b.getAttribute('aria-label'));
+    expect(labels).toEqual(
+      expect.arrayContaining([
+        'pagination.firstPage',
+        'pagination.previousPage',
+        'pagination.nextPage',
+        'pagination.lastPage',
+      ]),
+    );
+    expect(container.querySelector('img')).toBeNull();
+  });
 });
diff --git a/frontend/src/components/DocumentPagination.tsx b/frontend/src/components/DocumentPagination.tsx
index 8461a1d5..53bfcc38 100644
--- a/frontend/src/components/DocumentPagination.tsx
+++ b/frontend/src/components/DocumentPagination.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import SingleArrowLeft from '../assets/single-left-arrow.svg';
-import SingleArrowRight from '../assets/single-right-arrow.svg';
-import DoubleArrowLeft from '../assets/double-arrow-left.svg';
-import DoubleArrowRight from '../assets/double-arrow-right.svg';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react';
 import { Button } from './ui/button';
 import {
   Select,
@@ -88,12 +90,9 @@ const Pagination: React.FC<PaginationProps> = ({
           size="icon-xs"
           onClick={handleFirstPage}
           disabled={currentPage === 1}
+          aria-label={t('pagination.firstPage')}
         >
-          <img
-            src={DoubleArrowLeft}
-            alt={t('pagination.firstPage')}
-            className="dark:brightness-200 dark:invert dark:sepia"
-          />
+          <ChevronsLeft />
         </Button>
         <Button
           type="button"
@@ -101,12 +100,9 @@ const Pagination: React.FC<PaginationProps> = ({
           size="icon-xs"
           onClick={handlePreviousPage}
           disabled={currentPage === 1}
+          aria-label={t('pagination.previousPage')}
         >
-          <img
-            src={SingleArrowLeft}
-            alt={t('pagination.previousPage')}
-            className="dark:brightness-200 dark:invert dark:sepia"
-          />
+          <ChevronLeft />
         </Button>
         <Button
           type="button"
@@ -114,12 +110,9 @@ const Pagination: React.FC<PaginationProps> = ({
           size="icon-xs"
           onClick={handleNextPage}
           disabled={currentPage === totalPages}
+          aria-label={t('pagination.nextPage')}
         >
-          <img
-            src={SingleArrowRight}
-            alt={t('pagination.nextPage')}
-            className="dark:brightness-200 dark:invert dark:sepia"
-          />
+          <ChevronRight />
         </Button>
         <Button
           type="button"
@@ -127,12 +120,9 @@ const Pagination: React.FC<PaginationProps> = ({
           size="icon-xs"
           onClick={handleLastPage}
           disabled={currentPage === totalPages}
+          aria-label={t('pagination.lastPage')}
         >
-          <img
-            src={DoubleArrowRight}
-            alt={t('pagination.lastPage')}
-            className="dark:brightness-200 dark:invert dark:sepia"
-          />
+          <ChevronsRight />
         </Button>
       </div>
     </div>
diff --git a/frontend/src/components/FilePicker.test.tsx b/frontend/src/components/FilePicker.test.tsx
index e6a4772b..c4e7636d 100644
--- a/frontend/src/components/FilePicker.test.tsx
+++ b/frontend/src/components/FilePicker.test.tsx
@@ -86,15 +86,21 @@ describe('FilePicker', () => {
 
   it('renders the drive switch as underline tabs with the active one marked', async () => {
     await renderSharePoint();
+    const list = container.querySelector('[data-slot="tabs-list"]')!;
+    expect(list.getAttribute('role')).toBe('tablist');
+    expect(list.getAttribute('data-variant')).toBe('underline');
     const tabs = Array.from(
-      container.querySelectorAll('[data-slot="button"][data-variant="tab"]'),
+      list.querySelectorAll('[data-slot="tabs-trigger"][role="tab"]'),
     );
     expect(tabs.map((tab) => tab.textContent)).toEqual([
       'filePicker.myFiles',
       'filePicker.sharedWithMe',
     ]);
-    expect(tabs[0].getAttribute('data-active')).toBe('true');
-    expect(tabs[1].getAttribute('data-active')).not.toBe('true');
+    expect(tabs[0].getAttribute('aria-selected')).toBe('true');
+    expect(tabs[1].getAttribute('aria-selected')).toBe('false');
+    // The file list below is the active tab's panel.
+    const panel = container.querySelector('[role="tabpanel"]')!;
+    expect(panel.id).toBe(tabs[0].getAttribute('aria-controls'));
   });
 
   it('shows the folder trail as a breadcrumb with the current folder as the page', async () => {
diff --git a/frontend/src/components/FilePicker.tsx b/frontend/src/components/FilePicker.tsx
index ced97c52..ac1517d9 100644
--- a/frontend/src/components/FilePicker.tsx
+++ b/frontend/src/components/FilePicker.tsx
@@ -1,4 +1,10 @@
-import { Search as SearchIcon, TriangleAlert } from 'lucide-react';
+import {
+  Check,
+  File,
+  Folder,
+  Search as SearchIcon,
+  TriangleAlert,
+} from 'lucide-react';
 import React, {
   Fragment,
   useState,
@@ -16,9 +22,6 @@ import {
   removeSessionToken,
 } from '../utils/providerUtils';
 import ConnectorAuth from '../components/ConnectorAuth';
-import FileIcon from '../assets/file.svg';
-import FolderIcon from '../assets/folder.svg';
-import CheckIcon from '../assets/checkmark.svg';
 import { Alert, AlertDescription } from './ui/alert';
 import {
   Breadcrumb,
@@ -28,7 +31,6 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from './ui/breadcrumb';
-import { Button } from './ui/button';
 import { Input } from './ui/input';
 import {
   Table,
@@ -39,6 +41,7 @@ import {
   TableHeader,
   TableCell,
 } from './ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
 import { useDebouncedCallback } from '../hooks';
 
 interface CloudFile {
@@ -50,6 +53,26 @@ interface CloudFile {
   isFolder?: boolean;
 }
 
+/**
+ * The file browser under the drive tabs. With the tabs shown it is the active
+ * tab's panel; without them (one drive) it renders as is.
+ */
+function DrivePanel({
+  tabbed,
+  value,
+  children,
+}: {
+  tabbed: boolean;
+  value: string;
+  children: React.ReactNode;
+}) {
+  return tabbed ? (
+    <TabsContent value={value}>{children}</TabsContent>
+  ) : (
+    <>{children}</>
+  );
+}
+
 interface CloudFilePickerProps {
   onSelectionChange: (
     selectedFileIds: string[],
@@ -354,6 +377,8 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
     }
   };
 
+  const showDriveTabs = provider === 'share_point' && allowsSharedContent;
+
   const handleTabChange = (tab: 'my_files' | 'shared') => {
     if (tab === activeTab) return;
     setActiveTab(tab);
@@ -448,115 +473,182 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
 
       {isConnected && (
         <div className="border-border mt-3 overflow-hidden rounded-lg border">
-          <div className="border-border rounded-t-lg">
-            {provider === 'share_point' && allowsSharedContent && (
-              <div className="border-border flex border-b">
-                <Button
-                  type="button"
-                  variant="tab"
-                  data-active={activeTab === 'my_files'}
-                  onClick={() => handleTabChange('my_files')}
-                >
+          <Tabs
+            value={activeTab}
+            onValueChange={(value) =>
+              handleTabChange(value as 'my_files' | 'shared')
+            }
+          >
+            {showDriveTabs && (
+              <TabsList variant="underline">
+                <TabsTrigger variant="underline" value="my_files">
                   {t('filePicker.myFiles')}
-                </Button>
-                <Button
-                  type="button"
-                  variant="tab"
-                  data-active={activeTab === 'shared'}
-                  onClick={() => handleTabChange('shared')}
-                >
+                </TabsTrigger>
+                <TabsTrigger variant="underline" value="shared">
                   {t('filePicker.sharedWithMe')}
-                </Button>
-              </div>
+                </TabsTrigger>
+              </TabsList>
             )}
-            <div className="bg-muted rounded-t-lg px-4 pt-4">
-              <Breadcrumb className="mb-2 min-w-0">
-                <BreadcrumbList className="flex-nowrap">
-                  {folderPath.map((path, index) => (
-                    <Fragment key={path.id || 'root'}>
-                      {index > 0 && <BreadcrumbSeparator />}
-                      {index === folderPath.length - 1 ? (
-                        <BreadcrumbItem className="min-w-0">
-                          <BreadcrumbPage
-                            title={path.name}
-                            className="max-w-[32ch]"
-                          >
-                            {path.name}
-                          </BreadcrumbPage>
-                        </BreadcrumbItem>
-                      ) : (
-                        <BreadcrumbItem>
-                          <BreadcrumbLink asChild>
-                            <button
-                              type="button"
-                              onClick={() => navigateBack(index)}
+            <DrivePanel tabbed={showDriveTabs} value={activeTab}>
+              <div className="bg-muted rounded-t-lg px-4 pt-4">
+                <Breadcrumb className="mb-2 min-w-0">
+                  <BreadcrumbList className="flex-nowrap">
+                    {folderPath.map((path, index) => (
+                      <Fragment key={path.id || 'root'}>
+                        {index > 0 && <BreadcrumbSeparator />}
+                        {index === folderPath.length - 1 ? (
+                          <BreadcrumbItem className="min-w-0">
+                            <BreadcrumbPage
+                              title={path.name}
+                              className="max-w-[32ch]"
                             >
                               {path.name}
-                            </button>
-                          </BreadcrumbLink>
-                        </BreadcrumbItem>
-                      )}
-                    </Fragment>
-                  ))}
-                </BreadcrumbList>
-              </Breadcrumb>
+                            </BreadcrumbPage>
+                          </BreadcrumbItem>
+                        ) : (
+                          <BreadcrumbItem>
+                            <BreadcrumbLink asChild>
+                              <button
+                                type="button"
+                                onClick={() => navigateBack(index)}
+                              >
+                                {path.name}
+                              </button>
+                            </BreadcrumbLink>
+                          </BreadcrumbItem>
+                        )}
+                      </Fragment>
+                    ))}
+                  </BreadcrumbList>
+                </Breadcrumb>
 
-              <div className="text-muted-foreground mb-3 text-sm">
-                Select Files from {getProviderConfig(provider).displayName}
+                <div className="text-muted-foreground mb-3 text-sm">
+                  Select Files from {getProviderConfig(provider).displayName}
+                </div>
+
+                <div className="mb-3 max-w-md">
+                  <Input
+                    type="text"
+                    label={t('filePicker.searchPlaceholder')}
+                    value={searchQuery}
+                    onChange={(e) => handleSearchChange(e.target.value)}
+                    labelSurface="muted"
+                    leftIcon={
+                      <SearchIcon className="text-muted-foreground size-4" />
+                    }
+                  />
+                </div>
+
+                {/* Selected Files Message */}
+                <div className="text-muted-foreground pb-3 text-sm">
+                  {t('filePicker.itemsSelected', {
+                    count: selectedFiles.length + selectedFolders.length,
+                  })}
+                </div>
               </div>
 
-              <div className="mb-3 max-w-md">
-                <Input
-                  type="text"
-                  label={t('filePicker.searchPlaceholder')}
-                  value={searchQuery}
-                  onChange={(e) => handleSearchChange(e.target.value)}
-                  labelSurface="muted"
-                  leftIcon={
-                    <SearchIcon
-                      className="text-muted-foreground size-4"
-                      strokeWidth={1.75}
-                    />
-                  }
-                />
-              </div>
-
-              {/* Selected Files Message */}
-              <div className="text-muted-foreground pb-3 text-sm">
-                {t('filePicker.itemsSelected', {
-                  count: selectedFiles.length + selectedFolders.length,
-                })}
-              </div>
-            </div>
-
-            <div className="border-border scrollbar-overlay h-72 border-t">
-              <TableContainer
-                ref={scrollContainerRef}
-                height="288px"
-                className="md:w-4xl lg:w-5xl"
-                bordered={false}
-              >
-                {
-                  <>
-                    <Table minWidth="1200px">
-                      <TableHead>
-                        <TableRow>
-                          <TableHeader width="40px"></TableHeader>
-                          <TableHeader width="60%">
-                            {t('filePicker.name')}
-                          </TableHeader>
-                          <TableHeader width="20%">
-                            {t('filePicker.lastModified')}
-                          </TableHeader>
-                          <TableHeader width="20%">
-                            {t('filePicker.size')}
-                          </TableHeader>
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        {isLoading && files.length === 0
-                          ? Array.from({ length: 5 }).map((_, i) => (
-                              <TableRow key={`skeleton-${i}`}>
+              <div className="border-border scrollbar-overlay h-72 border-t">
+                <TableContainer
+                  ref={scrollContainerRef}
+                  height="288px"
+                  className="md:w-4xl lg:w-5xl"
+                  bordered={false}
+                >
+                  {
+                    <>
+                      <Table minWidth="1200px">
+                        <TableHead>
+                          <TableRow>
+                            <TableHeader width="40px"></TableHeader>
+                            <TableHeader width="60%">
+                              {t('filePicker.name')}
+                            </TableHeader>
+                            <TableHeader width="20%">
+                              {t('filePicker.lastModified')}
+                            </TableHeader>
+                            <TableHeader width="20%">
+                              {t('filePicker.size')}
+                            </TableHeader>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {isLoading && files.length === 0
+                            ? Array.from({ length: 5 }).map((_, i) => (
+                                <TableRow key={`skeleton-${i}`}>
+                                  <TableCell width="40px" align="center">
+                                    <div className="bg-muted mx-auto h-5 w-5 animate-pulse rounded" />
+                                  </TableCell>
+                                  <TableCell>
+                                    <div className="bg-muted h-4 w-48 animate-pulse rounded" />
+                                  </TableCell>
+                                  <TableCell>
+                                    <div className="bg-muted h-4 w-24 animate-pulse rounded" />
+                                  </TableCell>
+                                  <TableCell>
+                                    <div className="bg-muted h-4 w-16 animate-pulse rounded" />
+                                  </TableCell>
+                                </TableRow>
+                              ))
+                            : files.map((file, index) => (
+                                <TableRow
+                                  key={`${file.id}-${index}`}
+                                  onClick={() => {
+                                    if (isFolder(file)) {
+                                      handleFolderClick(file.id, file.name);
+                                    } else {
+                                      handleFileSelect(file.id, false);
+                                    }
+                                  }}
+                                >
+                                  <TableCell width="40px" align="center">
+                                    <div
+                                      className="border-border mx-auto flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center border text-sm"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleFileSelect(
+                                          file.id,
+                                          isFolder(file),
+                                        );
+                                      }}
+                                    >
+                                      {(isFolder(file)
+                                        ? selectedFolders
+                                        : selectedFiles
+                                      ).includes(file.id) && (
+                                        <Check
+                                          role="img"
+                                          aria-label="Selected"
+                                          className="text-success size-4"
+                                        />
+                                      )}
+                                    </div>
+                                  </TableCell>
+                                  <TableCell>
+                                    <div className="flex min-w-0 items-center gap-3">
+                                      <div className="shrink-0">
+                                        {isFolder(file) ? (
+                                          <Folder className="text-primary size-6" />
+                                        ) : (
+                                          <File className="text-muted-foreground size-6" />
+                                        )}
+                                      </div>
+                                      <span className="truncate">
+                                        {file.name}
+                                      </span>
+                                    </div>
+                                  </TableCell>
+                                  <TableCell className="text-xs">
+                                    {formatDateTime(file.modifiedTime)}
+                                  </TableCell>
+                                  <TableCell className="text-xs">
+                                    {file.size ? formatBytes(file.size) : '-'}
+                                  </TableCell>
+                                </TableRow>
+                              ))}
+                          {isLoading &&
+                            files.length > 0 &&
+                            Array.from({ length: 3 }).map((_, i) => (
+                              <TableRow key={`load-more-skeleton-${i}`}>
                                 <TableCell width="40px" align="center">
                                   <div className="bg-muted mx-auto h-5 w-5 animate-pulse rounded" />
                                 </TableCell>
@@ -570,87 +662,15 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
                                   <div className="bg-muted h-4 w-16 animate-pulse rounded" />
                                 </TableCell>
                               </TableRow>
-                            ))
-                          : files.map((file, index) => (
-                              <TableRow
-                                key={`${file.id}-${index}`}
-                                onClick={() => {
-                                  if (isFolder(file)) {
-                                    handleFolderClick(file.id, file.name);
-                                  } else {
-                                    handleFileSelect(file.id, false);
-                                  }
-                                }}
-                              >
-                                <TableCell width="40px" align="center">
-                                  <div
-                                    className="border-border mx-auto flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center border text-sm"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleFileSelect(file.id, isFolder(file));
-                                    }}
-                                  >
-                                    {(isFolder(file)
-                                      ? selectedFolders
-                                      : selectedFiles
-                                    ).includes(file.id) && (
-                                      <img
-                                        src={CheckIcon}
-                                        alt="Selected"
-                                        className="h-4 w-4"
-                                      />
-                                    )}
-                                  </div>
-                                </TableCell>
-                                <TableCell>
-                                  <div className="flex min-w-0 items-center gap-3">
-                                    <div className="shrink-0">
-                                      <img
-                                        src={
-                                          isFolder(file) ? FolderIcon : FileIcon
-                                        }
-                                        alt={isFolder(file) ? 'Folder' : 'File'}
-                                        className="h-6 w-6"
-                                      />
-                                    </div>
-                                    <span className="truncate">
-                                      {file.name}
-                                    </span>
-                                  </div>
-                                </TableCell>
-                                <TableCell className="text-xs">
-                                  {formatDateTime(file.modifiedTime)}
-                                </TableCell>
-                                <TableCell className="text-xs">
-                                  {file.size ? formatBytes(file.size) : '-'}
-                                </TableCell>
-                              </TableRow>
                             ))}
-                        {isLoading &&
-                          files.length > 0 &&
-                          Array.from({ length: 3 }).map((_, i) => (
-                            <TableRow key={`load-more-skeleton-${i}`}>
-                              <TableCell width="40px" align="center">
-                                <div className="bg-muted mx-auto h-5 w-5 animate-pulse rounded" />
-                              </TableCell>
-                              <TableCell>
-                                <div className="bg-muted h-4 w-48 animate-pulse rounded" />
-                              </TableCell>
-                              <TableCell>
-                                <div className="bg-muted h-4 w-24 animate-pulse rounded" />
-                              </TableCell>
-                              <TableCell>
-                                <div className="bg-muted h-4 w-16 animate-pulse rounded" />
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                      </TableBody>
-                    </Table>
-                  </>
-                }
-              </TableContainer>
-            </div>
-          </div>
+                        </TableBody>
+                      </Table>
+                    </>
+                  }
+                </TableContainer>
+              </div>
+            </DrivePanel>
+          </Tabs>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/FileTree.tsx b/frontend/src/components/FileTree.tsx
index 34586151..2cffeebd 100644
--- a/frontend/src/components/FileTree.tsx
+++ b/frontend/src/components/FileTree.tsx
@@ -1,17 +1,14 @@
-import React, { SyntheticEvent, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import userService from '../api/services/userService';
-import Trash from '../assets/red-trash.svg';
+import { Trash2 } from 'lucide-react';
 import { SOURCE_FILE_TREE_ACCEPT_ATTR } from '../constants/fileUpload';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { selectToken } from '../preferences/preferenceSlice';
 import TreeBrowser from './tree/TreeBrowser';
-import type {
-  RowMenuContext,
-  TreeBrowserController,
-  TreeMenuOption,
-} from './tree/types';
+import type { MenuOption } from './ui/dropdown-menu';
+import type { RowMenuContext, TreeBrowserController } from './tree/types';
 import { useReingestSseWaiter } from './tree/useReingestWait';
 
 type QueuedOperation = {
@@ -211,18 +208,13 @@ const FileTree: React.FC<FileTreeProps> = ({
     name,
     isFile,
     defaultViewOption,
-  }: RowMenuContext): TreeMenuOption[] => {
+  }: RowMenuContext): MenuOption[] => {
     return [
       defaultViewOption,
       {
-        icon: Trash,
+        icon: Trash2,
         label: t('convTile.delete'),
-        onClick: (event: SyntheticEvent) => {
-          event.stopPropagation();
-          confirmDeleteItem(name, isFile);
-        },
-        iconWidth: 18,
-        iconHeight: 18,
+        onClick: () => confirmDeleteItem(name, isFile),
         variant: 'destructive',
       },
     ];
diff --git a/frontend/src/components/FileUpload.tsx b/frontend/src/components/FileUpload.tsx
index 5369ca2f..4512cdb0 100644
--- a/frontend/src/components/FileUpload.tsx
+++ b/frontend/src/components/FileUpload.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { FileRejection } from 'react-dropzone';
-import { ImageUp } from 'lucide-react';
+import { ImageUp, X } from 'lucide-react';
 
 import { Dropzone } from '@/components/ui/dropzone';
-import Cross from '../assets/cross.svg';
 
 type UploadTextSegment = {
   text: string;
@@ -157,8 +156,9 @@ export const FileUpload = ({
           handleRemove();
         }}
         className="bg-primary hover:bg-primary/90 absolute -top-2 -right-2 rounded-full p-1 transition-colors"
+        aria-label="remove"
       >
-        <img src={Cross} alt="remove" className="h-3 w-3" />
+        <X className="text-primary-foreground size-3" />
       </button>
     </div>
   );
diff --git a/frontend/src/components/GoogleDrivePicker.tsx b/frontend/src/components/GoogleDrivePicker.tsx
index ced4391b..1af65170 100644
--- a/frontend/src/components/GoogleDrivePicker.tsx
+++ b/frontend/src/components/GoogleDrivePicker.tsx
@@ -274,13 +274,9 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                     type="button"
                     size="sm"
                     onClick={() => handleOpenPicker()}
-                    disabled={isLoading}
+                    loading={isLoading}
                   >
-                    {isLoading
-                      ? t('modals.uploadDoc.connectors.googleDrive.loading')
-                      : t(
-                          'modals.uploadDoc.connectors.googleDrive.selectFiles',
-                        )}
+                    {t('modals.uploadDoc.connectors.googleDrive.selectFiles')}
                   </Button>
                 </div>
 
diff --git a/frontend/src/components/GraphView.tsx b/frontend/src/components/GraphView.tsx
index bb9f6462..676bb103 100644
--- a/frontend/src/components/GraphView.tsx
+++ b/frontend/src/components/GraphView.tsx
@@ -1,12 +1,11 @@
 import { forceCollide, type SimulationNodeDatum } from 'd3-force';
-import { Network, X } from 'lucide-react';
+import { ArrowLeft, Network, X } from 'lucide-react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import ForceGraph2D, { type ForceGraphMethods } from 'react-force-graph-2d';
 
 import userService from '../api/services/userService';
-import ArrowLeft from '../assets/arrow-left.svg';
 import { selectToken } from '../preferences/preferenceSlice';
 import { Button } from './ui/button';
 import SkeletonLoader from './SkeletonLoader';
@@ -168,7 +167,7 @@ const GraphView: React.FC<GraphViewProps> = ({
           onClick={onBackToDocuments}
           aria-label={t('settings.sources.backToAll')}
         >
-          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+          <ArrowLeft />
         </Button>
         <span className="text-primary font-semibold wrap-break-word">
           {sourceName}
@@ -177,12 +176,7 @@ const GraphView: React.FC<GraphViewProps> = ({
       </div>
 
       <div className="bg-muted/60 text-muted-foreground dark:bg-accent/40 mb-4 flex items-start gap-2 rounded-xl px-4 py-3 text-xs">
-        <Network
-          size={16}
-          strokeWidth={1.75}
-          className="mt-0.5 shrink-0"
-          aria-hidden="true"
-        />
+        <Network size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
         <p>
           <span className="text-foreground font-medium">
             {t('settings.sources.graphrag.view.title')}
@@ -195,7 +189,7 @@ const GraphView: React.FC<GraphViewProps> = ({
         <SkeletonLoader count={4} />
       ) : isEmpty ? (
         <div className="border-border text-muted-foreground flex flex-col items-center gap-2 rounded-xl border border-dashed px-6 py-12 text-center text-sm">
-          <Network size={28} strokeWidth={1.5} aria-hidden="true" />
+          <Network size={28} aria-hidden="true" />
           <p>{t('settings.sources.graphrag.view.empty')}</p>
         </div>
       ) : (
diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx
index 7bc92873..7c1b031d 100644
--- a/frontend/src/components/Help.tsx
+++ b/frontend/src/components/Help.tsx
@@ -1,10 +1,8 @@
 import { useState, useRef, useEffect } from 'react';
-import { ShieldCheck } from 'lucide-react';
+import { Info, Mail, ShieldCheck } from 'lucide-react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import Info from '../assets/info.svg';
 import PageIcon from '../assets/documentation.svg';
-import EmailIcon from '../assets/envelope.svg';
 import { useTranslation } from 'react-i18next';
 import { selectIsAdmin } from '../preferences/preferenceSlice';
 import { Button } from './ui/button';
@@ -46,11 +44,7 @@ const Help = () => {
         onClick={toggleDropdown}
         className="mx-4 my-auto w-full"
       >
-        <img
-          src={Info}
-          alt="info"
-          className="w-5 shrink-0 filter dark:invert"
-        />
+        <Info className="text-muted-foreground size-5 shrink-0" />
         {t('help')}
       </Button>
       {isOpen && (
@@ -67,7 +61,6 @@ const Help = () => {
             >
               <ShieldCheck
                 size={20}
-                strokeWidth={1.75}
                 className="text-muted-foreground shrink-0"
               />
               {t('admin.label', 'Admin')}
@@ -93,12 +86,7 @@ const Help = () => {
             href="mailto:support@docsgpt.cloud"
             className="hover:bg-muted text-foreground flex items-start gap-4 rounded-b-xl px-4 py-2"
           >
-            <img
-              src={EmailIcon}
-              alt="Email Us"
-              className="p-0.5 filter dark:invert"
-              width={20}
-            />
+            <Mail className="size-5 shrink-0" />
             {t('emailUs')}
           </a>
         </div>
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 3535c757..81a7e38e 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -1,5 +1,6 @@
 import { envVar } from '@/env';
 import { cn } from '@/lib/utils';
+import { CloudUpload, Database } from 'lucide-react';
 import {
   useCallback,
   useEffect,
@@ -15,9 +16,7 @@ import { useDispatch, useSelector, useStore } from 'react-redux';
 
 import endpoints from '../api/endpoints';
 import userService from '../api/services/userService';
-import DragFileUpload from '../assets/DragFileUpload.svg';
 import SendArrow from '../assets/send.svg?react';
-import SourceIcon from '../assets/source.svg';
 import {
   addAttachment,
   removeAttachment,
@@ -1495,7 +1494,7 @@ export default function MessageInput({
           own: t('conversation.sources.groupOwn'),
           team: t('conversation.sources.groupTeam'),
         },
-        SourceIcon,
+        <Database />,
       ),
     [sourceDocs, t],
   );
@@ -1842,11 +1841,11 @@ export default function MessageInput({
       {handleDragActive &&
         createPortal(
           <div className="dark:bg-background/85 pointer-events-none fixed top-0 left-0 z-50 flex size-full flex-col items-center justify-center bg-white/85">
-            <img className="filter dark:invert" src={DragFileUpload} />
-            <span className="text-muted-foreground dark:text-muted-foreground px-2 text-2xl font-bold">
+            <CloudUpload className="size-18" />
+            <span className="text-muted-foreground px-2 text-2xl font-bold">
               {t('modals.uploadDoc.drag.title')}
             </span>
-            <span className="text-muted-foreground dark:text-muted-foreground w-48 p-2 text-center text-sm">
+            <span className="text-muted-foreground w-48 p-2 text-center text-sm">
               {t('modals.uploadDoc.drag.description')}
             </span>
           </div>,
diff --git a/frontend/src/components/MultiSelectPopover.test.tsx b/frontend/src/components/MultiSelectPopover.test.tsx
index 99258411..66e9e281 100644
--- a/frontend/src/components/MultiSelectPopover.test.tsx
+++ b/frontend/src/components/MultiSelectPopover.test.tsx
@@ -66,6 +66,18 @@ describe('MultiSelectPopover', () => {
     expect(content?.className).toContain('max-h-40');
   });
 
+  it('uses the shared bottom-sheet shape and handle on phones', () => {
+    media.isMobile = true;
+    render();
+    const content = document.querySelector('[data-slot="sheet-content"]')!;
+    expect(content.querySelectorAll('[data-slot="sheet-handle"]')).toHaveLength(
+      1,
+    );
+    expect(content.className).toContain('rounded-t-2xl');
+    expect(content.className).not.toContain('env(');
+    expect(content.className).not.toContain('dark:bg-card');
+  });
+
   it('marks chosen rows with CommandItem checked and a primary tick', () => {
     render();
     const rows = document.querySelectorAll('[data-slot="command-item"]');
diff --git a/frontend/src/components/MultiSelectPopover.tsx b/frontend/src/components/MultiSelectPopover.tsx
index 2684c9f1..3025d2b9 100644
--- a/frontend/src/components/MultiSelectPopover.tsx
+++ b/frontend/src/components/MultiSelectPopover.tsx
@@ -6,7 +6,7 @@ import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import { useDarkTheme, useMediaQuery } from '../hooks';
 import { cn } from '@/lib/utils';
-import Spinner from './Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import {
   Command,
   CommandEmpty,
@@ -192,7 +192,7 @@ export function MultiSelectPopover({
 
       {loading ? (
         <div className="text-foreground flex items-center justify-center py-8">
-          <Spinner size="small" />
+          <Spinner size="sm" />
         </div>
       ) : (
         <div className="border-border mx-4 my-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border">
@@ -232,23 +232,14 @@ export function MultiSelectPopover({
         <SheetTrigger asChild>{trigger}</SheetTrigger>
         <SheetContent
           side="bottom"
+          handle
           showCloseButton={false}
           onOpenAutoFocus={(e) => e.preventDefault()}
-          className={cn(
-            /* eslint-disable-next-line shadcn/no-restyle, shadcn/no-arbitrary-values --
-               bottom-sheet shape: rounded top, no gap, card fill in dark to match Command's
-               bg-popover, and pb-[env(safe-area-inset-bottom)] to clear the iPhone home indicator. */
-            'dark:bg-card flex max-h-[85vh] flex-col gap-0 overflow-hidden rounded-t-2xl p-0 pb-[env(safe-area-inset-bottom)]',
-            className,
-          )}
+          className={cn('overflow-hidden', className)}
         >
           <SheetTitle className="sr-only">
             {title || effectivePlaceholder}
           </SheetTitle>
-          <div
-            className="bg-border mx-auto mt-2 mb-1 h-1.5 w-12 shrink-0 rounded-full"
-            aria-hidden="true"
-          />
           {commandBody}
         </SheetContent>
       </Sheet>
diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
index 8b5f7047..7ae4d59a 100644
--- a/frontend/src/components/Notification.tsx
+++ b/frontend/src/components/Notification.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import close from '../assets/cross.svg';
+import { X } from 'lucide-react';
 import { Button } from './ui/button';
 
 interface NotificationProps {
@@ -96,10 +96,9 @@ export default function Notification({
       <Button
         type="button"
         variant="ghost"
-        /* eslint-disable-next-line shadcn/no-restyle -- a 16px bare close on
-           the promo gradient: no size fits, and ghost's accent hover fill
-           would paint a grey square on the purple. */
-        className="absolute top-2 right-2 z-30 h-4 w-4 rounded-none bg-transparent p-0 hover:bg-transparent hover:opacity-70"
+        size="icon-xs"
+        /* eslint-disable-next-line shadcn/no-restyle -- the close X on the promo gradient: any fill would be a grey square on the purple, so hover dims it instead; primary-foreground keeps it white because the button inherits the page colour */
+        className="text-primary-foreground absolute top-1 right-1 z-30 hover:bg-transparent hover:opacity-70 dark:hover:bg-transparent"
         aria-label={t('notification.closeAriaLabel')}
         onClick={(e) => {
           e.stopPropagation();
@@ -107,7 +106,7 @@ export default function Notification({
           handleCloseNotification();
         }}
       >
-        <img className="w-full" src={close} alt="Close notification" />
+        <X />
       </Button>
     </a>
   );
diff --git a/frontend/src/components/ProfileButton.tsx b/frontend/src/components/ProfileButton.tsx
index ea25dae0..f4e65467 100644
--- a/frontend/src/components/ProfileButton.tsx
+++ b/frontend/src/components/ProfileButton.tsx
@@ -72,10 +72,7 @@ export default function ProfileButton() {
             data-testid="oidc-signout"
             className="text-foreground hover:bg-sidebar-accent flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm"
           >
-            <LogOut
-              className="text-muted-foreground size-4 shrink-0"
-              strokeWidth={1.75}
-            />
+            <LogOut className="text-muted-foreground size-4 shrink-0" />
             {t('auth.signOut')}
           </button>
         </div>
diff --git a/frontend/src/components/SkeletonLoader.tsx b/frontend/src/components/SkeletonLoader.tsx
index eea39673..ecd3249e 100644
--- a/frontend/src/components/SkeletonLoader.tsx
+++ b/frontend/src/components/SkeletonLoader.tsx
@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Skeleton } from '@/components/ui/skeleton';
+
 interface SkeletonLoaderProps {
   count?: number;
   component?:
@@ -50,18 +52,18 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   const renderTable = () => (
     <>
       {[...Array(4)].map((_, idx) => (
-        <tr key={idx} className="animate-pulse">
+        <tr key={idx}>
           <td className="w-[40%] px-4 py-4">
-            <div className="bg-muted h-4 w-full rounded-sm"></div>
+            <Skeleton className="h-4 w-full rounded-sm" />
           </td>
           <td className="w-[30%] px-4 py-4">
-            <div className="bg-muted h-4 w-full rounded-sm"></div>
+            <Skeleton className="h-4 w-full rounded-sm" />
           </td>
           <td className="w-[20%] px-4 py-4">
-            <div className="bg-muted h-4 w-full rounded-sm"></div>
+            <Skeleton className="h-4 w-full rounded-sm" />
           </td>
           <td className="w-[10%] px-4 py-4">
-            <div className="bg-muted h-4 w-full rounded-sm"></div>
+            <Skeleton className="h-4 w-full rounded-sm" />
           </td>
         </tr>
       ))}
@@ -71,18 +73,18 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   const renderChatbot = () => (
     <>
       {[...Array(4)].map((_, idx) => (
-        <tr key={idx} className="animate-pulse">
+        <tr key={idx}>
           <td className="p-2">
-            <div className="bg-muted mx-auto h-4 w-3/4 rounded-sm"></div>
+            <Skeleton className="mx-auto h-4 w-3/4 rounded-sm" />
           </td>
           <td className="p-2">
-            <div className="bg-muted mx-auto h-4 w-full rounded-sm"></div>
+            <Skeleton className="mx-auto h-4 w-full rounded-sm" />
           </td>
           <td className="p-2">
-            <div className="bg-muted mx-auto h-4 w-full rounded-sm"></div>
+            <Skeleton className="mx-auto h-4 w-full rounded-sm" />
           </td>
           <td className="p-2">
-            <div className="bg-muted mx-auto h-4 w-8 rounded-sm"></div>
+            <Skeleton className="mx-auto h-4 w-8 rounded-sm" />
           </td>
         </tr>
       ))}
@@ -100,18 +102,18 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   );
 
   const renderLogs = () => (
-    <div className="w-full animate-pulse space-y-px">
+    <div className="w-full space-y-px">
       {[...Array(8)].map((_, idx) => (
         <div
           key={idx}
           className="dark:hover:bg-accent hover:bg-muted flex w-full items-start p-2"
         >
           <div className="flex w-full items-center gap-2">
-            <div className="bg-muted h-3 w-3 rounded-lg"></div>
+            <Skeleton className="h-3 w-3 rounded-lg" />
             <div className="flex w-full flex-row items-center gap-2">
-              <div className="bg-muted h-3 w-[30%] rounded-lg lg:w-52"></div>
-              <div className="bg-muted h-3 w-[16%] rounded-lg lg:w-28"></div>
-              <div className="bg-muted h-3 w-[40%] rounded-lg lg:w-64"></div>
+              <Skeleton className="h-3 w-[30%] rounded-lg lg:w-52" />
+              <Skeleton className="h-3 w-[16%] rounded-lg lg:w-28" />
+              <Skeleton className="h-3 w-[40%] rounded-lg lg:w-64" />
             </div>
           </div>
         </div>
@@ -126,32 +128,32 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
           key={idx}
           className={`p-6 ${
             skeletonCount === 1 ? 'w-full' : 'w-60'
-          } animate-pulse rounded-3xl`}
+          } rounded-3xl`}
         >
           <div className="space-y-4">
             <div>
-              <div className="bg-muted mb-2 h-4 w-3/4 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-5/6 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-1/2 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-3/4 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-full rounded-sm"></div>
+              <Skeleton className="mb-2 h-4 w-3/4 rounded-sm" />
+              <Skeleton className="mb-2 h-4 w-5/6 rounded-sm" />
+              <Skeleton className="mb-2 h-4 w-1/2 rounded-sm" />
+              <Skeleton className="mb-2 h-4 w-3/4 rounded-sm" />
+              <Skeleton className="mb-2 h-4 w-full rounded-sm" />
             </div>
             <div className="border-border my-4 border-t"></div>
             <div>
-              <div className="bg-muted mb-2 h-4 w-2/3 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-1/4 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-full rounded-sm"></div>
+              <Skeleton className="mb-2 h-4 w-2/3 rounded-sm" />
+              <Skeleton className="mb-2 h-4 w-1/4 rounded-sm" />
+              <Skeleton className="mb-2 h-4 w-full rounded-sm" />
             </div>
             <div className="border-border my-4 border-t"></div>
             <div>
-              <div className="bg-muted mb-2 h-4 w-5/6 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-1/3 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-2/3 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-full rounded-sm"></div>
+              <Skeleton className="mb-2 h-4 w-5/6 rounded-sm" />
+              <Skeleton className="mb-2 h-4 w-1/3 rounded-sm" />
+              <Skeleton className="mb-2 h-4 w-2/3 rounded-sm" />
+              <Skeleton className="mb-2 h-4 w-full rounded-sm" />
             </div>
             <div className="border-border my-4 border-t"></div>
-            <div className="bg-muted mb-2 h-4 w-3/4 rounded-sm"></div>
-            <div className="bg-muted mb-2 h-4 w-5/6 rounded-sm"></div>
+            <Skeleton className="mb-2 h-4 w-3/4 rounded-sm" />
+            <Skeleton className="mb-2 h-4 w-5/6 rounded-sm" />
           </div>
         </div>
       ))}
@@ -193,7 +195,7 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {Array.from({ length: count }).map((_, index) => (
         <div
           key={`chunk-skel-${index}`}
-          className="border-border dark:border-border relative flex h-[197px] w-full max-w-[487px] animate-pulse flex-col overflow-hidden rounded-md border"
+          className="border-border relative flex h-[197px] w-full max-w-[487px] animate-pulse flex-col overflow-hidden rounded-md border"
         >
           <div className="w-full">
             <div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
@@ -326,13 +328,13 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   );
 
   const renderFilesSection = () => (
-    <div className="border-border dark:border-border rounded-lg border">
+    <div className="border-border rounded-lg border">
       <div className="p-4">
         <div className="mb-4 flex items-center justify-between">
-          <div className="bg-muted h-5 w-24 animate-pulse rounded"></div>
-          <div className="bg-muted h-8 w-24 animate-pulse rounded"></div>
+          <Skeleton className="h-5 w-24 rounded-sm" />
+          <Skeleton className="h-8 w-24 rounded-sm" />
         </div>
-        <div className="bg-muted h-4 w-40 animate-pulse rounded"></div>
+        <Skeleton className="h-4 w-40 rounded-sm" />
       </div>
     </div>
   );
diff --git a/frontend/src/components/SourcesPopoverFooter.tsx b/frontend/src/components/SourcesPopoverFooter.tsx
index 31a2732e..906ac6b0 100644
--- a/frontend/src/components/SourcesPopoverFooter.tsx
+++ b/frontend/src/components/SourcesPopoverFooter.tsx
@@ -1,7 +1,7 @@
+import { ArrowRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-import RedirectIcon from '../assets/redirect.svg';
 import { Button } from './ui/button';
 
 type SourcesPopoverFooterProps = {
@@ -25,7 +25,7 @@ export default function SourcesPopoverFooter({
         onClick={onNavigate}
       >
         {t('settings.sources.goToSources')}
-        <img src={RedirectIcon} alt="" aria-hidden="true" className="h-3 w-3" />
+        <ArrowRight className="size-3" />
       </Link>
       <Button
         type="button"
diff --git a/frontend/src/components/Spinner.tsx b/frontend/src/components/Spinner.tsx
deleted file mode 100644
index df908d2a..00000000
--- a/frontend/src/components/Spinner.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Spinner as UiSpinner } from './ui/spinner';
-
-type SpinnerProps = {
-  size?: 'small' | 'medium' | 'large';
-};
-
-const SIZE_MAP = { small: 'sm', medium: 'default', large: 'lg' } as const;
-
-/**
- * Compatibility wrapper over `ui/spinner`. New code should import
- * `Spinner` from `@/components/ui/spinner` and use `sm | default | lg`.
- */
-export default function Spinner({ size = 'medium' }: SpinnerProps) {
-  return <UiSpinner size={SIZE_MAP[size]} />;
-}
diff --git a/frontend/src/components/TextToSpeechButton.tsx b/frontend/src/components/TextToSpeechButton.tsx
index 8cd16c30..36912b47 100644
--- a/frontend/src/components/TextToSpeechButton.tsx
+++ b/frontend/src/components/TextToSpeechButton.tsx
@@ -1,9 +1,7 @@
+import { Square, Volume2 } from 'lucide-react';
 import { useState, useRef, useEffect } from 'react';
-import Speaker from '../assets/speaker.svg?react';
-import Stopspeech from '../assets/stopspeech.svg?react';
 import userService from '../api/services/userService';
 import { Button } from './ui/button';
-import Spinner from './Spinner';
 
 let currentlyPlayingAudio: {
   audio: HTMLAudioElement;
@@ -186,15 +184,9 @@ export default function SpeakButton({ text }: { text: string }) {
             ? 'Stop speaking'
             : 'Speak text'
       }
-      disabled={isLoading}
+      loading={isLoading}
     >
-      {isLoading ? (
-        <Spinner size="small" />
-      ) : isSpeaking ? (
-        <Stopspeech />
-      ) : (
-        <Speaker />
-      )}
+      {isSpeaking ? <Square /> : <Volume2 />}
     </Button>
   );
 }
diff --git a/frontend/src/components/WikiViewer.tsx b/frontend/src/components/WikiViewer.tsx
index 7fd5cfbe..bab562fe 100644
--- a/frontend/src/components/WikiViewer.tsx
+++ b/frontend/src/components/WikiViewer.tsx
@@ -1,4 +1,4 @@
-import { BookOpen } from 'lucide-react';
+import { ArrowLeft, BookOpen } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -6,10 +6,10 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 import userService from '../api/services/userService';
-import ArrowLeft from '../assets/arrow-left.svg';
 import { selectToken } from '../preferences/preferenceSlice';
 import { decodeJwtPayload } from '../utils/jwtUtils';
 import { Button } from './ui/button';
+import { Textarea } from './ui/textarea';
 import SkeletonLoader from './SkeletonLoader';
 import {
   WikiPageNode,
@@ -219,7 +219,7 @@ const WikiViewer: React.FC<WikiViewerProps> = ({
           onClick={onBackToDocuments}
           aria-label={t('settings.sources.backToAll')}
         >
-          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+          <ArrowLeft />
         </Button>
         <span className="text-primary font-semibold wrap-break-word">
           {sourceName}
@@ -228,12 +228,7 @@ const WikiViewer: React.FC<WikiViewerProps> = ({
       </div>
 
       <div className="bg-muted/60 text-muted-foreground dark:bg-accent/40 mb-4 flex items-start gap-2 rounded-xl px-4 py-3 text-xs">
-        <BookOpen
-          size={16}
-          strokeWidth={1.75}
-          className="mt-0.5 shrink-0"
-          aria-hidden="true"
-        />
+        <BookOpen size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
         <p>
           <span className="text-foreground font-medium">
             {t('settings.sources.wiki.livingTitle')}
@@ -305,11 +300,12 @@ const WikiViewer: React.FC<WikiViewerProps> = ({
 
               {isEditing ? (
                 <div className="flex flex-col gap-3">
-                  <textarea
+                  <Textarea
                     value={draft}
                     onChange={(e) => setDraft(e.target.value)}
                     placeholder={t('settings.sources.wiki.editPlaceholder')}
-                    className="border-border bg-card text-foreground min-h-[320px] w-full resize-y rounded-md border p-3 font-mono text-sm leading-relaxed"
+                    variant="filled"
+                    className="min-h-[320px] font-mono"
                     aria-label={selectedPath}
                   />
                   <div className="flex items-center gap-2">
@@ -317,11 +313,9 @@ const WikiViewer: React.FC<WikiViewerProps> = ({
                       type="button"
                       size="sm"
                       onClick={handleSave}
-                      disabled={saving}
+                      loading={saving}
                     >
-                      {saving
-                        ? t('settings.sources.wiki.saving')
-                        : t('settings.sources.wiki.save')}
+                      {t('settings.sources.wiki.save')}
                     </Button>
                     <Button
                       type="button"
diff --git a/frontend/src/components/message-input/AttachFileButton.tsx b/frontend/src/components/message-input/AttachFileButton.tsx
index 8a96032f..eeffb2ec 100644
--- a/frontend/src/components/message-input/AttachFileButton.tsx
+++ b/frontend/src/components/message-input/AttachFileButton.tsx
@@ -1,6 +1,6 @@
+import { Paperclip } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import ClipIcon from '../../assets/clip.svg';
 import { ATTACHMENT_FILE_ACCEPT_ATTR } from '../../constants/fileUpload';
 import { Button } from '../ui/button';
 
@@ -18,11 +18,7 @@ export default function AttachFileButton({ onChange }: AttachFileButtonProps) {
           user with auto-translate on rage-clicked a dead Attach button until
           they reloaded. Keep the composer's controls out of the translator. */}
       <label translate="no" className="cursor-pointer justify-start">
-        <img
-          src={ClipIcon}
-          alt="Attach"
-          className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4 dark:invert"
-        />
+        <Paperclip />
         <span className="dark:text-foreground text-muted-foreground text-xs sm:text-sm">
           {t('conversation.attachments.attach')}
         </span>
diff --git a/frontend/src/components/message-input/AttachmentChipList.tsx b/frontend/src/components/message-input/AttachmentChipList.tsx
index 5eea1bce..dd668f81 100644
--- a/frontend/src/components/message-input/AttachmentChipList.tsx
+++ b/frontend/src/components/message-input/AttachmentChipList.tsx
@@ -1,7 +1,6 @@
-import { X } from 'lucide-react';
+import { TriangleAlert, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import AlertIcon from '../../assets/alert.svg';
 import DocumentationDark from '../../assets/documentation-dark.svg';
 import type { Attachment } from '../../upload/uploadSlice';
 import { Button } from '../ui/button';
@@ -77,10 +76,9 @@ export default function AttachmentChipList({
                 )}
 
                 {attachment.status === 'failed' && (
-                  <img
-                    src={AlertIcon}
-                    alt="Failed"
-                    className="h-[15px] w-[15px] object-fill"
+                  <TriangleAlert
+                    aria-label="Failed"
+                    className="text-primary-foreground size-4"
                   />
                 )}
 
diff --git a/frontend/src/components/message-input/SourcesTrigger.tsx b/frontend/src/components/message-input/SourcesTrigger.tsx
index f6b5f6aa..93661758 100644
--- a/frontend/src/components/message-input/SourcesTrigger.tsx
+++ b/frontend/src/components/message-input/SourcesTrigger.tsx
@@ -1,6 +1,6 @@
+import { Database } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import SourceIcon from '../../assets/source.svg';
 import type { Doc } from '../../models/misc';
 import {
   MultiSelectPopover,
@@ -59,11 +59,7 @@ export default function SourcesTrigger({
               : t('conversation.sources.title')
           }
         >
-          <img
-            src={SourceIcon}
-            alt="Sources"
-            className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4 dark:invert"
-          />
+          <Database />
           <span className="dark:text-foreground text-muted-foreground truncate overflow-hidden text-xs sm:text-sm">
             {selectedDocs && selectedDocs.length > 0
               ? selectedDocs.length === 1
diff --git a/frontend/src/components/message-input/ToolsTrigger.tsx b/frontend/src/components/message-input/ToolsTrigger.tsx
index bed3389d..27332e0b 100644
--- a/frontend/src/components/message-input/ToolsTrigger.tsx
+++ b/frontend/src/components/message-input/ToolsTrigger.tsx
@@ -1,7 +1,6 @@
+import { ArrowRight, Wrench } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import RedirectIcon from '../../assets/redirect.svg';
-import ToolIcon from '../../assets/tool.svg';
 import {
   MultiSelectPopover,
   type MultiSelectPopoverItem,
@@ -44,12 +43,7 @@ export default function ToolsTrigger({
           className="text-primary inline-flex items-center text-base font-medium"
         >
           {t('settings.tools.manageTools')}
-          <img
-            src={RedirectIcon}
-            alt=""
-            aria-hidden="true"
-            className="ml-2 h-[11px] w-[11px]"
-          />
+          <ArrowRight className="ml-2 size-3" />
         </a>
       }
       trigger={
@@ -60,11 +54,7 @@ export default function ToolsTrigger({
           shape="pill"
           className="max-w-[130px] justify-start"
         >
-          <img
-            src={ToolIcon}
-            alt="Tools"
-            className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4 dark:invert"
-          />
+          <Wrench />
           <span className="dark:text-foreground text-muted-foreground truncate overflow-hidden text-xs sm:text-sm">
             {t('settings.tools.label')}
           </span>
diff --git a/frontend/src/components/tree/TreeBrowser.tsx b/frontend/src/components/tree/TreeBrowser.tsx
index cf32bb7c..31735fc1 100644
--- a/frontend/src/components/tree/TreeBrowser.tsx
+++ b/frontend/src/components/tree/TreeBrowser.tsx
@@ -1,5 +1,4 @@
 import React, {
-  SyntheticEvent,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -11,11 +10,7 @@ import { useSelector } from 'react-redux';
 import { selectToken } from '../../preferences/preferenceSlice';
 import { formatBytes } from '../../utils/stringUtils';
 import userService from '../../api/services/userService';
-import ArrowLeft from '../../assets/arrow-left.svg';
-import EyeView from '../../assets/eye-view.svg';
-import FileIcon from '../../assets/file.svg';
-import FolderIcon from '../../assets/folder.svg';
-import ThreeDots from '../../assets/three-dots.svg';
+import { ArrowLeft, Eye, File, Folder } from 'lucide-react';
 import { useLoaderState, useOutsideAlerter } from '../../hooks';
 import Chunks from '../Chunks';
 import SkeletonLoader from '../SkeletonLoader';
@@ -30,19 +25,13 @@ import {
   TableHeader,
   TableRow,
 } from '../ui/table';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../ui/dropdown-menu';
+import { ActionMenu, type MenuOption } from '../ui/dropdown-menu';
 import type {
   DirectoryStructure,
   FileNode,
   RowMenuContext,
   SearchResult,
   TreeBrowserController,
-  TreeMenuOption,
 } from './types';
 
 /** Column ordering for the size/tokens pair. */
@@ -70,7 +59,7 @@ export interface TreeBrowserProps {
    * Builds the row action menu. Defaults to a single "View" option.
    * Wrappers can extend this with Delete, etc.
    */
-  getRowMenuOptions?: (ctx: RowMenuContext) => TreeMenuOption[];
+  getRowMenuOptions?: (ctx: RowMenuContext) => MenuOption[];
   /** Modals / overlays the wrapper wants rendered alongside the tree. */
   extraContent?: React.ReactNode;
   /**
@@ -397,20 +386,16 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
     name: string,
     isFile: boolean,
     displayName?: string,
-  ): TreeMenuOption => ({
-    icon: EyeView,
+  ): MenuOption => ({
+    icon: Eye,
     label: t('settings.sources.view'),
-    onClick: (event: SyntheticEvent) => {
-      event.stopPropagation();
+    onClick: () => {
       if (isFile) {
         handleFileClick(name, displayName);
       } else {
         navigateToDirectory(name);
       }
     },
-    iconWidth: 18,
-    iconHeight: 18,
-    variant: 'default',
   });
 
   const resolveRowMenuOptions = (
@@ -418,7 +403,7 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
     isFile: boolean,
     itemId: string,
     displayName?: string,
-  ): TreeMenuOption[] => {
+  ): MenuOption[] => {
     const defaultViewOption = buildDefaultViewOption(name, isFile, displayName);
     if (getRowMenuOptions) {
       return getRowMenuOptions({
@@ -438,45 +423,11 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
     itemId: string,
     displayName?: string,
   ) => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          onClick={(e) => e.stopPropagation()}
-          className="h-[35px] w-6 shrink-0"
-          aria-label={t('settings.sources.menuAlt')}
-        >
-          <img
-            src={ThreeDots}
-            alt={t('settings.sources.menuAlt')}
-            className="opacity-60 hover:opacity-100"
-          />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-[144px]">
-        {resolveRowMenuOptions(name, isFile, itemId, displayName).map(
-          (option, idx) => (
-            <DropdownMenuItem
-              key={idx}
-              variant={option.variant}
-              onSelect={(event) => {
-                option.onClick(event as unknown as SyntheticEvent);
-              }}
-            >
-              <img
-                src={option.icon}
-                alt=""
-                width={option.iconWidth ?? 16}
-                height={option.iconHeight ?? 16}
-              />
-              <span>{option.label}</span>
-            </DropdownMenuItem>
-          ),
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <ActionMenu
+      options={resolveRowMenuOptions(name, isFile, itemId, displayName)}
+      triggerLabel={t('settings.sources.menuAlt')}
+      className="shrink-0"
+    />
   );
 
   /**
@@ -535,11 +486,7 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
             <TableRow key="parent-dir" onClick={navigateUp}>
               <TableCell width="40%" align="left">
                 <div className="flex items-center">
-                  <img
-                    src={FolderIcon}
-                    alt={t('settings.sources.parentFolderAlt')}
-                    className="mr-2 h-4 w-4 shrink-0"
-                  />
+                  <Folder className="text-primary mr-2 size-4 shrink-0" />
                   <span className="truncate">..</span>
                 </div>
               </TableCell>
@@ -565,11 +512,7 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
         <TableRow key={itemId} onClick={() => navigateToDirectory(name)}>
           <TableCell width="40%" align="left">
             <div className="flex min-w-0 items-center">
-              <img
-                src={FolderIcon}
-                alt={t('settings.sources.folderAlt')}
-                className="mr-2 h-4 w-4 shrink-0"
-              />
+              <Folder className="text-primary mr-2 size-4 shrink-0" />
               <span className="truncate">{name}</span>
             </div>
           </TableCell>
@@ -596,11 +539,7 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
         >
           <TableCell width="40%" align="left">
             <div className="flex min-w-0 items-center">
-              <img
-                src={FileIcon}
-                alt={t('settings.sources.fileAlt')}
-                className="mr-2 h-4 w-4 shrink-0"
-              />
+              <File className="text-muted-foreground mr-2 size-4 shrink-0" />
               <span className="truncate">{displayName}</span>
             </div>
           </TableCell>
@@ -647,21 +586,17 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
                   key={index}
                   onClick={() => handleSearchSelect(result)}
                   title={result.path}
-                  className={`hover:bg-muted dark:hover:bg-muted flex min-w-0 cursor-pointer items-center px-3 py-2 ${
+                  className={`hover:bg-muted flex min-w-0 cursor-pointer items-center px-3 py-2 ${
                     index !== searchResults.length - 1
-                      ? 'border-border dark:border-border border-b'
+                      ? 'border-border border-b'
                       : ''
                   }`}
                 >
-                  <img
-                    src={result.isFile ? FileIcon : FolderIcon}
-                    alt={
-                      result.isFile
-                        ? t('settings.sources.fileAlt')
-                        : t('settings.sources.folderAlt')
-                    }
-                    className="mr-2 h-4 w-4 shrink-0"
-                  />
+                  {result.isFile ? (
+                    <File className="text-muted-foreground mr-2 size-4 shrink-0" />
+                  ) : (
+                    <Folder className="text-primary mr-2 size-4 shrink-0" />
+                  )}
                   <span className="flex-1 truncate text-sm">{result.name}</span>
                 </div>
               ))
@@ -682,8 +617,9 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
           shape="pill"
           className="mr-3"
           onClick={handleBackNavigation}
+          aria-label={t('settings.sources.back')}
         >
-          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+          <ArrowLeft />
         </Button>
 
         <div className="flex flex-wrap items-center">
diff --git a/frontend/src/components/tree/types.ts b/frontend/src/components/tree/types.ts
index e0f67014..9f3e980f 100644
--- a/frontend/src/components/tree/types.ts
+++ b/frontend/src/components/tree/types.ts
@@ -1,4 +1,4 @@
-import { SyntheticEvent } from 'react';
+import type { MenuOption } from '../ui/dropdown-menu';
 
 export interface FileNode {
   type?: string;
@@ -18,15 +18,6 @@ export interface SearchResult {
   isFile: boolean;
 }
 
-export type TreeMenuOption = {
-  icon: string;
-  label: string;
-  onClick: (event: SyntheticEvent) => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-};
-
 /**
  * Row context passed to consumers' getRowMenuOptions callbacks so they
  * can build per-row menus (e.g. add a Delete option for upload trees).
@@ -37,7 +28,7 @@ export interface RowMenuContext {
   itemId: string;
   displayName?: string;
   /** Default "View" option already provided by TreeBrowser. */
-  defaultViewOption: TreeMenuOption;
+  defaultViewOption: MenuOption;
 }
 
 /**
diff --git a/frontend/src/components/ui/accordion.test.tsx b/frontend/src/components/ui/accordion.test.tsx
index eb46b580..2e446f9c 100644
--- a/frontend/src/components/ui/accordion.test.tsx
+++ b/frontend/src/components/ui/accordion.test.tsx
@@ -47,3 +47,10 @@ describe('AccordionTrigger', () => {
     expect(html).not.toContain('dark:invert');
   });
 });
+
+describe('AccordionItem', () => {
+  it('draws no shadow of its own, like a card', () => {
+    const classes = slotClasses(renderAccordion(), 'accordion-item');
+    expect(classes).not.toMatch(/\bshadow-/);
+  });
+});
diff --git a/frontend/src/components/ui/accordion.tsx b/frontend/src/components/ui/accordion.tsx
index 81332698..3f23a440 100644
--- a/frontend/src/components/ui/accordion.tsx
+++ b/frontend/src/components/ui/accordion.tsx
@@ -1,7 +1,7 @@
 import { ChevronDownIcon } from 'lucide-react';
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn, focusRing } from '@/lib/utils';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 
 function Accordion({
@@ -17,7 +17,7 @@ function AccordionItem({
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn('overflow-hidden shadow-xs', className)}
+      className={cn('overflow-hidden', className)}
       {...props}
     />
   );
@@ -33,7 +33,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          'focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium transition-all outline-none focus-visible:ring-3 focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          `${focusRing} flex flex-1 items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium transition-all outline-none focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180`,
           className,
         )}
         {...props}
diff --git a/frontend/src/components/ui/alert.test.tsx b/frontend/src/components/ui/alert.test.tsx
index de7e6ad1..7dc81025 100644
--- a/frontend/src/components/ui/alert.test.tsx
+++ b/frontend/src/components/ui/alert.test.tsx
@@ -2,7 +2,7 @@ import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { Alert, AlertDescription } from './alert';
+import { Alert, AlertDescription, AlertTitle } from './alert';
 
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 
@@ -52,4 +52,19 @@ describe('Alert', () => {
     await render(<Alert variant="destructive" role="status" />);
     expect(alertRole()).toBe('status');
   });
+
+  it('marks its parts with data-slot and the variant', async () => {
+    await render(
+      <Alert variant="warning">
+        <AlertTitle>Heads up</AlertTitle>
+        <AlertDescription>Notice</AlertDescription>
+      </Alert>,
+    );
+    const alert = document.querySelector('[data-slot="alert"]')!;
+    expect(alert.getAttribute('data-variant')).toBe('warning');
+    expect(alert.querySelector('[data-slot="alert-title"]')).not.toBeNull();
+    expect(
+      alert.querySelector('[data-slot="alert-description"]'),
+    ).not.toBeNull();
+  });
 });
diff --git a/frontend/src/components/ui/alert.tsx b/frontend/src/components/ui/alert.tsx
index 4d411f56..4a7e2bd6 100644
--- a/frontend/src/components/ui/alert.tsx
+++ b/frontend/src/components/ui/alert.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:-translate-y-0.75 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
   {
     variants: {
       variant: {
@@ -24,42 +24,44 @@ const alertVariants = cva(
   },
 );
 
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    // A success notice confirms rather than interrupts, so it is polite.
-    role={variant === 'success' ? 'status' : 'alert'}
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-));
-Alert.displayName = 'Alert';
+function Alert({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      data-variant={variant}
+      // A success notice confirms rather than interrupts, so it is polite.
+      role={variant === 'success' ? 'status' : 'alert'}
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn('mb-1 leading-none font-medium tracking-tight', className)}
-    {...props}
-  />
-));
-AlertTitle.displayName = 'AlertTitle';
+function AlertTitle({ className, ...props }: React.ComponentProps<'h5'>) {
+  return (
+    <h5
+      data-slot="alert-title"
+      className={cn('mb-1 leading-none font-medium tracking-tight', className)}
+      {...props}
+    />
+  );
+}
 
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('text-sm [&_p]:leading-relaxed', className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = 'AlertDescription';
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn('text-sm [&_p]:leading-relaxed', className)}
+      {...props}
+    />
+  );
+}
 
 export { Alert, AlertTitle, AlertDescription };
diff --git a/frontend/src/components/ui/breadcrumb.tsx b/frontend/src/components/ui/breadcrumb.tsx
index 2c992a26..42f17397 100644
--- a/frontend/src/components/ui/breadcrumb.tsx
+++ b/frontend/src/components/ui/breadcrumb.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
 import { Slot } from 'radix-ui';
 
-import { cn } from '@/lib/utils';
+import { cn, focusRing } from '@/lib/utils';
 
 function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
@@ -44,7 +44,7 @@ function BreadcrumbLink({
     <Comp
       data-slot="breadcrumb-link"
       className={cn(
-        'hover:text-foreground focus-visible:ring-ring/50 rounded-sm transition-colors outline-none focus-visible:ring-3',
+        `${focusRing} hover:text-foreground rounded-sm transition-colors outline-none`,
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/button.test.tsx b/frontend/src/components/ui/button.test.tsx
index 4dbefcab..fbb175b2 100644
--- a/frontend/src/components/ui/button.test.tsx
+++ b/frontend/src/components/ui/button.test.tsx
@@ -163,4 +163,95 @@ describe('Button variants', () => {
     expect(classes).not.toContain('focus-visible:ring-3');
     expect(classes).not.toContain('text-primary');
   });
+
+  it('variant="ghost-on-accent" hovers with a foreground tint, not accent', () => {
+    // It sits on rows that are already bg-accent, where an accent hover
+    // would be invisible.
+    const classes = buttonVariants({ variant: 'ghost-on-accent' }).split(' ');
+    expect(classes).toContain('text-muted-foreground');
+    expect(classes).toContain('hover:text-foreground');
+    expect(classes).toContain('hover:bg-foreground/15');
+    expect(classes).toContain('dark:hover:bg-foreground/20');
+    expect(classes).not.toContain('hover:bg-accent');
+  });
+
+  it('variant="ghost-destructive-on-accent" hovers with a destructive tint', () => {
+    const classes = buttonVariants({
+      variant: 'ghost-destructive-on-accent',
+    }).split(' ');
+    expect(classes).toContain('text-muted-foreground');
+    expect(classes).toContain('hover:text-destructive');
+    expect(classes).toContain('hover:bg-destructive/15');
+    expect(classes).toContain('dark:hover:bg-destructive/25');
+    expect(classes).not.toContain('hover:bg-accent');
+  });
+});
+
+describe('Button loading', () => {
+  const parse = (element: React.ReactElement) => {
+    const host = document.createElement('div');
+    host.innerHTML = renderToStaticMarkup(element);
+    return host.firstElementChild as HTMLButtonElement;
+  };
+
+  it('disables the button and marks it busy', () => {
+    const button = parse(<Button loading>Save</Button>);
+    expect(button.disabled).toBe(true);
+    expect(button.getAttribute('aria-busy')).toBe('true');
+    expect(button.hasAttribute('data-loading')).toBe(true);
+  });
+
+  it('keeps the label in place, hidden, so the width holds', () => {
+    const button = parse(
+      <Button loading size="lg" shape="pill">
+        Create token
+      </Button>,
+    );
+    const label = button.querySelector('span.invisible')!;
+    expect(label.textContent).toBe('Create token');
+    expect(label.className).toContain('contents');
+    expect(button.className).toContain('relative');
+  });
+
+  it('centres a 16px spinner over the label', () => {
+    const button = parse(<Button loading>Save</Button>);
+    const overlay = button.querySelector('span.absolute')!;
+    expect(overlay.className).toContain('inset-0');
+    const spinner = overlay.querySelector('[data-slot="spinner"]')!;
+    expect(spinner.className).toContain('size-4');
+    expect(spinner.className).not.toContain('size-5');
+  });
+
+  it('renders plainly when not loading', () => {
+    const button = parse(<Button loading={false}>Save</Button>);
+    expect(button.disabled).toBe(false);
+    expect(button.hasAttribute('aria-busy')).toBe(false);
+    expect(button.innerHTML).toBe('Save');
+  });
+});
+
+describe('Button loading with an icon', () => {
+  it('keeps the icon padding while the label is wrapped', () => {
+    const html = renderToStaticMarkup(
+      <Button loading size="lg" shape="pill">
+        <svg />
+        Download
+      </Button>,
+    );
+    const host = document.createElement('div');
+    host.innerHTML = html;
+    const button = host.firstElementChild as HTMLButtonElement;
+    // The label wrapper is marked, and every icon-padding rule also matches an
+    // svg one level down inside it, so the width doesn't grow.
+    expect(
+      button.querySelector('[data-slot="button-label"]')?.querySelector('svg'),
+    ).not.toBeNull();
+    const iconRules = button.className
+      .split(' ')
+      .filter((c) => c.startsWith('has-['));
+    expect(iconRules.length).toBeGreaterThan(0);
+    for (const rule of iconRules) {
+      expect(rule).toContain('>[data-slot=button-label]>svg');
+    }
+  });
 });
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 3041e75d..4323ae46 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -2,10 +2,13 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { Spinner } from '@/components/ui/spinner';
+import { cn, focusRing, invalidState } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  `${focusRing} ${invalidState} inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring`,
+  // Icon padding (has-[>svg]) also matches an svg inside the invisible label
+  // wrapper that `loading` adds, so a busy icon button keeps its width.
   {
     variants: {
       variant: {
@@ -27,6 +30,13 @@ const buttonVariants = cva(
         // Icon actions that remove something: muted at rest, red on hover.
         'ghost-destructive':
           'text-muted-foreground hover:bg-accent hover:text-destructive dark:hover:bg-accent/50',
+        // The same two on a row that is already bg-accent or
+        // bg-sidebar-accent (a highlighted Command item, a hovered card or
+        // sidebar row), where an accent hover would be invisible.
+        'ghost-on-accent':
+          'text-muted-foreground hover:bg-foreground/15 hover:text-foreground dark:hover:bg-foreground/20',
+        'ghost-destructive-on-accent':
+          'text-muted-foreground hover:bg-destructive/15 hover:text-destructive dark:hover:bg-destructive/25',
         link: 'text-primary underline-offset-4 hover:underline',
         // Popover combobox triggers: mirrors SelectTrigger so the two sit
         // side by side. Set data-placeholder while empty to mute the text.
@@ -49,13 +59,13 @@ const buttonVariants = cva(
           'text-foreground underline-offset-4 decoration-primary hover:underline focus-visible:ring-0 [&>svg]:text-primary',
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        xs: "h-7 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 px-6 has-[>svg]:px-4',
+        default: 'h-9 px-4 py-2 has-[>svg,>[data-slot=button-label]>svg]:px-3',
+        xs: "h-7 gap-1 px-2 text-xs has-[>svg,>[data-slot=button-label]>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        sm: 'h-8 gap-1.5 px-3 has-[>svg,>[data-slot=button-label]>svg]:px-2.5',
+        lg: 'h-10 px-6 has-[>svg,>[data-slot=button-label]>svg]:px-4',
         // The form-row height (42px), shared with Input default and
         // SelectTrigger lg, for pickers and buttons that sit among fields.
-        field: 'h-10.5 px-4 has-[>svg]:px-3',
+        field: 'h-10.5 px-4 has-[>svg,>[data-slot=button-label]>svg]:px-3',
         icon: 'size-9',
         'icon-xs': 'size-7',
         'icon-sm': 'size-8',
@@ -70,10 +80,22 @@ const buttonVariants = cva(
     },
     compoundVariants: [
       // Pills read as cramped at the rectangular paddings, so widen them.
-      { shape: 'pill', size: 'default', class: 'px-5 has-[>svg]:px-4' },
-      { shape: 'pill', size: 'lg', class: 'px-6 has-[>svg]:px-5' },
+      {
+        shape: 'pill',
+        size: 'default',
+        class: 'px-5 has-[>svg,>[data-slot=button-label]>svg]:px-4',
+      },
+      {
+        shape: 'pill',
+        size: 'lg',
+        class: 'px-6 has-[>svg,>[data-slot=button-label]>svg]:px-5',
+      },
       // Text starts 21px in, like the Input and SelectTrigger pills beside it.
-      { shape: 'pill', size: 'field', class: 'px-5 has-[>svg]:px-4' },
+      {
+        shape: 'pill',
+        size: 'field',
+        class: 'px-5 has-[>svg,>[data-slot=button-label]>svg]:px-4',
+      },
       // Tabs sit on a baseline rule, so they never round off.
       { variant: 'tab', class: 'rounded-none' },
       // A padding-free tab (the agent sub-nav) keeps 4px above its underline.
@@ -82,7 +104,7 @@ const buttonVariants = cva(
       {
         variant: 'sidebar-item',
         class:
-          'justify-start gap-2.5 rounded-full pr-0 pl-3 font-normal has-[>svg]:pr-0 has-[>svg]:pl-3',
+          'justify-start gap-2.5 rounded-full pr-0 pl-3 font-normal has-[>svg,>[data-slot=button-label]>svg]:pr-0 has-[>svg,>[data-slot=button-label]>svg]:pl-3',
       },
     ],
     defaultVariants: {
@@ -99,10 +121,18 @@ function Button({
   size = 'default',
   shape = 'default',
   asChild = false,
+  loading = false,
+  disabled,
+  children,
   ...props
 }: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
+    /**
+     * Disables the button and draws a 16px spinner over its label. The label
+     * stays in the layout (invisible), so the width doesn't jump.
+     */
+    loading?: boolean;
   }) {
   const Comp = asChild ? Slot : 'button';
 
@@ -112,9 +142,29 @@ function Button({
       data-variant={variant}
       data-size={size}
       data-shape={shape}
-      className={cn(buttonVariants({ variant, size, shape, className }))}
+      data-loading={loading ? '' : undefined}
+      aria-busy={loading || undefined}
+      disabled={disabled || loading}
+      className={cn(
+        buttonVariants({ variant, size, shape }),
+        loading && 'relative',
+        className,
+      )}
       {...props}
-    />
+    >
+      {loading && !asChild ? (
+        <>
+          <span data-slot="button-label" className="invisible contents">
+            {children}
+          </span>
+          <span className="absolute inset-0 flex items-center justify-center">
+            <Spinner size="sm" className="size-4" />
+          </span>
+        </>
+      ) : (
+        children
+      )}
+    </Comp>
   );
 }
 
diff --git a/frontend/src/components/ui/card.test.tsx b/frontend/src/components/ui/card.test.tsx
index 43f87bee..7cc61280 100644
--- a/frontend/src/components/ui/card.test.tsx
+++ b/frontend/src/components/ui/card.test.tsx
@@ -40,4 +40,14 @@ describe('Card', () => {
     expect(html).toContain('grid-cols-[1fr_auto]');
     expect(html).toContain('col-start-2');
   });
+
+  it('exposes padding and interactive as data attributes', () => {
+    const html = renderToStaticMarkup(
+      <Card padding="none" interactive>
+        Body
+      </Card>,
+    );
+    expect(html).toContain('data-padding="none"');
+    expect(html).toContain('data-interactive="true"');
+  });
 });
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index aa1eb091..eb8c1ed7 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { cn, focusRing } from '@/lib/utils';
 
 const cardVariants = cva(
   'text-card-foreground flex flex-col gap-3 rounded-2xl text-sm transition-colors',
@@ -25,7 +25,7 @@ const cardVariants = cva(
       interactive: {
         false: '',
         // Whole card is a target: picker tiles, navigable list items.
-        true: 'hover:border-primary/40 hover:bg-accent focus-visible:border-ring focus-visible:ring-ring/50 cursor-pointer text-left outline-none focus-visible:ring-3 data-[selected=true]:border-primary data-[selected=true]:bg-primary/5',
+        true: `${focusRing} hover:border-primary/40 hover:bg-accent focus-visible:border-ring cursor-pointer text-left outline-none data-[selected=true]:border-primary data-[selected=true]:bg-primary/5`,
       },
     },
     defaultVariants: {
@@ -58,6 +58,8 @@ function Card({
     <Comp
       data-slot="card"
       data-variant={variant}
+      data-padding={padding}
+      data-interactive={interactive || undefined}
       data-selected={selected || undefined}
       className={cn(cardVariants({ variant, padding, interactive }), className)}
       {...props}
diff --git a/frontend/src/components/ui/checkbox.test.tsx b/frontend/src/components/ui/checkbox.test.tsx
new file mode 100644
index 00000000..54dd25e5
--- /dev/null
+++ b/frontend/src/components/ui/checkbox.test.tsx
@@ -0,0 +1,54 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Checkbox } from './checkbox';
+import { FormField } from './form-field';
+
+function render(element: React.ReactElement): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(element);
+  return host;
+}
+
+describe('Checkbox', () => {
+  it('is a 16px themed box with a 6px radius by default', () => {
+    const box = render(<Checkbox aria-label="agents:read" />)
+      .firstElementChild as HTMLElement;
+    expect(box.getAttribute('role')).toBe('checkbox');
+    expect(box.className).toContain('size-4');
+    expect(box.className).toContain('rounded-sm');
+    expect(box.className).toContain('border-input');
+    expect(box.className).toContain('data-[state=checked]:bg-primary');
+    expect(box.className).toContain('focus-visible:ring-3');
+  });
+
+  it('size="sm" is 14px with a 12px check', () => {
+    const host = render(<Checkbox size="sm" checked aria-label="Filled" />);
+    const box = host.firstElementChild as HTMLElement;
+    expect(box.className).toContain('size-3.5');
+    expect(box.className).not.toMatch(/(^|\s)size-4(\s|$)/);
+    expect(host.querySelector('svg')?.getAttribute('class')).toContain(
+      'size-3',
+    );
+  });
+
+  it('shows the check only while checked', () => {
+    expect(
+      render(<Checkbox checked aria-label="a" />).querySelector('svg'),
+    ).not.toBeNull();
+    expect(
+      render(<Checkbox checked={false} aria-label="a" />).querySelector('svg'),
+    ).toBeNull();
+  });
+
+  it('takes its id and invalid state from a FormField', () => {
+    const host = render(
+      <FormField label="Stream output to user" error="Required">
+        <Checkbox />
+      </FormField>,
+    );
+    const box = host.querySelector('[role="checkbox"]')!;
+    expect(host.querySelector('label')!.getAttribute('for')).toBe(box.id);
+    expect(box.getAttribute('aria-invalid')).toBe('true');
+  });
+});
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..23126966
--- /dev/null
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,52 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { CheckIcon } from 'lucide-react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import * as React from 'react';
+
+import { useFormFieldControl } from '@/components/ui/form-field';
+import { cn, focusRing, invalidState } from '@/lib/utils';
+
+const checkboxVariants = cva(
+  `${focusRing} ${invalidState} peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring shrink-0 rounded-sm border shadow-xs transition-shadow outline-none disabled:cursor-not-allowed disabled:opacity-50`,
+  {
+    variants: {
+      size: {
+        // 16px, for rows of options (token scopes, parsed spec actions).
+        default: 'size-4',
+        // 14px, for dense table cells (ToolConfig's "Filled by LLM").
+        sm: 'size-3.5',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+);
+
+type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> &
+  VariantProps<typeof checkboxVariants>;
+
+/** A themed checkbox (Radix), so it looks the same on every OS and theme. */
+function Checkbox(checkboxProps: CheckboxProps) {
+  const {
+    className,
+    size = 'default',
+    ...props
+  } = useFormFieldControl(checkboxProps);
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      data-size={size}
+      className={cn(checkboxVariants({ size }), className)}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className={size === 'sm' ? 'size-3' : 'size-3.5'} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox, checkboxVariants };
+export type { CheckboxProps };
diff --git a/frontend/src/components/ui/dialog.test.tsx b/frontend/src/components/ui/dialog.test.tsx
new file mode 100644
index 00000000..96f53a3b
--- /dev/null
+++ b/frontend/src/components/ui/dialog.test.tsx
@@ -0,0 +1,67 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { Dialog, DialogContent, DialogTitle } from './dialog';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+describe('DialogContent', () => {
+  it('uses the Modal surface: card fill, 16px corners, modal shadow, no border', async () => {
+    await render(
+      <Dialog open>
+        <DialogContent aria-describedby={undefined}>
+          <DialogTitle>Search</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+    const classes = document
+      .querySelector('[data-slot="dialog-content"]')!
+      .className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining(['bg-card', 'rounded-2xl', 'shadow-modal']),
+    );
+    expect(classes).not.toContain('bg-background');
+    expect(classes).not.toContain('rounded-lg');
+    expect(classes).not.toContain('border');
+  });
+
+  it('dims the page behind with the blurred overlay Modal uses', async () => {
+    await render(
+      <Dialog open>
+        <DialogContent aria-describedby={undefined}>
+          <DialogTitle>Search</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+    const classes = document
+      .querySelector('[data-slot="dialog-overlay"]')!
+      .className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'bg-black/25',
+        'backdrop-blur-xs',
+        'dark:bg-black/50',
+      ]),
+    );
+    expect(classes).not.toContain('bg-black/50');
+  });
+});
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index f529dfea..c0dc93a7 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -3,6 +3,7 @@
 import { XIcon } from 'lucide-react';
 import * as React from 'react';
 
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 
@@ -38,7 +39,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/25 backdrop-blur-xs dark:bg-black/50',
         className,
       )}
       {...props}
@@ -60,19 +61,22 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
+          'bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-modal fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl p-6 duration-200 outline-none sm:max-w-lg',
           className,
         )}
         {...props}
       >
         {children}
         {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
+          <DialogPrimitive.Close asChild>
+            <Button
+              variant="ghost-muted"
+              size="icon-sm"
+              aria-label="Close"
+              className="absolute top-2 right-2"
+            >
+              <XIcon />
+            </Button>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Content>
diff --git a/frontend/src/components/ui/dropdown-menu.test.tsx b/frontend/src/components/ui/dropdown-menu.test.tsx
new file mode 100644
index 00000000..129db538
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu.test.tsx
@@ -0,0 +1,111 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { Pencil, Trash2 } from 'lucide-react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ActionMenu, type MenuOption } from './dropdown-menu';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+const options = (onEdit = vi.fn(), onDelete = vi.fn()): MenuOption[] => [
+  { icon: Pencil, label: 'Edit', onClick: onEdit },
+  { icon: Trash2, label: 'Delete', variant: 'destructive', onClick: onDelete },
+];
+
+const trigger = () =>
+  document.querySelector<HTMLButtonElement>(
+    '[data-slot="dropdown-menu-trigger"]',
+  )!;
+const items = () =>
+  Array.from(
+    document.querySelectorAll<HTMLElement>('[data-slot="dropdown-menu-item"]'),
+  );
+
+describe('ActionMenu', () => {
+  it('renders a labelled ghost-on-accent icon trigger', async () => {
+    await render(
+      <ActionMenu options={options()} triggerLabel="Agent actions" />,
+    );
+    expect(trigger().getAttribute('aria-label')).toBe('Agent actions');
+    expect(trigger().getAttribute('data-variant')).toBe('ghost-on-accent');
+    expect(trigger().getAttribute('data-size')).toBe('icon-xs');
+    expect(trigger().querySelector('svg')).not.toBeNull();
+  });
+
+  it('passes layout classes, disabled and a test id to the trigger', async () => {
+    await render(
+      <ActionMenu
+        options={options()}
+        triggerLabel="Menu"
+        className="absolute top-3 right-3"
+        triggerTestId="menu-button-1"
+        disabled
+      />,
+    );
+    expect(trigger().className).toContain('top-3');
+    expect(trigger().disabled).toBe(true);
+    expect(trigger().getAttribute('data-testid')).toBe('menu-button-1');
+  });
+
+  it('keeps a trigger click from reaching a clickable parent', async () => {
+    const onCard = vi.fn();
+    await render(
+      <div onClick={onCard}>
+        <ActionMenu options={options()} triggerLabel="Menu" />
+      </div>,
+    );
+    await act(async () => trigger().click());
+    expect(onCard).not.toHaveBeenCalled();
+  });
+
+  it('renders one item per option with its icon and variant', async () => {
+    await render(<ActionMenu options={options()} triggerLabel="Menu" open />);
+    const [edit, del] = items();
+    expect(items()).toHaveLength(2);
+    expect(edit.textContent).toBe('Edit');
+    expect(edit.querySelector('svg')).not.toBeNull();
+    expect(del.getAttribute('data-variant')).toBe('destructive');
+  });
+
+  it('calls onClick on select without the click reaching the parent', async () => {
+    const onCard = vi.fn();
+    const onEdit = vi.fn();
+    await render(
+      <div onClick={onCard}>
+        <ActionMenu options={options(onEdit)} triggerLabel="Menu" open />
+      </div>,
+    );
+    await act(async () => items()[0].click());
+    expect(onEdit).toHaveBeenCalledTimes(1);
+    expect(onCard).not.toHaveBeenCalled();
+  });
+
+  it('marks a disabled option', async () => {
+    await render(
+      <ActionMenu
+        options={[{ label: 'Export', onClick: vi.fn(), disabled: true }]}
+        triggerLabel="Menu"
+        open
+      />,
+    );
+    expect(items()[0].hasAttribute('data-disabled')).toBe(true);
+  });
+});
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index 083d9963..eb557ba0 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -1,8 +1,15 @@
 import * as React from 'react';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  CircleIcon,
+  EllipsisVertical,
+  type LucideIcon,
+} from 'lucide-react';
 import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
+import { Button } from './button';
 
 function DropdownMenu({
   ...props
@@ -228,7 +235,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
         className,
       )}
       {...props}
@@ -236,7 +243,94 @@ function DropdownMenuSubContent({
   );
 }
 
+/** One row of an ActionMenu. */
+type MenuOption = {
+  label: string;
+  onClick: (event: Event) => void;
+  icon?: LucideIcon;
+  variant?: 'default' | 'destructive';
+  disabled?: boolean;
+};
+
+const stopPropagation = (event: React.SyntheticEvent) =>
+  event.stopPropagation();
+
+/**
+ * The three-dots menu on a card, tile or row: an EllipsisVertical icon
+ * trigger and one item per option, icon first.
+ *
+ * Clicks and keys on the trigger and the menu stop propagating, because the
+ * menu usually sits inside a clickable card and a portal still bubbles
+ * through the React tree. The trigger is `ghost-on-accent`: most hosts turn
+ * bg-accent while the pointer is on them.
+ *
+ * @param options The menu rows.
+ * @param triggerLabel The trigger's accessible name.
+ * @param className Layout classes for the trigger (position, margin).
+ * @param triggerTestId A `data-testid` for the trigger.
+ */
+function ActionMenu({
+  options,
+  triggerLabel,
+  align = 'end',
+  open,
+  onOpenChange,
+  disabled,
+  className,
+  triggerTestId,
+}: {
+  options: MenuOption[];
+  triggerLabel: string;
+  align?: 'start' | 'center' | 'end';
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  triggerTestId?: string;
+}) {
+  return (
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost-on-accent"
+          size="icon-xs"
+          aria-label={triggerLabel}
+          title={triggerLabel}
+          disabled={disabled}
+          data-testid={triggerTestId}
+          className={className}
+          onClick={stopPropagation}
+          onKeyDown={stopPropagation}
+        >
+          <EllipsisVertical />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align={align}
+        className="min-w-[144px]"
+        onClick={stopPropagation}
+        onKeyDown={stopPropagation}
+      >
+        {options.map((option) => (
+          <DropdownMenuItem
+            key={option.label}
+            variant={option.variant}
+            disabled={option.disabled}
+            onSelect={(event) => option.onClick(event)}
+          >
+            {option.icon && <option.icon aria-hidden="true" />}
+            <span>{option.label}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export {
+  ActionMenu,
+  type MenuOption,
   DropdownMenu,
   DropdownMenuPortal,
   DropdownMenuTrigger,
diff --git a/frontend/src/components/ui/dropzone.test.tsx b/frontend/src/components/ui/dropzone.test.tsx
index 568ca74a..8e29fbfc 100644
--- a/frontend/src/components/ui/dropzone.test.tsx
+++ b/frontend/src/components/ui/dropzone.test.tsx
@@ -2,6 +2,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, expect, it, vi } from 'vitest';
 
 import { Dropzone } from './dropzone';
+import { FormField } from './form-field';
 
 describe('Dropzone', () => {
   it('renders the default prompt as a dashed card target', () => {
@@ -39,4 +40,20 @@ describe('Dropzone', () => {
     const html = renderToStaticMarkup(<Dropzone onDrop={vi.fn()} />);
     expect(html).not.toMatch(/\b(bg|text|border)-(gray|red|green|blue)-\d+/);
   });
+
+  it('lets a FormField label open the file picker', () => {
+    const host = document.createElement('div');
+    host.innerHTML = renderToStaticMarkup(
+      <FormField label="Agent Image" hint="Updates on save">
+        <Dropzone onDrop={vi.fn()} />
+      </FormField>,
+    );
+    const input = host.querySelector('input')!;
+    expect(input.id).not.toBe('');
+    expect(host.querySelector('label')!.getAttribute('for')).toBe(input.id);
+    const target = host.querySelector('[data-slot="dropzone"]')!;
+    expect(target.getAttribute('aria-describedby')).toBe(
+      host.querySelector('p')!.id,
+    );
+  });
 });
diff --git a/frontend/src/components/ui/dropzone.tsx b/frontend/src/components/ui/dropzone.tsx
index 7ed9c0ba..6d94739f 100644
--- a/frontend/src/components/ui/dropzone.tsx
+++ b/frontend/src/components/ui/dropzone.tsx
@@ -7,7 +7,8 @@ import {
   type FileRejection,
 } from 'react-dropzone';
 
-import { cn } from '@/lib/utils';
+import { useFormFieldControl } from '@/components/ui/form-field';
+import { cn, focusRing } from '@/lib/utils';
 
 type DropzoneProps = {
   /** Receives accepted files and, when `accept`/`maxSize` reject some, the rejections. */
@@ -55,6 +56,12 @@ function Dropzone({
   className,
   validator,
 }: DropzoneProps) {
+  // Inside a FormField the hidden input takes the field's id, so its label
+  // opens the file picker, and the target is described by the hint/error.
+  const field = useFormFieldControl<{
+    id?: string;
+    'aria-describedby'?: string;
+  }>({});
   const { getRootProps, getInputProps, isDragActive, isDragReject } =
     useDropzone({
       onDrop,
@@ -70,13 +77,14 @@ function Dropzone({
     <div className={cn('flex flex-col gap-2', className)}>
       <div
         {...getRootProps()}
+        aria-describedby={field['aria-describedby']}
         data-slot="dropzone"
         data-size={size}
         data-disabled={disabled || undefined}
         data-drag-active={isDragActive || undefined}
         data-drag-reject={isDragReject || undefined}
         className={cn(
-          'border-border bg-card text-foreground hover:bg-accent/40 focus-visible:ring-ring/50 flex w-full cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed text-center transition-colors outline-none focus-visible:ring-3',
+          `${focusRing} border-border bg-card text-foreground hover:bg-accent/40 flex w-full cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed text-center transition-colors outline-none`,
           'data-[drag-active]:border-primary data-[drag-active]:bg-primary/5',
           'data-[drag-reject]:border-destructive data-[drag-reject]:bg-destructive/5',
           'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
@@ -84,7 +92,7 @@ function Dropzone({
           size === 'compact' && 'flex-row justify-start px-4 py-3 text-left',
         )}
       >
-        <input {...getInputProps()} />
+        <input {...getInputProps({ id: field.id })} />
         {children ?? (
           <>
             <span
diff --git a/frontend/src/components/ui/feedback.test.tsx b/frontend/src/components/ui/feedback.test.tsx
deleted file mode 100644
index c3487b6f..00000000
--- a/frontend/src/components/ui/feedback.test.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server';
-import { describe, expect, it } from 'vitest';
-
-import { Progress } from './progress';
-import { Skeleton } from './skeleton';
-import { Spinner } from './spinner';
-import { Textarea, textareaVariants } from './textarea';
-import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
-
-describe('Textarea', () => {
-  it('shares the Input field styling and resizes vertically by default', () => {
-    const classes = textareaVariants();
-    expect(classes).toContain('border-border');
-    expect(classes).toContain('focus-visible:ring-3');
-    expect(classes).toContain('resize-y');
-    expect(classes).toContain('min-h-16');
-  });
-
-  it('renders size and resize as data attributes and classes', () => {
-    const html = renderToStaticMarkup(<Textarea size="lg" resize="none" />);
-    expect(html).toContain('data-size="lg"');
-    expect(html).toContain('resize-none');
-    expect(html).toContain('rounded-2xl');
-  });
-});
-
-describe('Spinner', () => {
-  it('is an accessible status element drawn by the ring utility', () => {
-    const html = renderToStaticMarkup(<Spinner size="sm" />);
-    expect(html).toContain('role="status"');
-    expect(html).toContain('aria-label="Loading"');
-    expect(html).toContain('spinner-ring');
-    expect(html).toContain('size-5');
-    expect(html).toContain('data-size="sm"');
-  });
-});
-
-describe('Skeleton', () => {
-  it('is a pulsing muted block hidden from assistive tech', () => {
-    const html = renderToStaticMarkup(<Skeleton className="h-4 w-32" />);
-    expect(html).toContain('animate-pulse');
-    expect(html).toContain('bg-muted');
-    expect(html).toContain('aria-hidden="true"');
-    expect(html).toContain('w-32');
-  });
-});
-
-describe('Progress', () => {
-  it('clamps the value and exposes it as a custom property', () => {
-    const html = renderToStaticMarkup(
-      <Progress value={140} variant="warning" />,
-    );
-    expect(html).toContain('--progress:100%');
-    expect(html).toContain('bg-warning');
-    expect(html).toContain('aria-valuenow="100"');
-  });
-
-  it('never uses raw palette colours', () => {
-    for (const variant of [
-      'default',
-      'success',
-      'warning',
-      'destructive',
-      'info',
-    ] as const) {
-      expect(
-        renderToStaticMarkup(<Progress value={50} variant={variant} />),
-      ).not.toMatch(
-        /\b(bg|text)-(red|green|amber|yellow|blue|gray|purple)-\d+/,
-      );
-    }
-  });
-});
-
-describe('Tooltip', () => {
-  it('renders its trigger without needing an app-level provider', () => {
-    const html = renderToStaticMarkup(
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button type="button">Delete</button>
-        </TooltipTrigger>
-        <TooltipContent>Delete this source</TooltipContent>
-      </Tooltip>,
-    );
-    expect(html).toContain('data-slot="tooltip-trigger"');
-    expect(html).toContain('Delete');
-  });
-});
diff --git a/frontend/src/components/ui/form-field.test.tsx b/frontend/src/components/ui/form-field.test.tsx
new file mode 100644
index 00000000..e546cfd1
--- /dev/null
+++ b/frontend/src/components/ui/form-field.test.tsx
@@ -0,0 +1,159 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { FormField, FormFieldBoundary } from './form-field';
+import { Input } from './input';
+import { MultiSelect } from './multi-select';
+import { Select, SelectTrigger, SelectValue } from './select';
+import { Textarea } from './textarea';
+
+/** Parses rendered markup so tests can query it like the DOM. */
+function render(element: React.ReactElement): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(element);
+  return host;
+}
+
+describe('FormField', () => {
+  it('stacks label, field, hint and error 6px apart', () => {
+    const host = render(
+      <FormField label="Server name" hint="Shown in the tool list">
+        <Input />
+      </FormField>,
+    );
+    const wrapper = host.firstElementChild as HTMLElement;
+    expect(wrapper.className).toContain('flex-col');
+    expect(wrapper.className).toContain('gap-1.5');
+    expect(host.querySelector('p')?.className).toContain(
+      'text-muted-foreground',
+    );
+  });
+
+  it('points the label at the field and describes it with the hint', () => {
+    const host = render(
+      <FormField label="Server name" hint="Shown in the tool list">
+        <Input />
+      </FormField>,
+    );
+    const label = host.querySelector('label')!;
+    const input = host.querySelector('input')!;
+    expect(input.id).not.toBe('');
+    expect(label.getAttribute('for')).toBe(input.id);
+    const hint = host.querySelector('p')!;
+    expect(input.getAttribute('aria-describedby')).toBe(hint.id);
+  });
+
+  it('keeps an id the field already has', () => {
+    const host = render(
+      <FormField label="Server name">
+        <Input id="mcp-name" />
+      </FormField>,
+    );
+    expect(host.querySelector('input')!.id).toBe('mcp-name');
+    expect(host.querySelector('label')!.getAttribute('for')).toBe('mcp-name');
+  });
+
+  it('marks the field invalid and announces the error', () => {
+    const host = render(
+      <FormField
+        label="Server name"
+        hint="Shown"
+        error="Server name is required"
+      >
+        <Input />
+      </FormField>,
+    );
+    const input = host.querySelector('input')!;
+    const error = host.querySelector('[role="alert"]')!;
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    expect(error.className).toContain('text-destructive');
+    expect(error.textContent).toBe('Server name is required');
+    expect(input.getAttribute('aria-describedby')?.split(' ')).toContain(
+      error.id,
+    );
+  });
+
+  it('draws a tight, decorative star and sets aria-required', () => {
+    const host = render(
+      <FormField label="Server name" required>
+        <Input />
+      </FormField>,
+    );
+    const label = host.querySelector('label')!;
+    expect(label.className).toContain('gap-1');
+    const star = label.querySelector('span')!;
+    expect(star.getAttribute('aria-hidden')).toBe('true');
+    expect(star.className).toContain('text-destructive');
+    expect(host.querySelector('input')!.getAttribute('aria-required')).toBe(
+      'true',
+    );
+    // No native `required`: forms keep their own validation.
+    expect(host.querySelector('input')!.hasAttribute('required')).toBe(false);
+  });
+
+  it('wires Textarea and a SelectTrigger nested inside Select', () => {
+    const textarea = render(
+      <FormField label="Schema" error="Invalid">
+        <Textarea />
+      </FormField>,
+    );
+    expect(
+      textarea.querySelector('textarea')!.getAttribute('aria-invalid'),
+    ).toBe('true');
+
+    const select = render(
+      <FormField label="Authentication type">
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="None" />
+          </SelectTrigger>
+        </Select>
+      </FormField>,
+    );
+    const trigger = select.querySelector('[data-slot="select-trigger"]')!;
+    expect(select.querySelector('label')!.getAttribute('for')).toBe(trigger.id);
+  });
+
+  it('wires a MultiSelect trigger', () => {
+    const host = render(
+      <FormField label="Agents" error="Pick one">
+        <MultiSelect options={[]} selected={[]} onChange={() => undefined} />
+      </FormField>,
+    );
+    const trigger = host.querySelector('[role="combobox"]')!;
+    expect(host.querySelector('label')!.getAttribute('for')).toBe(trigger.id);
+    expect(trigger.getAttribute('aria-invalid')).toBe('true');
+  });
+
+  it('dims the label and disables the field when disabled', () => {
+    const host = render(
+      <FormField label="Server name" disabled>
+        <Input />
+      </FormField>,
+    );
+    const wrapper = host.firstElementChild as HTMLElement;
+    expect(wrapper.className).toContain('group');
+    expect(wrapper.getAttribute('data-disabled')).toBe('true');
+    expect(host.querySelector('input')!.disabled).toBe(true);
+  });
+
+  it('does not reach fields past a FormFieldBoundary', () => {
+    const host = render(
+      <FormField label="Prompt" id="prompt">
+        <Textarea />
+        <FormFieldBoundary>
+          <Input aria-label="Search variables" />
+        </FormFieldBoundary>
+      </FormField>,
+    );
+    expect(host.querySelector('textarea')!.id).toBe('prompt');
+    expect(host.querySelector('input')!.hasAttribute('id')).toBe(false);
+  });
+
+  it('leaves fields outside a FormField untouched', () => {
+    const host = render(<Input />);
+    const input = host.querySelector('input')!;
+    expect(input.hasAttribute('id')).toBe(false);
+    expect(input.hasAttribute('aria-invalid')).toBe(false);
+  });
+});
diff --git a/frontend/src/components/ui/form-field.tsx b/frontend/src/components/ui/form-field.tsx
new file mode 100644
index 00000000..357e1e8e
--- /dev/null
+++ b/frontend/src/components/ui/form-field.tsx
@@ -0,0 +1,139 @@
+import * as React from 'react';
+
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+type FormFieldControl = {
+  id: string;
+  describedBy?: string;
+  invalid: boolean;
+  required: boolean;
+  disabled: boolean;
+};
+
+const FormFieldContext = React.createContext<FormFieldControl | null>(null);
+
+type ControlProps = {
+  id?: string;
+  disabled?: boolean;
+  'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+  'aria-describedby'?: string;
+  'aria-required'?: React.AriaAttributes['aria-required'];
+};
+
+/**
+ * Fills a field's id, disabled and aria wiring from the FormField around it.
+ * Props the caller passed win; outside a FormField the props come back as-is.
+ * Input, Textarea, SelectTrigger and Checkbox call it, so any of them works
+ * as a FormField child, even nested (a SelectTrigger inside a Select).
+ */
+function useFormFieldControl<T extends ControlProps>(props: T): T {
+  const field = React.useContext(FormFieldContext);
+  if (!field) return props;
+  return {
+    ...props,
+    id: props.id ?? field.id,
+    disabled: props.disabled ?? (field.disabled || undefined),
+    'aria-invalid': props['aria-invalid'] ?? (field.invalid || undefined),
+    'aria-describedby': props['aria-describedby'] ?? field.describedBy,
+    'aria-required': props['aria-required'] ?? (field.required || undefined),
+  };
+}
+
+type FormFieldProps = {
+  label: React.ReactNode;
+  /** Draws the red star and sets aria-required (not native `required`). */
+  required?: boolean;
+  /** A muted line under the field. */
+  hint?: React.ReactNode;
+  /** A red line under the hint (role="alert"); also marks the field invalid. */
+  error?: React.ReactNode;
+  /** Dims the label and disables the field. */
+  disabled?: boolean;
+  /** The field's id; generated when neither this nor the field sets one. */
+  id?: string;
+  /** Layout only (width, margin, grid placement). */
+  className?: string;
+  children: React.ReactNode;
+};
+
+/**
+ * A labelled form field: Label, the field, an optional hint and error, 6px
+ * apart. Wires `htmlFor`, `aria-invalid`, `aria-describedby` and
+ * `aria-required` to the field through context (see useFormFieldControl).
+ */
+function FormField({
+  label,
+  required = false,
+  hint,
+  error,
+  disabled = false,
+  id,
+  className,
+  children,
+}: FormFieldProps) {
+  const generatedId = React.useId();
+  const childId = React.isValidElement<{ id?: string }>(children)
+    ? children.props.id
+    : undefined;
+  const fieldId = id ?? childId ?? generatedId;
+  const hintId = hint ? `${fieldId}-hint` : undefined;
+  const errorId = error ? `${fieldId}-error` : undefined;
+  const describedBy = [hintId, errorId].filter(Boolean).join(' ') || undefined;
+
+  const control = React.useMemo<FormFieldControl>(
+    () => ({
+      id: fieldId,
+      describedBy,
+      invalid: Boolean(error),
+      required,
+      disabled,
+    }),
+    [fieldId, describedBy, error, required, disabled],
+  );
+
+  return (
+    <div
+      data-slot="form-field"
+      data-disabled={disabled || undefined}
+      className={cn('group flex flex-col gap-1.5', className)}
+    >
+      <Label htmlFor={fieldId} className="gap-1">
+        {label}
+        {required ? (
+          <span aria-hidden="true" className="text-destructive">
+            *
+          </span>
+        ) : null}
+      </Label>
+      <FormFieldContext.Provider value={control}>
+        {children}
+      </FormFieldContext.Provider>
+      {hint ? (
+        <p id={hintId} className="text-muted-foreground text-xs">
+          {hint}
+        </p>
+      ) : null}
+      {error ? (
+        <p id={errorId} role="alert" className="text-destructive text-xs">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Stops a FormField's wiring from reaching fields rendered inside this
+ * subtree (a popover's search box), which would otherwise share its id.
+ */
+function FormFieldBoundary({ children }: { children: React.ReactNode }) {
+  return (
+    <FormFieldContext.Provider value={null}>
+      {children}
+    </FormFieldContext.Provider>
+  );
+}
+
+export { FormField, FormFieldBoundary, useFormFieldControl };
+export type { FormFieldProps };
diff --git a/frontend/src/components/ui/input.test.tsx b/frontend/src/components/ui/input.test.tsx
index 049a20e7..cbc3a7ce 100644
--- a/frontend/src/components/ui/input.test.tsx
+++ b/frontend/src/components/ui/input.test.tsx
@@ -127,3 +127,25 @@ describe('Input variants', () => {
     expect(html).toContain('shadow-xs');
   });
 });
+
+describe('Input field size and disabled state', () => {
+  it('size="field" is the 42px form-row height, like Button field', () => {
+    const classes = inputVariants({ size: 'field' });
+    expect(classes).toContain('h-10.5');
+    expect(classes).toBe(inputVariants({ size: 'default' }));
+  });
+
+  it('a field pill pads px-5 like the default pill', () => {
+    const html = renderToStaticMarkup(<Input size="field" shape="pill" />);
+    const classes = (/class="([^"]*)"/.exec(html)?.[1] ?? '').split(' ');
+    expect(classes).toContain('px-5');
+    expect(html).toContain('data-size="field"');
+  });
+
+  it('shows the not-allowed cursor while disabled', () => {
+    const classes = inputVariants().split(' ');
+    expect(classes).toContain('disabled:cursor-not-allowed');
+    // pointer-events-none would hide the cursor behind the field.
+    expect(classes).not.toContain('disabled:pointer-events-none');
+  });
+});
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index b46cc05c..75a46433 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -1,16 +1,20 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { useFormFieldControl } from '@/components/ui/form-field';
+import { cn, focusRing, invalidState, fieldFrame } from '@/lib/utils';
 
 const inputVariants = cva(
-  'text-foreground file:text-foreground placeholder:text-muted-foreground border-border w-full min-w-0 border bg-transparent shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  `${focusRing} ${invalidState} ${fieldFrame} text-foreground file:text-foreground placeholder:text-muted-foreground border-border w-full min-w-0 bg-transparent file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 selection:bg-primary selection:text-primary-foreground focus-visible:border-ring`,
   {
     variants: {
       size: {
         default: 'h-10.5 px-3 py-2 text-base md:text-sm',
         sm: 'h-8 px-2 py-1 text-sm',
         lg: 'h-12 px-5 py-3 text-base md:text-sm',
+        // The form-row height (42px) by name, shared with Button field and
+        // SelectTrigger field; the same classes as default.
+        field: 'h-10.5 px-3 py-2 text-base md:text-sm',
       },
       shape: {
         default: 'rounded-md',
@@ -34,7 +38,7 @@ const inputVariants = cva(
       // Not on `bare`, which has no padding of its own.
       {
         shape: 'pill',
-        size: 'default',
+        size: ['default', 'field'],
         variant: ['default', 'filled'],
         class: 'px-5',
       },
@@ -55,6 +59,7 @@ const LABEL_RESTING_CLASSES: Record<
   default: 'peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-base',
   sm: 'peer-placeholder-shown:top-1.5 peer-placeholder-shown:text-sm',
   lg: 'peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-base',
+  field: 'peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-base',
 };
 
 // The floating label sits on the field's border, so its background has to
@@ -73,20 +78,21 @@ type InputProps = Omit<React.ComponentProps<'input'>, 'size'> &
     labelSurface?: keyof typeof LABEL_SURFACE_CLASSES;
   };
 
-function Input({
-  className,
-  type,
-  label,
-  leftIcon,
-  labelSurface = 'card',
-  id,
-  placeholder,
-  required,
-  size = 'default',
-  shape = 'default',
-  variant = 'default',
-  ...props
-}: InputProps) {
+function Input(inputProps: InputProps) {
+  const {
+    className,
+    type,
+    label,
+    leftIcon,
+    labelSurface = 'card',
+    id,
+    placeholder,
+    required,
+    size = 'default',
+    shape = 'default',
+    variant = 'default',
+    ...props
+  } = useFormFieldControl(inputProps);
   const generatedId = React.useId();
   const inputId = id ?? (label ? generatedId : undefined);
 
diff --git a/frontend/src/components/ui/modal.test.tsx b/frontend/src/components/ui/modal.test.tsx
new file mode 100644
index 00000000..2a25a868
--- /dev/null
+++ b/frontend/src/components/ui/modal.test.tsx
@@ -0,0 +1,222 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const media = { isMobile: false, isTablet: false, isDesktop: true };
+vi.mock('../../hooks', () => ({
+  useMediaQuery: () => media,
+}));
+
+import { Button } from './button';
+import { Modal, ModalActions } from './modal';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+const content = () =>
+  document.querySelector<HTMLElement>('[data-slot="modal-content"]')!;
+
+describe('Modal header', () => {
+  it('draws the title at 20px with the description 8px under it', async () => {
+    await render(
+      <Modal
+        open
+        onOpenChange={() => undefined}
+        title="Create access token"
+        description="The token acts as you."
+      >
+        Body
+      </Modal>,
+    );
+    const title = document.querySelector('[data-slot="dialog-title"]')!;
+    expect(title.className).toContain('text-xl');
+    expect(title.className).toContain('leading-tight');
+    expect(title.className).not.toContain('text-lg');
+    const description = document.querySelector(
+      '[data-slot="dialog-description"]',
+    )!;
+    expect(description.className).toContain('mt-2');
+    // One grid cell for both, so the grid's gap-4 doesn't add to mt-2.
+    expect(title.parentElement).toBe(description.parentElement);
+    expect(title.parentElement).not.toBe(content());
+  });
+});
+
+describe('Modal footer', () => {
+  it('stacks on phones and sits in a right-aligned row from sm up', async () => {
+    await render(
+      <Modal
+        open
+        onOpenChange={() => undefined}
+        title="Create a team"
+        footer={<Button>Create</Button>}
+      >
+        Body
+      </Modal>,
+    );
+    const footer = document.querySelector('[data-slot="modal-footer"]')!;
+    const classes = footer.className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'flex-col-reverse',
+        'gap-3',
+        'sm:flex-row',
+        'sm:justify-end',
+      ]),
+    );
+  });
+});
+
+describe('ModalActions', () => {
+  const renderActions = async (
+    props: Partial<React.ComponentProps<typeof ModalActions>> = {},
+  ) =>
+    render(
+      <Modal
+        open
+        onOpenChange={() => undefined}
+        title="Create access token"
+        footer={
+          <ModalActions
+            cancelLabel="Cancel"
+            onCancel={() => undefined}
+            submitLabel="Create token"
+            onSubmit={() => undefined}
+            {...props}
+          />
+        }
+      >
+        Body
+      </Modal>,
+    );
+
+  const footerButtons = () =>
+    Array.from(
+      document.querySelectorAll<HTMLButtonElement>(
+        '[data-slot="modal-footer"] button',
+      ),
+    );
+
+  it('renders a ghost Cancel and a primary submit, both lg pills', async () => {
+    await renderActions();
+    const [cancel, submit] = footerButtons();
+    expect(cancel.textContent).toBe('Cancel');
+    expect(cancel.dataset.variant).toBe('ghost');
+    expect(submit.textContent).toBe('Create token');
+    expect(submit.dataset.variant).toBe('default');
+    for (const button of [cancel, submit]) {
+      expect(button.dataset.size).toBe('lg');
+      expect(button.dataset.shape).toBe('pill');
+      expect(button.type).toBe('button');
+    }
+  });
+
+  it('turns the submit red when destructive', async () => {
+    await renderActions({ destructive: true });
+    expect(footerButtons()[1].dataset.variant).toBe('destructive');
+  });
+
+  it('shows the spinner while pending and disables submit', async () => {
+    await renderActions({ pending: true });
+    const submit = footerButtons()[1];
+    expect(submit.disabled).toBe(true);
+    expect(submit.getAttribute('aria-busy')).toBe('true');
+  });
+
+  it('disables submit without a spinner when disabled', async () => {
+    await renderActions({ disabled: true });
+    const submit = footerButtons()[1];
+    expect(submit.disabled).toBe(true);
+    expect(submit.hasAttribute('aria-busy')).toBe(false);
+  });
+
+  it('pushes footerStart to the left edge from sm up', async () => {
+    await renderActions({
+      footerStart: <Button variant="outline">Test connection</Button>,
+    });
+    const start = document.querySelector('[data-slot="modal-footer-start"]')!;
+    expect(start.className).toContain('sm:mr-auto');
+    expect(start.textContent).toBe('Test connection');
+  });
+
+  it('passes extra props to the buttons', async () => {
+    await renderActions({
+      submitProps: { type: 'submit', form: 'token-form' },
+      cancelProps: { 'aria-label': 'Close dialog' },
+    });
+    const [cancel, submit] = footerButtons();
+    expect(submit.type).toBe('submit');
+    expect(submit.getAttribute('form')).toBe('token-form');
+    expect(cancel.getAttribute('aria-label')).toBe('Close dialog');
+  });
+});
+
+describe('Modal mobile sheet', () => {
+  afterEach(() => {
+    media.isMobile = false;
+  });
+
+  it('takes the bottom-sheet shape and handle from ui/sheet on phones', async () => {
+    media.isMobile = true;
+    await render(
+      <Modal
+        open
+        onOpenChange={() => undefined}
+        title="Test retrieval"
+        mobileVariant="sheet"
+      >
+        Body
+      </Modal>,
+    );
+    const sheet = content();
+    expect(sheet.hasAttribute('data-mobile-sheet')).toBe(true);
+    const classes = sheet.className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'bg-card',
+        'rounded-t-2xl',
+        'max-h-[90vh]',
+        'pb-safe',
+        'gap-3',
+        'px-4',
+      ]),
+    );
+    expect(sheet.className).not.toContain('env(');
+    expect(sheet.firstElementChild!.getAttribute('data-slot')).toBe(
+      'sheet-handle',
+    );
+  });
+
+  it('keeps the centred dialog on desktop', async () => {
+    await render(
+      <Modal
+        open
+        onOpenChange={() => undefined}
+        title="Test retrieval"
+        mobileVariant="sheet"
+      >
+        Body
+      </Modal>,
+    );
+    expect(content().hasAttribute('data-mobile-sheet')).toBe(false);
+    expect(content().className).toContain('rounded-2xl');
+    expect(content().querySelector('[data-slot="sheet-handle"]')).toBeNull();
+  });
+});
diff --git a/frontend/src/components/ui/modal.tsx b/frontend/src/components/ui/modal.tsx
index bc2efc6b..4e85bb97 100644
--- a/frontend/src/components/ui/modal.tsx
+++ b/frontend/src/components/ui/modal.tsx
@@ -4,6 +4,7 @@ import { XIcon } from 'lucide-react';
 import { Dialog as DialogPrimitive, VisuallyHidden } from 'radix-ui';
 import * as React from 'react';
 
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogClose,
@@ -12,6 +13,7 @@ import {
   DialogPortal,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { SheetHandle, sheetBottomShape } from '@/components/ui/sheet';
 import { useMediaQuery } from '../../hooks';
 import { cn } from '@/lib/utils';
 
@@ -75,27 +77,40 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(
   // announce it. If no title was supplied at all, provide a sensible default
   // ("Dialog") behind VisuallyHidden so Radix never warns.
   const resolvedTitle = title ?? 'Dialog';
-  const titleNode =
-    hideTitle || !title ? (
-      <VisuallyHidden.Root>
-        <DialogTitle>{resolvedTitle}</DialogTitle>
-      </VisuallyHidden.Root>
-    ) : (
-      <DialogTitle>{title}</DialogTitle>
-    );
+  const showTitle = Boolean(title) && !hideTitle;
 
   const descriptionNode = description ? (
-    <DialogDescription>{description}</DialogDescription>
+    <DialogDescription className={showTitle ? 'mt-2' : undefined}>
+      {description}
+    </DialogDescription>
   ) : (
     <VisuallyHidden.Root>
       <DialogDescription>{resolvedTitle}</DialogDescription>
     </VisuallyHidden.Root>
   );
 
+  // A visible title and its description share one grid cell, so the
+  // description sits 8px under the title rather than the grid's 16px.
+  const headerNode = showTitle ? (
+    <div data-slot="modal-header">
+      <DialogTitle className="text-xl leading-tight font-semibold">
+        {title}
+      </DialogTitle>
+      {descriptionNode}
+    </div>
+  ) : (
+    <>
+      <VisuallyHidden.Root>
+        <DialogTitle>{resolvedTitle}</DialogTitle>
+      </VisuallyHidden.Root>
+      {descriptionNode}
+    </>
+  );
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogPortal>
-        <DialogOverlay className="bg-black/25 backdrop-blur-xs dark:bg-black/50" />
+        <DialogOverlay />
         <DialogPrimitive.Content
           ref={ref}
           data-slot="modal-content"
@@ -114,27 +129,18 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(
           className={cn(
             'bg-card text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out shadow-modal fixed z-50 duration-200 outline-none',
             isMobileSheet
-              ? /* eslint-disable-next-line shadcn/no-arbitrary-values -- the
-                   sheet's bottom padding must clear the iPhone home indicator
-                   (env(safe-area-inset-bottom), about 34px) and fall back to
-                   1rem elsewhere; no scale step can express env() (DESIGN.md
-                   Approved exceptions). */
-                'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 flex max-h-[90vh] w-full flex-col gap-3 rounded-t-2xl px-4 pt-2 pb-[max(env(safe-area-inset-bottom),1rem)]'
+              ? // The shared bottom-sheet shape; pb-safe clears the iPhone
+                // home indicator and keeps 1rem under the footer elsewhere.
+                `${sheetBottomShape} pb-safe flex w-full flex-col gap-3 px-4`
               : cn(
-                  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-8',
+                  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 top-1/2 left-1/2 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl p-8',
                   SIZE_CLASSES[size],
                   className,
                 ),
           )}
         >
-          {isMobileSheet && (
-            <div
-              className="bg-border mx-auto h-1.5 w-12 shrink-0 rounded-full"
-              aria-hidden="true"
-            />
-          )}
-          {titleNode}
-          {descriptionNode}
+          {isMobileSheet && <SheetHandle />}
+          {headerNode}
           <div
             className={cn(
               // overflow-y-auto forces overflow-x:auto and establishes a clip
@@ -148,15 +154,25 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(
             {children}
           </div>
           {footer ? (
-            <div className="flex shrink-0 justify-end gap-2">{footer}</div>
+            // Phones stack the buttons full width, primary on top; from sm
+            // up they sit in one right-aligned row.
+            <div
+              data-slot="modal-footer"
+              className="flex shrink-0 flex-col-reverse gap-3 sm:flex-row sm:justify-end"
+            >
+              {footer}
+            </div>
           ) : null}
           {shouldShowCloseButton && !isMobileSheet && (
-            <DialogClose
-              className="ring-offset-background focus:ring-ring absolute top-3 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
-              aria-label="Close"
-            >
-              <XIcon className="size-4" />
-              <span className="sr-only">Close</span>
+            <DialogClose asChild>
+              <Button
+                variant="ghost-muted"
+                size="icon-sm"
+                aria-label="Close"
+                className="absolute top-2 right-2"
+              >
+                <XIcon />
+              </Button>
             </DialogClose>
           )}
         </DialogPrimitive.Content>
@@ -165,4 +181,76 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(
   );
 });
 
-export { Modal };
+type ModalActionsProps = {
+  cancelLabel: React.ReactNode;
+  onCancel: () => void;
+  submitLabel: React.ReactNode;
+  onSubmit?: () => void;
+  /** Spinner on the submit button (it is also disabled). */
+  pending?: boolean;
+  /** Disables submit without a spinner (the form isn't valid yet). */
+  disabled?: boolean;
+  /** A red submit, for deletes. */
+  destructive?: boolean;
+  /** A button pinned to the footer's left edge from sm up (Test connection). */
+  footerStart?: React.ReactNode;
+  /** Extra props for the submit (type="submit", form, data-testid). */
+  submitProps?: Omit<React.ComponentProps<typeof Button>, 'children'>;
+  /** Extra props for Cancel. */
+  cancelProps?: Omit<React.ComponentProps<typeof Button>, 'children'>;
+};
+
+/**
+ * The standard modal footer: a ghost Cancel and a primary (or destructive)
+ * submit, both large pills. Pass it as Modal's `footer`.
+ */
+function ModalActions({
+  cancelLabel,
+  onCancel,
+  submitLabel,
+  onSubmit,
+  pending = false,
+  disabled = false,
+  destructive = false,
+  footerStart,
+  submitProps,
+  cancelProps,
+}: ModalActionsProps) {
+  return (
+    <>
+      {footerStart ? (
+        <div
+          data-slot="modal-footer-start"
+          className="flex flex-col sm:mr-auto"
+        >
+          {footerStart}
+        </div>
+      ) : null}
+      <Button
+        type="button"
+        variant="ghost"
+        size="lg"
+        shape="pill"
+        onClick={onCancel}
+        {...cancelProps}
+      >
+        {cancelLabel}
+      </Button>
+      <Button
+        type="button"
+        variant={destructive ? 'destructive' : 'default'}
+        size="lg"
+        shape="pill"
+        onClick={onSubmit}
+        disabled={disabled}
+        loading={pending}
+        {...submitProps}
+      >
+        {submitLabel}
+      </Button>
+    </>
+  );
+}
+
+export { Modal, ModalActions };
+export type { ModalActionsProps };
diff --git a/frontend/src/components/ui/multi-select.test.tsx b/frontend/src/components/ui/multi-select.test.tsx
new file mode 100644
index 00000000..901782e2
--- /dev/null
+++ b/frontend/src/components/ui/multi-select.test.tsx
@@ -0,0 +1,63 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { MultiSelect } from './multi-select';
+
+const options = [
+  { value: 'identity', label: 'Identity' },
+  { value: 'access', label: 'Access' },
+  { value: 'safety', label: 'Safety' },
+];
+
+function render(selected: string[]): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(
+    <MultiSelect
+      options={options}
+      selected={selected}
+      onChange={() => undefined}
+      placeholder="All categories"
+    />,
+  );
+  return host;
+}
+
+describe('MultiSelect', () => {
+  it('uses the combobox trigger at the 42px form-row height', () => {
+    const trigger = render([]).querySelector<HTMLElement>('[role="combobox"]')!;
+    expect(trigger.dataset.slot).toBe('multi-select-trigger');
+    expect(trigger.dataset.variant).toBe('combobox');
+    expect(trigger.dataset.size).toBe('field');
+    const classes = trigger.className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining(['h-auto', 'min-h-10.5', 'py-1.5']),
+    );
+    // No restyle of another variant's surface.
+    expect(classes).not.toContain('min-h-10');
+    expect(classes).not.toContain('bg-background');
+    expect(trigger.className).not.toContain('dark:bg-input/30');
+  });
+
+  it('marks the empty trigger as a placeholder', () => {
+    const trigger = render([]).querySelector('[role="combobox"]')!;
+    expect(trigger.hasAttribute('data-placeholder')).toBe(true);
+    expect(trigger.textContent).toContain('All categories');
+    const filled = render(['identity']).querySelector('[role="combobox"]')!;
+    expect(filled.hasAttribute('data-placeholder')).toBe(false);
+  });
+
+  it('shows the first two picks as Badges and counts the rest', () => {
+    const host = render(['identity', 'access', 'safety']);
+    const chips = Array.from(host.querySelectorAll('[data-slot="badge"]'));
+    expect(chips.map((chip) => chip.textContent)).toEqual([
+      'Identity',
+      'Access',
+    ]);
+    chips.forEach((chip) => {
+      expect(chip.getAttribute('data-variant')).toBe('default');
+      // The hand-rolled chip's heavier tint is gone.
+      expect(chip.className.split(' ')).not.toContain('bg-primary/20');
+    });
+    expect(host.textContent).toContain('+1 more');
+  });
+});
diff --git a/frontend/src/components/ui/multi-select.tsx b/frontend/src/components/ui/multi-select.tsx
index c0c234f7..b1a449f3 100644
--- a/frontend/src/components/ui/multi-select.tsx
+++ b/frontend/src/components/ui/multi-select.tsx
@@ -3,7 +3,9 @@
 import { Check, ChevronsUpDown, X } from 'lucide-react';
 import * as React from 'react';
 
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { useFormFieldControl } from '@/components/ui/form-field';
 import {
   Command,
   CommandEmpty,
@@ -41,6 +43,8 @@ interface MultiSelectProps {
    * pointerdown instead.
    */
   modal?: boolean;
+  /** The trigger's id; inside a FormField it defaults to the field's. */
+  id?: string;
 }
 
 export function MultiSelect({
@@ -52,8 +56,16 @@ export function MultiSelect({
   searchPlaceholder = 'Search...',
   className,
   modal = false,
+  id,
 }: MultiSelectProps) {
   const [open, setOpen] = React.useState(false);
+  const control = useFormFieldControl<{
+    id?: string;
+    disabled?: boolean;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-describedby'?: string;
+    'aria-required'?: React.AriaAttributes['aria-required'];
+  }>({ id });
 
   const handleSelect = (value: string) => {
     const newSelected = selected.includes(value)
@@ -76,12 +88,16 @@ export function MultiSelect({
     <Popover open={open} onOpenChange={setOpen} modal={modal}>
       <PopoverTrigger asChild>
         <Button
-          variant="outline"
+          variant="combobox"
+          size="field"
           role="combobox"
           aria-expanded={open}
+          data-slot="multi-select-trigger"
+          data-placeholder={selected.length ? undefined : ''}
+          {...control}
           className={cn(
-            'border-border bg-card hover:bg-accent h-auto min-h-10 w-full justify-between py-1.5',
-            !selected.length && 'text-muted-foreground',
+            // Grows past the 42px row when the chips wrap.
+            'h-auto min-h-10.5 w-full justify-between py-1.5',
             className,
           )}
         >
@@ -97,9 +113,9 @@ export function MultiSelect({
                 {selectedLabels.slice(0, 2).map((label) => {
                   const option = options.find((o) => o.label === label);
                   return (
-                    <span
+                    <Badge
                       key={option?.value || label}
-                      className="bg-primary/20 dark:bg-primary/30 text-primary inline-flex max-w-[calc(100%-1rem)] min-w-0 items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium"
+                      className="max-w-[calc(100%-1rem)] min-w-0"
                     >
                       <span className="truncate">{label}</span>
                       <span
@@ -123,7 +139,7 @@ export function MultiSelect({
                       >
                         <X className="h-3 w-3" />
                       </span>
-                    </span>
+                    </Badge>
                   );
                 })}
                 {selected.length > 2 && (
@@ -165,7 +181,7 @@ export function MultiSelect({
                           : 'border-input',
                       )}
                     >
-                      {isSelected && <Check className="h-3 w-3 stroke-white" />}
+                      {isSelected && <Check className="h-3 w-3" />}
                     </div>
                     {option.label}
                   </CommandItem>
diff --git a/frontend/src/components/ui/overlay-chrome.test.tsx b/frontend/src/components/ui/overlay-chrome.test.tsx
new file mode 100644
index 00000000..c69ae779
--- /dev/null
+++ b/frontend/src/components/ui/overlay-chrome.test.tsx
@@ -0,0 +1,129 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { Dialog, DialogContent, DialogTitle } from './dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+import { Modal } from './modal';
+import { Sheet, SheetContent } from './sheet';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+const closeButton = () =>
+  document.querySelector<HTMLButtonElement>('button[aria-label="Close"]');
+
+describe('close buttons on overlays', () => {
+  const cases: [string, () => React.ReactElement][] = [
+    [
+      'Modal',
+      () => (
+        <Modal open onOpenChange={() => undefined} title="Create access token">
+          Body
+        </Modal>
+      ),
+    ],
+    [
+      'DialogContent',
+      () => (
+        <Dialog open>
+          <DialogContent aria-describedby={undefined}>
+            <DialogTitle>Search</DialogTitle>
+          </DialogContent>
+        </Dialog>
+      ),
+    ],
+    [
+      'SheetContent',
+      () => (
+        <Sheet open>
+          <SheetContent title="Trace" aria-describedby={undefined} />
+        </Sheet>
+      ),
+    ],
+  ];
+
+  it.each(cases)(
+    '%s closes with a 32px ghost-muted icon Button',
+    async (_name, element) => {
+      await render(element());
+      const button = closeButton();
+      expect(button).not.toBeNull();
+      expect(button!.dataset.variant).toBe('ghost-muted');
+      expect(button!.dataset.size).toBe('icon-sm');
+      expect(button!.className).toContain('absolute');
+    },
+  );
+
+  it.each(cases)(
+    '%s shows the focus ring on keyboard focus only',
+    async (_name, element) => {
+      await render(element());
+      const classes = closeButton()!.className.split(' ');
+      expect(classes).toContain('focus-visible:ring-3');
+      expect(classes.some((c) => c.startsWith('focus:'))).toBe(false);
+      expect(classes).not.toContain('focus:ring-2');
+    },
+  );
+});
+
+describe('overlay elevation', () => {
+  it('DialogContent is a modal surface', async () => {
+    await render(
+      <Dialog open>
+        <DialogContent aria-describedby={undefined}>
+          <DialogTitle>Search</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+    const content = document.querySelector('[data-slot="dialog-content"]')!;
+    expect(content.className).toContain('shadow-modal');
+    expect(content.className).not.toContain('shadow-lg');
+    // Centred with scale steps, not bracketed percentages.
+    expect(content.className).toContain('-translate-x-1/2');
+    expect(content.className).not.toContain('translate-x-[-50%]');
+  });
+
+  it('DropdownMenuSubContent floats like the menu it opens from', async () => {
+    await render(
+      <DropdownMenu open>
+        <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSub open>
+            <DropdownMenuSubTrigger>Move to</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>Sales</DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    const sub = document.querySelector(
+      '[data-slot="dropdown-menu-sub-content"]',
+    )!;
+    expect(sub.className).toContain('shadow-md');
+    expect(sub.className).not.toContain('shadow-lg');
+  });
+});
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
index d1de7eb1..f7e8f313 100644
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { FormFieldBoundary } from '@/components/ui/form-field';
 import { cn } from '@/lib/utils';
 import { Popover as PopoverPrimitive } from 'radix-ui';
 
@@ -23,16 +24,20 @@ function PopoverContent({
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
   return (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border p-4 shadow-md outline-hidden',
-          className,
-        )}
-        {...props}
-      />
+      {/* A popover opened from a FormField's control (a search box in a
+          picker) holds its own fields, not the FormField's. */}
+      <FormFieldBoundary>
+        <PopoverPrimitive.Content
+          data-slot="popover-content"
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border p-4 shadow-md outline-hidden',
+            className,
+          )}
+          {...props}
+        />
+      </FormFieldBoundary>
     </PopoverPrimitive.Portal>
   );
 }
diff --git a/frontend/src/components/ui/progress.test.tsx b/frontend/src/components/ui/progress.test.tsx
new file mode 100644
index 00000000..208a210b
--- /dev/null
+++ b/frontend/src/components/ui/progress.test.tsx
@@ -0,0 +1,39 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Progress } from './progress';
+
+describe('Progress', () => {
+  it('clamps the value and exposes it as a custom property', () => {
+    const html = renderToStaticMarkup(
+      <Progress value={140} variant="warning" />,
+    );
+    expect(html).toContain('--progress:100%');
+    expect(html).toContain('bg-warning');
+    expect(html).toContain('aria-valuenow="100"');
+  });
+
+  it('never uses raw palette colours', () => {
+    for (const variant of [
+      'default',
+      'success',
+      'warning',
+      'destructive',
+      'info',
+    ] as const) {
+      expect(
+        renderToStaticMarkup(<Progress value={50} variant={variant} />),
+      ).not.toMatch(
+        /\b(bg|text)-(red|green|amber|yellow|blue|gray|purple)-\d+/,
+      );
+    }
+  });
+
+  it('exposes its variant and size as data attributes', () => {
+    const html = renderToStaticMarkup(
+      <Progress value={50} variant="success" size="sm" />,
+    );
+    expect(html).toContain('data-variant="success"');
+    expect(html).toContain('data-size="sm"');
+  });
+});
diff --git a/frontend/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
index 8871fe15..048b19e6 100644
--- a/frontend/src/components/ui/progress.tsx
+++ b/frontend/src/components/ui/progress.tsx
@@ -54,6 +54,7 @@ function Progress({
     <ProgressPrimitive.Root
       data-slot="progress"
       data-variant={variant}
+      data-size={size}
       value={clamped}
       className={cn(progressVariants({ size }), className)}
       {...props}
diff --git a/frontend/src/components/ui/select.test.tsx b/frontend/src/components/ui/select.test.tsx
index 0d311e53..5a6766d0 100644
--- a/frontend/src/components/ui/select.test.tsx
+++ b/frontend/src/components/ui/select.test.tsx
@@ -39,3 +39,54 @@ describe('SelectItem', () => {
     expect(item!.className).toContain('data-highlighted:bg-muted');
   });
 });
+
+describe('SelectTrigger sizes', () => {
+  const trigger = (props: Parameters<typeof SelectTrigger>[0]) => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    root = createRoot(host);
+    act(() => {
+      root!.render(
+        <Select value="a">
+          <SelectTrigger aria-label="Retriever" {...props}>
+            a
+          </SelectTrigger>
+        </Select>,
+      );
+    });
+    return document.querySelector<HTMLElement>('[data-slot="select-trigger"]')!;
+  };
+
+  it('exposes its variant as a data attribute', () => {
+    expect(trigger({}).dataset.variant).toBe('default');
+  });
+
+  it('size="field" is the 42px form-row height, like SelectTrigger lg', () => {
+    const el = trigger({ size: 'field' });
+    expect(el.dataset.size).toBe('field');
+    expect(el.className.split(' ')).toContain('h-10.5');
+  });
+
+  it.each(['default', 'lg', 'field'] as const)(
+    'a %s pill starts its text 21px in (px-5)',
+    (size) => {
+      const classes = trigger({ size, shape: 'pill' }).className.split(' ');
+      expect(classes).toContain('rounded-full');
+      expect(classes).toContain('px-5');
+      expect(classes).not.toContain('px-3');
+      expect(classes).not.toContain('px-4');
+    },
+  );
+
+  it('a small pill keeps px-3', () => {
+    const classes = trigger({ size: 'sm', shape: 'pill' }).className.split(' ');
+    expect(classes).toContain('px-3');
+    expect(classes).not.toContain('px-5');
+  });
+
+  it('shows the not-allowed cursor while disabled', () => {
+    const classes = trigger({}).className.split(' ');
+    expect(classes).toContain('disabled:cursor-not-allowed');
+    expect(classes).toContain('focus-visible:ring-3');
+  });
+});
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index 5ad1409a..4303d98d 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -1,7 +1,10 @@
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { useFormFieldControl } from '@/components/ui/form-field';
+import { cn, fieldFrame, focusRing, invalidState } from '@/lib/utils';
 import { Select as SelectPrimitive } from 'radix-ui';
 
 function Select({
@@ -22,34 +25,60 @@ function SelectValue({
   return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
-function SelectTrigger({
-  className,
-  size = 'default',
-  variant = 'default',
-  shape = 'default',
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: 'sm' | 'default' | 'lg';
-  variant?: 'default' | 'ghost';
-  shape?: 'default' | 'pill';
-}) {
+const selectTriggerVariants = cva(
+  `${focusRing} ${invalidState} ${fieldFrame} group border-border [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 px-3 py-2 text-sm whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+  {
+    variants: {
+      size: {
+        sm: 'h-8',
+        default: 'h-9',
+        lg: 'h-10.5',
+        // The form-row height (42px), shared with Button field and Input
+        // default, so a column of mixed fields has one name for one height.
+        field: 'h-10.5',
+      },
+      variant: {
+        default:
+          'bg-card hover:bg-accent data-placeholder:text-muted-foreground',
+        ghost:
+          'hover:bg-accent data-[state=open]:bg-muted data-placeholder:text-muted-foreground bg-transparent',
+      },
+      shape: {
+        default: 'rounded-md',
+        pill: 'rounded-full',
+      },
+    },
+    compoundVariants: [
+      // Pills start their text 21px in, like the Input and Button field pills.
+      { shape: 'pill', size: ['default', 'lg', 'field'], class: 'px-5' },
+    ],
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+      shape: 'default',
+    },
+  },
+);
+
+function SelectTrigger(
+  triggerProps: React.ComponentProps<typeof SelectPrimitive.Trigger> &
+    VariantProps<typeof selectTriggerVariants>,
+) {
+  const {
+    className,
+    size = 'default',
+    variant = 'default',
+    shape = 'default',
+    children,
+    ...props
+  } = useFormFieldControl(triggerProps);
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
+      data-variant={variant}
       data-shape={shape}
-      className={cn(
-        "group aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=lg]:h-10.5 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        variant === 'default' &&
-          'border-border bg-card focus-visible:ring-ring/50 hover:bg-accent data-placeholder:text-muted-foreground',
-        variant === 'ghost' &&
-          'border-border focus-visible:ring-ring/50 hover:bg-accent data-[state=open]:bg-muted data-placeholder:text-muted-foreground dark:border-border dark:hover:bg-accent dark:data-[state=open]:bg-muted bg-transparent',
-        shape === 'default' && 'rounded-md',
-        shape === 'pill' &&
-          'rounded-full px-4 data-[size=lg]:px-5 data-[size=sm]:px-3',
-        className,
-      )}
+      className={cn(selectTriggerVariants({ size, variant, shape }), className)}
       {...props}
     >
       {children}
@@ -197,4 +226,5 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  selectTriggerVariants,
 };
diff --git a/frontend/src/components/ui/setting-row.test.tsx b/frontend/src/components/ui/setting-row.test.tsx
new file mode 100644
index 00000000..c293efa1
--- /dev/null
+++ b/frontend/src/components/ui/setting-row.test.tsx
@@ -0,0 +1,92 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { SettingRow, SettingRows } from './setting-row';
+import { Switch } from './switch';
+
+function render(element: React.ReactElement): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(element);
+  return host;
+}
+
+describe('SettingRows / SettingRow', () => {
+  it('separates rows with a faint divider', () => {
+    const host = render(
+      <SettingRows>
+        <SettingRow label="Token limiting">
+          <Switch />
+        </SettingRow>
+      </SettingRows>,
+    );
+    const rows = host.firstElementChild as HTMLElement;
+    expect(rows.className).toContain('divide-y');
+    expect(rows.className).toContain('divide-border/50');
+  });
+
+  it('pads each row 12px, flush at the ends of the group', () => {
+    const host = render(
+      <SettingRow label="Token limiting">
+        <Switch />
+      </SettingRow>,
+    );
+    const row = host.firstElementChild as HTMLElement;
+    expect(row.className).toContain('py-3');
+    expect(row.className).toContain('first:pt-0');
+    expect(row.className).toContain('last:pb-0');
+  });
+
+  it('names the control with a clickable Label by default', () => {
+    const host = render(
+      <SettingRow
+        label="Token limiting"
+        description="Limit daily total tokens"
+        htmlFor="token-limiting"
+      >
+        <Switch id="token-limiting" />
+      </SettingRow>,
+    );
+    const label = host.querySelector('label')!;
+    expect(label.getAttribute('for')).toBe('token-limiting');
+    expect(label.className.split(' ')).not.toContain('pointer-events-none');
+    const description = host.querySelector('p')!;
+    expect(description.className).toContain('text-muted-foreground');
+    expect(description.className).toContain('text-xs');
+  });
+
+  it('keeps a heading tag when asked', () => {
+    const host = render(
+      <SettingRow label="Guardrails" as="h3">
+        <Switch aria-label="Guardrails" />
+      </SettingRow>,
+    );
+    expect(host.querySelector('h3')?.textContent).toBe('Guardrails');
+    expect(host.querySelector('label')).toBeNull();
+  });
+
+  it('aligns to the top for multi-line descriptions', () => {
+    const top = render(
+      <SettingRow label="A" alignStart>
+        <Switch />
+      </SettingRow>,
+    );
+    expect(top.innerHTML).toContain('items-start');
+    const centred = render(
+      <SettingRow label="A">
+        <Switch />
+      </SettingRow>,
+    );
+    expect(centred.innerHTML).toContain('items-center');
+  });
+
+  it('puts the `after` slot under the row, 8px down', () => {
+    const host = render(
+      <SettingRow label="Token limiting" after={<input data-testid="limit" />}>
+        <Switch />
+      </SettingRow>,
+    );
+    const after = host.querySelector('[data-testid="limit"]')!
+      .parentElement as HTMLElement;
+    expect(after.className).toContain('mt-2');
+  });
+});
diff --git a/frontend/src/components/ui/setting-row.tsx b/frontend/src/components/ui/setting-row.tsx
new file mode 100644
index 00000000..66ebfee2
--- /dev/null
+++ b/frontend/src/components/ui/setting-row.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+/** A group of SettingRows, split by faint dividers. Layout classes only. */
+function SettingRows({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="setting-rows"
+      className={cn('divide-border/50 divide-y', className)}
+      {...props}
+    />
+  );
+}
+
+type SettingRowProps = {
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  /** The control's id, so clicking the label toggles it and names it. */
+  htmlFor?: string;
+  /** Top-align the control, for descriptions that wrap. */
+  alignStart?: boolean;
+  /**
+   * The title element. `label` (default) names the control; a heading tag
+   * keeps the document outline, and the control then needs its own
+   * aria-label.
+   */
+  as?: 'label' | 'h2' | 'h3';
+  /** A field under the row that belongs to it (a limit Input under a Switch). */
+  after?: React.ReactNode;
+  /** Layout only. */
+  className?: string;
+  /** The control on the right: a Switch, a small Input, a Select. */
+  children?: React.ReactNode;
+};
+
+/**
+ * A settings row: title and muted description on the left, a control on the
+ * right, 12px of padding above and below (none at the ends of its group).
+ */
+function SettingRow({
+  label,
+  description,
+  htmlFor,
+  alignStart = false,
+  as = 'label',
+  after,
+  className,
+  children,
+}: SettingRowProps) {
+  const Heading = as === 'label' ? null : as;
+  return (
+    <div
+      data-slot="setting-row"
+      className={cn('py-3 first:pt-0 last:pb-0', className)}
+    >
+      <div
+        className={cn(
+          'flex flex-row justify-between gap-4',
+          alignStart ? 'items-start' : 'items-center',
+        )}
+      >
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          {Heading ? (
+            <Heading className="text-foreground text-sm leading-none font-medium">
+              {label}
+            </Heading>
+          ) : (
+            <Label
+              htmlFor={htmlFor}
+              className="text-foreground w-fit text-sm font-medium"
+            >
+              {label}
+            </Label>
+          )}
+          {description ? (
+            <p className="text-muted-foreground text-xs">{description}</p>
+          ) : null}
+        </div>
+        {children ? <div className="shrink-0">{children}</div> : null}
+      </div>
+      {after ? <div className="mt-2">{after}</div> : null}
+    </div>
+  );
+}
+
+export { SettingRow, SettingRows };
+export type { SettingRowProps };
diff --git a/frontend/src/components/ui/sheet.test.tsx b/frontend/src/components/ui/sheet.test.tsx
new file mode 100644
index 00000000..ca06ac30
--- /dev/null
+++ b/frontend/src/components/ui/sheet.test.tsx
@@ -0,0 +1,104 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { Sheet, SheetContent } from './sheet';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+const content = () =>
+  document.querySelector<HTMLElement>('[data-slot="sheet-content"]')!;
+
+describe('SheetContent side="bottom"', () => {
+  it('is a card-coloured sheet with a rounded top that clears the home indicator', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent
+          side="bottom"
+          title="Tools"
+          aria-describedby={undefined}
+        />
+      </Sheet>,
+    );
+    const classes = content().className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'bg-card',
+        'rounded-t-2xl',
+        'max-h-[90vh]',
+        'pb-safe-0',
+      ]),
+    );
+    expect(classes).not.toContain('bg-background');
+    expect(classes).not.toContain('border-t');
+    expect(content().dataset.side).toBe('bottom');
+  });
+
+  it('draws the grab handle first only when asked', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent
+          side="bottom"
+          handle
+          showCloseButton={false}
+          title="Tools"
+          aria-describedby={undefined}
+        >
+          <p>Body</p>
+        </SheetContent>
+      </Sheet>,
+    );
+    const handle = content().querySelector('[data-slot="sheet-handle"]');
+    expect(handle).not.toBeNull();
+    expect(handle!.getAttribute('aria-hidden')).toBe('true');
+    // The sr-only title comes first; the handle is the first visible child.
+    const visible = Array.from(content().children).filter(
+      (el) => !el.classList.contains('sr-only'),
+    );
+    expect(visible[0]).toBe(handle);
+  });
+
+  it('has no handle by default', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent
+          side="bottom"
+          title="Tools"
+          aria-describedby={undefined}
+        />
+      </Sheet>,
+    );
+    expect(content().querySelector('[data-slot="sheet-handle"]')).toBeNull();
+  });
+
+  it('leaves the side sheets on the page background with their border', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent side="right" title="Trace" aria-describedby={undefined} />
+      </Sheet>,
+    );
+    const classes = content().className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining(['bg-background', 'border-l']),
+    );
+    expect(classes).not.toContain('rounded-t-2xl');
+  });
+});
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
index e036acaf..1afbc05e 100644
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Dialog as SheetPrimitive } from 'radix-ui';
 import { XIcon } from 'lucide-react';
 
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
@@ -42,16 +43,43 @@ function SheetOverlay({
   );
 }
 
+/**
+ * The phone bottom-sheet shape: card fill, 16px top corners, capped at 90% of
+ * the viewport. Shared with Modal's `mobileVariant="sheet"` so every bottom
+ * sheet looks the same; the caller adds its own bottom padding (`pb-safe` or
+ * `pb-safe-0`).
+ */
+const sheetBottomShape =
+  'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto max-h-[90vh] rounded-t-2xl bg-card';
+
+/** The grab bar at the top of a bottom sheet, 8px below its edge. */
+function SheetHandle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-handle"
+      aria-hidden="true"
+      className={cn(
+        'bg-border mx-auto mt-2 h-1.5 w-12 shrink-0 rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
 function SheetContent({
   className,
   children,
   side = 'right',
   showCloseButton = true,
+  handle = false,
   title,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: 'top' | 'right' | 'bottom' | 'left';
   showCloseButton?: boolean;
+  /** Draw the grab bar first (bottom sheets). */
+  handle?: boolean;
   // Accessible name for the dialog. Radix warns when a Dialog has no Title;
   // pass this to render a visually-hidden one when the panel has no visible
   // heading of its own (omit it if the children already render a SheetTitle).
@@ -62,6 +90,7 @@ function SheetContent({
       <SheetOverlay />
       <SheetPrimitive.Content
         data-slot="sheet-content"
+        data-side={side}
         className={cn(
           'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
           side === 'right' &&
@@ -70,18 +99,26 @@ function SheetContent({
             'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
           side === 'top' &&
             'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          // A bottom sheet stacks its handle and parts flush; SheetHeader and
+          // SheetFooter bring their own padding.
+          side === 'bottom' && `${sheetBottomShape} pb-safe-0 gap-0`,
           className,
         )}
         {...props}
       >
         {title ? <SheetTitle className="sr-only">{title}</SheetTitle> : null}
+        {handle && <SheetHandle />}
         {children}
         {showCloseButton && (
-          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
+          <SheetPrimitive.Close asChild>
+            <Button
+              variant="ghost-muted"
+              size="icon-sm"
+              aria-label="Close"
+              className="absolute top-2 right-2"
+            >
+              <XIcon />
+            </Button>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Content>
@@ -136,10 +173,12 @@ function SheetDescription({
 }
 
 export {
+  sheetBottomShape,
   Sheet,
   SheetTrigger,
   SheetClose,
   SheetContent,
+  SheetHandle,
   SheetHeader,
   SheetFooter,
   SheetTitle,
diff --git a/frontend/src/components/ui/skeleton.test.tsx b/frontend/src/components/ui/skeleton.test.tsx
new file mode 100644
index 00000000..5b22e1e4
--- /dev/null
+++ b/frontend/src/components/ui/skeleton.test.tsx
@@ -0,0 +1,14 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Skeleton } from './skeleton';
+
+describe('Skeleton', () => {
+  it('is a pulsing muted block hidden from assistive tech', () => {
+    const html = renderToStaticMarkup(<Skeleton className="h-4 w-32" />);
+    expect(html).toContain('animate-pulse');
+    expect(html).toContain('bg-muted');
+    expect(html).toContain('aria-hidden="true"');
+    expect(html).toContain('w-32');
+  });
+});
diff --git a/frontend/src/components/ui/spinner.test.tsx b/frontend/src/components/ui/spinner.test.tsx
new file mode 100644
index 00000000..5024f617
--- /dev/null
+++ b/frontend/src/components/ui/spinner.test.tsx
@@ -0,0 +1,15 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Spinner } from './spinner';
+
+describe('Spinner', () => {
+  it('is an accessible status element drawn by the ring utility', () => {
+    const html = renderToStaticMarkup(<Spinner size="sm" />);
+    expect(html).toContain('role="status"');
+    expect(html).toContain('aria-label="Loading"');
+    expect(html).toContain('spinner-ring');
+    expect(html).toContain('size-5');
+    expect(html).toContain('data-size="sm"');
+  });
+});
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
index 69b990ac..b7fb5a1b 100644
--- a/frontend/src/components/ui/switch.tsx
+++ b/frontend/src/components/ui/switch.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn, focusRing } from '@/lib/utils';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 
 function Switch({
@@ -11,7 +11,7 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        'peer focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/35 dark:data-[state=unchecked]:bg-muted-foreground/45 inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
+        `${focusRing} peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/35 dark:data-[state=unchecked]:bg-muted-foreground/45 inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50`,
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/table.test.tsx b/frontend/src/components/ui/table.test.tsx
new file mode 100644
index 00000000..d9f60aff
--- /dev/null
+++ b/frontend/src/components/ui/table.test.tsx
@@ -0,0 +1,60 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table';
+
+function render(element: React.ReactElement): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(element);
+  return host;
+}
+
+describe('Table parts', () => {
+  it('pass native attributes through to the element', () => {
+    const host = render(
+      <Table aria-label="Audit feed" data-testid="table">
+        <TableHead data-testid="head">
+          <TableRow data-testid="head-row">
+            <TableHeader scope="col" width="120px">
+              When
+            </TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody data-testid="body">
+          <TableRow aria-selected="true">
+            <TableCell headers="when" align="right" colSpan={2}>
+              Today
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+    const table = host.querySelector('table')!;
+    expect(table.getAttribute('aria-label')).toBe('Audit feed');
+    expect(table.dataset.slot).toBe('table');
+    expect(host.querySelector('thead')!.dataset.testid).toBe('head');
+    expect(host.querySelector('tbody')!.dataset.testid).toBe('body');
+    const th = host.querySelector('th')!;
+    expect(th.getAttribute('scope')).toBe('col');
+    expect(th.getAttribute('style')).toContain('--cell-width:120px');
+    expect(host.querySelector('tbody tr')!.getAttribute('aria-selected')).toBe(
+      'true',
+    );
+    const td = host.querySelector('td')!;
+    expect(td.getAttribute('headers')).toBe('when');
+    expect(td.getAttribute('colspan')).toBe('2');
+    expect(td.className).toContain('text-right');
+  });
+
+  it('keeps the default minimum width on the table', () => {
+    const table = render(<Table>{null}</Table>).querySelector('table')!;
+    expect(table.className.split(' ')).toContain('min-w-[600px]');
+  });
+});
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
index d3f79dd4..739171c3 100644
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -2,11 +2,10 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-interface TableProps {
-  children: React.ReactNode;
-  className?: string;
+type TableProps = React.ComponentProps<'table'> & {
+  /** A min-width class; the table scrolls inside TableContainer below it. */
   minWidth?: string;
-}
+};
 
 interface TableContainerProps {
   children: React.ReactNode;
@@ -15,26 +14,24 @@ interface TableContainerProps {
   bordered?: boolean;
 }
 
-interface TableHeadProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-interface TableRowProps {
-  children: React.ReactNode;
-  className?: string;
-  onClick?: () => void;
-}
-
-interface TableCellProps {
-  children?: React.ReactNode;
-  className?: string;
+// `align` and `width` are the deprecated HTML attributes on th/td; these parts
+// take them as a text-alignment choice and a CSS width instead.
+type TableCellProps<T extends 'th' | 'td'> = Omit<
+  React.ComponentProps<T>,
+  'align' | 'width'
+> & {
+  /** A min-width class for the column. */
   minWidth?: string;
+  /** A CSS width that fixes the column (min, max and width). */
   width?: string;
   align?: 'left' | 'right' | 'center';
-  /** Span several columns, e.g. a detail row under the row it expands. */
-  colSpan?: number;
-}
+};
+
+const ALIGN_CLASSES = {
+  left: 'text-left',
+  right: 'text-right',
+  center: 'text-center',
+} as const;
 
 const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(
   function TableContainer(
@@ -75,11 +72,11 @@ const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(
   },
 );
 
-const Table: React.FC<TableProps> = ({
-  children,
-  className = '',
+function Table({
+  className,
   minWidth = 'min-w-[600px]',
-}) => {
+  ...props
+}: TableProps) {
   return (
     <table
       data-slot="table"
@@ -88,39 +85,36 @@ const Table: React.FC<TableProps> = ({
         minWidth,
         className,
       )}
-    >
-      {children}
-    </table>
+      {...props}
+    />
   );
-};
+}
 
-const TableHead: React.FC<TableHeadProps> = ({ children, className = '' }) => {
+function TableHead({ className, ...props }: React.ComponentProps<'thead'>) {
   return (
     <thead
       data-slot="table-head"
       className={cn('bg-muted sticky top-0 z-10', className)}
-    >
-      {children}
-    </thead>
+      {...props}
+    />
   );
-};
+}
 
-const TableBody: React.FC<TableHeadProps> = ({ children, className = '' }) => {
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
   return (
     <tbody
       data-slot="table-body"
       className={cn('[&>tr:last-child]:border-b-0', className)}
-    >
-      {children}
-    </tbody>
+      {...props}
+    />
   );
-};
+}
 
-const TableRow: React.FC<TableRowProps> = ({
-  children,
-  className = '',
+function TableRow({
+  className,
   onClick,
-}) => {
+  ...props
+}: React.ComponentProps<'tr'>) {
   return (
     <tr
       data-slot="table-row"
@@ -130,34 +124,24 @@ const TableRow: React.FC<TableRowProps> = ({
         className,
       )}
       onClick={onClick}
-    >
-      {children}
-    </tr>
+      {...props}
+    />
   );
-};
+}
 
-const TableHeader: React.FC<TableCellProps> = ({
-  children,
-  className = '',
+function TableHeader({
+  className,
   minWidth,
   width,
   align = 'left',
-  colSpan,
-}) => {
-  const alignmentClass =
-    align === 'right'
-      ? 'text-right'
-      : align === 'center'
-        ? 'text-center'
-        : 'text-left';
-
+  ...props
+}: TableCellProps<'th'>) {
   return (
     <th
       data-slot="table-header"
-      colSpan={colSpan}
       className={cn(
         'border-border text-muted-foreground relative box-border border-b px-2 py-3 text-sm font-medium lg:px-3',
-        alignmentClass,
+        ALIGN_CLASSES[align],
         minWidth,
         width && 'w-(--cell-width) max-w-(--cell-width) min-w-(--cell-width)',
         className,
@@ -165,34 +149,24 @@ const TableHeader: React.FC<TableCellProps> = ({
       style={
         width ? ({ '--cell-width': width } as React.CSSProperties) : undefined
       }
-    >
-      {children}
-    </th>
+      {...props}
+    />
   );
-};
+}
 
-const TableCell: React.FC<TableCellProps> = ({
-  children,
-  className = '',
+function TableCell({
+  className,
   minWidth,
   width,
   align = 'left',
-  colSpan,
-}) => {
-  const alignmentClass =
-    align === 'right'
-      ? 'text-right'
-      : align === 'center'
-        ? 'text-center'
-        : 'text-left';
-
+  ...props
+}: TableCellProps<'td'>) {
   return (
     <td
       data-slot="table-cell"
-      colSpan={colSpan}
       className={cn(
         'box-border px-2 py-2 text-sm lg:px-3',
-        alignmentClass,
+        ALIGN_CLASSES[align],
         minWidth,
         width && 'w-(--cell-width) max-w-(--cell-width) min-w-(--cell-width)',
         className,
@@ -200,11 +174,10 @@ const TableCell: React.FC<TableCellProps> = ({
       style={
         width ? ({ '--cell-width': width } as React.CSSProperties) : undefined
       }
-    >
-      {children}
-    </td>
+      {...props}
+    />
   );
-};
+}
 
 export {
   Table,
diff --git a/frontend/src/components/ui/tabs.test.tsx b/frontend/src/components/ui/tabs.test.tsx
new file mode 100644
index 00000000..e59c497d
--- /dev/null
+++ b/frontend/src/components/ui/tabs.test.tsx
@@ -0,0 +1,83 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Tabs, TabsList, TabsTrigger } from './tabs';
+
+describe('TabsTrigger', () => {
+  it('uses the DESIGN.md 3px keyboard ring', () => {
+    const html = renderToStaticMarkup(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">Overview</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    );
+    const tag = /<button[^>]*data-slot="tabs-trigger"[^>]*>/.exec(html)![0];
+    expect(tag).toContain('focus-visible:ring-3');
+    expect(tag).not.toContain('focus-visible:ring-2');
+  });
+});
+
+describe('Tabs variants', () => {
+  const render = (variant?: 'default' | 'underline') =>
+    renderToStaticMarkup(
+      <Tabs defaultValue="a">
+        <TabsList variant={variant}>
+          <TabsTrigger variant={variant} value="a">
+            My Files
+          </TabsTrigger>
+          <TabsTrigger variant={variant} value="b">
+            Shared with Me
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    );
+  const tag = (html: string, slot: string) =>
+    /class="([^"]*)"/
+      .exec(new RegExp(`<[^>]*data-slot="${slot}"[^>]*>`).exec(html)![0])![1]
+      .split(' ');
+
+  it('keeps the pill trigger as the default', () => {
+    const html = render();
+    const trigger = tag(html, 'tabs-trigger');
+    expect(trigger).toEqual(
+      expect.arrayContaining([
+        'rounded-3xl',
+        'font-bold',
+        'data-[state=active]:bg-muted',
+      ]),
+    );
+    expect(html).toContain('data-variant="default"');
+    expect(tag(html, 'tabs-list')).toContain('overflow-x-auto');
+  });
+
+  it('draws underline tabs with the Button tab look, keyed on the active state', () => {
+    const html = render('underline');
+    const trigger = tag(html, 'tabs-trigger');
+    expect(trigger).toEqual(
+      expect.arrayContaining([
+        'border-b-2',
+        'border-transparent',
+        'text-muted-foreground',
+        'hover:text-foreground',
+        'hover:border-border',
+        'data-[state=active]:border-primary',
+        'data-[state=active]:text-foreground',
+        'rounded-none',
+        'h-9',
+        'px-4',
+        'font-medium',
+        'focus-visible:ring-3',
+      ]),
+    );
+    expect(trigger).not.toContain('rounded-3xl');
+    expect(trigger).not.toContain('font-bold');
+    const list = tag(html, 'tabs-list');
+    expect(list).toEqual(expect.arrayContaining(['border-border', 'border-b']));
+    // No scroll container: it would clip the focus ring.
+    expect(list).not.toContain('overflow-x-auto');
+    expect(html).toContain('data-variant="underline"');
+    expect(html).toContain('role="tablist"');
+    expect(html).toContain('aria-selected="true"');
+  });
+});
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index cfa5bbf2..16d0e761 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { cn, focusRing } from '@/lib/utils';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 function Tabs({
@@ -10,39 +11,70 @@ function Tabs({
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn('flex flex-col gap-2', className)}
+      className={cn('flex flex-col', className)}
       {...props}
     />
   );
 }
 
+const tabsListVariants = cva('flex flex-nowrap', {
+  variants: {
+    variant: {
+      // Pill tabs that scroll sideways on narrow screens.
+      default: 'no-scrollbar snap-x overflow-x-auto scroll-smooth md:space-x-4',
+      // Underline tabs sit on a 1px baseline. No scroll container, which
+      // would clip the triggers' focus ring.
+      underline: 'border-border border-b',
+    },
+  },
+  defaultVariants: { variant: 'default' },
+});
+
 function TabsList({
   className,
+  variant = 'default',
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
-      className={cn(
-        'no-scrollbar flex snap-x flex-nowrap overflow-x-auto scroll-smooth md:space-x-4',
-        className,
-      )}
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
   );
 }
 
+const tabsTriggerVariants = cva(
+  `${focusRing} text-muted-foreground hover:text-foreground text-sm whitespace-nowrap outline-none disabled:pointer-events-none disabled:opacity-50`,
+  {
+    variants: {
+      variant: {
+        default:
+          'data-[state=active]:bg-muted data-[state=active]:text-foreground dark:data-[state=active]:bg-accent snap-start rounded-3xl px-4 py-2 font-bold transition-colors',
+        // The same pixels as Button variant="tab": muted text on a
+        // transparent 2px bottom border, foreground and a primary underline
+        // when active.
+        underline:
+          'focus-visible:border-ring inline-flex h-9 items-center justify-center gap-2 rounded-none border-b-2 border-transparent px-4 py-2 font-medium transition-all hover:border-border data-[state=active]:border-primary data-[state=active]:text-foreground',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
 function TabsTrigger({
   className,
+  variant = 'default',
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+}: React.ComponentProps<typeof TabsPrimitive.Trigger> &
+  VariantProps<typeof tabsTriggerVariants>) {
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
-      className={cn(
-        'focus-visible:ring-ring/50 data-[state=active]:bg-muted data-[state=active]:text-foreground dark:data-[state=active]:bg-accent text-muted-foreground hover:text-foreground snap-start rounded-3xl px-4 py-2 text-sm font-bold whitespace-nowrap transition-colors outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
-        className,
-      )}
+      data-variant={variant}
+      className={cn(tabsTriggerVariants({ variant }), className)}
       {...props}
     />
   );
diff --git a/frontend/src/components/ui/textarea.test.tsx b/frontend/src/components/ui/textarea.test.tsx
index 56ccd467..5f490a2f 100644
--- a/frontend/src/components/ui/textarea.test.tsx
+++ b/frontend/src/components/ui/textarea.test.tsx
@@ -1,7 +1,7 @@
 import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, expect, it } from 'vitest';
 
-import { Textarea } from './textarea';
+import { Textarea, textareaVariants } from './textarea';
 
 function classesOf(html: string): string[] {
   return (/class="([^"]*)"/.exec(html)?.[1] ?? '').split(' ');
@@ -31,3 +31,20 @@ describe('Textarea variants', () => {
     expect(html).not.toMatch(/\sresize="none"/);
   });
 });
+
+describe('Textarea', () => {
+  it('shares the Input field styling and resizes vertically by default', () => {
+    const classes = textareaVariants();
+    expect(classes).toContain('border-border');
+    expect(classes).toContain('focus-visible:ring-3');
+    expect(classes).toContain('resize-y');
+    expect(classes).toContain('min-h-16');
+  });
+
+  it('renders size and resize as data attributes and classes', () => {
+    const html = renderToStaticMarkup(<Textarea size="lg" resize="none" />);
+    expect(html).toContain('data-size="lg"');
+    expect(html).toContain('resize-none');
+    expect(html).toContain('rounded-2xl');
+  });
+});
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
index 9363ea87..983df207 100644
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { useFormFieldControl } from '@/components/ui/form-field';
+import { cn, focusRing, invalidState, fieldFrame } from '@/lib/utils';
 
 const textareaVariants = cva(
-  'text-foreground placeholder:text-muted-foreground border-border selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-full min-w-0 border bg-transparent shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
+  `${focusRing} ${invalidState} ${fieldFrame} text-foreground placeholder:text-muted-foreground border-border selection:bg-primary selection:text-primary-foreground focus-visible:border-ring flex w-full min-w-0 bg-transparent disabled:cursor-not-allowed disabled:opacity-50`,
   {
     variants: {
       size: {
@@ -37,13 +38,14 @@ type TextareaProps = React.ComponentProps<'textarea'> &
   VariantProps<typeof textareaVariants>;
 
 /** Multi-line sibling of Input; shares its border, ring and error styling. */
-function Textarea({
-  className,
-  size = 'default',
-  resize = 'vertical',
-  variant = 'default',
-  ...props
-}: TextareaProps) {
+function Textarea(textareaProps: TextareaProps) {
+  const {
+    className,
+    size = 'default',
+    resize = 'vertical',
+    variant = 'default',
+    ...props
+  } = useFormFieldControl(textareaProps);
   return (
     <textarea
       data-slot="textarea"
diff --git a/frontend/src/components/ui/time-picker.test.tsx b/frontend/src/components/ui/time-picker.test.tsx
new file mode 100644
index 00000000..9eb51d73
--- /dev/null
+++ b/frontend/src/components/ui/time-picker.test.tsx
@@ -0,0 +1,34 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { TimePicker } from './time-picker';
+
+function render(): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(
+    <TimePicker value="09:30" onChange={() => undefined} ariaLabel="Run at" />,
+  );
+  return host;
+}
+
+describe('TimePicker', () => {
+  it('marks its group with data-slot', () => {
+    const group = render().querySelector('[data-slot="time-picker"]')!;
+    expect(group.getAttribute('role')).toBe('group');
+    expect(group.getAttribute('aria-label')).toBe('Run at');
+  });
+
+  it('uses the default 36px SelectTrigger at a 68px scale width', () => {
+    const triggers = Array.from(
+      render().querySelectorAll('[data-slot="select-trigger"]'),
+    );
+    expect(triggers).toHaveLength(2);
+    for (const trigger of triggers) {
+      expect(trigger.getAttribute('data-size')).toBe('default');
+      const classes = trigger.getAttribute('class')!.split(' ');
+      expect(classes).toContain('h-9');
+      expect(classes).toContain('w-17');
+      expect(classes).not.toContain('w-[4.25rem]');
+    }
+  });
+});
diff --git a/frontend/src/components/ui/time-picker.tsx b/frontend/src/components/ui/time-picker.tsx
index e563b60b..da19905d 100644
--- a/frontend/src/components/ui/time-picker.tsx
+++ b/frontend/src/components/ui/time-picker.tsx
@@ -59,6 +59,7 @@ export function TimePicker({
 
   return (
     <div
+      data-slot="time-picker"
       className={cn('inline-flex items-center gap-1.5', className)}
       role="group"
       aria-label={ariaLabel}
@@ -74,9 +75,8 @@ export function TimePicker({
         onValueChange={(v) => emit(Number(v), minute)}
       >
         <SelectTrigger
-          size="sm"
           aria-label={ariaLabel ? `${ariaLabel} hours` : 'Hours'}
-          className="h-9 w-[4.25rem]"
+          className="w-17"
         >
           <SelectValue>{pad2(hour)}</SelectValue>
         </SelectTrigger>
@@ -94,9 +94,8 @@ export function TimePicker({
         onValueChange={(v) => emit(hour, Number(v))}
       >
         <SelectTrigger
-          size="sm"
           aria-label={ariaLabel ? `${ariaLabel} minutes` : 'Minutes'}
-          className="h-9 w-[4.25rem]"
+          className="w-17"
         >
           <SelectValue>{pad2(minute)}</SelectValue>
         </SelectTrigger>
diff --git a/frontend/src/components/ui/toast.test.tsx b/frontend/src/components/ui/toast.test.tsx
index b1510772..f5737db0 100644
--- a/frontend/src/components/ui/toast.test.tsx
+++ b/frontend/src/components/ui/toast.test.tsx
@@ -125,4 +125,24 @@ describe('Toast', () => {
       /\b(bg|text)-(red|green|amber|gray|black|white)\b/,
     );
   });
+
+  it('exposes the message variant and size as data attributes', () => {
+    const html = renderToStaticMarkup(
+      <ToastMessage variant="destructive" size="sm">
+        Failed
+      </ToastMessage>,
+    );
+    expect(html).toContain('data-variant="destructive"');
+    expect(html).toContain('data-size="sm"');
+  });
+
+  it('shows the pending status with the small Spinner, unresized', () => {
+    const host = document.createElement('div');
+    host.innerHTML = renderToStaticMarkup(<ToastStatus status="pending" />);
+    const spinner = host.querySelector('[data-slot="spinner"]')!;
+    expect(spinner.getAttribute('data-size')).toBe('sm');
+    const classes = spinner.getAttribute('class')!.split(' ');
+    expect(classes).toContain('size-5');
+    expect(classes).not.toContain('size-6');
+  });
 });
diff --git a/frontend/src/components/ui/toast.tsx b/frontend/src/components/ui/toast.tsx
index d8542046..b5862a8c 100644
--- a/frontend/src/components/ui/toast.tsx
+++ b/frontend/src/components/ui/toast.tsx
@@ -195,7 +195,7 @@ const toastStatusVariants = cva(
 );
 
 const STATUS_ICON = {
-  pending: <Spinner size="sm" className="size-6" />,
+  pending: <Spinner size="sm" />,
   success: <Check strokeWidth={3} />,
   warning: <TriangleAlert strokeWidth={3} />,
   destructive: <AlertCircle strokeWidth={3} />,
@@ -259,6 +259,8 @@ function ToastMessage({
   return (
     <span
       data-slot="toast-message"
+      data-variant={variant}
+      data-size={size}
       className={cn(toastMessageVariants({ variant, size }), className)}
       {...props}
     />
diff --git a/frontend/src/components/ui/tooltip.test.tsx b/frontend/src/components/ui/tooltip.test.tsx
new file mode 100644
index 00000000..847beb9a
--- /dev/null
+++ b/frontend/src/components/ui/tooltip.test.tsx
@@ -0,0 +1,19 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+
+describe('Tooltip', () => {
+  it('renders its trigger without needing an app-level provider', () => {
+    const html = renderToStaticMarkup(
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button type="button">Delete</button>
+        </TooltipTrigger>
+        <TooltipContent>Delete this source</TooltipContent>
+      </Tooltip>,
+    );
+    expect(html).toContain('data-slot="tooltip-trigger"');
+    expect(html).toContain('Delete');
+  });
+});
diff --git a/frontend/src/conversation/AnswerFlow.tsx b/frontend/src/conversation/AnswerFlow.tsx
index d12d875f..b06e37e8 100644
--- a/frontend/src/conversation/AnswerFlow.tsx
+++ b/frontend/src/conversation/AnswerFlow.tsx
@@ -1,9 +1,8 @@
+import { ChevronDown, Cloud } from 'lucide-react';
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import SchedulerToolCallCard from '../agents/schedules/SchedulerToolCallCard';
-import ChevronDown from '../assets/chevron-down.svg?react';
-import Cloud from '../assets/cloud.svg';
 import CopyButton from '../components/CopyButton';
 import ToolIcon from '../components/ToolIcon';
 import { Button } from '../components/ui/button';
@@ -185,7 +184,7 @@ function InlineThoughtChip({
         // svg child) puts the icon on the answer's ml-6 text column.
         className="ml-3.5 w-fit max-w-full justify-start"
       >
-        <img src={Cloud} alt="" aria-hidden className="h-4 w-4 shrink-0" />
+        <Cloud aria-hidden />
         <span
           className={`min-w-0 truncate text-left ${
             isActive ? 'shimmer-text' : 'text-muted-foreground'
diff --git a/frontend/src/conversation/ConversationBubble.test.tsx b/frontend/src/conversation/ConversationBubble.test.tsx
index 1c375f65..536f169c 100644
--- a/frontend/src/conversation/ConversationBubble.test.tsx
+++ b/frontend/src/conversation/ConversationBubble.test.tsx
@@ -149,8 +149,9 @@ describe('ConversationBubble', () => {
   it('renders the question edit actions as pill buttons', async () => {
     await render(<ConversationBubble type="QUESTION" message="Hello" />);
 
-    const edit = container.querySelector('img[alt="Edit"]')!
-      .parentElement as HTMLButtonElement;
+    const edit = container.querySelector(
+      'button[aria-label="Edit"]',
+    ) as HTMLButtonElement;
     expect(edit.dataset.size).toBe('icon-xs');
     expect(edit.dataset.shape).toBe('pill');
     await act(async () => edit.click());
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index ff42b736..527b3846 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -2,26 +2,29 @@ import { envVar } from '@/env';
 import { cn } from '@/lib/utils';
 import 'katex/dist/katex.min.css';
 
-import { ChevronDown as ChevronDownIcon, Pencil } from 'lucide-react';
+import {
+  ChevronDown as ChevronDownIcon,
+  Database,
+  Download,
+  Eye,
+  FileText,
+  Pencil,
+  ThumbsDown,
+  ThumbsUp,
+  ExternalLink,
+} from 'lucide-react';
 import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import WorkflowRunArtifacts from '../agents/workflow/WorkflowRunArtifacts';
-import ChevronDown from '../assets/chevron-down.svg';
-import Dislike from '../assets/dislike.svg?react';
-import Document from '../assets/document.svg';
 import DocumentationDark from '../assets/documentation-dark.svg';
-import Edit from '../assets/edit.svg';
-import Like from '../assets/like.svg?react';
-import Link from '../assets/link.svg';
-import Sources from '../assets/sources.svg';
 import CopyButton from '../components/CopyButton';
 
-import { Avatar } from '../components/ui/avatar';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { Sheet, SheetContent } from '../components/ui/sheet';
+import { Textarea } from '../components/ui/textarea';
 import SpeakButton from '../components/TextToSpeechButton';
 import { useOutsideAlerter } from '../hooks';
 import {
@@ -217,8 +220,9 @@ const ConversationBubble = forwardRef<
                     setEditInputBox(message ?? '');
                   }}
                   className="invisible mt-3 shrink-0 cursor-pointer group-hover:visible"
+                  aria-label="Edit"
                 >
-                  <img src={Edit} alt="Edit" className="cursor-pointer" />
+                  <Pencil />
                 </Button>
               </>
             )}
@@ -228,7 +232,7 @@ const ConversationBubble = forwardRef<
               ref={editableQueryRef}
               className="mx-auto flex w-full flex-col gap-4 rounded-lg bg-transparent p-4"
             >
-              <textarea
+              <Textarea
                 placeholder={t('conversation.edit.placeholder')}
                 onChange={(e) => {
                   setEditInputBox(e.target.value);
@@ -241,7 +245,8 @@ const ConversationBubble = forwardRef<
                 }}
                 rows={5}
                 value={editInputBox}
-                className="border-border text-foreground dark:border-border dark:text-foreground focus-visible:ring-ring/50 focus-visible:border-ring w-full resize-none rounded-3xl border px-4 py-3 text-base leading-relaxed focus:outline-hidden focus-visible:ring-3"
+                size="lg"
+                resize="none"
               />
               <div className="flex items-center justify-end gap-2">
                 <Button
@@ -285,12 +290,7 @@ const ConversationBubble = forwardRef<
               // so a fit-content parent would leave its width to the cards.
               <div className="mb-4 flex w-full flex-col flex-wrap items-start self-stretch lg:flex-nowrap">
                 <div className="my-2 ml-6 flex flex-row items-center justify-center gap-3">
-                  <Avatar
-                    src={Sources}
-                    alt={t('conversation.sources.title')}
-                    className="h-6.5 w-7.5"
-                    imgClassName="h-full w-full object-fill"
-                  />
+                  <Database className="size-6" />
                   <p className="text-base font-semibold">
                     {t('conversation.sources.title')}
                   </p>
@@ -329,11 +329,7 @@ const ConversationBubble = forwardRef<
                                 : null
                             }
                           >
-                            <img
-                              src={Document}
-                              alt="Document"
-                              className="h-4.25 w-4.25 object-fill"
-                            />
+                            <FileText className="text-muted-foreground size-4 shrink-0" />
                             <p
                               className="mt-0.5 truncate text-xs"
                               title={
@@ -393,25 +389,7 @@ const ConversationBubble = forwardRef<
                 variant="secondary"
                 shape="pill"
               >
-                <svg
-                  className="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                  />
-                </svg>
+                <Eye />
                 <span className="max-w-50 truncate" title={artifact.label}>
                   {artifact.label}
                 </span>
@@ -493,25 +471,7 @@ const ConversationBubble = forwardRef<
                         shape="pill"
                         aria-label="View artifact"
                       >
-                        <svg
-                          className="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                          />
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                          />
-                        </svg>
+                        <Eye />
                         <span
                           className="max-w-50 truncate"
                           title={artifact.label}
@@ -548,18 +508,7 @@ const ConversationBubble = forwardRef<
                           aria-label="Export as Markdown"
                           title="Export as Markdown"
                         >
-                          <svg
-                            className="stroke-muted-foreground h-5 w-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
-                            />
-                          </svg>
+                          <Download />
                         </Button>
                       </div>
                     )}
@@ -588,9 +537,12 @@ const ConversationBubble = forwardRef<
                               feedback === 'LIKE' ? 'Remove like' : 'Like'
                             }
                           >
-                            <Like
-                              className={`${feedback === 'LIKE' ? 'stroke-primary fill-white dark:fill-transparent' : 'stroke-muted-foreground fill-transparent'}`}
-                            ></Like>
+                            <ThumbsUp
+                              className={cn(
+                                feedback === 'LIKE' &&
+                                  'text-primary fill-white dark:fill-transparent',
+                              )}
+                            />
                           </Button>
                         </div>
 
@@ -614,9 +566,12 @@ const ConversationBubble = forwardRef<
                                 : 'Dislike'
                             }
                           >
-                            <Dislike
-                              className={`${feedback === 'DISLIKE' ? 'stroke-destructive fill-white dark:fill-transparent' : 'stroke-muted-foreground fill-transparent'}`}
-                            ></Dislike>
+                            <ThumbsDown
+                              className={cn(
+                                feedback === 'DISLIKE' &&
+                                  'text-destructive fill-white dark:fill-transparent',
+                              )}
+                            />
                           </Button>
                         </div>
                       </>
@@ -686,15 +641,7 @@ function AllSources(sources: AllSourcesProps) {
               >
                 {`${index + 1}. ${source.title}`}
                 {isExternalSource && (
-                  <img
-                    src={Link}
-                    alt="External Link"
-                    className={`ml-1 inline h-3 w-3 object-fill dark:invert ${
-                      isExternalSource
-                        ? 'group-hover/card:contrast-50 group-hover/card:hue-rotate-235 group-hover/card:invert-31 group-hover/card:saturate-752 group-hover/card:sepia-80 group-hover/card:filter'
-                        : ''
-                    }`}
-                  />
+                  <ExternalLink className="text-muted-foreground group-hover/card:text-primary ml-1 inline size-3" />
                 )}
               </p>
               <p className="text-foreground mt-3 line-clamp-4 rounded-md text-left text-xs wrap-break-word">
@@ -818,11 +765,13 @@ function ToolCallApprovalBar({
             shape="pill"
             onClick={() => setExpanded(!expanded)}
             title="Details"
+            aria-label="expand"
           >
-            <img
-              src={ChevronDown}
-              alt="expand"
-              className={`h-3.5 w-3.5 transition-transform duration-200 dark:invert ${expanded ? 'rotate-180' : ''}`}
+            <ChevronDownIcon
+              className={cn(
+                'transition-transform duration-200',
+                expanded && 'rotate-180',
+              )}
             />
           </Button>
         </div>
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 89735118..29401e75 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -143,10 +143,8 @@ export default function ConversationMessages({
   }, [status, lastTurnContentLength, hasMessages]);
 
   const columnClass = isSplitView
-    ? // eslint-disable-next-line shadcn/no-restyle -- MessageScroller padding: the primitive measures Content's padding-block for its scroll math, and the Viewport's top gap must scroll with the messages. See DESIGN.md, Approved exceptions.
-      'w-full max-w-325 px-2'
-    : // eslint-disable-next-line shadcn/no-restyle -- MessageScroller padding: the primitive measures Content's padding-block for its scroll math, and the Viewport's top gap must scroll with the messages. See DESIGN.md, Approved exceptions.
-      'w-full max-w-325 px-2 md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12';
+    ? 'w-full max-w-325 px-2'
+    : 'w-full max-w-325 px-2 md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12';
 
   // The empty state sits directly on top of the composer with nothing between
   // them, so it takes the composer's width rather than the wider message column.
@@ -275,13 +273,9 @@ export default function ConversationMessages({
   return (
     <MessageScrollerProvider autoScroll>
       <MessageScroller>
-        <MessageScrollerViewport
-          /* eslint-disable-next-line shadcn/no-restyle -- MessageScroller padding: the primitive measures Content's padding-block for its scroll math, and the Viewport's top gap must scroll with the messages. See DESIGN.md, Approved exceptions. */
-          className="sm:pt-6 lg:pt-12"
-        >
+        <MessageScrollerViewport className="sm:pt-6 lg:pt-12">
           <MessageScrollerContent
             spacerClassName={spacerCollapsed ? 'max-h-0' : undefined}
-            /* eslint-disable-next-line shadcn/no-restyle -- MessageScroller padding: the primitive measures Content's padding-block for its scroll math, and the Viewport's top gap must scroll with the messages. See DESIGN.md, Approved exceptions. */
             className={`mx-auto pb-7 ${columnClass}`}
           >
             {headerContent}
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index f289ab5f..848b0ebe 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -1,19 +1,13 @@
-import { Share, X } from 'lucide-react';
+import { Check, Pencil, Share, Trash2, X } from 'lucide-react';
 import {
   SyntheticEvent,
   useCallback,
   useEffect,
   useRef,
   useState,
-  type ReactNode,
 } from 'react';
 import { useSelector } from 'react-redux';
-import Edit from '../assets/edit.svg';
-import { useDarkTheme } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
-import CheckMark2 from '../assets/checkMark2.svg';
-import Trash from '../assets/red-trash.svg';
-import threeDots from '../assets/three-dots.svg';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { ActiveState } from '../models/misc';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
@@ -21,12 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { cn } from '../lib/utils';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
 import { useOutsideAlerter } from '../hooks';
 
 interface ConversationProps {
@@ -50,7 +39,6 @@ export default function ConversationTile({
 }: ConversationTileProps) {
   const conversationId = useSelector(selectConversationId);
   const tileRef = useRef<HTMLInputElement>(null);
-  const [isDarkTheme] = useDarkTheme();
   const [isEdit, setIsEdit] = useState(false);
   const [conversationName, setConversationsName] = useState('');
   const [isOpen, setOpen] = useState<boolean>(false);
@@ -63,8 +51,7 @@ export default function ConversationTile({
     setConversationsName(conversation.name);
   }, [conversation.name]);
 
-  function handleEditConversation(event: SyntheticEvent) {
-    event.stopPropagation();
+  function handleEditConversation() {
     setIsEdit(true);
     setOpen(false);
   }
@@ -127,35 +114,24 @@ export default function ConversationTile({
     }
   };
 
-  type ConversationMenuOption = {
-    icon: ReactNode;
-    label: string;
-    onClick: (event: SyntheticEvent) => void;
-    variant: 'default' | 'destructive';
-  };
-
-  const menuOptions: ConversationMenuOption[] = [
+  const menuOptions: MenuOption[] = [
     {
-      icon: <Share className="size-4" strokeWidth={1.75} />,
+      icon: Share,
       label: t('convTile.share'),
-      onClick: (event: SyntheticEvent) => {
-        event.stopPropagation();
+      onClick: () => {
         setShareModalState(true);
         setOpen(false);
       },
-      variant: 'default',
     },
     {
-      icon: <img src={Edit} alt="" width={16} height={16} />,
+      icon: Pencil,
       label: t('convTile.rename'),
       onClick: handleEditConversation,
-      variant: 'default',
     },
     {
-      icon: <img src={Trash} alt="" width={18} height={18} />,
+      icon: Trash2,
       label: t('convTile.delete'),
-      onClick: (event: SyntheticEvent) => {
-        event.stopPropagation();
+      onClick: () => {
         setDeleteModalState('ACTIVE');
         setOpen(false);
       },
@@ -209,7 +185,7 @@ export default function ConversationTile({
               onKeyDown={handleRenameKeyDown}
             />
           ) : (
-            <p className="text-foreground dark:text-foreground my-auto overflow-hidden text-sm leading-6 font-normal text-ellipsis whitespace-nowrap">
+            <p className="text-foreground my-auto overflow-hidden text-sm leading-6 font-normal text-ellipsis whitespace-nowrap">
               {conversationName}
             </p>
           )}
@@ -220,7 +196,7 @@ export default function ConversationTile({
               <div className="flex gap-1">
                 <Button
                   type="button"
-                  variant="ghost-muted"
+                  variant="ghost-on-accent"
                   size="icon-xs"
                   aria-label={t('convTile.save')}
                   title={t('convTile.save')}
@@ -233,11 +209,11 @@ export default function ConversationTile({
                     });
                   }}
                 >
-                  <img src={CheckMark2} alt="" className="h-4 w-4" />
+                  <Check />
                 </Button>
                 <Button
                   type="button"
-                  variant="ghost-muted"
+                  variant="ghost-on-accent"
                   size="icon-xs"
                   aria-label={t('cancel')}
                   title={t('cancel')}
@@ -248,40 +224,17 @@ export default function ConversationTile({
                     onClear();
                   }}
                 >
-                  <X className="h-3 w-3" />
+                  <X />
                 </Button>
               </div>
             ) : (
-              <DropdownMenu open={isOpen} onOpenChange={setOpen}>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
-                    shape="pill"
-                    onClick={(event: SyntheticEvent) => {
-                      event.stopPropagation();
-                    }}
-                    className="mr-2 h-6 w-6"
-                  >
-                    <img src={threeDots} width={8} alt="menu" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="min-w-[144px]">
-                  {menuOptions.map((option, index) => (
-                    <DropdownMenuItem
-                      key={index}
-                      variant={option.variant}
-                      onSelect={(event) => {
-                        option.onClick(event as unknown as SyntheticEvent);
-                      }}
-                    >
-                      {option.icon}
-                      <span>{option.label}</span>
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <ActionMenu
+                options={menuOptions}
+                triggerLabel={t('convTile.menu')}
+                open={isOpen}
+                onOpenChange={setOpen}
+                className="mr-2"
+              />
             )}
           </div>
         )}
diff --git a/frontend/src/conversation/MarkdownAnswer.tsx b/frontend/src/conversation/MarkdownAnswer.tsx
index 946f654a..14132d76 100644
--- a/frontend/src/conversation/MarkdownAnswer.tsx
+++ b/frontend/src/conversation/MarkdownAnswer.tsx
@@ -282,7 +282,7 @@ export default function MarkdownAnswer({
                     return match ? (
                       <div className="group border-border relative overflow-hidden rounded-xl border">
                         <div className="bg-muted flex items-center justify-between px-2 py-1">
-                          <span className="text-foreground dark:text-foreground text-xs font-medium">
+                          <span className="text-foreground text-xs font-medium">
                             {language}
                           </span>
                           <CopyButton
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index 5271c63a..a483e126 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -141,18 +141,14 @@ export const SharedConversation = () => {
       />
       <div className="bg-background flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden">
         <div className="border-b-border w-full max-w-325 border-b p-2 md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12">
-          <h1 className="text-foreground dark:text-foreground text-4xl font-semibold">
-            {title}
-          </h1>
-          <h2 className="text-foreground dark:text-foreground text-base font-semibold">
+          <h1 className="text-foreground text-4xl font-semibold">{title}</h1>
+          <h2 className="text-foreground text-base font-semibold">
             {t('sharedConv.subtitle')}{' '}
             <a href="/" className="text-info">
               DocsGPT
             </a>
           </h2>
-          <h2 className="text-foreground dark:text-foreground text-base font-semibold">
-            {date}
-          </h2>
+          <h2 className="text-foreground text-base font-semibold">{date}</h2>
         </div>
         <ConversationMessages
           handleQuestion={handleQuestion}
diff --git a/frontend/src/design/DesignSystem.tsx b/frontend/src/design/DesignSystem.tsx
index db49d528..530f7392 100644
--- a/frontend/src/design/DesignSystem.tsx
+++ b/frontend/src/design/DesignSystem.tsx
@@ -7,6 +7,7 @@ import {
   Moon,
   MoreHorizontal,
   Pencil,
+  Pin,
   Plus,
   Search,
   Settings,
@@ -49,6 +50,7 @@ import {
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Dropzone } from '@/components/ui/dropzone';
 import { Calendar } from '@/components/ui/calendar';
 import {
@@ -70,6 +72,7 @@ import {
   CommandShortcut,
 } from '@/components/ui/command';
 import {
+  ActionMenu,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -78,12 +81,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { FormField } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Modal } from '@/components/ui/modal';
+import { Modal, ModalActions } from '@/components/ui/modal';
 import { MultiSelect } from '@/components/ui/multi-select';
 import { OptionCard } from '@/components/ui/option-card';
 import { Progress } from '@/components/ui/progress';
+import { SettingRow, SettingRows } from '@/components/ui/setting-row';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Spinner } from '@/components/ui/spinner';
 import { Textarea } from '@/components/ui/textarea';
@@ -205,6 +210,8 @@ const BUTTON_VARIANTS = [
   'ghost',
   'ghost-muted',
   'ghost-destructive',
+  'ghost-on-accent',
+  'ghost-destructive-on-accent',
   'link',
   'destructive',
   'destructive-outline',
@@ -361,6 +368,9 @@ export default function DesignSystem() {
   const [agentType, setAgentType] = useState<'classic' | 'workflow'>('classic');
   const [toolOn, setToolOn] = useState(false);
   const [sectionOpen, setSectionOpen] = useState(false);
+  const [scopes, setScopes] = useState<string[]>(['agents:read']);
+  const [tokenLimit, setTokenLimit] = useState(true);
+  const [saving, setSaving] = useState(false);
   const [sourceType, setSourceType] = useState<string>('Upload file');
 
   return (
@@ -683,6 +693,31 @@ export default function DesignSystem() {
               </div>
             </div>
           </Example>
+          <Example title="Loading" code="<Button loading={saving}>">
+            <div className="flex flex-wrap items-center gap-3">
+              <Button
+                size="lg"
+                shape="pill"
+                loading={saving}
+                onClick={() => {
+                  setSaving(true);
+                  window.setTimeout(() => setSaving(false), 1500);
+                }}
+              >
+                Create token
+              </Button>
+              <Button variant="outline" size="lg" shape="pill" loading>
+                Test connection
+              </Button>
+              <Button variant="destructive" loading>
+                Delete team
+              </Button>
+              <span className="text-muted-foreground text-xs">
+                Disabled, aria-busy, 16px spinner over the kept label; the width
+                holds.
+              </span>
+            </div>
+          </Example>
           <Example
             title="Section panel toggle"
             code='<div className="has-[[data-variant=section-toggle]:focus-visible]:ring-3 …"><Button variant="section-toggle" size="sm" aria-expanded>'
@@ -787,6 +822,74 @@ export default function DesignSystem() {
               ))}
             </div>
           </Example>
+          <Example
+            title="On an accent row"
+            code='variant="ghost-on-accent" · "ghost-destructive-on-accent"'
+          >
+            <div className="flex flex-col gap-3">
+              <div className="bg-accent text-accent-foreground flex w-80 items-center justify-between rounded-sm px-2 py-1.5 text-sm">
+                <span>Carrier onboarding checklist</span>
+                <div className="flex items-center gap-1">
+                  <Button
+                    size="icon-xs"
+                    variant="ghost-on-accent"
+                    aria-label="Edit"
+                  >
+                    <Pencil />
+                  </Button>
+                  <Button
+                    size="icon-xs"
+                    variant="ghost-on-accent"
+                    aria-label="Duplicate"
+                  >
+                    <Copy />
+                  </Button>
+                  <Button
+                    size="icon-xs"
+                    variant="ghost-destructive-on-accent"
+                    aria-label="Delete"
+                  >
+                    <Trash2 />
+                  </Button>
+                </div>
+              </div>
+              <div className="bg-sidebar-accent flex h-9 w-80 items-center justify-between rounded-3xl pl-3 text-sm">
+                <span>Vendor Due Diligence</span>
+                <div className="flex items-center px-1.5">
+                  <Button
+                    size="icon-xs"
+                    variant="ghost-on-accent"
+                    aria-label="Pin agent"
+                  >
+                    <Pin />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Action menu"
+            code="<ActionMenu options triggerLabel />"
+          >
+            <div className="bg-muted hover:bg-accent relative h-24 w-48 rounded-2xl p-4 text-sm">
+              <span className="font-semibold">Vendor Due Diligence</span>
+              <ActionMenu
+                triggerLabel="Agent actions"
+                className="absolute top-3 right-3"
+                options={[
+                  { icon: Pencil, label: 'Edit', onClick: () => {} },
+                  { icon: Copy, label: 'Duplicate', onClick: () => {} },
+                  { icon: Pin, label: 'Pin agent', onClick: () => {} },
+                  {
+                    icon: Trash2,
+                    label: 'Delete',
+                    variant: 'destructive',
+                    onClick: () => {},
+                  },
+                ]}
+              />
+            </div>
+          </Example>
           <Example title="States" code="disabled · asChild">
             <div className="flex flex-wrap items-center gap-3">
               <Button disabled>Saving…</Button>
@@ -1381,6 +1484,103 @@ export default function DesignSystem() {
               />
             </div>
           </Example>
+          <Example
+            title="FormField"
+            code="<FormField label required hint error disabled>{field}</FormField>"
+          >
+            <div className="grid items-start gap-6 md:grid-cols-3">
+              <FormField
+                label="Server name"
+                required
+                hint="Shown in the tool list"
+              >
+                <Input placeholder="My MCP server" />
+              </FormField>
+              <FormField label="Authentication type">
+                <Select defaultValue="none">
+                  <SelectTrigger size="lg" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">No authentication</SelectItem>
+                    <SelectItem value="bearer">Bearer token</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormField>
+              <FormField
+                label="Server URL"
+                required
+                error="Server URL is required"
+              >
+                <Input placeholder="https://" />
+              </FormField>
+            </div>
+          </Example>
+          <Example
+            title="SettingRow"
+            code="<SettingRows><SettingRow label description htmlFor after>{control}</SettingRow></SettingRows>"
+          >
+            <SettingRows className="max-w-xl">
+              <SettingRow
+                label="Token limiting"
+                description="Limit daily total tokens that can be used by this agent"
+                htmlFor="ds-token-limiting"
+                after={
+                  <Input
+                    shape="pill"
+                    placeholder="Enter token limit"
+                    disabled={!tokenLimit}
+                  />
+                }
+              >
+                <Switch
+                  id="ds-token-limiting"
+                  checked={tokenLimit}
+                  onCheckedChange={setTokenLimit}
+                />
+              </SettingRow>
+              <SettingRow
+                label="Allow prompt override"
+                description="Let v1 API callers replace this agent's system prompt"
+                htmlFor="ds-prompt-override"
+              >
+                <Switch id="ds-prompt-override" />
+              </SettingRow>
+            </SettingRows>
+          </Example>
+          <Example
+            title="Checkbox"
+            code='<Checkbox size="sm | default" checked onCheckedChange>'
+          >
+            <div className="flex flex-col gap-3">
+              {['agents:read', 'agents:write', 'agents:keys'].map((scope) => (
+                <div key={scope} className="flex items-center gap-3">
+                  <Checkbox
+                    id={`ds-${scope}`}
+                    checked={scopes.includes(scope)}
+                    onCheckedChange={(checked) =>
+                      setScopes((current) =>
+                        checked === true
+                          ? [...current, scope]
+                          : current.filter((s) => s !== scope),
+                      )
+                    }
+                  />
+                  <Label htmlFor={`ds-${scope}`} className="font-mono">
+                    {scope}
+                  </Label>
+                </div>
+              ))}
+              <div className="flex items-center gap-3">
+                <Checkbox id="ds-cb-sm" size="sm" defaultChecked />
+                <Label htmlFor="ds-cb-sm">Small (table cells)</Label>
+              </div>
+              <div className="flex items-center gap-3">
+                <Checkbox id="ds-cb-disabled" disabled defaultChecked />
+                <Label htmlFor="ds-cb-disabled">Disabled</Label>
+              </div>
+            </div>
+          </Example>
           <Example
             title="Switch and multi-select"
             code="<Switch> · <MultiSelect>"
@@ -1633,6 +1833,31 @@ export default function DesignSystem() {
               </TabsContent>
             </Tabs>
           </Example>
+          <Example
+            title="Underline tabs"
+            code='<TabsList variant="underline"> · <TabsTrigger variant="underline">'
+          >
+            <Tabs defaultValue="my_files">
+              <TabsList variant="underline">
+                <TabsTrigger variant="underline" value="my_files">
+                  My Files
+                </TabsTrigger>
+                <TabsTrigger variant="underline" value="shared">
+                  Shared with Me
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="my_files">
+                <p className="text-muted-foreground pt-4 text-sm">
+                  Files in your own drive.
+                </p>
+              </TabsContent>
+              <TabsContent value="shared">
+                <p className="text-muted-foreground pt-4 text-sm">
+                  Files other people shared with you.
+                </p>
+              </TabsContent>
+            </Tabs>
+          </Example>
           <Example
             title="Accordion and breadcrumb"
             code="<Accordion> · <Breadcrumb>"
@@ -1747,11 +1972,11 @@ export default function DesignSystem() {
         <Section
           id="overlays"
           title="Overlays"
-          intro="Modal is the only dialog API for app code; the Radix Dialog underneath is private to ui/. Sheet is for side panels. Popovers and menus share the popover surface."
+          intro="Modal is the only dialog API for app code; the Radix Dialog underneath is private to ui/. Sheet is for side panels and phone bottom sheets. Popovers and menus share the popover surface."
         >
           <Example
             title="Modal and sheet"
-            code='<Modal size="md"> · <SheetContent side="right">'
+            code='<Modal size="md" title description footer={<ModalActions …/>}> · <SheetContent side="right"> · <SheetContent side="bottom" handle>'
           >
             <div className="flex flex-wrap items-center gap-3">
               <Button variant="outline" onClick={() => setModalOpen(true)}>
@@ -1763,15 +1988,12 @@ export default function DesignSystem() {
                 title="Move to folder"
                 description="Pick where this agent should live."
                 footer={
-                  <>
-                    <Button
-                      variant="outline"
-                      onClick={() => setModalOpen(false)}
-                    >
-                      Cancel
-                    </Button>
-                    <Button onClick={() => setModalOpen(false)}>Move</Button>
-                  </>
+                  <ModalActions
+                    cancelLabel="Cancel"
+                    onCancel={() => setModalOpen(false)}
+                    submitLabel="Move"
+                    onSubmit={() => setModalOpen(false)}
+                  />
                 }
               >
                 <div className="flex flex-col gap-4">
@@ -1800,6 +2022,20 @@ export default function DesignSystem() {
                   </SheetHeader>
                 </SheetContent>
               </Sheet>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="outline">Open bottom sheet</Button>
+                </SheetTrigger>
+                <SheetContent side="bottom" handle showCloseButton={false}>
+                  <SheetHeader>
+                    <SheetTitle>Tools</SheetTitle>
+                    <SheetDescription>
+                      The phone picker shape: card fill, rounded top, grab
+                      handle, clear of the home indicator.
+                    </SheetDescription>
+                  </SheetHeader>
+                </SheetContent>
+              </Sheet>
             </div>
           </Example>
           <Example
diff --git a/frontend/src/index.css b/frontend/src/index.css
index c664c481..67bf4468 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -30,6 +30,18 @@
   }
 }
 
+/* Bottom padding that clears the iPhone home indicator (about 34px, since
+   index.html sets viewport-fit=cover). pb-safe keeps at least 1rem elsewhere,
+   for a sheet with a footer; pb-safe-0 is the bare inset, for a sheet whose
+   content brings its own padding. */
+@utility pb-safe {
+  padding-bottom: max(env(safe-area-inset-bottom), 1rem);
+}
+
+@utility pb-safe-0 {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
 @utility no-scrollbar {
   /* Chrome, Safari and Opera */
   &::-webkit-scrollbar {
diff --git a/frontend/src/lib/utils.test.ts b/frontend/src/lib/utils.test.ts
new file mode 100644
index 00000000..dc74bb77
--- /dev/null
+++ b/frontend/src/lib/utils.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+
+import { buttonVariants } from '@/components/ui/button';
+import { inputVariants } from '@/components/ui/input';
+import { textareaVariants } from '@/components/ui/textarea';
+
+import { fieldFrame, focusRing, invalidState } from './utils';
+
+describe('shared ui class constants', () => {
+  it('focusRing is the DESIGN.md keyboard ring', () => {
+    expect(focusRing).toBe('focus-visible:ring-3 focus-visible:ring-ring/50');
+  });
+
+  it('invalidState is the aria-invalid triple', () => {
+    expect(invalidState.split(' ')).toEqual([
+      'aria-invalid:ring-destructive/20',
+      'dark:aria-invalid:ring-destructive/40',
+      'aria-invalid:border-destructive',
+    ]);
+  });
+
+  it.each([
+    ['Button', buttonVariants()],
+    ['Input', inputVariants()],
+    ['Textarea', textareaVariants()],
+  ])('%s is built from the shared constants', (_name, classes) => {
+    const list = classes.split(' ');
+    for (const c of [...focusRing.split(' '), ...invalidState.split(' ')]) {
+      expect(list).toContain(c);
+    }
+  });
+
+  it('fieldFrame carries the field border, shadow and transition', () => {
+    const list = inputVariants().split(' ');
+    for (const c of fieldFrame.split(' ')) expect(list).toContain(c);
+    expect(fieldFrame).toContain('shadow-xs');
+    expect(fieldFrame).toContain('transition-[color,box-shadow]');
+  });
+});
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 9ad0df42..c8579731 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -4,3 +4,18 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+// Class strings shared by the ui/ primitives, so every control spells the
+// DESIGN.md focus, field and invalid rules the same way. Plain strings (not a
+// Tailwind @utility) so the literal classes stay greppable and testable.
+
+/** The keyboard focus ring (DESIGN.md "Focus ring"); fields add focus-visible:border-ring. */
+export const focusRing = 'focus-visible:ring-3 focus-visible:ring-ring/50';
+
+/** The red ring and border a control shows while aria-invalid is set. */
+export const invalidState =
+  'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive';
+
+/** The frame of a form field: a 1px border, the field shadow and a quiet transition. */
+export const fieldFrame =
+  'border shadow-xs transition-[color,box-shadow] outline-none';
diff --git a/frontend/src/locale/de.json b/frontend/src/locale/de.json
index e5242a88..951877ea 100644
--- a/frontend/src/locale/de.json
+++ b/frontend/src/locale/de.json
@@ -114,7 +114,6 @@
         "edit": "Bearbeiten",
         "save": "Speichern",
         "cancel": "Abbrechen",
-        "saving": "Speichern…",
         "saveFailed": "Die Seite konnte nicht gespeichert werden. Bitte versuche es erneut.",
         "forbidden": "Du hast keine Berechtigung, diese Seite zu bearbeiten.",
         "conflict": "Diese Seite wurde seit dem Öffnen geändert und neu geladen. Deine Änderungen stehen unten – übernimm sie erneut und speichere noch einmal.",
@@ -328,7 +327,6 @@
         "subtitle": "Konfiguriere, wie \"{{name}}\" in Chunks aufgeteilt und abgerufen wird.",
         "subtitleGeneric": "Konfiguriere, wie diese Quelle in Chunks aufgeteilt und abgerufen wird.",
         "save": "Speichern",
-        "saving": "Speichern…",
         "readOnly": "Du hast nur Lesezugriff auf diese geteilte Quelle und kannst ihre Konfiguration nicht ändern.",
         "chunkingChangeHint": "Du hast eine Chunking-Einstellung geändert. Nach dem Speichern muss diese Quelle erneut indexiert werden, damit die Änderung wirkt.",
         "prescreenInvalidHint": "Prüfe die Vorfilter-Werte: Die abzurufenden Kandidaten müssen mindestens der Chunk-Anzahl entsprechen, und die zu behaltenden Chunks dürfen die Kandidatenzahl nicht überschreiten.",
@@ -679,7 +677,6 @@
       "body": "Body",
       "deleteActionWarning": "Bist du sicher, dass du die Aktion \"{{name}}\" löschen möchtest?",
       "save": "Speichern",
-      "saving": "Speichere...",
       "saveFailed": "Werkzeug-Konfiguration konnte nicht gespeichert werden",
       "fieldName": "Feldname",
       "fieldType": "Feldtyp",
@@ -705,8 +702,6 @@
         "password": "Passwort",
         "timeout": "Timeout (Sekunden)",
         "testConnection": "Verbindung testen",
-        "testing": "Teste...",
-        "saving": "Speichere...",
         "save": "Speichern",
         "cancel": "Abbrechen",
         "noAuth": "Keine Authentifizierung",
@@ -796,7 +791,6 @@
         "installLink": "Du hast docsgpt-cli noch nicht? Installiere es",
         "stepTwo": "2. Gib diesen Code ein, wenn du dazu aufgefordert wirst:",
         "start": "Code generieren",
-        "starting": "Bitte warten…",
         "waitingForCli": "Warte, bis die CLI den Code einlöst…",
         "cancel": "Abbrechen"
       }
@@ -811,9 +805,7 @@
       "addTitle": "Eigenes Modell hinzufügen",
       "editTitle": "Eigenes Modell bearbeiten",
       "save": "Speichern",
-      "saving": "Speichern",
       "testConnection": "Verbindung testen",
-      "testing": "Test läuft",
       "testSuccess": "Verbindung erfolgreich.",
       "testHintNew": "Fülle Basis-URL, Modell-ID und API-Schlüssel aus, um Verbindungstests zu aktivieren.",
       "disabledBadge": "Deaktiviert",
@@ -960,7 +952,6 @@
         "retry": "Erneut versuchen",
         "cancel": "Abbrechen",
         "submit": "Token erstellen",
-        "submitting": "Wird erstellt",
         "error": "Das Token konnte nicht erstellt werden. Bitte versuche es erneut."
       },
       "created": {
@@ -979,7 +970,6 @@
         "warning": "Neues Geheimnis für \"{{name}}\" erzeugen? Das aktuelle Geheimnis funktioniert sofort nicht mehr, alles, was es verwendet, muss aktualisiert werden. Name, Berechtigungen und Einschränkungen bleiben gleich.",
         "newExpiration": "Neues Ablaufdatum",
         "submit": "Neu generieren",
-        "submitting": "Wird neu generiert…",
         "error": "Das Token konnte nicht neu generiert werden. Bitte erneut versuchen.",
         "done": {
           "title": "Token neu generiert",
@@ -1102,7 +1092,6 @@
           "pickerFailed": "Dateiauswahl konnte nicht geöffnet werden. Bitte versuche es erneut.",
           "selectedFiles": "Ausgewählte Dateien",
           "selectFiles": "Dateien auswählen",
-          "loading": "Laden...",
           "noFilesSelected": "Keine Dateien oder Ordner ausgewählt",
           "folders": "Ordner",
           "files": "Dateien",
@@ -1299,6 +1288,7 @@
   },
   "convTile": {
     "share": "Teilen",
+    "menu": "Unterhaltungsaktionen",
     "delete": "Löschen",
     "rename": "Umbenennen",
     "save": "Speichern",
@@ -1400,7 +1390,8 @@
       "unpin": "Agent lösen",
       "open": "Öffnen",
       "remove": "Entfernen",
-      "draft": "Entwurf"
+      "draft": "Entwurf",
+      "actions": "Agentenaktionen"
     },
     "description": "Entdecke und erstelle benutzerdefinierte Versionen von DocsGPT, die Anweisungen, zusätzliches Wissen und beliebige Kombinationen von Fähigkeiten kombinieren",
     "newAgent": "Neuer Agent",
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 2e6631ea..ea3dca95 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -118,7 +118,6 @@
         "edit": "Edit",
         "save": "Save",
         "cancel": "Cancel",
-        "saving": "Saving…",
         "saveFailed": "Could not save the page. Please try again.",
         "forbidden": "You do not have permission to edit this page.",
         "conflict": "This page changed since you opened it and has been reloaded. Your edits are below — reapply and save again.",
@@ -332,7 +331,6 @@
         "subtitle": "Configure how \"{{name}}\" is chunked and retrieved.",
         "subtitleGeneric": "Configure how this source is chunked and retrieved.",
         "save": "Save",
-        "saving": "Saving…",
         "readOnly": "You have view-only access to this shared source and cannot change its config.",
         "chunkingChangeHint": "You changed a chunking setting. Saving will require re-ingesting this source for it to take effect.",
         "prescreenInvalidHint": "Check the prescreen values: candidates to fetch must be at least the number of chunks, and chunks to keep must not exceed candidates to fetch.",
@@ -684,7 +682,6 @@
       "body": "Body",
       "deleteActionWarning": "Are you sure you want to delete the action \"{{name}}\"?",
       "save": "Save",
-      "saving": "Saving...",
       "saveFailed": "Failed to save tool configuration",
       "fieldName": "Field Name",
       "fieldType": "Field Type",
@@ -710,8 +707,6 @@
         "password": "Password",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -801,7 +796,6 @@
         "installLink": "Don't have docsgpt-cli? Install it",
         "stepTwo": "2. Enter this code when prompted:",
         "start": "Generate code",
-        "starting": "Working…",
         "waitingForCli": "Waiting for the CLI to redeem the code…",
         "cancel": "Cancel"
       }
@@ -816,9 +810,7 @@
       "addTitle": "Add Custom Model",
       "editTitle": "Edit Custom Model",
       "save": "Save",
-      "saving": "Saving",
       "testConnection": "Test connection",
-      "testing": "Testing",
       "testSuccess": "Connection successful.",
       "testHintNew": "Fill in Base URL, Model ID, and API key to enable connection tests.",
       "disabledBadge": "Disabled",
@@ -965,7 +957,6 @@
         "retry": "Retry",
         "cancel": "Cancel",
         "submit": "Create token",
-        "submitting": "Creating",
         "error": "Failed to create the token. Please try again."
       },
       "created": {
@@ -984,7 +975,6 @@
         "warning": "Generate a new secret for \"{{name}}\"? The current secret stops working immediately, so anything using it must be updated. The name, scopes and restrictions stay the same.",
         "newExpiration": "New expiration",
         "submit": "Regenerate",
-        "submitting": "Regenerating…",
         "error": "Failed to regenerate the token. Please try again.",
         "done": {
           "title": "Token regenerated",
@@ -1107,7 +1097,6 @@
           "pickerFailed": "Failed to open file picker. Please try again.",
           "selectedFiles": "Selected Files",
           "selectFiles": "Select Files",
-          "loading": "Loading...",
           "noFilesSelected": "No files or folders selected",
           "folders": "Folders",
           "files": "Files",
@@ -1304,6 +1293,7 @@
   },
   "convTile": {
     "share": "Share",
+    "menu": "Conversation actions",
     "delete": "Delete",
     "rename": "Rename",
     "save": "Save",
@@ -1411,7 +1401,8 @@
       "unpin": "Unpin agent",
       "open": "Open",
       "remove": "Remove",
-      "draft": "Draft"
+      "draft": "Draft",
+      "actions": "Agent actions"
     },
     "description": "Discover and create custom versions of DocsGPT that combine instructions, extra knowledge, and any combination of skills",
     "newAgent": "New Agent",
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index f3222c39..172979b5 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -114,7 +114,6 @@
         "edit": "Editar",
         "save": "Guardar",
         "cancel": "Cancelar",
-        "saving": "Guardando…",
         "saveFailed": "No se pudo guardar la página. Inténtalo de nuevo.",
         "forbidden": "No tienes permiso para editar esta página.",
         "conflict": "Esta página cambió desde que la abriste y se ha recargado. Tus ediciones están abajo — vuelve a aplicarlas y guarda de nuevo.",
@@ -328,7 +327,6 @@
         "subtitle": "Configura cómo se fragmenta y recupera \"{{name}}\".",
         "subtitleGeneric": "Configura cómo se fragmenta y recupera esta fuente.",
         "save": "Guardar",
-        "saving": "Guardando…",
         "readOnly": "Tienes acceso de solo lectura a esta fuente compartida y no puedes cambiar su configuración.",
         "chunkingChangeHint": "Cambiaste un ajuste de fragmentación. Al guardar será necesario reindexar esta fuente para que surta efecto.",
         "prescreenInvalidHint": "Revisa los valores de preselección: los candidatos a obtener deben ser al menos el número de fragmentos, y los fragmentos a conservar no deben superar los candidatos a obtener.",
@@ -679,7 +677,6 @@
       "body": "Cuerpo",
       "deleteActionWarning": "¿Estás seguro de que deseas eliminar la acción \"{{name}}\"?",
       "save": "Guardar",
-      "saving": "Guardando...",
       "saveFailed": "No se pudo guardar la configuración de la herramienta",
       "fieldName": "Nombre del campo",
       "fieldType": "Tipo de campo",
@@ -705,8 +702,6 @@
         "password": "Contraseña",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -796,7 +791,6 @@
         "installLink": "¿No tienes docsgpt-cli? Instálalo",
         "stepTwo": "2. Introduce este código cuando se te pida:",
         "start": "Generar código",
-        "starting": "Procesando…",
         "waitingForCli": "Esperando a que la CLI canjee el código…",
         "cancel": "Cancelar"
       }
@@ -811,9 +805,7 @@
       "addTitle": "Añadir modelo personalizado",
       "editTitle": "Editar modelo personalizado",
       "save": "Guardar",
-      "saving": "Guardando",
       "testConnection": "Probar conexión",
-      "testing": "Probando",
       "testSuccess": "Conexión correcta.",
       "testHintNew": "Completa URL base, ID de modelo y clave API para habilitar las pruebas de conexión.",
       "disabledBadge": "Deshabilitado",
@@ -960,7 +952,6 @@
         "retry": "Reintentar",
         "cancel": "Cancelar",
         "submit": "Crear token",
-        "submitting": "Creando",
         "error": "No se pudo crear el token. Inténtalo de nuevo."
       },
       "created": {
@@ -979,7 +970,6 @@
         "warning": "¿Generar un nuevo secreto para \"{{name}}\"? El secreto actual deja de funcionar de inmediato, así que todo lo que lo use debe actualizarse. El nombre, los permisos y las restricciones no cambian.",
         "newExpiration": "Nueva caducidad",
         "submit": "Regenerar",
-        "submitting": "Regenerando…",
         "error": "No se pudo regenerar el token. Inténtalo de nuevo.",
         "done": {
           "title": "Token regenerado",
@@ -1102,7 +1092,6 @@
           "pickerFailed": "Error al abrir el selector de archivos. Por favor, inténtelo de nuevo.",
           "selectedFiles": "Archivos Seleccionados",
           "selectFiles": "Seleccionar Archivos",
-          "loading": "Cargando...",
           "noFilesSelected": "No hay archivos o carpetas seleccionados",
           "folders": "Carpetas",
           "files": "Archivos",
@@ -1299,6 +1288,7 @@
   },
   "convTile": {
     "share": "Compartir",
+    "menu": "Acciones de la conversación",
     "delete": "Eliminar",
     "rename": "Renombrar",
     "save": "Guardar",
@@ -1400,7 +1390,8 @@
       "unpin": "Dejar de fijar agente",
       "open": "Abrir",
       "remove": "Quitar",
-      "draft": "Borrador"
+      "draft": "Borrador",
+      "actions": "Acciones del agente"
     },
     "description": "Descubre y crea versiones personalizadas de DocsGPT que combinan instrucciones, conocimiento adicional y cualquier combinación de habilidades",
     "newAgent": "Nuevo Agente",
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index 4a90be35..34a77412 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -114,7 +114,6 @@
         "edit": "編集",
         "save": "保存",
         "cancel": "キャンセル",
-        "saving": "保存中…",
         "saveFailed": "ページを保存できませんでした。もう一度お試しください。",
         "forbidden": "このページを編集する権限がありません。",
         "conflict": "このページは開いた後に変更されたため、再読み込みされました。あなたの編集内容は下にあります。再適用して、もう一度保存してください。",
@@ -327,7 +326,6 @@
         "subtitle": "「{{name}}」のチャンク分割と検索の方法を設定します。",
         "subtitleGeneric": "このソースのチャンク分割と検索の方法を設定します。",
         "save": "保存",
-        "saving": "保存中…",
         "readOnly": "この共有ソースには閲覧のみのアクセス権があるため、設定を変更できません。",
         "chunkingChangeHint": "チャンク分割の設定を変更しました。保存後、反映にはこのソースの再インデックスが必要です。",
         "prescreenInvalidHint": "プリスクリーニングの値を確認してください。取得する候補数はチャンク数以上、保持するチャンク数は取得する候補数以下である必要があります。",
@@ -678,7 +676,6 @@
       "body": "ボディ",
       "deleteActionWarning": "アクション \"{{name}}\" を削除してもよろしいですか？",
       "save": "保存",
-      "saving": "保存中...",
       "saveFailed": "ツール設定の保存に失敗しました",
       "fieldName": "フィールド名",
       "fieldType": "フィールドタイプ",
@@ -704,8 +701,6 @@
         "password": "パスワード",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -795,7 +790,6 @@
         "installLink": "docsgpt-cliがない場合はインストール",
         "stepTwo": "2. 求められたらこのコードを入力:",
         "start": "コードを生成",
-        "starting": "処理中…",
         "waitingForCli": "CLIがコードを使用するのを待機中…",
         "cancel": "キャンセル"
       }
@@ -810,9 +804,7 @@
       "addTitle": "カスタムモデルを追加",
       "editTitle": "カスタムモデルを編集",
       "save": "保存",
-      "saving": "保存中",
       "testConnection": "接続をテスト",
-      "testing": "テスト中",
       "testSuccess": "接続に成功しました。",
       "testHintNew": "接続テストを有効にするには、ベース URL、モデル ID、API キーを入力してください。",
       "disabledBadge": "無効",
@@ -959,7 +951,6 @@
         "retry": "再試行",
         "cancel": "キャンセル",
         "submit": "トークンを作成",
-        "submitting": "作成中",
         "error": "トークンを作成できませんでした。もう一度お試しください。"
       },
       "created": {
@@ -978,7 +969,6 @@
         "warning": "「{{name}}」の新しいシークレットを生成しますか？現在のシークレットは直ちに無効になるため、使用している箇所をすべて更新する必要があります。名前、スコープ、制限は変わりません。",
         "newExpiration": "新しい有効期限",
         "submit": "再生成",
-        "submitting": "再生成中…",
         "error": "トークンを再生成できませんでした。もう一度お試しください。",
         "done": {
           "title": "トークンを再生成しました",
@@ -1101,7 +1091,6 @@
           "pickerFailed": "ファイルピッカーを開けませんでした。もう一度お試しください。",
           "selectedFiles": "選択されたファイル",
           "selectFiles": "ファイルを選択",
-          "loading": "読み込み中...",
           "noFilesSelected": "ファイルまたはフォルダが選択されていません",
           "folders": "フォルダ",
           "files": "ファイル",
@@ -1297,6 +1286,7 @@
   },
   "convTile": {
     "share": "共有",
+    "menu": "会話の操作",
     "delete": "削除",
     "rename": "名前変更",
     "save": "保存",
@@ -1397,7 +1387,8 @@
       "unpin": "エージェントのピン留めを解除",
       "open": "開く",
       "remove": "削除",
-      "draft": "下書き"
+      "draft": "下書き",
+      "actions": "エージェントの操作"
     },
     "description": "指示、追加知識、スキルの組み合わせを含むDocsGPTのカスタムバージョンを発見して作成します",
     "newAgent": "新しいエージェント",
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index bc94c5e5..a1495b21 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -114,7 +114,6 @@
         "edit": "Редактировать",
         "save": "Сохранить",
         "cancel": "Отмена",
-        "saving": "Сохранение…",
         "saveFailed": "Не удалось сохранить страницу. Пожалуйста, попробуйте ещё раз.",
         "forbidden": "У вас нет прав на редактирование этой страницы.",
         "conflict": "Страница изменилась с момента открытия и была перезагружена. Ваши правки ниже — примените их заново и сохраните ещё раз.",
@@ -340,7 +339,6 @@
         "subtitle": "Настройте, как «{{name}}» разбивается на фрагменты и извлекается.",
         "subtitleGeneric": "Настройте, как этот источник разбивается на фрагменты и извлекается.",
         "save": "Сохранить",
-        "saving": "Сохранение…",
         "readOnly": "У вас доступ только для просмотра этого общего источника, вы не можете изменять его настройки.",
         "chunkingChangeHint": "Вы изменили настройку разбиения на фрагменты. После сохранения потребуется переиндексация источника, чтобы изменения вступили в силу.",
         "prescreenInvalidHint": "Проверьте значения предварительного отбора: число кандидатов должно быть не меньше числа фрагментов, а число оставляемых фрагментов не должно превышать число кандидатов.",
@@ -705,7 +703,6 @@
       "body": "Тело запроса",
       "deleteActionWarning": "Вы уверены, что хотите удалить действие \"{{name}}\"?",
       "save": "Сохранить",
-      "saving": "Сохранение...",
       "saveFailed": "Не удалось сохранить настройки инструмента",
       "fieldName": "Имя поля",
       "fieldType": "Тип поля",
@@ -731,8 +728,6 @@
         "password": "Пароль",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -822,7 +817,6 @@
         "installLink": "Нет docsgpt-cli? Установите его",
         "stepTwo": "2. Введите этот код по запросу:",
         "start": "Сгенерировать код",
-        "starting": "Выполнение…",
         "waitingForCli": "Ожидание активации кода в CLI…",
         "cancel": "Отмена"
       }
@@ -837,9 +831,7 @@
       "addTitle": "Добавить свою модель",
       "editTitle": "Изменить свою модель",
       "save": "Сохранить",
-      "saving": "Сохранение",
       "testConnection": "Проверить соединение",
-      "testing": "Проверка",
       "testSuccess": "Соединение установлено.",
       "testHintNew": "Заполните Base URL, ID модели и API-ключ, чтобы включить проверку соединения.",
       "disabledBadge": "Отключено",
@@ -1006,7 +998,6 @@
         "retry": "Повторить",
         "cancel": "Отмена",
         "submit": "Создать токен",
-        "submitting": "Создание",
         "error": "Не удалось создать токен. Попробуйте ещё раз."
       },
       "created": {
@@ -1025,7 +1016,6 @@
         "warning": "Создать новый секрет для «{{name}}»? Текущий секрет сразу перестанет работать, поэтому всё, что его использует, нужно обновить. Имя, права и ограничения останутся прежними.",
         "newExpiration": "Новый срок действия",
         "submit": "Перевыпустить",
-        "submitting": "Перевыпуск…",
         "error": "Не удалось перевыпустить токен. Попробуйте ещё раз.",
         "done": {
           "title": "Токен перевыпущен",
@@ -1148,7 +1138,6 @@
           "pickerFailed": "Не удалось открыть средство выбора файлов. Пожалуйста, попробуйте еще раз.",
           "selectedFiles": "Выбранные файлы",
           "selectFiles": "Выбрать файлы",
-          "loading": "Загрузка...",
           "noFilesSelected": "Файлы или папки не выбраны",
           "folders": "Папки",
           "files": "Файлы",
@@ -1347,6 +1336,7 @@
   },
   "convTile": {
     "share": "Поделиться",
+    "menu": "Действия с беседой",
     "delete": "Удалить",
     "rename": "Переименовать",
     "save": "Сохранить",
@@ -1450,7 +1440,8 @@
       "unpin": "Открепить агента",
       "open": "Открыть",
       "remove": "Удалить",
-      "draft": "Черновик"
+      "draft": "Черновик",
+      "actions": "Действия с агентом"
     },
     "description": "Откройте и создайте пользовательские версии DocsGPT, которые объединяют инструкции, дополнительные знания и любую комбинацию навыков",
     "newAgent": "Новый Агент",
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index a7ac75b0..b612094e 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -114,7 +114,6 @@
         "edit": "編輯",
         "save": "儲存",
         "cancel": "取消",
-        "saving": "儲存中…",
         "saveFailed": "無法儲存頁面。請再試一次。",
         "forbidden": "您沒有編輯此頁面的權限。",
         "conflict": "此頁面在您開啟後已變更，並已重新載入。您的編輯內容如下——請重新套用後再次儲存。",
@@ -327,7 +326,6 @@
         "subtitle": "設定「{{name}}」的分塊與檢索方式。",
         "subtitleGeneric": "設定此來源的分塊與檢索方式。",
         "save": "儲存",
-        "saving": "儲存中…",
         "readOnly": "您對此共享來源僅有檢視權限，無法變更其設定。",
         "chunkingChangeHint": "您變更了分塊設定。儲存後需重新索引此來源才會生效。",
         "prescreenInvalidHint": "請檢查預篩選數值：擷取候選數不得少於區塊數，且保留區塊數不得超過擷取候選數。",
@@ -678,7 +676,6 @@
       "body": "主體",
       "deleteActionWarning": "您確定要刪除操作 \"{{name}}\" 嗎？",
       "save": "儲存",
-      "saving": "儲存中...",
       "saveFailed": "儲存工具設定失敗",
       "fieldName": "欄位名稱",
       "fieldType": "欄位類型",
@@ -704,8 +701,6 @@
         "password": "密碼",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -795,7 +790,6 @@
         "installLink": "還沒有 docsgpt-cli？安裝它",
         "stepTwo": "2. 在提示時輸入此配對碼：",
         "start": "產生配對碼",
-        "starting": "處理中…",
         "waitingForCli": "等待 CLI 兌換配對碼…",
         "cancel": "取消"
       }
@@ -810,9 +804,7 @@
       "addTitle": "新增自訂模型",
       "editTitle": "編輯自訂模型",
       "save": "儲存",
-      "saving": "儲存中",
       "testConnection": "測試連線",
-      "testing": "測試中",
       "testSuccess": "連線成功。",
       "testHintNew": "請填寫 Base URL、模型 ID 與 API 金鑰以啟用連線測試。",
       "disabledBadge": "已停用",
@@ -959,7 +951,6 @@
         "retry": "重試",
         "cancel": "取消",
         "submit": "建立權杖",
-        "submitting": "建立中",
         "error": "建立權杖失敗，請再試一次。"
       },
       "created": {
@@ -978,7 +969,6 @@
         "warning": "要為「{{name}}」產生新的密鑰嗎？目前的密鑰會立即失效，所有使用它的地方都需要更新。名稱、權限範圍和限制維持不變。",
         "newExpiration": "新的到期時間",
         "submit": "重新產生",
-        "submitting": "正在重新產生…",
         "error": "重新產生權杖失敗，請再試一次。",
         "done": {
           "title": "權杖已重新產生",
@@ -1101,7 +1091,6 @@
           "pickerFailed": "無法開啟檔案選擇器。請重試。",
           "selectedFiles": "已選擇的檔案",
           "selectFiles": "選擇檔案",
-          "loading": "載入中...",
           "noFilesSelected": "未選擇檔案或資料夾",
           "folders": "資料夾",
           "files": "檔案",
@@ -1297,6 +1286,7 @@
   },
   "convTile": {
     "share": "分享",
+    "menu": "對話操作",
     "delete": "刪除",
     "rename": "重新命名",
     "save": "儲存",
@@ -1397,7 +1387,8 @@
       "unpin": "取消釘選代理",
       "open": "開啟",
       "remove": "移除",
-      "draft": "草稿"
+      "draft": "草稿",
+      "actions": "代理操作"
     },
     "description": "探索並創建結合指令、額外知識和任意技能組合的DocsGPT自訂版本",
     "newAgent": "新建代理",
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index c12a2604..07bce3a2 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -114,7 +114,6 @@
         "edit": "编辑",
         "save": "保存",
         "cancel": "取消",
-        "saving": "保存中…",
         "saveFailed": "无法保存页面，请重试。",
         "forbidden": "您没有权限编辑此页面。",
         "conflict": "此页面在您打开后已被修改，并已重新加载。您的编辑内容在下方——请重新应用并再次保存。",
@@ -327,7 +326,6 @@
         "subtitle": "配置“{{name}}”的分块与检索方式。",
         "subtitleGeneric": "配置此来源的分块与检索方式。",
         "save": "保存",
-        "saving": "保存中…",
         "readOnly": "您对此共享来源仅有查看权限，无法更改其配置。",
         "chunkingChangeHint": "您更改了分块设置。保存后需要重新索引此来源才能生效。",
         "prescreenInvalidHint": "请检查预筛选参数：获取的候选数量至少应等于文本块数量，且保留的文本块数不得超过获取的候选数量。",
@@ -678,7 +676,6 @@
       "body": "请求体",
       "deleteActionWarning": "您确定要删除操作 \"{{name}}\" 吗？",
       "save": "保存",
-      "saving": "保存中...",
       "saveFailed": "保存工具配置失败",
       "fieldName": "字段名称",
       "fieldType": "字段类型",
@@ -704,8 +701,6 @@
         "password": "密码",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -795,7 +790,6 @@
         "installLink": "还没有 docsgpt-cli？安装它",
         "stepTwo": "2. 在提示时输入此代码：",
         "start": "生成代码",
-        "starting": "处理中…",
         "waitingForCli": "等待 CLI 兑换代码…",
         "cancel": "取消"
       }
@@ -810,9 +804,7 @@
       "addTitle": "添加自定义模型",
       "editTitle": "编辑自定义模型",
       "save": "保存",
-      "saving": "保存中",
       "testConnection": "测试连接",
-      "testing": "测试中",
       "testSuccess": "连接成功。",
       "testHintNew": "请填写 Base URL、模型 ID 和 API 密钥以启用连接测试。",
       "disabledBadge": "已禁用",
@@ -959,7 +951,6 @@
         "retry": "重试",
         "cancel": "取消",
         "submit": "创建令牌",
-        "submitting": "正在创建",
         "error": "创建令牌失败，请重试。"
       },
       "created": {
@@ -978,7 +969,6 @@
         "warning": "要为“{{name}}”生成新的密钥吗？当前密钥将立即失效，所有使用它的地方都需要更新。名称、权限范围和限制保持不变。",
         "newExpiration": "新的过期时间",
         "submit": "重新生成",
-        "submitting": "正在重新生成…",
         "error": "重新生成令牌失败，请重试。",
         "done": {
           "title": "令牌已重新生成",
@@ -1101,7 +1091,6 @@
           "pickerFailed": "无法打开文件选择器。请重试。",
           "selectedFiles": "已选择的文件",
           "selectFiles": "选择文件",
-          "loading": "加载中...",
           "noFilesSelected": "未选择文件或文件夹",
           "folders": "文件夹",
           "files": "文件",
@@ -1297,6 +1286,7 @@
   },
   "convTile": {
     "share": "分享",
+    "menu": "对话操作",
     "delete": "删除",
     "rename": "重命名",
     "save": "保存",
@@ -1397,7 +1387,8 @@
       "unpin": "取消固定代理",
       "open": "打开",
       "remove": "移除",
-      "draft": "草稿"
+      "draft": "草稿",
+      "actions": "代理操作"
     },
     "description": "发现并创建结合指令、额外知识和任意技能组合的DocsGPT自定义版本",
     "newAgent": "新建代理",
diff --git a/frontend/src/modals/AccessTokenCreatedModal.tsx b/frontend/src/modals/AccessTokenCreatedModal.tsx
index 49deb962..ab9423a2 100644
--- a/frontend/src/modals/AccessTokenCreatedModal.tsx
+++ b/frontend/src/modals/AccessTokenCreatedModal.tsx
@@ -33,8 +33,15 @@ export default function AccessTokenCreatedModal({
     <Modal
       open={token !== null}
       onOpenChange={(o) => !o && onClose()}
-      hideTitle
       title={t(`${copy}.title`)}
+      description={
+        <span className="break-words">
+          {t(`${copy}.subtitle`, {
+            name,
+            ...NO_ESCAPE,
+          })}
+        </span>
+      }
       size="lg"
       mobileVariant="sheet"
       // The secret cannot be shown again, so a stray click outside must not
@@ -47,18 +54,6 @@ export default function AccessTokenCreatedModal({
       }
     >
       <div className="flex flex-col gap-5 px-1">
-        <div>
-          <h2 className="text-foreground text-xl font-semibold">
-            {t(`${copy}.title`)}
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm break-words">
-            {t(`${copy}.subtitle`, {
-              name,
-              ...NO_ESCAPE,
-            })}
-          </p>
-        </div>
-
         <div
           role="alert"
           className="bg-warning/10 text-foreground flex items-start gap-3 rounded-lg px-4 py-3 text-sm"
diff --git a/frontend/src/modals/AddActionModal.tsx b/frontend/src/modals/AddActionModal.tsx
index 49db61d7..72464cc4 100644
--- a/frontend/src/modals/AddActionModal.tsx
+++ b/frontend/src/modals/AddActionModal.tsx
@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 
 type AddActionModalProps = {
@@ -51,19 +50,12 @@ export default function AddActionModal({
       }}
       title={t('modals.addAction.title')}
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            shape="pill"
-            onClick={handleCancel}
-          >
-            {t('modals.configTool.closeButton')}
-          </Button>
-          <Button type="button" shape="pill" onClick={handleAddAction}>
-            {t('modals.addAction.addButton')}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={t('modals.configTool.closeButton')}
+          onCancel={handleCancel}
+          submitLabel={t('modals.addAction.addButton')}
+          onSubmit={handleAddAction}
+        />
       }
     >
       <div className="relative">
diff --git a/frontend/src/modals/AddToolModal.tsx b/frontend/src/modals/AddToolModal.tsx
index 2a23d06e..18adea2d 100644
--- a/frontend/src/modals/AddToolModal.tsx
+++ b/frontend/src/modals/AddToolModal.tsx
@@ -159,7 +159,7 @@ export default function AddToolModal({
                         <div className="mt-[9px]">
                           <p
                             title={tool.displayName}
-                            className="text-foreground dark:text-foreground truncate px-1 text-sm leading-relaxed font-semibold capitalize"
+                            className="text-foreground truncate px-1 text-sm leading-relaxed font-semibold capitalize"
                           >
                             {tool.displayName}
                           </p>
diff --git a/frontend/src/modals/AgentDetailsModal.tsx b/frontend/src/modals/AgentDetailsModal.tsx
index ab133388..a491053d 100644
--- a/frontend/src/modals/AgentDetailsModal.tsx
+++ b/frontend/src/modals/AgentDetailsModal.tsx
@@ -1,13 +1,12 @@
 import { envVar } from '@/env';
+import { ExternalLink } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { Agent } from '../agents/types';
 import userService from '../api/services/userService';
-import ExternalLinkIcon from '../assets/external-link.svg';
 import CopyButton from '../components/CopyButton';
-import Spinner from '../components/Spinner';
 import { Button } from '../components/ui/button';
 import { Modal } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
@@ -114,7 +113,7 @@ export default function AgentDetailsModal({
           <div className="mt-8 flex flex-col gap-6">
             <div className="flex flex-col gap-3">
               <div className="flex items-center gap-2">
-                <h2 className="text-foreground dark:text-foreground text-base font-semibold">
+                <h2 className="text-foreground text-base font-semibold">
                   {t('modals.agentDetails.publicLink')}
                 </h2>
               </div>
@@ -143,11 +142,7 @@ export default function AgentDetailsModal({
                     <span className="text-sm">
                       {t('modals.agentDetails.learnMore')}
                     </span>
-                    <img
-                      src={ExternalLinkIcon}
-                      alt="External link"
-                      className="h-3 w-3"
-                    />
+                    <ExternalLink className="size-3" />
                   </a>
                 </div>
               ) : (
@@ -156,18 +151,14 @@ export default function AgentDetailsModal({
                   variant="outline-primary"
                   shape="pill"
                   onClick={handleGeneratePublicLink}
-                  className="w-28"
+                  loading={loadingStates.publicLink}
                 >
-                  {loadingStates.publicLink ? (
-                    <Spinner size="small" />
-                  ) : (
-                    t('modals.agentDetails.generate')
-                  )}
+                  {t('modals.agentDetails.generate')}
                 </Button>
               )}
             </div>
             <div className="flex flex-col gap-3">
-              <h2 className="text-foreground dark:text-foreground text-base font-semibold">
+              <h2 className="text-foreground text-base font-semibold">
                 {t('modals.agentDetails.apiKey')}
               </h2>
               {apiKey ? (
@@ -197,11 +188,7 @@ export default function AgentDetailsModal({
                           rel="noopener noreferrer"
                         >
                           {t('modals.agentDetails.test')}
-                          <img
-                            src={ExternalLinkIcon}
-                            alt="External link"
-                            className="h-3 w-3 group-hover:brightness-0 group-hover:invert"
-                          />
+                          <ExternalLink />
                         </a>
                       </Button>
                     )}
@@ -209,35 +196,26 @@ export default function AgentDetailsModal({
                       <Button
                         type="button"
                         onClick={() => setResetKeyConfirmState('ACTIVE')}
-                        disabled={loadingStates.apiKey}
+                        loading={loadingStates.apiKey}
                         variant="outline-primary"
                         size="sm"
                         shape="pill"
                         className="ml-8"
                       >
-                        {loadingStates.apiKey ? (
-                          <Spinner size="small" />
-                        ) : (
-                          t('modals.agentDetails.resetKey')
-                        )}
+                        {t('modals.agentDetails.resetKey')}
                       </Button>
                     )}
                   </div>
                 </div>
               ) : (
-                <Button
-                  type="button"
-                  variant="outline-primary"
-                  shape="pill"
-                  className="w-28"
-                >
+                <Button type="button" variant="outline-primary" shape="pill">
                   {t('modals.agentDetails.generate')}
                 </Button>
               )}
             </div>
             <div className="flex flex-col gap-3">
               <div className="flex items-center gap-2">
-                <h2 className="text-foreground dark:text-foreground text-base font-semibold">
+                <h2 className="text-foreground text-base font-semibold">
                   {t('modals.agentDetails.webhookUrl')}
                 </h2>
               </div>
@@ -262,11 +240,7 @@ export default function AgentDetailsModal({
                     <span className="text-sm">
                       {t('modals.agentDetails.learnMore')}
                     </span>
-                    <img
-                      src={ExternalLinkIcon}
-                      alt="External link"
-                      className="h-3 w-3"
-                    />
+                    <ExternalLink className="size-3" />
                   </a>
                 </div>
               ) : (
@@ -275,13 +249,9 @@ export default function AgentDetailsModal({
                   variant="outline-primary"
                   shape="pill"
                   onClick={handleGenerateWebhook}
-                  className="w-28"
+                  loading={loadingStates.webhook}
                 >
-                  {loadingStates.webhook ? (
-                    <Spinner size="small" />
-                  ) : (
-                    t('modals.agentDetails.generate')
-                  )}
+                  {t('modals.agentDetails.generate')}
                 </Button>
               )}
             </div>
diff --git a/frontend/src/modals/ConfigToolModal.tsx b/frontend/src/modals/ConfigToolModal.tsx
index a0ddf282..20666438 100644
--- a/frontend/src/modals/ConfigToolModal.tsx
+++ b/frontend/src/modals/ConfigToolModal.tsx
@@ -4,10 +4,9 @@ import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
 import ConfigFields from '../components/ConfigFields';
-import { Button } from '../components/ui/button';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
-import { Label } from '../components/ui/label';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import { AvailableToolType } from './types';
@@ -120,26 +119,13 @@ export default function ConfigToolModal({
       title={t('modals.configTool.title')}
       size="lg"
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            shape="pill"
-            onClick={handleClose}
-          >
-            {t('modals.configTool.closeButton')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleAddTool}
-            shape="pill"
-            disabled={saving}
-          >
-            {saving
-              ? t('modals.configTool.addButton') + '…'
-              : t('modals.configTool.addButton')}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={t('modals.configTool.closeButton')}
+          onCancel={handleClose}
+          submitLabel={t('modals.configTool.addButton')}
+          onSubmit={handleAddTool}
+          pending={saving}
+        />
       }
     >
       <div>
@@ -151,10 +137,7 @@ export default function ConfigToolModal({
         </p>
 
         <div className="mt-6 flex flex-col gap-4 px-1">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="customName">
-              {t('modals.configTool.customNamePlaceholder')}
-            </Label>
+          <FormField label={t('modals.configTool.customNamePlaceholder')}>
             <Input
               id="customName"
               type="text"
@@ -162,7 +145,7 @@ export default function ConfigToolModal({
               onChange={(e) => setCustomName(e.target.value)}
               placeholder={tool.displayName}
             />
-          </div>
+          </FormField>
 
           {hasConfig && (
             <ConfigFields
diff --git a/frontend/src/modals/ConfirmationModal.tsx b/frontend/src/modals/ConfirmationModal.tsx
index e031eb4e..7d73023d 100644
--- a/frontend/src/modals/ConfirmationModal.tsx
+++ b/frontend/src/modals/ConfirmationModal.tsx
@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '../components/ui/button';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 
 export default function ConfirmationModal({
@@ -25,16 +24,12 @@ export default function ConfirmationModal({
 }) {
   const { t } = useTranslation();
 
-  const handleSubmitClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleSubmitClick = () => {
     handleSubmit();
     setModalState('INACTIVE');
   };
 
-  const handleCancelClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleCancelClick = () => {
     setModalState('INACTIVE');
     handleCancel?.();
   };
@@ -47,24 +42,13 @@ export default function ConfirmationModal({
       }}
       title={message}
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleCancelClick}
-            shape="pill"
-          >
-            {cancelLabel ? cancelLabel : t('cancel')}
-          </Button>
-          <Button
-            type="button"
-            variant={variant === 'danger' ? 'destructive' : 'default'}
-            onClick={handleSubmitClick}
-            shape="pill"
-          >
-            {submitLabel}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={cancelLabel ? cancelLabel : t('cancel')}
+          onCancel={handleCancelClick}
+          submitLabel={submitLabel}
+          onSubmit={handleSubmitClick}
+          destructive={variant === 'danger'}
+        />
       }
     >
       {null}
diff --git a/frontend/src/modals/CreateAccessTokenModal.tsx b/frontend/src/modals/CreateAccessTokenModal.tsx
index b1702fd7..90690472 100644
--- a/frontend/src/modals/CreateAccessTokenModal.tsx
+++ b/frontend/src/modals/CreateAccessTokenModal.tsx
@@ -9,12 +9,13 @@ import patService, {
   CreateAccessTokenResponse,
 } from '../api/services/patService';
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
+import { Checkbox } from '../components/ui/checkbox';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
-import { Label } from '../components/ui/label';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { MultiSelect } from '../components/ui/multi-select';
 import {
   Select,
@@ -23,6 +24,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui/select';
+import { SettingRow, SettingRows } from '../components/ui/setting-row';
 import { Switch } from '../components/ui/switch';
 import { selectToken } from '../preferences/preferenceSlice';
 import {
@@ -40,6 +42,7 @@ import {
   toResourceOptions,
 } from '../settings/accessTokenUtils';
 import { formatDateOnly } from '../utils/dateTimeUtils';
+import { cn } from '@/lib/utils';
 
 const MAX_NAME_LENGTH = 100;
 const DAY_MS = 24 * 60 * 60 * 1000;
@@ -202,41 +205,22 @@ export default function CreateAccessTokenModal({
     <Modal
       open={open}
       onOpenChange={(o) => !o && handleClose()}
-      hideTitle
       title={t('settings.accessTokens.create.title')}
+      description={t('settings.accessTokens.create.subtitle')}
       size="lg"
       mobileVariant="sheet"
       isPerformingTask={submitting}
       contentClassName="max-h-[65vh]"
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleClose}
-            disabled={submitting}
-            size="lg"
-            shape="pill"
-          >
-            {t('settings.accessTokens.create.cancel')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleSubmit}
-            disabled={!canSubmit}
-            size="lg"
-            shape="pill"
-          >
-            {submitting ? (
-              <span className="flex items-center gap-2">
-                <Spinner size="small" />
-                {t('settings.accessTokens.create.submitting')}
-              </span>
-            ) : (
-              t('settings.accessTokens.create.submit')
-            )}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={t('settings.accessTokens.create.cancel')}
+          onCancel={handleClose}
+          submitLabel={t('settings.accessTokens.create.submit')}
+          onSubmit={handleSubmit}
+          pending={submitting}
+          disabled={!canSubmit}
+          cancelProps={{ disabled: submitting }}
+        />
       }
     >
       <form
@@ -246,21 +230,8 @@ export default function CreateAccessTokenModal({
           handleSubmit();
         }}
       >
-        <div>
-          <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-            {t('settings.accessTokens.create.title')}
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm">
-            {t('settings.accessTokens.create.subtitle')}
-          </p>
-        </div>
-
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="pat-name">
-              {t('settings.accessTokens.create.name')}
-              <span className="text-destructive">*</span>
-            </Label>
+          <FormField label={t('settings.accessTokens.create.name')} required>
             <Input
               id="pat-name"
               type="text"
@@ -273,11 +244,21 @@ export default function CreateAccessTokenModal({
               placeholder={t('settings.accessTokens.create.namePlaceholder')}
               autoComplete="off"
             />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="pat-expiry">
-              {t('settings.accessTokens.create.expiration')}
-            </Label>
+          </FormField>
+          <FormField
+            id="pat-expiry"
+            label={t('settings.accessTokens.create.expiration')}
+            hint={
+              expiry === NO_EXPIRY
+                ? undefined
+                : t('settings.accessTokens.create.expiresOn', {
+                    date: formatDateOnly(
+                      new Date(Date.now() + expiry * DAY_MS).toISOString(),
+                    ),
+                    ...NO_ESCAPE,
+                  })
+            }
+          >
             <Select
               value={String(expiry)}
               onValueChange={(value) => setExpiry(Number(value))}
@@ -300,34 +281,25 @@ export default function CreateAccessTokenModal({
                   {t('settings.accessTokens.create.noExpirationHint')}
                 </AlertDescription>
               </Alert>
-            ) : (
-              <p className="text-muted-foreground text-xs">
-                {t('settings.accessTokens.create.expiresOn', {
-                  date: formatDateOnly(
-                    new Date(Date.now() + expiry * DAY_MS).toISOString(),
-                  ),
-                  ...NO_ESCAPE,
-                })}
-              </p>
-            )}
-          </div>
+            ) : null}
+          </FormField>
         </div>
 
         <fieldset className="m-0 flex min-w-0 flex-col gap-3 border-0 p-0">
-          <legend className="text-foreground dark:text-foreground text-sm font-semibold">
+          <legend className="text-foreground text-sm font-semibold">
             {t('settings.accessTokens.create.scopes')}
             <span className="text-destructive">*</span>
           </legend>
           <p className="text-muted-foreground text-xs">
             {t('settings.accessTokens.create.scopesHint')}
           </p>
-          <div className="border-border dark:border-border divide-border flex flex-col divide-y rounded-xl border">
+          <div className="border-border divide-border flex flex-col divide-y rounded-xl border">
             {scopeGroups.map((group) => (
               <div
                 key={group.family}
                 className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:gap-4"
               >
-                <p className="text-foreground dark:text-foreground w-32 shrink-0 text-sm font-medium capitalize">
+                <p className="text-foreground w-32 shrink-0 text-sm font-medium capitalize">
                   {familyLabel(group.family)}
                 </p>
                 <div className="flex min-w-0 flex-1 flex-col gap-2.5">
@@ -345,22 +317,22 @@ export default function CreateAccessTokenModal({
                             ? t('settings.accessTokens.create.impliedByWrite')
                             : undefined
                         }
-                        className={`flex items-start gap-3 ${
+                        className={cn(
+                          'flex items-start gap-3',
                           implied
                             ? 'cursor-not-allowed opacity-70'
-                            : 'cursor-pointer'
-                        }`}
+                            : 'cursor-pointer',
+                        )}
                       >
-                        <input
+                        <Checkbox
                           id={id}
-                          type="checkbox"
                           checked={checked}
                           disabled={implied}
-                          onChange={() => toggleScope(scope.name)}
-                          className="accent-primary border-input mt-0.5 size-4 shrink-0 rounded-sm bg-transparent dark:[color-scheme:dark]"
+                          onCheckedChange={() => toggleScope(scope.name)}
+                          className="mt-0.5"
                         />
                         <span className="flex min-w-0 flex-col gap-0.5">
-                          <code className="text-foreground dark:text-foreground font-mono text-xs font-medium">
+                          <code className="text-foreground font-mono text-xs font-medium">
                             {scope.name}
                           </code>
                           <span className="text-muted-foreground text-xs leading-relaxed">
@@ -378,21 +350,20 @@ export default function CreateAccessTokenModal({
 
         {policy.filterable_families.length > 0 && (
           <div className="flex flex-col gap-3">
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex flex-col gap-1">
-                <Label htmlFor="pat-restrict" className="text-sm font-semibold">
-                  {t('settings.accessTokens.create.restrict')}
-                </Label>
-                <p className="text-muted-foreground text-xs">
-                  {t('settings.accessTokens.create.restrictHint')}
-                </p>
-              </div>
-              <Switch
-                id="pat-restrict"
-                checked={restrict}
-                onCheckedChange={setRestrict}
-              />
-            </div>
+            <SettingRows>
+              <SettingRow
+                label={t('settings.accessTokens.create.restrict')}
+                description={t('settings.accessTokens.create.restrictHint')}
+                htmlFor="pat-restrict"
+                alignStart
+              >
+                <Switch
+                  id="pat-restrict"
+                  checked={restrict}
+                  onCheckedChange={setRestrict}
+                />
+              </SettingRow>
+            </SettingRows>
             {restrict && pickerFamilies.length === 0 && (
               <p className="text-muted-foreground bg-muted rounded-lg px-4 py-2 text-xs">
                 {t('settings.accessTokens.create.restrictNoFamilies')}
@@ -402,11 +373,16 @@ export default function CreateAccessTokenModal({
               pickerFamilies.map((family) => {
                 const state = resources[family];
                 return (
-                  <div key={family} className="flex flex-col gap-1.5">
-                    <Label className="capitalize">{familyLabel(family)}</Label>
+                  <FormField
+                    key={family}
+                    id={`pat-resources-${family}`}
+                    label={
+                      <span className="capitalize">{familyLabel(family)}</span>
+                    }
+                  >
                     {!state || state.status === 'loading' ? (
                       <div className="flex h-10 items-center">
-                        <Spinner size="small" />
+                        <Spinner size="sm" />
                       </div>
                     ) : state.status === 'error' ? (
                       <div className="flex flex-wrap items-center gap-2 text-xs">
@@ -444,7 +420,7 @@ export default function CreateAccessTokenModal({
                         modal
                       />
                     )}
-                  </div>
+                  </FormField>
                 );
               })}
           </div>
diff --git a/frontend/src/modals/CustomModelModal.tsx b/frontend/src/modals/CustomModelModal.tsx
index 0ef611ed..205be8a0 100644
--- a/frontend/src/modals/CustomModelModal.tsx
+++ b/frontend/src/modals/CustomModelModal.tsx
@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import customModelsService from '../api/services/customModelsService';
-import Spinner from '../components/Spinner';
 import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
 import { Label } from '../components/ui/label';
 import {
@@ -18,7 +18,7 @@ import {
 } from '../components/ui/select';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 
 import type {
   CreateCustomModelPayload,
@@ -320,373 +320,279 @@ export default function CustomModelModal({
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && closeModal()}
-      hideTitle
       title={
         isEditMode
           ? t('settings.customModels.editTitle')
           : t('settings.customModels.addTitle')
       }
+      description={t('settings.customModels.modalSubtitle')}
       size="lg"
       mobileVariant="sheet"
       className="max-w-[600px] md:w-[80vw] lg:w-[60vw]"
-    >
-      <div className="flex h-full flex-col">
-        <div className="px-2 py-2">
-          <h2 className="text-foreground text-xl font-semibold">
-            {isEditMode
-              ? t('settings.customModels.editTitle')
-              : t('settings.customModels.addTitle')}
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm">
-            {t('settings.customModels.modalSubtitle')}
-          </p>
-        </div>
-        <div className="flex-1 px-2">
-          <div className="flex flex-col gap-4 px-0.5 py-4">
-            {/* Row 1: Display name + Model ID side-by-side */}
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="cm-display-name">
-                  {t('settings.customModels.fields.displayName')}
-                  <span className="text-destructive">*</span>
-                </Label>
-                <Input
-                  id="cm-display-name"
-                  type="text"
-                  value={formData.display_name}
-                  onChange={(e) => handleChange('display_name', e.target.value)}
-                  placeholder={t(
-                    'settings.customModels.placeholders.displayName',
-                  )}
-                  aria-invalid={!!errors.display_name || undefined}
-                />
-                {errors.display_name && (
-                  <p className="text-destructive text-xs">
-                    {errors.display_name}
-                  </p>
-                )}
-              </div>
-
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="cm-model-id">
-                  {t('settings.customModels.fields.modelId')}
-                  <span className="text-destructive">*</span>
-                </Label>
-                <Input
-                  id="cm-model-id"
-                  type="text"
-                  value={formData.upstream_model_id}
-                  onChange={(e) =>
-                    handleChange('upstream_model_id', e.target.value)
-                  }
-                  placeholder={t('settings.customModels.placeholders.modelId')}
-                  aria-invalid={!!errors.upstream_model_id || undefined}
-                />
-                {errors.upstream_model_id && (
-                  <p className="text-destructive text-xs">
-                    {errors.upstream_model_id}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            {/* Row 2: Base URL + API key side-by-side */}
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="cm-base-url">
-                  {t('settings.customModels.fields.baseUrl')}
-                  <span className="text-destructive">*</span>
-                </Label>
-                <Input
-                  id="cm-base-url"
-                  type="url"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck={false}
-                  value={formData.base_url}
-                  onChange={(e) => handleChange('base_url', e.target.value)}
-                  placeholder={t('settings.customModels.placeholders.baseUrl')}
-                  aria-invalid={
-                    !!errors.base_url || !!errors.base_url_remote || undefined
-                  }
-                />
-                {errors.base_url && (
-                  <p className="text-destructive text-xs">{errors.base_url}</p>
-                )}
-                {errors.base_url_remote && (
-                  <p className="text-destructive text-xs">
-                    {errors.base_url_remote}
-                  </p>
-                )}
-              </div>
-
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="cm-api-key">
-                  {t('settings.customModels.fields.apiKey')}
-                  {!isEditMode && <span className="text-destructive">*</span>}
-                </Label>
-                <Input
-                  id="cm-api-key"
-                  type="text"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck={false}
-                  value={formData.api_key}
-                  onChange={(e) => handleChange('api_key', e.target.value)}
-                  placeholder={
-                    isEditMode
-                      ? t('settings.customModels.placeholders.apiKeyEdit')
-                      : t('settings.customModels.placeholders.apiKey')
-                  }
-                  aria-invalid={!!errors.api_key || undefined}
-                />
-                {isEditMode && (
-                  <p className="text-muted-foreground text-xs">
-                    {t('settings.customModels.hints.apiKeyEdit')}
-                  </p>
-                )}
-                {errors.api_key && (
-                  <p className="text-destructive text-xs">{errors.api_key}</p>
-                )}
-              </div>
-            </div>
-
-            {/* Row 3: Description (full width, optional) */}
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="cm-description">
-                {t('settings.customModels.fields.description')}
-              </Label>
-              <Input
-                id="cm-description"
-                type="text"
-                value={formData.description}
-                onChange={(e) => handleChange('description', e.target.value)}
-                placeholder={t(
-                  'settings.customModels.placeholders.description',
-                )}
-              />
-            </div>
-
-            {/* Row 4: Capabilities — flat (no border), chips + inline ctx */}
-            <div className="flex flex-col gap-2">
-              <Label>{t('settings.customModels.capabilities.title')}</Label>
-              <div className="grid gap-3 sm:grid-cols-2">
-                <div className="flex flex-col gap-1.5">
-                  <Label
-                    htmlFor="cm-api-flavor"
-                    className="text-muted-foreground text-xs"
-                  >
-                    {t('settings.customModels.capabilities.apiFlavor')}
-                  </Label>
-                  <Select
-                    value={formData.api_flavor}
-                    onValueChange={(value) =>
-                      handleChange('api_flavor', value as ModelApiFlavor)
-                    }
-                  >
-                    <SelectTrigger id="cm-api-flavor" className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="chat_completions">
-                        {t(
-                          'settings.customModels.capabilities.apiFlavors.chatCompletions',
-                        )}
-                      </SelectItem>
-                      <SelectItem value="responses">
-                        {t(
-                          'settings.customModels.capabilities.apiFlavors.responses',
-                        )}
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="flex flex-col gap-1.5">
-                  <Label
-                    htmlFor="cm-reasoning-effort"
-                    className="text-muted-foreground text-xs"
-                  >
-                    {t('settings.customModels.capabilities.reasoningEffort')}
-                  </Label>
-                  <Select
-                    value={formData.reasoning_effort}
-                    onValueChange={(value) =>
-                      handleChange(
-                        'reasoning_effort',
-                        value as ReasoningEffort | 'default',
-                      )
-                    }
-                  >
-                    <SelectTrigger id="cm-reasoning-effort" className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="default">
-                        {t(
-                          'settings.customModels.capabilities.reasoningEfforts.default',
-                        )}
-                      </SelectItem>
-                      {(
-                        [
-                          'none',
-                          'minimal',
-                          'low',
-                          'medium',
-                          'high',
-                          'xhigh',
-                        ] as ReasoningEffort[]
-                      ).map((effort) => (
-                        <SelectItem key={effort} value={effort}>
-                          {effort}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-              <div className="flex flex-wrap gap-2">
-                <CapabilityChip
-                  label={t('settings.customModels.capabilities.chips.tools')}
-                  active={formData.supports_tools}
-                  onClick={() =>
-                    handleChange('supports_tools', !formData.supports_tools)
-                  }
-                />
-                <CapabilityChip
-                  label={t(
-                    'settings.customModels.capabilities.chips.structuredOutput',
-                  )}
-                  active={formData.supports_structured_output}
-                  onClick={() =>
-                    handleChange(
-                      'supports_structured_output',
-                      !formData.supports_structured_output,
-                    )
-                  }
-                />
-                <CapabilityChip
-                  label={t('settings.customModels.capabilities.chips.images')}
-                  active={formData.supports_images}
-                  onClick={() =>
-                    handleChange('supports_images', !formData.supports_images)
-                  }
-                />
-              </div>
-              <div className="mt-1 flex flex-col gap-1.5 sm:flex-row sm:items-center sm:gap-3">
-                <Label
-                  htmlFor="cm-context-window"
-                  className="text-muted-foreground text-xs sm:mb-0"
-                >
-                  {t('settings.customModels.capabilities.contextWindowShort')}
-                </Label>
-                <Input
-                  id="cm-context-window"
-                  type="number"
-                  value={formData.context_window}
-                  min={MIN_CONTEXT_WINDOW}
-                  max={MAX_CONTEXT_WINDOW}
-                  step={1000}
-                  onChange={(e) => {
-                    const v = e.target.value;
-                    if (v === '') {
-                      handleChange('context_window', '');
-                    } else {
-                      const n = parseInt(v, 10);
-                      if (!Number.isNaN(n)) {
-                        handleChange('context_window', n);
-                      }
-                    }
-                  }}
-                  aria-invalid={!!errors.context_window || undefined}
-                  className="w-full sm:w-40"
-                />
-                {errors.context_window && (
-                  <p className="text-destructive text-xs">
-                    {errors.context_window}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            {testResult && (
-              <Alert variant={testResult.ok ? 'success' : 'destructive'}>
-                {testResult.ok ? (
-                  <CircleCheck className="size-4" aria-hidden="true" />
-                ) : (
-                  <CircleAlert className="size-4" aria-hidden="true" />
-                )}
-                <AlertDescription>{testResult.message}</AlertDescription>
-              </Alert>
-            )}
-
-            {errors.general && (
-              <Alert variant="destructive">
-                <CircleAlert className="size-4" aria-hidden="true" />
-                <AlertDescription>{errors.general}</AlertDescription>
-              </Alert>
-            )}
-          </div>
-        </div>
-
-        <div className="px-2 py-4">
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
+      footer={
+        <ModalActions
+          footerStart={
             <Button
               type="button"
               variant="outline"
               onClick={handleTest}
-              disabled={!canTest || testing || saving}
+              disabled={!canTest || saving}
+              loading={testing}
               title={testDisabledHint}
               size="lg"
               shape="pill"
-              className="w-full sm:w-auto"
             >
-              {testing ? (
-                <div className="flex items-center justify-center">
-                  <Spinner size="small" />
-                  <span className="ml-2">
-                    {t('settings.customModels.testing')}
-                  </span>
-                </div>
-              ) : (
-                t('settings.customModels.testConnection')
-              )}
+              {t('settings.customModels.testConnection')}
             </Button>
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:gap-3">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                disabled={saving}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
+          }
+          cancelLabel={t('cancel')}
+          onCancel={closeModal}
+          cancelProps={{ disabled: saving }}
+          submitLabel={t('settings.customModels.save')}
+          onSubmit={handleSave}
+          pending={saving}
+        />
+      }
+    >
+      <div className="flex flex-col gap-4 px-0.5 py-4">
+        {/* Row 1: Display name + Model ID side-by-side */}
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <FormField
+            label={t('settings.customModels.fields.displayName')}
+            required
+            error={errors.display_name}
+          >
+            <Input
+              id="cm-display-name"
+              type="text"
+              value={formData.display_name}
+              onChange={(e) => handleChange('display_name', e.target.value)}
+              placeholder={t('settings.customModels.placeholders.displayName')}
+            />
+          </FormField>
+
+          <FormField
+            label={t('settings.customModels.fields.modelId')}
+            required
+            error={errors.upstream_model_id}
+          >
+            <Input
+              id="cm-model-id"
+              type="text"
+              value={formData.upstream_model_id}
+              onChange={(e) =>
+                handleChange('upstream_model_id', e.target.value)
+              }
+              placeholder={t('settings.customModels.placeholders.modelId')}
+            />
+          </FormField>
+        </div>
+
+        {/* Row 2: Base URL + API key side-by-side */}
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <FormField
+            label={t('settings.customModels.fields.baseUrl')}
+            required
+            error={
+              [errors.base_url, errors.base_url_remote]
+                .filter(Boolean)
+                .join(' ') || undefined
+            }
+          >
+            <Input
+              id="cm-base-url"
+              type="url"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              value={formData.base_url}
+              onChange={(e) => handleChange('base_url', e.target.value)}
+              placeholder={t('settings.customModels.placeholders.baseUrl')}
+            />
+          </FormField>
+
+          <FormField
+            label={t('settings.customModels.fields.apiKey')}
+            required={!isEditMode}
+            hint={
+              isEditMode
+                ? t('settings.customModels.hints.apiKeyEdit')
+                : undefined
+            }
+            error={errors.api_key}
+          >
+            <Input
+              id="cm-api-key"
+              type="text"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              value={formData.api_key}
+              onChange={(e) => handleChange('api_key', e.target.value)}
+              placeholder={
+                isEditMode
+                  ? t('settings.customModels.placeholders.apiKeyEdit')
+                  : t('settings.customModels.placeholders.apiKey')
+              }
+            />
+          </FormField>
+        </div>
+
+        {/* Row 3: Description (full width, optional) */}
+        <FormField label={t('settings.customModels.fields.description')}>
+          <Input
+            id="cm-description"
+            type="text"
+            value={formData.description}
+            onChange={(e) => handleChange('description', e.target.value)}
+            placeholder={t('settings.customModels.placeholders.description')}
+          />
+        </FormField>
+
+        {/* Row 4: Capabilities — flat (no border), fields grid then chips */}
+        <div className="flex flex-col gap-2">
+          <Label>{t('settings.customModels.capabilities.title')}</Label>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <FormField
+              label={t('settings.customModels.capabilities.apiFlavor')}
+              id="cm-api-flavor"
+            >
+              <Select
+                value={formData.api_flavor}
+                onValueChange={(value) =>
+                  handleChange('api_flavor', value as ModelApiFlavor)
+                }
               >
-                {t('cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleSave}
-                disabled={saving}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
+                <SelectTrigger size="field" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="chat_completions">
+                    {t(
+                      'settings.customModels.capabilities.apiFlavors.chatCompletions',
+                    )}
+                  </SelectItem>
+                  <SelectItem value="responses">
+                    {t(
+                      'settings.customModels.capabilities.apiFlavors.responses',
+                    )}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </FormField>
+            <FormField
+              label={t('settings.customModels.capabilities.reasoningEffort')}
+              id="cm-reasoning-effort"
+            >
+              <Select
+                value={formData.reasoning_effort}
+                onValueChange={(value) =>
+                  handleChange(
+                    'reasoning_effort',
+                    value as ReasoningEffort | 'default',
+                  )
+                }
               >
-                {saving ? (
-                  <div className="flex items-center justify-center">
-                    <Spinner size="small" />
-                    <span className="ml-2">
-                      {t('settings.customModels.saving')}
-                    </span>
-                  </div>
-                ) : (
-                  t('settings.customModels.save')
-                )}
-              </Button>
-            </div>
+                <SelectTrigger size="field" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="default">
+                    {t(
+                      'settings.customModels.capabilities.reasoningEfforts.default',
+                    )}
+                  </SelectItem>
+                  {(
+                    [
+                      'none',
+                      'minimal',
+                      'low',
+                      'medium',
+                      'high',
+                      'xhigh',
+                    ] as ReasoningEffort[]
+                  ).map((effort) => (
+                    <SelectItem key={effort} value={effort}>
+                      {effort}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormField>
+            <FormField
+              label={t('settings.customModels.capabilities.contextWindowShort')}
+              error={errors.context_window}
+            >
+              <Input
+                id="cm-context-window"
+                type="number"
+                value={formData.context_window}
+                min={MIN_CONTEXT_WINDOW}
+                max={MAX_CONTEXT_WINDOW}
+                step={1000}
+                onChange={(e) => {
+                  const v = e.target.value;
+                  if (v === '') {
+                    handleChange('context_window', '');
+                  } else {
+                    const n = parseInt(v, 10);
+                    if (!Number.isNaN(n)) {
+                      handleChange('context_window', n);
+                    }
+                  }
+                }}
+              />
+            </FormField>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <CapabilityChip
+              label={t('settings.customModels.capabilities.chips.tools')}
+              active={formData.supports_tools}
+              onClick={() =>
+                handleChange('supports_tools', !formData.supports_tools)
+              }
+            />
+            <CapabilityChip
+              label={t(
+                'settings.customModels.capabilities.chips.structuredOutput',
+              )}
+              active={formData.supports_structured_output}
+              onClick={() =>
+                handleChange(
+                  'supports_structured_output',
+                  !formData.supports_structured_output,
+                )
+              }
+            />
+            <CapabilityChip
+              label={t('settings.customModels.capabilities.chips.images')}
+              active={formData.supports_images}
+              onClick={() =>
+                handleChange('supports_images', !formData.supports_images)
+              }
+            />
           </div>
         </div>
+
+        {testResult && (
+          <Alert variant={testResult.ok ? 'success' : 'destructive'}>
+            {testResult.ok ? (
+              <CircleCheck className="size-4" aria-hidden="true" />
+            ) : (
+              <CircleAlert className="size-4" aria-hidden="true" />
+            )}
+            <AlertDescription>{testResult.message}</AlertDescription>
+          </Alert>
+        )}
+
+        {errors.general && (
+          <Alert variant="destructive">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{errors.general}</AlertDescription>
+          </Alert>
+        )}
       </div>
     </Modal>
   );
diff --git a/frontend/src/modals/FolderManagementModal.tsx b/frontend/src/modals/FolderManagementModal.tsx
index 9cc043e5..2ffddb4f 100644
--- a/frontend/src/modals/FolderManagementModal.tsx
+++ b/frontend/src/modals/FolderManagementModal.tsx
@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 
 type FolderNameModalProps = {
@@ -62,26 +61,17 @@ export default function FolderNameModal({
           : t('agents.folders.rename')
       }
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleCancel}
-            shape="pill"
-          >
-            {t('cancel')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleSubmit}
-            disabled={!name.trim()}
-            shape="pill"
-          >
-            {mode === 'create'
+        <ModalActions
+          cancelLabel={t('cancel')}
+          onCancel={handleCancel}
+          submitLabel={
+            mode === 'create'
               ? t('agents.folders.createFolder')
-              : t('agents.folders.rename')}
-          </Button>
-        </>
+              : t('agents.folders.rename')
+          }
+          onSubmit={handleSubmit}
+          disabled={!name.trim()}
+        />
       }
     >
       <Input
diff --git a/frontend/src/modals/ImportAgentModal.tsx b/frontend/src/modals/ImportAgentModal.tsx
index fa566730..434e39f5 100644
--- a/frontend/src/modals/ImportAgentModal.tsx
+++ b/frontend/src/modals/ImportAgentModal.tsx
@@ -1,4 +1,4 @@
-import { AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { AlertTriangle, CheckCircle2, CloudUpload } from 'lucide-react';
 import { useState } from 'react';
 import { type FileRejection, useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
@@ -6,12 +6,10 @@ import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import userService from '../api/services/userService';
-import Upload from '../assets/upload.svg';
-import Spinner from '../components/Spinner';
 import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import {
   Select,
   SelectContent,
@@ -253,6 +251,7 @@ export default function ImportAgentModal({
             handleClose();
             if (path) navigate(path);
           }}
+          size="lg"
           shape="pill"
         >
           {t('modals.importAgent.continueToAgent')}
@@ -260,44 +259,22 @@ export default function ImportAgentModal({
       );
     }
     return (
-      <>
-        <Button
-          type="button"
-          variant="ghost"
-          onClick={handleClose}
-          shape="pill"
-        >
-          {t('modals.importAgent.cancel')}
-        </Button>
-        {!plan ? (
-          <Button
-            type="button"
-            onClick={handleAnalyze}
-            disabled={!yamlText || loading}
-            shape="pill"
-            className="w-24"
-          >
-            {loading ? (
-              <Spinner size="small" />
-            ) : (
-              t('modals.importAgent.review')
-            )}
-          </Button>
-        ) : (
-          <Button
-            type="button"
-            onClick={handleImport}
-            disabled={importing}
-            shape="pill"
-          >
-            {importing ? (
-              <Spinner size="small" />
-            ) : (
-              t('modals.importAgent.import')
-            )}
-          </Button>
-        )}
-      </>
+      <ModalActions
+        cancelLabel={t('modals.importAgent.cancel')}
+        onCancel={handleClose}
+        {...(!plan
+          ? {
+              submitLabel: t('modals.importAgent.review'),
+              onSubmit: handleAnalyze,
+              pending: loading,
+              disabled: !yamlText,
+            }
+          : {
+              submitLabel: t('modals.importAgent.import'),
+              onSubmit: handleImport,
+              pending: importing,
+            })}
+      />
     );
   };
 
@@ -343,11 +320,7 @@ export default function ImportAgentModal({
                 }`,
               })}
             >
-              <img
-                src={Upload}
-                alt=""
-                className="mb-3 h-10 w-10 opacity-60 dark:invert"
-              />
+              <CloudUpload className="text-muted-foreground mb-3 size-10" />
               <p className="text-foreground text-sm font-medium">
                 {fileName || t('modals.importAgent.dropzoneText')}
               </p>
diff --git a/frontend/src/modals/ImportSpecModal.tsx b/frontend/src/modals/ImportSpecModal.tsx
index 5a09c41e..bb8a0367 100644
--- a/frontend/src/modals/ImportSpecModal.tsx
+++ b/frontend/src/modals/ImportSpecModal.tsx
@@ -1,15 +1,16 @@
+import { CloudUpload } from 'lucide-react';
 import { useState } from 'react';
 import { type FileRejection, useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Upload from '../assets/upload.svg';
-import Spinner from '../components/Spinner';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
+import { Checkbox } from '../components/ui/checkbox';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import { APIActionType } from '../settings/types';
@@ -177,37 +178,26 @@ export default function ImportSpecModal({
       size="lg"
       contentClassName="max-h-[70vh]"
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleClose}
-            shape="pill"
-          >
-            {t('modals.importSpec.cancel')}
-          </Button>
-          {!parsedResult ? (
-            <Button
-              type="button"
-              onClick={handleParse}
-              disabled={!file || loading}
-              shape="pill"
-              className="w-20"
-            >
-              {loading && <Spinner size="small" />}
-              {!loading && t('modals.importSpec.parse')}
-            </Button>
-          ) : (
-            <Button
-              type="button"
-              onClick={handleImport}
-              disabled={selectedActions.size === 0}
-              shape="pill"
-            >
-              {t('modals.importSpec.import', { count: selectedActions.size })}
-            </Button>
-          )}
-        </>
+        !parsedResult ? (
+          <ModalActions
+            cancelLabel={t('modals.importSpec.cancel')}
+            onCancel={handleClose}
+            submitLabel={t('modals.importSpec.parse')}
+            onSubmit={handleParse}
+            pending={loading}
+            disabled={!file}
+          />
+        ) : (
+          <ModalActions
+            cancelLabel={t('modals.importSpec.cancel')}
+            onCancel={handleClose}
+            submitLabel={t('modals.importSpec.import', {
+              count: selectedActions.size,
+            })}
+            onSubmit={handleImport}
+            disabled={selectedActions.size === 0}
+          />
+        )
       }
     >
       <div className="flex flex-col gap-4">
@@ -219,7 +209,7 @@ export default function ImportSpecModal({
 
             <div
               {...getRootProps({
-                className: `border-border dark:border-border hover:border-primary dark:hover:border-primary flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-8 transition-colors ${
+                className: `border-border hover:border-primary flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-8 transition-colors ${
                   isDragReject
                     ? 'border-destructive'
                     : isDragActive
@@ -228,12 +218,8 @@ export default function ImportSpecModal({
                 }`,
               })}
             >
-              <img
-                src={Upload}
-                alt="Upload"
-                className="mb-3 h-10 w-10 opacity-60 dark:invert"
-              />
-              <p className="text-foreground dark:text-foreground text-sm font-medium">
+              <CloudUpload className="text-muted-foreground mb-3 size-10" />
+              <p className="text-foreground text-sm font-medium">
                 {file ? file.name : t('modals.importSpec.dropzoneText')}
               </p>
               <p className="text-muted-foreground mt-1 text-xs">
@@ -247,7 +233,7 @@ export default function ImportSpecModal({
         ) : (
           <div className="flex flex-col gap-4">
             <div className="bg-muted rounded-xl p-4">
-              <h3 className="text-foreground dark:text-foreground font-medium">
+              <h3 className="text-foreground font-medium">
                 {parsedResult.metadata.title}
               </h3>
               {parsedResult.metadata.description && (
@@ -259,10 +245,10 @@ export default function ImportSpecModal({
                 {t('modals.importSpec.version')}:{' '}
                 {parsedResult.metadata.version}
               </p>
-              <div className="mt-3">
-                <label className="text-foreground mb-1 block text-xs font-medium">
-                  {t('modals.importSpec.baseUrl')}
-                </label>
+              <FormField
+                label={t('modals.importSpec.baseUrl')}
+                className="mt-3"
+              >
                 <Input
                   type="text"
                   variant="filled"
@@ -272,11 +258,11 @@ export default function ImportSpecModal({
                     parsedResult.metadata.base_url || 'https://api.example.com'
                   }
                 />
-              </div>
+              </FormField>
             </div>
 
             <div className="flex items-center justify-between px-1">
-              <p className="text-foreground dark:text-foreground text-sm font-medium">
+              <p className="text-foreground text-sm font-medium">
                 {t('modals.importSpec.actionsFound', {
                   count: parsedResult.actions.length,
                 })}
@@ -298,20 +284,21 @@ export default function ImportSpecModal({
               {parsedResult.actions.map((action, index) => (
                 <label
                   key={index}
-                  className="border-border dark:border-border hover:bg-muted dark:hover:bg-muted flex cursor-pointer items-start gap-3 rounded-xl border p-3 transition-colors"
+                  htmlFor={`import-spec-action-${index}`}
+                  className="border-border hover:bg-muted flex cursor-pointer items-start gap-3 rounded-xl border p-3 transition-colors"
                 >
-                  <input
-                    type="checkbox"
+                  <Checkbox
+                    id={`import-spec-action-${index}`}
                     checked={selectedActions.has(index)}
-                    onChange={() => toggleAction(index)}
-                    className="text-primary focus:ring-ring border-border mt-1 h-4 w-4 rounded"
+                    onCheckedChange={() => toggleAction(index)}
+                    className="mt-1"
                   />
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
                       <Badge variant={getMethodBadgeVariant(action.method)}>
                         {action.method.toUpperCase()}
                       </Badge>
-                      <span className="text-foreground dark:text-foreground truncate font-medium">
+                      <span className="text-foreground truncate font-medium">
                         {action.name}
                       </span>
                     </div>
diff --git a/frontend/src/modals/MCPServerModal.tsx b/frontend/src/modals/MCPServerModal.tsx
index defd6279..7afed339 100644
--- a/frontend/src/modals/MCPServerModal.tsx
+++ b/frontend/src/modals/MCPServerModal.tsx
@@ -5,11 +5,10 @@ import { useSelector } from 'react-redux';
 
 import { baseURL } from '../api/client';
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
 import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
-import { Label } from '../components/ui/label';
+import { FormField } from '../components/ui/form-field';
 import {
   Select,
   SelectContent,
@@ -20,7 +19,7 @@ import {
 import { ActiveState } from '../models/misc';
 import { selectRecentEvents } from '../notifications/notificationsSlice';
 import { selectToken } from '../preferences/preferenceSlice';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 
 interface MCPServerModalProps {
   modalState: ActiveState;
@@ -455,27 +454,20 @@ export default function MCPServerModal({
       case 'api_key':
         return (
           <div className="flex flex-col gap-4">
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="api_key">
-                {t('settings.tools.mcp.authTypes.apiKey')}
-                <span className="text-destructive">*</span>
-              </Label>
+            <FormField
+              label={t('settings.tools.mcp.authTypes.apiKey')}
+              required
+              error={errors.api_key}
+            >
               <Input
                 id="api_key"
                 type="text"
                 value={formData.api_key}
                 onChange={(e) => handleInputChange('api_key', e.target.value)}
                 placeholder={t('settings.tools.mcp.placeholders.apiKey')}
-                aria-invalid={!!errors.api_key || undefined}
               />
-              {errors.api_key && (
-                <p className="text-destructive text-xs">{errors.api_key}</p>
-              )}
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="header_name">
-                {t('settings.tools.mcp.headerName')}
-              </Label>
+            </FormField>
+            <FormField label={t('settings.tools.mcp.headerName')}>
               <Input
                 id="header_name"
                 type="text"
@@ -485,16 +477,16 @@ export default function MCPServerModal({
                 }
                 placeholder="X-API-Key"
               />
-            </div>
+            </FormField>
           </div>
         );
       case 'bearer':
         return (
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="bearer_token">
-              {t('settings.tools.mcp.authTypes.bearer')}
-              <span className="text-destructive">*</span>
-            </Label>
+          <FormField
+            label={t('settings.tools.mcp.authTypes.bearer')}
+            required
+            error={errors.bearer_token}
+          >
             <Input
               id="bearer_token"
               type="text"
@@ -503,58 +495,43 @@ export default function MCPServerModal({
                 handleInputChange('bearer_token', e.target.value)
               }
               placeholder={t('settings.tools.mcp.placeholders.bearerToken')}
-              aria-invalid={!!errors.bearer_token || undefined}
             />
-            {errors.bearer_token && (
-              <p className="text-destructive text-xs">{errors.bearer_token}</p>
-            )}
-          </div>
+          </FormField>
         );
       case 'basic':
         return (
           <div className="flex flex-col gap-4">
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="username">
-                {t('settings.tools.mcp.username')}
-                <span className="text-destructive">*</span>
-              </Label>
+            <FormField
+              label={t('settings.tools.mcp.username')}
+              required
+              error={errors.username}
+            >
               <Input
                 id="username"
                 type="text"
                 value={formData.username}
                 onChange={(e) => handleInputChange('username', e.target.value)}
                 placeholder={t('settings.tools.mcp.placeholders.username')}
-                aria-invalid={!!errors.username || undefined}
               />
-              {errors.username && (
-                <p className="text-destructive text-xs">{errors.username}</p>
-              )}
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="password">
-                {t('settings.tools.mcp.password')}
-                <span className="text-destructive">*</span>
-              </Label>
+            </FormField>
+            <FormField
+              label={t('settings.tools.mcp.password')}
+              required
+              error={errors.password}
+            >
               <Input
                 id="password"
                 type="password"
                 value={formData.password}
                 onChange={(e) => handleInputChange('password', e.target.value)}
                 placeholder={t('settings.tools.mcp.placeholders.password')}
-                aria-invalid={!!errors.password || undefined}
               />
-              {errors.password && (
-                <p className="text-destructive text-xs">{errors.password}</p>
-              )}
-            </div>
+            </FormField>
           </div>
         );
       case 'oauth':
         return (
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="oauth_scopes">
-              {t('settings.tools.mcp.placeholders.oauthScopes')}
-            </Label>
+          <FormField label={t('settings.tools.mcp.placeholders.oauthScopes')}>
             <Input
               id="oauth_scopes"
               type="text"
@@ -564,7 +541,7 @@ export default function MCPServerModal({
               }
               placeholder="read, write"
             />
-          </div>
+          </FormField>
         );
       default:
         return null;
@@ -590,242 +567,188 @@ export default function MCPServerModal({
       size="lg"
       mobileVariant="sheet"
       className="max-w-[600px] md:w-[80vw] lg:w-[60vw]"
-    >
-      <div className="flex h-full flex-col">
-        <div className="flex-1 px-6">
-          <div className="flex flex-col gap-4 px-0.5 py-4">
-            {server?.has_encrypted_credentials &&
-              formData.auth_type !== 'oauth' && (
-                <Alert variant="warning">
-                  <TriangleAlert className="size-4" aria-hidden="true" />
-                  <AlertDescription>
-                    {t('settings.tools.mcp.reenterCredentials', {
-                      defaultValue:
-                        'Re-enter your credentials to test and update the connection.',
-                    })}
-                  </AlertDescription>
-                </Alert>
-              )}
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="mcp-name">
-                {t('settings.tools.mcp.serverName')}
-                <span className="text-destructive">*</span>
-              </Label>
-              <Input
-                id="mcp-name"
-                type="text"
-                value={formData.name}
-                onChange={(e) => handleInputChange('name', e.target.value)}
-                placeholder={t('settings.tools.mcp.serverName')}
-                aria-invalid={!!errors.name || undefined}
-              />
-              {errors.name && (
-                <p className="text-destructive text-xs">{errors.name}</p>
-              )}
-            </div>
-
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="mcp-url">
-                {t('settings.tools.mcp.serverUrl')}
-                <span className="text-destructive">*</span>
-              </Label>
-              <Input
-                id="mcp-url"
-                type="text"
-                value={formData.server_url}
-                onChange={(e) =>
-                  handleInputChange('server_url', e.target.value)
-                }
-                placeholder="https://example.com/mcp"
-                aria-invalid={!!errors.server_url || undefined}
-              />
-              {errors.server_url && (
-                <p className="text-destructive text-xs">{errors.server_url}</p>
-              )}
-            </div>
-
-            <div className="flex flex-col gap-1.5">
-              <Label>{t('settings.tools.mcp.authType')}</Label>
-              <Select
-                value={formData.auth_type}
-                onValueChange={(v) => handleInputChange('auth_type', v)}
-              >
-                <SelectTrigger variant="ghost" size="lg" className="w-full">
-                  <SelectValue placeholder={t('settings.tools.mcp.authType')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {authTypes.map((type) => (
-                    <SelectItem key={type.value} value={type.value}>
-                      {type.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            {renderAuthFields()}
-
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="mcp-timeout">
-                {t('settings.tools.mcp.timeout')}
-              </Label>
-              <Input
-                id="mcp-timeout"
-                type="number"
-                value={formData.timeout}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  if (value === '') {
-                    handleInputChange('timeout', '');
-                  } else {
-                    const numValue = parseInt(value);
-                    if (!isNaN(numValue) && numValue >= 1) {
-                      handleInputChange('timeout', numValue);
-                    }
-                  }
-                }}
-                placeholder="30"
-                min={1}
-                max={300}
-                aria-invalid={!!errors.timeout || undefined}
-              />
-              {errors.timeout && (
-                <p className="text-destructive text-xs">{errors.timeout}</p>
-              )}
-            </div>
-
-            {testResult && (
-              <Alert variant={testResult.success ? 'success' : 'destructive'}>
-                {testResult.success ? (
-                  <CircleCheck className="size-4" aria-hidden="true" />
-                ) : (
-                  <CircleAlert className="size-4" aria-hidden="true" />
-                )}
-                <AlertDescription>
-                  <p>{testResult.message}</p>
-                  {testResult.authorization_url && (
-                    <a
-                      href={testResult.authorization_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        const popup = window.open(
-                          testResult.authorization_url,
-                          'oauthPopup',
-                          'width=600,height=700',
-                        );
-                        if (popup) oauthPopupRef.current = popup;
-                      }}
-                      className="mt-1.5 inline-block font-medium underline"
-                    >
-                      {t('settings.tools.mcp.openAuthPage', {
-                        defaultValue: 'Open authorization page',
-                      })}
-                    </a>
-                  )}
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {discoveredTools.length > 0 && testResult?.success && (
-              <div className="border-border rounded-xl border p-4">
-                <h4 className="text-foreground mb-2 text-sm font-medium">
-                  {t('settings.tools.mcp.discoveredTools', {
-                    count: discoveredTools.length,
-                    defaultValue: `Discovered Actions (${discoveredTools.length})`,
-                  })}
-                </h4>
-                <ul className="flex max-h-40 flex-col gap-1.5 overflow-y-auto">
-                  {discoveredTools.map((tool) => (
-                    <li
-                      key={tool.name}
-                      className="bg-muted flex items-start gap-2 rounded-lg px-3 py-2 text-sm"
-                    >
-                      <span className="text-primary mt-0.5">&#9679;</span>
-                      <div className="min-w-0">
-                        <span className="text-foreground font-medium">
-                          {tool.name}
-                        </span>
-                        {tool.description && (
-                          <p className="text-muted-foreground truncate text-xs">
-                            {tool.description}
-                          </p>
-                        )}
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-            {errors.general && (
-              <Alert variant="destructive">
-                <CircleAlert className="size-4" aria-hidden="true" />
-                <AlertDescription>{errors.general}</AlertDescription>
-              </Alert>
-            )}
-          </div>
-        </div>
-
-        <div className="px-6 py-4">
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
+      footer={
+        <ModalActions
+          footerStart={
             <Button
               type="button"
               variant="outline"
               onClick={testConnection}
-              disabled={testing}
+              loading={testing}
               size="lg"
               shape="pill"
-              className="w-full sm:w-auto"
             >
-              {testing ? (
-                <div className="flex items-center justify-center">
-                  <Spinner size="small" />
-                  <span className="ml-2">
-                    {t('settings.tools.mcp.testing')}
-                  </span>
-                </div>
-              ) : (
-                t('settings.tools.mcp.testConnection')
-              )}
+              {t('settings.tools.mcp.testConnection')}
             </Button>
+          }
+          cancelLabel={t('settings.tools.mcp.cancel')}
+          onCancel={() => {
+            setModalState('INACTIVE');
+            resetForm();
+          }}
+          submitLabel={t('settings.tools.mcp.save')}
+          onSubmit={handleSave}
+          pending={loading}
+          disabled={!saveActive}
+        />
+      }
+    >
+      <div className="flex flex-col gap-4 px-0.5 py-4">
+        {server?.has_encrypted_credentials &&
+          formData.auth_type !== 'oauth' && (
+            <Alert variant="warning">
+              <TriangleAlert className="size-4" aria-hidden="true" />
+              <AlertDescription>
+                {t('settings.tools.mcp.reenterCredentials', {
+                  defaultValue:
+                    'Re-enter your credentials to test and update the connection.',
+                })}
+              </AlertDescription>
+            </Alert>
+          )}
+        <FormField
+          label={t('settings.tools.mcp.serverName')}
+          required
+          error={errors.name}
+        >
+          <Input
+            id="mcp-name"
+            type="text"
+            value={formData.name}
+            onChange={(e) => handleInputChange('name', e.target.value)}
+            placeholder={t('settings.tools.mcp.serverName')}
+          />
+        </FormField>
 
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:gap-3">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={() => {
-                  setModalState('INACTIVE');
-                  resetForm();
-                }}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('settings.tools.mcp.cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleSave}
-                disabled={loading || !saveActive}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {loading ? (
-                  <div className="flex items-center justify-center">
-                    <Spinner size="small" />
-                    <span className="ml-2">
-                      {t('settings.tools.mcp.saving')}
+        <FormField
+          label={t('settings.tools.mcp.serverUrl')}
+          required
+          error={errors.server_url}
+        >
+          <Input
+            id="mcp-url"
+            type="text"
+            value={formData.server_url}
+            onChange={(e) => handleInputChange('server_url', e.target.value)}
+            placeholder="https://example.com/mcp"
+          />
+        </FormField>
+
+        <FormField label={t('settings.tools.mcp.authType')} id="mcp-auth-type">
+          <Select
+            value={formData.auth_type}
+            onValueChange={(v) => handleInputChange('auth_type', v)}
+          >
+            <SelectTrigger variant="ghost" size="lg" className="w-full">
+              <SelectValue placeholder={t('settings.tools.mcp.authType')} />
+            </SelectTrigger>
+            <SelectContent>
+              {authTypes.map((type) => (
+                <SelectItem key={type.value} value={type.value}>
+                  {type.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </FormField>
+
+        {renderAuthFields()}
+
+        <FormField
+          label={t('settings.tools.mcp.timeout')}
+          error={errors.timeout}
+        >
+          <Input
+            id="mcp-timeout"
+            type="number"
+            value={formData.timeout}
+            onChange={(e) => {
+              const value = e.target.value;
+              if (value === '') {
+                handleInputChange('timeout', '');
+              } else {
+                const numValue = parseInt(value);
+                if (!isNaN(numValue) && numValue >= 1) {
+                  handleInputChange('timeout', numValue);
+                }
+              }
+            }}
+            placeholder="30"
+            min={1}
+            max={300}
+          />
+        </FormField>
+
+        {testResult && (
+          <Alert variant={testResult.success ? 'success' : 'destructive'}>
+            {testResult.success ? (
+              <CircleCheck className="size-4" aria-hidden="true" />
+            ) : (
+              <CircleAlert className="size-4" aria-hidden="true" />
+            )}
+            <AlertDescription>
+              <p>{testResult.message}</p>
+              {testResult.authorization_url && (
+                <a
+                  href={testResult.authorization_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    const popup = window.open(
+                      testResult.authorization_url,
+                      'oauthPopup',
+                      'width=600,height=700',
+                    );
+                    if (popup) oauthPopupRef.current = popup;
+                  }}
+                  className="mt-1.5 inline-block font-medium underline"
+                >
+                  {t('settings.tools.mcp.openAuthPage', {
+                    defaultValue: 'Open authorization page',
+                  })}
+                </a>
+              )}
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {discoveredTools.length > 0 && testResult?.success && (
+          <div className="border-border rounded-xl border p-4">
+            <h4 className="text-foreground mb-2 text-sm font-medium">
+              {t('settings.tools.mcp.discoveredTools', {
+                count: discoveredTools.length,
+                defaultValue: `Discovered Actions (${discoveredTools.length})`,
+              })}
+            </h4>
+            <ul className="flex max-h-40 flex-col gap-1.5 overflow-y-auto">
+              {discoveredTools.map((tool) => (
+                <li
+                  key={tool.name}
+                  className="bg-muted flex items-start gap-2 rounded-lg px-3 py-2 text-sm"
+                >
+                  <span className="text-primary mt-0.5">&#9679;</span>
+                  <div className="min-w-0">
+                    <span className="text-foreground font-medium">
+                      {tool.name}
                     </span>
+                    {tool.description && (
+                      <p className="text-muted-foreground truncate text-xs">
+                        {tool.description}
+                      </p>
+                    )}
                   </div>
-                ) : (
-                  t('settings.tools.mcp.save')
-                )}
-              </Button>
-            </div>
+                </li>
+              ))}
+            </ul>
           </div>
-        </div>
+        )}
+        {errors.general && (
+          <Alert variant="destructive">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{errors.general}</AlertDescription>
+          </Alert>
+        )}
       </div>
     </Modal>
   );
diff --git a/frontend/src/modals/MoveToFolderModal.test.tsx b/frontend/src/modals/MoveToFolderModal.test.tsx
index 4b577025..d45e2941 100644
--- a/frontend/src/modals/MoveToFolderModal.test.tsx
+++ b/frontend/src/modals/MoveToFolderModal.test.tsx
@@ -190,15 +190,15 @@ describe('MoveToFolderModal', () => {
     await render('f2');
     const chevron = chevronOf('Carriers');
     expect(chevron?.getAttribute('type')).toBe('button');
-    expect(chevron?.getAttribute('data-variant')).toBe('ghost-muted');
+    expect(chevron?.getAttribute('data-variant')).toBe('ghost-on-accent');
     expect(chevron?.getAttribute('data-size')).toBe('icon-xs');
     expect(chevron?.getAttribute('aria-label')).toBe(
       'agents.folders.openFolder',
     );
     // The folder icon is decorative; the row's text names it.
-    expect(itemFor('Carriers')?.querySelector('img')?.getAttribute('alt')).toBe(
-      '',
-    );
+    expect(
+      itemFor('Carriers')?.querySelector('svg')?.getAttribute('aria-hidden'),
+    ).toBe('true');
     expect(chevron?.querySelector('svg')).not.toBeNull();
     // The chevron is the row's last child, and only rows with subfolders get one.
     expect(itemFor('Carriers')?.lastElementChild).toBe(chevron);
diff --git a/frontend/src/modals/MoveToFolderModal.tsx b/frontend/src/modals/MoveToFolderModal.tsx
index 2f3a3517..a7279dbb 100644
--- a/frontend/src/modals/MoveToFolderModal.tsx
+++ b/frontend/src/modals/MoveToFolderModal.tsx
@@ -1,11 +1,10 @@
-import { ChevronRight } from 'lucide-react';
+import { ChevronRight, Folder } from 'lucide-react';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { AgentFolder } from '../agents/types';
 import userService from '../api/services/userService';
-import FolderIcon from '../assets/folder.svg';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -279,19 +278,14 @@ export default function MoveToFolderModal({
                       className="justify-between"
                     >
                       <span className="flex flex-1 items-center gap-2">
-                        <img
-                          src={FolderIcon}
-                          alt=""
-                          aria-hidden="true"
-                          className="h-4 w-4"
-                        />
+                        <Folder className="text-primary" />
                         <span className="truncate">{folder.name}</span>
                       </span>
                       {/* Check if folder has subfolders */}
                       {folders.some((f) => f.parent_id === folder.id) && (
                         <Button
                           type="button"
-                          variant="ghost-muted"
+                          variant="ghost-on-accent"
                           size="icon-xs"
                           aria-label={t('agents.folders.openFolder')}
                           onClick={(e) => {
@@ -306,6 +300,8 @@ export default function MoveToFolderModal({
                             if (e.key === 'Enter') e.stopPropagation();
                           }}
                         >
+                          {/* text-current keeps the Button's colour: the
+                              CommandItem mutes every uncoloured svg in it. */}
                           <ChevronRight className="text-current" />
                         </Button>
                       )}
diff --git a/frontend/src/modals/RegenerateAccessTokenModal.tsx b/frontend/src/modals/RegenerateAccessTokenModal.tsx
index 7c80510b..0a8c4f04 100644
--- a/frontend/src/modals/RegenerateAccessTokenModal.tsx
+++ b/frontend/src/modals/RegenerateAccessTokenModal.tsx
@@ -9,11 +9,9 @@ import patService, {
   CreateAccessTokenResponse,
   PersonalAccessToken,
 } from '../api/services/patService';
-import Spinner from '../components/Spinner';
 import { Alert, AlertDescription } from '../components/ui/alert';
-import { Button } from '../components/ui/button';
-import { Label } from '../components/ui/label';
-import { Modal } from '../components/ui/modal';
+import { FormField } from '../components/ui/form-field';
+import { Modal, ModalActions } from '../components/ui/modal';
 import {
   Select,
   SelectContent,
@@ -91,59 +89,44 @@ export default function RegenerateAccessTokenModal({
     <Modal
       open={item !== null}
       onOpenChange={(o) => !o && handleClose()}
-      hideTitle
       title={t('settings.accessTokens.regenerate.title')}
+      description={
+        <span className="break-words">
+          {t('settings.accessTokens.regenerate.warning', {
+            name: item?.name ?? '',
+            ...NO_ESCAPE,
+          })}
+        </span>
+      }
       size="md"
       mobileVariant="sheet"
       isPerformingTask={submitting}
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleClose}
-            disabled={submitting}
-            size="lg"
-            shape="pill"
-          >
-            {t('settings.accessTokens.create.cancel')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleSubmit}
-            disabled={submitting}
-            size="lg"
-            shape="pill"
-          >
-            {submitting ? (
-              <span className="flex items-center gap-2">
-                <Spinner size="small" />
-                {t('settings.accessTokens.regenerate.submitting')}
-              </span>
-            ) : (
-              t('settings.accessTokens.regenerate.submit')
-            )}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={t('settings.accessTokens.create.cancel')}
+          onCancel={handleClose}
+          submitLabel={t('settings.accessTokens.regenerate.submit')}
+          onSubmit={handleSubmit}
+          pending={submitting}
+          cancelProps={{ disabled: submitting }}
+        />
       }
     >
       <div className="flex flex-col gap-5 px-1">
-        <div>
-          <h2 className="text-foreground text-xl font-semibold">
-            {t('settings.accessTokens.regenerate.title')}
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm break-words">
-            {t('settings.accessTokens.regenerate.warning', {
-              name: item?.name ?? '',
-              ...NO_ESCAPE,
-            })}
-          </p>
-        </div>
-
-        <div className="flex flex-col gap-1.5">
-          <Label htmlFor="pat-regenerate-expiry">
-            {t('settings.accessTokens.regenerate.newExpiration')}
-          </Label>
+        <FormField
+          id="pat-regenerate-expiry"
+          label={t('settings.accessTokens.regenerate.newExpiration')}
+          hint={
+            expiry === NO_EXPIRY
+              ? undefined
+              : t('settings.accessTokens.create.expiresOn', {
+                  date: formatDateOnly(
+                    new Date(Date.now() + expiry * DAY_MS).toISOString(),
+                  ),
+                  ...NO_ESCAPE,
+                })
+          }
+        >
           <Select
             value={String(expiry)}
             onValueChange={(value) => setExpiry(Number(value))}
@@ -170,17 +153,8 @@ export default function RegenerateAccessTokenModal({
                 {t('settings.accessTokens.create.noExpirationHint')}
               </AlertDescription>
             </Alert>
-          ) : (
-            <p className="text-muted-foreground text-xs">
-              {t('settings.accessTokens.create.expiresOn', {
-                date: formatDateOnly(
-                  new Date(Date.now() + expiry * DAY_MS).toISOString(),
-                ),
-                ...NO_ESCAPE,
-              })}
-            </p>
-          )}
-        </div>
+          ) : null}
+        </FormField>
 
         {error && (
           <p
diff --git a/frontend/src/modals/ShareConversationModal.tsx b/frontend/src/modals/ShareConversationModal.tsx
index 0883da5a..002a7fd3 100644
--- a/frontend/src/modals/ShareConversationModal.tsx
+++ b/frontend/src/modals/ShareConversationModal.tsx
@@ -1,9 +1,8 @@
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import conversationService from '../api/services/conversationService';
-import Spinner from '../components/Spinner';
 import { Button } from '../components/ui/button';
 import { Modal } from '../components/ui/modal';
 import {
@@ -13,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui/select';
+import { SettingRow } from '../components/ui/setting-row';
 import { Switch } from '../components/ui/switch';
 import { Doc } from '../models/misc';
 import {
@@ -41,6 +41,7 @@ export const ShareConversationModal = ({
   const [isCopied, setIsCopied] = useState(false);
   const [status, setStatus] = useState<StatusType>('idle');
   const [allowPrompt, setAllowPrompt] = useState<boolean>(false);
+  const promptSwitchId = useId();
 
   const sourceDocs = useSelector(selectSourceDocs);
   const preSelectedDoc = useSelector(selectSelectedDocs);
@@ -112,15 +113,16 @@ export const ShareConversationModal = ({
       contentClassName="!overflow-visible"
     >
       <div className="flex flex-col gap-2">
-        <div className="flex items-center justify-between">
-          <span className="text-foreground text-lg dark:text-white">
-            {t('modals.shareConv.option')}
-          </span>
+        <SettingRow
+          label={t('modals.shareConv.option')}
+          htmlFor={promptSwitchId}
+        >
           <Switch
+            id={promptSwitchId}
             checked={allowPrompt}
             onCheckedChange={togglePromptPermission}
           />
-        </div>
+        </SettingRow>
         {allowPrompt && (
           <div className="my-4">
             <Select
@@ -164,13 +166,13 @@ export const ShareConversationModal = ({
               type="button"
               size="lg"
               shape="pill"
-              className="my-1 w-28 justify-evenly text-center"
+              className="my-1 w-28"
+              loading={status === 'loading'}
               onClick={() => {
                 shareCoversationPublicly(allowPrompt);
               }}
             >
               {t('modals.shareConv.create')}
-              {status === 'loading' && <Spinner size="small" />}
             </Button>
           )}
         </div>
diff --git a/frontend/src/navigation/SectionIndexPage.tsx b/frontend/src/navigation/SectionIndexPage.tsx
index ba75711a..e8ef81ec 100644
--- a/frontend/src/navigation/SectionIndexPage.tsx
+++ b/frontend/src/navigation/SectionIndexPage.tsx
@@ -20,7 +20,7 @@ export default function SectionIndexPage({ section }: { section: Section }) {
 
   return (
     <div className="flex flex-col">
-      <h1 className="text-foreground dark:text-foreground text-2xl font-bold">
+      <h1 className="text-foreground text-2xl font-bold">
         {section.title ?? t(section.titleKey)}
       </h1>
       <div className="mt-6 flex flex-col gap-6">
@@ -42,15 +42,13 @@ export default function SectionIndexPage({ section }: { section: Section }) {
                   >
                     <Icon
                       className="text-muted-foreground size-5 shrink-0"
-                      strokeWidth={1.75}
                       aria-hidden
                     />
-                    <span className="text-foreground dark:text-foreground flex-1 text-sm">
+                    <span className="text-foreground flex-1 text-sm">
                       {t(item.labelKey)}
                     </span>
                     <ChevronRight
                       className="text-muted-foreground size-4 shrink-0"
-                      strokeWidth={1.75}
                       aria-hidden
                     />
                   </Link>
diff --git a/frontend/src/navigation/SectionNav.tsx b/frontend/src/navigation/SectionNav.tsx
index ec1ff63b..3064aa4a 100644
--- a/frontend/src/navigation/SectionNav.tsx
+++ b/frontend/src/navigation/SectionNav.tsx
@@ -60,12 +60,8 @@ export default function SectionNav({
           isActive && 'bg-sidebar-accent',
         )}
       >
-        <Icon
-          className="text-muted-foreground size-5 shrink-0"
-          strokeWidth={1.75}
-          aria-hidden
-        />
-        <p className="text-foreground dark:text-foreground overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
+        <Icon className="text-muted-foreground size-5 shrink-0" aria-hidden />
+        <p className="text-foreground overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
           {t(item.labelKey)}
         </p>
       </Link>
@@ -81,7 +77,6 @@ export default function SectionNav({
       >
         <ArrowLeft
           className="text-muted-foreground group-hover:text-foreground size-5 shrink-0"
-          strokeWidth={1.75}
           aria-hidden
         />
         <p className="text-muted-foreground group-hover:text-foreground text-sm">
diff --git a/frontend/src/navigation/SectionPageHeader.tsx b/frontend/src/navigation/SectionPageHeader.tsx
index 8104dd94..afeeb797 100644
--- a/frontend/src/navigation/SectionPageHeader.tsx
+++ b/frontend/src/navigation/SectionPageHeader.tsx
@@ -46,7 +46,7 @@ export function SectionBackLink({
         className,
       )}
     >
-      <ArrowLeft className="size-4 shrink-0" strokeWidth={1.75} aria-hidden />
+      <ArrowLeft className="size-4 shrink-0" aria-hidden />
       {parent ? t(parent.titleKey) : (section.title ?? t(section.titleKey))}
     </Link>
   );
@@ -70,7 +70,7 @@ export default function SectionPageHeader({
   return (
     <div className={cn('flex flex-col', className)}>
       <SectionBackLink section={section} />
-      <h1 className="text-foreground dark:text-foreground text-2xl font-bold">
+      <h1 className="text-foreground text-2xl font-bold">
         {item && section.pageTitle !== 'section'
           ? t(item.labelKey)
           : (section.title ?? t(section.titleKey))}
diff --git a/frontend/src/navigation/SectionRail.tsx b/frontend/src/navigation/SectionRail.tsx
index c62f5828..06f2a032 100644
--- a/frontend/src/navigation/SectionRail.tsx
+++ b/frontend/src/navigation/SectionRail.tsx
@@ -48,7 +48,7 @@ export default function SectionRail({
         aria-label={backLabel}
         title={backLabel}
       >
-        <ArrowLeft className="size-5" strokeWidth={1.75} />
+        <ArrowLeft className="size-5" />
       </Button>
       <div className="bg-border my-1 h-px w-6 shrink-0" aria-hidden />
       {items.map((item) => {
@@ -72,7 +72,7 @@ export default function SectionRail({
               isActive && 'bg-sidebar-accent text-foreground',
             )}
           >
-            <Icon className="size-5" strokeWidth={1.75} aria-hidden />
+            <Icon className="size-5" aria-hidden />
           </Link>
         );
       })}
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index c4da7bbe..939fd0e6 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -1,4 +1,4 @@
-import { ChevronDown } from 'lucide-react';
+import { Book, ChevronDown } from 'lucide-react';
 import { ActiveState } from '../models/misc';
 import { Input } from '../components/ui/input';
 import { Textarea } from '../components/ui/textarea';
@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { Button } from '../components/ui/button';
 import {
   DropdownMenu,
@@ -15,7 +15,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../components/ui/dropdown-menu';
-import BookIcon from '../assets/book.svg';
 import userService from '../api/services/userService';
 import { selectToken } from '../preferences/preferenceSlice';
 import { UserToolType } from '../settings/types';
@@ -307,23 +306,15 @@ const useToolVariables = () => {
 };
 
 function AddPrompt({
-  setModalState,
-  handleAddPrompt,
   newPromptName,
   setNewPromptName,
   newPromptContent,
   setNewPromptContent,
-  disableSave,
-  duplicateSourceName,
 }: {
-  setModalState: (state: ActiveState) => void;
-  handleAddPrompt?: () => void;
   newPromptName: string;
   setNewPromptName: (name: string) => void;
   newPromptContent: string;
   setNewPromptContent: (content: string) => void;
-  disableSave: boolean;
-  duplicateSourceName?: string | null;
 }) {
   const { t } = useTranslation();
   const systemVariableOptions = React.useMemo(
@@ -334,18 +325,6 @@ function AddPrompt({
 
   return (
     <div>
-      <p className="text-foreground mb-1 text-xl font-semibold">
-        {duplicateSourceName
-          ? t('modals.prompts.duplicatePrompt')
-          : t('modals.prompts.addPrompt')}
-      </p>
-      <p className="text-muted-foreground mb-6 text-sm">
-        {duplicateSourceName
-          ? t('modals.prompts.duplicateDescription', {
-              name: duplicateSourceName,
-            })
-          : t('modals.prompts.addDescription')}
-      </p>
       <div>
         <Input
           label={t('modals.prompts.promptName')}
@@ -404,71 +383,22 @@ function AddPrompt({
           />
         </div>
       </div>
-      <div className="mt-4 flex flex-col justify-between gap-4 text-sm sm:flex-row sm:gap-0">
-        <div className="flex justify-start">
-          <Link
-            to="https://docs.docsgpt.cloud/Guides/Customising-prompts"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary flex items-center gap-2 text-sm font-medium hover:underline"
-          >
-            <img
-              src={BookIcon}
-              alt=""
-              className="flex h-4 w-3 shrink-0 items-center justify-center"
-              aria-hidden="true"
-            />
-            <span className="text-sm font-bold">
-              {t('modals.prompts.learnAboutPrompts')}
-            </span>
-          </Link>
-        </div>
-
-        <div className="flex justify-end gap-2 sm:gap-4">
-          <Button
-            type="button"
-            variant="destructive-outline"
-            onClick={() => setModalState('INACTIVE')}
-            shape="pill"
-          >
-            {t('modals.prompts.cancel')}
-          </Button>
-
-          <Button
-            type="button"
-            onClick={handleAddPrompt}
-            size="lg"
-            shape="pill"
-            disabled={disableSave}
-          >
-            {t('modals.prompts.save')}
-          </Button>
-        </div>
-      </div>
     </div>
   );
 }
 
 function EditPrompt({
-  setModalState,
-  handleEditPrompt,
   editPromptName,
   setEditPromptName,
   editPromptContent,
   setEditPromptContent,
   currentPromptEdit,
-  disableSave,
-  onDuplicate,
 }: {
-  setModalState: (state: ActiveState) => void;
-  handleEditPrompt?: (id: string, type: string) => void;
   editPromptName: string;
   setEditPromptName: (name: string) => void;
   editPromptContent: string;
   setEditPromptContent: (content: string) => void;
   currentPromptEdit: { name: string; id: string; type: string };
-  disableSave: boolean;
-  onDuplicate?: () => void;
 }) {
   const { t } = useTranslation();
   const systemVariableOptions = React.useMemo(
@@ -480,20 +410,6 @@ function EditPrompt({
 
   return (
     <div>
-      <p className="text-foreground mb-1 text-xl font-semibold">
-        {t(
-          isReadOnly
-            ? 'modals.prompts.viewPrompt'
-            : 'modals.prompts.editPrompt',
-        )}
-      </p>
-      <p className="text-muted-foreground mb-6 text-sm">
-        {t(
-          isReadOnly
-            ? 'modals.prompts.viewDescription'
-            : 'modals.prompts.editDescription',
-        )}
-      </p>
       <div>
         <Input
           label={t('modals.prompts.promptName')}
@@ -556,71 +472,6 @@ function EditPrompt({
           </div>
         </div>
       )}
-      <div className="mt-4 flex flex-col justify-between gap-4 text-sm sm:flex-row sm:gap-0">
-        <div className="flex justify-start">
-          <Link
-            to="https://docs.docsgpt.cloud/Guides/Customising-prompts"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary flex items-center gap-2 text-sm font-medium hover:underline"
-          >
-            <img
-              src={BookIcon}
-              alt=""
-              className="flex h-4 w-3 shrink-0 items-center justify-center"
-              aria-hidden="true"
-            />
-            <span className="text-sm font-bold">
-              {t('modals.prompts.learnAboutPrompts')}
-            </span>
-          </Link>
-        </div>
-
-        <div className="flex justify-end gap-2 sm:gap-4">
-          <Button
-            type="button"
-            variant="destructive-outline"
-            onClick={() => setModalState('INACTIVE')}
-            shape="pill"
-          >
-            {t('modals.prompts.cancel')}
-          </Button>
-
-          {isReadOnly ? (
-            onDuplicate && (
-              <Button
-                type="button"
-                onClick={onDuplicate}
-                size="lg"
-                shape="pill"
-              >
-                {t('modals.prompts.duplicate')}
-              </Button>
-            )
-          ) : (
-            <Button
-              type="button"
-              onClick={() => {
-                handleEditPrompt &&
-                  handleEditPrompt(
-                    currentPromptEdit.id,
-                    currentPromptEdit.type,
-                  );
-              }}
-              size="lg"
-              shape="pill"
-              disabled={disableSave || !editPromptName}
-              title={
-                disableSave && editPromptName
-                  ? t('modals.prompts.nameExists')
-                  : ''
-              }
-            >
-              {t('modals.prompts.save')}
-            </Button>
-          )}
-        </div>
-      </div>
     </div>
   );
 }
@@ -689,37 +540,121 @@ export default function PromptsModal({
     newPromptContent,
   ]);
 
+  const { t } = useTranslation();
+  const isReadOnly = type === 'EDIT' && currentPromptEdit.type === 'public';
+  const closeModal = () => setModalState('INACTIVE');
+
   let view;
+  let title: string;
+  let description: string;
 
   if (type === 'ADD') {
+    title = duplicateSourceName
+      ? t('modals.prompts.duplicatePrompt')
+      : t('modals.prompts.addPrompt');
+    description = duplicateSourceName
+      ? t('modals.prompts.duplicateDescription', {
+          name: duplicateSourceName,
+        })
+      : t('modals.prompts.addDescription');
     view = (
       <AddPrompt
-        setModalState={setModalState}
-        handleAddPrompt={handleAddPrompt}
         newPromptName={newPromptName}
         setNewPromptName={setNewPromptName}
         newPromptContent={newPromptContent}
         setNewPromptContent={setNewPromptContent}
-        disableSave={disableSave}
-        duplicateSourceName={duplicateSourceName}
       />
     );
-  } else if (type === 'EDIT') {
+  } else {
+    title = t(
+      isReadOnly ? 'modals.prompts.viewPrompt' : 'modals.prompts.editPrompt',
+    );
+    description = t(
+      isReadOnly
+        ? 'modals.prompts.viewDescription'
+        : 'modals.prompts.editDescription',
+    );
     view = (
       <EditPrompt
-        setModalState={setModalState}
-        handleEditPrompt={handleEditPrompt}
         editPromptName={editPromptName}
         setEditPromptName={setEditPromptName}
         editPromptContent={editPromptContent}
         setEditPromptContent={setEditPromptContent}
         currentPromptEdit={currentPromptEdit}
-        disableSave={disableSave}
-        onDuplicate={onDuplicate}
+      />
+    );
+  }
+
+  const learnLink = (
+    <Link
+      to="https://docs.docsgpt.cloud/Guides/Customising-prompts"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-primary flex items-center gap-2 text-sm font-medium hover:underline"
+    >
+      <Book className="size-4 shrink-0" />
+      <span className="text-sm font-bold">
+        {t('modals.prompts.learnAboutPrompts')}
+      </span>
+    </Link>
+  );
+
+  let footer: React.ReactNode;
+  if (type === 'ADD') {
+    footer = (
+      <ModalActions
+        footerStart={learnLink}
+        cancelLabel={t('modals.prompts.cancel')}
+        onCancel={closeModal}
+        submitLabel={t('modals.prompts.save')}
+        onSubmit={handleAddPrompt}
+        disabled={disableSave}
+      />
+    );
+  } else if (!isReadOnly) {
+    footer = (
+      <ModalActions
+        footerStart={learnLink}
+        cancelLabel={t('modals.prompts.cancel')}
+        onCancel={closeModal}
+        submitLabel={t('modals.prompts.save')}
+        onSubmit={() =>
+          handleEditPrompt?.(currentPromptEdit.id, currentPromptEdit.type)
+        }
+        disabled={disableSave || !editPromptName}
+        submitProps={{
+          title:
+            disableSave && editPromptName ? t('modals.prompts.nameExists') : '',
+        }}
+      />
+    );
+  } else if (onDuplicate) {
+    footer = (
+      <ModalActions
+        footerStart={learnLink}
+        cancelLabel={t('modals.prompts.cancel')}
+        onCancel={closeModal}
+        submitLabel={t('modals.prompts.duplicate')}
+        onSubmit={onDuplicate}
       />
     );
   } else {
-    view = <></>;
+    // A public prompt with nothing to do but close: the link and a lone
+    // Cancel, laid out like ModalActions' footerStart.
+    footer = (
+      <>
+        <div className="flex flex-col sm:mr-auto">{learnLink}</div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="lg"
+          shape="pill"
+          onClick={closeModal}
+        >
+          {t('modals.prompts.cancel')}
+        </Button>
+      </>
+    );
   }
 
   return (
@@ -734,16 +669,9 @@ export default function PromptsModal({
           }
         }
       }}
-      hideTitle
-      title={
-        type === 'ADD'
-          ? duplicateSourceName
-            ? 'Duplicate Prompt'
-            : 'Add Prompt'
-          : currentPromptEdit.type === 'public'
-            ? 'View Prompt'
-            : 'Edit Prompt'
-      }
+      title={title}
+      description={description}
+      footer={footer}
       size="lg"
       mobileVariant="sheet"
       className="w-[95vw] max-w-[650px] md:max-w-[860px] lg:max-w-[980px]"
diff --git a/frontend/src/settings/Analytics.tsx b/frontend/src/settings/Analytics.tsx
index 38ad8670..ed66c236 100644
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -461,10 +461,10 @@ export default function Analytics({ agentId }: AnalyticsProps) {
           <div
             key={card.label}
             title={card.hint}
-            className={`border-border dark:border-border rounded-2xl border px-6 py-5 ${card.hint ? 'cursor-help' : ''}`}
+            className={`border-border rounded-2xl border px-6 py-5 ${card.hint ? 'cursor-help' : ''}`}
           >
             <p className="text-muted-foreground text-sm">{card.label}</p>
-            <p className="text-foreground dark:text-foreground mt-1 text-2xl font-bold">
+            <p className="text-foreground mt-1 text-2xl font-bold">
               {card.value}
             </p>
           </div>
@@ -473,9 +473,9 @@ export default function Analytics({ agentId }: AnalyticsProps) {
 
       {/* Messages Analytics */}
       <div className="mt-4 flex w-full flex-col gap-3 [@media(min-width:1080px)]:flex-row">
-        <div className="border-border dark:border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
+        <div className="border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
           <div className="flex flex-row items-center justify-start gap-3">
-            <p className="text-foreground dark:text-foreground font-bold">
+            <p className="text-foreground font-bold">
               {t('settings.analytics.messages')}
             </p>
           </div>
@@ -511,9 +511,9 @@ export default function Analytics({ agentId }: AnalyticsProps) {
         </div>
 
         {/* Token Usage Analytics */}
-        <div className="border-border dark:border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
+        <div className="border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
           <div className="flex flex-row flex-wrap items-center justify-start gap-3">
-            <p className="text-foreground dark:text-foreground font-bold">
+            <p className="text-foreground font-bold">
               {t('settings.analytics.tokenUsage')}
             </p>
             <Select
@@ -567,9 +567,9 @@ export default function Analytics({ agentId }: AnalyticsProps) {
 
       {/* Scheduled runs + tool usage */}
       <div className="mt-4 flex w-full flex-col gap-3 [@media(min-width:1080px)]:flex-row">
-        <div className="border-border dark:border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
+        <div className="border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
           <div className="flex flex-row items-center justify-start gap-3">
-            <p className="text-foreground dark:text-foreground font-bold">
+            <p className="text-foreground font-bold">
               {t('settings.analytics.scheduledRuns')}
             </p>
           </div>
@@ -620,9 +620,9 @@ export default function Analytics({ agentId }: AnalyticsProps) {
           </div>
         </div>
 
-        <div className="border-border dark:border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
+        <div className="border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
           <div className="flex flex-row items-center justify-start gap-3">
-            <p className="text-foreground dark:text-foreground font-bold">
+            <p className="text-foreground font-bold">
               {t('settings.analytics.toolUsage')}
             </p>
           </div>
@@ -665,9 +665,9 @@ export default function Analytics({ agentId }: AnalyticsProps) {
 
       {/* Feedback Analytics */}
       <div className="mt-4 flex w-full flex-col gap-3">
-        <div className="border-border dark:border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5">
+        <div className="border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5">
           <div className="flex flex-row items-center justify-start gap-3">
-            <p className="text-foreground dark:text-foreground font-bold">
+            <p className="text-foreground font-bold">
               {t('settings.analytics.userFeedback')}
             </p>
           </div>
diff --git a/frontend/src/settings/ConvertToWikiModal.tsx b/frontend/src/settings/ConvertToWikiModal.tsx
index 2eb5c683..a6f00c06 100644
--- a/frontend/src/settings/ConvertToWikiModal.tsx
+++ b/frontend/src/settings/ConvertToWikiModal.tsx
@@ -1,13 +1,13 @@
 import { CircleAlert, CircleCheck } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState, Doc } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 
@@ -126,63 +126,68 @@ export default function ConvertToWikiModal({
     fail(start.message);
   };
 
+  let footer: ReactNode = null;
+  if (phase === 'confirm') {
+    footer = (
+      <ModalActions
+        cancelLabel={t('cancel')}
+        onCancel={closeModal}
+        submitLabel={t('settings.sources.wiki.convert.confirm')}
+        onSubmit={handleConvert}
+      />
+    );
+  } else if (phase === 'summary' && summary) {
+    footer = (
+      <Button type="button" onClick={closeModal} size="lg" shape="pill">
+        {t('settings.sources.wiki.convert.done')}
+      </Button>
+    );
+  } else if (phase === 'error') {
+    footer = (
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={closeModal}
+        size="lg"
+        shape="pill"
+      >
+        {t('cancel')}
+      </Button>
+    );
+  }
+
   return (
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && closeModal()}
-      hideTitle
       title={t('settings.sources.wiki.convert.title')}
+      description={
+        phase === 'confirm'
+          ? document?.name
+            ? t('settings.sources.wiki.convert.intro', {
+                name: document.name,
+              })
+            : t('settings.sources.wiki.convert.introGeneric')
+          : undefined
+      }
+      footer={footer}
       size="md"
       mobileVariant="sheet"
       className="max-w-[480px]"
       isPerformingTask={phase === 'converting'}
     >
       <div className="flex flex-col gap-5 px-1 py-1">
-        <h2 className="text-foreground text-xl font-semibold">
-          {t('settings.sources.wiki.convert.title')}
-        </h2>
-
         {phase === 'confirm' && (
-          <>
-            <p className="text-muted-foreground text-sm">
-              {document?.name
-                ? t('settings.sources.wiki.convert.intro', {
-                    name: document.name,
-                  })
-                : t('settings.sources.wiki.convert.introGeneric')}
-            </p>
-            <ul className="text-muted-foreground list-disc space-y-1.5 pl-5 text-sm">
-              <li>{t('settings.sources.wiki.convert.costReparse')}</li>
-              <li>{t('settings.sources.wiki.convert.costSkipped')}</li>
-              <li>{t('settings.sources.wiki.convert.costIrreversible')}</li>
-            </ul>
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleConvert}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('settings.sources.wiki.convert.confirm')}
-              </Button>
-            </div>
-          </>
+          <ul className="text-muted-foreground list-disc space-y-1.5 pl-5 text-sm">
+            <li>{t('settings.sources.wiki.convert.costReparse')}</li>
+            <li>{t('settings.sources.wiki.convert.costSkipped')}</li>
+            <li>{t('settings.sources.wiki.convert.costIrreversible')}</li>
+          </ul>
         )}
 
         {phase === 'converting' && (
           <div className="flex flex-col items-center gap-3 py-6">
-            <Spinner size="medium" />
+            <Spinner />
             <p className="text-muted-foreground text-sm">
               {t('settings.sources.wiki.convert.inProgress')}
             </p>
@@ -219,39 +224,14 @@ export default function ConvertToWikiModal({
                 </ul>
               </div>
             )}
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                onClick={closeModal}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('settings.sources.wiki.convert.done')}
-              </Button>
-            </div>
           </>
         )}
 
         {phase === 'error' && (
-          <>
-            <Alert variant="destructive">
-              <CircleAlert className="size-4" aria-hidden="true" />
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('cancel')}
-              </Button>
-            </div>
-          </>
+          <Alert variant="destructive">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
         )}
       </div>
     </Modal>
diff --git a/frontend/src/settings/CustomModels.tsx b/frontend/src/settings/CustomModels.tsx
index 511f4808..5e506565 100644
--- a/frontend/src/settings/CustomModels.tsx
+++ b/frontend/src/settings/CustomModels.tsx
@@ -1,23 +1,15 @@
-import { Globe, Search as SearchIcon, Tag, Trash } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
+import { Globe, Pencil, Search as SearchIcon, Tag, Trash } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import customModelsService from '../api/services/customModelsService';
 import modelService from '../api/services/modelService';
-import Edit from '../assets/edit.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
-import ThreeDotsIcon from '../assets/three-dots.svg';
 import SkeletonLoader from '../components/SkeletonLoader';
 import { Button } from '../components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
 import { Input } from '../components/ui/input';
 import { useDarkTheme, useLoaderState } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
@@ -30,15 +22,6 @@ import {
 
 import type { CustomModel } from '../models/types';
 
-type CustomModelMenuOption = {
-  icon: string | LucideIcon;
-  label: string;
-  onClick: () => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-};
-
 const formatBaseUrlHost = (baseUrl: string): string => {
   if (!baseUrl) return '';
   try {
@@ -143,22 +126,18 @@ export default function CustomModels() {
     }
   };
 
-  const getMenuOptions = (model: CustomModel): CustomModelMenuOption[] => [
+  const getMenuOptions = (model: CustomModel): MenuOption[] => [
     {
-      icon: Edit,
+      icon: Pencil,
       label: t('settings.customModels.actions.edit'),
       onClick: () => openEditModal(model),
       variant: 'default',
-      iconWidth: 14,
-      iconHeight: 14,
     },
     {
       icon: Trash,
       label: t('settings.customModels.actions.delete'),
       onClick: () => requestDelete(model),
       variant: 'destructive',
-      iconWidth: 16,
-      iconHeight: 16,
     },
   ];
 
@@ -201,12 +180,7 @@ export default function CustomModels() {
               onChange={(e) => setSearchTerm(e.target.value)}
               labelSurface="background"
               shape="pill"
-              leftIcon={
-                <SearchIcon
-                  className="text-muted-foreground size-4"
-                  strokeWidth={1.75}
-                />
-              }
+              leftIcon={<SearchIcon className="text-muted-foreground size-4" />}
             />
           </div>
           <Button
@@ -218,7 +192,7 @@ export default function CustomModels() {
             {t('settings.customModels.addModel')}
           </Button>
         </div>
-        <div className="border-border dark:border-border mt-5 mb-8 border-b" />
+        <div className="border-border mt-5 mb-8 border-b" />
         {loading ? (
           <div className="flex flex-wrap justify-center gap-4 sm:justify-start">
             <SkeletonLoader component="toolCards" count={3} />
@@ -232,71 +206,18 @@ export default function CustomModels() {
                     key={model.id}
                     className="bg-muted hover:bg-accent relative flex w-[300px] flex-col overflow-hidden rounded-2xl p-5"
                   >
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          type="button"
-                          onClick={(e) => e.stopPropagation()}
-                          className="absolute top-3 right-3 z-10 cursor-pointer"
-                          aria-label={t(
-                            'settings.customModels.actionsMenuAria',
-                            { modelName: model.display_name },
-                          )}
-                        >
-                          <img
-                            src={ThreeDotsIcon}
-                            alt={t('settings.customModels.actionsMenuAria', {
-                              modelName: model.display_name,
-                            })}
-                            className="h-[19px] w-[19px]"
-                          />
-                        </button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent
-                        align="end"
-                        className="min-w-[144px]"
-                      >
-                        {getMenuOptions(model).map((option, index) => {
-                          const IconCmp =
-                            typeof option.icon !== 'string'
-                              ? option.icon
-                              : null;
-                          return (
-                            <DropdownMenuItem
-                              key={index}
-                              variant={option.variant}
-                              onSelect={() => option.onClick()}
-                            >
-                              {typeof option.icon === 'string' ? (
-                                <img
-                                  src={option.icon}
-                                  alt=""
-                                  width={option.iconWidth ?? 16}
-                                  height={option.iconHeight ?? 16}
-                                />
-                              ) : (
-                                IconCmp && (
-                                  <IconCmp
-                                    size={Math.max(
-                                      option.iconWidth ?? 16,
-                                      option.iconHeight ?? 16,
-                                    )}
-                                    strokeWidth={1.75}
-                                    aria-hidden="true"
-                                  />
-                                )
-                              )}
-                              <span>{option.label}</span>
-                            </DropdownMenuItem>
-                          );
-                        })}
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+                    <ActionMenu
+                      options={getMenuOptions(model)}
+                      triggerLabel={t('settings.customModels.actionsMenuAria', {
+                        modelName: model.display_name,
+                      })}
+                      className="absolute top-3 right-3 z-10"
+                    />
                     <div className="w-full pr-7">
                       <div className="flex items-center gap-2">
                         <p
                           title={model.display_name}
-                          className="text-foreground dark:text-foreground truncate text-sm leading-snug font-semibold"
+                          className="text-foreground truncate text-sm leading-snug font-semibold"
                         >
                           {model.display_name}
                         </p>
diff --git a/frontend/src/settings/EnableGraphRAGModal.tsx b/frontend/src/settings/EnableGraphRAGModal.tsx
index b2948791..920804e5 100644
--- a/frontend/src/settings/EnableGraphRAGModal.tsx
+++ b/frontend/src/settings/EnableGraphRAGModal.tsx
@@ -1,13 +1,13 @@
 import { CircleAlert, CircleCheck } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { Progress } from '../components/ui/progress';
 import { ActiveState, Doc } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -199,31 +199,59 @@ export default function EnableGraphRAGModal({
       ? Math.min(100, Math.round((build.current / build.total) * 100))
       : null;
 
+  let footer: ReactNode = null;
+  if (phase === 'confirm') {
+    footer = (
+      <ModalActions
+        cancelLabel={t('cancel')}
+        onCancel={closeModal}
+        submitLabel={t('settings.sources.graphrag.enable.confirm')}
+        onSubmit={handleEnable}
+      />
+    );
+  } else if (phase === 'summary' && summary) {
+    footer = (
+      <Button type="button" onClick={closeModal} size="lg" shape="pill">
+        {t('settings.sources.graphrag.enable.done')}
+      </Button>
+    );
+  } else if (phase === 'error') {
+    footer = (
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={closeModal}
+        size="lg"
+        shape="pill"
+      >
+        {t('cancel')}
+      </Button>
+    );
+  }
+
   return (
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && closeModal()}
-      hideTitle
       title={t('settings.sources.graphrag.enable.title')}
+      description={
+        phase === 'confirm'
+          ? document?.name
+            ? t('settings.sources.graphrag.enable.intro', {
+                name: document.name,
+              })
+            : t('settings.sources.graphrag.enable.introGeneric')
+          : undefined
+      }
+      footer={footer}
       size="md"
       mobileVariant="sheet"
       className="max-w-[480px]"
       isPerformingTask={phase === 'building'}
     >
       <div className="flex flex-col gap-5 px-1 py-1">
-        <h2 className="text-foreground text-xl font-semibold">
-          {t('settings.sources.graphrag.enable.title')}
-        </h2>
-
         {phase === 'confirm' && (
           <>
-            <p className="text-muted-foreground text-sm">
-              {document?.name
-                ? t('settings.sources.graphrag.enable.intro', {
-                    name: document.name,
-                  })
-                : t('settings.sources.graphrag.enable.introGeneric')}
-            </p>
             <ul className="text-muted-foreground list-disc space-y-1.5 pl-5 text-sm">
               <li>{t('settings.sources.graphrag.enable.costExtraction')}</li>
               <li>{t('settings.sources.graphrag.enable.costCost')}</li>
@@ -234,33 +262,12 @@ export default function EnableGraphRAGModal({
                 hi: estimate.hi.toLocaleString(),
               })}
             </div>
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleEnable}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('settings.sources.graphrag.enable.confirm')}
-              </Button>
-            </div>
           </>
         )}
 
         {phase === 'building' && (
           <div className="flex flex-col items-center gap-3 py-6">
-            <Spinner size="medium" />
+            <Spinner />
             <p className="text-muted-foreground text-sm">
               {progressPct !== null
                 ? t('settings.sources.graphrag.enable.inProgressPct', {
@@ -275,56 +282,29 @@ export default function EnableGraphRAGModal({
         )}
 
         {phase === 'summary' && summary && (
-          <>
-            <Alert variant="success">
-              <CircleCheck className="size-4" aria-hidden="true" />
-              <AlertDescription>
-                {[
-                  t('settings.sources.graphrag.enable.summaryNodes', {
-                    count: summary.nodes,
-                  }),
-                  t('settings.sources.graphrag.enable.summaryEdges', {
-                    count: summary.edges,
-                  }),
-                  t('settings.sources.graphrag.enable.summaryChunks', {
-                    count: summary.chunksProcessed,
-                  }),
-                ].join(' · ')}
-              </AlertDescription>
-            </Alert>
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                onClick={closeModal}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('settings.sources.graphrag.enable.done')}
-              </Button>
-            </div>
-          </>
+          <Alert variant="success">
+            <CircleCheck className="size-4" aria-hidden="true" />
+            <AlertDescription>
+              {[
+                t('settings.sources.graphrag.enable.summaryNodes', {
+                  count: summary.nodes,
+                }),
+                t('settings.sources.graphrag.enable.summaryEdges', {
+                  count: summary.edges,
+                }),
+                t('settings.sources.graphrag.enable.summaryChunks', {
+                  count: summary.chunksProcessed,
+                }),
+              ].join(' · ')}
+            </AlertDescription>
+          </Alert>
         )}
 
         {phase === 'error' && (
-          <>
-            <Alert variant="destructive">
-              <CircleAlert className="size-4" aria-hidden="true" />
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('cancel')}
-              </Button>
-            </div>
-          </>
+          <Alert variant="destructive">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
         )}
       </div>
     </Modal>
diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
index bc4ab285..eb80bb85 100644
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -74,7 +74,7 @@ export default function General() {
         />
       </div>
       <div className="flex flex-col gap-4">
-        <label className="text-foreground dark:text-foreground text-base font-medium">
+        <label className="text-foreground text-base font-medium">
           {t('settings.general.selectTheme')}
         </label>
         <Select
@@ -97,7 +97,7 @@ export default function General() {
         </Select>
       </div>
       <div className="flex flex-col gap-4">
-        <label className="text-foreground dark:text-foreground text-base font-medium">
+        <label className="text-foreground text-base font-medium">
           {t('settings.general.selectLanguage')}
         </label>
         <Select
@@ -119,7 +119,7 @@ export default function General() {
           </SelectContent>
         </Select>
       </div>
-      <hr className="border-border dark:border-border my-4 w-[calc(min(665px,100%))] border-t" />
+      <hr className="border-border my-4 w-[calc(min(665px,100%))] border-t" />
       <div className="flex flex-col gap-2">
         <Button
           type="button"
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index e50d52d5..9d6a3ae9 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -1,10 +1,9 @@
-import { Activity } from 'lucide-react';
+import { Activity, ChevronRight } from 'lucide-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import ChevronRight from '../assets/chevron-right.svg';
 import CopyButton from '../components/CopyButton';
 import SkeletonLoader from '../components/SkeletonLoader';
 import { Button } from '../components/ui/button';
@@ -441,10 +440,8 @@ function Log({
           isOpen && 'bg-muted rounded-t-xl',
         )}
       >
-        <img
-          src={ChevronRight}
-          alt="Expand log entry"
-          className={`mt-[3px] h-3 w-3 transition duration-300 dark:invert ${isOpen ? 'rotate-90' : ''}`}
+        <ChevronRight
+          className={`text-muted-foreground mt-[3px] size-3 transition duration-300 ${isOpen ? 'rotate-90' : ''}`}
         />
         <span className="flex flex-row flex-wrap gap-2">
           <h2 className="text-muted-foreground text-xs">{`${log.timestamp}`}</h2>
diff --git a/frontend/src/settings/PairDeviceModal.tsx b/frontend/src/settings/PairDeviceModal.tsx
index 04ba127a..01d04757 100644
--- a/frontend/src/settings/PairDeviceModal.tsx
+++ b/frontend/src/settings/PairDeviceModal.tsx
@@ -12,7 +12,7 @@ import CopyButton from '../components/CopyButton';
 import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import {
   Select,
   SelectContent,
@@ -235,25 +235,17 @@ export default function PairDeviceModal({
   const footer = (() => {
     if (stage === 'form') {
       return (
-        <>
-          <Button variant="ghost" shape="pill" onClick={close}>
-            {t('settings.devices.pairing.cancel')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleStart}
-            disabled={submitting}
-            shape="pill"
-          >
-            {submitting
-              ? t('settings.devices.pairing.starting')
-              : t('settings.devices.pairing.start')}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={t('settings.devices.pairing.cancel')}
+          onCancel={close}
+          submitLabel={t('settings.devices.pairing.start')}
+          onSubmit={handleStart}
+          pending={submitting}
+        />
       );
     }
     return (
-      <Button variant="ghost" shape="pill" onClick={close}>
+      <Button variant="ghost" size="lg" shape="pill" onClick={close}>
         {t('settings.devices.pairing.cancel')}
       </Button>
     );
diff --git a/frontend/src/settings/PersonalAccessTokens.tsx b/frontend/src/settings/PersonalAccessTokens.tsx
index 92575c24..4ecb2725 100644
--- a/frontend/src/settings/PersonalAccessTokens.tsx
+++ b/frontend/src/settings/PersonalAccessTokens.tsx
@@ -54,7 +54,7 @@ function ScopeChips({ scopes }: { scopes: string[] }) {
       {visible.map((scope) => (
         <span
           key={scope}
-          className="bg-muted text-foreground dark:text-foreground rounded-full px-2 py-0.5 font-mono text-xs leading-4 whitespace-nowrap"
+          className="bg-muted text-foreground rounded-full px-2 py-0.5 font-mono text-xs leading-4 whitespace-nowrap"
         >
           {scope}
         </span>
@@ -283,9 +283,7 @@ export default function PersonalAccessTokens() {
   const mobileField = (label: string, value: React.ReactNode) => (
     <div className="flex items-start justify-between gap-4 text-sm">
       <span className="text-muted-foreground shrink-0">{label}</span>
-      <span className="text-foreground dark:text-foreground min-w-0 text-right">
-        {value}
-      </span>
+      <span className="text-foreground min-w-0 text-right">{value}</span>
     </div>
   );
 
@@ -336,7 +334,7 @@ export default function PersonalAccessTokens() {
           </Alert>
         )}
 
-        <div className="border-border dark:border-border mt-5 mb-8 border-b" />
+        <div className="border-border mt-5 mb-8 border-b" />
 
         {loading ? (
           <SkeletonLoader component="default" />
@@ -377,7 +375,7 @@ export default function PersonalAccessTokens() {
                     <TableRow key={item.id}>
                       <TableCell className="max-w-[220px]">
                         <p
-                          className="text-foreground dark:text-foreground truncate font-medium"
+                          className="text-foreground truncate font-medium"
                           title={item.name}
                         >
                           {item.name}
@@ -423,7 +421,7 @@ export default function PersonalAccessTokens() {
                   <div className="flex items-start justify-between gap-3">
                     <div className="min-w-0">
                       <p
-                        className="text-foreground dark:text-foreground truncate text-sm font-semibold"
+                        className="text-foreground truncate text-sm font-semibold"
                         title={item.name}
                       >
                         {item.name}
diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx
index 2a947c6d..9c21b483 100644
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -363,10 +363,8 @@ export default function Prompts({
                           <div className="flex shrink-0 items-center gap-1">
                             <Button
                               type="button"
-                              variant="ghost-muted"
+                              variant="ghost-on-accent"
                               size="icon-xs"
-                              /* eslint-disable-next-line shadcn/no-restyle -- the row is already bg-accent while cmdk highlights it, so ghost's accent hover would be invisible; a foreground (or destructive) tint shows on it */
-                              className="hover:bg-foreground/15 dark:hover:bg-foreground/20"
                               onClick={(e) => {
                                 e.stopPropagation();
                                 openEditModal(prompt);
@@ -376,32 +374,28 @@ export default function Prompts({
                               }
                             >
                               {canModify ? (
-                                <Pencil className="h-3.5 w-3.5 text-current" />
+                                <Pencil className="text-current" />
                               ) : (
-                                <Eye className="h-3.5 w-3.5 text-current" />
+                                <Eye className="text-current" />
                               )}
                             </Button>
                             <Button
                               type="button"
-                              variant="ghost-muted"
+                              variant="ghost-on-accent"
                               size="icon-xs"
-                              /* eslint-disable-next-line shadcn/no-restyle -- the row is already bg-accent while cmdk highlights it, so ghost's accent hover would be invisible; a foreground (or destructive) tint shows on it */
-                              className="hover:bg-foreground/15 dark:hover:bg-foreground/20"
                               onClick={(e) => {
                                 e.stopPropagation();
                                 handleDuplicatePrompt(prompt);
                               }}
                               aria-label="Duplicate prompt"
                             >
-                              <Copy className="h-3.5 w-3.5 text-current" />
+                              <Copy className="text-current" />
                             </Button>
                             {canShare && (
                               <Button
                                 type="button"
-                                variant="ghost-muted"
+                                variant="ghost-on-accent"
                                 size="icon-xs"
-                                /* eslint-disable-next-line shadcn/no-restyle -- the row is already bg-accent while cmdk highlights it, so ghost's accent hover would be invisible; a foreground (or destructive) tint shows on it */
-                                className="hover:bg-foreground/15 dark:hover:bg-foreground/20"
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   setOpen(false);
@@ -413,23 +407,21 @@ export default function Prompts({
                                 aria-label={t('agents.shareWithTeam')}
                                 title={t('agents.shareWithTeam')}
                               >
-                                <Users className="h-3.5 w-3.5 text-current" />
+                                <Users className="text-current" />
                               </Button>
                             )}
                             {canModify && (
                               <Button
                                 type="button"
-                                variant="ghost-destructive"
+                                variant="ghost-destructive-on-accent"
                                 size="icon-xs"
-                                /* eslint-disable-next-line shadcn/no-restyle -- the row is already bg-accent while cmdk highlights it, so ghost's accent hover would be invisible; a foreground (or destructive) tint shows on it */
-                                className="hover:bg-destructive/15 dark:hover:bg-destructive/25"
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   handleDeletePrompt(prompt.id);
                                 }}
                                 aria-label="Delete prompt"
                               >
-                                <Trash2 className="h-3.5 w-3.5 text-current" />
+                                <Trash2 className="text-current" />
                               </Button>
                             )}
                           </div>
diff --git a/frontend/src/settings/RemoteDeviceConfig.tsx b/frontend/src/settings/RemoteDeviceConfig.tsx
index f334f6ca..4ded9cf6 100644
--- a/frontend/src/settings/RemoteDeviceConfig.tsx
+++ b/frontend/src/settings/RemoteDeviceConfig.tsx
@@ -9,7 +9,7 @@ import devicesService, {
   Device,
 } from '../api/services/devicesService';
 import CopyButton from '../components/CopyButton';
-import Spinner from '../components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import ToolIcon from '../components/ToolIcon';
 import DetailBreadcrumb from '../navigation/DetailBreadcrumb';
 import {
@@ -189,7 +189,7 @@ export default function RemoteDeviceConfig({ tool, handleGoBack }: Props) {
   if (loading && !device) {
     return (
       <div className="mt-8 flex items-center justify-center py-16">
-        <Spinner size="large" />
+        <Spinner size="lg" />
       </div>
     );
   }
@@ -209,9 +209,10 @@ export default function RemoteDeviceConfig({ tool, handleGoBack }: Props) {
           size="sm"
           shape="pill"
           onClick={handleSaveChanges}
-          disabled={!hasUnsavedChanges || saving || loading}
+          disabled={!hasUnsavedChanges || loading}
+          loading={saving}
         >
-          {saving ? t('settings.tools.saving') : t('settings.tools.save')}
+          {t('settings.tools.save')}
         </Button>
       </div>
 
diff --git a/frontend/src/settings/SourceConfigModal.tsx b/frontend/src/settings/SourceConfigModal.tsx
index 64c4c19e..347bb255 100644
--- a/frontend/src/settings/SourceConfigModal.tsx
+++ b/frontend/src/settings/SourceConfigModal.tsx
@@ -4,10 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
 import { Alert, AlertDescription } from '../components/ui/alert';
-import { Button } from '../components/ui/button';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState, Doc } from '../models/misc';
 import type { Model } from '../models/types';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -143,144 +141,94 @@ export default function SourceConfigModal({
   // The backend rejects an incoherent prescreen config; block save up-front.
   const prescreenValid = isPrescreenConfigValid(options);
 
+  const footer = reingestPrompt ? (
+    <ModalActions
+      cancelLabel={t('settings.sources.configModal.reingestLater')}
+      onCancel={closeModal}
+      submitLabel={t('settings.sources.reingest')}
+      onSubmit={handleConfirmReingest}
+    />
+  ) : (
+    <ModalActions
+      cancelLabel={t('cancel')}
+      onCancel={closeModal}
+      cancelProps={{ disabled: saving }}
+      submitLabel={t('settings.sources.configModal.save')}
+      onSubmit={handleSave}
+      pending={saving}
+      disabled={isReadOnly || !hasChanges || !prescreenValid}
+    />
+  );
+
   return (
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && closeModal()}
-      hideTitle
       title={t('settings.sources.configModal.title')}
+      description={
+        document?.name
+          ? t('settings.sources.configModal.subtitle', {
+              name: document.name,
+            })
+          : t('settings.sources.configModal.subtitleGeneric')
+      }
+      footer={footer}
       size="lg"
       mobileVariant="sheet"
       className="max-h-[90vh] max-w-[600px] md:w-[80vw] lg:w-[60vw]"
       contentClassName="max-h-[80vh]"
       isPerformingTask={saving}
     >
-      <div className="flex h-full flex-col">
-        <div className="px-2 py-2">
-          <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-            {t('settings.sources.configModal.title')}
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm">
-            {document?.name
-              ? t('settings.sources.configModal.subtitle', {
-                  name: document.name,
-                })
-              : t('settings.sources.configModal.subtitleGeneric')}
-          </p>
-        </div>
-
-        <div className="flex-1 px-2">
-          {reingestPrompt ? (
-            <div className="flex flex-col gap-4 px-0.5 py-4">
+      <div>
+        {reingestPrompt ? (
+          <div className="flex flex-col gap-4 px-0.5 py-4">
+            <Alert variant="warning">
+              <TriangleAlert className="size-4" aria-hidden="true" />
+              <AlertDescription>
+                {t('settings.sources.configModal.reingestRequired')}
+              </AlertDescription>
+            </Alert>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4 px-0.5 py-4">
+            {isReadOnly && (
+              <div className="bg-muted text-muted-foreground rounded-xl p-3 text-sm">
+                {t('settings.sources.configModal.readOnly')}
+              </div>
+            )}
+            <RetrievalOptions
+              value={options}
+              onChange={setOptions}
+              alwaysOpen
+              disabled={isReadOnly}
+              hybridAvailable={hybridAvailable}
+              graphRAGAvailable={graphRAGAvailable}
+              availableModels={availableModels}
+            />
+            {willRequireReingest && !isReadOnly && (
               <Alert variant="warning">
                 <TriangleAlert className="size-4" aria-hidden="true" />
                 <AlertDescription>
-                  {t('settings.sources.configModal.reingestRequired')}
+                  {t('settings.sources.configModal.chunkingChangeHint')}
                 </AlertDescription>
               </Alert>
-            </div>
-          ) : (
-            <div className="flex flex-col gap-4 px-0.5 py-4">
-              {isReadOnly && (
-                <div className="bg-muted text-muted-foreground rounded-xl p-3 text-sm">
-                  {t('settings.sources.configModal.readOnly')}
-                </div>
-              )}
-              <RetrievalOptions
-                value={options}
-                onChange={setOptions}
-                alwaysOpen
-                disabled={isReadOnly}
-                hybridAvailable={hybridAvailable}
-                graphRAGAvailable={graphRAGAvailable}
-                availableModels={availableModels}
-              />
-              {willRequireReingest && !isReadOnly && (
-                <Alert variant="warning">
-                  <TriangleAlert className="size-4" aria-hidden="true" />
-                  <AlertDescription>
-                    {t('settings.sources.configModal.chunkingChangeHint')}
-                  </AlertDescription>
-                </Alert>
-              )}
-              {!prescreenValid && !isReadOnly && (
-                <Alert variant="warning">
-                  <TriangleAlert className="size-4" aria-hidden="true" />
-                  <AlertDescription>
-                    {t('settings.sources.configModal.prescreenInvalidHint')}
-                  </AlertDescription>
-                </Alert>
-              )}
-              {error && (
-                <Alert variant="destructive">
-                  <CircleAlert className="size-4" aria-hidden="true" />
-                  <AlertDescription>{error}</AlertDescription>
-                </Alert>
-              )}
-            </div>
-          )}
-        </div>
-
-        <div className="px-2 py-4">
-          {reingestPrompt ? (
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end sm:gap-3">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('settings.sources.configModal.reingestLater')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleConfirmReingest}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('settings.sources.reingest')}
-              </Button>
-            </div>
-          ) : (
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end sm:gap-3">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                disabled={saving}
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {t('cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleSave}
-                disabled={
-                  saving || isReadOnly || !hasChanges || !prescreenValid
-                }
-                size="lg"
-                shape="pill"
-                className="w-full sm:w-auto"
-              >
-                {saving ? (
-                  <div className="flex items-center justify-center">
-                    <Spinner size="small" />
-                    <span className="ml-2">
-                      {t('settings.sources.configModal.saving')}
-                    </span>
-                  </div>
-                ) : (
-                  t('settings.sources.configModal.save')
-                )}
-              </Button>
-            </div>
-          )}
-        </div>
+            )}
+            {!prescreenValid && !isReadOnly && (
+              <Alert variant="warning">
+                <TriangleAlert className="size-4" aria-hidden="true" />
+                <AlertDescription>
+                  {t('settings.sources.configModal.prescreenInvalidHint')}
+                </AlertDescription>
+              </Alert>
+            )}
+            {error && (
+              <Alert variant="destructive">
+                <CircleAlert className="size-4" aria-hidden="true" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+          </div>
+        )}
       </div>
     </Modal>
   );
diff --git a/frontend/src/settings/Sources.tsx b/frontend/src/settings/Sources.tsx
index a72f0be4..b8b16c1e 100644
--- a/frontend/src/settings/Sources.tsx
+++ b/frontend/src/settings/Sources.tsx
@@ -1,11 +1,15 @@
 import {
   BookOpen,
+  CalendarIcon,
+  Eye,
+  HardDrive,
   Network,
+  RefreshCw,
   Search as SearchIcon,
   SlidersHorizontal,
+  Trash2,
   Users,
 } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -13,23 +17,19 @@ import { useDispatch, useSelector } from 'react-redux';
 import userService from '../api/services/userService';
 import modelService from '../api/services/modelService';
 
-import EyeView from '../assets/eye-view.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import Trash from '../assets/red-trash.svg';
-import SyncIcon from '../assets/sync.svg';
-import ThreeDots from '../assets/three-dots.svg';
-import CalendarIcon from '../assets/calendar.svg';
-import DiscIcon from '../assets/disc.svg';
 import Pagination from '../components/DocumentPagination';
 import SkeletonLoader from '../components/SkeletonLoader';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import {
+  ActionMenu,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  type MenuOption,
 } from '../components/ui/dropdown-menu';
 import { Input } from '../components/ui/input';
 import { useDarkTheme, useDebouncedValue, useLoaderState } from '../hooks';
@@ -63,15 +63,6 @@ import { clearGraphBuild, selectGraphBuilds } from './graphBuildSlice';
 import SourceConfigModal from './SourceConfigModal';
 import TestRetrievalModal from './TestRetrievalModal';
 
-type SourceMenuOption = {
-  icon: string | LucideIcon;
-  label: string;
-  onClick: () => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-};
-
 const formatTokens = (tokens: number): string => {
   const roundToTwoDecimals = (num: number): string => {
     return (Math.round((num + Number.EPSILON) * 100) / 100).toString();
@@ -356,18 +347,15 @@ export default function Sources({
     }
   };
 
-  const getActionOptions = (
-    index: number,
-    document: Doc,
-  ): SourceMenuOption[] => {
+  const getActionOptions = (index: number, document: Doc): MenuOption[] => {
     const isWiki = document.config?.kind === 'wiki' || document.type === 'wiki';
     const isGraphRAG = document.config?.kind === 'graphrag';
     // 'team' viewers cannot write; convert is owner/editor only.
     const canEdit =
       document.ownership !== 'team' || document.team_access === 'editor';
-    const actions: SourceMenuOption[] = [
+    const actions: MenuOption[] = [
       {
-        icon: isGraphRAG ? Network : EyeView,
+        icon: isGraphRAG ? Network : Eye,
         label: isWiki
           ? t('settings.sources.wiki.view')
           : isGraphRAG
@@ -376,28 +364,24 @@ export default function Sources({
         onClick: () => {
           setDocumentToView(document);
         },
-        iconWidth: 18,
-        iconHeight: 18,
         variant: 'default',
       },
     ];
 
     if (document.ingestStatus === 'failed') {
       actions.push({
-        icon: SyncIcon,
+        icon: RefreshCw,
         label: t('settings.sources.reingest'),
         onClick: () => {
           handleReingest(document);
         },
-        iconWidth: 14,
-        iconHeight: 14,
         variant: 'default',
       });
     }
 
     if (document.syncFrequency) {
       actions.push({
-        icon: SyncIcon,
+        icon: RefreshCw,
         label: t('settings.sources.sync'),
         onClick: () => {
           setSyncMenuState({
@@ -406,18 +390,14 @@ export default function Sources({
             document: document,
           });
         },
-        iconWidth: 14,
-        iconHeight: 14,
         variant: 'default',
       });
       actions.push({
-        icon: SyncIcon,
+        icon: RefreshCw,
         label: t('settings.sources.syncNow'),
         onClick: () => {
           handleSyncNow(document);
         },
-        iconWidth: 14,
-        iconHeight: 14,
         variant: 'default',
       });
     }
@@ -430,8 +410,6 @@ export default function Sources({
           setDocumentToConfigure(document);
           setConfigModalState('ACTIVE');
         },
-        iconWidth: 16,
-        iconHeight: 16,
         variant: 'default',
       });
     }
@@ -444,8 +422,6 @@ export default function Sources({
           setDocumentToTest(document);
           setTestRetrievalState('ACTIVE');
         },
-        iconWidth: 16,
-        iconHeight: 16,
         variant: 'default',
       });
     }
@@ -464,8 +440,6 @@ export default function Sources({
           setDocumentToConvert(document);
           setConvertModalState('ACTIVE');
         },
-        iconWidth: 16,
-        iconHeight: 16,
         variant: 'default',
       });
     }
@@ -479,20 +453,16 @@ export default function Sources({
         onClick: () => {
           setDocumentToShare(document);
         },
-        iconWidth: 16,
-        iconHeight: 16,
         variant: 'default',
       });
     }
 
     actions.push({
-      icon: Trash,
+      icon: Trash2,
       label: t('convTile.delete'),
       onClick: () => {
         handleDeleteConfirmation(index, document);
       },
-      iconWidth: 18,
-      iconHeight: 18,
       variant: 'destructive',
     });
 
@@ -641,12 +611,7 @@ export default function Sources({
               }}
               labelSurface="background"
               shape="pill"
-              leftIcon={
-                <SearchIcon
-                  className="text-muted-foreground size-4"
-                  strokeWidth={1.75}
-                />
-              }
+              leftIcon={<SearchIcon className="text-muted-foreground size-4" />}
             />
           </div>
           <Button
@@ -752,64 +717,15 @@ export default function Sources({
                                 </DropdownMenuContent>
                               </DropdownMenu>
                             )}
-                            <DropdownMenu
+                            <ActionMenu
+                              options={getActionOptions(index, document)}
+                              triggerLabel={t('settings.sources.menuAlt')}
+                              triggerTestId={`menu-button-${docId}`}
                               open={actionMenuDocId === docId}
                               onOpenChange={(open) =>
                                 setActionMenuDocId(open ? docId : null)
                               }
-                            >
-                              <DropdownMenuTrigger asChild>
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon"
-                                  onClick={(e) => e.stopPropagation()}
-                                  className="h-[35px] w-6"
-                                  aria-label={t('settings.sources.menuAlt')}
-                                  data-testid={`menu-button-${docId}`}
-                                >
-                                  <img
-                                    src={ThreeDots}
-                                    alt={t('settings.sources.menuAlt')}
-                                    className="opacity-60 hover:opacity-100"
-                                  />
-                                </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent
-                                align="end"
-                                className="min-w-[144px]"
-                                onClick={(e) => e.stopPropagation()}
-                              >
-                                {getActionOptions(index, document).map(
-                                  (option, idx) => (
-                                    <DropdownMenuItem
-                                      key={idx}
-                                      variant={option.variant}
-                                      onSelect={() => option.onClick()}
-                                    >
-                                      {typeof option.icon === 'string' ? (
-                                        <img
-                                          src={option.icon}
-                                          alt=""
-                                          width={option.iconWidth ?? 16}
-                                          height={option.iconHeight ?? 16}
-                                        />
-                                      ) : (
-                                        <option.icon
-                                          size={Math.max(
-                                            option.iconWidth ?? 16,
-                                            option.iconHeight ?? 16,
-                                          )}
-                                          strokeWidth={1.75}
-                                          aria-hidden="true"
-                                        />
-                                      )}
-                                      <span>{option.label}</span>
-                                    </DropdownMenuItem>
-                                  ),
-                                )}
-                              </DropdownMenuContent>
-                            </DropdownMenu>
+                            />
                           </div>
                         </div>
                       </div>
@@ -817,11 +733,7 @@ export default function Sources({
                       <div className="flex flex-col items-start justify-start gap-1">
                         {document.ownership === 'team' && (
                           <Badge variant="neutral">
-                            <Users
-                              size={11}
-                              strokeWidth={2}
-                              aria-hidden="true"
-                            />
+                            <Users size={11} aria-hidden="true" />
                             {document.team_access === 'editor'
                               ? t('teamAccess.editor')
                               : t('teamAccess.viewer')}
@@ -854,11 +766,7 @@ export default function Sources({
                                 : null;
                             return (
                               <Badge variant="neutral">
-                                <Network
-                                  size={11}
-                                  strokeWidth={2}
-                                  aria-hidden="true"
-                                />
+                                <Network size={11} aria-hidden="true" />
                                 {isBuilding
                                   ? pct !== null
                                     ? t(
@@ -871,17 +779,13 @@ export default function Sources({
                             );
                           })()}
                         <div className="flex items-center gap-2">
-                          <img
-                            src={CalendarIcon}
-                            alt=""
-                            className="h-3.5 w-3.5"
-                          />
+                          <CalendarIcon className="text-muted-foreground size-3.5" />
                           <span className="text-muted-foreground text-xs leading-4.5 font-medium">
                             {document.date ? formatDate(document.date) : ''}
                           </span>
                         </div>
                         <div className="flex items-center gap-2">
-                          <img src={DiscIcon} alt="" className="h-3.5 w-3.5" />
+                          <HardDrive className="text-muted-foreground size-3.5" />
                           <span className="text-muted-foreground text-xs leading-4.5 font-medium">
                             {document.tokens
                               ? formatTokens(+document.tokens)
diff --git a/frontend/src/settings/Teams.tsx b/frontend/src/settings/Teams.tsx
index 540b433d..3b973334 100644
--- a/frontend/src/settings/Teams.tsx
+++ b/frontend/src/settings/Teams.tsx
@@ -3,7 +3,6 @@ import {
   ChevronRight,
   FileText,
   MessageSquare,
-  MoreVertical,
   Pencil,
   Plus,
   Trash2,
@@ -30,14 +29,10 @@ import { Avatar } from '../components/ui/avatar';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import { Card } from '../components/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+import { ActionMenu } from '../components/ui/dropdown-menu';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import {
   Select,
   SelectContent,
@@ -193,7 +188,7 @@ export default function Teams() {
 
   // Lucide icon for a grant's resource type, shown in the row's type tile.
   const resourceTypeIcon = (type: string): ReactNode => {
-    const props = { size: 16, strokeWidth: 1.75, 'aria-hidden': true } as const;
+    const props = { size: 16, 'aria-hidden': true } as const;
     switch (type) {
       case 'agent':
         return <Bot {...props} />;
@@ -523,7 +518,7 @@ export default function Teams() {
           </p>
         </div>
         <Button className="shrink-0" onClick={openCreateModal}>
-          <Plus size={16} strokeWidth={1.75} aria-hidden />
+          <Plus aria-hidden />
           {t('settings.teams.newTeam')}
         </Button>
       </div>
@@ -544,7 +539,7 @@ export default function Teams() {
                 className="mt-4"
                 onClick={openCreateModal}
               >
-                <Plus size={16} strokeWidth={1.75} aria-hidden />
+                <Plus aria-hidden />
                 {t('settings.teams.newTeam')}
               </Button>,
             )
@@ -571,7 +566,6 @@ export default function Teams() {
                       <ChevronRight
                         className="text-muted-foreground shrink-0 transition-transform group-hover:translate-x-0.5"
                         size={18}
-                        strokeWidth={1.75}
                         aria-hidden
                       />
                     </div>
@@ -585,7 +579,7 @@ export default function Teams() {
                       </p>
                     )}
                     <div className="text-muted-foreground mt-auto flex items-center gap-1.5 text-xs">
-                      <Users size={13} strokeWidth={1.75} aria-hidden />
+                      <Users size={13} aria-hidden />
                       <span>
                         {t(
                           (team.member_count ?? 0) === 1
@@ -639,31 +633,23 @@ export default function Teams() {
               </div>
             </div>
             {isAdmin && (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost-muted"
-                    size="icon-sm"
-                    className="shrink-0"
-                    aria-label={t('settings.teams.teamActions')}
-                  >
-                    <MoreVertical size={18} strokeWidth={1.75} aria-hidden />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="min-w-[160px]">
-                  <DropdownMenuItem onSelect={openEditModal}>
-                    <Pencil size={15} strokeWidth={1.75} aria-hidden />
-                    <span>{t('settings.teams.editTeam')}</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    variant="destructive"
-                    onSelect={() => requestDeleteTeam(selected)}
-                  >
-                    <Trash2 size={15} strokeWidth={1.75} aria-hidden />
-                    <span>{t('settings.teams.deleteTeam')}</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <ActionMenu
+                options={[
+                  {
+                    label: t('settings.teams.editTeam'),
+                    icon: Pencil,
+                    onClick: openEditModal,
+                  },
+                  {
+                    label: t('settings.teams.deleteTeam'),
+                    icon: Trash2,
+                    variant: 'destructive',
+                    onClick: () => requestDeleteTeam(selected),
+                  },
+                ]}
+                triggerLabel={t('settings.teams.teamActions')}
+                className="shrink-0"
+              />
             )}
           </div>
 
@@ -685,7 +671,7 @@ export default function Teams() {
                   className="shrink-0"
                   onClick={openAddMemberModal}
                 >
-                  <Plus size={15} strokeWidth={1.75} aria-hidden />
+                  <Plus aria-hidden />
                   {t('settings.teams.addMember')}
                 </Button>
               )}
@@ -755,7 +741,7 @@ export default function Teams() {
                         title={t('settings.teams.remove')}
                         onClick={() => requestRemoveMember(m.user_id)}
                       >
-                        <Trash2 size={16} strokeWidth={1.75} aria-hidden />
+                        <Trash2 aria-hidden />
                       </Button>
                     )}
                   </li>
@@ -802,7 +788,7 @@ export default function Teams() {
                         title={t('settings.teams.unshare')}
                         onClick={() => handleUnshare(g)}
                       >
-                        <Trash2 size={16} strokeWidth={1.75} aria-hidden />
+                        <Trash2 aria-hidden />
                       </Button>
                     )}
                   </li>
@@ -823,14 +809,13 @@ export default function Teams() {
         title={t('settings.teams.createTeam')}
         description={t('settings.teams.createTeamDescription')}
         footer={
-          <>
-            <Button variant="ghost" onClick={closeCreateModal}>
-              {t('cancel')}
-            </Button>
-            <Button onClick={handleCreate} disabled={!newTeamName.trim()}>
-              {t('settings.teams.create')}
-            </Button>
-          </>
+          <ModalActions
+            cancelLabel={t('cancel')}
+            onCancel={closeCreateModal}
+            submitLabel={t('settings.teams.create')}
+            onSubmit={handleCreate}
+            disabled={!newTeamName.trim()}
+          />
         }
       >
         <Input
@@ -856,14 +841,13 @@ export default function Teams() {
         mobileVariant="sheet"
         title={t('settings.teams.editTeam')}
         footer={
-          <>
-            <Button variant="ghost" onClick={closeEditModal}>
-              {t('cancel')}
-            </Button>
-            <Button onClick={handleEditSave} disabled={!editName.trim()}>
-              {t('settings.teams.save')}
-            </Button>
-          </>
+          <ModalActions
+            cancelLabel={t('cancel')}
+            onCancel={closeEditModal}
+            submitLabel={t('settings.teams.save')}
+            onSubmit={handleEditSave}
+            disabled={!editName.trim()}
+          />
         }
       >
         <div className="flex flex-col gap-4">
@@ -875,13 +859,7 @@ export default function Teams() {
             value={editName}
             onChange={(e) => setEditName(e.target.value)}
           />
-          <div className="flex flex-col gap-1.5">
-            <label
-              htmlFor="team-edit-description"
-              className="text-foreground text-sm font-medium"
-            >
-              {t('settings.teams.descriptionLabel')}
-            </label>
+          <FormField label={t('settings.teams.descriptionLabel')}>
             <Textarea
               id="team-edit-description"
               rows={3}
@@ -890,7 +868,7 @@ export default function Teams() {
               value={editDescription}
               onChange={(e) => setEditDescription(e.target.value)}
             />
-          </div>
+          </FormField>
         </div>
         {editError && (
           <p className="text-destructive mt-3 text-sm" role="alert">
@@ -909,14 +887,13 @@ export default function Teams() {
         title={t('settings.teams.addMemberTitle')}
         description={t('settings.teams.addMemberDescription')}
         footer={
-          <>
-            <Button variant="ghost" onClick={closeAddMemberModal}>
-              {t('cancel')}
-            </Button>
-            <Button onClick={handleAddMember} disabled={!newMemberEmail.trim()}>
-              {t('settings.teams.add')}
-            </Button>
-          </>
+          <ModalActions
+            cancelLabel={t('cancel')}
+            onCancel={closeAddMemberModal}
+            submitLabel={t('settings.teams.add')}
+            onSubmit={handleAddMember}
+            disabled={!newMemberEmail.trim()}
+          />
         }
       >
         <div className="flex flex-col gap-4">
@@ -930,13 +907,10 @@ export default function Teams() {
             onChange={(e) => setNewMemberEmail(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && handleAddMember()}
           />
-          <div className="flex flex-col gap-1.5">
-            <label
-              htmlFor="add-member-role"
-              className="text-foreground text-sm font-medium"
-            >
-              {t('settings.teams.memberRoleLabel')}
-            </label>
+          <FormField
+            id="add-member-role"
+            label={t('settings.teams.memberRoleLabel')}
+          >
             <Select
               value={newMemberRole}
               onValueChange={(value) => setNewMemberRole(value as TeamRole)}
@@ -956,7 +930,7 @@ export default function Teams() {
                 </SelectItem>
               </SelectContent>
             </Select>
-          </div>
+          </FormField>
         </div>
         {addMemberError && (
           <p className="text-destructive mt-3 text-sm" role="alert">
diff --git a/frontend/src/settings/TestRetrievalModal.tsx b/frontend/src/settings/TestRetrievalModal.tsx
index e596d7d8..28791062 100644
--- a/frontend/src/settings/TestRetrievalModal.tsx
+++ b/frontend/src/settings/TestRetrievalModal.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
 import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
@@ -178,8 +177,12 @@ export default function TestRetrievalModal({
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && closeModal()}
-      hideTitle
       title={tr('title')}
+      description={
+        document?.name
+          ? tr('subtitle', { name: document.name })
+          : tr('subtitleGeneric')
+      }
       size="lg"
       mobileVariant="sheet"
       // Same width ramp and padding as PromptsModal so the two large modals
@@ -188,15 +191,6 @@ export default function TestRetrievalModal({
       contentClassName="max-h-[70vh]"
     >
       <div className="flex flex-col">
-        <p className="text-foreground mb-1 text-xl font-semibold">
-          {tr('title')}
-        </p>
-        <p className="text-muted-foreground mb-6 text-sm">
-          {document?.name
-            ? tr('subtitle', { name: document.name })
-            : tr('subtitleGeneric')}
-        </p>
-
         <div className="flex flex-col gap-4">
           <div className="flex flex-row items-center gap-2">
             <Input
@@ -217,9 +211,10 @@ export default function TestRetrievalModal({
               onClick={handleRun}
               size="field"
               shape="pill"
-              className="min-w-[96px] shrink-0"
+              loading={running}
+              className="shrink-0"
             >
-              {running ? <Spinner size="small" /> : tr('run')}
+              {tr('run')}
             </Button>
           </div>
 
diff --git a/frontend/src/settings/ToolConfig.tsx b/frontend/src/settings/ToolConfig.tsx
index 9d6b9d71..13082a88 100644
--- a/frontend/src/settings/ToolConfig.tsx
+++ b/frontend/src/settings/ToolConfig.tsx
@@ -1,12 +1,15 @@
-import { Search, Trash2 } from 'lucide-react';
+import {
+  ChevronRight,
+  CircleCheck,
+  CircleX,
+  Search,
+  Trash2,
+} from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import ChevronRight from '../assets/chevron-right.svg';
-import CircleCheck from '../assets/circle-check.svg';
-import CircleX from '../assets/circle-x.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import ConfigFields from '../components/ConfigFields';
@@ -20,6 +23,7 @@ import {
 } from '../components/ui/select';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
+import { Checkbox } from '../components/ui/checkbox';
 import { Input } from '../components/ui/input';
 import { Switch } from '../components/ui/switch';
 import { useDarkTheme } from '../hooks';
@@ -343,9 +347,10 @@ export default function ToolConfig({
           size="sm"
           shape="pill"
           onClick={handleSaveChanges}
-          disabled={!hasUnsavedChanges || saving}
+          disabled={!hasUnsavedChanges}
+          loading={saving}
         >
-          {saving ? t('settings.tools.saving') : t('settings.tools.save')}
+          {t('settings.tools.save')}
         </Button>
       </div>
       {saveError && (
@@ -354,7 +359,7 @@ export default function ToolConfig({
         </Alert>
       )}
       <div className="mt-1">
-        <p className="text-foreground dark:text-foreground text-sm font-semibold">
+        <p className="text-foreground text-sm font-semibold">
           {t('settings.tools.customName')}
         </p>
         <div className="relative mt-4 w-full max-w-96">
@@ -370,7 +375,7 @@ export default function ToolConfig({
         {tool.name !== 'api_tool' &&
           Object.keys(configRequirements).length > 0 && (
             <div>
-              <p className="text-foreground dark:text-foreground mb-4 text-sm font-semibold">
+              <p className="text-foreground mb-4 text-sm font-semibold">
                 {t('settings.tools.authentication')}
               </p>
               <div className="max-w-96">
@@ -391,7 +396,7 @@ export default function ToolConfig({
       <div className="flex flex-col gap-4">
         <div className="bg-border mx-0 my-2 h-[0.8px] w-full rounded-full"></div>
         <div className="flex w-full flex-row items-center justify-between gap-2">
-          <p className="text-foreground dark:text-foreground text-base font-semibold">
+          <p className="text-foreground text-base font-semibold">
             {t('settings.tools.actions')}
           </p>
           {tool.name === 'api_tool' && (
@@ -462,19 +467,17 @@ export default function ToolConfig({
                   return (
                     <div
                       key={originalIndex}
-                      className="border-border dark:border-border w-full rounded-xl border"
+                      className="border-border w-full rounded-xl border"
                     >
                       <div
-                        className={`border-border dark:border-border flex cursor-pointer flex-wrap items-center justify-between ${isExpanded ? 'rounded-t-xl border-b' : 'rounded-xl'} bg-muted px-4 py-3`}
+                        className={`border-border flex cursor-pointer flex-wrap items-center justify-between ${isExpanded ? 'rounded-t-xl border-b' : 'rounded-xl'} bg-muted px-4 py-3`}
                         onClick={() => toggleUserActionExpand(originalIndex)}
                       >
                         <div className="flex items-center gap-3">
-                          <img
-                            src={ChevronRight}
-                            alt="expand"
-                            className={`h-4 w-4 opacity-60 transition-transform duration-200 dark:invert ${isExpanded ? 'rotate-90' : ''}`}
+                          <ChevronRight
+                            className={`text-muted-foreground size-4 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
                           />
-                          <p className="text-foreground dark:text-foreground font-semibold">
+                          <p className="text-foreground font-semibold">
                             {action.name}
                           </p>
                           {action.description && (
@@ -584,12 +587,14 @@ export default function ToolConfig({
                                         >
                                           <div className="flex items-center">
                                             &#8203;
-                                            <input
+                                            <Checkbox
+                                              size="sm"
                                               checked={param[1].filled_by_llm}
                                               id={uniqueKey}
-                                              type="checkbox"
-                                              className="border-border size-4 rounded-sm bg-transparent"
-                                              onChange={() =>
+                                              aria-label={t(
+                                                'settings.tools.filledByLLM',
+                                              )}
+                                              onCheckedChange={() =>
                                                 handleCheckboxChange(
                                                   originalIndex,
                                                   param[0],
@@ -888,24 +893,20 @@ function APIToolConfig({
           return (
             <div
               key={actionIndex}
-              className="border-border dark:border-border w-full rounded-xl border"
+              className="border-border w-full rounded-xl border"
             >
               <div
-                className={`border-border dark:border-border flex cursor-pointer flex-wrap items-center justify-between ${isExpanded ? 'rounded-t-xl border-b' : 'rounded-xl'} bg-muted px-4 py-3`}
+                className={`border-border flex cursor-pointer flex-wrap items-center justify-between ${isExpanded ? 'rounded-t-xl border-b' : 'rounded-xl'} bg-muted px-4 py-3`}
                 onClick={() => toggleActionExpand(actionName)}
               >
                 <div className="flex items-center gap-3">
-                  <img
-                    src={ChevronRight}
-                    alt="expand"
-                    className={`h-4 w-4 opacity-60 transition-transform duration-200 dark:invert ${isExpanded ? 'rotate-90' : ''}`}
+                  <ChevronRight
+                    className={`text-muted-foreground size-4 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
                   />
                   <Badge variant={getMethodBadgeVariant(action.method)}>
                     {action.method}
                   </Badge>
-                  <p className="text-foreground dark:text-foreground font-semibold">
-                    {action.name}
-                  </p>
+                  <p className="text-foreground font-semibold">{action.name}</p>
                   {action.description && (
                     <p className="text-muted-foreground hidden truncate text-sm md:block md:max-w-xs lg:max-w-md">
                       {action.description}
@@ -1137,7 +1138,7 @@ function APIToolConfig({
                           </SelectContent>
                         </Select>
                       </div>
-                      <p className="text-foreground dark:text-foreground mt-2 text-xs opacity-60">
+                      <p className="text-foreground mt-2 text-xs opacity-60">
                         {action.body_content_type === 'multipart/form-data' &&
                           'For APIs requiring multipart format. File uploads not supported through LLM.'}
                         {action.body_content_type ===
@@ -1200,6 +1201,7 @@ function APIActionTable({
   ) => void;
 }) {
   const { t } = useTranslation();
+  const idPrefix = React.useId();
 
   const [action, setAction] = React.useState<APIActionType>(apiAction);
   const [newPropertyKey, setNewPropertyKey] = React.useState('');
@@ -1405,20 +1407,18 @@ function APIActionTable({
                         size="icon-xs"
                         onClick={handleRenameProperty}
                         className="mr-1"
+                        aria-label="check"
                       >
-                        <img
-                          src={CircleCheck}
-                          alt="check"
-                          className="h-5 w-5"
-                        />
+                        <CircleCheck className="text-success" />
                       </Button>
                       <Button
                         type="button"
                         variant="ghost"
                         size="icon-xs"
                         onClick={handleRenamePropertyCancel}
+                        aria-label="cancel"
                       >
-                        <img src={CircleX} alt="cancel" className="h-5 w-5" />
+                        <CircleX className="text-destructive" />
                       </Button>
                     </div>
                   </div>
@@ -1456,18 +1456,22 @@ function APIActionTable({
                 </Select>
               </td>
               <td>
-                <label className="ml-2.5 flex cursor-pointer items-start gap-4">
+                <label
+                  htmlFor={`${idPrefix}-${section}-${index}-filled-by-llm`}
+                  className="ml-2.5 flex cursor-pointer items-start gap-4"
+                >
                   <div className="flex items-center">
-                    <input
+                    <Checkbox
+                      size="sm"
+                      id={`${idPrefix}-${section}-${index}-filled-by-llm`}
+                      aria-label={t('settings.tools.filledByLLM')}
                       checked={param.filled_by_llm}
-                      type="checkbox"
-                      className="border-border size-4 rounded-sm bg-transparent"
-                      onChange={(e) =>
+                      onCheckedChange={(checked) =>
                         handlePropertyChange(
                           section,
                           key,
                           'filled_by_llm',
-                          e.target.checked,
+                          checked === true,
                         )
                       }
                     />
@@ -1498,9 +1502,7 @@ function APIActionTable({
                   size="sm"
                 />
               </td>
-              <td
-                className={`border-border dark:border-border border-b ${NARROW_CELL}`}
-              >
+              <td className={`border-border border-b ${NARROW_CELL}`}>
                 <Button
                   type="button"
                   variant="ghost-destructive"
@@ -1617,20 +1619,18 @@ function APIActionTable({
                         size="icon-xs"
                         onClick={handleRenameProperty}
                         className="mr-1"
+                        aria-label="check"
                       >
-                        <img
-                          src={CircleCheck}
-                          alt="check"
-                          className="h-5 w-5"
-                        />
+                        <CircleCheck className="text-success" />
                       </Button>
                       <Button
                         type="button"
                         variant="ghost"
                         size="icon-xs"
                         onClick={handleRenamePropertyCancel}
+                        aria-label="cancel"
                       >
-                        <img src={CircleX} alt="cancel" className="h-5 w-5" />
+                        <CircleX className="text-destructive" />
                       </Button>
                     </div>
                   </div>
@@ -1673,9 +1673,7 @@ function APIActionTable({
                   }
                 />
               </td>
-              <td
-                className={`border-border dark:border-border border-b ${NARROW_CELL}`}
-              >
+              <td className={`border-border border-b ${NARROW_CELL}`}>
                 <Button
                   type="button"
                   variant="ghost-destructive"
@@ -1751,19 +1749,19 @@ function APIActionTable({
   return (
     <div className="scrollbar-overlay flex flex-col gap-6">
       <div>
-        <h3 className="text-foreground dark:text-foreground mb-1 text-base font-normal">
+        <h3 className="text-foreground mb-1 text-base font-normal">
           {t('settings.tools.headers')}
         </h3>
         <table className="table-default">
           <thead>
             <tr>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.name')}
               </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.value')}
               </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.description')}
               </th>
               <th className={NARROW_CELL}></th>
@@ -1773,25 +1771,25 @@ function APIActionTable({
         </table>
       </div>
       <div>
-        <h3 className="text-foreground dark:text-foreground mb-1 text-base font-normal">
+        <h3 className="text-foreground mb-1 text-base font-normal">
           {t('settings.tools.queryParameters')}
         </h3>
         <table className="table-default">
           <thead>
             <tr>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.name')}
               </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.type')}
               </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.filledByLLM')}
               </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.description')}
               </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.value')}
               </th>
               <th className={NARROW_CELL}></th>
@@ -1801,25 +1799,25 @@ function APIActionTable({
         </table>
       </div>
       <div className="mb-6">
-        <h3 className="text-foreground dark:text-foreground mb-1 text-base font-normal">
+        <h3 className="text-foreground mb-1 text-base font-normal">
           {t('settings.tools.body')}
         </h3>
         <table className="table-default">
           <thead>
             <tr>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.name')}
               </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.type')}
               </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.filledByLLM')}
               </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.description')}
               </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
+              <th className="text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.value')}
               </th>
               <th className={NARROW_CELL}></th>
diff --git a/frontend/src/settings/Tools.tsx b/frontend/src/settings/Tools.tsx
index 8acf5d4c..74ad7f18 100644
--- a/frontend/src/settings/Tools.tsx
+++ b/frontend/src/settings/Tools.tsx
@@ -1,26 +1,24 @@
-import { RefreshCcw, Search as SearchIcon, Trash, Users } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
+import {
+  Pencil,
+  RefreshCcw,
+  Search as SearchIcon,
+  Trash,
+  Users,
+} from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import devicesService from '../api/services/devicesService';
 import userService from '../api/services/userService';
-import Edit from '../assets/edit.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
-import ThreeDotsIcon from '../assets/three-dots.svg';
 import SkeletonLoader from '../components/SkeletonLoader';
 import ToolIcon from '../components/ToolIcon';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import { Switch } from '../components/ui/switch';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
 import { Input } from '../components/ui/input';
 import { useDarkTheme, useLoaderState } from '../hooks';
 import AddToolModal from '../modals/AddToolModal';
@@ -33,16 +31,6 @@ import RemoteDeviceConfig from './RemoteDeviceConfig';
 import ToolConfig from './ToolConfig';
 import { APIToolType, UserToolType } from './types';
 
-type ToolsMenuOption = {
-  icon: string | LucideIcon;
-  label: string;
-  onClick: () => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-  iconClassName?: string;
-};
-
 export default function Tools() {
   const { t } = useTranslation();
   const token = useSelector(selectToken);
@@ -119,23 +107,19 @@ export default function Tools() {
     setReconnectModalState('ACTIVE');
   };
 
-  const getMenuOptions = (tool: UserToolType): ToolsMenuOption[] => {
-    const options: ToolsMenuOption[] = [
+  const getMenuOptions = (tool: UserToolType): MenuOption[] => {
+    const options: MenuOption[] = [
       {
-        icon: Edit,
+        icon: Pencil,
         label: t('settings.tools.edit'),
         onClick: () => handleSettingsClick(tool),
         variant: 'default',
-        iconWidth: 14,
-        iconHeight: 14,
       },
       {
         icon: Trash,
         label: t('settings.tools.delete'),
         onClick: () => handleDeleteTool(tool),
         variant: 'destructive',
-        iconWidth: 16,
-        iconHeight: 16,
       },
     ];
     // Sharing is an owner-only action: hide it for tools shared into the
@@ -146,8 +130,6 @@ export default function Tools() {
         label: t('settings.tools.shareWithTeam'),
         onClick: () => setToolToShare(tool),
         variant: 'default',
-        iconWidth: 16,
-        iconHeight: 16,
       });
     }
     if (tool.name === 'mcp_tool') {
@@ -156,9 +138,6 @@ export default function Tools() {
         label: t('settings.tools.reconnect'),
         onClick: () => handleReconnect(tool),
         variant: 'default',
-        iconWidth: 16,
-        iconHeight: 16,
-        iconClassName: 'text-muted-foreground',
       });
     }
     return options;
@@ -298,10 +277,7 @@ export default function Tools() {
                   labelSurface="background"
                   shape="pill"
                   leftIcon={
-                    <SearchIcon
-                      className="text-muted-foreground size-4"
-                      strokeWidth={1.75}
-                    />
+                    <SearchIcon className="text-muted-foreground size-4" />
                   }
                 />
               </div>
@@ -316,7 +292,7 @@ export default function Tools() {
                 {t('settings.tools.addTool')}
               </Button>
             </div>
-            <div className="border-border dark:border-border mt-5 mb-8 border-b" />
+            <div className="border-border mt-5 mb-8 border-b" />
             {loading ? (
               <div className="flex flex-wrap justify-center gap-4 sm:justify-start">
                 <SkeletonLoader component="toolCards" count={6} />
@@ -359,65 +335,11 @@ export default function Tools() {
                           className="bg-muted hover:bg-accent relative flex h-52 w-[300px] flex-col justify-between overflow-hidden rounded-2xl p-5"
                         >
                           {!tool.default && (
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                <button
-                                  type="button"
-                                  onClick={(e) => e.stopPropagation()}
-                                  className="absolute top-4 right-4 z-10 cursor-pointer"
-                                  aria-label={t(
-                                    'settings.tools.settingsIconAlt',
-                                  )}
-                                >
-                                  <img
-                                    src={ThreeDotsIcon}
-                                    alt={t('settings.tools.settingsIconAlt')}
-                                    className="h-[19px] w-[19px]"
-                                  />
-                                </button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent
-                                align="end"
-                                className="min-w-[144px]"
-                              >
-                                {getMenuOptions(tool).map((option, idx) => {
-                                  const IconCmp =
-                                    typeof option.icon !== 'string'
-                                      ? option.icon
-                                      : null;
-                                  return (
-                                    <DropdownMenuItem
-                                      key={idx}
-                                      variant={option.variant}
-                                      onSelect={() => option.onClick()}
-                                    >
-                                      {typeof option.icon === 'string' ? (
-                                        <img
-                                          src={option.icon}
-                                          alt=""
-                                          width={option.iconWidth ?? 16}
-                                          height={option.iconHeight ?? 16}
-                                          className={option.iconClassName}
-                                        />
-                                      ) : (
-                                        IconCmp && (
-                                          <IconCmp
-                                            size={Math.max(
-                                              option.iconWidth ?? 16,
-                                              option.iconHeight ?? 16,
-                                            )}
-                                            strokeWidth={1.75}
-                                            aria-hidden="true"
-                                            className={option.iconClassName}
-                                          />
-                                        )
-                                      )}
-                                      <span>{option.label}</span>
-                                    </DropdownMenuItem>
-                                  );
-                                })}
-                              </DropdownMenuContent>
-                            </DropdownMenu>
+                            <ActionMenu
+                              options={getMenuOptions(tool)}
+                              triggerLabel={t('settings.tools.settingsIconAlt')}
+                              className="absolute top-3 right-3 z-10"
+                            />
                           )}
                           <div className="w-full">
                             <div className="flex w-full items-center gap-2 px-1">
@@ -455,11 +377,7 @@ export default function Tools() {
                                 )}
                               {tool.ownership === 'team' && (
                                 <Badge variant="neutral">
-                                  <Users
-                                    size={11}
-                                    strokeWidth={2}
-                                    aria-hidden="true"
-                                  />
+                                  <Users size={11} aria-hidden="true" />
                                   {tool.team_access === 'editor'
                                     ? t('teamAccess.editor')
                                     : t('teamAccess.viewer')}
@@ -469,7 +387,7 @@ export default function Tools() {
                             <div className="mt-[9px]">
                               <p
                                 title={tool.customName || tool.displayName}
-                                className="text-foreground dark:text-foreground truncate px-1 text-sm leading-relaxed font-semibold capitalize"
+                                className="text-foreground truncate px-1 text-sm leading-relaxed font-semibold capitalize"
                               >
                                 {tool.customName || tool.displayName}
                               </p>
diff --git a/frontend/src/settings/components/RetrievalOptions.tsx b/frontend/src/settings/components/RetrievalOptions.tsx
index 64a5135b..8d94949d 100644
--- a/frontend/src/settings/components/RetrievalOptions.tsx
+++ b/frontend/src/settings/components/RetrievalOptions.tsx
@@ -1,12 +1,11 @@
 import { ChevronRight } from 'lucide-react';
-import { type ReactNode, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { cn } from '@/lib/utils';
 
 import { Button } from '../../components/ui/button';
 import { Input } from '../../components/ui/input';
-import { Label } from '../../components/ui/label';
 import {
   Select,
   SelectContent,
@@ -14,6 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../../components/ui/select';
+import { SettingRow, SettingRows } from '../../components/ui/setting-row';
 import { Switch } from '../../components/ui/switch';
 import type {
   ChunkingStrategy,
@@ -164,48 +164,6 @@ function GroupHeader({ title, tag }: { title: string; tag: string }) {
   );
 }
 
-/**
- * One settings row: a left block (medium-weight label plus optional muted
- * description) and a right block holding the control. `alignStart` top-aligns
- * the row for controls paired with a multi-line description; otherwise both
- * sides are vertically centered.
- */
-function SettingRow({
-  label,
-  htmlFor,
-  description,
-  alignStart = false,
-  children,
-}: {
-  label: string;
-  htmlFor?: string;
-  description?: ReactNode;
-  alignStart?: boolean;
-  children: ReactNode;
-}) {
-  return (
-    <div
-      className={cn(
-        'flex flex-row justify-between gap-4 py-3 first:pt-0 last:pb-0',
-        alignStart ? 'items-start' : 'items-center',
-      )}
-    >
-      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-        <Label
-          htmlFor={htmlFor}
-          className="text-foreground pointer-events-none w-fit text-sm font-medium"
-        >
-          {label}
-        </Label>
-        {description ? (
-          <p className="text-muted-foreground text-xs">{description}</p>
-        ) : null}
-      </div>
-      <div className="shrink-0">{children}</div>
-    </div>
-  );
-}
-
 /**
  * Hydrate the form value from a stored (possibly partial/absent) SourceConfig,
  * filling every missing field with the documented default. Lenient on read so a
@@ -447,7 +405,7 @@ export default function RetrievalOptions({
       <div className="flex flex-col gap-3">
         <GroupHeader title={tr('retrieval.title')} tag={tr('retrieval.tag')} />
 
-        <div className="divide-border/50 divide-y">
+        <SettingRows>
           <SettingRow
             label={tr('retrieval.retriever')}
             htmlFor="retrieval-retriever"
@@ -588,7 +546,7 @@ export default function RetrievalOptions({
               onCheckedChange={(checked) => setPrescreen({ enabled: checked })}
             />
           </SettingRow>
-        </div>
+        </SettingRows>
 
         {/* Prescreen expanded inputs (kept as floating-label cards) */}
         {value.retrieval.prescreen.enabled && (
@@ -650,7 +608,7 @@ export default function RetrievalOptions({
             {tr('graphRetrieval.agentToolHint')}
           </p>
 
-          <div className="divide-border/50 divide-y">
+          <SettingRows>
             <SettingRow
               label={tr('graphRetrieval.seedStrategy')}
               htmlFor="graph-seed-strategy"
@@ -713,7 +671,7 @@ export default function RetrievalOptions({
                 }
               />
             </SettingRow>
-          </div>
+          </SettingRows>
         </div>
       )}
 
@@ -722,7 +680,7 @@ export default function RetrievalOptions({
         <div className="flex flex-col gap-3">
           <GroupHeader title={tr('graph.title')} tag={tr('graph.tag')} />
 
-          <div className="divide-border/50 divide-y">
+          <SettingRows>
             <SettingRow
               label={tr('graph.extractionModel')}
               htmlFor="graph-extraction-model"
@@ -790,7 +748,7 @@ export default function RetrievalOptions({
                 }}
               />
             </SettingRow>
-          </div>
+          </SettingRows>
         </div>
       )}
 
@@ -798,7 +756,7 @@ export default function RetrievalOptions({
       <div className={cn('flex flex-col gap-3', queryOnly && 'hidden')}>
         <GroupHeader title={tr('chunking.title')} tag={tr('chunking.tag')} />
 
-        <div className="divide-border/50 divide-y">
+        <SettingRows>
           <SettingRow
             label={tr('chunking.strategy')}
             htmlFor="chunking-strategy"
@@ -874,7 +832,7 @@ export default function RetrievalOptions({
               }
             />
           </SettingRow>
-        </div>
+        </SettingRows>
       </div>
     </div>
   );
diff --git a/frontend/src/settings/traces/TraceSheet.tsx b/frontend/src/settings/traces/TraceSheet.tsx
index eb7e2385..49bfbb05 100644
--- a/frontend/src/settings/traces/TraceSheet.tsx
+++ b/frontend/src/settings/traces/TraceSheet.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../../api/services/userService';
-import Spinner from '../../components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
 import { Sheet, SheetContent } from '../../components/ui/sheet';
 import { selectToken } from '../../preferences/preferenceSlice';
 import { formatDateTime } from '../../utils/dateTimeUtils';
diff --git a/frontend/src/teams/ShareToTeamModal.tsx b/frontend/src/teams/ShareToTeamModal.tsx
index c18f0137..c334c0de 100644
--- a/frontend/src/teams/ShareToTeamModal.tsx
+++ b/frontend/src/teams/ShareToTeamModal.tsx
@@ -498,7 +498,13 @@ export default function ShareToTeamModal({
       title={title}
       size="md"
       footer={
-        <Button variant="outline" disabled={inFlight} onClick={onClose}>
+        <Button
+          variant="outline"
+          size="lg"
+          shape="pill"
+          disabled={inFlight}
+          onClick={onClose}
+        >
           {t('settings.teams.share.done')}
         </Button>
       }
diff --git a/frontend/src/teams/TeamSwitcher.tsx b/frontend/src/teams/TeamSwitcher.tsx
index de658f19..90fb15cd 100644
--- a/frontend/src/teams/TeamSwitcher.tsx
+++ b/frontend/src/teams/TeamSwitcher.tsx
@@ -161,10 +161,7 @@ export default function TeamSwitcher({
             className="hover:bg-muted dark:hover:bg-accent text-foreground flex w-full items-center gap-1.5 rounded-lg px-2 py-1 text-left transition-colors"
           >
             {expandedBrand}
-            <ChevronsUpDown
-              className="text-muted-foreground size-4 shrink-0"
-              strokeWidth={1.75}
-            />
+            <ChevronsUpDown className="text-muted-foreground size-4 shrink-0" />
           </button>
         )}
       </DropdownMenuTrigger>
@@ -173,9 +170,9 @@ export default function TeamSwitcher({
           <div className="flex items-center gap-2">
             <span className="bg-muted dark:bg-accent flex size-7 shrink-0 items-center justify-center rounded-md">
               {currentTeam ? (
-                <Users className="size-4" strokeWidth={1.75} />
+                <Users className="size-4" />
               ) : (
-                <User className="size-4" strokeWidth={1.75} />
+                <User className="size-4" />
               )}
             </span>
             <span className="min-w-0 flex-1">
@@ -191,7 +188,7 @@ export default function TeamSwitcher({
 
         {currentTeam && (
           <DropdownMenuItem onSelect={goToManage}>
-            <SettingsIcon className="size-4" strokeWidth={1.75} />
+            <SettingsIcon className="size-4" />
             <span>{t('teams.switcher.manageTeam')}</span>
           </DropdownMenuItem>
         )}
@@ -201,7 +198,7 @@ export default function TeamSwitcher({
         {/* Personal account entry */}
         {currentTeam && (
           <DropdownMenuItem onSelect={() => selectTeam(null)}>
-            <User className="size-4" strokeWidth={1.75} />
+            <User className="size-4" />
             <span className="min-w-0 flex-1 truncate">
               {t('teams.switcher.personal')}
             </span>
@@ -212,7 +209,7 @@ export default function TeamSwitcher({
         {/* Other teams to switch to */}
         {otherTeams.map((team) => (
           <DropdownMenuItem key={team.id} onSelect={() => selectTeam(team.id)}>
-            <Users className="size-4" strokeWidth={1.75} />
+            <Users className="size-4" />
             <span className="min-w-0 flex-1 truncate" title={team.name}>
               {team.name}
             </span>
@@ -222,7 +219,7 @@ export default function TeamSwitcher({
         <DropdownMenuSeparator />
 
         <DropdownMenuItem onSelect={goToCreate}>
-          <Plus className="size-4" strokeWidth={1.75} />
+          <Plus className="size-4" />
           <span>{t('teams.switcher.createTeam')}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 75a85d32..9c9eac10 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -1,3 +1,4 @@
+import { ChevronLeft } from 'lucide-react';
 import { envVar } from '@/env';
 import { useCallback, useEffect, useState } from 'react';
 import { nanoid } from '@reduxjs/toolkit';
@@ -21,6 +22,7 @@ import {
   SelectValue,
 } from '../components/ui/select';
 import { Switch } from '../components/ui/switch';
+import { Textarea } from '../components/ui/textarea';
 import { Modal } from '../components/ui/modal';
 import { OptionCard } from '../components/ui/option-card';
 import { ActiveState, Doc } from '../models/misc';
@@ -52,8 +54,6 @@ import RetrievalOptions, {
   type RetrievalOptionsValue,
 } from '../settings/components/RetrievalOptions';
 
-import ChevronRight from '../assets/chevron-right.svg';
-
 function Upload({
   receivedFile = [],
   setModalState,
@@ -264,7 +264,7 @@ function Upload({
             >
               {field.label}
             </Label>
-            <textarea
+            <Textarea
               id={`field-${field.name}`}
               name={field.name}
               value={String(
@@ -279,7 +279,8 @@ function Upload({
               }
               required={isRequired}
               rows={8}
-              className="border-border bg-card text-foreground focus:border-primary w-full resize-y rounded-2xl border p-3 text-sm outline-none"
+              size="lg"
+              variant="filled"
             />
           </div>
         );
@@ -293,7 +294,7 @@ function Upload({
               </span>
             </div>
             <div className="mt-4 max-w-full">
-              <p className="text-foreground dark:text-foreground mb-3.5 text-sm font-medium">
+              <p className="text-foreground mb-3.5 text-sm font-medium">
                 {t('modals.uploadDoc.selectedFiles')}
               </p>
               <div className="max-w-full overflow-hidden">
@@ -1046,6 +1047,21 @@ function Upload({
       onOpenChange={(o) => !o && handleClose()}
       hideTitle
       title={t('modals.uploadDoc.label')}
+      footer={
+        activeTab && ingestor.type ? (
+          <Button
+            type="button"
+            onClick={handleUpload}
+            disabled={isUploadDisabled()}
+            size="lg"
+            shape="pill"
+          >
+            {ingestor.type === 'wiki'
+              ? t('modals.uploadDoc.create')
+              : t('modals.uploadDoc.train')}
+          </Button>
+        ) : undefined
+      }
       size="lg"
       mobileVariant="sheet"
       className="max-h-[90vh] w-11/12 sm:w-auto sm:min-w-[600px] md:min-w-[700px]"
@@ -1053,7 +1069,7 @@ function Upload({
     >
       <div className="flex w-full flex-col gap-6">
         {!ingestor.type && (
-          <p className="text-foreground dark:text-foreground text-left text-xl leading-7 font-semibold">
+          <p className="text-foreground text-left text-xl leading-7 font-semibold">
             {t('modals.uploadDoc.selectSource')}
           </p>
         )}
@@ -1070,11 +1086,7 @@ function Upload({
                   onClick={() => handleIngestorTypeChange(null)}
                   className="-ml-3 w-fit justify-start"
                 >
-                  <img
-                    src={ChevronRight}
-                    alt="back"
-                    className="h-3 w-3 rotate-180 transform dark:invert"
-                  />
+                  <ChevronLeft />
                   <span>{t('modals.uploadDoc.back')}</span>
                 </Button>
 
@@ -1128,20 +1140,6 @@ function Upload({
               )}
           </>
         )}
-        <div className="flex justify-end gap-4">
-          {activeTab && ingestor.type && (
-            <Button
-              type="button"
-              onClick={handleUpload}
-              disabled={isUploadDisabled()}
-              shape="pill"
-            >
-              {ingestor.type === 'wiki'
-                ? t('modals.uploadDoc.create')
-                : t('modals.uploadDoc.train')}
-            </Button>
-          )}
-        </div>
       </div>
     </Modal>
   );