diff --git a/web/app/components/app/overview/apikey-info-panel/index.tsx b/web/app/components/app/overview/apikey-info-panel/index.tsx
index 0a34a822ad..17bcb67ce8 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { useContext } from 'use-context-selector'
 import Progress from './progress'
 import Button from '@/app/components/base/button'
 import { LinkExternal02, XClose } from '@/app/components/base/icons/src/vender/line/general'
@@ -10,9 +11,13 @@ import AccountSetting from '@/app/components/header/account-setting'
 import { IS_CE_EDITION } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
 import { formatNumber } from '@/utils/format'
+import I18n from '@/context/i18n'
+import ProviderConfig from '@/app/components/header/account-setting/model-page/configs'
 
 const APIKeyInfoPanel: FC = () => {
   const isCloud = !IS_CE_EDITION
+  const { locale } = useContext(I18n)
+
   const { textGenerationModelList } = useProviderContext()
 
   const { t } = useTranslation()
@@ -36,7 +41,8 @@ const APIKeyInfoPanel: FC = () => {
   // first show in trail and not used exhausted, else find the exhausted
   const [used, total, unit, providerName] = (() => {
     if (!textGenerationModelList || !isCloud)
-      return [0, 0, '']
+      return [0, 0, '', '']
+
     let used = 0
     let total = 0
     let unit = 'times'
@@ -69,7 +75,7 @@ const APIKeyInfoPanel: FC = () => {
         {isCloud && <em-emoji id={exhausted ? '🤔' : '😀'} />}
         {isCloud
           ? (
-            <div>{t(`appOverview.apiKeyInfo.cloud.${exhausted ? 'exhausted' : 'trial'}.title`, { providerName })}</div>
+            <div>{t(`appOverview.apiKeyInfo.cloud.${exhausted ? 'exhausted' : 'trial'}.title`, { providerName: (ProviderConfig as any)[providerName as string]?.selector?.name[locale] || providerName })}</div>
           )
           : (
             <div>
diff --git a/web/i18n/lang/app-overview.zh.ts b/web/i18n/lang/app-overview.zh.ts
index 82a7ccaa5b..34fa1d5cf6 100644
--- a/web/i18n/lang/app-overview.zh.ts
+++ b/web/i18n/lang/app-overview.zh.ts
@@ -8,7 +8,7 @@ const translation = {
   apiKeyInfo: {
     cloud: {
       trial: {
-        title: '您正在使用 {{providerName}} 试用配额。',
+        title: '您正在使用 {{providerName}} 的试用配额。',
         description: '试用配额仅供您测试使用。 在试用配额用完之前，请自行设置模型提供商或购买额外配额。',
       },
       exhausted: {