diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 6f64d45da..9afecbbf8 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -20,7 +20,7 @@ function App() {
return (
<>
- }>
+ {/* }>
} />
} />
} />
@@ -38,7 +38,8 @@ function App() {
}
- />
+ /> */}
+ } />
>
);
diff --git a/Client/src/Components/Charts/Servers/serverStatus.css b/Client/src/Components/Charts/Servers/serverStatus.css
index 9126d9b3b..f42ae2801 100644
--- a/Client/src/Components/Charts/Servers/serverStatus.css
+++ b/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);
diff --git a/Client/src/Components/CurrentMonitors/index.css b/Client/src/Components/CurrentMonitors/index.css
new file mode 100644
index 000000000..7b00b1cec
--- /dev/null
+++ b/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();
+}
diff --git a/Client/src/Components/CurrentMonitors/index.jsx b/Client/src/Components/CurrentMonitors/index.jsx
new file mode 100644
index 000000000..bf376c832
--- /dev/null
+++ b/Client/src/Components/CurrentMonitors/index.jsx
@@ -0,0 +1,18 @@
+import "./index.css";
+import React from "react";
+
+const CurrentMonitors = () => {
+ return (
+
+ );
+};
+
+export default CurrentMonitors;
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index e69de29bb..eab5fbb7d 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/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);
+}
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 6d4e3d59d..0c0555d5a 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/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 (
- Monitors
- )
-}
+ return (
+
+ );
+};
-export default Monitors
\ No newline at end of file
+export default Monitors;