diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 957d5ce019..42f65ca10d 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -1638,10 +1638,9 @@ $_section-header-height: 22px;
   line-height: 1.25;
 }
 
-// Attached remote parties are shown as one badge per device kind in the
-// connection-live green the workspace list already teaches in this panel. The
-// number lives inside a badge, so twenty attached hosts occupy the same width
-// as one and no state sentence sits in permanent navigation chrome.
+// Attached remote parties are shown once per device kind. Message-app marks
+// stay unframed and inherit the theme foreground; connection state is already
+// communicated by the device overview rather than by recoloring the brand.
 .bitfun-nav-panel__footer-device-status-attached {
   display: flex;
   flex-shrink: 0;
@@ -1665,17 +1664,9 @@ $_section-header-height: 22px;
   line-height: 1;
 
   &[data-bf-device-kind='message-app'] {
-    border-color: color-mix(
-      in srgb,
-      var(--bf-appearance-token-color-success) 24%,
-      var(--bf-appearance-token-border-subtle)
-    );
-    background: color-mix(
-      in srgb,
-      var(--bf-appearance-token-color-success) 9%,
-      var(--bf-appearance-token-element-bg-subtle)
-    );
-    color: var(--bf-appearance-token-color-success);
+    border: 0;
+    background: transparent;
+    color: var(--bf-appearance-token-color-text-primary);
   }
 }
 
