diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 0103698c..5e8e9f0a 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router';
 import {
   StatCard, StatusDot, Badge, MonoText, ProgressBar,
   GroupCard, DataTable, LineChart, EventFeed, DetailPanel,
-  LogViewer, ButtonGroup, SectionHeader, useToast,
+  LogViewer, ButtonGroup, SectionHeader, Toggle, useToast,
 } from '@cameleer/design-system';
 import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
 import styles from './AgentHealth.module.css';
@@ -559,11 +559,8 @@ export default function AgentHealth() {
               </div>
               <div className={styles.configField}>
                 <span className={styles.configLabel}>Metrics</span>
-                <label className={styles.configToggle}>
-                  <input type="checkbox" checked={Boolean(configDraft.metricsEnabled)}
-                    onChange={(e) => setConfigDraft(d => ({ ...d, metricsEnabled: e.target.checked }))} />
-                  <span>{configDraft.metricsEnabled ? 'On' : 'Off'}</span>
-                </label>
+                <Toggle checked={Boolean(configDraft.metricsEnabled)}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, metricsEnabled: (e.target as HTMLInputElement).checked }))} />
               </div>
               <div className={styles.configActions}>
                 <button className={styles.configSaveBtn} onClick={saveConfigEdit} disabled={updateConfig.isPending}>Save</button>