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()}>

apps/frontend/src/components/input.tsx

@@ -3,6 +3,7 @@ type InputType = {
   forLabel: string;
   type: "password" | "email" | "text";
   dark?: boolean;
+  defaultValue?: string;
   onChange?: (v: string) => void;
 };
 
@@ -10,6 +11,7 @@ export default function Input({
   label,
   forLabel,
   type,
+  defaultValue,
   dark = true,
   onChange,
 }: InputType) {
@@ -23,6 +25,7 @@ export default function Input({
         onChange={onChange ? (e) => onChange(e.target.value) : undefined}
         type={type}
         required
+        defaultValue={defaultValue}
         name={forLabel}
         className={`${dark ? "bg-black text-white" : "bg-white text-black"} rounded-lg border-white block`}
       />