diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index f1c24049a..0482aec5d 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -1,24 +1,22 @@
-import { Routes, Route, Navigate } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 // import "./App.css";
 import NotFound from "./Pages/NotFound";
-import Login from "./Pages/Login";
-import Register from "./Pages/Register";
+import Login from "./Pages/Auth/Login";
+import Register from "./Pages/Auth/Register";
 import HomeLayout from "./Layouts/HomeLayout";
-import Demo from "./Pages/Demo/Demo";
-import PlayGround from "./Pages/PlayGround/PlayGround";
 import Account from "./Pages/Account";
 import Monitors from "./Pages/Monitors";
-import CreateNewMonitor from "./Pages/CreateNewMonitor";
+import CreateMonitor from "./Pages/Monitors/CreateMonitor";
 import Incidents from "./Pages/Incidents";
 import Status from "./Pages/Status";
 import Integrations from "./Pages/Integrations";
 import Settings from "./Pages/Settings";
-import ForgotPassword from "./Pages/ForgotPassword";
-import CheckEmail from "./Pages/CheckEmail";
-import SetNewPassword from "./Pages/SetNewPassword";
-import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed";
+import ForgotPassword from "./Pages/Auth/ForgotPassword";
+import CheckEmail from "./Pages/Auth/CheckEmail";
+import SetNewPassword from "./Pages/Auth/SetNewPassword";
+import NewPasswordConfirmed from "./Pages/Auth/NewPasswordConfirmed";
 import ProtectedRoute from "./Components/ProtectedRoute";
