diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index 80dcdf25f..cb2b5aafb 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -208,6 +208,7 @@ function Sidebar() {
 				borderRight: `1px solid ${theme.palette.primary.lowContrast}`, 
 				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: 0,
+				backgroundColor: theme.palette.primary.sidebar,
 				"& :is(p, span, .MuiListSubheader-root)": {
 					/* 
 					Text color for unselected menu items and menu headings
diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js
index 239d36e36..52623ac0c 100644
--- a/src/Utils/Theme/constants.js
+++ b/src/Utils/Theme/constants.js
@@ -109,6 +109,8 @@ const newColors = {
 	red400: "#D92020",
 	red600: "#9B4B4B",
 	red700: "#980303",
+	sidebarLight: "#F9F9FB",
+	sidebarDark: "#1A1A1D",
 };
 
 /* 
@@ -167,6 +169,10 @@ const newSemanticColors = {
 			light: newColors.gray200,
 			dark: newColors.blueGray600,
 		},
+		sidebar: {
+			light: newColors.sidebarLight,
+			dark: newColors.sidebarDark,
+		},
 	},
 	secondary: {
 		main: {