diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx
index 542c49e..9a32fce 100644
--- a/client/src/components/sidebar.jsx
+++ b/client/src/components/sidebar.jsx
@@ -74,7 +74,7 @@ export default function Sidebar () {
             gap={4} paddingTop={4}
             paddingLeft={14} paddingRight={3}
         >
-          <CloseButton color="#19332D"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton>
+          <CloseButton color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton>
           <Button color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
             <PushPin fill="white" /> Dashboard
           </Button>
@@ -124,6 +124,7 @@ export default function Sidebar () {
           </IconButton>
         </Box>
       )}
+      
     </>
   );
 }
diff --git a/client/src/main.jsx b/client/src/main.jsx
index b024476..85e6708 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,16 +1,16 @@
-import { Provider } from "./components/ui/provider"
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './css/index.css'
-import 'react-grid-layout/css/styles.css'
-import 'react-resizable/css/styles.css'
-import App from './App.jsx'
-import theme from './theme.js'
+import { ChakraProvider } from '@chakra-ui/react';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './css/index.css';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import App from './App.jsx';
+import { system } from './theme.js';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <Provider theme={theme}>
+    <ChakraProvider value={system}>
       <App />
-    </Provider>
+    </ChakraProvider>
   </StrictMode>,
 )
diff --git a/client/src/theme.js b/client/src/theme.js
index 20508f3..042393a 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -1,14 +1,18 @@
-import { extendTheme } from "@chakra-ui/react";
+import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";
 
-const theme = extendTheme({
-  semanticTokens: {
-    colors: {
-      primary: {
-        defualt: 'white',
-        _dark: 'grey.800'
+const config = defineConfig({
+  theme: {
+    tokens: {
+      colors: {
+        primaryBG: { value: {base: "#FFFFF", _dark: "AAB8C5"} },
+        secondaryBG: { value: "#EDF1F1" },
+        border: {value: "#000000"}
       },
-    },
-  },
+      fonts: {
+        body: { value: "georgia, system-ui, sans-serif" },
+      },
+    }
+  }
 });
 
-export default theme;
\ No newline at end of file
+export const system = createSystem(defaultConfig, config);
\ No newline at end of file