diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
index bf25c49256..a14a22bb35 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
@@ -37,7 +37,7 @@ const ModelName: FC<ModelNameProps> = ({
   if (!modelItem)
     return null
   return (
-    <div className={cn('flex items-center overflow-hidden text-ellipsis truncate text-components-input-text-filled system-sm-regular', className)}>
+    <div className={cn('flex gap-0.5 items-center overflow-hidden text-ellipsis truncate text-components-input-text-filled system-sm-regular', className)}>
       <div
         className='truncate'
         title={modelItem.label[language] || modelItem.label.en_US}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
index fa8abee9b0..db1866693d 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
@@ -42,33 +42,35 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
       )}
     >
       <ModelIcon
-        className='shrink-0 mr-1.5'
+        className='shrink-0 m-1'
         provider={provider}
         modelName={model.model}
       />
-      <ModelName
-        className='grow'
-        modelItem={model}
-        showMode
-        showFeatures
-      />
-      {!readonly && (
-        <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-          {
-            model.status !== ModelStatusEnum.active
-              ? (
-                <Tooltip popupContent={MODEL_STATUS_TEXT[model.status][language]}>
-                  <AlertTriangle className='w-4 h-4 text-[#F79009]' />
-                </Tooltip>
-              )
-              : (
-                <RiArrowDownSLine
-                  className='w-3.5 h-3.5 text-text-tertiary'
-                />
-              )
-          }
-        </div>
-      )}
+      <div className='flex px-1 py-[3px] items-center gap-1 grow'>
+        <ModelName
+          className='grow'
+          modelItem={model}
+          showMode
+          showFeatures
+        />
+        {!readonly && (
+          <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+            {
+              model.status !== ModelStatusEnum.active
+                ? (
+                  <Tooltip popupContent={MODEL_STATUS_TEXT[model.status][language]}>
+                    <AlertTriangle className='w-4 h-4 text-text-warning-secondary' />
+                  </Tooltip>
+                )
+                : (
+                  <RiArrowDownSLine
+                    className='w-3.5 h-3.5 text-text-tertiary'
+                  />
+                )
+            }
+          </div>
+        )}
+      </div>
     </div>
   )
 }