From e5c19c27442c2c43296c84dd45ec819f82adfe0a Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 27 Aug 2024 20:11:59 -0400
Subject: [PATCH] Refactored pages styling 1/?

---
 Client/src/Components/Inputs/Field/index.jsx  |  9 +-
 Client/src/Components/Sidebar/index.jsx       |  5 ++
 .../TabPanels/Account/PasswordPanel.jsx       | 15 +++-
 .../TabPanels/Account/ProfilePanel.jsx        | 71 +++++++++++-----
 .../TabPanels/Account/TeamPanel.jsx           | 56 ++++++++-----
 Client/src/Layouts/HomeLayout/index.css       | 16 +---
 Client/src/Pages/Account/index.css            | 14 ----
 Client/src/Pages/Account/index.jsx            | 22 ++---
 Client/src/Pages/Auth/CheckEmail.jsx          | 47 +++++++----
 Client/src/Pages/Auth/ForgotPassword.jsx      | 42 ++++++----
 Client/src/Pages/Auth/Login.jsx               | 77 ++++++++++++-----
 .../src/Pages/Auth/NewPasswordConfirmed.jsx   | 43 ++++++----
 Client/src/Pages/Auth/Register/Register.jsx   | 83 +++++++++++++------
 Client/src/Pages/Auth/SetNewPassword.jsx      | 43 ++++++----
 Client/src/Pages/Auth/index.css               | 10 ---
 Client/src/Pages/Maintenance/index.jsx        | 21 ++++-
 Client/src/Pages/PageSpeed/index.jsx          | 16 +++-
 Client/src/Pages/Status/index.jsx             | 21 ++++-
 18 files changed, 404 insertions(+), 207 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index 12ecc8775..c993f1bbf 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import { forwardRef, useState } from "react";
 import { useTheme } from "@emotion/react";
 import {
   IconButton,
@@ -9,10 +10,7 @@ import {
 } from "@mui/material";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import Visibility from "@mui/icons-material/Visibility";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import Button from "../../Button";
 import "./index.css";
-import { forwardRef, useState } from "react";
 
 /**
  * @param {Object} props
@@ -119,6 +117,11 @@ const Field = forwardRef(
           onChange={onChange}
           disabled={disabled}
           inputRef={ref}
+          inputProps={{
+            sx: {
+              color: theme.palette.text.secondary,
+            },
+          }}
           sx={
             type === "url"
               ? {
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 96d2fbd75..a79de47df 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -124,8 +124,13 @@ function Sidebar() {
     <Stack
       component="aside"
       className={collapsed ? "collapsed" : "expanded"}
+      py={theme.spacing(6)}
       gap={theme.spacing(6)}
       sx={{
+        border: 1,
+        borderColor: theme.palette.border.light,
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: theme.palette.background.main,
         "& .selected-path, & .MuiListItemButton-root:hover": {
           backgroundColor: theme.palette.background.accent,
         },
diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
index f921aa1ed..e94cc5ddd 100644
--- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
@@ -97,13 +97,20 @@ const PasswordPanel = () => {
   };
 
   return (
-    <TabPanel value="password">
+    <TabPanel
+      value="password"
+      sx={{
+        "& h1, & input": {
+          color: theme.palette.text.tertiary,
+        },
+      }}
+    >
       <Stack
         component="form"
         onSubmit={handleSubmit}
         noValidate
         spellCheck="false"
-        gap={theme.gap.xl}
+        gap={theme.spacing(20)}
       >
         <Stack direction="row">
           <Box flex={0.9}>
@@ -165,9 +172,9 @@ const PasswordPanel = () => {
             loadingText="Saving..."
             disabled={Object.keys(errors).length !== 0 && true}
             sx={{
-              paddingX: theme.gap.large,
+              paddingX: theme.spacing(12),
               width: "fit-content",
-              mt: theme.gap.xl,
+              mt: theme.spacing(20),
             }}
           />
         </Stack>
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 7d18b48c5..732919085 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -216,13 +216,20 @@ const ProfilePanel = () => {
   const isModalOpen = (name) => isOpen === name;
 
   return (
-    <TabPanel value="profile">
+    <TabPanel
+      value="profile"
+      sx={{
+        "& h1, & p, & input": {
+          color: theme.palette.text.tertiary,
+        },
+      }}
+    >
       <Stack
         component="form"
         className="edit-profile-form"
         noValidate
         spellCheck="false"
-        gap={theme.gap.xl}
+        gap={theme.spacing(20)}
       >
         <Stack direction="row">
           <Box flex={0.9}>
@@ -295,7 +302,7 @@ const ProfilePanel = () => {
               label="Update"
               onClick={openPictureModal}
               sx={{
-                color: theme.palette.primary.main,
+                color: theme.palette.common.main,
               }}
             />
           </Stack>
@@ -303,7 +310,9 @@ const ProfilePanel = () => {
         <Divider
           aria-hidden="true"
           width="0"
-          sx={{ marginY: theme.spacing(1) }}
+          sx={{
+            marginY: theme.spacing(1),
+          }}
         />
         <Stack direction="row" justifyContent="flex-end">
           <Box width="fit-content">
@@ -317,18 +326,24 @@ const ProfilePanel = () => {
                 Object.keys(errors).length !== 0 && !errors?.picture && true
               }
               sx={{
-                paddingX: theme.gap.large,
+                paddingX: theme.spacing(12),
               }}
             />
           </Box>
         </Stack>
       </Stack>
-      <Divider aria-hidden="true" sx={{ marginY: theme.spacing(6) }} />
+      <Divider
+        aria-hidden="true"
+        sx={{
+          marginY: theme.spacing(20),
+          borderColor: theme.palette.border.light,
+        }}
+      />
       <Stack
         component="form"
         noValidate
         spellCheck="false"
-        gap={theme.gap.small}
+        gap={theme.spacing(4)}
       >
         <Box>
           <Typography component="h1">Delete account</Typography>
@@ -341,7 +356,7 @@ const ProfilePanel = () => {
           level="error"
           label="Delete account"
           onClick={() => setIsOpen("delete")}
-          sx={{ width: "fit-content", mt: theme.gap.small }}
+          sx={{ width: "fit-content", mt: theme.spacing(4) }}
         />
       </Stack>
       {/* TODO - Update ModalPopup Component with @mui for reusability */}
