diff --git a/src/pages/AgentHealth/AgentHealth.module.css b/src/pages/AgentHealth/AgentHealth.module.css
index 322e6e2..f19bc9f 100644
--- a/src/pages/AgentHealth/AgentHealth.module.css
+++ b/src/pages/AgentHealth/AgentHealth.module.css
@@ -96,16 +96,6 @@
   margin-bottom: 20px;
 }
 
-/* Instance count badge in group header */
-.instanceCountBadge {
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--text-muted);
-  background: var(--bg-inset);
-  padding: 2px 8px;
-  border-radius: 10px;
-}
-
 /* Group meta row */
 .groupMeta {
   display: flex;
@@ -138,62 +128,6 @@
   flex-shrink: 0;
 }
 
-/* Instance table */
-.instanceTable {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-.instanceTable thead th {
-  padding: 4px 12px;
-  font-size: 9px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-faint);
-  text-align: left;
-  border-bottom: 1px solid var(--border-subtle);
-  white-space: nowrap;
-}
-
-.thStatus {
-  width: 12px;
-}
-
-.tdStatus {
-  width: 12px;
-  text-align: center;
-}
-
-/* Instance row */
-.instanceRow {
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.instanceRow td {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-subtle);
-  white-space: nowrap;
-}
-
-.instanceRow:last-child td {
-  border-bottom: none;
-}
-
-.instanceRow:hover td {
-  background: var(--bg-hover);
-}
-
-.instanceRowActive td {
-  background: var(--amber-bg);
-}
-
-.instanceRowActive td:first-child {
-  box-shadow: inset 3px 0 0 var(--amber);
-}
-
 /* Instance fields */
 .instanceName {
   font-weight: 600;
diff --git a/src/pages/AgentHealth/AgentHealth.tsx b/src/pages/AgentHealth/AgentHealth.tsx
index 2b74538..54e9b03 100644
--- a/src/pages/AgentHealth/AgentHealth.tsx
+++ b/src/pages/AgentHealth/AgentHealth.tsx
@@ -9,9 +9,11 @@ import { TopBar } from '../../design-system/layout/TopBar/TopBar'
 
 // Composites
 import { GroupCard } from '../../design-system/composites/GroupCard/GroupCard'
+import { DataTable } from '../../design-system/composites/DataTable/DataTable'
 import { LineChart } from '../../design-system/composites/LineChart/LineChart'
 import { EventFeed } from '../../design-system/composites/EventFeed/EventFeed'
 import { DetailPanel } from '../../design-system/composites/DetailPanel/DetailPanel'
+import type { Column } from '../../design-system/composites/DataTable/types'
 
 // Primitives
 import { StatusDot } from '../../design-system/primitives/StatusDot/StatusDot'
@@ -143,6 +145,72 @@ export function AgentHealth() {
   // Build trend data for selected instance
   const trendData = selectedInstance ? buildTrendData(selectedInstance) : null
 
+  // Column definitions for the instance DataTable
+  const instanceColumns: Column<AgentHealthData>[] = useMemo(() => [
+    {
+      key: 'status',
+      header: '',
+      width: '12px',
+      render: (_val, row) => (
+        <StatusDot variant={row.status === 'live' ? 'live' : row.status === 'stale' ? 'stale' : 'dead'} />
+      ),
+    },
+    {
+      key: 'name',
+      header: 'Instance',
+      render: (_val, row) => (
+        <MonoText size="sm" className={styles.instanceName}>{row.name}</MonoText>
+      ),
+    },
+    {
+      key: 'state',
+      header: 'State',
+      render: (_val, row) => (
+        <Badge
+          label={row.status.toUpperCase()}
+          color={row.status === 'live' ? 'success' : row.status === 'stale' ? 'warning' : 'error'}
+          variant="filled"
+        />
+      ),
+    },
+    {
+      key: 'uptime',
+      header: 'Uptime',
+      render: (_val, row) => (
+        <MonoText size="xs" className={styles.instanceMeta}>{row.uptime}</MonoText>
+      ),
+    },
+    {
+      key: 'tps',
+      header: 'TPS',
+      render: (_val, row) => (
+        <MonoText size="xs" className={styles.instanceMeta}>{row.tps.toFixed(1)}/s</MonoText>
+      ),
+    },
+    {
+      key: 'errorRate',
+      header: 'Errors',
+      render: (_val, row) => (
+        <MonoText size="xs" className={row.errorRate ? styles.instanceError : styles.instanceMeta}>
+          {row.errorRate ?? '0 err/h'}
+        </MonoText>
+      ),
+    },
+    {
+      key: 'lastSeen',
+      header: 'Heartbeat',
+      render: (_val, row) => (
+        <MonoText size="xs" className={
+          row.status === 'dead' ? styles.instanceHeartbeatDead :
+          row.status === 'stale' ? styles.instanceHeartbeatStale :
+          styles.instanceMeta
+        }>
+          {row.lastSeen}
+        </MonoText>
+      ),
+    },
+  ], [])
+
   function handleInstanceClick(inst: AgentHealthData) {
     setSelectedInstance(inst)
     setPanelOpen(true)
@@ -362,65 +430,14 @@ export function AgentHealth() {
                 </div>
               ) : undefined}
             >
-              <table className={styles.instanceTable}>
-                <thead>
-                  <tr>
-                    <th className={styles.thStatus} />
-                    <th>Instance</th>
-                    <th>State</th>
-                    <th>Uptime</th>
-                    <th>TPS</th>
-                    <th>Errors</th>
-                    <th>Heartbeat</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {group.instances.map((inst) => (
-                    <tr
-                      key={inst.id}
-                      className={[
-                        styles.instanceRow,
-                        selectedInstance?.id === inst.id && panelOpen ? styles.instanceRowActive : '',
-                      ].filter(Boolean).join(' ')}
-                      onClick={() => handleInstanceClick(inst)}
-                    >
-                      <td className={styles.tdStatus}>
-                        <StatusDot variant={inst.status === 'live' ? 'live' : inst.status === 'stale' ? 'stale' : 'dead'} />
-                      </td>
-                      <td>
-                        <MonoText size="sm" className={styles.instanceName}>{inst.name}</MonoText>
-                      </td>
-                      <td>
-                        <Badge
-                          label={inst.status.toUpperCase()}
-                          color={inst.status === 'live' ? 'success' : inst.status === 'stale' ? 'warning' : 'error'}
-                          variant="filled"
-                        />
-                      </td>
-                      <td>
-                        <MonoText size="xs" className={styles.instanceMeta}>{inst.uptime}</MonoText>
-                      </td>
-                      <td>
-                        <MonoText size="xs" className={styles.instanceMeta}>{inst.tps.toFixed(1)}/s</MonoText>
-                      </td>
-                      <td>
-                        <MonoText size="xs" className={inst.errorRate ? styles.instanceError : styles.instanceMeta}>
-                          {inst.errorRate ?? '0 err/h'}
-                        </MonoText>
-                      </td>
-                      <td>
-                        <MonoText size="xs" className={
-                          inst.status === 'dead' ? styles.instanceHeartbeatDead :
-                          inst.status === 'stale' ? styles.instanceHeartbeatStale :
-                          styles.instanceMeta
-                        }>
-                          {inst.lastSeen}
-                        </MonoText>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+              <DataTable<AgentHealthData>
+                columns={instanceColumns}
+                data={group.instances}
+                onRowClick={handleInstanceClick}
+                selectedId={panelOpen ? selectedInstance?.id : undefined}
+                pageSize={50}
+                flush
+              />
             </GroupCard>
           ))}
         </div>