Update made minor adjustments to header.

client/src/components/Header/Header.jsx

@@ -1,36 +1,40 @@
 import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
-import { useNavigate } from "react-router-dom";
 import { NavLink } from "react-router-dom";
 
-//TODO: Dynamically populate per each user
-const user = {
-  name: "venessa kuchenik",
-  email: "vkuchenik@contractor.usgs.gov",
-  // avatar: "src\\assets\\user_profile.svg"
+// Import the asset properly so Vite can bundle it for any server
+// import defaultAvatar from "@/assets/user_profile.svg";
+
+// TODO: Pull this dynamically from an Auth Context later!
+const placeholderUser = {
+    name: "Princess Zelda",
+    email: "zelda.royal@hyrule.gov",
+    // avatar: defaultAvatar
 }
 
-export default function Header() {
-  const navigate = useNavigate();
-  const recipe = useRecipe({ key: "header" });
-  const styles = recipe();
+// Accept a 'user' prop now, fallback to placeholder if empty
+export default function Header({ user = placeholderUser }) {
+    const recipe = useRecipe({ key: "header" });
+    const styles = recipe();
 
-  return (
-    <Flex css={styles}>
-      <Button as={NavLink} to={"/home"} color="color" variant="plain" textStyle="5xl" fontWeight="bold">
-        VDAP
-      </Button>
-      <Flex align="center" gap={3} pr={6}>
-        <Stack gap="0" textAlign="center" cursor="default">
-          <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
-          <Text color="fg.muted" textStyle="sm">{user.email}</Text>
-        </Stack>
-        <UserAvatarMenu 
-          name={user.name} 
-          avatar={user.avatar} 
-        />
-      </Flex>
-    </Flex>
-  );
-}
+    return (
+        <Flex css={styles} justify="space-between" align="center" width="100%">
+            {/* Home Link Logo */}
+            <Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">
+                VDAP
+            </Button>
 
+            {/* User Profile Section */}
+            <Flex align="center" gap={3} pr={6}>
+                <Stack gap="0" textAlign="right" cursor="default">
+                    <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
+                    <Text color="fg.muted" textStyle="sm">{user.email}</Text>
+                </Stack>
+                <UserAvatarMenu
+                    name={user.name}
+                    avatar={user.avatar}
+                />
+            </Flex>
+        </Flex>
+    );
+}