diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 39e8ea60306..7749686568e 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -211,6 +211,18 @@ export default function AccountSetting({
 
   return (
     <MenuDialog show onClose={handleClose}>
+      <div className="fixed top-6 right-6 z-20 flex shrink-0 flex-col items-center">
+        <Button
+          variant="tertiary"
+          size="large"
+          className="px-2"
+          aria-label={t(($) => $['operation.close'], { ns: 'common' })}
+          onClick={handleClose}
+        >
+          <span className="i-ri-close-line size-5" />
+        </Button>
+        <div className="mt-1 system-2xs-medium-uppercase text-text-tertiary">ESC</div>
+      </div>
       <div className="flex h-screen w-full max-w-full pl-0 sm:pl-[232px]">
         <div className="flex w-[44px] shrink-0 flex-col pr-6 pl-4 sm:w-[224px]">
           <div className="mt-6 mb-8 flex h-[38px] items-center px-3 title-2xl-semi-bold whitespace-nowrap text-text-primary">
@@ -275,18 +287,6 @@ export default function AccountSetting({
                   </div>
                 )}
               </div>
-              <div className="fixed top-6 right-6 flex shrink-0 flex-col items-center">
-                <Button
-                  variant="tertiary"
-                  size="large"
-                  className="px-2"
-                  aria-label={t(($) => $['operation.close'], { ns: 'common' })}
-                  onClick={handleClose}
-                >
-                  <span className="i-ri-close-line size-5" />
-                </Button>
-                <div className="mt-1 system-2xs-medium-uppercase text-text-tertiary">ESC</div>
-              </div>
             </div>
             <div className="max-w-full min-w-0 px-4 pt-6 sm:px-8">
               {activeMenu === ACCOUNT_SETTING_TAB.PROVIDER && (