diff --git a/Client/src/Components/Avatar/index.jsx b/Client/src/Components/Avatar/index.jsx
index 2a9f70a08..975f27a32 100644
--- a/Client/src/Components/Avatar/index.jsx
+++ b/Client/src/Components/Avatar/index.jsx
@@ -57,6 +57,7 @@ const Avatar = ({ src, small, sx }) => {
       }
       sx={{
         fontSize: small ? "16px" : "22px",
+        color: "white",
         fontWeight: 400,
         backgroundColor: stringToColor(`${user?.firstName} ${user?.lastName}`),
         display: "inline-flex",
diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index c345abf7c..5defa124d 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -120,17 +120,6 @@
   opacity: 0.4;
 }
 
-.pagination-dropdown ul {
-  padding: 4px;
-  min-width: 100px;
-}
-.pagination-dropdown li {
-  font-size: var(--env-var-font-size-medium);
-}
-body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
-  font-size: var(--env-var-font-size-small-plus);
-}
-
 .monitors .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
   text-transform: uppercase;
   opacity: 0.8;
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 3b1d93b3d..e2de29ae1 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -272,7 +272,7 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
             },
           }}
         >
-          <Typography px={theme.spacing(2)} sx={{ opacity: 0.7 }}>
+          <Typography px={theme.spacing(2)} fontSize={12} sx={{ opacity: 0.7 }}>
             Showing {getRange()} of {data.rows.length} monitor(s)
           </Typography>
           <TablePagination
@@ -300,19 +300,11 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
                     sx: {
                       mt: 0,
                       mb: theme.spacing(2),
-                      "& li": {
-                        p: theme.spacing(2),
-                        color: theme.palette.text.tertiary,
-                      },
-                      "& li.Mui-selected, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover":
-                        {
-                          backgroundColor: theme.palette.background.fill,
-                        },
                     },
                   },
                   transformOrigin: { vertical: "bottom", horizontal: "left" },
                   anchorOrigin: { vertical: "top", horizontal: "left" },
-                  sx: { mt: "-4px" },
+                  sx: { mt: theme.spacing(-2) },
                 },
                 inputProps: { id: "pagination-dropdown" },
                 IconComponent: SelectorVertical,
diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx
index c54b4c4a6..f2ca2089f 100644
--- a/Client/src/Components/Breadcrumbs/index.jsx
+++ b/Client/src/Components/Breadcrumbs/index.jsx
@@ -33,7 +33,7 @@ const Breadcrumbs = ({ list }) => {
       lineHeight="18px"
       sx={{
         "& .MuiBreadcrumbs-li:not(:last-of-type):hover a": {
-          backgroundColor: "#e3e3e3",
+          backgroundColor: theme.palette.other.fill,
           opacity: 1,
         },
       }}
diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx
index 79c14584d..22ac837b0 100644
--- a/Client/src/Components/Fallback/index.jsx
+++ b/Client/src/Components/Fallback/index.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography } from "@mui/material";
 import Skeleton from "../../assets/Images/create-placeholder.svg?react";
-import background from "../../assets/Images/background_pattern_decorative.png";
+import Background from "../../assets/Images/background-grid.svg?react";
 import Button from "../Button";
 import Check from "../Check/Check";
 import { useNavigate } from "react-router-dom";
@@ -32,12 +32,18 @@ const Fallback = ({ title, checks, link = "/", isAdmin }) => {
       <Skeleton style={{ zIndex: 1 }} />
       <Box
         className="background-pattern-svg"
-        sx={{ backgroundImage: `url(${background})` }}
-      />
+        sx={{
+          "& svg g g:last-of-type path": {
+            stroke: theme.palette.border.light,
+          },
+        }}
+      >
+        <Background style={{ width: "100%" }} />
+      </Box>
       <Stack gap={theme.spacing(4)} maxWidth={"275px"} zIndex={1}>
         <Typography
           component="h1"
-          marginY={theme.spacing(6)}
+          marginY={theme.spacing(4)}
           color={theme.palette.text.secondary}
         >
           A {title} is used to:
diff --git a/Client/src/Components/Inputs/Select/index.css b/Client/src/Components/Inputs/Select/index.css
index be46ad109..329cdd7d2 100644
--- a/Client/src/Components/Inputs/Select/index.css
+++ b/Client/src/Components/Inputs/Select/index.css
@@ -5,8 +5,3 @@
   align-items: center;
   line-height: 1;
 }
