diff --git a/Client/src/App.css b/Client/src/App.css
index 0d669ffa5..bf3d4ea92 100644
--- a/Client/src/App.css
+++ b/Client/src/App.css
@@ -1,31 +1,3 @@
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
 .card {
   padding: 2em;
 }
diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 208604021..69562d661 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -17,7 +17,7 @@
 
 .MuiPaper-root:has(table.MuiTable-root) {
   box-shadow: none;
-  border: solid 1px var(--env-var-color-16);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
 }
 .MuiTable-root
@@ -28,7 +28,7 @@
 }
 .MuiTable-root .MuiTableHead-root,
 .MuiTable-root .MuiTableRow-root:hover {
-  background-color: var(--env-var-color-13);
+  background-color: var(--primary-bg-accent);
 }
 .MuiTable-root .MuiTableHead-root .MuiTableCell-root,
 .MuiTable-root .MuiTableBody-root .MuiTableCell-root {
@@ -37,7 +37,7 @@
 .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
   padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
   font-weight: 500;
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
 }
 .MuiTable-root .MuiTableHead-root span {
   display: inline-block;
@@ -52,7 +52,7 @@
   height: 20px;
 }
 .MuiTable-root .MuiTableBody-root .MuiTableCell-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
   padding: 6px var(--env-var-spacing-2);
 }
 .MuiTable-root .MuiTableBody-root .MuiTableRow-root {
@@ -61,7 +61,8 @@
 
 .MuiPaper-root + .MuiPagination-root {
   margin-top: 24px;
-  border: solid 1px var(--env-var-color-16);
+  background-color: var(--primary-bg);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
 }
@@ -74,7 +75,7 @@
   li:not(:first-child):not(:last-child)
   button {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
   font-weight: 500;
 }
 .MuiPaper-root + .MuiPagination-root ul li:first-child {
@@ -85,7 +86,7 @@
 }
 .MuiPaper-root + .MuiPagination-root ul li:first-child button,
 .MuiPaper-root + .MuiPagination-root ul li:last-child button {
-  border: solid 1px var(--env-var-color-16);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
 }
 .MuiPaper-root + .MuiPagination-root ul li:first-child button {
@@ -108,20 +109,20 @@
   margin-right: 15px;
 }
 .MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected {
-  background-color: var(--env-var-color-15);
+  background-color: var(--primary-bg-fill);
 }
 .MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root {
   user-select: none;
 }
 
 .MuiTablePagination-root p {
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
   font-weight: 500;
   font-size: var(--env-var-font-size-small-plus);
 }
 .MuiTablePagination-root button,
 .MuiTablePagination-root .MuiSelect-select {
-  border: solid 1px #ebebeb;
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
 }
 .MuiTablePagination-root .MuiTablePagination-select.MuiSelect-select {
@@ -138,7 +139,7 @@
   height: 22px;
 }
 .MuiTablePagination-root svg path {
-  stroke: var(--env-var-color-2);
+  stroke: var(--secondary-color-light);
   stroke-width: 1.3;
 }
 .MuiTablePagination-root .MuiSelect-icon {
@@ -152,13 +153,13 @@
   opacity: 0.4;
 }
 .MuiTablePagination-root button:not(.Mui-disabled):hover {
-  background-color: #f4f4f4;
-  border-color: #f4f4f4;
+  background-color: var(--primary-bg-fill);
+  border-color: var(--primary-bg-fill);
 }
 
 .pagination-dropdown.MuiPaper-root {
   box-shadow: var(--env-var-shadow-1);
-  border: solid 1px var(--env-var-color-6);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
 }
 .pagination-dropdown ul {
@@ -168,13 +169,13 @@
 .pagination-dropdown li,
 body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
   padding: 4px;
 }
 .pagination-dropdown li.Mui-selected,
 .pagination-dropdown li.Mui-selected.Mui-focusVisible,
 .pagination-dropdown li.Mui-selected:hover {
-  background-color: #f4f4f4;
+  background-color: var(--primary-bg-fill);
 }
 body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
   font-size: var(--env-var-font-size-small-plus);
@@ -182,7 +183,7 @@ body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
 
 .monitors .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
   text-transform: uppercase;
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
   opacity: 0.8;
   font-size: var(--env-var-font-size-small-plus);
   font-weight: 400;
diff --git a/Client/src/Components/Breadcrumbs/index.css b/Client/src/Components/Breadcrumbs/index.css
index b7d190de1..1d1454b3d 100644
--- a/Client/src/Components/Breadcrumbs/index.css
+++ b/Client/src/Components/Breadcrumbs/index.css
@@ -7,12 +7,12 @@
 }
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li a {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
   opacity: 0.8;
   font-weight: 400;
 }
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li:hover a {
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
 }
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child):hover a {
   opacity: 1;
diff --git a/Client/src/Components/Charts/BarChart/index.css b/Client/src/Components/Charts/BarChart/index.css
index e386aef1c..ed22f8bd7 100644
--- a/Client/src/Components/Charts/BarChart/index.css
+++ b/Client/src/Components/Charts/BarChart/index.css
@@ -9,11 +9,11 @@
 
 .bar-tooltip .MuiTooltip-tooltip p {
   font-size: var(--env-var-font-size-small-plus);
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
   font-weight: 500;
 }
 .bar-tooltip .MuiTooltip-tooltip span {
   font-size: var(--env-var-font-size-small);
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
   font-weight: 600;
 }
diff --git a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
index f7fc0d3d8..dbb45f109 100644
--- a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
@@ -9,9 +9,9 @@ const MonitorDetails60MinChart = ({ data }) => {
   };
 
   const color = {
-    true: "var(--env-var-color-23)",
-    false: "var(--env-var-color-24)",
-    undefined: "var(--env-var-color-33)",
+    true: "var(--success-color)",
+    false: "var(--error-color)",
+    undefined: "var(--unresolved-color)",
   };
   return (
     <BarChart
diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css
index f85a0bb04..1a611171a 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css
@@ -1,6 +1,6 @@
 .area-tooltip {
   background-color: white;
-  border: solid 1px var(--env-var-color-4);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
 }
@@ -9,11 +9,11 @@
   padding: 0;
 }
 .area-tooltip p:first-of-type {
-  color: var(--env-var-color-3);
+  color: var(--theme-main);
   font-size: var(--env-var-font-size-medium);
 }
 .area-tooltip p:last-of-type {
   margin-top: 5px;
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
   font-size: var(--env-var-font-size-small);
 }
diff --git a/Client/src/Components/Charts/ResponseTimeChart/index.jsx b/Client/src/Components/Charts/ResponseTimeChart/index.jsx
index 66ef6b3eb..3c57daf1a 100644
--- a/Client/src/Components/Charts/ResponseTimeChart/index.jsx
+++ b/Client/src/Components/Charts/ResponseTimeChart/index.jsx
@@ -18,8 +18,8 @@ const ResponseTimeChart = ({ checks = [] }) => {
                 key={`cell-${index}`}
                 fill={
                   check.status === true
-                    ? "var(--env-var-color-23)"
-                    : "var(--env-var-color-24)"
+                    ? "var(--success-color)"
+                    : "var(--error-color)"
                 }
               />
             ))}
