diff --git a/src/App.tsx b/src/App.tsx
index 5c5445e..8bc8a60 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1019,8 +1019,8 @@ function App() {
       }
       chrome?.runtime?.sendMessage({ action: "logout" }, (response) => {
         if (response) {
-          resetAllStates();
           executeEvent("logout-event", {});
+          resetAllStates();
         }
       });
     } catch (error) {}
diff --git a/src/components/Group/WebsocketActive.tsx b/src/components/Group/WebsocketActive.tsx
index 33a6dca..06d5d4b 100644
--- a/src/components/Group/WebsocketActive.tsx
+++ b/src/components/Group/WebsocketActive.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { getBaseApiReactSocket, pauseAllQueues, resumeAllQueues } from '../../App';
+import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 
 export const WebSocketActive = ({ myAddress, setIsLoadingGroups }) => {
   const socketRef = useRef(null); // WebSocket reference
@@ -16,6 +17,18 @@ export const WebSocketActive = ({ myAddress, setIsLoadingGroups }) => {
     }
   };
 
+  const logoutEventFunc = () => {
+    forceCloseWebSocket()
+  };
+
+  useEffect(() => {
+    subscribeToEvent("logout-event", logoutEventFunc);
+
+    return () => {
+      unsubscribeFromEvent("logout-event", logoutEventFunc);
+    };
+  }, []);
+
   useEffect(() => {
     if (!myAddress) return; // Only proceed if myAddress is set
     if (!window?.location?.href?.includes("?main=true")) return;