diff --git a/ui/src/pages/Admin/ClickHouseAdminPage.module.css b/ui/src/pages/Admin/ClickHouseAdminPage.module.css
index 6123c7d3..6c636748 100644
--- a/ui/src/pages/Admin/ClickHouseAdminPage.module.css
+++ b/ui/src/pages/Admin/ClickHouseAdminPage.module.css
@@ -5,12 +5,8 @@
   flex-wrap: wrap;
 }
 
+/* pipelineCard — card styling via sectionStyles.section */
 .pipelineCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  padding: 16px 20px;
   margin-bottom: 16px;
 }
 
diff --git a/ui/src/pages/Admin/ClickHouseAdminPage.tsx b/ui/src/pages/Admin/ClickHouseAdminPage.tsx
index 34e22dd0..f1fd1ade 100644
--- a/ui/src/pages/Admin/ClickHouseAdminPage.tsx
+++ b/ui/src/pages/Admin/ClickHouseAdminPage.tsx
@@ -2,6 +2,7 @@ import { StatCard, DataTable, ProgressBar } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { useClickHouseStatus, useClickHouseTables, useClickHousePerformance, useClickHouseQueries, useIndexerPipeline } from '../../api/queries/admin/clickhouse';
 import styles from './ClickHouseAdminPage.module.css';
