diff --git a/ui/src/pages/Alerts/AllAlertsPage.tsx b/ui/src/pages/Alerts/AllAlertsPage.tsx
index 7de47066..a398109a 100644
--- a/ui/src/pages/Alerts/AllAlertsPage.tsx
+++ b/ui/src/pages/Alerts/AllAlertsPage.tsx
@@ -2,9 +2,9 @@ import { useState } from 'react';
 import { Link } from 'react-router';
 import { Bell } from 'lucide-react';
 import {
-  DataTable, EmptyState, SegmentedTabs,
+  ButtonGroup, DataTable, EmptyState,
 } from '@cameleer/design-system';
-import type { Column } from '@cameleer/design-system';
+import type { ButtonGroupItem, Column } from '@cameleer/design-system';
 import { PageLoader } from '../../components/PageLoader';
 import { SeverityBadge } from '../../components/SeverityBadge';
 import { AlertStateChip } from '../../components/AlertStateChip';
@@ -20,17 +20,22 @@ import tableStyles from '../../styles/table-section.module.css';
 
 type AlertState = NonNullable<AlertDto['state']>;
 
-const STATE_FILTERS: Record<string, { label: string; values: AlertState[] }> = {
-  open:   { label: 'Currently open', values: ['PENDING', 'FIRING', 'ACKNOWLEDGED'] },
-  firing: { label: 'Firing now',     values: ['FIRING'] },
-  acked:  { label: 'Acknowledged',   values: ['ACKNOWLEDGED'] },
-  all:    { label: 'All states',     values: ['PENDING', 'FIRING', 'ACKNOWLEDGED', 'RESOLVED'] },
-};
+const STATE_ITEMS: ButtonGroupItem[] = [
+  { value: 'FIRING',       label: 'Firing',       color: 'var(--error)' },
+  { value: 'ACKNOWLEDGED', label: 'Acknowledged', color: 'var(--warning)' },
+  { value: 'PENDING',      label: 'Pending',      color: 'var(--text-muted)' },
+  { value: 'RESOLVED',     label: 'Resolved',     color: 'var(--success)' },
+];
+
+const DEFAULT_OPEN_STATES = new Set<string>(['PENDING', 'FIRING', 'ACKNOWLEDGED']);
 
 export default function AllAlertsPage() {
-  const [filterKey, setFilterKey] = useState<string>('open');
-  const filter = STATE_FILTERS[filterKey];
-  const { data, isLoading, error } = useAlerts({ state: filter.values, limit: 200 });
+  const [stateSel, setStateSel] = useState<Set<string>>(() => new Set(DEFAULT_OPEN_STATES));
+  const stateValues: AlertState[] | undefined = stateSel.size === 0
+    ? undefined
+    : [...stateSel] as AlertState[];
+
+  const { data, isLoading, error } = useAlerts({ state: stateValues, limit: 200 });
   const markRead = useMarkAlertRead();
 
   const rows = data ?? [];
@@ -77,10 +82,10 @@ export default function AllAlertsPage() {
           <span className={css.pageSubtitle}>{rows.length} matching your filter</span>
         </div>
         <div className={css.pageActions}>
-          <SegmentedTabs
-            tabs={Object.entries(STATE_FILTERS).map(([value, f]) => ({ value, label: f.label }))}
-            active={filterKey}
-            onChange={setFilterKey}
+          <ButtonGroup
+            items={STATE_ITEMS}
+            value={stateSel}
+            onChange={setStateSel}
           />
         </div>
       </header>