diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index 3e69c0d60..4e5d1d7b0 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -22,7 +22,7 @@ const CustomToolTip = ({ active, payload, label }) => {
       >
         <Typography
           sx={{
-            color: theme.palette.common.main,
+            color: theme.palette.primary.main,
             fontSize: 13,
           }}
         >
diff --git a/Client/src/Components/Inputs/Image/index.jsx b/Client/src/Components/Inputs/Image/index.jsx
index f7bdc9cf0..cdc7d8c7f 100644
--- a/Client/src/Components/Inputs/Image/index.jsx
+++ b/Client/src/Components/Inputs/Image/index.jsx
@@ -38,12 +38,12 @@ const ImageField = ({ id, src, loading, onChange }) => {
               border: "dashed",
               borderRadius: theme.shape.borderRadius,
               borderColor: isDragging
-                ? theme.palette.common.main
+                ? theme.palette.primary.main
                 : theme.palette.border.light,
               borderWidth: "2px",
               transition: "0.2s",
               "&:hover": {
-                borderColor: theme.palette.common.main,
+                borderColor: theme.palette.primary.main,
                 backgroundColor: "hsl(215, 87%, 51%, 0.05)",
               },
             }}
@@ -96,7 +96,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
                 <Typography
                   component="span"
                   fontSize="inherit"
-                  color={theme.palette.common.main}
+                  color={theme.palette.primary.main}
                   fontWeight={500}
                 >
                   Click to upload
