diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 02895b0255..33b4a0f68a 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -197,7 +197,7 @@ export default function AccountSetting({
           </div>
         </div>
         <div ref={scrollRef} className='relative w-[824px] pb-4 bg-components-panel-bg overflow-y-auto'>
-          <div className={cn('sticky top-0 px-8 py-[26px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b shadow-xs')}>
+          <div className={cn('sticky top-0 mx-8 pt-[27px] pb-2 mb-[18px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b')}>
             <div className='shrink-0 text-text-primary title-2xl-semi-bold'>{activeItem?.name}</div>
             {
               activeItem?.description && (
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 a8a5a0cf42..8862b0029b 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
@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiAlertFill } from '@remixicon/react'
 import SystemModelSelector from './system-model-selector'
 import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
 import ProviderCard from './provider-card'
@@ -17,10 +18,10 @@ import {
   useUpdateModelList,
   useUpdateModelProviders,
 } from './hooks'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import cn from '@/utils/classnames'
 
 const ModelProviderPage = () => {
   const { t } = useTranslation()
@@ -90,24 +91,28 @@ const ModelProviderPage = () => {
 
   return (
     <div className='relative pt-1 -mt-2'>
-      <div className={`flex items-center justify-between mb-2 h-8 ${defaultModelNotConfigured && 'px-3 bg-[#FFFAEB] rounded-lg border border-[#FEF0C7]'}`}>
-        {
-          defaultModelNotConfigured
-            ? (
-              <div className='flex items-center text-xs font-medium text-gray-700'>
-                <AlertTriangle className='mr-1 w-3 h-3 text-[#F79009]' />
-                {t('common.modelProvider.notConfigured')}
-              </div>
-            )
-            : <div className='text-sm font-medium text-gray-800'>{t('common.modelProvider.models')}</div>
-        }
-        <SystemModelSelector
-          textGenerationDefaultModel={textGenerationDefaultModel}
-          embeddingsDefaultModel={embeddingsDefaultModel}
-          rerankDefaultModel={rerankDefaultModel}
-          speech2textDefaultModel={speech2textDefaultModel}
-          ttsDefaultModel={ttsDefaultModel}
-        />
+      <div className={cn('flex items-center mb-2')}>
+        <div className='grow text-text-primary system-md-semibold'>{t('common.modelProvider.models')}</div>
+        <div className={cn(
+          'shrink-0 relative flex items-center justify-end gap-2 p-0.5 rounded-lg border border-transparent',
+          defaultModelNotConfigured && 'pl-2 bg-components-panel-bg-blur border-components-panel-border shadow-xs',
+        )}>
+          {defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }}/>}
+          {defaultModelNotConfigured && (
+            <div className='flex items-center gap-1 text-text-primary system-xs-medium'>
+              <RiAlertFill className='w-4 h-4 text-text-warning-secondary' />
+              {t('common.modelProvider.notConfigured')}
+            </div>
+          )}
+          <SystemModelSelector
+            notConfigured={defaultModelNotConfigured}
+            textGenerationDefaultModel={textGenerationDefaultModel}
+            embeddingsDefaultModel={embeddingsDefaultModel}
+            rerankDefaultModel={rerankDefaultModel}
+            speech2textDefaultModel={speech2textDefaultModel}
+            ttsDefaultModel={ttsDefaultModel}
+          />
+        </div>
       </div>
       {
         !!configuredProviders?.length && (
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index 1574785898..846738d4ae 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiEqualizer2Line } from '@remixicon/react'
 import ModelSelector from '../model-selector'
 import {
   useModelList,
@@ -13,7 +14,6 @@ import type {
 } from '../declarations'
 import { ModelTypeEnum } from '../declarations'
 import Tooltip from '@/app/components/base/tooltip'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -31,6 +31,7 @@ type SystemModelSelectorProps = {
   rerankDefaultModel: DefaultModelResponse | undefined
   speech2textDefaultModel: DefaultModelResponse | undefined
   ttsDefaultModel: DefaultModelResponse | undefined
+  notConfigured: boolean
 }
 const SystemModel: FC<SystemModelSelectorProps> = ({
   textGenerationDefaultModel,
@@ -38,6 +39,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
   rerankDefaultModel,
   speech2textDefaultModel,
   ttsDefaultModel,
+  notConfigured,
 }) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -128,14 +130,13 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
       }}
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <div className={`
-          flex items-center px-2 h-6 text-xs text-gray-700 cursor-pointer bg-white rounded-md border-[0.5px] border-gray-200 shadow-xs
-          hover:bg-gray-100 hover:shadow-none
-          ${open && 'bg-gray-100 shadow-none'}
-        `}>
-          <Settings01 className='mr-1 w-3 h-3 text-gray-500' />
+        <Button
+          variant={notConfigured ? 'primary' : 'secondary'}
+          size='small'
+        >
+          <RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
           {t('common.modelProvider.systemModelSettings')}
-        </div>
+        </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-50'>
         <div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-black/5 bg-white shadow-xl'>
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 483c4788e6..3bdeb7cec9 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -276,7 +276,7 @@ const translation = {
     },
   },
   modelProvider: {
-    notConfigured: 'The system model has not yet been fully configured, and some functions may be unavailable.',
+    notConfigured: 'The system model has not yet been fully configured',
     systemModelSettings: 'System Model Settings',
     systemModelSettingsLink: 'Why is it necessary to set up a system model?',
     selectModel: 'Select your model',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index 7d906ed0b4..f80afe8fca 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -276,7 +276,7 @@ const translation = {
     },
   },
   modelProvider: {
-    notConfigured: '系统模型尚未完全配置，部分功能可能无法使用。',
+    notConfigured: '系统模型尚未完全配置',
     systemModelSettings: '系统模型设置',
     systemModelSettingsLink: '为什么需要设置系统模型？',
     selectModel: '选择您的模型',