From 40a268ab184051f96b6081e9ba81bf1fc85f9df2 Mon Sep 17 00:00:00 2001
From: Daniel C <122758391+danielcj2@users.noreply.github.com>
Date: Fri, 26 Jul 2024 12:39:18 -0400
Subject: [PATCH] Updated layout (#450)

* Updated layout

* Fixed error

* Changed integration background to white
---
 Client/src/Components/Avatar/index.jsx        |   2 +-
 .../Charts/Servers/serverStatus.css           |   6 +-
 .../Dashboard/DashboardMenu/index.css         |  20 --
 .../Dashboard/DashboardMenu/index.jsx         |  84 -------
 .../Dashboard/DashboardMenuButton/index.css   |  23 --
 .../Dashboard/DashboardMenuButton/index.jsx   |  32 ---
 .../Dashboard/DashboardSidebar/index.css      |  30 ---
 .../Dashboard/DashboardSidebar/index.jsx      |  27 ---
 Client/src/Components/Integrations/index.css  |   0
 Client/src/Components/Integrations/index.jsx  |  71 ------
 Client/src/Components/NavBar/index.css        |  12 +-
 Client/src/Components/NavBar/index.jsx        | 192 +++++++---------
 Client/src/Components/Sidebar/index.css       |  35 +++
 Client/src/Components/Sidebar/index.jsx       |  64 ++++++
 Client/src/Layouts/HomeLayout/index.css       |  63 +++++-
 Client/src/Layouts/HomeLayout/index.jsx       |  14 +-
 Client/src/Pages/Account/index.jsx            |  11 +-
 Client/src/Pages/Incidents/index.jsx          |   8 +-
 Client/src/Pages/Integrations/index.css       |  14 ++
 Client/src/Pages/Integrations/index.jsx       | 134 +++++++----
 Client/src/Pages/Maintenance/index.jsx        |   7 +-
 Client/src/Pages/Monitors/Configure/index.jsx |  11 +-
 .../Pages/Monitors/CreateMonitor/index.jsx    |  11 +-
 Client/src/Pages/Monitors/Details/index.jsx   |  10 +-
 Client/src/Pages/Monitors/index.css           | 208 ++----------------
 Client/src/Pages/Monitors/index.jsx           |  61 +++--
 Client/src/Pages/NotFound/index.jsx           |   4 +
 Client/src/Pages/Settings/index.jsx           |   3 -
 Client/src/Pages/Status/index.jsx             |   7 +-
 Client/src/Utils/PathMap.js                   |  10 -
 .../src/assets/Images/Icon-chevron-down.png   | Bin 170 -> 0 bytes
 Client/src/assets/Images/Icon-chevron-up.png  | Bin 171 -> 0 bytes
 Client/src/assets/Images/Icon-link-gray.png   | Bin 633 -> 0 bytes
 .../assets/Images/Icon-maintenance-gray.png   | Bin 744 -> 0 bytes
 .../src/assets/Images/Icon-monitor-gray.png   | Bin 897 -> 0 bytes
 .../assets/Images/Icon-open-in-tab-gray.png   | Bin 375 -> 0 bytes
 Client/src/assets/Images/Icon-search-gray.png | Bin 495 -> 0 bytes
 .../Images/Icon-setting-actions-gray.png      | Bin 761 -> 0 bytes
 .../src/assets/Images/Icon-setting-gray.png   | Bin 863 -> 0 bytes
 Client/src/assets/Images/Icon-signal-gray.png | Bin 718 -> 0 bytes
 .../src/assets/Images/Icon-support-gray.png   | Bin 878 -> 0 bytes
 .../src/assets/Images/Icon-warning-gray.png   | Bin 462 -> 0 bytes
 .../Images/maintenance_window_frame.svg       |   9 -
 Client/src/assets/icons/icon-red-error-0.svg  |   3 -
 Client/src/assets/icons/incidents.svg         |   3 +
 Client/src/assets/icons/integrations.svg      |   3 +
 Client/src/assets/icons/maintenance.svg       |   3 +
 .../monitors.svg}                             |   0
 Client/src/assets/icons/page-speed.svg        |   3 +
 Client/src/assets/icons/settings.svg          |   6 +-
 Client/src/assets/icons/status-pages.svg      |   3 +
 Client/src/assets/icons/support.svg           |   3 +
 Client/src/assets/react.svg                   |   1 -
 Client/src/index.css                          |   3 +-
 54 files changed, 441 insertions(+), 773 deletions(-)
 delete mode 100644 Client/src/Components/Dashboard/DashboardMenu/index.css
 delete mode 100644 Client/src/Components/Dashboard/DashboardMenu/index.jsx
 delete mode 100644 Client/src/Components/Dashboard/DashboardMenuButton/index.css
 delete mode 100644 Client/src/Components/Dashboard/DashboardMenuButton/index.jsx
 delete mode 100644 Client/src/Components/Dashboard/DashboardSidebar/index.css
 delete mode 100644 Client/src/Components/Dashboard/DashboardSidebar/index.jsx
 delete mode 100644 Client/src/Components/Integrations/index.css
 delete mode 100644 Client/src/Components/Integrations/index.jsx
 create mode 100644 Client/src/Components/Sidebar/index.css
 create mode 100644 Client/src/Components/Sidebar/index.jsx
 delete mode 100644 Client/src/Utils/PathMap.js
 delete mode 100644 Client/src/assets/Images/Icon-chevron-down.png
 delete mode 100644 Client/src/assets/Images/Icon-chevron-up.png
 delete mode 100644 Client/src/assets/Images/Icon-link-gray.png
 delete mode 100644 Client/src/assets/Images/Icon-maintenance-gray.png
 delete mode 100644 Client/src/assets/Images/Icon-monitor-gray.png
 delete mode 100644 Client/src/assets/Images/Icon-open-in-tab-gray.png
 delete mode 100644 Client/src/assets/Images/Icon-search-gray.png
 delete mode 100644 Client/src/assets/Images/Icon-setting-actions-gray.png
 delete mode 100644 Client/src/assets/Images/Icon-setting-gray.png
 delete mode 100644 Client/src/assets/Images/Icon-signal-gray.png
 delete mode 100644 Client/src/assets/Images/Icon-support-gray.png
 delete mode 100644 Client/src/assets/Images/Icon-warning-gray.png
 delete mode 100644 Client/src/assets/Images/maintenance_window_frame.svg
 delete mode 100644 Client/src/assets/icons/icon-red-error-0.svg
 create mode 100644 Client/src/assets/icons/incidents.svg
 create mode 100644 Client/src/assets/icons/integrations.svg
 create mode 100644 Client/src/assets/icons/maintenance.svg
 rename Client/src/assets/{Images/Icon-monitor-gray.svg => icons/monitors.svg} (100%)
 create mode 100644 Client/src/assets/icons/page-speed.svg
 create mode 100644 Client/src/assets/icons/status-pages.svg
 create mode 100644 Client/src/assets/icons/support.svg
 delete mode 100644 Client/src/assets/react.svg

