diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts
index 1259aff33..7e3a3ffaa 100644
--- a/ui/src/api/application.ts
+++ b/ui/src/api/application.ts
@@ -29,6 +29,32 @@ const getApplication: (param: pageRequest) => Promise<Result<any>> = (param) =>
   )
 }
 
+/**
+ * 获得临时回话Id
+ * @param 参数 
+ * {
+  "model_id": "string",
+  "multiple_rounds_dialogue": true,
+  "dataset_id_list": [
+    "string"
+  ]
+}
+ */
+const postChatOpen: (data: ApplicationFormType) => Promise<Result<any>> = (data) => {
+  return post(`${prefix}/chat/open`, data)
+}
+/**
+ * 对话
+ * @param 参数 
+ * chat_id: string
+ * {
+    "message": "string",
+  }
+ */
+const postChatMessage: (chat_id: string, message: string) => Promise<any> = (chat_id, message) => {
+  return postStream(`/api/${prefix}/chat_message/${chat_id}`, { message })
+}
+
 /**
  * 创建应用
  * @param 参数 
@@ -46,36 +72,10 @@ const getApplication: (param: pageRequest) => Promise<Result<any>> = (param) =>
   ]
 }
  */
-const postApplication: (data: ApplicationFormType) => Promise<Result<any>> = (data) => {
-  return post(`${prefix}`, data)
+const postApplication: ( data: ApplicationFormType, loading?: Ref<boolean> ) => Promise<Result<any>> = (data, loading) => {
+  return post(`${prefix}`, data, undefined, loading)
 }
 
-/**
- * 获得临时回话Id
- * @param 参数 
- * {
-  "model_id": "string",
-  "multiple_rounds_dialogue": true,
-  "dataset_id_list": [
-    "string"
-  ]
-}
- */
-const postChatOpen: (data: ApplicationFormType) => Promise<Result<any>> = (data) => {
-  return post(`${prefix}/chat/open`, data)
-}
-// 对话
-/**
- * 创建数据集
- * @param 参数 
- * chat_id: string
- * {
-    "message": "string",
-  }
- */
-const postChatMessage: (chat_id: string, message: string) => Promise<any> = (chat_id, message) => {
-  return postStream(`/api/${prefix}/chat_message/${chat_id}`, { message })
-}
 export default {
   getAllAppilcation,
   getApplication,
diff --git a/ui/src/views/application/CreateAndSetting.vue b/ui/src/views/application/CreateAndSetting.vue
index 9cf0e123c..2c9ca2360 100644
--- a/ui/src/views/application/CreateAndSetting.vue
+++ b/ui/src/views/application/CreateAndSetting.vue
@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer :header="id ? '设置' : '创建应用'" back-to="-1" class="create-application">
-    <el-row>
+    <el-row v-loading="loading">
       <el-col :span="10">
         <div class="p-24 mb-16" style="padding-bottom: 0">
           <h4 class="title-decoration-1">应用信息</h4>
@@ -140,7 +140,9 @@
         </div>
         <div class="text-right border-t p-16">
           <el-button @click="router.push({ path: `/application` })"> 取消 </el-button>
-          <el-button type="primary" @click="submit" :disabled="loading"> 创建 </el-button>
+          <el-button type="primary" @click="submit(applicationFormRef)" :disabled="loading">
+            创建
+          </el-button>
         </div>
       </el-col>
       <el-col :span="14" class="p-24 border-l">
@@ -162,10 +164,12 @@ 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 applicationApi from '@/api/application'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ApplicationFormType } from '@/api/type/application'
 import type { Provider } from '@/api/type/model'
 import { realatedObject } from '@/utils/utils'
+import { MsgSuccess } from '@/utils/message'
 import useStore from '@/stores'
 const { model, dataset } = useStore()
 
@@ -208,41 +212,23 @@ watch(exampleList.value, () => {
   applicationForm.example = exampleList.value.filter((v) => v)
 })
 
-function submit() {
-  loading.value = true
-
-  // const documents = [] as any[]
-  // StepSecondRef.value.paragraphList.map((item: any) => {
-  //   documents.push({
-  //     name: item.name,
-  //     paragraphs: item.content
-  //   })
-  // })
-  // const obj = { ...baseInfo.value, documents } as datasetData
-  // if (id) {
-  //   documentApi
-  //     .postDocument(id, documents)
-  //     .then((res) => {
-  //       MsgSuccess('提交成功')
-  //       clearStore()
-  //       router.push({ path: `/dataset/${id}/document` })
-  //     })
-  //     .catch(() => {
-  //       loading.value = false
-  //     })
-  // } else {
-  //   datasetApi
-  //     .postDateset(obj)
-  //     .then((res) => {
-  //       successInfo.value = res.data
-  //       active.value = 2
-  //       clearStore()
-  //       loading.value = false
-  //     })
-  //     .catch(() => {
-  //       loading.value = false
-  //     })
-  // }
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      applicationApi
+        .postApplication(applicationForm, loading)
+        .then((res) => {
+          MsgSuccess('创建成功')
+          router.push({ path: `/application` })
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    } else {
+      console.log('error submit!')
+    }
+  })
 }
 
 function removeDataset(id: String) {
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index a77815679..17e2e0504 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -20,16 +20,25 @@
         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mt-8">
           <CardAdd title="创建应用" @click="router.push({ path: '/application/create' })" />
         </el-col>
-        <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"
+          v-for="(item, index) in applicationList"
+          :key="index"
+          class="mt-8"
+        >
           <CardBox
-            title="应用"
-            description="XXXXXX"
+            :title="item.name"
+            :description="item.desc"
             class="application-card cursor"
-            @click="router.push({ path: '/application/1/overview' })"
+            @click="router.push({ path: `/application/${item.id}/overview` })"
           >
             <div class="status-tag">
-              <el-tag class="warning-tag">已停用</el-tag>
-              <el-tag class="success-tag">运行中</el-tag>
+              <el-tag v-if="item.status" class="success-tag">运行中</el-tag>
+              <el-tag v-else class="warning-tag">已停用</el-tag>
             </div>
 
             <template #footer>
@@ -41,7 +50,10 @@
                 </el-tooltip>
                 <el-divider direction="vertical" />
                 <el-tooltip effect="dark" content="设置" placement="top">
-                  <el-button text @click.stop>
+                  <el-button
+                    text
+                    @click.stop="router.push({ path: `/application/${item.id}/setting` })"
+                  >
                     <AppIcon iconName="Setting"></AppIcon>
                   </el-button>
                 </el-tooltip>
@@ -56,7 +68,8 @@
                     <template #dropdown>
                       <el-dropdown-menu>
                         <div class="dropdown-custom-switch">
-                          <span>运行中</span><el-switch v-model="state" />
+                          <span>运行中</span>
+                          <!-- <el-switch v-model="item.status"  @change="changeState($event, item)"  /> -->
                         </div>
                         <el-dropdown-item divided>删除</el-dropdown-item>
                       </el-dropdown-menu>
@@ -122,19 +135,27 @@ function search() {
 //       .catch(() => {})
 //   }
 
+// function changeState(bool: Boolean, row: any) {
+//   const obj = {
+//     is_active: bool
+//   }
+//   loading.value = true
+//   applicationApi
+//     .asyncPutParagraph(id, documentId, row.id, obj)
+//     .then((res) => {
+//       loading.value = false
+//     })
+//     .catch(() => {
+//       loading.value = false
+//     })
+// }
+
 function getList() {
   loading.value = true
   applicationApi
     .getApplication(pageConfig)
     .then((res) => {
-      const list = res.data?.records
-      list.map((item: any) => {
-        applicationList.value.push({
-          value: item.provider,
-          label: item.name
-        })
-      })
-
+      applicationList.value = res.data?.records
       loading.value = false
     })
     .catch(() => {