diff --git a/ui/src/components/command-palette/ResultItem.tsx b/ui/src/components/command-palette/ResultItem.tsx
index b8b5c14d..27c92447 100644
--- a/ui/src/components/command-palette/ResultItem.tsx
+++ b/ui/src/components/command-palette/ResultItem.tsx
@@ -1,6 +1,7 @@
 import type { ExecutionSummary, AgentInstance } from '../../api/schema';
 import type { PaletteResult, RouteInfo } from './use-palette-search';
 import { highlightMatch, formatRelativeTime } from './utils';
+import { AppBadge } from '../shared/AppBadge';
 import styles from './CommandPalette.module.css';
 
 interface ResultItemProps {
@@ -59,7 +60,7 @@ function ExecutionResult({ data, query }: { data: ExecutionSummary; query: strin
           <span className={styles.badgeDuration}>{data.durationMs}ms</span>
         </div>
         <div className={styles.resultMeta}>
-          <span className={styles.badgeRoute}>{data.agentId}</span>
+          <AppBadge name={data.agentId} />
           <span className={styles.sep} />
           <HighlightedText text={data.executionId.slice(0, 16)} query={query} />
           {data.errorMessage && (
@@ -124,7 +125,7 @@ function RouteResult({ data, query }: { data: RouteInfo; query: string }) {
         <div className={styles.resultMeta}>
           <span>{data.agentIds.length} {data.agentIds.length === 1 ? 'application' : 'applications'}</span>
           <span className={styles.sep} />
-          <span>{data.agentIds.join(', ')}</span>
+          {data.agentIds.map((id) => <AppBadge key={id} name={id} />)}
         </div>
       </div>
       <div className={styles.resultRight}>