diff --git a/Client/src/Components/Charts/Statistics/Statistic.jsx b/Client/src/Components/Charts/Statistics/Statistic.jsx
deleted file mode 100644
index 99ad2066f..000000000
--- a/Client/src/Components/Charts/Statistics/Statistic.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import "./statistic.css";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material";
-
-/**
- * @component
- * @param {Object} props
- * @param {string} props.title - The title text for the statistic (required)
- * @param {string} props.value - The numerical or textual value for the statistic (required)
- * @returns {JSX.Element} - Renders the statistic component
- */
-const Statistic = ({ title, value }) => {
-  const theme = useTheme();
-
-  const fontLookup = {
-    default: theme.font.default.font,
-  };
-
-  const fontFamily = fontLookup["default"];
-
-  return (
-    <div className="statistic-tile" style={{ fontFamily: fontFamily }}>
-      <div className="statistic-tile-title">{title}</div>
-      <div className="statistic-tile-value">{value}</div>
-    </div>
-  );
-};
-
-Statistic.propTypes = {
-  title: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-};
-
-export default Statistic;
diff --git a/Client/src/Components/Charts/Statistics/statistic.css b/Client/src/Components/Charts/Statistics/statistic.css
deleted file mode 100644
index a8834199d..000000000
--- a/Client/src/Components/Charts/Statistics/statistic.css
+++ /dev/null
@@ -1,31 +0,0 @@
-:root {
-  --stats-spacing-general-0: 5px 10px;
-  --color-border-0: #eaecf0;
-  --border-radius-0: 4px;
-  --font-size-0: 1rem;
-  --font-size-1: 13px;
-  --font-color-0: #344054;
-  --margin-bottom-0: 10px;
-}
-
-.statistic-tile {
-  margin: var(--stats-spacing-general-0);
-  padding: var(--stats-spacing-general-0);
-  border: 1px solid var(--color-border-0);
-  border-radius: var(--border-radius-0);
-
-  width: 180px;
-}
-
-.statistic-tile-title {
-  font-size: var(--font-size-0);
-  color: var(--font-color-0);
-  margin-bottom: var(--margin-bottom-0);
-}
-
-.statistic-tile-value {
-  font-size: var(--font-size-1);
-  color: var(--font-color-0);
-  font-weight: 700;
-  margin-bottom: var(--margin-bottom-0);
-}
diff --git a/Client/src/Components/Check/check.css b/Client/src/Components/Check/check.css
index f1432d2bc..8d9bbc24e 100644
--- a/Client/src/Components/Check/check.css
+++ b/Client/src/Components/Check/check.css
@@ -1,17 +1,17 @@
 .check > span.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
   opacity: 0.8;
 }
 .check-error span.MuiTypography-root {
-  color: var(--env-var-color-24);
+  color: var(--error-color);
 }
 .check-error svg > path {
-  fill: var(--env-var-color-19);
+  fill: var(--error-color);
 }
 .check-success span.MuiTypography-root {
-  color: var(--env-var-color-17);
+  color: var(--success-color);
 }
 .check-success svg > path {
-  fill: var(--env-var-color-23);
+  fill: var(--success-color);
 }
