Fixed background color not changing on theme swap

Client/src/Pages/Auth/ForgotPassword.jsx

@@ -6,9 +6,11 @@ import { forgotPassword } from "../../Features/Auth/authSlice";
 import { useEffect, useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
+import { IconBox } from "./styled";
 import Field from "../../Components/Inputs/Field";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Key from "../../assets/icons/key.svg?react";
+import Background from "../../assets/Images/background-grid.svg?react";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import LoadingButton from "@mui/lab/LoadingButton";
 import "./index.css";
@@ -94,7 +96,7 @@ const ForgotPassword = () => {
         "& h1": {
           color: theme.palette.primary.main,
           fontWeight: 600,
-          fontSize: 24,
+          fontSize: 21,
         },
         "& p": {
           fontSize: 14,
@@ -104,8 +106,14 @@ const ForgotPassword = () => {
     >
       <Box
         className="background-pattern-svg"
-        sx={{ backgroundImage: `url(${background})` }}
-      />
+        sx={{
+          "& svg g g:last-of-type path": {
+            stroke: theme.palette.border.light,
+          },
+        }}
+      >
+        <Background style={{ width: "100%" }} />
+      </Box>
       <Stack
         direction="row"
         alignItems="center"
@@ -142,7 +150,9 @@ const ForgotPassword = () => {
           textAlign="center"
         >
           <Box>
-            <Key alt="password key icon" />
+            <IconBox>
+              <Key alt="password key icon" />
+            </IconBox>
             <Typography component="h1">Forgot password?</Typography>
             <Typography>
               No worries, we&apos;ll send you reset instructions.

Client/src/Pages/Auth/styled.jsx

@@ -0,0 +1,26 @@
+import { Box, styled } from "@mui/material";
+
+export const IconBox = styled(Box)(({ theme }) => ({
+  height: 48,
+  minWidth: 48,
+  width: 48,
+  position: "relative",
+  border: 1,
+  borderStyle: "solid",
+  borderColor: theme.palette.border.dark,
+  borderRadius: 12,
+  backgroundColor: theme.palette.background.accent,
+  margin: "auto",
+  marginBottom: 4,
+  "& svg": {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 24,
+    height: 24,
+    "& path": {
+      stroke: theme.palette.text.tertiary,
+    },
+  },
+}));