diff --git a/Client/src/Components/Avatar/index.jsx b/Client/src/Components/Avatar/index.jsx
index 39e8a3f42..aa2050827 100644
--- a/Client/src/Components/Avatar/index.jsx
+++ b/Client/src/Components/Avatar/index.jsx
@@ -32,13 +32,16 @@ const Avatar = ({ src, small, sx }) => {
 	return (
 		<MuiAvatar
 			alt={`${user?.firstName} ${user?.lastName}`}
+			/* TODO What is the  /static/images/avatar/2.jpg ?*/
 			src={src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"}
 			sx={{
 				fontSize: small ? "16px" : "22px",
-				color: "white",
 				fontWeight: 400,
-				backgroundColor: theme.palette.primary.main, // Same BG color as checkmate BG in sidebar
+				color: theme.palette.accent.contrastText,
+				backgroundColor: theme.palette.accent.main, // Same BG color as checkmate BG in sidebar
 				display: "inline-flex",
+				/* 
+				TODO not sure what this is for*/
 				"&::before": {
 					content: `""`,
 					position: "absolute",
@@ -54,7 +57,7 @@ const Avatar = ({ src, small, sx }) => {
 			}}
 		>
 			{user.firstName?.charAt(0)}
-			{user.lastName?.charAt(0) || ''} 
+			{user.lastName?.charAt(0) || ""}
 		</MuiAvatar>
 	);
 };
diff --git a/Client/src/Components/IconBox/index.jsx b/Client/src/Components/IconBox/index.jsx
index 03e2b9c64..0b67b56d1 100644
--- a/Client/src/Components/IconBox/index.jsx
+++ b/Client/src/Components/IconBox/index.jsx
@@ -50,7 +50,7 @@ const IconBox = styled(Box)(
 		borderStyle: "solid",
 		borderColor: theme.palette.primary.lowContrast,
 		borderRadius: borderRadius,
-		backgroundColor: theme.palette.background.accent,
+		backgroundColor: theme.palette.tertiary.main,
 		"& svg": {
 			position: "absolute",
 			top: "50%",
diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx
index ce7a07dea..1da433caa 100644
--- a/Client/src/Components/Inputs/Checkbox/index.jsx
+++ b/Client/src/Components/Inputs/Checkbox/index.jsx
@@ -90,7 +90,7 @@ const Checkbox = ({
 					mr: theme.spacing(6),
 				},
 				"&:not(:has(.Mui-disabled)):hover": {
-					backgroundColor: theme.palette.background.accent,
+					backgroundColor: theme.palette.tertiary.main,
 				},
 				"& span.MuiTypography-root": {
 					fontSize: 13,
diff --git a/Client/src/Components/Inputs/Radio/index.jsx b/Client/src/Components/Inputs/Radio/index.jsx
index 1741be5c6..b1f970722 100644
--- a/Client/src/Components/Inputs/Radio/index.jsx
+++ b/Client/src/Components/Inputs/Radio/index.jsx
@@ -69,7 +69,7 @@ const Radio = (props) => {
 				m: theme.spacing(-2.5),
 				borderRadius: theme.shape.borderRadius,
 				"&:hover": {
-					backgroundColor: theme.palette.background.accent,
+					backgroundColor: theme.palette.tertiary.main,
 				},
 				"& .MuiButtonBase-root": {
 					p: 0,
diff --git a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx
index 6b5920ed5..a112f2f7f 100644
--- a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx
+++ b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx
@@ -13,7 +13,7 @@ export const HttpAdornment = ({ https }) => {
 			height="100%"
 			sx={{
 				borderRight: `solid 1px ${theme.palette.primary.lowContrast}`,
-				backgroundColor: theme.palette.background.accent,
+				backgroundColor: theme.palette.tertiary.main,
 				pl: theme.spacing(6),
 			}}
 		>
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index ed98011dc..d2329acd2 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -157,7 +157,6 @@ function Sidebar() {
 	}, [location]);
 
 	/* TODO refactor this, there are a some ternaries and comments in the return  */
-
 	return (
 		<Stack
 			component="aside"
@@ -170,9 +169,8 @@ function Sidebar() {
 				borderRadius: theme.shape.borderRadius,
 				/* TODO selected item */
 				"& .selected-path": {
-					/* TODO lookup theme.palette.background.accent */
-					backgroundColor:
-						theme.palette.secondary.main /* theme.palette.background.accent */,
+					/* TODO lookup theme.palette.tertiary.main */
+					backgroundColor: theme.palette.secondary.main /* theme.palette.tertiary.main */,
 
 					/* TODO not working */
 					color: theme.palette.primary.main,
@@ -383,7 +381,7 @@ function Sidebar() {
 								sx={{
 									ml: theme.spacing(8),
 									"& .selected-path": {
-										backgroundColor: theme.palette.background.accent,
+										backgroundColor: theme.palette.tertiary.main,
 									},
 								}}
 							>
diff --git a/Client/src/Components/StatBox/index.jsx b/Client/src/Components/StatBox/index.jsx
index 1a6148475..303fe733f 100644
--- a/Client/src/Components/StatBox/index.jsx
+++ b/Client/src/Components/StatBox/index.jsx
@@ -40,7 +40,7 @@ const StatBox = ({ heading, subHeading, sx }) => {
 				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: 4,
 				backgroundColor: theme.palette.background.main,
-				/* background: `linear-gradient(340deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`, */
+				/* background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.background.main} 45%)`, */
 				"& h2": {
 					fontSize: 13,
 					fontWeight: 500,
diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx
index 6179007fc..5d09b222b 100644
--- a/Client/src/Pages/Infrastructure/index.jsx
+++ b/Client/src/Pages/Infrastructure/index.jsx
@@ -232,21 +232,21 @@ function Infrastructure() {
 								color={theme.palette.primary.contrastText.main}
 								border={1}
 								borderColor={theme.palette.primary.lowContrast}
-								backgroundColor={theme.palette.background.accent}
+								backgroundColor={theme.palette.tertiary.main}
 							>
 								{totalMonitors}
 							</Box>
 						</Stack>
 						<TableContainer component={Paper}>
 							<Table stickyHeader>
-								<TableHead sx={{ backgroundColor: theme.palette.background.accent }}>
+								<TableHead sx={{ backgroundColor: theme.palette.tertiary.main }}>
 									<TableRow>
 										{columns.map((column, index) => (
 											<TableCell
 												key={index}
 												align={index === 0 ? "left" : "center"}
 												sx={{
-													backgroundColor: theme.palette.background.accent,
+													backgroundColor: theme.palette.tertiary.main,
 												}}
 											>
 												{column.label}
@@ -263,7 +263,7 @@ function Infrastructure() {
 												sx={{
 													cursor: "pointer",
 													"&:hover": {
-														backgroundColor: theme.palette.background.accent,
+														backgroundColor: theme.palette.tertiary.main,
 													},
 												}}
 											>
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index a8d8d2017..e6a651d9c 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -319,7 +319,7 @@ const PageSpeedConfigure = () => {
 								gap={theme.spacing(20)}
 								sx={{
 									".MuiInputBase-root:has(> .Mui-disabled)": {
-										backgroundColor: theme.palette.background.accent,
+										backgroundColor: theme.palette.tertiary.main,
 									},
 								}}
 							>
diff --git a/Client/src/Pages/PageSpeed/Details/styled.jsx b/Client/src/Pages/PageSpeed/Details/styled.jsx
index 642a8c095..cb3fd5c98 100644
--- a/Client/src/Pages/PageSpeed/Details/styled.jsx
+++ b/Client/src/Pages/PageSpeed/Details/styled.jsx
@@ -34,7 +34,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
 		borderLeftColor: theme.palette.primary.lowContrast,
 		borderRadius: 16,
 		backgroundColor: theme.palette.background.main,
-		background: `linear-gradient(325deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`,
+		background: `linear-gradient(325deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.background.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 db5428080..6d141d6b7 100644
--- a/Client/src/Pages/PageSpeed/card.jsx
+++ b/Client/src/Pages/PageSpeed/card.jsx
@@ -225,7 +225,7 @@ const Card = ({ monitor }) => {
 					gridTemplateRows: "34px 1fr 3fr",
 					cursor: "pointer",
 					"&:hover": {
-						backgroundColor: theme.palette.background.accent,
+						backgroundColor: theme.palette.tertiary.main,
 					},
 					"& path": {
 						transition: "stroke-width 400ms ease",
@@ -279,7 +279,7 @@ const Card = ({ monitor }) => {
 					borderTop={1}
 					borderRight={1}
 					borderColor={theme.palette.primary.lowContrast}
-					backgroundColor={theme.palette.background.accent}
+					backgroundColor={theme.palette.tertiary.main}
 					sx={{
 						pointerEvents: "none",
 						userSelect: "none",
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index a8fe6eca1..7d671e136 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -116,7 +116,7 @@ const PageSpeed = () => {
 							color={theme.palette.primary.contrastText.main}
 							border={1}
 							borderColor={theme.palette.primary.lowContrast}
-							backgroundColor={theme.palette.background.accent}
+							backgroundColor={theme.palette.tertiary.main}
 						>
 							{monitorCount}
 						</Box>
diff --git a/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx b/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx
index b3c90130b..f1fbddf02 100644
--- a/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx
+++ b/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx
@@ -33,7 +33,7 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) =>
 					color={theme.palette.primary.contrastText.main}
 					border={1}
 					borderColor={theme.palette.primary.lowContrast}
-					backgroundColor={theme.palette.background.accent}
+					backgroundColor={theme.palette.tertiary.main}
 				>
 					{totalMonitors}
 				</Box>
diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js
index 7d7a7ba0a..a0de41397 100644
--- a/Client/src/Utils/Theme/globalTheme.js
+++ b/Client/src/Utils/Theme/globalTheme.js
@@ -189,7 +189,7 @@ const baseTheme = (palette) => ({
 		MuiTableHead: {
 			styleOverrides: {
 				root: ({ theme }) => ({
-					backgroundColor: theme.palette.background.accent,
+					backgroundColor: theme.palette.tertiary.main,
 				}),
 			},
 		},