diff --git a/Client/src/Components/Fallback/index.css b/Client/src/Components/Fallback/index.css
index 226c7bc47..ea1925ff5 100644
--- a/Client/src/Components/Fallback/index.css
+++ b/Client/src/Components/Fallback/index.css
@@ -9,7 +9,7 @@
 }
 [class*="fallback__"] .check span.MuiTypography-root,
 [class*="fallback__"] h1.MuiTypography-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 [class*="fallback__"] button.MuiButtonBase-root,
 [class*="fallback__"] .check {
diff --git a/Client/src/Components/Inputs/Checkbox/index.css b/Client/src/Components/Inputs/Checkbox/index.css
index 0d2285955..130be8853 100644
--- a/Client/src/Components/Inputs/Checkbox/index.css
+++ b/Client/src/Components/Inputs/Checkbox/index.css
@@ -2,11 +2,11 @@
   border-radius: var(--env-var-radius-1);
 }
 .checkbox-wrapper:not(:has(.Mui-disabled)):hover {
-  background-color: var(--env-var-color-15);
+  background-color: var(--unresolved-bg);
 }
 .checkbox-wrapper span.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
 }
 .checkbox-wrapper .MuiButtonBase-root {
   margin-right: var(--env-var-spacing-1);
diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css
index 3e2435694..8c86f9e30 100644
--- a/Client/src/Components/Inputs/Field/index.css
+++ b/Client/src/Components/Inputs/Field/index.css
@@ -12,13 +12,13 @@
 .field h5.MuiTypography-root,
 .field input,
 .field textarea {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .field h3.MuiTypography-root {
   font-weight: 500;
 }
 .field h3.MuiTypography-root span.field-required {
-  color: var(--env-var-color-19);
+  color: var(--error-color);
   margin-left: 2px;
 }
 .field h3.MuiTypography-root span.field-optional {
@@ -53,7 +53,7 @@
   margin-right: 5px;
 }
 .field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root:hover {
-  border-color: var(--env-var-color-29);
+  border-color: var(--border-color-dark);
 }
 .field input {
   height: 100%;
@@ -63,20 +63,20 @@
   padding: var(--env-var-spacing-1-minus);
 }
 .field .MuiOutlinedInput-root fieldset {
-  border-color: var(--env-var-color-29);
+  border-color: var(--border-color-dark);
   border-radius: var(--env-var-radius-1);
 }
 .field:not(:has(.Mui-disabled)):not(:has(.input-error))
   .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus))
   fieldset {
-  border-color: var(--env-var-color-29);
+  border-color: var(--border-color-dark);
 }
 .field .input-error {
-  color: var(--env-var-color-24);
+  color: var(--error-color);
   opacity: 0.8;
 }
 .field:has(.input-error) .MuiOutlinedInput-root fieldset {
-  border-color: var(--env-var-color-19);
+  border-color: var(--error-color);
 }
 
 .register-page .field .MuiOutlinedInput-root fieldset,
diff --git a/Client/src/Components/Inputs/Image/index.css b/Client/src/Components/Inputs/Image/index.css
index 96a730bf0..4c427c9de 100644
--- a/Client/src/Components/Inputs/Image/index.css
+++ b/Client/src/Components/Inputs/Image/index.css
@@ -2,7 +2,7 @@
 .image-field-wrapper p.MuiTypography-root,
 .image-field-wrapper + p.MuiTypography-root,
 .MuiStack-root:has(#modal-update-picture) h1.MuiTypography-root {
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
 }
 .MuiStack-root:has(#modal-update-picture) h1.MuiTypography-root {
   font-weight: 600;
@@ -24,6 +24,6 @@
   font-size: var(--env-var-font-size-small-plus);
 }
 .image-field-wrapper h2.MuiTypography-root span {
-  color: var(--env-var-color-3);
+  color: var(--theme-main);
   font-weight: 500;
 }
diff --git a/Client/src/Components/Inputs/Select/index.css b/Client/src/Components/Inputs/Select/index.css
index be1a92503..a760010bf 100644
--- a/Client/src/Components/Inputs/Select/index.css
+++ b/Client/src/Components/Inputs/Select/index.css
@@ -13,21 +13,21 @@
 .MuiMenu-List .MuiMenuItem-root,
 .select-wrapper h3.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .select-wrapper h3.MuiTypography-root {
   font-weight: 500;
 }
 .MuiInputBase-root:has(> .MuiSelect-select) fieldset {
-  border-color: var(--env-var-color-29);
+  border-color: var(--border-color-dark);
 }
 .MuiInputBase-root:not(.Mui-focused):has(> .MuiSelect-select):hover fieldset {
-  border-color: var(--env-var-color-29);
+  border-color: var(--border-color-dark);
 }
 
 .select-dropdown.MuiPaper-root {
   box-shadow: var(--env-var-shadow-1);
-  border: solid 1px var(--env-var-color-6);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
 }
 .select-dropdown .MuiList-root {
@@ -35,12 +35,12 @@
 }
 .select-dropdown li {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
   padding: 5px 8px;
   border-radius: var(--env-var-radius-1);
 }
 .select-dropdown li.Mui-selected,
 .select-dropdown li.Mui-selected.Mui-focusVisible,
 .select-dropdown li.Mui-selected:hover {
-  background-color: #f4f4f4;
+  background-color: var(--primary-bg-fill);
 }
