Dimmed down grid line color

Client/src/Pages/Monitors/Home/StatusBox.jsx

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography } from "@mui/material";
 import Arrow from "../../../assets/icons/top-right-arrow.svg?react";
-import background from "../../../assets/Images/background-grid.svg";
+import Background from "../../../assets/Images/background-grid.svg?react";
 import ClockSnooze from "../../../assets/icons/clock-snooze.svg?react";
 
 const StatusBox = ({ title, value }) => {
@@ -55,19 +55,21 @@ const StatusBox = ({ title, value }) => {
         "&:hover": {
           backgroundColor: theme.palette.background.accent,
         },
-        "&:after": {
-          position: "absolute",
-          content: `""`,
-          backgroundImage: `url(${background})`,
-          width: "400px",
-          height: "200px",
-          top: "-10%",
-          left: "5%",
-          zIndex: 10000,
-          pointerEvents: "none",
-        },
       }}
     >
+      <Box
+        sx={{
+          position: "absolute",
+          top: "-10%",
+          left: "5%",
+          pointerEvents: "none",
+          "& svg g g:last-of-type path": {
+            stroke: theme.palette.other.grid,
+          },
+        }}
+      >
+        <Background />
+      </Box>
       <Box
         textTransform="uppercase"
         fontSize={15}

Client/src/Utils/Theme/darkTheme.js

@@ -61,6 +61,7 @@ const darkTheme = createTheme({
       icon: "#e6e6e6",
       line: "#27272a",
       fill: "#18181a",
+      grid: "#454546",
     },
     // TO BE REMOVED //
     primary: {

Client/src/Utils/Theme/lightTheme.js

@@ -59,6 +59,7 @@ const lightTheme = createTheme({
       icon: "#667085",
       line: "#d6d9dd",
       fill: "#e3e3e3",
+      grid: "#a2a3a3",
     },
     // TO BE REMOVED //
     primary: {