@@ -2238,12 +2229,8 @@ $_section-header-height: 22px;
   }
 
   &[data-bf-device-kind='message-app'] .bitfun-device-overview__device-icon {
-    background: color-mix(
-      in srgb,
-      var(--bf-appearance-token-color-success) 10%,
-      var(--bf-appearance-token-element-bg-subtle)
-    );
-    color: var(--bf-appearance-token-color-success);
+    background: transparent;
+    color: var(--bf-appearance-token-color-text-primary);
   }
 
   strong {
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx b/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx
index e642e7c5c9..aaebdb373e 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx
@@ -7,7 +7,7 @@ interface ChatAppBrandIconProps {
 
 /**
  * Monochrome contours of the actual chat-app marks. The SVGs intentionally
- * inherit color from the surrounding identity badge so they work in every
+ * inherit color from the surrounding UI so they work in every
  * theme without replacing the recognizable brand silhouettes.
  * References: telegram.org/tour/screenshots, feishu.cn, and the CC0
  * simple-icons WeChat/Telegram vectors.
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.contract.test.ts b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.contract.test.ts
index cf86dedeec..a087451a58 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.contract.test.ts
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.contract.test.ts
@@ -17,6 +17,10 @@ const deviceStatusControlSource = readFileSync(
   new URL('../NavPanel/components/DeviceStatusControl.tsx', import.meta.url),
   'utf8',
 );
+const navPanelStyleSource = readFileSync(
+  new URL('../NavPanel/NavPanel.scss', import.meta.url),
+  'utf8',
+);
 const accountPanelSource = readFileSync(
   new URL('./AccountPanel.tsx', import.meta.url),
   'utf8',
@@ -101,6 +105,32 @@ describe('Remote Connect safety contracts', () => {
   });
 
   it('uses the real monochrome app marks for every chat provider', () => {
+    const overviewBrandStyle = dialogStyleSource.slice(
+      dialogStyleSource.indexOf('.bitfun-remote-connect__chat-brand-item'),
+      dialogStyleSource.indexOf(
+        "[data-bf-component='remote-connect-dialog'][data-bf-part='overviewAction'][data-bf-group='account']",
+      ),
+    );
+    const identityBrandStyle = dialogStyleSource.slice(
+      dialogStyleSource.indexOf('.bitfun-remote-connect__bot-identity-icon'),
+      dialogStyleSource.indexOf('.bitfun-remote-connect__bot-identity-title'),
+    );
+    const connectedBrandStyle = dialogStyleSource.slice(
+      dialogStyleSource.indexOf('.bitfun-remote-connect__connected-app-icon'),
+      dialogStyleSource.indexOf('.bitfun-remote-connect__connected-app-copy'),
+    );
+    const footerMessageBrandStyle = navPanelStyleSource.slice(
+      navPanelStyleSource.indexOf("&[data-bf-device-kind='message-app'] {"),
+      navPanelStyleSource.indexOf('.bitfun-nav-panel__footer-device-status-attached-count'),
+    );
+    const overviewMessageBrandStart = navPanelStyleSource.indexOf(
+      "&[data-bf-device-kind='message-app'] .bitfun-device-overview__device-icon {",
+    );
+    const overviewMessageBrandStyle = navPanelStyleSource.slice(
+      overviewMessageBrandStart,
+      navPanelStyleSource.indexOf('  strong {', overviewMessageBrandStart),
+    );
+
     expect(dialogSource).toContain('<ChatAppBrandIcon app={botTab} size={28} />');
     expect(dialogSource).toContain('bitfun-remote-connect__chat-brand-group');
     expect(dialogSource).toContain('<ChatAppBrandIcon app={brand} size={15} />');
@@ -110,6 +140,15 @@ describe('Remote Connect safety contracts', () => {
     expect(chatAppBrandIconSource.match(/fill="currentColor"/g)).toHaveLength(5);
     expect(deviceStatusControlSource).toContain('chatAppBrandFromIdentity(identity)');
     expect(deviceStatusControlSource).toContain('<ChatAppBrandIcon app={chatApp} size={size} />');
+    expect(overviewBrandStyle).toContain('border: 0');
+    expect(overviewBrandStyle).toContain('background: transparent');
+    expect(identityBrandStyle).not.toContain('background:');
+    expect(connectedBrandStyle).not.toContain('background:');
+    expect(footerMessageBrandStyle).toContain('border: 0');
+    expect(footerMessageBrandStyle).toContain('background: transparent');
+    expect(footerMessageBrandStyle).toContain('--bf-appearance-token-color-text-primary');
+    expect(overviewMessageBrandStyle).toContain('background: transparent');
+    expect(overviewMessageBrandStyle).toContain('--bf-appearance-token-color-text-primary');
     expect(dialogSource).not.toContain('<Send size={28} />');
     expect(dialogSource).not.toContain('<MessageSquareText size={28} />');
     expect(dialogSource).not.toContain('<MessagesSquare size={28} />');
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
index 77423820e1..8a66d76923 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
@@ -273,19 +273,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: var(--bf-border-width-default) solid var(--bf-color-border-subtle);
-  border-radius: var(--bf-radius-base);
-  background: var(--bf-color-surface-subtle);
-  color: var(--bf-color-content-secondary);
-
-  &[data-connected='true'] {
-    background: color-mix(
-      in srgb,
-      var(--bf-color-accent-default) 12%,
-      var(--bf-color-surface-panel)
-    );
-    color: var(--bf-color-accent-default);
-  }
+  border: 0;
+  background: transparent;
+  color: var(--bf-color-content-primary);
 }
 
 [data-bf-component='remote-connect-dialog'][data-bf-part='overviewAction'][data-bf-group='account'] {
@@ -632,13 +622,7 @@
   width: 60px;
   height: 60px;
   margin-bottom: 16px;
-  border-radius: var(--bf-radius-pill);
-  background: color-mix(
-    in srgb,
-    var(--bf-color-accent-default) 10%,
-    var(--bf-color-surface-panel)
-  );
-  color: var(--bf-color-accent-default);
+  color: var(--bf-color-content-primary);
 }
 
 .bitfun-remote-connect__bot-identity-title {
@@ -858,13 +842,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--bf-radius-lg);
-  background: color-mix(
-    in srgb,
-    var(--bf-color-accent-default) 10%,
-    var(--bf-color-surface-panel)
-  );
-  color: var(--bf-color-accent-default);
+  color: var(--bf-color-content-primary);
 }
 
 .bitfun-remote-connect__connected-app-copy {