diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts
index 53ec327cd..b1c103fa3 100644
--- a/ui/src/api/application.ts
+++ b/ui/src/api/application.ts
@@ -1,5 +1,22 @@
 import { Result } from '@/request/Result'
 import { get, post, del, put } from '@/request/index'
+import type { pageRequest } from '@/api/type/common'
 const prefix = '/application'
 
-export default {}
+/**
+ * 获取分页应用
+ * @param 参数  {
+              "current_page": "string",
+              "page_size": "string",
+              "name": "string",
+            }
+ */
+const getApplication: (param: pageRequest) => Promise<Result<any>> = (param) => {
+  return get(
+    `${prefix}/${param.current_page}/${param.page_size}`,
+    param.name && { name: param.name }
+  )
+}
+export default {
+  getApplication
+}
diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index 0a3239837..106956e74 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -1,6 +1,7 @@
 import { Result } from '@/request/Result'
 import { get, post, del, put } from '@/request/index'
-import type { datasetListRequest, datasetData } from '@/api/type/dataset'
+import type { datasetData } from '@/api/type/dataset'
+import type { pageRequest } from '@/api/type/common'
 const prefix = '/dataset'
 
 /**
@@ -11,7 +12,7 @@ const prefix = '/dataset'
               "name": "string",
             }
  */
-const getDateset: (param: datasetListRequest) => Promise<Result<any>> = (param) => {
+const getDateset: (param: pageRequest) => Promise<Result<any>> = (param) => {
   return get(
     `${prefix}/${param.current_page}/${param.page_size}`,
     param.name && { name: param.name }
diff --git a/ui/src/api/model.ts b/ui/src/api/model.ts
index fb3962492..8cd95287a 100644
--- a/ui/src/api/model.ts
+++ b/ui/src/api/model.ts
@@ -11,7 +11,14 @@ const prefix_provider = '/provider'
 const getModel: (data?: modelRequest) => Promise<Result<any>> = (data) => {
   return get(`${prefix}`, data)
 }
+/**
+ * 获得供应商列表
+ */
+const getProvider: () => Promise<Result<any>> = () => {
+  return get(`${prefix_provider}`)
+}
 
 export default {
-  getModel
+  getModel,
+  getProvider
 }
diff --git a/ui/src/api/type/common.ts b/ui/src/api/type/common.ts
index 32f883255..78f14df24 100644
--- a/ui/src/api/type/common.ts
+++ b/ui/src/api/type/common.ts
@@ -6,4 +6,10 @@ interface Dict<V> {
   [propName: string]: V
 }
 
-export type { KeyValue, Dict }
+interface pageRequest {
+  current_page: number
+  page_size: number
+  name: string
+}
+
+export type { KeyValue, Dict, pageRequest }
diff --git a/ui/src/api/type/dataset.ts b/ui/src/api/type/dataset.ts
index d1f60f155..2cd02587b 100644
--- a/ui/src/api/type/dataset.ts
+++ b/ui/src/api/type/dataset.ts
@@ -1,13 +1,7 @@
-interface datasetListRequest {
-  current_page: number
-  page_size: number
-  name: string
-}
-
 interface datasetData {
   name: String
   desc: String
   documents?: Array<any>
 }
 
-export type { datasetListRequest, datasetData }
+export type { datasetData }
diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
index c4911742f..39fc5b06b 100644
--- a/ui/src/components/icons/index.ts
+++ b/ui/src/components/icons/index.ts
@@ -197,5 +197,29 @@ export const iconMap: any = {
         )
       ])
     }
+  },
+  'app-view': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 16 12',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M6.9649 8.5176L10.8075 6.59629C10.9365 6.53178 11.0412 6.42717 11.1057 6.29815C11.2703 5.96883 11.1368 5.56838 10.8075 5.40372L6.9649 3.48241C6.87233 3.43612 6.77025 3.41203 6.66675 3.41203C6.29856 3.41203 6.00009 3.71051 6.00009 4.07869V7.92132C6.00009 8.02481 6.02418 8.12689 6.07047 8.21946C6.23513 8.54878 6.63558 8.68226 6.9649 8.5176Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M15.3334 0.75C15.3334 0.335786 15.0349 0 14.6667 0H1.33341C0.965225 0 0.666748 0.335786 0.666748 0.75V11.25C0.666748 11.6642 0.965225 12 1.33341 12H14.6667C15.0349 12 15.3334 11.6642 15.3334 11.25V0.75ZM2.00008 1.5H14.0001V10.5H2.00008V1.5Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
   }
 }
