diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index a390093..69211b3 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -15,6 +15,9 @@
 
   @property()
   isIdle: boolean = false;
+  
+  @property()
+  isDisconnected: boolean = false;
 
   static styles = css`
     @keyframes gentle-pulse {
@@ -94,12 +97,12 @@
       font-weight: bold;
       text-align: center;
       letter-spacing: 0.5px;
-      width: 64px; /* Fixed width for the banner */
+      width: 104px; /* Wider to accommodate DISCONNECTED text */
       left: 50%;
       transform: translateX(-50%);
       top: 60%; /* Position a little below center */
       z-index: 10; /* Ensure it appears above the icons */
-      opacity: 0.6;
+      opacity: 0.9;
     }
 
     .status-working {
@@ -111,6 +114,12 @@
       background-color: #e6f4ea;
       color: #0d652d;
     }
+    
+    .status-disconnected {
+      background-color: #ffebee; /* Light red */
+      color: #d32f2f; /* Red */
+      font-weight: bold;
+    }
   `;
 
   render() {
@@ -126,8 +135,17 @@
 
     const agentState = `${this.agentState ? " (" + this.agentState + ")" : ""}`;
 
-    // Determine working state - working if not idle
-    const isWorking = !this.isIdle;
+    // Determine state - disconnected takes precedence, then working vs idle
+    let statusClass = "status-idle";
+    let statusText = "IDLE";
+    
+    if (this.isDisconnected) {
+      statusClass = "status-disconnected";
+      statusText = "DISCONNECTED";
+    } else if (!this.isIdle) {
+      statusClass = "status-working";
+      statusText = "WORKING";
+    }
 
     return html`
       <div class="call-status-container">
@@ -152,9 +170,9 @@
           </div>
         </div>
         <div
-          class="status-banner ${isWorking ? "status-working" : "status-idle"}"
+          class="status-banner ${statusClass}"
         >
-          ${isWorking ? "WORKING" : "IDLE"}
+          ${statusText}
         </div>
       </div>
     `;