diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0aee570..2b4cb10 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -180,23 +180,43 @@ function ProjectPage({
   );
 }
 
+function parseHash(): { view: "list" | "project"; projectId: number | null } {
+  const hash = window.location.hash;
+  const match = hash.match(/^#\/project\/(\d+)$/);
+  if (match) return { view: "project", projectId: Number(match[1]) };
+  return { view: "list", projectId: null };
+}
+
 function App() {
-  const [view, setView] = useState<"list" | "project">("list");
-  const [projectId, setProjectId] = useState<number | null>(null);
+  const [view, setView] = useState<"list" | "project">(parseHash().view);
+  const [projectId, setProjectId] = useState<number | null>(parseHash().projectId);
+
+  useEffect(() => {
+    const onHashChange = () => {
+      const state = parseHash();
+      setView(state.view);
+      setProjectId(state.projectId);
+    };
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, []);
+
+  const navigate = (id: number | null) => {
+    if (id !== null) {
+      window.location.hash = `#/project/${id}`;
+    } else {
+      window.location.hash = "";
+    }
+  };
 
   return (
     <div className="app">
       {view === "list" ? (
-        <ProjectList
-          onSelect={(id) => {
-            setProjectId(id);
-            setView("project");
-          }}
-        />
+        <ProjectList onSelect={(id) => navigate(id)} />
       ) : (
         <ProjectPage
           projectId={projectId!}
-          onBack={() => setView("list")}
+          onBack={() => navigate(null)}
         />
       )}
     </div>