diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 02e553a..2fd496f 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import useWindowDimensions from "../hooks/WindowDimensionsHook.tsx";
 import "../assets/css/Header.css"
-import {Link} from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import {auth} from "../utils/firebase.ts";
 
 interface Props {
@@ -15,6 +15,13 @@ export function Header({ user }: Props) {
 
     const currentUser = auth.currentUser?.displayName?? "";
 
+    const navigate = useNavigate();
+
+    const handleLogout = () => {
+        auth.signOut();
+        navigate("/", { replace: true });
+    };
+
     return (
         <header className="header">
             {/* App Name reloads home page */}
@@ -35,7 +42,7 @@ export function Header({ user }: Props) {
                 {user && (
                     <li>
                         <span className="username">{currentUser}</span>
-                        <button type="button" className="logout-btn">Logout</button>
+                        <button type="button" className="logout-btn" onClick={handleLogout}>Logout</button>
                     </li>
                 )}
             </ul>
diff --git a/src/router.tsx b/src/router.tsx
index 31d20c4..92a7964 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -97,7 +97,7 @@ const tileset_weird: Array<{ text: string; rows: number; cols: number }> = [
 export const router = createBrowserRouter([
     {
         path: "/",
-        element: <IndexPage />, // Remove the user={undefined} prop
+        element: <IndexPage />,
         errorElement: <_404Page/>
     },
     {