-import Details from "./Pages/Details";
+import Details from "./Pages/Monitors/Details";
 import Maintenance from "./Pages/Maintenance";
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
@@ -39,7 +37,7 @@ function App() {
           />
           <Route
             path="/monitors/create"
-            element={<ProtectedRoute Component={CreateNewMonitor} />}
+            element={<ProtectedRoute Component={CreateMonitor} />}
           />
           <Route
             path="/monitors/:monitorId/"
@@ -82,10 +80,8 @@ function App() {
 
         <Route exact path="/login" element={<Login />} />
         <Route exact path="/register" element={<Register />} />
-        <Route exact path="/demo" element={<Demo />} />
         {/* <Route path="/toast" element={<ToastComponent />} /> */}
         <Route path="*" element={<NotFound />} />
-        <Route path="/playground" element={<PlayGround />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />
         <Route path="/check-email" element={<CheckEmail />} />
         <Route path="/set-new-password/:token" element={<SetNewPassword />} />
diff --git a/Client/src/Components/Dashboard/DashboardProgressBars/index.jsx b/Client/src/Components/Dashboard/DashboardProgressBars/index.jsx
deleted file mode 100644
index 4b81c9d1a..000000000
--- a/Client/src/Components/Dashboard/DashboardProgressBars/index.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { BarChart } from "@mui/x-charts/BarChart";
-
-const ChartsOverviewDemo = () => {
-  return (
-    <BarChart
-      series={[
-        { data: [35, 44, 24, 34] },
-        { data: [51, 6, 49, 30] },
-        { data: [15, 25, 30, 50] },
-        { data: [60, 50, 15, 25] },
-      ]}
-      height={290}
-      xAxis={[{ data: ["Q1", "Q2", "Q3", "Q4"], scaleType: "band" }]}
-      margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
-    />
-  );
-};
-
-export default ChartsOverviewDemo;
diff --git a/Client/src/Components/Dashboard/DashboardSettingsIcon/index.css b/Client/src/Components/Dashboard/DashboardSettingsIcon/index.css
deleted file mode 100644
index ab55dd558..000000000
--- a/Client/src/Components/Dashboard/DashboardSettingsIcon/index.css
+++ /dev/null
@@ -1,9 +0,0 @@
-#dashboard-setting-menu-item {
-  width: 135px;
-  padding: 6px;
-  margin: 5px 12px;
-}
-
-#menu-appbar {
-  padding: var(--env-var-spacing-1);
-}
diff --git a/Client/src/Components/Dashboard/DashboardSettingsIcon/index.jsx b/Client/src/Components/Dashboard/DashboardSettingsIcon/index.jsx
deleted file mode 100644
index f01e65900..000000000
--- a/Client/src/Components/Dashboard/DashboardSettingsIcon/index.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import "./index.css";
-import { useState } from "react";
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import Menu from "@mui/material/Menu";
-import Tooltip from "@mui/material/Tooltip";
-import MenuItem from "@mui/material/MenuItem";
-import Typography from "@mui/material/Typography";
-import SvgIcon from "@mui/material/SvgIcon";
-import SettingsIcon from "@mui/icons-material/Settings";
-import { useTheme } from "@mui/material/styles";
-
-const settings = [
-  "Open Site",
-  "Detailed View",
-  "Incidents",
-  "Configure",
-  "Remove",
-];
-
-/**
- * DashboardSettings component
- *
- * A component that provides a settings menu accessible from an icon.
- *
- * @component
- * @example
- * return (
- *   <DashboardSettings />
- * )
- */
-function DashboardSettings() {
-  const theme = useTheme();
-  const [anchorElUser, setAnchorElUser] = useState(null);
-
-  /**
-   * Handles opening the user menu.
-   *
-   * @param {React.MouseEvent<HTMLElement>} event - The event triggered by clicking the user menu button.
-   */
-  const handleOpenUserMenu = (event) => {
-    setAnchorElUser(event.currentTarget);
-  };
-
-  /**
-   * Handles closing the user menu.
-   */
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
-
-  return (
-    <Box sx={{ flexGrow: 0 }}>
-      <Tooltip title="Open settings">
-        <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-          <SvgIcon component={SettingsIcon} />
-        </IconButton>
-      </Tooltip>
-      <Menu
-        sx={{ mt: theme.spacing(5.5) }}
-        id="menu-appbar"
-        anchorEl={anchorElUser}
-        anchorOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
-        keepMounted
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
-        open={Boolean(anchorElUser)}
-        onClose={handleCloseUserMenu}
-      >
-        {settings.map((setting) => (
-          <MenuItem
-            id="dashboard-setting-menu-item"
-            key={setting}
-            onClick={handleCloseUserMenu}
-          >
-            <Typography
-              style={{ fontSize: "var(--env-var-font-size-medium)" }}
-              textAlign="center"
-            >
-              {setting}
-            </Typography>
-          </MenuItem>
-        ))}
-      </Menu>
-    </Box>
-  );
-}
-
-export default DashboardSettings;
diff --git a/Client/src/Mock/sample_data.json b/Client/src/Mock/sample_data.json
deleted file mode 100644
index b391f4678..000000000
--- a/Client/src/Mock/sample_data.json
+++ /dev/null
@@ -1,534 +0,0 @@
-{
-    "success": true,
-    "msg": "Got monitor for 666c9146c9bfa20db790b1df successfully\"",
-    "data": [
-      {
-        "_id": "6671d8469ba14f9f260eed23",
-        "userId": "666c9146c9bfa20db790b1df",
-        "name": "Google Monitor",
-        "description": "Google",
-        "type": "ping",
-        "url": "127.0.0.1",
-        "isActive": true,
-        "interval": 10000,
-        "createdAt": "2024-06-18T18:56:06.212Z",
-        "updatedAt": "2024-06-18T18:56:06.212Z",
-        "__v": 0,
-        "checks": [
-          {
-            "_id": "6671d84a9ba14f9f260eed27",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": true,
-            "responseTime": 143,
-            "createdAt": "2024-06-18T18:56:10.082Z",
-            "updatedAt": "2024-06-18T18:56:10.082Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d84a9ba14f9f260eed27",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": true,
-            "responseTime": 70,
-            "createdAt": "2024-06-18T18:56:10.082Z",
-            "updatedAt": "2024-06-18T18:56:10.082Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d84a9ba14f9f260eed27",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": true,
-            "responseTime": 143,
-            "createdAt": "2024-06-18T18:56:10.082Z",
-            "updatedAt": "2024-06-18T18:56:10.082Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d84a9ba14f9f260eed27",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": true,
-            "responseTime": 70,
-            "createdAt": "2024-06-18T18:56:10.082Z",
-            "updatedAt": "2024-06-18T18:56:10.082Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8549ba14f9f260eed2d",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": false,
-            "responseTime": 120,
-            "createdAt": "2024-06-18T18:56:20.016Z",
-            "updatedAt": "2024-06-18T18:56:20.016Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d84a9ba14f9f260eed27",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": true,
-            "responseTime": 200,
-            "createdAt": "2024-06-18T18:56:10.082Z",
-            "updatedAt": "2024-06-18T18:56:10.082Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8549ba14f9f260eed2d",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": false,
-            "responseTime": 250,
-            "createdAt": "2024-06-18T18:56:20.016Z",
-            "updatedAt": "2024-06-18T18:56:20.016Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d84a9ba14f9f260eed27",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": false,
-            "responseTime": 180,
-            "createdAt": "2024-06-18T18:56:10.082Z",
-            "updatedAt": "2024-06-18T18:56:10.082Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8549ba14f9f260eed2d",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": true,
-            "responseTime": 200,
-            "createdAt": "2024-06-18T18:56:20.016Z",
-            "updatedAt": "2024-06-18T18:56:20.016Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d84a9ba14f9f260eed27",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": false,
-            "responseTime": 100,
-            "createdAt": "2024-06-18T18:56:10.082Z",
-            "updatedAt": "2024-06-18T18:56:10.082Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8549ba14f9f260eed2d",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": true,
-            "responseTime": 210,
-            "createdAt": "2024-06-18T18:56:20.016Z",
-            "updatedAt": "2024-06-18T18:56:20.016Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d85e9ba14f9f260eed3c",
-            "monitorId": "6671d8469ba14f9f260eed23",
-            "status": true,
-            "responseTime": 200,
-            "createdAt": "2024-06-18T18:56:30.050Z",
-            "updatedAt": "2024-06-18T18:56:30.050Z",
-            "__v": 0
-          }
-        ]
-      },
-      {
-        "_id": "6671d8529ba14f9f260eed2b",
-        "userId": "666c9146c9bfa20db790b1df",
-        "name": "Google Monitor",
-        "description": "Google",
-        "type": "http",
-        "url": "https://www.google.com/404",
-        "isActive": true,
-        "interval": 10000,
-        "createdAt": "2024-06-18T18:56:18.555Z",
-        "updatedAt": "2024-06-18T18:56:18.555Z",
-        "__v": 0,
-        "checks": [
-              {
-                "_id": "6671d8549ba14f9f260eed31",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": false,
-                "responseTime": 167,
-                "statusCode": 404,
-                "createdAt": "2024-06-18T18:56:20.190Z",
-                "updatedAt": "2024-06-18T18:56:20.190Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d85e9ba14f9f260eed3e",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": false,
-                "responseTime": 228,
-                "statusCode": 404,
-                "createdAt": "2024-06-18T18:56:30.279Z",
-                "updatedAt": "2024-06-18T18:56:30.279Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d8669ba14f9f260eed47",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": true,
-                "responseTime": 112,
-                "statusCode": 200,
-                "createdAt": "2024-06-18T18:56:38.381Z",
-                "updatedAt": "2024-06-18T18:56:38.381Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d8809ba14f9f260eed6b",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": true,
-                "responseTime": 134,
-                "statusCode": 200,
-                "createdAt": "2024-06-18T18:57:04.846Z",
-                "updatedAt": "2024-06-18T18:57:04.846Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d86d9ba14f9f260eed50",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": false,
-                "responseTime": 301,
-                "statusCode": 404,
-                "createdAt": "2024-06-18T18:56:45.492Z",
-                "updatedAt": "2024-06-18T18:56:45.492Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d8739ba14f9f260eed59",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": true,
-                "responseTime": 84,
-                "statusCode": 200,
-                "createdAt": "2024-06-18T18:56:51.614Z",
-                "updatedAt": "2024-06-18T18:56:51.614Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d87a9ba14f9f260eed62",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": false,
-                "responseTime": 189,
-                "statusCode": 404,
-                "createdAt": "2024-06-18T18:56:58.734Z",
-                "updatedAt": "2024-06-18T18:56:58.734Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d8809ba14f9f260eed6b",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": true,
-                "responseTime": 134,
-                "statusCode": 200,
-                "createdAt": "2024-06-18T18:57:04.846Z",
-                "updatedAt": "2024-06-18T18:57:04.846Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d8549ba14f9f260eed31",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": false,
-                "responseTime": 167,
-                "statusCode": 404,
-                "createdAt": "2024-06-18T18:56:20.190Z",
-                "updatedAt": "2024-06-18T18:56:20.190Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d85e9ba14f9f260eed3e",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": false,
-                "responseTime": 228,
-                "statusCode": 404,
-                "createdAt": "2024-06-18T18:56:30.279Z",
-                "updatedAt": "2024-06-18T18:56:30.279Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d8669ba14f9f260eed47",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": true,
-                "responseTime": 112,
-                "statusCode": 200,
-                "createdAt": "2024-06-18T18:56:38.381Z",
-                "updatedAt": "2024-06-18T18:56:38.381Z",
-                "__v": 0
-              },
-              {
-                "_id": "6671d8879ba14f9f260eed74",
-                "monitorId": "6671d8529ba14f9f260eed2b",
-                "status": false,
-                "responseTime": 247,
-                "statusCode": 404,
-                "createdAt": "2024-06-18T18:57:11.958Z",
-                "updatedAt": "2024-06-18T18:57:11.958Z",
-                "__v": 0
-              }
-            ]
-      },
-      {
-        "_id": "6671d8619ba14f9f260eed4c",
-        "userId": "666c9146c9bfa20db790b1df",
-        "name": "Amazon Monitor",
-        "description": "Amazon website",
-        "type": "http",
-        "url": "https://www.amazon.com",
-        "isActive": true,
-        "interval": 15000,
-        "createdAt": "2024-06-18T18:56:49.419Z",
-        "updatedAt": "2024-06-18T18:56:49.419Z",
-        "__v": 0,
-        "checks": [
-          {
-            "_id": "6671d8919ba14f9f260eed7d",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": true,
-            "responseTime": 92,
-            "statusCode": 200,
-            "createdAt": "2024-06-18T18:57:21.076Z",
-            "updatedAt": "2024-06-18T18:57:21.076Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8989ba14f9f260eed86",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": false,
-            "responseTime": 205,
-            "statusCode": 404,
-            "createdAt": "2024-06-18T18:57:28.188Z",
-            "updatedAt": "2024-06-18T18:57:28.188Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d89e9ba14f9f260eed8f",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": true,
-            "responseTime": 159,
-            "statusCode": 200,
-            "createdAt": "2024-06-18T18:57:34.300Z",
-            "updatedAt": "2024-06-18T18:57:34.300Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8a59ba14f9f260eed98",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": false,
-            "responseTime": 271,
-            "statusCode": 404,
-            "createdAt": "2024-06-18T18:57:41.421Z",
-            "updatedAt": "2024-06-18T18:57:41.421Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8ac9ba14f9f260eeda1",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": true,
-            "responseTime": 127,
-            "statusCode": 200,
-            "createdAt": "2024-06-18T18:57:48.532Z",
-            "updatedAt": "2024-06-18T18:57:48.532Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8a59ba14f9f260eed98",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": false,
-            "responseTime": 271,
-            "statusCode": 404,
-            "createdAt": "2024-06-18T18:57:41.421Z",
-            "updatedAt": "2024-06-18T18:57:41.421Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8ac9ba14f9f260eeda1",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": true,
-            "responseTime": 127,
-            "statusCode": 200,
-            "createdAt": "2024-06-18T18:57:48.532Z",
-            "updatedAt": "2024-06-18T18:57:48.532Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8b29ba14f9f260eedaa",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": false,
-            "responseTime": 193,
-            "statusCode": 404,
-            "createdAt": "2024-06-18T18:57:54.643Z",
-            "updatedAt": "2024-06-18T18:57:54.643Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8b89ba14f9f260eedb3",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": true,
-            "responseTime": 104,
-            "statusCode": 200,
-            "createdAt": "2024-06-18T18:58:00.754Z",
-            "updatedAt": "2024-06-18T18:58:00.754Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8bf9ba14f9f260eedbc",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": false,
-            "responseTime": 231,
-            "statusCode": 404,
-            "createdAt": "2024-06-18T18:58:07.865Z",
-            "updatedAt": "2024-06-18T18:58:07.865Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8c59ba14f9f260eedc5",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": true,
-            "responseTime": 147,
-            "statusCode": 200,
-            "createdAt": "2024-06-18T18:58:13.977Z",
-            "updatedAt": "2024-06-18T18:58:13.977Z",
-            "__v": 0
-          },
-          {
-            "_id": "6671d8cc9ba14f9f260eedce",
-            "monitorId": "6671d8529ba14f9f260eed2b",
-            "status": false,
-            "responseTime": 283,
-            "statusCode": 404,
-            "createdAt": "2024-06-18T18:58:20.088Z",
-            "updatedAt": "2024-06-18T18:58:20.088Z",
-            "__v": 0
-          }
-        ]
-      },
-      {
-        "_id": "6671d8789ba14f9f260eed66",
-        "userId": "666c9146c9bfa20db790b1df",
-        "name": "Facebook Monitor",
-        "description": "Facebook website",
-        "type": "http",
-        "url": "https://www.facebook.com",
-        "isActive": true,
-        "interval": 20000,
-        "createdAt": "2024-06-18T18:57:12.798Z",
-        "updatedAt": "2024-06-18T18:57:12.798Z",
-        "__v": 0,
-        "checks": [
-  {
-    "_id": "6671d8d29ba14f9f260eedd7",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": true,
-    "responseTime": 81,
-    "statusCode": 200,
-    "createdAt": "2024-06-18T18:58:26.199Z",
-    "updatedAt": "2024-06-18T18:58:26.199Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d8d89ba14f9f260eede0",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": false,
-    "responseTime": 218,
-    "statusCode": 404,
-    "createdAt": "2024-06-18T18:58:32.311Z",
-    "updatedAt": "2024-06-18T18:58:32.311Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d8df9ba14f9f260eede9",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": true,
-    "responseTime": 138,
-    "statusCode": 200,
-    "createdAt": "2024-06-18T18:58:39.422Z",
-    "updatedAt": "2024-06-18T18:58:39.422Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d8e59ba14f9f260eedf2",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": false,
-    "responseTime": 257,
-    "statusCode": 404,
-    "createdAt": "2024-06-18T18:58:45.533Z",
-    "updatedAt": "2024-06-18T18:58:45.533Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d8eb9ba14f9f260eedfb",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": true,
-    "responseTime": 116,
-    "statusCode": 200,
-    "createdAt": "2024-06-18T18:58:51.644Z",
-    "updatedAt": "2024-06-18T18:58:51.644Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d8f19ba14f9f260eee04",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": false,
-    "responseTime": 184,
-    "statusCode": 404,
-    "createdAt": "2024-06-18T18:58:57.755Z",
-    "updatedAt": "2024-06-18T18:58:57.755Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d8f79ba14f9f260eee0d",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": true,
-    "responseTime": 97,
-    "statusCode": 200,
-    "createdAt": "2024-06-18T18:59:03.867Z",
-    "updatedAt": "2024-06-18T18:59:03.867Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d8fd9ba14f9f260eee16",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": false,
-    "responseTime": 240,
-    "statusCode": 404,
-    "createdAt": "2024-06-18T18:59:09.978Z",
-    "updatedAt": "2024-06-18T18:59:09.978Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d9039ba14f9f260eee1f",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": true,
-    "responseTime": 135,
-    "statusCode": 200,
-    "createdAt": "2024-06-18T18:59:16.089Z",
-    "updatedAt": "2024-06-18T18:59:16.089Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d8d89ba14f9f260eede0",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": false,
-    "responseTime": 218,
-    "statusCode": 404,
-    "createdAt": "2024-06-18T18:58:32.311Z",
-    "updatedAt": "2024-06-18T18:58:32.311Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d8df9ba14f9f260eede9",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": true,
-    "responseTime": 138,
-    "statusCode": 200,
-    "createdAt": "2024-06-18T18:58:39.422Z",
-    "updatedAt": "2024-06-18T18:58:39.422Z",
-    "__v": 0
-  },
-  {
-    "_id": "6671d9089ba14f9f260eee28",
-    "monitorId": "6671d8529ba14f9f260eed2b",
-    "status": false,
-    "responseTime": 269,
-    "statusCode": 404,
-    "createdAt": "2024-06-18T18:59:22.200Z",
-    "updatedAt": "2024-06-18T18:59:22.200Z",
-    "__v": 0
-  }
-]
-      }
-    ]
-}
\ No newline at end of file
diff --git a/Client/src/Pages/CheckEmail/index.jsx b/Client/src/Pages/Auth/CheckEmail.jsx
similarity index 100%
rename from Client/src/Pages/CheckEmail/index.jsx
rename to Client/src/Pages/Auth/CheckEmail.jsx
diff --git a/Client/src/Pages/ForgotPassword/index.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
similarity index 100%
rename from Client/src/Pages/ForgotPassword/index.jsx
rename to Client/src/Pages/Auth/ForgotPassword.jsx
diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Auth/Login.jsx
similarity index 100%
rename from Client/src/Pages/Login/index.jsx
rename to Client/src/Pages/Auth/Login.jsx
diff --git a/Client/src/Pages/NewPasswordConfirmed/index.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
similarity index 100%
rename from Client/src/Pages/NewPasswordConfirmed/index.jsx
rename to Client/src/Pages/Auth/NewPasswordConfirmed.jsx
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Auth/Register.jsx
similarity index 100%
rename from Client/src/Pages/Register/index.jsx
rename to Client/src/Pages/Auth/Register.jsx
diff --git a/Client/src/Pages/SetNewPassword/index.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx
similarity index 100%
rename from Client/src/Pages/SetNewPassword/index.jsx
rename to Client/src/Pages/Auth/SetNewPassword.jsx
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
new file mode 100644
index 000000000..c414ffaea
--- /dev/null
+++ b/Client/src/Pages/Auth/index.css
@@ -0,0 +1,138 @@
+/* ////// */
+/* SHARED */
+/* ////// */
+.register-page,
+.login-page,
+.set-new-password-page,
+.password-confirmed-page,
+.forgot-password-page,
+.check-email-page {
+  display: flex;
+  justify-content: center;
+  height: var(--env-var-height-1);
+}
+.register-page h1.MuiTypography-root,
+.set-new-password-page h1.MuiTypography-root,
+.password-confirmed-page h1.MuiTypography-root,
+.forgot-password-page h1.MuiTypography-root,
+.check-email-page h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-large);
+  color: var(--env-var-color-1);
+  font-weight: 600;
+}
+.register-page p.MuiTypography-root,
+.register-page span,
+.register-page button,
+.login-page p.MuiTypography-root,
+.login-page span,
+.login-page button,
+.set-new-password-page p.MuiTypography-root,
+.set-new-password-page button,
+.password-confirmed-page p.MuiTypography-root,
+.password-confirmed-page button,
+.forgot-password-page p.MuiTypography-root,
+.forgot-password-page button,
+.check-email-page p.MuiTypography-root,
+.check-email-page button,
+.check-email-page span.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+}
+.register-page p.MuiTypography-root,
+.login-page p.MuiTypography-root {
+  color: var(--env-var-color-2);
+  opacity: 0.8;
+}
+.register-page button:not(.MuiIconButton-root),
+.login-page button:not(.MuiIconButton-root),
+.set-new-password-page button:not(.MuiIconButton-root),
+.password-confirmed-page button:not(.MuiIconButton-root),
+.forgot-password-page button:not(.MuiIconButton-root),
+.check-email-page button:not(.MuiIconButton-root) {
+  height: 34px;
+  border-radius: var(--env-var-radius-2);
+  line-height: 0;
+}
+
+.register-page svg rect,
+.login-page svg rect {
+  fill: none;
+}
+.register-form,
+.login-form {
+  margin-top: 95px;
+}
+
+.set-new-password-form,
+.password-confirmed-form,
+.forgot-password-form,
+.check-email-form {
+  margin-top: 65px;
+  width: var(--env-var-width-2);
+}
+.set-new-password-page p.MuiTypography-root,
+.password-confirmed-page p.MuiTypography-root,
+.forgot-password-page p.MuiTypography-root,
+.check-email-page p.MuiTypography-root {
+  color: var(--env-var-color-2);
+}
+
+.login-page .MuiFormControlLabel-root .MuiButtonBase-root,
+.set-new-password-page button:not(.MuiIconButton-root) svg,
+.password-confirmed-page button:not(.MuiIconButton-root) svg,
+.forgot-password-page button svg,
+.check-email-page button svg {
+  margin-right: 5px;
+}
+
+.register-page
+  .MuiFormControl-root:has(#register-password-input)
+  + span.MuiTypography-root,
+.set-new-password-page
+  .MuiFormControl-root:has(#register-password-input)
+  + span.MuiTypography-root,
+.password-confirmed-page
+  .MuiFormControl-root:has(#register-password-input)
+  + span.MuiTypography-root {
+  display: none;
+  visibility: hidden;
+}
+
+/* REGISTER */
+.register-page h1.MuiTypography-root {
+  opacity: 0.5;
+}
+
+/* ///// */
+/* LOGIN */
+/* ///// */
+.login-page span:not(.MuiTypography-root):not(.MuiButtonBase-root) {
+  color: var(--env-var-color-3);
+  cursor: pointer;
+  font-weight: 600;
+}
+.login-page .MuiFormControlLabel-root {
+  margin: 0;
+}
+.login-page .MuiFormControlLabel-root span:not(.Mui-checked) svg {
+  fill: var(--env-var-color-4);
+}
+.login-page .MuiFormControlLabel-root svg {
+  margin-bottom: 1px;
+}
+.login-page .MuiFormControlLabel-root .MuiTypography-root {
+  color: var(--env-var-color-5);
+  user-select: none;
+}
+
+.google-enter {
+  width: var(--env-var-img-width-1);
+  height: var(--env-var-img-width-1);
+  margin-right: 10px;
+}
+
+/* /////////// */
+/* Check Email */
+/* /////////// */
+.check-email-page span.MuiTypography-root {
+  font-weight: 600;
+}
diff --git a/Client/src/Pages/CheckEmail/index.css b/Client/src/Pages/CheckEmail/index.css
deleted file mode 100644
index fbf3e47af..000000000
--- a/Client/src/Pages/CheckEmail/index.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.check-email-page {
-  display: flex;
-  justify-content: center;
-  height: var(--env-var-height-1);
-}
-.check-email-page button:not(.MuiIconButton-root) {
-  height: 34px;
-  border-radius: var(--env-var-radius-2);
-  line-height: 0;
-}
-.check-email-page h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large);
-  color: var(--env-var-color-1);
-  font-weight: 600;
-}
-.check-email-page p.MuiTypography-root,
-.check-email-page button,
-.check-email-page span.MuiTypography-root {
-  font-size: var(--env-var-font-size-medium);
-}
-.check-email-page span.MuiTypography-root {
-  font-weight: 600;
-}
-.check-email-page p.MuiTypography-root {
-  color: var(--env-var-color-2);
-}
-.check-email-page button svg {
-  margin-right: 5px;
-}
-
-.check-email-form {
-  margin-top: 65px;
-  width: var(--env-var-width-2);
-}
diff --git a/Client/src/Pages/Demo/Demo.css b/Client/src/Pages/Demo/Demo.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx
deleted file mode 100644
index 441eff7e9..000000000
--- a/Client/src/Pages/Demo/Demo.jsx
+++ /dev/null
@@ -1,517 +0,0 @@
-import React, { useState } from "react";
-import Button from "../../Components/Button/";
-import ButtonSpinner from "../../Components/ButtonSpinner";
-import Link from "../../Components/Link";
-import {
-  useTheme,
-  Switch,
-  Checkbox,
-  FormControl,
-  FormLabel,
-  FormControlLabel,
-  Radio,
-  RadioGroup,
-  Tab,
-  Tabs,
-  Typography,
-  Stack,
-  Box,
-} from "@mui/material";
-import { ColoredLabel, StatusLabel } from "../../Components/Label/";
-import Avatar from "../../Components/Avatar/";
-import ProgressStepper from "../../Components/ProgressStepper";
-import avatarImage from "../../assets/Images/avatar_placeholder.png";
-import { DataGrid } from "@mui/x-data-grid";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import AddIcon from "@mui/icons-material/Add";
-import Divider from "@mui/material/Divider";
-import UploadIcon from "@mui/icons-material/Upload";
-import SendIcon from "@mui/icons-material/Send";
-import ImageIcon from "@mui/icons-material/Image";
-
-// Redux
-import { useSelector } from "react-redux";
-import { useDispatch } from "react-redux";
-import { getMonitors } from "../../Features/Monitors/monitorsSlice";
-import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
-import ImageField from "../../Components/Inputs/Image";
-import ProgressUpload from "../../Components/ProgressBars";
-import Alert from "../../Components/Alert";
-import { createToast } from "../../Utils/toastUtils";
-import Field from "../../Components/Inputs/Field";
-
-const cols = [
-  {
-    field: "name",
-    headerName: "Name",
-    renderCell: (params) => {
-      return (
-        <div style={{ display: "flex", alignItems: "center" }}>
-          <Avatar
-            src={params.value.avatarImage}
-            firstName={params.value.firstName}
-            lastName={params.value.lastName}
-          />
-          <div style={{ marginLeft: "1rem" }}>
-            {params.value.firstName} {params.value.lastName}
-          </div>
-        </div>
-      );
-    },
-    flex: 1,
-  },
-  {
-    field: "status",
-    headerName: "Status",
-    renderCell: (params) => {
-      return <StatusLabel status={params.value} />;
-    },
-    flex: 1,
-  },
-  { field: "role", headerName: "Role", flex: 1 },
-  { field: "team", headerName: "Team", flex: 1 },
-  { field: "hireDate", headerName: "Hire date", flex: 1 },
-];
-
-const rows = ((count) => {
-  const arr = [];
-  for (let i = 0; i < count; i++) {
-    let row = {
-      id: i,
-      name: {
-        avatarImage: i % 2 === 0 ? avatarImage : null,
-        firstName: "Placeholder Name",
-        lastName: i.toString(),
-      },
-      status: "Active",
-      role: "Product Designer",
-      team: "Marketing",
-      hireDate: new Date().toLocaleDateString(),
-    };
-    arr.push(row);
-  }
-  return arr;
-})(100);
-
-const steps = [
-  { label: "Your details", content: "Please provide your name and email" },
-  { label: "Company details", content: "A few details about your company" },
-  { label: "Invite your team", content: "Start collaborating with your team" },
-];
-
-const demoMonitors = [
-  { id: 0, name: "Google", isActive: true },
-  { id: 1, name: "Yahoo", isActive: false },
-  { id: 2, name: "Reddit", isActive: true },
-];
-
-const Demo = () => {
-  const dispatch = useDispatch();
-
-  const [radio, setRadio] = React.useState(1);
-  const [tab, setTab] = React.useState("departments");
-  const [date, setDate] = React.useState("Pick a date!");
-
-  const handleRadio = (event) => {
-    setRadio(event.target.value);
-  };
-
-  const handleTab = (event, newValue) => {
-    setTab(newValue);
-  };
-
-  const handleDate = (newValue) => {
-    setDate(newValue.toString());
-  };
-
-  const change = (event, type) => {
-    alert(event.target.checked ? `${type} checked` : `${type} unchecked`);
-  };
-
-  const links = [
-    {
-      name: "Buttons",
-      url: "#buttons",
-    },
-    {
-      name: "Disabled Buttons",
-      url: "#disabled-buttons",
-    },
-    {
-      name: "Labels",
-      url: "#labels",
-    },
-    {
-      name: "Status Labels",
-      url: "#status-labels",
-    },
-    {
-      name: "Avatar",
-      url: "#avatar",
-    },
-    {
-      name: "Switches",
-      url: "#switches",
-    },
-    {
-      name: "Checkboxes",
-      url: "#checkboxes",
-    },
-    {
-      name: "Radio",
-      url: "#radio",
-    },
-    {
-      name: "Table",
-      url: "#table",
-    },
-    {
-      name: "Tabs",
-      url: "#tabs",
-    },
-    {
-      name: "Date Picker",
-      url: "#date-picker",
-    },
-    {
-      name: "Stepper",
-      url: "#stepper",
-    },
-    {
-      name: "Section",
-      url: "#section",
-    },
-  ];
-
-  const theme = useTheme();
-
-  // *********************************
-  // Redux Demo
-  // *********************************
-  const monitorState = useSelector((state) => state.monitors);
-  const { monitors, msg } = monitorState;
-
-  //Button Spinner state
-  const [isLoading, setIsLoading] = useState(false);
-  const handleButtonSpinnerClick = () => {
-    setIsLoading(true);
-
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 4000);
-  };
-
-  return (
-    <div>
-      <div style={{ padding: "4rem", border: "1px solid black" }}>
-        <Typography variant="h4">Redux Demo</Typography>
-        <Typography variant="h6">Monitors</Typography>
-        <table
-          style={{ border: "1px solid black", borderCollapse: "collapse" }}
-        >
-          <tbody>
-            <tr>
-              <th style={{ border: "1px solid black" }}>Name</th>
-              <th style={{ border: "1px solid black" }}>URL</th>
-            </tr>
-            {monitors &&
-              monitors.map((monitor) => {
-                return (
-                  <tr key={monitor._id}>
-                    <td style={{ border: "1px solid black" }}>
-                      {monitor.name}
-                    </td>
-                    <td style={{ border: "1px solid black" }}>{monitor.url}</td>
-                  </tr>
-                );
-              })}
-          </tbody>
-        </table>
-        <p>Message: {msg}</p>
-        <Button
-          level="primary"
-          label="Get Monitors"
-          onClick={() => {
-            dispatch(getMonitorsByUserId("User ID Here"));
-          }}
-        />
-      </div>
-      <ul style={{ listStyle: "none" }}>
-        {links.map((link) => (
-          <li key={link.url}>
-            <Link level="primary" label={link.name} url={link.url} />
-          </li>
-        ))}
-      </ul>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="buttons">Buttons</h4>
-      <div>
-        <Button level="primary" label="Primary" />
-        <Button level="secondary" label="Secondary" />
-        <Button level="tertiary" label="Tertiary" />
-        <Button level="error" label="Error" />
-        <Button level="imageTertiary" label="Image Button" img={<AddIcon />} />
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="disabled-buttons">Disabled Buttons</h4>
-      <div>
-        <Button level="primary" label="Primary" disabled />
-        <Button level="secondary" label="Secondary" disabled />
-        <Button level="tertiary" label="Tertiary" disabled />
-        <Button level="error" label="Error" disabled />
-      </div>
-      <div>
-        <Link
-          level="tertiary"
-          label="Tertiary Link"
-          url={"https://www.google.com"}
-        />
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="labels">Labels</h4>
-      <div>
-        <ColoredLabel label="Label" color={theme.palette.labelGray.color} />
-        <ColoredLabel label="Label" color={theme.palette.labelPurple.color} />
-        <ColoredLabel label="Label" color={theme.palette.labelGreen.color} />
-        <ColoredLabel label="Label" color={theme.palette.labelOrange.color} />
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="status-labels">Status Lables</h4>
-      <div>
-        <StatusLabel status="Seen" />
-        <StatusLabel status="Waiting" />
-        <StatusLabel status="New" />
-        <StatusLabel status="Active" />
-        <StatusLabel status="Up" />
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="avatar">Avatar</h4>
-      <div style={{ display: "flex" }}>
-        <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" />
-        <Avatar firstName="Alex" lastName="Holliday" />
-        <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" small />
-        <Avatar firstName="Alex" lastName="Holliday" small />
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="switches">Switches</h4>
-      <div>
-        <Switch onChange={(event) => change(event, "Switch")} />
-        <Switch size="small" />
-        <Switch disabled />
-        <Switch checked />
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="checkboxes">Checkboxes</h4>
-      <div>
-        <Checkbox onChange={(event) => change(event, "Checkbox")} />
-        <Checkbox size="small" />
-        <Checkbox disabled />
-        <Checkbox checked />
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="radio">Radio</h4>
-      <div>
-        <FormControl>
-          <FormLabel>Demo Radio</FormLabel>
-          <RadioGroup value={radio} onChange={handleRadio}>
-            <div>
-              <FormControlLabel value={1} control={<Radio />} label="1" />
-              <FormControlLabel value={2} control={<Radio />} label="2" />
-              <FormControlLabel
-                value={3}
-                control={<Radio size="small" />}
-                label="3"
-              />
-              <FormControlLabel
-                value={4}
-                control={<Radio disabled />}
-                label="4"
-              />
-            </div>
-          </RadioGroup>
-        </FormControl>
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="table">Table</h4>
-      <div style={{ width: "75vw" }}>
-        <DataGrid
-          autoHeight
-          columns={cols}
-          rows={rows}
-          initialState={{
-            pagination: {
-              paginationModel: { page: 0, pageSize: 10 },
-            },
-          }}
-          pageSizeOptions={[5, 10]}
-        />
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="tabs">Tabs</h4>
-      <div style={{ display: "flex", justifyContent: "center" }}>
-        {" "}
-        <Tabs value={tab} onChange={handleTab}>
-          <Tab label="My details" value="details" />
-          <Tab label="My team" value="team" />
-          <Tab label="Departments" value="departments" />
-          <Tab label="Approvals" value="approvals" />
-        </Tabs>
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="date-picker">Date Picker</h4>
-      <div>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <DatePicker onChange={handleDate} />
-        </LocalizationProvider>
-        <h4>{date}</h4>
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="stepper">Stepper</h4>
-      <div>
-        <ProgressStepper steps={steps}></ProgressStepper>
-      </div>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <h4 id="section">Loading Buttons</h4>
-      <Stack direction="row" justifyContent="center" spacing={3}>
-        <ButtonSpinner
-          level="primary"
-          label="Submit"
-          onClick={handleButtonSpinnerClick}
-          isLoading={isLoading}
-        />
-        <ButtonSpinner
-          level="secondary"
-          label="Fetch Data"
-          loadingText="Fetching..."
-          onClick={handleButtonSpinnerClick}
-          isLoading={isLoading}
-        />
-        <ButtonSpinner
-          level="tertiary"
-          label="Add"
-          loadingText="Adding..."
-          onClick={handleButtonSpinnerClick}
-          isLoading={isLoading}
-        />
-        <ButtonSpinner
-          level="primary"
-          label="Upload"
-          position="start"
-          img={<UploadIcon />}
-          onClick={handleButtonSpinnerClick}
-          isLoading={isLoading}
-        />
-        <ButtonSpinner
-          level="secondary"
-          label="Send"
-          position="end"
-          img={<SendIcon />}
-          onClick={handleButtonSpinnerClick}
-          isLoading={isLoading}
-        />
-        <ButtonSpinner
-          level="error"
-          label="Disabled"
-          onClick={handleButtonSpinnerClick}
-          isLoading={isLoading}
-          disabled={true}
-        />
-      </Stack>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <Stack justifyContent="center" alignItems="center">
-        <ImageField
-          id="test-image-field"
-          onChange={() => console.log("changed")}
-        />
-      </Stack>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <Stack justifyContent="center" alignItems="center">
-        <ProgressUpload
-          icon={<ImageIcon />}
-          label="image.jpg"
-          size="2 MB"
-          progress={50}
-          onClick={() => console.log("click")}
-        />
-      </Stack>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <Stack direction="row" gap="10px" flexWrap="wrap">
-        <Box width="500px">
-          <Alert
-            variant="info"
-            title="SSO login"
-            body="Since you logged in via SSO, you cannot reset or modify your password."
-          />
-        </Box>
-        <Box width="500px">
-          <Alert
-            variant="warning"
-            body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
-          />
-        </Box>
-        <Box width="500px">
-          <Alert
-            variant="error"
-            title="Error"
-            body="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-          />
-        </Box>
-        <Box width="500px">
-          <Alert
-            variant="info"
-            title="We've just released a new feature"
-            body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor."
-            isToast={true}
-          />
-        </Box>
-        <Box width="500px">
-          <Alert
-            variant="info"
-            body="Your password is incorrect."
-            isToast={true}
-            hasIcon={false}
-          />
-        </Box>
-        <Box width="500px" mt="5px">
-          <Button
-            level="primary"
-            label="Toast"
-            onClick={() =>
-              createToast({
-                variant: "info",
-                body: "Your password is incorrect.",
-                hasIcon: false,
-              })
-            }
-          />
-        </Box>
-      </Stack>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-      <Stack direction="row" justifyContent="center" gap="20px">
-        <Field type="text" label="Name" placeholder="Enter a name" />
-        <Field
-          type="email"
-          label="Email"
-          isRequired={true}
-          placeholder="name.surname@companyname.com"
-          error="This is an error message."
-        />
-        <Field
-          type="password"
-          label="Password"
-          isRequired={true}
-          placeholder="Create a password"
-        />
-        <Field
-          type="url"
-          label="Website"
-          placeholder="google.com"
-        />
-      </Stack>
-      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
-    </div>
-  );
-};
-export default Demo;
diff --git a/Client/src/Pages/Details/index.css b/Client/src/Pages/Details/index.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Client/src/Pages/ForgotPassword/index.css b/Client/src/Pages/ForgotPassword/index.css
deleted file mode 100644
index 7ef02f4a0..000000000
--- a/Client/src/Pages/ForgotPassword/index.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.forgot-password-page {
-  display: flex;
-  justify-content: center;
-  height: var(--env-var-height-1);
-}
-.forgot-password-page button:not(.MuiIconButton-root) {
-  height: 34px;
-  border-radius: var(--env-var-radius-2);
-  line-height: 0;
-}
-.forgot-password-page h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large);
-  color: var(--env-var-color-1);
-  font-weight: 600;
-}
-.forgot-password-page p.MuiTypography-root,
-.forgot-password-page button {
-  font-size: var(--env-var-font-size-medium);
-}
-.forgot-password-page p.MuiTypography-root {
-  color: var(--env-var-color-2);
-}
-.forgot-password-page button svg{
-  margin-right: 5px;
-}
-
-
-.forgot-password-form {
-  margin-top: 65px;
-  width: var(--env-var-width-2);
-}
diff --git a/Client/src/Pages/Login/index.css b/Client/src/Pages/Login/index.css
deleted file mode 100644
index e94ea8a00..000000000
--- a/Client/src/Pages/Login/index.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.login-page {
-  width: var(--env-var-width-1);
-  display: flex;
-  justify-content: center;
-  height: 100vh;
-}
-.login-page svg rect {
-  fill: none;
-}
-.login-page p.MuiTypography-root,
-.login-page span,
-.login-page button {
-  font-size: var(--env-var-font-size-medium);
-}
-.login-page p.MuiTypography-root {
-  color: var(--env-var-color-2);
-  opacity: 0.8;
-}
-.login-page button:not(.MuiIconButton-root)  {
-  height: 34px;
-  border-radius: var(--env-var-radius-2);
-  line-height: 0;
-}
-.login-page span:not(.MuiTypography-root):not(.MuiButtonBase-root) {
-  color: var(--env-var-color-3);
-  cursor: pointer;
-  font-weight: 600;
-}
-.login-page .MuiFormControlLabel-root {
-  margin: 0;
-}
-.login-page .MuiFormControlLabel-root .MuiButtonBase-root {
-  margin-right: 5px;
-}
-.login-page .MuiFormControlLabel-root span:not(.Mui-checked) svg{
-  fill: var(--env-var-color-4);
-}
-.login-page .MuiFormControlLabel-root svg{
-  margin-bottom: 1px;
-}
-.login-page .MuiFormControlLabel-root .MuiTypography-root {
-  color: var(--env-var-color-5);
-  user-select: none;
-}
-
-/* .login-form-inputs .field h3.MuiTypography-root{
-  font-weight: 600;
-} */
-
-.login-form{
-  margin-top: 95px;
-}
-
-.google-enter {
-  width: var(--env-var-img-width-1);
-  height: var(--env-var-img-width-1);
-  margin-right: 10px;
-}
\ No newline at end of file
diff --git a/Client/src/Pages/CreateNewMonitor/index.css b/Client/src/Pages/Monitors/CreateMonitor/index.css
similarity index 100%
rename from Client/src/Pages/CreateNewMonitor/index.css
rename to Client/src/Pages/Monitors/CreateMonitor/index.css
diff --git a/Client/src/Pages/CreateNewMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
similarity index 95%
rename from Client/src/Pages/CreateNewMonitor/index.jsx
rename to Client/src/Pages/Monitors/CreateMonitor/index.jsx
index cb10a49e1..1b19c2bde 100644
--- a/Client/src/Pages/CreateNewMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -1,19 +1,18 @@
 import "./index.css";
