diff --git a/ui-vue3/src/api/mock/mockService.ts b/ui-vue3/src/api/mock/mockService.ts
new file mode 100644
index 000000000..f5e975eb6
--- /dev/null
+++ b/ui-vue3/src/api/mock/mockService.ts
@@ -0,0 +1,86 @@
+/*
+ * 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/service/search', 'get', {
+  code: 200,
+  message: 'success',
+  data: {
+    total: 8,
+    curPage: 1,
+    pageSize: 1,
+    data: [
+      {
+        serviceName: 'org.apache.dubbo.samples.UserService',
+        interfaceNum: 4,
+        avgQPS: 6,
+        avgRT: '194ms',
+        requestTotal: 200
+      },
+      {
+        serviceName: 'org.apache.dubbo.samples.OrderService',
+        interfaceNum: 12,
+        avgQPS: 13,
+        avgRT: '189ms',
+        requestTotal: 164
+      },
+      {
+        serviceName: 'org.apache.dubbo.samples.DetailService',
+        interfaceNum: 14,
+        avgQPS: 0.5,
+        avgRT: '268ms',
+        requestTotal: 1324
+      },
+      {
+        serviceName: 'org.apache.dubbo.samples.PayService',
+        interfaceNum: 8,
+        avgQPS: 9,
+        avgRT: '346ms',
+        requestTotal: 189
+      },
+      {
+        serviceName: 'org.apache.dubbo.samples.CommentService',
+        interfaceNum: 9,
+        avgQPS: 8,
+        avgRT: '936ms',
+        requestTotal: 200
+      },
+      {
+        serviceName: 'org.apache.dubbo.samples.RepayService',
+        interfaceNum: 16,
+        avgQPS: 17,
+        avgRT: '240ms',
+        requestTotal: 146
+      },
+      {
+        serviceName: 'org.apche.dubbo.samples.TransportService',
+        interfaceNum: 5,
+        avgQPS: 43,
+        avgRT: '89ms',
+        requestTotal: 367
+      },
+      {
+        serviceName: 'org.apche.dubbo.samples.DistributionService',
+        interfaceNum: 5,
+        avgQPS: 4,
+        avgRT: '78ms',
+        requestTotal: 145
+      }
+    ]
+  }
+})
diff --git a/ui-vue3/src/api/service/service.ts b/ui-vue3/src/api/service/service.ts
new file mode 100644
index 000000000..225f86ec2
--- /dev/null
+++ b/ui-vue3/src/api/service/service.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 searchService = (params: any): Promise<any> => {
+  return request({
+    url: '/service/search',
+    method: 'get',
+    params
+  })
+}
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index 5cd220d50..d1c1a9e01 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -274,7 +274,17 @@ const words: I18nType = {
   },
   backHome: 'Back Home',
   noPageTip: 'Sorry, the page you visited does not exist.',
-  globalSearchTip: 'Search ip, application, instance, service'
+  globalSearchTip: 'Search ip, application, instance, service',
+
+  details: 'Details',
+  debug: 'Debug',
+  distribution: 'Distribution',
+  monitor: 'Monitor',
+  tracing: 'Tracing',
+  event: 'Event',
+
+  provideService: 'Provide Service',
+  dependentService: 'Dependent Service'
 }
 
 export default words
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index 37ae274a5..f154284f8 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -272,8 +272,17 @@ const words: I18nType = {
   },
   backHome: '回到首页',
   noPageTip: '抱歉，你访问的页面不存在',
+  globalSearchTip: '搜索ip，应用，实例，服务',
 
-  globalSearchTip: '搜索ip，应用，实例，服务'
+  details: '详情',
+  debug: '调试',
+  distribution: '分布',
+  monitor: '监控',
+  tracing: '链路追踪',
+  event: '事件',
+
+  provideService: '提供服务',
+  dependentService: '依赖服务'
 }
 
 export default words
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index a23635391..1cb640a57 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -97,8 +97,69 @@ export const routes: Readonly<RouteRecordType[]> = [
           {
             path: '/services',
             name: 'services',
+            redirect: 'search',
             component: () => import('../views/resources/services/index.vue'),
-            meta: {}
+            meta: {
+              tab_parent: true
+            },
+            children: [
+              {
+                path: '/search',
+                name: 'search',
+                component: () => import('../views/resources/services/search.vue'),
+                meta: {
+                  hidden: true
+                }
+              },
+              {
+                path: '/detail/:serviceName',
+                name: 'detail',
+                component: () => import('../views/resources/services/tabs/detail.vue'),
+                meta: {
+                  tab: true
+                }
+              },
+              {
+                path: '/debug/:serviceName',
+                name: 'debug',
+                component: () => import('../views/resources/services/tabs/debug.vue'),
+                meta: {
+                  tab: true
+                }
+              },
+              {
+                path: '/distribution/:serviceName',
+                name: 'distribution',
+                component: () => import('../views/resources/services/tabs/distribution.vue'),
+                meta: {
+                  tab: true
+                }
+              },
+              {
+                path: '/monitor/:serviceName',
+                name: 'monitor',
+                component: () => import('../views/resources/services/tabs/monitor.vue'),
+                meta: {
+                  tab: true
+                }
+              },
+              {
+                path: '/tracing/:serviceName',
+                name: 'tracing',
+                component: () => import('../views/resources/services/tabs/tracing.vue'),
+                meta: {
+                  tab: true
+                }
+              },
+              {
+                path: '/event/:serviceName',
+                name: 'event',
+                component: () => import('../views/resources/services/tabs/event.vue'),
+                meta: {
+                  tab: true
+                }
+              }
+            ]
           }
         ]
       },
diff --git a/ui-vue3/src/views/resources/services/index.vue b/ui-vue3/src/views/resources/services/index.vue
index d7a299942..2764e2a15 100644
--- a/ui-vue3/src/views/resources/services/index.vue
+++ b/ui-vue3/src/views/resources/services/index.vue
@@ -15,8 +15,33 @@
   ~ limitations under the License.
 -->
 <template>
-  <div class="__container_resources_services_index">服务</div>
+  <div class="__container_services">
+    <Icon
+      icon="material-symbols:arrow-back-ios-new-rounded"
+      v-if="route.name !== 'search'"
+      @click="backSearch"
+      class="icon-back"
+    />
+    <LayoutTab></LayoutTab>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<script setup lang="ts">
+import LayoutTab from '@/layout/tab/layout_tab.vue'
+import { Icon } from '@iconify/vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+const backSearch = () => {
+  router.push({ name: 'search' })
+}
+</script>
+<style lang="less" scoped>
+.__container_services {
+  .icon-back:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
new file mode 100644
index 000000000..9d36ebfa1
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/search.vue
@@ -0,0 +1,127 @@
+<!--
+  ~ 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_services_index">
+    <a-flex vertical>
+      <a-flex class="service-filter">
+        <a-input-search
+          v-model:value="serviceName"
+          placeholder="请输入"
+          class="service-name-input"
+          @search="debounceSearch"
+          enter-button
+        />
+      </a-flex>
+      <a-table
+        :columns="columns"
+        :data-source="dataSource"
+        :pagination="pagination"
+        :scroll="{ y: '55vh' }"
+      >
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.dataIndex === 'serviceName'">
+            <a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
+          </template>
+        </template>
+      </a-table>
+    </a-flex>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { ComponentInternalInstance } from 'vue'
+import { ref, getCurrentInstance } from 'vue'
+import { searchService } from '@/api/service/service.ts'
+import { debounce } from 'lodash'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
+
+const serviceName = ref('')
+
+const router = useRouter()
+const columns = [
+  {
+    title: '服务',
+    dataIndex: 'serviceName',
+    sorter: true,
+    width: '30%'
+  },
+  {
+    title: '接口数',
+    dataIndex: 'interfaceNum',
+    sorter: true,
+    width: '10%'
+  },
+  {
+    title: '近 1min QPS',
+    dataIndex: 'avgQPS',
+    sorter: true,
+    width: '15%'
+  },
+  {
+    title: '近 1min RT',
+    dataIndex: 'avgRT',
+    sorter: true,
+    width: '15%'
+  },
+  {
+    title: '近 1min 请求总量',
+    dataIndex: 'requestTotal',
+    sorter: true,
+    width: '15%'
+  }
+]
+
+const dataSource = ref([])
+
+const onSearch = async () => {
+  let { data } = await searchService({})
+  dataSource.value = data.data
+}
+
+onSearch()
+
+const debounceSearch = debounce(onSearch, 300)
+
+const viewDetail = (serviceName: string) => {
+  router.push({ name: 'detail', params: { serviceName } })
+}
+
+const pagination = {
+  showTotal: (v: any) =>
+    globalProperties.$t('searchDomain.total') +
+    ': ' +
+    v +
+    ' ' +
+    globalProperties.$t('searchDomain.unit')
+}
+</script>
+<style lang="less" scoped>
+.__container_services_index {
+  .service-filter {
+    margin-bottom: 20px;
+    .service-name-input {
+      width: 500px;
+    }
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/resources/services/tabs/debug.vue b/ui-vue3/src/views/resources/services/tabs/debug.vue
new file mode 100644
index 000000000..553507491
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/tabs/debug.vue
@@ -0,0 +1,169 @@
+<!--
+  ~ 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_services_tabs_debug">
+    <div class="tabs-title">方法列表</div>
+    <a-tabs v-model:activeKey="activeKey" tab-position="left" :tabBarStyle="{ width: '200px' }">
+      <a-tab-pane v-for="tabName in methodTabs" :key="tabName" :tab="`${tabName}`">
+        <a-descriptions :column="4" layout="vertical">
+          <a-descriptions-item label="接口" :span="2">
+            <p class="description-item-content">
+              org.apache.dubbo.samples.UserService:getPermissions
+            </p>
+          </a-descriptions-item>
+          <a-descriptions-item label="版本&分组">
+            <a-select
+              v-model:value="versionAndGroup"
+              size="large"
+              :options="versionAndGroupOptions"
+              class="description-item-content"
+            ></a-select>
+          </a-descriptions-item>
+          <a-descriptions-item label="指定生产者">
+            <a-select
+              v-model:value="versionAndGroup"
+              size="large"
+              :options="versionAndGroupOptions"
+              class="description-item-content"
+            ></a-select>
+          </a-descriptions-item>
+          <a-descriptions-item label="入参类型" :span="2">
+            <a-tree block-node :tree-data="enterParamType" class="description-item-content" />
+          </a-descriptions-item>
+          <a-descriptions-item label="出参类型" :span="2">
+            <a-tree block-node :tree-data="outputParamType" class="description-item-content" />
+          </a-descriptions-item>
+          <a-descriptions-item label="请求" :span="2">
+            <a-textarea
+              v-model="requestValue"
+              placeholder="请输入"
+              :rows="4"
+              class="description-item-content"
+            />
+          </a-descriptions-item>
+          <a-descriptions-item label="响应" :span="2">
+            <a-textarea
+              v-model="responseValue"
+              placeholder="请输入"
+              :rows="4"
+              class="description-item-content"
+            />
+          </a-descriptions-item>
+        </a-descriptions>
+        <a-button type="primary">发送请求</a-button>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+const methodTabs = reactive([
+  'login',
+  'register',
+  'logout',
+  'query',
+  'suspend',
+  'updateInfo',
+  'getPermissions',
+  'auth',
+  'comment'
+])
+
+const activeKey = ref(methodTabs[0])
+
+const versionAndGroupOptions = reactive([
+  {
+    value: 'version=1.0.0'
+  },
+  {
+    value: 'group=group1'
+  },
+  {
+    value: 'version=1.0.0,group=group1'
+  }
+])
+
+const versionAndGroup = ref(versionAndGroupOptions[0].value)
+
+const enterParamType = [
+  {
+    title: 'param0: java.lang.String',
+    key: '0'
+  },
+  {
+    title: 'param1: org.apache.dubbo.samples.api.User',
+    key: '1',
+    children: [
+      {
+        title: 'name: java.lang.String',
+        key: '1-0'
+      },
+      {
+        title: 'id: java.lang.Long',
+        key: '1-1'
+      },
+      {
+        title: 'createTime: java.Date.DateTime',
+        key: '1-2'
+      }
+    ]
+  }
+]
+
+const outputParamType = [
+  {
+    title: 'param0: org.apache.dubbo.samples.api.Response',
+    key: '0',
+    children: [
+      {
+        title: 'success: boolean',
+        key: '0-0'
+      },
+      {
+        title: 'phone: java.lang.String',
+        key: '0-1'
+      },
+      {
+        title: 'lastLoginTime: java.Date.LocalDateTime',
+        key: '0-2'
+      },
+      {
+        title: 'follows: java.util.List',
+        key: '0-3'
+      }
+    ]
+  }
+]
+
+const requestValue = ref('')
+const responseValue = ref('')
+</script>
+<style lang="less" scoped>
+.__container_services_tabs_debug {
+  width: 100%;
+  .tabs-title {
+    width: 200px;
+    text-align: center;
+  }
+  .description-item-content {
+    margin-left: 20px;
+    width: 90%;
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/resources/services/tabs/detail.vue b/ui-vue3/src/views/resources/services/tabs/detail.vue
new file mode 100644
index 000000000..1a260631e
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/tabs/detail.vue
@@ -0,0 +1,69 @@
+<!--
+  ~ 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_services_tabs_detail">
+    <a-flex>
+      <a-descriptions class="description-column" :column="1" layout="vertical">
+        <a-descriptions-item label="服务名">
+          <p class="description-item-content">org.apache.dubbo.samples.UserService</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="服务版本&分组">
+          <div class="description-item-content">
+            <a-tag color="cyan">version=v1</a-tag>
+            <a-tag color="cyan">version=2.0,group=group1</a-tag>
+          </div>
+        </a-descriptions-item>
+        <a-descriptions-item label="RPC协议">
+          <p class="description-item-content">triple</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="延迟注册时间">
+          <p class="description-item-content">3000ms</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="超时时间">
+          <p class="description-item-content">3000ms</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="重试次数">
+          <p class="description-item-content">3</p>
+        </a-descriptions-item>
+      </a-descriptions>
+      <a-descriptions class="description-column" :column="1" layout="vertical">
+        <a-descriptions-item label="请求总量(1min)">
+          <p class="description-item-content">1384</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="平均RT(1min)">
+          <p class="description-item-content">96ms</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="平均qps(1min)">
+          <p class="description-item-content">12</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="是否过时">
+          <p class="description-item-content">false</p>
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-flex>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped>
+.__container_services_tabs_detail {
+  .description-item-content {
+    margin-left: 20px;
+    width: 90%;
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/resources/services/tabs/distribution.vue b/ui-vue3/src/views/resources/services/tabs/distribution.vue
new file mode 100644
index 000000000..9a402e689
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/tabs/distribution.vue
@@ -0,0 +1,211 @@
+<!--
+  ~ 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_services_tabs_distribution">
+    <a-flex vertical>
+      <a-flex class="service-filter">
+        <a-flex>
+          <div>
+            <span>版本&分组:</span>
+            <a-select
+              v-model:value="versionAndGroup"
+              :options="versionAndGroupOptions"
+              class="service-filter-select"
+            ></a-select>
+          </div>
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="搜索应用，ip，支持前缀搜索"
+            class="service-filter-input"
+            @search="() => {}"
+            enter-button
+          />
+        </a-flex>
+        <div>
+          <a-radio-group v-model:value="type" button-style="solid">
+            <a-radio-button value="producer">生产者</a-radio-button>
+            <a-radio-button value="consumer">消费者</a-radio-button>
+          </a-radio-group>
+        </div>
+      </a-flex>
+      <a-table
+        :columns="tableColumns"
+        :data-source="tableData"
+        :scroll="{ y: '45vh' }"
+        :pagination="pagination"
+      >
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.dataIndex === 'applicationName'">
+            <a-button type="link">{{ text }}</a-button>
+          </template>
+          <template v-if="column.dataIndex === 'instanceIP'">
+            <a-flex justify="">
+              <a-button v-for="ip in text.slice(0, 3)" :key="ip" type="link">{{ ip }}</a-button>
+              <a-button v-if="text.length > 3" type="link">更多</a-button>
+            </a-flex>
+          </template>
+        </template>
+      </a-table>
+    </a-flex>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ComponentInternalInstance } from 'vue'
+import { ref, reactive, getCurrentInstance } from 'vue'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
+
+const searchValue = ref('')
+const versionAndGroupOptions = reactive([
+  {
+    label: '不指定',
+    value: ''
+  },
+  {
+    label: 'version=1.0.0',
+    value: 'version=1.0.0'
+  },
+  {
+    label: 'group=group1',
+    value: 'group=group1'
+  },
+  {
+    label: 'version=1.0.0,group=group1',
+    value: 'version=1.0.0,group=group1'
+  }
+])
+const versionAndGroup = ref(versionAndGroupOptions[0].value)
+const type = ref('producer')
+
+const tableColumns = [
+  {
+    title: '应用名',
+    dataIndex: 'applicationName',
+    width: '25%',
+    sorter: true
+  },
+  {
+    title: '实例数',
+    dataIndex: 'instanceNum',
+    width: '25%',
+    sorter: true
+  },
+  {
+    title: '实例ip',
+    dataIndex: 'instanceIP',
+    width: '50%'
+  }
+]
+
+const tableData = reactive([
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: [
+      '192.168.32.28:8697',
+      '192.168.32.26:20880',
+      '192.168.32.24:28080',
+      '192.168.32.22:20880'
+    ]
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: [
+      '192.168.32.28:8697',
+      '192.168.32.26:20880',
+      '192.168.32.24:28080',
+      '192.168.32.22:20880'
+    ]
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  }
+])
+
+const pagination = {
+  showTotal: (v: any) =>
+    globalProperties.$t('searchDomain.total') +
+    ': ' +
+    v +
+    ' ' +
+    globalProperties.$t('searchDomain.unit')
+}
+</script>
+<style lang="less" scoped>
+.__container_services_tabs_distribution {
+  .service-filter {
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .service-filter-select {
+      margin-left: 10px;
+      width: 250px;
+    }
+    .service-filter-input {
+      margin-left: 30px;
+      width: 300px;
+    }
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/service/index.vue b/ui-vue3/src/views/resources/services/tabs/event.vue
similarity index 79%
rename from ui-vue3/src/views/service/index.vue
rename to ui-vue3/src/views/resources/services/tabs/event.vue
index c97d82189..d9a86c051 100644
--- a/ui-vue3/src/views/service/index.vue
+++ b/ui-vue3/src/views/resources/services/tabs/event.vue
@@ -15,15 +15,8 @@
   ~ limitations under the License.
 -->
 <template>
-  <div class="__container_home_index">
-    <h1>{{ $t(routeName) }}</h1>
-  </div>
+  <div class="__container_services_tabs_event">事件todo</div>
 </template>
 
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-
-import { useRoute } from 'vue-router'
-const routeName = <string>useRoute().name
-</script>
+<script setup lang="ts"></script>
 <style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/services/tabs/monitor.vue b/ui-vue3/src/views/resources/services/tabs/monitor.vue
new file mode 100644
index 000000000..baa40c4ab
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/tabs/monitor.vue
@@ -0,0 +1,22 @@
+<!--
+  ~ 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_services_tabs_monitor">监控todo</div>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/services/tabs/tracing.vue b/ui-vue3/src/views/resources/services/tabs/tracing.vue
new file mode 100644
index 000000000..ca3bc5119
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/tabs/tracing.vue
@@ -0,0 +1,22 @@
+<!--
+  ~ 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_services_tabs_tracing">链路todo</div>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped></style>