diff --git a/webui/src/web-components/sketch-network-status.ts b/webui/src/web-components/sketch-network-status.ts
index cf168fd..8a5a883 100644
--- a/webui/src/web-components/sketch-network-status.ts
+++ b/webui/src/web-components/sketch-network-status.ts
@@ -18,11 +18,41 @@
     .status-container {
       display: flex;
       align-items: center;
+      justify-content: center;
     }
 
-    .status-text {
-      font-size: 11px;
-      color: #666;
+    .status-indicator {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+    }
+
+    .status-indicator.connected {
+      background-color: #2e7d32; /* Green */
+      box-shadow: 0 0 5px rgba(46, 125, 50, 0.5);
+    }
+
+    .status-indicator.disconnected {
+      background-color: #d32f2f; /* Red */
+      box-shadow: 0 0 5px rgba(211, 47, 47, 0.5);
+    }
+
+    .status-indicator.connecting {
+      background-color: #f57c00; /* Orange */
+      box-shadow: 0 0 5px rgba(245, 124, 0, 0.5);
+      animation: pulse 1.5s infinite;
+    }
+
+    @keyframes pulse {
+      0% {
+        opacity: 0.6;
+      }
+      50% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0.6;
+      }
     }
   `;
 
@@ -41,14 +71,15 @@
   }
 
   render() {
-    // Only render if there's an error to display
-    if (!this.error) {
-      return html``;
-    }
-
+    // Only show the status indicator dot (no text)
     return html`
       <div class="status-container">
-        <span id="statusText" class="status-text">${this.error}</span>
+        <div
+          class="status-indicator ${this.connection}"
+          title="Connection status: ${this.connection}${this.error
+            ? ` - ${this.error}`
+            : ""}"
+        ></div>
       </div>
     `;
   }