diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index ed13241a..eaa81582 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -5,6 +5,7 @@ import {
   StatCard, StatusDot, Badge, MonoText,
   GroupCard, DataTable, EventFeed,
   LogViewer, ButtonGroup, SectionHeader, Toggle, Select, Button, useToast,
+  Alert, ConfirmDialog,
 } from '@cameleer/design-system';
 import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
 import styles from './AgentHealth.module.css';
@@ -111,6 +112,7 @@ export default function AgentHealth() {
   const dismissApp = useDismissApp();
   const catalogEntry = catalogApps?.find((a) => a.slug === appId);
 
+  const [confirmDismissOpen, setConfirmDismissOpen] = useState(false);
   const [configEditing, setConfigEditing] = useState(false);
   const [configDraft, setConfigDraft] = useState<Record<string, string | boolean>>({});
 
@@ -292,6 +294,46 @@ export default function AgentHealth() {
 
   return (
     <div className={styles.content}>
+      {/* No agents warning + dismiss — shown when app-scoped, no agents, admin */}
+      {appId && agentList.length === 0 && isAdmin && (
+        <>
+          <Alert variant="warning" title="No agents connected">
+            <span>
+              {catalogEntry?.managed ? 'Managed app' : 'Discovered app'} &mdash; {(catalogEntry?.exchangeCount ?? 0).toLocaleString()} exchanges recorded.
+              {' '}You can dismiss this application to remove it and all associated data.
+            </span>
+            <div style={{ marginTop: 8 }}>
+              <Button variant="danger" size="sm" disabled={dismissApp.isPending}
+                onClick={() => setConfirmDismissOpen(true)}>
+                {dismissApp.isPending ? 'Dismissing\u2026' : 'Dismiss Application'}
+              </Button>
+            </div>
+          </Alert>
+          <ConfirmDialog
+            open={confirmDismissOpen}
+            onClose={() => setConfirmDismissOpen(false)}
+            onConfirm={() => {
+              setConfirmDismissOpen(false);
+              dismissApp.mutate(appId, {
+                onSuccess: () => {
+                  toast({ title: 'Application dismissed', description: `${appId} and all associated data have been deleted`, variant: 'success' });
+                  navigate('/runtime');
+                },
+                onError: (err) => {
+                  toast({ title: 'Dismiss failed', description: err.message, variant: 'error', duration: 86_400_000 });
+                },
+              });
+            }}
+            title="Dismiss Application"
+            message={`This will permanently delete "${appId}" and all associated data (${(catalogEntry?.exchangeCount ?? 0).toLocaleString()} exchanges, logs, diagrams).`}
+            confirmText="This action cannot be undone."
+            confirmLabel="Dismiss"
+            variant="danger"
+            loading={dismissApp.isPending}
+          />
+        </>
+      )}
+
       {/* Stat strip */}
       <div className={styles.statStrip}>
         <StatCard
@@ -476,45 +518,6 @@ export default function AgentHealth() {
         </div>
       )}
 
-      {/* Dismiss application card — shown when app-scoped, no agents, admin */}
-      {appId && agentList.length === 0 && isAdmin && (
-        <div className={`${sectionStyles.section}`} style={{ marginBottom: 16, padding: '16px 20px' }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <strong>No agents connected</strong>
-              {catalogEntry && (
-                <span style={{ marginLeft: 8, color: 'var(--text-muted)', fontSize: 13 }}>
-                  {catalogEntry.managed ? 'Managed app' : 'Discovered app'} &mdash; {catalogEntry.exchangeCount.toLocaleString()} exchanges recorded
-                </span>
-              )}
-            </div>
-            <Button
-              variant="danger"
-              size="sm"
-              disabled={dismissApp.isPending}
-              onClick={() => {
-                const count = catalogEntry?.exchangeCount ?? 0;
-                const ok = window.confirm(
-                  `Dismiss "${appId}" and permanently delete all data (${count.toLocaleString()} exchanges)?\n\nThis action cannot be undone.`
-                );
-                if (ok) {
-                  dismissApp.mutate(appId, {
-                    onSuccess: () => {
-                      toast({ title: 'Application dismissed', description: `${appId} and all associated data have been deleted`, variant: 'success' });
-                      navigate('/runtime');
-                    },
-                    onError: (err) => {
-                      toast({ title: 'Dismiss failed', description: err.message, variant: 'error', duration: 86_400_000 });
-                    },
-                  });
-                }
-              }}
-            >
-              {dismissApp.isPending ? 'Dismissing\u2026' : 'Dismiss Application'}
-            </Button>
-          </div>
-        </div>
-      )}
 
       {/* Group cards grid */}
       <div className={isFullWidth ? styles.groupGridSingle : styles.groupGrid}>