diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx
index 5d296f053..0534e654a 100644
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@@ -11,6 +11,7 @@ import { FaVideo } from "react-icons/fa";
 import Logo from "@/components/Logo";
 import useOptimisticState from "@/hooks/use-optimistic-state";
 import CameraMetrics from "@/views/system/CameraMetrics";
+import { useHashState } from "@/hooks/use-overlay-state";
 
 const metrics = ["general", "storage", "cameras"] as const;
 type SystemMetric = (typeof metrics)[number];
@@ -18,12 +19,18 @@ type SystemMetric = (typeof metrics)[number];
 function System() {
   // stats page
 
-  const [page, setPage] = useState<SystemMetric>("general");
-  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
+  const [page, setPage] = useHashState<SystemMetric>();
+  const [pageToggle, setPageToggle] = useOptimisticState(
+    page ?? "general",
+    setPage,
+    100,
+  );
   const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
 
   useEffect(() => {
-    document.title = `${pageToggle[0].toUpperCase()}${pageToggle.substring(1)} Stats - Frigate`;
+    if (pageToggle) {
+      document.title = `${pageToggle[0].toUpperCase()}${pageToggle.substring(1)} Stats - Frigate`;
+    }
   }, [pageToggle]);
 
   // stats collection