-.select-wrapper .MuiInputBase-root:has(> .MuiSelect-select),
-.MuiMenu-List .MuiMenuItem-root,
-.select-wrapper h3.MuiTypography-root {
-  font-size: var(--env-var-font-size-medium);
-}
diff --git a/Client/src/Components/Inputs/Select/index.jsx b/Client/src/Components/Inputs/Select/index.jsx
index 46969d7c1..b7146f27a 100644
--- a/Client/src/Components/Inputs/Select/index.jsx
+++ b/Client/src/Components/Inputs/Select/index.jsx
@@ -77,26 +77,9 @@ const Select = ({
         onChange={onChange}
         displayEmpty
         inputProps={{ id: id }}
-        MenuProps={{
-          MenuListProps: {
-            sx: {
-              p: 0,
-              "& li": {
-                color: theme.palette.text.secondary,
-                fontSize: 13,
-                px: theme.spacing(4),
-                py: theme.spacing(2.5),
-                borderRadius: theme.shape.borderRadius,
-              },
-              "& li.Mui-selected, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover":
-                {
-                  backgroundColor: theme.palette.background.fill,
-                },
-            },
-          },
-        }}
         IconComponent={KeyboardArrowDownIcon}
         sx={{
+          fontSize: 13,
           minWidth: "125px",
           "& fieldset": {
             borderRadius: theme.shape.borderRadius,
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 2730441b6..2988efb54 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -305,31 +305,12 @@ function Sidebar() {
                 slotProps={{
                   paper: {
                     sx: {
-                      border: 1,
-                      borderColor: theme.palette.border.light,
-                      borderRadius: theme.shape.borderRadius,
-                      boxShadow: theme.shape.boxShadow,
-                      backgroundColor: theme.palette.background.main,
+                      mt: theme.spacing(-2),
                       ml: theme.spacing(1),
                     },
                   },
                 }}
-                MenuListProps={{
-                  sx: {
-                    p: 3,
-                    minWidth: "100px",
-                    "& li": {
-                      color: theme.palette.text.secondary,
-                      fontSize: 13,
-                      px: theme.spacing(4),
-                      py: theme.spacing(2.5),
-                      borderRadius: theme.shape.borderRadius,
-                    },
-                    "& li:hover": {
-                      backgroundColor: theme.palette.background.accent,
-                    },
-                  },
-                }}
+                MenuListProps={{ sx: { px: 1, py: 2 } }}
                 sx={{
                   ml: theme.spacing(8),
                   "& .selected-path": {
@@ -360,9 +341,13 @@ function Sidebar() {
                       }}
                       sx={{
                         gap: theme.spacing(4),
-                        borderRadius: theme.shape.borderRadius,
-                        pl: theme.spacing(4),
-                        mb: "1px",
+                        opacity: 0.9,
+                        "& svg": {
+                          "& path": {
+                            stroke: theme.palette.other.icon,
+                            strokeWidth: 1.1,
+                          },
+                        },
                       }}
                     >
                       {child.icon}
@@ -460,9 +445,7 @@ function Sidebar() {
           )
         )}
       </List>
-      <Divider
-        sx={{ my: theme.spacing(4), borderColor: theme.palette.border.light }}
-      />
+      <Divider sx={{ my: theme.spacing(4) }} />
       {/* other */}
       <List
         component="nav"
@@ -526,7 +509,7 @@ function Sidebar() {
           </Tooltip>
         ))}
       </List>
-      <Divider sx={{ mt: "auto", borderColor: theme.palette.border.light }} />
+      <Divider sx={{ mt: "auto" }} />
 
       <Stack
         direction="row"
@@ -607,11 +590,6 @@ function Sidebar() {
           slotProps={{
             paper: {
               sx: {
-                border: 1,
-                borderColor: theme.palette.border.light,
-                borderRadius: theme.shape.borderRadius,
-                boxShadow: theme.shape.boxShadow,
-                backgroundColor: theme.palette.background.main,
                 marginTop: theme.spacing(-4),
                 marginLeft: collapsed ? theme.spacing(2) : 0,
               },
@@ -619,18 +597,7 @@ function Sidebar() {
           }}
           MenuListProps={{
             sx: {
-              p: 3,
-              minWidth: "100px",
-              "& li": {
-                color: theme.palette.text.secondary,
-                fontSize: 13,
-                px: theme.spacing(4),
-                py: theme.spacing(2.5),
-                borderRadius: theme.shape.borderRadius,
-              },
-              "& li:hover": {
-                backgroundColor: theme.palette.background.accent,
-              },
+              p: 2,
               "& li:has(.MuiBox-root):hover": {
                 backgroundColor: theme.palette.background.main,
               },
@@ -652,11 +619,10 @@ function Sidebar() {
               </Box>
             </MenuItem>
           )}
-          {collapsed && (
-            <Divider sx={{ borderColor: theme.palette.border.light }} />
-          )}
+          {collapsed && <Divider />}
           <MenuItem onClick={() => dispatch(setMode("light"))}>Light</MenuItem>
           <MenuItem onClick={() => dispatch(setMode("dark"))}>Dark</MenuItem>
+          <Divider />
           <MenuItem
             onClick={logout}
             sx={{
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index 2c50d85c3..1434ff9d9 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -30,7 +30,7 @@
   position: absolute;
   top: 0;
   left: 50%;
-  transform: translate(-50%, -47%);
+  transform: translate(-50%, -50%);
   z-index: 0;
 
   width: 100%;
diff --git a/Client/src/Pages/Monitors/Home/index.css b/Client/src/Pages/Monitors/Home/index.css
index 269345b97..42ba2e270 100644
--- a/Client/src/Pages/Monitors/Home/index.css
+++ b/Client/src/Pages/Monitors/Home/index.css
@@ -6,9 +6,6 @@
   font-size: var(--env-var-font-size-large);
   font-weight: 500;
 }
-.monitors p.MuiTypography-root {
-  font-size: var(--env-var-font-size-medium);
-}
 .monitors h1.MuiTypography-root + p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium-plus);
 }
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index aeb762bc0..3599e4c53 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -5,6 +5,7 @@ const text = {
   secondary: "#e6e6e6",
   tertiary: "#a1a1aa",
   accent: "#e6e6e6",
+  disabled: "rgba(172, 172, 172, 0.3)",
 };
 const background = {
   main: "#151518",
@@ -54,10 +55,13 @@ const darkTheme = createTheme({
       border: "#fec84b",
     },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
+    divider: border.light,
     other: {
       icon: "#e6e6e6",
       line: "#27272a",
+      fill: "#18181a",
     },
+    // TO BE REMOVED //
     primary: {
       main: "#1570ef",
     },
@@ -67,6 +71,7 @@ const darkTheme = createTheme({
     tertiary: {
       main: "#e6e6e6",
     },
+    // ----------------- //
   },
   spacing: 2,
   components: {
@@ -79,6 +84,7 @@ const darkTheme = createTheme({
       styleOverrides: {
         root: {
           marginTop: 4,
+          padding: 0,
           border: 1,
           borderStyle: "solid",
           borderColor: border.light,
@@ -88,6 +94,30 @@ const darkTheme = createTheme({
         },
       },
     },
+    MuiList: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          backgroundColor: "inherit",
+          padding: "4px 6px",
+          color: text.secondary,
+          fontSize: 13,
+          margin: 2,
+          minWidth: 100,
+          "&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
+            {
+              backgroundColor: background.fill,
+            },
+        },
+      },
+    },
     MuiTableCell: {
       styleOverrides: {
         root: {
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index 28ef2b925..c328302b3 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -22,6 +22,7 @@ const shadow =
 const lightTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
   palette: {
+    mode: "dark",
     common: { main: "#1570ef" },
     text: text,
     background: background,
@@ -54,10 +55,13 @@ const lightTheme = createTheme({
       border: "#fec84b",
     },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
+    divider: border.light,
     other: {
       icon: "#667085",
       line: "#d6d9dd",
+      fill: "#e3e3e3",
     },
+    // TO BE REMOVED //
     primary: {
       main: "#1570EF",
     },
@@ -67,6 +71,7 @@ const lightTheme = createTheme({
     tertiary: {
       main: "#475467",
     },
+    // ----------------- //
   },
   spacing: 2,
   components: {
@@ -88,6 +93,31 @@ const lightTheme = createTheme({
         },
       },
     },
+    MuiList: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          backgroundColor: "inherit",
+          padding: "4px 6px",
+          color: text.secondary,
+          fontSize: 13,
+          margin: 2,
+          marginBottom: 0,
+          minWidth: 100,
+          "&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
+            {
+              backgroundColor: background.fill,
+            },
+        },
+      },
+    },
     MuiTableCell: {
       styleOverrides: {
         root: {