add a background component

client/src/Components/Layouts/AppLayout/index.jsx

@@ -0,0 +1,30 @@
+import Box from "@mui/material/Box";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import BackgroundSVG from "../../../assets/Images/background.svg";
+
+const AppLayout = ({ children }) => {
+	const theme = useTheme();
+
+	return (
+		<Box
+			sx={{
+				minHeight: "100vh",
+				backgroundColor: theme.palette.primaryBackground.main,
+				backgroundImage: `url("${BackgroundSVG}")`,
+				backgroundSize: "100% 100%",
+				backgroundPosition: "center",
+				backgroundRepeat: "no-repeat",
+				color: theme.palette.primary.contrastText,
+			}}
+		>
+			{children}
+		</Box>
+	);
+};
+
+AppLayout.propTypes = {
+	children: PropTypes.node,
+};
+
+export default AppLayout;

client/src/Components/Sidebar/index.jsx

@@ -231,7 +231,6 @@ function Sidebar() {
 				borderRight: `1px solid ${theme.palette.primary.lowContrast}`,
 				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: 0,
-				backgroundColor: theme.palette.primary.main,
 				"& :is(p, span, .MuiListSubheader-root)": {
 					/* 
 					Text color for unselected menu items and menu headings

client/src/Components/StarPrompt/index.jsx

@@ -33,7 +33,6 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 				borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
 				borderRadius: 0,
 				gap: theme.spacing(1.5),
-				backgroundColor: theme.palette.primary.main,
 			}}
 		>
 			<Stack