From 5039aedca59a304f5caaf539c3327b94afeb11db Mon Sep 17 00:00:00 2001
From: Benjamin <benjamin@kolapsis.com>
Date: Mon, 28 Sep 2026 18:56:33 +0200
Subject: [PATCH 1/5] feat(ui): add one shared component per form and
 navigation control

Add TabNav, CountBadge, UiButton, FormField, TextInput, SelectInput,
TextareaInput, CheckboxInput, RadioGroup, ToggleSwitch and UiModal, with
their demo on /_ds and unit tests. ConfirmDialog is rebuilt on UiModal and
UiButton with an unchanged API.

ESLint now warns on raw input, select, textarea and button elements outside
components/ui, pointing to the shared component to use.
---
 frontend/eslint.config.ts                     |  15 ++
 frontend/src/components/ui/CheckboxInput.vue  |  69 +++++++
 frontend/src/components/ui/ConfirmDialog.vue  | 124 ++-----------
 frontend/src/components/ui/CountBadge.vue     |  40 ++++
 frontend/src/components/ui/FormField.vue      |  43 +++++
 frontend/src/components/ui/RadioGroup.vue     |  55 ++++++
 frontend/src/components/ui/SelectInput.vue    |  51 +++++
 frontend/src/components/ui/TabNav.vue         |  77 ++++++++
 frontend/src/components/ui/TextInput.vue      |  49 +++++
 frontend/src/components/ui/TextareaInput.vue  |  38 ++++
 frontend/src/components/ui/ToggleSwitch.vue   |  55 ++++++
 frontend/src/components/ui/UiButton.vue       |  61 ++++++
 frontend/src/components/ui/UiModal.vue        | 103 +++++++++++
 .../ui/__tests__/CheckboxInput.spec.ts        |  30 +++
 .../ui/__tests__/ConfirmDialog.spec.ts        |  49 +++++
 .../ui/__tests__/CountBadge.spec.ts           |  26 +++
 .../components/ui/__tests__/FormField.spec.ts |  56 ++++++
 .../ui/__tests__/RadioGroup.spec.ts           |  41 +++++
 .../ui/__tests__/SelectInput.spec.ts          |  33 ++++
 .../components/ui/__tests__/TabNav.spec.ts    |  44 +++++
 .../components/ui/__tests__/TextInput.spec.ts |  36 ++++
 .../ui/__tests__/TextareaInput.spec.ts        |  29 +++
 .../ui/__tests__/ToggleSwitch.spec.ts         |  38 ++++
 .../components/ui/__tests__/UiButton.spec.ts  |  44 +++++
 .../components/ui/__tests__/UiModal.spec.ts   |  56 ++++++
 frontend/src/pages/DesignSystemPage.vue       | 174 +++++++++++++++++-
 26 files changed, 1330 insertions(+), 106 deletions(-)
 create mode 100644 frontend/src/components/ui/CheckboxInput.vue
 create mode 100644 frontend/src/components/ui/CountBadge.vue
 create mode 100644 frontend/src/components/ui/FormField.vue
 create mode 100644 frontend/src/components/ui/RadioGroup.vue
 create mode 100644 frontend/src/components/ui/SelectInput.vue
 create mode 100644 frontend/src/components/ui/TabNav.vue
 create mode 100644 frontend/src/components/ui/TextInput.vue
 create mode 100644 frontend/src/components/ui/TextareaInput.vue
 create mode 100644 frontend/src/components/ui/ToggleSwitch.vue
 create mode 100644 frontend/src/components/ui/UiButton.vue
 create mode 100644 frontend/src/components/ui/UiModal.vue
 create mode 100644 frontend/src/components/ui/__tests__/CheckboxInput.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/ConfirmDialog.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/CountBadge.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/FormField.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/RadioGroup.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/SelectInput.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/TabNav.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/TextInput.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/TextareaInput.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/ToggleSwitch.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/UiButton.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/UiModal.spec.ts

diff --git a/frontend/eslint.config.ts b/frontend/eslint.config.ts
index 4e90ef70..2937183e 100644
--- a/frontend/eslint.config.ts
+++ b/frontend/eslint.config.ts
@@ -26,6 +26,21 @@ export default defineConfigWithVueTs(
     files: ['src/**/__tests__/*'],
   },
 
+  {
+    name: 'app/shared-ui-components',
+    files: ['src/**/*.vue'],
+    ignores: ['src/components/ui/**', 'src/**/__tests__/**'],
+    rules: {
+      'vue/no-restricted-html-elements': [
+        'warn',
+        { element: 'input', message: 'Use the shared TextInput, CheckboxInput, or RadioGroup component instead of a raw <input>.' },
+        { element: 'select', message: 'Use the shared SelectInput component instead of a raw <select>.' },
+        { element: 'textarea', message: 'Use the shared TextareaInput component instead of a raw <textarea>.' },
+        { element: 'button', message: 'Use the shared UiButton, ToggleSwitch, or TabNav component instead of a raw <button>.' },
+      ],
+    },
+  },
+
   ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
 
   skipFormatting,
diff --git a/frontend/src/components/ui/CheckboxInput.vue b/frontend/src/components/ui/CheckboxInput.vue
new file mode 100644
index 00000000..25e619d2
--- /dev/null
+++ b/frontend/src/components/ui/CheckboxInput.vue
@@ -0,0 +1,69 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  label?: string
+  hint?: string
+  disabled?: boolean
+  value?: string | number
+}>()
+
+const model = defineModel<boolean | (string | number)[]>({ default: false })
+
+const isChecked = computed(() => {
+  if (Array.isArray(model.value)) {
+    return props.value !== undefined && model.value.includes(props.value)
+  }
+  return !!model.value
+})
+
+function onChange(event: Event) {
+  const checked = (event.target as HTMLInputElement).checked
+  if (Array.isArray(model.value)) {
+    if (checked) {
+      model.value =
+        props.value !== undefined && !model.value.includes(props.value)
+          ? [...model.value, props.value]
+          : model.value
+    } else {
+      model.value = model.value.filter((v) => v !== props.value)
+    }
+  } else {
+    model.value = checked
+  }
+}
+</script>
+
+<template>
+  <div>
+    <label class="inline-flex items-center gap-2" :class="disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'">
+      <input
+        v-bind="$attrs"
+        type="checkbox"
+        :checked="isChecked"
+        :disabled="disabled"
+        class="h-4 w-4 accent-[var(--mnt-accent)]"
+        @change="onChange"
+      />
+      <span v-if="label || $slots.default" class="text-sm text-mnt-secondary">
+        <slot>{{ label }}</slot>
+      </span>
+    </label>
+    <p v-if="hint" class="mt-1 text-xs text-mnt-muted">{{ hint }}</p>
+  </div>
+</template>
diff --git a/frontend/src/components/ui/ConfirmDialog.vue b/frontend/src/components/ui/ConfirmDialog.vue
index e8ee0b88..8fa01216 100644
--- a/frontend/src/components/ui/ConfirmDialog.vue
+++ b/frontend/src/components/ui/ConfirmDialog.vue
@@ -12,123 +12,37 @@
 -->
 
 <script setup lang="ts">
-import { watch, ref, nextTick } from 'vue'
+import { computed } from 'vue'
 import type { ConfirmState } from '@/composables/useConfirm'
+import UiModal from './UiModal.vue'
+import UiButton from './UiButton.vue'
 
 const props = defineProps<{
   state: ConfirmState | null
 }>()
 
-const cancelRef = ref<HTMLButtonElement | null>(null)
-
-watch(() => props.state, async (s) => {
-  if (s) {
-    document.body.style.overflow = 'hidden'
-    await nextTick()
-    cancelRef.value?.focus()
-  } else {
-    document.body.style.overflow = ''
-  }
+const open = computed({
+  get: () => props.state !== null,
+  set: (value: boolean) => {
+    if (!value) props.state?.resolve(false)
+  },
 })
 
 function resolve(value: boolean) {
   props.state?.resolve(value)
 }
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') {
-    resolve(false)
-  }
-}
 </script>
 
 <template>
-  <Teleport to="body">
-    <Transition name="confirm-fade">
-      <div
-        v-if="state"
-        class="fixed inset-0 z-[10001] flex items-center justify-center"
-        @keydown="handleKeydown"
-      >
-        <!-- Overlay -->
-        <div
-          class="fixed inset-0 bg-black/70 backdrop-blur-sm"
-          @click="resolve(false)"
-        />
-
-        <!-- Dialog -->
-        <div
-          class="relative mx-4 w-full max-w-sm overflow-hidden"
-          :style="{
-            backgroundColor: 'var(--mnt-bg-surface)',
-            border: '1px solid var(--mnt-border-default)',
-            borderRadius: 'var(--mnt-radius-lg)',
-            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
-          }"
-          role="alertdialog"
-          aria-modal="true"
-          :aria-labelledby="state.title ? 'confirm-title' : undefined"
-          :aria-describedby="state.message ? 'confirm-message' : undefined"
-        >
-          <div class="p-5">
-            <h3
-              id="confirm-title"
-              class="text-sm font-semibold"
-              :style="{ color: 'var(--mnt-text-primary)' }"
-            >
-              {{ state.title }}
-            </h3>
-            <p
-              id="confirm-message"
-              class="mt-2 text-sm leading-relaxed"
-              :style="{ color: 'var(--mnt-text-muted)' }"
-            >
-              {{ state.message }}
-            </p>
-          </div>
-
-          <div
-            class="flex items-center justify-end gap-2 px-5 py-3"
-            :style="{ borderTop: '1px solid var(--mnt-border-default)' }"
-          >
-            <button
-              ref="cancelRef"
-              class="cursor-pointer rounded-lg px-3 py-1.5 text-sm font-medium transition-colors min-h-[36px]"
-              :style="{
-                color: 'var(--mnt-text-secondary)',
-                backgroundColor: 'transparent',
-                border: '1px solid var(--mnt-border-default)',
-              }"
-              @click="resolve(false)"
-            >
-              {{ state.cancelLabel || 'Cancel' }}
-            </button>
-            <button
-              class="cursor-pointer rounded-lg px-3 py-1.5 text-sm font-medium transition-colors min-h-[36px]"
-              :style="{
-                color: state.destructive ? '#fff' : 'var(--mnt-text-inverted)',
-                backgroundColor: state.destructive ? 'var(--mnt-status-down)' : 'var(--mnt-accent)',
-              }"
-              @click="resolve(true)"
-            >
-              {{ state.confirmLabel || 'Confirm' }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
+  <UiModal v-if="state" v-model:open="open" :title="state.title" size="sm">
+    <p class="text-sm leading-relaxed text-mnt-muted">{{ state.message }}</p>
+    <template #footer>
+      <UiButton variant="secondary" @click="resolve(false)">
+        {{ state.cancelLabel || 'Cancel' }}
+      </UiButton>
+      <UiButton :variant="state.destructive ? 'danger' : 'primary'" @click="resolve(true)">
+        {{ state.confirmLabel || 'Confirm' }}
+      </UiButton>
+    </template>
+  </UiModal>
 </template>
-
-<style scoped>
-.confirm-fade-enter-active {
-  transition: opacity 0.15s ease-out;
-}
-.confirm-fade-leave-active {
-  transition: opacity 0.1s ease-in;
-}
-.confirm-fade-enter-from,
-.confirm-fade-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/frontend/src/components/ui/CountBadge.vue b/frontend/src/components/ui/CountBadge.vue
new file mode 100644
index 00000000..a2197df4
--- /dev/null
+++ b/frontend/src/components/ui/CountBadge.vue
@@ -0,0 +1,40 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+export type CountTone = 'neutral' | 'warn' | 'danger' | 'ok'
+
+withDefaults(
+  defineProps<{
+    value: number | string
+    tone?: CountTone
+  }>(),
+  { tone: 'neutral' },
+)
+
+const toneClasses: Record<CountTone, string> = {
+  neutral: 'bg-mnt-elevated text-mnt-muted',
+  warn: 'bg-mnt-status-warn text-mnt-status-warn',
+  danger: 'bg-mnt-status-down text-mnt-status-down',
+  ok: 'bg-mnt-status-ok text-mnt-status-ok',
+}
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums"
+    :class="toneClasses[tone]"
+  >
+    {{ value }}
+  </span>
+</template>
diff --git a/frontend/src/components/ui/FormField.vue b/frontend/src/components/ui/FormField.vue
new file mode 100644
index 00000000..ff4c367c
--- /dev/null
+++ b/frontend/src/components/ui/FormField.vue
@@ -0,0 +1,43 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+
+const props = defineProps<{
+  label: string
+  hint?: string
+  error?: string
+  required?: boolean
+  id?: string
+}>()
+
+const autoId = useId()
+const fieldId = computed(() => props.id ?? autoId)
+const describedBy = computed(() => {
+  if (props.error) return `${fieldId.value}-error`
+  if (props.hint) return `${fieldId.value}-hint`
+  return undefined
+})
+</script>
+
+<template>
+  <div>
+    <label :for="fieldId" class="mb-1 block text-xs font-medium text-mnt-secondary">
+      {{ label }}<span v-if="required" class="text-mnt-status-down"> *</span>
+    </label>
+    <slot :id="fieldId" :describedBy="describedBy" :invalid="!!error" />
+    <p v-if="error" :id="`${fieldId}-error`" class="mt-1 text-xs text-mnt-status-down">{{ error }}</p>
+    <p v-else-if="hint" :id="`${fieldId}-hint`" class="mt-1 text-xs text-mnt-muted">{{ hint }}</p>
+  </div>
+</template>
diff --git a/frontend/src/components/ui/RadioGroup.vue b/frontend/src/components/ui/RadioGroup.vue
new file mode 100644
index 00000000..32368b02
--- /dev/null
+++ b/frontend/src/components/ui/RadioGroup.vue
@@ -0,0 +1,55 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+
+export interface RadioOption {
+  value: string | number
+  label: string
+  hint?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    options: RadioOption[]
+    name?: string
+    ariaLabel?: string
+    inline?: boolean
+  }>(),
+  { inline: false },
+)
+
+const model = defineModel<string | number | null>({ default: null })
+
+const autoName = useId()
+const groupName = computed(() => props.name ?? autoName)
+</script>
+
+<template>
+  <div role="radiogroup" :aria-label="ariaLabel" :class="inline ? 'flex flex-wrap gap-4' : 'flex flex-col gap-2'">
+    <label v-for="opt in options" :key="opt.value" class="inline-flex cursor-pointer items-start gap-2">
+      <input
+        v-model="model"
+        type="radio"
+        :name="groupName"
+        :value="opt.value"
+        class="mt-0.5 h-4 w-4 accent-[var(--mnt-accent)]"
+      />
+      <span>
+        <span class="block text-sm text-mnt-secondary">{{ opt.label }}</span>
+        <span v-if="opt.hint" class="block text-xs text-mnt-muted">{{ opt.hint }}</span>
+      </span>
+    </label>
+  </div>
+</template>
diff --git a/frontend/src/components/ui/SelectInput.vue b/frontend/src/components/ui/SelectInput.vue
new file mode 100644
index 00000000..251f5a5f
--- /dev/null
+++ b/frontend/src/components/ui/SelectInput.vue
@@ -0,0 +1,51 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+export interface SelectOption {
+  value: string | number
+  label: string
+  disabled?: boolean
+}
+
+withDefaults(
+  defineProps<{
+    options?: SelectOption[]
+    invalid?: boolean
+    size?: 'md' | 'sm'
+  }>(),
+  { options: () => [], invalid: false, size: 'md' },
+)
+
+const model = defineModel<string | number | null>({ default: '' })
+</script>
+
+<template>
+  <select
+    v-bind="$attrs"
+    v-model="model"
+    :aria-invalid="invalid || undefined"
+    class="focus-ring w-full rounded-lg border bg-mnt-elevated text-mnt-primary disabled:cursor-not-allowed disabled:opacity-60"
+    :class="[
+      invalid ? 'border-[var(--mnt-status-down-text)]' : 'border-mnt-default',
+      size === 'md' ? 'min-h-[44px] px-3 text-sm' : 'px-3 py-1.5 text-xs',
+    ]"
+  >
+    <option v-for="opt in options" :key="opt.value" :value="opt.value" :disabled="opt.disabled">
+      {{ opt.label }}
+    </option>
+    <slot />
+  </select>
+</template>
diff --git a/frontend/src/components/ui/TabNav.vue b/frontend/src/components/ui/TabNav.vue
new file mode 100644
index 00000000..034775f1
--- /dev/null
+++ b/frontend/src/components/ui/TabNav.vue
@@ -0,0 +1,77 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import CountBadge, { type CountTone } from './CountBadge.vue'
+
+export interface TabNavItem {
+  value: string
+  label: string
+  count?: number
+  countTone?: Exclude<CountTone, 'ok'>
+}
+
+const props = defineProps<{
+  items: TabNavItem[]
+  ariaLabel: string
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const tabRefs = ref<(HTMLButtonElement | null)[]>([])
+
+function focusTab(index: number) {
+  const item = props.items[index]
+  if (!item) return
+  model.value = item.value
+  tabRefs.value[index]?.focus()
+}
+
+function onKeydown(event: KeyboardEvent, index: number) {
+  const lastIndex = props.items.length - 1
+  if (event.key === 'ArrowRight') focusTab(index === lastIndex ? 0 : index + 1)
+  else if (event.key === 'ArrowLeft') focusTab(index === 0 ? lastIndex : index - 1)
+  else if (event.key === 'Home') focusTab(0)
+  else if (event.key === 'End') focusTab(lastIndex)
+  else return
+  event.preventDefault()
+}
+</script>
+
+<template>
+  <div class="border-b border-mnt-default">
+    <div role="tablist" :aria-label="ariaLabel" class="-mb-px flex gap-6 overflow-x-auto">
+      <button
+        v-for="(item, index) in items"
+        :key="item.value"
+        :ref="(el) => (tabRefs[index] = el as HTMLButtonElement | null)"
+        type="button"
+        role="tab"
+        :aria-selected="model === item.value"
+        :tabindex="model === item.value ? 0 : -1"
+        class="focus-ring inline-flex min-h-[44px] shrink-0 items-center gap-1.5 whitespace-nowrap border-b-2 pb-2 text-sm font-medium transition-colors"
+        :class="
+          model === item.value
+            ? 'border-mnt-accent text-mnt-accent'
+            : 'border-transparent text-mnt-muted hover:text-mnt-primary'
+        "
+        @click="focusTab(index)"
+        @keydown="onKeydown($event, index)"
+      >
+        {{ item.label }}
+        <CountBadge v-if="item.count !== undefined" :value="item.count" :tone="item.countTone ?? 'neutral'" />
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/ui/TextInput.vue b/frontend/src/components/ui/TextInput.vue
new file mode 100644
index 00000000..0d844ff8
--- /dev/null
+++ b/frontend/src/components/ui/TextInput.vue
@@ -0,0 +1,49 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'text' | 'email' | 'password' | 'number' | 'url' | 'datetime-local' | 'time'
+    invalid?: boolean
+    mono?: boolean
+    size?: 'md' | 'sm'
+  }>(),
+  { type: 'text', invalid: false, mono: false, size: 'md' },
+)
+
+const model = defineModel<string | number | null>({ default: '' })
+
+function onInput(event: Event) {
+  const raw = (event.target as HTMLInputElement).value
+  model.value = props.type === 'number' ? (raw === '' ? null : Number(raw)) : raw
+}
+</script>
+
+<template>
+  <input
+    v-bind="$attrs"
+    :type="type"
+    :value="model ?? ''"
+    :aria-invalid="invalid || undefined"
+    class="focus-ring w-full rounded-lg border bg-mnt-elevated text-mnt-primary placeholder:text-mnt-muted disabled:cursor-not-allowed disabled:opacity-60"
+    :class="[
+      invalid ? 'border-[var(--mnt-status-down-text)]' : 'border-mnt-default',
+      mono ? 'font-mono' : '',
+      size === 'md' ? 'min-h-[44px] px-3 text-sm' : 'px-3 py-1.5 text-xs',
+    ]"
+    @input="onInput"
+  />
+</template>
diff --git a/frontend/src/components/ui/TextareaInput.vue b/frontend/src/components/ui/TextareaInput.vue
new file mode 100644
index 00000000..ca5ff19c
--- /dev/null
+++ b/frontend/src/components/ui/TextareaInput.vue
@@ -0,0 +1,38 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    rows?: number
+    invalid?: boolean
+    mono?: boolean
+  }>(),
+  { rows: 3, invalid: false, mono: false },
+)
+
+const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <textarea
+    v-bind="$attrs"
+    v-model="model"
+    :rows="rows"
+    :aria-invalid="invalid || undefined"
+    class="focus-ring w-full rounded-lg border bg-mnt-elevated px-3 py-2 text-sm text-mnt-primary placeholder:text-mnt-muted disabled:cursor-not-allowed disabled:opacity-60"
+    :class="[invalid ? 'border-[var(--mnt-status-down-text)]' : 'border-mnt-default', mono ? 'font-mono' : '']"
+  />
+</template>
diff --git a/frontend/src/components/ui/ToggleSwitch.vue b/frontend/src/components/ui/ToggleSwitch.vue
new file mode 100644
index 00000000..069397d3
--- /dev/null
+++ b/frontend/src/components/ui/ToggleSwitch.vue
@@ -0,0 +1,55 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label: string
+    disabled?: boolean
+    size?: 'md' | 'sm'
+    showLabel?: boolean
+  }>(),
+  { disabled: false, size: 'md', showLabel: false },
+)
+
+const model = defineModel<boolean>({ default: false })
+
+function toggle() {
+  model.value = !model.value
+}
+</script>
+
+<template>
+  <span class="inline-flex items-center gap-2">
+    <button
+      type="button"
+      role="switch"
+      :aria-checked="model"
+      :aria-label="label"
+      :disabled="disabled"
+      class="focus-ring relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+      :class="[model ? 'bg-[var(--mnt-accent)]' : 'bg-mnt-elevated', size === 'md' ? 'h-6 w-11' : 'h-5 w-9']"
+      @click.stop="toggle"
+    >
+      <span
+        class="pointer-events-none inline-block transform rounded-full shadow-mnt-card transition-transform"
+        :class="[
+          model ? 'bg-[var(--mnt-text-inverted)]' : 'bg-mnt-primary',
+          size === 'md' ? 'h-5 w-5' : 'h-4 w-4',
+          model ? (size === 'md' ? 'translate-x-5' : 'translate-x-4') : 'translate-x-0',
+        ]"
+      />
+    </button>
+    <span v-if="showLabel" class="text-sm text-mnt-secondary">{{ label }}</span>
+  </span>
+</template>
diff --git a/frontend/src/components/ui/UiButton.vue b/frontend/src/components/ui/UiButton.vue
new file mode 100644
index 00000000..cdcf6026
--- /dev/null
+++ b/frontend/src/components/ui/UiButton.vue
@@ -0,0 +1,61 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { Loader2 } from 'lucide-vue-next'
+
+type Variant = 'primary' | 'secondary' | 'danger' | 'ghost'
+
+withDefaults(
+  defineProps<{
+    variant?: Variant
+    size?: 'md' | 'sm'
+    type?: 'button' | 'submit' | 'reset'
+    loading?: boolean
+    disabled?: boolean
+    icon?: Component
+  }>(),
+  {
+    variant: 'secondary',
+    size: 'md',
+    type: 'button',
+    loading: false,
+    disabled: false,
+    icon: undefined,
+  },
+)
+
+const variantClasses: Record<Variant, string> = {
+  primary: 'bg-[var(--mnt-accent)] text-mnt-inverted hover:bg-[var(--mnt-accent-hover)]',
+  secondary: 'border border-mnt-default text-mnt-secondary hover:bg-mnt-elevated',
+  danger: 'bg-[var(--mnt-status-down)] text-mnt-inverted hover:opacity-90',
+  ghost: 'text-mnt-muted hover:bg-mnt-elevated hover:text-mnt-primary',
+}
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    class="focus-ring inline-flex items-center justify-center gap-1.5 rounded-lg font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+    :class="[
+      variantClasses[variant],
+      size === 'md' ? 'min-h-[44px] px-4 text-sm' : 'min-h-[32px] px-2.5 py-1 text-xs',
+    ]"
+  >
+    <Loader2 v-if="loading" :size="size === 'md' ? 16 : 14" class="animate-spin" aria-hidden="true" />
+    <component :is="icon" v-else-if="icon" :size="size === 'md' ? 16 : 14" aria-hidden="true" />
+    <slot />
+  </button>
+</template>
diff --git a/frontend/src/components/ui/UiModal.vue b/frontend/src/components/ui/UiModal.vue
new file mode 100644
index 00000000..cc5a5aa1
--- /dev/null
+++ b/frontend/src/components/ui/UiModal.vue
@@ -0,0 +1,103 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, useId } from 'vue'
+import { useFocusTrap } from '@/composables/useFocusTrap'
+import { X } from 'lucide-vue-next'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    size?: 'sm' | 'md' | 'lg'
+    dismissible?: boolean
+  }>(),
+  { size: 'md', dismissible: true },
+)
+
+const open = defineModel<boolean>('open', { default: false })
+
+const titleId = useId()
+const panelRef = ref<HTMLElement | null>(null)
+const isActive = ref(false)
+
+useFocusTrap(panelRef, isActive)
+
+function applyOpenState(val: boolean) {
+  isActive.value = val
+  document.body.style.overflow = val ? 'hidden' : ''
+}
+
+// An immediate post-flush watcher runs before the first render: the initial open is handled in onMounted.
+watch(open, applyOpenState, { flush: 'post' })
+
+onMounted(() => {
+  if (open.value) applyOpenState(true)
+})
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
+
+function requestClose() {
+  open.value = false
+}
+
+function dismiss() {
+  if (props.dismissible) requestClose()
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') dismiss()
+}
+
+const sizeClass: Record<'sm' | 'md' | 'lg', string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="fixed inset-0 z-[10001] flex items-center justify-center p-4" @keydown="handleKeydown">
+      <div class="fixed inset-0 bg-black/70 backdrop-blur-sm" @click="dismiss" />
+      <div
+        ref="panelRef"
+        class="relative w-full overflow-hidden rounded-xl border border-mnt-default bg-mnt-surface shadow-mnt-elevated"
+        :class="sizeClass[size]"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="titleId"
+      >
+        <div class="flex items-center justify-between border-b border-mnt-default px-5 py-4">
+          <h2 :id="titleId" class="text-sm font-semibold text-mnt-primary">{{ title }}</h2>
+          <button
+            type="button"
+            class="focus-ring flex h-8 w-8 items-center justify-center rounded-lg text-mnt-muted transition-colors hover:bg-mnt-elevated hover:text-mnt-primary"
+            aria-label="Close dialog"
+            @click="requestClose"
+          >
+            <X :size="18" aria-hidden="true" />
+          </button>
+        </div>
+        <div class="max-h-[70vh] overflow-y-auto px-5 py-4">
+          <slot />
+        </div>
+        <div v-if="$slots.footer" class="flex items-center justify-end gap-2 border-t border-mnt-default px-5 py-4">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/frontend/src/components/ui/__tests__/CheckboxInput.spec.ts b/frontend/src/components/ui/__tests__/CheckboxInput.spec.ts
new file mode 100644
index 00000000..b59442e8
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/CheckboxInput.spec.ts
@@ -0,0 +1,30 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+
+describe('CheckboxInput', () => {
+  it('round-trips a boolean model', async () => {
+    const wrapper = mount(CheckboxInput, { props: { label: 'Accept', modelValue: false } })
+    expect(wrapper.find('input').element.checked).toBe(false)
+    await wrapper.find('input').setValue(true)
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+  })
+
+  it('adds its value to an array model when checked', async () => {
+    const wrapper = mount(CheckboxInput, { props: { label: 'One', value: 'one', modelValue: [] } })
+    await wrapper.find('input').setValue(true)
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['one']])
+  })
+
+  it('removes its value from an array model when unchecked', async () => {
+    const wrapper = mount(CheckboxInput, { props: { label: 'One', value: 'one', modelValue: ['one', 'two'] } })
+    expect(wrapper.find('input').element.checked).toBe(true)
+    await wrapper.find('input').setValue(false)
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['two']])
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/ConfirmDialog.spec.ts b/frontend/src/components/ui/__tests__/ConfirmDialog.spec.ts
new file mode 100644
index 00000000..c33b972b
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/ConfirmDialog.spec.ts
@@ -0,0 +1,49 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import ConfirmDialog from '@/components/ui/ConfirmDialog.vue'
+import type { ConfirmState } from '@/composables/useConfirm'
+
+function makeState(overrides: Partial<ConfirmState> = {}): ConfirmState {
+  return {
+    title: 'Delete item',
+    message: 'This cannot be undone.',
+    resolve: vi.fn(),
+    ...overrides,
+  }
+}
+
+let wrapper: VueWrapper | undefined
+
+afterEach(() => {
+  wrapper?.unmount()
+  wrapper = undefined
+  document.body.style.overflow = ''
+})
+
+describe('ConfirmDialog', () => {
+  it('renders nothing when state is null', () => {
+    wrapper = mount(ConfirmDialog, { props: { state: null }, attachTo: document.body })
+    expect(document.querySelector('[role="dialog"]')).toBeNull()
+  })
+
+  it('renders the title and message when state is set', () => {
+    const state = makeState()
+    wrapper = mount(ConfirmDialog, { props: { state }, attachTo: document.body })
+    expect(document.querySelector('[role="dialog"]')?.textContent).toContain('Delete item')
+    expect(document.querySelector('[role="dialog"]')?.textContent).toContain('This cannot be undone.')
+  })
+
+  it('resolves false on cancel and true on confirm', () => {
+    const state = makeState()
+    wrapper = mount(ConfirmDialog, { props: { state }, attachTo: document.body })
+    const buttons = document.querySelectorAll('[role="dialog"] button')
+    const cancelButton = Array.from(buttons).find((b) => b.textContent?.trim() === 'Cancel')
+    cancelButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(state.resolve).toHaveBeenCalledWith(false)
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/CountBadge.spec.ts b/frontend/src/components/ui/__tests__/CountBadge.spec.ts
new file mode 100644
index 00000000..eb89724f
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/CountBadge.spec.ts
@@ -0,0 +1,26 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CountBadge from '@/components/ui/CountBadge.vue'
+
+describe('CountBadge', () => {
+  it('renders the value', () => {
+    const wrapper = mount(CountBadge, { props: { value: 7 } })
+    expect(wrapper.text()).toBe('7')
+  })
+
+  it('defaults to the neutral tone', () => {
+    const wrapper = mount(CountBadge, { props: { value: 1 } })
+    expect(wrapper.classes()).toContain('bg-mnt-elevated')
+  })
+
+  it('applies the danger tone', () => {
+    const wrapper = mount(CountBadge, { props: { value: 3, tone: 'danger' } })
+    expect(wrapper.classes()).toContain('bg-mnt-status-down')
+    expect(wrapper.classes()).toContain('text-mnt-status-down')
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/FormField.spec.ts b/frontend/src/components/ui/__tests__/FormField.spec.ts
new file mode 100644
index 00000000..e3f77474
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/FormField.spec.ts
@@ -0,0 +1,56 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import FormField from '@/components/ui/FormField.vue'
+
+interface SlotProps {
+  id: string
+  describedBy?: string
+  invalid: boolean
+}
+
+describe('FormField', () => {
+  it('wires the label for and the slot id together', () => {
+    const wrapper = mount(FormField, {
+      props: { label: 'Name' },
+      slots: { default: (props: SlotProps) => h('input', { id: props.id }) },
+    })
+    const labelFor = wrapper.find('label').attributes('for')
+    expect(labelFor).toBeTruthy()
+    expect(wrapper.find('input').attributes('id')).toBe(labelFor)
+  })
+
+  it('uses the given id instead of generating one', () => {
+    const wrapper = mount(FormField, {
+      props: { label: 'Name', id: 'custom-id' },
+      slots: { default: (props: SlotProps) => h('input', { id: props.id }) },
+    })
+    expect(wrapper.find('label').attributes('for')).toBe('custom-id')
+    expect(wrapper.find('input').attributes('id')).toBe('custom-id')
+  })
+
+  it('exposes describedBy pointing at the hint when there is no error', () => {
+    const wrapper = mount(FormField, {
+      props: { label: 'Name', hint: 'Pick something short' },
+      slots: { default: (props: SlotProps) => h('input', { 'aria-describedby': props.describedBy }) },
+    })
+    const describedBy = wrapper.find('input').attributes('aria-describedby')
+    expect(describedBy).toBeTruthy()
+    expect(wrapper.find(`#${describedBy}`).text()).toBe('Pick something short')
+  })
+
+  it('shows the error instead of the hint, and marks the field invalid', () => {
+    const wrapper = mount(FormField, {
+      props: { label: 'Name', hint: 'Pick something short', error: 'Required' },
+      slots: { default: (props: SlotProps) => h('input', { 'aria-invalid': props.invalid }) },
+    })
+    expect(wrapper.text()).toContain('Required')
+    expect(wrapper.text()).not.toContain('Pick something short')
+    expect(wrapper.find('input').attributes('aria-invalid')).toBe('true')
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/RadioGroup.spec.ts b/frontend/src/components/ui/__tests__/RadioGroup.spec.ts
new file mode 100644
index 00000000..8f830758
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/RadioGroup.spec.ts
@@ -0,0 +1,41 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RadioGroup from '@/components/ui/RadioGroup.vue'
+
+const options = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B', hint: 'The second one' },
+]
+
+describe('RadioGroup', () => {
+  it('checks the radio matching the model', () => {
+    const wrapper = mount(RadioGroup, { props: { options, modelValue: 'b' } })
+    const inputs = wrapper.findAll('input[type="radio"]')
+    const checked = (i: (typeof inputs)[number] | undefined) => (i?.element as HTMLInputElement).checked
+    expect(checked(inputs[0])).toBe(false)
+    expect(checked(inputs[1])).toBe(true)
+  })
+
+  it('shares one generated name across all radios', () => {
+    const wrapper = mount(RadioGroup, { props: { options, modelValue: 'a' } })
+    const names = wrapper.findAll('input[type="radio"]').map((i) => i.attributes('name'))
+    expect(names[0]).toBeTruthy()
+    expect(names[0]).toBe(names[1])
+  })
+
+  it('emits the selected value on change', async () => {
+    const wrapper = mount(RadioGroup, { props: { options, modelValue: 'a' } })
+    await wrapper.findAll('input[type="radio"]')[1]?.setValue()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['b'])
+  })
+
+  it('exposes the radiogroup role', () => {
+    const wrapper = mount(RadioGroup, { props: { options, modelValue: 'a', ariaLabel: 'Pick one' } })
+    expect(wrapper.find('[role="radiogroup"]').attributes('aria-label')).toBe('Pick one')
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/SelectInput.spec.ts b/frontend/src/components/ui/__tests__/SelectInput.spec.ts
new file mode 100644
index 00000000..57483208
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/SelectInput.spec.ts
@@ -0,0 +1,33 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SelectInput from '@/components/ui/SelectInput.vue'
+
+const options = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B' },
+  { value: 'c', label: 'Option C', disabled: true },
+]
+
+describe('SelectInput', () => {
+  it('renders options and round-trips the model', async () => {
+    const wrapper = mount(SelectInput, { props: { options, modelValue: 'a' } })
+    expect(wrapper.findAll('option')).toHaveLength(3)
+    await wrapper.find('select').setValue('b')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['b'])
+  })
+
+  it('marks disabled options', () => {
+    const wrapper = mount(SelectInput, { props: { options, modelValue: 'a' } })
+    expect(wrapper.findAll('option')[2]?.attributes('disabled')).toBeDefined()
+  })
+
+  it('marks the field invalid', () => {
+    const wrapper = mount(SelectInput, { props: { options, modelValue: 'a', invalid: true } })
+    expect(wrapper.find('select').attributes('aria-invalid')).toBe('true')
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/TabNav.spec.ts b/frontend/src/components/ui/__tests__/TabNav.spec.ts
new file mode 100644
index 00000000..74fff661
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/TabNav.spec.ts
@@ -0,0 +1,44 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TabNav, { type TabNavItem } from '@/components/ui/TabNav.vue'
+
+const items: TabNavItem[] = [
+  { value: 'history', label: 'History' },
+  { value: 'triggers', label: 'Triggers', count: 4 },
+  { value: 'silence', label: 'Silence', count: 2, countTone: 'warn' },
+]
+
+describe('TabNav', () => {
+  it('marks the active tab with aria-selected', () => {
+    const wrapper = mount(TabNav, { props: { items, ariaLabel: 'Demo tabs', modelValue: 'triggers' } })
+    const tabs = wrapper.findAll('[role="tab"]')
+    expect(tabs[0]?.attributes('aria-selected')).toBe('false')
+    expect(tabs[1]?.attributes('aria-selected')).toBe('true')
+  })
+
+  it('renders counts via CountBadge', () => {
+    const wrapper = mount(TabNav, { props: { items, ariaLabel: 'Demo tabs', modelValue: 'history' } })
+    expect(wrapper.findAll('[role="tab"]')[1]?.text()).toContain('4')
+  })
+
+  it('updates the model on click', async () => {
+    const wrapper = mount(TabNav, { props: { items, ariaLabel: 'Demo tabs', modelValue: 'history' } })
+    await wrapper.findAll('[role="tab"]')[2]?.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['silence'])
+  })
+
+  it('moves selection with ArrowRight/ArrowLeft, wrapping at the ends', async () => {
+    const wrapper = mount(TabNav, { props: { items, ariaLabel: 'Demo tabs', modelValue: 'silence' } })
+    const tabs = wrapper.findAll('[role="tab"]')
+    await tabs[2]?.trigger('keydown', { key: 'ArrowRight' })
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['history'])
+
+    await tabs[0]?.trigger('keydown', { key: 'ArrowLeft' })
+    expect(wrapper.emitted('update:modelValue')?.[1]).toEqual(['silence'])
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/TextInput.spec.ts b/frontend/src/components/ui/__tests__/TextInput.spec.ts
new file mode 100644
index 00000000..374e4a21
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/TextInput.spec.ts
@@ -0,0 +1,36 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TextInput from '@/components/ui/TextInput.vue'
+
+describe('TextInput', () => {
+  it('round-trips a string value', async () => {
+    const wrapper = mount(TextInput, { props: { modelValue: 'hello' } })
+    expect(wrapper.find('input').element.value).toBe('hello')
+    await wrapper.find('input').setValue('world')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['world'])
+  })
+
+  it('emits a number for type=number, and null when cleared', async () => {
+    const wrapper = mount(TextInput, { props: { type: 'number', modelValue: 1 } })
+    await wrapper.find('input').setValue('42')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([42])
+    await wrapper.find('input').setValue('')
+    expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([null])
+  })
+
+  it('marks the field invalid and passes through attrs', () => {
+    const wrapper = mount(TextInput, {
+      props: { modelValue: '', invalid: true },
+      attrs: { placeholder: 'Search', 'aria-describedby': 'hint-1' },
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('aria-invalid')).toBe('true')
+    expect(input.attributes('placeholder')).toBe('Search')
+    expect(input.attributes('aria-describedby')).toBe('hint-1')
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/TextareaInput.spec.ts b/frontend/src/components/ui/__tests__/TextareaInput.spec.ts
new file mode 100644
index 00000000..b7d51f61
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/TextareaInput.spec.ts
@@ -0,0 +1,29 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TextareaInput from '@/components/ui/TextareaInput.vue'
+
+describe('TextareaInput', () => {
+  it('round-trips the string model', async () => {
+    const wrapper = mount(TextareaInput, { props: { modelValue: 'hello' } })
+    expect(wrapper.find('textarea').element.value).toBe('hello')
+    await wrapper.find('textarea').setValue('world')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['world'])
+  })
+
+  it('defaults to 3 rows and accepts an override', () => {
+    const wrapper = mount(TextareaInput, { props: { modelValue: '' } })
+    expect(wrapper.find('textarea').attributes('rows')).toBe('3')
+    const custom = mount(TextareaInput, { props: { modelValue: '', rows: 6 } })
+    expect(custom.find('textarea').attributes('rows')).toBe('6')
+  })
+
+  it('marks the field invalid', () => {
+    const wrapper = mount(TextareaInput, { props: { modelValue: '', invalid: true } })
+    expect(wrapper.find('textarea').attributes('aria-invalid')).toBe('true')
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/ToggleSwitch.spec.ts b/frontend/src/components/ui/__tests__/ToggleSwitch.spec.ts
new file mode 100644
index 00000000..4d0d39b6
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/ToggleSwitch.spec.ts
@@ -0,0 +1,38 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+
+describe('ToggleSwitch', () => {
+  it('reflects the model in aria-checked', () => {
+    const wrapper = mount(ToggleSwitch, { props: { label: 'Enabled', modelValue: true } })
+    expect(wrapper.find('[role="switch"]').attributes('aria-checked')).toBe('true')
+  })
+
+  it('toggles the model on click', async () => {
+    const wrapper = mount(ToggleSwitch, { props: { label: 'Enabled', modelValue: false } })
+    await wrapper.find('[role="switch"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+  })
+
+  it('uses the label as aria-label and hides it visually by default', () => {
+    const wrapper = mount(ToggleSwitch, { props: { label: 'Enabled', modelValue: false } })
+    expect(wrapper.find('[role="switch"]').attributes('aria-label')).toBe('Enabled')
+    expect(wrapper.text()).not.toContain('Enabled')
+  })
+
+  it('shows the label when showLabel is set', () => {
+    const wrapper = mount(ToggleSwitch, { props: { label: 'Enabled', modelValue: false, showLabel: true } })
+    expect(wrapper.text()).toContain('Enabled')
+  })
+
+  it('does not toggle when disabled', async () => {
+    const wrapper = mount(ToggleSwitch, { props: { label: 'Enabled', modelValue: false, disabled: true } })
+    await wrapper.find('[role="switch"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/UiButton.spec.ts b/frontend/src/components/ui/__tests__/UiButton.spec.ts
new file mode 100644
index 00000000..dd6613ab
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/UiButton.spec.ts
@@ -0,0 +1,44 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import UiButton from '@/components/ui/UiButton.vue'
+
+describe('UiButton', () => {
+  it('renders the default slot and defaults to type=button, variant=secondary', () => {
+    const wrapper = mount(UiButton, { slots: { default: 'Save' } })
+    const button = wrapper.find('button')
+    expect(button.text()).toBe('Save')
+    expect(button.attributes('type')).toBe('button')
+    expect(button.classes()).toContain('border-mnt-default')
+  })
+
+  it('disables and shows a spinner while loading', () => {
+    const wrapper = mount(UiButton, { props: { loading: true }, slots: { default: 'Save' } })
+    const button = wrapper.find('button')
+    expect(button.attributes('disabled')).toBeDefined()
+    expect(wrapper.find('.animate-spin').exists()).toBe(true)
+  })
+
+  it('is disabled when the disabled prop is set', () => {
+    const wrapper = mount(UiButton, { props: { disabled: true } })
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('passes through attrs such as title and aria-label', () => {
+    const wrapper = mount(UiButton, { attrs: { title: 'Delete', 'aria-label': 'Delete item' } })
+    const button = wrapper.find('button')
+    expect(button.attributes('title')).toBe('Delete')
+    expect(button.attributes('aria-label')).toBe('Delete item')
+  })
+
+  it('forwards a native click listener passed as an attr', async () => {
+    const onClick = vi.fn()
+    const wrapper = mount(UiButton, { attrs: { onClick }, slots: { default: 'Save' } })
+    await wrapper.find('button').trigger('click')
+    expect(onClick).toHaveBeenCalledOnce()
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/UiModal.spec.ts b/frontend/src/components/ui/__tests__/UiModal.spec.ts
new file mode 100644
index 00000000..0d37d58a
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/UiModal.spec.ts
@@ -0,0 +1,56 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import UiModal from '@/components/ui/UiModal.vue'
+
+let wrapper: VueWrapper | undefined
+
+afterEach(() => {
+  wrapper?.unmount()
+  wrapper = undefined
+  document.body.style.overflow = ''
+})
+
+describe('UiModal', () => {
+  it('does not render the dialog when closed', () => {
+    wrapper = mount(UiModal, { props: { title: 'Confirm', open: false } })
+    expect(document.querySelector('[role="dialog"]')).toBeNull()
+  })
+
+  it('renders the dialog and moves focus into it when open', async () => {
+    wrapper = mount(UiModal, {
+      props: { title: 'Confirm', open: true },
+      slots: { default: '<button id="inner">OK</button>' },
+      attachTo: document.body,
+    })
+    const dialog = document.querySelector('[role="dialog"]')
+    expect(dialog).not.toBeNull()
+    expect(dialog?.getAttribute('aria-modal')).toBe('true')
+    await vi.waitFor(() => {
+      expect(dialog?.contains(document.activeElement)).toBe(true)
+    })
+  })
+
+  it('closes on Escape when dismissible (the default)', async () => {
+    wrapper = mount(UiModal, { props: { title: 'Confirm', open: true }, attachTo: document.body })
+    document
+      .querySelector('[role="dialog"]')
+      ?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    expect(wrapper.emitted('update:open')?.[0]).toEqual([false])
+  })
+
+  it('ignores Escape when not dismissible', async () => {
+    wrapper = mount(UiModal, {
+      props: { title: 'Confirm', open: true, dismissible: false },
+      attachTo: document.body,
+    })
+    document
+      .querySelector('[role="dialog"]')
+      ?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    expect(wrapper.emitted('update:open')).toBeUndefined()
+  })
+})
diff --git a/frontend/src/pages/DesignSystemPage.vue b/frontend/src/pages/DesignSystemPage.vue
index 21160b8a..b4169c07 100644
--- a/frontend/src/pages/DesignSystemPage.vue
+++ b/frontend/src/pages/DesignSystemPage.vue
@@ -8,7 +8,7 @@
 -->
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { Box, Globe, Shield, Heart, Sun, Moon, ServerOff } from 'lucide-vue-next'
+import { Box, Globe, Shield, Heart, Sun, Moon, ServerOff, Plus, Trash2 } from 'lucide-vue-next'
 import { useTheme } from '@/composables/useTheme'
 import { severityVar, type Severity } from '@/composables/useSeverity'
 import StatusDot from '@/components/ui/StatusDot.vue'
@@ -30,6 +30,17 @@ import DataTable, { type Column } from '@/components/ui/DataTable.vue'
 import CollapsiblePanel from '@/components/ui/CollapsiblePanel.vue'
 import type { ChipTone, StatusChip } from '@/components/ui/listFilters'
 import { usePreferencesStore } from '@/stores/preferences'
+import TabNav, { type TabNavItem } from '@/components/ui/TabNav.vue'
+import CountBadge from '@/components/ui/CountBadge.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import TextareaInput from '@/components/ui/TextareaInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+import RadioGroup from '@/components/ui/RadioGroup.vue'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import UiModal from '@/components/ui/UiModal.vue'
 import EndpointStatusBadge from '@/components/EndpointStatusBadge.vue'
 import HeartbeatStatusBadge from '@/components/HeartbeatStatusBadge.vue'
 import CertificateStatusBadge from '@/components/CertificateStatusBadge.vue'
@@ -147,6 +158,34 @@ const sampleKpis = [
 ]
 
 const lastSelected = ref('')
+
+// Form controls demo state
+const demoTab = ref('history')
+const tabItems: TabNavItem[] = [
+  { value: 'history', label: 'History' },
+  { value: 'triggers', label: 'Triggers', count: 4 },
+  { value: 'silence', label: 'Silence', count: 2, countTone: 'warn' },
+]
+
+const demoName = ref('')
+const demoAge = ref<number | null>(null)
+const demoEmail = ref('')
+const demoEmailError = ref('This field is required')
+const demoRuntime = ref('docker')
+const demoNotes = ref('')
+const demoAccept = ref(false)
+const demoTags = ref<string[]>(['alerts'])
+const demoPlan = ref('pro')
+const demoNotifications = ref(true)
+const demoNotificationsSm = ref(false)
+
+const demoButtonLoading = ref(false)
+function triggerButtonLoading() {
+  demoButtonLoading.value = true
+  setTimeout(() => (demoButtonLoading.value = false), 1200)
+}
+
+const demoModalOpen = ref(false)
 </script>
 
 <template>
@@ -376,6 +415,139 @@ const lastSelected = ref('')
       </div>
     </section>
 
+    <!-- TabNav + CountBadge -->
+    <section class="space-y-3">
+      <SectionHeader title="TabNav + CountBadge" />
+      <div class="rounded-xl border border-mnt-default bg-mnt-surface p-4">
+        <TabNav v-model="demoTab" :items="tabItems" ariaLabel="Demo section tabs" />
+        <p class="mt-3 text-xs text-mnt-muted">Active tab: {{ demoTab }}</p>
+        <div class="mt-3 flex flex-wrap items-center gap-2">
+          <CountBadge :value="3" />
+          <CountBadge :value="5" tone="warn" />
+          <CountBadge :value="2" tone="danger" />
+          <CountBadge :value="9" tone="ok" />
+        </div>
+      </div>
+    </section>
+
+    <!-- UiButton -->
+    <section class="space-y-3">
+      <SectionHeader title="UiButton" />
+      <div class="flex flex-wrap items-center gap-3 rounded-xl border border-mnt-default bg-mnt-surface p-4">
+        <UiButton variant="primary" :icon="Plus">Primary</UiButton>
+        <UiButton variant="secondary">Secondary</UiButton>
+        <UiButton variant="danger" :icon="Trash2">Danger</UiButton>
+        <UiButton variant="ghost">Ghost</UiButton>
+        <UiButton variant="primary" size="sm">Small</UiButton>
+        <UiButton variant="secondary" disabled>Disabled</UiButton>
+        <UiButton variant="primary" :loading="demoButtonLoading" @click="triggerButtonLoading">
+          {{ demoButtonLoading ? 'Saving…' : 'Click to load' }}
+        </UiButton>
+      </div>
+    </section>
+
+    <!-- Form fields -->
+    <section class="space-y-3">
+      <SectionHeader title="FormField + inputs" />
+      <div class="grid gap-4 rounded-xl border border-mnt-default bg-mnt-surface p-4 sm:grid-cols-2">
+        <FormField label="Name" hint="As shown on the dashboard" required>
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="demoName" :aria-describedby="describedBy" :invalid="invalid" placeholder="matrix-coturn" />
+          </template>
+        </FormField>
+
+        <FormField label="Age" hint="Numeric field — empty clears to null">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="demoAge" type="number" :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
+
+        <FormField label="Email" :error="demoEmailError">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="demoEmail"
+              type="email"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+              placeholder="you@example.com"
+              @input="demoEmailError = demoEmail ? '' : 'This field is required'"
+            />
+          </template>
+        </FormField>
+
+        <FormField label="Runtime" hint="Select input">
+          <template #default="{ id, describedBy, invalid }">
+            <SelectInput
+              :id="id"
+              v-model="demoRuntime"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+              :options="[
+                { value: 'docker', label: 'Docker' },
+                { value: 'k8s', label: 'Kubernetes' },
+                { value: 'swarm', label: 'Swarm', disabled: true },
+              ]"
+            />
+          </template>
+        </FormField>
+
+        <FormField label="Notes" hint="Textarea, mono" class="sm:col-span-2">
+          <template #default="{ id, describedBy, invalid }">
+            <TextareaInput :id="id" v-model="demoNotes" mono :aria-describedby="describedBy" :invalid="invalid" :rows="3" />
+          </template>
+        </FormField>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-3 rounded-xl border border-mnt-default bg-mnt-surface p-4 text-xs text-mnt-muted">
+        <span>md ·</span>
+        <TextInput model-value="" size="md" placeholder="md" class="max-w-[140px]" />
+        <span>sm ·</span>
+        <TextInput model-value="" size="sm" placeholder="sm" class="max-w-[140px]" />
+      </div>
+    </section>
+
+    <!-- Checkbox / radio / toggle -->
+    <section class="space-y-3">
+      <SectionHeader title="CheckboxInput + RadioGroup + ToggleSwitch" />
+      <div class="grid gap-4 rounded-xl border border-mnt-default bg-mnt-surface p-4 sm:grid-cols-3">
+        <div class="space-y-2">
+          <CheckboxInput v-model="demoAccept" label="I accept the terms" />
+          <CheckboxInput value="alerts" :model-value="demoTags" label="Alerts channel" @update:model-value="(v) => (demoTags = v as string[])" />
+          <CheckboxInput value="updates" :model-value="demoTags" label="Updates channel" @update:model-value="(v) => (demoTags = v as string[])" />
+          <p class="text-xs text-mnt-muted">Selected: {{ demoTags.join(', ') || 'none' }}</p>
+        </div>
+        <RadioGroup
+          v-model="demoPlan"
+          ariaLabel="Plan"
+          :options="[
+            { value: 'community', label: 'Community', hint: 'Free forever' },
+            { value: 'pro', label: 'Pro', hint: '29€/month' },
+          ]"
+        />
+        <div class="flex flex-col gap-3">
+          <ToggleSwitch v-model="demoNotifications" label="Email notifications" show-label />
+          <ToggleSwitch v-model="demoNotificationsSm" label="Compact toggle" show-label size="sm" />
+          <ToggleSwitch :model-value="true" label="Disabled toggle" show-label disabled />
+        </div>
+      </div>
+    </section>
+
+    <!-- UiModal -->
+    <section class="space-y-3">
+      <SectionHeader title="UiModal (rebuilt ConfirmDialog uses this)" />
+      <div class="rounded-xl border border-mnt-default bg-mnt-surface p-4">
+        <UiButton variant="secondary" @click="demoModalOpen = true">Open modal</UiButton>
+        <UiModal v-model:open="demoModalOpen" title="Delete monitor" size="sm">
+          <p class="text-sm text-mnt-secondary">This removes the monitor and its history. This cannot be undone.</p>
+          <template #footer>
+            <UiButton variant="secondary" @click="demoModalOpen = false">Cancel</UiButton>
+            <UiButton variant="danger" @click="demoModalOpen = false">Delete</UiButton>
+          </template>
+        </UiModal>
+      </div>
+    </section>
+
     <p class="flex items-center gap-2 text-xs text-mnt-muted">
       <Heart :size="13" aria-hidden="true" />
       Tokens-only · dual-theme · keyboard-navigable · respects reduced-motion

From abeb147287649500d8dfbe354e24ff5bf3f5f9d0 Mon Sep 17 00:00:00 2001
From: Benjamin <benjamin@kolapsis.com>
Date: Mon, 28 Sep 2026 19:06:03 +0200
Subject: [PATCH 2/5] feat(heartbeats): move outbound heartbeats to their own
 page

Outbound heartbeats let another instance watch this one, so they leave the
Heartbeats page (incoming monitors) for an Outbound heartbeats page in the
Administration section of the menu. The menu entry is hidden in demo mode
and the page shows an unavailable state there.

The panel now uses the shared form, switch and button components.
---
 docs/features/heartbeats.md                   |   2 +-
 .../heartbeats/OutboundHeartbeatsPanel.vue    | 214 +++++++-----------
 frontend/src/layouts/DefaultLayout.vue        |  30 +--
 frontend/src/pages/HeartbeatsPage.vue         |  66 +-----
 frontend/src/pages/OutboundHeartbeatsPage.vue |  66 ++++++
 .../pages/__tests__/HeartbeatsPage.spec.ts    |  25 +-
 .../__tests__/OutboundHeartbeatsPage.spec.ts  |  30 +++
 frontend/src/router/index.ts                  |   2 +
 .../src/utils/__tests__/navVisibility.spec.ts |  48 ++++
 frontend/src/utils/navVisibility.ts           |  37 +++
 10 files changed, 290 insertions(+), 230 deletions(-)
 create mode 100644 frontend/src/pages/OutboundHeartbeatsPage.vue
 create mode 100644 frontend/src/pages/__tests__/OutboundHeartbeatsPage.spec.ts
 create mode 100644 frontend/src/utils/__tests__/navVisibility.spec.ts
 create mode 100644 frontend/src/utils/navVisibility.ts

diff --git a/docs/features/heartbeats.md b/docs/features/heartbeats.md
index 60f363af..685591c7 100644
--- a/docs/features/heartbeats.md
+++ b/docs/features/heartbeats.md
@@ -151,7 +151,7 @@ A monitoring tool cannot report its own outage. Outbound heartbeats solve this b
 ### Setting It Up
 
 1. On the **other** instance, create a heartbeat monitor with an interval that matches the one you will use below, plus some grace time. Copy its ping URL.
-2. On **this** instance, open **Heartbeats → Outgoing** and click **New target**.
+2. On **this** instance, open **Outbound heartbeats** in the Administration section of the menu and click **New target**.
 3. Paste the ping URL, give the target a name and choose an interval.
 4. Click **Send now** to check the target right away. The row shows the HTTP status it received, or the error.
 
diff --git a/frontend/src/components/heartbeats/OutboundHeartbeatsPanel.vue b/frontend/src/components/heartbeats/OutboundHeartbeatsPanel.vue
index 534a7426..c42047d4 100644
--- a/frontend/src/components/heartbeats/OutboundHeartbeatsPanel.vue
+++ b/frontend/src/components/heartbeats/OutboundHeartbeatsPanel.vue
@@ -25,6 +25,12 @@ import ErrorState from '@/components/ui/ErrorState.vue'
 import QuotaRefusal from '@/components/QuotaRefusal.vue'
 import DataTable, { type Column } from '@/components/ui/DataTable.vue'
 import type { ChipTone } from '@/components/ui/listFilters'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
 
 const showCreateForm = defineModel<boolean>('showCreateForm', { default: false })
 
@@ -37,14 +43,14 @@ const sendingId = ref<string | null>(null)
 const togglingId = ref<string | null>(null)
 
 const intervalPresets = [
-  { label: '30s', value: 30 },
-  { label: '1m', value: 60 },
-  { label: '5m', value: 300 },
-  { label: '15m', value: 900 },
-  { label: '1h', value: 3600 },
-  { label: '6h', value: 21600 },
-  { label: '12h', value: 43200 },
-  { label: '24h', value: 86400 },
+  { value: '30', label: '30s' },
+  { value: '60', label: '1m' },
+  { value: '300', label: '5m' },
+  { value: '900', label: '15m' },
+  { value: '3600', label: '1h' },
+  { value: '21600', label: '6h' },
+  { value: '43200', label: '12h' },
+  { value: '86400', label: '24h' },
 ]
 
 function blankForm() {
@@ -53,9 +59,17 @@ function blankForm() {
 
 const form = ref(blankForm())
 
+const intervalPreset = ref<string>(String(form.value.interval_seconds))
+
+watch(intervalPreset, (preset) => {
+  const seconds = Number(preset)
+  if (!Number.isNaN(seconds)) form.value.interval_seconds = seconds
+})
+
 watch(showCreateForm, (open) => {
   if (open && !editingId.value) {
     form.value = blankForm()
+    intervalPreset.value = String(form.value.interval_seconds)
     formError.value = null
   }
 })
@@ -68,6 +82,7 @@ function startEdit(hb: OutboundHeartbeat) {
     interval_seconds: hb.interval_seconds,
     enabled: hb.enabled,
   }
+  intervalPreset.value = String(hb.interval_seconds)
   formError.value = null
   showCreateForm.value = true
 }
@@ -191,98 +206,46 @@ onMounted(() => {
       </h3>
       <QuotaRefusal v-if="formError" :error="formError" />
       <form class="flex flex-col gap-3" @submit.prevent="handleSubmit">
-        <div>
-          <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Name</label>
-          <input
-            v-model="form.name"
-            type="text"
-            placeholder="e.g., Watched by DR site"
-            :style="{
-              width: '100%',
-              borderRadius: 'var(--mnt-radius-md)',
-              border: '1px solid var(--mnt-border-default)',
-              backgroundColor: 'var(--mnt-bg-elevated)',
-              color: 'var(--mnt-text-primary)',
-              padding: '0.375rem 0.75rem',
-              fontSize: '0.875rem',
-              minHeight: '44px',
-            }"
-            required
-          />
-        </div>
-        <div>
-          <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Ping URL</label>
-          <input
-            v-model="form.url"
-            type="url"
-            placeholder="https://other-instance.example.com/ping/…"
-            class="font-mono"
-            :style="{
-              width: '100%',
-              borderRadius: 'var(--mnt-radius-md)',
-              border: '1px solid var(--mnt-border-default)',
-              backgroundColor: 'var(--mnt-bg-elevated)',
-              color: 'var(--mnt-text-primary)',
-              padding: '0.375rem 0.75rem',
-              fontSize: '0.8125rem',
-              minHeight: '44px',
-            }"
-            pattern="https://.+"
-            required
-          />
-          <p class="mt-1 text-xs" :style="{ color: 'var(--mnt-text-muted)' }">HTTPS only, on a public address.</p>
-        </div>
+        <FormField label="Name" required>
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="form.name"
+              type="text"
+              placeholder="e.g., Watched by DR site"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+              required
+            />
+          </template>
+        </FormField>
+        <FormField label="Ping URL" hint="HTTPS only, on a public address." required>
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="form.url"
+              type="url"
+              mono
+              placeholder="https://other-instance.example.com/ping/…"
+              pattern="https://.+"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+              required
+            />
+          </template>
+        </FormField>
         <div>
           <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Ping every</label>
-          <div class="flex flex-wrap gap-2">
-            <button
-              v-for="preset in intervalPresets"
-              :key="preset.value"
-              type="button"
-              class="rounded-full px-3 py-1 text-xs font-medium transition"
-              :style="{
-                border: form.interval_seconds === preset.value
-                  ? '1px solid var(--mnt-accent)'
-                  : '1px solid var(--mnt-border-default)',
-                backgroundColor: form.interval_seconds === preset.value
-                  ? 'var(--mnt-accent)'
-                  : 'transparent',
-                color: form.interval_seconds === preset.value
-                  ? 'var(--mnt-text-inverted)'
-                  : 'var(--mnt-text-secondary)',
-              }"
-              @click="form.interval_seconds = preset.value"
-            >
-              {{ preset.label }}
-            </button>
-          </div>
+          <SegmentedToggle v-model="intervalPreset" :options="intervalPresets" ariaLabel="Ping interval" />
         </div>
-        <label class="flex min-h-[44px] items-center gap-2">
-          <input v-model="form.enabled" type="checkbox" class="focus-ring h-4 w-4" />
-          <span class="text-xs font-semibold text-mnt-secondary">Enabled</span>
-        </label>
+        <CheckboxInput v-model="form.enabled" label="Enabled" />
         <div class="flex items-center gap-2">
-          <button
-            type="submit"
-            class="min-h-[44px]"
-            :style="{
-              borderRadius: 'var(--mnt-radius-lg)',
-              backgroundColor: 'var(--mnt-accent)',
-              color: 'var(--mnt-text-inverted)',
-              padding: '0.5rem 1rem',
-              fontSize: '0.875rem',
-              fontWeight: '500',
-            }"
-          >
+          <UiButton type="submit" variant="primary">
             {{ editingId ? 'Save' : 'Create' }}
-          </button>
-          <button
-            type="button"
-            class="focus-ring min-h-[44px] rounded-lg border border-mnt-default px-4 text-sm font-medium text-mnt-secondary hover:text-mnt-primary"
-            @click="closeForm"
-          >
+          </UiButton>
+          <UiButton type="button" variant="secondary" @click="closeForm">
             Cancel
-          </button>
+          </UiButton>
         </div>
       </form>
     </div>
@@ -298,13 +261,9 @@ onMounted(() => {
       description="Add the ping URL of a heartbeat monitor created on another Maintenant instance. This instance will ping it on schedule, so the other one alerts if this one goes quiet."
     >
       <template #action>
-        <button
-          class="min-h-[44px] rounded-lg px-4 text-sm font-medium"
-          style="background-color: var(--mnt-accent); color: var(--mnt-text-inverted); border-radius: var(--mnt-radius-lg)"
-          @click="showCreateForm = true"
-        >
+        <UiButton variant="primary" @click="showCreateForm = true">
           Add your first target
-        </button>
+        </UiButton>
       </template>
     </EmptyState>
 
@@ -328,20 +287,13 @@ onMounted(() => {
         <span class="font-mono tabular-nums">{{ formatInterval(row.interval_seconds) }}</span>
       </template>
       <template #cell-enabled="{ row }">
-        <button
-          type="button"
-          role="switch"
-          :aria-checked="row.enabled"
+        <ToggleSwitch
+          :model-value="row.enabled"
+          label="Enabled"
+          size="sm"
           :disabled="togglingId === row.id"
-          :title="row.enabled ? 'Click to disable' : 'Click to enable'"
-          class="focus-ring inline-flex min-h-[32px] items-center rounded-full border px-2.5 py-1 text-xs font-semibold transition-colors disabled:opacity-50"
-          :style="row.enabled
-            ? { borderColor: 'var(--mnt-status-ok)', backgroundColor: 'var(--mnt-status-ok-bg)', color: 'var(--mnt-status-ok-text)' }
-            : { borderColor: 'var(--mnt-border-default)', backgroundColor: 'var(--mnt-bg-elevated)', color: 'var(--mnt-text-muted)' }"
-          @click.stop="toggleEnabled(row)"
-        >
-          {{ row.enabled ? 'On' : 'Off' }}
-        </button>
+          @update:model-value="toggleEnabled(row)"
+        />
       </template>
       <template #cell-last_send="{ row }">
         <span class="truncate" :style="{ color: lastSendColor(row) }" :title="row.last_error ?? undefined">
@@ -350,31 +302,31 @@ onMounted(() => {
       </template>
       <template #cell-actions="{ row }">
         <div class="flex items-center justify-end gap-1">
-          <button
-            type="button"
-            class="focus-ring rounded p-1 text-mnt-muted transition-all hover:bg-mnt-elevated hover:text-mnt-secondary disabled:opacity-50"
+          <UiButton
+            variant="ghost"
+            size="sm"
+            :icon="Send"
+            aria-label="Send now"
             title="Send now"
             :disabled="sendingId === row.id"
             @click.stop="handleSendNow(row)"
-          >
-            <Send :size="14" />
-          </button>
-          <button
-            type="button"
-            class="focus-ring rounded p-1 text-mnt-muted transition-all hover:bg-mnt-elevated hover:text-mnt-secondary"
+          />
+          <UiButton
+            variant="ghost"
+            size="sm"
+            :icon="Pencil"
+            aria-label="Edit"
             title="Edit"
             @click.stop="startEdit(row)"
-          >
-            <Pencil :size="14" />
-          </button>
-          <button
-            type="button"
-            class="focus-ring rounded p-1 text-mnt-muted transition-all hover:bg-mnt-status-down/10 hover:text-mnt-status-down"
+          />
+          <UiButton
+            variant="ghost"
+            size="sm"
+            :icon="Trash2"
+            aria-label="Delete"
             title="Delete"
             @click.stop="handleDelete(row)"
-          >
-            <Trash2 :size="14" />
-          </button>
+          />
         </div>
       </template>
     </DataTable>
diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
index 1933fab9..7bb71630 100644
--- a/frontend/src/layouts/DefaultLayout.vue
+++ b/frontend/src/layouts/DefaultLayout.vue
@@ -39,6 +39,7 @@ import {
   Menu,
   MonitorDot,
   Network,
+  RadioTower,
   Send,
   Server,
   Shield,
@@ -52,12 +53,14 @@ import { useRuntimeStore } from '@/stores/runtime'
 import { useResourcesStore } from '@/stores/resources'
 import { useFleetRuntimes } from '@/composables/useFleetRuntimes'
 import HostFilterDropdown from '@/components/HostFilterDropdown.vue'
+import { isNavItemVisible, type NavItem } from '@/utils/navVisibility'
 
 const route = useRoute()
 const router = useRouter()
 const { version } = useAppVersion()
 const {
   isCommunity,
+  isDemo,
   editionName,
   hasFeature,
   licenseMessage,
@@ -113,15 +116,6 @@ function closeMobileMenu() {
   mobileMenuOpen.value = false
 }
 
-interface NavItem {
-  type: string
-  to?: string
-  label?: string
-  icon?: typeof LayoutGrid
-  feature?: string
-  runtime?: string[]
-}
-
 const allNav: NavItem[] = [
   { type: 'item', to: '/dashboard', label: 'Dashboard', icon: LayoutGrid },
   // Pro: Cluster (Swarm & K8s)
@@ -166,19 +160,17 @@ const allNav: NavItem[] = [
   { type: 'separator' },
   { type: 'item', to: '/status-admin', label: 'Status Pages', icon: Activity },
   { type: 'item', to: '/agents', label: 'Agents', icon: MonitorDot },
+  { type: 'item', to: '/outbound-heartbeats', label: 'Outbound heartbeats', icon: RadioTower, hideInDemo: true },
 ]
 
 const mainNav = computed(() =>
-  allNav.filter((item) => {
-    if (item.feature && !hasFeature(item.feature)) return false
-    // Runtime-specific items show when the selected host scope offers that
-    // runtime: in "all" the union of every agent + local runtime, otherwise the
-    // single selected scope's runtime.
-    if (item.runtime && !item.runtime.some((rt) => availableRuntimes.value.includes(rt))) {
-      return false
-    }
-    return true
-  }),
+  allNav.filter((item) =>
+    isNavItemVisible(item, {
+      hasFeature,
+      availableRuntimes: availableRuntimes.value,
+      isDemo: isDemo.value,
+    }),
+  ),
 )
 
 // When the user switches host scope, a runtime-specific page they are on may no
diff --git a/frontend/src/pages/HeartbeatsPage.vue b/frontend/src/pages/HeartbeatsPage.vue
index 1a99ed1c..4839d100 100644
--- a/frontend/src/pages/HeartbeatsPage.vue
+++ b/frontend/src/pages/HeartbeatsPage.vue
@@ -12,8 +12,7 @@
 -->
 
 <script setup lang="ts">
-import { inject, ref, computed, watch, onMounted, onUnmounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { inject, ref, computed, onMounted, onUnmounted } from 'vue'
 import { useHeartbeatsStore } from '@/stores/heartbeats'
 import { usePreferencesStore } from '@/stores/preferences'
 import { useEdition } from '@/composables/useEdition'
@@ -22,7 +21,6 @@ import { createHeartbeat, type Heartbeat } from '@/services/heartbeatApi'
 import HeartbeatCard from '@/components/HeartbeatCard.vue'
 import HeartbeatRow from '@/components/HeartbeatRow.vue'
 import HeartbeatStatusBadge from '@/components/HeartbeatStatusBadge.vue'
-import OutboundHeartbeatsPanel from '@/components/heartbeats/OutboundHeartbeatsPanel.vue'
 import { detailSlideOverKey } from '@/composables/useDetailSlideOver'
 import FeatureHint from '@/components/ui/FeatureHint.vue'
 import LoadingSkeleton from '@/components/ui/LoadingSkeleton.vue'
@@ -30,7 +28,6 @@ import EmptyState from '@/components/ui/EmptyState.vue'
 import ErrorState from '@/components/ui/ErrorState.vue'
 import ListToolbar from '@/components/ui/ListToolbar.vue'
 import DataTable, { type Column } from '@/components/ui/DataTable.vue'
-import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
 import type { StatusChip } from '@/components/ui/listFilters'
 import { formatDeadline, formatInterval, heartbeatTone } from '@/utils/heartbeatFormat'
 import { timeAgo } from '@/utils/time'
@@ -38,19 +35,7 @@ import { Heart } from 'lucide-vue-next'
 import { docUrl } from '@/utils/docs'
 import QuotaRefusal from '@/components/QuotaRefusal.vue'
 
-const route = useRoute()
-const router = useRouter()
-const { getQuota, reload, isDemo } = useEdition()
-
-const activeTab = computed<string>({
-  get: () => (route.query.tab === 'outgoing' && !isDemo.value ? 'outgoing' : 'incoming'),
-  set: (tab) => router.replace({ query: { ...route.query, tab: tab === 'outgoing' ? 'outgoing' : undefined } }),
-})
-
-const tabOptions = [
-  { value: 'incoming', label: 'Incoming' },
-  { value: 'outgoing', label: 'Outgoing' },
-]
+const { getQuota, reload } = useEdition()
 
 const store = useHeartbeatsStore()
 const prefs = usePreferencesStore()
@@ -59,13 +44,6 @@ const quota = getQuota('heartbeats')
 
 const showCreateForm = ref(false)
 const createError = ref<unknown>(null)
-const showOutgoingCreateForm = ref(false)
-
-watch(activeTab, () => {
-  showCreateForm.value = false
-  createError.value = null
-  showOutgoingCreateForm.value = false
-})
 
 const form = ref({
   name: '',
@@ -203,10 +181,10 @@ async function handleCreate() {
       <div>
         <h1 class="text-2xl font-black text-mnt-primary">Heartbeats</h1>
         <p class="mt-1 text-sm" :style="{ color: 'var(--mnt-text-muted)' }">
-          {{ activeTab === 'incoming' ? "Passive cron & scheduled task monitoring" : "Ping other Maintenant instances so they alert if this one goes down" }}
+          Passive cron & scheduled task monitoring
         </p>
       </div>
-      <div v-if="activeTab === 'incoming'" class="flex items-center gap-2">
+      <div class="flex items-center gap-2">
         <span
           v-if="!quota.isUnlimited"
           class="rounded-full px-2.5 py-1 text-xs font-medium"
@@ -244,30 +222,9 @@ async function handleCreate() {
           {{ showCreateForm ? 'Cancel' : 'New Heartbeat' }}
         </button>
       </div>
-      <div v-else class="flex items-center gap-2">
-        <button
-          class="min-h-[44px]"
-          :style="{
-            borderRadius: 'var(--mnt-radius-lg)',
-            backgroundColor: 'var(--mnt-accent)',
-            color: 'var(--mnt-text-inverted)',
-            padding: '0.5rem 1rem',
-            fontSize: '0.875rem',
-            fontWeight: '500',
-          }"
-          @click="showOutgoingCreateForm = !showOutgoingCreateForm"
-        >
-          {{ showOutgoingCreateForm ? 'Cancel' : 'New target' }}
-        </button>
-      </div>
-    </div>
-
-    <div v-if="!isDemo" class="mb-6">
-      <SegmentedToggle v-model="activeTab" :options="tabOptions" ariaLabel="Heartbeat direction" />
     </div>
 
     <FeatureHint
-      v-if="activeTab === 'incoming'"
       storage-key="heartbeats"
       title="Monitor cron jobs with a single curl"
       :doc-href="docUrl('features/heartbeats/#ping-url-format')"
@@ -281,20 +238,6 @@ async function handleCreate() {
       + exit code to track duration. If no ping arrives before the deadline (interval + grace), a <em>deadline missed</em> alert fires.
     </FeatureHint>
 
-    <FeatureHint
-      v-else
-      storage-key="outbound-heartbeats"
-      title="Let another instance watch this one"
-      :doc-href="docUrl('features/heartbeats/#outbound-heartbeats')"
-    >
-      Create a heartbeat monitor on another Maintenant instance, then paste its ping URL
-      (<code class="rounded-md px-1.5 py-0.5 text-xs font-mono" style="background: var(--mnt-bg-elevated); color: var(--mnt-text-secondary)">/ping/{uuid}</code>)
-      as a target here. This instance pings it on the interval you choose &mdash; if this instance goes down, the other one raises the alert.
-    </FeatureHint>
-
-    <OutboundHeartbeatsPanel v-if="activeTab === 'outgoing'" v-model:show-create-form="showOutgoingCreateForm" />
-
-    <template v-else>
     <!-- Create form -->
     <div
       v-if="showCreateForm"
@@ -514,7 +457,6 @@ async function handleCreate() {
         {{ row.status === 'paused' ? '-' : formatDeadline(row.next_deadline_at) }}
       </template>
     </DataTable>
-    </template>
   </div>
   </div>
 </template>
diff --git a/frontend/src/pages/OutboundHeartbeatsPage.vue b/frontend/src/pages/OutboundHeartbeatsPage.vue
new file mode 100644
index 00000000..12b55853
--- /dev/null
+++ b/frontend/src/pages/OutboundHeartbeatsPage.vue
@@ -0,0 +1,66 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. You may not use this file except in compliance
+  with one of these licenses.
+
+  AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+  Commercial: See COMMERCIAL-LICENSE.md
+
+  Source: https://github.com/kolapsis/maintenant
+-->
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { RadioTower } from 'lucide-vue-next'
+import { useEdition } from '@/composables/useEdition'
+import { docUrl } from '@/utils/docs'
+import OutboundHeartbeatsPanel from '@/components/heartbeats/OutboundHeartbeatsPanel.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import FeatureHint from '@/components/ui/FeatureHint.vue'
+import EmptyState from '@/components/ui/EmptyState.vue'
+
+const { isDemo } = useEdition()
+
+const showCreateForm = ref(false)
+</script>
+
+<template>
+  <div class="p-3 sm:p-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="mb-6 flex items-center justify-between">
+        <div>
+          <h1 class="text-2xl font-black text-mnt-primary">Outbound heartbeats</h1>
+          <p class="mt-1 text-sm" :style="{ color: 'var(--mnt-text-muted)' }">
+            Ping other Maintenant instances so they alert if this one goes down
+          </p>
+        </div>
+        <UiButton v-if="!isDemo" variant="primary" @click="showCreateForm = !showCreateForm">
+          {{ showCreateForm ? 'Cancel' : 'New target' }}
+        </UiButton>
+      </div>
+
+      <template v-if="!isDemo">
+        <FeatureHint
+          storage-key="outbound-heartbeats"
+          title="Let another instance watch this one"
+          :doc-href="docUrl('features/heartbeats/#outbound-heartbeats')"
+        >
+          Create a heartbeat monitor on another Maintenant instance, then paste its ping URL
+          (<code class="rounded-md px-1.5 py-0.5 text-xs font-mono" style="background: var(--mnt-bg-elevated); color: var(--mnt-text-secondary)">/ping/{uuid}</code>)
+          as a target here. This instance pings it on the interval you choose &mdash; if this instance goes down, the other one raises the alert.
+        </FeatureHint>
+
+        <OutboundHeartbeatsPanel v-model:show-create-form="showCreateForm" />
+      </template>
+
+      <EmptyState
+        v-else
+        :icon="RadioTower"
+        title="Unavailable in demo mode"
+        description="Outbound heartbeats ping real URLs on other instances, which this read-only demo does not allow."
+      />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/pages/__tests__/HeartbeatsPage.spec.ts b/frontend/src/pages/__tests__/HeartbeatsPage.spec.ts
index 82eb6a09..9e185fd8 100644
--- a/frontend/src/pages/__tests__/HeartbeatsPage.spec.ts
+++ b/frontend/src/pages/__tests__/HeartbeatsPage.spec.ts
@@ -1,8 +1,3 @@
-// Copyright 2026 Benjamin Touchard (Kolapsis)
-//
-// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
-// or a commercial license. See COMMERCIAL-LICENSE.md.
-
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
 import { ref } from 'vue'
@@ -10,12 +5,10 @@ import { createPinia, setActivePinia } from 'pinia'
 import HeartbeatsPage from '@/pages/HeartbeatsPage.vue'
 import { detailSlideOverKey } from '@/composables/useDetailSlideOver'
 
-const isDemo = ref(false)
-const route = { query: { tab: 'outgoing' } as Record<string, string> }
+const route = { query: {} as Record<string, string> }
 
 vi.mock('@/composables/useEdition', () => ({
   useEdition: () => ({
-    isDemo,
     reload: vi.fn(),
     getQuota: () => ref({ used: 0, limit: 0, isUnlimited: true, isAtLimit: false, nearLimit: false }),
   }),
@@ -46,22 +39,20 @@ function mountPage() {
   })
 }
 
-describe('HeartbeatsPage outgoing tab', () => {
+describe('HeartbeatsPage', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
   })
 
-  it('offers the outgoing tab outside demo mode', () => {
-    isDemo.value = false
+  it('no longer renders the outgoing tab toggle or panel', () => {
     const wrapper = mountPage()
-    expect(wrapper.findComponent({ name: 'SegmentedToggle' }).exists()).toBe(true)
-    expect(wrapper.findComponent({ name: 'OutboundHeartbeatsPanel' }).exists()).toBe(true)
+    expect(wrapper.findComponent({ name: 'SegmentedToggle' }).exists()).toBe(false)
+    expect(wrapper.findComponent({ name: 'OutboundHeartbeatsPanel' }).exists()).toBe(false)
   })
 
-  it('hides the outgoing tab in demo mode, even when the URL asks for it', () => {
-    isDemo.value = true
+  it('shows the incoming heartbeats subtitle only', () => {
     const wrapper = mountPage()
-    expect(wrapper.findComponent({ name: 'SegmentedToggle' }).exists()).toBe(false)
-    expect(wrapper.findComponent({ name: 'OutboundHeartbeatsPanel' }).exists()).toBe(false)
+    expect(wrapper.text()).toContain('Passive cron & scheduled task monitoring')
+    expect(wrapper.text()).not.toContain('Ping other Maintenant instances so they alert if this one goes down')
   })
 })
diff --git a/frontend/src/pages/__tests__/OutboundHeartbeatsPage.spec.ts b/frontend/src/pages/__tests__/OutboundHeartbeatsPage.spec.ts
new file mode 100644
index 00000000..43a0c97c
--- /dev/null
+++ b/frontend/src/pages/__tests__/OutboundHeartbeatsPage.spec.ts
@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import { ref } from 'vue'
+import OutboundHeartbeatsPage from '@/pages/OutboundHeartbeatsPage.vue'
+
+const isDemo = ref(false)
+
+vi.mock('@/composables/useEdition', () => ({
+  useEdition: () => ({ isDemo }),
+}))
+
+function mountPage() {
+  return shallowMount(OutboundHeartbeatsPage)
+}
+
+describe('OutboundHeartbeatsPage', () => {
+  it('mounts the outbound heartbeats panel outside demo mode', () => {
+    isDemo.value = false
+    const wrapper = mountPage()
+    expect(wrapper.findComponent({ name: 'OutboundHeartbeatsPanel' }).exists()).toBe(true)
+    expect(wrapper.findComponent({ name: 'EmptyState' }).exists()).toBe(false)
+  })
+
+  it('does not mount the panel in demo mode and shows the unavailable state instead', () => {
+    isDemo.value = true
+    const wrapper = mountPage()
+    expect(wrapper.findComponent({ name: 'OutboundHeartbeatsPanel' }).exists()).toBe(false)
+    expect(wrapper.findComponent({ name: 'EmptyState' }).exists()).toBe(true)
+  })
+})
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 08ffe1bc..85974dcf 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -18,6 +18,7 @@ import DashboardPage from '../pages/DashboardPage.vue'
 const ContainersPage = () => import('../pages/ContainersPage.vue')
 const EndpointsPage = () => import('../pages/EndpointsPage.vue')
 const HeartbeatsPage = () => import('../pages/HeartbeatsPage.vue')
+const OutboundHeartbeatsPage = () => import('../pages/OutboundHeartbeatsPage.vue')
 const CertificatesPage = () => import('../pages/CertificatesPage.vue')
 const AlertsPage = () => import('../pages/AlertsPage.vue')
 const StatusAdminPage = () => import('../pages/StatusAdminPage.vue')
@@ -77,6 +78,7 @@ const router = createRouter({
         { path: 'nodes', name: 'nodes', component: NodesPage },
         { path: 'escalation', name: 'escalation', component: EscalationPage },
         { path: 'agents', name: 'agents', component: AgentsPage },
+        { path: 'outbound-heartbeats', name: 'outbound-heartbeats', component: OutboundHeartbeatsPage },
         { path: 'editions', name: 'editions', component: EditionsPage },
         // The old offer page: keep the address working, send it to the comparison.
         { path: 'pro-edition', redirect: { name: 'editions' } },
diff --git a/frontend/src/utils/__tests__/navVisibility.spec.ts b/frontend/src/utils/__tests__/navVisibility.spec.ts
new file mode 100644
index 00000000..6bb44ad0
--- /dev/null
+++ b/frontend/src/utils/__tests__/navVisibility.spec.ts
@@ -0,0 +1,48 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { isNavItemVisible, type NavItem } from '../navVisibility'
+
+function ctx(overrides: Partial<Parameters<typeof isNavItemVisible>[1]> = {}) {
+  return {
+    hasFeature: () => true,
+    availableRuntimes: ['docker'],
+    isDemo: false,
+    ...overrides,
+  }
+}
+
+describe('isNavItemVisible', () => {
+  it('shows a plain item with no restrictions', () => {
+    const item: NavItem = { type: 'item', to: '/dashboard', label: 'Dashboard' }
+    expect(isNavItemVisible(item, ctx())).toBe(true)
+  })
+
+  it('hides a feature-gated item when the feature is not available', () => {
+    const item: NavItem = { type: 'item', to: '/cluster', label: 'Cluster', feature: 'swarm_dashboard' }
+    expect(isNavItemVisible(item, ctx({ hasFeature: () => false }))).toBe(false)
+  })
+
+  it('shows a runtime-scoped item when the runtime is available', () => {
+    const item: NavItem = { type: 'item', to: '/containers', label: 'Containers', runtime: ['docker'] }
+    expect(isNavItemVisible(item, ctx({ availableRuntimes: ['docker', 'swarm'] }))).toBe(true)
+  })
+
+  it('hides a runtime-scoped item when the runtime is not available', () => {
+    const item: NavItem = { type: 'item', to: '/pods', label: 'Pods', runtime: ['kubernetes'] }
+    expect(isNavItemVisible(item, ctx({ availableRuntimes: ['docker'] }))).toBe(false)
+  })
+
+  it('hides a hideInDemo item in demo mode', () => {
+    const item: NavItem = { type: 'item', to: '/outbound-heartbeats', label: 'Outbound heartbeats', hideInDemo: true }
+    expect(isNavItemVisible(item, ctx({ isDemo: true }))).toBe(false)
+  })
+
+  it('shows a hideInDemo item outside demo mode', () => {
+    const item: NavItem = { type: 'item', to: '/outbound-heartbeats', label: 'Outbound heartbeats', hideInDemo: true }
+    expect(isNavItemVisible(item, ctx({ isDemo: false }))).toBe(true)
+  })
+})
diff --git a/frontend/src/utils/navVisibility.ts b/frontend/src/utils/navVisibility.ts
new file mode 100644
index 00000000..eb10fddf
--- /dev/null
+++ b/frontend/src/utils/navVisibility.ts
@@ -0,0 +1,37 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. You may not use this file except in compliance
+// with one of these licenses.
+//
+// AGPL-3.0: https://www.gnu.org/licenses/agpl-3.0.html
+// Commercial: See COMMERCIAL-LICENSE.md
+//
+// Source: https://github.com/kolapsis/maintenant
+
+import type { Component } from 'vue'
+
+export interface NavItem {
+  type: string
+  to?: string
+  label?: string
+  icon?: Component
+  feature?: string
+  runtime?: string[]
+  hideInDemo?: boolean
+}
+
+export interface NavVisibilityContext {
+  hasFeature: (feature: string) => boolean
+  availableRuntimes: string[]
+  isDemo: boolean
+}
+
+export function isNavItemVisible(item: NavItem, ctx: NavVisibilityContext): boolean {
+  if (item.feature && !ctx.hasFeature(item.feature)) return false
+  if (item.runtime && !item.runtime.some((rt) => ctx.availableRuntimes.includes(rt))) {
+    return false
+  }
+  if (item.hideInDemo && ctx.isDemo) return false
+  return true
+}

From a3919a7bb1bd7ab72bd23330459dd3e1f7065f42 Mon Sep 17 00:00:00 2001
From: Benjamin <benjamin@kolapsis.com>
Date: Mon, 28 Sep 2026 19:23:50 +0200
Subject: [PATCH 3/5] refactor(ui): migrate every page to the shared form and
 navigation components

Tabs, buttons, fields, selects, textareas, checkboxes, radios, switches,
counters and hand-made modals now go through components/ui. Hardcoded
colors met along the way are replaced by mnt- tokens.
---
 frontend/src/components/AgentDetailPanel.vue  |  88 ++----
 frontend/src/components/AlertList.vue         |  73 ++---
 frontend/src/components/AppHeader.vue         |  49 ++--
 frontend/src/components/CertificateCard.vue   |  12 +-
 frontend/src/components/CertificateDetail.vue |  65 ++---
 frontend/src/components/ChannelManager.vue    |  98 ++++---
 frontend/src/components/ChannelWizard.vue     | 173 +++++------
 frontend/src/components/ContainerDetail.vue   | 110 +++----
 frontend/src/components/ContainerList.vue     |  51 ++--
 frontend/src/components/CveList.vue           |  13 +-
 frontend/src/components/EndpointCard.vue      |  12 +-
 frontend/src/components/EndpointDetail.vue    |  41 +--
 .../src/components/EnrollmentTokenModal.vue   | 200 +++++--------
 frontend/src/components/HeartbeatCard.vue     |  38 ++-
 frontend/src/components/HeartbeatDetail.vue   |  20 +-
 frontend/src/components/HeartbeatSnippets.vue |  78 ++---
 frontend/src/components/HostLimitDialog.vue   | 147 ++++------
 frontend/src/components/K8sPodDetail.vue      |  37 +--
 frontend/src/components/K8sPodList.vue        |  29 +-
 frontend/src/components/K8sWorkloadDetail.vue |  48 ++--
 frontend/src/components/LogSearchBar.vue      |  62 ++--
 frontend/src/components/LogToolbar.vue        |  35 +--
 .../src/components/ResourceAlertConfig.vue    |  47 +--
 .../src/components/SecurityInsightList.vue    |  19 +-
 .../src/components/SilenceRuleManager.vue     | 105 ++++---
 .../src/components/StatusComponentManager.vue | 227 +++++----------
 .../src/components/StatusIncidentManager.vue  | 104 ++++---
 .../components/StatusMaintenanceManager.vue   |  76 ++---
 frontend/src/components/StatusSmtpConfig.vue  | 121 ++++----
 .../src/components/SwarmServiceDetail.vue     |  28 +-
 .../src/components/TopConsumersWidget.vue     |  22 +-
 frontend/src/components/TriggerEditor.vue     | 123 +++-----
 frontend/src/components/TriggerList.vue       |  32 +--
 frontend/src/components/TriggerManager.vue    |  10 +-
 frontend/src/components/UpdateDetailPanel.vue |  55 ++--
 frontend/src/components/WebhookForm.vue       | 272 ++++++------------
 .../components/dashboard/IncidentBanner.vue   |   9 +-
 .../dashboard/UpdateSummaryStrip.vue          |  13 +-
 .../src/components/escalation/LevelEditor.vue |  98 +++----
 .../components/escalation/PolicyEditor.vue    |  93 ++----
 .../src/components/escalation/PolicyList.vue  |  32 ++-
 .../personalization/BrandingSection.vue       | 184 ++++--------
 .../personalization/ColorPaletteSection.vue   |  54 ++--
 .../components/personalization/FaqSection.vue |  48 ++--
 .../personalization/FooterSection.vue         |  63 ++--
 .../HeaderAnnouncementSection.vue             |  41 ++-
 .../personalization/LocalizationSection.vue   |  55 ++--
 frontend/src/layouts/DefaultLayout.vue        |   9 +-
 frontend/src/pages/AgentsPage.vue             |  21 +-
 frontend/src/pages/AlertsPage.vue             |  56 +---
 frontend/src/pages/CertificatesPage.vue       | 239 ++++++---------
 frontend/src/pages/DesignSystemPage.vue       |   9 +-
 frontend/src/pages/EndpointsPage.vue          | 236 ++++++---------
 frontend/src/pages/EscalationPage.vue         |  10 +-
 frontend/src/pages/HeartbeatsPage.vue         | 192 +++++--------
 frontend/src/pages/StatusAdminPage.vue        |  64 ++---
 frontend/src/pages/TasksPage.vue              |  31 +-
 frontend/src/pages/UpdatesPage.vue            |  13 +-
 frontend/src/pages/WebhooksPage.vue           |  29 +-
 59 files changed, 1658 insertions(+), 2661 deletions(-)

diff --git a/frontend/src/components/AgentDetailPanel.vue b/frontend/src/components/AgentDetailPanel.vue
index dbd2c331..459cb1db 100644
--- a/frontend/src/components/AgentDetailPanel.vue
+++ b/frontend/src/components/AgentDetailPanel.vue
@@ -15,7 +15,10 @@
 import { ref, watch, computed } from 'vue'
 import SlideOverPanel from '@/components/ui/SlideOverPanel.vue'
 import StatusBadge from '@/components/ui/StatusBadge.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import TextInput from '@/components/ui/TextInput.vue'
 import { useAgentsStore } from '@/stores/agents'
+import { useConfirm } from '@/composables/useConfirm'
 import { osDaysText, osSupportHint, osSupportLabel, osSupportSeverity } from '@/utils/osSupport'
 import type { Agent } from '@/services/agentApi'
 
@@ -31,6 +34,7 @@ const emit = defineEmits<{
 }>()
 
 const store = useAgentsStore()
+const confirm = useConfirm()
 
 const labelDraft = ref('')
 const savingLabel = ref(false)
@@ -39,7 +43,6 @@ const labelSuccess = ref(false)
 
 const revoking = ref(false)
 const deleting = ref(false)
-const showDeleteConfirm = ref(false)
 const actionError = ref<string | null>(null)
 
 watch(
@@ -49,7 +52,6 @@ watch(
     labelError.value = null
     labelSuccess.value = false
     actionError.value = null
-    showDeleteConfirm.value = false
   },
 )
 
@@ -98,6 +100,14 @@ async function handleRevoke() {
 
 async function handleDelete() {
   if (!props.agent) return
+  const ok = await confirm({
+    title: 'Delete agent?',
+    message:
+      'This will permanently purge all historical events for this agent (containers, endpoints, heartbeats, resources, certificates) in a single transaction. This action is irreversible.',
+    confirmLabel: 'Delete permanently',
+    destructive: true,
+  })
+  if (!ok) return
   deleting.value = true
   actionError.value = null
   try {
@@ -106,6 +116,7 @@ async function handleDelete() {
     emit('update:open', false)
   } catch (e) {
     actionError.value = e instanceof Error ? e.message : 'Failed to delete agent'
+  } finally {
     deleting.value = false
   }
 }
@@ -196,21 +207,16 @@ function runtimeLabel(rt: string): string {
       <div>
         <p class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest mb-2">Label</p>
         <div class="flex gap-2">
-          <input
+          <TextInput
             v-model="labelDraft"
             maxlength="64"
             placeholder="Display label…"
-            class="flex-1 rounded-lg border border-mnt-default bg-mnt-primary px-3 py-2 text-sm text-mnt-primary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-green-500"
+            class="flex-1"
             @keydown.enter="saveLabel"
           />
-          <button
-            :disabled="savingLabel || labelDraft === agent.label"
-            class="rounded-lg px-3 py-2 text-sm font-medium transition-opacity disabled:opacity-40"
-            :style="{ backgroundColor: 'var(--mnt-accent)', color: 'var(--mnt-text-inverted)' }"
-            @click="saveLabel"
-          >
+          <UiButton variant="primary" :disabled="savingLabel || labelDraft === agent.label" @click="saveLabel">
             {{ savingLabel ? '…' : 'Save' }}
-          </button>
+          </UiButton>
         </div>
         <p v-if="labelConflict" class="mt-1 text-xs text-yellow-500">
           Another agent already uses this label.
@@ -268,65 +274,21 @@ function runtimeLabel(rt: string): string {
       <div v-if="agent.status === 'active'" class="space-y-2">
         <p class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest mb-2">Actions</p>
         <p v-if="actionError" class="text-xs text-mnt-status-down">{{ actionError }}</p>
-        <button
-          :disabled="revoking"
-          class="w-full rounded-lg border border-yellow-600/40 px-4 py-2 text-sm font-medium text-yellow-500 hover:bg-yellow-600/10 transition-colors disabled:opacity-40"
-          @click="handleRevoke"
-        >
+        <UiButton variant="secondary" class="w-full" :loading="revoking" :disabled="revoking" @click="handleRevoke">
           {{ revoking ? 'Revoking…' : 'Revoke agent' }}
-        </button>
-        <button
-          class="w-full rounded-lg border border-red-600/40 px-4 py-2 text-sm font-medium text-mnt-status-down hover:bg-mnt-sev-incident-solid/10 transition-colors"
-          @click="showDeleteConfirm = true"
-        >
-          Delete agent
-        </button>
+        </UiButton>
+        <UiButton variant="danger" class="w-full" :loading="deleting" :disabled="deleting" @click="handleDelete">
+          {{ deleting ? 'Deleting…' : 'Delete agent' }}
+        </UiButton>
       </div>
 
       <div v-if="agent.status === 'revoked'" class="space-y-2">
         <p class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest mb-2">Actions</p>
         <p v-if="actionError" class="text-xs text-mnt-status-down">{{ actionError }}</p>
-        <button
-          class="w-full rounded-lg border border-red-600/40 px-4 py-2 text-sm font-medium text-mnt-status-down hover:bg-mnt-sev-incident-solid/10 transition-colors"
-          @click="showDeleteConfirm = true"
-        >
-          Delete agent
-        </button>
+        <UiButton variant="danger" class="w-full" :loading="deleting" :disabled="deleting" @click="handleDelete">
+          {{ deleting ? 'Deleting…' : 'Delete agent' }}
+        </UiButton>
       </div>
     </div>
-
-    <!-- Delete confirmation modal -->
-    <Teleport to="body">
-      <div
-        v-if="showDeleteConfirm"
-        class="fixed inset-0 z-[10000] flex items-center justify-center"
-        @click.self="showDeleteConfirm = false"
-      >
-        <div class="absolute inset-0 bg-black/70" @click="showDeleteConfirm = false" />
-        <div class="relative z-10 w-full max-w-md mx-4 rounded-2xl border border-mnt-default bg-mnt-surface p-6 shadow-2xl">
-          <h3 class="text-base font-bold text-mnt-primary mb-2">Delete agent?</h3>
-          <p class="text-sm text-mnt-muted mb-4">
-            This will permanently purge all historical events for this agent
-            (containers, endpoints, heartbeats, resources, certificates) in a single transaction.
-            <strong class="text-mnt-status-down">This action is irreversible.</strong>
-          </p>
-          <div class="flex gap-3 justify-end">
-            <button
-              class="rounded-lg px-4 py-2 text-sm text-mnt-muted hover:text-mnt-primary transition-colors"
-              @click="showDeleteConfirm = false"
-            >
-              Cancel
-            </button>
-            <button
-              :disabled="deleting"
-              class="rounded-lg px-4 py-2 text-sm font-medium text-mnt-primary bg-mnt-sev-incident-solid hover:opacity-90 disabled:opacity-40 transition-colors"
-              @click="handleDelete"
-            >
-              {{ deleting ? 'Deleting…' : 'Delete permanently' }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </Teleport>
   </SlideOverPanel>
 </template>
diff --git a/frontend/src/components/AlertList.vue b/frontend/src/components/AlertList.vue
index 01d1f351..43b8370b 100644
--- a/frontend/src/components/AlertList.vue
+++ b/frontend/src/components/AlertList.vue
@@ -18,6 +18,8 @@ import { detailSlideOverKey, type EntityType } from '@/composables/useDetailSlid
 import type { Alert, ListAlertsParams } from '@/services/alertApi'
 import { humanizeAlertType } from '@/utils/alertLabels'
 import AcknowledgeButton from '@/components/ui/AcknowledgeButton.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const detailSlideOver = inject(detailSlideOverKey)!
 const store = useAlertsStore()
@@ -83,48 +85,38 @@ function openEntityDetail(alert: Alert) {
   detailSlideOver.openDetail(alert.entity_type as EntityType, alert.entity_id)
 }
 
-const selectStyle = 'background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)'
+const sourceOptions = [
+  { value: '', label: 'All sources' },
+  { value: 'container', label: 'Container' },
+  { value: 'endpoint', label: 'Endpoint' },
+  { value: 'heartbeat', label: 'Heartbeat' },
+  { value: 'certificate', label: 'Certificate' },
+  { value: 'resource', label: 'Resource' },
+  { value: 'agent', label: 'Agent' },
+]
+
+const severityOptions = [
+  { value: '', label: 'All severities' },
+  { value: 'critical', label: 'Critical' },
+  { value: 'warning', label: 'Warning' },
+  { value: 'info', label: 'Info' },
+]
+
+const statusOptions = [
+  { value: '', label: 'All statuses' },
+  { value: 'active', label: 'Active' },
+  { value: 'resolved', label: 'Resolved' },
+  { value: 'silenced', label: 'Silenced' },
+]
 </script>
 
 <template>
   <div>
     <!-- Filters -->
     <div class="mb-4 flex flex-wrap gap-3">
-      <select
-        v-model="sourceFilter"
-        class="rounded-md border px-3 py-1.5 text-sm outline-none"
-        :style="selectStyle"
-      >
-        <option value="">All sources</option>
-        <option value="container">Container</option>
-        <option value="endpoint">Endpoint</option>
-        <option value="heartbeat">Heartbeat</option>
-        <option value="certificate">Certificate</option>
-        <option value="resource">Resource</option>
-        <option value="agent">Agent</option>
-      </select>
-
-      <select
-        v-model="severityFilter"
-        class="rounded-md border px-3 py-1.5 text-sm outline-none"
-        :style="selectStyle"
-      >
-        <option value="">All severities</option>
-        <option value="critical">Critical</option>
-        <option value="warning">Warning</option>
-        <option value="info">Info</option>
-      </select>
-
-      <select
-        v-model="statusFilter"
-        class="rounded-md border px-3 py-1.5 text-sm outline-none"
-        :style="selectStyle"
-      >
-        <option value="">All statuses</option>
-        <option value="active">Active</option>
-        <option value="resolved">Resolved</option>
-        <option value="silenced">Silenced</option>
-      </select>
+      <SelectInput v-model="sourceFilter" size="sm" class="w-auto" :options="sourceOptions" />
+      <SelectInput v-model="severityFilter" size="sm" class="w-auto" :options="severityOptions" />
+      <SelectInput v-model="statusFilter" size="sm" class="w-auto" :options="statusOptions" />
     </div>
 
     <!-- Mobile card list -->
@@ -239,14 +231,9 @@ const selectStyle = 'background: var(--mnt-bg-elevated); border-color: var(--mnt
 
     <!-- Load more -->
     <div v-if="store.hasMore" class="mt-4 text-center">
-      <button
-        @click="loadMore"
-        :disabled="store.loading"
-        class="rounded-md border px-4 py-2 text-sm disabled:opacity-50 transition-colors"
-        style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary); background: var(--mnt-bg-surface)"
-      >
+      <UiButton variant="secondary" size="sm" :loading="store.loading" @click="loadMore">
         {{ store.loading ? 'Loading...' : 'Load more' }}
-      </button>
+      </UiButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index c5879d9c..31975dc9 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -21,10 +21,12 @@ import { useContainersStore } from '@/stores/containers'
 import { useStorageStore } from '@/stores/storage'
 import { useAgentsStore } from '@/stores/agents'
 import { useVisibleInterval } from '@/composables/useVisibleInterval'
-import { Search, Bell, AlertTriangle, Box, Globe, Heart, ShieldCheck, Cpu, Sun, Moon, Monitor, MessageSquare } from 'lucide-vue-next'
+import { Bell, AlertTriangle, Box, Globe, Heart, ShieldCheck, Cpu, Sun, Moon, Monitor, MessageSquare } from 'lucide-vue-next'
 import RuntimeBadge from '@/components/RuntimeBadge.vue'
 import HostFilterDropdown from '@/components/HostFilterDropdown.vue'
 import AlertBanner from '@/components/ui/AlertBanner.vue'
+import SearchInput from '@/components/ui/SearchInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 import { useTheme } from '@/composables/useTheme'
 import { useFeedbackUrl } from '@/composables/useFeedbackUrl'
 
@@ -167,6 +169,12 @@ const themeTooltip = computed(() => {
   return 'Follow system theme'
 })
 
+const themeIcon = computed(() => {
+  if (theme.value === 'light') return Sun
+  if (theme.value === 'dark') return Moon
+  return Monitor
+})
+
 const { feedbackUrl } = useFeedbackUrl()
 </script>
 
@@ -177,18 +185,7 @@ const { feedbackUrl } = useFeedbackUrl()
       <HostFilterDropdown v-if="activeAgentIds.length > 0" class="w-48 shrink-0" />
 
       <!-- Search -->
-      <div class="relative group">
-        <Search
-          :size="15"
-          class="absolute left-3 top-1/2 -translate-y-1/2 text-mnt-muted group-focus-within:text-mnt-green-400 transition-colors"
-        />
-        <input
-          v-model="dashboard.searchQuery"
-          type="text"
-          placeholder="Search services..."
-          class="bg-mnt-primary border border-mnt-default rounded-lg py-2 pl-9 pr-4 text-sm w-72 focus:outline-none focus:ring-1 focus:ring-mnt-green-500/60 focus:border-mnt-green-500/40 transition-all text-mnt-primary placeholder:text-mnt-muted"
-        />
-      </div>
+      <SearchInput v-model="dashboard.searchQuery" placeholder="Search services..." class="w-72" />
 
       <!-- Monitor health counters (containers + endpoints + heartbeats + certificates) -->
       <div class="hidden sm:flex items-center gap-5 border-l border-mnt-default pl-5">
@@ -262,16 +259,14 @@ const { feedbackUrl } = useFeedbackUrl()
       <RuntimeBadge />
 
       <!-- Theme toggle -->
-      <button
-        @click="cycleTheme"
+      <UiButton
+        variant="ghost"
+        size="sm"
+        :icon="themeIcon"
         :title="themeTooltip"
         :aria-label="themeTooltip"
-        class="p-2 text-mnt-muted hover:text-mnt-primary hover:bg-mnt-elevated rounded-lg transition-all"
-      >
-        <Sun v-if="theme === 'light'" :size="18" />
-        <Moon v-else-if="theme === 'dark'" :size="18" />
-        <Monitor v-else :size="18" />
-      </button>
+        @click="cycleTheme"
+      />
 
       <!-- Feedback form on maintenant.dev, opened by the browser in a new tab -->
       <a
@@ -290,12 +285,14 @@ const { feedbackUrl } = useFeedbackUrl()
         @mouseenter="onBellEnter"
         @mouseleave="onBellLeave"
       >
-        <button
-          @click="onBellClick"
+        <UiButton
+          variant="ghost"
+          size="sm"
+          :icon="Bell"
+          class="relative"
           :aria-label="alertsStore.totalActiveCount > 0 ? `View alerts (${alertsStore.totalActiveCount} active)` : 'View alerts'"
-          class="p-2 text-mnt-muted hover:text-mnt-primary hover:bg-mnt-elevated rounded-lg transition-all relative"
+          @click="onBellClick"
         >
-          <Bell :size="18" />
           <span
             v-if="alertsStore.totalActiveCount > 0"
             class="absolute top-1.5 right-1.5 h-2 w-2 rounded-full"
@@ -306,7 +303,7 @@ const { feedbackUrl } = useFeedbackUrl()
               :style="{ backgroundColor: alertsStore.activeAlerts.critical.length > 0 ? 'var(--mnt-sev-incident)' : 'var(--mnt-sev-warning)' }"
             />
           </span>
-        </button>
+        </UiButton>
 
         <!-- Popover menu -->
         <Transition
diff --git a/frontend/src/components/CertificateCard.vue b/frontend/src/components/CertificateCard.vue
index d202c8ae..c4c1e70c 100644
--- a/frontend/src/components/CertificateCard.vue
+++ b/frontend/src/components/CertificateCard.vue
@@ -20,6 +20,7 @@ import { timeAgo } from '@/utils/time'
 import CertificateStatusBadge from './CertificateStatusBadge.vue'
 import AgentBadge from './AgentBadge.vue'
 import OCSPStatusBadge from './OCSPStatusBadge.vue'
+import UiButton from './ui/UiButton.vue'
 
 const props = defineProps<{
   certificate: CertMonitor
@@ -181,14 +182,9 @@ async function handleDelete() {
       :style="{ borderTop: '1px solid var(--mnt-border-subtle)' }"
       @click.stop
     >
-      <button
-        class="ml-auto rounded px-2 py-0.5 text-xs transition hover:opacity-80"
-        :style="{ color: 'var(--mnt-status-down)' }"
-        :disabled="deleting"
-        @click="handleDelete"
-      >
-        {{ deleting ? 'Deleting...' : 'Delete' }}
-      </button>
+      <UiButton variant="danger" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
+        Delete
+      </UiButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/CertificateDetail.vue b/frontend/src/components/CertificateDetail.vue
index b2e27336..1b611232 100644
--- a/frontend/src/components/CertificateDetail.vue
+++ b/frontend/src/components/CertificateDetail.vue
@@ -20,6 +20,8 @@ import CertificateStatusBadge from './CertificateStatusBadge.vue'
 import OCSPStatusBadge from './OCSPStatusBadge.vue'
 import CertificateChecksHistory from './CertificateChecksHistory.vue'
 import FeatureGate from './FeatureGate.vue'
+import UiButton from './ui/UiButton.vue'
+import TabNav, { type TabNavItem } from './ui/TabNav.vue'
 
 const props = defineProps<{
   certificateId: string
@@ -33,6 +35,10 @@ const detail = ref<CertificateDetailResponse | null>(null)
 const loading = ref(false)
 const error = ref<string | null>(null)
 const activeTab = ref<'details' | 'history'>('details')
+const tabItems: TabNavItem[] = [
+  { value: 'details', label: 'Details' },
+  { value: 'history', label: 'History' },
+]
 
 async function load() {
   loading.value = true
@@ -161,23 +167,18 @@ function countdownBgColor(days: number | undefined): string {
         >
           {{ detail.certificate.source }}
         </span>
-        <button
+        <UiButton
           v-if="canCheckNow"
-          type="button"
-          class="ml-auto flex cursor-pointer items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-bold transition-all disabled:cursor-default"
-          :style="{
-            backgroundColor: 'var(--mnt-bg-elevated)',
-            color: checking ? 'var(--mnt-text-muted)' : 'var(--mnt-accent)',
-            border: '1px solid var(--mnt-border-default)',
-            borderRadius: 'var(--mnt-radius-sm)',
-          }"
-          :disabled="checking"
-          :title="'Scan this certificate now instead of waiting for the next scheduled check'"
+          variant="secondary"
+          size="sm"
+          class="ml-auto font-bold"
+          :icon="RefreshCw"
+          :loading="checking"
+          title="Scan this certificate now instead of waiting for the next scheduled check"
           @click="checkNow"
         >
-          <RefreshCw :size="12" :class="{ 'animate-spin': checking }" />
           {{ checking ? 'Checking...' : 'Check now' }}
-        </button>
+        </UiButton>
       </div>
 
       <div
@@ -193,37 +194,13 @@ function countdownBgColor(days: number | undefined): string {
       </div>
 
       <!-- Tabs -->
-      <div
-        class="mb-4 flex gap-4"
-        :style="{ borderBottom: '1px solid var(--mnt-border-default)' }"
-      >
-        <button
-          type="button"
-          class="cursor-pointer text-sm font-medium transition"
-          :style="{
-            padding: '0.5rem 0',
-            color: activeTab === 'details' ? 'var(--mnt-text-primary)' : 'var(--mnt-text-muted)',
-            borderBottom: activeTab === 'details' ? '2px solid var(--mnt-accent)' : '2px solid transparent',
-            marginBottom: '-1px',
-          }"
-          @click="activeTab = 'details'"
-        >
-          Details
-        </button>
-        <button
-          type="button"
-          class="cursor-pointer text-sm font-medium transition"
-          :style="{
-            padding: '0.5rem 0',
-            color: activeTab === 'history' ? 'var(--mnt-text-primary)' : 'var(--mnt-text-muted)',
-            borderBottom: activeTab === 'history' ? '2px solid var(--mnt-accent)' : '2px solid transparent',
-            marginBottom: '-1px',
-          }"
-          @click="activeTab = 'history'"
-        >
-          History
-        </button>
-      </div>
+      <TabNav
+        class="mb-4"
+        :model-value="activeTab"
+        :items="tabItems"
+        ariaLabel="Certificate detail tabs"
+        @update:model-value="(v) => (activeTab = v as 'details' | 'history')"
+      />
 
       <CertificateChecksHistory v-if="activeTab === 'history'" :certificate-id="certificateId" />
 
diff --git a/frontend/src/components/ChannelManager.vue b/frontend/src/components/ChannelManager.vue
index 113b3d44..2d94bf75 100644
--- a/frontend/src/components/ChannelManager.vue
+++ b/frontend/src/components/ChannelManager.vue
@@ -23,6 +23,10 @@ import {
   type NotificationChannel,
 } from '@/services/alertApi'
 import ChannelWizard from '@/components/ChannelWizard.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
 
 const store = useChannelsStore()
 
@@ -153,12 +157,7 @@ function handleWizardCreated() {
     <div class="mb-4 flex items-center justify-between">
       <h2 class="text-lg font-semibold text-mnt-primary">Notification Channels</h2>
       <div class="flex gap-2">
-        <button
-          @click="showWizard = true; showForm = false"
-          class="inline-flex items-center gap-2 px-4 py-2 bg-mnt-green-600 hover:bg-mnt-green-500 text-mnt-inverted rounded-lg text-xs font-bold transition-all shadow-lg shadow-mnt-green-500/20"
-        >
-          Add Channel
-        </button>
+        <UiButton variant="primary" @click="showWizard = true; showForm = false">Add Channel</UiButton>
       </div>
     </div>
 
@@ -182,41 +181,58 @@ function handleWizardCreated() {
     <div v-if="showForm && editingId" class="mb-4 rounded-xl border border-mnt-default bg-mnt-surface p-4">
       <h3 class="mb-3 text-sm font-medium text-mnt-primary">Edit Channel</h3>
       <form @submit.prevent="submitForm" class="space-y-3">
-        <div>
-          <label class="block text-[10px] font-bold uppercase tracking-widest text-mnt-muted">Name</label>
-          <input v-model="form.name" required class="mt-1 w-full rounded-lg border border-mnt-default bg-mnt-primary px-3 py-2 text-sm text-mnt-primary focus:outline-none focus:border-mnt-default" />
-        </div>
-        <div>
-          <label class="block text-[10px] font-bold uppercase tracking-widest text-mnt-muted">{{ destinationLabel }}</label>
-          <input v-model="form.url" required :type="destinationInputType" class="mt-1 w-full rounded-lg border border-mnt-default bg-mnt-primary px-3 py-2 text-sm text-mnt-primary focus:outline-none focus:border-mnt-default" />
-        </div>
-        <template v-if="isTelegram">
-          <div>
-            <label class="block text-[10px] font-bold uppercase tracking-widest text-mnt-muted">Bot Token</label>
-            <input
-              v-model="form.secret"
-              type="password"
-              autocomplete="off"
-              :placeholder="editingHasSecret ? 'Token on file — leave empty to keep it' : '123456789:AA...'"
-              class="mt-1 w-full rounded-lg border border-mnt-default bg-mnt-primary px-3 py-2 text-sm text-mnt-primary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default"
+        <FormField label="Name" required>
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="form.name" required :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
+        <FormField :label="destinationLabel" required>
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="form.url"
+              required
+              :type="destinationInputType"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
             />
-          </div>
-          <div>
-            <label class="block text-[10px] font-bold uppercase tracking-widest text-mnt-muted">Topic ID (optional)</label>
-            <input v-model="form.threadId" placeholder="42" class="mt-1 w-full rounded-lg border border-mnt-default bg-mnt-primary px-3 py-2 text-sm text-mnt-primary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default" />
-          </div>
+          </template>
+        </FormField>
+        <template v-if="isTelegram">
+          <FormField label="Bot Token">
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput
+                :id="id"
+                v-model="form.secret"
+                type="password"
+                autocomplete="off"
+                :placeholder="editingHasSecret ? 'Token on file — leave empty to keep it' : '123456789:AA...'"
+                :aria-describedby="describedBy"
+                :invalid="invalid"
+              />
+            </template>
+          </FormField>
+          <FormField label="Topic ID (optional)">
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput :id="id" v-model="form.threadId" placeholder="42" :aria-describedby="describedBy" :invalid="invalid" />
+            </template>
+          </FormField>
         </template>
-        <div v-if="!isTelegram">
-          <label class="block text-[10px] font-bold uppercase tracking-widest text-mnt-muted">Custom Headers (JSON)</label>
-          <input v-model="form.headers" placeholder='{"Authorization": "Bearer ..."}' class="mt-1 w-full rounded-lg border border-mnt-default bg-mnt-primary px-3 py-2 text-sm text-mnt-primary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default" />
-        </div>
-        <div class="flex items-center gap-2">
-          <input v-model="form.enabled" type="checkbox" id="ch-enabled" class="rounded accent-mnt-green-500" />
-          <label for="ch-enabled" class="text-sm text-mnt-secondary">Enabled</label>
-        </div>
+        <FormField v-if="!isTelegram" label="Custom Headers (JSON)">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="form.headers"
+              placeholder='{"Authorization": "Bearer ..."}'
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+            />
+          </template>
+        </FormField>
+        <CheckboxInput v-model="form.enabled" label="Enabled" />
         <div class="flex gap-2">
-          <button type="submit" class="px-4 py-2 bg-mnt-green-600 hover:bg-mnt-green-500 text-mnt-inverted rounded-lg text-xs font-bold transition-all">Save</button>
-          <button type="button" @click="resetForm" class="px-4 py-2 rounded-lg border border-mnt-default text-xs text-mnt-secondary hover:bg-mnt-elevated transition-all">Cancel</button>
+          <UiButton type="submit" variant="primary">Save</UiButton>
+          <UiButton type="button" variant="secondary" @click="resetForm">Cancel</UiButton>
         </div>
       </form>
     </div>
@@ -251,9 +267,9 @@ function handleWizardCreated() {
             </div>
           </div>
           <div class="flex items-center gap-2">
-            <button @click="handleTest(ch.id)" class="rounded-lg border border-mnt-default px-2.5 py-1 text-xs text-mnt-secondary hover:bg-mnt-elevated transition-all">Test</button>
-            <button @click="startEdit(ch)" class="rounded-lg border border-mnt-default px-2.5 py-1 text-xs text-mnt-secondary hover:bg-mnt-elevated transition-all">Edit</button>
-            <button @click="handleDelete(ch.id)" class="rounded-lg border border-mnt-status-down/40 px-2.5 py-1 text-xs text-mnt-status-down hover:bg-mnt-status-down/10 transition-all">Delete</button>
+            <UiButton variant="secondary" size="sm" @click="handleTest(ch.id)">Test</UiButton>
+            <UiButton variant="secondary" size="sm" @click="startEdit(ch)">Edit</UiButton>
+            <UiButton variant="danger" size="sm" @click="handleDelete(ch.id)">Delete</UiButton>
           </div>
         </div>
 
diff --git a/frontend/src/components/ChannelWizard.vue b/frontend/src/components/ChannelWizard.vue
index a4c5f379..14ffb882 100644
--- a/frontend/src/components/ChannelWizard.vue
+++ b/frontend/src/components/ChannelWizard.vue
@@ -17,6 +17,10 @@ import { createChannel, testChannel } from '@/services/alertApi'
 import { useEdition } from '@/composables/useEdition'
 import SmtpNotConfigured from '@/components/SmtpNotConfigured.vue'
 import EditionBadge from '@/components/EditionBadge.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
 
 const { hasFeature, editionPermits, requiredEditionFor } = useEdition()
 
@@ -304,13 +308,7 @@ function goBack() {
       </div>
 
       <div class="mt-4 flex justify-end">
-        <button
-          @click="emit('cancel')"
-          class="rounded-md border px-3 py-1.5 text-sm"
-          style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)"
-        >
-          Cancel
-        </button>
+        <UiButton variant="secondary" @click="emit('cancel')">Cancel</UiButton>
       </div>
     </div>
 
@@ -324,53 +322,59 @@ function goBack() {
       </p>
 
       <form @submit.prevent="submitConfig" class="space-y-3">
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Channel Name</label>
-          <input
-            v-model="form.name"
-            required
-            placeholder="e.g. #ops-alerts"
-            class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-            style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-          />
-        </div>
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">
-            {{ destinationLabel }}
-          </label>
-          <input
-            v-model="form.url"
-            required
-            :type="destinationInputType"
-            :placeholder="selectedTypeConfig?.urlPlaceholder"
-            class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-            style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-          />
-        </div>
-        <!-- Telegram: a token and an optional topic instead of a URL. The
-             destination is fixed by the product, so there is nothing to type. -->
-        <template v-if="selectedType === 'telegram'">
-          <div>
-            <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Bot Token</label>
-            <input
-              v-model="form.secret"
+        <FormField label="Channel Name" required>
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="form.name"
               required
-              type="password"
-              autocomplete="off"
-              placeholder="123456789:AA..."
-              class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-              style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
+              placeholder="e.g. #ops-alerts"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
             />
-          </div>
-          <div>
-            <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Topic ID (optional)</label>
-            <input
-              v-model="form.threadId"
-              placeholder="42"
-              class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-              style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
+          </template>
+        </FormField>
+        <FormField :label="destinationLabel" required>
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="form.url"
+              required
+              :type="destinationInputType"
+              :placeholder="selectedTypeConfig?.urlPlaceholder"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
             />
-          </div>
+          </template>
+        </FormField>
+        <!-- Telegram: a token and an optional topic instead of a URL. The
+             destination is fixed by the product, so there is nothing to type. -->
+        <template v-if="selectedType === 'telegram'">
+          <FormField label="Bot Token" required>
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput
+                :id="id"
+                v-model="form.secret"
+                required
+                type="password"
+                autocomplete="off"
+                placeholder="123456789:AA..."
+                :aria-describedby="describedBy"
+                :invalid="invalid"
+              />
+            </template>
+          </FormField>
+          <FormField label="Topic ID (optional)">
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput
+                :id="id"
+                v-model="form.threadId"
+                placeholder="42"
+                :aria-describedby="describedBy"
+                :invalid="invalid"
+              />
+            </template>
+          </FormField>
           <div class="text-xs space-y-1" style="color: var(--mnt-text-muted)">
             <p>
               Create a bot with @BotFather to get the token. To find the chat id, send the bot a
@@ -389,38 +393,24 @@ function goBack() {
             <p>Leave the topic empty unless the group uses topics.</p>
           </div>
         </template>
-        <div v-if="selectedType === 'webhook'">
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Custom Headers (JSON, optional)</label>
-          <input
-            v-model="form.headers"
-            placeholder='{"Authorization": "Bearer ..."}'
-            class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-            style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-          />
-        </div>
-        <div class="flex items-center gap-2">
-          <input v-model="form.enabled" type="checkbox" id="wizard-enabled" class="rounded" style="accent-color: var(--mnt-accent)" />
-          <label for="wizard-enabled" class="text-sm" style="color: var(--mnt-text-secondary)">Enable channel immediately</label>
-        </div>
+        <FormField v-if="selectedType === 'webhook'" label="Custom Headers (JSON, optional)">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="form.headers"
+              placeholder='{"Authorization": "Bearer ..."}'
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+            />
+          </template>
+        </FormField>
+        <CheckboxInput v-model="form.enabled" label="Enable channel immediately" />
         <p v-if="submitError" class="text-xs" style="color: var(--mnt-status-down-text)">
           {{ submitError }}
         </p>
         <div class="flex justify-between pt-2">
-          <button
-            type="button"
-            @click="goBack"
-            class="rounded-md border px-3 py-1.5 text-sm"
-            style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)"
-          >
-            Back
-          </button>
-          <button
-            type="submit"
-            class="rounded-md px-4 py-1.5 text-sm font-medium text-mnt-primary"
-            style="background: var(--mnt-accent)"
-          >
-            Create & Continue
-          </button>
+          <UiButton type="button" variant="secondary" @click="goBack">Back</UiButton>
+          <UiButton type="submit" variant="primary">Create & Continue</UiButton>
         </div>
       </form>
     </div>
@@ -440,14 +430,9 @@ function goBack() {
         <p class="text-xs truncate" style="color: var(--mnt-text-muted)">{{ form.url }}</p>
       </div>
 
-      <button
-        @click="runTest"
-        :disabled="testStatus === 'testing'"
-        class="mb-4 w-full rounded-md px-4 py-2 text-sm font-medium text-mnt-primary disabled:opacity-50 transition-colors"
-        style="background: var(--mnt-accent)"
-      >
+      <UiButton variant="primary" class="mb-4 w-full" :loading="testStatus === 'testing'" @click="runTest">
         {{ testStatus === 'testing' ? 'Sending test...' : 'Send Test Notification' }}
-      </button>
+      </UiButton>
 
       <!-- Test result -->
       <div
@@ -476,20 +461,8 @@ function goBack() {
       </div>
 
       <div class="flex justify-between">
-        <button
-          @click="goBack"
-          class="rounded-md border px-3 py-1.5 text-sm"
-          style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)"
-        >
-          Back
-        </button>
-        <button
-          @click="finish"
-          class="rounded-md px-4 py-1.5 text-sm font-medium text-mnt-primary"
-          style="background: var(--mnt-accent)"
-        >
-          Done
-        </button>
+        <UiButton variant="secondary" @click="goBack">Back</UiButton>
+        <UiButton variant="primary" @click="finish">Done</UiButton>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/ContainerDetail.vue b/frontend/src/components/ContainerDetail.vue
index 7a67a478..284c941c 100644
--- a/frontend/src/components/ContainerDetail.vue
+++ b/frontend/src/components/ContainerDetail.vue
@@ -41,15 +41,11 @@ import { usePostureStore } from '@/stores/posture'
 import { useEdition } from '@/composables/useEdition'
 import type { SecurityScore } from '@/services/postureApi'
 import { getStateStyle, getExitCodeStyle } from '@/utils/containerState'
-import {
-  Trash2,
-  Terminal,
-  Activity,
-  ChartLine,
-  ChevronRight,
-  ExternalLink,
-} from 'lucide-vue-next'
+import { Trash2, ChevronRight, ExternalLink } from 'lucide-vue-next'
 import { fetchSwarmServiceDetail, type SwarmServiceDetailResponse } from '@/services/swarmApi'
+import TabNav, { type TabNavItem } from './ui/TabNav.vue'
+import SelectInput from './ui/SelectInput.vue'
+import UiButton from './ui/UiButton.vue'
 
 const props = defineProps<{
   containerId: string
@@ -66,9 +62,22 @@ const uptimeDays = ref<UptimeDay[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
 const selectedLogContainer = ref<string | undefined>(undefined)
-const activeTab = ref<'logs' | 'info' | 'resources'>('info')
+const activeTab = ref<string>('info')
 const isLogExpanded = ref(false)
 
+const tabItems: TabNavItem[] = [
+  { value: 'info', label: 'Details' },
+  { value: 'logs', label: 'Logs' },
+  { value: 'resources', label: 'Resources' },
+]
+
+const selectedLogContainerModel = computed({
+  get: () => selectedLogContainer.value ?? '',
+  set: (value: string | number | null) => {
+    selectedLogContainer.value = value ? String(value) : undefined
+  },
+})
+
 const logStream = useLogStream({
   containerId: toRef(props, 'containerId'),
   containerName: selectedLogContainer,
@@ -297,20 +306,18 @@ watch(() => props.containerId, () => {
           {{ container.state }}
         </span>
         <!-- Delete button (non-running only) -->
-        <button
+        <UiButton
           v-if="container.state !== 'running'"
-          class="shrink-0 rounded-lg p-1.5 transition-colors"
-          :style="{
-            color: confirmingDelete ? 'var(--mnt-status-down)' : 'var(--mnt-text-muted)',
-            backgroundColor: confirmingDelete ? 'var(--mnt-status-down-bg)' : 'transparent',
-          }"
+          variant="ghost"
+          size="sm"
+          :icon="Trash2"
+          class="shrink-0"
+          :class="confirmingDelete ? 'bg-mnt-status-down text-mnt-status-down' : ''"
           :title="confirmingDelete ? 'Click again to confirm deletion' : 'Remove from database'"
           :aria-label="confirmingDelete ? 'Confirm deletion' : 'Remove container from database'"
           :disabled="deleting"
           @click="handleDelete"
-        >
-          <Trash2 :size="14" />
-        </button>
+        />
       </div>
 
       <!-- Resource bar (running only) -->
@@ -350,65 +357,20 @@ watch(() => props.containerId, () => {
       </div>
 
       <!-- Tab bar -->
-      <div
-        class="flex items-center gap-1 border-b px-5"
-        :style="{ borderColor: 'var(--mnt-border-default)' }"
-      >
-        <button
-          class="flex items-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition-colors"
-          :style="{
-            color: activeTab === 'info' ? 'var(--mnt-accent)' : 'var(--mnt-text-muted)',
-            borderBottom: activeTab === 'info' ? '2px solid var(--mnt-accent)' : '2px solid transparent',
-          }"
-          @click="activeTab = 'info'"
-        >
-          <Activity :size="13" />
-          Details
-        </button>
-        <button
-          class="flex items-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition-colors"
-          :style="{
-            color: activeTab === 'logs' ? 'var(--mnt-accent)' : 'var(--mnt-text-muted)',
-            borderBottom: activeTab === 'logs' ? '2px solid var(--mnt-accent)' : '2px solid transparent',
-          }"
-          @click="activeTab = 'logs'"
-        >
-          <Terminal :size="13" />
-          Logs
-        </button>
-        <button
-          class="flex items-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition-colors"
-          :style="{
-            color: activeTab === 'resources' ? 'var(--mnt-accent)' : 'var(--mnt-text-muted)',
-            borderBottom: activeTab === 'resources' ? '2px solid var(--mnt-accent)' : '2px solid transparent',
-          }"
-          @click="activeTab = 'resources'"
-        >
-          <ChartLine :size="13" />
-          Resources
-        </button>
+      <div class="relative flex items-center px-5">
+        <TabNav v-model="activeTab" :items="tabItems" ariaLabel="Container detail tabs" class="flex-1" />
 
         <!-- K8s container selector (logs tab only) -->
-        <select
+        <SelectInput
           v-if="activeTab === 'logs' && hasMultipleContainers && container?.container_names"
-          class="ml-auto text-xs"
-          :style="{
-            backgroundColor: 'var(--mnt-bg-elevated)',
-            color: 'var(--mnt-text-secondary)',
-            padding: '0.25rem 0.5rem',
-            borderRadius: 'var(--mnt-radius-sm)',
-            border: '1px solid var(--mnt-border-default)',
-          }"
-          :value="selectedLogContainer || ''"
-          @change="selectedLogContainer = ($event.target as HTMLSelectElement).value || undefined"
-        >
-          <option value="">All containers</option>
-          <option
-            v-for="name in container.container_names"
-            :key="name"
-            :value="name.replace(' (init)', '')"
-          >{{ name }}</option>
-        </select>
+          v-model="selectedLogContainerModel"
+          size="sm"
+          class="absolute right-0 top-1/2 max-w-[160px] -translate-y-1/2"
+          :options="[
+            { value: '', label: 'All containers' },
+            ...container.container_names.map((name) => ({ value: name.replace(' (init)', ''), label: name })),
+          ]"
+        />
       </div>
 
       <!-- Tab content -->
diff --git a/frontend/src/components/ContainerList.vue b/frontend/src/components/ContainerList.vue
index 112ee220..87477b83 100644
--- a/frontend/src/components/ContainerList.vue
+++ b/frontend/src/components/ContainerList.vue
@@ -27,6 +27,8 @@ import EmptyState from '@/components/ui/EmptyState.vue'
 import ErrorState from '@/components/ui/ErrorState.vue'
 import ListToolbar from '@/components/ui/ListToolbar.vue'
 import DataTable, { type Column } from '@/components/ui/DataTable.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 import type { ChipTone, StatusChip } from '@/components/ui/listFilters'
 import { usePreferencesStore } from '@/stores/preferences'
 import { ChevronDown, Box, SearchX } from 'lucide-vue-next'
@@ -188,6 +190,11 @@ function setArchived(value: boolean) {
   store.fetchContainers({ archived: value })
 }
 
+const archivedFilterValue = computed({
+  get: () => (showArchived.value ? 'all' : 'live'),
+  set: (value: string | number | null) => setArchived(value === 'all'),
+})
+
 function resetFilters() {
   filter.reset()
   hostFilter.value = ''
@@ -288,36 +295,32 @@ onMounted(() => {
         <template #filters>
           <label v-if="hostOptions.length > 1" class="flex flex-col gap-1">
             <span class="text-[11px] font-semibold uppercase tracking-wide text-mnt-muted">Host</span>
-            <select
+            <SelectInput
               v-model="hostFilter"
-              class="focus-ring min-h-[38px] rounded-lg border border-mnt-default bg-mnt-primary px-2 text-xs text-mnt-secondary"
-            >
-              <option value="">All hosts</option>
-              <option v-for="h in hostOptions" :key="h.value" :value="h.value">{{ h.label }}</option>
-            </select>
+              size="sm"
+              :options="[{ value: '', label: 'All hosts' }, ...hostOptions]"
+            />
           </label>
 
           <label v-if="groupOptions.length > 1" class="flex flex-col gap-1">
             <span class="text-[11px] font-semibold uppercase tracking-wide text-mnt-muted">Group</span>
-            <select
+            <SelectInput
               v-model="groupFilter"
-              class="focus-ring min-h-[38px] rounded-lg border border-mnt-default bg-mnt-primary px-2 text-xs text-mnt-secondary"
-            >
-              <option value="">All groups</option>
-              <option v-for="g in groupOptions" :key="g" :value="g">{{ g }}</option>
-            </select>
+              size="sm"
+              :options="[{ value: '', label: 'All groups' }, ...groupOptions.map((g) => ({ value: g, label: g }))]"
+            />
           </label>
 
           <label v-if="store.archivedCount > 0" class="flex flex-col gap-1">
             <span class="text-[11px] font-semibold uppercase tracking-wide text-mnt-muted">Archived</span>
-            <select
-              class="focus-ring min-h-[38px] rounded-lg border border-mnt-default bg-mnt-primary px-2 text-xs text-mnt-secondary"
-              :value="showArchived ? 'all' : 'live'"
-              @change="setArchived(($event.target as HTMLSelectElement).value === 'all')"
-            >
-              <option value="live">Live only</option>
-              <option value="all">Include archived ({{ store.archivedCount }})</option>
-            </select>
+            <SelectInput
+              v-model="archivedFilterValue"
+              size="sm"
+              :options="[
+                { value: 'live', label: 'Live only' },
+                { value: 'all', label: `Include archived (${store.archivedCount})` },
+              ]"
+            />
           </label>
         </template>
       </ListToolbar>
@@ -330,13 +333,7 @@ onMounted(() => {
         description="Try a broader search term, or clear the status and secondary filters to see the whole fleet again."
       >
         <template #action>
-          <button
-            type="button"
-            class="focus-ring min-h-[38px] rounded-lg border border-mnt-default px-3 text-xs font-semibold text-mnt-secondary hover:text-mnt-primary"
-            @click="resetFilters"
-          >
-            Clear filters
-          </button>
+          <UiButton variant="secondary" size="sm" @click="resetFilters">Clear filters</UiButton>
         </template>
       </EmptyState>
 
diff --git a/frontend/src/components/CveList.vue b/frontend/src/components/CveList.vue
index 3d1ac080..cf6f0c88 100644
--- a/frontend/src/components/CveList.vue
+++ b/frontend/src/components/CveList.vue
@@ -15,6 +15,7 @@
 import type { CVEInfo } from '@/services/updateApi'
 import { ref } from 'vue'
 import { Shield, Copy, Check, CheckCircle } from 'lucide-vue-next'
+import UiButton from './ui/UiButton.vue'
 
 defineProps<{
   cves: CVEInfo[]
@@ -85,14 +86,16 @@ async function copyFixCommand(cveId: string, command: string) {
         <div v-if="cve.fix_command && !cve.is_fixed_by_update" class="mt-1.5">
           <div class="flex items-center justify-between mb-1">
             <span class="text-[9px] text-mnt-muted uppercase tracking-wider">Fix command</span>
-            <button
-              @click="copyFixCommand(cve.cve_id, cve.fix_command)"
-              class="text-[9px] text-mnt-status-ok hover:text-mnt-accent flex items-center gap-1 transition-colors"
+            <UiButton
+              variant="ghost"
+              size="sm"
+              :icon="copiedFixId === cve.cve_id ? Check : Copy"
+              class="!min-h-0 !px-1.5 !py-0 text-[9px] text-mnt-status-ok hover:text-mnt-accent"
               aria-label="Copy fix command"
+              @click="copyFixCommand(cve.cve_id, cve.fix_command)"
             >
-              <component :is="copiedFixId === cve.cve_id ? Check : Copy" :size="9" />
               {{ copiedFixId === cve.cve_id ? 'Copied!' : 'Copy' }}
-            </button>
+            </UiButton>
           </div>
           <pre class="text-[10px] text-mnt-secondary bg-mnt-primary rounded-lg p-2 overflow-x-auto font-mono">{{ cve.fix_command }}</pre>
         </div>
diff --git a/frontend/src/components/EndpointCard.vue b/frontend/src/components/EndpointCard.vue
index 8fba3fa3..d628c79e 100644
--- a/frontend/src/components/EndpointCard.vue
+++ b/frontend/src/components/EndpointCard.vue
@@ -21,6 +21,7 @@ import { timeAgo } from '@/utils/time'
 import EndpointStatusBadge from './EndpointStatusBadge.vue'
 import AgentBadge from './AgentBadge.vue'
 import UptimeBar90 from './ui/UptimeBar90.vue'
+import UiButton from './ui/UiButton.vue'
 
 const props = defineProps<{
   endpoint: Endpoint
@@ -201,14 +202,9 @@ function formatResponseTime(ms: number | undefined): string {
       @click.stop
     >
       <span v-if="isRetired" class="text-xs text-mnt-muted">Container gone</span>
-      <button
-        class="ml-auto rounded px-2 py-0.5 text-xs transition hover:opacity-80"
-        :style="{ color: 'var(--mnt-status-down)' }"
-        :disabled="deleting"
-        @click="handleDelete"
-      >
-        {{ deleting ? 'Deleting...' : 'Delete' }}
-      </button>
+      <UiButton variant="danger" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
+        Delete
+      </UiButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/EndpointDetail.vue b/frontend/src/components/EndpointDetail.vue
index b96fa7eb..6a2e71a8 100644
--- a/frontend/src/components/EndpointDetail.vue
+++ b/frontend/src/components/EndpointDetail.vue
@@ -31,6 +31,7 @@ import EndpointStatusBadge from './EndpointStatusBadge.vue'
 import EndpointEventTimeline from './EndpointEventTimeline.vue'
 import AgentBadge from './AgentBadge.vue'
 import UptimeBar90 from './ui/UptimeBar90.vue'
+import UiButton from './ui/UiButton.vue'
 
 const props = defineProps<{
   endpointId: string
@@ -194,15 +195,9 @@ watch(() => props.endpointId, () => {
           {{ endpoint.target }}
         </p>
       </div>
-      <button
-        class="shrink-0 rounded px-3 py-1 text-sm transition-colors"
-        style="color: var(--mnt-text-muted)"
-        @click="emit('close')"
-        @mouseenter="($event.target as HTMLElement).style.background = 'var(--mnt-bg-hover)'"
-        @mouseleave="($event.target as HTMLElement).style.background = 'transparent'"
-      >
+      <UiButton variant="ghost" size="sm" class="shrink-0" @click="emit('close')">
         Close
-      </button>
+      </UiButton>
     </div>
 
     <!-- Loading -->
@@ -252,23 +247,18 @@ watch(() => props.endpointId, () => {
         <span v-if="isHttp && endpoint.last_http_status" style="color: var(--mnt-text-muted)">
           HTTP {{ endpoint.last_http_status }}
         </span>
-        <button
+        <UiButton
           v-if="canCheckNow"
-          type="button"
-          class="ml-auto flex cursor-pointer items-center gap-1.5 px-3 py-1 text-xs font-bold transition-all disabled:cursor-default"
-          :style="{
-            backgroundColor: 'var(--mnt-bg-elevated)',
-            color: checking ? 'var(--mnt-text-muted)' : 'var(--mnt-accent)',
-            border: '1px solid var(--mnt-border-default)',
-            borderRadius: 'var(--mnt-radius-sm)',
-          }"
-          :disabled="checking"
+          variant="secondary"
+          size="sm"
+          class="ml-auto font-bold"
+          :icon="RefreshCw"
+          :loading="checking"
           title="Probe this endpoint now instead of waiting for the next scheduled check"
           @click="checkNow"
         >
-          <RefreshCw :size="12" :class="{ 'animate-spin': checking }" />
           {{ checking ? 'Checking…' : 'Check now' }}
-        </button>
+        </UiButton>
       </div>
 
       <div
@@ -415,14 +405,9 @@ watch(() => props.endpointId, () => {
         :style="{ borderTop: '1px solid var(--mnt-border-subtle)' }"
       >
         <span v-if="isRetired" class="text-xs text-mnt-muted">Container gone</span>
-        <button
-          class="ml-auto rounded px-2 py-1 text-xs transition hover:opacity-80"
-          :style="{ color: 'var(--mnt-status-down)' }"
-          :disabled="deleting"
-          @click="handleDelete"
-        >
-          {{ deleting ? 'Deleting…' : 'Delete endpoint' }}
-        </button>
+        <UiButton variant="danger" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
+          Delete endpoint
+        </UiButton>
       </div>
     </template>
   </div>
diff --git a/frontend/src/components/EnrollmentTokenModal.vue b/frontend/src/components/EnrollmentTokenModal.vue
index d5f1bc71..e4a91093 100644
--- a/frontend/src/components/EnrollmentTokenModal.vue
+++ b/frontend/src/components/EnrollmentTokenModal.vue
@@ -12,8 +12,12 @@
 -->
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import type { EnrollmentTokenCreated, InstallMode } from '@/services/agentApi'
+import UiModal from '@/components/ui/UiModal.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
+import InlineAlert from '@/components/ui/InlineAlert.vue'
 
 const props = defineProps<{
   token: EnrollmentTokenCreated
@@ -30,6 +34,7 @@ const MODES: Array<{ id: InstallMode; label: string }> = [
   { id: 'kubernetes', label: 'Kubernetes' },
   { id: 'standalone', label: 'Standalone (soon)' },
 ]
+const MODE_OPTIONS = MODES.map((m) => ({ value: m.id, label: m.label }))
 
 function isValidMode(value: unknown): value is InstallMode {
   return typeof value === 'string' && MODES.some((m) => m.id === value)
@@ -48,7 +53,8 @@ onMounted(() => {
   }
 })
 
-function selectMode(mode: InstallMode) {
+function selectMode(mode: string) {
+  if (!isValidMode(mode)) return
   selectedMode.value = mode
   try {
     window.localStorage.setItem(STORAGE_KEY, mode)
@@ -75,133 +81,77 @@ function copyText(text: string, which: 'command' | 'token') {
 }
 
 const hasLocalWarning = props.token.warnings?.includes('public_url_appears_local') ?? false
+
+const open = ref(true)
+watch(open, (value) => {
+  if (!value) emit('close')
+})
 </script>
 
 <template>
-  <Teleport to="body">
-    <div
-      class="fixed inset-0 z-[10001] flex items-center justify-center"
-      @keydown.esc="emit('close')"
-    >
-      <div
-        class="fixed inset-0 bg-black/70 backdrop-blur-sm"
-      />
-
-      <div
-        class="relative mx-4 w-full max-w-2xl overflow-hidden"
-        :style="{
-          backgroundColor: 'var(--mnt-bg-surface)',
-          border: '1px solid var(--mnt-border-default)',
-          borderRadius: 'var(--mnt-radius-lg)',
-          boxShadow: 'var(--mnt-shadow-elevated)',
-        }"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="token-modal-title"
-      >
-        <div class="p-6 space-y-5">
-          <!-- Header -->
-          <div>
-            <h2
-              id="token-modal-title"
-              class="text-lg font-semibold text-mnt-primary"
-            >
-              Enrollment Token
-            </h2>
-            <p class="mt-1 text-sm text-mnt-muted">
-              This token will <span class="text-mnt-primary font-semibold">never be shown again</span>.
-              Copy the install command before closing.
-            </p>
-          </div>
-
-          <!-- Local URL warning -->
-          <div
-            v-if="hasLocalWarning"
-            class="rounded-lg border border-yellow-500/30 bg-yellow-500/10 px-4 py-3"
-          >
-            <p class="text-sm text-yellow-400 font-semibold">Local address detected</p>
-            <p class="mt-1 text-xs text-yellow-300/80">
-              The server URL resolves to a local address. Remote agents won't be able to connect.
-              Set <code class="font-mono bg-yellow-500/10 px-1 rounded">MAINTENANT_GRPC_URL</code>
-              to a publicly reachable address.
-            </p>
-          </div>
-
-          <!-- Token cleartext -->
-          <div>
-            <p class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest mb-1">Token</p>
-            <div class="flex items-center gap-2">
-              <code
-                class="flex-1 block rounded-lg bg-mnt-primary border border-mnt-default px-3 py-2 font-mono text-xs text-mnt-secondary break-all"
-              >{{ token.token }}</code>
-              <button
-                type="button"
-                class="shrink-0 rounded-lg border border-mnt-default bg-mnt-primary px-3 py-2 text-xs text-mnt-secondary hover:bg-mnt-elevated transition-colors"
-                @click="copyText(token.token, 'token')"
-              >
-                {{ copiedToken ? 'Copied!' : 'Copy' }}
-              </button>
-            </div>
-          </div>
-
-          <!-- Install mode selector + command -->
-          <div>
-            <p class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest mb-2">Install command</p>
-
-            <!-- Segmented control -->
-            <div
-              role="tablist"
-              aria-label="Install mode"
-              class="flex flex-wrap gap-1 rounded-lg border border-mnt-default bg-mnt-primary p-1 mb-2"
-            >
-              <button
-                v-for="mode in MODES"
-                :key="mode.id"
-                type="button"
-                role="tab"
-                :aria-selected="selectedMode === mode.id"
-                class="flex-1 min-w-[5rem] rounded-md px-3 py-1.5 text-xs font-medium transition-colors"
-                :class="
-                  selectedMode === mode.id
-                    ? 'bg-mnt-elevated text-mnt-primary'
-                    : 'text-mnt-muted hover:bg-mnt-elevated hover:text-mnt-secondary'
-                "
-                @click="selectMode(mode.id)"
-              >
-                {{ mode.label }}
-              </button>
-            </div>
-
-            <!-- Template body -->
-            <pre
-              class="rounded-lg bg-mnt-primary border border-mnt-default px-3 py-2 font-mono text-xs text-mnt-secondary whitespace-pre overflow-auto max-h-80"
-            >{{ currentTemplate }}</pre>
-
-            <button
-              v-if="selectedMode !== 'standalone'"
-              type="button"
-              class="mt-2 w-full rounded-lg border border-mnt-default bg-mnt-primary px-4 py-2 text-sm font-medium text-mnt-secondary hover:bg-mnt-elevated transition-colors"
-              @click="copyText(currentTemplate, 'command')"
-            >
-              {{ copiedCommand ? 'Copied!' : 'Copy install command' }}
-            </button>
-          </div>
-
-          <!-- Expires -->
-          <p class="text-xs text-mnt-muted">
-            Expires: {{ new Date(token.expires_at).toLocaleString() }}
-          </p>
-
-          <!-- Done -->
-          <button
-            type="button"
-            class="w-full rounded-lg bg-mnt-green-600 px-4 py-2 text-sm font-semibold text-mnt-primary hover:opacity-90 transition-opacity"
-            @click="emit('close')"
-          >
-            Done
-          </button>
+  <UiModal v-model:open="open" title="Enrollment Token" size="lg">
+    <div class="space-y-5">
+      <p class="text-sm text-mnt-muted">
+        This token will <span class="text-mnt-primary font-semibold">never be shown again</span>.
+        Copy the install command before closing.
+      </p>
+
+      <InlineAlert v-if="hasLocalWarning" severity="warning" title="Local address detected">
+        The server URL resolves to a local address. Remote agents won't be able to connect.
+        Set <code class="font-mono bg-mnt-elevated px-1 rounded">MAINTENANT_GRPC_URL</code>
+        to a publicly reachable address.
+      </InlineAlert>
+
+      <!-- Token cleartext -->
+      <div>
+        <p class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest mb-1">Token</p>
+        <div class="flex items-center gap-2">
+          <code
+            class="flex-1 block rounded-lg bg-mnt-primary border border-mnt-default px-3 py-2 font-mono text-xs text-mnt-secondary break-all"
+          >{{ token.token }}</code>
+          <UiButton variant="secondary" size="sm" @click="copyText(token.token, 'token')">
+            {{ copiedToken ? 'Copied!' : 'Copy' }}
+          </UiButton>
         </div>
       </div>
+
+      <!-- Install mode selector + command -->
+      <div>
+        <p class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest mb-2">Install command</p>
+
+        <SegmentedToggle
+          :model-value="selectedMode"
+          :options="MODE_OPTIONS"
+          ariaLabel="Install mode"
+          class="mb-2"
+          @update:model-value="selectMode"
+        />
+
+        <!-- Template body -->
+        <pre
+          class="rounded-lg bg-mnt-primary border border-mnt-default px-3 py-2 font-mono text-xs text-mnt-secondary whitespace-pre overflow-auto max-h-80"
+        >{{ currentTemplate }}</pre>
+
+        <UiButton
+          v-if="selectedMode !== 'standalone'"
+          variant="secondary"
+          class="mt-2 w-full"
+          @click="copyText(currentTemplate, 'command')"
+        >
+          {{ copiedCommand ? 'Copied!' : 'Copy install command' }}
+        </UiButton>
+      </div>
+
+      <!-- Expires -->
+      <p class="text-xs text-mnt-muted">
+        Expires: {{ new Date(token.expires_at).toLocaleString() }}
+      </p>
     </div>
-  </Teleport>
+
+    <template #footer>
+      <UiButton variant="primary" class="w-full" @click="open = false">
+        Done
+      </UiButton>
+    </template>
+  </UiModal>
 </template>
diff --git a/frontend/src/components/HeartbeatCard.vue b/frontend/src/components/HeartbeatCard.vue
index 92d5f439..e4016f92 100644
--- a/frontend/src/components/HeartbeatCard.vue
+++ b/frontend/src/components/HeartbeatCard.vue
@@ -21,6 +21,7 @@ import { timeAgo } from '@/utils/time'
 import HeartbeatStatusBadge from './HeartbeatStatusBadge.vue'
 import AgentBadge from './AgentBadge.vue'
 import UptimeBar90 from './ui/UptimeBar90.vue'
+import UiButton from './ui/UiButton.vue'
 
 const props = defineProps<{
   heartbeat: Heartbeat
@@ -161,37 +162,30 @@ async function handleDelete() {
       :style="{ borderTop: '1px solid var(--mnt-border-subtle)' }"
       @click.stop
     >
-      <button
-        class="rounded px-2 py-0.5 text-xs"
-        :style="{ color: 'var(--mnt-text-secondary)' }"
-        @click="copyPingUrl"
-      >
+      <UiButton variant="ghost" size="sm" class="!min-h-0 px-2 py-0.5 text-xs" @click="copyPingUrl">
         {{ copied ? 'Copied!' : 'Copy URL' }}
-      </button>
-      <button
+      </UiButton>
+      <UiButton
         v-if="heartbeat.status !== 'paused'"
-        class="rounded px-2 py-0.5 text-xs"
-        :style="{ color: 'var(--mnt-status-warn)' }"
+        variant="ghost"
+        size="sm"
+        class="!min-h-0 px-2 py-0.5 text-xs text-mnt-status-warn"
         @click="handlePause"
       >
         Pause
-      </button>
-      <button
+      </UiButton>
+      <UiButton
         v-else
-        class="rounded px-2 py-0.5 text-xs"
-        :style="{ color: 'var(--mnt-status-ok)' }"
+        variant="ghost"
+        size="sm"
+        class="!min-h-0 px-2 py-0.5 text-xs text-mnt-status-ok"
         @click="handleResume"
       >
         Resume
-      </button>
-      <button
-        class="ml-auto rounded px-2 py-0.5 text-xs transition hover:opacity-80"
-        :style="{ color: 'var(--mnt-status-down)' }"
-        :disabled="deleting"
-        @click="handleDelete"
-      >
-        {{ deleting ? 'Deleting...' : 'Delete' }}
-      </button>
+      </UiButton>
+      <UiButton variant="danger" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
+        Delete
+      </UiButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/HeartbeatDetail.vue b/frontend/src/components/HeartbeatDetail.vue
index fda364eb..d4733348 100644
--- a/frontend/src/components/HeartbeatDetail.vue
+++ b/frontend/src/components/HeartbeatDetail.vue
@@ -24,6 +24,7 @@ import HeartbeatSnippets from './HeartbeatSnippets.vue'
 import HeartbeatGantt from './HeartbeatGantt.vue'
 import type { HeartbeatTimelineEntry } from './HeartbeatGantt.vue'
 import { formatInterval, nextExpectedPing } from '@/utils/scheduleFormat'
+import UiButton from './ui/UiButton.vue'
 
 const props = defineProps<{
   heartbeatId: string
@@ -105,15 +106,9 @@ const outcomeColors: Record<string, { bg: string; color: string }> = {
       <h2 class="text-lg font-bold" style="color: var(--mnt-text-primary)">
         {{ detail?.heartbeat.name || 'Loading...' }}
       </h2>
-      <button
-        class="rounded px-3 py-1 text-sm transition-colors"
-        style="color: var(--mnt-text-muted)"
-        @click="emit('close')"
-        @mouseenter="($event.target as HTMLElement).style.background = 'var(--mnt-bg-hover)'"
-        @mouseleave="($event.target as HTMLElement).style.background = 'transparent'"
-      >
+      <UiButton variant="ghost" size="sm" @click="emit('close')">
         Close
-      </button>
+      </UiButton>
     </div>
 
     <div v-if="loading" class="py-8 text-center" style="color: var(--mnt-text-muted)">Loading...</div>
@@ -215,14 +210,15 @@ const outcomeColors: Record<string, { bg: string; color: string }> = {
                   </span>
                 </td>
                 <td class="py-2">
-                  <button
+                  <UiButton
                     v-if="exec.payload"
-                    class="text-xs transition-colors"
-                    style="color: var(--mnt-accent)"
+                    variant="ghost"
+                    size="sm"
+                    class="!min-h-0 p-0 text-mnt-accent"
                     @click="expandedPayload = expandedPayload === exec.id ? null : exec.id"
                   >
                     {{ expandedPayload === exec.id ? 'Hide' : 'Show' }}
-                  </button>
+                  </UiButton>
                   <span v-else style="color: var(--mnt-text-muted)">-</span>
                 </td>
               </tr>
diff --git a/frontend/src/components/HeartbeatSnippets.vue b/frontend/src/components/HeartbeatSnippets.vue
index 661d8a15..12808fbc 100644
--- a/frontend/src/components/HeartbeatSnippets.vue
+++ b/frontend/src/components/HeartbeatSnippets.vue
@@ -13,6 +13,9 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { Check, Copy } from 'lucide-vue-next'
+import TabNav, { type TabNavItem } from './ui/TabNav.vue'
+import UiButton from './ui/UiButton.vue'
 
 defineProps<{
   snippets: Record<string, string>
@@ -21,13 +24,13 @@ defineProps<{
 const activeTab = ref('curl')
 const copied = ref(false)
 
-const tabs = [
-  { key: 'curl', label: 'curl' },
-  { key: 'wget', label: 'wget' },
-  { key: 'python', label: 'Python' },
-  { key: 'go', label: 'Go' },
-  { key: 'bash', label: 'Bash' },
-  { key: 'docker_healthcheck', label: 'Docker' },
+const tabs: TabNavItem[] = [
+  { value: 'curl', label: 'curl' },
+  { value: 'wget', label: 'wget' },
+  { value: 'python', label: 'Python' },
+  { value: 'go', label: 'Go' },
+  { value: 'bash', label: 'Bash' },
+  { value: 'docker_healthcheck', label: 'Docker' },
 ]
 
 async function copySnippet(code: string) {
@@ -42,68 +45,25 @@ async function copySnippet(code: string) {
     <h3 class="mb-2 text-sm font-semibold" style="color: var(--mnt-text-primary)">Integration Snippets</h3>
 
     <!-- Tabs -->
-    <div class="mb-2 flex gap-1 border-b" style="border-color: var(--mnt-border-default)">
-      <button
-        v-for="tab in tabs"
-        :key="tab.key"
-        class="rounded-t px-3 py-1.5 text-xs font-medium transition-colors"
-        :style="{
-          borderBottom: activeTab === tab.key ? '2px solid var(--mnt-accent)' : '2px solid transparent',
-          color: activeTab === tab.key ? 'var(--mnt-accent)' : 'var(--mnt-text-muted)',
-        }"
-        @click="activeTab = tab.key"
-      >
-        {{ tab.label }}
-      </button>
-    </div>
+    <TabNav v-model="activeTab" :items="tabs" ariaLabel="Snippet language" />
 
     <!-- Code block -->
-    <div class="relative">
+    <div class="relative mt-2">
       <pre
         class="overflow-x-auto rounded-lg p-4 font-mono text-sm"
         style="background: var(--mnt-bg-elevated); color: var(--mnt-text-primary)"
       >{{ snippets[activeTab] || '' }}</pre>
-      <button
-        class="absolute right-2 top-2 flex items-center gap-1 rounded px-2 py-1 text-xs transition-all"
-        :style="{
-          background: copied ? 'var(--mnt-status-ok-bg)' : 'var(--mnt-bg-hover)',
-          color: copied ? 'var(--mnt-status-ok)' : 'var(--mnt-text-muted)',
-        }"
+      <UiButton
+        variant="ghost"
+        size="sm"
+        :icon="copied ? Check : Copy"
+        class="absolute right-2 top-2"
+        :class="copied ? 'text-mnt-status-ok' : ''"
         aria-label="Copy snippet"
         @click="copySnippet(snippets[activeTab] || '')"
       >
-        <!-- Checkmark icon when copied -->
-        <svg
-          v-if="copied"
-          width="14"
-          height="14"
-          viewBox="0 0 14 14"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="transition-all"
-        >
-          <path d="M3 7.5L5.5 10L11 4" />
-        </svg>
-        <!-- Copy icon when not copied -->
-        <svg
-          v-else
-          width="14"
-          height="14"
-          viewBox="0 0 14 14"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <rect x="4.5" y="4.5" width="7" height="7" rx="1" />
-          <path d="M9.5 4.5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h1.5" />
-        </svg>
         {{ copied ? 'Copied!' : 'Copy' }}
-      </button>
+      </UiButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/HostLimitDialog.vue b/frontend/src/components/HostLimitDialog.vue
index 8cf365e7..6c55cd3a 100644
--- a/frontend/src/components/HostLimitDialog.vue
+++ b/frontend/src/components/HostLimitDialog.vue
@@ -12,10 +12,12 @@
 -->
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 import { MonitorDot } from 'lucide-vue-next'
 import EditionBadge from '@/components/EditionBadge.vue'
+import UiModal from '@/components/ui/UiModal.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 import type { Edition } from '@/services/editionApi'
 
 const props = defineProps<{
@@ -39,98 +41,67 @@ const mailto =
   'mailto:benjamin@kolapsis.com' +
   '?subject=' +
   encodeURIComponent('Maintenant: monitoring more hosts')
+
+const open = ref(true)
+watch(open, (value) => {
+  if (!value) emit('close')
+})
 </script>
 
 <template>
-  <Teleport to="body">
-    <div
-      class="fixed inset-0 z-[10001] flex items-center justify-center"
-      @keydown.esc="emit('close')"
-    >
-      <div class="fixed inset-0 bg-black/70 backdrop-blur-sm" @click="emit('close')" />
+  <UiModal v-model:open="open" title="Host limit reached" size="sm">
+    <div class="space-y-5">
+      <div class="flex items-start gap-3">
+        <div
+          class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center"
+          style="background: var(--mnt-bg-elevated); border: 1px solid var(--mnt-border-default)"
+        >
+          <MonitorDot :size="20" class="text-mnt-accent" />
+        </div>
+        <p class="text-sm text-mnt-muted">
+          You're monitoring
+          <span class="font-semibold text-mnt-secondary">{{ used }} of {{ limit }}</span>
+          hosts on this server.
+        </p>
+      </div>
 
-      <div
-        class="relative mx-4 w-full max-w-md overflow-hidden"
+      <p v-if="requiredEdition" class="text-sm text-mnt-muted leading-relaxed">
+        The
+        <EditionBadge :edition="requiredEdition" class="mx-0.5 align-middle" />
+        edition lifts this limit.
+      </p>
+      <p v-else class="text-sm text-mnt-muted leading-relaxed">
+        Need to monitor more hosts? Get in touch directly and I'll help you set it up.
+      </p>
+    </div>
+
+    <template #footer>
+      <UiButton variant="secondary" @click="open = false">Close</UiButton>
+      <RouterLink
+        v-if="requiredEdition"
+        :to="{ name: 'editions' }"
+        class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold transition-opacity hover:opacity-90"
         :style="{
-          backgroundColor: 'var(--mnt-bg-surface)',
-          border: '1px solid var(--mnt-border-default)',
-          borderRadius: 'var(--mnt-radius-lg)',
-          boxShadow: 'var(--mnt-shadow-elevated)',
+          backgroundColor: 'var(--mnt-accent)',
+          color: 'var(--mnt-text-inverted)',
+          borderRadius: 'var(--mnt-radius-md)',
         }"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="host-limit-title"
+        @click="open = false"
       >
-        <div class="p-6 space-y-5">
-          <div class="flex items-start gap-3">
-            <div
-              class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center"
-              style="background: var(--mnt-bg-elevated); border: 1px solid var(--mnt-border-default)"
-            >
-              <MonitorDot :size="20" class="text-mnt-accent" />
-            </div>
-            <div>
-              <h2 id="host-limit-title" class="text-lg font-semibold text-mnt-primary">
-                Host limit reached
-              </h2>
-              <p class="mt-1 text-sm text-mnt-muted">
-                You're monitoring
-                <span class="font-semibold text-mnt-secondary">{{ used }} of {{ limit }}</span>
-                hosts on this server.
-              </p>
-            </div>
-          </div>
-
-          <p v-if="requiredEdition" class="text-sm text-mnt-muted leading-relaxed">
-            The
-            <EditionBadge :edition="requiredEdition" class="mx-0.5 align-middle" />
-            edition lifts this limit.
-          </p>
-          <p v-else class="text-sm text-mnt-muted leading-relaxed">
-            Need to monitor more hosts? Get in touch directly and I'll help you set it up.
-          </p>
-
-          <div class="flex flex-col gap-2">
-            <RouterLink
-              v-if="requiredEdition"
-              :to="{ name: 'editions' }"
-              class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold transition-opacity hover:opacity-90"
-              :style="{
-                backgroundColor: 'var(--mnt-accent)',
-                color: 'var(--mnt-text-inverted)',
-                borderRadius: 'var(--mnt-radius-md)',
-              }"
-              @click="emit('close')"
-            >
-              Compare editions
-            </RouterLink>
-            <a
-              v-else
-              :href="mailto"
-              class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold transition-opacity hover:opacity-90"
-              :style="{
-                backgroundColor: 'var(--mnt-accent)',
-                color: 'var(--mnt-text-inverted)',
-                borderRadius: 'var(--mnt-radius-md)',
-              }"
-            >
-              Email benjamin@kolapsis.com
-            </a>
-            <button
-              type="button"
-              class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors"
-              :style="{
-                backgroundColor: 'var(--mnt-bg-elevated)',
-                color: 'var(--mnt-text-secondary)',
-                borderRadius: 'var(--mnt-radius-md)',
-              }"
-              @click="emit('close')"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Teleport>
+        Compare editions
+      </RouterLink>
+      <a
+        v-else
+        :href="mailto"
+        class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold transition-opacity hover:opacity-90"
+        :style="{
+          backgroundColor: 'var(--mnt-accent)',
+          color: 'var(--mnt-text-inverted)',
+          borderRadius: 'var(--mnt-radius-md)',
+        }"
+      >
+        Email benjamin@kolapsis.com
+      </a>
+    </template>
+  </UiModal>
 </template>
diff --git a/frontend/src/components/K8sPodDetail.vue b/frontend/src/components/K8sPodDetail.vue
index 52ed469d..34b7a23e 100644
--- a/frontend/src/components/K8sPodDetail.vue
+++ b/frontend/src/components/K8sPodDetail.vue
@@ -12,10 +12,11 @@
 -->
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { fetchPodDetail, type K8sPodDetailResponse } from '@/services/kubernetesApi'
 import { useResourcesStore } from '@/stores/resources'
 import { timeAgo } from '@/utils/time'
+import TabNav, { type TabNavItem } from '@/components/ui/TabNav.vue'
 
 const props = defineProps<{
   podNamespace: string
@@ -26,16 +27,14 @@ defineEmits<{
   close: []
 }>()
 
-type Tab = 'containers' | 'events'
-
 const detail = ref<K8sPodDetailResponse | null>(null)
 const loading = ref(true)
-const activeTab = ref<Tab>('containers')
+const activeTab = ref('containers')
 
-const tabs: { key: Tab; label: string }[] = [
-  { key: 'containers', label: 'Containers' },
-  { key: 'events', label: 'Events' },
-]
+const tabItems = computed<TabNavItem[]>(() => [
+  { value: 'containers', label: 'Containers', count: detail.value?.pod.containers.length },
+  { value: 'events', label: 'Events', count: detail.value?.events.length },
+])
 
 onMounted(async () => {
   try {
@@ -152,26 +151,8 @@ function eventTypeStyle(type: string): string {
       </div>
 
       <!-- Tabs -->
-      <div class="flex border-b border-mnt-default px-5">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          :class="[
-            'px-4 py-2.5 text-xs font-bold uppercase tracking-widest border-b-2 -mb-px transition-colors',
-            activeTab === tab.key
-              ? 'border-mnt-green-400 text-mnt-green-400'
-              : 'border-transparent text-mnt-muted hover:text-mnt-secondary',
-          ]"
-          @click="activeTab = tab.key"
-        >
-          {{ tab.label }}
-          <span v-if="tab.key === 'containers'" class="ml-1 text-[10px] text-mnt-muted">{{
-            detail.pod.containers.length
-          }}</span>
-          <span v-if="tab.key === 'events'" class="ml-1 text-[10px] text-mnt-muted">{{
-            detail.events.length
-          }}</span>
-        </button>
+      <div class="px-5">
+        <TabNav v-model="activeTab" :items="tabItems" ariaLabel="Pod detail tabs" />
       </div>
 
       <!-- Tab content -->
diff --git a/frontend/src/components/K8sPodList.vue b/frontend/src/components/K8sPodList.vue
index 54c60847..19d1db5a 100644
--- a/frontend/src/components/K8sPodList.vue
+++ b/frontend/src/components/K8sPodList.vue
@@ -16,6 +16,7 @@ import { ref, computed } from 'vue'
 import { type K8sPod } from '@/services/kubernetesApi'
 import { timeAgo } from '@/utils/time'
 import HostBadge from '@/components/HostBadge.vue'
+import TextInput from '@/components/ui/TextInput.vue'
 
 const props = defineProps<{
   pods: K8sPod[]
@@ -62,29 +63,33 @@ function restartCountStyle(count: number): string {
   <div class="bg-mnt-surface rounded-xl border border-mnt-default overflow-hidden">
     <!-- Filter bar -->
     <div class="flex flex-wrap items-center gap-2 px-4 py-3 border-b border-mnt-default">
-      <input
+      <TextInput
         v-model="filterNamespace"
-        type="text"
+        size="sm"
         placeholder="Namespace…"
-        class="bg-mnt-primary border border-mnt-default rounded-lg px-3 py-1.5 text-xs text-mnt-secondary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default w-32"
+        aria-label="Filter by namespace"
+        class="w-32"
       />
-      <input
+      <TextInput
         v-model="filterWorkload"
-        type="text"
+        size="sm"
         placeholder="Workload…"
-        class="bg-mnt-primary border border-mnt-default rounded-lg px-3 py-1.5 text-xs text-mnt-secondary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default w-32"
+        aria-label="Filter by workload"
+        class="w-32"
       />
-      <input
+      <TextInput
         v-model="filterNode"
-        type="text"
+        size="sm"
         placeholder="Node…"
-        class="bg-mnt-primary border border-mnt-default rounded-lg px-3 py-1.5 text-xs text-mnt-secondary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default w-28"
+        aria-label="Filter by node"
+        class="w-28"
       />
-      <input
+      <TextInput
         v-model="filterStatus"
-        type="text"
+        size="sm"
         placeholder="Status…"
-        class="bg-mnt-primary border border-mnt-default rounded-lg px-3 py-1.5 text-xs text-mnt-secondary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default w-24"
+        aria-label="Filter by status"
+        class="w-24"
       />
       <span class="ml-auto text-xs text-mnt-muted tabular-nums">
         {{ filteredPods.length }}/{{ pods.length }}
diff --git a/frontend/src/components/K8sWorkloadDetail.vue b/frontend/src/components/K8sWorkloadDetail.vue
index e57d7696..1309c85f 100644
--- a/frontend/src/components/K8sWorkloadDetail.vue
+++ b/frontend/src/components/K8sWorkloadDetail.vue
@@ -12,7 +12,7 @@
 -->
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import {
   fetchWorkloadDetail,
   fetchWorkloadResources,
@@ -23,6 +23,7 @@ import FeatureGate from './FeatureGate.vue'
 import { timeAgo } from '@/utils/time'
 import { useEdition } from '@/composables/useEdition'
 import { useResourcesStore } from '@/stores/resources'
+import TabNav, { type TabNavItem } from '@/components/ui/TabNav.vue'
 
 const props = defineProps<{
   workloadId: string
@@ -53,6 +54,26 @@ const tabs = hasFeature('k8s_cluster')
   ? [...baseTabs, { key: 'resources' as Tab, label: 'Resources' }]
   : baseTabs
 
+const tabItems = computed<TabNavItem[]>(() =>
+  tabs.map((tab) => ({
+    value: tab.key,
+    label: tab.label,
+    count:
+      tab.key === 'pods'
+        ? detail.value?.pods.length
+        : tab.key === 'events'
+          ? detail.value?.events.length
+          : tab.key === 'conditions'
+            ? detail.value?.workload.conditions.length
+            : undefined,
+  })),
+)
+
+const activeTabModel = computed<string>({
+  get: () => activeTab.value,
+  set: (value) => onTabClick(value as Tab),
+})
+
 onMounted(async () => {
   try {
     detail.value = await fetchWorkloadDetail(props.workloadId, useResourcesStore().entityQuery)
@@ -224,29 +245,8 @@ function replicaColor(ready: number, desired: number): string {
       </div>
 
       <!-- Tabs -->
-      <div class="flex border-b border-mnt-default px-5">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          :class="[
-            'px-4 py-2.5 text-xs font-bold uppercase tracking-widest border-b-2 -mb-px transition-colors',
-            activeTab === tab.key
-              ? 'border-mnt-green-400 text-mnt-green-400'
-              : 'border-transparent text-mnt-muted hover:text-mnt-secondary',
-          ]"
-          @click="onTabClick(tab.key)"
-        >
-          {{ tab.label }}
-          <span v-if="tab.key === 'pods'" class="ml-1 text-[10px] text-mnt-muted">{{
-            detail.pods.length
-          }}</span>
-          <span v-if="tab.key === 'events'" class="ml-1 text-[10px] text-mnt-muted">{{
-            detail.events.length
-          }}</span>
-          <span v-if="tab.key === 'conditions'" class="ml-1 text-[10px] text-mnt-muted">{{
-            detail.workload.conditions.length
-          }}</span>
-        </button>
+      <div class="px-5">
+        <TabNav v-model="activeTabModel" :items="tabItems" ariaLabel="Workload detail tabs" />
       </div>
 
       <!-- Tab content -->
diff --git a/frontend/src/components/LogSearchBar.vue b/frontend/src/components/LogSearchBar.vue
index 5bcabd97..94d0ca11 100644
--- a/frontend/src/components/LogSearchBar.vue
+++ b/frontend/src/components/LogSearchBar.vue
@@ -15,6 +15,7 @@
 import { ref, computed, watch, nextTick } from 'vue'
 import { ChevronUp, ChevronDown, X } from 'lucide-vue-next'
 import type { UseLogSearchReturn } from '@/composables/useLogSearch'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const props = defineProps<{
   search: UseLogSearchReturn
@@ -78,53 +79,60 @@ const matchDisplay = computed(() => {
     >{{ matchDisplay }}</span>
 
     <!-- Case sensitive toggle -->
-    <button
-      class="shrink-0 rounded px-1 py-0.5 text-[10px] font-bold transition-colors"
-      :class="search.isCaseSensitive.value
-        ? 'bg-mnt-elevated text-mnt-primary'
-        : 'text-mnt-muted hover:text-mnt-secondary'"
+    <UiButton
+      variant="ghost"
+      size="sm"
+      class="shrink-0"
+      :class="search.isCaseSensitive.value ? 'bg-mnt-elevated text-mnt-primary' : ''"
       title="Match Case"
+      aria-label="Match case"
+      :aria-pressed="search.isCaseSensitive.value"
       @click="search.toggleCaseSensitive()"
-    >Aa</button>
+    >Aa</UiButton>
 
     <!-- Regex toggle -->
-    <button
-      class="shrink-0 rounded px-1 py-0.5 text-[10px] font-bold transition-colors"
-      :class="search.isRegex.value
-        ? 'bg-mnt-elevated text-mnt-primary'
-        : 'text-mnt-muted hover:text-mnt-secondary'"
+    <UiButton
+      variant="ghost"
+      size="sm"
+      class="shrink-0"
+      :class="search.isRegex.value ? 'bg-mnt-elevated text-mnt-primary' : ''"
       title="Use Regular Expression"
+      aria-label="Use regular expression"
+      :aria-pressed="search.isRegex.value"
       @click="search.toggleRegex()"
-    >.*</button>
+    >.*</UiButton>
 
     <!-- Navigation -->
-    <button
-      class="shrink-0 rounded p-0.5 text-mnt-muted transition-colors hover:text-mnt-secondary"
+    <UiButton
+      variant="ghost"
+      size="sm"
+      class="shrink-0"
+      :icon="ChevronUp"
       title="Previous Match (Shift+Enter)"
       aria-label="Previous match"
       :disabled="search.matches.value.length === 0"
       @click="search.prevMatch()"
-    >
-      <ChevronUp :size="12" />
-    </button>
-    <button
-      class="shrink-0 rounded p-0.5 text-mnt-muted transition-colors hover:text-mnt-secondary"
+    />
+    <UiButton
+      variant="ghost"
+      size="sm"
+      class="shrink-0"
+      :icon="ChevronDown"
       title="Next Match (Enter)"
       aria-label="Next match"
       :disabled="search.matches.value.length === 0"
       @click="search.nextMatch()"
-    >
-      <ChevronDown :size="12" />
-    </button>
+    />
 
     <!-- Close -->
-    <button
-      class="shrink-0 rounded p-0.5 text-mnt-muted transition-colors hover:text-mnt-secondary"
+    <UiButton
+      variant="ghost"
+      size="sm"
+      class="shrink-0"
+      :icon="X"
       title="Close (Escape)"
       aria-label="Close search"
       @click="search.close()"
-    >
-      <X :size="12" />
-    </button>
+    />
   </div>
 </template>
diff --git a/frontend/src/components/LogToolbar.vue b/frontend/src/components/LogToolbar.vue
index 1454a6ed..682e346c 100644
--- a/frontend/src/components/LogToolbar.vue
+++ b/frontend/src/components/LogToolbar.vue
@@ -16,6 +16,7 @@ import { Maximize2, Minimize2, WrapText, Search } from 'lucide-vue-next'
 import type { LogStreamStatus } from '@/composables/useLogStream'
 import type { UseLogSearchReturn } from '@/composables/useLogSearch'
 import LogSearchBar from './LogSearchBar.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 defineProps<{
   isExpanded: boolean
@@ -44,13 +45,14 @@ const emit = defineEmits<{
         <span class="inline-block h-1.5 w-1.5 rounded-full bg-mnt-green-400" />
         Streaming
       </span>
-      <button
+      <UiButton
         v-if="status === 'closed' || status === 'error'"
-        class="rounded px-2 py-0.5 text-xs text-mnt-muted transition-colors hover:bg-mnt-elevated hover:text-mnt-primary"
+        variant="ghost"
+        size="sm"
         @click="emit('reconnect')"
       >
         Reconnect
-      </button>
+      </UiButton>
     </div>
 
     <div class="flex items-center gap-1">
@@ -58,34 +60,35 @@ const emit = defineEmits<{
       <LogSearchBar :search="search" />
 
       <!-- Search toggle button (when search closed) -->
-      <button
+      <UiButton
         v-if="!search.isOpen.value"
-        class="rounded p-1.5 text-mnt-muted transition-colors hover:bg-mnt-elevated hover:text-mnt-primary"
+        variant="ghost"
+        size="sm"
+        :icon="Search"
         title="Search (Ctrl+K)"
         aria-label="Search logs"
         @click="search.open()"
-      >
-        <Search :size="14" />
-      </button>
+      />
 
-      <button
-        class="rounded p-1.5 text-mnt-muted transition-colors hover:bg-mnt-elevated hover:text-mnt-primary"
+      <UiButton
+        variant="ghost"
+        size="sm"
+        :icon="WrapText"
         :class="{ 'text-mnt-primary bg-mnt-elevated': !wordWrap }"
         :title="wordWrap ? 'Disable word wrap' : 'Enable word wrap'"
         :aria-label="wordWrap ? 'Disable word wrap' : 'Enable word wrap'"
         @click="emit('toggle-wrap')"
-      >
-        <WrapText :size="14" />
-      </button>
-      <button
-        class="rounded p-1.5 text-mnt-muted transition-colors hover:bg-mnt-elevated hover:text-mnt-primary"
+      />
+      <UiButton
+        variant="ghost"
+        size="sm"
         :title="isExpanded ? 'Collapse' : 'Expand'"
         :aria-label="isExpanded ? 'Collapse log viewer' : 'Expand log viewer'"
         @click="emit('toggle-expand')"
       >
         <Maximize2 v-if="!isExpanded" :size="14" />
         <Minimize2 v-else :size="14" />
-      </button>
+      </UiButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/ResourceAlertConfig.vue b/frontend/src/components/ResourceAlertConfig.vue
index a1a61b87..59e34086 100644
--- a/frontend/src/components/ResourceAlertConfig.vue
+++ b/frontend/src/components/ResourceAlertConfig.vue
@@ -18,6 +18,9 @@ import {
   updateAlertConfig,
   type ResourceAlertConfig,
 } from '@/services/resourceApi'
+import UiButton from '@/components/ui/UiButton.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
 
 const props = defineProps<{
   containerId: string
@@ -104,15 +107,7 @@ async function save() {
 
     <div class="space-y-3">
       <!-- Enable toggle -->
-      <label class="flex items-center gap-2 text-sm">
-        <input
-          v-model="enabled"
-          type="checkbox"
-          class="rounded"
-          style="accent-color: var(--mnt-accent)"
-        />
-        <span class="text-mnt-muted">Enable alerts</span>
-      </label>
+      <CheckboxInput v-model="enabled" label="Enable alerts" />
 
       <!-- CPU threshold -->
       <div>
@@ -126,18 +121,7 @@ async function save() {
             class="flex-1"
             :style="{ '--fill': cpuFill }"
           />
-          <input
-            v-model.number="cpuThreshold"
-            type="number"
-            min="1"
-            max="1000"
-            class="w-16 rounded-md border px-2 py-1 text-xs outline-none"
-            style="
-              background: var(--mnt-bg-elevated);
-              border-color: var(--mnt-border-default);
-              color: var(--mnt-text-primary);
-            "
-          />
+          <TextInput v-model="cpuThreshold" type="number" min="1" max="1000" size="sm" class="w-16" />
         </div>
       </div>
 
@@ -153,30 +137,15 @@ async function save() {
             class="flex-1"
             :style="{ '--fill': memFill }"
           />
-          <input
-            v-model.number="memThreshold"
-            type="number"
-            min="1"
-            max="100"
-            class="w-16 rounded-md border px-2 py-1 text-xs outline-none"
-            style="
-              background: var(--mnt-bg-elevated);
-              border-color: var(--mnt-border-default);
-              color: var(--mnt-text-primary);
-            "
-          />
+          <TextInput v-model="memThreshold" type="number" min="1" max="100" size="sm" class="w-16" />
         </div>
       </div>
 
       <!-- Save button -->
       <div class="flex items-center gap-2">
-        <button
-          class="rounded bg-mnt-green-600 px-3 py-1.5 text-xs font-medium text-mnt-inverted hover:bg-mnt-green-700 disabled:opacity-50"
-          :disabled="saving"
-          @click="save"
-        >
+        <UiButton variant="primary" size="sm" :loading="saving" @click="save">
           {{ saving ? 'Saving...' : 'Save' }}
-        </button>
+        </UiButton>
         <span v-if="saved" class="text-xs text-mnt-status-ok">Saved</span>
         <span v-if="error" class="text-xs text-mnt-status-down">{{ error }}</span>
       </div>
diff --git a/frontend/src/components/SecurityInsightList.vue b/frontend/src/components/SecurityInsightList.vue
index 8bee720a..b68e3325 100644
--- a/frontend/src/components/SecurityInsightList.vue
+++ b/frontend/src/components/SecurityInsightList.vue
@@ -15,6 +15,7 @@
 import type { SecurityInsight } from '@/services/securityApi'
 import type { RiskAcknowledgment } from '@/services/postureApi'
 import { ShieldAlert, ShieldCheck, Network, Lock, Server, CheckCircle } from 'lucide-vue-next'
+import UiButton from './ui/UiButton.vue'
 
 const props = defineProps<{
   insights: SecurityInsight[]
@@ -142,21 +143,25 @@ function getAck(insight: SecurityInsight): RiskAcknowledgment | undefined {
             {{ formatDetail(insight) }}
           </p>
           <div v-if="showAcknowledge" class="mt-1.5">
-            <button
+            <UiButton
               v-if="!getAck(insight)"
-              class="flex cursor-pointer items-center gap-1 rounded px-2 py-0.5 text-[10px] font-medium text-mnt-muted hover:bg-mnt-elevated hover:text-mnt-primary transition-colors"
+              variant="ghost"
+              size="sm"
+              :icon="ShieldCheck"
+              class="!min-h-0 px-2 py-0.5 text-[10px]"
               @click.stop="emit('acknowledge', insight)"
             >
-              <ShieldCheck :size="11" />
               Accepter le risque
-            </button>
-            <button
+            </UiButton>
+            <UiButton
               v-else
-              class="cursor-pointer rounded px-2 py-0.5 text-[10px] font-medium text-mnt-status-ok hover:bg-mnt-status-down hover:text-mnt-status-down transition-colors"
+              variant="ghost"
+              size="sm"
+              class="!min-h-0 px-2 py-0.5 text-[10px] text-mnt-status-ok hover:text-mnt-status-down"
               @click.stop="emit('revoke', getAck(insight)!)"
             >
               Révoquer
-            </button>
+            </UiButton>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/SilenceRuleManager.vue b/frontend/src/components/SilenceRuleManager.vue
index eddfe346..26aed599 100644
--- a/frontend/src/components/SilenceRuleManager.vue
+++ b/frontend/src/components/SilenceRuleManager.vue
@@ -12,10 +12,15 @@
 -->
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useAlertsStore } from '@/stores/alerts'
 import { useConfirm } from '@/composables/useConfirm'
 import { createSilenceRule, cancelSilenceRule, type CreateSilenceRuleInput } from '@/services/alertApi'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
 
 const store = useAlertsStore()
 
@@ -35,6 +40,21 @@ const durationPresets = [
   { label: '2 hours', value: 7200 },
 ]
 
+const durationPresetOptions = durationPresets.map((p) => ({ value: String(p.value), label: p.label }))
+const durationPresetValue = computed({
+  get: () => String(form.value.duration_seconds),
+  set: (v: string) => (form.value.duration_seconds = Number(v)),
+})
+
+const sourceOptions = [
+  { value: '', label: 'All sources (global)' },
+  { value: 'container', label: 'Container' },
+  { value: 'endpoint', label: 'Endpoint' },
+  { value: 'heartbeat', label: 'Heartbeat' },
+  { value: 'certificate', label: 'Certificate' },
+  { value: 'resource', label: 'Resource' },
+]
+
 function resetForm() {
   form.value = { entity_type: '', entity_id: undefined, source: '', reason: '', duration_seconds: 1800 }
   showForm.value = false
@@ -79,68 +99,46 @@ function formatDuration(seconds: number): string {
   <div>
     <div class="mb-4 flex items-center justify-between">
       <h2 class="text-lg font-semibold" style="color: var(--mnt-text-primary)">Silence Rules</h2>
-      <button
-        @click="showForm = true"
-        class="rounded-md px-3 py-1.5 text-sm font-medium text-mnt-primary"
-        style="background: var(--mnt-accent)"
-      >
-        Create Silence Rule
-      </button>
+      <UiButton variant="primary" @click="showForm = true">Create Silence Rule</UiButton>
     </div>
 
     <!-- Create form -->
     <div v-if="showForm" class="mb-4 rounded-lg border p-4" style="background: var(--mnt-bg-surface); border-color: var(--mnt-border-default)">
       <h3 class="mb-3 text-sm font-medium" style="color: var(--mnt-text-primary)">New Silence Rule</h3>
       <form @submit.prevent="submitForm" class="space-y-3">
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Source (optional)</label>
-          <select v-model="form.source" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)">
-            <option value="">All sources (global)</option>
-            <option value="container">Container</option>
-            <option value="endpoint">Endpoint</option>
-            <option value="heartbeat">Heartbeat</option>
-            <option value="certificate">Certificate</option>
-            <option value="resource">Resource</option>
-          </select>
-        </div>
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Entity Type (optional)</label>
-          <input v-model="form.entity_type" placeholder="e.g. container, endpoint" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" />
-        </div>
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Entity ID (optional)</label>
-          <input v-model.number="form.entity_id" type="number" placeholder="Specific entity ID" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" />
-        </div>
+        <FormField label="Source (optional)">
+          <template #default="{ id, describedBy, invalid }">
+            <SelectInput :id="id" v-model="form.source" :options="sourceOptions" :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
+        <FormField label="Entity Type (optional)">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="form.entity_type" placeholder="e.g. container, endpoint" :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
+        <FormField label="Entity ID (optional)">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="form.entity_id" placeholder="Specific entity ID" :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
         <div>
           <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Duration</label>
-          <div class="mt-1 flex flex-wrap gap-2">
-            <button
-              v-for="preset in durationPresets"
-              :key="preset.value"
-              type="button"
-              @click="form.duration_seconds = preset.value"
-              class="rounded-md border px-3 py-1 text-xs transition-colors"
-              :style="{
-                borderColor: form.duration_seconds === preset.value ? 'var(--mnt-accent)' : 'var(--mnt-border-default)',
-                background: form.duration_seconds === preset.value ? 'rgba(59, 130, 246, 0.15)' : 'transparent',
-                color: form.duration_seconds === preset.value ? 'var(--mnt-accent)' : 'var(--mnt-text-secondary)',
-              }"
-            >
-              {{ preset.label }}
-            </button>
+          <div class="mt-1">
+            <SegmentedToggle v-model="durationPresetValue" :options="durationPresetOptions" ariaLabel="Duration preset" />
           </div>
           <div class="mt-2 flex items-center gap-2">
-            <input v-model.number="form.duration_seconds" type="number" min="60" class="w-32 rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" />
+            <TextInput v-model="form.duration_seconds" type="number" min="60" class="w-32" />
             <span class="text-xs" style="color: var(--mnt-text-muted)">seconds</span>
           </div>
         </div>
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Reason (optional)</label>
-          <input v-model="form.reason" placeholder="e.g. Planned maintenance" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" />
-        </div>
+        <FormField label="Reason (optional)">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="form.reason" placeholder="e.g. Planned maintenance" :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
         <div class="flex gap-2">
-          <button type="submit" class="rounded-md px-3 py-1.5 text-sm text-mnt-primary" style="background: var(--mnt-accent)">Create</button>
-          <button type="button" @click="resetForm" class="rounded-md border px-3 py-1.5 text-sm" style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)">Cancel</button>
+          <UiButton type="submit" variant="primary">Create</UiButton>
+          <UiButton type="button" variant="secondary" @click="resetForm">Cancel</UiButton>
         </div>
       </form>
     </div>
@@ -184,14 +182,7 @@ function formatDuration(seconds: number): string {
               {{ formatTime(rule.starts_at) }} - {{ formatTime(rule.expires_at) }}
             </p>
           </div>
-          <button
-            v-if="rule.is_active"
-            @click="handleCancel(rule.id)"
-            class="rounded border px-2 py-1 text-xs"
-            style="border-color: var(--mnt-status-down); color: var(--mnt-status-down)"
-          >
-            Cancel
-          </button>
+          <UiButton v-if="rule.is_active" variant="danger" size="sm" @click="handleCancel(rule.id)">Cancel</UiButton>
           <span v-else class="text-xs" style="color: var(--mnt-text-muted)">
             {{ rule.cancelled_at ? 'Cancelled' : 'Expired' }}
           </span>
diff --git a/frontend/src/components/StatusComponentManager.vue b/frontend/src/components/StatusComponentManager.vue
index b9b84c5b..093d30fb 100644
--- a/frontend/src/components/StatusComponentManager.vue
+++ b/frontend/src/components/StatusComponentManager.vue
@@ -28,6 +28,14 @@ import { listEndpoints } from '@/services/endpointApi'
 import { listHeartbeats } from '@/services/heartbeatApi'
 import { listCertificates } from '@/services/certificateApi'
 import QuotaRefusal from '@/components/QuotaRefusal.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
+import TabNav, { type TabNavItem } from '@/components/ui/TabNav.vue'
+import SearchInput from '@/components/ui/SearchInput.vue'
 
 const store = useStatusAdminStore()
 const { getQuota, reload } = useEdition()
@@ -98,6 +106,17 @@ watch(matchAllType, (type) => {
   matchAllCount.value = (allMonitorsByType.value[type] ?? []).length
 })
 
+watch(activeTypeTab, () => {
+  searchQuery.value = ''
+})
+
+const typeTabItems = computed<TabNavItem[]>(() =>
+  monitorTypes.map((type) => {
+    const count = selectedCountForType(type)
+    return { value: type, label: monitorTypeLabels[type] ?? type, count: count > 0 ? count : undefined }
+  }),
+)
+
 // Filtered monitors for the active tab
 const filteredMonitors = computed(() => {
   const list = allMonitorsByType.value[activeTypeTab.value] ?? []
@@ -312,21 +331,14 @@ function componentSummary(c: StatusComponent): string {
           >
             Upgrade
           </router-link>
-          <button
-            @click="startAddComp"
+          <UiButton
+            variant="primary"
             :disabled="quota.isAtLimit"
             :title="quota.isAtLimit ? `Your edition is limited to ${quota.limit} status components` : ''"
-            class="rounded-md px-3 py-1.5 text-sm font-medium text-mnt-primary transition-colors min-h-[44px]"
-            :style="{
-              background: 'var(--mnt-accent)',
-              opacity: quota.isAtLimit ? '0.5' : '1',
-              cursor: quota.isAtLimit ? 'not-allowed' : 'pointer',
-            }"
-            @mouseenter="!quota.isAtLimit && (($event.target as HTMLElement).style.background = 'var(--mnt-accent-hover)')"
-            @mouseleave="($event.target as HTMLElement).style.background = 'var(--mnt-accent)'"
+            @click="startAddComp"
           >
             Add Component
-          </button>
+          </UiButton>
         </div>
       </div>
 
@@ -353,37 +365,16 @@ function componentSummary(c: StatusComponent): string {
                 Locked
               </span>
             </div>
-            <div class="flex gap-2">
-              <button
-                type="button"
-                :disabled="!!editingCompId"
-                @click="compositionMode = 'explicit'"
-                class="flex-1 rounded-md border px-3 py-2 text-sm transition-colors"
-                :style="{
-                  background: compositionMode === 'explicit' ? 'rgba(59,130,246,0.12)' : 'var(--mnt-bg-elevated)',
-                  borderColor: compositionMode === 'explicit' ? '#3b82f6' : 'var(--mnt-border-default)',
-                  color: compositionMode === 'explicit' ? '#60a5fa' : 'var(--mnt-text-secondary)',
-                  opacity: editingCompId ? '0.5' : '1',
-                  cursor: editingCompId ? 'not-allowed' : 'pointer',
-                }"
-              >
-                Specific monitors
-              </button>
-              <button
-                type="button"
-                :disabled="!!editingCompId"
-                @click="compositionMode = 'match-all'"
-                class="flex-1 rounded-md border px-3 py-2 text-sm transition-colors"
-                :style="{
-                  background: compositionMode === 'match-all' ? 'rgba(139,92,246,0.12)' : 'var(--mnt-bg-elevated)',
-                  borderColor: compositionMode === 'match-all' ? '#8b5cf6' : 'var(--mnt-border-default)',
-                  color: compositionMode === 'match-all' ? 'var(--mnt-accent)' : 'var(--mnt-text-secondary)',
-                  opacity: editingCompId ? '0.5' : '1',
-                  cursor: editingCompId ? 'not-allowed' : 'pointer',
-                }"
-              >
-                All monitors of one type
-              </button>
+            <div :class="editingCompId ? 'pointer-events-none opacity-50' : ''">
+              <SegmentedToggle
+                :model-value="compositionMode"
+                ariaLabel="Composition mode"
+                :options="[
+                  { value: 'explicit', label: 'Specific monitors' },
+                  { value: 'match-all', label: 'All monitors of one type' },
+                ]"
+                @update:model-value="(v) => (compositionMode = v as 'explicit' | 'match-all')"
+              />
             </div>
           </div>
 
@@ -412,38 +403,10 @@ function componentSummary(c: StatusComponent): string {
             <p v-else class="text-xs text-mnt-muted">No monitors selected. Pick at least one below.</p>
 
             <!-- Type tabs -->
-            <div class="flex gap-1 border-b" style="border-color: var(--mnt-border-default)">
-              <button
-                v-for="type in monitorTypes"
-                :key="type"
-                type="button"
-                @click="activeTypeTab = type; searchQuery = ''"
-                class="relative px-3 py-1.5 text-xs transition-colors"
-                :style="{
-                  color: activeTypeTab === type ? 'var(--mnt-text-primary)' : 'var(--mnt-text-secondary)',
-                  borderBottom: activeTypeTab === type ? '2px solid var(--mnt-accent)' : '2px solid transparent',
-                  marginBottom: '-1px',
-                }"
-              >
-                {{ monitorTypeLabels[type] }}
-                <span
-                  v-if="selectedCountForType(type) > 0"
-                  class="ml-1 rounded-full px-1.5 text-[10px] font-bold"
-                  style="background: var(--mnt-accent); color: var(--mnt-text-primary)"
-                >
-                  {{ selectedCountForType(type) }}
-                </span>
-              </button>
-            </div>
+            <TabNav v-model="activeTypeTab" :items="typeTabItems" ariaLabel="Monitor type" />
 
             <!-- Search -->
-            <input
-              v-model="searchQuery"
-              type="text"
-              placeholder="Search..."
-              class="w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-              style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-            />
+            <SearchInput v-model="searchQuery" placeholder="Search..." />
 
             <!-- Monitor list -->
             <div
@@ -454,37 +417,31 @@ function componentSummary(c: StatusComponent): string {
               <div v-else-if="filteredMonitors.length === 0" class="p-4 text-center text-xs text-mnt-muted">
                 No {{ monitorTypeLabels[activeTypeTab] }}s found
               </div>
-              <label
+              <div
                 v-for="m in filteredMonitors"
                 :key="`${m.type}-${m.id}`"
-                class="flex cursor-pointer items-center gap-3 border-b px-3 py-2 hover:bg-mnt-elevated"
+                class="border-b px-3 py-2 hover:bg-mnt-elevated"
                 style="border-color: var(--mnt-border-default)"
               >
-                <input
-                  type="checkbox"
-                  :checked="isMonitorSelected(m)"
-                  @change="toggleMonitor(m)"
-                  class="rounded"
-                  style="accent-color: var(--mnt-accent)"
-                />
-                <span class="text-sm" style="color: var(--mnt-text-primary)">{{ m.name }}</span>
-              </label>
+                <CheckboxInput :model-value="isMonitorSelected(m)" :label="m.name" @update:model-value="() => toggleMonitor(m)" />
+              </div>
             </div>
           </div>
 
           <!-- Match-all mode: single type dropdown + count preview -->
           <div v-else class="space-y-2">
-            <div>
-              <label class="block text-[10px] font-bold uppercase tracking-widest text-mnt-muted">Monitor Type</label>
-              <select
-                v-model="matchAllType"
-                :disabled="!!editingCompId"
-                class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm"
-                style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-              >
-                <option v-for="t in monitorTypes" :key="t" :value="t">{{ monitorTypeLabels[t] }}</option>
-              </select>
-            </div>
+            <FormField label="Monitor Type">
+              <template #default="{ id, describedBy, invalid }">
+                <SelectInput
+                  :id="id"
+                  v-model="matchAllType"
+                  :disabled="!!editingCompId"
+                  :aria-describedby="describedBy"
+                  :invalid="invalid"
+                  :options="monitorTypes.map((t) => ({ value: t, label: monitorTypeLabels[t] ?? t }))"
+                />
+              </template>
+            </FormField>
             <p v-if="monitorOptionsLoading" class="text-xs text-mnt-muted">Loading count...</p>
             <p v-else-if="matchAllCount !== null" class="text-xs text-mnt-muted">
               <span class="font-medium" style="color: var(--mnt-text-primary)">{{ matchAllCount }}</span>
@@ -493,48 +450,20 @@ function componentSummary(c: StatusComponent): string {
           </div>
 
           <!-- Common fields -->
-          <div>
-            <label class="block text-[10px] font-bold uppercase tracking-widest text-mnt-muted">Display Name</label>
-            <input
-              v-model="compForm.display_name"
-              required
-              class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-              style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-            />
-          </div>
+          <FormField label="Display Name" required>
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput :id="id" v-model="compForm.display_name" required :aria-describedby="describedBy" :invalid="invalid" />
+            </template>
+          </FormField>
 
           <div class="flex items-center gap-4">
-            <label class="flex items-center gap-2 text-sm" style="color: var(--mnt-text-secondary)">
-              <input v-model="compForm.visible" type="checkbox" class="rounded" style="accent-color: var(--mnt-accent)" />
-              Visible on public page
-            </label>
-            <label class="flex items-center gap-2 text-sm" style="color: var(--mnt-text-secondary)">
-              <input v-model="compForm.auto_incident" type="checkbox" class="rounded" style="accent-color: var(--mnt-accent)" />
-              Auto-create incidents
-            </label>
+            <CheckboxInput v-model="compForm.visible" label="Visible on public page" />
+            <CheckboxInput v-model="compForm.auto_incident" label="Auto-create incidents" />
           </div>
 
           <div class="flex gap-2">
-            <button
-              type="submit"
-              :disabled="!isFormValid"
-              class="rounded-md px-3 py-1.5 text-sm text-mnt-primary"
-              :style="{
-                background: 'var(--mnt-accent)',
-                opacity: isFormValid ? '1' : '0.45',
-                cursor: isFormValid ? 'pointer' : 'not-allowed',
-              }"
-            >
-              Save
-            </button>
-            <button
-              type="button"
-              @click="resetCompForm"
-              class="rounded-md border px-3 py-1.5 text-sm"
-              style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)"
-            >
-              Cancel
-            </button>
+            <UiButton type="submit" variant="primary" :disabled="!isFormValid">Save</UiButton>
+            <UiButton type="button" variant="secondary" @click="resetCompForm">Cancel</UiButton>
           </div>
         </form>
       </div>
@@ -581,36 +510,22 @@ function componentSummary(c: StatusComponent): string {
               </div>
             </div>
             <div class="flex flex-shrink-0 items-center gap-2">
-              <select
+              <SelectInput
+                :model-value="c.status_override || ''"
+                size="sm"
+                :options="statusOverrideOptions"
                 @change="handleOverride(c, ($event.target as HTMLSelectElement).value)"
-                class="rounded border px-2 py-1 text-xs"
-                style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)"
-              >
-                <option v-for="s in statusOverrideOptions" :key="s.value" :value="s.value" :selected="(c.status_override || '') === s.value">
-                  {{ s.label }}
-                </option>
-              </select>
-              <button @click="startEditComp(c)" class="rounded border px-2 py-1 text-xs" style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)">Edit</button>
-              <button @click="handleDeleteComp(c.id)" class="rounded border px-2 py-1 text-xs" style="border-color: var(--mnt-status-down); color: var(--mnt-status-down)">Delete</button>
+              />
+              <UiButton variant="secondary" size="sm" @click="startEditComp(c)">Edit</UiButton>
+              <UiButton variant="danger" size="sm" @click="handleDeleteComp(c.id)">Delete</UiButton>
             </div>
           </div>
 
           <!-- Needs attention indicator -->
-          <div v-if="c.needs_attention" class="mt-2 flex items-center gap-2 rounded border border-yellow-600/30 bg-yellow-900/20 px-3 py-2">
-            <span class="text-xs text-yellow-400">No monitors assigned — hidden from public page</span>
-            <button
-              @click="startEditComp(c)"
-              class="rounded px-2 py-0.5 text-xs font-medium"
-              style="background: var(--mnt-accent); color: var(--mnt-text-primary)"
-            >
-              Fix
-            </button>
-            <button
-              @click="handleDeleteComp(c.id)"
-              class="rounded px-2 py-0.5 text-xs text-mnt-status-down"
-            >
-              Delete
-            </button>
+          <div v-if="c.needs_attention" class="mt-2 flex items-center gap-2 rounded border border-mnt-sev-warning bg-mnt-status-warn px-3 py-2">
+            <span class="text-xs text-mnt-status-warn">No monitors assigned — hidden from public page</span>
+            <UiButton variant="primary" size="sm" @click="startEditComp(c)">Fix</UiButton>
+            <UiButton variant="ghost" size="sm" @click="handleDeleteComp(c.id)">Delete</UiButton>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/StatusIncidentManager.vue b/frontend/src/components/StatusIncidentManager.vue
index 562fcf23..8a0ac257 100644
--- a/frontend/src/components/StatusIncidentManager.vue
+++ b/frontend/src/components/StatusIncidentManager.vue
@@ -21,6 +21,12 @@ import {
   deleteIncident,
   type Incident,
 } from '@/services/statusApi'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import TextareaInput from '@/components/ui/TextareaInput.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const store = useStatusAdminStore()
 
@@ -100,22 +106,13 @@ const incidentStatusOptions = ['investigating', 'identified', 'monitoring', 'res
     <div class="mb-4 flex items-center justify-between">
       <h2 class="text-lg font-semibold" style="color: var(--mnt-text-primary)">Incidents</h2>
       <div class="flex items-center gap-3">
-        <select
+        <SelectInput
           v-model="statusFilter"
+          size="sm"
+          :options="[{ value: '', label: 'All statuses' }, ...incidentStatusOptions.map((s) => ({ value: s, label: s }))]"
           @change="applyFilter"
-          class="rounded-md border px-2 py-1.5 text-sm"
-          style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)"
-        >
-          <option value="">All statuses</option>
-          <option v-for="s in incidentStatusOptions" :key="s" :value="s">{{ s }}</option>
-        </select>
-        <button
-          @click="showCreateForm = true"
-          class="rounded-md px-3 py-1.5 text-sm font-medium text-mnt-primary"
-          style="background: var(--mnt-accent)"
-        >
-          Create Incident
-        </button>
+        />
+        <UiButton variant="primary" @click="showCreateForm = true">Create Incident</UiButton>
       </div>
     </div>
 
@@ -123,33 +120,37 @@ const incidentStatusOptions = ['investigating', 'identified', 'monitoring', 'res
     <div v-if="showCreateForm" class="mb-4 rounded-lg border p-4" style="background: var(--mnt-bg-surface); border-color: var(--mnt-border-default)">
       <h3 class="mb-3 text-sm font-medium" style="color: var(--mnt-text-primary)">New Incident</h3>
       <form @submit.prevent="submitCreate" class="space-y-3">
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Title</label>
-          <input v-model="createForm.title" required class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" />
-        </div>
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Severity</label>
-          <select v-model="createForm.severity" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)">
-            <option v-for="s in severityOptions" :key="s" :value="s">{{ s }}</option>
-          </select>
-        </div>
+        <FormField label="Title" required>
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="createForm.title" required :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
+        <FormField label="Severity">
+          <template #default="{ id, describedBy, invalid }">
+            <SelectInput :id="id" v-model="createForm.severity" :aria-describedby="describedBy" :invalid="invalid" :options="severityOptions.map((s) => ({ value: s, label: s }))" />
+          </template>
+        </FormField>
         <div>
           <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Affected Components</label>
           <div class="mt-1 max-h-32 space-y-1 overflow-y-auto rounded border p-2" style="border-color: var(--mnt-border-default); background: var(--mnt-bg-elevated)">
-            <label v-for="c in store.components" :key="c.id" class="flex items-center gap-2 text-sm" style="color: var(--mnt-text-secondary)">
-              <input type="checkbox" :value="c.id" v-model="createForm.component_ids" class="rounded" style="accent-color: var(--mnt-accent)" />
-              {{ c.display_name }}
-            </label>
+            <CheckboxInput
+              v-for="c in store.components"
+              :key="c.id"
+              :value="c.id"
+              v-model="createForm.component_ids"
+              :label="c.display_name"
+            />
             <p v-if="(store.components?.length ?? 0) === 0" class="text-xs" style="color: var(--mnt-text-muted)">No components configured</p>
           </div>
         </div>
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Initial Message</label>
-          <textarea v-model="createForm.message" required rows="2" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"></textarea>
-        </div>
+        <FormField label="Initial Message" required>
+          <template #default="{ id, describedBy, invalid }">
+            <TextareaInput :id="id" v-model="createForm.message" required :rows="2" :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
         <div class="flex gap-2">
-          <button type="submit" class="rounded-md px-3 py-1.5 text-sm text-mnt-primary" style="background: var(--mnt-accent)">Create</button>
-          <button type="button" @click="resetCreateForm" class="rounded-md border px-3 py-1.5 text-sm" style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)">Cancel</button>
+          <UiButton type="submit" variant="primary">Create</UiButton>
+          <UiButton type="button" variant="secondary" @click="resetCreateForm">Cancel</UiButton>
         </div>
       </form>
     </div>
@@ -189,15 +190,10 @@ const incidentStatusOptions = ['investigating', 'identified', 'monitoring', 'res
             <span class="text-sm font-medium" style="color: var(--mnt-text-primary)">{{ inc.title }}</span>
           </div>
           <div class="flex items-center gap-2">
-            <button
-              v-if="inc.status !== 'resolved'"
-              @click="startPostUpdate(inc)"
-              class="rounded border px-2 py-1 text-xs"
-              style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)"
-            >
+            <UiButton v-if="inc.status !== 'resolved'" variant="secondary" size="sm" @click="startPostUpdate(inc)">
               Post Update
-            </button>
-            <button @click="handleDelete(inc.id)" class="rounded border px-2 py-1 text-xs" style="border-color: var(--mnt-status-down); color: var(--mnt-status-down)">Delete</button>
+            </UiButton>
+            <UiButton variant="danger" size="sm" @click="handleDelete(inc.id)">Delete</UiButton>
           </div>
         </div>
 
@@ -216,19 +212,19 @@ const incidentStatusOptions = ['investigating', 'identified', 'monitoring', 'res
         <!-- Post update form -->
         <div v-if="showUpdateForm === inc.id" class="mt-3 rounded border p-3" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default)">
           <form @submit.prevent="submitUpdate(inc.id)" class="space-y-2">
-            <div>
-              <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Status</label>
-              <select v-model="updateForm.status" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm" style="background: var(--mnt-bg-surface); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)">
-                <option v-for="s in incidentStatusOptions" :key="s" :value="s">{{ s }}</option>
-              </select>
-            </div>
-            <div>
-              <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Message</label>
-              <textarea v-model="updateForm.message" required rows="2" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-surface); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"></textarea>
-            </div>
+            <FormField label="Status">
+              <template #default="{ id, describedBy, invalid }">
+                <SelectInput :id="id" v-model="updateForm.status" :aria-describedby="describedBy" :invalid="invalid" :options="incidentStatusOptions.map((s) => ({ value: s, label: s }))" />
+              </template>
+            </FormField>
+            <FormField label="Message" required>
+              <template #default="{ id, describedBy, invalid }">
+                <TextareaInput :id="id" v-model="updateForm.message" required :rows="2" :aria-describedby="describedBy" :invalid="invalid" />
+              </template>
+            </FormField>
             <div class="flex gap-2">
-              <button type="submit" class="rounded-md px-3 py-1.5 text-sm text-mnt-primary" style="background: var(--mnt-accent)">Post Update</button>
-              <button type="button" @click="showUpdateForm = null" class="rounded-md border px-3 py-1.5 text-sm" style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)">Cancel</button>
+              <UiButton type="submit" variant="primary">Post Update</UiButton>
+              <UiButton type="button" variant="secondary" @click="showUpdateForm = null">Cancel</UiButton>
             </div>
           </form>
         </div>
diff --git a/frontend/src/components/StatusMaintenanceManager.vue b/frontend/src/components/StatusMaintenanceManager.vue
index b1ed8bfb..8aa68991 100644
--- a/frontend/src/components/StatusMaintenanceManager.vue
+++ b/frontend/src/components/StatusMaintenanceManager.vue
@@ -21,6 +21,11 @@ import {
   deleteMaintenance,
   type MaintenanceWindow,
 } from '@/services/statusApi'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import TextareaInput from '@/components/ui/TextareaInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const store = useStatusAdminStore()
 
@@ -101,13 +106,7 @@ function statusStyle(mw: MaintenanceWindow): { bg: string; color: string } {
   <div>
     <div class="mb-4 flex items-center justify-between">
       <h2 class="text-lg font-semibold" style="color: var(--mnt-text-primary)">Maintenance Windows</h2>
-      <button
-        @click="showForm = true"
-        class="rounded-md px-3 py-1.5 text-sm font-medium text-mnt-primary"
-        style="background: var(--mnt-accent)"
-      >
-        Schedule Maintenance
-      </button>
+      <UiButton variant="primary" @click="showForm = true">Schedule Maintenance</UiButton>
     </div>
 
     <div v-if="showForm" class="mb-4 rounded-lg border p-4" style="background: var(--mnt-bg-surface); border-color: var(--mnt-border-default)">
@@ -115,39 +114,44 @@ function statusStyle(mw: MaintenanceWindow): { bg: string; color: string } {
         {{ editingId ? 'Edit Maintenance' : 'Schedule Maintenance' }}
       </h3>
       <form @submit.prevent="submitForm" class="space-y-3">
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Title</label>
-          <input v-model="form.title" required class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" />
-        </div>
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Description</label>
-          <textarea v-model="form.description" rows="2" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"></textarea>
-        </div>
+        <FormField label="Title" required>
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="form.title" required :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
+        <FormField label="Description">
+          <template #default="{ id, describedBy, invalid }">
+            <TextareaInput :id="id" v-model="form.description" :rows="2" :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          <div>
-            <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Start Time</label>
-            <input v-model="form.starts_at" type="datetime-local" required class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" />
-          </div>
-          <div>
-            <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">End Time</label>
-            <input v-model="form.ends_at" type="datetime-local" required class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" />
-          </div>
+          <FormField label="Start Time" required>
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput :id="id" v-model="form.starts_at" type="datetime-local" required :aria-describedby="describedBy" :invalid="invalid" />
+            </template>
+          </FormField>
+          <FormField label="End Time" required>
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput :id="id" v-model="form.ends_at" type="datetime-local" required :aria-describedby="describedBy" :invalid="invalid" />
+            </template>
+          </FormField>
         </div>
         <div>
           <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Affected Components</label>
           <div class="mt-1 max-h-32 space-y-1 overflow-y-auto rounded border p-2" style="border-color: var(--mnt-border-default); background: var(--mnt-bg-elevated)">
-            <label v-for="c in store.components" :key="c.id" class="flex items-center gap-2 text-sm" style="color: var(--mnt-text-secondary)">
-              <input type="checkbox" :value="c.id" v-model="form.component_ids" class="rounded" style="accent-color: var(--mnt-accent)" />
-              {{ c.display_name }}
-            </label>
+            <CheckboxInput
+              v-for="c in store.components"
+              :key="c.id"
+              :value="c.id"
+              v-model="form.component_ids"
+              :label="c.display_name"
+            />
             <p v-if="(store.components?.length ?? 0) === 0" class="text-xs" style="color: var(--mnt-text-muted)">No components configured</p>
           </div>
         </div>
         <div class="flex gap-2">
-          <button type="submit" class="rounded-md px-3 py-1.5 text-sm text-mnt-primary" style="background: var(--mnt-accent)">
-            {{ editingId ? 'Update' : 'Schedule' }}
-          </button>
-          <button type="button" @click="resetForm" class="rounded-md border px-3 py-1.5 text-sm" style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)">Cancel</button>
+          <UiButton type="submit" variant="primary">{{ editingId ? 'Update' : 'Schedule' }}</UiButton>
+          <UiButton type="button" variant="secondary" @click="resetForm">Cancel</UiButton>
         </div>
       </form>
     </div>
@@ -174,15 +178,15 @@ function statusStyle(mw: MaintenanceWindow): { bg: string; color: string } {
             <span class="text-sm font-medium" style="color: var(--mnt-text-primary)">{{ mw.title }}</span>
           </div>
           <div class="flex items-center gap-2">
-            <button
+            <UiButton
               v-if="!mw.active && new Date(mw.ends_at) > new Date()"
+              variant="secondary"
+              size="sm"
               @click="startEdit(mw)"
-              class="rounded border px-2 py-1 text-xs"
-              style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)"
             >
               Edit
-            </button>
-            <button @click="handleDelete(mw.id)" class="rounded border px-2 py-1 text-xs" style="border-color: var(--mnt-status-down); color: var(--mnt-status-down)">Delete</button>
+            </UiButton>
+            <UiButton variant="danger" size="sm" @click="handleDelete(mw.id)">Delete</UiButton>
           </div>
         </div>
         <p v-if="mw.description" class="mt-1 text-xs" style="color: var(--mnt-text-muted)">{{ mw.description }}</p>
diff --git a/frontend/src/components/StatusSmtpConfig.vue b/frontend/src/components/StatusSmtpConfig.vue
index 95d5c507..6397c528 100644
--- a/frontend/src/components/StatusSmtpConfig.vue
+++ b/frontend/src/components/StatusSmtpConfig.vue
@@ -14,6 +14,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { getSmtpConfig, updateSmtpConfig, testSmtp, type SmtpConfig } from '@/services/statusApi'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const form = ref<SmtpConfig>({
   host: '',
@@ -99,68 +103,77 @@ function onPasswordInput() {
 
     <form v-else @submit.prevent="handleSave" class="max-w-lg space-y-3">
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">SMTP Host</label>
-          <input v-model="form.host" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" placeholder="smtp.example.com" />
-        </div>
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Port</label>
-          <input v-model.number="form.port" type="number" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" />
-        </div>
+        <FormField label="SMTP Host">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="form.host" :aria-describedby="describedBy" :invalid="invalid" placeholder="smtp.example.com" />
+          </template>
+        </FormField>
+        <FormField label="Port">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              :model-value="form.port"
+              type="number"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+              @update:model-value="(v) => (form.port = Number(v) || 0)"
+            />
+          </template>
+        </FormField>
       </div>
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Username</label>
-          <input v-model="form.username" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" />
-        </div>
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">Password</label>
-          <input
-            v-model="form.password"
-            @input="onPasswordInput"
-            type="password"
-            class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-            style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-            :placeholder="form.password_set ? 'Password configured' : ''"
-          />
-        </div>
-      </div>
-      <div>
-        <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">TLS Policy</label>
-        <select v-model="form.tls_policy" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)">
-          <option value="opportunistic">Opportunistic</option>
-          <option value="mandatory">Mandatory</option>
-          <option value="none">None</option>
-        </select>
+        <FormField label="Username">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="form.username" :aria-describedby="describedBy" :invalid="invalid" />
+          </template>
+        </FormField>
+        <FormField label="Password">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="form.password"
+              type="password"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+              :placeholder="form.password_set ? 'Password configured' : ''"
+              @input="onPasswordInput"
+            />
+          </template>
+        </FormField>
       </div>
+      <FormField label="TLS Policy">
+        <template #default="{ id, describedBy, invalid }">
+          <SelectInput
+            :id="id"
+            v-model="form.tls_policy"
+            :aria-describedby="describedBy"
+            :invalid="invalid"
+            :options="[
+              { value: 'opportunistic', label: 'Opportunistic' },
+              { value: 'mandatory', label: 'Mandatory' },
+              { value: 'none', label: 'None' },
+            ]"
+          />
+        </template>
+      </FormField>
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">From Address</label>
-          <input v-model="form.from_address" type="email" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" placeholder="status@example.com" />
-        </div>
-        <div>
-          <label class="block text-xs font-medium" style="color: var(--mnt-text-secondary)">From Name</label>
-          <input v-model="form.from_name" class="mt-1 w-full rounded-md border px-3 py-1.5 text-sm outline-none" style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)" placeholder="maintenant Status" />
-        </div>
+        <FormField label="From Address">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="form.from_address" type="email" :aria-describedby="describedBy" :invalid="invalid" placeholder="status@example.com" />
+          </template>
+        </FormField>
+        <FormField label="From Name">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput :id="id" v-model="form.from_name" :aria-describedby="describedBy" :invalid="invalid" placeholder="maintenant Status" />
+          </template>
+        </FormField>
       </div>
 
       <div class="flex items-center gap-3 pt-2">
-        <button
-          type="submit"
-          :disabled="saving"
-          class="rounded-md px-4 py-1.5 text-sm font-medium text-mnt-primary disabled:opacity-50"
-          style="background: var(--mnt-accent)"
-        >
+        <UiButton type="submit" variant="primary" :loading="saving">
           {{ saving ? 'Saving...' : 'Save' }}
-        </button>
-        <button
-          type="button"
-          @click="handleTest"
-          class="rounded-md border px-4 py-1.5 text-sm"
-          style="border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)"
-        >
-          Send Test Email
-        </button>
+        </UiButton>
+        <UiButton type="button" variant="secondary" @click="handleTest">Send Test Email</UiButton>
       </div>
 
       <div v-if="saveMessage" class="rounded border px-3 py-1.5 text-xs" style="background: var(--mnt-status-ok-bg); border-color: var(--mnt-status-ok); color: var(--mnt-status-ok)">
diff --git a/frontend/src/components/SwarmServiceDetail.vue b/frontend/src/components/SwarmServiceDetail.vue
index 98b89bef..3fc93688 100644
--- a/frontend/src/components/SwarmServiceDetail.vue
+++ b/frontend/src/components/SwarmServiceDetail.vue
@@ -12,7 +12,7 @@
 -->
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import {
   fetchSwarmServiceDetail,
   fetchSwarmServiceResources,
@@ -21,6 +21,7 @@ import {
 } from '@/services/swarmApi'
 import SwarmTaskList from './SwarmTaskList.vue'
 import FeatureGate from './FeatureGate.vue'
+import TabNav, { type TabNavItem } from '@/components/ui/TabNav.vue'
 import { timeAgo } from '@/utils/time'
 import { useEdition } from '@/composables/useEdition'
 
@@ -37,7 +38,7 @@ type Tab = 'tasks' | 'ports' | 'networks' | 'resources'
 const { hasFeature } = useEdition()
 const detail = ref<SwarmServiceDetailResponse | null>(null)
 const loading = ref(true)
-const activeTab = ref<Tab>('tasks')
+const activeTab = ref<string>('tasks')
 const taskResources = ref<SwarmTaskResourceEntry[]>([])
 const resourcesLoading = ref(false)
 
@@ -62,10 +63,9 @@ async function loadResources() {
   }
 }
 
-function onTabClick(tab: Tab) {
-  activeTab.value = tab
+watch(activeTab, (tab) => {
   if (tab === 'resources') loadResources()
-}
+})
 
 function replicaColor(running: number, desired: number): string {
   if (running >= desired) return 'text-mnt-status-ok'
@@ -115,6 +115,8 @@ const baseTabs: { key: Tab; label: string }[] = [
 const tabs = hasFeature('swarm_dashboard')
   ? [...baseTabs, { key: 'resources' as Tab, label: 'Resources' }]
   : baseTabs
+
+const tabItems: TabNavItem[] = tabs.map((t) => ({ value: t.key, label: t.label }))
 </script>
 
 <template>
@@ -168,20 +170,8 @@ const tabs = hasFeature('swarm_dashboard')
       </div>
 
       <!-- Tabs -->
-      <div class="flex border-b border-mnt-default px-5">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          :class="[
-            'px-4 py-2.5 text-xs font-bold uppercase tracking-widest border-b-2 -mb-px transition-colors',
-            activeTab === tab.key
-              ? 'border-mnt-green-400 text-mnt-green-400'
-              : 'border-transparent text-mnt-muted hover:text-mnt-secondary',
-          ]"
-          @click="onTabClick(tab.key)"
-        >
-          {{ tab.label }}
-        </button>
+      <div class="px-5">
+        <TabNav v-model="activeTab" :items="tabItems" ariaLabel="Service detail tabs" />
       </div>
 
       <!-- Tab content -->
diff --git a/frontend/src/components/TopConsumersWidget.vue b/frontend/src/components/TopConsumersWidget.vue
index aab2a720..b3bc778f 100644
--- a/frontend/src/components/TopConsumersWidget.vue
+++ b/frontend/src/components/TopConsumersWidget.vue
@@ -15,6 +15,7 @@
 import { ref } from 'vue'
 import { useEdition } from '@/composables/useEdition'
 import { Lock } from 'lucide-vue-next'
+import SegmentedToggle from './ui/SegmentedToggle.vue'
 
 /**
  * A period is whatever the engine's catalogue declares. It used to be a fixed
@@ -82,21 +83,12 @@ function formatValue(consumer: TopConsumer): string {
   <div>
     <!-- Metric + period toggles -->
     <div class="mb-3 flex items-center gap-3">
-      <div class="flex gap-1">
-        <button
-          v-for="m in (['cpu', 'memory'] as const)"
-          :key="m"
-          class="rounded-full px-3 py-1 text-xs font-medium transition cursor-pointer"
-          :style="{
-            backgroundColor: activeMetric === m ? 'var(--mnt-accent)' : 'var(--mnt-bg-elevated)',
-            color: activeMetric === m ? 'var(--mnt-text-inverted)' : 'var(--mnt-text-secondary)',
-            border: activeMetric === m ? '1px solid var(--mnt-accent)' : '1px solid var(--mnt-border-default)',
-          }"
-          @click="switchMetric(m)"
-        >
-          {{ m === 'cpu' ? 'CPU' : 'Memory' }}
-        </button>
-      </div>
+      <SegmentedToggle
+        :model-value="activeMetric"
+        :options="[{ value: 'cpu', label: 'CPU' }, { value: 'memory', label: 'Memory' }]"
+        ariaLabel="Metric"
+        @update:model-value="(v) => switchMetric(v as 'cpu' | 'memory')"
+      />
 
       <div
         class="h-4 w-px"
diff --git a/frontend/src/components/TriggerEditor.vue b/frontend/src/components/TriggerEditor.vue
index b3a7f830..99092a59 100644
--- a/frontend/src/components/TriggerEditor.vue
+++ b/frontend/src/components/TriggerEditor.vue
@@ -13,13 +13,17 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { X, Plus, Loader2, ArrowRight, Lock } from 'lucide-vue-next'
+import { X, Plus, ArrowRight, Lock } from 'lucide-vue-next'
 import { RouterLink } from 'vue-router'
 import { useTriggersStore } from '@/stores/triggers'
 import { useChannelsStore } from '@/stores/channels'
 import { useEdition } from '@/composables/useEdition'
 import type { AlertTrigger, TriggerRequest } from '@/types/triggers'
 import EditionBadge from '@/components/EditionBadge.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
 
 const props = defineProps<{
   trigger?: AlertTrigger | null
@@ -145,12 +149,7 @@ async function handleSave() {
       <h3 class="text-sm font-bold text-mnt-primary">
         {{ trigger ? 'Edit trigger' : 'New alert trigger' }}
       </h3>
-      <button
-        class="p-1 rounded text-mnt-muted hover:text-mnt-secondary hover:bg-mnt-elevated transition-all"
-        @click="emit('cancel')"
-      >
-        <X :size="16" />
-      </button>
+      <UiButton variant="ghost" size="sm" :icon="X" aria-label="Close" @click="emit('cancel')" />
     </div>
 
     <div class="p-5 space-y-6">
@@ -180,17 +179,17 @@ async function handleSave() {
       </div>
 
       <!-- Name -->
-      <div class="space-y-1.5">
-        <label class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">
-          Trigger name
-        </label>
-        <input
-          v-model="name"
-          type="text"
-          placeholder="e.g. Critical containers"
-          class="w-full bg-mnt-primary border border-mnt-default rounded-lg px-3 py-2 text-sm text-mnt-primary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default transition-colors"
-        />
-      </div>
+      <FormField label="Trigger name">
+        <template #default="{ id, describedBy, invalid }">
+          <TextInput
+            :id="id"
+            v-model="name"
+            placeholder="e.g. Critical containers"
+            :aria-describedby="describedBy"
+            :invalid="invalid"
+          />
+        </template>
+      </FormField>
 
       <!-- Active toggle -->
       <div class="flex items-center justify-between">
@@ -200,16 +199,7 @@ async function handleSave() {
             Disabled triggers stay configured but never dispatch.
           </p>
         </div>
-        <button
-          class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none"
-          :class="enabled ? 'bg-mnt-green-600' : 'bg-mnt-elevated'"
-          @click="enabled = !enabled"
-        >
-          <span
-            class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
-            :class="enabled ? 'translate-x-4' : 'translate-x-0'"
-          />
-        </button>
+        <ToggleSwitch v-model="enabled" label="Enabled" size="sm" />
       </div>
 
       <!-- Notify on recovery toggle -->
@@ -220,16 +210,7 @@ async function handleSave() {
             Also send a notification when the alert resolves.
           </p>
         </div>
-        <button
-          class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none"
-          :class="notifyOnResolve ? 'bg-mnt-green-600' : 'bg-mnt-elevated'"
-          @click="notifyOnResolve = !notifyOnResolve"
-        >
-          <span
-            class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
-            :class="notifyOnResolve ? 'translate-x-4' : 'translate-x-0'"
-          />
-        </button>
+        <ToggleSwitch v-model="notifyOnResolve" label="Notify on recovery" size="sm" />
       </div>
 
       <!-- Channels -->
@@ -320,31 +301,31 @@ async function handleSave() {
           Filter triggers by per-entity scope (e.g. <code class="rounded bg-mnt-elevated px-1.5 py-0.5 text-[10px]">container:42</code>) or by tags.
         </p>
 
-        <div class="space-y-1.5">
-          <label class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">
-            Scopes (CSV)
-          </label>
-          <input
-            v-model="scopesCsv"
-            type="text"
-            :disabled="!canUseAdvancedFilters"
-            placeholder="container:42, endpoint:7"
-            class="w-full bg-mnt-surface border border-mnt-default rounded-lg px-3 py-2 text-sm text-mnt-primary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          />
-        </div>
-
-        <div class="space-y-1.5">
-          <label class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">
-            Tags (CSV)
-          </label>
-          <input
-            v-model="tagsCsv"
-            type="text"
-            :disabled="!canUseAdvancedFilters"
-            placeholder="prod, payments"
-            class="w-full bg-mnt-surface border border-mnt-default rounded-lg px-3 py-2 text-sm text-mnt-primary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          />
-        </div>
+        <FormField label="Scopes (CSV)">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="scopesCsv"
+              :disabled="!canUseAdvancedFilters"
+              placeholder="container:42, endpoint:7"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+            />
+          </template>
+        </FormField>
+
+        <FormField label="Tags (CSV)">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="tagsCsv"
+              :disabled="!canUseAdvancedFilters"
+              placeholder="prod, payments"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+            />
+          </template>
+        </FormField>
       </div>
 
       <!-- Match-all hint -->
@@ -357,20 +338,10 @@ async function handleSave() {
 
       <!-- Actions -->
       <div class="flex items-center justify-end gap-3 pt-2">
-        <button
-          class="px-4 py-2 text-xs font-medium text-mnt-muted hover:text-mnt-secondary transition-colors"
-          @click="emit('cancel')"
-        >
-          Cancel
-        </button>
-        <button
-          class="inline-flex items-center gap-2 px-4 py-2 bg-mnt-green-600 hover:bg-mnt-green-500 disabled:bg-mnt-elevated disabled:text-mnt-muted text-mnt-inverted rounded-lg text-xs font-bold transition-all shadow-lg shadow-mnt-green-500/20"
-          :disabled="saving"
-          @click="handleSave"
-        >
-          <Loader2 v-if="saving" :size="13" class="animate-spin" />
+        <UiButton variant="ghost" size="sm" @click="emit('cancel')">Cancel</UiButton>
+        <UiButton variant="primary" size="sm" :loading="saving" @click="handleSave">
           {{ saving ? 'Saving...' : trigger ? 'Save changes' : 'Create trigger' }}
-        </button>
+        </UiButton>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/TriggerList.vue b/frontend/src/components/TriggerList.vue
index e217b656..58dd259d 100644
--- a/frontend/src/components/TriggerList.vue
+++ b/frontend/src/components/TriggerList.vue
@@ -15,6 +15,8 @@
 import { Edit2, Trash2 } from 'lucide-vue-next'
 import { useChannelsStore } from '@/stores/channels'
 import type { AlertTrigger } from '@/types/triggers'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 defineProps<{
   triggers: AlertTrigger[]
@@ -74,29 +76,15 @@ function summarizeFilter(t: AlertTrigger): string {
         </p>
       </div>
       <div class="flex items-center gap-2 ml-4 shrink-0">
-        <button
-          class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none"
-          :class="t.enabled ? 'bg-mnt-green-600' : 'bg-mnt-elevated'"
+        <ToggleSwitch
+          :model-value="t.enabled"
+          size="sm"
+          :label="t.enabled ? 'Click to disable' : 'Click to enable'"
           :title="t.enabled ? 'Click to disable' : 'Click to enable'"
-          @click="emit('toggle', t)"
-        >
-          <span
-            class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
-            :class="t.enabled ? 'translate-x-4' : 'translate-x-0'"
-          />
-        </button>
-        <button
-          class="rounded-lg border border-mnt-default px-2.5 py-1 text-xs text-mnt-secondary hover:bg-mnt-elevated transition-all flex items-center gap-1"
-          @click="emit('edit', t)"
-        >
-          <Edit2 :size="11" /> Edit
-        </button>
-        <button
-          class="rounded-lg border border-mnt-status-down/40 px-2.5 py-1 text-xs text-mnt-status-down hover:bg-mnt-status-down/10 transition-all flex items-center gap-1"
-          @click="emit('delete', t)"
-        >
-          <Trash2 :size="11" /> Delete
-        </button>
+          @update:model-value="emit('toggle', t)"
+        />
+        <UiButton variant="secondary" size="sm" :icon="Edit2" @click="emit('edit', t)">Edit</UiButton>
+        <UiButton variant="danger" size="sm" :icon="Trash2" @click="emit('delete', t)">Delete</UiButton>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/TriggerManager.vue b/frontend/src/components/TriggerManager.vue
index af7db4d6..76c0c368 100644
--- a/frontend/src/components/TriggerManager.vue
+++ b/frontend/src/components/TriggerManager.vue
@@ -19,6 +19,7 @@ import { useChannelsStore } from '@/stores/channels'
 import { useConfirm } from '@/composables/useConfirm'
 import TriggerEditor from '@/components/TriggerEditor.vue'
 import TriggerList from '@/components/TriggerList.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 import type { AlertTrigger } from '@/types/triggers'
 
 const store = useTriggersStore()
@@ -86,14 +87,9 @@ onMounted(async () => {
           {{ store.triggers.length }} {{ store.triggers.length === 1 ? 'trigger' : 'triggers' }}
         </template>
       </p>
-      <button
-        v-if="!showEditor"
-        class="inline-flex items-center gap-2 px-4 py-2 bg-mnt-green-600 hover:bg-mnt-green-500 text-mnt-inverted rounded-lg text-xs font-bold transition-all shadow-lg shadow-mnt-green-500/20"
-        @click="openCreate"
-      >
-        <Plus :size="13" />
+      <UiButton v-if="!showEditor" variant="primary" size="sm" :icon="Plus" @click="openCreate">
         New trigger
-      </button>
+      </UiButton>
     </div>
 
     <!-- Editor -->
diff --git a/frontend/src/components/UpdateDetailPanel.vue b/frontend/src/components/UpdateDetailPanel.vue
index 997b3d44..badc0df8 100644
--- a/frontend/src/components/UpdateDetailPanel.vue
+++ b/frontend/src/components/UpdateDetailPanel.vue
@@ -23,6 +23,8 @@ import CveList from '@/components/CveList.vue'
 import ChangelogViewer from '@/components/ChangelogViewer.vue'
 import FeatureGate from '@/components/FeatureGate.vue'
 import AcknowledgeButton from '@/components/ui/AcknowledgeButton.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import TextareaInput from '@/components/ui/TextareaInput.vue'
 import { AlertTriangle, ArrowRight, Check, Copy, ExternalLink, Pin, PinOff } from 'lucide-vue-next'
 
 const { hasFeature } = useEdition()
@@ -205,14 +207,16 @@ onMounted(loadDetail)
         <h4 class="text-[10px] font-bold text-mnt-muted uppercase tracking-widest">
           Update Command
         </h4>
-        <button
-          @click="copyCommand"
-          class="text-[10px] text-mnt-green-500 hover:text-mnt-green-400 flex items-center gap-1 transition-colors"
+        <UiButton
+          variant="ghost"
+          size="sm"
+          :icon="copied ? Check : Copy"
+          class="!min-h-0 px-1.5 py-0 text-[10px] text-mnt-green-500 hover:text-mnt-green-400"
           aria-label="Copy update command"
+          @click="copyCommand"
         >
-          <component :is="copied ? Check : Copy" :size="10" />
           {{ copied ? 'Copied!' : 'Copy' }}
-        </button>
+        </UiButton>
       </div>
       <pre
         class="text-[11px] rounded-lg p-3 overflow-x-auto font-mono whitespace-pre" style="background: var(--mnt-bg-elevated); color: var(--mnt-text-secondary)"
@@ -300,14 +304,16 @@ onMounted(loadDetail)
         <h4 class="text-[10px] font-bold text-mnt-status-warn/80 uppercase tracking-widest">
           Rollback Command
         </h4>
-        <button
-          @click="copyRollbackCommand"
-          class="text-[10px] text-mnt-status-warn hover:text-mnt-status-warn flex items-center gap-1 transition-colors"
+        <UiButton
+          variant="ghost"
+          size="sm"
+          :icon="copiedRollback ? Check : Copy"
+          class="!min-h-0 px-1.5 py-0 text-[10px] text-mnt-status-warn"
           aria-label="Copy rollback command"
+          @click="copyRollbackCommand"
         >
-          <component :is="copiedRollback ? Check : Copy" :size="10" />
           {{ copiedRollback ? 'Copied!' : 'Copy' }}
-        </button>
+        </UiButton>
       </div>
       <pre
         class="text-[11px] rounded-lg p-3 overflow-x-auto font-mono whitespace-pre" style="background: var(--mnt-bg-elevated); color: var(--mnt-text-secondary)"
@@ -346,33 +352,20 @@ onMounted(loadDetail)
     <div class="pt-4 border-t border-mnt-default space-y-3">
       <!-- Pin / Unpin -->
       <div>
-        <button
+        <UiButton
           v-if="!showPinInput || detail.pinned"
+          :variant="detail.pinned ? 'secondary' : 'primary'"
+          class="w-full"
+          :icon="detail.pinned ? PinOff : Pin"
           @click="handlePin"
-          class="w-full py-2.5 rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-2"
-          :class="
-            detail.pinned
-              ? 'bg-mnt-elevated hover:opacity-80 text-mnt-secondary'
-              : 'bg-mnt-status-warn hover:opacity-80 text-mnt-status-warn border border-mnt-sev-warning'
-          "
         >
-          <component :is="detail.pinned ? PinOff : Pin" :size="13" />
           {{ detail.pinned ? 'Unpin this version' : 'Pin this version' }}
-        </button>
+        </UiButton>
         <div v-if="showPinInput && !detail.pinned">
-          <textarea
-            v-model="pinReason"
-            rows="2"
-            placeholder="Reason (optional)"
-            class="w-full px-3 py-2 rounded-lg text-xs placeholder:text-mnt-muted focus:outline-none resize-none"
-            style="background: var(--mnt-bg-elevated); border: 1px solid var(--mnt-border-default); color: var(--mnt-text-primary)"
-          />
-          <button
-            @click="handlePin"
-            class="mt-2 w-full py-2 bg-mnt-sev-warning-solid hover:bg-mnt-sev-warning-solid text-mnt-inverted rounded-lg text-xs font-bold transition-all"
-          >
+          <TextareaInput v-model="pinReason" :rows="2" placeholder="Reason (optional)" />
+          <UiButton variant="primary" class="mt-2 w-full" @click="handlePin">
             Confirm pin
-          </button>
+          </UiButton>
         </div>
       </div>
 
diff --git a/frontend/src/components/WebhookForm.vue b/frontend/src/components/WebhookForm.vue
index f0a53b95..752270f2 100644
--- a/frontend/src/components/WebhookForm.vue
+++ b/frontend/src/components/WebhookForm.vue
@@ -12,192 +12,91 @@
 -->
 
 <template>
-  <Teleport to="body">
-    <div
-      class="fixed inset-0 z-[10001] flex items-center justify-center"
-      @keydown.esc="emit('close')"
-    >
-      <div
-        class="fixed inset-0 bg-black/70 backdrop-blur-sm"
-        @click="emit('close')"
-      />
-
-      <div
-        class="relative mx-4 w-full max-w-md overflow-hidden"
-        :style="{
-          backgroundColor: 'var(--mnt-bg-surface)',
-          border: '1px solid var(--mnt-border-default)',
-          borderRadius: 'var(--mnt-radius-lg)',
-          boxShadow: 'var(--mnt-shadow-elevated)',
-        }"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="webhook-form-title"
-      >
-        <div class="p-6">
-          <h2
-            id="webhook-form-title"
-            class="text-lg font-semibold mb-4"
-            :style="{ color: 'var(--mnt-text-primary)' }"
-          >
-            Add Webhook
-          </h2>
-
-          <form @submit.prevent="submit" class="space-y-4">
-            <div>
-              <label
-                class="block text-sm mb-1"
-                :style="{ color: 'var(--mnt-text-muted)' }"
-              >
-                Name
-              </label>
-              <input
-                v-model="name"
-                type="text"
-                maxlength="100"
-                required
-                placeholder="e.g., Slack Integration"
-                class="w-full rounded px-3 py-2 text-sm focus:outline-none"
-                :style="{
-                  backgroundColor: 'var(--mnt-bg-elevated)',
-                  border: '1px solid var(--mnt-border-default)',
-                  color: 'var(--mnt-text-primary)',
-                  borderRadius: 'var(--mnt-radius-md)',
-                }"
-              />
-            </div>
-
-            <div>
-              <label
-                class="block text-sm mb-1"
-                :style="{ color: 'var(--mnt-text-muted)' }"
-              >
-                URL (HTTPS)
-              </label>
-              <input
-                v-model="url"
-                type="url"
-                required
-                placeholder="https://hooks.example.com/webhook"
-                class="w-full rounded px-3 py-2 text-sm focus:outline-none"
-                :style="{
-                  backgroundColor: 'var(--mnt-bg-elevated)',
-                  border: '1px solid var(--mnt-border-default)',
-                  color: 'var(--mnt-text-primary)',
-                  borderRadius: 'var(--mnt-radius-md)',
-                }"
-              />
-            </div>
-
-            <div>
-              <label
-                class="block text-sm mb-1"
-                :style="{ color: 'var(--mnt-text-muted)' }"
-              >
-                Secret (optional, for HMAC signing)
-              </label>
-              <input
-                v-model="secret"
-                type="text"
-                placeholder="Optional signing secret"
-                class="w-full rounded px-3 py-2 text-sm focus:outline-none"
-                :style="{
-                  backgroundColor: 'var(--mnt-bg-elevated)',
-                  border: '1px solid var(--mnt-border-default)',
-                  color: 'var(--mnt-text-primary)',
-                  borderRadius: 'var(--mnt-radius-md)',
-                }"
-              />
-            </div>
-
-            <div>
-              <label
-                class="block text-sm mb-2"
-                :style="{ color: 'var(--mnt-text-muted)' }"
-              >
-                Event Types
-              </label>
-              <div class="space-y-2">
-                <label class="flex items-center gap-2">
-                  <input
-                    type="checkbox"
-                    value="*"
-                    v-model="selectedEvents"
-                    @change="onAllEventsToggle"
-                    class="rounded accent-mnt-green-500"
-                  />
-                  <span
-                    class="text-sm"
-                    :style="{ color: 'var(--mnt-text-secondary)' }"
-                  >
-                    All events
-                  </span>
-                </label>
-                <label
-                  v-for="et in specificEventTypes"
-                  :key="et.value"
-                  class="flex items-center gap-2 ml-4"
-                >
-                  <input
-                    type="checkbox"
-                    :value="et.value"
-                    v-model="selectedEvents"
-                    :disabled="selectedEvents.includes('*')"
-                    class="rounded accent-mnt-green-500"
-                  />
-                  <span
-                    class="text-sm"
-                    :style="{ color: 'var(--mnt-text-secondary)' }"
-                  >
-                    {{ et.label }}
-                  </span>
-                </label>
-              </div>
-            </div>
-
-            <div
-              v-if="error"
-              class="text-sm"
-              :style="{ color: 'var(--mnt-status-down-text)' }"
-            >
-              {{ error }}
-            </div>
-
-            <div class="flex gap-2 justify-end">
-              <button
-                type="button"
-                @click="emit('close')"
-                class="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium transition-colors min-h-[36px]"
-                :style="{
-                  color: 'var(--mnt-text-secondary)',
-                  backgroundColor: 'transparent',
-                  border: '1px solid var(--mnt-border-default)',
-                }"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                :disabled="submitting || !name || !url || selectedEvents.length === 0"
-                class="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium transition-colors min-h-[36px] disabled:opacity-50 disabled:cursor-not-allowed"
-                :style="{
-                  backgroundColor: 'var(--mnt-accent)',
-                  color: 'var(--mnt-text-inverted)',
-                }"
-              >
-                {{ submitting ? 'Creating...' : 'Add Webhook' }}
-              </button>
-            </div>
-          </form>
+  <UiModal v-model:open="isOpen" title="Add Webhook" size="sm">
+    <form id="webhook-form" @submit.prevent="submit" class="space-y-4">
+      <FormField label="Name" required>
+        <template #default="{ id, describedBy, invalid }">
+          <TextInput
+            :id="id"
+            v-model="name"
+            maxlength="100"
+            required
+            placeholder="e.g., Slack Integration"
+            :aria-describedby="describedBy"
+            :invalid="invalid"
+          />
+        </template>
+      </FormField>
+
+      <FormField label="URL (HTTPS)" required>
+        <template #default="{ id, describedBy, invalid }">
+          <TextInput
+            :id="id"
+            v-model="url"
+            type="url"
+            required
+            placeholder="https://hooks.example.com/webhook"
+            :aria-describedby="describedBy"
+            :invalid="invalid"
+          />
+        </template>
+      </FormField>
+
+      <FormField label="Secret (optional, for HMAC signing)">
+        <template #default="{ id, describedBy, invalid }">
+          <TextInput
+            :id="id"
+            v-model="secret"
+            placeholder="Optional signing secret"
+            :aria-describedby="describedBy"
+            :invalid="invalid"
+          />
+        </template>
+      </FormField>
+
+      <div>
+        <label class="mb-2 block text-sm text-mnt-muted">Event Types</label>
+        <div class="space-y-2">
+          <CheckboxInput v-model="selectedEvents" value="*" label="All events" @change="onAllEventsToggle" />
+          <div v-for="et in specificEventTypes" :key="et.value" class="ml-4">
+            <CheckboxInput
+              v-model="selectedEvents"
+              :value="et.value"
+              :label="et.label"
+              :disabled="selectedEvents.includes('*')"
+            />
+          </div>
         </div>
       </div>
-    </div>
-  </Teleport>
+
+      <div v-if="error" class="text-sm text-mnt-status-down-text">
+        {{ error }}
+      </div>
+    </form>
+
+    <template #footer>
+      <UiButton variant="secondary" @click="emit('close')">Cancel</UiButton>
+      <UiButton
+        variant="primary"
+        type="submit"
+        form="webhook-form"
+        :loading="submitting"
+        :disabled="!name || !url || selectedEvents.length === 0"
+      >
+        {{ submitting ? 'Creating...' : 'Add Webhook' }}
+      </UiButton>
+    </template>
+  </UiModal>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch } from 'vue'
 import { createWebhook } from '@/services/webhookApi'
+import UiModal from '@/components/ui/UiModal.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const emit = defineEmits<{
   close: []
@@ -213,6 +112,11 @@ const specificEventTypes = [
   { value: 'alert.resolved', label: 'Alert resolved' },
 ]
 
+const isOpen = ref(true)
+watch(isOpen, (val) => {
+  if (!val) emit('close')
+})
+
 const name = ref('')
 const url = ref('')
 const secret = ref('')
@@ -243,12 +147,4 @@ async function submit() {
     submitting.value = false
   }
 }
-
-onMounted(() => {
-  document.body.style.overflow = 'hidden'
-})
-
-onBeforeUnmount(() => {
-  document.body.style.overflow = ''
-})
 </script>
diff --git a/frontend/src/components/dashboard/IncidentBanner.vue b/frontend/src/components/dashboard/IncidentBanner.vue
index 3caf3c5e..05f8290d 100644
--- a/frontend/src/components/dashboard/IncidentBanner.vue
+++ b/frontend/src/components/dashboard/IncidentBanner.vue
@@ -14,6 +14,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { X, ChevronDown } from 'lucide-vue-next'
+import UiButton from '@/components/ui/UiButton.vue'
 
 export interface IncidentTimelineEntry {
   id: string
@@ -69,13 +70,7 @@ function formatFullTimestamp(ts: string): string {
       <span class="text-sm font-bold text-mnt-status-down">
         {{ incidents.length }} Active Incident{{ incidents.length > 1 ? 's' : '' }}
       </span>
-      <button
-        @click="dismissed = true"
-        class="p-1.5 rounded-lg text-mnt-muted hover:text-mnt-primary hover:bg-mnt-elevated transition-colors"
-        aria-label="Dismiss"
-      >
-        <X :size="14" />
-      </button>
+      <UiButton variant="ghost" size="sm" :icon="X" aria-label="Dismiss" @click="dismissed = true" />
     </div>
 
     <div
diff --git a/frontend/src/components/dashboard/UpdateSummaryStrip.vue b/frontend/src/components/dashboard/UpdateSummaryStrip.vue
index 4769edd2..09a5f18b 100644
--- a/frontend/src/components/dashboard/UpdateSummaryStrip.vue
+++ b/frontend/src/components/dashboard/UpdateSummaryStrip.vue
@@ -18,6 +18,7 @@ import { useUpdatesStore } from '@/stores/updates'
 import { timeAgo } from '@/utils/time'
 import { osAtRisk, osAtRiskTone, osTotal } from '@/utils/osSupport'
 import { RefreshCw, AlertTriangle, ArrowUpCircle, CheckCircle, Server } from 'lucide-vue-next'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const updates = useUpdatesStore()
 
@@ -44,14 +45,16 @@ const formatTime = timeAgo
         <span v-if="updates.summary" class="text-[10px] text-mnt-muted font-bold">
           Last scan: {{ formatTime(updates.summary.last_scan) }}
         </span>
-        <button
-          @click="updates.startScan()"
+        <UiButton
+          variant="primary"
+          size="sm"
+          :icon="RefreshCw"
+          :loading="updates.scanning"
           :disabled="updates.scanning"
-          class="px-3 py-1.5 bg-mnt-green-600 hover:bg-mnt-green-500 disabled:bg-mnt-elevated disabled:text-mnt-muted text-mnt-inverted rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 shadow-lg shadow-mnt-green-500/20"
+          @click="updates.startScan()"
         >
-          <RefreshCw :size="11" :class="{ 'animate-spin': updates.scanning }" />
           {{ updates.scanning ? 'Scan...' : 'Check' }}
-        </button>
+        </UiButton>
       </div>
     </div>
 
diff --git a/frontend/src/components/escalation/LevelEditor.vue b/frontend/src/components/escalation/LevelEditor.vue
index cd0c5bbf..b116e3db 100644
--- a/frontend/src/components/escalation/LevelEditor.vue
+++ b/frontend/src/components/escalation/LevelEditor.vue
@@ -12,7 +12,12 @@
 -->
 
 <script setup lang="ts">
-import { Plus, Minus } from 'lucide-vue-next'
+import { Minus } from 'lucide-vue-next'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
 
 interface Channel {
   id: string
@@ -50,10 +55,8 @@ function setDelay(v: number) {
   emit('update:modelValue', { ...props.modelValue, delay_seconds: v })
 }
 
-function toggleChannel(id: string) {
-  const ids = props.modelValue.channel_ids
-  const next = ids.includes(id) ? ids.filter((c) => c !== id) : [...ids, id]
-  emit('update:modelValue', { ...props.modelValue, channel_ids: next })
+function setChannelIds(ids: (string | number)[]) {
+  emit('update:modelValue', { ...props.modelValue, channel_ids: ids as string[] })
 }
 </script>
 
@@ -64,48 +67,42 @@ function toggleChannel(id: string) {
       <span class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">
         Level {{ index + 1 }}
       </span>
-      <button
+      <UiButton
         v-if="canRemove"
-        class="p-1 rounded text-mnt-muted hover:text-mnt-status-down hover:bg-mnt-status-down/10 transition-all"
+        variant="ghost"
+        size="sm"
+        :icon="Minus"
         title="Remove level"
+        aria-label="Remove level"
         @click="emit('remove')"
-      >
-        <Minus :size="13" />
-      </button>
+      />
     </div>
 
     <!-- Delay -->
-    <div class="space-y-2">
-      <label class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">
-        Trigger after (seconds)
-      </label>
-      <div class="flex items-center gap-3 flex-wrap">
-        <input
-          :value="modelValue.delay_seconds"
-          type="number"
-          min="60"
-          max="86400"
-          step="60"
-          class="w-28 bg-mnt-surface border border-mnt-default rounded-lg px-3 py-1.5 text-sm text-mnt-primary focus:outline-none focus:border-mnt-default transition-colors"
-          @input="setDelay(Number(($event.target as HTMLInputElement).value))"
-        />
-        <div class="flex gap-1.5 flex-wrap">
-          <button
-            v-for="preset in DELAY_PRESETS"
-            :key="preset.value"
-            class="px-2.5 py-1 rounded text-[10px] font-bold border transition-all"
-            :class="
-              modelValue.delay_seconds === preset.value
-                ? 'bg-mnt-elevated border-mnt-default text-mnt-secondary'
-                : 'bg-transparent border-mnt-default text-mnt-muted hover:border-mnt-default hover:text-mnt-muted'
-            "
-            @click="setDelay(preset.value)"
-          >
-            {{ preset.label }}
-          </button>
+    <FormField label="Trigger after (seconds)">
+      <template #default="{ id, describedBy, invalid }">
+        <div class="flex items-center gap-3 flex-wrap">
+          <TextInput
+            :id="id"
+            type="number"
+            :model-value="modelValue.delay_seconds"
+            min="60"
+            max="86400"
+            step="60"
+            class="w-28"
+            :aria-describedby="describedBy"
+            :invalid="invalid"
+            @update:model-value="(v) => setDelay(Number(v))"
+          />
+          <SegmentedToggle
+            :model-value="String(modelValue.delay_seconds)"
+            :options="DELAY_PRESETS.map((p) => ({ value: String(p.value), label: p.label }))"
+            ariaLabel="Delay presets"
+            @update:model-value="(v) => setDelay(Number(v))"
+          />
         </div>
-      </div>
-    </div>
+      </template>
+    </FormField>
 
     <!-- Channels -->
     <div class="space-y-2">
@@ -113,22 +110,15 @@ function toggleChannel(id: string) {
       <div v-if="channels.length === 0" class="text-xs text-mnt-muted">
         No channels available.
       </div>
-      <div v-else class="flex flex-wrap gap-2">
-        <button
+      <div v-else class="flex flex-wrap gap-4">
+        <CheckboxInput
           v-for="ch in channels"
           :key="ch.id"
-          class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all"
-          :class="
-            modelValue.channel_ids.includes(ch.id)
-              ? 'bg-mnt-green-500/10 border-mnt-green-500/30 text-mnt-green-400'
-              : 'bg-transparent border-mnt-default text-mnt-muted hover:border-mnt-default hover:text-mnt-secondary'
-          "
-          @click="toggleChannel(ch.id)"
-        >
-          <Plus v-if="!modelValue.channel_ids.includes(ch.id)" :size="11" />
-          <Minus v-else :size="11" />
-          {{ ch.name }}
-        </button>
+          :value="ch.id"
+          :model-value="modelValue.channel_ids"
+          :label="ch.name"
+          @update:model-value="(v) => setChannelIds(v as (string | number)[])"
+        />
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/escalation/PolicyEditor.vue b/frontend/src/components/escalation/PolicyEditor.vue
index 488e460d..1bb4ee09 100644
--- a/frontend/src/components/escalation/PolicyEditor.vue
+++ b/frontend/src/components/escalation/PolicyEditor.vue
@@ -22,6 +22,11 @@ import { X, Plus, Loader2, ArrowRight, Shield } from 'lucide-vue-next'
 import LevelEditor from './LevelEditor.vue'
 import OverlapWarningComponent from './OverlapWarning.vue'
 import InlineAlert from '@/components/ui/InlineAlert.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
 import { useEscalationApi } from '@/composables/useEscalationApi'
 
 interface Channel {
@@ -95,14 +100,6 @@ watch([name, severities, levels], () => checkOverlap(), { deep: true })
 
 const SEVERITY_OPTIONS = ['warning', 'critical']
 
-function toggleSeverity(sev: string) {
-  if (severities.value.includes(sev)) {
-    severities.value = severities.value.filter((s) => s !== sev)
-  } else {
-    severities.value = [...severities.value, sev]
-  }
-}
-
 function addLevel() {
   if (levels.value.length >= maxLevels.value) return
   const last = levels.value[levels.value.length - 1]
@@ -189,12 +186,7 @@ onMounted(() => {
       <h3 class="text-sm font-bold text-mnt-primary">
         {{ policy ? 'Edit policy' : 'New escalation policy' }}
       </h3>
-      <button
-        class="p-1 rounded text-mnt-muted hover:text-mnt-secondary hover:bg-mnt-elevated transition-all"
-        @click="emit('cancel')"
-      >
-        <X :size="16" />
-      </button>
+      <UiButton variant="ghost" size="sm" :icon="X" aria-label="Cancel" @click="emit('cancel')" />
     </div>
 
     <div class="p-5 space-y-6">
@@ -207,17 +199,11 @@ onMounted(() => {
       </div>
 
       <!-- Name -->
-      <div class="space-y-1.5">
-        <label class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">
-          Policy name
-        </label>
-        <input
-          v-model="name"
-          type="text"
-          placeholder="e.g. Critical alerts on-call"
-          class="w-full bg-mnt-primary border border-mnt-default rounded-lg px-3 py-2 text-sm text-mnt-primary placeholder:text-mnt-muted focus:outline-none focus:border-mnt-default transition-colors"
-        />
-      </div>
+      <FormField label="Policy name">
+        <template #default="{ id, describedBy, invalid }">
+          <TextInput :id="id" v-model="name" placeholder="e.g. Critical alerts on-call" :aria-describedby="describedBy" :invalid="invalid" />
+        </template>
+      </FormField>
 
       <!-- Active toggle -->
       <div class="flex items-center justify-between">
@@ -227,16 +213,7 @@ onMounted(() => {
             Inactive policies are saved but never triggered.
           </p>
         </div>
-        <button
-          class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none"
-          :class="active ? 'bg-mnt-green-600' : 'bg-mnt-elevated'"
-          @click="active = !active"
-        >
-          <span
-            class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
-            :class="active ? 'translate-x-4' : 'translate-x-0'"
-          />
-        </button>
+        <ToggleSwitch v-model="active" label="Active" />
       </div>
 
       <!-- Severities -->
@@ -244,22 +221,14 @@ onMounted(() => {
         <label class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">
           Severities <span class="text-mnt-muted normal-case font-normal">(empty = all)</span>
         </label>
-        <div class="flex gap-2">
-          <button
+        <div class="flex gap-4">
+          <CheckboxInput
             v-for="sev in SEVERITY_OPTIONS"
             :key="sev"
-            class="px-3 py-1.5 rounded-lg text-xs font-bold border transition-all"
-            :class="
-              severities.includes(sev)
-                ? sev === 'critical'
-                  ? 'bg-mnt-status-down/15 border-mnt-status-down/40 text-mnt-status-down'
-                  : 'bg-mnt-status-warn border-amber-500/40 text-mnt-status-warn'
-                : 'bg-transparent border-mnt-default text-mnt-muted hover:border-mnt-default hover:text-mnt-muted'
-            "
-            @click="toggleSeverity(sev)"
-          >
-            {{ sev.charAt(0).toUpperCase() + sev.slice(1) }}
-          </button>
+            v-model="severities"
+            :value="sev"
+            :label="sev.charAt(0).toUpperCase() + sev.slice(1)"
+          />
         </div>
       </div>
 
@@ -330,14 +299,16 @@ onMounted(() => {
             @remove="removeLevel(i)"
           />
 
-          <button
+          <UiButton
             v-if="levels.length < maxLevels"
-            class="w-full py-2.5 rounded-xl border border-dashed border-mnt-default text-xs text-mnt-muted hover:text-mnt-secondary hover:border-mnt-default transition-all flex items-center justify-center gap-1.5"
+            variant="secondary"
+            size="sm"
+            :icon="Plus"
+            class="w-full border-dashed"
             @click="addLevel"
           >
-            <Plus :size="13" />
             Add level
-          </button>
+          </UiButton>
         </template>
       </div>
 
@@ -346,20 +317,10 @@ onMounted(() => {
 
       <!-- Actions -->
       <div class="flex items-center justify-end gap-3 pt-2">
-        <button
-          class="px-4 py-2 text-xs font-medium text-mnt-muted hover:text-mnt-secondary transition-colors"
-          @click="emit('cancel')"
-        >
-          Cancel
-        </button>
-        <button
-          class="inline-flex items-center gap-2 px-4 py-2 bg-mnt-green-600 hover:bg-mnt-green-500 disabled:bg-mnt-elevated disabled:text-mnt-muted text-mnt-inverted rounded-lg text-xs font-bold transition-all shadow-lg shadow-mnt-green-500/20"
-          :disabled="saving"
-          @click="handleSave"
-        >
-          <Loader2 v-if="saving" :size="13" class="animate-spin" />
+        <UiButton variant="ghost" size="sm" @click="emit('cancel')">Cancel</UiButton>
+        <UiButton variant="primary" size="sm" :loading="saving" @click="handleSave">
           {{ saving ? 'Saving...' : 'Save policy' }}
-        </button>
+        </UiButton>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/escalation/PolicyList.vue b/frontend/src/components/escalation/PolicyList.vue
index 8f594a9a..405dd619 100644
--- a/frontend/src/components/escalation/PolicyList.vue
+++ b/frontend/src/components/escalation/PolicyList.vue
@@ -16,6 +16,7 @@ import { useConfirm } from '@/composables/useConfirm'
 import type { EscalationPolicy } from '@/types/escalation'
 import { timeAgo } from '@/utils/time'
 import { Pencil, Trash2, Layers, CheckCircle2, CircleDashed } from 'lucide-vue-next'
+import UiButton from '@/components/ui/UiButton.vue'
 
 defineProps<{
   policies: EscalationPolicy[]
@@ -80,12 +81,9 @@ function severityLabel(severities: string[]): string {
         <Layers :size="36" class="text-mnt-muted mb-3" />
         <p class="text-sm text-mnt-muted font-medium">No escalation policies yet</p>
         <p class="text-[10px] text-mnt-muted mt-1">Create a policy to start routing alerts through escalation chains.</p>
-        <button
-          class="mt-5 px-4 py-2 bg-mnt-green-600 hover:bg-mnt-green-500 text-mnt-inverted rounded-lg text-xs font-bold transition-all shadow-lg shadow-mnt-green-500/20"
-          @click="emit('create')"
-        >
+        <UiButton variant="primary" size="sm" class="mt-5" @click="emit('create')">
           Create first policy
-        </button>
+        </UiButton>
       </div>
     </template>
 
@@ -131,20 +129,24 @@ function severityLabel(severities: string[]): string {
         <!-- Last modified + actions -->
         <div class="w-28 flex items-center justify-end gap-2">
           <span class="text-[10px] text-mnt-muted">{{ timeAgo(policy.updated_at) }}</span>
-          <button
-            class="p-1 rounded text-mnt-muted hover:text-mnt-secondary hover:bg-mnt-elevated transition-all opacity-0 group-hover:opacity-100"
+          <UiButton
+            variant="ghost"
+            size="sm"
+            :icon="Pencil"
             title="Edit"
+            aria-label="Edit"
+            class="opacity-0 group-hover:opacity-100"
             @click.stop="emit('edit', policy)"
-          >
-            <Pencil :size="13" />
-          </button>
-          <button
-            class="p-1 rounded text-mnt-muted hover:text-mnt-status-down hover:bg-mnt-status-down/10 transition-all opacity-0 group-hover:opacity-100"
+          />
+          <UiButton
+            variant="ghost"
+            size="sm"
+            :icon="Trash2"
             title="Delete"
+            aria-label="Delete"
+            class="opacity-0 group-hover:opacity-100"
             @click.stop="handleDelete(policy)"
-          >
-            <Trash2 :size="13" />
-          </button>
+          />
         </div>
       </div>
     </template>
diff --git a/frontend/src/components/personalization/BrandingSection.vue b/frontend/src/components/personalization/BrandingSection.vue
index 1763443c..e468abdb 100644
--- a/frontend/src/components/personalization/BrandingSection.vue
+++ b/frontend/src/components/personalization/BrandingSection.vue
@@ -3,6 +3,9 @@ import { ref, computed } from 'vue'
 import { Upload, Trash2, X } from 'lucide-vue-next'
 import { personalizationApi } from '@/services/personalizationApi'
 import { usePersonalizationStore } from '@/stores/personalization'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 type AssetRole = 'logo' | 'favicon' | 'hero'
 
@@ -122,37 +125,17 @@ defineExpose({ flushPendingAssets })
     </h3>
 
     <div class="grid grid-cols-1 gap-4">
-      <div>
-        <label
-          class="block text-xs mb-1"
-          style="color: var(--mnt-text-muted)"
-        >Page Title</label>
-        <input
-          v-model="title"
-          type="text"
-          maxlength="100"
-          class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:border-mnt-accent"
-          style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-          placeholder="System Status"
-        />
-        <p class="mt-1 text-[11px]" style="color: var(--mnt-text-muted)">1–100 characters</p>
-      </div>
+      <FormField label="Page Title" hint="1–100 characters">
+        <template #default="{ id, describedBy, invalid }">
+          <TextInput :id="id" v-model="title" maxlength="100" :aria-describedby="describedBy" :invalid="invalid" placeholder="System Status" />
+        </template>
+      </FormField>
 
-      <div>
-        <label
-          class="block text-xs mb-1"
-          style="color: var(--mnt-text-muted)"
-        >Subtitle</label>
-        <input
-          v-model="subtitle"
-          type="text"
-          maxlength="200"
-          class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:border-mnt-accent"
-          style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-          placeholder="Real-time service health"
-        />
-        <p class="mt-1 text-[11px]" style="color: var(--mnt-text-muted)">0–200 characters</p>
-      </div>
+      <FormField label="Subtitle" hint="0–200 characters">
+        <template #default="{ id, describedBy, invalid }">
+          <TextInput :id="id" v-model="subtitle" maxlength="200" :aria-describedby="describedBy" :invalid="invalid" placeholder="Real-time service health" />
+        </template>
+      </FormField>
     </div>
 
     <!-- Logo -->
@@ -169,15 +152,9 @@ defineExpose({ flushPendingAssets })
           class="sr-only"
           @change="(e) => onFileSelected('logo', e)"
         />
-        <button
-          type="button"
-          class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors"
-          style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-          @click="logoInputRef?.click()"
-        >
-          <Upload :size="13" />
+        <UiButton type="button" variant="secondary" size="sm" :icon="Upload" @click="logoInputRef?.click()">
           Choose file…
-        </button>
+        </UiButton>
         <span
           v-if="logoFile"
           class="truncate max-w-[200px] text-xs"
@@ -186,49 +163,29 @@ defineExpose({ flushPendingAssets })
         >
           {{ logoFile.name }}
         </span>
-        <button
-          v-if="logoFile"
-          type="button"
-          class="inline-flex items-center gap-1 text-xs hover:underline"
-          style="color: var(--mnt-text-muted)"
-          @click="clearSelection('logo')"
-        >
-          <X :size="12" />
+        <UiButton v-if="logoFile" type="button" variant="ghost" size="sm" :icon="X" @click="clearSelection('logo')">
           Clear
-        </button>
-        <button
+        </UiButton>
+        <UiButton
           v-if="hasLogo && !logoFile && !removeLogo"
           type="button"
-          class="inline-flex items-center gap-1 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors hover:border-red-400/40 hover:text-mnt-status-down"
-          style="background: transparent; border-color: var(--mnt-border-default); color: var(--mnt-text-muted)"
+          variant="secondary"
+          size="sm"
+          :icon="Trash2"
           @click="markForRemoval('logo')"
         >
-          <Trash2 :size="12" />
           Remove
-        </button>
+        </UiButton>
         <span
           v-if="removeLogo"
           class="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs"
-          style="background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: #f87171"
+          style="background: var(--mnt-status-down-bg); border-color: var(--mnt-status-down); color: var(--mnt-status-down)"
         >
           Will be removed on save
-          <button
-            type="button"
-            class="hover:underline"
-            @click="undoRemoval('logo')"
-          >
-            Undo
-          </button>
+          <UiButton type="button" variant="ghost" size="sm" @click="undoRemoval('logo')">Undo</UiButton>
         </span>
       </div>
-      <input
-        v-model="logoAlt"
-        type="text"
-        maxlength="200"
-        class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:border-mnt-accent"
-        style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-        placeholder="Alt text for logo"
-      />
+      <TextInput v-model="logoAlt" maxlength="200" aria-label="Alt text for logo" placeholder="Alt text for logo" />
     </div>
 
     <!-- Favicon -->
@@ -245,15 +202,9 @@ defineExpose({ flushPendingAssets })
           class="sr-only"
           @change="(e) => onFileSelected('favicon', e)"
         />
-        <button
-          type="button"
-          class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors"
-          style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-          @click="faviconInputRef?.click()"
-        >
-          <Upload :size="13" />
+        <UiButton type="button" variant="secondary" size="sm" :icon="Upload" @click="faviconInputRef?.click()">
           Choose file…
-        </button>
+        </UiButton>
         <span
           v-if="faviconFile"
           class="truncate max-w-[200px] text-xs"
@@ -262,39 +213,26 @@ defineExpose({ flushPendingAssets })
         >
           {{ faviconFile.name }}
         </span>
-        <button
-          v-if="faviconFile"
-          type="button"
-          class="inline-flex items-center gap-1 text-xs hover:underline"
-          style="color: var(--mnt-text-muted)"
-          @click="clearSelection('favicon')"
-        >
-          <X :size="12" />
+        <UiButton v-if="faviconFile" type="button" variant="ghost" size="sm" :icon="X" @click="clearSelection('favicon')">
           Clear
-        </button>
-        <button
+        </UiButton>
+        <UiButton
           v-if="hasFavicon && !faviconFile && !removeFavicon"
           type="button"
-          class="inline-flex items-center gap-1 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors hover:border-red-400/40 hover:text-mnt-status-down"
-          style="background: transparent; border-color: var(--mnt-border-default); color: var(--mnt-text-muted)"
+          variant="secondary"
+          size="sm"
+          :icon="Trash2"
           @click="markForRemoval('favicon')"
         >
-          <Trash2 :size="12" />
           Remove
-        </button>
+        </UiButton>
         <span
           v-if="removeFavicon"
           class="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs"
-          style="background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: #f87171"
+          style="background: var(--mnt-status-down-bg); border-color: var(--mnt-status-down); color: var(--mnt-status-down)"
         >
           Will be removed on save
-          <button
-            type="button"
-            class="hover:underline"
-            @click="undoRemoval('favicon')"
-          >
-            Undo
-          </button>
+          <UiButton type="button" variant="ghost" size="sm" @click="undoRemoval('favicon')">Undo</UiButton>
         </span>
       </div>
     </div>
@@ -313,15 +251,9 @@ defineExpose({ flushPendingAssets })
           class="sr-only"
           @change="(e) => onFileSelected('hero', e)"
         />
-        <button
-          type="button"
-          class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors"
-          style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-          @click="heroInputRef?.click()"
-        >
-          <Upload :size="13" />
+        <UiButton type="button" variant="secondary" size="sm" :icon="Upload" @click="heroInputRef?.click()">
           Choose file…
-        </button>
+        </UiButton>
         <span
           v-if="heroFile"
           class="truncate max-w-[200px] text-xs"
@@ -330,49 +262,29 @@ defineExpose({ flushPendingAssets })
         >
           {{ heroFile.name }}
         </span>
-        <button
-          v-if="heroFile"
-          type="button"
-          class="inline-flex items-center gap-1 text-xs hover:underline"
-          style="color: var(--mnt-text-muted)"
-          @click="clearSelection('hero')"
-        >
-          <X :size="12" />
+        <UiButton v-if="heroFile" type="button" variant="ghost" size="sm" :icon="X" @click="clearSelection('hero')">
           Clear
-        </button>
-        <button
+        </UiButton>
+        <UiButton
           v-if="hasHero && !heroFile && !removeHero"
           type="button"
-          class="inline-flex items-center gap-1 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors hover:border-red-400/40 hover:text-mnt-status-down"
-          style="background: transparent; border-color: var(--mnt-border-default); color: var(--mnt-text-muted)"
+          variant="secondary"
+          size="sm"
+          :icon="Trash2"
           @click="markForRemoval('hero')"
         >
-          <Trash2 :size="12" />
           Remove
-        </button>
+        </UiButton>
         <span
           v-if="removeHero"
           class="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs"
-          style="background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: #f87171"
+          style="background: var(--mnt-status-down-bg); border-color: var(--mnt-status-down); color: var(--mnt-status-down)"
         >
           Will be removed on save
-          <button
-            type="button"
-            class="hover:underline"
-            @click="undoRemoval('hero')"
-          >
-            Undo
-          </button>
+          <UiButton type="button" variant="ghost" size="sm" @click="undoRemoval('hero')">Undo</UiButton>
         </span>
       </div>
-      <input
-        v-model="heroAlt"
-        type="text"
-        maxlength="200"
-        class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:border-mnt-accent"
-        style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-primary)"
-        placeholder="Alt text for hero image"
-      />
+      <TextInput v-model="heroAlt" maxlength="200" aria-label="Alt text for hero image" placeholder="Alt text for hero image" />
     </div>
 
     <div class="hidden">{{ logoPreviewUrl }} {{ faviconPreviewUrl }} {{ heroPreviewUrl }}</div>
diff --git a/frontend/src/components/personalization/ColorPaletteSection.vue b/frontend/src/components/personalization/ColorPaletteSection.vue
index 42c7d7b7..0aa2758c 100644
--- a/frontend/src/components/personalization/ColorPaletteSection.vue
+++ b/frontend/src/components/personalization/ColorPaletteSection.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { ContrastWarning, PalettePayload } from '@/services/personalizationApi'
+import TextInput from '@/components/ui/TextInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const palette = defineModel<PalettePayload>('palette', { required: true })
 const warnings = defineModel<ContrastWarning[]>('warnings', { default: () => [] })
@@ -42,66 +44,58 @@ function resetField(key: PaletteKey) {
 
 <template>
   <div class="space-y-6">
-    <h3 class="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Color Palette</h3>
+    <h3 class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">Color Palette</h3>
 
     <!-- Chrome colors -->
     <div class="space-y-3">
-      <p class="text-xs text-slate-500">Chrome</p>
+      <p class="text-xs text-mnt-muted">Chrome</p>
       <div v-for="field in chromeFields" :key="field.key" class="flex items-center gap-3">
         <input
           type="color"
           :value="palette?.[field.key]"
-          class="w-8 h-8 rounded cursor-pointer border border-slate-700 bg-transparent"
+          class="w-8 h-8 rounded cursor-pointer border border-mnt-default bg-transparent"
           @input="(e: Event) => palette && (palette = { ...palette, [field.key]: (e.target as HTMLInputElement).value })"
         />
-        <input
-          type="text"
-          :value="palette?.[field.key]"
+        <TextInput
+          :model-value="palette?.[field.key]"
           maxlength="9"
-          class="w-28 bg-[#0B0E13] border border-slate-800 rounded px-2 py-1 text-white text-xs font-mono focus:outline-none focus:border-slate-600"
+          mono
+          size="sm"
+          class="w-28"
           @change="(e: Event) => palette && (palette = { ...palette, [field.key]: (e.target as HTMLInputElement).value })"
         />
-        <span class="flex-1 text-xs text-slate-400">{{ field.label }}</span>
-        <button
-          class="text-[11px] text-slate-600 hover:text-slate-300"
-          @click="resetField(field.key)"
-        >
-          Reset
-        </button>
+        <span class="flex-1 text-xs text-mnt-muted">{{ field.label }}</span>
+        <UiButton variant="ghost" size="sm" @click="resetField(field.key)">Reset</UiButton>
       </div>
     </div>
 
     <!-- Status colors -->
     <div class="space-y-3">
-      <p class="text-xs text-slate-500">Status Indicators</p>
+      <p class="text-xs text-mnt-muted">Status Indicators</p>
       <div v-for="field in statusFields" :key="field.key" class="flex items-center gap-3">
         <input
           type="color"
           :value="palette?.[field.key]"
-          class="w-8 h-8 rounded cursor-pointer border border-slate-700 bg-transparent"
+          class="w-8 h-8 rounded cursor-pointer border border-mnt-default bg-transparent"
           @input="(e: Event) => palette && (palette = { ...palette, [field.key]: (e.target as HTMLInputElement).value })"
         />
-        <input
-          type="text"
-          :value="palette?.[field.key]"
+        <TextInput
+          :model-value="palette?.[field.key]"
           maxlength="9"
-          class="w-28 bg-[#0B0E13] border border-slate-800 rounded px-2 py-1 text-white text-xs font-mono focus:outline-none focus:border-slate-600"
+          mono
+          size="sm"
+          class="w-28"
           @change="(e: Event) => palette && (palette = { ...palette, [field.key]: (e.target as HTMLInputElement).value })"
         />
-        <span class="flex-1 text-xs text-slate-400">{{ field.label }}</span>
-        <button
-          class="text-[11px] text-slate-600 hover:text-slate-300"
-          @click="resetField(field.key)"
-        >
-          Reset
-        </button>
+        <span class="flex-1 text-xs text-mnt-muted">{{ field.label }}</span>
+        <UiButton variant="ghost" size="sm" @click="resetField(field.key)">Reset</UiButton>
       </div>
     </div>
 
     <!-- Contrast warnings -->
-    <div v-if="warnings && warnings.length > 0" class="bg-yellow-950/30 border border-yellow-800/40 rounded-xl p-4 space-y-2">
-      <p class="text-[10px] text-yellow-500 font-bold uppercase tracking-widest">WCAG AA Contrast Warnings</p>
-      <div v-for="w in warnings" :key="w.pair" class="text-xs text-yellow-300">
+    <div v-if="warnings && warnings.length > 0" class="rounded-xl border border-mnt-sev-warning bg-mnt-status-warn p-4 space-y-2">
+      <p class="text-[10px] text-mnt-status-warn font-bold uppercase tracking-widest">WCAG AA Contrast Warnings</p>
+      <div v-for="w in warnings" :key="w.pair" class="text-xs text-mnt-status-warn">
         {{ w.pair.replace(/_/g, ' ') }}: {{ w.ratio }} (need ≥ {{ w.wcag_aa_threshold }})
       </div>
     </div>
diff --git a/frontend/src/components/personalization/FaqSection.vue b/frontend/src/components/personalization/FaqSection.vue
index 0dfb1819..a1341b4b 100644
--- a/frontend/src/components/personalization/FaqSection.vue
+++ b/frontend/src/components/personalization/FaqSection.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { ArrowUp, ArrowDown, X } from 'lucide-vue-next'
 import { usePersonalizationStore } from '@/stores/personalization'
+import TextInput from '@/components/ui/TextInput.vue'
+import TextareaInput from '@/components/ui/TextareaInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const store = usePersonalizationStore()
 const faqError = ref('')
@@ -38,47 +42,45 @@ async function moveItem(from: number, to: number) {
       >
         <div class="flex items-center gap-2">
           <span class="text-mnt-muted text-xs w-4">{{ idx + 1 }}</span>
-          <input
-            :value="item.question"
+          <TextInput
+            :model-value="item.question"
             maxlength="200"
-            class="flex-1 bg-transparent text-mnt-primary text-sm focus:outline-none font-medium"
+            class="flex-1 font-medium"
             placeholder="Question"
             @change="(e: Event) => store.updateFAQItem(item.id, (e.target as HTMLInputElement).value, item.answer_md)"
           />
           <div class="flex gap-1">
-            <button
+            <UiButton
               v-if="idx > 0"
-              class="text-mnt-muted hover:text-mnt-secondary text-xs px-1"
+              variant="ghost"
+              size="sm"
+              :icon="ArrowUp"
+              aria-label="Move item up"
               @click="moveItem(idx, idx - 1)"
-            >↑</button>
-            <button
+            />
+            <UiButton
               v-if="idx < store.faqItems.length - 1"
-              class="text-mnt-muted hover:text-mnt-secondary text-xs px-1"
+              variant="ghost"
+              size="sm"
+              :icon="ArrowDown"
+              aria-label="Move item down"
               @click="moveItem(idx, idx + 1)"
-            >↓</button>
-            <button
-              class="text-mnt-muted hover:text-mnt-status-down text-xs px-1"
-              @click="removeItem(item.id)"
-            >✕</button>
+            />
+            <UiButton variant="ghost" size="sm" :icon="X" aria-label="Remove item" @click="removeItem(item.id)" />
           </div>
         </div>
-        <textarea
-          :value="item.answer_md"
+        <TextareaInput
+          :model-value="item.answer_md"
           maxlength="4000"
-          rows="3"
-          class="w-full bg-mnt-surface border border-mnt-default rounded-lg px-3 py-2 text-mnt-secondary text-sm font-mono focus:outline-none focus:border-mnt-default resize-none"
+          :rows="3"
+          mono
           placeholder="Answer in Markdown…"
           @change="(e: Event) => store.updateFAQItem(item.id, item.question, (e.target as HTMLTextAreaElement).value)"
         />
       </div>
     </div>
 
-    <button
-      class="text-xs px-3 py-1.5 border border-mnt-default rounded text-mnt-muted hover:text-mnt-primary hover:border-mnt-default"
-      @click="addItem"
-    >
-      + Add FAQ item
-    </button>
+    <UiButton variant="secondary" size="sm" @click="addItem">+ Add FAQ item</UiButton>
     <p v-if="faqError" class="text-xs text-mnt-status-down">{{ faqError }}</p>
   </div>
 </template>
diff --git a/frontend/src/components/personalization/FooterSection.vue b/frontend/src/components/personalization/FooterSection.vue
index 3cd72252..0ee1539c 100644
--- a/frontend/src/components/personalization/FooterSection.vue
+++ b/frontend/src/components/personalization/FooterSection.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { ArrowUp, ArrowDown, X } from 'lucide-vue-next'
 import { usePersonalizationStore } from '@/stores/personalization'
+import FormField from '@/components/ui/FormField.vue'
+import TextareaInput from '@/components/ui/TextareaInput.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const store = usePersonalizationStore()
 const footerTextMD = defineModel<string>('footerTextMD', { required: true })
@@ -31,17 +36,11 @@ async function moveLink(from: number, to: number) {
   <div class="space-y-4">
     <h3 class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">Footer</h3>
 
-    <div>
-      <label class="block text-xs text-mnt-muted mb-1">Footer Text (Markdown)</label>
-      <textarea
-        v-model="footerTextMD"
-        maxlength="500"
-        rows="3"
-        class="w-full bg-mnt-primary border border-mnt-default rounded-lg px-3 py-2 text-mnt-primary text-sm font-mono focus:outline-none focus:border-mnt-default resize-none"
-        placeholder="© 2026 Acme — [Privacy](https://acme.example/privacy)"
-      />
-      <p class="text-[11px] text-mnt-muted mt-1">{{ footerTextMD.length }}/500</p>
-    </div>
+    <FormField label="Footer Text (Markdown)" :hint="`${footerTextMD.length}/500`">
+      <template #default="{ id, describedBy, invalid }">
+        <TextareaInput :id="id" v-model="footerTextMD" maxlength="500" :rows="3" mono :aria-describedby="describedBy" :invalid="invalid" placeholder="© 2026 Acme — [Privacy](https://acme.example/privacy)" />
+      </template>
+    </FormField>
 
     <div class="space-y-2">
       <p class="text-xs text-mnt-muted">External Links</p>
@@ -51,41 +50,39 @@ async function moveLink(from: number, to: number) {
         class="flex items-center gap-2 bg-mnt-primary border border-mnt-default rounded-lg px-3 py-2"
       >
         <span class="text-mnt-muted text-xs w-4">{{ idx + 1 }}</span>
-        <input
-          :value="link.label"
-          class="flex-1 bg-transparent text-mnt-primary text-sm focus:outline-none"
+        <TextInput
+          :model-value="link.label"
+          class="flex-1"
           placeholder="Label"
           @change="(e: Event) => store.updateFooterLink(link.id, (e.target as HTMLInputElement).value, link.url)"
         />
-        <input
-          :value="link.url"
-          class="flex-1 bg-transparent text-mnt-muted text-sm focus:outline-none"
+        <TextInput
+          :model-value="link.url"
+          class="flex-1"
           placeholder="https://"
           @change="(e: Event) => store.updateFooterLink(link.id, link.label, (e.target as HTMLInputElement).value)"
         />
         <div class="flex gap-1">
-          <button
+          <UiButton
             v-if="idx > 0"
-            class="text-mnt-muted hover:text-mnt-secondary text-xs px-1"
+            variant="ghost"
+            size="sm"
+            :icon="ArrowUp"
+            aria-label="Move link up"
             @click="moveLink(idx, idx - 1)"
-          >↑</button>
-          <button
+          />
+          <UiButton
             v-if="idx < store.footerLinks.length - 1"
-            class="text-mnt-muted hover:text-mnt-secondary text-xs px-1"
+            variant="ghost"
+            size="sm"
+            :icon="ArrowDown"
+            aria-label="Move link down"
             @click="moveLink(idx, idx + 1)"
-          >↓</button>
-          <button
-            class="text-mnt-muted hover:text-mnt-status-down text-xs px-1"
-            @click="removeLink(link.id)"
-          >✕</button>
+          />
+          <UiButton variant="ghost" size="sm" :icon="X" aria-label="Remove link" @click="removeLink(link.id)" />
         </div>
       </div>
-      <button
-        class="text-xs px-3 py-1.5 border border-mnt-default rounded text-mnt-muted hover:text-mnt-primary hover:border-mnt-default"
-        @click="addLink"
-      >
-        + Add link
-      </button>
+      <UiButton variant="secondary" size="sm" @click="addLink">+ Add link</UiButton>
       <p v-if="linkError" class="text-xs text-mnt-status-down">{{ linkError }}</p>
     </div>
   </div>
diff --git a/frontend/src/components/personalization/HeaderAnnouncementSection.vue b/frontend/src/components/personalization/HeaderAnnouncementSection.vue
index a4d5e2b9..fcc2332b 100644
--- a/frontend/src/components/personalization/HeaderAnnouncementSection.vue
+++ b/frontend/src/components/personalization/HeaderAnnouncementSection.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import TextareaInput from '@/components/ui/TextareaInput.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+
 const enabled = defineModel<boolean>('enabled', { required: true })
 const messageMD = defineModel<string>('messageMD', { required: true })
 const url = defineModel<string>('url', { required: true })
@@ -8,34 +13,20 @@ const url = defineModel<string>('url', { required: true })
   <div class="space-y-4">
     <h3 class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">Header Announcement</h3>
 
-    <label class="flex items-center gap-2 cursor-pointer">
-      <input v-model="enabled" type="checkbox" class="w-4 h-4 accent-mnt-green-500" />
-      <span class="text-sm text-mnt-secondary">Show announcement banner</span>
-    </label>
+    <CheckboxInput v-model="enabled" label="Show announcement banner" />
 
     <div v-if="enabled" class="space-y-3">
-      <div>
-        <label class="block text-xs text-mnt-muted mb-1">Message (Markdown)</label>
-        <textarea
-          v-model="messageMD"
-          maxlength="1000"
-          rows="3"
-          class="w-full bg-mnt-primary border border-mnt-default rounded-lg px-3 py-2 text-mnt-primary text-sm font-mono focus:outline-none focus:border-mnt-default resize-none"
-          placeholder="**Scheduled maintenance** on 12 May at 22:00 UTC."
-        />
-        <p class="text-[11px] text-mnt-muted mt-1">{{ messageMD.length }}/1000 — Bold, italic, and links allowed.</p>
-      </div>
+      <FormField label="Message (Markdown)" :hint="`${messageMD.length}/1000 — Bold, italic, and links allowed.`">
+        <template #default="{ id, describedBy, invalid }">
+          <TextareaInput :id="id" v-model="messageMD" maxlength="1000" :rows="3" mono :aria-describedby="describedBy" :invalid="invalid" placeholder="**Scheduled maintenance** on 12 May at 22:00 UTC." />
+        </template>
+      </FormField>
 
-      <div>
-        <label class="block text-xs text-mnt-muted mb-1">Link URL (optional)</label>
-        <input
-          v-model="url"
-          type="url"
-          class="w-full bg-mnt-primary border border-mnt-default rounded-lg px-3 py-2 text-mnt-primary text-sm focus:outline-none focus:border-mnt-default"
-          placeholder="https://acme.example/maintenance"
-        />
-        <p class="text-[11px] text-mnt-muted mt-1">Must start with https:// — clicking the banner opens this URL.</p>
-      </div>
+      <FormField label="Link URL (optional)" hint="Must start with https:// — clicking the banner opens this URL.">
+        <template #default="{ id, describedBy, invalid }">
+          <TextInput :id="id" v-model="url" type="url" :aria-describedby="describedBy" :invalid="invalid" placeholder="https://acme.example/maintenance" />
+        </template>
+      </FormField>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/personalization/LocalizationSection.vue b/frontend/src/components/personalization/LocalizationSection.vue
index aa2652c6..e78fdcb5 100644
--- a/frontend/src/components/personalization/LocalizationSection.vue
+++ b/frontend/src/components/personalization/LocalizationSection.vue
@@ -1,47 +1,46 @@
 <script setup lang="ts">
+import FormField from '@/components/ui/FormField.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import RadioGroup from '@/components/ui/RadioGroup.vue'
+
 const locale = defineModel<string>('locale', { required: true })
 const timezone = defineModel<string>('timezone', { required: true })
 const dateFormat = defineModel<string>('dateFormat', { required: true })
+
+const localeOptions = [
+  { value: 'en', label: 'English (en)' },
+  { value: 'fr', label: 'Français (fr)' },
+]
+
+const dateFormatOptions = [
+  { value: 'relative', label: 'Relative', hint: '2 minutes ago' },
+  { value: 'absolute', label: 'Absolute', hint: '5 mai 2026 14:32' },
+]
 </script>
 
 <template>
   <div class="space-y-4">
     <h3 class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest">Localization</h3>
 
-    <div>
-      <label class="block text-xs text-mnt-muted mb-1">Language</label>
-      <select
-        v-model="locale"
-        class="w-full bg-mnt-primary border border-mnt-default rounded-lg px-3 py-2 text-mnt-primary text-sm focus:outline-none focus:border-mnt-default"
-      >
-        <option value="en">English (en)</option>
-        <option value="fr">Français (fr)</option>
-      </select>
-    </div>
+    <FormField label="Language">
+      <template #default="{ id, describedBy, invalid }">
+        <SelectInput :id="id" v-model="locale" :options="localeOptions" :aria-describedby="describedBy" :invalid="invalid" />
+      </template>
+    </FormField>
 
     <div>
-      <label class="block text-xs text-mnt-muted mb-1">Timezone</label>
-      <input
-        v-model="timezone"
-        type="text"
-        class="w-full bg-mnt-primary border border-mnt-default rounded-lg px-3 py-2 text-mnt-primary text-sm focus:outline-none focus:border-mnt-default"
-        placeholder="Europe/Paris (leave empty for browser timezone)"
-      />
+      <FormField label="Timezone">
+        <template #default="{ id, describedBy, invalid }">
+          <TextInput :id="id" v-model="timezone" :aria-describedby="describedBy" :invalid="invalid" placeholder="Europe/Paris (leave empty for browser timezone)" />
+        </template>
+      </FormField>
       <p class="text-[11px] text-mnt-muted mt-1">IANA timezone identifier, e.g. <code class="text-mnt-muted">America/New_York</code></p>
     </div>
 
     <div>
-      <label class="block text-xs text-mnt-muted mb-2">Date Format</label>
-      <div class="flex gap-4">
-        <label class="flex items-center gap-2 cursor-pointer">
-          <input v-model="dateFormat" type="radio" value="relative" class="accent-mnt-green-500" />
-          <span class="text-sm text-mnt-secondary">Relative <span class="text-mnt-muted text-xs">(2 minutes ago)</span></span>
-        </label>
-        <label class="flex items-center gap-2 cursor-pointer">
-          <input v-model="dateFormat" type="radio" value="absolute" class="accent-mnt-green-500" />
-          <span class="text-sm text-mnt-secondary">Absolute <span class="text-mnt-muted text-xs">(5 mai 2026 14:32)</span></span>
-        </label>
-      </div>
+      <p class="block text-xs text-mnt-muted mb-2">Date Format</p>
+      <RadioGroup v-model="dateFormat" :options="dateFormatOptions" ariaLabel="Date Format" inline />
     </div>
   </div>
 </template>
diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
index 7bb71630..30dc0db6 100644
--- a/frontend/src/layouts/DefaultLayout.vue
+++ b/frontend/src/layouts/DefaultLayout.vue
@@ -13,6 +13,7 @@ import AlertBanner from '@/components/ui/AlertBanner.vue'
 import DetailSlideOver from '@/components/DetailSlideOver.vue'
 import ConfirmDialog from '@/components/ui/ConfirmDialog.vue'
 import ToastContainer from '@/components/ToastContainer.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 import { useAppVersion } from '@/composables/useAppVersion'
 import { useStorageStore } from '@/stores/storage'
 import {
@@ -254,13 +255,15 @@ watch(
                   >{{ version }}</span
                 >
               </div>
-              <button
+              <UiButton
                 v-if="isCommunity"
-                class="cursor-pointer block w-full py-1.5 rounded-lg text-xs font-semibold text-center transition-colors"
+                variant="secondary"
+                size="sm"
+                class="w-full"
                 style="background: var(--mnt-bg-surface); color: var(--mnt-text-secondary)"
               >
                 Compare editions
-              </button>
+              </UiButton>
             </div>
           </router-link>
         </div>
diff --git a/frontend/src/pages/AgentsPage.vue b/frontend/src/pages/AgentsPage.vue
index 88838d7d..9d1a9e22 100644
--- a/frontend/src/pages/AgentsPage.vue
+++ b/frontend/src/pages/AgentsPage.vue
@@ -23,6 +23,7 @@ import HostLimitDialog from '@/components/HostLimitDialog.vue'
 import AgentDetailPanel from '@/components/AgentDetailPanel.vue'
 import StatusBadge from '@/components/ui/StatusBadge.vue'
 import UiTooltip from '@/components/ui/UiTooltip.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 import { osNeedsAttention, osSupportHint, osSupportLabel, osSupportSeverity } from '@/utils/osSupport'
 import { docUrl } from '@/utils/docs'
 import { MonitorDot, Server, Boxes, ShieldCheck } from 'lucide-vue-next'
@@ -175,14 +176,9 @@ function runtimeLabel(rt: string): string {
                 :style="{ color: hostQuota.isAtLimit ? 'var(--mnt-status-warn-text)' : 'var(--mnt-text-muted)' }"
               >{{ hostQuota.used }}/{{ hostQuota.limit }}</span>
             </p>
-            <button
-              :disabled="generatingToken"
-              class="min-h-[36px] rounded-lg px-4 text-sm font-medium transition-opacity disabled:opacity-50"
-              :style="{ backgroundColor: 'var(--mnt-accent)', color: 'var(--mnt-text-inverted)', borderRadius: 'var(--mnt-radius-md)' }"
-              @click="handleGenerateToken"
-            >
+            <UiButton variant="primary" :loading="generatingToken" :disabled="generatingToken" @click="handleGenerateToken">
               {{ generatingToken ? 'Generating…' : 'Generate enrollment token' }}
-            </button>
+            </UiButton>
           </div>
 
           <div v-if="tokenError" class="px-4 py-2 text-xs" :style="{ color: 'var(--mnt-status-down-text)' }">{{ tokenError }}</div>
@@ -294,13 +290,7 @@ function runtimeLabel(rt: string): string {
                 <td class="px-4 py-3 font-mono text-xs text-mnt-secondary">{{ tok.token_masked }}</td>
                 <td class="px-4 py-3 text-xs text-mnt-muted">{{ formatDate(tok.expires_at) }}</td>
                 <td class="px-4 py-3 text-right">
-                  <button
-                    class="rounded px-2 py-1 text-xs transition-colors revoke-btn"
-                    :style="{ color: 'var(--mnt-status-down-text)' }"
-                    @click="handleDeleteToken(tok.token_id)"
-                  >
-                    Revoke
-                  </button>
+                  <UiButton variant="ghost" size="sm" @click="handleDeleteToken(tok.token_id)">Revoke</UiButton>
                 </td>
               </tr>
             </tbody>
@@ -379,7 +369,4 @@ function runtimeLabel(rt: string): string {
 .agent-row:hover {
   background-color: var(--mnt-bg-hover);
 }
-.revoke-btn:hover {
-  background-color: var(--mnt-status-down-bg);
-}
 </style>
diff --git a/frontend/src/pages/AlertsPage.vue b/frontend/src/pages/AlertsPage.vue
index eb859f34..79bc28c3 100644
--- a/frontend/src/pages/AlertsPage.vue
+++ b/frontend/src/pages/AlertsPage.vue
@@ -21,6 +21,7 @@ import AlertList from '@/components/AlertList.vue'
 import TriggerManager from '@/components/TriggerManager.vue'
 import SilenceRuleManager from '@/components/SilenceRuleManager.vue'
 import FeatureHint from '@/components/ui/FeatureHint.vue'
+import TabNav, { type TabNavItem } from '@/components/ui/TabNav.vue'
 import { docUrl } from '@/utils/docs'
 
 type Tab = 'history' | 'triggers' | 'silence'
@@ -40,6 +41,12 @@ const activeTab = computed<Tab>({
   set: (tab: Tab) => router.replace({ name: 'alerts', params: { tab } }),
 })
 
+const tabItems = computed<TabNavItem[]>(() => [
+  { value: 'history', label: 'History' },
+  { value: 'triggers', label: 'Triggers', count: triggersStore.triggers.length || undefined },
+  { value: 'silence', label: 'Silence Rules', count: store.activeSilenceCount || undefined, countTone: 'warn' },
+])
+
 onMounted(() => {
   store.fetchAlerts()
   store.fetchActiveAlerts()
@@ -73,53 +80,8 @@ onUnmounted(() => {
     </div>
 
     <!-- Tab navigation -->
-    <div class="mb-4" style="border-bottom: 1px solid var(--mnt-border-default)">
-      <nav class="-mb-px flex gap-6">
-        <button
-          @click="activeTab = 'history'"
-          class="pb-2 text-sm font-medium min-h-[44px]"
-          :style="{
-            borderBottom: activeTab === 'history' ? '2px solid var(--mnt-accent)' : '2px solid transparent',
-            color: activeTab === 'history' ? 'var(--mnt-accent)' : 'var(--mnt-text-muted)',
-          }"
-        >
-          History
-        </button>
-        <button
-          @click="activeTab = 'triggers'"
-          class="pb-2 text-sm font-medium min-h-[44px]"
-          :style="{
-            borderBottom: activeTab === 'triggers' ? '2px solid var(--mnt-accent)' : '2px solid transparent',
-            color: activeTab === 'triggers' ? 'var(--mnt-accent)' : 'var(--mnt-text-muted)',
-          }"
-        >
-          Triggers
-          <span
-            v-if="triggersStore.triggers.length"
-            class="ml-1 rounded-full px-1.5 py-0.5 text-xs"
-            style="background-color: var(--mnt-bg-elevated); color: var(--mnt-text-muted)"
-          >
-            {{ triggersStore.triggers.length }}
-          </span>
-        </button>
-        <button
-          @click="activeTab = 'silence'"
-          class="pb-2 text-sm font-medium min-h-[44px]"
-          :style="{
-            borderBottom: activeTab === 'silence' ? '2px solid var(--mnt-accent)' : '2px solid transparent',
-            color: activeTab === 'silence' ? 'var(--mnt-accent)' : 'var(--mnt-text-muted)',
-          }"
-        >
-          Silence Rules
-          <span
-            v-if="store.activeSilenceCount"
-            class="ml-1 rounded-full px-1.5 py-0.5 text-xs"
-            style="background-color: var(--mnt-status-warn-bg); color: var(--mnt-status-warn)"
-          >
-            {{ store.activeSilenceCount }}
-          </span>
-        </button>
-      </nav>
+    <div class="mb-4">
+      <TabNav v-model="activeTab" :items="tabItems" ariaLabel="Alerts sections" />
     </div>
 
     <!-- Tab content -->
diff --git a/frontend/src/pages/CertificatesPage.vue b/frontend/src/pages/CertificatesPage.vue
index c0e0f005..306ffb1c 100644
--- a/frontend/src/pages/CertificatesPage.vue
+++ b/frontend/src/pages/CertificatesPage.vue
@@ -35,6 +35,12 @@ import { timeAgo } from '@/utils/time'
 import { ShieldCheck } from 'lucide-vue-next'
 import { docUrl } from '@/utils/docs'
 import QuotaRefusal from '@/components/QuotaRefusal.vue'
+import CountBadge from '@/components/ui/CountBadge.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
 
 const store = useCertificatesStore()
 const containers = useContainersStore()
@@ -221,16 +227,11 @@ function handleSelect(id: string) {
         </p>
       </div>
       <div class="flex items-center gap-2">
-        <span
+        <CountBadge
           v-if="!quota.isUnlimited"
-          class="rounded-full px-2.5 py-1 text-xs font-medium"
-          :style="{
-            backgroundColor: quota.isAtLimit ? 'var(--mnt-status-down-bg)' : quota.nearLimit ? 'var(--mnt-status-warn-bg)' : 'var(--mnt-bg-elevated)',
-            color: quota.isAtLimit ? 'var(--mnt-status-down)' : quota.nearLimit ? 'var(--mnt-status-warn)' : 'var(--mnt-text-secondary)',
-          }"
-        >
-          {{ quota.used }}/{{ quota.limit }}
-        </span>
+          :value="`${quota.used}/${quota.limit}`"
+          :tone="quota.isAtLimit ? 'danger' : quota.nearLimit ? 'warn' : 'neutral'"
+        />
         <router-link
           v-if="quota.nearLimit && !quota.isAtLimit"
           :to="{ name: 'editions' }"
@@ -239,24 +240,14 @@ function handleSelect(id: string) {
         >
           Upgrade
         </router-link>
-        <button
-          class="min-h-[44px]"
+        <UiButton
+          variant="primary"
           :disabled="quota.isAtLimit"
           :title="quota.isAtLimit ? `Your edition is limited to ${quota.limit} certificate monitors` : ''"
-          :style="{
-            borderRadius: 'var(--mnt-radius-lg)',
-            backgroundColor: 'var(--mnt-accent)',
-            color: 'var(--mnt-text-inverted)',
-            padding: '0.5rem 1rem',
-            fontSize: '0.875rem',
-            fontWeight: '500',
-            opacity: quota.isAtLimit ? '0.5' : '1',
-            cursor: quota.isAtLimit ? 'not-allowed' : 'pointer',
-          }"
           @click="showCreateForm = !showCreateForm"
         >
           {{ showCreateForm ? 'Cancel' : 'New Monitor' }}
-        </button>
+        </UiButton>
       </div>
     </div>
 
@@ -284,109 +275,60 @@ function handleSelect(id: string) {
       <QuotaRefusal v-if="createError" :error="createError" />
       <form class="flex flex-col gap-3" @submit.prevent="handleCreate">
         <div class="grid gap-3 sm:grid-cols-2">
-          <div>
-            <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Hostname</label>
-            <input
-              v-model="form.hostname"
-              type="text"
-              placeholder="e.g., example.com"
-              :style="{
-                width: '100%',
-                borderRadius: 'var(--mnt-radius-md)',
-                border: '1px solid var(--mnt-border-default)',
-                backgroundColor: 'var(--mnt-bg-elevated)',
-                color: 'var(--mnt-text-primary)',
-                padding: '0.375rem 0.75rem',
-                fontSize: '0.875rem',
-                minHeight: '44px',
-              }"
-              required
-            />
-          </div>
-          <div>
-            <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Port</label>
-            <input
-              v-model.number="form.port"
-              type="number"
-              min="1"
-              max="65535"
-              :style="{
-                width: '100%',
-                borderRadius: 'var(--mnt-radius-md)',
-                border: '1px solid var(--mnt-border-default)',
-                backgroundColor: 'var(--mnt-bg-elevated)',
-                color: 'var(--mnt-text-primary)',
-                padding: '0.375rem 0.75rem',
-                fontSize: '0.875rem',
-                minHeight: '44px',
-              }"
-            />
-          </div>
-          <div class="sm:col-span-2">
-            <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">
-              Server name (SNI) <span :style="{ color: 'var(--mnt-text-muted)' }">— optional</span>
-            </label>
-            <input
-              v-model="form.server_name"
-              type="text"
-              placeholder="e.g., service.example.com"
-              :style="{
-                width: '100%',
-                borderRadius: 'var(--mnt-radius-md)',
-                border: '1px solid var(--mnt-border-default)',
-                backgroundColor: 'var(--mnt-bg-elevated)',
-                color: 'var(--mnt-text-primary)',
-                padding: '0.375rem 0.75rem',
-                fontSize: '0.875rem',
-                minHeight: '44px',
-              }"
-            />
-            <p class="mt-1 text-xs" :style="{ color: 'var(--mnt-text-muted)' }">
-              Sent as SNI during the TLS handshake; the certificate is validated against this name
-              instead of the hostname. Useful to verify which certificate a reverse proxy serves
-              for a given virtual host (failover / keepalived setups).
-            </p>
-          </div>
+          <FormField label="Hostname">
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput
+                :id="id"
+                v-model="form.hostname"
+                placeholder="e.g., example.com"
+                :aria-describedby="describedBy"
+                :invalid="invalid"
+                required
+              />
+            </template>
+          </FormField>
+          <FormField label="Port">
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput
+                :id="id"
+                :model-value="form.port"
+                type="number"
+                min="1"
+                max="65535"
+                :aria-describedby="describedBy"
+                :invalid="invalid"
+                @update:model-value="(v) => (form.port = typeof v === 'number' ? v : 443)"
+              />
+            </template>
+          </FormField>
+          <FormField
+            label="Server name (SNI) — optional"
+            hint="Sent as SNI during the TLS handshake; the certificate is validated against this name instead of the hostname. Useful to verify which certificate a reverse proxy serves for a given virtual host (failover / keepalived setups)."
+            class="sm:col-span-2"
+          >
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput
+                :id="id"
+                v-model="form.server_name"
+                placeholder="e.g., service.example.com"
+                :aria-describedby="describedBy"
+                :invalid="invalid"
+              />
+            </template>
+          </FormField>
         </div>
         <div>
           <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Check Interval</label>
-          <div class="flex flex-wrap gap-2">
-            <button
-              v-for="preset in intervalPresets"
-              :key="preset.value"
-              type="button"
-              class="rounded-full px-3 py-1 text-xs font-medium transition"
-              :style="{
-                border: form.check_interval_seconds === preset.value
-                  ? '1px solid var(--mnt-accent)'
-                  : '1px solid var(--mnt-border-default)',
-                backgroundColor: form.check_interval_seconds === preset.value
-                  ? 'var(--mnt-accent)'
-                  : 'transparent',
-                color: form.check_interval_seconds === preset.value
-                  ? 'var(--mnt-text-inverted)'
-                  : 'var(--mnt-text-secondary)',
-              }"
-              @click="form.check_interval_seconds = preset.value"
-            >
-              {{ preset.label }}
-            </button>
-          </div>
+          <SegmentedToggle
+            :model-value="String(form.check_interval_seconds)"
+            :options="intervalPresets.map((p) => ({ value: String(p.value), label: p.label }))"
+            ariaLabel="Check interval"
+            @update:model-value="(v) => (form.check_interval_seconds = Number(v))"
+          />
         </div>
-        <button
-          type="submit"
-          :style="{
-            alignSelf: 'flex-start',
-            borderRadius: 'var(--mnt-radius-lg)',
-            backgroundColor: 'var(--mnt-accent)',
-            color: 'var(--mnt-text-inverted)',
-            padding: '0.5rem 1rem',
-            fontSize: '0.875rem',
-            fontWeight: '500',
-          }"
-        >
+        <UiButton type="submit" variant="primary" class="self-start">
           Create
-        </button>
+        </UiButton>
       </form>
     </div>
 
@@ -405,28 +347,37 @@ function handleSelect(id: string) {
       <template #filters>
         <label class="flex flex-col gap-1">
           <span class="text-xs font-semibold text-mnt-secondary">Source</span>
-          <select v-model="sourceFilter" class="filter-select focus-ring">
-            <option value="">Any source</option>
-            <option value="auto">Auto-detected</option>
-            <option value="standalone">Standalone</option>
-          </select>
+          <SelectInput
+            v-model="sourceFilter"
+            size="sm"
+            :options="[
+              { value: '', label: 'Any source' },
+              { value: 'auto', label: 'Auto-detected' },
+              { value: 'standalone', label: 'Standalone' },
+            ]"
+          />
         </label>
 
         <label v-if="issuers.length > 0" class="flex flex-col gap-1">
           <span class="text-xs font-semibold text-mnt-secondary">Issuer</span>
-          <select v-model="issuerFilter" class="filter-select focus-ring">
-            <option value="">Any issuer</option>
-            <option v-for="issuer in issuers" :key="issuer" :value="issuer">{{ issuer }}</option>
-          </select>
+          <SelectInput
+            v-model="issuerFilter"
+            size="sm"
+            :options="[{ value: '', label: 'Any issuer' }, ...issuers.map((issuer) => ({ value: issuer, label: issuer }))]"
+          />
         </label>
 
         <label v-if="view !== 'table'" class="flex flex-col gap-1">
           <span class="text-xs font-semibold text-mnt-secondary">Sort by</span>
-          <select v-model="sortBy" class="filter-select focus-ring">
-            <option value="expiry">Expiring first</option>
-            <option value="hostname">Domain (A-Z)</option>
-            <option value="checked">Last check</option>
-          </select>
+          <SelectInput
+            v-model="sortBy"
+            size="sm"
+            :options="[
+              { value: 'expiry', label: 'Expiring first' },
+              { value: 'hostname', label: 'Domain (A-Z)' },
+              { value: 'checked', label: 'Last check' },
+            ]"
+          />
         </label>
       </template>
     </ListToolbar>
@@ -453,12 +404,9 @@ function handleSelect(id: string) {
       description="Try a different search term, or clear the filters to see every monitored certificate."
     >
       <template #action>
-        <button
-          class="focus-ring min-h-[44px] rounded-lg border border-mnt-default px-4 text-sm font-medium text-mnt-secondary hover:text-mnt-primary"
-          @click="resetFilters"
-        >
+        <UiButton variant="secondary" @click="resetFilters">
           Clear filters
-        </button>
+        </UiButton>
       </template>
     </EmptyState>
 
@@ -526,16 +474,3 @@ function handleSelect(id: string) {
   </div>
   </div>
 </template>
-
-<style scoped>
-.filter-select {
-  min-height: 38px;
-  width: 100%;
-  border: 1px solid var(--mnt-border-default);
-  border-radius: var(--mnt-radius-md);
-  background: var(--mnt-bg-elevated);
-  color: var(--mnt-text-primary);
-  padding: 0 0.5rem;
-  font-size: 0.8125rem;
-}
-</style>
diff --git a/frontend/src/pages/DesignSystemPage.vue b/frontend/src/pages/DesignSystemPage.vue
index b4169c07..325f2aa6 100644
--- a/frontend/src/pages/DesignSystemPage.vue
+++ b/frontend/src/pages/DesignSystemPage.vue
@@ -195,14 +195,9 @@ const demoModalOpen = ref(false)
       <span class="rounded bg-mnt-elevated px-2 py-0.5 font-mono text-[11px] text-mnt-muted">/_ds</span>
       <div class="ml-auto flex items-center gap-2">
         <DensityToggle />
-        <button
-          type="button"
-          class="focus-ring inline-flex items-center gap-1.5 rounded-lg border border-mnt-default px-2.5 py-1.5 text-xs font-semibold text-mnt-secondary hover:text-mnt-primary"
-          @click="flipTheme"
-        >
-          <component :is="resolvedTheme === 'dark' ? Sun : Moon" :size="14" aria-hidden="true" />
+        <UiButton variant="secondary" size="sm" :icon="resolvedTheme === 'dark' ? Sun : Moon" @click="flipTheme">
           {{ resolvedTheme === 'dark' ? 'Light' : 'Dark' }}
-        </button>
+        </UiButton>
       </div>
     </header>
 
diff --git a/frontend/src/pages/EndpointsPage.vue b/frontend/src/pages/EndpointsPage.vue
index 0efe6ec7..dc0e431e 100644
--- a/frontend/src/pages/EndpointsPage.vue
+++ b/frontend/src/pages/EndpointsPage.vue
@@ -35,6 +35,12 @@ import { endpointTone } from '@/utils/endpointTone'
 import { timeAgo } from '@/utils/time'
 import { docUrl } from '@/utils/docs'
 import QuotaRefusal from '@/components/QuotaRefusal.vue'
+import CountBadge from '@/components/ui/CountBadge.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
 
 const store = useEndpointsStore()
 const containers = useContainersStore()
@@ -60,6 +66,14 @@ function onRetiredChange() {
   store.fetchEndpoints()
 }
 
+const retiredFilter = computed<string>({
+  get: () => (store.showRetired ? 'true' : 'false'),
+  set: (v) => {
+    store.showRetired = v === 'true'
+    onRetiredChange()
+  },
+})
+
 const columns: Column[] = [
   { key: 'target', label: 'Target', sortable: true },
   { key: 'type', label: 'Type', width: '68px', priority: 'sm' },
@@ -168,16 +182,11 @@ onUnmounted(() => {
         </p>
       </div>
       <div class="flex items-center gap-2">
-        <span
+        <CountBadge
           v-if="!quota.isUnlimited"
-          class="rounded-full px-2.5 py-1 text-xs font-medium"
-          :style="{
-            backgroundColor: quota.isAtLimit ? 'var(--mnt-status-down-bg)' : quota.nearLimit ? 'var(--mnt-status-warn-bg)' : 'var(--mnt-bg-elevated)',
-            color: quota.isAtLimit ? 'var(--mnt-status-down)' : quota.nearLimit ? 'var(--mnt-status-warn)' : 'var(--mnt-text-secondary)',
-          }"
-        >
-          {{ quota.used }}/{{ quota.limit }}
-        </span>
+          :value="`${quota.used}/${quota.limit}`"
+          :tone="quota.isAtLimit ? 'danger' : quota.nearLimit ? 'warn' : 'neutral'"
+        />
         <router-link
           v-if="quota.nearLimit && !quota.isAtLimit"
           :to="{ name: 'editions' }"
@@ -186,24 +195,14 @@ onUnmounted(() => {
         >
           Upgrade
         </router-link>
-        <button
-          class="min-h-[44px]"
+        <UiButton
+          variant="primary"
           :disabled="quota.isAtLimit"
           :title="quota.isAtLimit ? `Your edition is limited to ${quota.limit} endpoints` : ''"
-          :style="{
-            borderRadius: 'var(--mnt-radius-lg)',
-            backgroundColor: 'var(--mnt-accent)',
-            color: 'var(--mnt-text-inverted)',
-            padding: '0.5rem 1rem',
-            fontSize: '0.875rem',
-            fontWeight: '500',
-            opacity: quota.isAtLimit ? '0.5' : '1',
-            cursor: quota.isAtLimit ? 'not-allowed' : 'pointer',
-          }"
           @click="showCreateForm = !showCreateForm; if (!showCreateForm) resetForm()"
         >
           {{ showCreateForm ? 'Cancel' : 'New Endpoint' }}
-        </button>
+        </UiButton>
       </div>
     </div>
 
@@ -235,116 +234,53 @@ onUnmounted(() => {
       <QuotaRefusal v-if="createError" :error="createError" />
       <form class="flex flex-col gap-3" @submit.prevent="handleCreate">
         <div class="grid gap-3 sm:grid-cols-2">
-          <div>
-            <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Name</label>
-            <input
-              v-model="form.name"
-              type="text"
-              placeholder="e.g., Production API"
-              :style="{
-                width: '100%',
-                borderRadius: 'var(--mnt-radius-md)',
-                border: '1px solid var(--mnt-border-default)',
-                backgroundColor: 'var(--mnt-bg-elevated)',
-                color: 'var(--mnt-text-primary)',
-                padding: '0.375rem 0.75rem',
-                fontSize: '0.875rem',
-                minHeight: '44px',
-              }"
-              required
-            />
-          </div>
+          <FormField label="Name">
+            <template #default="{ id, describedBy, invalid }">
+              <TextInput
+                :id="id"
+                v-model="form.name"
+                placeholder="e.g., Production API"
+                :aria-describedby="describedBy"
+                :invalid="invalid"
+                required
+              />
+            </template>
+          </FormField>
           <div>
             <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Type</label>
-            <div class="flex gap-2">
-              <button
-                v-for="t in (['http', 'tcp'] as const)"
-                :key="t"
-                type="button"
-                class="flex-1 rounded-lg px-3 py-2 text-sm font-medium transition min-h-[44px]"
-                :style="{
-                  border: form.endpoint_type === t
-                    ? '1px solid var(--mnt-accent)'
-                    : '1px solid var(--mnt-border-default)',
-                  backgroundColor: form.endpoint_type === t
-                    ? 'var(--mnt-accent)'
-                    : 'var(--mnt-bg-elevated)',
-                  color: form.endpoint_type === t
-                    ? 'var(--mnt-text-inverted)'
-                    : 'var(--mnt-text-secondary)',
-                  textTransform: 'uppercase',
-                }"
-                @click="form.endpoint_type = t"
-              >
-                {{ t }}
-              </button>
-            </div>
+            <SegmentedToggle
+              :model-value="form.endpoint_type"
+              :options="[{ value: 'http', label: 'HTTP' }, { value: 'tcp', label: 'TCP' }]"
+              ariaLabel="Endpoint type"
+              @update:model-value="(v) => (form.endpoint_type = v as 'http' | 'tcp')"
+            />
           </div>
         </div>
-        <div>
-          <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">
-            {{ form.endpoint_type === 'http' ? 'URL' : 'Host:Port' }}
-          </label>
-          <input
-            v-model="form.target"
-            type="text"
-            :placeholder="form.endpoint_type === 'http' ? 'https://example.com/health' : 'db.example.com:5432'"
-            :style="{
-              width: '100%',
-              borderRadius: 'var(--mnt-radius-md)',
-              border: '1px solid var(--mnt-border-default)',
-              backgroundColor: 'var(--mnt-bg-elevated)',
-              color: 'var(--mnt-text-primary)',
-              padding: '0.375rem 0.75rem',
-              fontSize: '0.875rem',
-              fontFamily: 'monospace',
-              minHeight: '44px',
-            }"
-            required
-          />
-        </div>
+        <FormField :label="form.endpoint_type === 'http' ? 'URL' : 'Host:Port'">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="form.target"
+              mono
+              :placeholder="form.endpoint_type === 'http' ? 'https://example.com/health' : 'db.example.com:5432'"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+              required
+            />
+          </template>
+        </FormField>
         <div>
           <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Check Interval</label>
-          <div class="flex flex-wrap gap-2">
-            <button
-              v-for="preset in intervalPresets"
-              :key="preset.value"
-              type="button"
-              class="rounded-full px-3 py-1 text-xs font-medium transition"
-              :style="{
-                border: form.interval === preset.value
-                  ? '1px solid var(--mnt-accent)'
-                  : '1px solid var(--mnt-border-default)',
-                backgroundColor: form.interval === preset.value
-                  ? 'var(--mnt-accent)'
-                  : 'transparent',
-                color: form.interval === preset.value
-                  ? 'var(--mnt-text-inverted)'
-                  : 'var(--mnt-text-secondary)',
-              }"
-              @click="form.interval = preset.value"
-            >
-              {{ preset.label }}
-            </button>
-          </div>
+          <SegmentedToggle
+            v-model="form.interval"
+            :options="intervalPresets"
+            ariaLabel="Check interval"
+          />
         </div>
 
-        <button
-          type="submit"
-          :disabled="creating"
-          :style="{
-            alignSelf: 'flex-start',
-            borderRadius: 'var(--mnt-radius-lg)',
-            backgroundColor: 'var(--mnt-accent)',
-            color: 'var(--mnt-text-inverted)',
-            padding: '0.5rem 1rem',
-            fontSize: '0.875rem',
-            fontWeight: '500',
-            opacity: creating ? '0.6' : '1',
-          }"
-        >
+        <UiButton type="submit" variant="primary" class="self-start" :loading="creating">
           {{ creating ? 'Creating...' : 'Create' }}
-        </button>
+        </UiButton>
       </form>
     </div>
 
@@ -383,39 +319,39 @@ onUnmounted(() => {
       <template #filters>
         <label class="flex flex-col gap-1">
           <span class="text-xs font-semibold text-mnt-muted">Type</span>
-          <select
+          <SelectInput
             v-model="store.typeFilter"
-            class="focus-ring min-h-[38px] rounded-lg border border-mnt-default bg-mnt-elevated px-2 text-sm text-mnt-secondary"
-          >
-            <option value="">All types</option>
-            <option value="http">HTTP</option>
-            <option value="tcp">TCP</option>
-          </select>
+            size="sm"
+            :options="[
+              { value: '', label: 'All types' },
+              { value: 'http', label: 'HTTP' },
+              { value: 'tcp', label: 'TCP' },
+            ]"
+          />
         </label>
 
         <label class="flex flex-col gap-1">
           <span class="text-xs font-semibold text-mnt-muted">Container</span>
-          <select
+          <SelectInput
             v-model="store.containerFilter"
-            class="focus-ring min-h-[38px] rounded-lg border border-mnt-default bg-mnt-elevated px-2 text-sm text-mnt-secondary"
-          >
-            <option value="">All containers</option>
-            <option v-for="name in [...store.endpointsByContainer.keys()]" :key="name" :value="name">
-              {{ name }}
-            </option>
-          </select>
+            size="sm"
+            :options="[
+              { value: '', label: 'All containers' },
+              ...[...store.endpointsByContainer.keys()].map((name) => ({ value: name, label: name })),
+            ]"
+          />
         </label>
 
         <label class="flex flex-col gap-1">
           <span class="text-xs font-semibold text-mnt-muted">Retired</span>
-          <select
-            v-model="store.showRetired"
-            class="focus-ring min-h-[38px] rounded-lg border border-mnt-default bg-mnt-elevated px-2 text-sm text-mnt-secondary"
-            @change="onRetiredChange"
-          >
-            <option :value="false">Live only</option>
-            <option :value="true">Include retired</option>
-          </select>
+          <SelectInput
+            v-model="retiredFilter"
+            size="sm"
+            :options="[
+              { value: 'false', label: 'Live only' },
+              { value: 'true', label: 'Include retired' },
+            ]"
+          />
         </label>
       </template>
     </ListToolbar>
@@ -490,13 +426,9 @@ onUnmounted(() => {
       description="Try a different search term, or clear the filters to see every endpoint again."
     >
       <template #action>
-        <button
-          type="button"
-          class="focus-ring min-h-[44px] rounded-lg border border-mnt-default px-4 text-sm font-medium text-mnt-secondary hover:text-mnt-primary"
-          @click="store.resetFilters()"
-        >
+        <UiButton variant="secondary" @click="store.resetFilters()">
           Clear filters
-        </button>
+        </UiButton>
       </template>
     </EmptyState>
 
diff --git a/frontend/src/pages/EscalationPage.vue b/frontend/src/pages/EscalationPage.vue
index 156a4b26..fc351e7e 100644
--- a/frontend/src/pages/EscalationPage.vue
+++ b/frontend/src/pages/EscalationPage.vue
@@ -20,6 +20,7 @@ import PolicyEditor from '@/components/escalation/PolicyEditor.vue'
 import { useEscalationStore } from '@/stores/escalation'
 import type { EscalationPolicy } from '@/types/escalation'
 import UnlockCta from '@/components/UnlockCta.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 import { Plus, BellRing, CheckCircle2, ShieldAlert } from 'lucide-vue-next'
 
 const store = useEscalationStore()
@@ -94,14 +95,9 @@ onMounted(() => {
                 {{ store.policies.length }} {{ store.policies.length === 1 ? 'policy' : 'policies' }}
               </template>
             </p>
-            <button
-              v-if="!showEditor"
-              class="inline-flex items-center gap-2 px-4 py-2 bg-mnt-green-600 hover:bg-mnt-green-500 text-mnt-inverted rounded-lg text-xs font-bold transition-all shadow-lg shadow-mnt-green-500/20"
-              @click="openCreate"
-            >
-              <Plus :size="13" />
+            <UiButton v-if="!showEditor" variant="primary" size="sm" :icon="Plus" @click="openCreate">
               New policy
-            </button>
+            </UiButton>
           </div>
 
           <!-- Editor -->
diff --git a/frontend/src/pages/HeartbeatsPage.vue b/frontend/src/pages/HeartbeatsPage.vue
index 4839d100..1c077152 100644
--- a/frontend/src/pages/HeartbeatsPage.vue
+++ b/frontend/src/pages/HeartbeatsPage.vue
@@ -34,6 +34,13 @@ import { timeAgo } from '@/utils/time'
 import { Heart } from 'lucide-vue-next'
 import { docUrl } from '@/utils/docs'
 import QuotaRefusal from '@/components/QuotaRefusal.vue'
+import CountBadge from '@/components/ui/CountBadge.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import FormField from '@/components/ui/FormField.vue'
+import TextInput from '@/components/ui/TextInput.vue'
+import SelectInput from '@/components/ui/SelectInput.vue'
+import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
+import CheckboxInput from '@/components/ui/CheckboxInput.vue'
 
 const { getQuota, reload } = useEdition()
 
@@ -185,16 +192,11 @@ async function handleCreate() {
         </p>
       </div>
       <div class="flex items-center gap-2">
-        <span
+        <CountBadge
           v-if="!quota.isUnlimited"
-          class="rounded-full px-2.5 py-1 text-xs font-medium"
-          :style="{
-            backgroundColor: quota.isAtLimit ? 'var(--mnt-status-down-bg)' : quota.nearLimit ? 'var(--mnt-status-warn-bg)' : 'var(--mnt-bg-elevated)',
-            color: quota.isAtLimit ? 'var(--mnt-status-down)' : quota.nearLimit ? 'var(--mnt-status-warn)' : 'var(--mnt-text-secondary)',
-          }"
-        >
-          {{ quota.used }}/{{ quota.limit }}
-        </span>
+          :value="`${quota.used}/${quota.limit}`"
+          :tone="quota.isAtLimit ? 'danger' : quota.nearLimit ? 'warn' : 'neutral'"
+        />
         <router-link
           v-if="quota.nearLimit && !quota.isAtLimit"
           :to="{ name: 'editions' }"
@@ -203,24 +205,14 @@ async function handleCreate() {
         >
           Upgrade
         </router-link>
-        <button
-          class="min-h-[44px]"
+        <UiButton
+          variant="primary"
           :disabled="quota.isAtLimit"
           :title="quota.isAtLimit ? `Your edition is limited to ${quota.limit} heartbeats` : ''"
-          :style="{
-            borderRadius: 'var(--mnt-radius-lg)',
-            backgroundColor: 'var(--mnt-accent)',
-            color: 'var(--mnt-text-inverted)',
-            padding: '0.5rem 1rem',
-            fontSize: '0.875rem',
-            fontWeight: '500',
-            opacity: quota.isAtLimit ? '0.5' : '1',
-            cursor: quota.isAtLimit ? 'not-allowed' : 'pointer',
-          }"
           @click="showCreateForm = !showCreateForm"
         >
           {{ showCreateForm ? 'Cancel' : 'New Heartbeat' }}
-        </button>
+        </UiButton>
       </div>
     </div>
 
@@ -251,83 +243,44 @@ async function handleCreate() {
       <h3 class="mb-3 text-sm font-semibold" :style="{ color: 'var(--mnt-text-primary)' }">Create Heartbeat Monitor</h3>
       <QuotaRefusal v-if="createError" :error="createError" />
       <form class="flex flex-col gap-3" @submit.prevent="handleCreate">
-        <div>
-          <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Name</label>
-          <input
-            v-model="form.name"
-            type="text"
-            placeholder="e.g., Nightly Backup"
-            :style="{
-              width: '100%',
-              borderRadius: 'var(--mnt-radius-md)',
-              border: '1px solid var(--mnt-border-default)',
-              backgroundColor: 'var(--mnt-bg-elevated)',
-              color: 'var(--mnt-text-primary)',
-              padding: '0.375rem 0.75rem',
-              fontSize: '0.875rem',
-              minHeight: '44px',
-            }"
-            required
-          />
-        </div>
+        <FormField label="Name">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              v-model="form.name"
+              placeholder="e.g., Nightly Backup"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+              required
+            />
+          </template>
+        </FormField>
         <div>
           <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Expected Interval</label>
-          <div class="flex flex-wrap gap-2">
-            <button
-              v-for="preset in intervalPresets"
-              :key="preset.value"
-              type="button"
-              class="rounded-full px-3 py-1 text-xs font-medium transition"
-              :style="{
-                border: form.interval_seconds === preset.value
-                  ? '1px solid var(--mnt-accent)'
-                  : '1px solid var(--mnt-border-default)',
-                backgroundColor: form.interval_seconds === preset.value
-                  ? 'var(--mnt-accent)'
-                  : 'transparent',
-                color: form.interval_seconds === preset.value
-                  ? 'var(--mnt-text-inverted)'
-                  : 'var(--mnt-text-secondary)',
-              }"
-              @click="form.interval_seconds = preset.value"
-            >
-              {{ preset.label }}
-            </button>
-          </div>
-        </div>
-        <div>
-          <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Grace Period (seconds)</label>
-          <input
-            v-model.number="form.grace_seconds"
-            type="number"
-            min="0"
-            :max="form.interval_seconds"
-            :style="{
-              width: '100%',
-              borderRadius: 'var(--mnt-radius-md)',
-              border: '1px solid var(--mnt-border-default)',
-              backgroundColor: 'var(--mnt-bg-elevated)',
-              color: 'var(--mnt-text-primary)',
-              padding: '0.375rem 0.75rem',
-              fontSize: '0.875rem',
-              minHeight: '44px',
-            }"
+          <SegmentedToggle
+            :model-value="String(form.interval_seconds)"
+            :options="intervalPresets.map((p) => ({ value: String(p.value), label: p.label }))"
+            ariaLabel="Expected interval"
+            @update:model-value="(v) => (form.interval_seconds = Number(v))"
           />
         </div>
-        <button
-          type="submit"
-          :style="{
-            alignSelf: 'flex-start',
-            borderRadius: 'var(--mnt-radius-lg)',
-            backgroundColor: 'var(--mnt-accent)',
-            color: 'var(--mnt-text-inverted)',
-            padding: '0.5rem 1rem',
-            fontSize: '0.875rem',
-            fontWeight: '500',
-          }"
-        >
+        <FormField label="Grace Period (seconds)">
+          <template #default="{ id, describedBy, invalid }">
+            <TextInput
+              :id="id"
+              :model-value="form.grace_seconds"
+              type="number"
+              min="0"
+              :max="form.interval_seconds"
+              :aria-describedby="describedBy"
+              :invalid="invalid"
+              @update:model-value="(v) => (form.grace_seconds = typeof v === 'number' ? v : 0)"
+            />
+          </template>
+        </FormField>
+        <UiButton type="submit" variant="primary" class="self-start">
           Create
-        </button>
+        </UiButton>
       </form>
     </div>
 
@@ -346,18 +299,21 @@ async function handleCreate() {
       <template #filters>
         <label class="flex flex-col gap-1">
           <span class="text-xs font-semibold text-mnt-secondary">Expected interval</span>
-          <select v-model="intervalFilter" class="filter-select focus-ring">
-            <option value="">Any interval</option>
-            <option value="hour">Under an hour</option>
-            <option value="day">Under a day</option>
-            <option value="beyond">A day or more</option>
-          </select>
+          <SelectInput
+            v-model="intervalFilter"
+            size="sm"
+            :options="[
+              { value: '', label: 'Any interval' },
+              { value: 'hour', label: 'Under an hour' },
+              { value: 'day', label: 'Under a day' },
+              { value: 'beyond', label: 'A day or more' },
+            ]"
+          />
         </label>
 
-        <label class="flex min-h-[44px] items-center gap-2">
-          <input v-model="alertingOnly" type="checkbox" class="focus-ring h-4 w-4" />
-          <span class="text-xs font-semibold text-mnt-secondary">Alerting only</span>
-        </label>
+        <div class="flex min-h-[44px] items-center">
+          <CheckboxInput v-model="alertingOnly" label="Alerting only" />
+        </div>
       </template>
     </ListToolbar>
 
@@ -375,13 +331,9 @@ async function handleCreate() {
       description="Heartbeat monitors track cron jobs and scheduled tasks. Create one and integrate the ping URL into your scripts."
     >
       <template #action>
-        <button
-          class="min-h-[44px] rounded-lg px-4 text-sm font-medium"
-          style="background-color: var(--mnt-accent); color: var(--mnt-text-inverted); border-radius: var(--mnt-radius-lg)"
-          @click="showCreateForm = true"
-        >
+        <UiButton variant="primary" @click="showCreateForm = true">
           Create your first heartbeat
-        </button>
+        </UiButton>
       </template>
     </EmptyState>
 
@@ -393,12 +345,9 @@ async function handleCreate() {
       description="Try a different search term, or clear the filters to see every heartbeat monitor."
     >
       <template #action>
-        <button
-          class="focus-ring min-h-[44px] rounded-lg border border-mnt-default px-4 text-sm font-medium text-mnt-secondary hover:text-mnt-primary"
-          @click="resetFilters"
-        >
+        <UiButton variant="secondary" @click="resetFilters">
           Clear filters
-        </button>
+        </UiButton>
       </template>
     </EmptyState>
 
@@ -460,16 +409,3 @@ async function handleCreate() {
   </div>
   </div>
 </template>
-
-<style scoped>
-.filter-select {
-  min-height: 38px;
-  width: 100%;
-  border: 1px solid var(--mnt-border-default);
-  border-radius: var(--mnt-radius-md);
-  background: var(--mnt-bg-elevated);
-  color: var(--mnt-text-primary);
-  padding: 0 0.5rem;
-  font-size: 0.8125rem;
-}
-</style>
diff --git a/frontend/src/pages/StatusAdminPage.vue b/frontend/src/pages/StatusAdminPage.vue
index fd44b46e..a8e7cb5c 100644
--- a/frontend/src/pages/StatusAdminPage.vue
+++ b/frontend/src/pages/StatusAdminPage.vue
@@ -29,6 +29,8 @@ import FooterSection from '@/components/personalization/FooterSection.vue'
 import FaqSection from '@/components/personalization/FaqSection.vue'
 import LocalizationSection from '@/components/personalization/LocalizationSection.vue'
 import type { PalettePayload } from '@/services/personalizationApi'
+import TabNav, { type TabNavItem } from '@/components/ui/TabNav.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const { hasFeature, editionPermits, statusURL } = useEdition()
 
@@ -137,6 +139,15 @@ onMounted(() => {
 onUnmounted(() => {
   store.disconnectSSE()
 })
+
+const tabItems = computed<TabNavItem[]>(() => [
+  { value: 'components', label: 'Components', count: store.components?.length || undefined },
+  { value: 'incidents', label: 'Incidents', count: store.incidentsTotal || undefined },
+  { value: 'maintenance', label: 'Maintenance', count: store.maintenance?.length || undefined },
+  { value: 'subscribers', label: 'Subscribers', count: store.subscriberTotal || undefined },
+  { value: 'smtp', label: 'SMTP' },
+  { value: 'personalization', label: 'Personalization' },
+])
 </script>
 
 <template>
@@ -160,43 +171,13 @@ onUnmounted(() => {
     </div>
 
     <!-- Tab navigation -->
-    <div class="mb-4 border-b" style="border-color: var(--mnt-border-default)">
-      <nav class="-mb-px flex gap-6 overflow-x-auto">
-        <button
-          v-for="tab in [
-            { key: 'components', label: 'Components', count: store.components?.length ?? 0 },
-            { key: 'incidents', label: 'Incidents', count: store.incidentsTotal },
-            { key: 'maintenance', label: 'Maintenance', count: store.maintenance?.length ?? 0 },
-            { key: 'subscribers', label: 'Subscribers', count: store.subscriberTotal },
-            { key: 'smtp', label: 'SMTP', count: 0 },
-            { key: 'personalization', label: 'Personalization', count: 0 },
-          ]"
-          :key="tab.key"
-          @click="activeTab = tab.key as Tab"
-          class="shrink-0 border-b-2 pb-2 text-sm font-medium transition-colors"
-          :style="{
-            borderColor: activeTab === tab.key ? 'var(--mnt-accent)' : 'transparent',
-            color: activeTab === tab.key ? 'var(--mnt-accent)' : 'var(--mnt-text-muted)',
-          }"
-        >
-          {{ tab.label }}
-          <span
-            v-if="tab.key === 'subscribers' && store.subscriberTotal"
-            class="ml-1 rounded-full px-1.5 py-0.5 text-xs"
-            style="background: var(--mnt-bg-elevated); color: var(--mnt-text-secondary)"
-          >
-            {{ store.subscriberConfirmed }}/{{ store.subscriberTotal }}
-          </span>
-          <span
-            v-else-if="tab.count"
-            class="ml-1 rounded-full px-1.5 py-0.5 text-xs"
-            style="background: var(--mnt-bg-elevated); color: var(--mnt-text-secondary)"
-          >
-            {{ tab.count }}
-          </span>
-        </button>
-      </nav>
-    </div>
+    <TabNav
+      class="mb-4"
+      :model-value="activeTab"
+      :items="tabItems"
+      ariaLabel="Status page sections"
+      @update:model-value="(v) => (activeTab = v as Tab)"
+    />
 
     <!-- Tab content -->
     <StatusComponentManager v-if="activeTab === 'components'" />
@@ -267,14 +248,9 @@ onUnmounted(() => {
         <div class="flex items-center justify-end gap-3">
           <span v-if="persoSaveSuccess" class="text-xs" style="color: var(--mnt-status-ok)">Saved!</span>
           <span v-if="persoSaveError" class="text-xs" style="color: var(--mnt-status-error)">{{ persoSaveError }}</span>
-          <button
-            class="px-4 py-1.5 text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
-            style="background: var(--mnt-accent); color: #fff"
-            :disabled="persoSaving"
-            @click="savePersonalization"
-          >
+          <UiButton variant="primary" :loading="persoSaving" @click="savePersonalization">
             {{ persoSaving ? 'Saving…' : 'Save changes' }}
-          </button>
+          </UiButton>
         </div>
 
         <!-- Row 1: Branding (left) + Colors (right) -->
diff --git a/frontend/src/pages/TasksPage.vue b/frontend/src/pages/TasksPage.vue
index 240099e2..3d74cff2 100644
--- a/frontend/src/pages/TasksPage.vue
+++ b/frontend/src/pages/TasksPage.vue
@@ -24,6 +24,7 @@ import { useTopologyRefetch } from '@/composables/useTopologyRefetch'
 import { timeAgo } from '@/utils/time'
 import { ClipboardList } from 'lucide-vue-next'
 import HostBadge from '@/components/HostBadge.vue'
+import SelectInput, { type SelectOption } from '@/components/ui/SelectInput.vue'
 
 type TaskWithService = SwarmTaskResponse & { service_name: string }
 
@@ -69,6 +70,16 @@ const filteredTasks = computed(() => {
   })
 })
 
+const serviceOptions = computed<SelectOption[]>(() => [
+  { value: '', label: 'All services' },
+  ...services.value.map((svc) => ({ value: svc.name, label: svc.name })),
+])
+
+const stateOptions: SelectOption[] = [
+  { value: '', label: 'All states' },
+  ...TASK_STATES.map((state) => ({ value: state, label: state })),
+]
+
 onMounted(loadTasks)
 
 // Refresh when the host scope changes, or a matching remote agent reports.
@@ -134,30 +145,14 @@ function shortId(id: string): string {
           <label class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest"
             >Service</label
           >
-          <select
-            v-model="filterService"
-            class="bg-mnt-surface border border-mnt-default text-xs text-mnt-secondary rounded-lg px-3 py-1.5 focus:outline-none focus:border-mnt-default cursor-pointer"
-          >
-            <option value="">All services</option>
-            <option v-for="svc in services" :key="svc.service_id" :value="svc.name">
-              {{ svc.name }}
-            </option>
-          </select>
+          <SelectInput v-model="filterService" size="sm" :options="serviceOptions" class="w-auto" />
         </div>
 
         <div class="flex items-center gap-2">
           <label class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest"
             >State</label
           >
-          <select
-            v-model="filterState"
-            class="bg-mnt-surface border border-mnt-default text-xs text-mnt-secondary rounded-lg px-3 py-1.5 focus:outline-none focus:border-mnt-default cursor-pointer"
-          >
-            <option value="">All states</option>
-            <option v-for="state in TASK_STATES" :key="state" :value="state">
-              {{ state }}
-            </option>
-          </select>
+          <SelectInput v-model="filterState" size="sm" :options="stateOptions" class="w-auto" />
         </div>
 
         <span class="ml-auto text-xs text-mnt-muted">
diff --git a/frontend/src/pages/UpdatesPage.vue b/frontend/src/pages/UpdatesPage.vue
index 78db850a..1cf481ed 100644
--- a/frontend/src/pages/UpdatesPage.vue
+++ b/frontend/src/pages/UpdatesPage.vue
@@ -37,6 +37,7 @@ import {
   osTotal,
 } from '@/utils/osSupport'
 import { docUrl } from '@/utils/docs'
+import UiButton from '@/components/ui/UiButton.vue'
 import {
   RefreshCw,
   AlertTriangle,
@@ -167,14 +168,16 @@ onUnmounted(() => {
           <span v-if="updates.summary" class="text-[10px] text-mnt-muted font-bold">
             Last scan: {{ formatTime(updates.summary.last_scan) }}
           </span>
-          <button
+          <UiButton
+            variant="primary"
+            size="sm"
+            class="bg-mnt-green-600 shadow-lg shadow-mnt-green-500/20 hover:bg-mnt-green-500"
+            :icon="RefreshCw"
+            :loading="updates.scanning"
             @click="updates.startScan()"
-            :disabled="updates.scanning"
-            class="px-4 py-2 bg-mnt-green-600 hover:bg-mnt-green-500 disabled:bg-mnt-elevated disabled:text-mnt-muted text-mnt-inverted rounded-lg text-xs font-bold transition-all flex items-center gap-2 shadow-lg shadow-mnt-green-500/20"
           >
-            <RefreshCw :size="13" :class="{ 'animate-spin': updates.scanning }" />
             {{ updates.scanning ? 'Scanning...' : 'Check now' }}
-          </button>
+          </UiButton>
         </div>
       </div>
 
diff --git a/frontend/src/pages/WebhooksPage.vue b/frontend/src/pages/WebhooksPage.vue
index 5bd4e4e8..1c8f81b0 100644
--- a/frontend/src/pages/WebhooksPage.vue
+++ b/frontend/src/pages/WebhooksPage.vue
@@ -16,13 +16,7 @@
   <div class="max-w-7xl mx-auto">
     <div class="flex items-center justify-between mb-6">
       <h1 class="text-2xl font-black text-mnt-primary">Webhooks</h1>
-      <button
-        @click="showCreate = true"
-        class="min-h-[44px] rounded px-4 text-sm font-medium"
-        style="background-color: var(--mnt-accent); color: var(--mnt-text-inverted); border-radius: var(--mnt-radius-md)"
-      >
-        + Add Webhook
-      </button>
+      <UiButton variant="primary" :icon="Plus" @click="showCreate = true">Add Webhook</UiButton>
     </div>
 
     <FeatureHint
@@ -98,21 +92,18 @@
               <span v-else style="color: var(--mnt-text-muted)">Never</span>
             </td>
             <td class="px-4 py-3 text-right space-x-2">
-              <button
-                @click="handleTest(wh)"
+              <UiButton
+                variant="ghost"
+                size="sm"
+                :loading="testing === wh.id"
                 :disabled="testing === wh.id"
-                class="text-xs min-h-[36px] px-2 disabled:opacity-50"
-                style="color: var(--mnt-accent)"
+                @click="handleTest(wh)"
               >
                 {{ testing === wh.id ? 'Testing...' : 'Test' }}
-              </button>
-              <button
-                @click="handleDelete(wh)"
-                class="text-xs min-h-[36px] px-2"
-                style="color: var(--mnt-status-down)"
-              >
+              </UiButton>
+              <UiButton variant="ghost" size="sm" class="text-mnt-status-down" @click="handleDelete(wh)">
                 Delete
-              </button>
+              </UiButton>
             </td>
           </tr>
           <tr v-if="!webhooks.length">
@@ -143,10 +134,12 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { Plus } from 'lucide-vue-next'
 import { listWebhooks, deleteWebhook, testWebhook, type WebhookSubscription, type TestWebhookResponse } from '@/services/webhookApi'
 import { useConfirm } from '@/composables/useConfirm'
 import WebhookForm from '@/components/WebhookForm.vue'
 import FeatureHint from '@/components/ui/FeatureHint.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 import { docUrl } from '@/utils/docs'
 
 const confirm = useConfirm()

From fcaaf8309a17eacf8809a2691de9666e5862601f Mon Sep 17 00:00:00 2001
From: Benjamin <benjamin@kolapsis.com>
Date: Mon, 28 Sep 2026 20:44:41 +0200
Subject: [PATCH 4/5] feat(ui): cover the remaining controls with shared
 components

Add PopoverMenu, DisclosureButton, ChipToggle, OptionCards, RangeInput,
FileInput and ColorInput, give SegmentedToggle locked and disabled options,
TextInput a bare variant, UiButton a danger-ghost variant, and make the
value-bound components generic. No raw input, select, textarea or button
remains outside components/ui, and ESLint now rejects them.
---
 frontend/eslint.config.ts                     |   2 +-
 frontend/src/components/AgentDetailPanel.vue  |   4 +-
 frontend/src/components/AppHeader.vue         | 143 +++++++-------
 frontend/src/components/CertificateCard.vue   |   2 +-
 frontend/src/components/CertificateDetail.vue |   5 +-
 frontend/src/components/ChannelManager.vue    |   2 +-
 frontend/src/components/ChannelWizard.vue     | 102 +++++-----
 frontend/src/components/ContainerList.vue     |  69 ++++---
 frontend/src/components/EndpointCard.vue      |   2 +-
 frontend/src/components/EndpointDetail.vue    |   2 +-
 frontend/src/components/HeartbeatCard.vue     |   2 +-
 .../src/components/HostFilterDropdown.vue     | 137 +++++++-------
 frontend/src/components/K8sWorkloadList.vue   |  68 +++----
 frontend/src/components/LogSearchBar.vue      |  17 +-
 frontend/src/components/NamespaceSelector.vue | 123 ++++++------
 .../src/components/ResourceAlertConfig.vue    |  66 +------
 frontend/src/components/ResourceCharts.vue    |  49 ++---
 frontend/src/components/RuntimeBadge.vue      | 179 +++++++++---------
 .../src/components/SilenceRuleManager.vue     |   2 +-
 .../src/components/StatusComponentManager.vue |  25 +--
 .../src/components/StatusIncidentManager.vue  |   2 +-
 .../components/StatusMaintenanceManager.vue   |   2 +-
 frontend/src/components/StatusSmtpConfig.vue  |   1 +
 .../src/components/TopConsumersWidget.vue     |  46 ++---
 frontend/src/components/TriggerEditor.vue     |  45 ++---
 frontend/src/components/TriggerList.vue       |   2 +-
 .../src/components/escalation/PolicyList.vue  |  17 +-
 .../personalization/BrandingSection.vue       | 101 +---------
 .../personalization/ColorPaletteSection.vue   |  32 +---
 frontend/src/components/ui/ChipToggle.vue     |  74 ++++++++
 frontend/src/components/ui/ColorInput.vue     |  32 ++++
 .../src/components/ui/DisclosureButton.vue    |  46 +++++
 frontend/src/components/ui/FileInput.vue      |  51 +++++
 frontend/src/components/ui/OptionCards.vue    |  78 ++++++++
 frontend/src/components/ui/PopoverMenu.vue    | 127 +++++++++++++
 frontend/src/components/ui/RadioGroup.vue     |  10 +-
 frontend/src/components/ui/RangeInput.vue     |  70 +++++++
 .../src/components/ui/SegmentedToggle.vue     |  20 +-
 frontend/src/components/ui/SelectInput.vue    |  14 +-
 frontend/src/components/ui/TabNav.vue         |  14 +-
 frontend/src/components/ui/TextInput.vue      |  21 +-
 frontend/src/components/ui/UiButton.vue       |  17 +-
 .../ui/__tests__/ChipToggle.spec.ts           |  43 +++++
 .../ui/__tests__/ColorInput.spec.ts           |  31 +++
 .../ui/__tests__/DisclosureButton.spec.ts     |  40 ++++
 .../components/ui/__tests__/FileInput.spec.ts |  38 ++++
 .../ui/__tests__/OptionCards.spec.ts          |  47 +++++
 .../ui/__tests__/PopoverMenu.spec.ts          |  61 ++++++
 .../ui/__tests__/RangeInput.spec.ts           |  30 +++
 frontend/src/layouts/DefaultLayout.vue        |  13 +-
 frontend/src/pages/DesignSystemPage.vue       | 178 ++++++++++++++++-
 frontend/src/pages/EndpointsPage.vue          |   3 +-
 frontend/src/pages/PublicStatusPage.vue       |  32 ++--
 frontend/src/pages/ServicesPage.vue           |  67 +++----
 frontend/src/pages/StatusAdminPage.vue        |  11 +-
 frontend/src/pages/WebhooksPage.vue           |   2 +-
 56 files changed, 1599 insertions(+), 820 deletions(-)
 create mode 100644 frontend/src/components/ui/ChipToggle.vue
 create mode 100644 frontend/src/components/ui/ColorInput.vue
 create mode 100644 frontend/src/components/ui/DisclosureButton.vue
 create mode 100644 frontend/src/components/ui/FileInput.vue
 create mode 100644 frontend/src/components/ui/OptionCards.vue
 create mode 100644 frontend/src/components/ui/PopoverMenu.vue
 create mode 100644 frontend/src/components/ui/RangeInput.vue
 create mode 100644 frontend/src/components/ui/__tests__/ChipToggle.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/ColorInput.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/DisclosureButton.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/FileInput.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/OptionCards.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/PopoverMenu.spec.ts
 create mode 100644 frontend/src/components/ui/__tests__/RangeInput.spec.ts

diff --git a/frontend/eslint.config.ts b/frontend/eslint.config.ts
index 2937183e..2f4faaf8 100644
--- a/frontend/eslint.config.ts
+++ b/frontend/eslint.config.ts
@@ -32,7 +32,7 @@ export default defineConfigWithVueTs(
     ignores: ['src/components/ui/**', 'src/**/__tests__/**'],
     rules: {
       'vue/no-restricted-html-elements': [
-        'warn',
+        'error',
         { element: 'input', message: 'Use the shared TextInput, CheckboxInput, or RadioGroup component instead of a raw <input>.' },
         { element: 'select', message: 'Use the shared SelectInput component instead of a raw <select>.' },
         { element: 'textarea', message: 'Use the shared TextareaInput component instead of a raw <textarea>.' },
diff --git a/frontend/src/components/AgentDetailPanel.vue b/frontend/src/components/AgentDetailPanel.vue
index 459cb1db..b83ab614 100644
--- a/frontend/src/components/AgentDetailPanel.vue
+++ b/frontend/src/components/AgentDetailPanel.vue
@@ -277,7 +277,7 @@ function runtimeLabel(rt: string): string {
         <UiButton variant="secondary" class="w-full" :loading="revoking" :disabled="revoking" @click="handleRevoke">
           {{ revoking ? 'Revoking…' : 'Revoke agent' }}
         </UiButton>
-        <UiButton variant="danger" class="w-full" :loading="deleting" :disabled="deleting" @click="handleDelete">
+        <UiButton variant="danger-ghost" class="w-full" :loading="deleting" :disabled="deleting" @click="handleDelete">
           {{ deleting ? 'Deleting…' : 'Delete agent' }}
         </UiButton>
       </div>
@@ -285,7 +285,7 @@ function runtimeLabel(rt: string): string {
       <div v-if="agent.status === 'revoked'" class="space-y-2">
         <p class="text-[10px] text-mnt-muted font-bold uppercase tracking-widest mb-2">Actions</p>
         <p v-if="actionError" class="text-xs text-mnt-status-down">{{ actionError }}</p>
-        <UiButton variant="danger" class="w-full" :loading="deleting" :disabled="deleting" @click="handleDelete">
+        <UiButton variant="danger-ghost" class="w-full" :loading="deleting" :disabled="deleting" @click="handleDelete">
           {{ deleting ? 'Deleting…' : 'Delete agent' }}
         </UiButton>
       </div>
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 31975dc9..3efba0d4 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -27,6 +27,7 @@ import HostFilterDropdown from '@/components/HostFilterDropdown.vue'
 import AlertBanner from '@/components/ui/AlertBanner.vue'
 import SearchInput from '@/components/ui/SearchInput.vue'
 import UiButton from '@/components/ui/UiButton.vue'
+import PopoverMenu from '@/components/ui/PopoverMenu.vue'
 import { useTheme } from '@/composables/useTheme'
 import { useFeedbackUrl } from '@/composables/useFeedbackUrl'
 
@@ -280,88 +281,82 @@ const { feedbackUrl } = useFeedbackUrl()
         <MessageSquare :size="18" />
       </a>
 
-      <div
-        class="relative"
+      <PopoverMenu
+        v-model:open="bellOpen"
+        ariaLabel="Active alerts"
+        panel-class="w-56"
         @mouseenter="onBellEnter"
         @mouseleave="onBellLeave"
       >
-        <UiButton
-          variant="ghost"
-          size="sm"
-          :icon="Bell"
-          class="relative"
-          :aria-label="alertsStore.totalActiveCount > 0 ? `View alerts (${alertsStore.totalActiveCount} active)` : 'View alerts'"
-          @click="onBellClick"
-        >
-          <span
-            v-if="alertsStore.totalActiveCount > 0"
-            class="absolute top-1.5 right-1.5 h-2 w-2 rounded-full"
-            :style="{ backgroundColor: alertsStore.activeAlerts.critical.length > 0 ? 'var(--mnt-sev-incident)' : 'var(--mnt-sev-warning)' }"
+        <template #trigger>
+          <UiButton
+            variant="ghost"
+            size="sm"
+            :icon="Bell"
+            class="relative"
+            :aria-label="alertsStore.totalActiveCount > 0 ? `View alerts (${alertsStore.totalActiveCount} active)` : 'View alerts'"
+            @click="onBellClick"
           >
             <span
-              class="mnt-ping absolute inset-0 rounded-full"
+              v-if="alertsStore.totalActiveCount > 0"
+              class="absolute top-1.5 right-1.5 h-2 w-2 rounded-full"
               :style="{ backgroundColor: alertsStore.activeAlerts.critical.length > 0 ? 'var(--mnt-sev-incident)' : 'var(--mnt-sev-warning)' }"
-            />
+            >
+              <span
+                class="mnt-ping absolute inset-0 rounded-full"
+                :style="{ backgroundColor: alertsStore.activeAlerts.critical.length > 0 ? 'var(--mnt-sev-incident)' : 'var(--mnt-sev-warning)' }"
+              />
+            </span>
+          </UiButton>
+        </template>
+
+        <div class="px-3 py-2.5 border-b border-mnt-default flex items-center justify-between">
+          <span class="text-[10px] font-bold text-mnt-muted uppercase tracking-widest">Active alerts</span>
+          <span
+            class="min-w-[20px] h-5 flex items-center justify-center rounded-full text-[10px] font-bold px-1.5"
+            :class="alertsStore.activeAlerts.critical.length > 0 ? 'bg-mnt-status-down text-mnt-status-down' : 'bg-mnt-status-warn text-mnt-status-warn'"
+          >
+            {{ alertsStore.totalActiveCount }}
           </span>
-        </UiButton>
-
-        <!-- Popover menu -->
-        <Transition
-          enter-active-class="transition duration-100 ease-out"
-          enter-from-class="opacity-0 scale-95 -translate-y-1"
-          enter-to-class="opacity-100 scale-100 translate-y-0"
-          leave-active-class="transition duration-75 ease-in"
-          leave-from-class="opacity-100 scale-100 translate-y-0"
-          leave-to-class="opacity-0 scale-95 -translate-y-1"
-        >
-          <div
-            v-if="bellOpen"
-            class="absolute right-0 top-full mt-2 w-56 rounded-xl border border-mnt-default bg-mnt-surface shadow-2xl shadow-black/40 overflow-hidden z-50"
-            @mouseenter="onBellEnter"
-            @mouseleave="onBellLeave"
+        </div>
+        <div class="py-1">
+          <UiButton
+            v-for="source in sourceKeys"
+            :key="source"
+            variant="ghost"
+            block
+            align="start"
+            role="menuitem"
+            class="gap-3 rounded-none px-3 py-2 text-sm text-mnt-secondary hover:text-mnt-secondary"
+            @click="navigateToSource(source)"
           >
-            <div class="px-3 py-2.5 border-b border-mnt-default flex items-center justify-between">
-              <span class="text-[10px] font-bold text-mnt-muted uppercase tracking-widest">Active alerts</span>
-              <span
-                class="min-w-[20px] h-5 flex items-center justify-center rounded-full text-[10px] font-bold px-1.5"
-                :class="alertsStore.activeAlerts.critical.length > 0 ? 'bg-mnt-status-down text-mnt-status-down' : 'bg-mnt-status-warn text-mnt-status-warn'"
-              >
-                {{ alertsStore.totalActiveCount }}
-              </span>
-            </div>
-            <div class="py-1">
-              <button
-                v-for="source in sourceKeys"
-                :key="source"
-                @click="navigateToSource(source)"
-                class="w-full flex items-center gap-3 px-3 py-2 text-sm text-mnt-secondary hover:bg-mnt-elevated transition-colors"
-              >
-                <component
-                  :is="sourceRouteMap[source]?.icon ?? AlertTriangle"
-                  :size="14"
-                  class="shrink-0"
-                  :class="alertsBySource[source]?.critical ? 'text-mnt-status-down' : alertsBySource[source]?.warning ? 'text-mnt-status-warn' : 'text-mnt-green-400'"
-                />
-                <span class="flex-1 text-left">{{ sourceRouteMap[source]?.label ?? source }}</span>
-                <span
-                  class="min-w-[20px] h-5 flex items-center justify-center rounded-full text-[10px] font-bold px-1.5"
-                  :class="alertsBySource[source]?.critical ? 'bg-mnt-status-down text-mnt-status-down' : alertsBySource[source]?.warning ? 'bg-mnt-status-warn text-mnt-status-warn' : 'bg-mnt-green-500/15 text-mnt-green-400'"
-                >
-                  {{ alertsBySource[source]?.count }}
-                </span>
-              </button>
-            </div>
-            <div class="border-t border-mnt-default">
-              <button
-                @click="navigateToSource('_all')"
-                class="w-full px-3 py-2 text-[11px] font-medium text-mnt-muted hover:text-mnt-secondary hover:bg-mnt-elevated transition-colors text-center"
-              >
-                View all alerts
-              </button>
-            </div>
-          </div>
-        </Transition>
-      </div>
+            <component
+              :is="sourceRouteMap[source]?.icon ?? AlertTriangle"
+              :size="14"
+              class="shrink-0"
+              :class="alertsBySource[source]?.critical ? 'text-mnt-status-down' : alertsBySource[source]?.warning ? 'text-mnt-status-warn' : 'text-mnt-green-400'"
+            />
+            <span class="flex-1 text-left">{{ sourceRouteMap[source]?.label ?? source }}</span>
+            <span
+              class="min-w-[20px] h-5 flex items-center justify-center rounded-full text-[10px] font-bold px-1.5"
+              :class="alertsBySource[source]?.critical ? 'bg-mnt-status-down text-mnt-status-down' : alertsBySource[source]?.warning ? 'bg-mnt-status-warn text-mnt-status-warn' : 'bg-mnt-green-500/15 text-mnt-green-400'"
+            >
+              {{ alertsBySource[source]?.count }}
+            </span>
+          </UiButton>
+        </div>
+        <div class="border-t border-mnt-default">
+          <UiButton
+            variant="ghost"
+            block
+            role="menuitem"
+            class="rounded-none px-3 py-2 text-[11px] font-medium text-mnt-muted hover:text-mnt-secondary"
+            @click="navigateToSource('_all')"
+          >
+            View all alerts
+          </UiButton>
+        </div>
+      </PopoverMenu>
     </div>
   </header>
 
diff --git a/frontend/src/components/CertificateCard.vue b/frontend/src/components/CertificateCard.vue
index c4c1e70c..7f4c0feb 100644
--- a/frontend/src/components/CertificateCard.vue
+++ b/frontend/src/components/CertificateCard.vue
@@ -182,7 +182,7 @@ async function handleDelete() {
       :style="{ borderTop: '1px solid var(--mnt-border-subtle)' }"
       @click.stop
     >
-      <UiButton variant="danger" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
+      <UiButton variant="danger-ghost" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
         Delete
       </UiButton>
     </div>
diff --git a/frontend/src/components/CertificateDetail.vue b/frontend/src/components/CertificateDetail.vue
index 1b611232..6a89082c 100644
--- a/frontend/src/components/CertificateDetail.vue
+++ b/frontend/src/components/CertificateDetail.vue
@@ -35,7 +35,7 @@ const detail = ref<CertificateDetailResponse | null>(null)
 const loading = ref(false)
 const error = ref<string | null>(null)
 const activeTab = ref<'details' | 'history'>('details')
-const tabItems: TabNavItem[] = [
+const tabItems: TabNavItem<'details' | 'history'>[] = [
   { value: 'details', label: 'Details' },
   { value: 'history', label: 'History' },
 ]
@@ -195,11 +195,10 @@ function countdownBgColor(days: number | undefined): string {
 
       <!-- Tabs -->
       <TabNav
+        v-model="activeTab"
         class="mb-4"
-        :model-value="activeTab"
         :items="tabItems"
         ariaLabel="Certificate detail tabs"
-        @update:model-value="(v) => (activeTab = v as 'details' | 'history')"
       />
 
       <CertificateChecksHistory v-if="activeTab === 'history'" :certificate-id="certificateId" />
diff --git a/frontend/src/components/ChannelManager.vue b/frontend/src/components/ChannelManager.vue
index 2d94bf75..03940fff 100644
--- a/frontend/src/components/ChannelManager.vue
+++ b/frontend/src/components/ChannelManager.vue
@@ -269,7 +269,7 @@ function handleWizardCreated() {
           <div class="flex items-center gap-2">
             <UiButton variant="secondary" size="sm" @click="handleTest(ch.id)">Test</UiButton>
             <UiButton variant="secondary" size="sm" @click="startEdit(ch)">Edit</UiButton>
-            <UiButton variant="danger" size="sm" @click="handleDelete(ch.id)">Delete</UiButton>
+            <UiButton variant="danger-ghost" size="sm" @click="handleDelete(ch.id)">Delete</UiButton>
           </div>
         </div>
 
diff --git a/frontend/src/components/ChannelWizard.vue b/frontend/src/components/ChannelWizard.vue
index 14ffb882..8e5ac53a 100644
--- a/frontend/src/components/ChannelWizard.vue
+++ b/frontend/src/components/ChannelWizard.vue
@@ -21,6 +21,7 @@ import UiButton from '@/components/ui/UiButton.vue'
 import FormField from '@/components/ui/FormField.vue'
 import TextInput from '@/components/ui/TextInput.vue'
 import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+import OptionCards from '@/components/ui/OptionCards.vue'
 
 const { hasFeature, editionPermits, requiredEditionFor } = useEdition()
 
@@ -104,6 +105,19 @@ const selectedTypeConfig = computed(() =>
   allChannelTypes.find(t => t.key === selectedType.value)
 )
 
+const openTypeOptions = computed(() =>
+  openChannelTypes.map((t) => ({ value: t.key, label: t.label, description: t.description })),
+)
+
+const gatedTypeOptions = computed(() =>
+  gatedChannelTypes.map((t) => ({
+    value: t.key,
+    label: t.label,
+    description: t.description,
+    disabled: !hasFeature(t.feature),
+  })),
+)
+
 // What the single destination field means depends on the type: an address, a
 // chat id, or a URL. Telegram is the one type where it is not a URL at all.
 const destinationLabel = computed(() => {
@@ -216,22 +230,17 @@ function goBack() {
       <p class="mb-4 text-xs" style="color: var(--mnt-text-muted)">Choose how you want to receive notifications</p>
 
       <!-- CE channels -->
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        <button
-          v-for="type in openChannelTypes"
-          :key="type.key"
-          @click="selectType(type.key)"
-          class="flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-all"
-          :style="{
-            background: 'var(--mnt-bg-elevated)',
-            borderColor: selectedType === type.key ? 'var(--mnt-accent)' : 'var(--mnt-border-default)',
-          }"
-          @mouseenter="($event.currentTarget as HTMLElement).style.borderColor = 'var(--mnt-accent)'"
-          @mouseleave="($event.currentTarget as HTMLElement).style.borderColor = selectedType === type.key ? 'var(--mnt-accent)' : 'var(--mnt-border-default)'"
-        >
+      <OptionCards
+        :model-value="selectedType"
+        :options="openTypeOptions"
+        ariaLabel="Channel type"
+        :columns="2"
+        @update:model-value="(v) => v && selectType(v)"
+      >
+        <template #default="{ option }">
           <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: var(--mnt-bg-hover)">
             <!-- Discord -->
-            <svg v-if="type.icon === 'discord'" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: #5865f2">
+            <svg v-if="option.value === 'discord'" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: #5865f2">
               <path d="M4 4c2-1.5 4-2 6-2s4 .5 6 2" />
               <path d="M4 16c2 1.5 4 2 6 2s4-.5 6-2" />
               <circle cx="7.5" cy="10" r="1.5" />
@@ -244,68 +253,61 @@ function goBack() {
               <path d="M6 18l4-3 4 3" />
             </svg>
           </div>
-          <span class="text-sm font-medium" style="color: var(--mnt-text-primary)">{{ type.label }}</span>
-          <span class="text-[11px]" style="color: var(--mnt-text-muted)">{{ type.description }}</span>
-        </button>
-      </div>
+          <span class="text-sm font-medium" style="color: var(--mnt-text-primary)">{{ option.label }}</span>
+          <span class="text-[11px]" style="color: var(--mnt-text-muted)">{{ option.description }}</span>
+        </template>
+      </OptionCards>
 
       <!-- Channels gated by an edition -->
-      <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3">
-        <div
-          v-for="type in gatedChannelTypes"
-          :key="type.key"
-          class="relative"
-        >
+      <OptionCards
+        class="mt-3"
+        :model-value="selectedType"
+        :options="gatedTypeOptions"
+        ariaLabel="Channel type (requires an edition)"
+        :columns="3"
+        @update:model-value="(v) => v && selectType(v)"
+      >
+        <template #default="{ option }">
           <!-- SMTP not configured special case -->
-          <SmtpNotConfigured v-if="type.feature === 'smtp' && editionPermits('smtp') && !hasFeature('smtp')" :title="type.label" />
-
-          <!-- Normal gated channel button -->
-          <button
-            v-else
-            @click="hasFeature(type.feature) && selectType(type.key)"
-            class="flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-all w-full"
-            :class="{ 'opacity-50 cursor-not-allowed': !hasFeature(type.feature) }"
-            :style="{
-              background: 'var(--mnt-bg-elevated)',
-              borderColor: selectedType === type.key ? 'var(--mnt-accent)' : 'var(--mnt-border-default)',
-            }"
-            @mouseenter="hasFeature(type.feature) && (($event.currentTarget as HTMLElement).style.borderColor = 'var(--mnt-accent)')"
-            @mouseleave="($event.currentTarget as HTMLElement).style.borderColor = selectedType === type.key ? 'var(--mnt-accent)' : 'var(--mnt-border-default)'"
-          >
+          <SmtpNotConfigured
+            v-if="option.value === 'email' && editionPermits('smtp') && !hasFeature('smtp')"
+            :title="option.label"
+          />
+          <template v-else>
             <!-- The edition this channel actually needs. It read "Pro" for all
                  three, but email is Personal — a Community user was told to buy
                  the top tier for the middle tier's channel. -->
             <EditionBadge
-              v-if="!hasFeature(type.feature) && requiredEditionFor(type.feature)"
-              :edition="requiredEditionFor(type.feature)!"
+              v-if="option.disabled && requiredEditionFor(gatedChannelTypes.find((t) => t.key === option.value)!.feature)"
+              :edition="requiredEditionFor(gatedChannelTypes.find((t) => t.key === option.value)!.feature)!"
               class="absolute top-2 right-2"
             />
 
             <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: var(--mnt-bg-hover)">
               <!-- Email -->
-              <svg v-if="type.icon === 'email'" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--mnt-status-ok)">
+              <svg v-if="option.value === 'email'" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--mnt-status-ok)">
                 <rect x="2" y="4" width="16" height="12" rx="2" />
                 <path d="M2 6l8 5 8-5" />
               </svg>
               <!-- Telegram -->
-              <svg v-else-if="type.icon === 'telegram'" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: #229ED9">
+              <svg v-else-if="option.value === 'telegram'" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: #229ED9">
                 <path d="M18 3L2 9.5l4.5 1.7L16 5.5l-7.5 7.2L8 17l2.7-3 3.6 2.7z" />
               </svg>
               <!-- Slack -->
-              <svg v-else-if="type.icon === 'slack'" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--mnt-accent)">
+              <svg v-else-if="option.value === 'slack'" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--mnt-accent)">
                 <path d="M6 2v4M14 14v4M2 6h4M14 6h4M6 10h8M10 6v8" />
               </svg>
               <!-- Teams -->
-              <svg v-else-if="type.icon === 'teams'" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: #6264A7">
+              <svg v-else-if="option.value === 'teams'" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: #6264A7">
                 <rect x="3" y="4" width="14" height="12" rx="2" />
                 <path d="M7 10h6M10 7v6" />
               </svg>
             </div>
-            <span class="text-sm font-medium" style="color: var(--mnt-text-primary)">{{ type.label }}</span>
-            <span class="text-[11px]" style="color: var(--mnt-text-muted)">{{ type.description }}</span>
-          </button>
-        </div>
-      </div>
+            <span class="text-sm font-medium" style="color: var(--mnt-text-primary)">{{ option.label }}</span>
+            <span class="text-[11px]" style="color: var(--mnt-text-muted)">{{ option.description }}</span>
+          </template>
+        </template>
+      </OptionCards>
 
       <div class="mt-4 flex justify-end">
         <UiButton variant="secondary" @click="emit('cancel')">Cancel</UiButton>
diff --git a/frontend/src/components/ContainerList.vue b/frontend/src/components/ContainerList.vue
index 87477b83..e4667bd6 100644
--- a/frontend/src/components/ContainerList.vue
+++ b/frontend/src/components/ContainerList.vue
@@ -29,9 +29,10 @@ import ListToolbar from '@/components/ui/ListToolbar.vue'
 import DataTable, { type Column } from '@/components/ui/DataTable.vue'
 import SelectInput from '@/components/ui/SelectInput.vue'
 import UiButton from '@/components/ui/UiButton.vue'
+import DisclosureButton from '@/components/ui/DisclosureButton.vue'
 import type { ChipTone, StatusChip } from '@/components/ui/listFilters'
 import { usePreferencesStore } from '@/stores/preferences'
-import { ChevronDown, Box, SearchX } from 'lucide-vue-next'
+import { Box, SearchX } from 'lucide-vue-next'
 
 const store = useContainersStore()
 const resources = useResourcesStore()
@@ -400,53 +401,50 @@ onMounted(() => {
       <!-- Cards keep the groups, and the K8s/Swarm controller hierarchy inside them. -->
       <div v-else class="space-y-6">
         <div v-for="group in visibleGroups" :key="group.name">
-          <button
-            class="flex min-h-[44px] w-full items-center gap-2 text-left"
-            :aria-expanded="!collapsedGroups.has(group.name)"
-            @click="toggleGroup(group.name)"
+          <DisclosureButton
+            :expanded="!collapsedGroups.has(group.name)"
+            :controls-id="`container-group-${group.name}`"
+            class="text-mnt-muted"
+            @toggle="toggleGroup(group.name)"
           >
-            <ChevronDown
-              :size="14"
-              class="shrink-0 text-mnt-muted transition-transform"
-              :class="{ '-rotate-90': collapsedGroups.has(group.name) }"
-              aria-hidden="true"
-            />
-            <h2 class="text-sm font-semibold text-mnt-secondary">{{ group.name }}</h2>
-            <span class="rounded-full bg-mnt-elevated px-2 py-0.5 text-xs text-mnt-muted">
-              {{ group.containers.length }}
+            <span class="flex items-center gap-2">
+              <h2 class="text-sm font-semibold text-mnt-secondary">{{ group.name }}</h2>
+              <span class="rounded-full bg-mnt-elevated px-2 py-0.5 text-xs text-mnt-muted">
+                {{ group.containers.length }}
+              </span>
+              <span class="text-xs text-mnt-muted">{{ group.source }}</span>
             </span>
-            <span class="text-xs text-mnt-muted">{{ group.source }}</span>
-          </button>
+          </DisclosureButton>
 
           <template v-if="!collapsedGroups.has(group.name)">
+            <div :id="`container-group-${group.name}`">
             <div v-if="hasControllerHierarchy" class="mt-2 space-y-3">
               <div
                 v-for="ctrl in getControllerGroups(group.containers)"
                 :key="`${ctrl.kind}/${ctrl.name}`"
               >
-                <button
-                  class="flex w-full items-center gap-2 rounded bg-mnt-elevated px-2 py-1.5 text-left"
-                  @click="store.toggleController(`${group.name}/${ctrl.kind}/${ctrl.name}`)"
+                <DisclosureButton
+                  :expanded="store.isControllerExpanded(`${group.name}/${ctrl.kind}/${ctrl.name}`)"
+                  :controls-id="`container-ctrl-${group.name}-${ctrl.kind}-${ctrl.name}`"
+                  class="rounded bg-mnt-elevated px-2 py-1.5 text-mnt-muted"
+                  @toggle="store.toggleController(`${group.name}/${ctrl.kind}/${ctrl.name}`)"
                 >
-                  <ChevronDown
-                    :size="13"
-                    class="shrink-0 text-mnt-muted transition-transform"
-                    :class="{ '-rotate-90': !store.isControllerExpanded(`${group.name}/${ctrl.kind}/${ctrl.name}`) }"
-                    aria-hidden="true"
-                  />
-                  <span class="rounded bg-mnt-surface px-1.5 py-0.5 text-xs text-mnt-secondary">
-                    {{ ctrl.kind }}
+                  <span class="flex items-center gap-2">
+                    <span class="rounded bg-mnt-surface px-1.5 py-0.5 text-xs text-mnt-secondary">
+                      {{ ctrl.kind }}
+                    </span>
+                    <span class="text-sm font-medium text-mnt-primary">{{ ctrl.name }}</span>
+                    <span
+                      class="text-xs"
+                      :style="{
+                        color: ctrl.readyCount === ctrl.podCount ? 'var(--mnt-status-ok)' : 'var(--mnt-status-warn)',
+                      }"
+                    >{{ ctrl.readyCount }}/{{ ctrl.podCount }} ready</span>
                   </span>
-                  <span class="text-sm font-medium text-mnt-primary">{{ ctrl.name }}</span>
-                  <span
-                    class="text-xs"
-                    :style="{
-                      color: ctrl.readyCount === ctrl.podCount ? 'var(--mnt-status-ok)' : 'var(--mnt-status-warn)',
-                    }"
-                  >{{ ctrl.readyCount }}/{{ ctrl.podCount }} ready</span>
-                </button>
+                </DisclosureButton>
                 <div
                   v-if="store.isControllerExpanded(`${group.name}/${ctrl.kind}/${ctrl.name}`)"
+                  :id="`container-ctrl-${group.name}-${ctrl.kind}-${ctrl.name}`"
                   class="mt-2 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
                 >
                   <ContainerCard
@@ -479,6 +477,7 @@ onMounted(() => {
                 @select="emit('select', $event)"
               />
             </div>
+            </div>
           </template>
         </div>
       </div>
diff --git a/frontend/src/components/EndpointCard.vue b/frontend/src/components/EndpointCard.vue
index d628c79e..31bdea4f 100644
--- a/frontend/src/components/EndpointCard.vue
+++ b/frontend/src/components/EndpointCard.vue
@@ -202,7 +202,7 @@ function formatResponseTime(ms: number | undefined): string {
       @click.stop
     >
       <span v-if="isRetired" class="text-xs text-mnt-muted">Container gone</span>
-      <UiButton variant="danger" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
+      <UiButton variant="danger-ghost" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
         Delete
       </UiButton>
     </div>
diff --git a/frontend/src/components/EndpointDetail.vue b/frontend/src/components/EndpointDetail.vue
index 6a2e71a8..cbb59a60 100644
--- a/frontend/src/components/EndpointDetail.vue
+++ b/frontend/src/components/EndpointDetail.vue
@@ -405,7 +405,7 @@ watch(() => props.endpointId, () => {
         :style="{ borderTop: '1px solid var(--mnt-border-subtle)' }"
       >
         <span v-if="isRetired" class="text-xs text-mnt-muted">Container gone</span>
-        <UiButton variant="danger" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
+        <UiButton variant="danger-ghost" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
           Delete endpoint
         </UiButton>
       </div>
diff --git a/frontend/src/components/HeartbeatCard.vue b/frontend/src/components/HeartbeatCard.vue
index e4016f92..05d58bbb 100644
--- a/frontend/src/components/HeartbeatCard.vue
+++ b/frontend/src/components/HeartbeatCard.vue
@@ -183,7 +183,7 @@ async function handleDelete() {
       >
         Resume
       </UiButton>
-      <UiButton variant="danger" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
+      <UiButton variant="danger-ghost" size="sm" class="ml-auto" :loading="deleting" @click="handleDelete">
         Delete
       </UiButton>
     </div>
diff --git a/frontend/src/components/HostFilterDropdown.vue b/frontend/src/components/HostFilterDropdown.vue
index 79f75828..48937c82 100644
--- a/frontend/src/components/HostFilterDropdown.vue
+++ b/frontend/src/components/HostFilterDropdown.vue
@@ -16,6 +16,8 @@ import { ref, computed } from 'vue'
 import { Server, ChevronDown } from 'lucide-vue-next'
 import { useAgentsStore } from '@/stores/agents'
 import { useResourcesStore } from '@/stores/resources'
+import PopoverMenu from '@/components/ui/PopoverMenu.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 // Global host/resource scope selector living at the top of the sidebar nav. It
 // is the single control that scopes every list (containers, endpoints,
@@ -48,72 +50,79 @@ function select(value: string | null) {
 
 <template>
   <!-- Only meaningful once at least one agent is enrolled; single-host installs hide it. -->
-  <div v-if="activeAgents.length > 0" class="relative">
-    <button
-      class="flex w-full items-center justify-between gap-1.5 rounded-lg border border-mnt-default bg-mnt-primary px-3 py-1.5 text-xs text-mnt-secondary transition-colors hover:text-mnt-primary"
-      @click="open = !open"
-    >
-      <span class="flex items-center gap-1.5 min-w-0">
-        <Server :size="13" class="text-mnt-muted shrink-0" />
-        <span class="truncate">{{ selectedLabel }}</span>
-      </span>
-      <ChevronDown :size="13" class="text-mnt-muted shrink-0" />
-    </button>
+  <PopoverMenu
+    v-if="activeAgents.length > 0"
+    v-model:open="open"
+    ariaLabel="Host scope"
+    align="stretch"
+    panel-class="min-w-[200px] py-1"
+  >
+    <template #trigger="{ toggle }">
+      <UiButton
+        variant="secondary"
+        size="sm"
+        block
+        align="between"
+        class="bg-mnt-primary text-mnt-secondary hover:text-mnt-primary"
+        @click="toggle"
+      >
+        <span class="flex items-center gap-1.5 min-w-0">
+          <Server :size="13" class="text-mnt-muted shrink-0" />
+          <span class="truncate">{{ selectedLabel }}</span>
+        </span>
+        <ChevronDown :size="13" class="text-mnt-muted shrink-0" />
+      </UiButton>
+    </template>
 
-    <div
-      v-if="open"
-      class="absolute left-0 right-0 z-50 mt-1 min-w-[200px] rounded-xl border border-mnt-default bg-mnt-surface py-1 shadow-2xl"
+    <UiButton
+      variant="ghost"
+      size="sm"
+      block
+      align="start"
+      role="menuitem"
+      class="rounded-none"
+      :class="itemClass(resources.selected === null)"
+      @click="select(null)"
     >
-      <button
-        class="hf-item"
-        :class="itemClass(resources.selected === null)"
-        @click="select(null)"
-      >
-        All resources
-      </button>
-      <button
-        class="hf-item"
-        :class="itemClass(resources.selected === 'local')"
-        @click="select('local')"
-      >
-        Local
-      </button>
+      All resources
+    </UiButton>
+    <UiButton
+      variant="ghost"
+      size="sm"
+      block
+      align="start"
+      role="menuitem"
+      class="rounded-none"
+      :class="itemClass(resources.selected === 'local')"
+      @click="select('local')"
+    >
+      Local
+    </UiButton>
 
-      <div class="my-1 border-t border-mnt-subtle" />
+    <div class="my-1 border-t border-mnt-subtle" />
 
-      <button
-        v-for="agent in activeAgents"
-        :key="agent.agent_id"
-        class="hf-item flex items-center gap-2"
-        :class="itemClass(resources.selected === agent.agent_id)"
-        @click="select(agent.agent_id)"
-      >
-        <span
-          class="h-1.5 w-1.5 shrink-0 rounded-full"
-          :style="{
-            backgroundColor:
-              agent.connection_state === 'connected'
-                ? 'var(--mnt-status-ok-text)'
-                : 'var(--mnt-text-muted)',
-          }"
-        />
-        {{ agent.label || agent.hostname }}
-      </button>
-    </div>
-
-    <div v-if="open" class="fixed inset-0 z-40" @click="open = false" />
-  </div>
+    <UiButton
+      v-for="agent in activeAgents"
+      :key="agent.agent_id"
+      variant="ghost"
+      size="sm"
+      block
+      align="start"
+      role="menuitem"
+      class="rounded-none"
+      :class="itemClass(resources.selected === agent.agent_id)"
+      @click="select(agent.agent_id)"
+    >
+      <span
+        class="h-1.5 w-1.5 shrink-0 rounded-full"
+        :style="{
+          backgroundColor:
+            agent.connection_state === 'connected'
+              ? 'var(--mnt-status-ok-text)'
+              : 'var(--mnt-text-muted)',
+        }"
+      />
+      {{ agent.label || agent.hostname }}
+    </UiButton>
+  </PopoverMenu>
 </template>
-
-<style scoped>
-.hf-item {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  text-align: left;
-  font-size: 0.75rem;
-  transition: background-color 0.12s ease;
-}
-.hf-item:hover {
-  background-color: var(--mnt-bg-hover);
-}
-</style>
diff --git a/frontend/src/components/K8sWorkloadList.vue b/frontend/src/components/K8sWorkloadList.vue
index c9eb9e65..a21829ef 100644
--- a/frontend/src/components/K8sWorkloadList.vue
+++ b/frontend/src/components/K8sWorkloadList.vue
@@ -15,7 +15,7 @@
 import { ref } from 'vue'
 import { type K8sWorkloadGroup, type K8sWorkload } from '@/services/kubernetesApi'
 import { timeAgo } from '@/utils/time'
-import { ChevronDown, ChevronRight } from 'lucide-vue-next'
+import DisclosureButton from '@/components/ui/DisclosureButton.vue'
 import HostBadge from '@/components/HostBadge.vue'
 
 defineProps<{
@@ -101,45 +101,45 @@ function handleGroupsReady(groups: K8sWorkloadGroup[]) {
       class="bg-mnt-surface rounded-xl border border-mnt-default overflow-hidden"
     >
       <!-- Namespace header -->
-      <button
-        class="w-full flex items-center justify-between px-4 py-3 hover:bg-mnt-elevated transition-all"
-        @click="toggleGroup(group.namespace)"
+      <DisclosureButton
+        :expanded="isExpanded(group.namespace)"
+        :controls-id="`k8s-workloads-${group.namespace}`"
+        class="px-4 py-3 hover:bg-mnt-elevated transition-all"
+        @toggle="toggleGroup(group.namespace)"
       >
-        <div class="flex items-center gap-3">
-          <component
-            :is="isExpanded(group.namespace) ? ChevronDown : ChevronRight"
-            :size="14"
-            class="text-mnt-muted flex-shrink-0"
-          />
-          <span class="text-sm font-semibold text-mnt-primary font-mono">{{ group.namespace }}</span>
-          <span
-            class="text-[10px] font-bold uppercase tracking-wider text-mnt-muted bg-mnt-elevated border border-mnt-default px-1.5 py-0.5 rounded"
-          >
-            {{ group.workloads.length }} workload{{ group.workloads.length === 1 ? '' : 's' }}
-          </span>
-        </div>
-        <div class="flex items-center gap-2">
-          <span
-            :class="[
-              'text-xs font-semibold tabular-nums',
-              group.workloads.every((w) => w.status === 'healthy')
-                ? 'text-mnt-status-ok'
-                : group.workloads.some((w) => w.status === 'failed')
-                  ? 'text-mnt-status-down'
-                  : 'text-mnt-status-warn',
-            ]"
-          >
-            {{ group.workloads.filter((w) => w.status === 'healthy').length }}/{{
-              group.workloads.length
-            }}
-            healthy
-          </span>
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex items-center gap-3">
+            <span class="text-sm font-semibold text-mnt-primary font-mono">{{ group.namespace }}</span>
+            <span
+              class="text-[10px] font-bold uppercase tracking-wider text-mnt-muted bg-mnt-elevated border border-mnt-default px-1.5 py-0.5 rounded"
+            >
+              {{ group.workloads.length }} workload{{ group.workloads.length === 1 ? '' : 's' }}
+            </span>
+          </div>
+          <div class="flex items-center gap-2">
+            <span
+              :class="[
+                'text-xs font-semibold tabular-nums',
+                group.workloads.every((w) => w.status === 'healthy')
+                  ? 'text-mnt-status-ok'
+                  : group.workloads.some((w) => w.status === 'failed')
+                    ? 'text-mnt-status-down'
+                    : 'text-mnt-status-warn',
+              ]"
+            >
+              {{ group.workloads.filter((w) => w.status === 'healthy').length }}/{{
+                group.workloads.length
+              }}
+              healthy
+            </span>
+          </div>
         </div>
-      </button>
+      </DisclosureButton>
 
       <!-- Workload rows -->
       <div
         v-if="isExpanded(group.namespace)"
+        :id="`k8s-workloads-${group.namespace}`"
         class="border-t border-mnt-default divide-y divide-slate-800/60"
       >
         <div
diff --git a/frontend/src/components/LogSearchBar.vue b/frontend/src/components/LogSearchBar.vue
index 94d0ca11..f2fdf365 100644
--- a/frontend/src/components/LogSearchBar.vue
+++ b/frontend/src/components/LogSearchBar.vue
@@ -16,12 +16,13 @@ import { ref, computed, watch, nextTick } from 'vue'
 import { ChevronUp, ChevronDown, X } from 'lucide-vue-next'
 import type { UseLogSearchReturn } from '@/composables/useLogSearch'
 import UiButton from '@/components/ui/UiButton.vue'
+import TextInput from '@/components/ui/TextInput.vue'
 
 const props = defineProps<{
   search: UseLogSearchReturn
 }>()
 
-const inputRef = ref<HTMLInputElement | null>(null)
+const inputRef = ref<InstanceType<typeof TextInput> | null>(null)
 
 watch(() => props.search.isOpen.value, (open) => {
   if (open) {
@@ -29,10 +30,6 @@ watch(() => props.search.isOpen.value, (open) => {
   }
 })
 
-function onInput(e: Event) {
-  props.search.setQuery((e.target as HTMLInputElement).value)
-}
-
 function onKeydown(e: KeyboardEvent) {
   if (e.key === 'Enter' && e.shiftKey) {
     e.preventDefault()
@@ -61,13 +58,13 @@ const matchDisplay = computed(() => {
     class="flex items-center gap-1.5 rounded-lg border bg-mnt-primary px-2 py-1"
     :class="search.isValid.value ? 'border-mnt-default' : 'border-red-500'"
   >
-    <input
+    <TextInput
       ref="inputRef"
-      type="text"
-      :value="search.query.value"
+      variant="bare"
+      :model-value="search.query.value"
       placeholder="Search logs..."
-      class="w-32 bg-transparent text-xs text-mnt-primary placeholder:text-mnt-muted outline-none sm:w-48"
-      @input="onInput"
+      class="w-32 sm:w-48"
+      @update:model-value="(v) => search.setQuery(String(v ?? ''))"
       @keydown="onKeydown"
     />
 
diff --git a/frontend/src/components/NamespaceSelector.vue b/frontend/src/components/NamespaceSelector.vue
index c15480c3..535f78f1 100644
--- a/frontend/src/components/NamespaceSelector.vue
+++ b/frontend/src/components/NamespaceSelector.vue
@@ -12,14 +12,15 @@
 -->
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useNamespacesStore } from '@/stores/namespaces'
 import { ChevronDown, Check, Layers } from 'lucide-vue-next'
+import PopoverMenu from '@/components/ui/PopoverMenu.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const store = useNamespacesStore()
 
 const open = ref(false)
-const containerRef = ref<HTMLElement | null>(null)
 
 const label = computed(() => {
   const count = store.selectedNamespaces.length
@@ -28,83 +29,75 @@ const label = computed(() => {
   return `${count} namespaces`
 })
 
-function toggle() {
-  open.value = !open.value
-}
-
-function handleClickOutside(e: MouseEvent) {
-  if (containerRef.value && !containerRef.value.contains(e.target as Node)) {
-    open.value = false
-  }
-}
-
 onMounted(() => {
-  document.addEventListener('mousedown', handleClickOutside)
   store.fetchNamespacesList()
 })
-
-onBeforeUnmount(() => {
-  document.removeEventListener('mousedown', handleClickOutside)
-})
 </script>
 
 <template>
-  <div ref="containerRef" class="relative">
-    <button
-      class="flex items-center gap-2 bg-mnt-surface border border-mnt-default rounded-lg px-3 py-2 text-sm text-mnt-secondary hover:border-mnt-default hover:text-mnt-primary transition-all"
-      @click="toggle"
+  <PopoverMenu v-model:open="open" ariaLabel="Namespaces" panel-class="min-w-52">
+    <template #trigger="{ toggle }">
+      <UiButton
+        variant="secondary"
+        class="bg-mnt-surface text-mnt-secondary hover:text-mnt-primary"
+        @click="toggle"
+      >
+        <Layers :size="14" class="text-mnt-muted flex-shrink-0" />
+        <span class="truncate max-w-40">{{ label }}</span>
+        <ChevronDown
+          :size="14"
+          :class="['text-mnt-muted flex-shrink-0 transition-transform', open ? 'rotate-180' : '']"
+        />
+      </UiButton>
+    </template>
+
+    <!-- All namespaces option -->
+    <UiButton
+      variant="ghost"
+      block
+      align="between"
+      role="menuitemcheckbox"
+      :aria-checked="store.selectedNamespaces.length === 0"
+      class="rounded-none px-4 py-2.5 text-sm text-mnt-secondary hover:text-mnt-primary"
+      @click="store.selectAll()"
     >
-      <Layers :size="14" class="text-mnt-muted flex-shrink-0" />
-      <span class="truncate max-w-40">{{ label }}</span>
-      <ChevronDown
+      <span>All namespaces</span>
+      <Check
+        v-if="store.selectedNamespaces.length === 0"
         :size="14"
-        :class="['text-mnt-muted flex-shrink-0 transition-transform', open ? 'rotate-180' : '']"
+        class="text-mnt-green-400 flex-shrink-0"
       />
-    </button>
-
-    <!-- Dropdown -->
-    <div
-      v-if="open"
-      class="absolute right-0 top-full mt-1 z-50 min-w-52 bg-mnt-surface border border-mnt-default rounded-xl shadow-xl overflow-hidden"
-    >
-      <!-- All namespaces option -->
-      <button
-        class="w-full flex items-center justify-between px-4 py-2.5 text-sm text-mnt-secondary hover:bg-mnt-elevated hover:text-mnt-primary transition-colors"
-        @click="store.selectAll()"
+    </UiButton>
+
+    <!-- Divider -->
+    <div v-if="store.namespaces.length > 0" class="border-t border-mnt-default" />
+
+    <!-- Individual namespaces -->
+    <div class="max-h-64 overflow-y-auto">
+      <UiButton
+        v-for="ns in store.namespaces"
+        :key="ns"
+        variant="ghost"
+        block
+        align="between"
+        role="menuitemcheckbox"
+        :aria-checked="store.selectedNamespaces.includes(ns)"
+        class="rounded-none px-4 py-2.5 text-sm"
+        :class="store.selectedNamespaces.includes(ns) ? 'text-mnt-primary' : 'text-mnt-muted'"
+        @click="store.toggleNamespace(ns)"
       >
-        <span>All namespaces</span>
+        <span class="font-mono">{{ ns }}</span>
         <Check
-          v-if="store.selectedNamespaces.length === 0"
+          v-if="store.selectedNamespaces.includes(ns)"
           :size="14"
           class="text-mnt-green-400 flex-shrink-0"
         />
-      </button>
-
-      <!-- Divider -->
-      <div v-if="store.namespaces.length > 0" class="border-t border-mnt-default" />
-
-      <!-- Individual namespaces -->
-      <div class="max-h-64 overflow-y-auto">
-        <button
-          v-for="ns in store.namespaces"
-          :key="ns"
-          class="w-full flex items-center justify-between px-4 py-2.5 text-sm hover:bg-mnt-elevated transition-colors"
-          :class="store.selectedNamespaces.includes(ns) ? 'text-mnt-primary' : 'text-mnt-muted'"
-          @click="store.toggleNamespace(ns)"
-        >
-          <span class="font-mono">{{ ns }}</span>
-          <Check
-            v-if="store.selectedNamespaces.includes(ns)"
-            :size="14"
-            class="text-mnt-green-400 flex-shrink-0"
-          />
-        </button>
-      </div>
+      </UiButton>
+    </div>
 
-      <!-- Empty state -->
-      <div v-if="store.namespaces.length === 0" class="px-4 py-3 text-xs text-mnt-muted text-center">
-        No namespaces found
-      </div>
+    <!-- Empty state -->
+    <div v-if="store.namespaces.length === 0" class="px-4 py-3 text-xs text-mnt-muted text-center">
+      No namespaces found
     </div>
-  </div>
+  </PopoverMenu>
 </template>
diff --git a/frontend/src/components/ResourceAlertConfig.vue b/frontend/src/components/ResourceAlertConfig.vue
index 59e34086..6adf8ecd 100644
--- a/frontend/src/components/ResourceAlertConfig.vue
+++ b/frontend/src/components/ResourceAlertConfig.vue
@@ -12,7 +12,7 @@
 -->
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import {
   getAlertConfig,
   updateAlertConfig,
@@ -21,6 +21,7 @@ import {
 import UiButton from '@/components/ui/UiButton.vue'
 import TextInput from '@/components/ui/TextInput.vue'
 import CheckboxInput from '@/components/ui/CheckboxInput.vue'
+import RangeInput from '@/components/ui/RangeInput.vue'
 
 const props = defineProps<{
   containerId: string
@@ -34,17 +35,6 @@ const saving = ref(false)
 const error = ref<string | null>(null)
 const saved = ref(false)
 
-// Chrome derives the unfilled range track from accent-color, which turns it
-// near-black under our green. The track is drawn as a gradient instead, so both
-// halves come from design tokens; these are the split points.
-const cpuFill = computed(() => fillPercent(cpuThreshold.value, 1, 1000))
-const memFill = computed(() => fillPercent(memThreshold.value, 1, 100))
-
-function fillPercent(value: number, min: number, max: number): string {
-  const ratio = (value - min) / (max - min)
-  return `${Math.min(Math.max(ratio, 0), 1) * 100}%`
-}
-
 const alertStateColors: Record<string, string> = {
   normal: 'text-mnt-status-ok',
   cpu_alert: 'text-mnt-status-down',
@@ -113,14 +103,7 @@ async function save() {
       <div>
         <label class="block text-xs text-mnt-muted">CPU Threshold (%)</label>
         <div class="flex items-center gap-2">
-          <input
-            v-model.number="cpuThreshold"
-            type="range"
-            min="1"
-            max="1000"
-            class="flex-1"
-            :style="{ '--fill': cpuFill }"
-          />
+          <RangeInput v-model="cpuThreshold" label="CPU Threshold" :min="1" :max="1000" class="flex-1" />
           <TextInput v-model="cpuThreshold" type="number" min="1" max="1000" size="sm" class="w-16" />
         </div>
       </div>
@@ -129,14 +112,7 @@ async function save() {
       <div>
         <label class="block text-xs text-mnt-muted">Memory Threshold (%)</label>
         <div class="flex items-center gap-2">
-          <input
-            v-model.number="memThreshold"
-            type="range"
-            min="1"
-            max="100"
-            class="flex-1"
-            :style="{ '--fill': memFill }"
-          />
+          <RangeInput v-model="memThreshold" label="Memory Threshold" :min="1" :max="100" class="flex-1" />
           <TextInput v-model="memThreshold" type="number" min="1" max="100" size="sm" class="w-16" />
         </div>
       </div>
@@ -152,37 +128,3 @@ async function save() {
     </div>
   </div>
 </template>
-
-<style scoped>
-input[type='range'] {
-  appearance: none;
-  -webkit-appearance: none;
-  height: 6px;
-  border-radius: 999px;
-  background: linear-gradient(
-    to right,
-    var(--mnt-accent) var(--fill),
-    var(--mnt-bg-elevated) var(--fill)
-  );
-  outline: none;
-}
-
-input[type='range']::-webkit-slider-thumb {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--mnt-accent);
-  cursor: pointer;
-}
-
-input[type='range']::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  border: none;
-  border-radius: 50%;
-  background: var(--mnt-accent);
-  cursor: pointer;
-}
-</style>
diff --git a/frontend/src/components/ResourceCharts.vue b/frontend/src/components/ResourceCharts.vue
index d48207e1..84265ff5 100644
--- a/frontend/src/components/ResourceCharts.vue
+++ b/frontend/src/components/ResourceCharts.vue
@@ -19,6 +19,7 @@ import { useResourcesStore } from '@/stores/resources'
 import { useEdition } from '@/composables/useEdition'
 import { ApiError } from '@/services/apiFetch'
 import EditionBadge from '@/components/EditionBadge.vue'
+import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
 import { Lock } from 'lucide-vue-next'
 import type uPlot from 'uplot'
 
@@ -197,6 +198,17 @@ function selectRange(window: string) {
   selectedRange.value = window
 }
 
+const rangeOptions = computed(() =>
+  historyWindows.value.map((w) => ({
+    value: w.window,
+    label: w.window,
+    icon: isWindowOpen(w.window) ? undefined : Lock,
+    disabled: !isWindowOpen(w.window),
+    locked: !isWindowOpen(w.window),
+    dataTest: `range-${w.window}`,
+  })),
+)
+
 watch(selectedRange, () => fetchHistory())
 onMounted(() => fetchHistory())
 </script>
@@ -206,37 +218,12 @@ onMounted(() => fetchHistory())
     <!-- Range selector -->
     <div class="flex items-center gap-2">
       <span class="text-sm font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Time Range:</span>
-      <div
-        class="flex"
-        :style="{
-          borderRadius: 'var(--mnt-radius-md)',
-          border: '1px solid var(--mnt-border-default)',
-          overflow: 'hidden',
-        }"
-      >
-        <button
-          v-for="w in historyWindows"
-          :key="w.window"
-          :data-test="`range-${w.window}`"
-          :data-locked="isWindowOpen(w.window) ? undefined : 'true'"
-          :disabled="!isWindowOpen(w.window)"
-          class="flex items-center gap-1 px-3 py-1 text-xs font-medium transition"
-          :style="{
-            backgroundColor: selectedRange === w.window ? 'var(--mnt-accent)' : 'var(--mnt-bg-surface)',
-            color: selectedRange === w.window
-              ? 'var(--mnt-text-inverted)'
-              : isWindowOpen(w.window)
-                ? 'var(--mnt-text-secondary)'
-                : 'var(--mnt-text-muted)',
-            cursor: isWindowOpen(w.window) ? 'pointer' : 'not-allowed',
-            opacity: isWindowOpen(w.window) ? '1' : '0.6',
-          }"
-          @click="selectRange(w.window)"
-        >
-          {{ w.window }}
-          <Lock v-if="!isWindowOpen(w.window)" class="h-3 w-3" />
-        </button>
-      </div>
+      <SegmentedToggle
+        :model-value="selectedRange"
+        :options="rangeOptions"
+        ariaLabel="Time range"
+        @update:model-value="selectRange"
+      />
       <div
         v-if="loading"
         class="ml-2 h-4 w-4 animate-spin rounded-full border-2"
diff --git a/frontend/src/components/RuntimeBadge.vue b/frontend/src/components/RuntimeBadge.vue
index b9fc04f6..0abae339 100644
--- a/frontend/src/components/RuntimeBadge.vue
+++ b/frontend/src/components/RuntimeBadge.vue
@@ -16,6 +16,8 @@ import { ref } from 'vue'
 import { Box, Layers, Cloud } from 'lucide-vue-next'
 import { useRuntime } from '@/composables/useRuntime'
 import { useRuntimeStore } from '@/stores/runtime'
+import PopoverMenu from '@/components/ui/PopoverMenu.vue'
+import UiButton from '@/components/ui/UiButton.vue'
 
 const { runtimeContext, connected, isSwarm, isKubernetes } = useRuntime()
 const store = useRuntimeStore()
@@ -61,108 +63,101 @@ function formatDetectedAt(iso: string | null): string {
 </script>
 
 <template>
-  <div class="relative" @mouseenter="onEnter" @mouseleave="onLeave">
-    <button
-      class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all hover:bg-mnt-elevated border border-transparent hover:border-mnt-default/50 cursor-pointer"
-      @click="onClick"
-    >
-      <!-- Status dot -->
-      <span
-        class="inline-block h-2 w-2 rounded-full shrink-0"
-        :style="{ backgroundColor: connected ? '#10b981' : '#f43f5e' }"
-      />
-
-      <!-- Runtime icon -->
-      <Layers v-if="isSwarm" :size="16" class="text-mnt-muted shrink-0" />
-      <Cloud v-else-if="isKubernetes" :size="16" class="text-mnt-muted shrink-0" />
-      <Box v-else :size="16" class="text-mnt-muted shrink-0" />
-
-      <!-- Label -->
-      <span class="text-mnt-secondary">{{ capitalize(runtimeContext) }}</span>
-    </button>
-
-    <!-- Popover -->
-    <Transition
-      enter-active-class="transition duration-100 ease-out"
-      enter-from-class="opacity-0 scale-95 -translate-y-1"
-      enter-to-class="opacity-100 scale-100 translate-y-0"
-      leave-active-class="transition duration-75 ease-in"
-      leave-from-class="opacity-100 scale-100 translate-y-0"
-      leave-to-class="opacity-0 scale-95 -translate-y-1"
-    >
-      <div
-        v-if="open"
-        class="absolute right-0 top-full mt-2 w-64 rounded-xl border border-mnt-default bg-mnt-surface shadow-2xl shadow-black/40 overflow-hidden z-50"
-        @mouseenter="onEnter"
-        @mouseleave="onLeave"
+  <PopoverMenu
+    v-model:open="open"
+    ariaLabel="Runtime context"
+    panel-role="group"
+    panel-class="w-64"
+    @mouseenter="onEnter"
+    @mouseleave="onLeave"
+  >
+    <template #trigger>
+      <UiButton
+        variant="ghost"
+        class="border border-transparent text-xs hover:border-mnt-default/50"
+        @click="onClick"
       >
-        <!-- Header -->
-        <div class="px-4 py-3 border-b border-mnt-default">
-          <span class="text-[10px] font-bold text-mnt-muted uppercase tracking-widest">Runtime Context</span>
-        </div>
+        <!-- Status dot -->
+        <span
+          class="inline-block h-2 w-2 rounded-full shrink-0"
+          :style="{ backgroundColor: connected ? 'var(--mnt-status-ok)' : 'var(--mnt-status-down)' }"
+        />
+
+        <!-- Runtime icon -->
+        <Layers v-if="isSwarm" :size="16" class="text-mnt-muted shrink-0" />
+        <Cloud v-else-if="isKubernetes" :size="16" class="text-mnt-muted shrink-0" />
+        <Box v-else :size="16" class="text-mnt-muted shrink-0" />
+
+        <!-- Label -->
+        <span class="text-mnt-secondary">{{ capitalize(runtimeContext) }}</span>
+      </UiButton>
+    </template>
+
+    <!-- Header -->
+    <div class="px-4 py-3 border-b border-mnt-default">
+      <span class="text-[10px] font-bold text-mnt-muted uppercase tracking-widest">Runtime Context</span>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-3 space-y-2">
+      <!-- Runtime -->
+      <div class="flex justify-between items-center">
+        <span class="text-xs text-mnt-muted">Runtime</span>
+        <span class="text-sm text-mnt-primary">{{ capitalize(store.runtime) }}</span>
+      </div>
+
+      <!-- Context -->
+      <div class="flex justify-between items-center">
+        <span class="text-xs text-mnt-muted">Context</span>
+        <span class="text-sm text-mnt-primary">{{ capitalize(runtimeContext) }}</span>
+      </div>
+
+      <!-- Status -->
+      <div class="flex justify-between items-center">
+        <span class="text-xs text-mnt-muted">Status</span>
+        <span
+          class="text-sm font-medium"
+          :class="connected ? 'text-mnt-status-ok' : 'text-mnt-status-down'"
+        >{{ connected ? 'Connected' : 'Disconnected' }}</span>
+      </div>
+
+      <!-- Detected at -->
+      <div class="flex justify-between items-center">
+        <span class="text-xs text-mnt-muted">Detected at</span>
+        <span class="text-sm text-mnt-muted">{{ formatDetectedAt(store.detectedAt) }}</span>
+      </div>
 
-        <!-- Body -->
-        <div class="px-4 py-3 space-y-2">
-          <!-- Runtime -->
+      <!-- Swarm metadata -->
+      <template v-if="isSwarm && 'cluster_id' in store.metadata">
+        <div class="pt-1 mt-1 border-t border-mnt-default/60 space-y-2">
           <div class="flex justify-between items-center">
-            <span class="text-xs text-mnt-muted">Runtime</span>
-            <span class="text-sm text-mnt-primary">{{ capitalize(store.runtime) }}</span>
+            <span class="text-xs text-mnt-muted">Cluster ID</span>
+            <span class="text-sm text-mnt-primary font-mono">{{ (store.metadata as { cluster_id: string }).cluster_id.slice(0, 12) }}</span>
           </div>
-
-          <!-- Context -->
           <div class="flex justify-between items-center">
-            <span class="text-xs text-mnt-muted">Context</span>
-            <span class="text-sm text-mnt-primary">{{ capitalize(runtimeContext) }}</span>
+            <span class="text-xs text-mnt-muted">Managers</span>
+            <span class="text-sm text-mnt-primary">{{ (store.metadata as { manager_count: number }).manager_count }}</span>
           </div>
-
-          <!-- Status -->
           <div class="flex justify-between items-center">
-            <span class="text-xs text-mnt-muted">Status</span>
-            <span
-              class="text-sm font-medium"
-              :class="connected ? 'text-mnt-status-ok' : 'text-mnt-status-down'"
-            >{{ connected ? 'Connected' : 'Disconnected' }}</span>
+            <span class="text-xs text-mnt-muted">Workers</span>
+            <span class="text-sm text-mnt-primary">{{ (store.metadata as { worker_count: number }).worker_count }}</span>
           </div>
+        </div>
+      </template>
 
-          <!-- Detected at -->
+      <!-- Kubernetes metadata -->
+      <template v-if="isKubernetes && 'namespace_count' in store.metadata">
+        <div class="pt-1 mt-1 border-t border-mnt-default/60 space-y-2">
           <div class="flex justify-between items-center">
-            <span class="text-xs text-mnt-muted">Detected at</span>
-            <span class="text-sm text-mnt-muted">{{ formatDetectedAt(store.detectedAt) }}</span>
+            <span class="text-xs text-mnt-muted">Namespaces</span>
+            <span class="text-sm text-mnt-primary">{{ (store.metadata as { namespace_count: number }).namespace_count }}</span>
+          </div>
+          <div class="flex justify-between items-center">
+            <span class="text-xs text-mnt-muted">Nodes</span>
+            <span class="text-sm text-mnt-primary">{{ (store.metadata as { node_count: number }).node_count }}</span>
           </div>
-
-          <!-- Swarm metadata -->
-          <template v-if="isSwarm && 'cluster_id' in store.metadata">
-            <div class="pt-1 mt-1 border-t border-mnt-default/60 space-y-2">
-              <div class="flex justify-between items-center">
-                <span class="text-xs text-mnt-muted">Cluster ID</span>
-                <span class="text-sm text-mnt-primary font-mono">{{ (store.metadata as { cluster_id: string }).cluster_id.slice(0, 12) }}</span>
-              </div>
-              <div class="flex justify-between items-center">
-                <span class="text-xs text-mnt-muted">Managers</span>
-                <span class="text-sm text-mnt-primary">{{ (store.metadata as { manager_count: number }).manager_count }}</span>
-              </div>
-              <div class="flex justify-between items-center">
-                <span class="text-xs text-mnt-muted">Workers</span>
-                <span class="text-sm text-mnt-primary">{{ (store.metadata as { worker_count: number }).worker_count }}</span>
-              </div>
-            </div>
-          </template>
-
-          <!-- Kubernetes metadata -->
-          <template v-if="isKubernetes && 'namespace_count' in store.metadata">
-            <div class="pt-1 mt-1 border-t border-mnt-default/60 space-y-2">
-              <div class="flex justify-between items-center">
-                <span class="text-xs text-mnt-muted">Namespaces</span>
-                <span class="text-sm text-mnt-primary">{{ (store.metadata as { namespace_count: number }).namespace_count }}</span>
-              </div>
-              <div class="flex justify-between items-center">
-                <span class="text-xs text-mnt-muted">Nodes</span>
-                <span class="text-sm text-mnt-primary">{{ (store.metadata as { node_count: number }).node_count }}</span>
-              </div>
-            </div>
-          </template>
         </div>
-      </div>
-    </Transition>
-  </div>
+      </template>
+    </div>
+  </PopoverMenu>
 </template>
diff --git a/frontend/src/components/SilenceRuleManager.vue b/frontend/src/components/SilenceRuleManager.vue
index 26aed599..0bb673d6 100644
--- a/frontend/src/components/SilenceRuleManager.vue
+++ b/frontend/src/components/SilenceRuleManager.vue
@@ -182,7 +182,7 @@ function formatDuration(seconds: number): string {
               {{ formatTime(rule.starts_at) }} - {{ formatTime(rule.expires_at) }}
             </p>
           </div>
-          <UiButton v-if="rule.is_active" variant="danger" size="sm" @click="handleCancel(rule.id)">Cancel</UiButton>
+          <UiButton v-if="rule.is_active" variant="danger-ghost" size="sm" @click="handleCancel(rule.id)">Cancel</UiButton>
           <span v-else class="text-xs" style="color: var(--mnt-text-muted)">
             {{ rule.cancelled_at ? 'Cancelled' : 'Expired' }}
           </span>
diff --git a/frontend/src/components/StatusComponentManager.vue b/frontend/src/components/StatusComponentManager.vue
index 093d30fb..92bf2976 100644
--- a/frontend/src/components/StatusComponentManager.vue
+++ b/frontend/src/components/StatusComponentManager.vue
@@ -36,6 +36,7 @@ import UiButton from '@/components/ui/UiButton.vue'
 import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
 import TabNav, { type TabNavItem } from '@/components/ui/TabNav.vue'
 import SearchInput from '@/components/ui/SearchInput.vue'
+import ChipToggle from '@/components/ui/ChipToggle.vue'
 
 const store = useStatusAdminStore()
 const { getQuota, reload } = useEdition()
@@ -367,13 +368,12 @@ function componentSummary(c: StatusComponent): string {
             </div>
             <div :class="editingCompId ? 'pointer-events-none opacity-50' : ''">
               <SegmentedToggle
-                :model-value="compositionMode"
+                v-model="compositionMode"
                 ariaLabel="Composition mode"
                 :options="[
                   { value: 'explicit', label: 'Specific monitors' },
                   { value: 'match-all', label: 'All monitors of one type' },
                 ]"
-                @update:model-value="(v) => (compositionMode = v as 'explicit' | 'match-all')"
               />
             </div>
           </div>
@@ -382,23 +382,16 @@ function componentSummary(c: StatusComponent): string {
           <div v-if="compositionMode === 'explicit'" class="space-y-3">
             <!-- Selected monitors chips -->
             <div v-if="selectedMonitors.length > 0" class="flex flex-wrap gap-1.5">
-              <span
+              <ChipToggle
                 v-for="m in selectedMonitors"
                 :key="`${m.type}-${m.id}`"
-                class="flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs"
-                style="background: var(--mnt-bg-elevated); border-color: var(--mnt-border-default); color: var(--mnt-text-secondary)"
+                removable
+                :remove-label="`Remove ${m.name}`"
+                @remove="removeSelectedMonitor(m)"
               >
-                <span class="text-[10px] uppercase tracking-wider" style="color: var(--mnt-text-muted)">{{ m.type[0] }}</span>
+                <span class="text-[10px] uppercase tracking-wider text-mnt-muted">{{ m.type[0] }}</span>
                 {{ m.name }}
-                <button
-                  type="button"
-                  @click="removeSelectedMonitor(m)"
-                  class="ml-0.5 opacity-60 hover:opacity-100"
-                  style="color: var(--mnt-text-muted)"
-                >
-                  ×
-                </button>
-              </span>
+              </ChipToggle>
             </div>
             <p v-else class="text-xs text-mnt-muted">No monitors selected. Pick at least one below.</p>
 
@@ -517,7 +510,7 @@ function componentSummary(c: StatusComponent): string {
                 @change="handleOverride(c, ($event.target as HTMLSelectElement).value)"
               />
               <UiButton variant="secondary" size="sm" @click="startEditComp(c)">Edit</UiButton>
-              <UiButton variant="danger" size="sm" @click="handleDeleteComp(c.id)">Delete</UiButton>
+              <UiButton variant="danger-ghost" size="sm" @click="handleDeleteComp(c.id)">Delete</UiButton>
             </div>
           </div>
 
diff --git a/frontend/src/components/StatusIncidentManager.vue b/frontend/src/components/StatusIncidentManager.vue
index 8a0ac257..8d93b3b2 100644
--- a/frontend/src/components/StatusIncidentManager.vue
+++ b/frontend/src/components/StatusIncidentManager.vue
@@ -193,7 +193,7 @@ const incidentStatusOptions = ['investigating', 'identified', 'monitoring', 'res
             <UiButton v-if="inc.status !== 'resolved'" variant="secondary" size="sm" @click="startPostUpdate(inc)">
               Post Update
             </UiButton>
-            <UiButton variant="danger" size="sm" @click="handleDelete(inc.id)">Delete</UiButton>
+            <UiButton variant="danger-ghost" size="sm" @click="handleDelete(inc.id)">Delete</UiButton>
           </div>
         </div>
 
diff --git a/frontend/src/components/StatusMaintenanceManager.vue b/frontend/src/components/StatusMaintenanceManager.vue
index 8aa68991..89cb3f5c 100644
--- a/frontend/src/components/StatusMaintenanceManager.vue
+++ b/frontend/src/components/StatusMaintenanceManager.vue
@@ -186,7 +186,7 @@ function statusStyle(mw: MaintenanceWindow): { bg: string; color: string } {
             >
               Edit
             </UiButton>
-            <UiButton variant="danger" size="sm" @click="handleDelete(mw.id)">Delete</UiButton>
+            <UiButton variant="danger-ghost" size="sm" @click="handleDelete(mw.id)">Delete</UiButton>
           </div>
         </div>
         <p v-if="mw.description" class="mt-1 text-xs" style="color: var(--mnt-text-muted)">{{ mw.description }}</p>
diff --git a/frontend/src/components/StatusSmtpConfig.vue b/frontend/src/components/StatusSmtpConfig.vue
index 6397c528..3f8d651d 100644
--- a/frontend/src/components/StatusSmtpConfig.vue
+++ b/frontend/src/components/StatusSmtpConfig.vue
@@ -133,6 +133,7 @@ function onPasswordInput() {
               :id="id"
               v-model="form.password"
               type="password"
+              autocomplete="new-password"
               :aria-describedby="describedBy"
               :invalid="invalid"
               :placeholder="form.password_set ? 'Password configured' : ''"
diff --git a/frontend/src/components/TopConsumersWidget.vue b/frontend/src/components/TopConsumersWidget.vue
index b3bc778f..3bd474a6 100644
--- a/frontend/src/components/TopConsumersWidget.vue
+++ b/frontend/src/components/TopConsumersWidget.vue
@@ -12,7 +12,7 @@
 -->
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useEdition } from '@/composables/useEdition'
 import { Lock } from 'lucide-vue-next'
 import SegmentedToggle from './ui/SegmentedToggle.vue'
@@ -61,6 +61,17 @@ function switchPeriod(p: Period) {
   emit('update:period', p)
 }
 
+const periodOptions = computed(() =>
+  historyWindows.value.map((w) => ({
+    value: w.window,
+    label: w.window,
+    icon: isWindowOpen(w.window) ? undefined : Lock,
+    disabled: !isWindowOpen(w.window),
+    locked: !isWindowOpen(w.window),
+    dataTest: `period-${w.window}`,
+  })),
+)
+
 function barColor(percent: number): string {
   if (percent >= 90) return 'var(--mnt-status-down)'
   if (percent >= 70) return 'var(--mnt-status-warn)'
@@ -87,7 +98,7 @@ function formatValue(consumer: TopConsumer): string {
         :model-value="activeMetric"
         :options="[{ value: 'cpu', label: 'CPU' }, { value: 'memory', label: 'Memory' }]"
         ariaLabel="Metric"
-        @update:model-value="(v) => switchMetric(v as 'cpu' | 'memory')"
+        @update:model-value="switchMetric"
       />
 
       <div
@@ -95,31 +106,12 @@ function formatValue(consumer: TopConsumer): string {
         :style="{ backgroundColor: 'var(--mnt-border-default)' }"
       />
 
-      <div class="flex gap-1">
-        <button
-          v-for="w in historyWindows"
-          :key="w.window"
-          :data-test="`period-${w.window}`"
-          :data-locked="isWindowOpen(w.window) ? undefined : 'true'"
-          :disabled="!isWindowOpen(w.window)"
-          class="rounded-full px-2.5 py-1 text-xs font-medium transition flex items-center gap-1"
-          :style="{
-            backgroundColor: activePeriod === w.window ? 'var(--mnt-accent)' : 'var(--mnt-bg-elevated)',
-            color: activePeriod === w.window
-              ? 'var(--mnt-text-inverted)'
-              : isWindowOpen(w.window)
-                ? 'var(--mnt-text-secondary)'
-                : 'var(--mnt-text-muted)',
-            border: activePeriod === w.window ? '1px solid var(--mnt-accent)' : '1px solid var(--mnt-border-default)',
-            cursor: isWindowOpen(w.window) ? 'pointer' : 'not-allowed',
-            opacity: isWindowOpen(w.window) ? '1' : '0.5',
-          }"
-          @click="switchPeriod(w.window)"
-        >
-          {{ w.window }}
-          <Lock v-if="!isWindowOpen(w.window)" :size="9" />
-        </button>
-      </div>
+      <SegmentedToggle
+        :model-value="activePeriod"
+        :options="periodOptions"
+        ariaLabel="Period"
+        @update:model-value="switchPeriod"
+      />
     </div>
 
     <!-- Ranked list -->
diff --git a/frontend/src/components/TriggerEditor.vue b/frontend/src/components/TriggerEditor.vue
index 99092a59..53d65769 100644
--- a/frontend/src/components/TriggerEditor.vue
+++ b/frontend/src/components/TriggerEditor.vue
@@ -24,6 +24,7 @@ import UiButton from '@/components/ui/UiButton.vue'
 import FormField from '@/components/ui/FormField.vue'
 import TextInput from '@/components/ui/TextInput.vue'
 import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import ChipToggle from '@/components/ui/ChipToggle.vue'
 
 const props = defineProps<{
   trigger?: AlertTrigger | null
@@ -220,20 +221,16 @@ async function handleSave() {
           <span class="text-mnt-status-down/70 normal-case font-normal">*</span>
         </label>
         <div class="flex flex-wrap gap-2">
-          <button
+          <ChipToggle
             v-for="ch in channelsStore.channels"
             :key="ch.id"
-            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all"
-            :class="
-              selectedChannelIds.includes(ch.id)
-                ? 'bg-mnt-green-500/10 border-mnt-green-500/30 text-mnt-green-400'
-                : 'bg-transparent border-mnt-default text-mnt-muted hover:border-mnt-default hover:text-mnt-secondary'
-            "
-            @click="toggleChannel(ch.id)"
+            :pressed="selectedChannelIds.includes(ch.id)"
+            tone="accent"
+            @toggle="toggleChannel(ch.id)"
           >
             <Plus v-if="!selectedChannelIds.includes(ch.id)" :size="11" />
             {{ ch.name }}
-          </button>
+          </ChipToggle>
         </div>
       </div>
 
@@ -243,21 +240,15 @@ async function handleSave() {
           Severities <span class="text-mnt-muted normal-case font-normal">(empty = match all)</span>
         </label>
         <div class="flex gap-2">
-          <button
+          <ChipToggle
             v-for="sev in SEVERITY_OPTIONS"
             :key="sev"
-            class="px-3 py-1.5 rounded-lg text-xs font-bold border transition-all"
-            :class="
-              severities.includes(sev)
-                ? sev === 'critical'
-                  ? 'bg-mnt-status-down/15 border-mnt-status-down/40 text-mnt-status-down'
-                  : 'bg-mnt-status-warn border-amber-500/40 text-mnt-status-warn'
-                : 'bg-transparent border-mnt-default text-mnt-muted hover:border-mnt-default hover:text-mnt-muted'
-            "
-            @click="toggleSeverity(sev)"
+            :pressed="severities.includes(sev)"
+            :tone="sev === 'critical' ? 'critical' : 'warning'"
+            @toggle="toggleSeverity(sev)"
           >
             {{ sev.charAt(0).toUpperCase() + sev.slice(1) }}
-          </button>
+          </ChipToggle>
         </div>
       </div>
 
@@ -267,19 +258,15 @@ async function handleSave() {
           Sources <span class="text-mnt-muted normal-case font-normal">(empty = match all)</span>
         </label>
         <div class="flex flex-wrap gap-2">
-          <button
+          <ChipToggle
             v-for="src in SOURCE_OPTIONS"
             :key="src"
-            class="px-3 py-1.5 rounded-lg text-xs font-bold border transition-all capitalize"
-            :class="
-              sources.includes(src)
-                ? 'bg-mnt-elevated border-mnt-default text-mnt-secondary'
-                : 'bg-transparent border-mnt-default text-mnt-muted hover:border-mnt-default hover:text-mnt-muted'
-            "
-            @click="toggleSource(src)"
+            :pressed="sources.includes(src)"
+            class="capitalize"
+            @toggle="toggleSource(src)"
           >
             {{ src }}
-          </button>
+          </ChipToggle>
         </div>
       </div>
 
diff --git a/frontend/src/components/TriggerList.vue b/frontend/src/components/TriggerList.vue
index 58dd259d..5a3ff2f9 100644
--- a/frontend/src/components/TriggerList.vue
+++ b/frontend/src/components/TriggerList.vue
@@ -84,7 +84,7 @@ function summarizeFilter(t: AlertTrigger): string {
           @update:model-value="emit('toggle', t)"
         />
         <UiButton variant="secondary" size="sm" :icon="Edit2" @click="emit('edit', t)">Edit</UiButton>
-        <UiButton variant="danger" size="sm" :icon="Trash2" @click="emit('delete', t)">Delete</UiButton>
+        <UiButton variant="danger-ghost" size="sm" :icon="Trash2" @click="emit('delete', t)">Delete</UiButton>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/escalation/PolicyList.vue b/frontend/src/components/escalation/PolicyList.vue
index 405dd619..ef825a59 100644
--- a/frontend/src/components/escalation/PolicyList.vue
+++ b/frontend/src/components/escalation/PolicyList.vue
@@ -17,6 +17,7 @@ import type { EscalationPolicy } from '@/types/escalation'
 import { timeAgo } from '@/utils/time'
 import { Pencil, Trash2, Layers, CheckCircle2, CircleDashed } from 'lucide-vue-next'
 import UiButton from '@/components/ui/UiButton.vue'
+import ChipToggle from '@/components/ui/ChipToggle.vue'
 
 defineProps<{
   policies: EscalationPolicy[]
@@ -102,18 +103,18 @@ function severityLabel(severities: string[]): string {
 
         <!-- Status badge — clickable to toggle -->
         <div class="w-20 flex justify-center">
-          <button
-            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold border transition-all"
-            :class="policy.active
-              ? 'bg-mnt-green-500/10 text-mnt-green-400 border-mnt-green-500/20 hover:bg-mnt-green-500/20'
-              : 'bg-mnt-elevated text-mnt-muted border-mnt-default hover:bg-mnt-elevated'"
+          <ChipToggle
+            :pressed="policy.active"
+            tone="accent"
+            size="sm"
             :title="policy.active ? 'Click to deactivate' : 'Click to activate'"
-            @click.stop="emit('toggleActive', policy.id, !policy.active)"
+            @click.stop
+            @toggle="emit('toggleActive', policy.id, !policy.active)"
           >
             <CheckCircle2 v-if="policy.active" :size="10" />
             <CircleDashed v-else :size="10" />
             {{ policy.active ? 'Active' : 'Inactive' }}
-          </button>
+          </ChipToggle>
         </div>
 
         <!-- Severities -->
@@ -139,7 +140,7 @@ function severityLabel(severities: string[]): string {
             @click.stop="emit('edit', policy)"
           />
           <UiButton
-            variant="ghost"
+            variant="danger-ghost"
             size="sm"
             :icon="Trash2"
             title="Delete"
diff --git a/frontend/src/components/personalization/BrandingSection.vue b/frontend/src/components/personalization/BrandingSection.vue
index e468abdb..d0d53d8b 100644
--- a/frontend/src/components/personalization/BrandingSection.vue
+++ b/frontend/src/components/personalization/BrandingSection.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Upload, Trash2, X } from 'lucide-vue-next'
+import { ref, computed, watch } from 'vue'
+import { Trash2 } from 'lucide-vue-next'
 import { personalizationApi } from '@/services/personalizationApi'
 import { usePersonalizationStore } from '@/stores/personalization'
 import FormField from '@/components/ui/FormField.vue'
 import TextInput from '@/components/ui/TextInput.vue'
 import UiButton from '@/components/ui/UiButton.vue'
+import FileInput from '@/components/ui/FileInput.vue'
 
 type AssetRole = 'logo' | 'favicon' | 'hero'
 
@@ -14,10 +15,6 @@ const store = usePersonalizationStore()
 const title = defineModel<string>('title', { required: true })
 const subtitle = defineModel<string>('subtitle', { required: true })
 
-const logoInputRef = ref<HTMLInputElement | null>(null)
-const faviconInputRef = ref<HTMLInputElement | null>(null)
-const heroInputRef = ref<HTMLInputElement | null>(null)
-
 const logoFile = ref<File | null>(null)
 const faviconFile = ref<File | null>(null)
 const heroFile = ref<File | null>(null)
@@ -29,6 +26,10 @@ const removeLogo = ref(false)
 const removeFavicon = ref(false)
 const removeHero = ref(false)
 
+watch(logoFile, (f) => { if (f) removeLogo.value = false })
+watch(faviconFile, (f) => { if (f) removeFavicon.value = false })
+watch(heroFile, (f) => { if (f) removeHero.value = false })
+
 const hasLogo = computed(() => !!store.settings)
 const hasFavicon = computed(() => !!store.settings)
 const hasHero = computed(() => !!store.settings)
@@ -37,32 +38,10 @@ const logoPreviewUrl = computed(() => personalizationApi.getAssetURL('logo'))
 const faviconPreviewUrl = computed(() => personalizationApi.getAssetURL('favicon'))
 const heroPreviewUrl = computed(() => personalizationApi.getAssetURL('hero'))
 
-function inputRefFor(role: AssetRole): HTMLInputElement | null {
-  if (role === 'logo') return logoInputRef.value
-  if (role === 'favicon') return faviconInputRef.value
-  return heroInputRef.value
-}
-
-function onFileSelected(role: AssetRole, e: Event) {
-  const file = (e.target as HTMLInputElement).files?.[0] ?? null
-  if (role === 'logo') {
-    logoFile.value = file
-    if (file) removeLogo.value = false
-  } else if (role === 'favicon') {
-    faviconFile.value = file
-    if (file) removeFavicon.value = false
-  } else {
-    heroFile.value = file
-    if (file) removeHero.value = false
-  }
-}
-
 function clearSelection(role: AssetRole) {
   if (role === 'logo') logoFile.value = null
   else if (role === 'favicon') faviconFile.value = null
   else heroFile.value = null
-  const input = inputRefFor(role)
-  if (input) input.value = ''
 }
 
 function markForRemoval(role: AssetRole) {
@@ -145,27 +124,7 @@ defineExpose({ flushPendingAssets })
         PNG, JPEG, WebP or SVG — max 200 KB. Recommended: 200×80px
       </p>
       <div class="flex flex-wrap items-center gap-2">
-        <input
-          ref="logoInputRef"
-          type="file"
-          accept="image/png,image/jpeg,image/webp,image/svg+xml"
-          class="sr-only"
-          @change="(e) => onFileSelected('logo', e)"
-        />
-        <UiButton type="button" variant="secondary" size="sm" :icon="Upload" @click="logoInputRef?.click()">
-          Choose file…
-        </UiButton>
-        <span
-          v-if="logoFile"
-          class="truncate max-w-[200px] text-xs"
-          style="color: var(--mnt-text-muted)"
-          :title="logoFile.name"
-        >
-          {{ logoFile.name }}
-        </span>
-        <UiButton v-if="logoFile" type="button" variant="ghost" size="sm" :icon="X" @click="clearSelection('logo')">
-          Clear
-        </UiButton>
+        <FileInput v-model:file="logoFile" accept="image/png,image/jpeg,image/webp,image/svg+xml" />
         <UiButton
           v-if="hasLogo && !logoFile && !removeLogo"
           type="button"
@@ -195,27 +154,7 @@ defineExpose({ flushPendingAssets })
         PNG, ICO or SVG — max 50 KB. Recommended: 32×32px
       </p>
       <div class="flex flex-wrap items-center gap-2">
-        <input
-          ref="faviconInputRef"
-          type="file"
-          accept="image/png,image/x-icon,image/vnd.microsoft.icon,image/svg+xml"
-          class="sr-only"
-          @change="(e) => onFileSelected('favicon', e)"
-        />
-        <UiButton type="button" variant="secondary" size="sm" :icon="Upload" @click="faviconInputRef?.click()">
-          Choose file…
-        </UiButton>
-        <span
-          v-if="faviconFile"
-          class="truncate max-w-[200px] text-xs"
-          style="color: var(--mnt-text-muted)"
-          :title="faviconFile.name"
-        >
-          {{ faviconFile.name }}
-        </span>
-        <UiButton v-if="faviconFile" type="button" variant="ghost" size="sm" :icon="X" @click="clearSelection('favicon')">
-          Clear
-        </UiButton>
+        <FileInput v-model:file="faviconFile" accept="image/png,image/x-icon,image/vnd.microsoft.icon,image/svg+xml" />
         <UiButton
           v-if="hasFavicon && !faviconFile && !removeFavicon"
           type="button"
@@ -244,27 +183,7 @@ defineExpose({ flushPendingAssets })
         PNG, JPEG or WebP — max 500 KB. Recommended: 1200×400px
       </p>
       <div class="flex flex-wrap items-center gap-2">
-        <input
-          ref="heroInputRef"
-          type="file"
-          accept="image/png,image/jpeg,image/webp"
-          class="sr-only"
-          @change="(e) => onFileSelected('hero', e)"
-        />
-        <UiButton type="button" variant="secondary" size="sm" :icon="Upload" @click="heroInputRef?.click()">
-          Choose file…
-        </UiButton>
-        <span
-          v-if="heroFile"
-          class="truncate max-w-[200px] text-xs"
-          style="color: var(--mnt-text-muted)"
-          :title="heroFile.name"
-        >
-          {{ heroFile.name }}
-        </span>
-        <UiButton v-if="heroFile" type="button" variant="ghost" size="sm" :icon="X" @click="clearSelection('hero')">
-          Clear
-        </UiButton>
+        <FileInput v-model:file="heroFile" accept="image/png,image/jpeg,image/webp" />
         <UiButton
           v-if="hasHero && !heroFile && !removeHero"
           type="button"
diff --git a/frontend/src/components/personalization/ColorPaletteSection.vue b/frontend/src/components/personalization/ColorPaletteSection.vue
index 0aa2758c..22e35009 100644
--- a/frontend/src/components/personalization/ColorPaletteSection.vue
+++ b/frontend/src/components/personalization/ColorPaletteSection.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ContrastWarning, PalettePayload } from '@/services/personalizationApi'
-import TextInput from '@/components/ui/TextInput.vue'
 import UiButton from '@/components/ui/UiButton.vue'
+import ColorInput from '@/components/ui/ColorInput.vue'
 
 const palette = defineModel<PalettePayload>('palette', { required: true })
 const warnings = defineModel<ContrastWarning[]>('warnings', { default: () => [] })
@@ -50,19 +50,10 @@ function resetField(key: PaletteKey) {
     <div class="space-y-3">
       <p class="text-xs text-mnt-muted">Chrome</p>
       <div v-for="field in chromeFields" :key="field.key" class="flex items-center gap-3">
-        <input
-          type="color"
-          :value="palette?.[field.key]"
-          class="w-8 h-8 rounded cursor-pointer border border-mnt-default bg-transparent"
-          @input="(e: Event) => palette && (palette = { ...palette, [field.key]: (e.target as HTMLInputElement).value })"
-        />
-        <TextInput
+        <ColorInput
           :model-value="palette?.[field.key]"
-          maxlength="9"
-          mono
-          size="sm"
-          class="w-28"
-          @change="(e: Event) => palette && (palette = { ...palette, [field.key]: (e.target as HTMLInputElement).value })"
+          :label="field.label"
+          @update:model-value="(v) => palette && (palette = { ...palette, [field.key]: v })"
         />
         <span class="flex-1 text-xs text-mnt-muted">{{ field.label }}</span>
         <UiButton variant="ghost" size="sm" @click="resetField(field.key)">Reset</UiButton>
@@ -73,19 +64,10 @@ function resetField(key: PaletteKey) {
     <div class="space-y-3">
       <p class="text-xs text-mnt-muted">Status Indicators</p>
       <div v-for="field in statusFields" :key="field.key" class="flex items-center gap-3">
-        <input
-          type="color"
-          :value="palette?.[field.key]"
-          class="w-8 h-8 rounded cursor-pointer border border-mnt-default bg-transparent"
-          @input="(e: Event) => palette && (palette = { ...palette, [field.key]: (e.target as HTMLInputElement).value })"
-        />
-        <TextInput
+        <ColorInput
           :model-value="palette?.[field.key]"
-          maxlength="9"
-          mono
-          size="sm"
-          class="w-28"
-          @change="(e: Event) => palette && (palette = { ...palette, [field.key]: (e.target as HTMLInputElement).value })"
+          :label="field.label"
+          @update:model-value="(v) => palette && (palette = { ...palette, [field.key]: v })"
         />
         <span class="flex-1 text-xs text-mnt-muted">{{ field.label }}</span>
         <UiButton variant="ghost" size="sm" @click="resetField(field.key)">Reset</UiButton>
diff --git a/frontend/src/components/ui/ChipToggle.vue b/frontend/src/components/ui/ChipToggle.vue
new file mode 100644
index 00000000..a6c43a3b
--- /dev/null
+++ b/frontend/src/components/ui/ChipToggle.vue
@@ -0,0 +1,74 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. See COMMERCIAL-LICENSE.md.
+-->
+<script setup lang="ts">
+import { X } from 'lucide-vue-next'
+
+type Tone = 'neutral' | 'accent' | 'critical' | 'warning'
+
+withDefaults(
+  defineProps<{
+    pressed?: boolean
+    tone?: Tone
+    size?: 'md' | 'sm'
+    disabled?: boolean
+    removable?: boolean
+    removeLabel?: string
+  }>(),
+  { pressed: false, tone: 'neutral', size: 'md', disabled: false, removable: false, removeLabel: 'Remove' },
+)
+
+const emit = defineEmits<{ toggle: []; remove: [] }>()
+
+const toneClasses: Record<Tone, { on: string; off: string }> = {
+  neutral: {
+    on: 'border-mnt-default bg-mnt-elevated text-mnt-secondary',
+    off: 'border-mnt-default bg-transparent text-mnt-muted hover:text-mnt-secondary',
+  },
+  accent: {
+    on: 'border-mnt-green-500/30 bg-mnt-green-500/10 text-mnt-green-400 hover:bg-mnt-green-500/20',
+    off: 'border-mnt-default bg-transparent text-mnt-muted hover:text-mnt-secondary',
+  },
+  critical: {
+    on: 'border-mnt-status-down/40 bg-mnt-status-down/15 text-mnt-status-down',
+    off: 'border-mnt-default bg-transparent text-mnt-muted hover:text-mnt-muted',
+  },
+  warning: {
+    on: 'border-amber-500/40 bg-mnt-status-warn text-mnt-status-warn',
+    off: 'border-mnt-default bg-transparent text-mnt-muted hover:text-mnt-muted',
+  },
+}
+</script>
+
+<template>
+  <span
+    v-if="removable"
+    class="inline-flex items-center gap-1 rounded-full border border-mnt-default bg-mnt-elevated px-2 py-0.5 text-xs text-mnt-secondary"
+  >
+    <slot />
+    <button
+      type="button"
+      class="focus-ring ml-0.5 text-mnt-muted opacity-70 hover:opacity-100"
+      :aria-label="removeLabel"
+      @click="emit('remove')"
+    >
+      <X :size="11" aria-hidden="true" />
+    </button>
+  </span>
+  <button
+    v-else
+    type="button"
+    class="focus-ring inline-flex items-center gap-1.5 rounded-full border font-bold transition-all disabled:cursor-not-allowed disabled:opacity-50"
+    :class="[
+      pressed ? toneClasses[tone].on : toneClasses[tone].off,
+      size === 'md' ? 'px-3 py-1.5 text-xs' : 'px-2 py-0.5 text-[10px]',
+    ]"
+    :aria-pressed="pressed"
+    :disabled="disabled"
+    @click="emit('toggle')"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/frontend/src/components/ui/ColorInput.vue b/frontend/src/components/ui/ColorInput.vue
new file mode 100644
index 00000000..d67e53b7
--- /dev/null
+++ b/frontend/src/components/ui/ColorInput.vue
@@ -0,0 +1,32 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. See COMMERCIAL-LICENSE.md.
+-->
+<script setup lang="ts">
+import TextInput from './TextInput.vue'
+
+defineProps<{ label?: string }>()
+
+const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <input
+      type="color"
+      :value="model"
+      :aria-label="label ? `${label} swatch` : 'Color swatch'"
+      class="h-8 w-8 cursor-pointer rounded border border-mnt-default bg-transparent"
+      @input="model = ($event.target as HTMLInputElement).value"
+    />
+    <TextInput
+      :model-value="model"
+      maxlength="9"
+      mono
+      size="sm"
+      class="w-28"
+      @change="(e: Event) => (model = (e.target as HTMLInputElement).value)"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/DisclosureButton.vue b/frontend/src/components/ui/DisclosureButton.vue
new file mode 100644
index 00000000..e0561700
--- /dev/null
+++ b/frontend/src/components/ui/DisclosureButton.vue
@@ -0,0 +1,46 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. See COMMERCIAL-LICENSE.md.
+-->
+<script setup lang="ts">
+import { ChevronDown } from 'lucide-vue-next'
+
+withDefaults(
+  defineProps<{
+    expanded: boolean
+    controlsId?: string
+    chevronPosition?: 'start' | 'end'
+  }>(),
+  { chevronPosition: 'start' },
+)
+
+const emit = defineEmits<{ toggle: [] }>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="focus-ring flex min-h-[44px] w-full items-center gap-2 text-left"
+    :class="chevronPosition === 'end' ? 'justify-between' : ''"
+    :aria-expanded="expanded"
+    :aria-controls="controlsId"
+    @click="emit('toggle')"
+  >
+    <ChevronDown
+      v-if="chevronPosition === 'start'"
+      :size="14"
+      class="shrink-0 transition-transform"
+      :class="{ '-rotate-90': !expanded }"
+      aria-hidden="true"
+    />
+    <span class="min-w-0 flex-1"><slot /></span>
+    <ChevronDown
+      v-if="chevronPosition === 'end'"
+      :size="14"
+      class="shrink-0 transition-transform"
+      :class="{ '-rotate-180': !expanded }"
+      aria-hidden="true"
+    />
+  </button>
+</template>
diff --git a/frontend/src/components/ui/FileInput.vue b/frontend/src/components/ui/FileInput.vue
new file mode 100644
index 00000000..cbaefe56
--- /dev/null
+++ b/frontend/src/components/ui/FileInput.vue
@@ -0,0 +1,51 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. See COMMERCIAL-LICENSE.md.
+-->
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Upload, X } from 'lucide-vue-next'
+import UiButton from './UiButton.vue'
+
+withDefaults(
+  defineProps<{
+    accept?: string
+    buttonLabel?: string
+  }>(),
+  { buttonLabel: 'Choose file…' },
+)
+
+const file = defineModel<File | null>('file', { default: null })
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+function onChange(event: Event) {
+  file.value = (event.target as HTMLInputElement).files?.[0] ?? null
+}
+
+function clear() {
+  file.value = null
+}
+
+// The native input keeps its own filename even after the model is cleared
+// from outside (e.g. the parent resetting the pending selection).
+watch(file, (value) => {
+  if (!value && inputRef.value) inputRef.value.value = ''
+})
+</script>
+
+<template>
+  <div class="inline-flex flex-wrap items-center gap-2">
+    <input ref="inputRef" type="file" :accept="accept" class="sr-only" @change="onChange" />
+    <UiButton type="button" variant="secondary" size="sm" :icon="Upload" @click="inputRef?.click()">
+      {{ buttonLabel }}
+    </UiButton>
+    <span v-if="file" class="max-w-[200px] truncate text-xs text-mnt-muted" :title="file.name">
+      {{ file.name }}
+    </span>
+    <UiButton v-if="file" type="button" variant="ghost" size="sm" :icon="X" @click="clear">
+      Clear
+    </UiButton>
+  </div>
+</template>
diff --git a/frontend/src/components/ui/OptionCards.vue b/frontend/src/components/ui/OptionCards.vue
new file mode 100644
index 00000000..4cd0fce3
--- /dev/null
+++ b/frontend/src/components/ui/OptionCards.vue
@@ -0,0 +1,78 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. See COMMERCIAL-LICENSE.md.
+-->
+<script setup lang="ts" generic="T extends string">
+import { ref } from 'vue'
+
+export interface OptionCardItem<V extends string = string> {
+  value: V
+  label: string
+  description?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    options: OptionCardItem<T>[]
+    ariaLabel: string
+    columns?: 2 | 3 | 4
+  }>(),
+  { columns: 2 },
+)
+
+const model = defineModel<T | null>({ default: null })
+
+const cardRefs = ref<(HTMLButtonElement | null)[]>([])
+
+function select(option: OptionCardItem<T>) {
+  if (option.disabled) return
+  model.value = option.value
+}
+
+function focusCard(index: number) {
+  const lastIndex = props.options.length - 1
+  const wrapped = index < 0 ? lastIndex : index > lastIndex ? 0 : index
+  cardRefs.value[wrapped]?.focus()
+}
+
+function onKeydown(event: KeyboardEvent, index: number) {
+  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') focusCard(index + 1)
+  else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') focusCard(index - 1)
+  else if (event.key === 'Home') focusCard(0)
+  else if (event.key === 'End') focusCard(props.options.length - 1)
+  else return
+  event.preventDefault()
+}
+
+const columnsClass: Record<2 | 3 | 4, string> = {
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+  4: 'sm:grid-cols-4',
+}
+</script>
+
+<template>
+  <div role="radiogroup" :aria-label="ariaLabel" class="grid grid-cols-1 gap-3" :class="columnsClass[columns]">
+    <button
+      v-for="(option, index) in options"
+      :key="option.value"
+      :ref="(el) => (cardRefs[index] = el as HTMLButtonElement | null)"
+      type="button"
+      role="radio"
+      :aria-checked="model === option.value"
+      :aria-disabled="option.disabled || undefined"
+      :tabindex="model === option.value || (model === null && index === 0) ? 0 : -1"
+      class="focus-ring relative flex flex-col items-center gap-2 rounded-lg border bg-mnt-elevated p-4 text-center transition-all"
+      :class="[
+        option.disabled ? 'cursor-not-allowed opacity-50' : '',
+        model === option.value ? 'border-mnt-accent' : 'border-mnt-default hover:border-mnt-accent',
+      ]"
+      @click="select(option)"
+      @keydown="onKeydown($event, index)"
+    >
+      <slot :option="option" :selected="model === option.value" />
+    </button>
+  </div>
+</template>
diff --git a/frontend/src/components/ui/PopoverMenu.vue b/frontend/src/components/ui/PopoverMenu.vue
new file mode 100644
index 00000000..f9e47eb2
--- /dev/null
+++ b/frontend/src/components/ui/PopoverMenu.vue
@@ -0,0 +1,127 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. See COMMERCIAL-LICENSE.md.
+-->
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+withDefaults(
+  defineProps<{
+    ariaLabel: string
+    align?: 'start' | 'end' | 'stretch'
+    panelClass?: string
+    panelRole?: string
+  }>(),
+  { align: 'end', panelClass: '', panelRole: 'menu' },
+)
+
+const open = defineModel<boolean>('open', { default: false })
+
+function toggle() {
+  open.value = !open.value
+}
+function close() {
+  open.value = false
+}
+
+const rootRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+let lastFocused: HTMLElement | null = null
+
+function menuItems(): HTMLElement[] {
+  if (!panelRef.value) return []
+  return Array.from(
+    panelRef.value.querySelectorAll<HTMLElement>(
+      '[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"])',
+    ),
+  )
+}
+
+function focusItem(index: number) {
+  const items = menuItems()
+  if (items.length === 0) return
+  const wrapped = ((index % items.length) + items.length) % items.length
+  items[wrapped]?.focus()
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    close()
+    return
+  }
+  if (!open.value) return
+  const items = menuItems()
+  if (items.length === 0) return
+  const current = items.indexOf(document.activeElement as HTMLElement)
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    focusItem(current + 1)
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    focusItem(current - 1)
+  } else if (event.key === 'Home') {
+    event.preventDefault()
+    focusItem(0)
+  } else if (event.key === 'End') {
+    event.preventDefault()
+    focusItem(items.length - 1)
+  }
+}
+
+function onDocPointerDown(event: PointerEvent) {
+  if (!open.value) return
+  if (rootRef.value && !rootRef.value.contains(event.target as Node)) close()
+}
+
+onMounted(() => document.addEventListener('pointerdown', onDocPointerDown))
+onUnmounted(() => document.removeEventListener('pointerdown', onDocPointerDown))
+
+// Focus only follows into the panel when the trigger itself already had focus
+// (a keyboard activation) — a hover-opened popover must not steal focus.
+watch(open, async (isOpen) => {
+  if (isOpen) {
+    const activeInRoot = !!(rootRef.value && document.activeElement && rootRef.value.contains(document.activeElement))
+    if (activeInRoot) {
+      lastFocused = document.activeElement as HTMLElement
+      await nextTick()
+      focusItem(0)
+    }
+  } else if (lastFocused) {
+    lastFocused.focus()
+    lastFocused = null
+  }
+})
+
+const alignClass: Record<'start' | 'end' | 'stretch', string> = {
+  start: 'left-0',
+  end: 'right-0',
+  stretch: 'left-0 right-0',
+}
+</script>
+
+<template>
+  <div ref="rootRef" class="relative" @keydown="onKeydown">
+    <slot name="trigger" :open="open" :toggle="toggle" />
+    <Transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="opacity-0 scale-95 -translate-y-1"
+      enter-to-class="opacity-100 scale-100 translate-y-0"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="opacity-100 scale-100 translate-y-0"
+      leave-to-class="opacity-0 scale-95 -translate-y-1"
+    >
+      <div
+        v-if="open"
+        ref="panelRef"
+        :role="panelRole"
+        :aria-label="ariaLabel"
+        class="absolute top-full z-50 mt-1 overflow-hidden rounded-xl border border-mnt-default bg-mnt-surface shadow-mnt-elevated"
+        :class="[alignClass[align], panelClass]"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/frontend/src/components/ui/RadioGroup.vue b/frontend/src/components/ui/RadioGroup.vue
index 32368b02..28154848 100644
--- a/frontend/src/components/ui/RadioGroup.vue
+++ b/frontend/src/components/ui/RadioGroup.vue
@@ -11,18 +11,18 @@
   Source: https://github.com/kolapsis/maintenant
 -->
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string | number">
 import { computed, useId } from 'vue'
 
-export interface RadioOption {
-  value: string | number
+export interface RadioOption<V extends string | number = string | number> {
+  value: V
   label: string
   hint?: string
 }
 
 const props = withDefaults(
   defineProps<{
-    options: RadioOption[]
+    options: RadioOption<T>[]
     name?: string
     ariaLabel?: string
     inline?: boolean
@@ -30,7 +30,7 @@ const props = withDefaults(
   { inline: false },
 )
 
-const model = defineModel<string | number | null>({ default: null })
+const model = defineModel<T | null>({ default: null })
 
 const autoName = useId()
 const groupName = computed(() => props.name ?? autoName)
diff --git a/frontend/src/components/ui/RangeInput.vue b/frontend/src/components/ui/RangeInput.vue
new file mode 100644
index 00000000..7fee3b1f
--- /dev/null
+++ b/frontend/src/components/ui/RangeInput.vue
@@ -0,0 +1,70 @@
+<!--
+  Copyright 2026 Benjamin Touchard (kOlapsis)
+  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+  or a commercial license. See COMMERCIAL-LICENSE.md.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    min: number
+    max: number
+    step?: number
+  }>(),
+  { step: 1 },
+)
+
+const model = defineModel<number>({ required: true })
+
+// Chrome derives the unfilled range track from accent-color, which turns it
+// near-black under our green; the track is drawn as a gradient instead.
+const fillPercent = computed(() => {
+  const ratio = (model.value - props.min) / (props.max - props.min)
+  return `${Math.min(Math.max(ratio, 0), 1) * 100}%`
+})
+</script>
+
+<template>
+  <input
+    v-model.number="model"
+    type="range"
+    :min="min"
+    :max="max"
+    :step="step"
+    :aria-label="label"
+    class="mnt-range w-full"
+    :style="{ '--fill': fillPercent }"
+  />
+</template>
+
+<style scoped>
+.mnt-range {
+  appearance: none;
+  -webkit-appearance: none;
+  height: 6px;
+  border-radius: 999px;
+  background: linear-gradient(to right, var(--mnt-accent) var(--fill), var(--mnt-bg-elevated) var(--fill));
+  outline: none;
+}
+
+.mnt-range::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--mnt-accent);
+  cursor: pointer;
+}
+
+.mnt-range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border: none;
+  border-radius: 50%;
+  background: var(--mnt-accent);
+  cursor: pointer;
+}
+</style>
diff --git a/frontend/src/components/ui/SegmentedToggle.vue b/frontend/src/components/ui/SegmentedToggle.vue
index 06283bf3..f34fddf2 100644
--- a/frontend/src/components/ui/SegmentedToggle.vue
+++ b/frontend/src/components/ui/SegmentedToggle.vue
@@ -3,27 +3,30 @@
   Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
   or a commercial license. See COMMERCIAL-LICENSE.md.
 -->
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string">
 import type { Component } from 'vue'
 
-interface SegmentOption {
-  value: string
+interface SegmentOption<V extends string = string> {
+  value: V
   label?: string
   icon?: Component
   /** Accessible name when the option is icon-only. */
   title?: string
+  disabled?: boolean
+  locked?: boolean
+  dataTest?: string
 }
 
 withDefaults(
   defineProps<{
-    modelValue: string
-    options: SegmentOption[]
+    modelValue: T
+    options: SegmentOption<T>[]
     ariaLabel: string
   }>(),
   {},
 )
 
-const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+const emit = defineEmits<{ 'update:modelValue': [value: T] }>()
 </script>
 
 <template>
@@ -36,9 +39,12 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
       v-for="opt in options"
       :key="opt.value"
       type="button"
+      :data-test="opt.dataTest"
+      :data-locked="opt.locked ? 'true' : undefined"
+      :disabled="opt.disabled"
       :aria-pressed="modelValue === opt.value"
       :title="opt.title ?? opt.label"
-      class="focus-ring inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"
+      class="focus-ring inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-50"
       :class="
         modelValue === opt.value
           ? 'text-mnt-accent'
diff --git a/frontend/src/components/ui/SelectInput.vue b/frontend/src/components/ui/SelectInput.vue
index 251f5a5f..ebb73e79 100644
--- a/frontend/src/components/ui/SelectInput.vue
+++ b/frontend/src/components/ui/SelectInput.vue
@@ -11,25 +11,25 @@
   Source: https://github.com/kolapsis/maintenant
 -->
 
-<script setup lang="ts">
-defineOptions({ inheritAttrs: false })
-
-export interface SelectOption {
-  value: string | number
+<script setup lang="ts" generic="T extends string | number">
+export interface SelectOption<V extends string | number = string | number> {
+  value: V
   label: string
   disabled?: boolean
 }
 
+defineOptions({ inheritAttrs: false })
+
 withDefaults(
   defineProps<{
-    options?: SelectOption[]
+    options?: SelectOption<T>[]
     invalid?: boolean
     size?: 'md' | 'sm'
   }>(),
   { options: () => [], invalid: false, size: 'md' },
 )
 
-const model = defineModel<string | number | null>({ default: '' })
+const model = defineModel<T | null>({ default: null })
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/TabNav.vue b/frontend/src/components/ui/TabNav.vue
index 034775f1..9d9aea71 100644
--- a/frontend/src/components/ui/TabNav.vue
+++ b/frontend/src/components/ui/TabNav.vue
@@ -11,23 +11,23 @@
   Source: https://github.com/kolapsis/maintenant
 -->
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string | number">
 import { ref } from 'vue'
 import CountBadge, { type CountTone } from './CountBadge.vue'
 
-export interface TabNavItem {
-  value: string
+export interface TabNavItem<V extends string | number = string> {
+  value: V
   label: string
-  count?: number
+  count?: number | string
   countTone?: Exclude<CountTone, 'ok'>
 }
 
 const props = defineProps<{
-  items: TabNavItem[]
+  items: TabNavItem<T>[]
   ariaLabel: string
 }>()
 
-const model = defineModel<string>({ required: true })
+const model = defineModel<T>({ required: true })
 
 const tabRefs = ref<(HTMLButtonElement | null)[]>([])
 
@@ -51,7 +51,7 @@ function onKeydown(event: KeyboardEvent, index: number) {
 
 <template>
   <div class="border-b border-mnt-default">
-    <div role="tablist" :aria-label="ariaLabel" class="-mb-px flex gap-6 overflow-x-auto">
+    <div role="tablist" :aria-label="ariaLabel" class="-mb-px flex gap-6 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
       <button
         v-for="(item, index) in items"
         :key="item.value"
diff --git a/frontend/src/components/ui/TextInput.vue b/frontend/src/components/ui/TextInput.vue
index 0d844ff8..2d4e1143 100644
--- a/frontend/src/components/ui/TextInput.vue
+++ b/frontend/src/components/ui/TextInput.vue
@@ -12,6 +12,8 @@
 -->
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
@@ -20,29 +22,40 @@ const props = withDefaults(
     invalid?: boolean
     mono?: boolean
     size?: 'md' | 'sm'
+    variant?: 'default' | 'bare'
   }>(),
-  { type: 'text', invalid: false, mono: false, size: 'md' },
+  { type: 'text', invalid: false, mono: false, size: 'md', variant: 'default' },
 )
 
 const model = defineModel<string | number | null>({ default: '' })
 
+const inputRef = ref<HTMLInputElement | null>(null)
+
 function onInput(event: Event) {
   const raw = (event.target as HTMLInputElement).value
   model.value = props.type === 'number' ? (raw === '' ? null : Number(raw)) : raw
 }
+
+defineExpose({ focus: () => inputRef.value?.focus() })
 </script>
 
 <template>
   <input
+    ref="inputRef"
     v-bind="$attrs"
     :type="type"
     :value="model ?? ''"
     :aria-invalid="invalid || undefined"
-    class="focus-ring w-full rounded-lg border bg-mnt-elevated text-mnt-primary placeholder:text-mnt-muted disabled:cursor-not-allowed disabled:opacity-60"
+    class="focus-ring text-mnt-primary placeholder:text-mnt-muted disabled:cursor-not-allowed disabled:opacity-60"
     :class="[
-      invalid ? 'border-[var(--mnt-status-down-text)]' : 'border-mnt-default',
       mono ? 'font-mono' : '',
-      size === 'md' ? 'min-h-[44px] px-3 text-sm' : 'px-3 py-1.5 text-xs',
+      variant === 'bare'
+        ? 'bg-transparent outline-none'
+        : [
+            'w-full rounded-lg border bg-mnt-elevated',
+            invalid ? 'border-[var(--mnt-status-down-text)]' : 'border-mnt-default',
+            size === 'md' ? 'min-h-[44px] px-3 text-sm' : 'px-3 py-1.5 text-xs',
+          ],
     ]"
     @input="onInput"
   />
diff --git a/frontend/src/components/ui/UiButton.vue b/frontend/src/components/ui/UiButton.vue
index cdcf6026..049dcf07 100644
--- a/frontend/src/components/ui/UiButton.vue
+++ b/frontend/src/components/ui/UiButton.vue
@@ -15,7 +15,7 @@
 import type { Component } from 'vue'
 import { Loader2 } from 'lucide-vue-next'
 
-type Variant = 'primary' | 'secondary' | 'danger' | 'ghost'
+type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'danger-ghost'
 
 withDefaults(
   defineProps<{
@@ -25,6 +25,8 @@ withDefaults(
     loading?: boolean
     disabled?: boolean
     icon?: Component
+    block?: boolean
+    align?: 'center' | 'start' | 'between'
   }>(),
   {
     variant: 'secondary',
@@ -33,14 +35,23 @@ withDefaults(
     loading: false,
     disabled: false,
     icon: undefined,
+    block: false,
+    align: 'center',
   },
 )
 
+const justifyClasses: Record<'center' | 'start' | 'between', string> = {
+  center: 'justify-center',
+  start: 'justify-start',
+  between: 'justify-between',
+}
+
 const variantClasses: Record<Variant, string> = {
   primary: 'bg-[var(--mnt-accent)] text-mnt-inverted hover:bg-[var(--mnt-accent-hover)]',
   secondary: 'border border-mnt-default text-mnt-secondary hover:bg-mnt-elevated',
   danger: 'bg-[var(--mnt-status-down)] text-mnt-inverted hover:opacity-90',
   ghost: 'text-mnt-muted hover:bg-mnt-elevated hover:text-mnt-primary',
+  'danger-ghost': 'text-mnt-status-down hover:bg-[var(--mnt-status-down-bg)]',
 }
 </script>
 
@@ -48,10 +59,12 @@ const variantClasses: Record<Variant, string> = {
   <button
     :type="type"
     :disabled="disabled || loading"
-    class="focus-ring inline-flex items-center justify-center gap-1.5 rounded-lg font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+    class="focus-ring inline-flex items-center gap-1.5 rounded-lg font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
     :class="[
       variantClasses[variant],
       size === 'md' ? 'min-h-[44px] px-4 text-sm' : 'min-h-[32px] px-2.5 py-1 text-xs',
+      justifyClasses[align],
+      block ? 'flex w-full' : '',
     ]"
   >
     <Loader2 v-if="loading" :size="size === 'md' ? 16 : 14" class="animate-spin" aria-hidden="true" />
diff --git a/frontend/src/components/ui/__tests__/ChipToggle.spec.ts b/frontend/src/components/ui/__tests__/ChipToggle.spec.ts
new file mode 100644
index 00000000..fcaca248
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/ChipToggle.spec.ts
@@ -0,0 +1,43 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ChipToggle from '@/components/ui/ChipToggle.vue'
+
+describe('ChipToggle', () => {
+  it('reflects pressed in aria-pressed', () => {
+    const wrapper = mount(ChipToggle, { props: { pressed: true }, slots: { default: 'critical' } })
+    expect(wrapper.find('button').attributes('aria-pressed')).toBe('true')
+  })
+
+  it('emits toggle on click', async () => {
+    const wrapper = mount(ChipToggle, { props: { pressed: false }, slots: { default: 'critical' } })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('toggle')).toHaveLength(1)
+  })
+
+  it('does not emit toggle when disabled', async () => {
+    const wrapper = mount(ChipToggle, { props: { pressed: false, disabled: true }, slots: { default: 'critical' } })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('toggle')).toBeUndefined()
+  })
+
+  it('renders a removable chip with an accessible remove button instead of a toggle', () => {
+    const wrapper = mount(ChipToggle, {
+      props: { removable: true, removeLabel: 'Remove container:42' },
+      slots: { default: 'container:42' },
+    })
+    expect(wrapper.find('button[aria-pressed]').exists()).toBe(false)
+    const removeButton = wrapper.find('button[aria-label="Remove container:42"]')
+    expect(removeButton.exists()).toBe(true)
+  })
+
+  it('emits remove when the remove button is clicked', async () => {
+    const wrapper = mount(ChipToggle, { props: { removable: true }, slots: { default: 'container:42' } })
+    await wrapper.find('button[aria-label="Remove"]').trigger('click')
+    expect(wrapper.emitted('remove')).toHaveLength(1)
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/ColorInput.spec.ts b/frontend/src/components/ui/__tests__/ColorInput.spec.ts
new file mode 100644
index 00000000..93fea07e
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/ColorInput.spec.ts
@@ -0,0 +1,31 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ColorInput from '@/components/ui/ColorInput.vue'
+
+describe('ColorInput', () => {
+  it('renders a color swatch and a text field with the same value', () => {
+    const wrapper = mount(ColorInput, { props: { modelValue: '#22C55E', label: 'Accent' } })
+    expect(wrapper.find('input[type="color"]').element).toHaveProperty('value', '#22c55e')
+    expect(wrapper.find('input[type="text"]').element).toHaveProperty('value', '#22C55E')
+  })
+
+  it('emits update:modelValue when the swatch changes', async () => {
+    const wrapper = mount(ColorInput, { props: { modelValue: '#000000' } })
+    const swatch = wrapper.find('input[type="color"]')
+    await swatch.setValue('#ffffff')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#ffffff'])
+  })
+
+  it('emits update:modelValue when the hex text field changes', async () => {
+    const wrapper = mount(ColorInput, { props: { modelValue: '#000000' } })
+    const text = wrapper.find('input[type="text"]')
+    await text.setValue('#123ABC')
+    await text.trigger('change')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#123ABC'])
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/DisclosureButton.spec.ts b/frontend/src/components/ui/__tests__/DisclosureButton.spec.ts
new file mode 100644
index 00000000..4c29976c
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/DisclosureButton.spec.ts
@@ -0,0 +1,40 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DisclosureButton from '@/components/ui/DisclosureButton.vue'
+
+describe('DisclosureButton', () => {
+  it('reflects expanded state in aria-expanded', () => {
+    const wrapper = mount(DisclosureButton, { props: { expanded: true }, slots: { default: 'Group' } })
+    expect(wrapper.find('button').attributes('aria-expanded')).toBe('true')
+  })
+
+  it('sets aria-controls from controlsId', () => {
+    const wrapper = mount(DisclosureButton, {
+      props: { expanded: false, controlsId: 'panel-1' },
+      slots: { default: 'Group' },
+    })
+    expect(wrapper.find('button').attributes('aria-controls')).toBe('panel-1')
+  })
+
+  it('emits toggle on click', async () => {
+    const wrapper = mount(DisclosureButton, { props: { expanded: false }, slots: { default: 'Group' } })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('toggle')).toHaveLength(1)
+  })
+
+  it('places the chevron after the content when chevronPosition is end', () => {
+    const wrapper = mount(DisclosureButton, {
+      props: { expanded: false, chevronPosition: 'end' },
+      slots: { default: '<span class="label">Component</span>' },
+    })
+    const button = wrapper.find('button')
+    const label = button.find('.label').element
+    const chevron = button.find('svg').element
+    expect(label.compareDocumentPosition(chevron) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/FileInput.spec.ts b/frontend/src/components/ui/__tests__/FileInput.spec.ts
new file mode 100644
index 00000000..20f08f35
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/FileInput.spec.ts
@@ -0,0 +1,38 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FileInput from '@/components/ui/FileInput.vue'
+
+function makeFile(name = 'logo.png') {
+  return new File(['x'], name, { type: 'image/png' })
+}
+
+describe('FileInput', () => {
+  it('shows no filename and no clear button until a file is picked', () => {
+    const wrapper = mount(FileInput, { props: { file: null } })
+    expect(wrapper.text()).not.toContain('.png')
+    expect(wrapper.findAll('button')).toHaveLength(1)
+  })
+
+  it('emits update:file with the picked file', async () => {
+    const wrapper = mount(FileInput, { props: { file: null } })
+    const file = makeFile()
+    const input = wrapper.find('input[type="file"]')
+    Object.defineProperty(input.element, 'files', { value: [file] })
+    await input.trigger('change')
+    expect(wrapper.emitted('update:file')?.[0]).toEqual([file])
+  })
+
+  it('shows the filename and a clear button once a file is set, and clears on click', async () => {
+    const wrapper = mount(FileInput, { props: { file: makeFile('hero.png') } })
+    expect(wrapper.text()).toContain('hero.png')
+    const buttons = wrapper.findAll('button')
+    expect(buttons).toHaveLength(2)
+    await buttons[1]!.trigger('click')
+    expect(wrapper.emitted('update:file')?.[0]).toEqual([null])
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/OptionCards.spec.ts b/frontend/src/components/ui/__tests__/OptionCards.spec.ts
new file mode 100644
index 00000000..08bed2d0
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/OptionCards.spec.ts
@@ -0,0 +1,47 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import OptionCards, { type OptionCardItem } from '@/components/ui/OptionCards.vue'
+
+const options: OptionCardItem[] = [
+  { value: 'discord', label: 'Discord', description: 'Webhook' },
+  { value: 'webhook', label: 'Webhook', description: 'HTTP POST' },
+  { value: 'email', label: 'Email', description: 'SMTP', disabled: true },
+]
+
+describe('OptionCards', () => {
+  it('marks the selected option with aria-checked', () => {
+    const wrapper = mount(OptionCards, { props: { options, ariaLabel: 'Channel type', modelValue: 'webhook' } })
+    const radios = wrapper.findAll('[role="radio"]')
+    expect(radios[0]?.attributes('aria-checked')).toBe('false')
+    expect(radios[1]?.attributes('aria-checked')).toBe('true')
+  })
+
+  it('updates the model on click', async () => {
+    const wrapper = mount(OptionCards, { props: { options, ariaLabel: 'Channel type', modelValue: null } })
+    await wrapper.findAll('[role="radio"]')[0]?.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['discord'])
+  })
+
+  it('does not select a disabled option', async () => {
+    const wrapper = mount(OptionCards, { props: { options, ariaLabel: 'Channel type', modelValue: null } })
+    await wrapper.findAll('[role="radio"]')[2]?.trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('moves focus with arrow keys, wrapping at the ends', async () => {
+    const wrapper = mount(OptionCards, {
+      props: { options, ariaLabel: 'Channel type', modelValue: null },
+      attachTo: document.body,
+    })
+    const radios = wrapper.findAll('[role="radio"]')
+    ;(radios[0]!.element as HTMLElement).focus()
+    await radios[0]!.trigger('keydown', { key: 'ArrowLeft' })
+    expect(document.activeElement).toBe(radios[2]!.element)
+    wrapper.unmount()
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/PopoverMenu.spec.ts b/frontend/src/components/ui/__tests__/PopoverMenu.spec.ts
new file mode 100644
index 00000000..94919c33
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/PopoverMenu.spec.ts
@@ -0,0 +1,61 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PopoverMenu from '@/components/ui/PopoverMenu.vue'
+
+function mountMenu(open = false) {
+  return mount(PopoverMenu, {
+    props: { ariaLabel: 'Demo menu', open },
+    slots: {
+      trigger: '<button type="button" class="trigger">Open</button>',
+      default: `
+        <button type="button" role="menuitem" class="item-a">A</button>
+        <button type="button" role="menuitem" class="item-b">B</button>
+      `,
+    },
+    attachTo: document.body,
+  })
+}
+
+describe('PopoverMenu', () => {
+  it('renders the panel only when open', () => {
+    const closed = mountMenu(false)
+    expect(closed.find('[role="menu"]').exists()).toBe(false)
+
+    const open = mountMenu(true)
+    expect(open.find('[role="menu"]').exists()).toBe(true)
+    open.unmount()
+    closed.unmount()
+  })
+
+  it('closes on Escape', async () => {
+    const wrapper = mountMenu(true)
+    await wrapper.trigger('keydown', { key: 'Escape' })
+    expect(wrapper.emitted('update:open')?.[0]).toEqual([false])
+    wrapper.unmount()
+  })
+
+  it('closes on an outside pointerdown', async () => {
+    const wrapper = mountMenu(true)
+    document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('update:open')?.[0]).toEqual([false])
+    wrapper.unmount()
+  })
+
+  it('moves focus between items with ArrowDown/ArrowUp', async () => {
+    const wrapper = mountMenu(true)
+    const items = wrapper.findAll('[role="menuitem"]')
+    ;(items[0]!.element as HTMLElement).focus()
+    await wrapper.trigger('keydown', { key: 'ArrowDown' })
+    expect(document.activeElement).toBe(items[1]!.element)
+
+    await wrapper.trigger('keydown', { key: 'ArrowUp' })
+    expect(document.activeElement).toBe(items[0]!.element)
+    wrapper.unmount()
+  })
+})
diff --git a/frontend/src/components/ui/__tests__/RangeInput.spec.ts b/frontend/src/components/ui/__tests__/RangeInput.spec.ts
new file mode 100644
index 00000000..e041ee8a
--- /dev/null
+++ b/frontend/src/components/ui/__tests__/RangeInput.spec.ts
@@ -0,0 +1,30 @@
+// Copyright 2026 Benjamin Touchard (Kolapsis)
+//
+// Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
+// or a commercial license. See COMMERCIAL-LICENSE.md.
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RangeInput from '@/components/ui/RangeInput.vue'
+
+describe('RangeInput', () => {
+  it('renders a native range input with the given bounds', () => {
+    const wrapper = mount(RangeInput, { props: { label: 'CPU threshold', min: 1, max: 100, modelValue: 90 } })
+    const input = wrapper.find('input[type="range"]')
+    expect(input.attributes('min')).toBe('1')
+    expect(input.attributes('max')).toBe('100')
+    expect(input.attributes('aria-label')).toBe('CPU threshold')
+  })
+
+  it('emits update:modelValue as a number on input', async () => {
+    const wrapper = mount(RangeInput, { props: { label: 'CPU threshold', min: 1, max: 100, modelValue: 50 } })
+    const input = wrapper.find('input')
+    await input.setValue('75')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([75])
+  })
+
+  it('derives the gradient fill from the current value', () => {
+    const wrapper = mount(RangeInput, { props: { label: 'CPU threshold', min: 0, max: 100, modelValue: 25 } })
+    expect((wrapper.find('input').element as HTMLElement).style.getPropertyValue('--fill')).toBe('25%')
+  })
+})
diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
index 30dc0db6..0584db2b 100644
--- a/frontend/src/layouts/DefaultLayout.vue
+++ b/frontend/src/layouts/DefaultLayout.vue
@@ -274,14 +274,13 @@ watch(
     <div
       class="mobile-bar md:hidden fixed top-0 left-0 right-0 z-30 flex items-center h-14 px-4 backdrop-blur-md border-b border-mnt-default"
     >
-      <button
-        @click="mobileMenuOpen = !mobileMenuOpen"
-        class="p-3 rounded-md text-mnt-muted hover:text-mnt-primary transition-colors"
+      <UiButton
+        variant="ghost"
+        :icon="mobileMenuOpen ? X : Menu"
         aria-label="Toggle navigation"
-      >
-        <Menu v-if="!mobileMenuOpen" :size="20" />
-        <X v-else :size="20" />
-      </button>
+        :aria-expanded="mobileMenuOpen"
+        @click="mobileMenuOpen = !mobileMenuOpen"
+      />
       <div class="ml-3 flex items-center gap-2">
         <img src="/icon.svg" alt="maintenant" class="w-6 h-6 rounded-md" />
         <span class="text-sm font-bold text-mnt-primary">maintenant</span>
diff --git a/frontend/src/pages/DesignSystemPage.vue b/frontend/src/pages/DesignSystemPage.vue
index 325f2aa6..9e6054c6 100644
--- a/frontend/src/pages/DesignSystemPage.vue
+++ b/frontend/src/pages/DesignSystemPage.vue
@@ -41,6 +41,13 @@ import CheckboxInput from '@/components/ui/CheckboxInput.vue'
 import RadioGroup from '@/components/ui/RadioGroup.vue'
 import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
 import UiModal from '@/components/ui/UiModal.vue'
+import PopoverMenu from '@/components/ui/PopoverMenu.vue'
+import DisclosureButton from '@/components/ui/DisclosureButton.vue'
+import ChipToggle from '@/components/ui/ChipToggle.vue'
+import OptionCards, { type OptionCardItem } from '@/components/ui/OptionCards.vue'
+import RangeInput from '@/components/ui/RangeInput.vue'
+import FileInput from '@/components/ui/FileInput.vue'
+import ColorInput from '@/components/ui/ColorInput.vue'
 import EndpointStatusBadge from '@/components/EndpointStatusBadge.vue'
 import HeartbeatStatusBadge from '@/components/HeartbeatStatusBadge.vue'
 import CertificateStatusBadge from '@/components/CertificateStatusBadge.vue'
@@ -159,7 +166,6 @@ const sampleKpis = [
 
 const lastSelected = ref('')
 
-// Form controls demo state
 const demoTab = ref('history')
 const tabItems: TabNavItem[] = [
   { value: 'history', label: 'History' },
@@ -186,6 +192,39 @@ function triggerButtonLoading() {
 }
 
 const demoModalOpen = ref(false)
+
+const demoPopoverOpen = ref(false)
+const demoPopoverNamespaces = ref<string[]>(['prod'])
+
+const demoDisclosureExpanded = ref(true)
+
+const demoChipSeverities = ref<string[]>(['critical'])
+const demoChipMonitors = ref([
+  { id: 'c-1', name: 'traefik' },
+  { id: 'c-2', name: 'redis' },
+])
+function removeChipMonitor(id: string) {
+  demoChipMonitors.value = demoChipMonitors.value.filter((m) => m.id !== id)
+}
+
+const demoChannelType = ref<string | null>('discord')
+const demoChannelOptions: OptionCardItem[] = [
+  { value: 'discord', label: 'Discord', description: 'Post alerts via webhook' },
+  { value: 'webhook', label: 'Webhook', description: 'HTTP POST with JSON payload' },
+  { value: 'email', label: 'Email', description: 'Requires SMTP', disabled: true },
+]
+
+const demoRangeValue = ref(90)
+
+const demoLogoFile = ref<File | null>(null)
+
+const demoAccentColor = ref('#22C55E')
+
+// UiButton danger-ghost demo
+const demoDangerLoading = ref(false)
+
+// TextInput bare variant demo (embedded in a styled bar)
+const demoBareQuery = ref('')
 </script>
 
 <template>
@@ -432,6 +471,9 @@ const demoModalOpen = ref(false)
         <UiButton variant="primary" :icon="Plus">Primary</UiButton>
         <UiButton variant="secondary">Secondary</UiButton>
         <UiButton variant="danger" :icon="Trash2">Danger</UiButton>
+        <UiButton variant="danger-ghost" :icon="Trash2" :loading="demoDangerLoading" @click="demoDangerLoading = !demoDangerLoading">
+          Danger ghost
+        </UiButton>
         <UiButton variant="ghost">Ghost</UiButton>
         <UiButton variant="primary" size="sm">Small</UiButton>
         <UiButton variant="secondary" disabled>Disabled</UiButton>
@@ -439,6 +481,9 @@ const demoModalOpen = ref(false)
           {{ demoButtonLoading ? 'Saving…' : 'Click to load' }}
         </UiButton>
       </div>
+      <div class="flex flex-col gap-1 rounded-xl border border-mnt-default bg-mnt-surface p-4">
+        <UiButton variant="ghost" block align="between">Row action (block + align="between")</UiButton>
+      </div>
     </section>
 
     <!-- Form fields -->
@@ -500,6 +545,12 @@ const demoModalOpen = ref(false)
         <span>sm ·</span>
         <TextInput model-value="" size="sm" placeholder="sm" class="max-w-[140px]" />
       </div>
+
+      <!-- variant="bare": no chrome of its own, for inputs embedded in an already-styled bar -->
+      <div class="flex items-center gap-1.5 rounded-lg border border-mnt-default bg-mnt-primary px-2 py-1">
+        <TextInput v-model="demoBareQuery" variant="bare" placeholder="Search logs…" class="w-40 text-xs" />
+        <UiButton variant="ghost" size="sm">Aa</UiButton>
+      </div>
     </section>
 
     <!-- Checkbox / radio / toggle -->
@@ -543,6 +594,131 @@ const demoModalOpen = ref(false)
       </div>
     </section>
 
+    <!-- PopoverMenu -->
+    <section class="space-y-3">
+      <SectionHeader title="PopoverMenu (trigger slot · menuitem/menuitemcheckbox · arrow keys)" />
+      <div class="flex flex-wrap items-center gap-6 rounded-xl border border-mnt-default bg-mnt-surface p-4">
+        <PopoverMenu v-model:open="demoPopoverOpen" ariaLabel="Demo namespaces" panel-class="min-w-52">
+          <template #trigger="{ toggle }">
+            <UiButton variant="secondary" @click="toggle">
+              {{ demoPopoverNamespaces.length }} namespaces
+            </UiButton>
+          </template>
+          <UiButton
+            v-for="ns in ['prod', 'staging', 'dev']"
+            :key="ns"
+            variant="ghost"
+            block
+            align="between"
+            role="menuitemcheckbox"
+            :aria-checked="demoPopoverNamespaces.includes(ns)"
+            class="rounded-none px-4 py-2.5 text-sm"
+            @click="
+              demoPopoverNamespaces = demoPopoverNamespaces.includes(ns)
+                ? demoPopoverNamespaces.filter((n) => n !== ns)
+                : [...demoPopoverNamespaces, ns]
+            "
+          >
+            <span class="font-mono">{{ ns }}</span>
+            <span v-if="demoPopoverNamespaces.includes(ns)" class="text-mnt-green-400">✓</span>
+          </UiButton>
+        </PopoverMenu>
+      </div>
+    </section>
+
+    <!-- DisclosureButton -->
+    <section class="space-y-3">
+      <SectionHeader title="DisclosureButton (chevron · aria-expanded/controls · start or end chevron)" />
+      <div class="rounded-xl border border-mnt-default bg-mnt-surface p-2">
+        <DisclosureButton
+          :expanded="demoDisclosureExpanded"
+          controls-id="ds-disclosure-demo"
+          class="px-2 py-2 text-mnt-secondary hover:bg-mnt-elevated"
+          @toggle="demoDisclosureExpanded = !demoDisclosureExpanded"
+        >
+          <span class="flex items-center gap-2">
+            <span class="font-semibold text-mnt-primary">production</span>
+            <CountBadge :value="12" />
+          </span>
+        </DisclosureButton>
+        <div v-if="demoDisclosureExpanded" id="ds-disclosure-demo" class="px-4 pb-2 text-sm text-mnt-muted">
+          12 containers, all running.
+        </div>
+      </div>
+    </section>
+
+    <!-- ChipToggle -->
+    <section class="space-y-3">
+      <SectionHeader title="ChipToggle (selectable · removable)" />
+      <div class="flex flex-wrap items-center gap-2 rounded-xl border border-mnt-default bg-mnt-surface p-4">
+        <ChipToggle
+          v-for="sev in ['critical', 'warning']"
+          :key="sev"
+          :pressed="demoChipSeverities.includes(sev)"
+          :tone="sev === 'critical' ? 'critical' : 'warning'"
+          @toggle="
+            demoChipSeverities = demoChipSeverities.includes(sev)
+              ? demoChipSeverities.filter((s) => s !== sev)
+              : [...demoChipSeverities, sev]
+          "
+        >
+          {{ sev }}
+        </ChipToggle>
+        <ChipToggle tone="accent" pressed>accent</ChipToggle>
+      </div>
+      <div class="flex flex-wrap items-center gap-1.5 rounded-xl border border-mnt-default bg-mnt-surface p-4">
+        <ChipToggle
+          v-for="m in demoChipMonitors"
+          :key="m.id"
+          removable
+          :remove-label="`Remove ${m.name}`"
+          @remove="removeChipMonitor(m.id)"
+        >
+          {{ m.name }}
+        </ChipToggle>
+        <span v-if="demoChipMonitors.length === 0" class="text-xs text-mnt-muted">All removed</span>
+      </div>
+    </section>
+
+    <!-- OptionCards -->
+    <section class="space-y-3">
+      <SectionHeader title="OptionCards (radio-card group · icon slot · disabled option)" />
+      <OptionCards
+        v-model="demoChannelType"
+        :options="demoChannelOptions"
+        ariaLabel="Demo channel type"
+        :columns="3"
+        class="rounded-xl border border-mnt-default bg-mnt-surface p-4"
+      >
+        <template #default="{ option }">
+          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-mnt-surface">
+            <component :is="option.value === 'email' ? ServerOff : Globe" :size="20" class="text-mnt-muted" />
+          </div>
+          <span class="text-sm font-medium text-mnt-primary">{{ option.label }}</span>
+          <span class="text-[11px] text-mnt-muted">{{ option.description }}</span>
+        </template>
+      </OptionCards>
+    </section>
+
+    <!-- RangeInput / FileInput / ColorInput -->
+    <section class="space-y-3">
+      <SectionHeader title="RangeInput + FileInput + ColorInput" />
+      <div class="grid gap-4 rounded-xl border border-mnt-default bg-mnt-surface p-4 sm:grid-cols-3">
+        <div>
+          <label class="mb-1 block text-xs text-mnt-muted">CPU threshold ({{ demoRangeValue }}%)</label>
+          <RangeInput v-model="demoRangeValue" label="CPU threshold" :min="1" :max="100" />
+        </div>
+        <div>
+          <label class="mb-1 block text-xs text-mnt-muted">Logo</label>
+          <FileInput v-model:file="demoLogoFile" accept="image/png,image/svg+xml" />
+        </div>
+        <div>
+          <label class="mb-1 block text-xs text-mnt-muted">Accent color</label>
+          <ColorInput v-model="demoAccentColor" label="Accent" />
+        </div>
+      </div>
+    </section>
+
     <p class="flex items-center gap-2 text-xs text-mnt-muted">
       <Heart :size="13" aria-hidden="true" />
       Tokens-only · dual-theme · keyboard-navigable · respects reduced-motion
diff --git a/frontend/src/pages/EndpointsPage.vue b/frontend/src/pages/EndpointsPage.vue
index dc0e431e..4ce64d8c 100644
--- a/frontend/src/pages/EndpointsPage.vue
+++ b/frontend/src/pages/EndpointsPage.vue
@@ -249,10 +249,9 @@ onUnmounted(() => {
           <div>
             <label class="mb-1 block text-xs font-medium" :style="{ color: 'var(--mnt-text-secondary)' }">Type</label>
             <SegmentedToggle
-              :model-value="form.endpoint_type"
+              v-model="form.endpoint_type"
               :options="[{ value: 'http', label: 'HTTP' }, { value: 'tcp', label: 'TCP' }]"
               ariaLabel="Endpoint type"
-              @update:model-value="(v) => (form.endpoint_type = v as 'http' | 'tcp')"
             />
           </div>
         </div>
diff --git a/frontend/src/pages/PublicStatusPage.vue b/frontend/src/pages/PublicStatusPage.vue
index f224d8cc..3ac8d9ae 100644
--- a/frontend/src/pages/PublicStatusPage.vue
+++ b/frontend/src/pages/PublicStatusPage.vue
@@ -17,6 +17,7 @@ import StatusComponentBreakdown from '@/components/StatusComponentBreakdown.vue'
 import { useStatusPageI18n } from '@/composables/useStatusPageI18n'
 import { guardedFetch } from '@/services/apiFetch'
 import type { MonitorRef } from '@/services/statusApi'
+import DisclosureButton from '@/components/ui/DisclosureButton.vue'
 
 // --- Personalization settings ---
 interface PublicSettings {
@@ -309,27 +310,34 @@ function formatDate(iso: string) {
             }"
           >
             <div v-for="comp in data.components" :key="comp.id">
-              <button
-                type="button"
-                class="flex w-full items-center justify-between px-5 py-3.5 text-left transition-colors hover:bg-slate-800/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-500"
-                :aria-expanded="expandedComponents.has(comp.id)"
-                :aria-controls="`breakdown-${comp.id}`"
-                @click="toggleExpanded(comp.id)"
+              <DisclosureButton
+                v-if="comp.monitors?.length"
+                :expanded="expandedComponents.has(comp.id)"
+                chevron-position="end"
+                :controls-id="`breakdown-${comp.id}`"
+                class="px-5 py-3.5 text-left transition-colors hover:bg-slate-800/20"
+                @toggle="toggleExpanded(comp.id)"
                 @keydown="handleRowKeydown($event, comp.id)"
               >
+                <div class="flex w-full items-center justify-between">
+                  <span class="text-sm font-medium">{{ comp.name }}</span>
+                  <div class="flex items-center gap-2">
+                    <span :class="['text-xs font-medium', componentStatusStyle(comp.status).text]">
+                      {{ componentStatusStyle(comp.status).label }}
+                    </span>
+                    <span :class="['h-2 w-2 rounded-full', componentStatusStyle(comp.status).dot]" />
+                  </div>
+                </div>
+              </DisclosureButton>
+              <div v-else class="flex w-full items-center justify-between px-5 py-3.5 text-left">
                 <span class="text-sm font-medium">{{ comp.name }}</span>
                 <div class="flex items-center gap-2">
                   <span :class="['text-xs font-medium', componentStatusStyle(comp.status).text]">
                     {{ componentStatusStyle(comp.status).label }}
                   </span>
                   <span :class="['h-2 w-2 rounded-full', componentStatusStyle(comp.status).dot]" />
-                  <span
-                    v-if="comp.monitors?.length"
-                    class="text-slate-600 transition-transform"
-                    :style="{ transform: expandedComponents.has(comp.id) ? 'rotate(180deg)' : 'rotate(0deg)' }"
-                  >&#8964;</span>
                 </div>
-              </button>
+              </div>
               <div v-if="expandedComponents.has(comp.id) && comp.monitors?.length" :id="`breakdown-${comp.id}`" class="px-5 pb-3">
                 <StatusComponentBreakdown :monitors="comp.monitors" />
               </div>
diff --git a/frontend/src/pages/ServicesPage.vue b/frontend/src/pages/ServicesPage.vue
index 66e81419..c034b824 100644
--- a/frontend/src/pages/ServicesPage.vue
+++ b/frontend/src/pages/ServicesPage.vue
@@ -19,7 +19,8 @@ import { useTopologyRefetch } from '@/composables/useTopologyRefetch'
 import { detailSlideOverKey } from '@/composables/useDetailSlideOver'
 import HostBadge from '@/components/HostBadge.vue'
 import { timeAgo } from '@/utils/time'
-import { Layers, ChevronDown, ChevronRight } from 'lucide-vue-next'
+import { Layers } from 'lucide-vue-next'
+import DisclosureButton from '@/components/ui/DisclosureButton.vue'
 
 interface ServiceGroup {
   stack: string
@@ -144,44 +145,44 @@ function handleSelect(svc: SwarmServiceResponse) {
           class="bg-mnt-surface rounded-xl border border-mnt-default overflow-hidden"
         >
           <!-- Group header -->
-          <button
-            class="w-full flex items-center justify-between px-4 py-3 hover:bg-mnt-elevated transition-all"
-            @click="toggleGroup(group.stack)"
+          <DisclosureButton
+            :expanded="expandedGroups.has(group.stack)"
+            :controls-id="`services-group-${group.stack}`"
+            class="px-4 py-3 hover:bg-mnt-elevated transition-all"
+            @toggle="toggleGroup(group.stack)"
           >
-            <div class="flex items-center gap-3">
-              <component
-                :is="expandedGroups.has(group.stack) ? ChevronDown : ChevronRight"
-                :size="14"
-                class="text-mnt-muted flex-shrink-0"
-              />
-              <span class="text-sm font-semibold text-mnt-primary">{{ group.stack }}</span>
-              <span
-                class="text-[10px] font-bold uppercase tracking-wider text-mnt-muted bg-mnt-elevated border border-mnt-default px-1.5 py-0.5 rounded"
-              >
-                {{ group.services.length }} service{{ group.services.length === 1 ? '' : 's' }}
-              </span>
-            </div>
-            <div class="flex items-center gap-2 text-xs text-mnt-muted">
-              <span
-                :class="[
-                  'font-semibold tabular-nums',
-                  group.services.every((s) => s.running_replicas >= s.desired_replicas)
-                    ? 'text-mnt-status-ok'
-                    : group.services.some((s) => s.running_replicas > 0)
-                      ? 'text-mnt-status-warn'
-                      : 'text-mnt-status-down',
-                ]"
-              >
-                {{ group.services.reduce((sum, s) => sum + s.running_replicas, 0) }}/{{
-                  group.services.reduce((sum, s) => sum + s.desired_replicas, 0)
-                }}
-              </span>
+            <div class="flex items-center justify-between gap-3">
+              <div class="flex items-center gap-3">
+                <span class="text-sm font-semibold text-mnt-primary">{{ group.stack }}</span>
+                <span
+                  class="text-[10px] font-bold uppercase tracking-wider text-mnt-muted bg-mnt-elevated border border-mnt-default px-1.5 py-0.5 rounded"
+                >
+                  {{ group.services.length }} service{{ group.services.length === 1 ? '' : 's' }}
+                </span>
+              </div>
+              <div class="flex items-center gap-2 text-xs text-mnt-muted">
+                <span
+                  :class="[
+                    'font-semibold tabular-nums',
+                    group.services.every((s) => s.running_replicas >= s.desired_replicas)
+                      ? 'text-mnt-status-ok'
+                      : group.services.some((s) => s.running_replicas > 0)
+                        ? 'text-mnt-status-warn'
+                        : 'text-mnt-status-down',
+                  ]"
+                >
+                  {{ group.services.reduce((sum, s) => sum + s.running_replicas, 0) }}/{{
+                    group.services.reduce((sum, s) => sum + s.desired_replicas, 0)
+                  }}
+                </span>
+              </div>
             </div>
-          </button>
+          </DisclosureButton>
 
           <!-- Service rows -->
           <div
             v-if="expandedGroups.has(group.stack)"
+            :id="`services-group-${group.stack}`"
             class="border-t border-mnt-default divide-y divide-slate-800/60"
           >
             <div
diff --git a/frontend/src/pages/StatusAdminPage.vue b/frontend/src/pages/StatusAdminPage.vue
index a8e7cb5c..249c9555 100644
--- a/frontend/src/pages/StatusAdminPage.vue
+++ b/frontend/src/pages/StatusAdminPage.vue
@@ -140,11 +140,15 @@ onUnmounted(() => {
   store.disconnectSSE()
 })
 
-const tabItems = computed<TabNavItem[]>(() => [
+const tabItems = computed<TabNavItem<Tab>[]>(() => [
   { value: 'components', label: 'Components', count: store.components?.length || undefined },
   { value: 'incidents', label: 'Incidents', count: store.incidentsTotal || undefined },
   { value: 'maintenance', label: 'Maintenance', count: store.maintenance?.length || undefined },
-  { value: 'subscribers', label: 'Subscribers', count: store.subscriberTotal || undefined },
+  {
+    value: 'subscribers',
+    label: 'Subscribers',
+    count: store.subscriberTotal ? `${store.subscriberConfirmed}/${store.subscriberTotal}` : undefined,
+  },
   { value: 'smtp', label: 'SMTP' },
   { value: 'personalization', label: 'Personalization' },
 ])
@@ -172,11 +176,10 @@ const tabItems = computed<TabNavItem[]>(() => [
 
     <!-- Tab navigation -->
     <TabNav
+      v-model="activeTab"
       class="mb-4"
-      :model-value="activeTab"
       :items="tabItems"
       ariaLabel="Status page sections"
-      @update:model-value="(v) => (activeTab = v as Tab)"
     />
 
     <!-- Tab content -->
diff --git a/frontend/src/pages/WebhooksPage.vue b/frontend/src/pages/WebhooksPage.vue
index 1c8f81b0..f9173e1e 100644
--- a/frontend/src/pages/WebhooksPage.vue
+++ b/frontend/src/pages/WebhooksPage.vue
@@ -101,7 +101,7 @@
               >
                 {{ testing === wh.id ? 'Testing...' : 'Test' }}
               </UiButton>
-              <UiButton variant="ghost" size="sm" class="text-mnt-status-down" @click="handleDelete(wh)">
+              <UiButton variant="danger-ghost" size="sm" @click="handleDelete(wh)">
                 Delete
               </UiButton>
             </td>

From 10d6877444336650d2a77ee35ddd0e2eabf2470f Mon Sep 17 00:00:00 2001
From: Benjamin <benjamin@kolapsis.com>
Date: Mon, 28 Sep 2026 21:22:29 +0200
Subject: [PATCH 5/5] chore(ui): remove the dev-only design-system page

The /_ds gallery only existed in development builds and no one runs one;
each shared component keeps its own unit tests.
---
 frontend/src/pages/DesignSystemPage.vue | 727 ------------------------
 frontend/src/router/index.ts            |  10 -
 2 files changed, 737 deletions(-)
 delete mode 100644 frontend/src/pages/DesignSystemPage.vue

diff --git a/frontend/src/pages/DesignSystemPage.vue b/frontend/src/pages/DesignSystemPage.vue
deleted file mode 100644
index 9e6054c6..00000000
--- a/frontend/src/pages/DesignSystemPage.vue
+++ /dev/null
@@ -1,727 +0,0 @@
-<!--
-  Copyright 2026 Benjamin Touchard (kOlapsis)
-  Licensed under the GNU Affero General Public License v3.0 (AGPL-3.0)
-  or a commercial license. See COMMERCIAL-LICENSE.md.
-
-  Dev-only design system gallery (route /_ds). Renders every shared component in
-  its variants and states so tokens + a11y can be reviewed in light and dark.
--->
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { Box, Globe, Shield, Heart, Sun, Moon, ServerOff, Plus, Trash2 } from 'lucide-vue-next'
-import { useTheme } from '@/composables/useTheme'
-import { severityVar, type Severity } from '@/composables/useSeverity'
-import StatusDot from '@/components/ui/StatusDot.vue'
-import StatusBadge from '@/components/ui/StatusBadge.vue'
-import SeverityRow from '@/components/ui/SeverityRow.vue'
-import StatusTile from '@/components/ui/StatusTile.vue'
-import StatusGrid from '@/components/ui/StatusGrid.vue'
-import KpiStrip from '@/components/ui/KpiStrip.vue'
-import SectionHeader from '@/components/ui/SectionHeader.vue'
-import SegmentedToggle from '@/components/ui/SegmentedToggle.vue'
-import DensityToggle from '@/components/ui/DensityToggle.vue'
-import UiTooltip from '@/components/ui/UiTooltip.vue'
-import EmptyState from '@/components/ui/EmptyState.vue'
-import ErrorState from '@/components/ui/ErrorState.vue'
-import LoadingSkeleton from '@/components/ui/LoadingSkeleton.vue'
-import ListToolbar from '@/components/ui/ListToolbar.vue'
-import ListRow from '@/components/ui/ListRow.vue'
-import DataTable, { type Column } from '@/components/ui/DataTable.vue'
-import CollapsiblePanel from '@/components/ui/CollapsiblePanel.vue'
-import type { ChipTone, StatusChip } from '@/components/ui/listFilters'
-import { usePreferencesStore } from '@/stores/preferences'
-import TabNav, { type TabNavItem } from '@/components/ui/TabNav.vue'
-import CountBadge from '@/components/ui/CountBadge.vue'
-import UiButton from '@/components/ui/UiButton.vue'
-import FormField from '@/components/ui/FormField.vue'
-import TextInput from '@/components/ui/TextInput.vue'
-import SelectInput from '@/components/ui/SelectInput.vue'
-import TextareaInput from '@/components/ui/TextareaInput.vue'
-import CheckboxInput from '@/components/ui/CheckboxInput.vue'
-import RadioGroup from '@/components/ui/RadioGroup.vue'
-import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
-import UiModal from '@/components/ui/UiModal.vue'
-import PopoverMenu from '@/components/ui/PopoverMenu.vue'
-import DisclosureButton from '@/components/ui/DisclosureButton.vue'
-import ChipToggle from '@/components/ui/ChipToggle.vue'
-import OptionCards, { type OptionCardItem } from '@/components/ui/OptionCards.vue'
-import RangeInput from '@/components/ui/RangeInput.vue'
-import FileInput from '@/components/ui/FileInput.vue'
-import ColorInput from '@/components/ui/ColorInput.vue'
-import EndpointStatusBadge from '@/components/EndpointStatusBadge.vue'
-import HeartbeatStatusBadge from '@/components/HeartbeatStatusBadge.vue'
-import CertificateStatusBadge from '@/components/CertificateStatusBadge.vue'
-import ClusterHealthBadge from '@/components/ClusterHealthBadge.vue'
-import OCSPStatusBadge from '@/components/OCSPStatusBadge.vue'
-import type { GridGroup } from '@/components/ui/statusGrid'
-
-const { resolvedTheme, setTheme } = useTheme()
-function flipTheme() {
-  setTheme(resolvedTheme.value === 'dark' ? 'light' : 'dark')
-}
-
-const severities: Severity[] = ['ok', 'warning', 'incident', 'unknown', 'neutral']
-
-const gridView = ref<'grid' | 'list'>('grid')
-
-// List primitives demo. Scope 'demo' keeps the real pages' view choice untouched.
-const prefs = usePreferencesStore()
-
-interface DemoRow {
-  id: string
-  name: string
-  target: string
-  status: 'up' | 'down' | 'degraded'
-  responseMs: number
-}
-
-const demoRows: DemoRow[] = [
-  { id: 'r1', name: 'traefik', target: 'https://maintenant.dev/health', status: 'up', responseMs: 42 },
-  { id: 'r2', name: 'shm-app', target: 'https://metrics.kolapsis.com/healthcheck', status: 'down', responseMs: 0 },
-  { id: 'r3', name: 'authentik', target: 'https://auth.kolapsis.com/-/health/live/', status: 'degraded', responseMs: 1840 },
-  { id: 'r4', name: 'registry', target: 'registry.kolapsis.com:5000', status: 'up', responseMs: 18 },
-]
-
-const demoSearch = ref('')
-const demoStatus = ref('')
-
-const demoFiltered = computed(() =>
-  demoRows.filter((r) => {
-    if (demoStatus.value && r.status !== demoStatus.value) return false
-    const q = demoSearch.value.trim().toLowerCase()
-    if (!q) return true
-    return r.name.toLowerCase().includes(q) || r.target.toLowerCase().includes(q)
-  }),
-)
-
-const demoChips = computed<StatusChip[]>(() => [
-  { value: 'up', label: 'up', count: demoRows.filter((r) => r.status === 'up').length, tone: 'ok' },
-  { value: 'degraded', label: 'degraded', count: demoRows.filter((r) => r.status === 'degraded').length, tone: 'warn' },
-  { value: 'down', label: 'down', count: demoRows.filter((r) => r.status === 'down').length, tone: 'down' },
-])
-
-const demoTone = (r: DemoRow): ChipTone =>
-  r.status === 'up' ? 'ok' : r.status === 'down' ? 'down' : 'warn'
-
-const demoColumns: Column[] = [
-  { key: 'name', label: 'Name', sortable: true, width: 'minmax(0, 1fr)' },
-  { key: 'target', label: 'Target', priority: 'md' },
-  { key: 'status', label: 'Status', sortable: true, width: '110px' },
-  { key: 'response', label: 'Response', sortable: true, align: 'right', width: '90px' },
-]
-
-function demoSortValue(row: DemoRow, key: string) {
-  if (key === 'response') return row.responseMs
-  if (key === 'status') return row.status
-  return row.name
-}
-
-function okItems(prefix: string, names: string[]) {
-  return names.map((n, i) => ({
-    id: `${prefix}-${i}`,
-    severity: 'ok' as Severity,
-    name: n,
-    meta: `${(i % 3) + 0.3}% cpu`,
-    kind: 'Container',
-    description: 'Running',
-  }))
-}
-
-const sampleGroups: GridGroup[] = [
-  {
-    key: 'containers',
-    label: 'Containers',
-    icon: Box,
-    items: [
-      { id: 'c-crit', severity: 'incident', name: 'matrix-coturn', meta: '42 issues', kind: 'Container', description: '42 security issues — ports exposed on all interfaces' },
-      { id: 'c-warn', severity: 'warning', name: 'bitwarden-postgres', meta: 'update 18.4', kind: 'Container', description: 'Update available — postgres 18.4' },
-      ...okItems('c', ['traefik', 'redis', 'minio', 'gitea', 'grafana', 'loki', 'n8n', 'authentik', 'vaultwarden', 'registry']),
-    ],
-  },
-  {
-    key: 'endpoints',
-    label: 'HTTP Endpoints',
-    icon: Globe,
-    items: [
-      { id: 'e-crit', severity: 'incident', name: 'shm-app', meta: '3 checks KO', kind: 'Endpoint', description: 'metrics.kolapsis.com/healthcheck — 3 consecutive failures' },
-      ...okItems('e', ['maintenant.dev', 'app.ackify.io', 'api.ackify.io', 'status.kolapsis.com', 'auth.kolapsis.com']).map((it) => ({ ...it, kind: 'Endpoint', meta: `${30 + (Number(it.id.split('-')[1]) || 0) * 7}ms`, description: 'Up' })),
-    ],
-  },
-  {
-    key: 'ssl',
-    label: 'SSL Certificates',
-    icon: Shield,
-    collapsedByDefault: true,
-    items: okItems('s', ['kolapsis.com', 'ackify.io', 'maintenant.dev', 'restoreproof.com', 'superkloud.eu', 'umami.kolapsis.com']).map((it) => ({ ...it, kind: 'SSL', meta: 'valid 42d', description: 'Valid' })),
-  },
-]
-
-const sampleKpis = [
-  { label: 'Global Uptime', value: '92.96%', sub: '66 / 71 monitors' },
-  { label: 'Response Time', value: '55ms', sub: 'avg. endpoints' },
-  { label: 'Host CPU', value: '2%', sub: '7.4 / 62.8 GB' },
-  { label: 'SSL Certificates', value: '8 OK', sub: 'all valid', tone: 'ok' as Severity },
-  { label: 'Security Posture', value: '96', sub: '56 scored', tone: 'ok' as Severity },
-]
-
-const lastSelected = ref('')
-
-const demoTab = ref('history')
-const tabItems: TabNavItem[] = [
-  { value: 'history', label: 'History' },
-  { value: 'triggers', label: 'Triggers', count: 4 },
-  { value: 'silence', label: 'Silence', count: 2, countTone: 'warn' },
-]
-
-const demoName = ref('')
-const demoAge = ref<number | null>(null)
-const demoEmail = ref('')
-const demoEmailError = ref('This field is required')
-const demoRuntime = ref('docker')
-const demoNotes = ref('')
-const demoAccept = ref(false)
-const demoTags = ref<string[]>(['alerts'])
-const demoPlan = ref('pro')
-const demoNotifications = ref(true)
-const demoNotificationsSm = ref(false)
-
-const demoButtonLoading = ref(false)
-function triggerButtonLoading() {
-  demoButtonLoading.value = true
-  setTimeout(() => (demoButtonLoading.value = false), 1200)
-}
-
-const demoModalOpen = ref(false)
-
-const demoPopoverOpen = ref(false)
-const demoPopoverNamespaces = ref<string[]>(['prod'])
-
-const demoDisclosureExpanded = ref(true)
-
-const demoChipSeverities = ref<string[]>(['critical'])
-const demoChipMonitors = ref([
-  { id: 'c-1', name: 'traefik' },
-  { id: 'c-2', name: 'redis' },
-])
-function removeChipMonitor(id: string) {
-  demoChipMonitors.value = demoChipMonitors.value.filter((m) => m.id !== id)
-}
-
-const demoChannelType = ref<string | null>('discord')
-const demoChannelOptions: OptionCardItem[] = [
-  { value: 'discord', label: 'Discord', description: 'Post alerts via webhook' },
-  { value: 'webhook', label: 'Webhook', description: 'HTTP POST with JSON payload' },
-  { value: 'email', label: 'Email', description: 'Requires SMTP', disabled: true },
-]
-
-const demoRangeValue = ref(90)
-
-const demoLogoFile = ref<File | null>(null)
-
-const demoAccentColor = ref('#22C55E')
-
-// UiButton danger-ghost demo
-const demoDangerLoading = ref(false)
-
-// TextInput bare variant demo (embedded in a styled bar)
-const demoBareQuery = ref('')
-</script>
-
-<template>
-  <div class="mx-auto max-w-6xl space-y-10 p-6 pb-24">
-    <header class="flex items-center gap-3">
-      <h1 class="text-lg font-bold text-mnt-primary">Design system</h1>
-      <span class="rounded bg-mnt-elevated px-2 py-0.5 font-mono text-[11px] text-mnt-muted">/_ds</span>
-      <div class="ml-auto flex items-center gap-2">
-        <DensityToggle />
-        <UiButton variant="secondary" size="sm" :icon="resolvedTheme === 'dark' ? Sun : Moon" @click="flipTheme">
-          {{ resolvedTheme === 'dark' ? 'Light' : 'Dark' }}
-        </UiButton>
-      </div>
-    </header>
-
-    <!-- Severity scale -->
-    <section class="space-y-3">
-      <SectionHeader title="Severity scale" :count="severities.length" />
-      <div class="flex flex-wrap gap-3">
-        <div
-          v-for="s in severities"
-          :key="s"
-          class="flex min-w-[140px] flex-col gap-2 rounded-xl border border-mnt-default bg-mnt-surface p-3"
-        >
-          <div class="flex items-center gap-2">
-            <span class="h-4 w-4 rounded-full" :style="{ backgroundColor: severityVar(s) }" />
-            <span class="text-xs font-semibold capitalize text-mnt-primary">{{ s }}</span>
-          </div>
-          <div class="rounded px-2 py-1 text-[11px] font-medium" :class="[`bg-mnt-sev-${s}`, `text-mnt-sev-${s}`]">
-            muted wash + AA text
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Status primitives -->
-    <section class="space-y-3">
-      <SectionHeader title="StatusDot / StatusBadge" />
-      <div class="flex flex-wrap items-center gap-5 rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <StatusDot v-for="s in severities" :key="s" :severity="s" size="lg" :pulse="s === 'incident'" />
-      </div>
-      <div class="flex flex-wrap items-center gap-4 rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <StatusBadge v-for="s in severities" :key="s" :severity="s" show-label />
-      </div>
-      <div class="flex flex-wrap items-center gap-4 rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <StatusBadge :status="'critical'" show-label label="legacy critical → incident" />
-        <StatusBadge :status="'down'" show-label label="legacy down → incident" />
-        <StatusBadge :status="'paused'" show-label label="legacy paused → neutral" />
-      </div>
-    </section>
-
-    <!-- Rallied badges -->
-    <section class="space-y-3">
-      <SectionHeader title="Domain badges (rallied to StatusBadge)" />
-      <div class="flex flex-wrap items-center gap-4 rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <EndpointStatusBadge status="up" />
-        <EndpointStatusBadge status="down" />
-        <HeartbeatStatusBadge status="started" />
-        <HeartbeatStatusBadge status="down" />
-        <CertificateStatusBadge status="valid" />
-        <CertificateStatusBadge status="expiring" />
-        <CertificateStatusBadge status="expired" />
-        <ClusterHealthBadge health="healthy" />
-        <ClusterHealthBadge health="degraded" />
-        <OCSPStatusBadge status="good" />
-        <OCSPStatusBadge status="revoked" />
-      </div>
-    </section>
-
-    <!-- Rows & tiles -->
-    <section class="space-y-3">
-      <SectionHeader title="SeverityRow" />
-      <div class="rounded-xl border border-mnt-default bg-mnt-surface p-2">
-        <SeverityRow severity="incident" name="71b219ddb31b" kind="Agent" description="Agent disconnected (stream_ended)" timestamp="27 min" @select="lastSelected = 'row:incident'" />
-        <SeverityRow severity="warning" name="bitwarden-postgres" kind="Update" description="Update available — postgres 18.4" timestamp="7 h" @select="lastSelected = 'row:warning'" />
-        <SeverityRow severity="ok" name="maintenant-api" kind="Container" description="Running" metric="0.4% cpu" :interactive="false" />
-      </div>
-      <p v-if="lastSelected" class="text-xs text-mnt-muted">selected: {{ lastSelected }}</p>
-    </section>
-
-    <section class="space-y-3">
-      <SectionHeader title="StatusTile" />
-      <div class="grid gap-1.5 rounded-xl border border-mnt-default bg-mnt-surface p-4" style="grid-template-columns: repeat(auto-fill, minmax(118px, 1fr))">
-        <StatusTile severity="incident" name="matrix-coturn" meta="42 issues" />
-        <StatusTile severity="warning" name="bitwarden-pg" meta="update 18.4" />
-        <StatusTile severity="ok" name="traefik" meta="0.3% cpu" />
-        <StatusTile severity="unknown" name="probe-eu" meta="—" />
-        <StatusTile severity="neutral" name="seed-job" meta="paused" />
-      </div>
-    </section>
-
-    <!-- StatusGrid -->
-    <section class="space-y-3">
-      <SectionHeader title="StatusGrid (collapsible groups · grid/list toggle)" />
-      <StatusGrid v-model:view="gridView" :groups="sampleGroups" @select="lastSelected = $event.name" />
-    </section>
-
-    <!-- KPI -->
-    <section class="space-y-3">
-      <SectionHeader title="KpiStrip" />
-      <KpiStrip :stats="sampleKpis" />
-    </section>
-
-    <!-- Controls -->
-    <section class="space-y-3">
-      <SectionHeader title="SegmentedToggle + Tooltip" />
-      <div class="flex flex-wrap items-center gap-6 rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <SegmentedToggle v-model="gridView" :options="[{ value: 'grid', label: 'Grid' }, { value: 'list', label: 'List' }]" ariaLabel="Demo view" />
-        <UiTooltip text="Last check 12s ago · 0.4% cpu" placement="top">
-          <template #trigger>
-            <span class="cursor-help rounded border border-mnt-default px-2.5 py-1 text-xs text-mnt-secondary">Hover me</span>
-          </template>
-        </UiTooltip>
-      </div>
-    </section>
-
-    <!-- List primitives -->
-    <section class="space-y-3">
-      <SectionHeader title="ListToolbar + ListRow + DataTable (search · status chips · cards/rows/table)" />
-      <div class="rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <ListToolbar
-          v-model:search="demoSearch"
-          v-model:status="demoStatus"
-          scope="demo"
-          :chips="demoChips"
-          :result-count="demoFiltered.length"
-          search-placeholder="Search monitors"
-          :active-filter-count="0"
-        >
-          <template #filters>
-            <p class="text-xs text-mnt-muted">Secondary filters live here, one per page.</p>
-          </template>
-        </ListToolbar>
-
-        <div
-          v-if="prefs.listView('demo') === 'rows'"
-          class="overflow-hidden rounded-xl border border-mnt-default"
-        >
-          <ListRow
-            v-for="row in demoFiltered"
-            :key="row.id"
-            :tone="demoTone(row)"
-            @select="lastSelected = row.name"
-          >
-            <span class="min-w-0 flex-1 truncate text-sm font-semibold text-mnt-primary">{{ row.name }}</span>
-            <span class="hidden min-w-0 flex-1 truncate text-xs text-mnt-muted sm:block">{{ row.target }}</span>
-            <EndpointStatusBadge :status="row.status" />
-            <span class="w-14 text-right font-mono text-xs text-mnt-muted">
-              {{ row.responseMs ? `${row.responseMs}ms` : '-' }}
-            </span>
-          </ListRow>
-        </div>
-
-        <DataTable
-          v-else-if="prefs.listView('demo') === 'table'"
-          :columns="demoColumns"
-          :rows="demoFiltered"
-          :row-key="(r) => r.id"
-          :sort-value="demoSortValue"
-          :tone="demoTone"
-          default-sort="name"
-          caption="Demo monitors"
-          @select="lastSelected = $event.name"
-        >
-          <template #cell-name="{ row }">
-            <span class="truncate font-semibold text-mnt-primary">{{ row.name }}</span>
-          </template>
-          <template #cell-target="{ row }">
-            <span class="truncate font-mono text-xs text-mnt-muted">{{ row.target }}</span>
-          </template>
-          <template #cell-status="{ row }">
-            <EndpointStatusBadge :status="row.status" />
-          </template>
-          <template #cell-response="{ row }">
-            <span class="font-mono text-xs">{{ row.responseMs ? `${row.responseMs}ms` : '-' }}</span>
-          </template>
-        </DataTable>
-
-        <div v-else class="grid gap-3 sm:grid-cols-2">
-          <div
-            v-for="row in demoFiltered"
-            :key="row.id"
-            class="rounded-xl border border-mnt-default bg-mnt-elevated p-3"
-          >
-            <div class="flex items-center justify-between gap-2">
-              <span class="truncate text-sm font-semibold text-mnt-primary">{{ row.name }}</span>
-              <EndpointStatusBadge :status="row.status" />
-            </div>
-            <p class="mt-1 truncate font-mono text-xs text-mnt-muted">{{ row.target }}</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- CollapsiblePanel -->
-    <section class="space-y-3">
-      <SectionHeader title="CollapsiblePanel (remembers its state)" />
-      <CollapsiblePanel storage-key="ds-demo" title="Top consumers">
-        <template #summary>4.2 GB / 16 GB RAM · 24 containers · matrix-coturn 38%</template>
-        <p class="text-sm text-mnt-secondary">
-          Panel contents. Collapsed, the summary above stands in for it.
-        </p>
-      </CollapsiblePanel>
-    </section>
-
-    <!-- Data states -->
-    <section class="space-y-3">
-      <SectionHeader title="Data states" />
-      <div class="grid gap-4 lg:grid-cols-3">
-        <div class="rounded-xl border border-mnt-default bg-mnt-surface">
-          <LoadingSkeleton variant="list" :count="4" />
-        </div>
-        <div class="rounded-xl border border-mnt-default bg-mnt-surface">
-          <EmptyState :icon="ServerOff" title="Nothing needs your attention" description="All monitors are operational." />
-        </div>
-        <div class="rounded-xl border border-mnt-default bg-mnt-surface">
-          <ErrorState message="Couldn't reach the monitor API. Check the agent connection and retry." retryable />
-        </div>
-      </div>
-      <div class="rounded-xl border border-mnt-default bg-mnt-surface p-3">
-        <LoadingSkeleton variant="grid" :count="12" />
-      </div>
-    </section>
-
-    <!-- TabNav + CountBadge -->
-    <section class="space-y-3">
-      <SectionHeader title="TabNav + CountBadge" />
-      <div class="rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <TabNav v-model="demoTab" :items="tabItems" ariaLabel="Demo section tabs" />
-        <p class="mt-3 text-xs text-mnt-muted">Active tab: {{ demoTab }}</p>
-        <div class="mt-3 flex flex-wrap items-center gap-2">
-          <CountBadge :value="3" />
-          <CountBadge :value="5" tone="warn" />
-          <CountBadge :value="2" tone="danger" />
-          <CountBadge :value="9" tone="ok" />
-        </div>
-      </div>
-    </section>
-
-    <!-- UiButton -->
-    <section class="space-y-3">
-      <SectionHeader title="UiButton" />
-      <div class="flex flex-wrap items-center gap-3 rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <UiButton variant="primary" :icon="Plus">Primary</UiButton>
-        <UiButton variant="secondary">Secondary</UiButton>
-        <UiButton variant="danger" :icon="Trash2">Danger</UiButton>
-        <UiButton variant="danger-ghost" :icon="Trash2" :loading="demoDangerLoading" @click="demoDangerLoading = !demoDangerLoading">
-          Danger ghost
-        </UiButton>
-        <UiButton variant="ghost">Ghost</UiButton>
-        <UiButton variant="primary" size="sm">Small</UiButton>
-        <UiButton variant="secondary" disabled>Disabled</UiButton>
-        <UiButton variant="primary" :loading="demoButtonLoading" @click="triggerButtonLoading">
-          {{ demoButtonLoading ? 'Saving…' : 'Click to load' }}
-        </UiButton>
-      </div>
-      <div class="flex flex-col gap-1 rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <UiButton variant="ghost" block align="between">Row action (block + align="between")</UiButton>
-      </div>
-    </section>
-
-    <!-- Form fields -->
-    <section class="space-y-3">
-      <SectionHeader title="FormField + inputs" />
-      <div class="grid gap-4 rounded-xl border border-mnt-default bg-mnt-surface p-4 sm:grid-cols-2">
-        <FormField label="Name" hint="As shown on the dashboard" required>
-          <template #default="{ id, describedBy, invalid }">
-            <TextInput :id="id" v-model="demoName" :aria-describedby="describedBy" :invalid="invalid" placeholder="matrix-coturn" />
-          </template>
-        </FormField>
-
-        <FormField label="Age" hint="Numeric field — empty clears to null">
-          <template #default="{ id, describedBy, invalid }">
-            <TextInput :id="id" v-model="demoAge" type="number" :aria-describedby="describedBy" :invalid="invalid" />
-          </template>
-        </FormField>
-
-        <FormField label="Email" :error="demoEmailError">
-          <template #default="{ id, describedBy, invalid }">
-            <TextInput
-              :id="id"
-              v-model="demoEmail"
-              type="email"
-              :aria-describedby="describedBy"
-              :invalid="invalid"
-              placeholder="you@example.com"
-              @input="demoEmailError = demoEmail ? '' : 'This field is required'"
-            />
-          </template>
-        </FormField>
-
-        <FormField label="Runtime" hint="Select input">
-          <template #default="{ id, describedBy, invalid }">
-            <SelectInput
-              :id="id"
-              v-model="demoRuntime"
-              :aria-describedby="describedBy"
-              :invalid="invalid"
-              :options="[
-                { value: 'docker', label: 'Docker' },
-                { value: 'k8s', label: 'Kubernetes' },
-                { value: 'swarm', label: 'Swarm', disabled: true },
-              ]"
-            />
-          </template>
-        </FormField>
-
-        <FormField label="Notes" hint="Textarea, mono" class="sm:col-span-2">
-          <template #default="{ id, describedBy, invalid }">
-            <TextareaInput :id="id" v-model="demoNotes" mono :aria-describedby="describedBy" :invalid="invalid" :rows="3" />
-          </template>
-        </FormField>
-      </div>
-
-      <div class="flex flex-wrap items-center gap-3 rounded-xl border border-mnt-default bg-mnt-surface p-4 text-xs text-mnt-muted">
-        <span>md ·</span>
-        <TextInput model-value="" size="md" placeholder="md" class="max-w-[140px]" />
-        <span>sm ·</span>
-        <TextInput model-value="" size="sm" placeholder="sm" class="max-w-[140px]" />
-      </div>
-
-      <!-- variant="bare": no chrome of its own, for inputs embedded in an already-styled bar -->
-      <div class="flex items-center gap-1.5 rounded-lg border border-mnt-default bg-mnt-primary px-2 py-1">
-        <TextInput v-model="demoBareQuery" variant="bare" placeholder="Search logs…" class="w-40 text-xs" />
-        <UiButton variant="ghost" size="sm">Aa</UiButton>
-      </div>
-    </section>
-
-    <!-- Checkbox / radio / toggle -->
-    <section class="space-y-3">
-      <SectionHeader title="CheckboxInput + RadioGroup + ToggleSwitch" />
-      <div class="grid gap-4 rounded-xl border border-mnt-default bg-mnt-surface p-4 sm:grid-cols-3">
-        <div class="space-y-2">
-          <CheckboxInput v-model="demoAccept" label="I accept the terms" />
-          <CheckboxInput value="alerts" :model-value="demoTags" label="Alerts channel" @update:model-value="(v) => (demoTags = v as string[])" />
-          <CheckboxInput value="updates" :model-value="demoTags" label="Updates channel" @update:model-value="(v) => (demoTags = v as string[])" />
-          <p class="text-xs text-mnt-muted">Selected: {{ demoTags.join(', ') || 'none' }}</p>
-        </div>
-        <RadioGroup
-          v-model="demoPlan"
-          ariaLabel="Plan"
-          :options="[
-            { value: 'community', label: 'Community', hint: 'Free forever' },
-            { value: 'pro', label: 'Pro', hint: '29€/month' },
-          ]"
-        />
-        <div class="flex flex-col gap-3">
-          <ToggleSwitch v-model="demoNotifications" label="Email notifications" show-label />
-          <ToggleSwitch v-model="demoNotificationsSm" label="Compact toggle" show-label size="sm" />
-          <ToggleSwitch :model-value="true" label="Disabled toggle" show-label disabled />
-        </div>
-      </div>
-    </section>
-
-    <!-- UiModal -->
-    <section class="space-y-3">
-      <SectionHeader title="UiModal (rebuilt ConfirmDialog uses this)" />
-      <div class="rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <UiButton variant="secondary" @click="demoModalOpen = true">Open modal</UiButton>
-        <UiModal v-model:open="demoModalOpen" title="Delete monitor" size="sm">
-          <p class="text-sm text-mnt-secondary">This removes the monitor and its history. This cannot be undone.</p>
-          <template #footer>
-            <UiButton variant="secondary" @click="demoModalOpen = false">Cancel</UiButton>
-            <UiButton variant="danger" @click="demoModalOpen = false">Delete</UiButton>
-          </template>
-        </UiModal>
-      </div>
-    </section>
-
-    <!-- PopoverMenu -->
-    <section class="space-y-3">
-      <SectionHeader title="PopoverMenu (trigger slot · menuitem/menuitemcheckbox · arrow keys)" />
-      <div class="flex flex-wrap items-center gap-6 rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <PopoverMenu v-model:open="demoPopoverOpen" ariaLabel="Demo namespaces" panel-class="min-w-52">
-          <template #trigger="{ toggle }">
-            <UiButton variant="secondary" @click="toggle">
-              {{ demoPopoverNamespaces.length }} namespaces
-            </UiButton>
-          </template>
-          <UiButton
-            v-for="ns in ['prod', 'staging', 'dev']"
-            :key="ns"
-            variant="ghost"
-            block
-            align="between"
-            role="menuitemcheckbox"
-            :aria-checked="demoPopoverNamespaces.includes(ns)"
-            class="rounded-none px-4 py-2.5 text-sm"
-            @click="
-              demoPopoverNamespaces = demoPopoverNamespaces.includes(ns)
-                ? demoPopoverNamespaces.filter((n) => n !== ns)
-                : [...demoPopoverNamespaces, ns]
-            "
-          >
-            <span class="font-mono">{{ ns }}</span>
-            <span v-if="demoPopoverNamespaces.includes(ns)" class="text-mnt-green-400">✓</span>
-          </UiButton>
-        </PopoverMenu>
-      </div>
-    </section>
-
-    <!-- DisclosureButton -->
-    <section class="space-y-3">
-      <SectionHeader title="DisclosureButton (chevron · aria-expanded/controls · start or end chevron)" />
-      <div class="rounded-xl border border-mnt-default bg-mnt-surface p-2">
-        <DisclosureButton
-          :expanded="demoDisclosureExpanded"
-          controls-id="ds-disclosure-demo"
-          class="px-2 py-2 text-mnt-secondary hover:bg-mnt-elevated"
-          @toggle="demoDisclosureExpanded = !demoDisclosureExpanded"
-        >
-          <span class="flex items-center gap-2">
-            <span class="font-semibold text-mnt-primary">production</span>
-            <CountBadge :value="12" />
-          </span>
-        </DisclosureButton>
-        <div v-if="demoDisclosureExpanded" id="ds-disclosure-demo" class="px-4 pb-2 text-sm text-mnt-muted">
-          12 containers, all running.
-        </div>
-      </div>
-    </section>
-
-    <!-- ChipToggle -->
-    <section class="space-y-3">
-      <SectionHeader title="ChipToggle (selectable · removable)" />
-      <div class="flex flex-wrap items-center gap-2 rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <ChipToggle
-          v-for="sev in ['critical', 'warning']"
-          :key="sev"
-          :pressed="demoChipSeverities.includes(sev)"
-          :tone="sev === 'critical' ? 'critical' : 'warning'"
-          @toggle="
-            demoChipSeverities = demoChipSeverities.includes(sev)
-              ? demoChipSeverities.filter((s) => s !== sev)
-              : [...demoChipSeverities, sev]
-          "
-        >
-          {{ sev }}
-        </ChipToggle>
-        <ChipToggle tone="accent" pressed>accent</ChipToggle>
-      </div>
-      <div class="flex flex-wrap items-center gap-1.5 rounded-xl border border-mnt-default bg-mnt-surface p-4">
-        <ChipToggle
-          v-for="m in demoChipMonitors"
-          :key="m.id"
-          removable
-          :remove-label="`Remove ${m.name}`"
-          @remove="removeChipMonitor(m.id)"
-        >
-          {{ m.name }}
-        </ChipToggle>
-        <span v-if="demoChipMonitors.length === 0" class="text-xs text-mnt-muted">All removed</span>
-      </div>
-    </section>
-
-    <!-- OptionCards -->
-    <section class="space-y-3">
-      <SectionHeader title="OptionCards (radio-card group · icon slot · disabled option)" />
-      <OptionCards
-        v-model="demoChannelType"
-        :options="demoChannelOptions"
-        ariaLabel="Demo channel type"
-        :columns="3"
-        class="rounded-xl border border-mnt-default bg-mnt-surface p-4"
-      >
-        <template #default="{ option }">
-          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-mnt-surface">
-            <component :is="option.value === 'email' ? ServerOff : Globe" :size="20" class="text-mnt-muted" />
-          </div>
-          <span class="text-sm font-medium text-mnt-primary">{{ option.label }}</span>
-          <span class="text-[11px] text-mnt-muted">{{ option.description }}</span>
-        </template>
-      </OptionCards>
-    </section>
-
-    <!-- RangeInput / FileInput / ColorInput -->
-    <section class="space-y-3">
-      <SectionHeader title="RangeInput + FileInput + ColorInput" />
-      <div class="grid gap-4 rounded-xl border border-mnt-default bg-mnt-surface p-4 sm:grid-cols-3">
-        <div>
-          <label class="mb-1 block text-xs text-mnt-muted">CPU threshold ({{ demoRangeValue }}%)</label>
-          <RangeInput v-model="demoRangeValue" label="CPU threshold" :min="1" :max="100" />
-        </div>
-        <div>
-          <label class="mb-1 block text-xs text-mnt-muted">Logo</label>
-          <FileInput v-model:file="demoLogoFile" accept="image/png,image/svg+xml" />
-        </div>
-        <div>
-          <label class="mb-1 block text-xs text-mnt-muted">Accent color</label>
-          <ColorInput v-model="demoAccentColor" label="Accent" />
-        </div>
-      </div>
-    </section>
-
-    <p class="flex items-center gap-2 text-xs text-mnt-muted">
-      <Heart :size="13" aria-hidden="true" />
-      Tokens-only · dual-theme · keyboard-navigable · respects reduced-motion
-    </p>
-  </div>
-</template>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 85974dcf..dadd6cfc 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -82,16 +82,6 @@ const router = createRouter({
         { path: 'editions', name: 'editions', component: EditionsPage },
         // The old offer page: keep the address working, send it to the comparison.
         { path: 'pro-edition', redirect: { name: 'editions' } },
-        // Dev-only design system gallery (not linked in nav, excluded from prod build)
-        ...(import.meta.env.DEV
-          ? [
-              {
-                path: '_ds',
-                name: 'design-system',
-                component: () => import('../pages/DesignSystemPage.vue'),
-              },
-            ]
-          : []),
       ],
     },
     {