diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index be507e67..afe43c5f 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -341,10 +341,14 @@
   top: 0;
   left: 0;
   min-width: 500px;
-  background: var(--bg-body);
-  border-radius: var(--radius-md);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-  padding: 4px;
+  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.3));
+}
+
+/* Click-outside backdrop for expanded overlay */
+.overlayBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 99;
 }
 
 /* Expand/collapse animation wrapper */
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 147dc914..ec9ecfae 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -722,6 +722,8 @@ export default function AgentHealth() {
                 onNavigate={() => navigate(`/runtime/${group.appId}`)}
               />
               {expandedApps.has(group.appId) && (
+                <>
+                <div className={styles.overlayBackdrop} onClick={() => animateToggle(group.appId)} />
                 <div
                   ref={(el) => {
                     if (!el) return;
@@ -758,7 +760,7 @@ export default function AgentHealth() {
                         />
                         <button
                           className={styles.collapseBtn}
-                          onClick={() => animateToggle(group.appId)}
+                          onClick={(e) => { e.stopPropagation(); animateToggle(group.appId); }}
                           title="Collapse"
                         >
                           <ChevronDown size={14} />
@@ -805,6 +807,7 @@ export default function AgentHealth() {
                     />
                   </GroupCard>
                 </div>
+                </>
               )}
             </div>
           ))}