diff --git a/Client/src/Components/ProgressBars/index.css b/Client/src/Components/ProgressBars/index.css
index 5ba1939da..214a409a8 100644
--- a/Client/src/Components/ProgressBars/index.css
+++ b/Client/src/Components/ProgressBars/index.css
@@ -4,7 +4,7 @@
 }
 .progress-bar-container h2.MuiTypography-root,
 .progress-bar-container p.MuiTypography-root {
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
   font-size: var(--env-var-font-size-medium);
 }
 .progress-bar-container p.MuiTypography-root {
@@ -17,16 +17,16 @@
   padding-left: 2px;
 }
 .progress-bar-container:has(p.input-error){
-  border-color: var(--env-var-color-19);
-  background-color: var(--env-var-color-21);
+  border-color: var(--error-color);
+  background-color: var(--error-bg);
   padding: 8px var(--env-var-spacing-1-plus);
 }
 .progress-bar-container p.input-error{
-  color: var(--env-var-color-24);
+  color: var(--error-color);
   opacity: 0.8;
 }
 .progress-bar-container:has(p.input-error)>.MuiStack-root>svg{
-  fill: var(--env-var-color-24);
+  fill: var(--error-color);
   width: 20px;
   height: 20px;
 }
diff --git a/Client/src/Components/RadioButton/index.css b/Client/src/Components/RadioButton/index.css
index 353bbdf55..3f6fba7bb 100644
--- a/Client/src/Components/RadioButton/index.css
+++ b/Client/src/Components/RadioButton/index.css
@@ -6,7 +6,7 @@
 }
 .create-monitor-form .custom-radio-button.MuiFormControlLabel-root:hover,
 .configure-monitor .custom-radio-button.MuiFormControlLabel-root:hover {
-  background-color: var(--env-var-color-15);
+  background-color: var(--unresolved-bg);
 }
 
 .custom-radio-button.MuiFormControlLabel-root .MuiButtonBase-root {
diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 4c253c781..0996b3f71 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -1,7 +1,7 @@
 aside .selected-path,
 .sidebar-popup .selected-path,
 aside .MuiListItemButton-root:hover {
-  background-color: var(--env-var-color-13);
+  background-color: var(--primary-bg-accent);
 }
 aside .MuiList-root svg {
   width: 20px;
@@ -9,7 +9,7 @@ aside .MuiList-root svg {
   opacity: 0.9;
 }
 aside .MuiList-root svg path {
-  stroke: var(--env-var-color-2);
+  stroke: var(--secondary-color-light);
 }
 aside span.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
@@ -29,7 +29,7 @@ aside .MuiListSubheader-root {
 aside span.MuiTypography-root,
 aside p.MuiTypography-root,
 aside .MuiListSubheader-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 aside p.MuiTypography-root {
   font-size: var(--env-var-font-size-small);
@@ -48,7 +48,7 @@ aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root {
   position: relative;
 }
 aside .MuiDivider-root {
-  border-color: var(--env-var-color-6);
+  border-color: var(--border-color);
 }
 aside
   .MuiCollapse-wrapperInner
@@ -60,7 +60,7 @@ aside
   top: 0;
   height: 100%;
   width: 100%;
-  border-left: solid 1px var(--env-var-color-5);
+  border-left: solid 1px var(--secondary-color);
   opacity: 0.2;
 }
 aside
@@ -90,13 +90,13 @@ aside
   .MuiCollapse-wrapperInner
   .MuiList-root
   > .selected-path.MuiListItemButton-root::after {
-  background-color: var(--env-var-color-2);
+  background-color: var(--secondary-color-light);
   transform: scale(1.2);
 }
 
 .sidebar-popup .MuiPaper-root {
   box-shadow: var(--env-var-shadow-1);
-  border: solid 1px var(--env-var-color-6);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
   gap: 1px;
 }
@@ -106,12 +106,12 @@ aside
 }
 .sidebar-popup li.MuiButtonBase-root {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
   padding: 5px 8px;
   border-radius: var(--env-var-radius-1);
 }
 .sidebar-popup li.MuiButtonBase-root:hover {
-  background-color: var(--env-var-color-13);
+  background-color: var(--primary-bg-accent);
 }
 .sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root):hover {
   background-color: white;
@@ -121,7 +121,7 @@ aside
 }
 .sidebar-popup .MuiModal-root p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
 }
 .sidebar-popup svg {
   width: 16px;
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index a0393977d..cac7adc62 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -90,7 +90,7 @@ const TeamPanel = () => {
                   >
                     {member.firstName + " " + member.lastName}
                   </Typography>
-                  <Typography sx={{ opacity: 0.6 }}>
+                  <Typography>
                     Created {new Date(member.createdAt).toLocaleDateString()}
                   </Typography>
                 </Stack>
diff --git a/Client/src/Components/Tooltips/TooltipWithTail/TooltipWithTail.jsx b/Client/src/Components/Tooltips/TooltipWithTail/TooltipWithTail.jsx
deleted file mode 100644
index 1b1fb8b4d..000000000
--- a/Client/src/Components/Tooltips/TooltipWithTail/TooltipWithTail.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import "./tooltipWithTail.css";
-import React from "react";
-import { styled } from "@mui/material/styles";
-import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
-import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
-
-const CustomizedTooltip = styled(
-  ({ className, placement, arrow, ...props }) => (
-    <Tooltip
-      {...props}
-      placement={placement}
-      arrow={arrow}
-      classes={{ popper: className }}
-    />
-  )
-)(({ theme }) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: "black",
-  },
-  [`& .${tooltipClasses.arrow}`]: {
-    color: "black",
-  },
-}));
-
-function TooltipWithTail({ placement, arrow = false, title, text }) {
-  return (
-    <div>
-      <CustomizedTooltip
-        arrow={arrow}
-        placement={placement}
-        title={
-          <React.Fragment>
-            {title && <div className="tooltip-title">{title}</div>}
-            <div className="tooltip-description">{text}</div>
-          </React.Fragment>
-        }
-        className="tooltip-holder"
-      >
-        <HelpOutlineIcon style={{ fill: "#98A2B3" }} />
-      </CustomizedTooltip>
-    </div>
-  );
-}
-
-export default TooltipWithTail;
diff --git a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css b/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css
deleted file mode 100644
index 3efe67643..000000000
--- a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css
+++ /dev/null
@@ -1,49 +0,0 @@
-:root {
-  --env-var-color-1: #101828;
-  --env-var-color-2: #475467;
-  --env-var-color-3: #1570ef;
-
-  --env-var-color-4: #d0d5dd;
-  --env-var-color-5: #344054;
-  --env-var-color-6: #eaecf0;
-  --env-var-color-7: #7f56d9;
-  --env-var-color-8: #fff;
-  --env-var-color-9: #f2f2f2;
-  --env-var-color-10: #175cd3;
-
-  --env-var-radius-1: 4px;
-  --env-var-radius-2: 8px;
-
-  --env-var-width-1: 100vw;
-  --env-var-width-2: 360px;
-
-  --env-var-height-1: 100vh;
-
-  --env-var-spacing-1: 12px;
-  --env-var-spacing-2: 24px;
-  --env-var-spacing-3: 32px;
-  --env-var-spacing-4: 40px;
-
-  --env-var-font-size-small: 11px;
-  --env-var-font-size-medium: 13px;
-  --env-var-font-size-medium-plus: 14px;
-  --env-var-font-size-large: 16px;
-  --env-var-font-size-xlarge: 30px;
-
-  --env-var-img-width-1: 20px;
-
-  --env-var-default-1: 24px;
-  --env-var-default-2: 40px;
-}
-
-.tooltip-title {
-  font-size: var(--env-var-font-size-medium);
-  font-weight: bold;
-  margin: 5px;
-}
-
-.tooltip-description {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-4);
-  margin: 5px;
-}
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index e85a6362b..75a1925f3 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -1,5 +1,5 @@
 #root:has(.home-layout) {
