diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 27fb35329..16911abeb 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -652,6 +652,9 @@ function Sidebar() {
               gap: theme.spacing(4),
               borderRadius: theme.shape.borderRadius,
               pl: theme.spacing(4),
+              "& svg path": {
+                stroke: theme.palette.other.icon,
+              },
             }}
           >
             <LogoutSvg />
diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index 23b6af57a..032833924 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -1,10 +1,3 @@
-.configure-monitor h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large-plus);
-  font-weight: 600;
-}
-.configure-monitor p.MuiTypography-root {
-  font-size: var(--env-var-font-size-medium);
-}
 .configure-monitor h1.MuiTypography-root + span.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
 }
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 1ee171034..34076dd89 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -2,7 +2,7 @@ import { useNavigate, useParams } from "react-router";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
-import { Box, Button, Modal, Stack, Typography } from "@mui/material";
+import { Box, Button, Modal, Stack, Tooltip, Typography } from "@mui/material";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
@@ -15,8 +15,8 @@ import {
   deleteUptimeMonitor,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Field from "../../../Components/Inputs/Field";
-import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
+import PauseIcon from "../../../assets/icons/pause-icon.svg?react";
+import ResumeIcon from "../../../assets/icons/resume-icon.svg?react";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -202,7 +202,7 @@ const Configure = () => {
   };
 
   return (
-    <Stack className="configure-monitor" gap={theme.spacing(12)}>
+    <Stack className="configure-monitor" gap={theme.spacing(10)}>
       {Object.keys(monitor).length === 0 ? (
         <SkeletonLayout />
       ) : (
@@ -222,27 +222,74 @@ const Configure = () => {
             flex={1}
           >
             <Stack direction="row" gap={theme.spacing(2)}>
-              <PulseDot color={statusColor[monitor?.status ?? undefined]} />
               <Box>
-                {parsedUrl?.host ? (
-                  <Typography
-                    component="h1"
-                    mb={theme.spacing(2)}
-                    lineHeight={1}
-                    color={theme.palette.text.primary}
-                  >
-                    {parsedUrl.host || "..."}
-                  </Typography>
-                ) : (
-                  ""
-                )}
                 <Typography
-                  component="span"
-                  lineHeight={theme.spacing(12)}
-                  sx={{ color: statusColor[monitor?.status ?? undefined] }}
+                  component="h1"
+                  fontSize={22}
+                  fontWeight={500}
+                  color={theme.palette.text.primary}
                 >
-                  {statusMsg[monitor?.status ?? undefined]}
+                  {monitor.name}
                 </Typography>
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  height="fit-content"
+                  gap={theme.spacing(2)}
+                >
+                  <Tooltip
+                    title={statusMsg[monitor?.status ?? undefined]}
+                    disableInteractive
+                    slotProps={{
+                      popper: {
+                        modifiers: [
+                          {
+                            name: "offset",
+                            options: {
+                              offset: [0, -8],
+                            },
+                          },
+                        ],
+                      },
+                    }}
+                  >
+                    <Box>
+                      <PulseDot
+                        color={statusColor[monitor?.status ?? undefined]}
+                      />
+                    </Box>
+                  </Tooltip>
+                  <Typography
+                    component="h2"
+                    fontSize={14.5}
+                    color={theme.palette.text.secondary}
+                  >
+                    {monitor.url?.replace(/^https?:\/\//, "") || "..."}
+                  </Typography>
+                  <Typography
+                    position="relative"
+                    fontSize={12}
+                    color={theme.palette.text.tertiary}
+                    ml={theme.spacing(6)}
+                    mt={theme.spacing(1)}
+                    sx={{
+                      "&:before": {
+                        position: "absolute",
+                        content: `""`,
+                        width: 4,
+                        height: 4,
+                        borderRadius: "50%",
+                        backgroundColor: theme.palette.text.tertiary,
+                        opacity: 0.8,
+                        left: -10,
+                        top: "50%",
+                        transform: "translateY(-50%)",
+                      },
+                    }}
+                  >
+                    Editting...
+                  </Typography>
+                </Stack>
               </Box>
               <Box
                 sx={{
@@ -255,24 +302,29 @@ const Configure = () => {
                   color="secondary"
                   loading={isLoading}
                   sx={{
-                    border: "none",
-                    backgroundColor: theme.palette.background.main,
-                    px: theme.spacing(5),
+                    pl: theme.spacing(4),
+                    pr: theme.spacing(6),
                     mr: theme.spacing(6),
                     "& svg": {
                       mr: theme.spacing(2),
+                      width: 22,
+                      height: 22,
+                      "& path": {
+                        stroke: theme.palette.text.tertiary,
+                        strokeWidth: 1.7,
+                      },
                     },
                   }}
                   onClick={handlePause}
                 >
                   {monitor?.isActive ? (
                     <>
-                      <PauseCircleOutlineIcon />
+                      <PauseIcon />
                       Pause
                     </>
                   ) : (
                     <>
-                      <PlayCircleOutlineRoundedIcon />
+                      <ResumeIcon />
                       Resume
                     </>
                   )}
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index e31de38d7..ea356a610 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -15,7 +15,6 @@ import { networkService } from "../../../main";
 import { logger } from "../../../Utils/Logger";
 import {
   formatDate,
-  formatDuration,
   formatDurationRounded,
   formatDurationSplit,
 } from "../../../Utils/timeUtils";
@@ -158,7 +157,8 @@ const DetailsPage = ({ isAdmin }) => {
                 </Typography>
                 <Stack
                   direction="row"
-                  alignItems="flex-end"
+                  alignItems="center"
+                  height="fit-content"
                   gap={theme.spacing(2)}
                 >
                   <Tooltip
@@ -185,13 +185,14 @@ const DetailsPage = ({ isAdmin }) => {
                   </Tooltip>
                   <Typography
                     component="h2"
+                    fontSize={14.5}
                     color={theme.palette.text.secondary}
                   >
                     {monitor.url?.replace(/^https?:\/\//, "") || "..."}
                   </Typography>
                   <Typography
+                    mt={theme.spacing(1)}
                     ml={theme.spacing(6)}
-                    lineHeight="20px"
                     fontSize={12}
                     position="relative"
                     color={theme.palette.text.tertiary}
@@ -205,7 +206,8 @@ const DetailsPage = ({ isAdmin }) => {
                         backgroundColor: theme.palette.text.tertiary,
                         opacity: 0.8,
                         left: -9,
-                        top: "42%",
+                        top: "50%",
+                        transform: "translateY(-50%)",
                       },
                     }}
                   >
diff --git a/Client/src/Pages/Monitors/styled.jsx b/Client/src/Pages/Monitors/styled.jsx
index afef6508e..bb35e1705 100644
--- a/Client/src/Pages/Monitors/styled.jsx
+++ b/Client/src/Pages/Monitors/styled.jsx
@@ -32,4 +32,7 @@ export const ConfigBox = styled(Stack)(({ theme }) => ({
   "& h3, & p": {
     color: theme.palette.text.tertiary,
   },
+  "& p": {
+    fontSize: 13,
+  },
 }));
diff --git a/Client/src/assets/icons/pause-icon.svg b/Client/src/assets/icons/pause-icon.svg
new file mode 100644
index 000000000..c73abfc1d
--- /dev/null
+++ b/Client/src/assets/icons/pause-icon.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="M9.5 15V9M14.5 15V9M22 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="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/resume-icon.svg b/Client/src/assets/icons/resume-icon.svg
new file mode 100644
index 000000000..1da787081
--- /dev/null
+++ b/Client/src/assets/icons/resume-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 8.96533C9.5 8.48805 9.5 8.24941 9.59974 8.11618C9.68666 8.00007 9.81971 7.92744 9.96438 7.9171C10.1304 7.90525 10.3311 8.03429 10.7326 8.29239L15.4532 11.3271C15.8016 11.551 15.9758 11.663 16.0359 11.8054C16.0885 11.9298 16.0885 12.0702 16.0359 12.1946C15.9758 12.337 15.8016 12.449 15.4532 12.6729L10.7326 15.7076C10.3311 15.9657 10.1304 16.0948 9.96438 16.0829C9.81971 16.0726 9.68666 15.9999 9.59974 15.8838C9.5 15.7506 9.5 15.512 9.5 15.0347V8.96533Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>