diff --git a/ui/src/stores/modules/model.ts b/ui/src/stores/modules/model.ts
index 7847d6de7..0e2f8fc78 100644
--- a/ui/src/stores/modules/model.ts
+++ b/ui/src/stores/modules/model.ts
@@ -16,6 +16,18 @@ const useModelStore = defineStore({
             reject(error)
           })
       })
+    },
+    async asyncGetProvider() {
+      return new Promise((resolve, reject) => {
+        modelApi
+          .getProvider()
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
     }
   }
 })
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 27bb8856c..602a33bbd 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -270,6 +270,17 @@ h4 {
 .default-tag {
   background: var(--tag-deflaut-bg);
   color: var(--tag-deflaut-color);
+  border: none;
+}
+.success-tag {
+  background: var(--tag-success-bg);
+  color: var(--el-color-success);
+  border: none;
+}
+.warning-tag {
+  background: var(--tag-warning-bg);
+  color: var(--el-color-warning);
+  border: none;
 }
 
 /*
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index a554b543a..954982441 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -99,6 +99,11 @@
 .el-dropdown {
   color: var(--app-text-color);
 }
+.el-dropdown-menu__item {
+  color: var(--app-text-color);
+  font-weight: 400;
+  padding: 5px 11px;
+}
 
 .el-tag {
   --el-tag-border-radius: 2px;
@@ -179,3 +184,5 @@
 .el-textarea__inner {
   font-size: 13px;
 }
+
+
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index 3fd8815a9..a0b1ee504 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -25,6 +25,11 @@
   /** tag */
   --tag-deflaut-bg: rgba(51, 112, 255, 0.2);
   --tag-deflaut-color: #2b5fd9;
+  --tag-success-bg: rgba(52, 199, 36, 0.20);
+  --tag-success-color: #2CA91F;
+  --tag-warning-bg: rgba(255, 136, 0, 0.20);
+  --tag-warning-color: #D97400;
+
   /** card */
   --card-width: 330px;
   --card-min-height: 160px;
diff --git a/ui/src/views/application/CreateApplication.vue b/ui/src/views/application/CreateApplication.vue
index b5ca4942b..0f47b26c5 100644
--- a/ui/src/views/application/CreateApplication.vue
+++ b/ui/src/views/application/CreateApplication.vue
@@ -35,14 +35,20 @@
                 />
               </el-form-item>
               <el-form-item label="选择模型" prop="model_id">
-                <el-select
+                <!-- <el-select
                   v-model="applicationForm.model_id"
                   placeholder="请选择模型"
                   style="width: 100%"
                 >
                   <el-option label="Zone one" value="shanghai" />
                   <el-option label="Zone two" value="beijing" />
-                </el-select>
+                </el-select> -->
+                <el-cascader
+                  v-model="applicationForm.model_id"
+                  :options="modelOptions"
+                  :props="modelProps"
+                  clearable
+                />
               </el-form-item>
 
               <el-form-item label="多轮对话">
@@ -120,7 +126,7 @@
 <script setup lang="ts">
 import { reactive, ref, watch, onMounted } from 'vue'
 import AiDialog from '@/components/ai-dialog/index.vue'
-import type { FormInstance, FormRules } from 'element-plus'
+import type { FormInstance, FormRules, CascaderProps } from 'element-plus'
 import type { ApplicationFormType } from '@/api/type/application'
 import useStore from '@/stores'
 const { model } = useStore()
@@ -149,14 +155,37 @@ const rules = reactive<FormRules<ApplicationFormType>>({
     }
   ]
 })
+const modelOptions = ref([])
 
 watch(exampleList.value, () => {
   applicationForm.example = exampleList.value.filter((v) => v)
 })
 
