diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index bc33ac8e0a..05ec019aa6 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -5,6 +5,7 @@ import { XMarkIcon } from '@heroicons/react/24/outline'
 
 type IModal = {
   className?: string
+  wrapperClassName?: string
   isShow: boolean
   onClose: () => void
   title?: React.ReactNode
@@ -15,6 +16,7 @@ type IModal = {
 
 export default function Modal({
   className,
+  wrapperClassName,
   isShow,
   onClose,
   title,
@@ -38,7 +40,7 @@ export default function Modal({
                 </Transition.Child>
 
                 <div className="fixed inset-0 overflow-y-auto">
-                    <div className="flex min-h-full items-center justify-center p-4 text-center">
+                    <div className={`flex min-h-full items-center justify-center p-4 text-center ${wrapperClassName}`}>
                         <Transition.Child
                             as={Fragment}
                             enter="ease-out duration-300"
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 8b1c51fbeb..7689c24cbb 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -75,6 +75,7 @@ export default function AccountSetting({
       isShow
       onClose={() => { }}
       className={s.modal}
+      wrapperClassName='pt-[60px]'
     >
       <div className='flex'>
         <div className='w-[200px] p-4 border border-gray-100'>