+import sectionStyles from '../../styles/section-card.module.css';
 import tableStyles from '../../styles/table-section.module.css';
 
 export default function ClickHouseAdminPage() {
@@ -53,7 +54,7 @@ export default function ClickHouseAdminPage() {
 
       {/* Pipeline */}
       {pipeline && (
-        <div className={styles.pipelineCard}>
+        <div className={`${sectionStyles.section} ${styles.pipelineCard}`}>
           <div className={styles.pipelineTitle}>Indexer Pipeline</div>
           <ProgressBar value={pipeline.maxQueueSize > 0 ? (pipeline.queueDepth / pipeline.maxQueueSize) * 100 : 0} />
           <div className={styles.pipelineMetrics}>
diff --git a/ui/src/pages/Admin/DatabaseAdminPage.tsx b/ui/src/pages/Admin/DatabaseAdminPage.tsx
index 5a02693e..2448b9fc 100644
--- a/ui/src/pages/Admin/DatabaseAdminPage.tsx
+++ b/ui/src/pages/Admin/DatabaseAdminPage.tsx
@@ -2,6 +2,7 @@ import { StatCard, Card, DataTable, Badge, Button, ProgressBar, Spinner } from '
 import type { Column } from '@cameleer/design-system';
 import { useDatabaseStatus, useConnectionPool, useDatabaseTables, useActiveQueries, useKillQuery } from '../../api/queries/admin/database';
 import styles from './DatabaseAdminPage.module.css';
+import tableStyles from '../../styles/table-section.module.css';
 
 export default function DatabaseAdminPage() {
   const { data: status, isError: statusError } = useDatabaseStatus();
@@ -54,13 +55,17 @@ export default function DatabaseAdminPage() {
         </Card>
       )}
 
-      <div className={styles.section}>
-        <div className={styles.sectionHeading}>Tables</div>
+      <div className={tableStyles.tableSection}>
+        <div className={tableStyles.tableHeader}>
+          <span className={tableStyles.tableTitle}>Tables</span>
+        </div>
         <DataTable columns={tableColumns} data={(tables || []).map((t: any) => ({ ...t, id: t.tableName }))} sortable pageSize={20} />
       </div>
 
-      <div className={styles.section}>
-        <div className={styles.sectionHeading}>Active Queries</div>
+      <div className={tableStyles.tableSection}>
+        <div className={tableStyles.tableHeader}>
+          <span className={tableStyles.tableTitle}>Active Queries</span>
+        </div>
         <DataTable columns={queryColumns} data={(queries || []).map((q: any) => ({ ...q, id: String(q.pid) }))} />
       </div>
     </div>
diff --git a/ui/src/pages/Admin/EnvironmentsPage.tsx b/ui/src/pages/Admin/EnvironmentsPage.tsx
index 58aa0974..f3cb475d 100644
--- a/ui/src/pages/Admin/EnvironmentsPage.tsx
+++ b/ui/src/pages/Admin/EnvironmentsPage.tsx
@@ -25,6 +25,7 @@ import {
 } from '../../api/queries/admin/environments';
 import type { Environment } from '../../api/queries/admin/environments';
 import styles from './UserManagement.module.css';
+import sectionStyles from '../../styles/section-card.module.css';
 
 function slugify(name: string): string {
   return name
@@ -263,34 +264,38 @@ export default function EnvironmentsPage() {
                 </span>
               </div>
 
-              <SectionHeader>Configuration</SectionHeader>
-              <div className={styles.securitySection}>
-                <div className={styles.securityRow}>
-                  <Toggle checked={selected.production} onChange={() => handleToggleProduction(!selected.production)} />
-                  <span>Production environment</span>
-                  {selected.production ? (
-                    <Tag label="Dedicated resources" color="error" />
-                  ) : (
-                    <Tag label="Shared resources" color="auto" />
-                  )}
+              <div className={sectionStyles.section}>
+                <SectionHeader>Configuration</SectionHeader>
+                <div className={styles.securitySection}>
+                  <div className={styles.securityRow}>
+                    <Toggle checked={selected.production} onChange={() => handleToggleProduction(!selected.production)} />
+                    <span>Production environment</span>
+                    {selected.production ? (
+                      <Tag label="Dedicated resources" color="error" />
+                    ) : (
+                      <Tag label="Shared resources" color="auto" />
+                    )}
+                  </div>
                 </div>
               </div>
 
-              <SectionHeader>Status</SectionHeader>
-              <div className={styles.securitySection}>
-                <div className={styles.securityRow}>
-                  <Toggle checked={selected.enabled} onChange={() => handleToggleEnabled(!selected.enabled)} />
-                  <span>{selected.enabled ? 'Enabled' : 'Disabled'}</span>
+              <div className={sectionStyles.section}>
+                <SectionHeader>Status</SectionHeader>
+                <div className={styles.securitySection}>
+                  <div className={styles.securityRow}>
+                    <Toggle checked={selected.enabled} onChange={() => handleToggleEnabled(!selected.enabled)} />
+                    <span>{selected.enabled ? 'Enabled' : 'Disabled'}</span>
+                    {!selected.enabled && (
+                      <Tag label="No new deployments" color="warning" />
+                    )}
+                  </div>
                   {!selected.enabled && (
-                    <Tag label="No new deployments" color="warning" />
+                    <p className={styles.inheritedNote}>
+                      Disabled environments do not allow new deployments. Active
+                      deployments can only be started, stopped, or deleted.
+                    </p>
                   )}
                 </div>
-                {!selected.enabled && (
-                  <p className={styles.inheritedNote}>
-                    Disabled environments do not allow new deployments. Active
-                    deployments can only be started, stopped, or deleted.
-                  </p>
-                )}
               </div>
 
               <DefaultResourcesSection environment={selected} onSave={async (config) => {
@@ -385,7 +390,7 @@ function DefaultResourcesSection({ environment, onSave, saving }: {
   }
 
   return (
-    <>
+    <div className={sectionStyles.section}>
       <SectionHeader>Default Resource Limits</SectionHeader>
       <p className={styles.inheritedNote}>
         These defaults apply to new apps in this environment unless overridden per-app.
@@ -444,7 +449,7 @@ function DefaultResourcesSection({ environment, onSave, saving }: {
           <Button size="sm" variant="secondary" onClick={() => setEditing(true)}>Edit Defaults</Button>
         )}
       </div>
-    </>
+    </div>
   );
 }
 
@@ -478,7 +483,7 @@ function JarRetentionSection({ environment, onSave, saving }: {
   }
 
   return (
-    <>
+    <div className={sectionStyles.section}>
       <SectionHeader>JAR Retention</SectionHeader>
       <p className={styles.inheritedNote}>
         Old JAR versions are cleaned up nightly. Currently deployed versions are never deleted.
@@ -512,6 +517,6 @@ function JarRetentionSection({ environment, onSave, saving }: {
           <Button size="sm" variant="secondary" onClick={() => setEditing(true)}>Edit Policy</Button>
         )}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/ui/src/pages/Admin/GroupsTab.tsx b/ui/src/pages/Admin/GroupsTab.tsx
index b826d997..e6a8967d 100644
--- a/ui/src/pages/Admin/GroupsTab.tsx
+++ b/ui/src/pages/Admin/GroupsTab.tsx
@@ -32,6 +32,7 @@ import {
 } from '../../api/queries/admin/rbac';
 import type { GroupDetail } from '../../api/queries/admin/rbac';
 import styles from './UserManagement.module.css';
+import sectionStyles from '../../styles/section-card.module.css';
 
 const BUILTIN_ADMINS_ID = '00000000-0000-0000-0000-000000000010';
 
@@ -361,69 +362,75 @@ export default function GroupsTab({ highlightId, onHighlightConsumed }: { highli
                 </>
               )}
 
-              <SectionHeader>Members (direct)</SectionHeader>
-              <div className={styles.sectionTags}>
-                {members.map((u) => (
-                  <Tag
-                    key={u.userId}
-                    label={u.displayName}
-                    color="auto"
-                    onRemove={() => handleRemoveMember(u.userId)}
+              <div className={sectionStyles.section}>
+                <SectionHeader>Members (direct)</SectionHeader>
+                <div className={styles.sectionTags}>
+                  {members.map((u) => (
+                    <Tag
+                      key={u.userId}
+                      label={u.displayName}
+                      color="auto"
+                      onRemove={() => handleRemoveMember(u.userId)}
+                    />
+                  ))}
+                  {members.length === 0 && (
+                    <span className={styles.inheritedNote}>(no members)</span>
+                  )}
+                  <MultiSelect
+                    options={availableMembers}
+                    value={[]}
+                    onChange={handleAddMembers}
+                    placeholder="+ Add"
                   />
-                ))}
-                {members.length === 0 && (
-                  <span className={styles.inheritedNote}>(no members)</span>
-                )}
-                <MultiSelect
-                  options={availableMembers}
-                  value={[]}
-                  onChange={handleAddMembers}
-                  placeholder="+ Add"
-                />
-              </div>
-              {children.length > 0 && (
-                <span className={styles.inheritedNote}>
-                  + all members of {children.map((c) => c.name).join(', ')}
-                </span>
-              )}
-
-              <SectionHeader>Child groups</SectionHeader>
-              <div className={styles.sectionTags}>
-                {children.map((c) => (
-                  <Tag key={c.id} label={c.name} color="success" />
-                ))}
-                {children.length === 0 && (
+                </div>
+                {children.length > 0 && (
                   <span className={styles.inheritedNote}>
-                    (no child groups)
+                    + all members of {children.map((c) => c.name).join(', ')}
                   </span>
                 )}
               </div>
 
-              <SectionHeader>Assigned roles</SectionHeader>
-              <div className={styles.sectionTags}>
-                {(selectedGroup.directRoles ?? []).map((r) => (
-                  <Tag
-                    key={r.id}
-                    label={r.name}
-                    color="warning"
-                    onRemove={() => {
-                      if (members.length > 0) {
-                        setRemoveRoleTarget(r.id);
-                      } else {
-                        handleRemoveRole(r.id);
-                      }
-                    }}
+              <div className={sectionStyles.section}>
+                <SectionHeader>Child groups</SectionHeader>
+                <div className={styles.sectionTags}>
+                  {children.map((c) => (
+                    <Tag key={c.id} label={c.name} color="success" />
+                  ))}
+                  {children.length === 0 && (
+                    <span className={styles.inheritedNote}>
+                      (no child groups)
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className={sectionStyles.section}>
+                <SectionHeader>Assigned roles</SectionHeader>
+                <div className={styles.sectionTags}>
+                  {(selectedGroup.directRoles ?? []).map((r) => (
+                    <Tag
+                      key={r.id}
+                      label={r.name}
+                      color="warning"
+                      onRemove={() => {
+                        if (members.length > 0) {
+                          setRemoveRoleTarget(r.id);
+                        } else {
+                          handleRemoveRole(r.id);
+                        }
+                      }}
+                    />
+                  ))}
+                  {(selectedGroup.directRoles ?? []).length === 0 && (
+                    <span className={styles.inheritedNote}>(no roles)</span>
+                  )}
+                  <MultiSelect
+                    options={availableRoles}
+                    value={[]}
+                    onChange={handleAddRoles}
+                    placeholder="+ Add"
                   />
-                ))}
-                {(selectedGroup.directRoles ?? []).length === 0 && (
-                  <span className={styles.inheritedNote}>(no roles)</span>
-                )}
-                <MultiSelect
-                  options={availableRoles}
-                  value={[]}
-                  onChange={handleAddRoles}
-                  placeholder="+ Add"
-                />
+                </div>
               </div>
             </>
           ) : null
diff --git a/ui/src/pages/Admin/UsersTab.tsx b/ui/src/pages/Admin/UsersTab.tsx
index 7e7ec05f..50b66890 100644
--- a/ui/src/pages/Admin/UsersTab.tsx
+++ b/ui/src/pages/Admin/UsersTab.tsx
@@ -35,6 +35,7 @@ import {
 import type { UserDetail } from '../../api/queries/admin/rbac';
 import { useAuthStore } from '../../auth/auth-store';
 import styles from './UserManagement.module.css';
+import sectionStyles from '../../styles/section-card.module.css';
 
 export default function UsersTab({ highlightId, onHighlightConsumed }: { highlightId?: string | null; onHighlightConsumed?: () => void }) {
   const { toast } = useToast();
@@ -366,24 +367,27 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
                 </Button>
               </div>
 
-              <SectionHeader>Status</SectionHeader>
-              <div className={styles.sectionTags}>
-                <Tag label="Active" color="success" />
+              <div className={sectionStyles.section}>
+                <SectionHeader>Status</SectionHeader>
+                <div className={styles.sectionTags}>
+                  <Tag label="Active" color="success" />
+                </div>
+
+                <div className={styles.metaGrid}>
+                  <span className={styles.metaLabel}>ID</span>
+                  <MonoText size="xs">{selected.userId}</MonoText>
+                  <span className={styles.metaLabel}>Created</span>
+                  <span className={styles.metaValue}>
+                    {new Date(selected.createdAt).toLocaleDateString()}
+                  </span>
+                  <span className={styles.metaLabel}>Provider</span>
+                  <span className={styles.metaValue}>{selected.provider}</span>
+                </div>
               </div>
 
-              <div className={styles.metaGrid}>
-                <span className={styles.metaLabel}>ID</span>
-                <MonoText size="xs">{selected.userId}</MonoText>
-                <span className={styles.metaLabel}>Created</span>
-                <span className={styles.metaValue}>
-                  {new Date(selected.createdAt).toLocaleDateString()}
-                </span>
-                <span className={styles.metaLabel}>Provider</span>
-                <span className={styles.metaValue}>{selected.provider}</span>
-              </div>
-
-              <SectionHeader>Security</SectionHeader>
-              <div className={styles.securitySection}>
+              <div className={sectionStyles.section}>
+                <SectionHeader>Security</SectionHeader>
+                <div className={styles.securitySection}>
                 {selected.provider === 'local' ? (
                   <>
                     <div className={styles.securityRow}>
@@ -445,133 +449,138 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
                     </InfoCallout>
                   </>
                 )}
+                </div>
               </div>
 
-              <SectionHeader>Group membership (direct only)</SectionHeader>
-              <div className={styles.sectionTags}>
-                {selected.directGroups.map((g) => (
-                  <Tag
-                    key={g.id}
-                    label={g.name}
-                    color="success"
-                    onRemove={() => {
-                      removeFromGroup.mutate(
-                        { userId: selected.userId, groupId: g.id },
-                        {
-                          onSuccess: () =>
-                            toast({ title: 'Group removed', variant: 'success' }),
-                          onError: () =>
-                            toast({
-                              title: 'Failed to remove group',
-                              variant: 'error',
-                              duration: 86_400_000,
-                            }),
-                        },
-                      );
-                    }}
-                  />
-                ))}
-                {selected.directGroups.length === 0 && (
-                  <span className={styles.inheritedNote}>(no groups)</span>
-                )}
-                <MultiSelect
-                  options={availableGroups}
-                  value={[]}
-                  onChange={(ids) => {
-                    for (const groupId of ids) {
-                      addToGroup.mutate(
-                        { userId: selected.userId, groupId },
-                        {
-                          onSuccess: () =>
-                            toast({ title: 'Added to group', variant: 'success' }),
-                          onError: () =>
-                            toast({
-                              title: 'Failed to add group',
-                              variant: 'error',
-                              duration: 86_400_000,
-                            }),
-                        },
-                      );
-                    }
-                  }}
-                  placeholder="+ Add"
-                />
-              </div>
-
-              <SectionHeader>
-                Effective roles (direct + inherited)
-              </SectionHeader>
-              <div className={styles.sectionTags}>
-                {selected.directRoles.map((r) => (
-                  <Tag
-                    key={r.id}
-                    label={r.name}
-                    color="warning"
-                    onRemove={() => {
-                      removeRole.mutate(
-                        { userId: selected.userId, roleId: r.id },
-                        {
-                          onSuccess: () =>
-                            toast({
-                              title: 'Role removed',
-                              description: r.name,
-                              variant: 'success',
-                            }),
-                          onError: () =>
-                            toast({
-                              title: 'Failed to remove role',
-                              variant: 'error',
-                              duration: 86_400_000,
-                            }),
-                        },
-                      );
-                    }}
-                  />
-                ))}
-                {inheritedRoles.map((r) => (
-                  <Badge
-                    key={r.id}
-                    label={`${r.name} ↑ group`}
-                    color="warning"
-                    variant="dashed"
-                    className={styles.inherited}
-                  />
-                ))}
-                {selected.directRoles.length === 0 &&
-                  inheritedRoles.length === 0 && (
-                    <span className={styles.inheritedNote}>(no roles)</span>
+              <div className={sectionStyles.section}>
+                <SectionHeader>Group membership (direct only)</SectionHeader>
+                <div className={styles.sectionTags}>
+                  {selected.directGroups.map((g) => (
+                    <Tag
+                      key={g.id}
+                      label={g.name}
+                      color="success"
+                      onRemove={() => {
+                        removeFromGroup.mutate(
+                          { userId: selected.userId, groupId: g.id },
+                          {
+                            onSuccess: () =>
+                              toast({ title: 'Group removed', variant: 'success' }),
+                            onError: () =>
+                              toast({
+                                title: 'Failed to remove group',
+                                variant: 'error',
+                                duration: 86_400_000,
+                              }),
+                          },
+                        );
+                      }}
+                    />
+                  ))}
+                  {selected.directGroups.length === 0 && (
+                    <span className={styles.inheritedNote}>(no groups)</span>
                   )}
-                <MultiSelect
-                  options={availableRoles}
-                  value={[]}
-                  onChange={(roleIds) => {
-                    for (const roleId of roleIds) {
-                      assignRole.mutate(
-                        { userId: selected.userId, roleId },
-                        {
-                          onSuccess: () =>
-                            toast({
-                              title: 'Role assigned',
-                              variant: 'success',
-                            }),
-                          onError: () =>
-                            toast({
-                              title: 'Failed to assign role',
-                              variant: 'error',
-                              duration: 86_400_000,
-                            }),
-                        },
-                      );
-                    }
-                  }}
-                  placeholder="+ Add"
-                />
+                  <MultiSelect
+                    options={availableGroups}
+                    value={[]}
+                    onChange={(ids) => {
+                      for (const groupId of ids) {
+                        addToGroup.mutate(
+                          { userId: selected.userId, groupId },
+                          {
+                            onSuccess: () =>
+                              toast({ title: 'Added to group', variant: 'success' }),
+                            onError: () =>
+                              toast({
+                                title: 'Failed to add group',
+                                variant: 'error',
+                                duration: 86_400_000,
+                              }),
+                          },
+                        );
+                      }
+                    }}
+                    placeholder="+ Add"
+                  />
+                </div>
+              </div>
+
+              <div className={sectionStyles.section}>
+                <SectionHeader>
+                  Effective roles (direct + inherited)
+                </SectionHeader>
+                <div className={styles.sectionTags}>
+                  {selected.directRoles.map((r) => (
+                    <Tag
+                      key={r.id}
+                      label={r.name}
+                      color="warning"
+                      onRemove={() => {
+                        removeRole.mutate(
+                          { userId: selected.userId, roleId: r.id },
+                          {
+                            onSuccess: () =>
+                              toast({
+                                title: 'Role removed',
+                                description: r.name,
+                                variant: 'success',
+                              }),
+                            onError: () =>
+                              toast({
+                                title: 'Failed to remove role',
+                                variant: 'error',
+                                duration: 86_400_000,
+                              }),
+                          },
+                        );
+                      }}
+                    />
+                  ))}
+                  {inheritedRoles.map((r) => (
+                    <Badge
+                      key={r.id}
+                      label={`${r.name} ↑ group`}
+                      color="warning"
+                      variant="dashed"
+                      className={styles.inherited}
+                    />
+                  ))}
+                  {selected.directRoles.length === 0 &&
+                    inheritedRoles.length === 0 && (
+                      <span className={styles.inheritedNote}>(no roles)</span>
+                    )}
+                  <MultiSelect
+                    options={availableRoles}
+                    value={[]}
+                    onChange={(roleIds) => {
+                      for (const roleId of roleIds) {
+                        assignRole.mutate(
+                          { userId: selected.userId, roleId },
+                          {
+                            onSuccess: () =>
+                              toast({
+                                title: 'Role assigned',
+                                variant: 'success',
+                              }),
+                            onError: () =>
+                              toast({
+                                title: 'Failed to assign role',
+                                variant: 'error',
+                                duration: 86_400_000,
+                              }),
+                          },
+                        );
+                      }
+                    }}
+                    placeholder="+ Add"
+                  />
+                </div>
+                {inheritedRoles.length > 0 && (
+                  <span className={styles.inheritedNote}>
+                    Roles with ↑ are inherited through group membership
+                  </span>
+                )}
               </div>
-              {inheritedRoles.length > 0 && (
-                <span className={styles.inheritedNote}>
-                  Roles with ↑ are inherited through group membership
-                </span>
-              )}
             </>
           ) : null
         }
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 2cff185f..2c43c55e 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -8,6 +8,7 @@ import {
 } from '@cameleer/design-system';
 import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
 import styles from './AgentHealth.module.css';
+import sectionStyles from '../../styles/section-card.module.css';
 import logStyles from '../../styles/log-panel.module.css';
 import { useAgents, useAgentEvents } from '../../api/queries/agents';
 import { useApplicationLogs } from '../../api/queries/logs';
@@ -353,7 +354,7 @@ export default function AgentHealth() {
 
       {/* Application config bar */}
       {appId && appConfig && (
-        <div className={styles.configBar}>
+        <div className={`${sectionStyles.section} ${styles.configBar}`}>
           {configEditing ? (
             <>
               <div className={styles.configField}>
@@ -569,7 +570,7 @@ export default function AgentHealth() {
           )}
         </div>
 
-        <div className={styles.eventCard}>
+        <div className={`${sectionStyles.section} ${styles.eventCard}`}>
           <div className={styles.eventCardHeader}>
             <span className={styles.sectionTitle}>Timeline</span>
             <div className={logStyles.headerActions}>
diff --git a/ui/src/pages/AgentInstance/AgentInstance.module.css b/ui/src/pages/AgentInstance/AgentInstance.module.css
index f7198378..e437f2b1 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.module.css
+++ b/ui/src/pages/AgentInstance/AgentInstance.module.css
@@ -44,12 +44,8 @@
   font-family: var(--font-mono);
 }
 
-/* Process info card */
+/* Process info card — card styling via sectionStyles.section */
 .processCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
   padding: 16px;
   margin-bottom: 20px;
 }
@@ -116,12 +112,8 @@
   gap: 14px;
 }
 
-/* Timeline card */
+/* Timeline card — card styling via sectionStyles.section */
 .timelineCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
   overflow: hidden;
   display: flex;
   flex-direction: column;
diff --git a/ui/src/pages/AgentInstance/AgentInstance.tsx b/ui/src/pages/AgentInstance/AgentInstance.tsx
index f1f6d831..ba583f45 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -8,6 +8,7 @@ import {
 } from '@cameleer/design-system';
 import type { FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
 import styles from './AgentInstance.module.css';
+import sectionStyles from '../../styles/section-card.module.css';
 import logStyles from '../../styles/log-panel.module.css';
 import chartCardStyles from '../../styles/chart-card.module.css';
 import { useAgents, useAgentEvents } from '../../api/queries/agents';
@@ -238,7 +239,7 @@ export default function AgentInstance() {
           </div>
 
           {/* Process info card */}
-          <div className={styles.processCard}>
+          <div className={`${sectionStyles.section} ${styles.processCard}`}>
             <SectionHeader>Process Information</SectionHeader>
             <div className={styles.processGrid}>
               {agent.capabilities?.jvmVersion && (
@@ -438,7 +439,7 @@ export default function AgentInstance() {
           )}
         </div>
 
-        <div className={styles.timelineCard}>
+        <div className={`${sectionStyles.section} ${styles.timelineCard}`}>
           <div className={styles.timelineHeader}>
             <span className={styles.chartTitle}>Timeline</span>
             <div className={logStyles.headerActions}>
diff --git a/ui/src/pages/Dashboard/Dashboard.tsx b/ui/src/pages/Dashboard/Dashboard.tsx
index 112cae58..58bbe14f 100644
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useEffect } from 'react'
+import React, { useState, useMemo, useCallback, useEffect } from 'react'
 import { useParams, useNavigate, useSearchParams } from 'react-router'
 import { AlertTriangle, X, Search, Footprints, RotateCcw } from 'lucide-react'
 import {
@@ -113,7 +113,17 @@ function buildBaseColumns(): Column<Row>[] {
       header: 'Exchange ID',
       sortable: true,
       render: (_: unknown, row: Row) => (
-        <MonoText size="xs">{row.executionId}</MonoText>
+        <MonoText
+          size="xs"
+          title={row.executionId}
+          style={{ cursor: 'pointer' }}
+          onClick={(e: React.MouseEvent) => {
+            e.stopPropagation();
+            navigator.clipboard.writeText(row.executionId);
+          }}
+        >
+          ...{row.executionId.slice(-8)}
+        </MonoText>
       ),
     },
     {
diff --git a/ui/src/pages/DashboardTab/DashboardL2.tsx b/ui/src/pages/DashboardTab/DashboardL2.tsx
index b334b6a3..aef35faa 100644
--- a/ui/src/pages/DashboardTab/DashboardL2.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL2.tsx
@@ -420,7 +420,7 @@ export default function DashboardL2() {
 
       {/* Top 5 Errors — hidden when empty */}
       {errorRows.length > 0 && (
-        <div className={styles.errorsSection}>
+        <div className={tableStyles.tableSection}>
           <div className={tableStyles.tableHeader}>
             <span className={tableStyles.tableTitle}>Top Errors</span>
             <span className={tableStyles.tableMeta}>{errorRows.length} error types</span>
diff --git a/ui/src/pages/DashboardTab/DashboardL3.tsx b/ui/src/pages/DashboardTab/DashboardL3.tsx
index b3143ddd..47b7f181 100644
--- a/ui/src/pages/DashboardTab/DashboardL3.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL3.tsx
@@ -392,7 +392,7 @@ export default function DashboardL3() {
 
       {/* Process Diagram with Latency Heatmap */}
       {appId && routeId && (
-        <div className={styles.diagramSection}>
+        <div className={`${tableStyles.tableSection} ${styles.diagramHeight}`}>
           <ProcessDiagram
             application={appId}
             routeId={routeId}
@@ -421,7 +421,7 @@ export default function DashboardL3() {
 
       {/* Top 5 Errors — hidden if empty */}
       {errorRows.length > 0 && (
-        <div className={styles.errorsSection}>
+        <div className={tableStyles.tableSection}>
           <div className={tableStyles.tableHeader}>
             <span className={tableStyles.tableTitle}>Top 5 Errors</span>
             <Badge label={`${errorRows.length}`} color="error" />
diff --git a/ui/src/pages/DashboardTab/DashboardTab.module.css b/ui/src/pages/DashboardTab/DashboardTab.module.css
index f31f282d..2c6d0f16 100644
--- a/ui/src/pages/DashboardTab/DashboardTab.module.css
+++ b/ui/src/pages/DashboardTab/DashboardTab.module.css
@@ -37,13 +37,8 @@
   text-decoration: underline;
 }
 
-/* Diagram container */
-.diagramSection {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  overflow: hidden;
+/* Diagram container — height override; card styling via tableStyles.tableSection */
+.diagramHeight {
   height: 280px;
 }
 
@@ -90,11 +85,4 @@
   font-weight: 600;
 }
 
-/* Errors section */
-.errorsSection {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  overflow: hidden;
-}
+/* errorsSection removed — use tableStyles.tableSection instead */
diff --git a/ui/src/utils/format-utils.ts b/ui/src/utils/format-utils.ts
index d8125e40..04a07745 100644
--- a/ui/src/utils/format-utils.ts
+++ b/ui/src/utils/format-utils.ts
@@ -1,13 +1,22 @@
 export function formatDuration(ms: number): string {
-  if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`;
-  if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
+  if (ms >= 60_000) {
+    const minutes = Math.floor(ms / 60_000);
+    const seconds = Math.round((ms % 60_000) / 1000);
+    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+  }
+  if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`;
   return `${ms}ms`;
 }
 
 export function formatDurationShort(ms: number | undefined): string {
   if (ms == null) return '-';
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
+  if (ms >= 60_000) {
+    const minutes = Math.floor(ms / 60_000);
+    const seconds = Math.round((ms % 60_000) / 1000);
+    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+  }
+  if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${ms}ms`;
 }
 
 export function statusLabel(s: string): string {