diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 66fe85a170..d78d4dba0a 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -18,7 +18,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
-import Toast from '@/app/components/base/toast'
 import ConfigContext from '@/context/debug-configuration'
 import type { AgentTool } from '@/types/app'
 import { type Collection, CollectionType } from '@/app/components/tools/types'
@@ -26,8 +25,6 @@ import { MAX_TOOLS_NUM } from '@/config'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
 import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
-import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
-import { updateBuiltInToolCredential } from '@/service/tools'
 import cn from '@/utils/classnames'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
@@ -57,13 +54,7 @@ const AgentTools: FC = () => {
 
   const formattingChangedDispatcher = useFormattingChangedDispatcher()
   const [currentTool, setCurrentTool] = useState<AgentToolWithMoreInfo>(null)
-  const currentCollection = useMemo(() => {
-    if (!currentTool) return null
-    const collection = collectionList.find(collection => canFindTool(collection.id, currentTool?.provider_id) && collection.type === currentTool?.provider_type)
-    return collection
-  }, [currentTool, collectionList])
   const [isShowSettingTool, setIsShowSettingTool] = useState(false)
-  const [isShowSettingAuth, setShowSettingAuth] = useState(false)
   const tools = (modelConfig?.agentConfig?.tools as AgentTool[] || []).map((item) => {
     const collection = collectionList.find(
       collection =>
@@ -100,17 +91,6 @@ const AgentTools: FC = () => {
     formattingChangedDispatcher()
   }
 
-  const handleToolAuthSetting = (value: AgentToolWithMoreInfo) => {
-    const newModelConfig = produce(modelConfig, (draft) => {
-      const tool = (draft.agentConfig.tools).find((item: any) => item.provider_id === value?.collection?.id && item.tool_name === value?.tool_name)
-      if (tool)
-        (tool as AgentTool).notAuthor = false
-    })
-    setModelConfig(newModelConfig)
-    setIsShowSettingTool(false)
-    formattingChangedDispatcher()
-  }
-
   const [isDeleting, setIsDeleting] = useState<number>(-1)
   const getToolValue = (tool: ToolDefaultValue) => {
     return {
@@ -144,6 +124,20 @@ const AgentTools: FC = () => {
     return item.provider_name
   }
 
+  const handleAuthorizationItemClick = useCallback((credentialId: string) => {
+    const newModelConfig = produce(modelConfig, (draft) => {
+      const tool = (draft.agentConfig.tools).find((item: any) => item.provider_id === currentTool?.provider_id)
+      if (tool)
+        (tool as AgentTool).credential_id = credentialId
+    })
+    setCurrentTool({
+      ...currentTool,
+      credential_id: credentialId,
+    } as any)
+    setModelConfig(newModelConfig)
+    formattingChangedDispatcher()
+  }, [currentTool, modelConfig, setModelConfig, formattingChangedDispatcher])
+
   return (
     <>
       <Panel
@@ -302,7 +296,7 @@ const AgentTools: FC = () => {
                   {item.notAuthor && (
                     <Button variant='secondary' size='small' onClick={() => {
                       setCurrentTool(item)
-                      setShowSettingAuth(true)
+                      setIsShowSettingTool(true)
                     }}>
                       {t('tools.notAuthorized')}
                       <Indicator className='ml-2' color='orange' />
@@ -322,21 +316,8 @@ const AgentTools: FC = () => {
           isModel={currentTool?.collection?.type === CollectionType.model}
           onSave={handleToolSettingChange}
           onHide={() => setIsShowSettingTool(false)}
-        />
-      )}
-      {isShowSettingAuth && (
-        <ConfigCredential
-          collection={currentCollection as any}
-          onCancel={() => setShowSettingAuth(false)}
-          onSaved={async (value) => {
-            await updateBuiltInToolCredential((currentCollection as any).name, value)
-            Toast.notify({
-              type: 'success',
-              message: t('common.api.actionSuccess'),
-            })
-            handleToolAuthSetting(currentTool)
-            setShowSettingAuth(false)
-          }}
+          credentialId={currentTool?.credential_id}
+          onAuthorizationItemClick={handleAuthorizationItemClick}
         />
       )}
     </>
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index 1ad814c6e9..92f1525bd5 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -14,7 +14,6 @@ import Icon from '@/app/components/plugins/card/base/card-icon'
 import OrgInfo from '@/app/components/plugins/card/base/org-info'
 import Description from '@/app/components/plugins/card/base/description'
 import TabSlider from '@/app/components/base/tab-slider-plain'
-
 import Button from '@/app/components/base/button'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
@@ -25,6 +24,10 @@ import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
 import cn from '@/utils/classnames'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import {
+  AuthCategory,
+  PluginAuthInAgent,
+} from '@/app/components/plugins/plugin-auth'
 
 type Props = {
   showBackButton?: boolean
@@ -36,6 +39,8 @@ type Props = {
   readonly?: boolean
   onHide: () => void
   onSave?: (value: Record<string, any>) => void
+  credentialId?: string
+  onAuthorizationItemClick?: (id: string) => void
 }
 
 const SettingBuiltInTool: FC<Props> = ({
@@ -48,6 +53,8 @@ const SettingBuiltInTool: FC<Props> = ({
   readonly,
   onHide,
   onSave,
+  credentialId,
+  onAuthorizationItemClick,
 }) => {
   const { locale } = useContext(I18n)
   const language = getLanguage(locale)
@@ -197,8 +204,20 @@ const SettingBuiltInTool: FC<Props> = ({
               </div>
               <div className='system-md-semibold mt-1 text-text-primary'>{currTool?.label[language]}</div>
               {!!currTool?.description[language] && (
-                <Description className='mt-3' text={currTool.description[language]} descriptionLineRows={2}></Description>
+                <Description className='mb-2 mt-3 h-auto' text={currTool.description[language]} descriptionLineRows={2}></Description>
               )}
+              {
+                collection.allow_delete && collection.type === CollectionType.builtIn && (
+                  <PluginAuthInAgent
+                    pluginPayload={{
+                      provider: collection.name,
+                      category: AuthCategory.tool,
+                    }}
+                    credentialId={credentialId}
+                    onAuthorizationItemClick={onAuthorizationItemClick}
+                  />
+                )
+              }
             </div>
             {/* form */}
             <div className='h-full'>
diff --git a/web/app/components/app/configuration/config/config-audio.tsx b/web/app/components/app/configuration/config/config-audio.tsx
new file mode 100644
index 0000000000..5600f8cbb6
--- /dev/null
+++ b/web/app/components/app/configuration/config/config-audio.tsx
@@ -0,0 +1,78 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { useContext } from 'use-context-selector'
+
+import { Microphone01 } from '@/app/components/base/icons/src/vender/features'
+import Tooltip from '@/app/components/base/tooltip'
+import ConfigContext from '@/context/debug-configuration'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import Switch from '@/app/components/base/switch'
+
+const ConfigAudio: FC = () => {
+  const { t } = useTranslation()
+  const file = useFeatures(s => s.features.file)
+  const featuresStore = useFeaturesStore()
+  const { isShowAudioConfig } = useContext(ConfigContext)
+
+  const isAudioEnabled = file?.allowed_file_types?.includes(SupportUploadFileTypes.audio) ?? false
+
+  const handleChange = useCallback((value: boolean) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+
+    const newFeatures = produce(features, (draft) => {
+      if (value) {
+        draft.file!.allowed_file_types = Array.from(new Set([
+          ...(draft.file?.allowed_file_types || []),
+          SupportUploadFileTypes.audio,
+        ]))
+      }
+      else {
+        draft.file!.allowed_file_types = draft.file!.allowed_file_types?.filter(
+          type => type !== SupportUploadFileTypes.audio,
+        )
+      }
+      if (draft.file)
+        draft.file.enabled = (draft.file.allowed_file_types?.length ?? 0) > 0
+    })
+    setFeatures(newFeatures)
+  }, [featuresStore])
+
+  if (!isShowAudioConfig)
+    return null
+
+  return (
+    <div className='mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] bg-background-section-burn p-2'>
+      <div className='shrink-0 p-1'>
+        <div className='rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs'>
+          <Microphone01 className='h-4 w-4 text-text-primary-on-surface' />
+        </div>
+      </div>
+      <div className='flex grow items-center'>
+        <div className='system-sm-semibold mr-1 text-text-secondary'>{t('appDebug.feature.audioUpload.title')}</div>
+        <Tooltip
+          popupContent={
+            <div className='w-[180px]' >
+              {t('appDebug.feature.audioUpload.description')}
+            </div>
+          }
+        />
+      </div>
+      <div className='flex shrink-0 items-center'>
+        <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-subtle'></div>
+        <Switch
+          defaultValue={isAudioEnabled}
+          onChange={handleChange}
+          size='md'
+        />
+      </div>
+    </div>
+  )
+}
+export default React.memo(ConfigAudio)
diff --git a/web/app/components/app/configuration/config/index.tsx b/web/app/components/app/configuration/config/index.tsx
index dc2095502e..d0375c6de9 100644
--- a/web/app/components/app/configuration/config/index.tsx
+++ b/web/app/components/app/configuration/config/index.tsx
@@ -8,6 +8,7 @@ import DatasetConfig from '../dataset-config'
 import HistoryPanel from '../config-prompt/conversation-history/history-panel'
 import ConfigVision from '../config-vision'
 import ConfigDocument from './config-document'
+import ConfigAudio from './config-audio'
 import AgentTools from './agent/agent-tools'
 import ConfigContext from '@/context/debug-configuration'
 import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
@@ -85,6 +86,8 @@ const Config: FC = () => {
 
         <ConfigDocument />
 
+        <ConfigAudio />
+
         {/* Chat History */}
         {isAdvancedMode && isChatApp && modelModeType === ModelModeType.completion && (
           <HistoryPanel
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 947467bf83..02f1928eca 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -474,6 +474,7 @@ const Configuration: FC = () => {
 
   const isShowVisionConfig = !!currModel?.features?.includes(ModelFeatureEnum.vision)
   const isShowDocumentConfig = !!currModel?.features?.includes(ModelFeatureEnum.document)
+  const isShowAudioConfig = !!currModel?.features?.includes(ModelFeatureEnum.audio)
   const isAllowVideoUpload = !!currModel?.features?.includes(ModelFeatureEnum.video)
   // *** web app features ***
   const featuresData: FeaturesData = useMemo(() => {
@@ -920,6 +921,7 @@ const Configuration: FC = () => {
       setVisionConfig: handleSetVisionConfig,
       isAllowVideoUpload,
       isShowDocumentConfig,
+      isShowAudioConfig,
       rerankSettingModalOpen,
       setRerankSettingModalOpen,
     }}
diff --git a/web/app/components/base/form/components/base/base-field.tsx b/web/app/components/base/form/components/base/base-field.tsx
index f997297691..47a8cca419 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -7,6 +7,7 @@ import type { AnyFieldApi } from '@tanstack/react-form'
 import { useStore } from '@tanstack/react-form'
 import cn from '@/utils/classnames'
 import Input from '@/app/components/base/input'
+import PureSelect from '@/app/components/base/select/pure'
 import type { FormSchema } from '@/app/components/base/form/types'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
@@ -32,6 +33,9 @@ const BaseField = ({
   const renderI18nObject = useRenderI18nObject()
   const {
     label,
+    required,
+    placeholder,
+    options,
   } = formSchema
 
   const memorizedLabel = useMemo(() => {
@@ -44,12 +48,32 @@ const BaseField = ({
     if (typeof label === 'object' && label !== null)
       return renderI18nObject(label as Record<string, string>)
   }, [label, renderI18nObject])
+  const memorizedPlaceholder = useMemo(() => {
+    if (typeof placeholder === 'string')
+      return placeholder
+
+    if (typeof placeholder === 'object' && placeholder !== null)
+      return renderI18nObject(placeholder as Record<string, string>)
+  }, [placeholder, renderI18nObject])
+  const memorizedOptions = useMemo(() => {
+    return options?.map((option) => {
+      return {
+        label: typeof option.label === 'string' ? option.label : renderI18nObject(option.label),
+        value: option.value,
+      }
+    }) || []
+  }, [options, renderI18nObject])
   const value = useStore(field.form.store, s => s.values[field.name])
 
   return (
     <div className={cn(fieldClassName)}>
       <div className={cn(labelClassName)}>
         {memorizedLabel}
+        {
+          required && (
+            <span className='ml-1 text-text-destructive-secondary'>*</span>
+          )
+        }
       </div>
       <div className={cn(inputContainerClassName)}>
         {
@@ -62,6 +86,7 @@ const BaseField = ({
               onChange={e => field.handleChange(e.target.value)}
               onBlur={field.handleBlur}
               disabled={disabled}
+              placeholder={memorizedPlaceholder}
             />
           )
         }
@@ -76,6 +101,34 @@ const BaseField = ({
               onChange={e => field.handleChange(e.target.value)}
               onBlur={field.handleBlur}
               disabled={disabled}
+              placeholder={memorizedPlaceholder}
+            />
+          )
+        }
+        {
+          formSchema.type === FormTypeEnum.textNumber && (
+            <Input
+              id={field.name}
+              name={field.name}
+              type='number'
+              className={cn(inputClassName)}
+              value={value}
+              onChange={e => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              disabled={disabled}
+              placeholder={memorizedPlaceholder}
+            />
+          )
+        }
+        {
+          formSchema.type === FormTypeEnum.select && (
+            <PureSelect
+              value={value}
+              onChange={v => field.handleChange(v)}
+              disabled={disabled}
+              placeholder={memorizedPlaceholder}
+              options={memorizedOptions}
+              triggerPopupSameWidth
             />
           )
         }
diff --git a/web/app/components/base/form/types.ts b/web/app/components/base/form/types.ts
index 5156477a38..3e1001b54e 100644
--- a/web/app/components/base/form/types.ts
+++ b/web/app/components/base/form/types.ts
@@ -31,6 +31,13 @@ export enum FormTypeEnum {
   dynamicSelect = 'dynamic-select',
 }
 
+export type FormOption = {
+  label: TypeWithI18N | string
+  value: string
+  show_on: FormShowOnObject[]
+  icon?: string
+}
+
 export type FormSchema = {
   type: FormTypeEnum
   name: string
@@ -41,6 +48,9 @@ export type FormSchema = {
   show_on?: FormShowOnObject[]
   url?: string
   scope?: string
+  help?: string | TypeWithI18N
+  placeholder?: string | TypeWithI18N
+  options?: FormOption[]
 }
 
 export type FormValues = Record<string, any>
diff --git a/web/app/components/base/select/pure.tsx b/web/app/components/base/select/pure.tsx
index 81cc2fbadf..be88c936fd 100644
--- a/web/app/components/base/select/pure.tsx
+++ b/web/app/components/base/select/pure.tsx
@@ -39,6 +39,9 @@ type PureSelectProps = {
     itemClassName?: string
     title?: string
   },
+  placeholder?: string
+  disabled?: boolean
+  triggerPopupSameWidth?: boolean
 }
 const PureSelect = ({
   options,
@@ -47,6 +50,9 @@ const PureSelect = ({
   containerProps,
   triggerProps,
   popupProps,
+  placeholder,
+  disabled,
+  triggerPopupSameWidth,
 }: PureSelectProps) => {
   const { t } = useTranslation()
   const {
@@ -74,7 +80,7 @@ const PureSelect = ({
   }, [onOpenChange])
 
   const selectedOption = options.find(option => option.value === value)
-  const triggerText = selectedOption?.label || t('common.placeholder.select')
+  const triggerText = selectedOption?.label || placeholder || t('common.placeholder.select')
 
   return (
     <PortalToFollowElem
@@ -82,6 +88,7 @@ const PureSelect = ({
       offset={offset || 4}
       open={mergedOpen}
       onOpenChange={handleOpenChange}
+      triggerPopupSameWidth={triggerPopupSameWidth}
     >
       <PortalToFollowElemTrigger
         onClick={() => handleOpenChange(!mergedOpen)}
@@ -135,6 +142,7 @@ const PureSelect = ({
                 )}
                 title={option.label}
                 onClick={() => {
+                  if (disabled) return
                   onChange?.(option.value)
                   handleOpenChange(false)
                 }}
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
index 379dfb7e61..d5666520b0 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
@@ -1,5 +1,6 @@
 import {
   memo,
+  useCallback,
   useState,
 } from 'react'
 import { RiEqualizer2Line } from '@remixicon/react'
@@ -8,6 +9,10 @@ import type { ButtonProps } from '@/app/components/base/button'
 import OAuthClientSettings from './oauth-client-settings'
 import cn from '@/utils/classnames'
 import type { PluginPayload } from '../types'
+import { openOAuthPopup } from '@/hooks/use-oauth'
+import {
+  useGetPluginOAuthUrlHook,
+} from '../hooks/use-credential'
 
 export type AddOAuthButtonProps = {
   pluginPayload: PluginPayload
@@ -20,6 +25,7 @@ export type AddOAuthButtonProps = {
   disabled?: boolean
 }
 const AddOAuthButton = ({
+  pluginPayload,
   buttonVariant = 'primary',
   buttonText = 'use oauth',
   className,
@@ -29,6 +35,20 @@ const AddOAuthButton = ({
   disabled,
 }: AddOAuthButtonProps) => {
   const [isOAuthSettingsOpen, setIsOAuthSettingsOpen] = useState(false)
+  const { mutateAsync: getPluginOAuthUrl } = useGetPluginOAuthUrlHook(pluginPayload)
+
+  const handleOAuth = useCallback(async () => {
+    const { authorization_url } = await getPluginOAuthUrl()
+
+    if (authorization_url) {
+      openOAuthPopup(
+        authorization_url,
+        () => {
+          console.log('success')
+        },
+      )
+    }
+  }, [getPluginOAuthUrl])
 
   return (
     <>
@@ -39,6 +59,7 @@ const AddOAuthButton = ({
           className,
         )}
         disabled={disabled}
+        onClick={handleOAuth}
       >
         <div className={cn(
           'flex h-full grow items-center justify-center rounded-l-lg hover:bg-components-button-primary-bg-hover',
@@ -55,7 +76,10 @@ const AddOAuthButton = ({
             'flex h-full w-8 shrink-0 items-center justify-center rounded-r-lg hover:bg-components-button-primary-bg-hover',
             buttonRightClassName,
           )}
-          onClick={() => setIsOAuthSettingsOpen(true)}
+          onClick={(e) => {
+            e.stopPropagation()
+            setIsOAuthSettingsOpen(true)
+          }}
         >
           <RiEqualizer2Line className='h-4 w-4' />
         </div>
@@ -63,7 +87,9 @@ const AddOAuthButton = ({
       {
         isOAuthSettingsOpen && (
           <OAuthClientSettings
+            pluginPayload={pluginPayload}
             onClose={() => setIsOAuthSettingsOpen(false)}
+            disabled={disabled}
           />
         )
       }
diff --git a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
index d7d4253089..572dfe125e 100644
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
@@ -14,6 +14,7 @@ import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import type { FromRefObject } from '@/app/components/base/form/types'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import { useToastContext } from '@/app/components/base/toast'
+import Loading from '@/app/components/base/loading'
 import type { PluginPayload } from '../types'
 import {
   useAddPluginCredentialHook,
@@ -21,6 +22,7 @@ import {
   useInvalidPluginCredentialInfoHook,
   useUpdatePluginCredentialHook,
 } from '../hooks/use-credential'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
 
 export type ApiKeyModalProps = {
   pluginPayload: PluginPayload
@@ -38,18 +40,25 @@ const ApiKeyModal = ({
 }: ApiKeyModalProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
-  const { data = [] } = useGetPluginCredentialSchemaHook(pluginPayload, CredentialTypeEnum.API_KEY)
+  const { data = [], isLoading } = useGetPluginCredentialSchemaHook(pluginPayload, CredentialTypeEnum.API_KEY)
   const formSchemas = useMemo(() => {
     return [
       {
         type: FormTypeEnum.textInput,
         name: '__name__',
-        label: 'Authorization name',
+        label: t('plugin.auth.authorizationName'),
         required: false,
       },
       ...data,
     ]
-  }, [data])
+  }, [data, t])
+  const defaultValues = formSchemas.reduce((acc, schema) => {
+    if (schema.default)
+      acc[schema.name] = schema.default
+    return acc
+  }, {} as Record<string, any>)
+  const secretInput = formSchemas.find(schema => schema.type === FormTypeEnum.secretInput)
+  const renderI18nObject = useRenderI18nObject()
   const { mutateAsync: addPluginCredential } = useAddPluginCredentialHook(pluginPayload)
   const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
   const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
@@ -77,7 +86,6 @@ const ApiKeyModal = ({
       await updatePluginCredential({
         credentials: transformedValues,
         credential_id: __credential_id__,
-        type: CredentialTypeEnum.API_KEY,
         name: __name__ || '',
       })
     }
@@ -100,19 +108,21 @@ const ApiKeyModal = ({
   return (
     <Modal
       size='md'
-      title='API Key Authorization Configuration'
-      subTitle='After configuring credentials, all members within the workspace can use this tool when orchestrating applications.'
+      title={t('plugin.auth.useApiAuth')}
+      subTitle={t('plugin.auth.useApiAuthDesc')}
       onClose={onClose}
       onCancel={onClose}
       footerSlot={
-        <a
-          className='system-xs-regular flex h-8 grow items-center text-text-accent'
-          href=''
-          target='_blank'
-        >
-          Get your API Key from OpenAI
-          <RiExternalLinkLine className='ml-1 h-3 w-3' />
-        </a>
+        secretInput && (
+          <a
+            className='system-xs-regular flex h-8 grow items-center text-text-accent'
+            href={secretInput?.url}
+            target='_blank'
+          >
+            {renderI18nObject(secretInput?.help as any)}
+            <RiExternalLinkLine className='ml-1 h-3 w-3' />
+          </a>
+        )
       }
       bottomSlot={
         <div className='flex items-center justify-center bg-background-section-burn py-3 text-xs text-text-tertiary'>
@@ -133,12 +143,23 @@ const ApiKeyModal = ({
       onExtraButtonClick={onRemove}
       disabled={disabled}
     >
-      <AuthForm
-        ref={formRef}
-        formSchemas={formSchemas}
-        defaultValues={editValues}
-        disabled={disabled}
-      />
+      {
+        isLoading && (
+          <div className='flex h-40 items-center justify-center'>
+            <Loading />
+          </div>
+        )
+      }
+      {
+        !isLoading && !!data.length && (
+          <AuthForm
+            ref={formRef}
+            formSchemas={formSchemas}
+            defaultValues={editValues || defaultValues}
+            disabled={disabled}
+          />
+        )
+      }
     </Modal>
   )
 }
diff --git a/web/app/components/plugins/plugin-auth/authorize/index.tsx b/web/app/components/plugins/plugin-auth/authorize/index.tsx
index bb87578671..80f1656fb8 100644
--- a/web/app/components/plugins/plugin-auth/authorize/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/index.tsx
@@ -2,6 +2,7 @@ import {
   memo,
   useMemo,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import AddOAuthButton from './add-oauth-button'
 import type { AddOAuthButtonProps } from './add-oauth-button'
 import AddApiKeyButton from './add-api-key-button'
@@ -24,10 +25,11 @@ const Authorize = ({
   canApiKey,
   disabled,
 }: AuthorizeProps) => {
+  const { t } = useTranslation()
   const oAuthButtonProps: AddOAuthButtonProps = useMemo(() => {
     if (theme === 'secondary') {
       return {
-        buttonText: !canApiKey ? 'Add OAuth Authorization' : 'Add OAuth',
+        buttonText: !canApiKey ? t('plugin.auth.useOAuthAuth') : t('plugin.auth.addOAuth'),
         buttonVariant: 'secondary',
         className: 'hover:bg-components-button-secondary-bg',
         buttonLeftClassName: 'hover:bg-components-button-secondary-bg-hover',
@@ -38,25 +40,25 @@ const Authorize = ({
     }
 
     return {
-      buttonText: !canApiKey ? 'Use OAuth Authorization' : 'Use OAuth',
+      buttonText: !canApiKey ? t('plugin.auth.useOAuthAuth') : t('plugin.auth.addOAuth'),
       pluginPayload,
     }
-  }, [canApiKey, theme, pluginPayload])
+  }, [canApiKey, theme, pluginPayload, t])
 
   const apiKeyButtonProps: AddApiKeyButtonProps = useMemo(() => {
     if (theme === 'secondary') {
       return {
         pluginPayload,
         buttonVariant: 'secondary',
-        buttonText: !canOAuth ? 'API Key Authorization Configuration' : 'Add API Key',
+        buttonText: !canOAuth ? t('plugin.auth.useApiAuth') : t('plugin.auth.addApi'),
       }
     }
     return {
       pluginPayload,
-      buttonText: !canOAuth ? 'API Key Authorization Configuration' : 'Use API Key',
+      buttonText: !canOAuth ? t('plugin.auth.useApiAuth') : t('plugin.auth.addApi'),
       buttonVariant: !canOAuth ? 'primary' : 'secondary-accent',
     }
-  }, [canOAuth, theme, pluginPayload])
+  }, [canOAuth, theme, pluginPayload, t])
 
   return (
     <>
diff --git a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
index 724351bd57..e7ea175817 100644
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
@@ -1,12 +1,80 @@
-import { memo } from 'react'
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react'
+import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal/modal'
+import {
+  useGetPluginOAuthClientSchemaHook,
+  useInvalidPluginCredentialInfoHook,
+  useSetPluginOAuthCustomClientHook,
+} from '../hooks/use-credential'
+import type { PluginPayload } from '../types'
+import Loading from '@/app/components/base/loading'
+import AuthForm from '@/app/components/base/form/form-scenarios/auth'
+import type { FromRefObject } from '@/app/components/base/form/types'
+import { FormTypeEnum } from '@/app/components/base/form/types'
+import { transformFormSchemasSecretInput } from '../utils'
+import { useToastContext } from '@/app/components/base/toast'
 
 type OAuthClientSettingsProps = {
+  pluginPayload: PluginPayload
   onClose?: () => void
+  editValues?: Record<string, any>
+  disabled?: boolean
 }
 const OAuthClientSettings = ({
+  pluginPayload,
   onClose,
+  editValues,
+  disabled,
 }: OAuthClientSettingsProps) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const {
+    data,
+    isLoading,
+  } = useGetPluginOAuthClientSchemaHook(pluginPayload)
+  const formSchemas = useMemo(() => {
+    return data?.schema || []
+  }, [data])
+  const defaultValues = formSchemas.reduce((acc, schema) => {
+    if (schema.default)
+      acc[schema.name] = schema.default
+    return acc
+  }, {} as Record<string, any>)
+  const { mutateAsync: setPluginOAuthCustomClient } = useSetPluginOAuthCustomClientHook(pluginPayload)
+  const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
+  const formRef = useRef<FromRefObject>(null)
+  const handleConfirm = useCallback(async () => {
+    const form = formRef.current?.getForm()
+    const store = form?.store
+    const values = store?.state.values
+    const isPristineSecretInputNames: string[] = []
+    formSchemas.forEach((schema) => {
+      if (schema.type === FormTypeEnum.secretInput) {
+        const fieldMeta = form?.getFieldMeta(schema.name)
+        if (fieldMeta?.isPristine)
+          isPristineSecretInputNames.push(schema.name)
+      }
+    })
+
+    const transformedValues = transformFormSchemasSecretInput(isPristineSecretInputNames, values)
+
+    await setPluginOAuthCustomClient({
+      client_params: transformedValues,
+      enable_oauth_custom_client: true,
+    })
+    notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+
+    onClose?.()
+    invalidatePluginCredentialInfo()
+  }, [onClose, invalidatePluginCredentialInfo, setPluginOAuthCustomClient, notify, t, formSchemas])
   return (
     <Modal
       title='Oauth client settings'
@@ -17,8 +85,25 @@ const OAuthClientSettings = ({
       extraButtonVariant='secondary'
       onExtraButtonClick={onClose}
       onClose={onClose}
+      onConfirm={handleConfirm}
     >
-      <div>oauth</div>
+      {
+        isLoading && (
+          <div className='flex h-40 items-center justify-center'>
+            <Loading />
+          </div>
+        )
+      }
+      {
+        !isLoading && !!data?.schema.length && (
+          <AuthForm
+            ref={formRef}
+            formSchemas={formSchemas}
+            defaultValues={editValues || defaultValues}
+            disabled={disabled}
+          />
+        )
+      }
     </Modal>
   )
 }
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 96eb409829..1b6e090a44 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -3,6 +3,7 @@ import {
   useCallback,
   useState,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
@@ -26,6 +27,7 @@ const AuthorizedInNode = ({
   onAuthorizationItemClick,
   credentialId,
 }: AuthorizedInNodeProps) => {
+  const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
   const {
     canApiKey,
@@ -37,11 +39,11 @@ const AuthorizedInNode = ({
     let label = ''
     let removed = false
     if (!credentialId) {
-      label = 'Workspace default'
+      label = t('plugin.auth.workspaceDefault')
     }
     else {
       const credential = credentials.find(c => c.id === credentialId)
-      label = credential ? credential.name : 'Auth removed'
+      label = credential ? credential.name : t('plugin.auth.authRemoved')
       removed = !credential
     }
     return (
@@ -65,13 +67,13 @@ const AuthorizedInNode = ({
         />
       </Button>
     )
-  }, [credentialId, credentials])
+  }, [credentialId, credentials, t])
   const extraAuthorizationItems: Credential[] = [
     {
       id: '__workspace_default__',
-      name: 'Workspace default',
+      name: t('plugin.auth.workspaceDefault'),
       provider: '',
-      is_default: false,
+      is_default: !credentialId,
       isWorkspaceDefault: true,
     },
   ]
@@ -100,6 +102,8 @@ const AuthorizedInNode = ({
       disableSetDefault
       onItemClick={handleAuthorizationItemClick}
       extraAuthorizationItems={extraAuthorizationItems}
+      showItemSelectedIcon
+      selectedCredentialId={credentialId || '__workspace_default__'}
     />
   )
 }
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index 13fec807f0..5762bad2da 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -31,6 +31,7 @@ import {
   useDeletePluginCredentialHook,
   useInvalidPluginCredentialInfoHook,
   useSetPluginDefaultCredentialHook,
+  useUpdatePluginCredentialHook,
 } from '../hooks/use-credential'
 
 type AuthorizedProps = {
@@ -49,6 +50,8 @@ type AuthorizedProps = {
   disableSetDefault?: boolean
   onItemClick?: (id: string) => void
   extraAuthorizationItems?: Credential[]
+  showItemSelectedIcon?: boolean
+  selectedCredentialId?: string
 }
 const Authorized = ({
   pluginPayload,
@@ -66,6 +69,8 @@ const Authorized = ({
   disableSetDefault,
   onItemClick,
   extraAuthorizationItems,
+  showItemSelectedIcon,
+  selectedCredentialId,
 }: AuthorizedProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -125,6 +130,17 @@ const Authorized = ({
     })
     invalidatePluginCredentialInfo()
   }, [setPluginDefaultCredential, invalidatePluginCredentialInfo, notify, t])
+  const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
+  const handleRename = useCallback(async (payload: {
+      credential_id: string
+      name: string
+    }) => {
+    await updatePluginCredential(payload)
+    notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+  }, [updatePluginCredential, notify, t])
 
   return (
     <>
@@ -149,7 +165,12 @@ const Authorized = ({
                     isOpen && 'bg-components-button-secondary-bg-hover',
                   )}>
                   <Indicator className='mr-2' />
-                  {credentials.length} Authorizations
+                  {credentials.length}&nbsp;
+                  {
+                    credentials.length > 1
+                      ? t('plugin.auth.authorizations')
+                      : t('plugin.auth.authorization')
+                  }
                   <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
                 </Button>
               )
@@ -160,31 +181,36 @@ const Authorized = ({
             'max-h-[360px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg',
             popupClassName,
           )}>
-            {
-              !!extraAuthorizationItems?.length && (
-                <div className='p-1'>
-                  {
-                    extraAuthorizationItems.map(credential => (
-                      <Item
-                        key={credential.id}
-                        credential={credential}
-                        disabled={disabled}
-                        onItemClick={onItemClick}
-                        disableRename
-                        disableEdit
-                        disableDelete
-                        disableSetDefault
-                      />
-                    ))
-                  }
-                </div>
-              )
-            }
             <div className='py-1'>
+              {
+                !!extraAuthorizationItems?.length && (
+                  <div className='p-1'>
+                    {
+                      extraAuthorizationItems.map(credential => (
+                        <Item
+                          key={credential.id}
+                          credential={credential}
+                          disabled={disabled}
+                          onItemClick={onItemClick}
+                          disableRename
+                          disableEdit
+                          disableDelete
+                          disableSetDefault
+                          showSelectedIcon={showItemSelectedIcon}
+                          selectedCredentialId={selectedCredentialId}
+                        />
+                      ))
+                    }
+                  </div>
+                )
+              }
               {
                 !!oAuthCredentials.length && (
                   <div className='p-1'>
-                    <div className='system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary'>
+                    <div className={cn(
+                      'system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary',
+                      showItemSelectedIcon && 'pl-7',
+                    )}>
                       OAuth
                     </div>
                     {
@@ -192,6 +218,15 @@ const Authorized = ({
                         <Item
                           key={credential.id}
                           credential={credential}
+                          disabled={disabled}
+                          disableEdit
+                          onDelete={openConfirm}
+                          onSetDefault={handleSetDefault}
+                          onRename={handleRename}
+                          disableSetDefault={disableSetDefault}
+                          onItemClick={onItemClick}
+                          showSelectedIcon={showItemSelectedIcon}
+                          selectedCredentialId={selectedCredentialId}
                         />
                       ))
                     }
@@ -201,7 +236,10 @@ const Authorized = ({
               {
                 !!apiKeyCredentials.length && (
                   <div className='p-1'>
-                    <div className='system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary'>
+                    <div className={cn(
+                      'system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary',
+                      showItemSelectedIcon && 'pl-7',
+                    )}>
                       API Keys
                     </div>
                     {
@@ -214,7 +252,11 @@ const Authorized = ({
                           onEdit={handleEdit}
                           onSetDefault={handleSetDefault}
                           disableSetDefault={disableSetDefault}
+                          disableRename
                           onItemClick={onItemClick}
+                          onRename={handleRename}
+                          showSelectedIcon={showItemSelectedIcon}
+                          selectedCredentialId={selectedCredentialId}
                         />
                       ))
                     }
diff --git a/web/app/components/plugins/plugin-auth/authorized/item.tsx b/web/app/components/plugins/plugin-auth/authorized/item.tsx
index f54ef5ac9b..4c0f88d985 100644
--- a/web/app/components/plugins/plugin-auth/authorized/item.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/item.tsx
@@ -1,8 +1,11 @@
 import {
   memo,
   useMemo,
+  useState,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
+  RiCheckLine,
   RiDeleteBinLine,
   RiEditLine,
   RiEqualizer2Line,
@@ -12,6 +15,8 @@ import Badge from '@/app/components/base/badge'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import cn from '@/utils/classnames'
 import type { Credential } from '../types'
 import { CredentialTypeEnum } from '../types'
 
@@ -21,11 +26,17 @@ type ItemProps = {
   onDelete?: (id: string) => void
   onEdit?: (id: string, values: Record<string, any>) => void
   onSetDefault?: (id: string) => void
+  onRename?: (payload: {
+    credential_id: string
+    name: string
+  }) => void
   disableRename?: boolean
   disableEdit?: boolean
   disableDelete?: boolean
   disableSetDefault?: boolean
   onItemClick?: (id: string) => void
+  showSelectedIcon?: boolean
+  selectedCredentialId?: string
 }
 const Item = ({
   credential,
@@ -33,12 +44,18 @@ const Item = ({
   onDelete,
   onEdit,
   onSetDefault,
+  onRename,
   disableRename,
   disableEdit,
   disableDelete,
   disableSetDefault,
   onItemClick,
+  showSelectedIcon,
+  selectedCredentialId,
 }: ItemProps) => {
+  const { t } = useTranslation()
+  const [renaming, setRenaming] = useState(false)
+  const [renameValue, setRenameValue] = useState(credential.name)
   const isOAuth = credential.credential_type === CredentialTypeEnum.OAUTH2
   const showAction = useMemo(() => {
     return !(disableRename && disableEdit && disableDelete && disableSetDefault)
@@ -47,27 +64,77 @@ const Item = ({
   return (
     <div
       key={credential.id}
-      className='group flex h-8 items-center rounded-lg p-1 hover:bg-state-base-hover'
+      className={cn(
+        'group flex h-8 items-center rounded-lg p-1 hover:bg-state-base-hover',
+        renaming && 'bg-state-base-hover',
+      )}
       onClick={() => onItemClick?.(credential.id)}
     >
-      <div className='flex w-0 grow items-center space-x-1.5 pl-2'>
-        <Indicator className='mr-1.5 shrink-0' />
-        <div
-          className='system-md-regular truncate text-text-secondary'
-          title={credential.name}
-        >
-          {credential.name}
-        </div>
-        {
-          credential.is_default && (
-            <Badge>
-              Default
-            </Badge>
-          )
-        }
-      </div>
       {
-        showAction && (
+        renaming && (
+          <div className='flex w-full items-center space-x-1'>
+            <Input
+              wrapperClassName='grow rounded-[6px]'
+              className='h-6'
+              value={renameValue}
+              onChange={e => setRenameValue(e.target.value)}
+              placeholder={t('common.placeholder.input')}
+            />
+            <Button
+              size='small'
+              variant='primary'
+              onClick={() => {
+                onRename?.({
+                  credential_id: credential.id,
+                  name: renameValue,
+                })
+                setRenaming(false)
+              }}
+            >
+              {t('common.operation.save')}
+            </Button>
+            <Button
+              size='small'
+              onClick={() => setRenaming(false)}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          </div>
+        )
+      }
+      {
+        !renaming && (
+          <div className='flex w-0 grow items-center space-x-1.5'>
+            {
+              showSelectedIcon && (
+                <div className='h-4 w-4'>
+                  {
+                    selectedCredentialId === credential.id && (
+                      <RiCheckLine className='h-4 w-4 text-text-accent' />
+                    )
+                  }
+                </div>
+              )
+            }
+            <Indicator className='ml-2 mr-1.5 shrink-0' />
+            <div
+              className='system-md-regular truncate text-text-secondary'
+              title={credential.name}
+            >
+              {credential.name}
+            </div>
+            {
+              credential.is_default && (
+                <Badge className='shrink-0'>
+                  {t('plugin.auth.default')}
+                </Badge>
+              )
+            }
+          </div>
+        )
+      }
+      {
+        showAction && !renaming && (
           <div className='ml-2 hidden shrink-0 items-center group-hover:flex'>
             {
               !credential.is_default && !disableSetDefault && (
@@ -79,14 +146,21 @@ const Item = ({
                     onSetDefault?.(credential.id)
                   }}
                 >
-                  Set as default
+                  {t('plugin.auth.setDefault')}
                 </Button>
               )
             }
             {
-              isOAuth && !disableRename && (
-                <Tooltip popupContent='rename'>
-                  <ActionButton>
+              !disableRename && (
+                <Tooltip popupContent={t('common.operation.rename')}>
+                  <ActionButton
+                    disabled={disabled}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      setRenaming(true)
+                      setRenameValue(credential.name)
+                    }}
+                  >
                     <RiEditLine className='h-4 w-4 text-text-tertiary' />
                   </ActionButton>
                 </Tooltip>
@@ -94,7 +168,7 @@ const Item = ({
             }
             {
               !isOAuth && !disableEdit && (
-                <Tooltip popupContent='edit'>
+                <Tooltip popupContent={t('common.operation.edit')}>
                   <ActionButton
                     disabled={disabled}
                     onClick={(e) => {
@@ -116,15 +190,16 @@ const Item = ({
             }
             {
               !disableDelete && (
-                <Tooltip popupContent='delete'>
+                <Tooltip popupContent={t('common.operation.delete')}>
                   <ActionButton
+                    className='hover:bg-transparent'
                     disabled={disabled}
                     onClick={(e) => {
                       e.stopPropagation()
                       onDelete?.(credential.id)
                     }}
                   >
-                    <RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
+                    <RiDeleteBinLine className='h-4 w-4 text-text-tertiary hover:text-text-destructive' />
                   </ActionButton>
                 </Tooltip>
               )
diff --git a/web/app/components/plugins/plugin-auth/hooks/use-credential.ts b/web/app/components/plugins/plugin-auth/hooks/use-credential.ts
index 1fc9f0e012..3b2080253c 100644
--- a/web/app/components/plugins/plugin-auth/hooks/use-credential.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/use-credential.ts
@@ -3,8 +3,12 @@ import {
   useDeletePluginCredential,
   useGetPluginCredentialInfo,
   useGetPluginCredentialSchema,
+  useGetPluginOAuthClientSchema,
+  useGetPluginOAuthCustomClientSchema,
+  useGetPluginOAuthUrl,
   useInvalidPluginCredentialInfo,
   useSetPluginDefaultCredential,
+  useSetPluginOAuthCustomClient,
   useUpdatePluginCredential,
 } from '@/service/use-plugins-auth'
 import { useGetApi } from './use-get-api'
@@ -51,3 +55,27 @@ export const useUpdatePluginCredentialHook = (pluginPayload: PluginPayload) => {
 
   return useUpdatePluginCredential(apiMap.updateCredential)
 }
+
+export const useGetPluginOAuthUrlHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useGetPluginOAuthUrl(apiMap.getOauthUrl)
+}
+
+export const useGetPluginOAuthClientSchemaHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useGetPluginOAuthClientSchema(apiMap.getOauthClientSchema)
+}
+
+export const useSetPluginOAuthCustomClientHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useSetPluginOAuthCustomClient(apiMap.setCustomOauthClient)
+}
+
+export const useGetPluginOAuthCustomClientSchemaHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useGetPluginOAuthCustomClientSchema(apiMap.getCustomOAuthClient)
+}
diff --git a/web/app/components/plugins/plugin-auth/index.tsx b/web/app/components/plugins/plugin-auth/index.tsx
index f5b2f0c457..e4f6ae8b2f 100644
--- a/web/app/components/plugins/plugin-auth/index.tsx
+++ b/web/app/components/plugins/plugin-auth/index.tsx
@@ -1,5 +1,6 @@
 export { default as PluginAuth } from './plugin-auth'
 export { default as Authorized } from './authorized'
 export { default as AuthorizedInNode } from './authorized-in-node'
+export { default as PluginAuthInAgent } from './plugin-auth-in-agent'
 export { usePluginAuth } from './hooks/use-plugin-auth'
 export * from './types'
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
new file mode 100644
index 0000000000..4c7b885226
--- /dev/null
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
@@ -0,0 +1,120 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Authorize from './authorize'
+import Authorized from './authorized'
+import type {
+  Credential,
+  PluginPayload,
+} from './types'
+import { usePluginAuth } from './hooks/use-plugin-auth'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
+import cn from '@/utils/classnames'
+
+type PluginAuthInAgentProps = {
+  pluginPayload: PluginPayload
+  credentialId?: string
+  onAuthorizationItemClick?: (id: string) => void
+}
+const PluginAuthInAgent = ({
+  pluginPayload,
+  credentialId,
+  onAuthorizationItemClick,
+}: PluginAuthInAgentProps) => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+  const {
+    isAuthorized,
+    canOAuth,
+    canApiKey,
+    credentials,
+    disabled,
+  } = usePluginAuth(pluginPayload, true)
+
+  const extraAuthorizationItems: Credential[] = [
+    {
+      id: '__workspace_default__',
+      name: t('plugin.auth.workspaceDefault'),
+      provider: '',
+      is_default: !credentialId,
+      isWorkspaceDefault: true,
+    },
+  ]
+
+  const handleAuthorizationItemClick = useCallback((id: string) => {
+    onAuthorizationItemClick?.(id)
+    setIsOpen(false)
+  }, [
+    onAuthorizationItemClick,
+    setIsOpen,
+  ])
+
+  const renderTrigger = useCallback((isOpen?: boolean) => {
+    let label = ''
+    let removed = false
+    if (!credentialId) {
+      label = t('plugin.auth.workspaceDefault')
+    }
+    else {
+      const credential = credentials.find(c => c.id === credentialId)
+      label = credential ? credential.name : t('plugin.auth.authRemoved')
+      removed = !credential
+    }
+    return (
+      <Button
+        className={cn(
+          'w-full',
+          isOpen && 'bg-components-button-secondary-bg-hover',
+          removed && 'text-text-destructive',
+        )}>
+        <Indicator
+          className='mr-2'
+          color={removed ? 'red' : 'green'}
+        />
+        {label}
+        <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
+      </Button>
+    )
+  }, [credentialId, credentials, t])
+
+  return (
+    <>
+      {
+        !isAuthorized && (
+          <Authorize
+            pluginPayload={pluginPayload}
+            canOAuth={canOAuth}
+            canApiKey={canApiKey}
+            disabled={disabled}
+          />
+        )
+      }
+      {
+        isAuthorized && (
+          <Authorized
+            pluginPayload={pluginPayload}
+            credentials={credentials}
+            canOAuth={canOAuth}
+            canApiKey={canApiKey}
+            disabled={disabled}
+            disableSetDefault
+            onItemClick={handleAuthorizationItemClick}
+            extraAuthorizationItems={extraAuthorizationItems}
+            showItemSelectedIcon
+            renderTrigger={renderTrigger}
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+            selectedCredentialId={credentialId || '__workspace_default__'}
+          />
+        )
+      }
+    </>
+  )
+}
+
+export default memo(PluginAuthInAgent)
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
index 352bfd7a0f..53d01c37db 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
@@ -304,7 +304,7 @@ const DetailHeader = ({
           </ActionButton>
         </div>
       </div>
-      <Description className='mt-3' text={description[locale]} descriptionLineRows={2}></Description>
+      <Description className='mb-2 mt-3 h-auto' text={description[locale]} descriptionLineRows={2}></Description>
       {
         category === PluginType.tool && (
           <PluginAuth
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index 42467ce111..5dfb8d0231 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -3,9 +3,6 @@ import type { FC } from 'react'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
-import {
-  RiArrowLeftLine,
-} from '@remixicon/react'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -15,24 +12,17 @@ import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selec
 import ToolItem from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-item'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
-import Button from '@/app/components/base/button'
-import Indicator from '@/app/components/header/indicator'
-import ToolCredentialForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form'
-import Toast from '@/app/components/base/toast'
 import Textarea from '@/app/components/base/textarea'
 import Divider from '@/app/components/base/divider'
 import TabSlider from '@/app/components/base/tab-slider-plain'
 import ReasoningConfigForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form'
 import { generateFormValue, getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
-
-import { useAppContext } from '@/context/app-context'
 import {
   useAllBuiltInTools,
   useAllCustomTools,
   useAllMCPTools,
   useAllWorkflowTools,
   useInvalidateAllBuiltInTools,
-  useUpdateProviderCredentials,
 } from '@/service/use-tools'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
@@ -46,6 +36,10 @@ import { MARKETPLACE_API_PREFIX } from '@/config'
 import type { Node } from 'reactflow'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
+import {
+  AuthCategory,
+  PluginAuthInAgent,
+} from '@/app/components/plugins/plugin-auth'
 
 type Props = {
   disabled?: boolean
@@ -196,23 +190,6 @@ const ToolSelector: FC<Props> = ({
     } as any)
   }
 
-  // authorization
-  const { isCurrentWorkspaceManager } = useAppContext()
-  const [isShowSettingAuth, setShowSettingAuth] = useState(false)
-  const handleCredentialSettingUpdate = () => {
-    invalidateAllBuiltinTools()
-    Toast.notify({
-      type: 'success',
-      message: t('common.api.actionSuccess'),
-    })
-    setShowSettingAuth(false)
-    onShowChange(false)
-  }
-
-  const { mutate: updatePermission } = useUpdateProviderCredentials({
-    onSuccess: handleCredentialSettingUpdate,
-  })
-
   // install from marketplace
   const currentTool = useMemo(() => {
     return currentProvider?.tools.find(tool => tool.name === value?.tool_name)
@@ -226,6 +203,12 @@ const ToolSelector: FC<Props> = ({
     invalidateAllBuiltinTools()
     invalidateInstalledPluginList()
   }
+  const handleAuthorizationItemClick = (id: string) => {
+    onSelect({
+      ...value,
+      credential_id: id,
+    } as any)
+  }
 
   return (
     <>
@@ -264,7 +247,6 @@ const ToolSelector: FC<Props> = ({
               onSwitchChange={handleEnabledChange}
               onDelete={onDelete}
               noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
-              onAuth={() => setShowSettingAuth(true)}
               uninstalled={!currentProvider && inMarketPlace}
               versionMismatch={currentProvider && inMarketPlace && !currentTool}
               installInfo={manifest?.latest_package_identifier}
@@ -284,171 +266,131 @@ const ToolSelector: FC<Props> = ({
           )}
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent>
-          <div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
-            {!isShowSettingAuth && (
-              <>
-                <div className='system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary'>{t(`plugin.detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`)}</div>
-                {/* base form */}
-                <div className='flex flex-col gap-3 px-4 py-2'>
-                  <div className='flex flex-col gap-1'>
-                    <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
-                    <ToolPicker
-                      placement='bottom'
-                      offset={offset}
-                      trigger={
-                        <ToolTrigger
-                          open={panelShowState || isShowChooseTool}
-                          value={value}
-                          provider={currentProvider}
-                        />
-                      }
-                      isShow={panelShowState || isShowChooseTool}
-                      onShowChange={trigger ? onPanelShowStateChange as any : setIsShowChooseTool}
-                      disabled={false}
-                      supportAddCustomTool
-                      onSelect={handleSelectTool}
-                      onSelectMultiple={handleSelectMultipleTool}
-                      scope={scope}
-                      selectedTools={selectedTools}
-                      canChooseMCPTool={canChooseMCPTool}
-                    />
-                  </div>
-                  <div className='flex flex-col gap-1'>
-                    <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
-                    <Textarea
-                      className='resize-none'
-                      placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
-                      value={value?.extra?.description || ''}
-                      onChange={handleDescriptionChange}
-                      disabled={!value?.provider_name}
-                    />
-                  </div>
+          <div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', 'overflow-y-auto pb-2')}>
+            <>
+              <div className='system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary'>{t(`plugin.detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`)}</div>
+              {/* base form */}
+              <div className='flex flex-col gap-3 px-4 py-2'>
+                <div className='flex flex-col gap-1'>
+                  <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
+                  <ToolPicker
+                    placement='bottom'
+                    offset={offset}
+                    trigger={
+                      <ToolTrigger
+                        open={panelShowState || isShowChooseTool}
+                        value={value}
+                        provider={currentProvider}
+                      />
+                    }
+                    isShow={panelShowState || isShowChooseTool}
+                    onShowChange={trigger ? onPanelShowStateChange as any : setIsShowChooseTool}
+                    disabled={false}
+                    supportAddCustomTool
+                    onSelect={handleSelectTool}
+                    onSelectMultiple={handleSelectMultipleTool}
+                    scope={scope}
+                    selectedTools={selectedTools}
+                    canChooseMCPTool={canChooseMCPTool}
+                  />
                 </div>
-                {/* authorization */}
-                {currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
-                  <>
-                    <Divider className='my-1 w-full' />
+                <div className='flex flex-col gap-1'>
+                  <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
+                  <Textarea
+                    className='resize-none'
+                    placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
+                    value={value?.extra?.description || ''}
+                    onChange={handleDescriptionChange}
+                    disabled={!value?.provider_name}
+                  />
+                </div>
+              </div>
+              {/* authorization */}
+              {currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
+                <>
+                  <Divider className='my-1 w-full' />
                     <div className='px-4 py-2'>
-                      {!currentProvider.is_team_authorization && (
-                        <Button
-                          variant='primary'
-                          className={cn('w-full shrink-0')}
-                          onClick={() => setShowSettingAuth(true)}
-                          disabled={!isCurrentWorkspaceManager}
-                        >
-                          {t('tools.auth.unauthorized')}
-                        </Button>
-                      )}
-                      {currentProvider.is_team_authorization && (
-                        <Button
-                          variant='secondary'
-                          className={cn('w-full shrink-0')}
-                          onClick={() => setShowSettingAuth(true)}
-                          disabled={!isCurrentWorkspaceManager}
-                        >
-                          <Indicator className='mr-2' color={'green'} />
-                          {t('tools.auth.authorized')}
-                        </Button>
-                      )}
-                    </div>
-                  </>
-                )}
-                {/* tool settings */}
-                {(currentToolSettings.length > 0 || currentToolParams.length > 0) && currentProvider?.is_team_authorization && (
-                  <>
-                    <Divider className='my-1 w-full' />
-                    {/* tabs */}
-                    {nodeId && showTabSlider && (
-                      <TabSlider
-                        className='mt-1 shrink-0 px-4'
-                        itemClassName='py-3'
-                        noBorderBottom
-                        smallItem
-                        value={currType}
-                        onChange={(value) => {
-                          setCurrType(value)
+                      <PluginAuthInAgent
+                        pluginPayload={{
+                          provider: currentProvider.name,
+                          category: AuthCategory.tool,
                         }}
-                        options={[
-                          { value: 'settings', text: t('plugin.detailPanel.toolSelector.settings')! },
-                          { value: 'params', text: t('plugin.detailPanel.toolSelector.params')! },
-                        ]}
+                        credentialId={value?.credential_id}
+                        onAuthorizationItemClick={handleAuthorizationItemClick}
                       />
-                    )}
-                    {nodeId && showTabSlider && currType === 'params' && (
-                      <div className='px-4 py-2'>
+                  </div>
+                </>
+              )}
+              {/* tool settings */}
+              {(currentToolSettings.length > 0 || currentToolParams.length > 0) && currentProvider?.is_team_authorization && (
+                <>
+                  <Divider className='my-1 w-full' />
+                  {/* tabs */}
+                  {nodeId && showTabSlider && (
+                    <TabSlider
+                      className='mt-1 shrink-0 px-4'
+                      itemClassName='py-3'
+                      noBorderBottom
+                      smallItem
+                      value={currType}
+                      onChange={(value) => {
+                        setCurrType(value)
+                      }}
+                      options={[
+                        { value: 'settings', text: t('plugin.detailPanel.toolSelector.settings')! },
+                        { value: 'params', text: t('plugin.detailPanel.toolSelector.params')! },
+                      ]}
+                    />
+                  )}
+                  {nodeId && showTabSlider && currType === 'params' && (
+                    <div className='px-4 py-2'>
+                      <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
+                      <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
+                    </div>
+                  )}
+                  {/* user settings only */}
+                  {userSettingsOnly && (
+                    <div className='p-4 pb-1'>
+                      <div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.settings')}</div>
+                    </div>
+                  )}
+                  {/* reasoning config only */}
+                  {nodeId && reasoningConfigOnly && (
+                    <div className='mb-1 p-4 pb-1'>
+                      <div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.params')}</div>
+                      <div className='pb-1'>
                         <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
                         <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
                       </div>
-                    )}
-                    {/* user settings only */}
-                    {userSettingsOnly && (
-                      <div className='p-4 pb-1'>
-                        <div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.settings')}</div>
-                      </div>
-                    )}
-                    {/* reasoning config only */}
-                    {nodeId && reasoningConfigOnly && (
-                      <div className='mb-1 p-4 pb-1'>
-                        <div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.params')}</div>
-                        <div className='pb-1'>
-                          <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
-                          <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
-                        </div>
-                      </div>
-                    )}
-                    {/* user settings form */}
-                    {(currType === 'settings' || userSettingsOnly) && (
-                      <div className='px-4 py-2'>
-                        <ToolForm
-                          inPanel
-                          readOnly={false}
-                          nodeId={nodeId}
-                          schema={settingsFormSchemas as any}
-                          value={getPlainValue(value?.settings || {})}
-                          onChange={handleSettingsFormChange}
-                        />
-                      </div>
-                    )}
-                    {/* reasoning config form */}
-                    {nodeId && (currType === 'params' || reasoningConfigOnly) && (
-                      <ReasoningConfigForm
-                        value={value?.parameters || {}}
-                        onChange={handleParamsFormChange}
-                        schemas={paramsFormSchemas as any}
-                        nodeOutputVars={nodeOutputVars}
-                        availableNodes={availableNodes}
+                    </div>
+                  )}
+                  {/* user settings form */}
+                  {(currType === 'settings' || userSettingsOnly) && (
+                    <div className='px-4 py-2'>
+                      <ToolForm
+                        inPanel
+                        readOnly={false}
                         nodeId={nodeId}
+                        schema={settingsFormSchemas as any}
+                        value={getPlainValue(value?.settings || {})}
+                        onChange={handleSettingsFormChange}
                       />
-                    )}
-                  </>
-                )}
-              </>
-            )}
-            {/* authorization panel */}
-            {isShowSettingAuth && currentProvider && (
-              <>
-                <div className='relative flex flex-col gap-1 pt-3.5'>
-                  <div className='absolute -top-2 left-2 w-[345px] rounded-t-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-2 backdrop-blur-sm'></div>
-                  <div
-                    className='system-xs-semibold-uppercase flex h-6 cursor-pointer items-center gap-1 px-3 text-text-accent-secondary'
-                    onClick={() => setShowSettingAuth(false)}
-                  >
-                    <RiArrowLeftLine className='h-4 w-4' />
-                    BACK
-                  </div>
-                  <div className='system-xl-semibold px-4 text-text-primary'>{t('tools.auth.setupModalTitle')}</div>
-                  <div className='system-xs-regular px-4 text-text-tertiary'>{t('tools.auth.setupModalTitleDescription')}</div>
-                </div>
-                <ToolCredentialForm
-                  collection={currentProvider}
-                  onCancel={() => setShowSettingAuth(false)}
-                  onSaved={async value => updatePermission({
-                    providerName: currentProvider.name,
-                    credentials: value,
-                  })}
-                />
-              </>
-            )}
+                    </div>
+                  )}
+                  {/* reasoning config form */}
+                  {nodeId && (currType === 'params' || reasoningConfigOnly) && (
+                    <ReasoningConfigForm
+                      value={value?.parameters || {}}
+                      onChange={handleParamsFormChange}
+                      schemas={paramsFormSchemas as any}
+                      nodeOutputVars={nodeOutputVars}
+                      availableNodes={availableNodes}
+                      nodeId={nodeId}
+                    />
+                  )}
+                </>
+              )}
+            </>
           </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
index 5cc9b7a3a8..fda39bb0f3 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
@@ -30,7 +30,6 @@ type Props = {
   onSwitchChange?: (value: boolean) => void
   onDelete?: () => void
   noAuth?: boolean
-  onAuth?: () => void
   isError?: boolean
   errorTip?: any
   uninstalled?: boolean
@@ -38,6 +37,7 @@ type Props = {
   onInstall?: () => void
   versionMismatch?: boolean
   open: boolean
+  authRemoved?: boolean
   canChooseMCPTool?: boolean,
 }
 
@@ -53,13 +53,13 @@ const ToolItem = ({
   onSwitchChange,
   onDelete,
   noAuth,
-  onAuth,
   uninstalled,
   installInfo,
   onInstall,
   isError,
   errorTip,
   versionMismatch,
+  authRemoved,
   canChooseMCPTool,
 }: Props) => {
   const { t } = useTranslation()
@@ -125,11 +125,17 @@ const ToolItem = ({
         <McpToolNotSupportTooltip />
       )}
       {!isError && !uninstalled && !versionMismatch && noAuth && (
-        <Button variant='secondary' size='small' onClick={onAuth}>
+        <Button variant='secondary' size='small'>
           {t('tools.notAuthorized')}
           <Indicator className='ml-2' color='orange' />
         </Button>
       )}
+      {!isError && !uninstalled && !versionMismatch && authRemoved && (
+        <Button variant='secondary' size='small'>
+          {t('plugin.auth.authRemoved')}
+          <Indicator className='ml-2' color='red' />
+        </Button>
+      )}
       {!isError && !uninstalled && versionMismatch && installInfo && (
         <div onClick={e => e.stopPropagation()}>
           <SwitchPluginVersion
diff --git a/web/app/components/workflow/block-selector/types.ts b/web/app/components/workflow/block-selector/types.ts
index cb3c1af00f..361d4ccc9d 100644
--- a/web/app/components/workflow/block-selector/types.ts
+++ b/web/app/components/workflow/block-selector/types.ts
@@ -33,8 +33,8 @@ export type ToolDefaultValue = {
   params: Record<string, any>
   paramSchemas: Record<string, any>[]
   output_schema: Record<string, any>
-  meta?: PluginMeta
   credential_id?: string
+  meta?: PluginMeta
 }
 
 export type ToolValue = {
@@ -47,4 +47,5 @@ export type ToolValue = {
   parameters?: Record<string, any>
   enabled?: boolean
   extra?: Record<string, any>
+  credential_id?: string
 }
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index 3c63a0f892..da8f708bb3 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -46,8 +46,8 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
 
   return (
     <div className='pt-2'>
-      {!isShowAuthBtn && <>
-        <div className='space-y-4 px-4'>
+      {!isShowAuthBtn && (
+        <div className='relative'>
           {toolInputVarSchema.length > 0 && (
             <Field
               className='px-4'
@@ -88,7 +88,8 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
             </>
           )}
         </div>
-      </>}
+      )}
+
       <div>
         <OutputVars>
           <>
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index e6ec667989..5f36956798 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -93,7 +93,8 @@ export type CommonNodeType<T = {}> = {
   error_strategy?: ErrorHandleTypeEnum
   retry_config?: WorkflowRetryConfig
   default_value?: DefaultValueForm[]
-} & T & Partial<Pick<ToolDefaultValue, 'provider_id' | 'provider_type' | 'provider_name' | 'tool_name' | 'credential_id'>>
+  credential_id?: string
+} & T & Partial<Pick<ToolDefaultValue, 'provider_id' | 'provider_type' | 'provider_name' | 'tool_name'>>
 
 export type CommonEdgeType = {
   _hovering?: boolean
diff --git a/web/context/debug-configuration.ts b/web/context/debug-configuration.ts
index 47710c8fc1..cb737c5288 100644
--- a/web/context/debug-configuration.ts
+++ b/web/context/debug-configuration.ts
@@ -102,6 +102,7 @@ type IDebugConfiguration = {
   setVisionConfig: (visionConfig: VisionSettings, noNotice?: boolean) => void
   isAllowVideoUpload: boolean
   isShowDocumentConfig: boolean
+  isShowAudioConfig: boolean
   rerankSettingModalOpen: boolean
   setRerankSettingModalOpen: (rerankSettingModalOpen: boolean) => void
 }
@@ -254,6 +255,7 @@ const DebugConfigurationContext = createContext<IDebugConfiguration>({
   setVisionConfig: noop,
   isAllowVideoUpload: false,
   isShowDocumentConfig: false,
+  isShowAudioConfig: false,
   rerankSettingModalOpen: false,
   setRerankSettingModalOpen: noop,
 })
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index 349ff37118..5282dab360 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -222,6 +222,10 @@ const translation = {
       title: 'Document',
       description: 'Enable Document will allows the model to take in documents and answer questions about them.',
     },
+    audioUpload: {
+      title: 'Audio',
+      description: 'Enable Audio will allow the model to process audio files for transcription and analysis.',
+    },
   },
   codegen: {
     title: 'Code Generator',
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 4dbfce1012..8075c1719f 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -264,6 +264,26 @@ const translation = {
   requestAPlugin: 'Request a plugin',
   publishPlugins: 'Publish plugins',
   difyVersionNotCompatible: 'The current Dify version is not compatible with this plugin, please upgrade to the minimum version required: {{minimalDifyVersion}}',
+  auth: {
+    default: 'Default',
+    setDefault: 'Set as default',
+    useOAuth: 'Use OAuth',
+    useOAuthAuth: 'Use OAuth Authorization',
+    addOAuth: 'Add OAuth',
+    setupOAuth: 'Setup OAuth Client',
+    useApi: 'Use API Key',
+    addApi: 'Add API Key',
+    useApiAuth: 'API Key Authorization Configuration',
+    useApiAuthDesc: 'After configuring credentials, all members within the workspace can use this tool when orchestrating applications.',
+    oauthClientSettings: 'OAuth Client Settings',
+    saveOnly: 'Save only',
+    saveAndAuth: 'Save and Authorize',
+    authorization: 'Authorization',
+    authorizations: 'Authorizations',
+    authorizationName: 'Authorization Name',
+    workspaceDefault: 'Workspace Default',
+    authRemoved: 'Auth removed',
+  },
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index d151c8bbb5..8363dc9012 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -264,6 +264,26 @@ const translation = {
   requestAPlugin: '申请插件',
   publishPlugins: '发布插件',
   difyVersionNotCompatible: '当前 Dify 版本不兼容该插件，其最低版本要求为 {{minimalDifyVersion}}',
+  auth: {
+    default: '默认',
+    setDefault: '设为默认',
+    useOAuth: '使用 OAuth',
+    useOAuthAuth: '使用 OAuth 授权',
+    addOAuth: '添加 OAuth',
+    setupOAuth: '设置 OAuth 客户端',
+    useApi: '使用 API Key',
+    addApi: '添加 API Key',
+    useApiAuth: 'API Key 授权配置',
+    useApiAuthDesc: '配置凭据后，工作区内的所有成员在编排应用时都可以使用此工具。',
+    oauthClientSettings: 'OAuth 客户端设置',
+    saveOnly: '仅保存',
+    saveAndAuth: '保存并授权',
+    authorization: '凭据',
+    authorizations: '凭据',
+    authorizationName: '凭据名称',
+    workspaceDefault: '工作区默认',
+    authRemoved: '凭据已移除',
+  },
 }
 
 export default translation
diff --git a/web/service/use-plugins-auth.ts b/web/service/use-plugins-auth.ts
index 90b1a20e8c..7d65f8b884 100644
--- a/web/service/use-plugins-auth.ts
+++ b/web/service/use-plugins-auth.ts
@@ -72,8 +72,7 @@ export const useUpdatePluginCredential = (
   return useMutation({
     mutationFn: (params: {
       credential_id: string
-      credentials: Record<string, any>
-      type: CredentialTypeEnum
+      credentials?: Record<string, any>
       name?: string
     }) => {
       return post(url, { body: params })
@@ -103,9 +102,16 @@ export const useGetPluginCredentialSchema = (
 export const useGetPluginOAuthUrl = (
   url: string,
 ) => {
-  return useQuery({
-    queryKey: [NAME_SPACE, 'oauth-url', url],
-    queryFn: () => get(url),
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'oauth-url', url],
+    mutationFn: () => {
+      return get<
+      {
+        authorization_url: string
+        state: string
+        context_id: string
+      }>(url)
+    },
   })
 }
 
@@ -114,7 +120,10 @@ export const useGetPluginOAuthClientSchema = (
 ) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'oauth-client-schema', url],
-    queryFn: () => get(url),
+    queryFn: () => get<{
+      schema: FormSchema[]
+      is_oauth_custom_client_enabled: boolean
+    }>(url),
   })
 }
 
@@ -122,8 +131,11 @@ export const useSetPluginOAuthCustomClient = (
   url: string,
 ) => {
   return useMutation({
-    mutationFn: (params) => {
-      return post(url, { body: params })
+    mutationFn: (params: {
+        client_params: Record<string, any>
+        enable_oauth_custom_client: boolean
+      }) => {
+      return post<{ result: string }>(url, { body: params })
     },
   })
 }
@@ -133,6 +145,9 @@ export const useGetPluginOAuthCustomClientSchema = (
 ) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'oauth-custom-client-schema', url],
-    queryFn: () => get(url),
+    queryFn: () => get<{
+      client_id: string
+      client_secret: string
+    }>(url),
   })
 }
diff --git a/web/types/app.ts b/web/types/app.ts
index 3de5c446ec..ab82ff0407 100644
--- a/web/types/app.ts
+++ b/web/types/app.ts
@@ -130,6 +130,7 @@ export type AgentTool = {
   enabled: boolean
   isDeleted?: boolean
   notAuthor?: boolean
+  credential_id?: string
 }
 
 export type ToolItem = {