diff --git a/web/src/components/llm-select/index.tsx b/web/src/components/llm-select/index.tsx
index e3b348be9..0da49e814 100644
--- a/web/src/components/llm-select/index.tsx
+++ b/web/src/components/llm-select/index.tsx
@@ -1,3 +1,5 @@
+import { LlmModelType } from '@/constants/knowledge';
+import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
 import { Popover, Select } from 'antd';
 import LlmSettingItems from '../llm-setting-items';
 
@@ -8,6 +10,8 @@ interface IProps {
 }
 
 const LLMSelect = ({ id, value, onChange }: IProps) => {
+  const modelOptions = useSelectLlmOptionsByModelType();
+
   const content = (
     <div style={{ width: 400 }}>
       <LlmSettingItems
@@ -25,6 +29,10 @@ const LLMSelect = ({ id, value, onChange }: IProps) => {
       destroyTooltipOnHide
     >
       <Select
+        options={[
+          ...modelOptions[LlmModelType.Chat],
+          ...modelOptions[LlmModelType.Image2text],
+        ]}
         style={{ width: '100%' }}
         dropdownStyle={{ display: 'none' }}
         id={id}
diff --git a/web/src/hooks/llm-hooks.ts b/web/src/hooks/llm-hooks.ts
index 7fba686e4..d831d511a 100644
--- a/web/src/hooks/llm-hooks.ts
+++ b/web/src/hooks/llm-hooks.ts
@@ -71,7 +71,7 @@ export const useSelectLlmOptionsByModelType = () => {
             )
             .map((x) => ({
               label: x.llm_name,
-              value: x.llm_name,
+              value: `${x.llm_name}@${x.fid}`,
               disabled: !x.available,
             })),
         };