-  background-color: var(--env-var-color-30);
+  background-color: var(--secondary-bg);
 }
 
 .home-layout {
@@ -20,7 +20,7 @@
   height: calc(100vh - var(--env-var-spacing-2) * 2);
   max-width: var(--env-var-side-bar-width);
 
-  border: 1px solid var(--env-var-color-6);
+  border: 1px solid var(--border-color);
   border-radius: var(--env-var-radius-1);
   background-color: var(--env-var-color-8);
 
@@ -33,10 +33,10 @@
 }
 
 .home-layout > div:has(> [class*="fallback__"]) {
-  border: solid 1px var(--env-var-color-6);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
   border-style: dashed;
-  background-color: var(--env-var-color-8);
+  background-color: var(--primary-bg);
   overflow: hidden;
   position: relative;
 }
diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
index 594b7b839..82d5fc991 100644
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -10,7 +10,7 @@
 .account p.MuiTypography-root,
 .account input,
 .account .MuiSelect-select {
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
 }
 .account h1.MuiTypography-root {
   font-weight: 600;
@@ -21,7 +21,7 @@
 }
 .account .MuiDivider-root,
 .account .MuiButtonGroup-root button {
-  border-color: var(--env-var-color-16);
+  border-color: var(--border-color);
 }
 .account button:not(.MuiIconButton-root) {
   height: 34px;
@@ -43,8 +43,9 @@
   top: 100%;
 }
 