@@ -353,18 +368,19 @@ const ProfilePanel = () => {
         disablePortal
       >
         <Stack
-          gap="10px"
+          gap={theme.spacing(5)}
           sx={{
             position: "absolute",
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
             width: 500,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: `${theme.shape.borderRadius}px`,
+            bgcolor: theme.palette.background.main,
+            border: 1,
+            borderColor: theme.palette.border.light,
+            borderRadius: theme.shape.borderRadius,
             boxShadow: 24,
-            p: "30px",
+            p: theme.spacing(15),
             "&:focus": {
               outline: "none",
             },
@@ -378,7 +394,12 @@ const ProfilePanel = () => {
             and all of your data will be deleted. Deleting your account is
             permanent and non-recoverable action.
           </Typography>
-          <Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
+          <Stack
+            direction="row"
+            gap={theme.spacing(5)}
+            mt={theme.spacing(5)}
+            justifyContent="flex-end"
+          >
             <Button
               level="tertiary"
               label="Cancel"
@@ -406,17 +427,22 @@ const ProfilePanel = () => {
             left: "50%",
             transform: "translate(-50%, -50%)",
             width: 450,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: `${theme.shape.borderRadius}px`,
+            bgcolor: theme.palette.background.main,
+            border: 1,
+            borderColor: theme.palette.border.light,
+            borderRadius: theme.shape.borderRadius,
             boxShadow: 24,
-            p: "30px",
+            p: theme.spacing(15),
             "&:focus": {
               outline: "none",
             },
           }}
         >
-          <Typography id="modal-update-picture" component="h1">
+          <Typography
+            id="modal-update-picture"
+            component="h1"
+            color={theme.palette.text.secondary}
+          >
             Upload Image
           </Typography>
           <ImageField
@@ -447,7 +473,12 @@ const ProfilePanel = () => {
           ) : (
             ""
           )}
-          <Stack direction="row" mt="20px" gap="10px" justifyContent="flex-end">
+          <Stack
+            direction="row"
+            mt={theme.spacing(10)}
+            gap={theme.spacing(5)}
+            justifyContent="flex-end"
+          >
             <Button
               level="secondary"
               label="Edit"
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index cac7adc62..93c31af79 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -198,7 +198,18 @@ const TeamPanel = () => {
   };
 
   return (
-    <TabPanel value="team">
+    <TabPanel
+      value="team"
+      sx={{
+        "& h1": {
+          color: theme.palette.text.tertiary,
+        },
+        "& .MuiTable-root .MuiTableBody-root .MuiTableCell-root, & .MuiTable-root p + p":
+          {
+            color: theme.palette.text.accent,
+          },
+      }}
+    >
       {/* FEATURE STILL TO BE IMPLEMENTED */}
       {/* <Stack component="form">
         <Box sx={{ alignSelf: "flex-start" }}>
@@ -250,24 +261,30 @@ const TeamPanel = () => {
         component="form"
         noValidate
         spellCheck="false"
-        gap={theme.gap.large}
+        gap={theme.spacing(12)}
       >
         <Typography component="h1">Team members</Typography>
         <Stack direction="row" justifyContent="space-between">
           <Stack
             direction="row"
             alignItems="flex-end"
-            gap={theme.gap.medium}
-            sx={{ fontSize: "14px" }}
+            gap={theme.spacing(6)}
+            sx={{ fontSize: 14 }}
           >
-            <ButtonGroup>
+            <ButtonGroup
+              sx={{
+                "& button, & button:hover": {
+                  borderColor: theme.palette.border.light,
+                },
+              }}
+            >
               <Button
                 level="secondary"
                 label="All"
                 onClick={() => setFilter("all")}
                 sx={{
                   backgroundColor:
-                    filter === "all" && theme.palette.otherColors.fillGray,
+                    filter === "all" && theme.palette.background.fill,
                 }}
               />
               <Button
@@ -276,7 +293,7 @@ const TeamPanel = () => {
                 onClick={() => setFilter("admin")}
                 sx={{
                   backgroundColor:
-                    filter === "admin" && theme.palette.otherColors.fillGray,
+                    filter === "admin" && theme.palette.background.fill,
                 }}
               />
               <Button
@@ -285,7 +302,7 @@ const TeamPanel = () => {
                 onClick={() => setFilter("user")}
                 sx={{
                   backgroundColor:
-                    filter === "user" && theme.palette.otherColors.fillGray,
+                    filter === "user" && theme.palette.background.fill,
                 }}
               />
             </ButtonGroup>
@@ -293,7 +310,7 @@ const TeamPanel = () => {
           <Button
             level="primary"
             label="Invite a team member"
-            sx={{ paddingX: "30px" }}
+            sx={{ paddingX: theme.spacing(15) }}
             onClick={() => setIsOpen(true)}
           />
         </Stack>
@@ -312,18 +329,19 @@ const TeamPanel = () => {
         disablePortal
       >
         <Stack
-          gap="10px"
+          gap={theme.spacing(5)}
           sx={{
             position: "absolute",
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
             width: 400,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: `${theme.shape.borderRadius}px`,
+            bgcolor: theme.palette.background.main,
+            border: 1,
+            borderColor: theme.palette.border.light,
+            borderRadius: theme.shape.borderRadius,
             boxShadow: 24,
-            p: "30px",
+            p: theme.spacing(15),
             "&:focus": {
               outline: "none",
             },
@@ -335,7 +353,7 @@ const TeamPanel = () => {
           <Typography
             id="invite-member-to-team"
             component="p"
-            sx={{ mb: theme.gap.medium }}
+            sx={{ mb: theme.spacing(6) }}
           >
             When you add a new team member, they will get access to all
             monitors.
@@ -360,14 +378,14 @@ const TeamPanel = () => {
               }))
             }
             items={[
-              { _id: "admin", name: "admin" },
-              { _id: "user", name: "user" },
+              { _id: "admin", name: "Admin" },
+              { _id: "user", name: "User" },
             ]}
           />
           <Stack
             direction="row"
-            gap={theme.gap.small}
-            mt={theme.gap.ml}
+            gap={theme.spacing(4)}
+            mt={theme.spacing(8)}
             justifyContent="flex-end"
           >
             <Button
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index c5407eda6..2c50d85c3 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -19,12 +19,6 @@
 
   height: calc(100vh - var(--env-var-spacing-2) * 2);
   max-width: var(--env-var-side-bar-width);
-
-  border: 1px solid var(--border-color);
-  border-radius: var(--env-var-radius-1);
-  background-color: var(--primary-bg);
-
-  padding: var(--env-var-spacing-1) 0;
 }
 
 .home-layout > div {
@@ -32,19 +26,11 @@
   flex: 1;
 }
 
-.home-layout > div:has(> [class*="fallback__"]) {
-  border: solid 1px var(--border-color);
-  border-radius: var(--env-var-radius-1);
-  border-style: dashed;
-  background-color: var(--primary-bg);
-  overflow: hidden;
-  position: relative;
-}
 .home-layout > div:has(> [class*="fallback__"]) .background-pattern-svg {
   position: absolute;
   top: 0;
   left: 50%;
-  transform: translate(-50%, -33%);
+  transform: translate(-50%, -47%);
   z-index: 0;
 
   width: 100%;
diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
index 82d5fc991..24b47d3e9 100644
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -6,12 +6,6 @@
 .account .MuiSelect-select {
   font-size: var(--env-var-font-size-medium);
 }
-.account h1.MuiTypography-root,
-.account p.MuiTypography-root,
-.account input,
-.account .MuiSelect-select {
-  color: var(--secondary-color-light);
-}
 .account h1.MuiTypography-root {
   font-weight: 600;
 }
@@ -19,10 +13,6 @@
   padding: 0;
   margin-top: 50px;
 }
-.account .MuiDivider-root,
-.account .MuiButtonGroup-root button {
-  border-color: var(--border-color);
-}
 .account button:not(.MuiIconButton-root) {
   height: 34px;
 }
@@ -43,10 +33,6 @@
   top: 100%;
 }
 
-.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/Account/index.jsx b/Client/src/Pages/Account/index.jsx
index 2fed926b8..0ff012ce0 100644
--- a/Client/src/Pages/Account/index.jsx
+++ b/Client/src/Pages/Account/index.jsx
@@ -30,18 +30,18 @@ const Account = ({ open = "profile" }) => {
   return (
     <Box
       className="account"
-      px={theme.gap.xl}
-      py={theme.gap.large}
+      px={theme.spacing(20)}
+      py={theme.spacing(12)}
       border={1}
-      borderColor={theme.palette.otherColors.graishWhite}
-      borderRadius={`${theme.shape.borderRadius}px`}
-      backgroundColor={theme.palette.otherColors.white}
+      borderColor={theme.palette.border.light}
+      borderRadius={theme.shape.borderRadius}
+      backgroundColor={theme.palette.background.main}
     >
       <TabContext value={tab}>
         <Box
           sx={{
             borderBottom: 1,
-            borderColor: "var(--env-var-color-16)",
+            borderColor: theme.palette.border.light,
             "& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
           }}
         >
@@ -52,15 +52,15 @@ const Account = ({ open = "profile" }) => {
                 key={index}
                 value={label.toLowerCase()}
                 sx={{
-                  fontSize: "13px",
-                  color: theme.palette.secondary.main,
+                  fontSize: 13,
+                  color: theme.palette.text.tertiary,
                   textTransform: "none",
                   minWidth: "fit-content",
                   minHeight: 0,
-                  paddingLeft: "0",
-                  paddingY: theme.gap.small,
+                  paddingLeft: 0,
+                  paddingY: theme.spacing(4),
                   fontWeight: 400,
-                  marginRight: theme.gap.ml,
+                  marginRight: theme.spacing(8),
                   "&:focus": {
                     outline: "none",
                   },
diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx
index 4a0daf68a..120923bb2 100644
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/Client/src/Pages/Auth/CheckEmail.jsx
@@ -85,7 +85,21 @@ const CheckEmail = () => {
   };
 
   return (
-    <Stack className="check-email-page auth" overflow="hidden">
+    <Stack
+      className="check-email-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 26,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
       <Box
         className="background-pattern-svg"
         sx={{ backgroundImage: `url(${background})` }}
@@ -93,8 +107,8 @@ const CheckEmail = () => {
       <Stack
         direction="row"
         alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
       >
         <Logo style={{ borderRadius: theme.shape.borderRadius }} />
         <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -104,31 +118,31 @@ const CheckEmail = () => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.xl}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
             border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
             padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
             },
           },
         }}
       >
         <Stack
-          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
           alignItems="center"
           textAlign="center"
         >
           <Box>
             <EmailIcon alt="email icon" />
             <Typography component="h1">Check your email</Typography>
-            <Typography mt={theme.gap.xs}>
+            <Typography mt={theme.spacing(2)}>
               We sent a password reset link to{" "}
               <Typography className="email-sent-to" component="span">
                 {email || "username@email.com"}
@@ -144,13 +158,13 @@ const CheckEmail = () => {
               maxWidth: 400,
             }}
           />
-          <Typography sx={{ alignSelf: "center", mb: theme.gap.medium }}>
+          <Typography sx={{ alignSelf: "center", mb: theme.spacing(6) }}>
             Didn&apos;t receive the email?{" "}
             <Typography
               component="span"
               onClick={resendToken}
               sx={{
-                color: theme.palette.primary.main,
+                color: theme.palette.common.main,
                 userSelect: "none",
                 pointerEvents: disabled ? "none" : "auto",
                 cursor: disabled ? "default" : "pointer",
@@ -162,11 +176,12 @@ const CheckEmail = () => {
           </Typography>
         </Stack>
       </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
         <Typography display="inline-block">Go back to —</Typography>
         <Typography
           component="span"
-          ml={theme.gap.xs}
+          ml={theme.spacing(2)}
+          color={theme.palette.common.main}
           onClick={handleNavigate}
           sx={{ userSelect: "none" }}
         >
diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index 06afb05fa..892b0d40c 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -87,7 +87,21 @@ const ForgotPassword = () => {
   };
 
   return (
-    <Stack className="forgot-password-page auth" overflow="hidden">
+    <Stack
+      className="forgot-password-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 24,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
       <Box
         className="background-pattern-svg"
         sx={{ backgroundImage: `url(${background})` }}
@@ -95,8 +109,8 @@ const ForgotPassword = () => {
       <Stack
         direction="row"
         alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
       >
         <Logo style={{ borderRadius: theme.shape.borderRadius }} />
         <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -106,24 +120,24 @@ const ForgotPassword = () => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.xl}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
             border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
             padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
             },
           },
         }}
       >
         <Stack
-          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
           alignItems="center"
           textAlign="center"
         >
@@ -155,18 +169,18 @@ const ForgotPassword = () => {
                 sx={{
                   width: "100%",
                   fontWeight: 400,
-                  mt: theme.gap.mlplus,
+                  mt: theme.spacing(10),
                 }}
               />
             </form>
           </Box>
         </Stack>
       </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
         <Typography display="inline-block">Go back to —</Typography>
         <Typography
           component="span"
-          ml={theme.gap.xs}
+          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 b962fbb9a..f67b63f6b 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -30,7 +30,7 @@ const LandingPage = ({ onContinue }) => {
   return (
     <>
       <Stack
-        gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
         alignItems="center"
         textAlign="center"
       >
@@ -47,7 +47,7 @@ const LandingPage = ({ onContinue }) => {
             sx={{
               width: "100%",
               "& svg": {
-                mr: theme.gap.small,
+                mr: theme.spacing(4),
               },
             }}
           />
@@ -64,6 +64,11 @@ const LandingPage = ({ onContinue }) => {
                   "noreferrer"
                 );
               }}
+              sx={{
+                "&:hover": {
+                  color: theme.palette.text.tertiary,
+                },
+              }}
             >
               Terms of Service
             </Typography>{" "}
@@ -77,6 +82,11 @@ const LandingPage = ({ onContinue }) => {
                   "noreferrer"
                 );
               }}
+              sx={{
+                "&:hover": {
+                  color: theme.palette.text.tertiary,
+                },
+              }}
             >
               Privacy Policy.
             </Typography>
@@ -114,7 +124,10 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
 
   return (
     <>
-      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
+      <Stack
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        textAlign="center"
+      >
         <Box>
           <Typography component="h1">Log In</Typography>
           <Typography>Enter your email address</Typography>
@@ -144,10 +157,10 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
             img={<ArrowBackRoundedIcon />}
             onClick={onBack}
             sx={{
-              mb: theme.gap.medium,
-              px: theme.gap.ml,
+              mb: theme.spacing(6),
+              px: theme.spacing(8),
               "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.xs,
+                mr: theme.spacing(2),
               },
             }}
             props={{ tabIndex: -1 }}
@@ -204,7 +217,10 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 
   return (
     <>
-      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
+      <Stack
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        textAlign="center"
+      >
         <Box>
           <Typography component="h1">Log In</Typography>
           <Typography>Enter your password</Typography>
@@ -233,10 +249,10 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
             img={<ArrowBackRoundedIcon />}
             onClick={onBack}
             sx={{
-              mb: theme.gap.medium,
-              px: theme.gap.ml,
+              mb: theme.spacing(6),
+              px: theme.spacing(8),
               "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.xs,
+                mr: theme.spacing(2),
               },
             }}
             props={{ tabIndex: -1 }}
@@ -255,7 +271,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
           </Typography>
           <Typography
             component="span"
-            ml={theme.gap.xs}
+            ml={theme.spacing(2)}
             sx={{ userSelect: "none" }}
             onClick={handleNavigate}
           >
@@ -393,7 +409,21 @@ const Login = () => {
   };
 
   return (
-    <Stack className="login-page auth" overflow="hidden">
+    <Stack
+      className="login-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 30,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
       <Box
         className="background-pattern-svg"
         sx={{ backgroundImage: `url(${background})` }}
@@ -401,8 +431,8 @@ const Login = () => {
       <Stack
         direction="row"
         alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
       >
         <Logo style={{ borderRadius: theme.shape.borderRadius }} />
         <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -412,18 +442,18 @@ const Login = () => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.xl}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
             border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
             padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
             },
           },
         }}
@@ -450,13 +480,14 @@ const Login = () => {
           )
         )}
       </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
         <Typography display="inline-block">
           Don&apos;t have an account? —
         </Typography>
         <Typography
           component="span"
-          ml={theme.gap.xs}
+          color={theme.palette.common.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 be6aeb9b5..89e8fd110 100644
--- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
@@ -22,7 +22,21 @@ const NewPasswordConfirmed = () => {
   };
 
   return (
-    <Stack className="password-confirmed-page auth" overflow="hidden">
+    <Stack
+      className="password-confirmed-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 22,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
       <Box
         className="background-pattern-svg"
         sx={{ backgroundImage: `url(${background})` }}
@@ -30,8 +44,8 @@ const NewPasswordConfirmed = () => {
       <Stack
         direction="row"
         alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
       >
         <Logo style={{ borderRadius: theme.shape.borderRadius }} />
         <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -41,31 +55,31 @@ const NewPasswordConfirmed = () => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.xl}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
             border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
             padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
             },
           },
         }}
       >
         <Stack
-          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
           alignItems="center"
           textAlign="center"
         >
           <Box>
             <ConfirmIcon alt="password confirm icon" />
             <Typography component="h1">Password reset</Typography>
-            <Typography mt={theme.gap.xs}>
+            <Typography mt={theme.spacing(2)}>
               Your password has been successfully reset. Click below to log in
               magically.
             </Typography>
@@ -81,11 +95,12 @@ const NewPasswordConfirmed = () => {
           />
         </Stack>
       </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
         <Typography display="inline-block">Go back to —</Typography>
         <Typography
           component="span"
-          ml={theme.gap.xs}
+          color={theme.palette.common.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 4680c1821..e364b8162 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -33,7 +33,7 @@ const LandingPage = ({ isAdmin, onSignup }) => {
   return (
     <>
       <Stack
-        gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
         alignItems="center"
         textAlign="center"
       >
@@ -52,7 +52,7 @@ const LandingPage = ({ isAdmin, onSignup }) => {
             sx={{
               width: "100%",
               "& svg": {
-                mr: theme.gap.small,
+                mr: theme.spacing(4),
               },
             }}
           />
@@ -69,6 +69,11 @@ const LandingPage = ({ isAdmin, onSignup }) => {
                   "noreferrer"
                 );
               }}
+              sx={{
+                "&:hover": {
+                  color: theme.palette.text.tertiary,
+                },
+              }}
             >
               Terms of Service
             </Typography>{" "}
@@ -82,6 +87,11 @@ const LandingPage = ({ isAdmin, onSignup }) => {
                   "noreferrer"
                 );
               }}
+              sx={{
+                "&:hover": {
+                  color: theme.palette.text.tertiary,
+                },
+              }}
             >
               Privacy Policy.
             </Typography>
@@ -120,7 +130,10 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
 
   return (
     <>
-      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
+      <Stack
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        textAlign="center"
+      >
         <Box>
           <Typography component="h1">Sign Up</Typography>
           <Typography>Enter your personal details</Typography>
@@ -160,9 +173,9 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
             img={<ArrowBackRoundedIcon />}
             onClick={onBack}
             sx={{
-              px: theme.gap.ml,
+              px: theme.spacing(8),
               "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.xs,
+                mr: theme.spacing(2),
               },
             }}
             props={{ tabIndex: -1 }}
@@ -211,7 +224,10 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 
   return (
     <>
-      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
+      <Stack
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        textAlign="center"
+      >
         <Box>
           <Typography component="h1">Sign Up</Typography>
           <Typography>Enter your email address</Typography>
@@ -241,9 +257,9 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
             img={<ArrowBackRoundedIcon />}
             onClick={onBack}
             sx={{
-              px: theme.gap.ml,
+              px: theme.spacing(8),
               "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.xs,
+                mr: theme.spacing(2),
               },
             }}
             props={{ tabIndex: -1 }}
@@ -292,7 +308,10 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
 
   return (
     <>
-      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
+      <Stack
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        textAlign="center"
+      >
         <Box>
           <Typography component="h1">Sign Up</Typography>
           <Typography>Create your password</Typography>
@@ -327,7 +346,7 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
           </form>
           <Stack
             gap={theme.gap.small}
-            mb={{ xs: theme.gap.ml, sm: theme.gap.large }}
+            mb={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
           >
             <Check
               text={
@@ -394,9 +413,9 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
             img={<ArrowBackRoundedIcon />}
             onClick={onBack}
             sx={{
-              px: theme.gap.ml,
+              px: theme.spacing(8),
               "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.xs,
+                mr: theme.spacing(2),
               },
             }}
             props={{ tabIndex: -1 }}
@@ -580,7 +599,21 @@ const Register = ({ isAdmin }) => {
   };
 
   return (
-    <Stack className="register-page auth" overflow="hidden">
+    <Stack
+      className="register-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 30,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
       <Box
         className="background-pattern-svg"
         sx={{ backgroundImage: `url(${background})` }}
@@ -588,8 +621,8 @@ const Register = ({ isAdmin }) => {
       <Stack
         direction="row"
         alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
       >
         <Logo style={{ borderRadius: theme.shape.borderRadius }} />
         <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -599,18 +632,18 @@ const Register = ({ isAdmin }) => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.xl}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
             border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
             padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
             },
           },
         }}
@@ -645,17 +678,17 @@ const Register = ({ isAdmin }) => {
           ""
         )}
       </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
         <Typography display="inline-block">
           Already have an account? —
         </Typography>
         <Typography
           component="span"
-          ml={theme.gap.xs}
+          ml={theme.spacing(2)}
           onClick={() => {
             navigate("/login");
           }}
-          sx={{ userSelect: "none" }}
+          sx={{ userSelect: "none", color: theme.palette.common.main }}
         >
           Log In
         </Typography>
diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx
index fab448ffa..136940826 100644
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -104,7 +104,21 @@ const SetNewPassword = () => {
   };
 
   return (
-    <Stack className="set-new-password-page auth" overflow="hidden">
+    <Stack
+      className="set-new-password-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 24,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
       <Box
         className="background-pattern-svg"
         sx={{ backgroundImage: `url(${background})` }}
@@ -112,8 +126,8 @@ const SetNewPassword = () => {
       <Stack
         direction="row"
         alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
       >
         <Logo style={{ borderRadius: theme.shape.borderRadius }} />
         <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -123,24 +137,24 @@ const SetNewPassword = () => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.large}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(12)}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
             border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
             padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
             },
           },
         }}
       >
         <Stack
-          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
           alignItems="center"
           textAlign="center"
         >
@@ -176,7 +190,7 @@ const SetNewPassword = () => {
                 error={errors.confirm}
               />
             </form>
-            <Stack gap={theme.gap.small} mb={theme.gap.large}>
+            <Stack gap={theme.spacing(4)} mb={theme.spacing(12)}>
               <Check
                 text={
                   <>
@@ -244,11 +258,12 @@ const SetNewPassword = () => {
           />
         </Stack>
       </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
         <Typography display="inline-block">Go back to —</Typography>
         <Typography
           component="span"
-          ml={theme.gap.xs}
+          color={theme.palette.common.main}
+          ml={theme.spacing(2)}
           onClick={() => navigate("/login")}
           sx={{ userSelect: "none" }}
         >
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index bf95174a8..782f1c1b0 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -5,7 +5,6 @@
 .auth h1 {
   font-size: var(--env-var-font-size-xlarge);
   font-weight: 600;
-  color: var(--theme-main);
 }
 .auth button:not(.MuiIconButton-root),
 .auth p,
@@ -13,16 +12,8 @@
 .auth span {
   font-size: var(--env-var-font-size-medium-plus);
 }
-.auth p {
-  color: var(--secondary-color-light-accent);
-}
-.auth .field h3.MuiTypography-root,
-.auth .field input {
-  color: var(--secondary-color);
-}
 
 .auth p + span {
-  color: var(--theme-main);
   opacity: 0.8;
   cursor: pointer;
   transition: opacity 300ms ease-in;
@@ -34,7 +25,6 @@
   transition: all 200ms;
 }
 .auth p > span:not(.email-sent-to):hover {
-  color: var(--secondary-color-light);
   text-underline-offset: 4px;
 }
 .auth p + span:hover {
diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx
index e9c28d905..2a2d43e04 100644
--- a/Client/src/Pages/Maintenance/index.jsx
+++ b/Client/src/Pages/Maintenance/index.jsx
@@ -1,9 +1,26 @@
+import { Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
 import Fallback from "../../Components/Fallback";
 import "./index.css";
 
 const Maintenance = () => {
+  const theme = useTheme();
+
   return (
-    <div className="maintenance">
+    <Box
+      className="maintenance"
+      sx={{
+        ':has(> [class*="fallback__"])': {
+          position: "relative",
+          border: 1,
+          borderColor: theme.palette.border.light,
+          borderRadius: theme.shape.borderRadius,
+          borderStyle: "dashed",
+          backgroundColor: theme.palette.background.main,
+          overflow: "hidden",
+        },
+      }}
+    >
       <Fallback
         title="maintenance window"
         checks={[
@@ -13,7 +30,7 @@ const Maintenance = () => {
         ]}
         link="/maintenance/create"
       />
-    </div>
+    </Box>
   );
 };
 
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index dc327ad5f..407fe3f39 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -145,7 +145,21 @@ const PageSpeed = () => {
   let isActuallyLoading = isLoading && monitors.length === 0;
 
   return (
-    <Box className="page-speed" pt={theme.gap.xl}>
+    <Box
+      className="page-speed"
+      pt={theme.gap.xl}
+      sx={{
+        ':has(> [class*="fallback__"])': {
+          position: "relative",
+          border: 1,
+          borderColor: theme.palette.border.light,
+          borderRadius: theme.shape.borderRadius,
+          borderStyle: "dashed",
+          backgroundColor: theme.palette.background.main,
+          overflow: "hidden",
+        },
+      }}
+    >
       {isActuallyLoading ? (
         <SkeletonLayout />
       ) : monitors?.length !== 0 ? (
diff --git a/Client/src/Pages/Status/index.jsx b/Client/src/Pages/Status/index.jsx
index d280132c4..cb759b33b 100644
--- a/Client/src/Pages/Status/index.jsx
+++ b/Client/src/Pages/Status/index.jsx
@@ -1,8 +1,25 @@
+import { Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
 import Fallback from "../../Components/Fallback";
 
 const Status = () => {
+  const theme = useTheme();
+
   return (
-    <div className="status">
+    <Box
+      className="status"
+      sx={{
+        ':has(> [class*="fallback__"])': {
+          position: "relative",
+          border: 1,
+          borderColor: theme.palette.border.light,
+          borderRadius: theme.shape.borderRadius,
+          borderStyle: "dashed",
+          backgroundColor: theme.palette.background.main,
+          overflow: "hidden",
+        },
+      }}
+    >
       <Fallback
         title="status page"
         checks={[
@@ -11,7 +28,7 @@ const Status = () => {
           "Build trust with your customers",
         ]}
       />
-    </div>
+    </Box>
   );
 };