diff --git a/web/src/components/max-token-number.tsx b/web/src/components/max-token-number.tsx
index 70eb44c19..43618be4f 100644
--- a/web/src/components/max-token-number.tsx
+++ b/web/src/components/max-token-number.tsx
@@ -3,7 +3,7 @@ import { Flex, Form, InputNumber, Slider } from 'antd';
 const MaxTokenNumber = () => {
   return (
     <Form.Item
-      label="Token number"
+      label="Chunk token number"
       tooltip="It determine the token number of a chunk approximately."
     >
       <Flex gap={20} align="center">
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less
index 956caaa73..9bb4f5b4a 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less
@@ -1,10 +1,12 @@
 .image {
   width: 100px !important;
-  min-width: 100px;
+  object-fit: contain;
 }
 
 .imagePreview {
-  width: 600px;
+  max-width: 50vw;
+  max-height: 50vh;
+  object-fit: contain;
 }
 
 .content {
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx
index c1aaf2c73..d1d9106da 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx
@@ -55,7 +55,7 @@ const ChunkCard = ({
         <Checkbox onChange={handleCheck} checked={checked}></Checkbox>
         {item.img_id && (
           <Popover
-            placement="topRight"
+            placement="right"
             content={
               <Image id={item.img_id} className={styles.imagePreview}></Image>
             }
diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
index 96991c572..f772eb25a 100644
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
@@ -15,7 +15,7 @@ const { Option } = Select;
 const ConfigurationForm = ({ form }: { form: FormInstance }) => {
   const { submitKnowledgeConfiguration, submitLoading } =
     useSubmitKnowledgeConfiguration();
-  const { parserList, embeddingModelOptions } =
+  const { parserList, embeddingModelOptions, disabled } =
     useFetchKnowledgeConfigurationOnMount(form);
 
   const onFinishFailed = (errorInfo: any) => {
@@ -90,6 +90,7 @@ const ConfigurationForm = ({ form }: { form: FormInstance }) => {
         <Select
           placeholder="Please select a embedding model"
           options={embeddingModelOptions}
+          disabled={disabled}
         ></Select>
       </Form.Item>
       <Form.Item
@@ -98,7 +99,7 @@ const ConfigurationForm = ({ form }: { form: FormInstance }) => {
         tooltip="The instruction is at right."
         rules={[{ required: true }]}
       >
-        <Select placeholder="Please select a chunk method">
+        <Select placeholder="Please select a chunk method" disabled={disabled}>
           {parserList.map((x) => (
             <Option value={x.value} key={x.value}>
               {x.label}
diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts b/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
index 56d29a9b4..93e644f06 100644
--- a/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
@@ -41,8 +41,6 @@ export const useSubmitKnowledgeConfiguration = () => {
 };
 
 export const useFetchKnowledgeConfigurationOnMount = (form: FormInstance) => {
-  // const [form] = Form.useForm();
-
   const knowledgeDetails = useSelectKnowledgeDetails();
   const parserList = useSelectParserList();
   const embeddingModelOptions = useSelectLlmOptions();
@@ -69,7 +67,11 @@ export const useFetchKnowledgeConfigurationOnMount = (form: FormInstance) => {
     });
   }, [form, knowledgeDetails]);
 
-  return { parserList, embeddingModelOptions };
+  return {
+    parserList,
+    embeddingModelOptions,
+    disabled: knowledgeDetails.chunk_num > 0,
+  };
 };
 
 export const useSelectKnowledgeDetailsLoading = () =>
diff --git a/web/src/pages/chat/chat-container/index.less b/web/src/pages/chat/chat-container/index.less
index f74051bd5..e13b72ddc 100644
--- a/web/src/pages/chat/chat-container/index.less
+++ b/web/src/pages/chat/chat-container/index.less
@@ -47,16 +47,20 @@
 }
 
 .referencePopoverWrapper {
-  width: 50vw;
+  max-width: 50vw;
 }
 
 .referenceChunkImage {
   width: 10vw;
+  object-fit: contain;
 }
 
 .referenceImagePreview {
-  width: 600px;
+  max-width: 45vw;
+  max-height: 45vh;
 }
 .chunkContentText {
   .chunkText;
+  max-height: 45vh;
+  overflow-y: auto;
 }
diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx
index bb36839e3..a92712194 100644
--- a/web/src/pages/chat/chat-container/index.tsx
+++ b/web/src/pages/chat/chat-container/index.tsx
@@ -95,7 +95,7 @@ const MessageItem = ({
           className={styles.referencePopoverWrapper}
         >
           <Popover
-            placement="topRight"
+            placement="left"
             content={
               <Image
                 id={chunkItem?.img_id}