-.account .MuiTable-root .MuiTableBody-root .MuiTableCell-root {
-  color: var(--env-var-color-25);
+.account .MuiTable-root .MuiTableBody-root .MuiTableCell-root,
+.account .MuiTable-root p + p {
+  color: var(--secondary-color-light-accent);
 }
 .account .MuiTableBody-root .MuiTableCell-root {
   padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index 979ae191c..bf95174a8 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -5,7 +5,7 @@
 .auth h1 {
   font-size: var(--env-var-font-size-xlarge);
   font-weight: 600;
-  color: var(--env-var-color-3);
+  color: var(--theme-main);
 }
 .auth button:not(.MuiIconButton-root),
 .auth p,
@@ -14,15 +14,15 @@
   font-size: var(--env-var-font-size-medium-plus);
 }
 .auth p {
-  color: var(--env-var-color-2-light);
+  color: var(--secondary-color-light-accent);
 }
 .auth .field h3.MuiTypography-root,
 .auth .field input {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 
 .auth p + span {
-  color: var(--env-var-color-3);
+  color: var(--theme-main);
   opacity: 0.8;
   cursor: pointer;
   transition: opacity 300ms ease-in;
@@ -34,7 +34,7 @@
   transition: all 200ms;
 }
 .auth p > span:not(.email-sent-to):hover {
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
   text-underline-offset: 4px;
 }
 .auth p + span:hover {
diff --git a/Client/src/Pages/Incidents/index.css b/Client/src/Pages/Incidents/index.css
index 286552d22..b434d5e63 100644
--- a/Client/src/Pages/Incidents/index.css
+++ b/Client/src/Pages/Incidents/index.css
@@ -1,6 +1,6 @@
 .incidents h1.MuiTypography-root,
 .incidents p.MuiTypography-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .incidents h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
@@ -12,14 +12,14 @@
 }
 .incidents button.MuiButtonBase-root {
   height: 34px;
-  border-color: var(--env-var-color-16);
+  border-color: var(--border-color);
 }
 .incidents .MuiPagination-root {
-  background-color: var(--env-var-color-8);
+  background-color: var(--primary-bg);
 }
 .incidents > .MuiBox-root {
-  background-color: var(--env-var-color-8);
-  border: solid 1px var(--env-var-color-6);
+  background-color: var(--primary-bg);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
   padding: 60px;
 }
diff --git a/Client/src/Pages/Integrations/index.css b/Client/src/Pages/Integrations/index.css
index c05b44212..1258b69af 100644
--- a/Client/src/Pages/Integrations/index.css
+++ b/Client/src/Pages/Integrations/index.css
@@ -1,6 +1,6 @@
 .integrations h1.MuiTypography-root,
 .integrations p.MuiTypography-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .integrations h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
@@ -14,7 +14,7 @@
 }
 
 .integrations .MuiGrid-item > .MuiStack-root {
-  border: solid 1px var(--env-var-color-6);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
-  background-color: var(--env-var-color-8);
+  background-color: var(--primary-bg);
 }
diff --git a/Client/src/Pages/Maintenance/index.css b/Client/src/Pages/Maintenance/index.css
index f26a48767..46ba8b0fa 100644
--- a/Client/src/Pages/Maintenance/index.css
+++ b/Client/src/Pages/Maintenance/index.css
@@ -13,7 +13,7 @@
 }
 
 .maintenance-title {
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
   font-size: 16px;
   font-weight: bold;
   margin-top: 40px;
@@ -22,7 +22,7 @@
 
 .checklist-item {
   font-size: 13px;
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
   display: flex;
   margin-bottom: 10px;
 }
diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index ec140887c..1f46d12d3 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -1,6 +1,6 @@
 .configure-monitor h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
-  color: var(--env-var-color-1);
+  color: var(--primary-color);
   font-weight: 600;
 }
 .configure-monitor h2.MuiTypography-root {
@@ -10,10 +10,10 @@
 .configure-monitor h2.MuiTypography-root,
 .configure-monitor .config-box p.MuiTypography-root,
 .configure-monitor .MuiSelect-select {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .configure-monitor .MuiModal-root h2.MuiTypography-root {
-  color: var(--env-var-color-1);
+  color: var(--primary-color);
 }
 .configure-monitor p.MuiTypography-root,
 .configure-monitor .MuiSelect-select {
@@ -33,9 +33,9 @@
   height: var(--env-var-height-2);
 }
 .configure-monitor .config-box {
-  border: 1px solid var(--env-var-color-16);
+  border: 1px solid var(--border-color);
   border-radius: var(--env-var-radius-1);
-  background-color: var(--env-var-color-8);
+  background-color: var(--primary-bg);
 }
 .configure-monitor .config-box > .MuiBox-root,
 .configure-monitor .config-box > .MuiStack-root {
@@ -45,7 +45,7 @@
 }
 .configure-monitor .config-box > *:first-child {
   flex: 0.7;
-  border-right: solid 1px var(--env-var-color-16);
+  border-right: solid 1px var(--border-color);
 }
 .configure-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) {
   position: relative;
@@ -55,7 +55,7 @@
   top: 100%;
 }
 .configure-monitor .MuiInputBase-root:has(> .Mui-disabled) {
-  background-color: var(--env-var-color-13);
+  background-color: var(--primary-bg-accent);
 }
 
 .MuiInputBase-root:has(#monitor-interval) {
@@ -69,7 +69,7 @@
   align-items: center;
 }
 .MuiInputBase-root:not(.Mui-focused):has(#monitor-interval):hover fieldset {
-  border-color: var(--env-var-color-29);
+  border-color: var(--border-color-dark);
 }
 
 body:has(.configure-monitor) .select-dropdown .MuiMenuItem-root,
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index bd2a26df0..25d2698cd 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -249,8 +249,8 @@ const Configure = () => {
                   lineHeight={theme.gap.large}
                   sx={{
                     color: monitor?.status
-                      ? "var(--env-var-color-17)"
-                      : "var(--env-var-color-24)",
+                      ? "var(--success-color)"
+                      : "var(--error-color)",
                   }}
                 >
                   Your site is {monitor?.status ? "up" : "down"}.
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.css b/Client/src/Pages/Monitors/CreateMonitor/index.css
index 2a1b5a2a6..3e5571675 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.css
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.css
@@ -1,6 +1,6 @@
 .create-monitor h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
-  color: var(--env-var-color-1);
+  color: var(--primary-color);
   font-weight: 500;
 }
 .create-monitor h2.MuiTypography-root {
@@ -12,11 +12,11 @@
   font-size: var(--env-var-font-size-medium);
 }
 .create-monitor h2.MuiTypography-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .create-monitor h6.MuiTypography-root,
 .create-monitor p.MuiTypography-root {
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
 }
 .create-monitor h6.MuiTypography-root,
 .create-monitor .MuiBox-root .field + p.MuiTypography-root {
@@ -30,7 +30,7 @@
   position: relative;
 }
 .create-monitor .error-container p.MuiTypography-root.input-error {
-  color: var(--env-var-color-24);
+  color: var(--error-color);
   opacity: 0.8;
   position: absolute;
   top: 0;
@@ -44,9 +44,9 @@
 }
 .create-monitor .config-box {
   flex-direction: row;
-  border: 1px solid var(--env-var-color-16);
+  border: 1px solid var(--border-color);
   border-radius: var(--env-var-radius-1);
-  background-color: var(--env-var-color-8);
+  background-color: var(--primary-bg);
 }
 .create-monitor .config-box > .MuiBox-root,
 .create-monitor .config-box > .MuiStack-root {
@@ -56,7 +56,7 @@
 }
 .create-monitor .config-box > *:first-child {
   flex: 0.7;
-  border-right: solid 1px var(--env-var-color-16);
+  border-right: solid 1px var(--border-color);
 }
 
 .create-monitor .MuiStack-root .MuiButtonGroup-root button {
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index 71eb2c755..e0c111036 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -1,16 +1,16 @@
 .monitors h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
-  color: var(--env-var-color-1);
+  color: var(--primary-color);
   font-weight: 500;
 }
 .monitors h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
   font-weight: 500;
 }
 .monitors p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .monitors h1.MuiTypography-root + p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium-plus);
