diff --git a/ui/src/pages/Admin/AppConfigPage.module.css b/ui/src/pages/Admin/AppConfigPage.module.css
index 7f0ab0f1..d0485d5a 100644
--- a/ui/src/pages/Admin/AppConfigPage.module.css
+++ b/ui/src/pages/Admin/AppConfigPage.module.css
@@ -16,6 +16,34 @@
   opacity: 1;
 }
 
+.editBtn {
+  background: transparent;
+  border: none;
+  color: var(--text-faint);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  display: inline-flex;
+}
+
+.editBtn:hover {
+  color: var(--text-primary);
+  opacity: 1;
+}
+
+.editBtn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.editActions {
+  display: inline-flex;
+  gap: 2px;
+}
+
 .inlineSelect {
   padding: 3px 8px;
   border: 1px solid var(--border-subtle);
diff --git a/ui/src/pages/Admin/AppConfigPage.tsx b/ui/src/pages/Admin/AppConfigPage.tsx
index 70284410..9fda46a4 100644
--- a/ui/src/pages/Admin/AppConfigPage.tsx
+++ b/ui/src/pages/Admin/AppConfigPage.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { useNavigate } from 'react-router';
 import { DataTable, Badge, MonoText, useToast } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
@@ -20,7 +20,9 @@ function timeAgo(iso?: string): string {
   return `${Math.floor(hours / 24)}d ago`;
 }
 
-function logLevelColor(level?: string): string {
+type BadgeColor = 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto';
+
+function logLevelColor(level?: string): BadgeColor {
   switch (level?.toUpperCase()) {
     case 'ERROR': return 'error';
     case 'WARN': return 'warning';
@@ -29,23 +31,59 @@ function logLevelColor(level?: string): string {
   }
 }
 
+function engineLevelColor(level?: string): BadgeColor {
+  switch (level?.toUpperCase()) {
+    case 'NONE': return 'error';
+    case 'MINIMAL': return 'warning';
+    case 'COMPLETE': return 'running';
+    default: return 'success';
+  }
+}
+
+function payloadColor(mode?: string): BadgeColor {
+  switch (mode?.toUpperCase()) {
+    case 'INPUT': case 'OUTPUT': return 'warning';
+    case 'BOTH': return 'running';
+    default: return 'auto';
+  }
+}
+
 export default function AppConfigPage() {
   const navigate = useNavigate();
   const { toast } = useToast();
   const { data: configs } = useAllApplicationConfigs();
   const updateConfig = useUpdateApplicationConfig();
+  const [editingApp, setEditingApp] = useState<string | null>(null);
+  const [draft, setDraft] = useState<Partial<ApplicationConfig>>({});
 
-  const handleChange = useCallback((config: ApplicationConfig, field: string, value: string | boolean) => {
-    const updated = { ...config, [field]: value };
+  const startEditing = useCallback((row: ConfigRow) => {
+    setEditingApp(row.application);
+    setDraft({
+      logForwardingLevel: row.logForwardingLevel ?? 'INFO',
+      engineLevel: row.engineLevel ?? 'REGULAR',
+      payloadCaptureMode: row.payloadCaptureMode ?? 'NONE',
+      metricsEnabled: row.metricsEnabled,
+    });
+  }, []);
+
+  const cancelEditing = useCallback(() => {
+    setEditingApp(null);
+    setDraft({});
+  }, []);
+
+  const saveEditing = useCallback((row: ConfigRow) => {
+    const updated = { ...row, ...draft };
     updateConfig.mutate(updated, {
       onSuccess: (saved) => {
-        toast({ title: 'Config updated', description: `${config.application}: ${field} \u2192 ${value} (v${saved.version})`, variant: 'success' });
+        setEditingApp(null);
+        setDraft({});
+        toast({ title: 'Config updated', description: `${row.application} (v${saved.version})`, variant: 'success' });
       },
       onError: () => {
-        toast({ title: 'Config update failed', description: config.application, variant: 'error' });
+        toast({ title: 'Config update failed', description: row.application, variant: 'error' });
       },
     });
-  }, [updateConfig, toast]);
+  }, [draft, updateConfig, toast]);
 
   const columns: Column<ConfigRow>[] = useMemo(() => [
     {
@@ -65,6 +103,41 @@ export default function AppConfigPage() {
         </button>
       ),
     },
+    {
+      key: '_edit',
+      header: '',
+      width: '36px',
+      render: (_val, row) => {
+        const isEditing = editingApp === row.application;
+        return isEditing ? (
+          <span className={styles.editActions}>
+            <button
+              className={styles.editBtn}
+              title="Save"
+              onClick={(e) => { e.stopPropagation(); saveEditing(row); }}
+              disabled={updateConfig.isPending}
+            >
+              &#x2713;
+            </button>
+            <button
+              className={styles.editBtn}
+              title="Cancel"
+              onClick={(e) => { e.stopPropagation(); cancelEditing(); }}
+            >
+              &#x2715;
+            </button>
+          </span>
+        ) : (
+          <button
+            className={styles.editBtn}
+            title="Edit config"
+            onClick={(e) => { e.stopPropagation(); startEditing(row); }}
+          >
+            &#x270E;
+          </button>
+        );
+      },
+    },
     {
       key: 'application',
       header: 'Application',
@@ -74,69 +147,88 @@ export default function AppConfigPage() {
     {
       key: 'logForwardingLevel',
       header: 'Log Level',
-      render: (_val, row) => (
-        <select
-          className={styles.inlineSelect}
-          value={row.logForwardingLevel ?? 'INFO'}
-          onChange={(e) => { e.stopPropagation(); handleChange(row, 'logForwardingLevel', e.target.value); }}
-          disabled={updateConfig.isPending}
-        >
-          <option value="ERROR">ERROR</option>
-          <option value="WARN">WARN</option>
-          <option value="INFO">INFO</option>
-          <option value="DEBUG">DEBUG</option>
-        </select>
-      ),
+      render: (_val, row) => {
+        const val = row.logForwardingLevel ?? 'INFO';
+        if (editingApp === row.application) {
+          return (
+            <select
+              className={styles.inlineSelect}
+              value={draft.logForwardingLevel ?? val}
+              onChange={(e) => { e.stopPropagation(); setDraft(d => ({ ...d, logForwardingLevel: e.target.value })); }}
+            >
+              <option value="ERROR">ERROR</option>
+              <option value="WARN">WARN</option>
+              <option value="INFO">INFO</option>
+              <option value="DEBUG">DEBUG</option>
+            </select>
+          );
+        }
+        return <Badge label={val} color={logLevelColor(val)} variant="filled" />;
+      },
     },
     {
       key: 'engineLevel',
       header: 'Engine Level',
-      render: (_val, row) => (
-        <select
-          className={styles.inlineSelect}
-          value={row.engineLevel ?? 'REGULAR'}
-          onChange={(e) => { e.stopPropagation(); handleChange(row, 'engineLevel', e.target.value); }}
-          disabled={updateConfig.isPending}
-        >
-          <option value="NONE">None</option>
-          <option value="MINIMAL">Minimal</option>
-          <option value="REGULAR">Regular</option>
-          <option value="COMPLETE">Complete</option>
-        </select>
-      ),
+      render: (_val, row) => {
+        const val = row.engineLevel ?? 'REGULAR';
+        if (editingApp === row.application) {
+          return (
+            <select
+              className={styles.inlineSelect}
+              value={draft.engineLevel ?? val}
+              onChange={(e) => { e.stopPropagation(); setDraft(d => ({ ...d, engineLevel: e.target.value })); }}
+            >
+              <option value="NONE">None</option>
+              <option value="MINIMAL">Minimal</option>
+              <option value="REGULAR">Regular</option>
+              <option value="COMPLETE">Complete</option>
+            </select>
+          );
+        }
+        return <Badge label={val} color={engineLevelColor(val)} variant="filled" />;
+      },
     },
     {
       key: 'payloadCaptureMode',
       header: 'Payload Capture',
-      render: (_val, row) => (
-        <select
-          className={styles.inlineSelect}
-          value={row.payloadCaptureMode ?? 'NONE'}
-          onChange={(e) => { e.stopPropagation(); handleChange(row, 'payloadCaptureMode', e.target.value); }}
-          disabled={updateConfig.isPending}
-        >
-          <option value="NONE">None</option>
-          <option value="INPUT">Input</option>
-          <option value="OUTPUT">Output</option>
-          <option value="BOTH">Both</option>
-        </select>
-      ),
+      render: (_val, row) => {
+        const val = row.payloadCaptureMode ?? 'NONE';
+        if (editingApp === row.application) {
+          return (
+            <select
+              className={styles.inlineSelect}
+              value={draft.payloadCaptureMode ?? val}
+              onChange={(e) => { e.stopPropagation(); setDraft(d => ({ ...d, payloadCaptureMode: e.target.value })); }}
+            >
+              <option value="NONE">None</option>
+              <option value="INPUT">Input</option>
+              <option value="OUTPUT">Output</option>
+              <option value="BOTH">Both</option>
+            </select>
+          );
+        }
+        return <Badge label={val} color={payloadColor(val)} variant="filled" />;
+      },
     },
     {
       key: 'metricsEnabled',
       header: 'Metrics',
       width: '80px',
-      render: (_val, row) => (
-        <label className={styles.inlineToggle} onClick={(e) => e.stopPropagation()}>
-          <input
-            type="checkbox"
-            checked={row.metricsEnabled}
-            onChange={(e) => handleChange(row, 'metricsEnabled', e.target.checked)}
-            disabled={updateConfig.isPending}
-          />
-          <span>{row.metricsEnabled ? 'On' : 'Off'}</span>
-        </label>
-      ),
+      render: (_val, row) => {
+        if (editingApp === row.application) {
+          return (
+            <label className={styles.inlineToggle} onClick={(e) => e.stopPropagation()}>
+              <input
+                type="checkbox"
+                checked={draft.metricsEnabled ?? row.metricsEnabled}
+                onChange={(e) => setDraft(d => ({ ...d, metricsEnabled: e.target.checked }))}
+              />
+              <span>{(draft.metricsEnabled ?? row.metricsEnabled) ? 'On' : 'Off'}</span>
+            </label>
+          );
+        }
+        return <Badge label={row.metricsEnabled ? 'On' : 'Off'} color={row.metricsEnabled ? 'success' : 'error'} variant="filled" />;
+      },
     },
     {
       key: 'tracedProcessors',
@@ -160,7 +252,7 @@ export default function AppConfigPage() {
       header: 'Updated',
       render: (_val, row) => <MonoText size="xs">{timeAgo(row.updatedAt)}</MonoText>,
     },
-  ], [navigate, handleChange, updateConfig.isPending]);
+  ], [navigate, editingApp, draft, startEditing, cancelEditing, saveEditing, updateConfig.isPending]);
 
   return (
     <div>
diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index 98efca28..5adb55b3 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -94,6 +94,31 @@
   cursor: pointer;
 }
 
+.configEditBtn {
+  background: transparent;
+  border: none;
+  color: var(--text-faint);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px 6px;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  display: inline-flex;
+  align-self: flex-end;
+  margin-left: auto;
+}
+
+.configEditBtn:hover {
+  color: var(--text-primary);
+  opacity: 1;
+}
+
+.configEditBtn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
 /* Section header */
 .sectionTitle {
   font-size: 13px;
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 2623b737..7ce80dc7 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -247,18 +247,34 @@ export default function AgentHealth() {
   const { data: appConfig } = useApplicationConfig(appId);
   const updateConfig = useUpdateApplicationConfig();
 
-  const handleConfigChange = useCallback((field: string, value: string | boolean) => {
+  const [configEditing, setConfigEditing] = useState(false);
+  const [configDraft, setConfigDraft] = useState<Record<string, string | boolean>>({});
+
+  const startConfigEdit = useCallback(() => {
     if (!appConfig) return;
-    const updated = { ...appConfig, [field]: value };
+    setConfigDraft({
+      logForwardingLevel: appConfig.logForwardingLevel ?? 'INFO',
+      engineLevel: appConfig.engineLevel ?? 'REGULAR',
+      payloadCaptureMode: appConfig.payloadCaptureMode ?? 'NONE',
+      metricsEnabled: appConfig.metricsEnabled,
+    });
+    setConfigEditing(true);
+  }, [appConfig]);
+
+  const saveConfigEdit = useCallback(() => {
+    if (!appConfig) return;
+    const updated = { ...appConfig, ...configDraft };
     updateConfig.mutate(updated, {
       onSuccess: (saved) => {
-        toast({ title: 'Config updated', description: `${field} → ${value} (v${saved.version})`, variant: 'success' });
+        setConfigEditing(false);
+        setConfigDraft({});
+        toast({ title: 'Config updated', description: `${appId} (v${saved.version})`, variant: 'success' });
       },
       onError: () => {
         toast({ title: 'Config update failed', variant: 'error' });
       },
     });
-  }, [appConfig, updateConfig, toast]);
+  }, [appConfig, configDraft, updateConfig, toast, appId]);
   const [eventSortAsc, setEventSortAsc] = useState(false);
   const [eventRefreshTo, setEventRefreshTo] = useState<string | undefined>();
   const { data: events } = useAgentEvents(appId, undefined, 50, eventRefreshTo);
@@ -509,60 +525,81 @@ export default function AgentHealth() {
       {/* Application config bar */}
       {appId && appConfig && (
         <div className={styles.configBar}>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Log Level</span>
-            <select
-              className={styles.configSelect}
-              value={appConfig.logForwardingLevel ?? 'INFO'}
-              onChange={(e) => handleConfigChange('logForwardingLevel', e.target.value)}
-              disabled={updateConfig.isPending}
-            >
-              <option value="ERROR">ERROR</option>
-              <option value="WARN">WARN</option>
-              <option value="INFO">INFO</option>
-              <option value="DEBUG">DEBUG</option>
-            </select>
-          </div>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Engine Level</span>
-            <select
-              className={styles.configSelect}
-              value={appConfig.engineLevel ?? 'REGULAR'}
-              onChange={(e) => handleConfigChange('engineLevel', e.target.value)}
-              disabled={updateConfig.isPending}
-            >
-              <option value="NONE">None</option>
-              <option value="MINIMAL">Minimal</option>
-              <option value="REGULAR">Regular</option>
-              <option value="COMPLETE">Complete</option>
-            </select>
-          </div>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Payload Capture</span>
-            <select
-              className={styles.configSelect}
-              value={appConfig.payloadCaptureMode ?? 'NONE'}
-              onChange={(e) => handleConfigChange('payloadCaptureMode', e.target.value)}
-              disabled={updateConfig.isPending}
-            >
-              <option value="NONE">None</option>
-              <option value="INPUT">Input</option>
-              <option value="OUTPUT">Output</option>
-              <option value="BOTH">Both</option>
-            </select>
-          </div>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Metrics</span>
-            <label className={styles.configToggle}>
-              <input
-                type="checkbox"
-                checked={appConfig.metricsEnabled}
-                onChange={(e) => handleConfigChange('metricsEnabled', e.target.checked)}
-                disabled={updateConfig.isPending}
-              />
-              <span>{appConfig.metricsEnabled ? 'Enabled' : 'Disabled'}</span>
-            </label>
-          </div>
+          {configEditing ? (
+            <>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Log Level</span>
+                <select className={styles.configSelect} value={String(configDraft.logForwardingLevel ?? 'INFO')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, logForwardingLevel: e.target.value }))}>
+                  <option value="ERROR">ERROR</option>
+                  <option value="WARN">WARN</option>
+                  <option value="INFO">INFO</option>
+                  <option value="DEBUG">DEBUG</option>
+                </select>
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Engine Level</span>
+                <select className={styles.configSelect} value={String(configDraft.engineLevel ?? 'REGULAR')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, engineLevel: e.target.value }))}>
+                  <option value="NONE">None</option>
+                  <option value="MINIMAL">Minimal</option>
+                  <option value="REGULAR">Regular</option>
+                  <option value="COMPLETE">Complete</option>
+                </select>
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Payload Capture</span>
+                <select className={styles.configSelect} value={String(configDraft.payloadCaptureMode ?? 'NONE')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, payloadCaptureMode: e.target.value }))}>
+                  <option value="NONE">None</option>
+                  <option value="INPUT">Input</option>
+                  <option value="OUTPUT">Output</option>
+                  <option value="BOTH">Both</option>
+                </select>
+              </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>
+              </div>
+              <button className={styles.configEditBtn} title="Save" onClick={saveConfigEdit} disabled={updateConfig.isPending}>&#x2713;</button>
+              <button className={styles.configEditBtn} title="Cancel" onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>&#x2715;</button>
+            </>
+          ) : (
+            <>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Log Level</span>
+                <Badge label={appConfig.logForwardingLevel ?? 'INFO'} color={
+                  (appConfig.logForwardingLevel ?? 'INFO') === 'ERROR' ? 'error'
+                  : (appConfig.logForwardingLevel ?? 'INFO') === 'WARN' ? 'warning'
+                  : (appConfig.logForwardingLevel ?? 'INFO') === 'DEBUG' ? 'running' : 'success'
+                } variant="filled" />
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Engine Level</span>
+                <Badge label={appConfig.engineLevel ?? 'REGULAR'} color={
+                  (appConfig.engineLevel ?? 'REGULAR') === 'NONE' ? 'error'
+                  : (appConfig.engineLevel ?? 'REGULAR') === 'MINIMAL' ? 'warning'
+                  : (appConfig.engineLevel ?? 'REGULAR') === 'COMPLETE' ? 'running' : 'success'
+                } variant="filled" />
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Payload Capture</span>
+                <Badge label={appConfig.payloadCaptureMode ?? 'NONE'} color={
+                  (appConfig.payloadCaptureMode ?? 'NONE') === 'BOTH' ? 'running'
+                  : (appConfig.payloadCaptureMode ?? 'NONE') === 'NONE' ? 'auto' : 'warning'
+                } variant="filled" />
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Metrics</span>
+                <Badge label={appConfig.metricsEnabled ? 'On' : 'Off'} color={appConfig.metricsEnabled ? 'success' : 'error'} variant="filled" />
+              </div>
+              <button className={styles.configEditBtn} title="Edit config" onClick={startConfigEdit}>&#x270E;</button>
+            </>
+          )}
         </div>
       )}