diff --git a/client/src/components/header.jsx b/client/src/components/header.jsx
index e7fe26c..72d8271 100644
--- a/client/src/components/header.jsx
+++ b/client/src/components/header.jsx
@@ -13,11 +13,11 @@ export default function Header() {
           alignItems="center" paddingLeft={5} paddingRight={2}
           bg="#EDF1F1"
     >
-      <Button variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
+      <Button color="#19332D" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
       <Button variant="plain">
         <HStack key={user.email} gap="4">
           <Stack gap="0">
-            <Text fontWeight="bold" textStyle="lg">{user.name}</Text>
+            <Text color="#19332D" fontWeight="bold" textStyle="lg">{user.name}</Text>
             <Text color="fg.muted" textStyle="sm">{user.email}</Text>
           </Stack>
           <Avatar.Root>
diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx
index 60e8a76..a4c3487 100644
--- a/client/src/components/sidebar.jsx
+++ b/client/src/components/sidebar.jsx
@@ -1,7 +1,7 @@
-import { Box, Button } from "@chakra-ui/react"
+import { Box, Button } from "@chakra-ui/react";
 import { FaVolcano } from "react-icons/fa6";
 import { createIcon } from "@chakra-ui/react";
-import { CloseButton } from "@chakra-ui/react"
+import { CloseButton } from "@chakra-ui/react";
 import { useState } from "react"
 
 // ICONS
@@ -69,12 +69,12 @@ export default function Sidebar () {
           alignItems="start" 
           gap={4} padding={14}
     >
-      <CloseButton size="xs" variant="subtle" position="relative" top="-12" left="-12"></CloseButton>
-      <Button fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button>
-      <Button fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button>
-      <Button fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button>
-      <Button fontSize="xl" variant="ghost"><FaVolcano /> Volcano</Button>
-      <Button fontSize="xl" variant="ghost"><Users fill="white" stroke="black" /> Admin</Button>
+      <CloseButton color="#19332D" bg="#EDF1F1" size="xs" variant="subtle" position="relative" top="-12" left="-12"></CloseButton>
+      <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button>
+      <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button>
+      <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button>
+      <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><FaVolcano /> Volcano</Button>
+      <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Users fill="white" stroke="black" /> Admin</Button>
   </Box>
   );
 }