applying changes

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">