diff --git a/modules/frontend/src/App.tsx b/modules/frontend/src/App.tsx
index a92cc17..de7101c 100644
--- a/modules/frontend/src/App.tsx
+++ b/modules/frontend/src/App.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useState, useEffect } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import UserPage from "./pages/UserPage/UserPage";
 import TitlesPage from "./pages/TitlesPage/TitlesPage";
@@ -11,8 +12,22 @@ import { Header } from "./components/Header/Header";
 // OpenAPI.WITH_CREDENTIALS = true
 
 const App: React.FC = () => {
-  // const username = localStorage.getItem("username") || undefined;
-  const userId = localStorage.getItem("user_id");
+  const [userId, setUserId] = useState<string | null>(localStorage.getItem("user_id"));
+
+  // 2. Listen for the same event the Header uses
+  useEffect(() => {
+    const handleAuthChange = () => {
+      setUserId(localStorage.getItem("user_id"));
+    };
+
+    window.addEventListener("storage", handleAuthChange);
+    window.addEventListener("local-storage-update", handleAuthChange);
+
+    return () => {
+      window.removeEventListener("storage", handleAuthChange);
+      window.removeEventListener("local-storage-update", handleAuthChange);
+    };
+  }, []);
 
   return (
     <Router>