diff --git a/packages/extension/src/index.tsx b/packages/extension/src/index.tsx
index f3587658a8..bb19c2cb5c 100644
--- a/packages/extension/src/index.tsx
+++ b/packages/extension/src/index.tsx
@@ -245,142 +245,144 @@ const RoutesAfterReady: FunctionComponent = observer(() => {
     return true;
   })();
 
+  const shouldUnlockPage = keyRingStore.status === "locked" && !isURLUnlockPage;
+
   return (
     <HashRouter>
       {isReady ? (
-        keyRingStore.status === "locked" && !isURLUnlockPage ? (
+        shouldUnlockPage ? (
           <UnlockPage />
         ) : (
-          <React.Fragment>
-            <Routes>
-              <Route path="/unlock" element={<UnlockPage />} />
-              <Route path="/" element={<MainPage />} />
-              <Route path="/send" element={<SendAmountPage />} />
-              <Route
-                path="/send/select-asset"
-                element={<SendSelectAssetPage />}
-              />
-              <Route path="/setting" element={<SettingPage />} />
-              <Route path="/setting/general" element={<SettingGeneralPage />} />
-              <Route
-                path="/setting/general/language"
-                element={<SettingGeneralLanguagePage />}
-              />
-              <Route
-                path="/setting/general/fiat"
-                element={<SettingGeneralFiatPage />}
-              />
-              <Route
-                path="/setting/general/theme"
-                element={<SettingGeneralThemePage />}
-              />
-              <Route
-                path="/setting/general/authz"
-                element={<SettingGeneralAuthZPage />}
-              />
-              <Route
-                path="/setting/general/authz/revoke"
-                element={<SettingGeneralAuthZRevokePage />}
-              />
-              <Route
-                path="/setting/general/link-keplr-mobile"
-                element={<SettingGeneralLinkKeplrMobilePage />}
-              />
-              <Route
-                path="setting/general/delete-suggest-chain"
-                element={<SettingGeneralDeleteSuggestChainPage />}
-              />
-              <Route
-                path="/setting/advanced"
-                element={<SettingAdvancedPage />}
-              />
-              <Route
-                path="/setting/advanced/endpoint"
-                element={<SettingAdvancedEndpointPage />}
-              />
-              <Route
-                path="/setting/security"
-                element={<SettingSecurityPage />}
-              />
-              <Route
-                path="/setting/security/permission"
-                element={<SettingSecurityPermissionPage />}
-              />
-              <Route
-                path="/setting/security/auto-lock"
-                element={<SettingSecurityAutoLockPage />}
-              />
-              <Route
-                path="/setting/security/change-password"
-                element={<SettingSecurityChangePasswordPage />}
-              />
-              <Route
-                path="/setting/token/list"
-                element={<SettingTokenListPage />}
-              />
-              <Route
-                path="/setting/token/add"
-                element={<SettingTokenAddPage />}
-              />
-              <Route
-                path="/setting/contacts/list"
-                element={<SettingContactsList />}
-              />
-              <Route
-                path="/setting/contacts/add"
-                element={<SettingContactsAdd />}
-              />
-              <Route path="/permission" element={<PermissionPage />} />
-              <Route path="/sign-cosmos" element={<SignCosmosTxPage />} />
-              <Route
-                path="/sign-cosmos-adr36"
-                element={<SignCosmosADR36Page />}
-              />
-              <Route
-                path="/sign-cosmos-icns"
-                element={<SignCosmosICNSPage />}
-              />
-              <Route path="/sign-ethereum" element={<SignEthereumTxPage />} />
-              <Route path="/wallet/select" element={<WalletSelectPage />} />
-              <Route path="/wallet/delete" element={<WalletDeletePage />} />
-              <Route
-                path="/wallet/change-name"
-                element={<WalletChangeNamePage />}
-              />
-              <Route
-                path="/wallet/show-sensitive"
-                element={<WalletShowSensitivePage />}
-              />
-              <Route path="/suggest-chain" element={<SuggestChainPage />} />
-              <Route path="/ibc-transfer" element={<IBCTransferPage />} />
-            </Routes>
-
-            <LightModeBackground />
-          </React.Fragment>
+          <Routes>
+            <Route path="/unlock" element={<UnlockPage />} />
+            <Route path="/" element={<MainPage />} />
+            <Route path="/send" element={<SendAmountPage />} />
+            <Route
+              path="/send/select-asset"
+              element={<SendSelectAssetPage />}
+            />
+            <Route path="/setting" element={<SettingPage />} />
+            <Route path="/setting/general" element={<SettingGeneralPage />} />
+            <Route
+              path="/setting/general/language"
+              element={<SettingGeneralLanguagePage />}
+            />
+            <Route
+              path="/setting/general/fiat"
+              element={<SettingGeneralFiatPage />}
+            />
+            <Route
+              path="/setting/general/theme"
+              element={<SettingGeneralThemePage />}
+            />
+            <Route
+              path="/setting/general/authz"
+              element={<SettingGeneralAuthZPage />}
+            />
+            <Route
+              path="/setting/general/authz/revoke"
+              element={<SettingGeneralAuthZRevokePage />}
+            />
+            <Route
+              path="/setting/general/link-keplr-mobile"
+              element={<SettingGeneralLinkKeplrMobilePage />}
+            />
+            <Route
+              path="setting/general/delete-suggest-chain"
+              element={<SettingGeneralDeleteSuggestChainPage />}
+            />
+            <Route path="/setting/advanced" element={<SettingAdvancedPage />} />
+            <Route
+              path="/setting/advanced/endpoint"
+              element={<SettingAdvancedEndpointPage />}
+            />
+            <Route path="/setting/security" element={<SettingSecurityPage />} />
+            <Route
+              path="/setting/security/permission"
+              element={<SettingSecurityPermissionPage />}
+            />
+            <Route
+              path="/setting/security/auto-lock"
+              element={<SettingSecurityAutoLockPage />}
+            />
+            <Route
+              path="/setting/security/change-password"
+              element={<SettingSecurityChangePasswordPage />}
+            />
+            <Route
+              path="/setting/token/list"
+              element={<SettingTokenListPage />}
+            />
+            <Route
+              path="/setting/token/add"
+              element={<SettingTokenAddPage />}
+            />
+            <Route
+              path="/setting/contacts/list"
+              element={<SettingContactsList />}
+            />
+            <Route
+              path="/setting/contacts/add"
+              element={<SettingContactsAdd />}
+            />
+            <Route path="/permission" element={<PermissionPage />} />
+            <Route path="/sign-cosmos" element={<SignCosmosTxPage />} />
+            <Route
+              path="/sign-cosmos-adr36"
+              element={<SignCosmosADR36Page />}
+            />
+            <Route path="/sign-cosmos-icns" element={<SignCosmosICNSPage />} />
+            <Route path="/sign-ethereum" element={<SignEthereumTxPage />} />
+            <Route path="/wallet/select" element={<WalletSelectPage />} />
+            <Route path="/wallet/delete" element={<WalletDeletePage />} />
+            <Route
+              path="/wallet/change-name"
+              element={<WalletChangeNamePage />}
+            />
+            <Route
+              path="/wallet/show-sensitive"
+              element={<WalletShowSensitivePage />}
+            />
+            <Route path="/suggest-chain" element={<SuggestChainPage />} />
+            <Route path="/ibc-transfer" element={<IBCTransferPage />} />
+          </Routes>
         )
       ) : (
         <Splash />
       )}
+      <LightModeBackground
+        isReady={isReady}
+        shouldUnlockPage={shouldUnlockPage}
+      />
     </HashRouter>
   );
 });
 
