diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index d3daaee859..7606bbc04f 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -6,8 +6,10 @@ import {
   RiBrainLine,
 } from '@remixicon/react'
 import { useDebounce } from 'ahooks'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { IS_CLOUD_EDITION } from '@/config'
+import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useProviderContext } from '@/context/provider-context'
 import { cn } from '@/utils/classnames'
@@ -20,6 +22,7 @@ import {
 } from './hooks'
 import InstallFromMarketplace from './install-from-marketplace'
 import ProviderAddedCard from './provider-added-card'
+import QuotaPanel from './provider-added-card/quota-panel'
 import SystemModelSelector from './system-model-selector'
 
 type Props = {
@@ -31,6 +34,7 @@ const FixedModelProvider = ['langgenius/openai/openai', 'langgenius/anthropic/an
 const ModelProviderPage = ({ searchText }: Props) => {
   const debouncedSearchText = useDebounce(searchText, { wait: 500 })
   const { t } = useTranslation()
+  const { mutateCurrentWorkspace, isValidatingCurrentWorkspace } = useAppContext()
   const { data: textGenerationDefaultModel, isLoading: isTextGenerationDefaultModelLoading } = useDefaultModel(ModelTypeEnum.textGeneration)
   const { data: embeddingsDefaultModel, isLoading: isEmbeddingsDefaultModelLoading } = useDefaultModel(ModelTypeEnum.textEmbedding)
   const { data: rerankDefaultModel, isLoading: isRerankDefaultModelLoading } = useDefaultModel(ModelTypeEnum.rerank)
@@ -88,6 +92,10 @@ const ModelProviderPage = ({ searchText }: Props) => {
     return [filteredConfiguredProviders, filteredNotConfiguredProviders]
   }, [configuredProviders, debouncedSearchText, notConfiguredProviders])
 
+  useEffect(() => {
+    mutateCurrentWorkspace()
+  }, [mutateCurrentWorkspace])
+
   return (
     <div className="relative -mt-2 pt-1">
       <div className={cn('mb-2 flex items-center')}>
@@ -115,6 +123,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
           />
         </div>
       </div>
+      {IS_CLOUD_EDITION && <QuotaPanel providers={providers} isLoading={isValidatingCurrentWorkspace} />}
       {!filteredConfiguredProviders?.length && (
         <div className="mb-2 rounded-[10px] bg-workflow-process-bg p-4">
           <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur">
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index cbaef21a70..f6db624cde 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -27,6 +27,7 @@ import PriorityUseTip from './priority-use-tip'
 type CredentialPanelProps = {
   provider: ModelProvider
 }
+
 const CredentialPanel = ({
   provider,
 }: CredentialPanelProps) => {
@@ -79,7 +80,7 @@ const CredentialPanel = ({
       return t('modelProvider.auth.authRemoved', { ns: 'common' })
 
     return ''
-  }, [authorized, authRemoved, current_credential_name, hasCredential])
+  }, [authorized, authRemoved, current_credential_name, hasCredential, t])
 
   const color = useMemo(() => {
     if (authRemoved || !hasCredential)