diff --git a/Client/src/Components/RadioButton/index.css b/Client/src/Components/RadioButton/index.css
index dab37dda0..353bbdf55 100644
--- a/Client/src/Components/RadioButton/index.css
+++ b/Client/src/Components/RadioButton/index.css
@@ -1,13 +1,12 @@
-.create-monitor-form .custom-radio-button.MuiFormControlLabel-root {
+.create-monitor-form .custom-radio-button.MuiFormControlLabel-root,
+.configure-monitor .custom-radio-button.MuiFormControlLabel-root {
   padding: 5px;
   margin: -5px;
   border-radius: var(--env-var-radius-1);
 }
-.create-monitor-form .custom-radio-button.MuiFormControlLabel-root:hover {
-  background-color: var(--env-var-color-13);
-}
-.create-monitor-form .custom-radio-button.MuiFormControlLabel-root svg{
-  stroke-width: 0;
+.create-monitor-form .custom-radio-button.MuiFormControlLabel-root:hover,
+.configure-monitor .custom-radio-button.MuiFormControlLabel-root:hover {
+  background-color: var(--env-var-color-15);
 }
 
 .custom-radio-button.MuiFormControlLabel-root .MuiButtonBase-root {
diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index e69de29bb..f4e77196a 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -0,0 +1,43 @@
+.configure-monitor h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-large-plus);
+  color: var(--env-var-color-1);
+  font-weight: 600;
+}
+.configure-monitor h2.MuiTypography-root {
+  font-size: var(--env-var-font-size-large);
+  font-weight: 600;
+}
+.configure-monitor h2.MuiTypography-root,
+.configure-monitor .config-box p.MuiTypography-root {
+  color: var(--env-var-color-5);
+}
+.configure-monitor p.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+}
+.configure-monitor h6.MuiTypography-root {
+  opacity: 0.6;
+}
+.configure-monitor h6.MuiTypography-root,
+.configure-monitor p.MuiTypography-root:has(span),
+.configure-monitor p.MuiTypography-root span.MuiTypography-root {
+  font-size: var(--env-var-font-size-small-plus);
+}
+.configure-monitor button.MuiButtonBase-root {
+  font-size: var(--env-var-font-size-medium);
+}
+.configure-monitor button.MuiButtonBase-root {
+  height: var(--env-var-height-2);
+}
+.configure-monitor button.MuiButtonBase-root:has(svg) {
+  line-height: 1;
+}
+.configure-monitor .config-box {
+  padding: var(--env-var-spacing-4) 50px;
+  padding-bottom: 60px;
+  border: 1px solid var(--env-var-color-16);
+  border-radius: var(--env-var-radius-1);
+}
+.configure-monitor .config-box .MuiBox-root,
+.configure-monitor .config-box .MuiStack-root {
+  flex: 1;
+}
\ No newline at end of file
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 95e18ce9a..e756d0173 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -4,9 +4,54 @@ import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 import axiosInstance from "../../../Utils/axiosConfig";
 import Button from "../../../Components/Button";
+import { Box, Stack, Typography } from "@mui/material";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
+import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
+import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
+import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 
 import "./index.css";
+import Field from "../../../Components/Inputs/Field";
+import RadioButton from "../../../Components/RadioButton";
+
+const formatDurationRounded = (ms) => {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  let time = "";
+  if (days > 0) {
+    time += `${days} day${days !== 1 ? "s" : ""}`;
+    return time;
+  }
+  if (hours > 0) {
+    time += `${hours} hour${hours !== 1 ? "s" : ""}`;
+    return time;
+  }
+  if (minutes > 0) {
+    time += `${minutes} minute${minutes !== 1 ? "s" : ""}`;
+    return time;
+  }
+  if (seconds > 0) {
+    time += `${seconds} second${seconds !== 1 ? "s" : ""}`;
+    return time;
+  }
+
+  return time;
+};
+
+/**
+ * Helper function to get duration since last check
+ * @param {Array} checks Array of check objects.
+ * @returns {number} Timestamp of the most recent check.
+ */
+const getLastChecked = (checks) => {
+  if (!checks || checks.length === 0) {
+    return 0; // Handle case when no checks are available
+  }
+  return new Date() - new Date(checks[0].createdAt);
+};
 
 /**
  * Configure page displays monitor configurations and allows for editing actions.
@@ -54,6 +99,139 @@ const Configure = () => {
           },
         }}
       />
+      <Stack gap={theme.gap.xl}>
+        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+          {monitor?.status ? <GreenCheck /> : <RedCheck />}
+          <Box>
+            <Typography component="h1" sx={{ lineHeight: 1 }}>
+              {monitor?.url.replace(/^https?:\/\//, "") || "..."}
+            </Typography>
+            <Typography mt={theme.gap.small}>
+              <Typography
+                component="span"
+                sx={{
+                  color: monitor?.status
+                    ? "var(--env-var-color-17)"
+                    : "var(--env-var-color-24)",
+                }}
+              >
+                Your site is {monitor?.status ? "up" : "down"}.
+              </Typography>{" "}
+              Checking every {formatDurationRounded(monitor?.interval)}. Last
+              time checked{" "}
+              {formatDurationRounded(getLastChecked(monitor?.checks))} ago.
+            </Typography>
+          </Box>
+          <Stack
+            direction="row"
+            gap={theme.gap.medium}
+            sx={{
+              ml: "auto",
+              alignSelf: "flex-end",
+            }}
+          >
+            <Button
+              level="tertiary"
+              label="Pause"
+              img={<PauseCircleOutlineIcon />}
+              sx={{
+                backgroundColor: "#f4f4f4",
+                pl: theme.gap.small,
+                pr: theme.gap.medium,
+                "& svg": {
+                  pr: theme.gap.xs,
+                },
+              }}
+            />
+            <Button
+              level="error"
+              label="Remove"
+              sx={{
+                boxShadow: "none",
+                px: theme.gap.ml,
+              }}
+            />
+          </Stack>
+        </Stack>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h2">General settings</Typography>
+            <Typography component="p" sx={{ mt: theme.gap.small }}>
+              Here you can select the URL of the host, together with the type of
+              monitor.
+            </Typography>
+          </Box>
+          <Stack gap={theme.gap.xl}>
+            <Field
+              type="url"
+              id="monitor-url"
+              label="URL to monitor"
+              placeholder="google.com"
+            />
+            <Field
+              type="text"
+              id="monitor-name"
+              label="Friendly name"
+              isOptional={true}
+              placeholder="Google"
+            />
+          </Stack>
+        </Stack>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h2">Checks to perform</Typography>
+            <Typography component="p" sx={{ mt: theme.gap.small }}>
+              You can always add or remove checks after adding your site.
+            </Typography>
+          </Box>
+          <Stack gap={theme.gap.xl}>
+            <RadioButton
+              id="monitor-checks-http"
+              title="HTTP/website monitoring"
+              desc="Use HTTP(s) to monitor your website or API endpoint."
+              size="small"
+              value="http"
+            />
+            <RadioButton
+              id="monitor-checks-ping"
+              title="Ping monitoring"
+              desc="Check whether your server is available or not."
+              size="small"
+              value="ping"
+            />
+            {/* <Box className="error-container">
+              {errors["type"] ? (
+                <Typography component="p" className="input-error">
+                  {errors["type"]}
+                </Typography>
+              ) : (
+                ""
+              )}
+            </Box> */}
+          </Stack>
+        </Stack>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h2">Advanced settings</Typography>
+          </Box>
+          <Stack gap={theme.gap.xl}></Stack>
+        </Stack>
+      </Stack>
     </div>
   );
 };