Some implementations

Client/src/App.jsx

@@ -20,7 +20,7 @@ function App() {
   return (
     <>
       <Routes>
-        <Route exact path="/" element={<HomeLayout />}>
+        {/* <Route exact path="/" element={<HomeLayout />}>
           <Route path="monitors" element={<Monitors />} />
           <Route path="incidents" element={<Incidents />} />
           <Route path="status" element={<Status />} />
@@ -38,7 +38,8 @@ function App() {
         <Route
           path="/new-password-confirmed"
           element={<NewPasswordConfirmed />}
-        />
+        /> */}
+        <Route exact path="/" element={<Monitors />} />
       </Routes>
     </>
   );

Client/src/Components/Charts/Servers/serverStatus.css

@@ -13,8 +13,6 @@
 
 .server-status-tile {
   width: 230px;
-  margin: var(--spacing-general-0);
-  margin-left: 10px;
   padding: var(--spacing-general-1);
   border: 1px solid var(--color-border-0);
   border-radius: var(--border-radius-0);

Client/src/Components/CurrentMonitors/index.css

@@ -0,0 +1,15 @@
+.current-monitors {
+  border: 1px solid #eaecf0;
+  padding: 40px;
+  border-radius: 4px;
+}
+
+.current-monitors-title-holder {
+  display: flex;
+}
+
+.current-monitors-title {
+  font-size: 1rem;
+  font-weight: bold;
+  margin-right: var();
+}

Client/src/Components/CurrentMonitors/index.jsx

@@ -0,0 +1,18 @@
+import "./index.css";
+import React from "react";
+
+const CurrentMonitors = () => {
+  return (
+    <div className="current-monitors">
+      <div className="current-monitors-bar">
+        <div className="current-monitors-title-holder">
+          <div className="current-monitors-title">Current monitors</div>
+          <div className="current-monitors-counter">5</div>
+        </div>
+        <div className="current-monitors-search-bar"></div>
+      </div>
+    </div>
+  );
+};
+
+export default CurrentMonitors;

Client/src/Pages/Monitors/index.css

@@ -0,0 +1,25 @@
+.monitors {
+  width: 90vw;
+  min-height: 100vh;
+  padding: 4vw;
+}
+
+.monitors-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.monitors-bar-title {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.monitors-stats {
+  display: flex;
+  justify-content: space-between;
+}
+
+.monitors-gaps-medium {
+  height: var(--env-var-spacing-2);
+}

Client/src/Pages/Monitors/index.jsx

@@ -1,9 +1,30 @@
-import React from 'react'
+import Button from "../../Components/Button";
+import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
+import CurrentMonitors from "../../Components/CurrentMonitors";
+import "./index.css";
+import React from "react";
 
 const Monitors = () => {
-    return (
-        <div>Monitors</div>
-    )
-}
+  return (
+    <div className="monitors">
+      <div className="monitors-bar">
+        <div className="monitors-bar-title">Hello, Jackie</div>
+        <Button
+          level="primary"
+          label="Create new monitor"
+          sx={{ padding: "10px 20px", fontSize: "13px" }}
+        />
+      </div>
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-stats">
+        <ServerStatus title="Up" value="4" state="up" />
+        <ServerStatus title="Down" value="0" state="down" />
+        <ServerStatus title="Paused" value="0" state="pause" />
+      </div>
+      <div className="monitors-gaps-medium"></div>
+      <CurrentMonitors />
+    </div>
+  );
+};
 
-export default Monitors
+export default Monitors;