diff --git a/scarf/scarf/ContentView.swift b/scarf/scarf/ContentView.swift
index 7571002..9e60787 100644
--- a/scarf/scarf/ContentView.swift
+++ b/scarf/scarf/ContentView.swift
@@ -21,12 +21,11 @@ struct ContentView: View {
                         ServerSwitcherToolbar()
                     }
                     if serverContext.isRemote {
-                        // `.principal` placement renders the item inside a
-                        // centered emphasis bezel on macOS, which reads as
-                        // an unwanted capsule-with-shadow around the pill.
-                        // `.primaryAction` (right side of the toolbar) has
-                        // no decorative background — what we want.
-                        ToolbarItem(placement: .primaryAction) {
+                        // `.principal` centers the pill in the toolbar —
+                        // the native emphasis bezel is the intended frame;
+                        // the pill's own visual content (icon + label, no
+                        // background) sits inside it in balance.
+                        ToolbarItem(placement: .principal) {
                             ConnectionStatusPill(status: connectionStatus)
                         }
                     }
diff --git a/scarf/scarf/Features/Servers/Views/ConnectionStatusPill.swift b/scarf/scarf/Features/Servers/Views/ConnectionStatusPill.swift
index a7ede8d..6961de3 100644
--- a/scarf/scarf/Features/Servers/Views/ConnectionStatusPill.swift
+++ b/scarf/scarf/Features/Servers/Views/ConnectionStatusPill.swift
@@ -23,18 +23,20 @@ struct ConnectionStatusPill: View {
                 status.retry()
             }
         } label: {
-            // No explicit background — the SwiftUI toolbar gives the item
-            // its own bezel, and painting a second capsule on top looked
-            // doubly-framed. Just the colored dot + label reads cleanly.
-            HStack(spacing: 4) {
-                Circle()
-                    .fill(color)
-                    .frame(width: 8, height: 8)
+            // Leading SF Symbol does double duty: its color is the status
+            // signal (green/orange/yellow/red), and its shape reads as a
+            // clickable toolbar tool. No custom background — the toolbar's
+            // `.principal` emphasis bezel is the frame.
+            HStack(spacing: 5) {
+                Image(systemName: iconName)
+                    .foregroundStyle(color)
+                    .symbolRenderingMode(.hierarchical)
                 Text(label)
                     .font(.caption)
                     .foregroundStyle(.secondary)
                     .lineLimit(1)
             }
+            .padding(.horizontal, 4)
         }
         .buttonStyle(.plain)
         .help(tooltip)
@@ -55,6 +57,19 @@ struct ConnectionStatusPill: View {
         }
     }
 
+    /// State-specific SF Symbol. The icon shape itself signals what the
+    /// click will do: checkmark for connected (click to re-probe),
+    /// stethoscope for degraded (click to run diagnostics), spinning
+    /// arrows for probing, triangle for error.
+    private var iconName: String {
+        switch status.status {
+        case .connected: return "checkmark.circle.fill"
+        case .degraded: return "stethoscope"
+        case .idle: return "arrow.triangle.2.circlepath"
+        case .error: return "exclamationmark.triangle.fill"
+        }
+    }
+
     private var label: String {
         switch status.status {
         case .connected: return "Connected"