diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 9d8b31217..fd1f75b53 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -3,23 +3,22 @@
   height: var(--env-var-img-width-2);
   color: var(--env-var-color-5);
   margin-right: 10px;
-  margin-bottom: 2px;
 }
 .MuiTable-root .host a svg {
   width: var(--env-var-font-size-large);
   height: var(--env-var-font-size-large);
 }
-.MuiTable-root .host div:nth-child(3) {
-  font-size: var(--env-var-font-size-small);
-}
 .MuiTable-root .host div:nth-child(2) {
   width: fit-content;
-  margin-right: 10px;
   font-weight: 700;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
+.MuiTable-root .host div:nth-child(2) span {
+  font-size: var(--env-var-font-size-small);
+  margin-left: 10px;
+}
 
 .MuiTable-root .label {
   line-height: 1;
diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx
index bdf1231f7..08eb91580 100644
--- a/Client/src/Components/NavBar/index.jsx
+++ b/Client/src/Components/NavBar/index.jsx
@@ -145,7 +145,10 @@ function NavBar() {
           </IconButton>
         </Tooltip>
         <Menu
-          sx={{ mt: theme.spacing(5.5) }}
+          sx={{
+            mt: theme.spacing(5.5),
+            borderRadius: "4px",
+          }}
           id="menu-appbar"
           anchorEl={anchorElUser}
           anchorOrigin={{
@@ -172,6 +175,7 @@ function NavBar() {
                 fontSize="var(--env-var-font-size-medium)"
                 textAlign="center"
                 marginLeft="8px"
+                sx={{ fontWeight: 400, color: "#344054" }}
               >
                 {setting}
               </Typography>
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index bce3bee72..a9317d5da 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -51,7 +51,7 @@ body:has(.monitors) .actions-menu li.MuiButtonBase-root {
 body:has(.monitors) .actions-menu li.MuiButtonBase-root:last-of-type {
   color: var(--env-var-color-26);
 }
-body:has(.monitors) .MuiModal-root p.MuiTypography-root {
+body:has(.monitors) .actions-menu .MuiModal-root p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
 }
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 9c9f99d15..9eb1c0ced 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -44,8 +44,12 @@ const Host = ({ params }) => {
       <a href={params.url} target="_blank" rel="noreferrer">
         <OpenInNewPage />
       </a>
-      <Box>{params.title}</Box>
-      <Box sx={{ color: params.percentageColor }}>{params.precentage}%</Box>
+      <Box>
+        {params.title}
+        <Typography component="span" sx={{ color: params.percentageColor }}>
+          {params.precentage}%
+        </Typography>
+      </Box>
     </Stack>
   );
 };
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
index 3152d0e28..f1f10621f 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
@@ -1,37 +1,31 @@
-.create-page-speed form {
-  position: relative;
-  margin: auto;
-  margin-top: var(--env-var-default-2);
+.create-page-speed form > .MuiStack-root:not(:last-of-type) {
   background-color: var(--env-var-color-8);
-  width: 100%;
-  max-width: 500px;
-  box-shadow: var(--env-var-shadow-1);
+  border: solid 1px var(--env-var-color-6);
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-default-2);
 }
-.create-page-speed h1.MuiTypography-root,
-.create-page-speed h2.MuiTypography-root,
+.create-page-speed h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-large);
+  color: var(--env-var-color-1);
+}
 .create-page-speed p.MuiTypography-root,
-.create-page-speed h2.MuiTypography-root > span.MuiTypography-root {
+.create-page-speed h3.MuiTypography-root {
   color: var(--env-var-color-5);
 }
 .create-page-speed h1.MuiTypography-root,
-.create-page-speed h2.MuiTypography-root {
+.create-page-speed h3.MuiTypography-root {
   font-weight: 600;
 }
-.create-page-speed h2.MuiTypography-root {
-  font-size: var(--env-var-font-size-medium-plus);
-}
 .create-page-speed p.MuiTypography-root,
-.create-page-speed button,
-.create-page-speed h2.MuiTypography-root > span.MuiTypography-root {
+.create-page-speed h3.MuiTypography-root,
+.create-page-speed h3.MuiTypography-root > span.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
 }
 .create-page-speed .MuiBox-root > .field + p.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
 }
 .create-page-speed .MuiBox-root > .field + p.MuiTypography-root,
-.create-page-speed h2.MuiTypography-root > span.MuiTypography-root {
+.create-page-speed h3.MuiTypography-root > span.MuiTypography-root {
   opacity: 0.6;
 }
 .create-page-speed .checkbox-wrapper {
@@ -47,17 +41,18 @@
   pointer-events: none;
 }
 
-.create-page-speed button:not(.MuiIconButton-root) {
+.create-page-speed button {
   height: var(--env-var-height-2);
 }
-.create-page-speed .MuiIconButton-root {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: var(--env-var-spacing-1);
-}
 
 body:has(.create-page-speed) .select-dropdown .MuiMenuItem-root,
 .create-page-speed .select-wrapper .select-component > .MuiSelect-select {
   text-transform: lowercase;
 }
+
+.create-page-speed .field,
+.create-page-speed .section-disabled,
+.create-page-speed .select-wrapper,
+.create-page-speed h3.MuiTypography-root {
+  flex: 1;
+}
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index c85f6f77e..03d9a5414 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -1,9 +1,8 @@
-import { Box, IconButton, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router";
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Button from "../../../Components/Button";
@@ -11,6 +10,7 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { createPageSpeed } from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
+import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import "./index.css";
 
 const CreatePageSpeed = () => {
@@ -23,10 +23,11 @@ const CreatePageSpeed = () => {
 
   const frequencies = [
     { _id: 1, name: "1 minute" },
-    { _id: 2, name: "2 minutes" },
-    { _id: 3, name: "3 minutes" },
-    { _id: 4, name: "4 minutes" },
-    { _id: 5, name: "5 minutes" },
+    { _id: 1440, name: "1 day" },
+    { _id: 2880, name: "2 days" },
+    { _id: 4320, name: "3 days" },
+    { _id: 7200, name: "5 days" },
+    { _id: 10080, name: "1 week" },
   ];
 
   const [form, setForm] = useState({
@@ -96,102 +97,114 @@ const CreatePageSpeed = () => {
 
   return (
     <Box className="create-page-speed">
+      <Button
+        level="tertiary"
+        label="Back"
+        animate="slideLeft"
+        img={<WestRoundedIcon />}
+        onClick={() => navigate("/page-speed")}
+        sx={{
+          backgroundColor: "#f4f4f4",
+          mb: theme.gap.large,
+          px: theme.gap.ml,
+          "& svg.MuiSvgIcon-root": {
+            mr: theme.gap.small,
+            fill: theme.palette.otherColors.slateGray,
+          },
+        }}
+      />
       <form
         noValidate
         spellCheck="false"
         onSubmit={handleCreate}
-        style={{ display: "flex", flexDirection: "column", gap: theme.gap.xl }}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.gap.large,
+          // TODO
+          maxWidth: "1000px",
+        }}
       >
-        <IconButton
-          aria-label="close modal"
-          onClick={() => navigate("/page-speed")}
-          sx={{
-            p: "5px",
-            opacity: 0.6,
-            "&:focus": { outline: "none" },
-          }}
-        >
-          <CloseRoundedIcon />
-        </IconButton>
-        <Stack gap={theme.gap.large}>
-          <Typography component="h1">Create a page speed monitor</Typography>
-          <Field
-            type="text"
-            id="monitor-name"
-            label="Monitor friendly name"
-            placeholder="Example monitor"
-            isOptional={true}
-            value={form.name}
-            onChange={(event) => handleChange(event, "name")}
-            error={errors.name}
-          />
-          <Field
-            type="url"
-            id="monitor-url"
-            label="URL"
-            placeholder="random.website.com"
-            value={form.url}
-            onChange={(event) => handleChange(event, "url")}
-            error={errors.url}
-          />
-          <Select
-            id="monitor-frequency"
-            label="Check frequency"
-            items={frequencies}
-            value={form.interval}
-            onChange={(event) => handleChange(event, "interval")}
-          />
-        </Stack>
-        <Stack gap={theme.gap.small}>
-          <Typography component="h2">
-            Incidents notifications{" "}
-            <Typography component="span">(coming soon)</Typography>
-          </Typography>
-          <Box className="section-disabled">
-            <Typography mb={theme.gap.small}>
-              When there is a new incident,
+        <Typography component="h1">Create a page speed monitor</Typography>
+        <Stack gap={theme.gap.xl}>
+          <Stack direction="row">
+            <Typography component="h3">Monitor friendly name</Typography>
+            <Field
+              type="text"
+              id="monitor-name"
+              placeholder="Example monitor"
+              value={form.name}
+              onChange={(event) => handleChange(event, "name")}
+              error={errors.name}
+            />
+          </Stack>
+          <Stack direction="row">
+            <Typography component="h3">URL</Typography>
+            <Field
+              type="url"
+              id="monitor-url"
+              placeholder="random.website.com"
+              value={form.url}
+              onChange={(event) => handleChange(event, "url")}
+              error={errors.url}
+            />
+          </Stack>
+          <Stack direction="row">
+            <Typography component="h3">Check frequency</Typography>
+            <Select
+              id="monitor-frequency"
+              items={frequencies}
+              value={form.interval}
+              onChange={(event) => handleChange(event, "interval")}
+            />
+          </Stack>
+          <Stack direction="row">
+            <Typography component="h3">
+              Incidents notifications{" "}
+              <Typography component="span">(coming soon)</Typography>
             </Typography>
-            <Checkbox
-              id="notify-sms"
-              label="Notify via SMS (coming soon)"
-              isChecked={false}
-              isDisabled={true}
-            />
-            <Checkbox
-              id="notify-email"
-              label="Notify via email (to gorkem.cetin@bluewavelabs.ca)"
-              isChecked={false}
-            />
-            <Checkbox
-              id="notify-emails"
-              label="Notify via email to following emails"
-              isChecked={false}
-            />
-            <Box mx={`calc(${theme.gap.ml} * 2)`}>
-              <Field
-                id="notify-emails-list"
-                placeholder="notifications@gmail.com"
-                value=""
-                onChange={() => console.log("disabled")}
-                error=""
-              />
-              <Typography mt={theme.gap.small}>
-                You can separate multiple emails with a comma
+            <Stack className="section-disabled">
+              <Typography mb={theme.gap.small}>
+                When there is a new incident,
               </Typography>
-            </Box>
-          </Box>
+              <Checkbox
+                id="notify-sms"
+                label="Notify via SMS (coming soon)"
+                isChecked={false}
+                isDisabled={true}
+              />
+              <Checkbox
+                id="notify-email"
+                label="Notify via email (to gorkem.cetin@bluewavelabs.ca)"
+                isChecked={false}
+              />
+              <Checkbox
+                id="notify-emails"
+                label="Notify via email to following emails"
+                isChecked={false}
+              />
+              <Box mx={`calc(${theme.gap.ml} * 2)`}>
+                <Field
+                  id="notify-emails-list"
+                  placeholder="notifications@gmail.com"
+                  value=""
+                  onChange={() => console.log("disabled")}
+                  error=""
+                />
+                <Typography mt={theme.gap.small}>
+                  You can separate multiple emails with a comma
+                </Typography>
+              </Box>
+            </Stack>
+          </Stack>
         </Stack>
-        <Stack direction="row" justifyContent="flex-end" gap={theme.gap.small}>
-          <Button
-            level="tertiary"
-            label="Cancel"
-            onClick={() => navigate("/page-speed")}
-          />
+        <Stack direction="row" justifyContent="flex-end">
           <Button
             type="submit"
             level="primary"
             label="Create"
             onClick={handleCreate}
+            sx={{ px: theme.gap.large, mt: theme.gap.large }}
           />
         </Stack>
       </form>
diff --git a/Client/src/Pages/PageSpeed/index.css b/Client/src/Pages/PageSpeed/index.css
index 1d8b41432..b910c1645 100644
--- a/Client/src/Pages/PageSpeed/index.css
+++ b/Client/src/Pages/PageSpeed/index.css
@@ -29,7 +29,10 @@
   height: 22px;
   font-size: var(--env-var-font-size-small);
 }
-.page-speed button {
+.page-speed:not(:has([class*="fallback__"])) button {
   height: 34px;
   align-self: flex-end;
 }
+.page-speed [class*="fallback__"] h1 {
+  margin-left: var(--env-var-spacing-3);
+}
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index ac188b103..aec775ead 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -75,7 +75,7 @@ const PageSpeed = () => {
 
   return (
     <Box className="page-speed">
-      {monitors ? (
+      {monitors?.length !== 0 ? (
         <Stack gap={theme.gap.xs}>
           <Stack
             direction="row"