diff --git a/ui/src/views/application/CreateAndSetting.vue b/ui/src/views/application/CreateAndSetting.vue
index e90c2248a..29f0e0812 100644
--- a/ui/src/views/application/CreateAndSetting.vue
+++ b/ui/src/views/application/CreateAndSetting.vue
@@ -65,7 +65,7 @@
                     </el-option>
                   </el-option-group>
                   <div class="border-t" style="padding: 8px 11px">
-                    <el-button type="primary" link>
+                    <el-button type="primary" link @click="openCreateModel">
                       <el-icon class="mr-4"><Plus /></el-icon> 添加模型
                     </el-button>
                   </div>
@@ -162,6 +162,12 @@
       @refresh="refresh"
       :loading="datasetLoading"
     />
+    <CreateModelDialog
+      ref="createModelRef"
+      @submit="getModel"
+      @change="openCreateModel($event)"
+    ></CreateModelDialog>
+    <SelectProviderDialog ref="selectProviderRef" @change="openCreateModel($event)" />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
@@ -170,6 +176,8 @@ import { useRouter, useRoute } from 'vue-router'
 import { groupBy } from 'lodash'
 import AiDialog from '@/components/ai-dialog/index.vue'
 import AddDatasetDialog from './components/AddDatasetDialog.vue'
+import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
+import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
 import applicationApi from '@/api/application'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ApplicationFormType } from '@/api/type/application'
@@ -185,6 +193,9 @@ const {
   params: { id }
 } = route as any
 
+const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
+const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
+
 const applicationFormRef = ref<FormInstance>()
 const AddDatasetDialogRef = ref()
 
@@ -239,6 +250,14 @@ const submit = async (formEl: FormInstance | undefined) => {
   })
 }
 
+const openCreateModel = (provider?: Provider) => {
+  if (provider && provider.provider) {
+    createModelRef.value?.open(provider)
+  } else {
+    selectProviderRef.value?.open()
+  }
+}
+
 function removeDataset(id: string) {
   applicationForm.value.dataset_id_list.splice(applicationForm.value.dataset_id_list.indexOf(id), 1)
 }
diff --git a/ui/src/views/application/components/AddDatasetDialog.vue b/ui/src/views/application/components/AddDatasetDialog.vue
index e20ea5ceb..5ac362c61 100644
--- a/ui/src/views/application/components/AddDatasetDialog.vue
+++ b/ui/src/views/application/components/AddDatasetDialog.vue
@@ -11,7 +11,9 @@
     <el-row :gutter="12" v-loading="loading">
       <el-col :span="12" v-for="(item, index) in data" :key="index" class="mb-16">
         <CardCheckbox value-field="id" :data="item" v-model="checkList">
-          {{ item.name }}
+          <span class="ellipsis-1">
+            {{ item.name }}
+          </span>
         </CardCheckbox>
       </el-col>
     </el-row>
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index d9eaf0f6f..375d4d89a 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="application-list-container p-24" style="padding-top: 16px">
-    <div class="flex-between mb-8">
+    <div class="flex-between mb-16">
       <h3>应用</h3>
       <el-input
         v-model="pageConfig.name"
@@ -17,7 +17,7 @@
         :infinite-scroll-disabled="disabledScroll"
         class="app-list-row"
       >
-        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mt-8">
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
           <CardAdd title="创建应用" @click="router.push({ path: '/application/create' })" />
         </el-col>
         <el-col
@@ -28,7 +28,7 @@
           :xl="4"
           v-for="(item, index) in applicationList"
           :key="index"
-          class="mt-8"
+          class="mb-16"
         >
           <CardBox
             :title="item.name"
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 3010b8cc6..e6990db4c 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="dataset-list-container p-24" style="padding-top: 16px">
-    <div class="flex-between mb-8">
+    <div class="flex-between mb-16">
       <h3>数据集</h3>
       <el-input
         v-model="pageConfig.name"
@@ -17,7 +17,7 @@
         :infinite-scroll-disabled="disabledScroll"
         class="app-list-row"
       >
-        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mt-8">
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
           <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
         </el-col>
         <el-col
@@ -28,7 +28,7 @@
           :xl="4"
           v-for="(item, index) in datasetList"
           :key="index"
-          class="mt-8"
+          class="mb-16"
         >
           <CardBox
             :title="item.name"
diff --git a/ui/src/views/template/component/CreateModel.vue b/ui/src/views/template/component/CreateModelDialog.vue
similarity index 100%
rename from ui/src/views/template/component/CreateModel.vue
rename to ui/src/views/template/component/CreateModelDialog.vue
diff --git a/ui/src/views/template/component/SelectProvider.vue b/ui/src/views/template/component/SelectProviderDialog.vue
similarity index 99%
rename from ui/src/views/template/component/SelectProvider.vue
rename to ui/src/views/template/component/SelectProviderDialog.vue
index 297054d19..ae77e9eb4 100644
--- a/ui/src/views/template/component/SelectProvider.vue
+++ b/ui/src/views/template/component/SelectProviderDialog.vue
@@ -24,7 +24,6 @@
 import { ref } from 'vue'
 import ModelApi from '@/api/model'
 import type { Provider } from '@/api/type/model'
-
 const loading = ref<boolean>(false)
 const dialogVisible = ref<boolean>(false)
 const list_provider = ref<Array<Provider>>([])
diff --git a/ui/src/views/template/index.vue b/ui/src/views/template/index.vue
index 91b9f5eee..4ed9d224d 100644
--- a/ui/src/views/template/index.vue
+++ b/ui/src/views/template/index.vue
@@ -60,13 +60,13 @@
         </div>
       </div>
     </div>
-    <CreateModel
+    <CreateModelDialog
       ref="createModelRef"
       @submit="list_model"
       @change="openCreateModel($event)"
-    ></CreateModel>
+    ></CreateModelDialog>
 
-    <SelectProvider ref="selectProviderRef" @change="openCreateModel($event)"></SelectProvider>
+    <SelectProviderDialog ref="selectProviderRef" @change="openCreateModel($event)"></SelectProviderDialog>
   </LayoutContainer>
 </template>
 
@@ -78,8 +78,8 @@ import type { Provider, Model } from '@/api/type/model'
 import AppIcon from '@/components/icons/AppIcon.vue'
 import ModelCard from '@/views/template/component/ModelCard.vue'
 import { splitArray } from '@/utils/common'
-import CreateModel from '@/views/template/component/CreateModel.vue'
-import SelectProvider from '@/views/template/component/SelectProvider.vue'
+import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
+import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
 
 const allObj = {
   icon: '',
@@ -99,8 +99,8 @@ const model_list = ref<Array<Model>>([])
 const model_split_list = computed(() => {
   return splitArray(model_list.value, 2)
 })
-const createModelRef = ref<InstanceType<typeof CreateModel>>()
-const selectProviderRef = ref<InstanceType<typeof SelectProvider>>()
+const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
+const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
 
 const clickListHandle = (item: Provider) => {
   active_provider.value = item