diff --git a/client/src/App.jsx b/client/src/App.jsx
index d21850ebb..af2f6c11c 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -22,9 +22,18 @@ function App() {
 		};
 	}, []);
 
+	const theme = mode === "light" ? lightTheme : darkTheme;
+
 	return (
-		<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
+		<ThemeProvider theme={theme}>
 			<CssBaseline />
+			<GlobalStyles
+				styles={{
+					body: {
+						backgroundColor: theme.palette.background.main,
+					},
+				}}
+			/>
 			<AppLayout>
 				<Routes />
 			</AppLayout>
diff --git a/client/src/Components/v1/Sidebar/index.jsx b/client/src/Components/v1/Sidebar/index.jsx
index 06caede5a..763a4123c 100644
--- a/client/src/Components/v1/Sidebar/index.jsx
+++ b/client/src/Components/v1/Sidebar/index.jsx
@@ -84,8 +84,8 @@ const Sidebar = () => {
 			gap={theme.spacing(6)}
 			sx={{
 				transition,
-				backgroundColor: "#000000",
-				borderRight: "1px solid #344054",
+				backgroundColor: theme.palette.background.main,
+				borderRight: `1px solid ${theme.palette.primary.lowContrast}`,
 				zIndex: 1000,
 			}}
 		>
diff --git a/client/src/index.css b/client/src/index.css
index b29c17960..8b2a1cfce 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -6,7 +6,6 @@
 
 html,
 body {
-	background-color: #000000;
 	overscroll-behavior: none;
 }