diff --git a/ui/src/pages/Exchanges/ExchangeHeader.module.css b/ui/src/pages/Exchanges/ExchangeHeader.module.css
index ce2d3c0a..cd2a94ef 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.module.css
+++ b/ui/src/pages/Exchanges/ExchangeHeader.module.css
@@ -36,6 +36,14 @@
   color: var(--text-muted);
 }
 
+.agentLabel {
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+
 .duration {
   margin-left: auto;
   font-family: var(--font-mono);
diff --git a/ui/src/pages/Exchanges/ExchangeHeader.tsx b/ui/src/pages/Exchanges/ExchangeHeader.tsx
index a1cad65b..9ffcf8f8 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.tsx
+++ b/ui/src/pages/Exchanges/ExchangeHeader.tsx
@@ -56,13 +56,12 @@ export function ExchangeHeader({ detail }: ExchangeHeaderProps) {
           </>
         )}
         <span className={styles.separator} />
-        <MonoText size="xs">{detail.exchangeId || detail.executionId}</MonoText>
-        <span className={styles.separator} />
-        <span className={styles.route}>{detail.routeId}</span>
         <span className={styles.app}>{detail.applicationName}</span>
+        <span className={styles.route}>{detail.routeId}</span>
         {detail.agentId && (
           <>
             <span className={styles.separator} />
+            <span className={styles.agentLabel}>Agent</span>
             <MonoText size="xs">{detail.agentId}</MonoText>
           </>
         )}