@@ -28,19 +28,19 @@
   padding: 5px;
   min-width: 25px;
   min-height: 25px;
-  background-color: var(--env-var-color-15);
-  border: 1px solid var(--env-var-color-6);
+  background-color: var(--unresolved-bg);
+  border: 1px solid var(--border-color);
   border-radius: 50%;
   font-size: var(--env-var-font-size-medium);
   font-weight: 500;
-  color: var(--env-var-color-1);
+  color: var(--primary-color);
   margin-left: 10px;
   line-height: 0.8;
 }
 
 body:has(.monitors) .actions-menu .MuiPaper-root {
   box-shadow: var(--env-var-shadow-1);
-  border: solid 1px var(--env-var-color-6);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
   gap: 1px;
 }
@@ -50,14 +50,14 @@ body:has(.monitors) .actions-menu .MuiList-root {
 }
 body:has(.monitors) .actions-menu li.MuiButtonBase-root {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
   padding: 5px 8px;
   border-radius: var(--env-var-radius-1);
 }
 body:has(.monitors) .actions-menu li.MuiButtonBase-root:last-of-type {
-  color: var(--env-var-color-26);
+  color: var(--error-color);
 }
 body:has(.monitors) .actions-menu .MuiModal-root p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
 }
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index b935231d6..44101b332 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -448,8 +448,8 @@ const Monitors = () => {
       percentage: 100,
       percentageColor:
         monitor.status === true
-          ? "var(--env-var-color-17)"
-          : "var(--env-var-color-19)",
+          ? "var(--success-color)"
+          : "var(--error-color)",
       status: monitor.status === true ? "up" : "down",
     };
 
diff --git a/Client/src/Pages/NotFound/index.css b/Client/src/Pages/NotFound/index.css
index 621172386..3d7c48aae 100644
--- a/Client/src/Pages/NotFound/index.css
+++ b/Client/src/Pages/NotFound/index.css
@@ -11,5 +11,5 @@
 }
 .not-found-page h1,
 .not-found-page p {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
diff --git a/Client/src/Pages/PageSpeed/Configure/index.css b/Client/src/Pages/PageSpeed/Configure/index.css
index 408e2d639..140d37887 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.css
+++ b/Client/src/Pages/PageSpeed/Configure/index.css
@@ -1,6 +1,6 @@
 .configure-pagespeed form > .MuiStack-root:nth-child(2) {
-  background-color: var(--env-var-color-8);
-  border: solid 1px var(--env-var-color-6);
+  background-color: var(--primary-bg);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-font-size-large-plus) var(--env-var-font-size-xlarge);
 }
@@ -9,14 +9,14 @@
 }
 .configure-pagespeed h1.MuiTypography-root,
 .configure-pagespeed h2.MuiTypography-root {
-  color: var(--env-var-color-1);
+  color: var(--primary-color);
 }
 .configure-pagespeed span.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
 }
 .configure-pagespeed p.MuiTypography-root,
 .configure-pagespeed h3.MuiTypography-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .configure-pagespeed h1.MuiTypography-root,
 .configure-pagespeed h3.MuiTypography-root,
