diff --git a/src/components/RelayStatusIndicator.tsx b/src/components/RelayStatusIndicator.tsx
index c14df77a..0684399d 100644
--- a/src/components/RelayStatusIndicator.tsx
+++ b/src/components/RelayStatusIndicator.tsx
@@ -58,7 +58,7 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ rela
   if (!localOnlyMode && !offlineMode && !isConnecting) return null
   
   return (
-    <div className="relay-status-indicator" title={
+    <div className={`relay-status-indicator ${isConnecting ? 'connecting' : ''}`} title={
       isConnecting
         ? 'Connecting to relays...'
         : offlineMode 
diff --git a/src/index.css b/src/index.css
index 6249c3e2..70e13c59 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2514,6 +2514,23 @@ body {
   cursor: default;
 }
 
+.relay-status-indicator.connecting {
+  background: rgba(100, 108, 255, 0.15);
+  border: 1px solid rgba(100, 108, 255, 0.25);
+}
+
+.relay-status-indicator.connecting:hover {
+  background: rgba(100, 108, 255, 0.25);
+}
+
+.relay-status-indicator.connecting .relay-status-icon {
+  color: rgba(100, 108, 255, 0.9);
+}
+
+.relay-status-indicator.connecting .relay-status-title {
+  color: rgba(100, 108, 255, 1);
+}
+
 .relay-status-indicator:hover {
   background: rgba(245, 158, 11, 1);
   transform: translateY(-2px);