diff --git a/client/src/App.jsx b/client/src/App.jsx
index ef17a63..4ba2739 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -7,8 +7,8 @@ import { Box } from "@chakra-ui/react"
 function App() {
   return (
     <Grid
-      templateRows="1fr 11fr"
-      templateColumns="2fr 10fr"
+      templateRows="0.75fr 11.25fr"
+      templateColumns="1fr 11fr"
       height="100vh"
       width="100vw"
     >
@@ -21,11 +21,11 @@ function App() {
       <GridItem colSpan={1}>
         <Grid
           templateRows="repeat(6 1fr)"
-          templateColumns="repeat(6 1fr)"
-          height="100vh"
-          width="100vw"
+          templateColumns="repeat(4 1fr)"
+          height="100%"
+          width="100%"
           >
-          <Widgets></Widgets>
+          {/* <Widgets></Widgets> */}
         </Grid>
       </GridItem>
     </Grid>
diff --git a/client/src/assets/close_btn.svg b/client/src/assets/close_btn.svg
deleted file mode 100644
index 5879df9..0000000
--- a/client/src/assets/close_btn.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="30" height="30" rx="2" fill="black" fill-opacity="0.06"/>
-<path d="M21.3535 11.3536L16.7071 16.0001L21.3535 20.6466L20.6465 21.3536L16 16.7071L11.3535 21.3536L10.6465 20.6466L15.293 16.0001L10.6465 11.3536L11.3535 10.6466L16 15.2931L20.6465 10.6466L21.3535 11.3536Z" fill="black"/>
-</svg>
diff --git a/client/src/components/header.jsx b/client/src/components/header.jsx
index 5c4713b..72d8271 100644
--- a/client/src/components/header.jsx
+++ b/client/src/components/header.jsx
@@ -11,12 +11,13 @@ export default function Header() {
           flexDirection="row" 
           justifyContent="space-between" 
           alignItems="center" paddingLeft={5} paddingRight={2}
-          >
-      <Button variant="plain" textStyle="4xl" fontWeight="bold">VDAP</Button>
+          bg="#EDF1F1"
+    >
+      <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 985a30c..a4c3487 100644
--- a/client/src/components/sidebar.jsx
+++ b/client/src/components/sidebar.jsx
@@ -1,6 +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 { useState } from "react"
 
 // ICONS
@@ -56,18 +57,6 @@ export const Users = createIcon({
   ),
 });
 
-export const Close = createIcon({
-  displayName: "Close",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  path: (
-    <>
-      <rect x="1" y="1" width="30" height="30" rx="2" fill="black" fill-opacity="0.06"/>
-      <path d="M21.3535 11.3536L16.7071 16.0001L21.3535 20.6466L20.6465 21.3536L16 16.7071L11.3535 21.3536L10.6465 20.6466L15.293 16.0001L10.6465 11.3536L11.3535 10.6466L16 15.2931L20.6465 10.6466L21.3535 11.3536Z" fill="black"/>
-    </>
-  ),
-});
-
 export default function Sidebar () {
   return (
     <Box  w="100%" h="100%" 
@@ -79,13 +68,13 @@ export default function Sidebar () {
           justifyContent="start" 
           alignItems="start" 
           gap={4} padding={14}
-          >
-      <Button><Close fill="white" stroke="black"/></Button>
-      <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>
   );
 }