tie it all together

apps/frontend/src/components/header.tsx

@@ -1,13 +1,17 @@
 import { useAuth } from "../providers/AuthProvider";
+import { useNavigate } from "react-router-dom";
 
 export default function Header() {
   const auth = useAuth();
+  const navigate = useNavigate();
 
   return (
     <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-4">
-      <h1 className="font-bold">
-        Alex <span className="font-normal text-blue-500">/</span> dev + QA
-      </h1>
+      <a href="#" onClick={() => navigate("/")}>
+        <h1 className="font-bold">
+          Alex <span className="font-normal text-blue-500">/</span> dev + QA
+        </h1>
+      </a>
       <div className="flex gap-3 text-sm sm:text-base">
         {auth.user !== null ? (
           <a href="#" onClick={() => auth.logout()}>