diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 9cd016cf7..91d250dd9 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
-import { Box, Modal, Stack, Typography } from "@mui/material";
+import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router";
 import {
@@ -21,6 +21,53 @@ import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 
 import "./index.css";
 
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Skeleton variant="rounded" width="15%" height={34} />
+      <Stack gap={theme.gap.xl} mt={theme.gap.medium} maxWidth="1000px">
+        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+          <Skeleton
+            variant="circular"
+            style={{ minWidth: 24, minHeight: 24 }}
+          />
+          <Box width="80%">
+            <Skeleton
+              variant="rounded"
+              width="50%"
+              height={24}
+              sx={{ mb: theme.gap.small }}
+            />
+            <Skeleton variant="rounded" width="50%" height={18} />
+          </Box>
+          <Stack
+            direction="row"
+            gap={theme.gap.medium}
+            sx={{
+              ml: "auto",
+              alignSelf: "flex-end",
+            }}
+          >
+            <Skeleton variant="rounded" width={100} height={34} />
+            <Skeleton variant="rounded" width={100} height={34} />
+          </Stack>
+        </Stack>
+        <Skeleton variant="rounded" width="100%" height={500} />
+        <Stack direction="row" justifyContent="flex-end">
+          <Skeleton variant="rounded" width="15%" height={34} />
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
 const PageSpeedConfigure = () => {
   const theme = useTheme();
   const navigate = useNavigate();
@@ -55,7 +102,7 @@ const PageSpeedConfigure = () => {
 
   const handleChange = (event, id) => {
     let { value } = event.target;
-    if ((id = "interval")) {
+    if (id === "interval") {
       value = value * MS_PER_MINUTE;
     }
     setMonitor((prev) => ({ ...prev, [id]: value }));
@@ -97,162 +144,174 @@ const PageSpeedConfigure = () => {
     }
   };
 
+  let loading = Object.keys(monitor).length === 0;
+
   return (
     <Box className="configure-pagespeed">
-      <Button
-        level="tertiary"
-        label="Back"
-        animate="slideLeft"
-        img={<WestRoundedIcon />}
-        onClick={() => navigate(-1)}
-        sx={{
-          backgroundColor: theme.palette.otherColors.fillGray,
-          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={handleSave}
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: theme.gap.large,
-          maxWidth: "1000px",
-        }}
-      >
-        <Stack direction="row" gap={theme.gap.small}>
-          {monitor?.status ? <GreenCheck /> : <RedCheck />}
-          <Box>
-            <Typography component="h1" mb={theme.gap.xs} sx={{ lineHeight: 1 }}>
-              {monitor?.url}
-            </Typography>
-            <Typography
-              component="span"
-              sx={{
-                color: monitor?.status
-                  ? "var(--env-var-color-17)"
-                  : "var(--env-var-color-24)",
-              }}
-            >
-              Your pagespeed monitor is {monitor?.status ? "live" : "down"}.
-            </Typography>
-          </Box>
-          <Box alignSelf="flex-end" ml="auto">
-            <Button
-              level="tertiary"
-              label="Pause"
-              animate="rotate180"
-              img={<PauseCircleOutlineIcon />}
-              sx={{
-                backgroundColor: theme.palette.otherColors.fillGray,
-                pl: theme.gap.small,
-                pr: theme.gap.medium,
-                "& svg": {
-                  mr: theme.gap.xs,
-                },
-              }}
-            />
-            <Button
-              level="error"
-              label="Remove"
-              sx={{
-                boxShadow: "none",
-                px: theme.gap.ml,
-                ml: theme.gap.medium,
-              }}
-              onClick={() => setIsOpen(true)}
-            />
-          </Box>
-        </Stack>
-        <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={monitor?.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={monitor?.url?.replace("http://", "") || ""}
-              onChange={(event) => handleChange(event, "url")}
-              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")}
-            />
-          </Stack>
-          <Stack direction="row">
-            <Typography component="h3">
-              Incidents notifications{" "}
-              <Typography component="span">(coming soon)</Typography>
-            </Typography>
-            <Stack className="section-disabled">
-              <Typography mb={theme.gap.small}>
-                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 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
+      {loading ? (
+        <SkeletonLayout />
+      ) : (
+        <>
+          <Button
+            level="tertiary"
+            label="Back"
+            animate="slideLeft"
+            img={<WestRoundedIcon />}
+            onClick={() => navigate(-1)}
+            sx={{
+              backgroundColor: theme.palette.otherColors.fillGray,
+              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={handleSave}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: theme.gap.large,
+              maxWidth: "1000px",
+            }}
+          >
+            <Stack direction="row" gap={theme.gap.small}>
+              {monitor?.status ? <GreenCheck /> : <RedCheck />}
+              <Box>
+                <Typography
+                  component="h1"
+                  mb={theme.gap.xs}
+                  sx={{ lineHeight: 1 }}
+                >
+                  {monitor?.url}
+                </Typography>
+                <Typography
+                  component="span"
+                  sx={{
+                    color: monitor?.status
+                      ? "var(--env-var-color-17)"
+                      : "var(--env-var-color-24)",
+                  }}
+                >
+                  Your pagespeed monitor is {monitor?.status ? "live" : "down"}.
                 </Typography>
               </Box>
+              <Box alignSelf="flex-end" ml="auto">
+                <Button
+                  level="tertiary"
+                  label="Pause"
+                  animate="rotate180"
+                  img={<PauseCircleOutlineIcon />}
+                  sx={{
+                    backgroundColor: theme.palette.otherColors.fillGray,
+                    pl: theme.gap.small,
+                    pr: theme.gap.medium,
+                    "& svg": {
+                      mr: theme.gap.xs,
+                    },
+                  }}
+                />
+                <Button
+                  level="error"
+                  label="Remove"
+                  sx={{
+                    boxShadow: "none",
+                    px: theme.gap.ml,
+                    ml: theme.gap.medium,
+                  }}
+                  onClick={() => setIsOpen(true)}
+                />
+              </Box>
             </Stack>
-          </Stack>
-        </Stack>
-        <Stack direction="row" justifyContent="flex-end">
-          <Button
-            type="submit"
-            level="primary"
-            label="Save"
-            onClick={handleSave}
-            sx={{ px: theme.gap.large, mt: theme.gap.large }}
-          />
-        </Stack>
-      </form>
+            <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={monitor?.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={monitor?.url?.replace("http://", "") || ""}
+                  onChange={(event) => handleChange(event, "url")}
+                  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")}
+                />
+              </Stack>
+              <Stack direction="row">
+                <Typography component="h3">
+                  Incidents notifications{" "}
+                  <Typography component="span">(coming soon)</Typography>
+                </Typography>
+                <Stack className="section-disabled">
+                  <Typography mb={theme.gap.small}>
+                    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 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">
+              <Button
+                type="submit"
+                level="primary"
+                label="Save"
+                onClick={handleSave}
+                sx={{ px: theme.gap.large, mt: theme.gap.large }}
+              />
+            </Stack>
+          </form>
+        </>
+      )}
       <Modal
         aria-labelledby="modal-delete-pagespeed-monitor"
         aria-describedby="delete-pagespeed-monitor-confirmation"