+let id = 0
+const modelProps: CascaderProps = {
+  lazy: true,
+  async lazyLoad(node, resolve) {
+    console.log(node)
+    const { level } = node
+    if (level === 0) {
+      let res = await getProvider()
+      resolve(res)
+    }
+    // setTimeout(() => {
+    //   const nodes = Array.from({ length: level + 1 }).map((item) => ({
+    //     value: ++id,
+    //     label: `Option - ${id}`,
+    //     leaf: level >= 2
+    //   }))
+    //   resolve(nodes)
+    // }, 1000)
+  }
+}
+
 function getModel() {
   loading.value = true
-  model.asyncGetModel()
+  model
+    .asyncGetModel()
     .then((res) => {
       loading.value = false
     })
@@ -164,8 +193,20 @@ function getModel() {
       loading.value = false
     })
 }
+function getProvider() {
+  loading.value = true
+  model
+    .asyncGetProvider()
+    .then((res) => {
+      modelOptions.value = res?.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
 onMounted(() => {
-  getModel()
+  // getProvider()
 })
 </script>
 <style lang="scss" scoped>
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index cf3b4bb81..2eb89af67 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -1,94 +1,103 @@
 <template>
-    <div class="application-list-container p-24">
-      <div class="flex-between">
-        <h3>应用</h3>
-        <el-input
-          v-model="pageConfig.name"
-          @change="search"
-          placeholder="按 名称 搜索"
-          prefix-icon="Search"
-          class="w-240"
-        />
-      </div>
-      <div v-loading.fullscreen.lock="loading">
-        <el-row
-          :gutter="15"
-          v-infinite-scroll="loadDataset"
-          :infinite-scroll-disabled="disabledScroll"
-          class="app-list-row"
-        >
-          <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">
-            <CardBox title="应用" @click="router.push({ path: '/application/1/overview' })" />
-          </el-col>
-          <!-- <el-col
-            :xs="24"
-            :sm="12"
-            :md="8"
-            :lg="6"
-            :xl="4"
-            v-for="(item, index) in applicationList"
-            :key="index"
-            class="mt-8"
+  <div class="application-list-container p-24">
+    <div class="flex-between">
+      <h3>应用</h3>
+      <el-input
+        v-model="pageConfig.name"
+        @change="search"
+        placeholder="按 名称 搜索"
+        prefix-icon="Search"
+        class="w-240"
+      />
+    </div>
+    <div v-loading.fullscreen.lock="loading">
+      <el-row
+        :gutter="15"
+        v-infinite-scroll="loadDataset"
+        :infinite-scroll-disabled="disabledScroll"
+        class="app-list-row"
+      >
+        <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">
+          <CardBox
+            title="应用"
+            description="XXXXXX"
+            class="application-card cursor"
+            @click="router.push({ path: '/application/1/overview' })"
           >
-            <CardBox
-              :title="item.name"
-              :description="item.desc"
-              class="cursor"
-              @click="router.push({ path: `/dataset/${item.id}/document` })"
-            >
-              <template #mouseEnter>
-                <el-tooltip effect="dark" content="删除" placement="top">
-                  <el-button text @click.stop="deleteDateset(item)" class="delete-button">
-                    <el-icon><Delete /></el-icon>
+            <div class="status-tag">
+              <el-tag class="warning-tag">已停用</el-tag>
+              <el-tag class="success-tag">运行中</el-tag>
+            </div>
+
+            <template #footer>
+              <div class="footer-content">
+                <el-tooltip effect="dark" content="演示" placement="top">
+                  <el-button text @click.stop>
+                    <AppIcon iconName="app-view"></AppIcon>
                   </el-button>
                 </el-tooltip>
-              </template>
-  
-              <template #footer>
-                <div class="footer-content">
-                  <span class="bold">{{ item?.document_count || 0 }}</span>
-                  文档<el-divider direction="vertical" />
-                  <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
-                  字符<el-divider direction="vertical" />
-                  <span class="bold">{{ item?.char_length || 0 }}</span>
-                  关联应用
-                </div>
-              </template>
-            </CardBox>
-          </el-col> -->
-        </el-row>
-      </div>
+                <el-divider direction="vertical" />
+                <el-tooltip effect="dark" content="设置" placement="top">
+                  <el-button text @click.stop>
+                    <AppIcon iconName="Setting"></AppIcon>
+                  </el-button>
+                </el-tooltip>
+                <el-divider direction="vertical" />
+                <span @click.stop>
+                  <el-dropdown trigger="click" placement="bottom-start">
+                    <span class="el-dropdown-link">
+                      <el-button text>
+                        <AppIcon iconName="MoreFilled"></AppIcon>
+                      </el-button>
+                    </span>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <div class="dropdown-custom-switch">
+                          <span>运行中</span><el-switch v-model="state" />
+                        </div>
+                        <el-dropdown-item divided>删除</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </span>
+              </div>
+            </template>
+          </CardBox>
+        </el-col>
+      </el-row>
     </div>
-  </template>
-  <script setup lang="ts">
-  import { ref, onMounted, reactive } from 'vue'
-  import datasetApi from '@/api/dataset'
-  import type { datasetListRequest } from '@/api/type/dataset'
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import applicationApi from '@/api/application'
+import type { pageRequest } from '@/api/type/common'
 //   import { MsgSuccess, MsgConfirm } from '@/utils/message'
-  import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 //   import { numberFormat } from '@/utils/utils'
-  const router = useRouter()
-  
-  const loading = ref(false)
-  const disabledScroll = ref(false)
-  const pageConfig = reactive<datasetListRequest>({
-    current_page: 1,
-    page_size: 20,
-    name: ''
-  })
+const router = useRouter()
+
+const loading = ref(false)
+const disabledScroll = ref(false)
+const pageConfig = reactive<pageRequest>({
+  current_page: 1,
+  page_size: 20,
+  name: ''
+})
+
+const applicationList = ref<any[]>([])
+const state = ref(false)
+
+function loadDataset() {}
+
+function search() {
+  pageConfig.current_page = 1
+  getList()
+}
 
-    const applicationList = ref<any[]>([])
-  
-  function loadDataset() {}
-  
-  function search() {
-    pageConfig.current_page = 1
-    getList()
-  }
-  
 //   function deleteDateset(row: any) {
 //     MsgConfirm(
 //       `是否删除数据集：${row.name} ?`,
@@ -112,37 +121,38 @@
 //       })
 //       .catch(() => {})
 //   }
-  
-  function getList() {
-    loading.value = true
-    datasetApi
-      .getDateset(pageConfig)
-      .then((res) => {
-        applicationList.value = res.data?.records
-        loading.value = false
-      })
-      .catch(() => {
-        loading.value = false
-      })
+
+function getList() {
+  loading.value = true
+  applicationApi
+    .getApplication(pageConfig)
+    .then((res) => {
+      applicationList.value = res.data?.records
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+<style lang="scss" scoped>
+.application-card {
+  .status-tag {
+    position: absolute;
+    right: 16px;
+    top: 20px;
   }
-  
-  onMounted(() => {
-    // getList()
-  })
-  </script>
-  <style lang="scss" scoped>
-//   .dataset-list-container {
-//     .delete-button {
-//       position: absolute;
-//       right: 12px;
-//       top: 18px;
-//       height: auto;
-//     }
-//     .footer-content {
-//       .bold {
-//         color: var(--app-text-color);
-//       }
-//     }
-//   }
-  </style>
-  
\ No newline at end of file
+}
+.dropdown-custom-switch {
+  padding: 5px 11px;
+  font-size: 14px;
+  font-weight: 400;
+  span {
+    margin-right: 26px;
+  }
+}
+</style>
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index d3e5d4673..37283a008 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -63,7 +63,7 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from 'vue'
 import datasetApi from '@/api/dataset'
-import type { datasetListRequest } from '@/api/type/dataset'
+import type { pageRequest } from '@/api/type/common'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { useRouter } from 'vue-router'
 import { numberFormat } from '@/utils/utils'
@@ -72,7 +72,7 @@ const router = useRouter()
 const loading = ref(false)
 const datasetList = ref<any[]>([])
 const disabledScroll = ref(false)
-const pageConfig = reactive<datasetListRequest>({
+const pageConfig = reactive<pageRequest>({
   current_page: 1,
   page_size: 20,
   name: ''