diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
index 302703f7c9..fe9cb5affd 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
@@ -15,6 +15,7 @@ import PriorityUseTip from './priority-use-tip'
 import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Button from '@/app/components/base/button'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
+import { formatNumber } from '@/utils/format'
 
 type QuotaPanelProps = {
   provider: ModelProvider
@@ -50,7 +51,7 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
       {
         currentQuota && (
           <div className='flex items-center h-4 text-xs text-gray-500'>
-            <span className='mr-0.5 text-sm font-semibold text-gray-700'>{(currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0)}</span>
+            <span className='mr-0.5 text-sm font-semibold text-gray-700'>{formatNumber((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0))}</span>
             {
               currentQuota?.quota_unit === QuotaUnitEnum.tokens && 'Tokens'
             }
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index fab4eea8f8..4c6eb79acb 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -19,7 +19,7 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'
 
 const navClassName = `
-  flex items-center relative mr-0 sm:mr-3 px-3 h-9 rounded-xl
+  flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
   font-medium text-sm
   cursor-pointer
 `