diff --git a/ui-vue3/package.json b/ui-vue3/package.json
index 541c37655..2a3778d41 100644
--- a/ui-vue3/package.json
+++ b/ui-vue3/package.json
@@ -30,6 +30,7 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
+    "pinyin-pro": "^3.19.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
     "vue": "^3.3.10",
diff --git a/ui-vue3/src/App.vue b/ui-vue3/src/App.vue
index 5b0f5c3cb..2b0326426 100644
--- a/ui-vue3/src/App.vue
+++ b/ui-vue3/src/App.vue
@@ -19,13 +19,13 @@
 import { RouterView } from 'vue-router'
 import enUS from 'ant-design-vue/es/locale/en_US'
 import zhCN from 'ant-design-vue/es/locale/zh_CN'
-import { provide, reactive, ref, watch } from 'vue'
+import { computed, provide, reactive, ref, watch } from 'vue'
 import dayjs from 'dayjs'
 import { QuestionCircleOutlined } from '@ant-design/icons-vue'
 import { notification } from 'ant-design-vue'
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
 import { PRIMARY_COLOR } from '@/base/constants'
-import { localeConfig } from '@/base/i18n'
+import { changeLanguage, i18n, localeConfig } from '@/base/i18n'
 import devTool from '@/utils/DevToolUtil'
 
 dayjs.locale('en')
@@ -44,11 +44,13 @@ provide(PROVIDE_INJECT_KEY.LOCALE, i18nConfig)
 function globalQuestion() {
   devTool.todo('show Q&A tips')
 }
+
+const localeGlobal = reactive(i18n.global.locale)
 </script>
 
 <template>
   <a-config-provider
