diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js
index 66e06b1ac..882146b00 100644
--- a/Client/src/Utils/Theme/constants.js
+++ b/Client/src/Utils/Theme/constants.js
@@ -108,6 +108,12 @@ const semanticColors = {
 			dark: paletteColors.green900,
 		},
 	},
+	neutral: {
+		contrastText: {
+			light: paletteColors.blueGray900,
+			dark: paletteColors.gray100,
+		},
+	},
 	error: {
 		main: {
 			light: paletteColors.red300,
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index 26f4ba340..360d795d6 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -8,6 +8,7 @@ const {
 	success,
 	error,
 	warning,
+	neutral,
 	gradient: {
 		color1: { dark: color1 },
 		color2: { dark: color2 },
@@ -51,6 +52,9 @@ const palette = {
 		contrastText: warning.contrastText.dark,
 		dark: warning.dark.dark,
 	},
+	neutral: {
+		contrastText: neutral.contrastText.dark,
+	},
 	/* From this part on, try to create semantic structure, not feature based structure */
 	percentage: {
 		uptimePoor: error.main.dark,
diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js
index eafe2f859..9d26effb0 100644
--- a/Client/src/Utils/Theme/globalTheme.js
+++ b/Client/src/Utils/Theme/globalTheme.js
@@ -47,7 +47,8 @@ const baseTheme = (palette) => ({
 						{
 							props: (props) => props.variant === "group",
 							style: {
-								color: theme.palette.secondary.contrastText,
+								/* color: theme.palette.secondary.contrastText, */
+								color: theme.palette.neuter.contrastText,
 								backgroundColor: theme.palette.background.main,
 								border: 1,
 								borderStyle: "solid",
@@ -238,8 +239,8 @@ const baseTheme = (palette) => ({
 						},
 					},
 					"& .MuiInputBase-input:-webkit-autofill": {
-						transition: "background-color 5000s ease-in-out 0s", 
-						WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.background.main} inset`, 
+						transition: "background-color 5000s ease-in-out 0s",
+						WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.background.main} inset`,
 						WebkitTextFillColor: theme.palette.text.primary,
 					},
 					"& .MuiInputBase-input.MuiOutlinedInput-input": {
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index a4758f22d..c232ac007 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -13,6 +13,7 @@ const {
 	success,
 	error,
 	warning,
+	neutral,
 	gradient: {
 		color1: { light: color1 },
 		color2: { light: color2 },
@@ -57,6 +58,9 @@ const palette = {
 		contrastText: warning.contrastText.light,
 		dark: warning.dark.light,
 	},
+	neutral: {
+		contrastText: neutral.contrastText.light,
+	},
 	/* From this part on, try to create semantic structure, not feature based structure */
 	percentage: {
 		uptimePoor: error.main.light,