diff --git a/Client/src/Components/Link/index.jsx b/Client/src/Components/Link/index.jsx
index 025bd0c25..5a055e28e 100644
--- a/Client/src/Components/Link/index.jsx
+++ b/Client/src/Components/Link/index.jsx
@@ -28,11 +28,11 @@ const Link = ({ level, label, url }) => {
       sx: {
         textDecoration: "underline",
         textDecorationStyle: "dashed",
-        textDecorationColor: theme.palette.common.main,
+        textDecorationColor: theme.palette.primary.main,
         textUnderlineOffset: "1px",
         ":hover": {
           color: theme.palette.text.tertiary,
-          textDecorationColor: theme.palette.common.main,
+          textDecorationColor: theme.palette.primary.main,
           backgroundColor: theme.palette.background.fill,
         },
       },
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 722d48431..c372f8c66 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -154,7 +154,7 @@ function Sidebar() {
             color="white"
             sx={{
               position: "relative",
-              backgroundColor: theme.palette.common.main,
+              backgroundColor: theme.palette.primary.main,
               borderRadius: theme.shape.borderRadius,
               userSelect: "none",
             }}
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 732919085..67c48d034 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -302,7 +302,7 @@ const ProfilePanel = () => {
               label="Update"
               onClick={openPictureModal}
               sx={{
-                color: theme.palette.common.main,
+                color: theme.palette.primary.main,
               }}
             />
           </Stack>
diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx
index 120923bb2..0936a1b2f 100644
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/Client/src/Pages/Auth/CheckEmail.jsx
@@ -90,7 +90,7 @@ const CheckEmail = () => {
       overflow="hidden"
       sx={{
         "& h1": {
-          color: theme.palette.common.main,
+          color: theme.palette.primary.main,
           fontWeight: 600,
           fontSize: 26,
         },
@@ -164,7 +164,7 @@ const CheckEmail = () => {
               component="span"
               onClick={resendToken}
               sx={{
-                color: theme.palette.common.main,
+                color: theme.palette.primary.main,
                 userSelect: "none",
                 pointerEvents: disabled ? "none" : "auto",
                 cursor: disabled ? "default" : "pointer",
@@ -181,7 +181,7 @@ const CheckEmail = () => {
         <Typography
           component="span"
           ml={theme.spacing(2)}
-          color={theme.palette.common.main}
+          color={theme.palette.primary.main}
           onClick={handleNavigate}
           sx={{ userSelect: "none" }}
         >
diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index f174b2322..89b8095b9 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -92,7 +92,7 @@ const ForgotPassword = () => {
       overflow="hidden"
       sx={{
         "& h1": {
-          color: theme.palette.common.main,
+          color: theme.palette.primary.main,
           fontWeight: 600,
           fontSize: 24,
         },
@@ -185,7 +185,7 @@ const ForgotPassword = () => {
         <Typography display="inline-block">Go back to —</Typography>
         <Typography
           component="span"
-          color={theme.palette.common.main}
+          color={theme.palette.primary.main}
           ml={theme.spacing(2)}
           onClick={handleNavigate}
           sx={{ userSelect: "none" }}
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index fb2243ab9..6e741d4c7 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -269,13 +269,13 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
           <Typography
             className="forgot-p"
             display="inline-block"
-            color={theme.palette.common.main}
+            color={theme.palette.primary.main}
           >
             Forgot password?
           </Typography>
           <Typography
             component="span"
-            color={theme.palette.common.main}
+            color={theme.palette.primary.main}
             ml={theme.spacing(2)}
             sx={{ userSelect: "none" }}
             onClick={handleNavigate}
@@ -419,7 +419,7 @@ const Login = () => {
       overflow="hidden"
       sx={{
         "& h1": {
-          color: theme.palette.common.main,
+          color: theme.palette.primary.main,
           fontWeight: 600,
           fontSize: 30,
         },
@@ -491,7 +491,7 @@ const Login = () => {
         </Typography>
         <Typography
           component="span"
-          color={theme.palette.common.main}
+          color={theme.palette.primary.main}
           ml={theme.spacing(2)}
           onClick={() => {
             navigate("/register");
diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
index 89e8fd110..2d07de23e 100644
--- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
@@ -27,7 +27,7 @@ const NewPasswordConfirmed = () => {
       overflow="hidden"
       sx={{
         "& h1": {
-          color: theme.palette.common.main,
+          color: theme.palette.primary.main,
           fontWeight: 600,
           fontSize: 22,
         },
@@ -99,7 +99,7 @@ const NewPasswordConfirmed = () => {
         <Typography display="inline-block">Go back to —</Typography>
         <Typography
           component="span"
-          color={theme.palette.common.main}
+          color={theme.palette.primary.main}
           ml={theme.spacing(2)}
           onClick={handleNavigate}
           sx={{ userSelect: "none" }}
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 4560966c0..8de08e2d3 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -644,7 +644,7 @@ const Register = ({ isSuperAdmin }) => {
       overflow="hidden"
       sx={{
         "& h1": {
-          color: theme.palette.common.main,
+          color: theme.palette.primary.main,
           fontWeight: 600,
           fontSize: 30,
         },
@@ -731,7 +731,7 @@ const Register = ({ isSuperAdmin }) => {
           onClick={() => {
             navigate("/login");
           }}
-          sx={{ userSelect: "none", color: theme.palette.common.main }}
+          sx={{ userSelect: "none", color: theme.palette.primary.main }}
         >
           Log In
         </Typography>
diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx
index ca54e6fc8..9345df0fb 100644
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -109,7 +109,7 @@ const SetNewPassword = () => {
       overflow="hidden"
       sx={{
         "& h1": {
-          color: theme.palette.common.main,
+          color: theme.palette.primary.main,
           fontWeight: 600,
           fontSize: 24,
         },
@@ -280,7 +280,7 @@ const SetNewPassword = () => {
         <Typography display="inline-block">Go back to —</Typography>
         <Typography
           component="span"
-          color={theme.palette.common.main}
+          color={theme.palette.primary.main}
           ml={theme.spacing(2)}
           onClick={() => navigate("/login")}
           sx={{ userSelect: "none" }}
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index 0c6a16d5e..c4b142e2a 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -215,7 +215,7 @@ const CreateNewMaintenanceWindow = () => {
             sx={{
               width: "fit-content",
               fontSize: "var(--env-var-font-size-small)",
-              borderBottom: `1px dashed ${theme.palette.common.main}`,
+              borderBottom: `1px dashed ${theme.palette.primary.main}`,
               paddingBottom: "4px",
             }}
           >
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 1506cd86f..02fb769bf 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -37,7 +37,7 @@ const StatBox = ({ title, value }) => {
         mb={theme.spacing(2)}
         fontSize={14}
         fontWeight={500}
-        color={theme.palette.common.main}
+        color={theme.palette.primary.main}
         sx={{
           "& span": {
             color: theme.palette.text.accent,
diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx
index cb2cee505..318a9da20 100644
--- a/Client/src/Pages/Monitors/Home/index.jsx
+++ b/Client/src/Pages/Monitors/Home/index.jsx
@@ -77,7 +77,7 @@ const Monitors = ({ isAdmin }) => {
               {monitorState.monitors?.length !== 0 && (
                 <Button
                   variant="contained"
-                  color="common"
+                  color="primary"
                   onClick={() => {
                     navigate("/monitors/create");
                   }}
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 05488d39f..f63af43db 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -43,7 +43,7 @@ const StatBox = ({ icon, title, value }) => {
       <Box>
         <Typography
           variant="h6"
-          color={theme.palette.common.main}
+          color={theme.palette.primary.main}
           mb={theme.spacing(6)}
         >
           {title}
@@ -592,7 +592,7 @@ const PageSpeedDetails = () => {
                 <Typography
                   component="span"
                   sx={{
-                    color: theme.palette.common.main,
+                    color: theme.palette.primary.main,
                     fontWeight: 500,
                     textDecoration: "underline",
                     cursor: "pointer",
@@ -627,7 +627,7 @@ const PageSpeedDetails = () => {
                 <Typography
                   component="span"
                   sx={{
-                    color: theme.palette.common.main,
+                    color: theme.palette.primary.main,
                     fontWeight: 500,
                     textDecoration: "underline",
                     cursor: "pointer",
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index 4ce37b250..27240b6e8 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -52,7 +52,7 @@ const Card = ({ data }) => {
             <Typography
               component="h2"
               mb={theme.spacing(2)}
-              color={theme.palette.common.main}
+              color={theme.palette.primary.main}
             >
               {data.name}
             </Typography>
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index e61526b29..05c5942d9 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -14,7 +14,6 @@ const background = {
   accent: "#18181a",
 };
 const border = { light: "#27272a", dark: "#2c2c2c" };
-const common = { main: "#1570ef", dark: "#0e4ea7", contrastText: "#FFFFFF" };
 
 const fontFamilyDefault =
   '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
@@ -25,7 +24,7 @@ const darkTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
   palette: {
     mode: "dark",
-    common: common,
+    primary: { main: "#1570ef" },
     text: text,
     background: background,
     border: border,
@@ -66,9 +65,6 @@ const darkTheme = createTheme({
       grid: "#454546",
     },
     // TO BE REMOVED //
-    primary: {
-      main: "#1570ef",
-    },
     secondary: {
       main: "#e6e6e6",
     },
@@ -103,6 +99,7 @@ const darkTheme = createTheme({
       styleOverrides: {
         root: {
           padding: 4,
+          transition: "none",
           "&:hover": {
             backgroundColor: background.fill,
           },
@@ -131,6 +128,13 @@ const darkTheme = createTheme({
         },
       },
     },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          transition: "none",
+        },
+      },
+    },
     MuiMenuItem: {
       styleOverrides: {
         root: {
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index 17d52f3cd..1610ec322 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -13,7 +13,6 @@ const background = {
   accent: "#f9fafb",
 };
 const border = { light: "#eaecf0", dark: "#d0d5dd" };
-const common = { main: "#1570ef", dark: "#0e4ea7", contrastText: "#FFFFFF" };
 
 const fontFamilyDefault =
   '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
@@ -23,7 +22,7 @@ const shadow =
 const lightTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
   palette: {
-    common: common,
+    primary: { main: "#1570EF" },
     text: text,
     background: background,
     border: border,
@@ -63,9 +62,6 @@ const lightTheme = createTheme({
       grid: "#a2a3a3",
     },
     // TO BE REMOVED //
-    primary: {
-      main: "#1570EF",
-    },
     secondary: {
       main: "#475467",
     },
@@ -100,6 +96,7 @@ const lightTheme = createTheme({
       styleOverrides: {
         root: {
           padding: 4,
+          transition: "none",
           "&:hover": {
             backgroundColor: background.fill,
           },
@@ -126,6 +123,13 @@ const lightTheme = createTheme({
         },
       },
     },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          transition: "none",
+        },
+      },
+    },
     MuiMenuItem: {
       styleOverrides: {
         root: {