diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 623f4102fa..0db7ad3b4e 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -32,7 +32,7 @@ import { FileText } from '@/app/components/base/icons/src/vender/line/files'
 import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
 import type { InputVar } from '@/app/components/workflow/types'
 import { appDefaultIconBackground } from '@/config'
-import { useAppWhiteListSubjects, useGetAppAccessMode, useGetUserCanAccessApp } from '@/service/access-control'
+import { useAppWhiteListSubjects, useGetUserCanAccessApp } from '@/service/access-control'
 import { AccessMode } from '@/models/access-control'
 import { fetchAppDetail } from '@/service/apps'
 
@@ -77,23 +77,27 @@ const AppPublisher = ({
   const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
   const appMode = (appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow') ? 'chat' : appDetail.mode
   const appURL = `${appBaseURL}/${appMode}/${accessToken}`
-  const { data: appAccessMode, isPending: isGettingAppAccessMode } = useGetAppAccessMode({ appId: appDetail?.id })
-  const { data: useCanAccessApp, isPending: isGettingUserCanAccessApp } = useGetUserCanAccessApp({ appId: appDetail?.id })
-  const { data: appAccessSubjects, isPending: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open)
+  const { data: useCanAccessApp, isPending: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
+  const { data: appAccessSubjects, isPending: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
+
+  useEffect(() => {
+    if (open && appDetail)
+      refetch()
+  }, [open, appDetail, refetch])
 
   const [showAppAccessControl, setShowAppAccessControl] = useState(false)
-  const [isAppAccessSet, setIsAppAccessSet] = useState(false)
+  const [isAppAccessSet, setIsAppAccessSet] = useState(true)
   useEffect(() => {
-    if (appAccessMode && appAccessSubjects) {
-      if (appAccessMode.accessMode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length > 0 && appAccessSubjects.members?.length > 0)
+    if (appDetail && appAccessSubjects) {
+      if (appDetail.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length === 0 && appAccessSubjects.members?.length === 0)
         setIsAppAccessSet(false)
       else
         setIsAppAccessSet(true)
     }
     else {
-      setIsAppAccessSet(false)
+      setIsAppAccessSet(true)
     }
-  }, [appAccessSubjects, appAccessMode])
+  }, [appAccessSubjects, appDetail])
   const language = useGetLanguage()
   const formatTimeFromNow = useCallback((time: number) => {
     return dayjs(time).locale(language === 'zh_Hans' ? 'zh-cn' : language.replace('_', '-')).fromNow()
@@ -228,10 +232,10 @@ const AppPublisher = ({
               )
             }
           </div>
-          {(isGettingAppAccessMode || isGettingUserCanAccessApp || isGettingAppWhiteListSubjects)
-            ? <div><Loading /></div>
+          {(isGettingUserCanAccessApp || isGettingAppWhiteListSubjects)
+            ? <div className='py-2'><Loading /></div>
             : <>
-              <Divider />
+              <Divider className='my-0' />
               <div className='p-4 pt-3'>
                 <div className='flex items-center h-6'>
                   <p className='system-xs-medium text-text-tertiary'>{t('app.publishApp.title')}</p>
@@ -242,15 +246,16 @@ const AppPublisher = ({
                   }}>
                   <div className='grow flex items-center gap-x-1.5 pr-1'>
                     <RiLockLine className='w-4 h-4 text-text-secondary shrink-0' />
-                    {appAccessMode?.accessMode === AccessMode.ORGANIZATION && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.organization')}</p>}
-                    {appAccessMode?.accessMode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.specific')}</p>}
-                    {appAccessMode?.accessMode === AccessMode.PUBLIC && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.anyone')}</p>}
+                    {appDetail?.access_mode === AccessMode.ORGANIZATION && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.organization')}</p>}
+                    {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.specific')}</p>}
+                    {appDetail?.access_mode === AccessMode.PUBLIC && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.anyone')}</p>}
                   </div>
                   {!isAppAccessSet && <p className='shrink-0 system-xs-regular text-text-tertiary'>{t('app.publishApp.notSet')}</p>}
                   <div className='shrink-0 w-4 h-4 flex items-center justify-center'>
                     <RiArrowRightSLine className='w-4 h-4 text-text-quaternary' />
                   </div>
                 </div>
+                {!isAppAccessSet && <p className='system-xs-regular text-text-warning mt-1'>{t('app.publishApp.notSetDesc')}</p>}
               </div>
               <div className='p-4 pt-3 border-t-[0.5px] border-t-black/5 flex flex-col gap-y-1'>
                 <Tooltip triggerClassName='flex' disabled={useCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index 24aea7334d..6db796aa3f 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -201,8 +201,9 @@ const translation = {
   publishApp: {
     title: 'Who can access web app',
     notSet: 'Not set',
+    notSetDesc: 'Currently nobody can access the web app. Please set permissions.',
   },
-  noAccessPermission: 'No access permission',
+  noAccessPermission: 'No permission to access web app',
 }
 
 export default translation
diff --git a/web/i18n/ja-JP/app.ts b/web/i18n/ja-JP/app.ts
index 2c67d33b33..02adbd5747 100644
--- a/web/i18n/ja-JP/app.ts
+++ b/web/i18n/ja-JP/app.ts
@@ -189,6 +189,36 @@ const translation = {
     searchAllTemplate: 'すべてのテンプレートを検索...',
   },
   showMyCreatedAppsOnly: '自分が作成したアプリ',
+  accessControl: 'Webアプリアクセス制御',
+  accessControlDialog: {
+    title: 'Webアプリアクセス権',
+    description: 'Webアプリのアクセス権を設定します',
+    accessLabel: 'アクセス権限を持つ人を構成する',
+    accessItems: {
+      anyone: '誰でも',
+      specific: '特定のグループまたはユーザー',
+      organization: '組織内の誰でも',
+    },
+    groups_one: '{{count}} グループ',
+    groups_other: '{{count}} グループ',
+    members_one: '{{count}} メンバー',
+    members_other: '{{count}} メンバー',
+    noGroupsOrMembers: 'グループやメンバーが追加されていません',
+    webAppSSONotEnabledTip: '管理者に連絡して、WebアプリSSO認証方法を有効にしてください。',
+    operateGroupAndMember: {
+      searchPlaceholder: 'グループやメンバーを検索',
+      allMembers: 'すべてのメンバー',
+      expand: '展開',
+      noResult: '結果がありません',
+    },
+    updateSuccess: '更新が成功しました',
+  },
+  publishApp: {
+    title: '私のアプリにアクセスできる人',
+    notSet: '未設定',
+    notSetDesc: '現在、誰もWebアプリにアクセスできません。アクセス権を設定してください。',
+  },
+  noAccessPermission: 'Webアプリにアクセス権限がありません',
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index 0f0062b440..763c08f226 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -182,13 +182,13 @@ const translation = {
     accessLabel: '配置谁有访问权限',
     accessItems: {
       anyone: '任何人',
-      specific: '特定组或用户',
+      specific: '特定组或成员',
       organization: '组织内的任何人',
     },
     groups_one: '{{count}} 个组',
     groups_other: '{{count}} 个组',
-    members_one: '{{count}} 个人',
-    members_other: '{{count}} 个人',
+    members_one: '{{count}} 个成员',
+    members_other: '{{count}} 个成员',
     noGroupsOrMembers: '没有添加组或成员',
     webAppSSONotEnabledTip: '请联系管理员启用 web app SSO 身份验证方式。',
     operateGroupAndMember: {
@@ -202,7 +202,9 @@ const translation = {
   publishApp: {
     title: '谁可以访问我的应用',
     notSet: '未设置',
+    notSetDesc: '目前没有人可以访问 web app，请设置权限。',
   },
+  noAccessPermission: '没有权限访问 web app ',
 }
 
 export default translation
diff --git a/web/service/access-control.ts b/web/service/access-control.ts
index 7c5391f00c..0b295af50e 100644
--- a/web/service/access-control.ts
+++ b/web/service/access-control.ts
@@ -11,6 +11,7 @@ export const useAppWhiteListSubjects = (appId: string | undefined, enabled: bool
     queryKey: [NAME_SPACE, 'app-whitelist-subjects', appId],
     queryFn: () => get<{ groups: AccessControlGroup[]; members: AccessControlAccount[] }>(`/enterprise/webapp/app/subjects?appId=${appId}`),
     enabled: !!appId && enabled,
+    staleTime: 0,
     gcTime: 0,
   })
 }
@@ -71,15 +72,17 @@ export const useGetAppAccessMode = ({ appId, isInstalledApp = true }: { appId?:
     queryKey: [NAME_SPACE, 'app-access-mode', appId],
     queryFn: () => getAppAccessMode(appId!, isInstalledApp),
     enabled: !!appId,
+    staleTime: 0,
     gcTime: 0,
   })
 }
 
-export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true }: { appId?: string; isInstalledApp?: boolean }) => {
+export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true, enabled = true }: { appId?: string; isInstalledApp?: boolean; enabled?: boolean }) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'user-can-access-app', appId],
     queryFn: () => getUserCanAccess(appId!, isInstalledApp),
-    enabled: !!appId,
+    enabled: !!appId && enabled,
+    staleTime: 0,
     gcTime: 0,
   })
 }