diff --git a/packages/ui/src/common/hooks/useLocalStorage.ts b/packages/ui/src/common/hooks/useLocalStorage.ts
index 20b33e85be..97fc44ae66 100644
--- a/packages/ui/src/common/hooks/useLocalStorage.ts
+++ b/packages/ui/src/common/hooks/useLocalStorage.ts
@@ -41,11 +41,22 @@ export const useLocalStorage = <T>(key?: string) => {
     setState(getItem(key))
   }, [key])
 
+  useEffect(() => {
+    const handleEventOnce = () => {
+      setState(getItem(key))
+    }
+
+    document.addEventListener(`storage_event_${key}`, handleEventOnce)
+    return () => {
+      document.removeEventListener(`storage_event_${key}`, handleEventOnce)
+    }
+  }, [])
+
   const dispatch = useCallback(
     (setStateAction: T | ((prevState?: T) => T)) => {
       const value = isFunction(setStateAction) ? setStateAction(getItem(key)) : setStateAction
-      setState(value)
       setItem(key, value)
+      document.dispatchEvent(new CustomEvent(`storage_event_${key}`, {}))
     },
     [key]
   )