diff --git a/resources/js/app.js b/resources/js/app.js
index 8fcf5a2..3abade8 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -13,4 +13,16 @@ if (document.querySelector('[data-requires-reverb]')) {
         forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
         enabledTransports: ['ws', 'wss'],
     });
+
+    // Handle WebSocket connection status events
+    const dispatchStatus = (connected) => {
+        window.dispatchEvent(new CustomEvent('ws-status', {
+            detail: { connected }
+        }));
+    };
+
+    window.Echo.connector.pusher.connection.bind('connected', () => dispatchStatus(true));
+    window.Echo.connector.pusher.connection.bind('unavailable', () => dispatchStatus(false));
+    window.Echo.connector.pusher.connection.bind('disconnected', () => dispatchStatus(false));
+    window.Echo.connector.pusher.connection.bind('failed', () => dispatchStatus(false));
 }
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index 32ce6cf..b36e783 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -25,6 +25,7 @@
     <body class="bg-app-bg text-[#FAFAFA] antialiased selection:bg-[#EC4899]/30 h-full overflow-hidden"
           x-data="{ 
             toasts: [],
+            wsConnected: true,
             addToast(msg, type = 'success') {
                 const id = Date.now();
                 this.toasts.push({ id, msg, type });
@@ -33,7 +34,8 @@
                 }, 4000);
             }
           }"
-          @notify.window="addToast($event.detail.message, $event.detail.type)">
+          @notify.window="addToast($event.detail.message, $event.detail.type)"
+          @ws-status.window="wsConnected = $event.detail.connected">
         
         {{ $slot }}
 
diff --git a/resources/views/livewire/mailbox.blade.php b/resources/views/livewire/mailbox.blade.php
index c5ab24f..de67a21 100644
--- a/resources/views/livewire/mailbox.blade.php
+++ b/resources/views/livewire/mailbox.blade.php
@@ -124,7 +124,8 @@
                         <div class="absolute top-0 right-0 w-24 h-24 bg-pink-500/5 rounded-full blur-2xl -z-10"></div>
                          <div class="flex items-center justify-between mb-3">
                             <div class="flex items-center gap-2">
-                                <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
+                                <div class="w-1.5 h-1.5 rounded-full animate-pulse transition-colors duration-500"
+                                     :class="wsConnected ? 'bg-emerald-500' : 'bg-rose-500'"></div>
                                 <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Active Mailbox</span>
                             </div>
                             <div class="flex items-center gap-2">
