diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index d6fca146f..3cc9e5bd6 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -25,7 +25,7 @@ import withAdminProp from "./HOC/withAdminProp";
 import Configure from "./Pages/Monitors/Configure";
 import PageSpeed from "./Pages/PageSpeed";
 import CreatePageSpeed from "./Pages/PageSpeed/CreatePageSpeed";
-import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenanceWindow";
+import CreateMaintenance from "./Pages/Maintenance/CreateMaintenance";
 import PageSpeedDetails from "./Pages/PageSpeed/Details";
 import PageSpeedConfigure from "./Pages/PageSpeed/Configure";
 import { ThemeProvider } from "@emotion/react";
@@ -89,7 +89,7 @@ function App() {
           />
           <Route
             path="/maintenance/create"
-            element={<CreateNewMaintenanceWindow />}
+            element={<CreateMaintenance />}
           />
           <Route
             path="settings"
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css b/Client/src/Pages/Maintenance/CreateMaintenance/index.css
similarity index 100%
rename from Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
rename to Client/src/Pages/Maintenance/CreateMaintenance/index.css
diff --git a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
new file mode 100644
index 000000000..3c51c420e
--- /dev/null
+++ b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
@@ -0,0 +1,22 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useState } from "react";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
+import { maintenanceWindowValidation } from "../../../Validation/validation";
+import { logger } from "../../../Utils/Logger";
+import { createToast } from "../../../Utils/toastUtils";
+import Select from "../../../Components/Inputs/Select";
+import dayjs from "dayjs";
+import Field from "../../../Components/Inputs/Field";
+import "./index.css";
+
+const CreateMaintenance = () => {
+  const theme = useTheme();
+
+  return <Box className="create-maintenance"></Box>;
+};
+
+export default CreateMaintenance;
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
deleted file mode 100644
index 43102ac21..000000000
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ /dev/null
@@ -1,298 +0,0 @@
-import { Box, Button, Stack, Typography } from "@mui/material";
-import "./index.css";
-import { useState } from "react";
-import Back from "../../../assets/icons/left-arrow-long.svg?react";
-import Select from "../../../Components/Inputs/Select";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import dayjs from "dayjs";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
-import Field from "../../../Components/Inputs/Field";
-import { maintenanceWindowValidation } from "../../../Validation/validation";
-import { logger } from "../../../Utils/Logger";
-import { createToast } from "../../../Utils/toastUtils";
-import { useTheme } from "@emotion/react";
-
-const directory = {
-  title: "Create a maintenance window",
-  description: "Your pings won’t be sent in this time frame.",
-};
-
-const repeatOptions = [
-  { _id: 1, name: "Don't repeat" },
-  { _id: 2, name: "Repeat daily" },
-  { _id: 3, name: "Repeat weekly" },
-];
-
-const configOptionTitle = (title, description) => {
-  return (
-    <Stack width="40%" gap={1}>
-      <Typography
-        style={{
-          fontWeight: 600,
-          fontSize: "var(--env-var-font-size-medium)",
-        }}
-      >
-        {title}
-      </Typography>
-      {description && (
-        <Typography
-          style={{
-            fontSize: "var(--env-var-font-size-small)",
-          }}
-        >
-          {description}
-        </Typography>
-      )}
-    </Stack>
-  );
-};
-
-const durationOptions = [
-  { _id: "minutes", name: "minutes" },
-  { _id: "hours", name: "hours" },
-  { _id: "days", name: "days" },
-];
-
-const CreateNewMaintenanceWindow = () => {
-  const theme = useTheme();
-
-  const [values, setValues] = useState({
-    repeat: 1,
-    date: dayjs(),
-    startTime: dayjs(),
-    duration: "60",
-    unit: "minutes",
-    displayName: "",
-    AddMonitors: "",
-  });
-  const [errors, setErrors] = useState({});
-
-  const handleChange = (event, name) => {
-    const { value } = event.target;
-    setValues((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleSubmit = async () => {
-    const data = {
-      repeat: values.repeat,
-      date: values.date.format("YYYY-MM-DD"),
-      startTime: values.startTime.format("HH:mm"),
-      duration: values.duration,
-      unit: values.unit,
-      displayName: values.displayName,
-      addMonitors: values.AddMonitors,
-    };
-
-    const { error } = maintenanceWindowValidation.validate(data, {
-      abortEarly: false,
-    });
-    logger.log("error: ", error);
-    if (!error || error.details.length === 0) {
-      setErrors({});
-    } else {
-      const newErrors = {};
-      error.details.forEach((err) => {
-        newErrors[err.path[0]] = err.message;
-      });
-      setErrors(newErrors);
-      createToast({
-        body:
-          error.details && error.details.length > 0
-            ? error.details[0].message
-            : "Error validating data",
-      });
-      logger.error("Validation errors:", error.details);
-    }
-
-    logger.log("Submitting data: ", data);
-  };
-
-  const configOptions = [
-    {
-      title: "Repeat",
-      component: (
-        <Select
-          onChange={(e) => handleChange(e, "repeat")}
-          id="repeat-mode"
-          items={repeatOptions}
-          value={values.repeat}
-        />
-      ),
-    },
-    {
-      title: "Date",
-      component: (
-        <LocalizationProvider
-          className="date-localization-provider"
-          dateAdapter={AdapterDayjs}
-        >
-          <DatePicker
-            className="date-picker"
-            defaultValue={values.date}
-            onChange={(date) =>
-              handleChange({ target: { value: date } }, "date")
-            }
-          />
-        </LocalizationProvider>
-      ),
-    },
-    {
-      title: "Start time",
-      component: (
-        <LocalizationProvider
-          className="time-localization-provider"
-          dateAdapter={AdapterDayjs}
-        >
-          <MobileTimePicker
-            className="time-picker"
-            defaultValue={values.startTime}
-            onChange={(time) =>
-              handleChange({ target: { value: time } }, "startTime")
-            }
-          />
-        </LocalizationProvider>
-      ),
-    },
-    {
-      title: "Duration",
-      component: (
-        <Stack
-          className="duration-config"
-          gap={theme.spacing(5)}
-          direction="row"
-        >
-          <Field
-            id="duration-value"
-            placeholder="60"
-            onChange={(e) => handleChange(e, "duration")}
-            value={values.duration}
-            error={errors.duration}
-            type="number"
-          />
-          <Select
-            onChange={(e) => handleChange(e, "unit")}
-            id="duration-unit"
-            items={durationOptions}
-            value={values.unit}
-          />
-        </Stack>
-      ),
-    },
-    {
-      title: "Display name",
-      component: (
-        <Field
-          id="display-name"
-          placeholder="Maintanence at __ : __ for ___ minutes"
-          value={values.displayName}
-          onChange={(e) => handleChange(e, "displayName")}
-          error={errors.displayName}
-        />
-      ),
-    },
-    {
-      title: "Add monitors",
-      component: (
-        <Stack
-          className="add-monitors-fields"
-          sx={{ width: "60%", maxWidth: "380px" }}
-          gap={theme.spacing(5)}
-        >
-          <Field
-            id="add-monitors"
-            placeholder="Start typing to search for current monitors"
-            value={values.AddMonitors}
-            onChange={(e) => handleChange(e, "AddMonitors")}
-            error={errors.addMonitors}
-          />
-          <Typography
-            sx={{
-              width: "fit-content",
-              fontSize: "var(--env-var-font-size-small)",
-              borderBottom: `1px dashed ${theme.palette.primary.main}`,
-              paddingBottom: "4px",
-            }}
-          >
-            Add all monitors to this maintenance window
-          </Typography>
-        </Stack>
-      ),
-    },
-  ];
-
-  return (
-    <div className="create-maintenance-window">
-      <Stack gap={theme.spacing(10)}>
-        <Button
-          variant="contained"
-          color="secondary"
-          sx={{
-            width: "100px",
-            height: "30px",
-            gap: "10px",
-          }}
-        >
-          <Back />
-          Back
-        </Button>
-        <Box>
-          <Typography
-            sx={{
-              fontSize: "var(--env-var-font-size-large)",
-              fontWeight: 600,
-              color: theme.palette.text.secondary,
-            }}
-          >
-            {directory.title}
-          </Typography>
-
-          <Typography sx={{ fontSize: "var(--env-var-font-size-medium)" }}>
-            {directory.description}
-          </Typography>
-        </Box>
-        <Stack
-          className="maintenance-options"
-          gap={theme.spacing(20)}
-          paddingY={theme.spacing(15)}
-          paddingX={theme.spacing(20)}
-          sx={{
-            border: 1,
-            borderColor: theme.palette.border.light,
-            borderRadius: theme.shape.borderRadius,
-            backgroundColor: theme.palette.background.main,
-          }}
-        >
-          {configOptions.map((item, index) => (
-            <Stack key={index} display="-webkit-inline-box">
-              {item.title && configOptionTitle(item.title, item.description)}
-              {item.component && item.component}
-            </Stack>
-          ))}
-        </Stack>
-        <Stack justifyContent="end" direction="row" marginTop={3}>
-          <Button
-            variant="text"
-            color="info"
-            sx={{
-              "&:hover": {
-                backgroundColor: "transparent",
-              },
-            }}
-          >
-            Cancel
-          </Button>
-          <Button variant="contained" color="primary" onClick={handleSubmit}>
-            Create
-          </Button>
-        </Stack>
-      </Stack>
-    </div>
-  );
-};
-
-export default CreateNewMaintenanceWindow;
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.css b/Client/src/Pages/Monitors/CreateMonitor/index.css
index c38345be7..e69de29bb 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.css
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.css
@@ -1,34 +0,0 @@
-.create-monitor p.MuiTypography-root,
-.create-monitor button.MuiButtonBase-root {
-  font-size: var(--env-var-font-size-medium);
-}
-.create-monitor h6.MuiTypography-root,
-.create-monitor .MuiBox-root .field + p.MuiTypography-root {
-  font-size: var(--env-var-font-size-small-plus);
-  opacity: 0.8;
-}
-.create-monitor button.MuiButtonBase-root {
-  height: 34px;
-}
-
-.create-monitor .error-container {
-  position: relative;
-}
-.create-monitor .error-container p.MuiTypography-root.input-error {
-  opacity: 0.8;
-  position: absolute;
-  top: 0;
-}
-.create-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) {
-  position: relative;
-}
-.create-monitor span.MuiTypography-root.input-error {
-  position: absolute;
-  top: 100%;
-}
-
-.create-monitor .MuiStack-root .MuiButtonGroup-root button {
-  font-size: var(--env-var-font-size-small);
-  height: 28px;
-  padding: 8px;
-}