-import ConfigBox from "../../Components/ConfigBox";
+import ConfigBox from "../../../Components/ConfigBox";
 import React, { useState } from "react";
-import RadioButton from "../../Components/RadioButton";
-import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox";
-import Button from "../../Components/Button";
+import RadioButton from "../../../Components/RadioButton";
+import Button from "../../../Components/Button";
 import { Box, MenuItem, Select, Stack, Typography } from "@mui/material";
 import { useSelector, useDispatch } from "react-redux";
-import { createMonitorValidation } from "../../Validation/validation";
-import { createMonitor } from "../../Features/Monitors/monitorsSlice";
+import { createMonitorValidation } from "../../../Validation/validation";
+import { createMonitor } from "../../../Features/Monitors/monitorsSlice";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
-import Field from "../../Components/Inputs/Field";
+import Field from "../../../Components/Inputs/Field";
 
-const CreateNewMonitor = () => {
+const CreateMonitor = () => {
   const MS_PER_MINUTE = 60000;
   const { user, authToken } = useSelector((state) => state.auth);
   const dispatch = useDispatch();
@@ -81,7 +80,7 @@ const CreateNewMonitor = () => {
   //   }));
   // };
 
-  const handleCreateNewMonitor = async (event) => {
+  const handleCreateMonitor = async (event) => {
     event.preventDefault();
     //obj to submit
     let monitor = {
@@ -126,7 +125,7 @@ const CreateNewMonitor = () => {
   return (
     <form
       className="create-monitor-form"
-      onSubmit={handleCreateNewMonitor}
+      onSubmit={handleCreateMonitor}
       noValidate
       spellCheck="false"
       style={{
@@ -441,7 +440,7 @@ const CreateNewMonitor = () => {
           level="primary"
           label="Create new monitor"
           sx={{ width: "210px", fontSize: "var(--env-var-font-size-medium)" }}
-          onClick={handleCreateNewMonitor}
+          onClick={handleCreateMonitor}
           disabled={Object.keys(errors).length !== 0 && true}
         />
       </div>
@@ -449,4 +448,4 @@ const CreateNewMonitor = () => {
   );
 };
 
-export default CreateNewMonitor;
+export default CreateMonitor;
diff --git a/Client/src/Components/Dashboard/DashboardProgressBars/index.css b/Client/src/Pages/Monitors/Details/index.css
similarity index 100%
rename from Client/src/Components/Dashboard/DashboardProgressBars/index.css
rename to Client/src/Pages/Monitors/Details/index.css
diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
similarity index 95%
rename from Client/src/Pages/Details/index.jsx
rename to Client/src/Pages/Monitors/Details/index.jsx
index 1c700adad..38f25402f 100644
--- a/Client/src/Pages/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
 import { Box, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import axiosInstance from "../../Utils/axiosConfig";
-import BasicTable from "../../Components/BasicTable";
-import MonitorDetailsAreaChart from "../../Components/Charts/MonitorDetailsAreaChart";
-import { StatusLabel } from "../../Components/Label";
+import axiosInstance from "../../../Utils/axiosConfig";
+import BasicTable from "../../../Components/BasicTable";
+import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
+import { StatusLabel } from "../../../Components/Label";
 
 const formatDuration = (ms) => {
   const seconds = Math.floor(ms / 1000);
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index a21a3e125..c680b4942 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -101,3 +101,105 @@
   width: 226.8px;
   height: 20px;
 }
+
+/* TODO */
+.current-monitors {
+  margin-top: var(--env-var-spacing-2);
+  border: 1px solid #eaecf0;
+  padding: 40px;
+  border-radius: 4px;
+}
+
+.current-monitors-title-holder {
+  display: flex;
+  align-items: center;
+}
+
+.current-monitors-bar {
+  display: flex;
+  justify-content: space-between;
+}
+
+.current-monitors-title {
+  font-size: 1rem;
+  font-weight: bold;
+  margin-right: var(--env-var-spacing-1);
+  color: var(--env-var-color-1);
+}
+
+.current-monitors-counter {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px;
+  min-width: 22px;
+  min-height: 22px;
+  background-color: var(--env-var-color-15);
+  border: 1px solid var(--env-var-color-6);
+  border-radius: 50%;
+  font-size: var(--env-var-font-size-medium);
+  font-weight: 500;
+  color: var(--env-var-color-5);
+}
+
+.monitors-v-gaping {
+  height: var(--env-var-spacing-3);
+}
+
+.current-monitors-table {
+  width: 100%;
+  text-align: left;
+}
+
+.current-monitors-table {
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+  border: 1px solid var(--env-var-color-16);
+  border-radius: var(--env-var-radius-1);
+}
+
+.current-monitors-table th,
+.current-monitors-table td {
+  border: 1px solid var(--env-var-color-16);
+  border-left: none;
+  border-right: none;
+  padding: 8px;
+}
+
+.theader-row {
+  background-color: var(--env-var-color-13);
+  color: var(--env-var-color-2);
+  font-weight: 500;
+}
+
+.theader-row td {
+  padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
+  font-size: var(--env-var-font-size-medium);
+}
+
+.host-list-item-precentage {
+  font-size: var(--env-var-font-size-medium);
+}
+
+.tbody-row td {
+  padding: var(--env-var-spacing-2) var(--env-var-img-width-2);
+}
+
+.host-status-box {
+  display: flex;
+  width: fit-content;
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-2);
+  align-items: center;
+  padding: calc(var(--env-var-spacing-1) / 2);
+}
+
+.host-actions {
+  margin: auto;
+  cursor: pointer;
+}
+
+.tbody-row-cell.actions-cell {
+  padding-left: 30px;
+}
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 55898c5fe..e08e973e1 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -1,5 +1,4 @@
 import "./index.css";
-import "./monitors.css";
 import { useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
@@ -28,7 +27,7 @@ import ResponseTimeChart from "../../Components/Charts/ResponseTimeChart";
 const Host = ({ params }) => {
   return (
     <div className="host-row">
-      <a href={params.url} target="_blank">
+      <a href={params.url} target="_blank" rel="noreferrer">
         <OpenInNewPage />
       </a>
       <div className="host-name">{params.title}</div>
diff --git a/Client/src/Pages/Monitors/monitors.css b/Client/src/Pages/Monitors/monitors.css
deleted file mode 100644
index 05ae79709..000000000
--- a/Client/src/Pages/Monitors/monitors.css
+++ /dev/null
@@ -1,100 +0,0 @@
-.current-monitors {
-  margin-top: var(--env-var-spacing-2);
-  border: 1px solid #eaecf0;
-  padding: 40px;
-  border-radius: 4px;
-}
-
-.current-monitors-title-holder {
-  display: flex;
-  align-items: center;
-}
-
-.current-monitors-bar {
-  display: flex;
-  justify-content: space-between;
-}
-
-.current-monitors-title {
-  font-size: 1rem;
-  font-weight: bold;
-  margin-right: var(--env-var-spacing-1);
-  color: var(--env-var-color-1);
-}
-
-.current-monitors-counter {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 2px;
-  min-width: 22px;
-  min-height: 22px;
-  background-color: var(--env-var-color-15);
-  border: 1px solid var(--env-var-color-6);
-  border-radius: 50%;
-  font-size: var(--env-var-font-size-medium);
-  font-weight: 500;
-  color: var(--env-var-color-5);
-}
-
-.monitors-v-gaping {
-  height: var(--env-var-spacing-3);
-}
-
-.current-monitors-table {
-  width: 100%;
-  text-align: left;
-}
-
-.current-monitors-table {
-  width: 100%;
-  text-align: left;
-  border-collapse: collapse;
-  border: 1px solid var(--env-var-color-16);
-  border-radius: var(--env-var-radius-1);
-}
-
-.current-monitors-table th,
-.current-monitors-table td {
-  border: 1px solid var(--env-var-color-16);
-  border-left: none;
-  border-right: none;
-  padding: 8px;
-}
-
-.theader-row {
-  background-color: var(--env-var-color-13);
-  color: var(--env-var-color-2);
-  font-weight: 500;
-}
-
-.theader-row td {
-  padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
-  font-size: var(--env-var-font-size-medium);
-}
-
-.host-list-item-precentage {
-  font-size: var(--env-var-font-size-medium);
-}
-
-.tbody-row td {
-  padding: var(--env-var-spacing-2) var(--env-var-img-width-2);
-}
-
-.host-status-box {
-  display: flex;
-  width: fit-content;
-  border: 1px solid var(--env-var-color-4);
-  border-radius: var(--env-var-radius-2);
-  align-items: center;
-  padding: calc(var(--env-var-spacing-1) / 2);
-}
-
-.host-actions {
-  margin: auto;
-  cursor: pointer;
-}
-
-.tbody-row-cell.actions-cell {
-  padding-left: 30px;
-}
diff --git a/Client/src/Pages/NewPasswordConfirmed/index.css b/Client/src/Pages/NewPasswordConfirmed/index.css
deleted file mode 100644
index aae2d8636..000000000
--- a/Client/src/Pages/NewPasswordConfirmed/index.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.password-confirmed-page {
-  display: flex;
-  justify-content: center;
-  height: var(--env-var-height-1);
-}
-.password-confirmed-page button:not(.MuiIconButton-root) {
-  height: 34px;
-  border-radius: var(--env-var-radius-2);
-  line-height: 0;
-}
-.password-confirmed-page h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large);
-  color: var(--env-var-color-1);
-  font-weight: 600;
-}
-.password-confirmed-page p.MuiTypography-root,
-.password-confirmed-page button {
-  font-size: var(--env-var-font-size-medium);
-}
-.password-confirmed-page p.MuiTypography-root {
-  color: var(--env-var-color-2);
-}
-.password-confirmed-page button:not(.MuiIconButton-root) svg {
-  margin-right: 5px;
-}
-.password-confirmed-page
-  .MuiFormControl-root:has(#register-password-input)
-  + span.MuiTypography-root {
-    display: none;
-    visibility: hidden;
-}
-
-.password-confirmed-form {
-  margin-top: 65px;
-  width: var(--env-var-width-2);
-}
diff --git a/Client/src/Pages/PlayGround/PlayGround-Charts.jsx b/Client/src/Pages/PlayGround/PlayGround-Charts.jsx
deleted file mode 100644
index 906f2a84a..000000000
--- a/Client/src/Pages/PlayGround/PlayGround-Charts.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import "./playGround.css";
-import Statistic from "../../Components/Charts/Statistics/Statistic";
-import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
-
-function PlayGroundCharts() {
-  return (
-    <>
-      <div className="play-ground-charts">
-        <Statistic title="Currently up for" value="4h 30m 2s" />
-        <Statistic title="Last checked" value="15 seconds ago" />
-        <Statistic title="Incidents" value="2" />
-        <Statistic title="Certificate expiry" value="284 days" />
-      </div>
-      <div className="play-ground-charts-spacing" />
-      <div className="play-ground-charts">
-        <ServerStatus title="Up" value="4" state="up" />
-        <ServerStatus title="Down" value="0" state="down" />
-        <ServerStatus title="Paused" value="0" state="pause" />
-      </div>
-    </>
-  );
-}
-
-export default PlayGroundCharts;
diff --git a/Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx b/Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx
deleted file mode 100644
index 3713f889c..000000000
--- a/Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import TooltipWithTail from "../../Components/Tooltips/TooltipWithTail/TooltipWithTail";
-import "./playGround.css";
-
-function PlayGroundTooltips() {
-  return (
-    <div className="tooltip-playground">
-      <br />
-      <TooltipWithTail
-        placement="left"
-        arrow={true}
-        title="This is a tooltip"
-        text="This is a tooltip"
-      />
-      <br />
-      <TooltipWithTail placement="top" arrow={true} text="This is a tooltip" />
-      <br />
-      <TooltipWithTail
-        placement="bottom"
-        arrow={false}
-        text="This is a tooltip"
-      />
-      <br />
-      <TooltipWithTail
-        placement="right"
-        arrow={true}
-        title="This is a tooltip"
-        text="Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text."
-      />
-    </div>
-  );
-}
-
-export default PlayGroundTooltips;
diff --git a/Client/src/Pages/PlayGround/PlayGround-announcements.jsx b/Client/src/Pages/PlayGround/PlayGround-announcements.jsx
deleted file mode 100644
index aa4bd1913..000000000
--- a/Client/src/Pages/PlayGround/PlayGround-announcements.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import "./playGround.css";
-import React from "react";
-import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
-import AnnouncementsMessageBar from "../../Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar";
-import AnnouncementsDualButton from "../../Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton";
-import AnnouncementUpdateSubscription from "../../Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
-
-function PlayGroundAnnouncements() {
-  return (
-    <div className="playground">
-      <AnnouncementsDualButtonWithIcon
-        icon={
-          <div className="info-icon-frame">
-            <InfoOutlinedIcon style={{ fill: "#344054" }} />
-          </div>
-        }
-        subject="We’ve just released a new feature"
-        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
-        pariatur, ipsum dolor."
-        esc="Dismiss"
-        primary="View changes"
-      />
-      <br />
-      <br />
-      <AnnouncementsDualButtonWithIcon
-        icon={<ComplexAlert theme="red" />}
-        subject="There was a problem with that action"
-        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
-        pariatur, ipsum dolor."
-        esc="Dismiss"
-        primary="Learn more"
-      />
-      <br />
-      <br />
-      <AnnouncementsDualButtonWithIcon
-        icon={<ComplexAlert theme="green" />}
-        subject="Successfully updated profile"
-        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
-        pariatur, ipsum dolor."
-        esc="Dismiss"
-        primary="Learn more"
-      />
-      <br />
-      <br />
-      <AnnouncementsDualButton
-        subject="We’ve just released a new feature"
-        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
-          pariatur, ipsum dolor."
-        esc="Dismiss"
-        primary="View changes"
-      />
-      <br />
-      <br />
-      <AnnouncementsMessageBar message="New employee created successfully" />
-      <br />
-      <br />
-      <AnnouncementUpdateSubscription
-        title="We’ve just released a new update!"
-        text="Check out the all new dashboard view. Pages and now load faster."
-        cancel="Dismiss"
-        positive="Changelog"
-        header="Subscribe to updates"
-        button="Subscribe"
-      />
-      <br />
-      <br />
-    </div>
-  );
-}
-
-export default PlayGroundAnnouncements;
diff --git a/Client/src/Pages/PlayGround/PlayGround.jsx b/Client/src/Pages/PlayGround/PlayGround.jsx
deleted file mode 100644
index 42f58148e..000000000
--- a/Client/src/Pages/PlayGround/PlayGround.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from "react";
-import PlayGroundCharts from "./PlayGround-Charts";
-import PlayGroundTooltips from "./PlayGround-Tooltips";
-import Field from "../../Components/Inputs/Field";
-
-// This Component is just for the development and test
-// purposes and just to see what my components look like while development
-// and will be removed in the end
-function PlayGround() {
-  return (
-    <div>
-      {/* Default state of Email Text Fields */}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "10px",
-          maxWidth: "400px",
-          padding: "10px",
-        }}
-      >
-        <Field
-          type="email"
-          id="outlined-basic"
-          label="Email"
-          placeholder="olivia@untitledui.com"
-        />
-        {/* Email Text Field when validation error occures */}
-        <Field
-          type="email"
-          id="outlined-basic"
-          label="Email"
-          placeholder="olivia@untitledui.com"
-          error="This is an error message"
-        />
-      </div>
-
-      <hr />
-
-      {/* Now, illustration of the Website text fields */}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "10px",
-          maxWidth: "400px",
-          padding: "10px",
-        }}
-      >
-        <Field type="url" label="Website" />
-        <Field type="url" label="Website" hasCopy={true} />
-      </div>
-
-      <hr />
-      {/* Now, illustration of the Description text fields */}
-
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "10px",
-          maxWidth: "400px",
-          padding: "10px",
-        }}
-      >
-        <Field
-          type="description"
-          label="Description"
-          placeholder="Enter a description... "
-        />
-        <Field
-          type="description"
-          label="Description"
-          placeholder="Enter a description... "
-          error="This is an error message"
-        />
-      </div>
-      <hr />
-      <PlayGroundCharts />
-      <hr />
-      <PlayGroundTooltips />
-    </div>
-  );
-}
-
-export default PlayGround;
diff --git a/Client/src/Pages/PlayGround/playGround.css b/Client/src/Pages/PlayGround/playGround.css
deleted file mode 100644
index cd6d5e87b..000000000
--- a/Client/src/Pages/PlayGround/playGround.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.play-ground-charts {
-  display: flex;
-}
-
-.play-ground-charts-spacing {
-  height: 110px;
-}
-
-.tooltip-playground {
-  margin: auto;
-  padding: 5%;
-  width: 5%;
-  justify-content: center;
-  text-align: center;
-}
-
-.playground {
-  padding: 40px;
-}
diff --git a/Client/src/Pages/Register/index.css b/Client/src/Pages/Register/index.css
deleted file mode 100644
index b3e7c8a89..000000000
--- a/Client/src/Pages/Register/index.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.register-page {
-  display: flex;
-  justify-content: center;
-  height: var(--env-var-height-1);
-}
-.register-page h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large);
-  color: var(--env-var-color-1);
-  font-weight: 600;
-  opacity: 0.5;
-}
-.register-page p.MuiTypography-root,
-.register-page span,
-.register-page button {
-  font-size: var(--env-var-font-size-medium);
-}
-.register-page p.MuiTypography-root {
-  color: var(--env-var-color-2);
-  opacity: 0.8;
-}
-.register-page button:not(.MuiIconButton-root) {
-  height: 34px;
-  border-radius: var(--env-var-radius-2);
-  line-height: 0;
-}
-.register-page svg rect {
-  fill: none;
-}
-.register-page
-  .MuiFormControl-root:has(#register-password-input)
-  + span.MuiTypography-root {
-    display: none;
-    visibility: hidden;
-}
-
-.register-form {
-  margin-top: 95px;
-}
diff --git a/Client/src/Pages/SetNewPassword/index.css b/Client/src/Pages/SetNewPassword/index.css
deleted file mode 100644
index db7160d85..000000000
--- a/Client/src/Pages/SetNewPassword/index.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.set-new-password-page {
-  display: flex;
-  justify-content: center;
-  height: var(--env-var-height-1);
-}
-.set-new-password-page button:not(.MuiIconButton-root) {
-  height: 34px;
-  border-radius: var(--env-var-radius-2);
-  line-height: 0;
-}
-.set-new-password-page h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large);
-  color: var(--env-var-color-1);
-  font-weight: 600;
-}
-.set-new-password-page p.MuiTypography-root,
-.set-new-password-page button {
-  font-size: var(--env-var-font-size-medium);
-}
-.set-new-password-page p.MuiTypography-root {
-  color: var(--env-var-color-2);
-}
-.set-new-password-page button:not(.MuiIconButton-root) svg {
-  margin-right: 5px;
-}
-.set-new-password-page
-  .MuiFormControl-root:has(#register-password-input)
-  + span.MuiTypography-root {
-    display: none;
-    visibility: hidden;
-}
-
-.set-new-password-form {
-  margin-top: 65px;
-  width: var(--env-var-width-2);
-}