-    :locale="i18nConfig.locale === 'en' ? enUS : zhCN"
+    :locale="localeGlobal === 'en' ? enUS : zhCN"
     :theme="{
       token: {
         colorPrimary: PRIMARY_COLOR
diff --git a/ui-vue3/src/api/mock/index.ts b/ui-vue3/src/api/mock/index.ts
new file mode 100644
index 000000000..156249f87
--- /dev/null
+++ b/ui-vue3/src/api/mock/index.ts
@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const modulesFiles: any = import.meta.glob('./**.ts', { eager: true })
+const fileList = []
+for (const key of Object.keys(modulesFiles)) {
+  fileList.push(modulesFiles[key].default)
+}
+export default fileList
diff --git a/ui-vue3/src/api/mock/mockApp.ts b/ui-vue3/src/api/mock/mockApp.ts
new file mode 100644
index 000000000..0178c2137
--- /dev/null
+++ b/ui-vue3/src/api/mock/mockApp.ts
@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Mock from 'mockjs'
+
+Mock.mock('/mock/application/search', 'get', () => {
+  let total = Mock.mock('@integer(8, 1000)')
+  let list = []
+  for (let i = 0; i < total; i++) {
+    list.push({
+      appName: 'app_' + Mock.mock('@string(2,10)'),
+      instanceNum: Mock.mock('@integer(80, 200)'),
+      deployCluster: 'cluster_' + Mock.mock('@string(5)'),
+      'registerClusters|1-3': ['cluster_' + Mock.mock('@string(5)')]
+    })
+  }
+  return {
+    code: 200,
+    message: 'success',
+    data: Mock.mock({
+      total: total,
+      curPage: 1,
+      pageSize: 10,
+      data: list
+    })
+  }
+})
diff --git a/ui-vue3/src/api/service/app.ts b/ui-vue3/src/api/service/app.ts
new file mode 100644
index 000000000..079f0e5ff
--- /dev/null
+++ b/ui-vue3/src/api/service/app.ts
@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import request from '@/base/http/request'
+
+export const searchApplications = (params: any): Promise<any> => {
+  return request({
+    url: '/application/search',
+    method: 'get',
+    params
+  })
+}
diff --git a/ui-vue3/src/base/enums/ProvideInject.ts b/ui-vue3/src/base/enums/ProvideInject.ts
index b737f6736..af7ee195a 100644
--- a/ui-vue3/src/base/enums/ProvideInject.ts
+++ b/ui-vue3/src/base/enums/ProvideInject.ts
@@ -19,5 +19,6 @@ const KEY_PREFIX = '__PROVIDE_INJECT_KEY_'
 
 export const PROVIDE_INJECT_KEY = {
   LOCALE: KEY_PREFIX + 'LOCALE',
+  SEARCH_DOMAIN: KEY_PREFIX + 'SEARCH_DOMAIN',
   COLLAPSED: KEY_PREFIX + 'COLLAPSED'
 }
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index 0d2248081..516882b47 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -262,7 +262,15 @@ const words: I18nType = {
   serviceManagement: 'Dev & Test',
   resources: 'Resources',
   applications: 'Applications',
-  instances: 'Instances'
+  instances: 'Instances',
+  applicationDomain: {
+    name: 'Application Name',
+    detail: 'Application Detail'
+  },
+  searchDomain: {
+    total: 'Total',
+    unit: 'items'
+  }
 }
 
 export default words
diff --git a/ui-vue3/src/base/i18n/index.ts b/ui-vue3/src/base/i18n/index.ts
index 1d94ba07b..66fb5efd8 100644
--- a/ui-vue3/src/base/i18n/index.ts
+++ b/ui-vue3/src/base/i18n/index.ts
@@ -18,8 +18,9 @@
 import { createI18n } from 'vue-i18n'
 import { LOCAL_STORAGE_LOCALE } from '@/base/constants'
 import { messages } from '@/base/i18n/messages'
+import { reactive } from 'vue'
 
-export const localeConfig = {
+export const localeConfig = reactive({
   // todo use system's locale
   locale: localStorage.getItem(LOCAL_STORAGE_LOCALE) || 'cn',
   opts: [
@@ -32,9 +33,9 @@ export const localeConfig = {
       title: '中文'
     }
   ]
-}
+})
 
-export const i18n = createI18n({
+export const i18n: any = createI18n({
   locale: localeConfig.locale,
   legacy: false,
   globalInjection: true,
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index 5754e7bfa..4883f4047 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -260,7 +260,15 @@ const words: I18nType = {
   versionInputPrompt: '请输入服务version(可选)',
   resources: '资源详情',
   applications: '应用',
-  instances: '实例'
+  instances: '实例',
+  applicationDomain: {
+    name: '应用名',
+    detail: '应用详情'
+  },
+  searchDomain: {
+    total: '共计',
+    unit: '条'
+  }
 }
 
 export default words
diff --git a/ui-vue3/src/components/SearchTable.vue b/ui-vue3/src/components/SearchTable.vue
new file mode 100644
index 000000000..07a4ef787
--- /dev/null
+++ b/ui-vue3/src/components/SearchTable.vue
@@ -0,0 +1,85 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<template>
+  <div class="__container_search_table">
+    <a-form>
+      <a-row justify="start">
+        <a-col :span="10">
+          <a-form-item :label="$t('applicationDomain.name')">
+            <a-input-group compact>
+              <a-input-search
+                v-model:value="searchDomain.params.appName"
+                placeholder="input search text"
+                enter-button
+                @search="searchDomain.onSearch()"
+              ></a-input-search>
+            </a-input-group>
+          </a-form-item>
+        </a-col>
+        <a-col :span="14"> </a-col>
+      </a-row>
+    </a-form>
+
+    <div class="search-table-container">
+      <a-table
+        :pagination="pagination"
+        :scroll="{ y: '55vh' }"
+        :columns="searchDomain?.table.columns"
+        :data-source="searchDomain?.result"
+      >
+        <template #bodyCell="{ text, record, index, column }">
+          <span v-if="column.key === 'idx'">{{ index + 1 }}</span>
+          <slot
+            name="bodyCell"
+            :text="text"
+            :record="record"
+            :index="index"
+            :column="column"
+            v-else
+          >
+          </slot>
+        </template>
+      </a-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ComponentInternalInstance } from 'vue'
+import { getCurrentInstance, inject } from 'vue'
+
+import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import type { SearchDomain } from '@/utils/SearchUtil'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
+
+const searchDomain: SearchDomain | any = inject(PROVIDE_INJECT_KEY.SEARCH_DOMAIN)
+console.log(searchDomain)
+const pagination = {
+  showTotal: (v: any) =>
+    globalProperties.$t('searchDomain.total') +
+    ': ' +
+    v +
+    ' ' +
+    globalProperties.$t('searchDomain.unit')
+}
+</script>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/layout/breadcrumb/layout_bread.vue b/ui-vue3/src/layout/breadcrumb/layout_bread.vue
index d9dc64712..691b5c001 100644
--- a/ui-vue3/src/layout/breadcrumb/layout_bread.vue
+++ b/ui-vue3/src/layout/breadcrumb/layout_bread.vue
@@ -18,7 +18,7 @@
   <div class="__container_layout_bread">
     <a-breadcrumb>
       <a-breadcrumb-item v-for="r in routes">{{ $t(r.name) }}</a-breadcrumb-item>
-      <a-breadcrumb-item>{{ pathId }}</a-breadcrumb-item>
+      <a-breadcrumb-item v-if="pathId">{{ pathId }}</a-breadcrumb-item>
     </a-breadcrumb>
   </div>
 </template>
diff --git a/ui-vue3/src/layout/index.vue b/ui-vue3/src/layout/index.vue
index 523e0bf78..33593e034 100644
--- a/ui-vue3/src/layout/index.vue
+++ b/ui-vue3/src/layout/index.vue
@@ -16,7 +16,7 @@
 -->
 <template>
   <div class="__container_layout_index">
-    <a-layout style="min-height: 100vh">
+    <a-layout style="height: 100vh">
       <a-layout-sider
         width="268"
         v-model:collapsed="collapsed"
@@ -33,9 +33,7 @@
       <a-layout>
         <layout_header :collapsed="collapsed"></layout_header>
         <layout_bread></layout_bread>
-        <a-layout-content
-          :style="{ margin: '16px', padding: '16px', background: '#fff', minHeight: '280px' }"
-        >
+        <a-layout-content class="layout-content">
           <router-view v-slot="{ Component }">
             <transition name="slide-fade">
               <component :is="Component" />
@@ -93,6 +91,13 @@ router.beforeEach((to, from, next) => {
       margin-right: 5px;
     }
   }
+  .layout-content {
+    margin: 16px;
+    padding: 16px;
+    background: #fff;
+    overflow: auto;
+    max-height: 80vh;
+  }
 }
 </style>
 <style>
diff --git a/ui-vue3/src/main.ts b/ui-vue3/src/main.ts
index 736014e97..7e2e5f887 100644
--- a/ui-vue3/src/main.ts
+++ b/ui-vue3/src/main.ts
@@ -21,9 +21,9 @@ import router from './router'
 import App from './App.vue'
 import 'ant-design-vue/dist/reset.css'
 import { i18n } from '@/base/i18n'
-import './api/mock/mockServer'
-import './api/mock/mockCluster'
-import './api/mock/mockVersion'
+import './api/mock/index'
+// import './api/mock/mockCluster'
+// import './api/mock/mockVersion'
 
 import Vue3ColorPicker from 'vue3-colorpicker'
 import 'vue3-colorpicker/style.css'
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index a36f9e526..2f105a8f3 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -71,10 +71,11 @@ export const routes: Readonly<RouteRecordType[]> = [
               },
               {
                 path: '/detail/:pathId',
-                name: 'application-tab1',
+                name: 'applicationDomain.detail',
                 component: () => import('../views/resources/applications/tabs/tab1.vue'),
                 meta: {
-                  tab: true
+                  tab: true,
+                  icon: 'material-symbols:view-in-ar'
                 }
               },
               {
@@ -120,14 +121,14 @@ export const routes: Readonly<RouteRecordType[]> = [
             children: [
               {
                 path: '/index',
-                name: 'applications_index',
-                component: () => import('../views/resources/applications/index.vue'),
+                name: 'tab_demo_index',
+                component: () => import('../views/common/tab_demo/index.vue'),
                 meta: {
                   // hidden: true,
                 }
               },
               {
-                path: '/tab1',
+                path: '/tab1/:pathId',
                 name: 'tab1',
                 component: () => import('../views/common/tab_demo/tab1.vue'),
                 meta: {
@@ -136,7 +137,7 @@ export const routes: Readonly<RouteRecordType[]> = [
                 }
               },
               {
-                path: '/tab2',
+                path: '/tab2/:pathId',
                 name: 'tab2',
                 component: () => import('../views/common/tab_demo/tab2.vue'),
                 meta: {
diff --git a/ui-vue3/src/utils/SearchUtil.ts b/ui-vue3/src/utils/SearchUtil.ts
new file mode 100644
index 000000000..b9dbe7255
--- /dev/null
+++ b/ui-vue3/src/utils/SearchUtil.ts
@@ -0,0 +1,54 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { TableColumnsType } from 'ant-design-vue'
+
+export class SearchDomain {
+  params: any
+  searchApi: Function
+  result: any
+  table: {
+    columns: TableColumnsType
+  } = { columns: [] }
+  paged = {
+    curPage: 1,
+    total: 0,
+    pageSize: 10
+  }
+
+  constructor(query: any, searchApi: any, columns: TableColumnsType) {
+    this.params = query
+    this.table.columns = columns
+    this.searchApi = searchApi
+    this.onSearch()
+  }
+
+  async onSearch() {
+    let res = (await this.searchApi({})).data
+    this.result = res.data
+    this.paged.total = res.total
+    this.paged.curPage = res.curPage
+    this.paged.pageSize = res.pageSize
+  }
+}
+
+export function sortString(a: any, b: any) {
+  if (!isNaN(a - b)) {
+    return a - b
+  }
+  return a.localeCompare(b)
+}
diff --git a/ui-vue3/src/views/common/tab_demo/index.vue b/ui-vue3/src/views/common/tab_demo/index.vue
index 05afadf5c..0b4f4334a 100644
--- a/ui-vue3/src/views/common/tab_demo/index.vue
+++ b/ui-vue3/src/views/common/tab_demo/index.vue
@@ -18,13 +18,13 @@
   <div class="__container_tab_index">
     tab page
     <br />
-    <a href="/admin/common/tab/tab1">to tab1 by href</a>
+    <a href="/admin/common/tab/tab1/pathId1">to tab1 by href</a>
     <br />
-    <a href="tab2">to tab2 by href</a>
+    <a href="tab2/pathId1">to tab2 by href</a>
     <br />
-    <a-button @click="router.push('/common/tab/tab1')">to tab1 by href</a-button>
+    <a-button @click="router.push('/common/tab/tab1/pathId1')">to tab1 by href</a-button>
     <br />
-    <a-button @click="router.push('tab2')">to tab2 by href</a-button>
+    <a-button @click="router.push('tab2/pathId1')">to tab2 by href</a-button>
   </div>
 </template>
 
diff --git a/ui-vue3/src/views/resources/applications/index.vue b/ui-vue3/src/views/resources/applications/index.vue
index a9cda57ae..4747914e5 100644
--- a/ui-vue3/src/views/resources/applications/index.vue
+++ b/ui-vue3/src/views/resources/applications/index.vue
@@ -16,15 +16,89 @@
 -->
 <template>
   <div class="__container_resources_application_index">
-    应用
-    <br />
-    <a-button @click="router.push('detail/app123')"> to tab</a-button>
+    <search-table :search-domain="searchDomain">
+      <template #bodyCell="{ text, record, index, column }">
+        <template v-if="column.dataIndex === 'registerClusters'">
+          <a-tag v-for="t in text" color="warning">
+            {{ t }}
+          </a-tag>
+        </template>
+        <template v-else-if="column.dataIndex === 'deployCluster'">
+          <a-tag color="success">
+            {{ text }}
+          </a-tag>
+        </template>
+        <template v-else-if="column.dataIndex === 'appName'">
+          <router-link :to="`detail/${record[column.key]}`">{{ text }}</router-link>
+        </template>
+      </template>
+    </search-table>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
+import { inject, onMounted, provide, reactive } from 'vue'
+import { searchApplications } from '@/api/service/app'
+import SearchTable from '@/components/SearchTable.vue'
+import { SearchDomain, sortString } from '@/utils/SearchUtil'
+import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
 
-const router = useRouter()
+let columns = [
+  {
+    title: 'idx',
+    key: 'idx',
+    dataIndex: 'idx',
+    width: 80
+  },
+  {
+    title: 'appName',
+    key: 'appName',
+    dataIndex: 'appName',
+    sorter: (a: any, b: any) => sortString(a.appName, b.appName),
+    width: 140
+  },
+  {
+    title: 'instanceNum',
+    key: 'instanceNum',
+    dataIndex: 'instanceNum',
+    width: 100,
+    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+  },
+
+  {
+    title: 'deployCluster',
+    key: 'deployCluster',
+    dataIndex: 'deployCluster',
+    width: 120
+  },
+  {
+    title: 'registerClusters',
+    key: 'registerClusters',
+    dataIndex: 'registerClusters',
+    width: 200
+  }
+]
+const searchDomain = reactive(
+  new SearchDomain(
+    {
+      appName: ''
+    },
+    searchApplications,
+    columns
+  )
+)
+
+onMounted(() => {
+  searchDomain.onSearch()
+  console.log(searchDomain.result)
+})
+
+provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.search-table-container {
+  min-height: 60vh;
+  //max-height: 70vh; //overflow: auto;
+}
+</style>
diff --git a/ui-vue3/yarn.lock b/ui-vue3/yarn.lock
index 9cc6265b8..fbecaf69a 100644
--- a/ui-vue3/yarn.lock
+++ b/ui-vue3/yarn.lock
@@ -4480,6 +4480,11 @@ pinia@^2.1.7:
     "@vue/devtools-api" "^6.5.0"
     vue-demi ">=0.14.5"
 
+pinyin-pro@^3.19.3:
+  version "3.19.3"
+  resolved "https://registry.npmmirror.com/pinyin-pro/-/pinyin-pro-3.19.3.tgz#804ee7bf2266a927194a87764b4c3a2be06ddedc"
+  integrity sha512-tIBL4ibq3P+MFbSwOTTi42Xf6jau726swgKqEmSkkiZiE1iUMhQdguR9aavLt9nqnRDpcBSIanNV8tPuKPSmvw==
+
 pkg-types@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.0.3.tgz#988b42ab19254c01614d13f4f65a2cfc7880f868"