diff --git a/src/index.js b/src/index.js
index e1e4fa3..9b7b3b4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
-import { StrictMode } from 'react';
+import { StrictMode, useEffect, useContext } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import "./assets/style/styles.css"
@@ -19,21 +19,28 @@ import reportWebVitals from './reportWebVitals';
 import { I18nProvider } from "components/I18nProvider";
 import { AutoLogoutProvider } from "components/AutoLogoutProvider";
 import { RefreshTokenProvider } from "components/RefreshTokenProvider";
-import { SysSettingProvider } from "components/SysSettingProvider";
+import { SysSettingProvider, SysContext } from 'components/SysSettingProvider';
 
 import { useLocation } from 'react-router-dom';
-import { useEffect } from 'react';
 
 function GreyWrapper({ children }) {
   const location = useLocation();
+  const { sysSetting } = useContext(SysContext);
 
   useEffect(() => {
-    if (location.pathname === "/login") {
-      document.body.classList.add("page-grey");
+    const isLoginPage = location.pathname === '/login';
+    const enableGrey = sysSetting?.greyLogin === true;
+
+    if (isLoginPage && enableGrey) {
+      document.body.classList.add('page-grey');
     } else {
-      document.body.classList.remove("page-grey");
+      document.body.classList.remove('page-grey');
     }
-  }, [location.pathname]);
+
+    return () => {
+      document.body.classList.remove('page-grey');
+    };
+  }, [location.pathname, sysSetting?.greyLogin]);
 
   return children;
 }