diff --git a/Client/src/Pages/PageSpeed/Configure/index.css b/Client/src/Pages/PageSpeed/Configure/index.css
index c9790c3d8..ee04d7ab2 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.css
+++ b/Client/src/Pages/PageSpeed/Configure/index.css
@@ -1,13 +1,7 @@
-.configure-pagespeed .checkbox-wrapper {
-  margin-bottom: 1px;
-}
 .configure-pagespeed button {
   height: var(--env-var-height-2);
 }
 
-.configure-pagespeed h3.MuiTypography-root {
-  flex: 0.7;
-}
 .configure-pagespeed .field,
 .configure-pagespeed .section-disabled,
 .configure-pagespeed .select-wrapper {
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index b056404eb..297940cd3 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -13,6 +13,7 @@ import {
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
+import { ConfigBox } from "../../Monitors/styled";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
@@ -22,20 +23,27 @@ import PulseDot from "../../../Components/Animated/PulseDot";
 import LoadingButton from "@mui/lab/LoadingButton";
 import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
 import SkeletonLayout from "./skeleton";
-import "./index.css";
 import useUtils from "../../Monitors/utils";
+import "./index.css";
 
 const PageSpeedConfigure = () => {
   const theme = useTheme();
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const MS_PER_MINUTE = 60000;
-  const { authToken } = useSelector((state) => state.auth);
+  const { user, authToken } = useSelector((state) => state.auth);
   const { isLoading } = useSelector((state) => state.pageSpeedMonitors);
   const { monitorId } = useParams();
   const [monitor, setMonitor] = useState({});
   const [errors, setErrors] = useState({});
   const { statusColor, pagespeedStatusMsg, determineState } = useUtils();
+  const idMap = {
+    "monitor-url": "url",
+    "monitor-name": "name",
+    "monitor-checks-http": "type",
+    "monitor-checks-ping": "type",
+    "notify-email-default": "notification-email",
+  };
 
   const frequencies = [
     { _id: 3, name: "3 minutes" },
@@ -68,24 +76,58 @@ const PageSpeedConfigure = () => {
     fetchMonitor();
   }, [dispatch, authToken, monitorId, navigate]);
 
-  const handleChange = (event, id) => {
-    let { value } = event.target;
-    if (id === "interval") {
-      value = value * MS_PER_MINUTE;
+  const handleChange = (event, name) => {
+    let { value, id } = event.target;
+    if (!name) name = idMap[id];
+
+    if (name.includes("notification-")) {
+      name = name.replace("notification-", "");
+      let hasNotif = monitor.notifications.some(
+        (notification) => notification.type === name
+      );
+      setMonitor((prev) => {
+        const notifs = [...prev.notifications];
+        if (hasNotif) {
+          return {
+            ...prev,
+            notifications: notifs.filter((notif) => notif.type !== name),
+          };
+        } else {
+          return {
+            ...prev,
+            notifications: [
+              ...notifs,
+              name === "email"
+                ? { type: name, address: value }
+                : // TODO - phone number
+                  { type: name, phone: value },
+            ],
+          };
+        }
+      });
+    } else {
+      if (name === "interval") {
+        value = value * MS_PER_MINUTE;
+      }
+      setMonitor((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+
+      const validation = monitorValidation.validate(
+        { [name]: value },
+        { abortEarly: false }
+      );
+
+      setErrors((prev) => {
+        const updatedErrors = { ...prev };
+
+        if (validation.error)
+          updatedErrors[name] = validation.error.details[0].message;
+        else delete updatedErrors[name];
+        return updatedErrors;
+      });
     }
-    setMonitor((prev) => ({ ...prev, [id]: value }));
-
-    const { error } = monitorValidation.validate(
-      { [id]: value },
-      { abortEarly: false }
-    );
-
-    setErrors((prev) => {
-      const newErrors = { ...prev };
-      if (error) newErrors[id] = error.details[0].message;
-      else delete newErrors[id];
-      return newErrors;
-    });
   };
 
   const handlePause = async () => {
@@ -249,102 +291,116 @@ const PageSpeedConfigure = () => {
                 </LoadingButton>
               </Box>
             </Stack>
-            <Stack
-              border={1}
-              borderColor={theme.palette.border.light}
-              borderRadius={theme.shape.borderRadius}
-              backgroundColor={theme.palette.background.main}
-              p={theme.spacing(20)}
-              pl={theme.spacing(15)}
-              gap={theme.spacing(20)}
-              sx={{
-                "& h3, & p": {
-                  color: theme.palette.text.secondary,
-                },
-              }}
-            >
-              <Stack direction="row">
-                <Typography component="h3">Monitor display name</Typography>
-                <Field
-                  type="text"
-                  id="monitor-name"
-                  placeholder="Example monitor"
-                  value={monitor?.name || ""}
-                  onChange={(event) => handleChange(event, "name")}
-                  error={errors.name}
-                />
-              </Stack>
+            <ConfigBox>
+              <Box>
+                <Typography component="h2">General settings</Typography>
+                <Typography component="p">
+                  Here you can select the URL of the host, together with the
+                  type of monitor.
+                </Typography>
+              </Box>
               <Stack
-                direction="row"
+                gap={theme.spacing(20)}
                 sx={{
                   ".MuiInputBase-root:has(> .Mui-disabled)": {
                     backgroundColor: theme.palette.background.accent,
                   },
                 }}
               >
-                <Typography component="h3">URL</Typography>
                 <Field
                   type="url"
                   id="monitor-url"
+                  label="URL"
                   placeholder="random.website.com"
                   value={monitor?.url?.replace("http://", "") || ""}
-                  onChange={(event) => handleChange(event, "url")}
+                  onChange={handleChange}
                   error={errors.url}
                   disabled={true}
                 />
-              </Stack>
-              <Stack direction="row">
-                <Typography component="h3">Check frequency</Typography>
-                <Select
-                  id="monitor-frequency"
-                  items={frequencies}
-                  value={monitor?.interval / MS_PER_MINUTE || 3}
-                  onChange={(event) => handleChange(event, "interval")}
+                <Field
+                  type="text"
+                  id="monitor-name"
+                  label="Monitor display name"
+                  placeholder="Example monitor"
+                  isOptional={true}
+                  value={monitor?.name || ""}
+                  onChange={handleChange}
+                  error={errors.name}
                 />
               </Stack>
-              <Stack direction="row">
-                <Typography component="h3">
-                  Incidents notifications{" "}
-                  <Typography component="span">(coming soon)</Typography>
+            </ConfigBox>
+            <ConfigBox>
+              <Box>
+                <Typography component="h2">Incident notifications</Typography>
+                <Typography component="p">
+                  When there is an incident, notify users.
                 </Typography>
-                <Stack
-                  className="section-disabled"
-                  backgroundColor={theme.palette.background.fill}
-                >
-                  <Typography mb={theme.spacing(4)}>
-                    When there is a new incident,
-                  </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>
+              <Stack gap={theme.spacing(6)}>
+                <Typography component="p">
+                  When there is a new incident,
+                </Typography>
+                <Checkbox
+                  id="notify-sms"
+                  label="Notify via SMS (coming soon)"
+                  isChecked={false}
+                  value=""
+                  onChange={() => logger.warn("disabled")}
+                  isDisabled={true}
+                />
+                <Checkbox
+                  id="notify-email-default"
+                  label={`Notify via email (to ${user.email})`}
+                  isChecked={
+                    monitor?.notifications?.some(
+                      (notification) => notification.type === "email"
+                    ) || false
+                  }
+                  value={user?.email}
+                  onChange={(event) => handleChange(event)}
+                />
+                <Checkbox
+                  id="notify-email"
+                  label="Also notify via email to multiple addresses (coming soon)"
+                  isChecked={false}
+                  value=""
+                  onChange={() => logger.warn("disabled")}
+                  isDisabled={true}
+                />
+                {monitor?.notifications?.some(
+                  (notification) => notification.type === "emails"
+                ) ? (
                   <Box mx={theme.spacing(16)}>
                     <Field
-                      id="notify-emails-list"
-                      placeholder="notifications@gmail.com"
+                      id="notify-email-list"
+                      type="text"
+                      placeholder="name@gmail.com"
                       value=""
                       onChange={() => logger.warn("disabled")}
-                      error=""
                     />
                     <Typography mt={theme.spacing(4)}>
                       You can separate multiple emails with a comma
                     </Typography>
                   </Box>
-                </Stack>
+                ) : (
+                  ""
+                )}
               </Stack>
-            </Stack>
+            </ConfigBox>
+            <ConfigBox>
+              <Box>
+                <Typography component="h2">Advanced settings</Typography>
+              </Box>
+              <Stack gap={theme.spacing(20)}>
+                <Select
+                  id="monitor-frequency"
+                  label="Check frequency"
+                  items={frequencies}
+                  value={monitor?.interval / MS_PER_MINUTE || 3}
+                  onChange={(event) => handleChange(event, "interval")}
+                />
+              </Stack>
+            </ConfigBox>
             <Stack direction="row" justifyContent="flex-end" mt="auto">
               <LoadingButton
                 loading={isLoading}