diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 783f28330..5db3ea623 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -32,6 +32,7 @@ import { ThemeProvider } from "@emotion/react";
 import lightTheme from "./Utils/Theme/lightTheme";
 import darkTheme from "./Utils/Theme/darkTheme";
 import { useSelector } from "react-redux";
+import { CssBaseline } from "@mui/material";
 
 function App() {
   const AdminCheckedRegister = withAdminCheck(Register);
@@ -45,6 +46,7 @@ function App() {
 
   return (
     <ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
+      <CssBaseline />
       <Routes>
         <Route exact path="/" element={<HomeLayout />}>
           <Route
diff --git a/Client/src/Components/Avatar/index.jsx b/Client/src/Components/Avatar/index.jsx
index 975f27a32..e1263d3ad 100644
--- a/Client/src/Components/Avatar/index.jsx
+++ b/Client/src/Components/Avatar/index.jsx
@@ -64,10 +64,10 @@ const Avatar = ({ src, small, sx }) => {
         "&::before": {
           content: `""`,
           position: "absolute",
-          top: "0",
-          left: "0",
-          width: `calc(100% - ${border * 2}px)`,
-          height: `calc(100% - ${border * 2}px)`,
+          top: 0,
+          left: 0,
+          width: `100%`,
+          height: `100%`,
           border: `${border}px solid rgba(255,255,255,0.2)`,
           borderRadius: "50%",
         },
diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index cb01734fd..121200acf 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -97,7 +97,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
     });
   };
 
-  const memoizedChecks = useMemo(() => checks, []);
+  const memoizedChecks = useMemo(() => checks, [checks[0]]);
 
   const theme = useTheme();
 
@@ -149,6 +149,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
           dataKey="responseTime"
           stroke={theme.palette.primary.main}
           fill="url(#colorUv)"
+          strokeWidth={1.5}
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx
index 51d70bb2c..d1dcc6cfe 100644
--- a/Client/src/Components/ProgressBars/index.jsx
+++ b/Client/src/Components/ProgressBars/index.jsx
@@ -44,7 +44,7 @@ const ProgressUpload = ({
         borderRadius: theme.shape.borderRadius,
         border: 1,
         borderColor: theme.palette.border.light,
-        backgroundColor: "#fafafa",
+        backgroundColor: theme.palette.background.fill,
         "&:has(.input-error)": {
           borderColor: theme.palette.error.main,
           backgroundColor: theme.palette.error.bg,
@@ -62,23 +62,35 @@ const ProgressUpload = ({
         direction="row"
         mb={error ? 0 : theme.spacing(5)}
         gap={theme.spacing(5)}
-        alignItems={error ? "center" : "flex-end"}
+        alignItems={error ? "center" : "flex-start"}
       >
         {error ? (
           <ErrorOutlineOutlinedIcon />
         ) : icon ? (
-          <IconButton
+          <Box
             sx={{
+              position: "relative",
+              height: 30,
+              minWidth: 30,
+              border: 1,
+              borderColor: theme.palette.border.dark,
+              borderRadius: 2,
               backgroundColor: theme.palette.background.main,
-              pointerEvents: "none",
-              borderRadius: theme.shape.borderRadius,
-              border: 2,
-              borderColor: theme.palette.border.light,
-              boxShadow: theme.shape.boxShadow,
+              "& svg": {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: 23,
+                height: 23,
+                "& path": {
+                  fill: theme.palette.other.icon,
+                },
+              },
             }}
           >
             {icon}
-          </IconButton>
+          </Box>
         ) : (
           ""
         )}
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 885c795b1..fb782da92 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -414,12 +414,12 @@ const ProfilePanel = () => {
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            width: 450,
+            width: 475,
             bgcolor: theme.palette.background.main,
             border: 1,
             borderColor: theme.palette.border.light,
             borderRadius: theme.shape.borderRadius,
-            boxShadow: 24,
+            boxShadow: theme.shape.boxShadow,
             p: theme.spacing(15),
             "&:focus": {
               outline: "none",
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 9809ac710..540f2b5fa 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -1,6 +1,13 @@
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Button, ButtonGroup, Modal, Stack, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Modal,
+  Stack,
+  Typography,
+} from "@mui/material";
 import { useEffect, useState } from "react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
@@ -88,7 +95,7 @@ const TeamPanel = () => {
               id: idx,
               data: (
                 <Stack>
-                  <Typography style={{ color: theme.palette.text.secondary }}>
+                  <Typography color={theme.palette.text.secondary}>
                     {member.firstName + " " + member.lastName}
                   </Typography>
                   <Typography>
@@ -322,7 +329,6 @@ const TeamPanel = () => {
         aria-describedby="invite-member-to-team"
         open={isOpen}
         onClose={closeInviteModal}
-        disablePortal
       >
         <Stack
           gap={theme.spacing(5)}
@@ -331,29 +337,38 @@ const TeamPanel = () => {
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            width: 400,
+            width: 450,
             bgcolor: theme.palette.background.main,
             border: 1,
             borderColor: theme.palette.border.light,
             borderRadius: theme.shape.borderRadius,
-            boxShadow: 24,
+            boxShadow: theme.shape.boxShadow,
             p: theme.spacing(15),
             "&:focus": {
               outline: "none",
             },
           }}
         >
-          <Typography id="modal-invite-member" component="h1">
-            Invite new team member
-          </Typography>
-          <Typography
-            id="invite-member-to-team"
-            component="p"
-            sx={{ mb: theme.spacing(6) }}
-          >
-            When you add a new team member, they will get access to all
-            monitors.
-          </Typography>
+          <Box>
+            <Typography
+              id="modal-invite-member"
+              component="h1"
+              fontWeight={600}
+              fontColor={theme.palette.text.secondary}
+            >
+              Invite new team member
+            </Typography>
+            <Typography
+              id="invite-member-to-team"
+              component="p"
+              fontSize={13}
+              color={theme.palette.text.accent}
+              sx={{ mt: theme.spacing(1), mb: theme.spacing(4) }}
+            >
+              When you add a new team member, they will get access to all
+              monitors.
+            </Typography>
+          </Box>
           <Field
             type="email"
             id="input-team-member"
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index 855bf33fc..d9fe9e06b 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -1,7 +1,3 @@
-#root:has(.home-layout) {
-  background-color: var(--secondary-bg);
-}
-
 .home-layout {
   position: relative;
   min-height: 100vh;
diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx
index fd92c59fa..62af75075 100644
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/Client/src/Layouts/HomeLayout/index.jsx
@@ -1,24 +1,15 @@
 import Sidebar from "../../Components/Sidebar";
 import { Outlet } from "react-router";
-import { Box, Stack } from "@mui/material";
-import { useTheme } from "@emotion/react";
+import { Stack } from "@mui/material";
 
 import "./index.css";
 
 const HomeLayout = () => {
-  const theme = useTheme();
-
   return (
-    <Box backgroundColor={theme.palette.background.alt}>
-      <Stack
-        className="home-layout"
-        flexDirection="row"
-        gap={theme.spacing(14)}
-      >
-        <Sidebar />
-        <Outlet />
-      </Stack>
-    </Box>
+    <Stack className="home-layout" flexDirection="row" gap={14}>
+      <Sidebar />
+      <Outlet />
+    </Stack>
   );
 };
 
diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx
index 88bc1983c..d28a5b48f 100644
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/Client/src/Pages/Auth/CheckEmail.jsx
@@ -5,7 +5,8 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router";
 import { createToast } from "../../Utils/toastUtils";
 import { forgotPassword } from "../../Features/Auth/authSlice";
-import background from "../../assets/Images/background_pattern_decorative.png";
+import { IconBox } from "./styled";
+import Background from "../../assets/Images/background-grid.svg?react";
 import EmailIcon from "../../assets/icons/email.svg?react";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import "./index.css";
@@ -93,16 +94,20 @@ const CheckEmail = () => {
           fontWeight: 600,
           fontSize: 22,
         },
-        "& p": {
-          fontSize: 14,
-          color: theme.palette.text.accent,
-        },
+        "& p": { color: theme.palette.text.accent, fontSize: 13.5 },
+        "& span": { fontSize: "inherit" },
       }}
     >
       <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
         direction="row"
         alignItems="center"
@@ -134,14 +139,16 @@ const CheckEmail = () => {
         }}
       >
         <Stack
-          gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+          gap={{ xs: theme.spacing(8), sm: theme.spacing(10) }}
           alignItems="center"
           textAlign="center"
         >
           <Box>
-            <EmailIcon alt="email icon" />
+            <IconBox>
+              <EmailIcon alt="email icon" />
+            </IconBox>
             <Typography component="h1">Check your email</Typography>
-            <Typography mt={theme.spacing(2)}>
+            <Typography>
               We sent a password reset link to{" "}
               <Typography className="email-sent-to" component="span">
                 {email || "username@email.com"}
@@ -159,7 +166,7 @@ const CheckEmail = () => {
           >
             Open email app
           </Button>
-          <Typography sx={{ alignSelf: "center", mb: theme.spacing(6) }}>
+          <Typography sx={{ alignSelf: "center", mt: theme.spacing(6) }}>
             Didn&apos;t receive the email?{" "}
             <Typography
               component="span"
diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index 338da645c..c1053dcfa 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -6,10 +6,11 @@ import { forgotPassword } from "../../Features/Auth/authSlice";
 import { useEffect, useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
+import { IconBox } from "./styled";
 import Field from "../../Components/Inputs/Field";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Key from "../../assets/icons/key.svg?react";
-import background from "../../assets/Images/background_pattern_decorative.png";
+import Background from "../../assets/Images/background-grid.svg?react";
 import LoadingButton from "@mui/lab/LoadingButton";
 import "./index.css";
 
@@ -94,7 +95,7 @@ const ForgotPassword = () => {
         "& h1": {
           color: theme.palette.primary.main,
           fontWeight: 600,
-          fontSize: 24,
+          fontSize: 21,
         },
         "& p": {
           fontSize: 14,
@@ -104,8 +105,14 @@ const ForgotPassword = () => {
     >
       <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
         direction="row"
         alignItems="center"
@@ -142,7 +149,9 @@ const ForgotPassword = () => {
           textAlign="center"
         >
           <Box>
-            <Key alt="password key icon" />
+            <IconBox>
+              <Key alt="password key icon" />
+            </IconBox>
             <Typography component="h1">Forgot password?</Typography>
             <Typography>
               No worries, we&apos;ll send you reset instructions.
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index c8946b7fb..565419f09 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -8,7 +8,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
 import { networkService } from "../../main";
 import Field from "../../Components/Inputs/Field";
-import background from "../../assets/Images/background_pattern_decorative.png";
+import Background from "../../assets/Images/background-grid.svg?react";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Mail from "../../assets/icons/mail.svg?react";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
@@ -278,9 +278,9 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
           textAlign="center"
           sx={{
             position: "absolute",
-            top: "103%",
+            top: "104%",
             left: "50%",
-            transform: "translateX(-50%)"
+            transform: "translateX(-50%)",
           }}
         >
           <Typography
@@ -438,18 +438,22 @@ const Login = () => {
         "& h1": {
           color: theme.palette.primary.main,
           fontWeight: 600,
-          fontSize: 30,
-        },
-        "& p": {
-          fontSize: 14,
-          color: theme.palette.text.accent,
+          fontSize: 28,
         },
+        "& p": { fontSize: 14, color: theme.palette.text.accent },
+        "& span": { fontSize: "inherit" },
       }}
     >
       <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
         direction="row"
         alignItems="center"
diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
index 7be6d325d..4f00d8dfc 100644
--- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
@@ -4,8 +4,9 @@ import { useNavigate } from "react-router";
 import { useDispatch } from "react-redux";
 import { clearAuthState } from "../../Features/Auth/authSlice";
 import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import background from "../../assets/Images/background_pattern_decorative.png";
-import ConfirmIcon from "../../assets/icons/confirm-icon.svg?react";
+import { IconBox } from "./styled";
+import Background from "../../assets/Images/background-grid.svg?react";
+import ConfirmIcon from "../../assets/icons/check-outlined.svg?react";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import "./index.css";
 
@@ -28,18 +29,21 @@ const NewPasswordConfirmed = () => {
         "& h1": {
           color: theme.palette.primary.main,
           fontWeight: 600,
-          fontSize: 22,
-        },
-        "& p": {
-          fontSize: 14,
-          color: theme.palette.text.accent,
+          fontSize: 21,
         },
+        "& p": { fontSize: 13.5, color: theme.palette.text.accent },
       }}
     >
       <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
         direction="row"
         alignItems="center"
@@ -76,9 +80,11 @@ const NewPasswordConfirmed = () => {
           textAlign="center"
         >
           <Box>
-            <ConfirmIcon alt="password confirm icon" />
+            <IconBox>
+              <ConfirmIcon alt="password confirm icon" />
+            </IconBox>
             <Typography component="h1">Password reset</Typography>
-            <Typography mt={theme.spacing(2)}>
+            <Typography mb={theme.spacing(2)}>
               Your password has been successfully reset. Click below to log in
               magically.
             </Typography>
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index e454b355f..7f5ed6390 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -8,7 +8,7 @@ import { credentials } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { register } from "../../../Features/Auth/authSlice";
 import { useParams } from "react-router-dom";
-import background from "../../../assets/Images/background_pattern_decorative.png";
+import Background from "../../../assets/Images/background-grid.svg?react";
 import Logo from "../../../assets/icons/bwu-icon.svg?react";
 import Mail from "../../../assets/icons/mail.svg?react";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
@@ -658,18 +658,22 @@ const Register = ({ isSuperAdmin }) => {
         "& h1": {
           color: theme.palette.primary.main,
           fontWeight: 600,
-          fontSize: 30,
-        },
-        "& p": {
-          fontSize: 14,
-          color: theme.palette.text.accent,
+          fontSize: 28,
         },
+        "& p": { fontSize: 14, color: theme.palette.text.accent },
+        "& span": { fontSize: "inherit" },
       }}
     >
       <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
         direction="row"
         alignItems="center"
diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx
index a01e9bd51..7e71deb87 100644
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -9,11 +9,12 @@ import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
 import Check from "../../Components/Check/Check";
 import Field from "../../Components/Inputs/Field";
-import LockIcon from "../../assets/icons/lock-button-icon.svg?react";
-import background from "../../assets/Images/background_pattern_decorative.png";
+import LockIcon from "../../assets/icons/lock.svg?react";
+import Background from "../../assets/Images/background-grid.svg?react";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import LoadingButton from "@mui/lab/LoadingButton";
 import "./index.css";
+import { IconBox } from "./styled";
 
 const SetNewPassword = () => {
   const navigate = useNavigate();
@@ -121,8 +122,14 @@ const SetNewPassword = () => {
     >
       <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
         direction="row"
         alignItems="center"
@@ -159,7 +166,9 @@ const SetNewPassword = () => {
           textAlign="center"
         >
           <Box>
-            <LockIcon alt="lock icon" />
+            <IconBox>
+              <LockIcon alt="lock icon" />
+            </IconBox>
             <Typography component="h1">Set new password</Typography>
             <Typography>
               Your new password must be different to previously used passwords.
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index 33280e8f4..ba7d0e266 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -6,9 +6,7 @@
   font-size: var(--env-var-font-size-xlarge);
   font-weight: 600;
 }
-.auth button:not(.MuiIconButton-root),
-.auth p,
-.auth span {
+.auth button:not(.MuiIconButton-root) {
   font-size: var(--env-var-font-size-medium-plus);
 }
 
diff --git a/Client/src/Pages/Auth/styled.jsx b/Client/src/Pages/Auth/styled.jsx
new file mode 100644
index 000000000..a6e4a3343
--- /dev/null
+++ b/Client/src/Pages/Auth/styled.jsx
@@ -0,0 +1,26 @@
+import { Box, styled } from "@mui/material";
+
+export const IconBox = styled(Box)(({ theme }) => ({
+  height: 48,
+  minWidth: 48,
+  width: 48,
+  position: "relative",
+  border: 1,
+  borderStyle: "solid",
+  borderColor: theme.palette.border.dark,
+  borderRadius: 12,
+  backgroundColor: theme.palette.background.accent,
+  margin: "auto",
+  marginBottom: 8,
+  "& svg": {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 24,
+    height: 24,
+    "& path": {
+      stroke: theme.palette.text.tertiary,
+    },
+  },
+}));
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index e54d9eaf4..b86dedeae 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -18,7 +18,7 @@ const border = { light: "#27272a", dark: "#36363e" };
 const fontFamilyDefault =
   '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
 const shadow =
-  "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
+  "0px 4px 24px -4px rgba(255, 255, 255, 0.03), 0px 3px 3px -3px rgba(255, 255, 255, 0.01)";
 
 const darkTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
@@ -53,8 +53,8 @@ const darkTheme = createTheme({
     warning: {
       text: "#e88c30",
       main: "#FF9F00",
-      light: "#272115",
-      bg: "#624711",
+      light: "#624711",
+      bg: "#262115",
       border: "#e88c30",
     },
     percentage: {
@@ -74,6 +74,15 @@ const darkTheme = createTheme({
   },
   spacing: 2,
   components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          backgroundImage:
+            "radial-gradient(circle, #09090b, #0c0c0e, #0f0f11, #111113, #131315, #131315, #131315, #131315, #111113, #0f0f11, #0c0c0e, #09090b)",
+          lineHeight: "inherit",
+        },
+      },
+    },
     MuiButton: {
       defaultProps: {
         disableRipple: true,
@@ -127,7 +136,7 @@ const darkTheme = createTheme({
           padding: 4,
           transition: "none",
           "&:hover": {
-            backgroundColor: background.fill,
+            backgroundColor: border.light,
           },
         },
       },
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index 60a8e0b2d..4fc565da3 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -50,8 +50,8 @@ const lightTheme = createTheme({
     warning: {
       text: "#DC6803",
       main: "#fdb022",
-      light: "#fffcf5",
-      bg: "#ffecbc",
+      light: "#ffecbc",
+      bg: "#fffcf5",
       border: "#fec84b",
     },
     percentage: {
@@ -71,6 +71,15 @@ const lightTheme = createTheme({
   },
   spacing: 2,
   components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          backgroundImage:
+            "radial-gradient(circle, #fcfcfd, #fdfcfd, #fdfdfd, #fefdfe, #fefefe, #fefefe, #fefefe, #fefefe, #fefdfe, #fdfdfd, #fdfcfd, #fcfcfd)",
+          lineHeight: "inherit",
+        },
+      },
+    },
     MuiButton: {
       defaultProps: {
         disableRipple: true,
diff --git a/Client/src/assets/Images/background_pattern_decorative.png b/Client/src/assets/Images/background_pattern_decorative.png
deleted file mode 100644
index 34f6ebce6..000000000
Binary files a/Client/src/assets/Images/background_pattern_decorative.png and /dev/null differ
diff --git a/Client/src/assets/icons/check-outlined.svg b/Client/src/assets/icons/check-outlined.svg
index d26657863..1e779d547 100644
--- a/Client/src/assets/icons/check-outlined.svg
+++ b/Client/src/assets/icons/check-outlined.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.24935 10.0001L8.74935 12.5001L13.7493 7.50008M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z" stroke="#1570EF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.24935 10.0001L8.74935 12.5001L13.7493 7.50008M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z" stroke="#1570EF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/Client/src/assets/icons/confirm-icon.svg b/Client/src/assets/icons/confirm-icon.svg
deleted file mode 100644
index d5cdd42de..000000000
--- a/Client/src/assets/icons/confirm-icon.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_137_19027)">
-<path d="M2.5 13C2.5 6.64873 7.64873 1.5 14 1.5H46C52.3513 1.5 57.5 6.64873 57.5 13V45C57.5 51.3513 52.3513 56.5 46 56.5H14C7.64873 56.5 2.5 51.3513 2.5 45V13Z" stroke="#EAECF0" shape-rendering="crispEdges"/>
-<path d="M24.7499 28.9999L28.2499 32.4999L35.2499 25.4999M41.6666 28.9999C41.6666 35.4432 36.4432 40.6666 29.9999 40.6666C23.5566 40.6666 18.3333 35.4432 18.3333 28.9999C18.3333 22.5566 23.5566 17.3333 29.9999 17.3333C36.4432 17.3333 41.6666 22.5566 41.6666 28.9999Z" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<filter id="filter0_d_137_19027" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1"/>
-<feGaussianBlur stdDeviation="1"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_137_19027"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_137_19027" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/Client/src/assets/icons/email.svg b/Client/src/assets/icons/email.svg
index f501bd75c..01f55e961 100644
--- a/Client/src/assets/icons/email.svg
+++ b/Client/src/assets/icons/email.svg
@@ -1,18 +1,3 @@
-<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_137_18989)">
-<path d="M2.5 13C2.5 6.64873 7.64873 1.5 14 1.5H46C52.3513 1.5 57.5 6.64873 57.5 13V45C57.5 51.3513 52.3513 56.5 46 56.5H14C7.64873 56.5 2.5 51.3513 2.5 45V13Z" stroke="#EAECF0" shape-rendering="crispEdges"/>
-<path d="M18.3333 23.1667L27.859 29.8347C28.6304 30.3746 29.016 30.6446 29.4356 30.7492C29.8061 30.8416 30.1937 30.8416 30.5643 30.7492C30.9838 30.6446 31.3695 30.3746 32.1408 29.8347L41.6666 23.1667M23.9333 38.3333H36.0666C38.0268 38.3333 39.0069 38.3333 39.7556 37.9519C40.4141 37.6163 40.9496 37.0809 41.2851 36.4223C41.6666 35.6736 41.6666 34.6935 41.6666 32.7333V25.2667C41.6666 23.3065 41.6666 22.3264 41.2851 21.5777C40.9496 20.9191 40.4141 20.3837 39.7556 20.0481C39.0069 19.6667 38.0268 19.6667 36.0666 19.6667H23.9333C21.9731 19.6667 20.993 19.6667 20.2443 20.0481C19.5857 20.3837 19.0503 20.9191 18.7147 21.5777C18.3333 22.3264 18.3333 23.3065 18.3333 25.2667V32.7333C18.3333 34.6935 18.3333 35.6736 18.7147 36.4223C19.0503 37.0809 19.5857 37.6163 20.2443 37.9519C20.993 38.3333 21.9731 38.3333 23.9333 38.3333Z" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<filter id="filter0_d_137_18989" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1"/>
-<feGaussianBlur stdDeviation="1"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_137_18989"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_137_18989" result="shape"/>
-</filter>
-</defs>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 7L10.1649 12.7154C10.8261 13.1783 11.1567 13.4097 11.5163 13.4993C11.8339 13.5785 12.1661 13.5785 12.4837 13.4993C12.8433 13.4097 13.1739 13.1783 13.8351 12.7154L22 7M6.8 20H17.2C18.8802 20 19.7202 20 20.362 19.673C20.9265 19.3854 21.3854 18.9265 21.673 18.362C22 17.7202 22 16.8802 22 15.2V8.8C22 7.11984 22 6.27976 21.673 5.63803C21.3854 5.07354 20.9265 4.6146 20.362 4.32698C19.7202 4 18.8802 4 17.2 4H6.8C5.11984 4 4.27976 4 3.63803 4.32698C3.07354 4.6146 2.6146 5.07354 2.32698 5.63803C2 6.27976 2 7.11984 2 8.8V15.2C2 16.8802 2 17.7202 2.32698 18.362C2.6146 18.9265 3.07354 19.3854 3.63803 19.673C4.27976 20 5.11984 20 6.8 20Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/Client/src/assets/icons/key.svg b/Client/src/assets/icons/key.svg
index c6401e09f..5db8d5f16 100644
--- a/Client/src/assets/icons/key.svg
+++ b/Client/src/assets/icons/key.svg
@@ -1,18 +1,3 @@
-<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_137_18974)">
-<path d="M2.5 13C2.5 6.64873 7.64873 1.5 14 1.5H46C52.3513 1.5 57.5 6.64873 57.5 13V45C57.5 51.3513 52.3513 56.5 46 56.5H14C7.64873 56.5 2.5 51.3513 2.5 45V13Z" stroke="#EAECF0" shape-rendering="crispEdges"/>
-<path d="M35.8333 25.4999C35.8333 24.9028 35.6055 24.3057 35.1499 23.8501C34.6943 23.3945 34.0972 23.1667 33.5 23.1667M33.5 32.5C37.366 32.5 40.5 29.366 40.5 25.5C40.5 21.634 37.366 18.5 33.5 18.5C29.634 18.5 26.5 21.634 26.5 25.5C26.5 25.8193 26.5214 26.1336 26.5628 26.4415C26.6309 26.948 26.6649 27.2013 26.642 27.3615C26.6181 27.5284 26.5877 27.6184 26.5055 27.7655C26.4265 27.9068 26.2873 28.046 26.009 28.3243L20.0467 34.2866C19.845 34.4884 19.7441 34.5893 19.6719 34.707C19.608 34.8114 19.5608 34.9252 19.5322 35.0442C19.5 35.1785 19.5 35.3212 19.5 35.6065V37.6333C19.5 38.2867 19.5 38.6134 19.6272 38.863C19.739 39.0825 19.9175 39.261 20.137 39.3728C20.3866 39.5 20.7133 39.5 21.3667 39.5H24.1667V37.1667H26.5V34.8333H28.8333L30.6757 32.991C30.954 32.7127 31.0932 32.5735 31.2345 32.4945C31.3816 32.4123 31.4716 32.3819 31.6385 32.358C31.7987 32.3351 32.052 32.3691 32.5585 32.4372C32.8664 32.4786 33.1807 32.5 33.5 32.5Z" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<filter id="filter0_d_137_18974" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1"/>
-<feGaussianBlur stdDeviation="1"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_137_18974"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_137_18974" result="shape"/>
-</filter>
-</defs>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 8.99994C17 8.48812 16.8047 7.9763 16.4142 7.58579C16.0237 7.19526 15.5118 7 15 7M15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3C11.6863 3 9 5.68629 9 9C9 9.27368 9.01832 9.54308 9.05381 9.80704C9.11218 10.2412 9.14136 10.4583 9.12172 10.5956C9.10125 10.7387 9.0752 10.8157 9.00469 10.9419C8.937 11.063 8.81771 11.1823 8.57913 11.4209L3.46863 16.5314C3.29568 16.7043 3.2092 16.7908 3.14736 16.8917C3.09253 16.9812 3.05213 17.0787 3.02763 17.1808C3 17.2959 3 17.4182 3 17.6627V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H7V19H9V17H11L12.5791 15.4209C12.8177 15.1823 12.937 15.063 13.0581 14.9953C13.1843 14.9248 13.2613 14.8987 13.4044 14.8783C13.5417 14.8586 13.7588 14.8878 14.193 14.9462C14.4569 14.9817 14.7263 15 15 15Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/Client/src/assets/icons/lock-button-icon.svg b/Client/src/assets/icons/lock-button-icon.svg
deleted file mode 100644
index 5048a6a80..000000000
--- a/Client/src/assets/icons/lock-button-icon.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_137_19004)">
-<path d="M2.5 13C2.5 6.64873 7.64873 1.5 14 1.5H46C52.3513 1.5 57.5 6.64873 57.5 13V45C57.5 51.3513 52.3513 56.5 46 56.5H14C7.64873 56.5 2.5 51.3513 2.5 45V13Z" stroke="#EAECF0" shape-rendering="crispEdges"/>
-<path d="M35.8334 26.6667V24.3333C35.8334 21.1117 33.2217 18.5 30.0001 18.5C26.7784 18.5 24.1667 21.1117 24.1667 24.3333V26.6667M30.0001 31.9167V34.25M26.2667 39.5H33.7334C35.6936 39.5 36.6737 39.5 37.4224 39.1185C38.081 38.783 38.6164 38.2475 38.9519 37.589C39.3334 36.8403 39.3334 35.8602 39.3334 33.9V32.2667C39.3334 30.3065 39.3334 29.3264 38.9519 28.5777C38.6164 27.9191 38.081 27.3837 37.4224 27.0481C36.6737 26.6667 35.6936 26.6667 33.7334 26.6667H26.2667C24.3066 26.6667 23.3265 26.6667 22.5778 27.0481C21.9192 27.3837 21.3838 27.9191 21.0482 28.5777C20.6667 29.3264 20.6667 30.3065 20.6667 32.2667V33.9C20.6667 35.8602 20.6667 36.8403 21.0482 37.589C21.3838 38.2475 21.9192 38.783 22.5778 39.1185C23.3265 39.5 24.3066 39.5 26.2667 39.5Z" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<filter id="filter0_d_137_19004" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1"/>
-<feGaussianBlur stdDeviation="1"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_137_19004"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_137_19004" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/Client/src/assets/icons/lock.svg b/Client/src/assets/icons/lock.svg
index eb625f0ee..a87535d54 100644
--- a/Client/src/assets/icons/lock.svg
+++ b/Client/src/assets/icons/lock.svg
@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.3337 5.66667V4.33333C10.3337 2.49238 8.84127 1 7.00033 1C5.15938 1 3.66699 2.49238 3.66699 4.33333V5.66667M7.00033 8.66667V10M4.86699 13H9.13366C10.2538 13 10.8138 13 11.2416 12.782C11.618 12.5903 11.9239 12.2843 12.1157 11.908C12.3337 11.4802 12.3337 10.9201 12.3337 9.8V8.86667C12.3337 7.74656 12.3337 7.18651 12.1157 6.75869C11.9239 6.38236 11.618 6.0764 11.2416 5.88465C10.8138 5.66667 10.2538 5.66667 9.13366 5.66667H4.86699C3.74689 5.66667 3.18683 5.66667 2.75901 5.88465C2.38269 6.0764 2.07673 6.38236 1.88498 6.75869C1.66699 7.18651 1.66699 7.74656 1.66699 8.86667V9.8C1.66699 10.9201 1.66699 11.4802 1.88498 11.908C2.07673 12.2843 2.38269 12.5903 2.75901 12.782C3.18683 13 3.74689 13 4.86699 13Z" stroke="#667085" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.3337 5.66667V4.33333C10.3337 2.49238 8.84127 1 7.00033 1C5.15938 1 3.66699 2.49238 3.66699 4.33333V5.66667M7.00033 8.66667V10M4.86699 13H9.13366C10.2538 13 10.8138 13 11.2416 12.782C11.618 12.5903 11.9239 12.2843 12.1157 11.908C12.3337 11.4802 12.3337 10.9201 12.3337 9.8V8.86667C12.3337 7.74656 12.3337 7.18651 12.1157 6.75869C11.9239 6.38236 11.618 6.0764 11.2416 5.88465C10.8138 5.66667 10.2538 5.66667 9.13366 5.66667H4.86699C3.74689 5.66667 3.18683 5.66667 2.75901 5.88465C2.38269 6.0764 2.07673 6.38236 1.88498 6.75869C1.66699 7.18651 1.66699 7.74656 1.66699 8.86667V9.8C1.66699 10.9201 1.66699 11.4802 1.88498 11.908C2.07673 12.2843 2.38269 12.5903 2.75901 12.782C3.18683 13 3.74689 13 4.86699 13Z" stroke="#667085" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/Client/src/index.css b/Client/src/index.css
index 1f3b9bee2..4383427a7 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -56,12 +56,6 @@ html {
     0px 3px 3px -3px rgba(16, 24, 40, 0.03);
 }
 
-body {
-  margin: 0;
-  min-width: 320px;
-  height: 100%;
-}
-
 .MuiInputBase-root.Mui-disabled input {
   cursor: not-allowed;
 }