Reformat starting changes on layout for better UI visuals

client/src/components/layout/Header.jsx

@@ -19,10 +19,10 @@ export default function Header() {
 
     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>
+            {/*/!* 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}>

client/src/components/layout/Sidebar.jsx

@@ -24,10 +24,42 @@ export default function Sidebar() {
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
   return (
-      <Box css={styles.root} width={isOpen ? "210px" : "71px"} transition="width 0.4s ease" position="relative" display="flex" flexDirection="column" gap={2}
+      <Box
+          css={styles.root}
+          width={isOpen ? "210px" : "71px"}
+          transition="width 0.4s ease"
+          position="relative"
+          display="flex"
+          flexDirection="column"
+          gap={4} // Increased gap slightly to help with the squashed look
+          pt={4} // Added top padding to give the logo room to breathe
       >
+        {/* Home Link Logo */}
+        <Button
+            as={NavLink}
+            to="/home"
+            color="color"
+            variant="plain"
+            textStyle={isOpen ? "5xl" : "4xl"} // Scale down slightly when closed
+            fontWeight="bold"
+            height="auto" // Prevents the large text from squashing vertically
+            overflow="hidden"
+            px={0}
+            justifyContent={isOpen ? "flex-start" : "center"} // Center the 'V' when collapsed
+            ml={isOpen ? 3 : 0} // Align with other buttons when open
+        >
+          {isOpen ? "VDAP" : "V"}
+        </Button>
+
         {/* Menu Trigger */}
-        <IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px" alignSelf="flex-start"
+        <IconButton
+            aria-label="Toggle Sidebar"
+            variant="plain"
+            size="md"
+            onClick={toggleSidebar}
+            width="54px"
+            alignSelf={isOpen ? "flex-start" : "center"} // Center the icon when collapsed
+            ml={isOpen ? 3 : 0} // Align with other buttons when open
         >
           <Menu />
         </IconButton>
@@ -67,7 +99,8 @@ export default function Sidebar() {
         <ColorModeButton
             position="absolute"
             bottom="4"
-            left="4"
+            left={isOpen ? "4" : "50%"} // Center the toggle when collapsed
+            transform={isOpen ? "none" : "translateX(-50%)"} // Exact centering logic
         />
       </Box>
   );