diff --git a/src/Components/Charts/ChartBox/index.jsx b/src/Components/Charts/ChartBox/index.jsx
index 4b72fe16a..f9f35f4b2 100644
--- a/src/Components/Charts/ChartBox/index.jsx
+++ b/src/Components/Charts/ChartBox/index.jsx
@@ -25,7 +25,7 @@ const ChartBox = ({
 			flex={1}
 			direction="row"
 			sx={{
-				backgroundColor: theme.palette.primary.main,
+				backgroundColor: theme.palette.tertiary.main,
 
 				border: 1,
 				borderStyle: "solid",
diff --git a/src/Pages/Uptime/Details/Components/Charts/ResponseGaugeChart.jsx b/src/Pages/Uptime/Details/Components/Charts/ResponseGaugeChart.jsx
index 3fa663c31..084a711c3 100644
--- a/src/Pages/Uptime/Details/Components/Charts/ResponseGaugeChart.jsx
+++ b/src/Pages/Uptime/Details/Components/Charts/ResponseGaugeChart.jsx
@@ -18,13 +18,13 @@ const ResponseGaugeChart = ({ avgResponseTime }) => {
 			? {
 					category: "Excellent",
 					main: theme.palette.success.main,
-					bg: theme.palette.success.contrastText,
+					bg: theme.palette.success.lowContrast,
 				}
 			: responseTime <= 500
 				? {
 						category: "Fair",
 						main: theme.palette.success.main,
-						bg: theme.palette.success.contrastText,
+						bg: theme.palette.success.lowContrast,
 					}
 				: responseTime <= 600
 					? {
@@ -35,7 +35,7 @@ const ResponseGaugeChart = ({ avgResponseTime }) => {
 					: {
 							category: "Poor",
 							main: theme.palette.error.main,
-							bg: theme.palette.error.contrastText,
+							bg: theme.palette.error.lowContrast,
 						};
 
 	return (