Update made minor adjustments to header.

client/src/components/Header/Header.jsx

@@ -1,27 +1,32 @@
 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();
+// 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">
+        <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="center" cursor="default">
+                <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>
@@ -33,4 +38,3 @@ export default function Header() {
         </Flex>
     );
 }
-