diff --git a/Client/src/Components/Avatar/index.jsx b/Client/src/Components/Avatar/index.jsx
index 98cc01072..ebb669cf6 100644
--- a/Client/src/Components/Avatar/index.jsx
+++ b/Client/src/Components/Avatar/index.jsx
@@ -35,7 +35,7 @@ const Avatar = ({ src, small, sx }) => {
         src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"
       }
       sx={{
-        fontSize: small ? "12px" : "20px",
+        fontSize: small ? "13px" : "20px",
         display: "inline-flex",
         "&::before": {
           content: `""`,
diff --git a/Client/src/Components/Charts/Servers/serverStatus.css b/Client/src/Components/Charts/Servers/serverStatus.css
index b3cad9429..dd15e3e9b 100644
--- a/Client/src/Components/Charts/Servers/serverStatus.css
+++ b/Client/src/Components/Charts/Servers/serverStatus.css
@@ -1,5 +1,5 @@
 :root {
-  --spacing-general-0: 10px 25px;
+  --spacing-general-0: 12px 18px;
   --spacing-general-1: 20px;
   --color-border-0: #eaecf0;
   --border-radius-0: 4px;
@@ -12,17 +12,19 @@
 }
 
 .server-status-tile {
-  min-width: 250px;
+  min-width: 100px;
   width: calc(100% - 310px);
   padding: var(--spacing-general-0);
   border: 1px solid var(--color-border-0);
   border-radius: var(--border-radius-0);
+  background-color: var(--env-var-color-8);
 }
 
 .server-status-tile-title {
   font-size: var(--font-size-0);
   font-weight: bold;
   margin-bottom: calc(var(--spacing-general-1) / 2);
+  color: var(--env-var-color-1);
 }
 
 .server-status-tile-value {
diff --git a/Client/src/Components/Dashboard/DashboardMenu/index.css b/Client/src/Components/Dashboard/DashboardMenu/index.css
deleted file mode 100644
index 3c58afdb7..000000000
--- a/Client/src/Components/Dashboard/DashboardMenu/index.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.dashboard-menu-container {
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
-}
-
-.icon-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.text-container {
-  display: flex;
-  align-items: center;
-}
-
-.dashboard-menu-text {
-  margin-left: 8px;
-}
diff --git a/Client/src/Components/Dashboard/DashboardMenu/index.jsx b/Client/src/Components/Dashboard/DashboardMenu/index.jsx
deleted file mode 100644
index 68b4dec99..000000000
--- a/Client/src/Components/Dashboard/DashboardMenu/index.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import "./index.css";
-import DashboardMenuButton from "../DashboardMenuButton";
-
-import Monitors from "../../../assets/Images/Icon-monitor-gray.png";
-import Incidents from "../../../assets/Images/Icon-warning-gray.png";
-import SensorsIcon from "../../../assets/Images/Icon-signal-gray.png";
-import AllInclusiveIcon from "../../../assets/Images/Icon-link-gray.png";
-import MaintenanceIcon from "../../../assets/Images/Icon-maintenance-gray.png";
-import SettingsIcon from "../../../assets/Images/Icon-setting-gray.png";
-import React, { useState, useEffect } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
-import pathMap from "../../../Utils/PathMap";
-
-/**
- * @component
- * DashboardMenu component displays a menu with icons and corresponding text.
- * Each menu item consists of an icon and a text label.
- *
- * @returns {JSX.Element} The JSX element representing the DashboardMenu component.
- */
-
-function DashboardMenu() {
-  const [activeButton, setActiveButton] = useState(null);
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  useEffect(() => {
-    setActiveButton(location.pathname);
-  }, [location]);
-
-  const handleClick = (title, path) => {
-    setActiveButton(title);
-    navigate(path);
-  };
-
-  return (
-    <div className="dashboard-menu-container">
-      {DashboardMenuButton(
-        Monitors,
-        "Monitors",
-        "/monitors",
-        activeButton === "/monitors",
-        () => handleClick(pathMap["/monitors"], "/monitors")
-      )}
-      {DashboardMenuButton(
-        Incidents,
-        "Incidents",
-        "/incidents",
-        activeButton === "/incidents",
-        () => handleClick(pathMap["/incidents"], "/incidents")
-      )}
-      {DashboardMenuButton(
-        SensorsIcon,
-        "Status Pages",
-        "/status",
-        activeButton === "/status",
-        () => handleClick(pathMap["/status"], "/status")
-      )}
-      {DashboardMenuButton(
-        AllInclusiveIcon,
-        "Integrations",
-        "/integrations",
-        activeButton === "/integrations",
-        () => handleClick(pathMap["/integrations"], "/integrations")
-      )}
-      {DashboardMenuButton(
-        MaintenanceIcon,
-        "Maintenance",
-        "/maintenance",
-        activeButton === "/maintenance",
-        () => handleClick(pathMap["/maintenance"], "/maintenance")
-      )}
-      {DashboardMenuButton(
-        SettingsIcon,
-        "Settings",
-        "/settings",
-        activeButton === "/settings",
-        () => handleClick(pathMap["/settings"], "/settings")
-      )}
-    </div>
-  );
-}
-
-export default DashboardMenu;
diff --git a/Client/src/Components/Dashboard/DashboardMenuButton/index.css b/Client/src/Components/Dashboard/DashboardMenuButton/index.css
deleted file mode 100644
index 0966effc3..000000000
--- a/Client/src/Components/Dashboard/DashboardMenuButton/index.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.icon-container {
-  padding: 8px 15px;
-}
-
-.icon-container:hover {
-  background-color: var(--env-var-color-13);
-  border-radius: var(--env-var-radius-1);
-  cursor: pointer;
-}
-
-.icon-container.active {
-  background-color: var(--env-var-color-13);
-  border-radius: var(--env-var-radius-1);
-}
-
-.icon {
-  width: var(--env-var-img-width-1);
-}
-
-.dashboard-menu-text {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-12);
-}
diff --git a/Client/src/Components/Dashboard/DashboardMenuButton/index.jsx b/Client/src/Components/Dashboard/DashboardMenuButton/index.jsx
deleted file mode 100644
index 34a463ff9..000000000
--- a/Client/src/Components/Dashboard/DashboardMenuButton/index.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import "./index.css";
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-
-/**
- * Renders a menu button with an icon and title.
- *
- * @component
- * @param {React.ElementType} icon - The icon component to be rendered.
- * @param {string} title - The title of the menu button.
- * @returns {React.ReactElement} The rendered menu button component.
- */
-
-const DashboardMenuButton = (icon, title, to, isActive, onClick) => {
-  const handleClick = () => {
-    onClick();
-  };
-
-  return (
-    <div
-      className={`icon-container ${isActive ? "active" : ""}`}
-      onClick={handleClick}
-    >
-      <img className="icon" src={icon} alt="Monitors" />
-      <div className="text-container">
-        <span className="dashboard-menu-text">{title}</span>
-      </div>
-    </div>
-  );
-};
-
-export default DashboardMenuButton;
diff --git a/Client/src/Components/Dashboard/DashboardSidebar/index.css b/Client/src/Components/Dashboard/DashboardSidebar/index.css
deleted file mode 100644
index 38b327535..000000000
--- a/Client/src/Components/Dashboard/DashboardSidebar/index.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.dashboard-sidebar {
-  height: calc(100vh - var(--env-var-nav-bar-height));
-  width: 250px;
-  border: 1px solid var(--color-border-0);
-  border-top: none;
-  border-bottom: none;
-  top: 64px;
-  position: sticky;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.support-container {
-  display: flex;
-  align-items: center;
-  padding: 28px 35px;
-  margin-bottom: 30px;
-}
-
-.support-text {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-12);
-}
-
-.support-icon {
-  width: var(--env-var-img-width-1);
-  margin-right: 8px;
-}
diff --git a/Client/src/Components/Dashboard/DashboardSidebar/index.jsx b/Client/src/Components/Dashboard/DashboardSidebar/index.jsx
deleted file mode 100644
index 815fe861d..000000000
--- a/Client/src/Components/Dashboard/DashboardSidebar/index.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import DashboardMenu from "../DashboardMenu";
-import SvgIcon from "@mui/material/SvgIcon";
-import "./index.css";
-import SupportIcon from "../../../assets/Images/Icon-support-gray.png";
-
-/**
- * @component
- * DashboardSidebar component serves as a sidebar containing the DashboardMenu and a Support icon at the bottom.
- *
- * @returns {JSX.Element} The JSX element representing the DashboardSidebar component.
- */
-
-function DashboardSidebar() {
-  return (
-    <div className="dashboard-sidebar">
-      <div className="menu-container">
-        <DashboardMenu />
-      </div>
-      <div className="support-container">
-        <img className="support-icon" src={SupportIcon} alt="SupportIcon" />
-        <span className="support-text">Support</span>
-      </div>
-    </div>
-  );
-}
-
-export default DashboardSidebar;
diff --git a/Client/src/Components/Integrations/index.css b/Client/src/Components/Integrations/index.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Client/src/Components/Integrations/index.jsx b/Client/src/Components/Integrations/index.jsx
deleted file mode 100644
index 4709adef6..000000000
--- a/Client/src/Components/Integrations/index.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Box, Typography, useTheme } from '@mui/material';
-import Button from '../Button';
-import PropTypes from 'prop-types';
-
-/**
- * Integrations component
- * @param {Object} props - Props for the IntegrationsComponent.
- * @param {string} props.url - The URL for the integration image.
- * @param {string} props.header - The header for the integration.
- * @param {string} props.info - Information about the integration.
- * @param {Function} props.onClick - The onClick handler for the integration button.
- * @returns {JSX.Element} The JSX representation of the IntegrationsComponent.
- */
-const IntegrationsComponent = ({ url, header, info, onClick }) => {
-  const theme = useTheme();
-
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      p={theme.spacing(2)}
-      border={1}
-      borderColor={theme.palette.divider}
-      borderRadius={theme.shape.borderRadius}
-    >
-      <Box
-        component="img"
-        src={url}
-        alt="Integration"
-        width={100}
-        height={100}
-      />
-      
-      <Box
-        flex={1}
-        mx={theme.spacing(2)}
-        display="flex"
-        flexDirection="column"
-        alignItems="flex-start"
-      >
-        <Typography variant="h6" component="div" style={{ fontSize: '16px' }}>
-          {header}
-        </Typography>
-        <Typography
-          variant="body1"
-          component="div"
-          sx={{
-            maxWidth: '300px',
-            wordWrap: 'break-word',
-            textAlign: 'left'
-          }}
-          style={{ fontSize: '13px' }}
-        >
-          {info}
-        </Typography>
-      </Box>
-      
-      <Button label="Click Me" level="primary" onClick={onClick} />
-    </Box>
-  );
-};
-
-// PropTypes for IntegrationsComponent
-IntegrationsComponent.propTypes = {
-  url: PropTypes.string.isRequired,
-  header: PropTypes.string.isRequired,
-  info: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired
-};
-
-export default IntegrationsComponent;
diff --git a/Client/src/Components/NavBar/index.css b/Client/src/Components/NavBar/index.css
index 8e9f0a8dd..fcedc53a2 100644
--- a/Client/src/Components/NavBar/index.css
+++ b/Client/src/Components/NavBar/index.css
@@ -1,18 +1,11 @@
 /* NavBar Component Styles*/
-.css-14ds6td-MuiPaper-root-MuiAppBar-root {
-  height: var(--env-var-nav-bar-height);
-}
-
-.icon-button-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.MuiToolbar-root {
+  min-height: var(--env-var-nav-bar-height) !important;
 }
 
 .icon-button-toggle-title {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-5);
-  margin-right: var(--env-var-spacing-2);
 }
 
 .icon-button-toggle-pic {
@@ -21,7 +14,6 @@
 }
 
 #icon-button {
-  color: transparent;
   -webkit-transition: none;
   transition: none;
   outline: none;
diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx
index 261c872ca..c46254746 100644
--- a/Client/src/Components/NavBar/index.jsx
+++ b/Client/src/Components/NavBar/index.jsx
@@ -1,17 +1,16 @@
 import "./index.css";
-import { useState } from "react";
+import { cloneElement, useState } from "react";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import Menu from "@mui/material/Menu";
-import MenuIcon from "@mui/icons-material/Menu";
-import Container from "@mui/material/Container";
+import Avatar from "../Avatar";
 import Tooltip from "@mui/material/Tooltip";
 import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material/styles";
-import ChevronDown from "../../assets/Images/Icon-chevron-down.png";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { clearAuthState } from "../../Features/Auth/authSlice";
 import { clearMonitorState } from "../../Features/Monitors/monitorsSlice";
 
@@ -21,9 +20,7 @@ import LockSvg from "../../assets/icons/lock.svg?react";
 import UserSvg from "../../assets/icons/user.svg?react";
 import TeamSvg from "../../assets/icons/user-two.svg?react";
 import LogoutSvg from "../../assets/icons/logout.svg?react";
