diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts
index c6020ddd2..1a3631d36 100644
--- a/ui/src/api/application.ts
+++ b/ui/src/api/application.ts
@@ -216,6 +216,20 @@ const getApplicationHitTest: (
   return get(`${prefix}/${application_id}/hit_test`, data, loading)
 }
 
+/**
+ * 获取当前用户可使用的模型列表
+ * @param application_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getApplicationModel: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (application_id, loading) => {
+  return get(`${prefix}/${application_id}/model`, loading)
+}
+
 export default {
   getAllAppilcation,
   getApplication,
@@ -232,5 +246,6 @@ export default {
   postAppAuthentication,
   getProfile,
   putChatVote,
-  getApplicationHitTest
+  getApplicationHitTest,
+  getApplicationModel
 }
diff --git a/ui/src/components/auto-tooltip/index.vue b/ui/src/components/auto-tooltip/index.vue
index 4fe7f0be9..531e2c4c6 100644
--- a/ui/src/components/auto-tooltip/index.vue
+++ b/ui/src/components/auto-tooltip/index.vue
@@ -5,7 +5,7 @@
     effect="dark"
     placement="bottom"
   >
-    <div ref="tagLabel" class="auto-tooltip">
+    <div ref="tagLabel" :class="['auto-tooltip', className]" :style="style">
       <slot></slot>
     </div>
   </el-tooltip>
@@ -13,6 +13,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick } from 'vue'
 defineOptions({ name: 'AutoTooltip' })
+const props = defineProps({ className: String, style: Object })
 const tagLabel = ref()
 const containerWeight = ref(0)
 const contentWeight = ref(0)
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index 84721522c..c320fc783 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -8,7 +8,9 @@
               <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
             </AppAvatar>
           </slot>
-          <h4 class="ellipsis-1" style="width: 65%">{{ title }}</h4>
+          <auto-tooltip :content="title" style="width: 65%">
+            {{ title }}
+          </auto-tooltip>
         </div>
       </slot>
     </div>
@@ -76,6 +78,7 @@ function cardLeave() {
       overflow: hidden;
     }
   }
+
   .card-footer {
     position: absolute;
     bottom: 8px;
diff --git a/ui/src/components/tag-ellipsis/index.vue b/ui/src/components/tag-ellipsis/index.vue
index fb39c40ad..aa08d864f 100644
--- a/ui/src/components/tag-ellipsis/index.vue
+++ b/ui/src/components/tag-ellipsis/index.vue
@@ -1,8 +1,8 @@
 <template>
   <el-tag class="tag-ellipsis flex-between mb-8" effect="plain" v-bind="$attrs">
-    <AutoTooltip :content="tooltipContent">
+    <auto-tooltip :content="tooltipContent">
       <slot></slot>
-    </AutoTooltip>
+    </auto-tooltip>
   </el-tag>
 </template>
 <script setup lang="ts">
diff --git a/ui/src/views/application/CreateAndSetting.vue b/ui/src/views/application/CreateAndSetting.vue
index a99d05771..c23fd3d85 100644
--- a/ui/src/views/application/CreateAndSetting.vue
+++ b/ui/src/views/application/CreateAndSetting.vue
@@ -211,7 +211,7 @@
                     <el-col
                       :xs="24"
                       :sm="24"
-                      :md="12"
+                      :md="24"
                       :lg="12"
                       :xl="12"
                       class="mb-8"
@@ -464,15 +464,27 @@ function getDataset() {
 
 function getModel() {
   loading.value = true
-  model
-    .asyncGetModel()
-    .then((res: any) => {
-      modelOptions.value = groupBy(res?.data, 'provider')
-      loading.value = false
-    })
-    .catch(() => {
-      loading.value = false
-    })
+  if (id) {
+    applicationApi
+      .getApplicationModel(id)
+      .then((res: any) => {
+        modelOptions.value = groupBy(res?.data, 'provider')
+        loading.value = false
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  } else {
+    model
+      .asyncGetModel()
+      .then((res: any) => {
+        modelOptions.value = groupBy(res?.data, 'provider')
+        loading.value = false
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  }
 }
 
 function getProvider() {
diff --git a/ui/src/views/hit-test/index.vue b/ui/src/views/hit-test/index.vue
index d41092776..748d5e2f7 100644
--- a/ui/src/views/hit-test/index.vue
+++ b/ui/src/views/hit-test/index.vue
@@ -25,7 +25,7 @@
               <el-col
                 :xs="24"
                 :sm="12"
-                :md="8"
+                :md="12"
                 :lg="8"
                 :xl="6"
                 v-for="(item, index) in paragraphDetail"
diff --git a/ui/src/views/template/index.vue b/ui/src/views/template/index.vue
index 49bf5e762..fc765bd52 100644
--- a/ui/src/views/template/index.vue
+++ b/ui/src/views/template/index.vue
@@ -42,7 +42,7 @@
                   <el-col
                     :xs="24"
                     :sm="24"
-                    :md="12"
+                    :md="24"
                     :lg="12"
                     :xl="12"
                     class="mb-16"