diff --git a/web/src/pages/Channel/EditChannel.js b/web/src/pages/Channel/EditChannel.js
index 84a48e1b..9264a2d2 100644
--- a/web/src/pages/Channel/EditChannel.js
+++ b/web/src/pages/Channel/EditChannel.js
@@ -28,7 +28,7 @@ import {
   Col,
   Upload,
 } from '@douyinfe/semi-ui';
-import { getChannelModels, copy, getChannelIcon } from '../../helpers';
+import { getChannelModels, copy, getChannelIcon, getModelCategories } from '../../helpers';
 import {
   IconSave,
   IconClose,
@@ -349,14 +349,14 @@ const EditChannel = (props) => {
   useEffect(() => {
     const modelMap = new Map();
 
-    originModelOptions.forEach(option => {
+    originModelOptions.forEach((option) => {
       const v = (option.value || '').trim();
       if (!modelMap.has(v)) {
         modelMap.set(v, option);
       }
     });
 
-    inputs.models.forEach(model => {
+    inputs.models.forEach((model) => {
       const v = (model || '').trim();
       if (!modelMap.has(v)) {
         modelMap.set(v, {
@@ -367,8 +367,29 @@ const EditChannel = (props) => {
       }
     });
 
-    setModelOptions(Array.from(modelMap.values()));
-  }, [originModelOptions, inputs.models]);
+    const categories = getModelCategories(t);
+    const optionsWithIcon = Array.from(modelMap.values()).map((opt) => {
+      const modelName = opt.value;
+      let icon = null;
+      for (const [key, category] of Object.entries(categories)) {
+        if (key !== 'all' && category.filter({ model_name: modelName })) {
+          icon = category.icon;
+          break;
+        }
+      }
+      return {
+        ...opt,
+        label: (
+          <span className="flex items-center gap-1">
+            {icon}
+            {modelName}
+          </span>
+        ),
+      };
+    });
+
+    setModelOptions(optionsWithIcon);
+  }, [originModelOptions, inputs.models, t]);
 
   useEffect(() => {
     fetchModels().then();
diff --git a/web/src/pages/Token/EditToken.js b/web/src/pages/Token/EditToken.js
index ddcf190c..a955fc6c 100644
--- a/web/src/pages/Token/EditToken.js
+++ b/web/src/pages/Token/EditToken.js
@@ -7,6 +7,7 @@ import {
   timestamp2string,
   renderGroupOption,
   renderQuotaWithPrompt,
+  getModelCategories,
 } from '../../helpers';
 import {
   Button,
@@ -78,10 +79,25 @@ const EditToken = (props) => {
     let res = await API.get(`/api/user/models`);
     const { success, message, data } = res.data;
     if (success) {
-      let localModelOptions = data.map((model) => ({
-        label: model,
-        value: model,
-      }));
+      const categories = getModelCategories(t);
+      let localModelOptions = data.map((model) => {
+        let icon = null;
+        for (const [key, category] of Object.entries(categories)) {
+          if (key !== 'all' && category.filter({ model_name: model })) {
+            icon = category.icon;
+            break;
+          }
+        }
+        return {
+          label: (
+            <span className="flex items-center gap-1">
+              {icon}
+              {model}
+            </span>
+          ),
+          value: model,
+        };
+      });
       setModels(localModelOptions);
     } else {
       showError(t(message));