@@ -39,7 +39,7 @@
   margin-bottom: 1px;
 }
 .configure-pagespeed .MuiInputBase-root:has(> .Mui-disabled) {
-  background-color: var(--env-var-color-13);
+  background-color: var(--primary-bg-accent);
 }
 /* to be removed */
 .configure-pagespeed .section-disabled {
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 83484de7e..21fc32fed 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -187,8 +187,8 @@ const PageSpeedConfigure = () => {
                   component="span"
                   sx={{
                     color: monitor?.status
-                      ? "var(--env-var-color-17)"
-                      : "var(--env-var-color-24)",
+                      ? "var(--success-color)"
+                      : "var(--error-color)",
                   }}
                 >
                   Your pagespeed monitor is {monitor?.status ? "live" : "down"}.
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
index 42ca0ffa8..f0581565f 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
@@ -1,16 +1,16 @@
 .create-page-speed form > .MuiStack-root:not(:last-of-type) {
-  background-color: var(--env-var-color-8);
-  border: solid 1px var(--env-var-color-6);
+  background-color: var(--primary-bg);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-font-size-large-plus) var(--env-var-font-size-xlarge);
 }
 .create-page-speed h1.MuiTypography-root {
   font-size: 22px;
-  color: var(--env-var-color-1);
+  color: var(--primary-bg);
 }
 .create-page-speed p.MuiTypography-root,
 .create-page-speed h3.MuiTypography-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .create-page-speed h1.MuiTypography-root,
 .create-page-speed h3.MuiTypography-root {
diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css
index 357177c78..147c1d7d9 100644
--- a/Client/src/Pages/PageSpeed/Details/index.css
+++ b/Client/src/Pages/PageSpeed/Details/index.css
@@ -1,6 +1,6 @@
 .page-speed-details h1 {
   font-size: var(--env-var-font-size-large-plus);
-  color: var(--env-var-color-1);
+  color: var(--primary-color);
 }
 .page-speed-details h2,
 .page-speed-details h6 {
@@ -18,10 +18,10 @@
 .page-speed-details h2,
 .page-speed-details h4,
 .page-speed-details p {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .page-speed-details h6 {
-  color: var(--env-var-color-3);
+  color: var(--theme-main);
   line-height: 22px;
 }
 .page-speed-details h1,
@@ -36,9 +36,9 @@
 .page-speed-details .stat-box,
 .page-speed-details > .MuiStack-root:last-child,
 .page-speed-details > .MuiBox-root:nth-last-child(3) {
-  border: solid 1px var(--env-var-color-6);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
-  background-color: var(--env-var-color-8);
+  background-color: var(--primary-bg);
   min-width: 200px;
 }
 .page-speed-details .stat-box {
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 2e5cc12a7..ba24c88df 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -342,7 +342,7 @@ const PageSpeedDetails = () => {
               </Typography>
               <Typography
                 component="span"
-                sx={{ color: "var(--env-var-color-17)" }}
+                sx={{ color: "var(--success-color)" }}
               >
                 Your pagespeed monitor is live.
               </Typography>
diff --git a/Client/src/Pages/PageSpeed/index.css b/Client/src/Pages/PageSpeed/index.css
index b910c1645..904aa4e0f 100644
--- a/Client/src/Pages/PageSpeed/index.css
+++ b/Client/src/Pages/PageSpeed/index.css
@@ -1,10 +1,10 @@
 .page-speed h1.MuiTypography-root,
 .page-speed span.MuiTypography-root,
 .page-speed p.MuiTypography-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .page-speed h2.MuiTypography-root {
-  color: var(--env-var-color-3);
+  color: var(--theme-main);
   line-height: 1.1;
 }
 .page-speed h1.MuiTypography-root,
@@ -20,9 +20,9 @@
   font-size: var(--env-var-font-size-small-plus);
 }
 .page-speed .MuiGrid-item > .MuiStack-root {
-  border: solid 1px var(--env-var-color-6);
+  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
-  background-color: var(--env-var-color-8);
+  background-color: var(--primary-bg);
 }
 .page-speed .label {
   padding: 7px;
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index 368ae2062..dc327ad5f 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -22,7 +22,11 @@ const Card = ({ data }) => {
       item
       lg={6}
       flexGrow={1}
-      sx={{ "&:hover > .MuiStack-root": { backgroundColor: "#f9fafb" } }}
+      sx={{
+        "&:hover > .MuiStack-root": {
+          backgroundColor: "var(--primary-bg-accent)",
+        },
+      }}
     >
       <Stack
         direction="row"
diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css
index 3f6ac8d7a..f70e0d0fb 100644
--- a/Client/src/Pages/Settings/index.css
+++ b/Client/src/Pages/Settings/index.css
@@ -8,7 +8,7 @@
 .settings h1.MuiTypography-root,
 .settings h2.MuiTypography-root,
 .settings p.MuiTypography-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .settings h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
@@ -27,9 +27,9 @@
 .settings .config-box {
   padding: var(--env-var-spacing-4) 50px;
   padding-bottom: 60px;
-  border: 1px solid var(--env-var-color-16);
+  border: 1px solid var(--border-color);
   border-radius: var(--env-var-radius-1);
-  background-color: var(--env-var-color-8);
+  background-color: var(--primary-bg);
 }
 .settings .config-box .MuiBox-root,
 .settings .config-box .MuiStack-root {
diff --git a/Client/src/index.css b/Client/src/index.css
index 77ac4c1c5..21c252f54 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -21,10 +21,12 @@
   --secondary-color-light-accent: #838c99;
 
   --primary-bg: #ffffff;
+  --primary-bg-fill: #f4f4f4;
   --primary-bg-accent: #f9fafb;
   --secondary-bg: #fcfcfd;
 
   --border-color: #eaecf0;
+  --border-color-dark: #d0d5dd;
 
   /* OTHER COLORS */
   --success-color: #17b26a;