diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.module.css b/web/app/components/header/account-setting/members-page/invite-modal/index.module.css
index 932f35c44e..fbaa1187bd 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.module.css
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.module.css
@@ -9,4 +9,4 @@
 
 .emailBackground {
   background-color: white !important;
-}
\ No newline at end of file
+}
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index 6033cc231c..84db48314a 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -62,8 +62,8 @@ const InviteModal = ({
   }, [role, emails, notify, onCancel, onSend, t])
 
   return (
-    <div className={s.wrap}>
-      <Modal overflowVisible isShow onClose={() => {}} className={s.modal}>
+    <div className={cn(s.wrap)}>
+      <Modal overflowVisible isShow onClose={() => {}} className={cn(s.modal)} wrapperClassName='z-20'>
         <div className='flex justify-between mb-2'>
           <div className='text-xl font-semibold text-gray-900'>{t('common.members.inviteTeamMember')}</div>
           <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
index d150900e93..ed6b211978 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
@@ -28,7 +28,7 @@ const InvitedModal = ({
 
   return (
     <div className={s.wrap}>
-      <Modal isShow onClose={() => {}} className={s.modal}>
+      <Modal isShow onClose={() => {}} className={s.modal} wrapperClassName='z-20'>
         <div className='flex justify-between mb-3'>
           <div className='
             w-12 h-12 flex items-center justify-center rounded-xl