change background and boder colors to tertiry pallette

client/src/Components/ConfigBox/index.jsx

@@ -20,7 +20,7 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
 		borderRightColor: theme.palette.primary.lowContrast,
 		paddingRight: theme.spacing(15),
 		paddingLeft: theme.spacing(15),
-		backgroundColor: theme.palette.container.background,
+		backgroundColor: theme.palette.tertiary.background,
 		"& :is(h1, h2):first-of-type": {
 			fontWeight: 600,
 			marginBottom: theme.spacing(4),

client/src/Components/Fallback/FallbackContainer.jsx

@@ -7,9 +7,9 @@ const FallbackContainer = ({ children, type }) => {
 	return (
 		<Box
 			border={1}
-			borderColor={theme.palette.container.border}
+			borderColor={theme.palette.tertiary.border}
 			borderRadius={theme.shape.borderRadius}
-			backgroundColor={theme.palette.container.background}
+			backgroundColor={theme.palette.tertiary.background}
 			overflow="hidden"
 			sx={{
 				display: "flex",

client/src/Utils/Theme/constants.js

@@ -208,6 +208,14 @@ const newSemanticColors = {
 			light: newColors.blueGray800,
 			dark: newColors.gray100,
 		},
+		background: {
+			light: newColors.gray50,
+			dark: newColors.offBlack,
+		},
+		border: {
+			light: newColors.gray500,
+			dark: newColors.blueGray600,
+		},
 	},
 	success: {
 		main: {
@@ -339,16 +347,6 @@ const newSemanticColors = {
 			dark: newColors.blueGray900,
 		},
 	},
-	container: {
-		background: {
-			light: newColors.gray50,
-			dark: newColors.offBlack,
-		},
-		border: {
-			light: newColors.gray500,
-			dark: newColors.blueGray600,
-		},
-	},
 };
 
 export { typographyLevels, semanticColors as colors, newSemanticColors };