applying changes

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

@@ -14,7 +14,7 @@
 .server-status-tile {
   min-width: 250px;
   width: calc(100% - 310px);
-  padding: var(--spacing-general-1);
+  padding: var(--spacing-general-0);
   border: 1px solid var(--color-border-0);
   border-radius: var(--border-radius-0);
 }
@@ -22,7 +22,7 @@
 .server-status-tile-title {
   font-size: var(--font-size-0);
   font-weight: bold;
-  margin-bottom: 25px;
+  margin-bottom: calc(var(--spacing-general-1) / 2);
 }
 
 .server-status-tile-value {

Client/src/Components/NavBar/index.jsx

@@ -99,8 +99,9 @@ function NavBar() {
       position="sticky"
       sx={{
         width: "100%",
-        backgroundColor: "white",
-        boxShadow: "var(--env-var-shadow-1)",
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        borderBottom: "1px solid var(--color-border-0)",
       }}
     >
       <Container maxWidth="xxl" sx={{ width: "100%" }}>

Client/src/Layouts/HomeLayout/index.css

@@ -6,7 +6,7 @@
   justify-content: flex-start;
 }
 
-.main-content>div:nth-child(2){
+.main-content > div:nth-child(2) {
   position: relative;
   /* overflow-y: auto; */
   flex: 1;

Client/src/Pages/Monitors/Configure/index.jsx

@@ -127,6 +127,7 @@ const Configure = () => {
       style={{
         maxWidth: "1200px",
         padding: `${theme.content.pY} ${theme.content.pX}`,
+        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <Button

Client/src/Pages/Monitors/CreateMonitor/index.jsx

@@ -133,6 +133,7 @@ const CreateMonitor = () => {
       style={{
         maxWidth: "1200px",
         padding: `${theme.content.pY} ${theme.content.pX}`,
+        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <Button

Client/src/Pages/Monitors/Details/index.jsx

@@ -203,6 +203,7 @@ const DetailsPage = () => {
       className="monitor-details"
       style={{
         padding: `${theme.content.pY} ${theme.content.pX}`,
+        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <Button

Client/src/Pages/Monitors/index.css

@@ -5,6 +5,7 @@
 
 .monitors {
   font-family: var(--env-var-font-familt-1);
+  background-color: var(--env-var-color-30);
 }
 
 .monitors-bar {
@@ -23,6 +24,7 @@
   margin-top: var(--env-var-spacing-2);
   display: flex;
   gap: 24px;
+  height: 100px;
 }
 
 .monitors-gaps-medium {

Client/src/Pages/Monitors/index.jsx

@@ -126,6 +126,7 @@ const Monitors = () => {
       className="monitors"
       style={{
         padding: `${theme.content.pY} ${theme.content.pX}`,
+        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <div className="monitors-bar">

Client/src/Pages/Settings/index.jsx

@@ -16,6 +16,7 @@ const Settings = () => {
         maxWidth: "1200px",
         padding: `${theme.content.pY} ${theme.content.pX}`,
         paddingBottom: 0,
+        backgroundColor: "var(--env-var-color-30)",
       }}
     >
       <form className="settings-form" noValidate spellCheck="false">

Client/src/index.css

@@ -48,6 +48,7 @@
   --lighter-env-var-color-27: rgba(254, 207, 96, 0.1);
   --env-var-color-28: #f79009;
   --env-var-color-29: #d0d5dd;
+  --env-var-color-30: #fcfcfd;
 
   --env-var-radius-1: 4px;
   --env-var-radius-2: 8px;