diff --git a/xinference/web/ui/src/scenes/launch_model/modelCard.js b/xinference/web/ui/src/scenes/launch_model/modelCard.js
index a4391f830a..bcffbace11 100644
--- a/xinference/web/ui/src/scenes/launch_model/modelCard.js
+++ b/xinference/web/ui/src/scenes/launch_model/modelCard.js
@@ -327,6 +327,9 @@ const ModelCard = ({
         modelDataWithID_LLM.n_gpu_layers = nGPULayers
       }
 
+      const modelDataWithID =
+        modelType === 'LLM' ? modelDataWithID_LLM : modelDataWithID_other
+
       if (
         loraListArr.length ||
         imageLoraLoadKwargsArr.length ||
@@ -354,12 +357,9 @@ const ModelCard = ({
           })
           peft_model_config['lora_list'] = lora_list
         }
-        modelDataWithID_LLM['peft_model_config'] = peft_model_config
+        modelDataWithID['peft_model_config'] = peft_model_config
       }
 
-      const modelDataWithID =
-        modelType === 'LLM' ? modelDataWithID_LLM : modelDataWithID_other
-
       if (customParametersArr.length) {
         customParametersArr.forEach((item) => {
           modelDataWithID[item.key] = handleValueType(item.value)
@@ -376,10 +376,15 @@ const ModelCard = ({
             `/running_models/${modelType}`
           )
           let historyArr = JSON.parse(localStorage.getItem('historyArr')) || []
-          if (!historyArr.some((item) => deepEqual(item, modelDataWithID))) {
-            historyArr = historyArr.filter(
-              (item) => item.model_name !== modelDataWithID.model_name
-            )
+          const historyModelNameArr = historyArr.map((item) => item.model_name)
+          if (historyModelNameArr.includes(modelDataWithID.model_name)) {
+            historyArr = historyArr.map((item) => {
+              if (item.model_name === modelDataWithID.model_name) {
+                return modelDataWithID
+              }
+              return item
+            })
+          } else {
             historyArr.push(modelDataWithID)
           }
           localStorage.setItem('historyArr', JSON.stringify(historyArr))
@@ -600,28 +605,10 @@ const ModelCard = ({
       })
       setLoraArr(loraData)
 
-      let ImageLoraLoadData = []
-      for (let key in peft_model_config?.image_lora_load_kwargs) {
-        ImageLoraLoadData.push({
-          key: key,
-          value: peft_model_config?.image_lora_load_kwargs[key],
-        })
-      }
-      setImageLoraLoadArr(ImageLoraLoadData)
-
-      let ImageLoraFuseData = []
-      for (let key in peft_model_config?.image_lora_fuse_kwargs) {
-        ImageLoraFuseData.push({
-          key: key,
-          value: peft_model_config?.image_lora_fuse_kwargs[key],
-        })
-      }
-      setImageLoraFuseArr(ImageLoraFuseData)
-
       let customData = []
       for (let key in arr[0]) {
         !llmAllDataKey.includes(key) &&
-          customData.push({ key: key, value: arr[0][key] })
+          customData.push({ key: key, value: arr[0][key] || 'none' })
       }
       setCustomArr(customData)
 
@@ -635,11 +622,7 @@ const ModelCard = ({
       )
         setIsOther(true)
 
-      if (
-        loraData.length ||
-        ImageLoraLoadData.length ||
-        ImageLoraFuseData.length
-      ) {
+      if (loraData.length) {
         setIsOther(true)
         setIsPeftModelConfig(true)
       }
@@ -657,37 +640,54 @@ const ModelCard = ({
       setDownloadHub(arr[0].download_hub || '')
       setModelPath(arr[0].model_path || '')
 
+      if (arr[0].model_type === 'image') {
+        let loraData = []
+        arr[0].peft_model_config?.lora_list?.forEach((item) => {
+          loraData.push({
+            lora_name: item.lora_name,
+            local_path: item.local_path,
+          })
+        })
+        setLoraArr(loraData)
+
+        let ImageLoraLoadData = []
+        for (let key in arr[0].peft_model_config?.image_lora_load_kwargs) {
+          ImageLoraLoadData.push({
+            key: key,
+            value:
+              arr[0].peft_model_config?.image_lora_load_kwargs[key] || 'none',
+          })
+        }
+        setImageLoraLoadArr(ImageLoraLoadData)
+
+        let ImageLoraFuseData = []
+        for (let key in arr[0].peft_model_config?.image_lora_fuse_kwargs) {
+          ImageLoraFuseData.push({
+            key: key,
+            value:
+              arr[0].peft_model_config?.image_lora_fuse_kwargs[key] || 'none',
+          })
+        }
+        setImageLoraFuseArr(ImageLoraFuseData)
+
+        if (
+          loraData.length ||
+          ImageLoraLoadData.length ||
+          ImageLoraFuseData.length
+        ) {
+          setIsPeftModelConfig(true)
+        }
+      }
+
       let customData = []
       for (let key in arr[0]) {
         !llmAllDataKey.includes(key) &&
-          customData.push({ key: key, value: arr[0][key] })
+          customData.push({ key: key, value: arr[0][key] || 'none' })
       }
       setCustomArr(customData)
     }
   }
 
-  const deepEqual = (obj1, obj2) => {
-    if (obj1 === obj2) return true
-    if (
-      typeof obj1 !== 'object' ||
-      typeof obj2 !== 'object' ||
-      obj1 == null ||
-      obj2 == null
-    ) {
-      return false
-    }
-
-    let keysA = Object.keys(obj1)
-    let keysB = Object.keys(obj2)
-    if (keysA.length !== keysB.length) return false
-    for (let key of keysA) {
-      if (!keysB.includes(key) || !deepEqual(obj1[key], obj2[key])) {
-        return false
-      }
-    }
-    return true
-  }
-
   const handleCollection = (bool) => {
     setHover(false)
 
@@ -725,8 +725,6 @@ const ModelCard = ({
       setDownloadHub('')
       setModelPath('')
       setLoraArr([])
-      setImageLoraLoadArr([])
-      setImageLoraFuseArr([])
       setCustomArr([])
       setIsOther(false)
       setIsPeftModelConfig(false)
@@ -738,6 +736,11 @@ const ModelCard = ({
       setWorkerIp('')
       setDownloadHub('')
       setModelPath('')
+      setLoraArr([])
+      setImageLoraLoadArr([])
+      setImageLoraFuseArr([])
+      setCustomArr([])
+      setIsPeftModelConfig(false)
     }
   }
 
@@ -991,7 +994,14 @@ const ModelCard = ({
                 {(() => {
                   if (modelData.language) {
                     return modelData.language.map((v) => {
-                      return <Chip label={v} variant="outlined" size="small" />
+                      return (
+                        <Chip
+                          key={v}
+                          label={v}
+                          variant="outlined"
+                          size="small"
+                        />
+                      )
                     })
                   } else if (modelData.model_family) {
                     return (
@@ -1446,30 +1456,6 @@ const ModelCard = ({
                       onJudgeArr={judgeArr}
                       pairData={loraArr}
                     />
-                    <AddPair
-                      customData={{
-                        title: 'Lora Load Kwargs for Image Model',
-                        key: 'key',
-                        value: 'value',
-                      }}
-                      onGetArr={(arr) => {
-                        setImageLoraLoadKwargsArr(arr)
-                      }}
-                      onJudgeArr={judgeArr}
-                      pairData={imageLoraLoadArr}
-                    />
-                    <AddPair
-                      customData={{
-                        title: 'Lora Fuse Kwargs for Image Model',
-                        key: 'key',
-                        value: 'value',
-                      }}
-                      onGetArr={(arr) => {
-                        setImageLoraFuseKwargsArr(arr)
-                      }}
-                      onJudgeArr={judgeArr}
-                      pairData={imageLoraFuseArr}
-                    />
                   </Collapse>
                 </Collapse>
                 <AddPair
@@ -1489,119 +1475,187 @@ const ModelCard = ({
               </Grid>
             </Box>
           ) : (
-            <FormControl variant="outlined" margin="normal" fullWidth>
-              <TextField
-                variant="outlined"
-                value={modelUID}
-                label="(Optional) Model UID, model name by default"
-                onChange={(e) => setModelUID(e.target.value)}
-              />
-              <TextField
-                style={{ marginTop: '25px' }}
-                type="number"
-                InputProps={{
-                  inputProps: {
-                    min: 1,
-                  },
-                }}
-                label="Replica"
-                value={replica}
-                onChange={(e) => setReplica(parseInt(e.target.value, 10))}
-              />
+            <Box
+              ref={parentRef}
+              className="formContainer"
+              display="flex"
+              flexDirection="column"
+              width="100%"
+              mx="auto"
+            >
               <FormControl variant="outlined" margin="normal" fullWidth>
-                <InputLabel id="n-gpu-label">Device</InputLabel>
-                <Select
-                  labelId="n-gpu-label"
-                  value={nGpu}
-                  onChange={(e) => setNGpu(e.target.value)}
-                  label="N-GPU"
-                >
-                  {getNewNGPURange().map((v) => {
-                    return (
-                      <MenuItem key={v} value={v}>
-                        {v}
-                      </MenuItem>
-                    )
-                  })}
-                </Select>
-              </FormControl>
-              {nGpu === 'GPU' && (
+                <TextField
+                  variant="outlined"
+                  value={modelUID}
+                  label="(Optional) Model UID, model name by default"
+                  onChange={(e) => setModelUID(e.target.value)}
+                />
+                <TextField
+                  style={{ marginTop: '25px' }}
+                  type="number"
+                  InputProps={{
+                    inputProps: {
+                      min: 1,
+                    },
+                  }}
+                  label="Replica"
+                  value={replica}
+                  onChange={(e) => setReplica(parseInt(e.target.value, 10))}
+                />
+                <FormControl variant="outlined" margin="normal" fullWidth>
+                  <InputLabel id="n-gpu-label">Device</InputLabel>
+                  <Select
+                    labelId="n-gpu-label"
+                    value={nGpu}
+                    onChange={(e) => setNGpu(e.target.value)}
+                    label="N-GPU"
+                  >
+                    {getNewNGPURange().map((v) => {
+                      return (
+                        <MenuItem key={v} value={v}>
+                          {v}
+                        </MenuItem>
+                      )
+                    })}
+                  </Select>
+                </FormControl>
+                {nGpu === 'GPU' && (
+                  <FormControl variant="outlined" margin="normal" fullWidth>
+                    <TextField
+                      value={GPUIdx}
+                      label="GPU Idx, Specify the GPU index where the model is located"
+                      onChange={(e) => {
+                        setGPUIdxAlert(false)
+                        setGPUIdx(e.target.value)
+                        const regular = /^\d+(?:,\d+)*$/
+                        if (
+                          e.target.value !== '' &&
+                          !regular.test(e.target.value)
+                        ) {
+                          setGPUIdxAlert(true)
+                        }
+                      }}
+                    />
+                    {GPUIdxAlert && (
+                      <Alert severity="error">
+                        Please enter numeric data separated by commas, for
+                        example: 0,1,2
+                      </Alert>
+                    )}
+                  </FormControl>
+                )}
                 <FormControl variant="outlined" margin="normal" fullWidth>
                   <TextField
-                    value={GPUIdx}
-                    label="GPU Idx, Specify the GPU index where the model is located"
+                    variant="outlined"
+                    value={workerIp}
+                    label="Worker Ip, specify the worker ip where the model is located in a distributed scenario"
+                    onChange={(e) => setWorkerIp(e.target.value)}
+                  />
+                </FormControl>
+                <FormControl variant="outlined" margin="normal" fullWidth>
+                  <InputLabel id="quantization-label">
+                    (Optional) Download_hub
+                  </InputLabel>
+                  <Select
+                    labelId="download_hub-label"
+                    value={downloadHub}
                     onChange={(e) => {
-                      setGPUIdxAlert(false)
-                      setGPUIdx(e.target.value)
-                      const regular = /^\d+(?:,\d+)*$/
-                      if (
-                        e.target.value !== '' &&
-                        !regular.test(e.target.value)
-                      ) {
-                        setGPUIdxAlert(true)
-                      }
+                      e.target.value === 'none'
+                        ? setDownloadHub('')
+                        : setDownloadHub(e.target.value)
                     }}
+                    label="(Optional) Download_hub"
+                  >
+                    {['none', 'huggingface', 'modelscope'].map((item) => {
+                      return (
+                        <MenuItem key={item} value={item}>
+                          {item}
+                        </MenuItem>
+                      )
+                    })}
+                  </Select>
+                </FormControl>
+                <FormControl variant="outlined" margin="normal" fullWidth>
+                  <TextField
+                    variant="outlined"
+                    value={modelPath}
+                    label="(Optional) Model Path, For PyTorch, provide the model directory. For GGML/GGUF, provide the model file path."
+                    onChange={(e) => setModelPath(e.target.value)}
                   />
-                  {GPUIdxAlert && (
-                    <Alert severity="error">
-                      Please enter numeric data separated by commas, for
-                      example: 0,1,2
-                    </Alert>
-                  )}
                 </FormControl>
-              )}
-              <FormControl variant="outlined" margin="normal" fullWidth>
-                <TextField
-                  variant="outlined"
-                  value={workerIp}
-                  label="Worker Ip, specify the worker ip where the model is located in a distributed scenario"
-                  onChange={(e) => setWorkerIp(e.target.value)}
-                />
-              </FormControl>
-              <FormControl variant="outlined" margin="normal" fullWidth>
-                <InputLabel id="quantization-label">
-                  (Optional) Download_hub
-                </InputLabel>
-                <Select
-                  labelId="download_hub-label"
-                  value={downloadHub}
-                  onChange={(e) => {
-                    e.target.value === 'none'
-                      ? setDownloadHub('')
-                      : setDownloadHub(e.target.value)
+                {modelType === 'image' && (
+                  <>
+                    <ListItemButton
+                      onClick={() => setIsPeftModelConfig(!isPeftModelConfig)}
+                    >
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <ListItemText
+                          primary="Lora Config"
+                          style={{ marginRight: 10 }}
+                        />
+                        {isPeftModelConfig ? <ExpandLess /> : <ExpandMore />}
+                      </div>
+                    </ListItemButton>
+                    <Collapse
+                      in={isPeftModelConfig}
+                      timeout="auto"
+                      unmountOnExit
+                      style={{ marginLeft: '30px' }}
+                    >
+                      <AddPair
+                        customData={{
+                          title: 'Lora Model Config',
+                          key: 'lora_name',
+                          value: 'local_path',
+                        }}
+                        onGetArr={(arr) => {
+                          setLoraListArr(arr)
+                        }}
+                        onJudgeArr={judgeArr}
+                        pairData={loraArr}
+                      />
+                      <AddPair
+                        customData={{
+                          title: 'Lora Load Kwargs for Image Model',
+                          key: 'key',
+                          value: 'value',
+                        }}
+                        onGetArr={(arr) => {
+                          setImageLoraLoadKwargsArr(arr)
+                        }}
+                        onJudgeArr={judgeArr}
+                        pairData={imageLoraLoadArr}
+                      />
+                      <AddPair
+                        customData={{
+                          title: 'Lora Fuse Kwargs for Image Model',
+                          key: 'key',
+                          value: 'value',
+                        }}
+                        onGetArr={(arr) => {
+                          setImageLoraFuseKwargsArr(arr)
+                        }}
+                        onJudgeArr={judgeArr}
+                        pairData={imageLoraFuseArr}
+                      />
+                    </Collapse>
+                  </>
+                )}
+                <AddPair
+                  customData={{
+                    title:
+                      'Additional parameters passed to the inference engine',
+                    key: 'key',
+                    value: 'value',
                   }}
-                  label="(Optional) Download_hub"
-                >
-                  {['none', 'huggingface', 'modelscope'].map((item) => {
-                    return (
-                      <MenuItem key={item} value={item}>
-                        {item}
-                      </MenuItem>
-                    )
-                  })}
-                </Select>
-              </FormControl>
-              <FormControl variant="outlined" margin="normal" fullWidth>
-                <TextField
-                  variant="outlined"
-                  value={modelPath}
-                  label="(Optional) Model Path, For PyTorch, provide the model directory. For GGML/GGUF, provide the model file path."
-                  onChange={(e) => setModelPath(e.target.value)}
+                  onGetArr={(arr) => {
+                    setCustomParametersArr(arr)
+                  }}
+                  onJudgeArr={judgeArr}
+                  pairData={customArr}
                 />
               </FormControl>
-              <AddPair
-                customData={{
-                  title: 'Additional parameters passed to the inference engine',
-                  key: 'key',
-                  value: 'value',
-                }}
-                onGetArr={(arr) => {
-                  setCustomParametersArr(arr)
-                }}
-                onJudgeArr={judgeArr}
-                pairData={customArr}
-              />
-            </FormControl>
+            </Box>
           )}
           <Box className="buttonsContainer">
             <button