-const LightModeBackground: FunctionComponent = () => {
+const LightModeBackground: FunctionComponent<{
+  isReady: boolean;
+  shouldUnlockPage: boolean;
+}> = ({ isReady, shouldUnlockPage }) => {
   const theme = useTheme();
   const location = useLocation();
 
   useLayoutEffect(() => {
-    if (
-      location.pathname.startsWith("/setting") ||
-      location.pathname.startsWith("/send")
-    ) {
-      document.body.setAttribute("data-white-background", "true");
-
-      return () => {
-        document.body.removeAttribute("data-white-background");
-      };
+    if (isReady && !shouldUnlockPage) {
+      if (
+        location.pathname === "/setting" ||
+        location.pathname.startsWith("/setting/") ||
+        location.pathname === "/send" ||
+        location.pathname.startsWith("/send/")
+      ) {
+        document.documentElement.setAttribute("data-white-background", "true");
+        document.body.setAttribute("data-white-background", "true");
+
+        return () => {
+          document.documentElement.removeAttribute("data-white-background");
+          document.body.removeAttribute("data-white-background");
+        };
+      }
     }
-  }, [location.pathname, theme]);
+  }, [location.pathname, theme, isReady, shouldUnlockPage]);
 
   return null;
 };
diff --git a/packages/extension/src/layouts/header/header.tsx b/packages/extension/src/layouts/header/header.tsx
index 323e3e46f7..4431ded93a 100644
--- a/packages/extension/src/layouts/header/header.tsx
+++ b/packages/extension/src/layouts/header/header.tsx
@@ -10,7 +10,6 @@ import {
   SpecialButton,
   getSpecialButtonHeightRem,
 } from "../../components/special-button";
-import { useLocation } from "react-router-dom";
 
 const pxToRem = (px: number) => {
   const base = parseFloat(
@@ -23,16 +22,21 @@ const bottomButtonPaddingRem = 0.75;
 const Styles = {
   Container: styled.div``,
 
-  HeaderContainer: styled.div<{ path?: string }>`
+  HeaderContainer: styled.div`
     height: 3.75rem;
 
     background: ${(props) =>
       props.theme.mode === "light"
-        ? props.path?.startsWith("/setting") || props.path?.startsWith("/send")
-          ? ColorPalette.white
-          : ColorPalette["light-gradient"]
+        ? ColorPalette["light-gradient"]
         : ColorPalette["gray-700"]};
 
+    body[data-white-background="true"] & {
+      background: ${(props) =>
+        props.theme.mode === "light"
+          ? ColorPalette["white"]
+          : ColorPalette["gray-700"]};
+    }
+
     color: ${(props) =>
       props.theme.mode === "light"
         ? ColorPalette["gray-400"]
@@ -134,7 +138,6 @@ export const HeaderLayout: FunctionComponent<HeaderProps> = ({
 }) => {
   const [height, setHeight] = React.useState(() => pxToRem(600));
   const lastSetHeight = useRef(-1);
-  const location = useLocation();
 
   useLayoutEffect(() => {
     function handleResize() {
@@ -175,7 +178,7 @@ export const HeaderLayout: FunctionComponent<HeaderProps> = ({
 
   return (
     <Styles.Container as={onSubmit ? "form" : undefined} onSubmit={onSubmit}>
-      <Styles.HeaderContainer path={location.pathname}>
+      <Styles.HeaderContainer>
         {left && !isNotReady ? (
           <Styles.HeaderLeft>{left}</Styles.HeaderLeft>
         ) : null}