diff --git a/client/src/Components/Layouts/AppLayout/index.jsx b/client/src/Components/Layouts/AppLayout/index.jsx
index 564012d72..d13f6d879 100644
--- a/client/src/Components/Layouts/AppLayout/index.jsx
+++ b/client/src/Components/Layouts/AppLayout/index.jsx
@@ -2,16 +2,17 @@ import Box from "@mui/material/Box";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import BackgroundSVG from "../../../assets/Images/background.svg";
+import { useSelector } from "react-redux";
 
 const AppLayout = ({ children }) => {
 	const theme = useTheme();
-
+	const ui = useSelector((state) => state.ui);
 	return (
 		<Box
 			sx={{
 				minHeight: "100vh",
 				backgroundColor: theme.palette.primaryBackground.main,
-				backgroundImage: `url("${BackgroundSVG}")`,
+				backgroundImage: ui?.mode === "dark" ? `url("${BackgroundSVG}")` : "none",
 				backgroundSize: "100% 100%",
 				backgroundPosition: "center",
 				backgroundRepeat: "no-repeat",