diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
index 6ca120aea6..5d2da57adb 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
@@ -37,51 +37,57 @@ const SwitchCredentialInLoadBalancing = ({
   onRemove,
 }: SwitchCredentialInLoadBalancingProps) => {
   const { t } = useTranslation()
-
+  const notAllowCustomCredential = provider.allow_custom_token === false
   const handleItemClick = useCallback((credential: Credential) => {
     setCustomModelCredential(credential)
   }, [setCustomModelCredential])
 
   const renderTrigger = useCallback(() => {
     const selectedCredentialId = customModelCredential?.credential_id
-    const authRemoved = !selectedCredentialId && !!credentials?.length
+    const currentCredential = credentials?.find(c => c.credential_id === selectedCredentialId)
+    const empty = !credentials?.length
+    const authRemoved = selectedCredentialId && !currentCredential && !empty
+    const unavailable = currentCredential?.not_allowed_to_use
+
     let color = 'green'
-    if (authRemoved && !customModelCredential?.not_allowed_to_use)
+    if (authRemoved || unavailable)
       color = 'red'
-    if (customModelCredential?.not_allowed_to_use)
-      color = 'gray'
 
     const Item = (
       <Button
         variant='secondary'
         className={cn(
           'shrink-0 space-x-1',
-          authRemoved && 'text-components-button-destructive-secondary-text',
-          customModelCredential?.not_allowed_to_use && 'cursor-not-allowed opacity-50',
+          (authRemoved || unavailable) && 'text-components-button-destructive-secondary-text',
+          empty && 'cursor-not-allowed opacity-50',
         )}
       >
-        <Indicator
-          className='mr-2'
-          color={color as any}
-        />
         {
-          authRemoved && !customModelCredential?.not_allowed_to_use && t('common.modelProvider.auth.authRemoved')
+          !empty && (
+            <Indicator
+              className='mr-2'
+              color={color as any}
+            />
+          )
         }
         {
-          !authRemoved && customModelCredential?.not_allowed_to_use && t('plugin.auth.credentialUnavailable')
+          authRemoved && t('common.modelProvider.auth.authRemoved')
         }
         {
-          !authRemoved && !customModelCredential?.not_allowed_to_use && customModelCredential?.credential_name
+          (unavailable || empty) && t('plugin.auth.credentialUnavailableInButton')
         }
         {
-          customModelCredential?.from_enterprise && (
+          !authRemoved && !unavailable && !empty && customModelCredential?.credential_name
+        }
+        {
+          currentCredential?.from_enterprise && (
             <Badge className='ml-2'>Enterprise</Badge>
           )
         }
         <RiArrowDownSLine className='h-4 w-4' />
       </Button>
     )
-    if (customModelCredential?.not_allowed_to_use) {
+    if (empty && notAllowCustomCredential) {
       return (
         <Tooltip
           asChild
@@ -92,7 +98,7 @@ const SwitchCredentialInLoadBalancing = ({
       )
     }
     return Item
-  }, [customModelCredential, t, credentials])
+  }, [customModelCredential, t, credentials, notAllowCustomCredential])
 
   return (
     <Authorized
@@ -123,6 +129,7 @@ const SwitchCredentialInLoadBalancing = ({
       enableAddModelCredential
       showItemSelectedIcon
       popupTitle={t('common.modelProvider.auth.modelCredentials')}
+      triggerOnlyOpenModal={!credentials?.length}
     />
   )
 }
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
index 79eef66451..60297094c3 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -36,14 +36,22 @@ const AuthorizedInNode = ({
     disabled,
     invalidPluginCredentialInfo,
     notAllowCustomCredential,
-  } = usePluginAuth(pluginPayload, isOpen || !!credentialId)
+  } = usePluginAuth(pluginPayload, true)
   const renderTrigger = useCallback((open?: boolean) => {
     let label = ''
     let removed = false
     let unavailable = false
     let color = 'green'
+    let defaultUnavailable = false
     if (!credentialId) {
       label = t('plugin.auth.workspaceDefault')
+
+      const defaultCredential = credentials.find(c => c.is_default)
+
+      if (defaultCredential?.not_allowed_to_use) {
+        color = 'gray'
+        defaultUnavailable = true
+      }
     }
     else {
       const credential = credentials.find(c => c.id === credentialId)
@@ -63,6 +71,7 @@ const AuthorizedInNode = ({
           open && !removed && 'bg-components-button-ghost-bg-hover',
           removed && 'bg-transparent text-text-destructive',
         )}
+        variant={(defaultUnavailable || unavailable) ? 'ghost' : 'secondary'}
       >
         <Indicator
           className='mr-1.5'
@@ -70,7 +79,12 @@ const AuthorizedInNode = ({
         />
         {label}
         {
-          unavailable && t('plugin.auth.unavailable')
+          (unavailable || defaultUnavailable) && (
+            <>
+              &nbsp;
+              {t('plugin.auth.unavailable')}
+            </>
+          )
         }
         <RiArrowDownSLine
           className={cn(
@@ -81,6 +95,7 @@ const AuthorizedInNode = ({
       </Button>
     )
   }, [credentialId, credentials, t])
+  const defaultUnavailable = credentials.find(c => c.is_default)?.not_allowed_to_use
   const extraAuthorizationItems: Credential[] = [
     {
       id: '__workspace_default__',
@@ -88,6 +103,7 @@ const AuthorizedInNode = ({
       provider: '',
       is_default: !credentialId,
       isWorkspaceDefault: true,
+      not_allowed_to_use: defaultUnavailable,
     },
   ]
   const handleAuthorizationItemClick = useCallback((id: string) => {
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 85bbd44bd5..9ac1a7baa0 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -298,6 +298,7 @@ const translation = {
     clientInfo: 'As no system client secrets found for this tool provider, setup it manually is required, for redirect_uri, please use',
     oauthClient: 'OAuth Client',
     credentialUnavailable: 'Credentials currently unavailable. Please contact admin.',
+    credentialUnavailableInButton: 'Credential unavailable',
     customCredentialUnavailable: 'Custom credentials currently unavailable',
     unavailable: 'Unavailable',
   },
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index e37de6d69f..d815eb9fae 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -298,6 +298,7 @@ const translation = {
     clientInfo: '由于未找到此工具提供者的系统客户端密钥，因此需要手动设置，对于 redirect_uri，请使用',
     oauthClient: 'OAuth 客户端',
     credentialUnavailable: '自定义凭据当前不可用，请联系管理员。',
+    credentialUnavailableInButton: '凭据不可用',
     customCredentialUnavailable: '自定义凭据当前不可用',
     unavailable: '不可用',
   },