-
-import BWULogo from "../../assets/Images/bwl-logo.svg?react";
-import Avatar from "../Avatar";
+import { Stack, useScrollTrigger } from "@mui/material";
 
 const icons = {
   Profile: <UserSvg />,
@@ -32,6 +29,33 @@ const icons = {
   Logout: <LogoutSvg />,
 };
 
+function AddBorderOnScroll(props) {
+  const { children, window } = props;
+  const trigger = useScrollTrigger({
+    target: window ? window() : undefined,
+    disableHysteresis: true,
+    threshold: 0,
+  });
+  
+  return (
+    <AppBar
+      className={trigger ? "scrolled" : ""}
+      position="sticky"
+      sx={{
+        boxShadow: "none",
+        transition: "all 0.3s ease",
+        borderBottom: "1px solid transparent",
+        "&.scrolled": {
+          borderBottom: "1px solid #eaecf0",
+          backgroundColor: "white"
+        },
+      }}
+    >
+      {children}
+    </AppBar>
+  );
+}
+
 /**
  * NavBar component
  *
@@ -100,110 +124,62 @@ function NavBar() {
   };
 
   return (
-    <AppBar
-      position="sticky"
-      sx={{
-        width: "100%",
-        backgroundColor: "transparent",
-        boxShadow: "none",
-        borderBottom: "1px solid var(--color-border-0)",
-      }}
-    >
-      <Container maxWidth="xxl" sx={{ width: "100%" }}>
-        <Toolbar disableGutters>
-          <BWULogo id="bw-uptime-logo-dashboard" alt="BlueWave Uptime Logo" />
-
-          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
-            <IconButton
-              size="large"
-              aria-label="account of current user"
-              aria-controls="menu-appbar"
-              aria-haspopup="true"
-              color="inherit"
-            >
-              <MenuIcon />
-            </IconButton>
-          </Box>
-
-          <Typography
-            variant="h5"
-            noWrap
-            component="a"
-            href="#"
-            sx={{
-              mr: 2,
-              display: { xs: "flex", md: "none" },
-              flexGrow: 1,
-              fontFamily: "monospace",
-              fontWeight: theme.typography.fontWeightBold,
-              letterSpacing: theme.spacing(0.3),
-              color: "inherit",
-              textDecoration: "none",
-            }}
+    <AddBorderOnScroll>
+      <Toolbar disableGutters sx={{ alignSelf: "flex-end", paddingX: "25px" }}>
+        <Tooltip title="Open settings">
+          <IconButton
+            id="icon-button"
+            onClick={handleOpenUserMenu}
+            sx={{ p: 0 }}
           >
-            UPTIME GENIE
-          </Typography>
-
-          <Box sx={{ flexGrow: 1 }} />
-
-          <Box sx={{ flexGrow: 0 }}>
-            <Tooltip title="Open settings">
-              <IconButton
-                id="icon-button"
-                onClick={handleOpenUserMenu}
-                sx={{ p: 0 }}
+            <Stack direction="row" alignItems="center" gap="8px">
+              <Avatar small={true} />
+              <Box
+                className="icon-button-toggle-title"
+                sx={{ mr: "3px", lineHeight: 2 }}
               >
-                <div className="icon-button-toggle">
-                  <Avatar small={true} sx={{ mr: "8px" }} />
-                  <div className="icon-button-toggle-title">
-                    {authState.user?.firstName} {authState.user?.lastName}
-                  </div>
-                  <img
-                    className="icon-button-toggle-pic"
-                    src={ChevronDown}
-                    alt="ChevronDown"
-                  />
-                </div>
-              </IconButton>
-            </Tooltip>
-            <Menu
-              sx={{ mt: theme.spacing(5.5) }}
-              id="menu-appbar"
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
+                {authState.user?.firstName} {authState.user?.lastName}
+              </Box>
+              <KeyboardArrowDownIcon sx={{ mt: "2px" }} />
+            </Stack>
+          </IconButton>
+        </Tooltip>
+        <Menu
+          sx={{ mt: theme.spacing(5.5) }}
+          id="menu-appbar"
+          anchorEl={anchorElUser}
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "right",
+          }}
+          keepMounted
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "right",
+          }}
+          open={Boolean(anchorElUser)}
+          onClose={handleCloseUserMenu}
+        >
+          {settings.map((setting) => (
+            <MenuItem
+              id="menu-item"
+              key={setting}
+              onClick={() => handleCloseUserMenu(setting)}
+              sx={{ width: "150px" }}
             >
-              {settings.map((setting) => (
-                <MenuItem
-                  id="menu-item"
-                  key={setting}
-                  onClick={() => handleCloseUserMenu(setting)}
-                  sx={{ width: "150px" }}
-                >
-                  {icons[setting]}
-                  <Typography
-                    fontSize="var(--env-var-font-size-medium)"
-                    textAlign="center"
-                    marginLeft="8px"
-                  >
-                    {setting}
-                  </Typography>
-                </MenuItem>
-              ))}
-            </Menu>
-          </Box>
-        </Toolbar>
-      </Container>
-    </AppBar>
+              {icons[setting]}
+              <Typography
+                fontSize="var(--env-var-font-size-medium)"
+                textAlign="center"
+                marginLeft="8px"
+              >
+                {setting}
+              </Typography>
+            </MenuItem>
+          ))}
+        </Menu>
+      </Toolbar>
+    </AddBorderOnScroll>
   );
 }
 
diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
new file mode 100644
index 000000000..6fa9d2134
--- /dev/null
+++ b/Client/src/Components/Sidebar/index.css
@@ -0,0 +1,35 @@
+aside .MuiStack-root {
+  cursor: pointer;
+}
+aside > svg {
+  margin: var(--env-var-spacing-2) var(--env-var-spacing-1);
+}
+aside .selected-path,
+aside .MuiStack-root:hover {
+  background-color: var(--env-var-color-13);
+}
+aside .MuiStack-root svg {
+  width: 20px;
+  height: 20px;
+  opacity: 0.8;
+}
+aside span.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
+  line-height: 1;
+}
+aside .MuiStack-root:nth-last-child(2) {
+  margin-top: auto;
+  position: relative;
+}
+aside .MuiStack-root:nth-last-child(2):before {
+  content: "";
+  position: absolute;
+  top: -10px;
+  left: 0;
+  width: 100%;
+  border-top: solid 1px var(--env-var-color-6);
+}
+aside .MuiStack-root:last-child {
+  margin-bottom: 10px;
+}
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
new file mode 100644
index 000000000..41dd734f0
--- /dev/null
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -0,0 +1,64 @@
+import { Stack, Typography } from "@mui/material";
+import { useLocation, useNavigate } from "react-router";
+import { useTheme } from "@emotion/react";
+
+import BWULogo from "../../assets/Images/bwl-logo.svg?react";
+import Support from "../../assets/icons/support.svg?react";
+import StatusPages from "../../assets/icons/status-pages.svg?react";
+import Maintenance from "../../assets/icons/maintenance.svg?react";
+import Monitors from "../../assets/icons/monitors.svg?react";
+import Incidents from "../../assets/icons/incidents.svg?react";
+import Integrations from "../../assets/icons/integrations.svg?react";
+import PageSpeed from "../../assets/icons/page-speed.svg?react";
+import Settings from "../../assets/icons/settings.svg?react";
+
+import "./index.css";
+
+/**
+ * @component
+ * Sidebar component serves as a sidebar containing a menu.
+ *
+ * @returns {JSX.Element} The JSX element representing the Sidebar component.
+ */
+
+const menu = [
+  { name: "Monitors", path: "monitors", icon: <Monitors /> },
+  { name: "Incidents", path: "incidents", icon: <Incidents /> },
+  { name: "Status pages", path: "status", icon: <StatusPages /> },
+  { name: "Integrations", path: "integrations", icon: <Integrations /> },
+  { name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
+  { name: "Page speed", path: "page-speed", icon: <PageSpeed /> },
+  { name: "Support", path: "support", icon: <Support /> },
+  { name: "Settings", path: "settings", icon: <Settings /> },
+];
+
+function Sidebar() {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (
+    <Stack component="aside" gap={theme.gap.xs}>
+      <BWULogo alt="BlueWave Uptime Logo" />
+      {menu.map((item) => (
+        <Stack
+          className={
+            location.pathname.includes(item.path) ? "selected-path" : ""
+          }
+          key={item.path}
+          direction="row"
+          alignItems="center"
+          gap={theme.gap.small}
+          borderRadius={`${theme.shape.borderRadius}px`}
+          onClick={() => navigate(`/${item.path}`)}
+          sx={{ p: `${theme.gap.small} ${theme.gap.medium}` }}
+        >
+          {item.icon}
+          <Typography component="span">{item.name}</Typography>
+        </Stack>
+      ))}
+    </Stack>
+  );
+}
+
+export default Sidebar;
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index 607e0b34d..d30ed9462 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -1,13 +1,58 @@
-.main-content {
+.home-layout * {
+  box-sizing: border-box;
+}
+.home-layout {
+  display: grid;
   position: relative;
-  display: flex;
-  width: 100%;
-  height: max-content;
-  justify-content: flex-start;
+  grid-template-areas:
+    "aside header"
+    "aside main";
+  grid-template-columns: var(--env-var-side-bar-width) auto;
+  grid-template-rows: var(--env-var-nav-bar-height) auto;
+  background-color: var(--env-var-color-30);
+  height: 100vh;
 }
 
-.main-content > div:nth-child(2) {
-  position: relative;
-  /* overflow-y: auto; */
-  flex: 1;
+.home-layout aside {
+  grid-area: aside;
+  position: fixed;
+  top: 0;
+  height: 100%;
+  width: var(--env-var-side-bar-width);
+  background-color: var(--env-var-color-8);
+  border-right: 1px solid var(--color-border-0);
+  padding: var(--env-var-spacing-1) var(--env-var-spacing-1-plus);
+}
+.home-layout header {
+  grid-area: header;
+  background-color: var(--env-var-color-30);
+}
+.home-layout > div {
+  height: 100%;
+  grid-area: main;
+  padding: var(--env-var-spacing-2) calc(var(--env-var-spacing-4) * 2);
+  padding-bottom: var(--env-var-spacing-4);
+  max-width: 100%;
+}
+.home-layout > div:not(:has([class*="fallback"])) {
+  max-width: 1500px;
+}
+
+@media (max-width: 600px) {
+  .home-layout {
+    grid-template-areas:
+      "header header"
+      "main main";
+    grid-template-columns: 1fr;
+    grid-template-rows: 64px auto;
+  }
+
+  aside {
+    display: none;
+    visibility: hidden;
+  }
+
+  .home-layout > div {
+    padding: var(--env-var-spacing-1);
+  }
 }
diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx
index 79b291c0b..007fb7d05 100644
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/Client/src/Layouts/HomeLayout/index.jsx
@@ -1,17 +1,17 @@
 import NavBar from "../../Components/NavBar";
+import Sidebar from "../../Components/Sidebar";
 import { Outlet } from "react-router";
-import DashboardSidebar from "../../Components/Dashboard/DashboardSidebar";
+import { Box } from "@mui/material";
+
 import "./index.css";
 
 const HomeLayout = () => {
   return (
-    <div className="home-layout">
+    <Box className="home-layout">
+      <Sidebar />
       <NavBar />
-      <div className="main-content">
-        <DashboardSidebar />
-        <Outlet />
-      </div>
-    </div>
+      <Outlet />
+    </Box>
   );
 };
 
diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx
index ad5acf53a..05a5d1761 100644
--- a/Client/src/Pages/Account/index.jsx
+++ b/Client/src/Pages/Account/index.jsx
@@ -29,14 +29,7 @@ const Account = ({ open = "profile" }) => {
   if (!user.role.includes("admin")) tabList = ["Profile", "Password"];
 
   return (
-    <Box
-      //TODO - breakpoints for responsive design
-      minWidth={theme.spacing(55)}
-      maxWidth="1200px"
-      py={theme.content.pY}
-      px={theme.content.pX}
-      className="account"
-    >
+    <Box className="account">
       <TabContext value={tab}>
         <Box
           sx={{
@@ -74,7 +67,7 @@ const Account = ({ open = "profile" }) => {
         </Box>
         <ProfilePanel />
         <PasswordPanel />
-       { user.role.includes("admin") && <TeamPanel />}
+        {user.role.includes("admin") && <TeamPanel />}
       </TabContext>
     </Box>
   );
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 3c760564e..b2765d628 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -104,13 +104,7 @@ const Incidents = () => {
   data.rows = incidents;
 
   return (
-    <Stack
-      className="incidents"
-      gap={theme.gap.large}
-      style={{
-        padding: `${theme.content.pY} ${theme.content.pX}`,
-      }}
-    >
+    <Stack className="incidents" gap={theme.gap.large}>
       <Stack direction="row" alignItems="center" gap={theme.gap.medium}>
         <Typography component="h1">Incident history for: </Typography>
         <Select
diff --git a/Client/src/Pages/Integrations/index.css b/Client/src/Pages/Integrations/index.css
index e69de29bb..ea444bc4a 100644
--- a/Client/src/Pages/Integrations/index.css
+++ b/Client/src/Pages/Integrations/index.css
@@ -0,0 +1,14 @@
+.integrations h1.MuiTypography-root,
+.integrations p.MuiTypography-root {
+  color: var(--env-var-color-5);
+}
+.integrations h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-large);
+  font-weight: 600;
+}
+.integrations p.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+}
+.integrations button {
+  height: var(--env-var-height-2);
+}
diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx
index 5cde4f4db..3ccf96585 100644
--- a/Client/src/Pages/Integrations/index.jsx
+++ b/Client/src/Pages/Integrations/index.jsx
@@ -1,60 +1,108 @@
-import { Box, Typography, useTheme } from '@mui/material';
-import IntegrationsComponent from '../../Components/Integrations';
+import PropTypes from "prop-types";
+import { Stack, Box, Typography, Grid } from "@mui/material";
+import Button from "../../Components/Button";
+import { useTheme } from "@emotion/react";
 
+import "./index.css";
+
+/**
+ * Integrations component
+ * @param {Object} props - Props for the IntegrationsComponent.
+ * @param {string} props.url - The URL for the integration image.
+ * @param {string} props.header - The header for the integration.
+ * @param {string} props.info - Information about the integration.
+ * @param {Function} props.onClick - The onClick handler for the integration button.
+ * @returns {JSX.Element} The JSX representation of the IntegrationsComponent.
+ */
+const IntegrationsComponent = ({ url, header, info, onClick }) => {
+  const theme = useTheme();
+
+  return (
+    <Grid item lg={6} flexGrow={1}>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        gap={theme.gap.large}
+        p={theme.gap.large}
+        border={1}
+        borderColor={theme.palette.divider}
+        borderRadius={`${theme.shape.borderRadius}px`}
+        sx={{ backgroundColor: theme.palette.otherColors.white }}
+      >
+        <Box
+          component="img"
+          src={url}
+          alt="Integration"
+          width={80}
+          height={80}
+        />
+        <Stack gap={theme.gap.xs} flex={1}>
+          <Typography component="h1">{header}</Typography>
+          <Typography
+            sx={{
+              maxWidth: "300px",
+              wordWrap: "break-word",
+            }}
+          >
+            {info}
+          </Typography>
+        </Stack>
+        <Button
+          label="Add"
+          level="primary"
+          onClick={onClick}
+          sx={{ alignSelf: "center" }}
+        />
+      </Stack>
+    </Grid>
+  );
+};
+
+// PropTypes for IntegrationsComponent
+IntegrationsComponent.propTypes = {
+  url: PropTypes.string.isRequired,
+  header: PropTypes.string.isRequired,
+  info: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
 
 /**
  * Integrations Page Component
  * @returns {JSX.Element} The JSX representation of the Integrations page.
  */
+
 const Integrations = () => {
   const theme = useTheme();
 
-
   const integrations = [
-    { 
-      url: 'https://via.placeholder.com/100',
-      header: 'Integration 1',
-      info: 'Info about Integration 1',
-      onClick: () => {} 
+    {
+      url: "https://via.placeholder.com/80",
+      header: "Slack",
+      info: "Connect with Slack and see incidents in a channel",
+      onClick: () => {},
+    },
+    {
+      url: "https://via.placeholder.com/80",
+      header: "Discord",
+      info: "Connect with Discord and view incidents directly in a channel",
+      onClick: () => {},
+    },
+    {
+      url: "https://via.placeholder.com/80",
+      header: "Zapier",
+      info: "Send all incidents to Zapier, and then see them everywhere",
+      onClick: () => {},
     },
-    { 
-      url: 'https://via.placeholder.com/100',
-      header: 'Integration 2',
-      info: 'Info about Integration 2',
-      onClick: () => {} 
-    }, 
-    { 
-      url: 'https://via.placeholder.com/100',
-      header: 'Integration 2',
-      info: 'Info about Integration 2',
-      onClick: () => {} 
-    }
     // Add more integrations as needed
   ];
 
   return (
-    <Box 
-      display="flex"
-      flexDirection="column"
-      alignItems="flex-start"
-      justifyContent="flex-start"
-      height="100vh"
-      p={theme.spacing(4)}
-      mt={theme.spacing(8)} 
-    >
-      <Typography variant="h4" component="h1" gutterBottom style={{ fontSize: '16px' }}>
-        Integrations
-      </Typography>
-      <Typography variant="h6" component="h2" gutterBottom style={{ fontSize: '13px' }}>
-        Connect Uptime Genie to your favorite service
-      </Typography>
-      <Box 
-        display="flex" 
-        flexWrap="wrap" 
-        gap={theme.spacing(4)}
-      >
+    <Stack className="integrations" gap={theme.gap.xs}>
+      <Typography component="h1">Integrations</Typography>
+      <Typography>Connect Uptime Genie to your favorite service</Typography>
+      <Grid container spacing={theme.gap.large} mt={theme.gap.xs}>
         {integrations.map((integration, index) => (
-          <IntegrationsComponent 
+          <IntegrationsComponent
             key={index}
             url={integration.url}
             header={integration.header}
@@ -62,8 +110,8 @@ const Integrations = () => {
             onClick={integration.onClick}
           />
         ))}
-      </Box>
-    </Box>
+      </Grid>
+    </Stack>
   );
 };
 
diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx
index 3ca0c949d..92cd351ef 100644
--- a/Client/src/Pages/Maintenance/index.jsx
+++ b/Client/src/Pages/Maintenance/index.jsx
@@ -6,12 +6,7 @@ const Maintenance = () => {
   const theme = useTheme();
 
   return (
-    <div
-      className="maintenance"
-      style={{
-        padding: `${theme.content.pY} ${theme.content.pX}`,
-      }}
-    >
+    <div className="maintenance">
       <Fallback
         title="maintenance window"
         checks={[
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 0716ad283..e18267126 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -128,14 +128,7 @@ const Configure = () => {
   ];
 
   return (
-    <div
-      className="configure-monitor"
-      style={{
-        maxWidth: "1200px",
-        padding: `${theme.content.pY} ${theme.content.pX}`,
-        backgroundColor: "var(--env-var-color-30)",
-      }}
-    >
+    <Box className="configure-monitor">
       <Button
         level="tertiary"
         label="Back"
@@ -304,7 +297,7 @@ const Configure = () => {
           <Button level="primary" label="Save" sx={{ px: theme.gap.ml }} />
         </Stack>
       </form>
-    </div>
+    </Box>
   );
 };
 
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index ff151bb35..53d80ab0f 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -135,14 +135,7 @@ const CreateMonitor = () => {
   ];
 
   return (
-    <div
-      className="create-monitor"
-      style={{
-        maxWidth: "1200px",
-        padding: `${theme.content.pY} ${theme.content.pX}`,
-        backgroundColor: "var(--env-var-color-30)",
-      }}
-    >
+    <Box className="create-monitor">
       <Button
         level="tertiary"
         label="Back"
@@ -402,7 +395,7 @@ const CreateMonitor = () => {
           />
         </Stack>
       </form>
-    </div>
+    </Box>
   );
 };
 
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 6616e7ee0..2cce554e8 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -199,13 +199,7 @@ const DetailsPage = () => {
   };
 
   return (
-    <div
-      className="monitor-details"
-      style={{
-        padding: `${theme.content.pY} ${theme.content.pX}`,
-        backgroundColor: "var(--env-var-color-30)",
-      }}
-    >
+    <Box className="monitor-details">
       <Button
         level="tertiary"
         label="Back to Monitors"
@@ -311,7 +305,7 @@ const DetailsPage = () => {
           <BasicTable data={data} paginated={true} reversed={true} />
         </Box>
       </Stack>
-    </div>
+    </Box>
   );
 };
 
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index fac513a88..28f4e1fc4 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -1,207 +1,33 @@
-.monitors,
-.new-monitor {
-  width: 70vw;
-}
-
-.monitors {
-  font-family: var(--env-var-font-familt-1);
-  background-color: var(--env-var-color-30);
-}
-
-.monitors-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.monitors-bar-title {
+.monitors h1.MuiTypography-root,
+.monitors h2.MuiTypography-root {
   color: var(--env-var-color-1);
-  font-size: 24px;
-  font-weight: 700;
-}
-
-.monitors-stats {
-  margin-top: var(--env-var-spacing-2);
-  display: flex;
-  gap: 24px;
-  height: 100px;
-}
-
-.monitors-gaps-medium {
-  height: var(--env-var-spacing-2);
-}
-
-.monitors-gaps-small-plus {
-  height: var(--env-var-spacing-1-plus);
-}
-
-.monitors-gaps-small {
-  height: 6px;
-}
-
-.new-monitor-header {
-  color: var(--env-var-color-1);
-  font-size: var(--env-var-font-size-large-plus);
   font-weight: 600;
 }
-
-.service-check-list-title {
-  color: var(--env-var-color-5);
+.monitors h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-large-plus);
+}
+.monitors h2.MuiTypography-root {
+  font-size: var(--env-var-font-size-large);
+}
+.monitors .MuiStack-root > button {
   font-size: var(--env-var-font-size-medium);
-}
-
-.service-check-list-desc {
-  color: var(--env-var-color-25);
-  font-size: var(--env-var-font-size-small);
-}
-
-.host-status-box-text {
-  font-size: var(--env-var-font-size-medium);
-}
-
-.monitors-dropdown-holder {
-  padding-left: 30px;
-}
-
-#ports-list {
-  width: 172.92px;
-  height: 12px;
-  font-size: var(--env-var-font-size-small);
-  align-items: center;
-}
-
-.incident-notif-config-title,
-.adv-setting-title {
-  color: var(--env-var-color-5);
-  font-size: var(--env-var-font-size-medium);
-}
-
-.adv-setting-title {
-  font-weight: 500;
-}
-
-.config-box-inputs,
-.service-check-list,
-.incident-notif-config,
-.advanced-setting-config,
-.proxy-setting-config {
-  min-width: 350px;
-  padding-right: 40px;
-}
-
-.monitors-create-button-holder {
-  display: flex;
-  justify-content: end;
-}
-
-#create-new-monitor-btn {
-  padding-top: 6px;
-}
-
-#ports-dropdown,
-#freq-dropdown {
-  width: 226.8px;
-  height: 20px;
-}
-
-/* TODO */
-.current-monitors {
-  margin-top: var(--env-var-spacing-2);
-  border: 1px solid #eaecf0;
-  padding: 40px;
-  border-radius: 4px;
-}
-
-.current-monitors-title-holder {
-  display: flex;
-  align-items: center;
-}
-
-.current-monitors-bar {
-  display: flex;
-  justify-content: space-between;
-}
-
-.current-monitors-title {
-  font-size: 1rem;
-  font-weight: bold;
-  margin-right: var(--env-var-spacing-1);
-  color: var(--env-var-color-1);
+  height: var(--env-var-height-2);
+  min-width: fit-content;
 }
 
 .current-monitors-counter {
-  display: inline-flex;
+  display: flex;
   justify-content: center;
   align-items: center;
-  padding: 2px;
-  min-width: 22px;
-  min-height: 22px;
+  padding: 5px;
+  min-width: 25px;
+  min-height: 25px;
   background-color: var(--env-var-color-15);
   border: 1px solid var(--env-var-color-6);
   border-radius: 50%;
   font-size: var(--env-var-font-size-medium);
   font-weight: 500;
   color: var(--env-var-color-5);
-}
-
-.monitors-v-gaping {
-  height: var(--env-var-spacing-3);
-}
-
-.current-monitors-table {
-  width: 100%;
-  text-align: left;
-}
-
-.current-monitors-table {
-  width: 100%;
-  text-align: left;
-  border-collapse: collapse;
-  border: 1px solid var(--env-var-color-16);
-  border-radius: var(--env-var-radius-1);
-}
-
-.current-monitors-table th,
-.current-monitors-table td {
-  border: 1px solid var(--env-var-color-16);
-  border-left: none;
-  border-right: none;
-  padding: 8px;
-}
-
-.theader-row {
-  background-color: var(--env-var-color-13);
-  color: var(--env-var-color-2);
-  font-weight: 500;
-}
-
-.theader-row td {
-  padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
-  font-size: var(--env-var-font-size-medium);
-}
-
-.host-list-item-precentage {
-  font-size: var(--env-var-font-size-medium);
-}
-
-.tbody-row td {
-  padding: var(--env-var-spacing-2) var(--env-var-img-width-2);
-}
-
-.host-status-box {
-  display: flex;
-  width: fit-content;
-  border: 1px solid var(--env-var-color-4);
-  border-radius: var(--env-var-radius-2);
-  align-items: center;
-  padding: calc(var(--env-var-spacing-1) / 2);
-}
-
-.host-actions {
-  margin: auto;
-  cursor: pointer;
-}
-
-.tbody-row-cell.actions-cell {
-  padding-left: 30px;
+  margin-left: 10px;
+  line-height: 0.8;
 }
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 9a24e94af..5e193fe62 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -11,6 +11,7 @@ import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react";
 import BasicTable from "../../Components/BasicTable";
 import { StatusLabel } from "../../Components/Label";
 import ResponseTimeChart from "../../Components/Charts/ResponseTimeChart";
+import { Box, Stack, Typography } from "@mui/material";
 
 /**
  * Host component.
@@ -124,49 +125,47 @@ const Monitors = () => {
   });
 
   return (
-    <div
-      className="monitors"
-      style={{
-        padding: `${theme.content.pY} ${theme.content.pX}`,
-        backgroundColor: "var(--env-var-color-30)",
-      }}
-    >
-      <div className="monitors-bar">
-        <div className="monitors-bar-title">
+    <Stack className="monitors" gap={theme.gap.large}>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Typography component="h1">
           Hello, {authState.user.firstName}
-        </div>
+        </Typography>
         <Button
           level="primary"
           label="Create new monitor"
           onClick={() => {
             navigate("/monitors/create");
           }}
-          sx={{ padding: "6px 25px", fontSize: "13px" }}
         />
-      </div>
-
-      <div className="monitors-stats">
+      </Stack>
+      <Stack
+        gap={theme.gap.large}
+        direction="row"
+        justifyContent="space-between"
+      >
         <ServerStatus title="Up" value={up} state="up" />
         <ServerStatus title="Down" value={down} state="down" />
         <ServerStatus title="Paused" value={0} state="pause" />
-      </div>
-
-      <div className="current-monitors">
-        <div className="current-monitors-bar">
-          <div className="current-monitors-title-holder">
-            <div className="current-monitors-title">Current monitors</div>
-            <div className="current-monitors-counter">
-              {monitorState.monitors.length}
-            </div>
-          </div>
-          <div className="current-monitors-search-bar">
-            {/* TODO - add search bar */}
-          </div>
-        </div>
-        <div className="monitors-v-gaping" />
+      </Stack>
+      <Stack
+        gap={theme.gap.large}
+        p={theme.gap.xl}
+        sx={{
+          border: `solid 1px ${theme.palette.otherColors.graishWhite}`,
+          borderRadius: `${theme.shape.borderRadius}px`,
+          backgroundColor: theme.palette.otherColors.white,
+        }}
+      >
+        <Stack direction="row" alignItems="center">
+          <Typography component="h2">Current monitors</Typography>
+          <Box className="current-monitors-counter">
+            {monitorState.monitors.length}
+          </Box>
+          {/* TODO - add search bar */}
+        </Stack>
         <BasicTable data={data} paginated={true} />
-      </div>
-    </div>
+      </Stack>
+    </Stack>
   );
 };
 
diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx
index 1b2accbc0..8c8064882 100644
--- a/Client/src/Pages/NotFound/index.jsx
+++ b/Client/src/Pages/NotFound/index.jsx
@@ -3,6 +3,7 @@ import "./index.css";
 import React from "react";
 import PropTypes from "prop-types";
 import { Stack, Typography } from "@mui/material";
+import { useNavigate } from "react-router";
 
 /**
  * Support for defaultProps will be removed from function components in a future major release
@@ -30,6 +31,8 @@ const DefaultValue = {
  * @returns {JSX.Element} The rendered error page component.
  */
 const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
+  const navigate = useNavigate();
+
   return (
     <Stack className="not-found-page" justifyContent="center">
       <Stack gap="20px" alignItems="center">
@@ -39,6 +42,7 @@ const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
           label="Go to the main dashboard"
           level="primary"
           sx={{ mt: "24px" }}
+          onClick={() => navigate("/")}
         />
       </Stack>
     </Stack>
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 7b4a9f0f3..200830677 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -14,10 +14,7 @@ const Settings = () => {
     <Box
       className="settings"
       style={{
-        maxWidth: "1200px",
-        padding: `${theme.content.pY} ${theme.content.pX}`,
         paddingBottom: 0,
-        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <form className="settings-form" noValidate spellCheck="false">
diff --git a/Client/src/Pages/Status/index.jsx b/Client/src/Pages/Status/index.jsx
index 071948576..474375ede 100644
--- a/Client/src/Pages/Status/index.jsx
+++ b/Client/src/Pages/Status/index.jsx
@@ -5,12 +5,7 @@ const Status = () => {
   const theme = useTheme();
 
   return (
-    <div
-      className="status"
-      style={{
-        padding: `${theme.content.pY} ${theme.content.pX}`,
-      }}
-    >
+    <div className="status">
       <Fallback
         title="status page"
         checks={[
diff --git a/Client/src/Utils/PathMap.js b/Client/src/Utils/PathMap.js
deleted file mode 100644
index a14aafe63..000000000
--- a/Client/src/Utils/PathMap.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const pathMap = {
-  "/monitors": "Monitors",
-  "/incidents": "Incidents",
-  "/status": "Status Pages",
-  "/integrations": "Integrations",
-  "/maintenance": "maintenance",
-  "/settings": "Settings",
-};
-
-export default pathMap;
diff --git a/Client/src/assets/Images/Icon-chevron-down.png b/Client/src/assets/Images/Icon-chevron-down.png
deleted file mode 100644
index fa3822cc80ab13c12b60da1e5870d14860ff3638..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 170
zcmeAS@N?(olHy`uVBq!ia0vp^d_c^>!3HEx3Z6Ryq&N#aB8wRqxP?KOkzv*x37{Zj
zage(c!@6@aFM%AEbVpxD28NCO+<y{TfqZ*U7srqa#@_R%IT;K%m@o89`aAuVhOP+z
zqxK~M{Ik?K7}V_+$_M|Oo}Dl)C;NiK6z24gA`>zWzx&I3d&MJBTjs~=l5@mVy@5tC
Nc)I$ztaD0e0sua6FrNSb

diff --git a/Client/src/assets/Images/Icon-chevron-up.png b/Client/src/assets/Images/Icon-chevron-up.png
deleted file mode 100644
index e74961ac402c77ae21f483bf1b3250f3ae6c38ca..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 171
zcmeAS@N?(olHy`uVBq!ia0vp^d_c^>!3HEx3Z6Ryq&N#aB8wRqxP?KOkzv*x37{Zj
zage(c!@6@aFM%AEbVpxD28NCO+<y{TfqVx~7srqa#;Fqmxfl#MoUFUP@1Np+^IM>S
z+d|=%6>$>;_ZFNnITYfkoqN#y$nrMs#220(=bl{6JpOBO<NhT58PbLZ>XK@^Kez$S
OV(@hJb6Mw<&;$U%+cQxB

diff --git a/Client/src/assets/Images/Icon-link-gray.png b/Client/src/assets/Images/Icon-link-gray.png
deleted file mode 100644
index f31beb1dca20b20b38465d4bed82322a15414be6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 633
zcmV-<0*3vGP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0uD(;K~#7FtyD{L
z(?Ae?JviDTPJny^I05DaIf9)kW3tPzr0gnLMI4q)b`Vm9a)N{tkQ<O2SV!=N1!Fuz
zw<STMNVb*AbIGmw^i%irn<hK}hx%jW;06Rdm$4(<Jn{DXXOm>*9zsiu^lZu|E{0iQ
zqxA=X<lKy99SSY*M$b%6>Wzhcc4o$1c`Q`d11XcmLw&4UMJ%Me`N+Xf&&?!3Z8j&D
z9=^AP?d}{glfK$SDzNx{!27~I3i_?jcpEtCIbn6(>Wp`TUwEjn)3ki3KlD6kpPz^e
z6Ds%{!t(UCr0)ByW%z>0uWBQfLOG}(4m99l#H9Qq?GVg|x!h{8f?F%XVtH|oc&JZO
zslG@`s>^bE`Nd3Li==pNT1YCc`iZ_v)ufzNr%KAv_3Nsin)ex-WTcNlM2jjZn^?45
z`q4I0p6B#@Sl+0*NK4YMW_(c2cm6NdN2=hS^7lFY8E>{}Sv;-d@D~ChJ*twfBQ7dA
zmoq&xlXvw|$(fRna1n7Wmw;^~w#iR9tori8l{`fQ*fA-JXG9^4jNnsG)N2X`Z}sew
z<@FPf43XO+PwA0~rAf1m23(9y8>PUb7MZD~w-<bBivYp5O{8pMR?QW51m%v>oaqw}
z_}1B^DyeOKxRJOZ|0gN7S#EtK|7}U{5DNyZ={<7$%1eimrb5{tZYb%7j@E>~2nY>J
T@iL-}00000NkvXXu0mjf`WPNT

diff --git a/Client/src/assets/Images/Icon-maintenance-gray.png b/Client/src/assets/Images/Icon-maintenance-gray.png
deleted file mode 100644
index c2c203d762cb335da8ada629280951221090729b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 744
zcmV<E0vG*>P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0)0tDK~#7FrB%Cf
z(?Arxcm1ICCx|~Vq;ZFN^!Wsw83XRvlp&dsJ;YF2X&44)2DOwaDF||>f-wFA^a*ZY
zz;?8pyRtze%a$N_#@^M{>g?IwbI&sEh$nj3B&K`HP%|cSB*#QE!xU7^{Nk-Qh_-#p
zdC8uB**2tHL)2cSA|?|_#}GHrG?P9BXb#8T@w5;aEIlNj3s_9XU(({t_Xe}{n2vt!
z)F^H<u?u(ys~Mbo$NjCqUH!^eWFBL%H>brQ3z!#A^(nx)5B5HoAFT70zXOJSVG5T0
zv3GJb4JSV{lj^&z`>n6xWth%ig_o1P)&nqPz1MowxC%dgl)PFkU-rxu&~xu(kjJb-
zW*-yp=e>JpzhMt6)m@y=A7K2A&_vrn%fy_12{;Z}xfZjBgRrO1ai4Aw$$7*+R@Igr
zP}dyW<;~4<LN^Q?_?hj9_91>~mZts=v6qd6HAl+CP1$1z-W19zA;L~iyUy-02Kr}5
zQOPi5F3_MD>ffH};rpTq1UM2VR1lC9ibma*Lcp&h6Lj^d-XuT`;LTLbBz5j|wA&~G
z_r0S?s%t#~Gn@2#Q5c%0m{hf9XtKmpm1^P-rF1M4pgG9qudRO&E#Q3W4V(!Nfg<jd
zVZAHFlyDY-C`=`ZSeQC>y5-V;hIoxQol;f1@79FAgr6fZ5UKS$t%nSw3H||d1)6xx
zc=X~!LN*m^+syOVywKRX?^L(0n6*vboIUYZbR+Q(g;LL6K?3-L>R2+1cRS+WkmF%`
zOzzcWO@zz{*HC+vnu5_R`GB1S%oa^RtYrBcK9dW)4toW`q@Y&F$gC8Dl4Ugo>Ll;3
aTgPukNgD_r569mC0000<MNUMnLSTY3WmCxj

diff --git a/Client/src/assets/Images/Icon-monitor-gray.png b/Client/src/assets/Images/Icon-monitor-gray.png
deleted file mode 100644
index 6bb16215a210526ccf816acae72bdb35623b70b8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 897
zcmV-{1AhF8P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0~Sd{K~#7Fg;l#!
z+dve(yBI>rCn$elh7|62OnS%{U}lIzhv*U>V|x;lE*4FOR|e$^63P_BQs;&sz97mU
zxXBDQu$yzW5?X{Hw?OjI-Lv<35cGt-b~{xPG%Gb#6_LZ3AR1^v!I&PM?tAU{v9qEK
zTyx*gX_8G%G*|ovY=A>k>3e|3#*w!b75!vMl%68l!y!kJZs9r2xFYdg7$Ur@dEhI8
zgahni)$O#NBwlrQeK@Wo7H>qO>0@uZEtB6A-_USlNOHxbDVvDWKlC=A!?y*WCIULK
zxyG`W25x0ij`GOcei!w_D^n8Tkx=dzuNg-Dv%!nn!XzTCPuJ$dU;SQu-v1fS)E01=
zaA#^Sr_TFlKkgz<nuJ@Kl%ve+DVI6g!|u-43>(q)9@kltT+gt><O~8J?XDu2J7WCl
zGJ#E6cbiinsHY9OGv8~YdBW$$vQK{DkjY~%Q^L9Cesq%V3)Qj-CaF?QUWD-JL1S)D
zc`_=QPkJHR$~~In3dmcb7LyzGO=us+6wLDTsJj^!iLdA;G8Y&hyG$k+%sz%64Wh^|
z3_H^0Xkscc6CJ0moibc%RTXdCP7hnfB*h`m(u}Cw9{UblN0scC<UO)XrAt}F|Mxw^
znHVXNbKq^y+YZR&gqvE#Gi$iJzd15|e{~=4T%a5SsYH^BV~-A-CLNdImWRW{Ho_Bz
zN0miNj%x}{=;Q0Q6H-j^e57&$vjkemz{YP$CHOUzPkx3nvAAG#>UMNIQf9-%;)7Vt
zMuK2?Y2%nAD54H{!lVHdZ=5qh&zhN&*)R%p;X*?!ctm|OUd9@U!f8j!ifb~4?Rz^x
zzU#RJN>Y1f!}2m=tLjO8t&KFKMr#f}y}dNSTE?=8+Ad?R+sEEkazQrdV~|l^bR6z+
zx{%Ek7n%H}i9{7S1IF^Q6s+NXKsf}H#;hMo(;o=SH~dB~1X9;aEdDsS1i$5UIy@-c
z#{GJiSRx{%yIf0C)BNAj{aWjQglv`RNhxt=b<E{BL`pzUpbIInj+KxRSi`dab(#GG
XiHdIAPzHA_00000NkvXXu0mjf1}v8a

diff --git a/Client/src/assets/Images/Icon-open-in-tab-gray.png b/Client/src/assets/Images/Icon-open-in-tab-gray.png
deleted file mode 100644
index 3f34c205324f695f7eafb997fd0195d40338a84d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 375
zcmV--0f_#IP)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0Srk*K~#7Fm6A<T
z!axv(Ur)uj%?-p8fH&|4;0>@!-MDZpmr!L<{w<xQ=q5KnPM|k%j=&M(0t%8MLl0yi
zKtV`vk~h;|ch8$46vVZBsS!*)zh*#v&j~3XgE0^|{h>O8?J}aqSc5ET<&}I5ZB-VL
zONkMmg{l*+ccxwnXn|CFH}a_gq}3S7X+Cj#T<XOz7k)Oj0I15}??a$awX|FJP-x6L
zWQ|FRKpy9AveD@)``-(8RqHaZt@A27l0b<V!T-5^cs?l&vXRSsE(xwe7@~-ss~nPS
zV1nT^`JeZ0@_~IE|MAQD<&D8Eh>M@|zW!A0`-SFc%D2i9rFAkU*a;GJ_r2YBdIqNY
VX_g})u(1FD002ovPDHLkV1l2ymg4{b

diff --git a/Client/src/assets/Images/Icon-search-gray.png b/Client/src/assets/Images/Icon-search-gray.png
deleted file mode 100644
index 7207f881dc0fe361937129166f52ecfd6431f2a6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 495
zcmV<L0TBL)P)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0fb3JK~#7FjZ(c%
z0znX-IU@DF0hE@Y7FY7q*r}zJ*GOZtiJf2$B5Gwg3!@1n@&>{SAapdE^9elP;3!Do
zh_`-wc;+A?PBXhZ-#0Vg%reDH2umMx@<@}E35e3+BU2|K{qBQZbK_W!4#(m$!^BTS
zGA)Tbjie)qb%Zi1jzqPVU9K(=6$$Pc7f&*q&Boav0+`}Dy+MJ6m>DOB#FDsrM<w#f
z&$pLaiVT<rFe0EJ-?Gp98mgILd#JREq|B#jO-W$VEOpm3qCI#w-rjG9q#$uS(hMHy
zlB7%jFyP*xO+PuUrxekn`SjKrlT0apcT@Sm%A|uV8528PPvjhQI$^6m&2E+GBqbmJ
zBB>z)mtziWbx%0M!DPoMOp#AyjUvAed;MinNnGqBevjj%X;%*C)qjF@jG3!Ay3o=I
zm|d1q|86gbn5)(neS$<pd>QrzTSl>qOq&3i@VgX}qzhuZX_pVSje^oy%^HOfuhOJO
lKK`7I)czLRu3Pvl-WM2OoXVopA65VW002ovPDHLkV1lbd%;Eq5

diff --git a/Client/src/assets/Images/Icon-setting-actions-gray.png b/Client/src/assets/Images/Icon-setting-actions-gray.png
deleted file mode 100644
index 40ba48b62fe6e3d88af31be75439d41986514acc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 761
zcmV<V0tWqwP)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0**;UK~#7FeN<g;
z(?AfO*(4?s54b02dIFLg*e6IiK@$l|B_43Z6KYTr(ZUmoc|a-(Qo{)#Cx|%#?g{Fg
z0P_GPw(RAbwcQ_8$-Zp7JM+yq-!~hkE$f+g+Ge7W{8p3<&iqNVDV8@~^t_R6(Sx6w
zw9Uk^>?tLCbAJ+V1@e%1MU7ET+(y!(PCCp<Ej6>lI@<xKZ#m_zBIO{wi^OmZmKAWl
z0=gn=szF4N4m9x;fQ0Wj)$0|mFTgGW$WmfaC;*3^MGXNN6s?yFNnk?3XMgBo@8e{g
z61k`tN!5hdl`~;DLkt)Nl2hf^Z@Sdqp~d*A_ZET2^Xl}-8?~BX=KHTBd`?OedH`{V
z*{kAiG2(?0jn(4<;C<`4ce>2Uy8KJlFC;Gov=CPBnjD>9h_;52B;=&gyKWVlB#Qz#
zKhI6Odd$o*4#pW-=eTmqqMm4mA`yx_QAn5?g_wJ#y^&a7P^a-1e>j;<k3WKi4_%xW
zuTFN+dYF>x)SwsQY?(Dx3T@{)TiIosO={W&b!}g_F08QrWa)3&ZTc5y7z>#()2>V}
z_9e?55iCwznczYnxB^zJX$Qq#0xlHC?#V$(N8P3gAOtiHq{5n1A2SsK#3%DiG~&{}
z+-0114G3~7IgI^tSbON5?3+Pn9aU!{tmyTy)_C;k!*Er#S%X`cdU4GG$d5a7gkHO#
z8_cF}z8+zgGK@hD4wer!F51Zsq|g~+(0YKJ{c5(Z-`b(~PTcd#iFHa7r2jqnEe}}Q
zDbE9O5c?d`^zRI0LhFfK7zgDk5Ou@=i|gGc)!UUOnq_{p!1*XLxanxi0?SMDL<>hr
r+?j9qPg2`}iib*}v|BykO|kz0SH4pJvBwZs00000NkvXXu0mjfHuO)v

diff --git a/Client/src/assets/Images/Icon-setting-gray.png b/Client/src/assets/Images/Icon-setting-gray.png
deleted file mode 100644
index f77106c29348c64fb6c0eb63bbaaec17eec20f87..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 863
zcmV-l1EBngP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0`y5lK~#7Fl~qe_
z6G0HIYA4<@H^9EZZ~~kY#GC*lB>}|3ZL!NoN#r=J&`cKmoGhFZketBg1TiPbZ~}%!
zgh-TbUiD1d<1vv<OV)H(Rllx!^)b^D>y_>{45_vy3M`q!vv_Z`=ngLieOEJNt^t}d
zaY|(6ytW8@r7YOgy%1gn{-Pn<mhT<i*5$iO)oVq(j_pY6{osbGP1q;phqwe9L(tBT
z31B-!mB^A!Pve~@BHYrwEBRWc0a-eLeUL-N{dl|MvD7r=ZX*M=afP{&y{WzeG+^-R
z?Lf&3=mNGB<1}Vf2?Z2;Ez!<VaZjqo?joOminhnt)?asypZ>Ogz7OKV)Z4*xr+f4E
z=<$d5yFYTLE|FYK%#Y@%Xn`-`58E*=uhD<3Eq#0~F7@M``W&#V%}%c^A+A<z&3jXj
zH>BK{&7dFcofj#Dw?o6Wc^2(n&HzhE-LqN8<ra=X@#Q>O!reF*xqUxRrjL|eIob=R
zyOYoHVWJ!;nJe)W9@U7=!NgPDlZQf7fEJ((%u41%i9&3Ie<T+Pr4;$m29In=A-vQ*
zWS+uXx?O`&QltjDp+N+`)Jjn#c<5PCUhsb8%1yW{gXSxx2bPp!Sr#~MITf8k7$;KX
z2>T~~LkYth8m19+;f6laUbdl+WgjxzL4mSRqPTHYWkIJp;LNz&$l6pj<uz$vU%QKv
zm)W>-lQ}Z7tS(NY?QcBGUAO7F4V@>-f=4Yy_PLcX5yfe=bK-TAA%z4N<t5<xLSJU(
zNe+vV&ddto2i~@(vi;h>fMlx8<btRpd8+ctx|dC6g(8(23Bghmq5r~*5zY;8oJei^
zZW9M?Ko|6Z=uB3_P0?AZBvZV6eRRVmn^JiF%H)kfQutQI-p-QRcU^`S7AE1)&`-r;
zUQ{tenWt`Kf)3$Jk|A?f!t}HlR~7c+3+4js>tc^SKv(W|idYN(np(*Es<gaoSqvfk
pmicR12<*YDWFkie^GwJOt-lXZhFIhrF^vEK002ovPDHLkV1g*5k(B@d

diff --git a/Client/src/assets/Images/Icon-signal-gray.png b/Client/src/assets/Images/Icon-signal-gray.png
deleted file mode 100644
index 450c4b3f7b79a40dfe336ddfa3e893e093be2a93..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 718
zcmV;<0x|uGP)<h;3K|Lk000e1NJLTq000&M000mO1^@s6677#B00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0%J);K~#7Fom9PU
z6G0IEc4I<o-oSnXTQuq7AbN)<h$9&j(Qq!wkL*)OA}U`RWI0GVDnu1{0qk@xAovZq
zH;5^7j(7Ryd}|*lK{C_qeY-o~%zQI@K*s9caai}>cv#Y&dq=f~cihSDY4_3aj@lY_
zODScsq$$`uV7)B)N*b}GfR6^Y{XW=#izV&*@aypL+S7!*ytZ+9HS9;ZH0=)4j7aJW
z-tkTf4AO_1wtJm}4|kDC`Anvz5pQ$@KZ<eVuj1jRf^PA6poN5_6)4koP6p<J(GlC*
z%lopNKo97bpJMe~a2WVwdWH;E5e4*AnW`K(k{$1`!lfjEcsX)=?7;;c`i<t{){N+N
zL~VT`s?U57V{(d_=<8ZrR2X^WNDNl0#A7Fclx(2;Qk8-#!0IqV6v|x<Rb6DQB5h4c
zrb0v?yAqj2iFo8NFGz;bS+Mu07wi^iMEaE@V#Z8}0T=#}A=Y=uCsFfRY?I*5Q4!k=
z#veG75Tc~S)GSNkQmA>Y{LImu(m79!e^Qof-Y9U?LwDb>A3Pr|{E?U7+Nfl6PNXsY
zB1Abns0r={2h#m*DUtgFt5hYczudJ-e-<ng#-(Hx2I?h8;}-alK8|FLU$Fa<$qM3f
zH*M<QHlKBvaWB{}X9Atah>QANus4!S*x8!P`UZMi$}uXpj(cnhQ%PnWlV=(IThx0X
z6P8PL^esn<FGpTYQ)ZNF5&tkwNysI1SpGGlzt*`;!O6ek8{hWgtv~s7#kY?otdaZ?
z)rrV?*4h0ed-HMQj5c`~Xl1YQAI1iUu18|O0aHmJ(On}kE&u=k07*qoM6N<$f^8o~
AwEzGB

diff --git a/Client/src/assets/Images/Icon-support-gray.png b/Client/src/assets/Images/Icon-support-gray.png
deleted file mode 100644
index 839bd50184cc0c6aec954ab540d11f2e1d257d6d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 878
zcmV-!1CjiRP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0|QA!K~#7Fja9L7
z(?Ag2y*Q?!Fn^$Y0rI4AhYj@P4=^(!lP*e062{ViLut`4;G|G0hLRtM<t_ze{0Gq|
zI1PoI=y<Es1;v(4t~qJ<_G$O_y%p1n_15dV#Pm#Qax)@FY)mxOO!1mde|`;vWLYd%
z8F#%8ZB44DiQ0uJVbX~_XyOJo*E~~<ZT}=ZoctFUS%xs~30Outx}n+UC=90MGhOeK
zvrbu?iF<%|P)%?e9{Njxx4q*?k$#QCVM?=L9<XZdcpm}IKC+LH`5S9j{|@wh14@(;
zUq1x2$c>8(yF1?Tz*^Ue@?AK-qjVp8j1v83>jht4oX4~>+rE#jXW|s@S$oY^XMA}v
zN@_*g1C)}ShDSkB9&GGydwqILY50fg9?Va1rh%#^jC;?h-nF0-*Y$dhIz8IL2XHk=
zZWoQnD7zxgy2HWyvx>W$q6%RG0QD5CXj_{Ft%zx=Th3mIG1WKYa+!+O&I*8OO6kTh
zJZydok2)!-4P4b!e8QM=OlseS`yjt$Fp1{Kj%@ZMD}Z*&z9@W`q{JQZ)o6XM9Ag^J
ziPD)XtU#H1fdMGn)uiL7LR|tbSA#yd6>;D{JBpSs`FdlSGnY2$rG5d1T-lj-=)C*n
z?s~lipEO+L4*z5^jvCSfm2vKLgf8U+(g<k~Xf-N>8y4x2&YOC_dE&$7%8;t9YZ~9+
zt!Ts@b?Sz@4FI5#^(%-dHWbTTOShWgvTtK<^Z7wE!{k$6FquScXhhd$T~^eLR8wY$
zk|NDuf-T*E4I_Yh+vaS(WGLB&*Nh<xFeXP(P7k2hR8mwCvrmgFC@a*kKs!p+w&W?F
z6~CbE&DKkyos{36SJblg`{I1O*?KOS`Zn%laPUKXcXS(u2m9b(A!%lM!18c)koc24
zSJ1nh%mRSbJ026v4_`s*^S>YgG=qs{c01C8VR&@!x+*i1F^XmlWZ)F0iOvO+H^?zy
zIoD%iCFPIjF;<qG|AH{2Sc@2}${<<B>;+A${&jZ!1$K#mRE%>hqW}N^07*qoM6N<$
Eg71lv9smFU

diff --git a/Client/src/assets/Images/Icon-warning-gray.png b/Client/src/assets/Images/Icon-warning-gray.png
deleted file mode 100644
index ebdf815364faf06b3b97842d1218da593a549c99..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 462
zcmV;<0WtoGP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0b@x-K~#7FwUoV1
z!!QuX?-Cw>M}Q|Ffh8M-vUg=eNFj_hD@AH5wO#RCI`k3f15kx63soP5k%gFZLl6*u
zBx(DXEKAPa&zHONA!rn_Q7iyX!5{=&P5Awt>YJ-N4B2>w09{(|4u}t2L&}SEc^tG4
zmg!<%zElAv*i{B1p7MtQ7!<K#pAhoTW>36#t&O-2RO&5Vyq*N-G9~PP<Ze@_4eo9N
zHNo8*HsTJztqn?-lhav1PN@y<)9w)TNPtLek-8u{ROyb%W|A{jWY=<F%aScB_pO5q
z?F_tE)sX5i2SicTzA~5!!=Z+Donzd$8OlBm*^og+IkJbTMZA#4q|p#EO0hY|-=nsL
zc`yHd(lD6vUJMNs<$?8!Nw=OA%k<^h4=xTVFI_)qBR$)s2D1c}XFt=eDO?5p18xG>
zL8VaTP~@B(5*?HrWhZ$ms1}?@Gk!$KJTT~!F4j%OFKac$kTiRI8UO$Q07*qoM6N<$
Ef*4`8NB{r;

diff --git a/Client/src/assets/Images/maintenance_window_frame.svg b/Client/src/assets/Images/maintenance_window_frame.svg
deleted file mode 100644
index 51fd317fe..000000000
--- a/Client/src/assets/Images/maintenance_window_frame.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="256" height="136" viewBox="0 0 256 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.390244" y="0.390244" width="255.22" height="135.22" rx="7.41463" fill="white"/>
-<rect x="0.390244" y="0.390244" width="255.22" height="135.22" rx="7.41463" stroke="#EBEBEB" stroke-width="0.780488"/>
-<rect x="17.9512" y="16.3901" width="220.098" height="54.6341" rx="3.12195" fill="#EFF2FF"/>
-<rect x="17.9512" y="78.8293" width="85.0732" height="9.36585" rx="3.12195" fill="#D9D9D9"/>
-<rect x="111" y="79" width="127" height="9" rx="3.12195" fill="#F3F3F3"/>
-<rect width="85" height="9" rx="3.12195" transform="matrix(-1 0 0 1 238 98)" fill="#D9D9D9"/>
-<rect width="127" height="9" rx="3.12195" transform="matrix(-1 0 0 1 145 98)" fill="#F3F3F3"/>
-</svg>
diff --git a/Client/src/assets/icons/icon-red-error-0.svg b/Client/src/assets/icons/icon-red-error-0.svg
deleted file mode 100644
index f052582ba..000000000
--- a/Client/src/assets/icons/icon-red-error-0.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.00004 5.33333V8M8.00004 10.6667H8.00671M14.6667 8C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8C1.33337 4.3181 4.31814 1.33333 8.00004 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8Z" stroke="#F04438" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/Client/src/assets/icons/incidents.svg b/Client/src/assets/icons/incidents.svg
new file mode 100644
index 000000000..054d96b06
--- /dev/null
+++ b/Client/src/assets/icons/incidents.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8V12M12 16H12.01M2 8.52274V15.4773C2 15.7218 2 15.8441 2.02763 15.9592C2.05213 16.0613 2.09253 16.1588 2.14736 16.2483C2.2092 16.3492 2.29568 16.4357 2.46863 16.6086L7.39137 21.5314C7.56432 21.7043 7.6508 21.7908 7.75172 21.8526C7.84119 21.9075 7.93873 21.9479 8.04077 21.9724C8.15586 22 8.27815 22 8.52274 22H15.4773C15.7218 22 15.8441 22 15.9592 21.9724C16.0613 21.9479 16.1588 21.9075 16.2483 21.8526C16.3492 21.7908 16.4357 21.7043 16.6086 21.5314L21.5314 16.6086C21.7043 16.4357 21.7908 16.3492 21.8526 16.2483C21.9075 16.1588 21.9479 16.0613 21.9724 15.9592C22 15.8441 22 15.7218 22 15.4773V8.52274C22 8.27815 22 8.15586 21.9724 8.04077C21.9479 7.93873 21.9075 7.84119 21.8526 7.75172C21.7908 7.6508 21.7043 7.56432 21.5314 7.39137L16.6086 2.46863C16.4357 2.29568 16.3492 2.2092 16.2483 2.14736C16.1588 2.09253 16.0613 2.05213 15.9592 2.02763C15.8441 2 15.7218 2 15.4773 2H8.52274C8.27815 2 8.15586 2 8.04077 2.02763C7.93873 2.05213 7.84119 2.09253 7.75172 2.14736C7.6508 2.2092 7.56432 2.29568 7.39137 2.46863L2.46863 7.39137C2.29568 7.56432 2.2092 7.6508 2.14736 7.75172C2.09253 7.84119 2.05213 7.93873 2.02763 8.04077C2 8.15586 2 8.27815 2 8.52274Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/integrations.svg b/Client/src/assets/icons/integrations.svg
new file mode 100644
index 000000000..96edfb485
--- /dev/null
+++ b/Client/src/assets/icons/integrations.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0002 13C10.4297 13.5741 10.9776 14.0491 11.6067 14.3929C12.2359 14.7367 12.9317 14.9411 13.6468 14.9923C14.362 15.0435 15.0798 14.9403 15.7515 14.6897C16.4233 14.4392 17.0333 14.047 17.5402 13.54L20.5402 10.54C21.451 9.59695 21.955 8.33394 21.9436 7.02296C21.9322 5.71198 21.4063 4.45791 20.4793 3.53087C19.5523 2.60383 18.2982 2.07799 16.9872 2.0666C15.6762 2.0552 14.4132 2.55918 13.4702 3.46997L11.7502 5.17997M14.0002 11C13.5707 10.4258 13.0228 9.95078 12.3936 9.60703C11.7645 9.26327 11.0687 9.05885 10.3535 9.00763C9.63841 8.95641 8.92061 9.0596 8.24885 9.31018C7.5771 9.56077 6.96709 9.9529 6.4602 10.46L3.4602 13.46C2.54941 14.403 2.04544 15.666 2.05683 16.977C2.06822 18.288 2.59407 19.542 3.52111 20.4691C4.44815 21.3961 5.70221 21.9219 7.01319 21.9333C8.32418 21.9447 9.58719 21.4408 10.5302 20.53L12.2402 18.82" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/maintenance.svg b/Client/src/assets/icons/maintenance.svg
new file mode 100644
index 000000000..6d0262f3f
--- /dev/null
+++ b/Client/src/assets/icons/maintenance.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/Images/Icon-monitor-gray.svg b/Client/src/assets/icons/monitors.svg
similarity index 100%
rename from Client/src/assets/Images/Icon-monitor-gray.svg
rename to Client/src/assets/icons/monitors.svg
diff --git a/Client/src/assets/icons/page-speed.svg b/Client/src/assets/icons/page-speed.svg
new file mode 100644
index 000000000..30a1c8a53
--- /dev/null
+++ b/Client/src/assets/icons/page-speed.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 11C4 7.13401 7.13401 4 11 4M15.4999 6.5L10.9999 11M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11ZM12 11C12 11.5523 11.5523 12 11 12C10.4477 12 10 11.5523 10 11C10 10.4477 10.4477 10 11 10C11.5523 10 12 10.4477 12 11Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/settings.svg b/Client/src/assets/icons/settings.svg
index d8057286c..eb86f1d19 100644
--- a/Client/src/assets/icons/settings.svg
+++ b/Client/src/assets/icons/settings.svg
@@ -1,4 +1,4 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 11.4C10.3255 11.4 11.4 10.3255 11.4 9C11.4 7.67452 10.3255 6.6 9 6.6C7.67452 6.6 6.6 7.67452 6.6 9C6.6 10.3255 7.67452 11.4 9 11.4Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.3818 11.1818C14.285 11.4012 14.2561 11.6445 14.2989 11.8804C14.3417 12.1164 14.4542 12.3341 14.6218 12.5055L14.6655 12.5491C14.8007 12.6842 14.908 12.8446 14.9812 13.0212C15.0544 13.1978 15.0921 13.387 15.0921 13.5782C15.0921 13.7693 15.0544 13.9586 14.9812 14.1352C14.908 14.3118 14.8007 14.4722 14.6655 14.6073C14.5304 14.7425 14.3699 14.8498 14.1934 14.923C14.0168 14.9962 13.8275 15.0339 13.6364 15.0339C13.4452 15.0339 13.2559 14.9962 13.0794 14.923C12.9028 14.8498 12.7424 14.7425 12.6073 14.6073L12.5636 14.5636C12.3922 14.396 12.1745 14.2835 11.9386 14.2407C11.7027 14.1979 11.4594 14.2268 11.24 14.3236C11.0249 14.4158 10.8414 14.5689 10.7122 14.764C10.583 14.9591 10.5137 15.1878 10.5127 15.4218V15.5455C10.5127 15.9312 10.3595 16.3012 10.0867 16.574C9.81392 16.8468 9.44395 17 9.05818 17C8.67241 17 8.30244 16.8468 8.02966 16.574C7.75688 16.3012 7.60364 15.9312 7.60364 15.5455V15.48C7.59801 15.2393 7.52009 15.0058 7.38001 14.81C7.23993 14.6141 7.04417 14.4649 6.81818 14.3818C6.59882 14.285 6.3555 14.2561 6.11957 14.2989C5.88365 14.3417 5.66595 14.4542 5.49455 14.6218L5.45091 14.6655C5.31582 14.8007 5.1554 14.908 4.97882 14.9812C4.80224 15.0544 4.61297 15.0921 4.42182 15.0921C4.23067 15.0921 4.04139 15.0544 3.86481 14.9812C3.68824 14.908 3.52782 14.8007 3.39273 14.6655C3.25749 14.5304 3.1502 14.3699 3.077 14.1934C3.00381 14.0168 2.96613 13.8275 2.96613 13.6364C2.96613 13.4452 3.00381 13.2559 3.077 13.0794C3.1502 12.9028 3.25749 12.7424 3.39273 12.6073L3.43636 12.5636C3.60403 12.3922 3.7165 12.1745 3.75928 11.9386C3.80205 11.7027 3.77317 11.4594 3.67636 11.24C3.58417 11.0249 3.4311 10.8414 3.23597 10.7122C3.04085 10.583 2.81221 10.5137 2.57818 10.5127H2.45455C2.06878 10.5127 1.69881 10.3595 1.42603 10.0867C1.15325 9.81392 1 9.44395 1 9.05818C1 8.67241 1.15325 8.30244 1.42603 8.02966C1.69881 7.75688 2.06878 7.60364 2.45455 7.60364H2.52C2.76072 7.59801 2.99419 7.52009 3.19004 7.38001C3.38589 7.23993 3.53507 7.04417 3.61818 6.81818C3.71499 6.59882 3.74387 6.3555 3.70109 6.11957C3.65832 5.88365 3.54585 5.66595 3.37818 5.49455L3.33455 5.45091C3.19931 5.31582 3.09202 5.1554 3.01882 4.97882C2.94562 4.80224 2.90795 4.61297 2.90795 4.42182C2.90795 4.23067 2.94562 4.04139 3.01882 3.86481C3.09202 3.68824 3.19931 3.52782 3.33455 3.39273C3.46963 3.25749 3.63005 3.1502 3.80663 3.077C3.98321 3.00381 4.17249 2.96613 4.36364 2.96613C4.55479 2.96613 4.74406 3.00381 4.92064 3.077C5.09722 3.1502 5.25764 3.25749 5.39273 3.39273L5.43636 3.43636C5.60777 3.60403 5.82547 3.7165 6.06139 3.75928C6.29731 3.80205 6.54064 3.77317 6.76 3.67636H6.81818C7.03329 3.58417 7.21674 3.4311 7.34596 3.23597C7.47518 3.04085 7.54452 2.81221 7.54545 2.57818V2.45455C7.54545 2.06878 7.6987 1.69881 7.97148 1.42603C8.24426 1.15325 8.61423 1 9 1C9.38577 1 9.75574 1.15325 10.0285 1.42603C10.3013 1.69881 10.4545 2.06878 10.4545 2.45455V2.52C10.4555 2.75403 10.5248 2.98267 10.654 3.17779C10.7833 3.37291 10.9667 3.52599 11.1818 3.61818C11.4012 3.71499 11.6445 3.74387 11.8804 3.70109C12.1164 3.65832 12.3341 3.54585 12.5055 3.37818L12.5491 3.33455C12.6842 3.19931 12.8446 3.09202 13.0212 3.01882C13.1978 2.94562 13.387 2.90795 13.5782 2.90795C13.7693 2.90795 13.9586 2.94562 14.1352 3.01882C14.3118 3.09202 14.4722 3.19931 14.6073 3.33455C14.7425 3.46963 14.8498 3.63005 14.923 3.80663C14.9962 3.98321 15.0339 4.17249 15.0339 4.36364C15.0339 4.55479 14.9962 4.74406 14.923 4.92064C14.8498 5.09722 14.7425 5.25764 14.6073 5.39273L14.5636 5.43636C14.396 5.60777 14.2835 5.82547 14.2407 6.06139C14.1979 6.29731 14.2268 6.54064 14.3236 6.76V6.81818C14.4158 7.03329 14.5689 7.21674 14.764 7.34596C14.9591 7.47518 15.1878 7.54452 15.4218 7.54545H15.5455C15.9312 7.54545 16.3012 7.6987 16.574 7.97148C16.8468 8.24426 17 8.61423 17 9C17 9.38577 16.8468 9.75574 16.574 10.0285C16.3012 10.3013 15.9312 10.4545 15.5455 10.4545H15.48C15.246 10.4555 15.0173 10.5248 14.8222 10.654C14.6271 10.7833 14.474 10.9667 14.3818 11.1818Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.7273 13.7273C17.6063 14.0015 17.5702 14.3056 17.6236 14.6005C17.6771 14.8954 17.8177 15.1676 18.0273 15.3818L18.0818 15.4364C18.2509 15.6052 18.385 15.8057 18.4765 16.0265C18.568 16.2472 18.6151 16.4838 18.6151 16.7227C18.6151 16.9617 18.568 17.1983 18.4765 17.419C18.385 17.6397 18.2509 17.8402 18.0818 18.0091C17.913 18.1781 17.7124 18.3122 17.4917 18.4037C17.271 18.4952 17.0344 18.5423 16.7955 18.5423C16.5565 18.5423 16.3199 18.4952 16.0992 18.4037C15.8785 18.3122 15.678 18.1781 15.5091 18.0091L15.4545 17.9545C15.2403 17.745 14.9682 17.6044 14.6733 17.5509C14.3784 17.4974 14.0742 17.5335 13.8 17.6545C13.5311 17.7698 13.3018 17.9611 13.1403 18.205C12.9788 18.4489 12.8921 18.7347 12.8909 19.0273V19.1818C12.8909 19.664 12.6994 20.1265 12.3584 20.4675C12.0174 20.8084 11.5549 21 11.0727 21C10.5905 21 10.1281 20.8084 9.78708 20.4675C9.4461 20.1265 9.25455 19.664 9.25455 19.1818V19.1C9.24751 18.7991 9.15011 18.5073 8.97501 18.2625C8.79991 18.0176 8.55521 17.8312 8.27273 17.7273C7.99853 17.6063 7.69437 17.5702 7.39947 17.6236C7.10456 17.6771 6.83244 17.8177 6.61818 18.0273L6.56364 18.0818C6.39478 18.2509 6.19425 18.385 5.97353 18.4765C5.7528 18.568 5.51621 18.6151 5.27727 18.6151C5.03834 18.6151 4.80174 18.568 4.58102 18.4765C4.36029 18.385 4.15977 18.2509 3.99091 18.0818C3.82186 17.913 3.68775 17.7124 3.59626 17.4917C3.50476 17.271 3.45766 17.0344 3.45766 16.7955C3.45766 16.5565 3.50476 16.3199 3.59626 16.0992C3.68775 15.8785 3.82186 15.678 3.99091 15.5091L4.04545 15.4545C4.25503 15.2403 4.39562 14.9682 4.4491 14.6733C4.50257 14.3784 4.46647 14.0742 4.34545 13.8C4.23022 13.5311 4.03887 13.3018 3.79497 13.1403C3.55107 12.9788 3.26526 12.8921 2.97273 12.8909H2.81818C2.33597 12.8909 1.87351 12.6994 1.53253 12.3584C1.19156 12.0174 1 11.5549 1 11.0727C1 10.5905 1.19156 10.1281 1.53253 9.78708C1.87351 9.4461 2.33597 9.25455 2.81818 9.25455H2.9C3.2009 9.24751 3.49273 9.15011 3.73754 8.97501C3.98236 8.79991 4.16883 8.55521 4.27273 8.27273C4.39374 7.99853 4.42984 7.69437 4.37637 7.39947C4.3229 7.10456 4.18231 6.83244 3.97273 6.61818L3.91818 6.56364C3.74913 6.39478 3.61503 6.19425 3.52353 5.97353C3.43203 5.7528 3.38493 5.51621 3.38493 5.27727C3.38493 5.03834 3.43203 4.80174 3.52353 4.58102C3.61503 4.36029 3.74913 4.15977 3.91818 3.99091C4.08704 3.82186 4.28757 3.68775 4.50829 3.59626C4.72901 3.50476 4.96561 3.45766 5.20455 3.45766C5.44348 3.45766 5.68008 3.50476 5.9008 3.59626C6.12152 3.68775 6.32205 3.82186 6.49091 3.99091L6.54545 4.04545C6.75971 4.25503 7.03183 4.39562 7.32674 4.4491C7.62164 4.50257 7.9258 4.46647 8.2 4.34545H8.27273C8.54161 4.23022 8.77093 4.03887 8.93245 3.79497C9.09397 3.55107 9.18065 3.26526 9.18182 2.97273V2.81818C9.18182 2.33597 9.37338 1.87351 9.71435 1.53253C10.0553 1.19156 10.5178 1 11 1C11.4822 1 11.9447 1.19156 12.2856 1.53253C12.6266 1.87351 12.8182 2.33597 12.8182 2.81818V2.9C12.8193 3.19253 12.906 3.47834 13.0676 3.72224C13.2291 3.96614 13.4584 4.15749 13.7273 4.27273C14.0015 4.39374 14.3056 4.42984 14.6005 4.37637C14.8954 4.3229 15.1676 4.18231 15.3818 3.97273L15.4364 3.91818C15.6052 3.74913 15.8057 3.61503 16.0265 3.52353C16.2472 3.43203 16.4838 3.38493 16.7227 3.38493C16.9617 3.38493 17.1983 3.43203 17.419 3.52353C17.6397 3.61503 17.8402 3.74913 18.0091 3.91818C18.1781 4.08704 18.3122 4.28757 18.4037 4.50829C18.4952 4.72901 18.5423 4.96561 18.5423 5.20455C18.5423 5.44348 18.4952 5.68008 18.4037 5.9008C18.3122 6.12152 18.1781 6.32205 18.0091 6.49091L17.9545 6.54545C17.745 6.75971 17.6044 7.03183 17.5509 7.32674C17.4974 7.62164 17.5335 7.9258 17.6545 8.2V8.27273C17.7698 8.54161 17.9611 8.77093 18.205 8.93245C18.4489 9.09397 18.7347 9.18065 19.0273 9.18182H19.1818C19.664 9.18182 20.1265 9.37338 20.4675 9.71435C20.8084 10.0553 21 10.5178 21 11C21 11.4822 20.8084 11.9447 20.4675 12.2856C20.1265 12.6266 19.664 12.8182 19.1818 12.8182H19.1C18.8075 12.8193 18.5217 12.906 18.2778 13.0676C18.0339 13.2291 17.8425 13.4584 17.7273 13.7273Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/Client/src/assets/icons/status-pages.svg b/Client/src/assets/icons/status-pages.svg
new file mode 100644
index 000000000..97cea88fb
--- /dev/null
+++ b/Client/src/assets/icons/status-pages.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2426 7.75738C18.5858 10.1005 18.5858 13.8995 16.2426 16.2427M7.75736 16.2426C5.41421 13.8995 5.41421 10.1005 7.75736 7.75735M4.92893 19.0711C1.02369 15.1658 1.02369 8.8342 4.92893 4.92896M19.0711 4.929C22.9763 8.83424 22.9763 15.1659 19.0711 19.0711M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/support.svg b/Client/src/assets/icons/support.svg
new file mode 100644
index 000000000..7de16379a
--- /dev/null
+++ b/Client/src/assets/icons/support.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.13626 8.13628L3.92893 3.92896M3.92893 18.0711L8.16797 13.8321M13.8611 13.8638L18.0684 18.0711M18.0684 3.92896L13.8287 8.16862M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11ZM15 11C15 13.2091 13.2091 15 11 15C8.79086 15 7 13.2091 7 11C7 8.79086 8.79086 7 11 7C13.2091 7 15 8.79086 15 11Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/react.svg b/Client/src/assets/react.svg
deleted file mode 100644
index 6c87de9bb..000000000
--- a/Client/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/Client/src/index.css b/Client/src/index.css
index 2203925f6..308d0a085 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -58,7 +58,8 @@
   --env-var-height-1: 100vh;
   --env-var-height-2: 34px;
 
-  --env-var-nav-bar-height: 64px;
+  --env-var-nav-bar-height: 70px;
+  --env-var-side-bar-width: 250px;
 
   --env-var-spacing-1: 12px;
   --env-var-spacing-1-plus: 16px;