diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 170e31a79..da053db14 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -298,7 +298,7 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data"
 									minWidth: theme.spacing(20),
 									textAlign: "left",
 									"&.Mui-focused > div": {
-										backgroundColor: theme.palette.background.main,
+										backgroundColor: theme.palette.primary.main,
 									},
 								},
 							},
diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index bd2656169..b60230008 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -26,7 +26,7 @@ const CustomToolTip = ({ active, payload, label }) => {
 			<Box
 				className="area-tooltip"
 				sx={{
-					backgroundColor: theme.palette.background.main,
+					backgroundColor: theme.palette.primary.main,
 					border: 1,
 					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
@@ -202,7 +202,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
 					stroke={theme.palette.primary.main}
 					fill="url(#colorUv)"
 					strokeWidth={isHovered ? 2.5 : 1.5}
-					activeDot={{ stroke: theme.palette.background.main, r: 5 }}
+					activeDot={{ stroke: theme.palette.primary.main, r: 5 }}
 				/>
 			</AreaChart>
 		</ResponsiveContainer>
diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx
index e0de69329..7dc9df6de 100644
--- a/Client/src/Components/Charts/Utils/chartUtils.jsx
+++ b/Client/src/Components/Charts/Utils/chartUtils.jsx
@@ -118,7 +118,7 @@ export const InfrastructureTooltip = ({
 			<Box
 				className="area-tooltip"
 				sx={{
-					backgroundColor: theme.palette.background.main,
+					backgroundColor: theme.palette.primary.main,
 					border: 1,
 					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
@@ -198,7 +198,7 @@ export const TemperatureTooltip = ({ active, payload, label, keys, dotColor }) =
 			<Box
 				className="area-tooltip"
 				sx={{
-					backgroundColor: theme.palette.background.main,
+					backgroundColor: theme.palette.primary.main,
 					border: 1,
 					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
diff --git a/Client/src/Components/ConfigBox/index.jsx b/Client/src/Components/ConfigBox/index.jsx
index 856916589..90dc22a05 100644
--- a/Client/src/Components/ConfigBox/index.jsx
+++ b/Client/src/Components/ConfigBox/index.jsx
@@ -5,7 +5,7 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
 	flexDirection: "row",
 	justifyContent: "space-between",
 	gap: theme.spacing(20),
-	backgroundColor: theme.palette.background.main,
+	backgroundColor: theme.palette.primary.main,
 	border: 1,
 	borderStyle: "solid",
 	borderColor: theme.palette.primary.lowContrast,
diff --git a/Client/src/Components/Dialog/genericDialog.jsx b/Client/src/Components/Dialog/genericDialog.jsx
index 3d6f2f99e..5adabc231 100644
--- a/Client/src/Components/Dialog/genericDialog.jsx
+++ b/Client/src/Components/Dialog/genericDialog.jsx
@@ -22,7 +22,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 					left: "50%",
 					transform: "translate(-50%, -50%)",
 					width: 400,
-					bgcolor: theme.palette.background.main,
+					bgcolor: theme.palette.primary.main,
 					border: 1,
 					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx
index d85e8e7d4..8fab78d79 100644
--- a/Client/src/Components/Inputs/Search/index.jsx
+++ b/Client/src/Components/Inputs/Search/index.jsx
@@ -142,7 +142,7 @@ const Search = ({
 							option.noOptions
 								? {
 										pointerEvents: "none",
-										backgroundColor: theme.palette.background.main,
+										backgroundColor: theme.palette.primary.main,
 									}
 								: {}
 						}
diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx
index 3041dbe02..d27a7bee0 100644
--- a/Client/src/Components/Label/index.jsx
+++ b/Client/src/Components/Label/index.jsx
@@ -144,7 +144,7 @@ const StatusLabel = ({ status, text, customStyles }) => {
 		},
 		pending: {
 			dotColor: theme.palette.primary.contrastText.secondary,
-			bgColor: theme.palette.background.main,
+			bgColor: theme.palette.primary.main,
 			borderColor: theme.palette.primary.lowContrast,
 		},
 		"cannot resolve": {
diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx
index 70c2ac5d9..9ff6c0ad0 100644
--- a/Client/src/Components/ProgressBars/index.jsx
+++ b/Client/src/Components/ProgressBars/index.jsx
@@ -62,7 +62,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
 							border: 1,
 							borderColor: theme.palette.primary.lowContrast,
 							borderRadius: 2,
-							backgroundColor: theme.palette.background.main,
+							backgroundColor: theme.palette.primary.main,
 							"& svg": {
 								position: "absolute",
 								top: "50%",
diff --git a/Client/src/Components/StatBox/index.jsx b/Client/src/Components/StatBox/index.jsx
index 303fe733f..ea7667864 100644
--- a/Client/src/Components/StatBox/index.jsx
+++ b/Client/src/Components/StatBox/index.jsx
@@ -39,8 +39,8 @@ const StatBox = ({ heading, subHeading, sx }) => {
 				borderStyle: "solid",
 				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: 4,
-				backgroundColor: theme.palette.background.main,
-				/* background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.background.main} 45%)`, */
+				backgroundColor: theme.palette.primary.main,
+				/* background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`, */
 				"& h2": {
 					fontSize: 13,
 					fontWeight: 500,
diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx
index 2f6908b70..f95f74d72 100644
--- a/Client/src/Pages/Account/index.jsx
+++ b/Client/src/Pages/Account/index.jsx
@@ -60,7 +60,7 @@ const Account = ({ open = "profile" }) => {
 			border={1}
 			borderColor={theme.palette.primary.lowContrast}
 			borderRadius={theme.shape.borderRadius}
-			backgroundColor={theme.palette.background.main}
+			backgroundColor={theme.palette.primary.main}
 		>
 			<TabContext value={tab}>
 				<Box
diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx
index 94691b002..e08eaf6cf 100644
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/Client/src/Pages/Auth/CheckEmail.jsx
@@ -130,7 +130,7 @@ const CheckEmail = () => {
 						border: 1,
 						borderRadius: theme.spacing(5),
 						borderColor: theme.palette.primary.lowContrast,
-						backgroundColor: theme.palette.background.main,
+						backgroundColor: theme.palette.primary.main,
 						padding: {
 							xs: theme.spacing(12),
 							sm: theme.spacing(20),
diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index aba178714..e8fa4cfc0 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -132,7 +132,7 @@ const ForgotPassword = () => {
 						border: 1,
 						borderRadius: theme.spacing(5),
 						borderColor: theme.palette.primary.lowContrast,
-						backgroundColor: theme.palette.background.main,
+						backgroundColor: theme.palette.primary.main,
 						padding: {
 							xs: theme.spacing(12),
 							sm: theme.spacing(20),
diff --git a/Client/src/Pages/Auth/Login/Login.jsx b/Client/src/Pages/Auth/Login/Login.jsx
index c85d74847..0da2c49d3 100644
--- a/Client/src/Pages/Auth/Login/Login.jsx
+++ b/Client/src/Pages/Auth/Login/Login.jsx
@@ -182,7 +182,7 @@ const Login = () => {
 						border: 1,
 						borderRadius: theme.spacing(5),
 						borderColor: theme.palette.primary.lowContrast,
-						backgroundColor: theme.palette.background.main,
+						backgroundColor: theme.palette.primary.main,
 						padding: {
 							xs: theme.spacing(12),
 							sm: theme.spacing(20),
diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
index 800ff4354..aa131e268 100644
--- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
@@ -66,7 +66,7 @@ const NewPasswordConfirmed = () => {
 						border: 1,
 						borderRadius: theme.spacing(5),
 						borderColor: theme.palette.primary.lowContrast,
-						backgroundColor: theme.palette.background.main,
+						backgroundColor: theme.palette.primary.main,
 						padding: {
 							xs: theme.spacing(12),
 							sm: theme.spacing(20),
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 939618f90..3e68297d8 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -321,7 +321,7 @@ const Register = ({ isSuperAdmin }) => {
 						border: 1,
 						borderRadius: theme.spacing(5),
 						borderColor: theme.palette.primary.lowContrast,
-						backgroundColor: theme.palette.background.main,
+						backgroundColor: theme.palette.primary.main,
 						padding: {
 							xs: theme.spacing(12),
 							sm: theme.spacing(20),
diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx
index 033fac047..eae595e2c 100644
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -111,7 +111,7 @@ const SetNewPassword = () => {
 						border: 1,
 						borderRadius: theme.spacing(5),
 						borderColor: theme.palette.primary.lowContrast,
-						backgroundColor: theme.palette.background.main,
+						backgroundColor: theme.palette.primary.main,
 						padding: {
 							xs: theme.spacing(12),
 							sm: theme.spacing(20),
diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index 838882644..b91faf353 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -132,7 +132,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 		border: 1,
 		borderColor: theme.palette.primary.lowContrast,
 		borderRadius: theme.shape.borderRadius,
-		backgroundColor: theme.palette.background.main,
+		backgroundColor: theme.palette.primary.main,
 		p: theme.spacing(30),
 	};
 
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 9a7f28dc0..cd6f5970b 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -95,7 +95,7 @@ const Incidents = () => {
 							onChange={handleSelect}
 							items={Object.values(monitors)}
 							sx={{
-								backgroundColor: theme.palette.background.main,
+								backgroundColor: theme.palette.primary.main,
 							}}
 						/>
 						<ButtonGroup
diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
index bd47ae5a0..af7586d0b 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -109,7 +109,7 @@ const BaseBox = ({ children, sx = {} }) => {
 				padding: `${theme.spacing(BASE_BOX_PADDING_VERTICAL)} ${theme.spacing(BASE_BOX_PADDING_HORIZONTAL)}`,
 				minWidth: 200,
 				width: 225,
-				backgroundColor: theme.palette.background.main,
+				backgroundColor: theme.palette.primary.main,
 				border: 1,
 				borderStyle: "solid",
 				borderColor: theme.palette.primary.lowContrast,
@@ -667,7 +667,7 @@ const InfrastructureDetails = () => {
 						border: 1,
 						borderColor: theme.palette.primary.lowContrast,
 						borderRadius: theme.shape.borderRadius,
-						backgroundColor: theme.palette.background.main,
+						backgroundColor: theme.palette.primary.main,
 						p: theme.spacing(30),
 					}}
 				/>
diff --git a/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx b/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx
index 5ea7020dd..9d0945277 100644
--- a/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx
+++ b/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx
@@ -92,7 +92,7 @@ function Pagination({
 							minWidth: theme.spacing(20),
 							textAlign: "left",
 							"&.Mui-focused > div": {
-								backgroundColor: theme.palette.background.main,
+								backgroundColor: theme.palette.primary.main,
 							},
 						},
 					},
diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx
index 5d09b222b..b479a54ba 100644
--- a/Client/src/Pages/Infrastructure/index.jsx
+++ b/Client/src/Pages/Infrastructure/index.jsx
@@ -182,7 +182,7 @@ function Infrastructure() {
 					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					borderStyle: "dashed",
-					backgroundColor: theme.palette.background.main,
+					backgroundColor: theme.palette.primary.main,
 					overflow: "hidden",
 				},
 			}}
diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx
index 5b1bb49ae..7adbcfdaf 100644
--- a/Client/src/Pages/Integrations/index.jsx
+++ b/Client/src/Pages/Integrations/index.jsx
@@ -35,7 +35,7 @@ const IntegrationsComponent = ({ icon, header, info, onClick }) => {
 				border={1}
 				borderColor={theme.palette.primary.lowContrast}
 				borderRadius={theme.shape.borderRadius}
-				backgroundColor={theme.palette.background.main}
+				backgroundColor={theme.palette.primary.main}
 			>
 				{icon}
 				<Stack
diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx
index 2c4a7af2a..d0269f3ff 100644
--- a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx
+++ b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx
@@ -322,7 +322,7 @@ const MaintenanceTable = ({
 								minWidth: theme.spacing(20),
 								textAlign: "left",
 								"&.Mui-focused > div": {
-									backgroundColor: theme.palette.background.main,
+									backgroundColor: theme.palette.primary.main,
 								},
 							},
 						},
diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx
index 4fd33ac20..5e36ac7b0 100644
--- a/Client/src/Pages/Maintenance/index.jsx
+++ b/Client/src/Pages/Maintenance/index.jsx
@@ -54,7 +54,7 @@ const Maintenance = () => {
 					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					borderStyle: "dashed",
-					backgroundColor: theme.palette.background.main,
+					backgroundColor: theme.palette.primary.main,
 					overflow: "hidden",
 				},
 			}}
diff --git a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx
index 998a9dead..d180431c3 100644
--- a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx
+++ b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx
@@ -54,7 +54,7 @@ const CustomToolTip = ({ active, payload, label, config }) => {
 		return (
 			<Box
 				sx={{
-					backgroundColor: theme.palette.background.main,
+					backgroundColor: theme.palette.primary.main,
 					border: 1,
 					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
@@ -289,7 +289,7 @@ const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => {
 				{Object.keys(filteredConfig).map((key) => {
 					const { color } = filteredConfig[key];
 					const strokeColor = theme.palette[color].main;
-					const bgColor = theme.palette.background.main;
+					const bgColor = theme.palette.primary.main;
 
 					return (
 						<Area
diff --git a/Client/src/Pages/PageSpeed/Details/styled.jsx b/Client/src/Pages/PageSpeed/Details/styled.jsx
index cb3fd5c98..b18a4ee2a 100644
--- a/Client/src/Pages/PageSpeed/Details/styled.jsx
+++ b/Client/src/Pages/PageSpeed/Details/styled.jsx
@@ -10,7 +10,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
 	borderRadius: 4,
 	borderTopRightRadius: 16,
 	borderBottomRightRadius: 16,
-	backgroundColor: theme.palette.background.main,
+	backgroundColor: theme.palette.primary.main,
 	"& h2": {
 		color: theme.palette.primary.contrastText.secondary,
 		fontSize: 15,
@@ -33,8 +33,8 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
 		borderLeftStyle: "solid",
 		borderLeftColor: theme.palette.primary.lowContrast,
 		borderRadius: 16,
-		backgroundColor: theme.palette.background.main,
-		background: `linear-gradient(325deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.background.main} 45%)`,
+		backgroundColor: theme.palette.primary.main,
+		background: `linear-gradient(325deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`,
 	},
 	"& path": {
 		transition: "stroke-width 400ms ease",
diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx
index 6d141d6b7..49e9804f9 100644
--- a/Client/src/Pages/PageSpeed/card.jsx
+++ b/Client/src/Pages/PageSpeed/card.jsx
@@ -23,7 +23,7 @@ const CustomToolTip = ({ payload }) => {
 	return (
 		<Box
 			sx={{
-				backgroundColor: theme.palette.background.main,
+				backgroundColor: theme.palette.primary.main,
 				border: 1,
 				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: theme.shape.borderRadius,
@@ -217,7 +217,7 @@ const Card = ({ monitor }) => {
 				border={1}
 				borderColor={theme.palette.primary.lowContrast}
 				borderRadius={theme.shape.borderRadius}
-				backgroundColor={theme.palette.background.main}
+				backgroundColor={theme.palette.primary.main}
 				sx={{
 					display: "grid",
 					gridTemplateColumns: "34px 2fr 1fr",
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index 7d671e136..e40df6d58 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -71,7 +71,7 @@ const PageSpeed = () => {
 					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					borderStyle: "dashed",
-					backgroundColor: theme.palette.background.main,
+					backgroundColor: theme.palette.primary.main,
 					overflow: "hidden",
 				},
 			}}
diff --git a/Client/src/Pages/Status/index.jsx b/Client/src/Pages/Status/index.jsx
index 41ab20bfe..7ba2c0a8d 100644
--- a/Client/src/Pages/Status/index.jsx
+++ b/Client/src/Pages/Status/index.jsx
@@ -15,7 +15,7 @@ const Status = () => {
 					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					borderStyle: "dashed",
-					backgroundColor: theme.palette.background.main,
+					backgroundColor: theme.palette.primary.main,
 					overflow: "hidden",
 				},
 			}}
diff --git a/Client/src/Pages/Uptime/Details/styled.jsx b/Client/src/Pages/Uptime/Details/styled.jsx
index ab14c6c52..b3f0b2191 100644
--- a/Client/src/Pages/Uptime/Details/styled.jsx
+++ b/Client/src/Pages/Uptime/Details/styled.jsx
@@ -10,7 +10,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
 	borderStyle: "solid",
 	borderColor: theme.palette.primary.lowContrast,
 	borderRadius: 4,
-	backgroundColor: theme.palette.background.main,
+	backgroundColor: theme.palette.primary.main,
 	"& h2": {
 		color: theme.palette.primary.contrastText.secondary,
 		fontSize: 15,
diff --git a/Client/src/Pages/Uptime/Home/StatusBox.jsx b/Client/src/Pages/Uptime/Home/StatusBox.jsx
index b39fb877d..2a6f909d2 100644
--- a/Client/src/Pages/Uptime/Home/StatusBox.jsx
+++ b/Client/src/Pages/Uptime/Home/StatusBox.jsx
@@ -47,7 +47,7 @@ const StatusBox = ({ title, value }) => {
 			border={1}
 			borderColor={theme.palette.primary.lowContrast}
 			borderRadius={theme.shape.borderRadius}
-			backgroundColor={theme.palette.background.main}
+			backgroundColor={theme.palette.primary.main}
 			p={theme.spacing(8)}
 			overflow="hidden"
 		>
diff --git a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx
index 552c8ec19..4eeb0f3e2 100644
--- a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx
+++ b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx
@@ -154,7 +154,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
 						height="100%"
 						position="absolute"
 						sx={{
-							backgroundColor: theme.palette.background.main,
+							backgroundColor: theme.palette.primary.main,
 							opacity: 0.8,
 							zIndex: 100,
 						}}
diff --git a/Client/src/Pages/Uptime/Home/fallback.jsx b/Client/src/Pages/Uptime/Home/fallback.jsx
index 8913d0478..9aff95dc4 100644
--- a/Client/src/Pages/Uptime/Home/fallback.jsx
+++ b/Client/src/Pages/Uptime/Home/fallback.jsx
@@ -14,7 +14,7 @@ const Fallback = ({ isAdmin }) => {
 	return (
 		<Stack
 			alignItems="center"
-			backgroundColor={theme.palette.background.main}
+			backgroundColor={theme.palette.primary.main}
 			p={theme.spacing(30)}
 			pt={theme.spacing(25)}
 			gap={theme.spacing(2)}
diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js
index a0de41397..199cbf2b2 100644
--- a/Client/src/Utils/Theme/globalTheme.js
+++ b/Client/src/Utils/Theme/globalTheme.js
@@ -142,7 +142,7 @@ const baseTheme = (palette) => ({
 						borderColor: theme.palette.primary.lowContrast,
 						borderRadius: 4,
 						boxShadow: shadow,
-						backgroundColor: theme.palette.background.main,
+						backgroundColor: theme.palette.primary.main,
 						backgroundImage: "none",
 					};
 				},
@@ -196,7 +196,7 @@ const baseTheme = (palette) => ({
 		MuiPagination: {
 			styleOverrides: {
 				root: ({ theme }) => ({
-					backgroundColor: theme.palette.background.main,
+					backgroundColor: theme.palette.primary.main,
 					border: 1,
 					borderStyle: "solid",
 					borderColor: theme.palette.primary.lowContrast,
@@ -248,7 +248,7 @@ 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`,
+						WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.primary.main} inset`,
 						WebkitTextFillColor: theme.palette.primary.contrastText.main,
 					},
 					"& .MuiInputBase-input.MuiOutlinedInput-input": {