diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index f4e77196a..b1808b237 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -8,10 +8,12 @@
   font-weight: 600;
 }
 .configure-monitor h2.MuiTypography-root,
-.configure-monitor .config-box p.MuiTypography-root {
+.configure-monitor .config-box p.MuiTypography-root,
+.configure-monitor .MuiSelect-select {
   color: var(--env-var-color-5);
 }
-.configure-monitor p.MuiTypography-root {
+.configure-monitor p.MuiTypography-root,
+.configure-monitor .MuiSelect-select {
   font-size: var(--env-var-font-size-medium);
 }
 .configure-monitor h6.MuiTypography-root {
@@ -40,4 +42,16 @@
 .configure-monitor .config-box .MuiBox-root,
 .configure-monitor .config-box .MuiStack-root {
   flex: 1;
-}
\ No newline at end of file
+}
+.MuiInputBase-root:has(#monitor-interval) {
+  height: 34px;
+}
+#monitor-interval {
+  padding: 0 10px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.MuiInputBase-root:not(.Mui-focused):has(#monitor-interval):hover fieldset {
+  border-color: var(--env-var-color-29);
+}
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index e756d0173..0784399cc 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -4,15 +4,16 @@ 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 Field from "../../../Components/Inputs/Field";
+import RadioButton from "../../../Components/RadioButton";
+import { Box, MenuItem, Select, 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 KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 
 import "./index.css";
-import Field from "../../../Components/Inputs/Field";
-import RadioButton from "../../../Components/RadioButton";
 
 const formatDurationRounded = (ms) => {
   const seconds = Math.floor(ms / 1000);
@@ -58,13 +59,15 @@ const getLastChecked = (checks) => {
  * @component
  */
 const Configure = () => {
+  const MS_PER_MINUTE = 60000;
   const navigate = useNavigate();
   const theme = useTheme();
   const dispatch = useDispatch();
+  const { authToken } = useSelector((state) => state.auth);
+  const { monitorId } = useParams();
 
   const [monitor, setMonitor] = useState();
-  const { monitorId } = useParams();
-  const { authToken } = useSelector((state) => state.auth);
+  const [errors, setErrors] = useState({});
   useEffect(() => {
     const fetchMonitor = async () => {
       const res = await axiosInstance.get(`/monitors/${monitorId}`, {
@@ -72,11 +75,20 @@ const Configure = () => {
           Authorization: `Bearer ${authToken}`,
         },
       });
-      setMonitor(res.data.data);
+      let data = res.data.data;
+      setMonitor({
+        name: data.name,
+        url: data.url.replace(/^https?:\/\//, ""),
+        type: data.type,
+        interval: data.interval / MS_PER_MINUTE,
+        status: data.status,
+      });
     };
     fetchMonitor();
   }, [monitorId, authToken]);
 
+  const frequencies = [1, 2, 3, 4, 5];
+
   return (
     <div
       className="configure-monitor"
@@ -99,139 +111,176 @@ 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"
+      <form className="configure-monitor-form" noValidate spellCheck="false">
+        <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={{
-                  color: monitor?.status
-                    ? "var(--env-var-color-17)"
-                    : "var(--env-var-color-24)",
+                  backgroundColor: "#f4f4f4",
+                  pl: theme.gap.small,
+                  pr: theme.gap.medium,
+                  "& svg": {
+                    pr: theme.gap.xs,
+                  },
                 }}
-              >
-                Your site is {monitor?.status ? "up" : "down"}.
-              </Typography>{" "}
-              Checking every {formatDurationRounded(monitor?.interval)}. Last
-              time checked{" "}
-              {formatDurationRounded(getLastChecked(monitor?.checks))} ago.
-            </Typography>
-          </Box>
+              />
+              <Button
+                level="error"
+                label="Remove"
+                sx={{
+                  boxShadow: "none",
+                  px: theme.gap.ml,
+                }}
+              />
+            </Stack>
+          </Stack>
           <Stack
+            className="config-box"
             direction="row"
-            gap={theme.gap.medium}
-            sx={{
-              ml: "auto",
-              alignSelf: "flex-end",
-            }}
+            justifyContent="space-between"
+            gap={theme.gap.xxl}
           >
-            <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,
-              }}
-            />
+            <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"
+                value={monitor?.url}
+              />
+              <Field
+                type="text"
+                id="monitor-name"
+                label="Friendly name"
+                isOptional={true}
+                placeholder="Google"
+                value={monitor?.name}
+              />
+            </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"
+                checked={monitor?.type === "http"}
+              />
+              <RadioButton
+                id="monitor-checks-ping"
+                title="Ping monitoring"
+                desc="Check whether your server is available or not."
+                size="small"
+                value="ping"
+                checked={monitor?.type === "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}>
+              <Select
+                id="monitor-interval"
+                value={monitor?.interval || 1}
+                MenuProps={{
+                  PaperProps: {
+                    style: {
+                      marginTop: "10px",
+                    },
+                  },
+                }}
+                IconComponent={KeyboardArrowDownIcon}
+              >
+                {frequencies.map((freq) => (
+                  <MenuItem
+                    key={`port-${freq}`}
+                    value={freq}
+                    disableRipple
+                    sx={{
+                      fontSize: "13px",
+                      borderRadius: `${theme.shape.borderRadius}px`,
+                      margin: theme.gap.xs,
+                    }}
+                  >
+                    {freq} {freq === 1 ? "minute" : "minutes"}
+                  </MenuItem>
+                ))}
+              </Select>
+            </Stack>
           </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 direction="row" justifyContent="flex-end" mt={theme.gap.xl}>
+          <Button level="primary" label="Save" sx={{ px: theme.gap.ml }} />
         </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>
+      </form>
     </div>
   );
 };