diff --git a/src/popup/popup.css b/src/popup/popup.css
index 4fec1ba..f28d331 100644
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -108,6 +108,10 @@ body {
   background: #28a745;
 }
 
+.status-dot.unbound {
+  background: #6c757d;
+}
+
 .status-text {
   font-size: 12px;
   font-weight: 500;
diff --git a/src/popup/popup.js b/src/popup/popup.js
index e69ea79..c62a80f 100644
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -433,7 +433,15 @@ function updateConnectionStatus(connection) {
     if ((connection.mode === 'context') && connection.context) {
       console.log('Popup: Context mode, context:', connection.context);
       console.log('Popup: Context mode, workspace info:', connection.workspace);
-      contextId.textContent = `Bound to context ID: ${connection.context.id}`;
+      
+      // Create green dot indicator for bound state
+      contextId.textContent = '';
+      const boundIndicator = createSecureElement('span', {
+        className: 'status-dot connected',
+        style: 'margin-right: 6px;'
+      });
+      contextId.appendChild(boundIndicator);
+      contextId.appendChild(document.createTextNode(`Bound to context ID: ${escapeHtml(connection.context.id)}`));
 
       // Get workspace name from context or use fallback
       const workspaceName = connection.context.workspaceName || connection.context.workspace ||
@@ -453,7 +461,15 @@ function updateConnectionStatus(connection) {
     } else if ((connection.mode === 'explorer') && connection.workspace) {
       const wsName = getWorkspaceName(connection.workspace);
       console.log('Popup: Explorer mode, workspace:', wsName);
-      contextId.textContent = `Current workspace: ${wsName}`;
+      
+      // Create gray dot indicator for unbound state (explorer mode is not bound - no dynamic updates)
+      contextId.textContent = '';
+      const unboundIndicator = createSecureElement('span', {
+        className: 'status-dot unbound',
+        style: 'margin-right: 6px;'
+      });
+      contextId.appendChild(unboundIndicator);
+      contextId.appendChild(document.createTextNode(`Current workspace: ${escapeHtml(wsName)}`));
 
       // Format URL as workspace.name://path
       const workspacePath = currentWorkspacePath || '/';
@@ -461,7 +477,15 @@ function updateConnectionStatus(connection) {
       contextUrl.classList.add('clickable');
     } else {
       console.log('Popup: No context or workspace selected');
-      contextId.textContent = '-';
+      
+      // Create gray button indicator for unbound state
+      contextId.textContent = '';
+      const unboundIndicator = createSecureElement('span', {
+        className: 'status-dot unbound',
+        style: 'margin-right: 6px;'
+      });
+      contextId.appendChild(unboundIndicator);
+      contextId.appendChild(document.createTextNode('-'));
       contextUrl.textContent = 'Not bound';
       contextUrl.classList.remove('clickable');
     }
@@ -469,7 +493,15 @@ function updateConnectionStatus(connection) {
     console.log('Popup: Setting status to DISCONNECTED');
     connectionStatus.className = 'status-dot disconnected';
     connectionText.textContent = 'Disconnected';
-    contextId.textContent = '-';
+    
+    // Create gray button indicator for unbound state when disconnected
+    contextId.textContent = '';
+    const unboundIndicator = createSecureElement('span', {
+      className: 'status-dot unbound',
+      style: 'margin-right: 6px;'
+    });
+    contextId.appendChild(unboundIndicator);
+    contextId.appendChild(document.createTextNode('-'));
     contextUrl.textContent = 'No context';
     contextUrl.classList.remove('clickable');
   }