diff --git a/bigtop-manager-ui/src/api/cluster/index.ts b/bigtop-manager-ui/src/api/cluster/index.ts
index ed38562f4..ac5206c83 100644
--- a/bigtop-manager-ui/src/api/cluster/index.ts
+++ b/bigtop-manager-ui/src/api/cluster/index.ts
@@ -18,9 +18,10 @@
  */
 
 import request from '@/api/request.ts'
-import type { ClusterVO, UpdateClusterParam } from './types'
+import type { PageVO, ListParams } from '@/api/types'
+import type { ClusterVO, ServiceUserVO, UpdateClusterParam } from './types'
 
-export const getCluster = (id: number): Promise<ClusterVO[]> => {
+export const getCluster = (id: number): Promise<ClusterVO> => {
   return request({
     method: 'get',
     url: `/clusters/${id}`
@@ -41,3 +42,11 @@ export const getClusterList = (): Promise<ClusterVO[]> => {
     url: '/clusters'
   })
 }
+
+export const getUserListOfService = (id: number, params: ListParams): Promise<PageVO<ServiceUserVO[]>> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${id}/services/users`,
+    params
+  })
+}
diff --git a/bigtop-manager-ui/src/api/cluster/types.ts b/bigtop-manager-ui/src/api/cluster/types.ts
index b9f8beb53..4ddb4769a 100644
--- a/bigtop-manager-ui/src/api/cluster/types.ts
+++ b/bigtop-manager-ui/src/api/cluster/types.ts
@@ -19,6 +19,8 @@
 
 export type UpdateClusterParam = { name: string; desc: string }
 
+export type ClusterStatusType = 1 | 2 | 3
+
 export interface ClusterVO {
   createUser?: string
   desc?: string
@@ -26,7 +28,7 @@ export interface ClusterVO {
   id?: number
   name?: string
   rootDir?: string
-  status?: number
+  status?: ClusterStatusType
   totalDisk?: number
   totalHost?: number
   totalMemory?: number
@@ -35,3 +37,11 @@ export interface ClusterVO {
   type?: number
   userGroup?: string
 }
+
+export interface ServiceUserVO {
+  desc?: string
+  displayName?: string
+  user?: string
+  userGroup?: string
+  [property: string]: any
+}
diff --git a/bigtop-manager-ui/src/api/command/types.ts b/bigtop-manager-ui/src/api/command/types.ts
index 30f599906..ca24cdbe2 100644
--- a/bigtop-manager-ui/src/api/command/types.ts
+++ b/bigtop-manager-ui/src/api/command/types.ts
@@ -20,8 +20,8 @@
 export interface CommandRequest {
   clusterCommand?: ClusterCommandReq
   clusterId?: number
-  command: Command
-  commandLevel: CommandLevel
+  command: keyof typeof Command
+  commandLevel: keyof typeof CommandLevel
   componentCommands?: ComponentCommandReq[]
   customCommand?: string
   hostCommands?: HostCommandReq[]
@@ -70,10 +70,10 @@ export enum Command {
 }
 
 export enum CommandLevel {
-  Cluster = 'cluster',
-  Component = 'component',
-  Host = 'host',
-  Service = 'service'
+  cluster = 'cluster',
+  component = 'component',
+  host = 'host',
+  service = 'service'
 }
 
 export interface ComponentCommandReq {
diff --git a/bigtop-manager-ui/src/api/hosts/index.ts b/bigtop-manager-ui/src/api/hosts/index.ts
index f970167ea..0f401364b 100644
--- a/bigtop-manager-ui/src/api/hosts/index.ts
+++ b/bigtop-manager-ui/src/api/hosts/index.ts
@@ -18,12 +18,13 @@
  */
 
 import request from '@/api/request.ts'
-import { HostParams, HostVO, HostVOList, InstalledStatusVO } from '@/api/hosts/types.ts'
+import type { HostListParams, HostParams, HostVO, HostVOList, InstalledStatusVO } from '@/api/hosts/types.ts'
 
-export const getHosts = (): Promise<HostVOList> => {
+export const getHosts = (params?: HostListParams): Promise<HostVOList> => {
   return request({
     method: 'get',
-    url: '/hosts'
+    url: '/hosts',
+    params
   })
 }
 
diff --git a/bigtop-manager-ui/src/api/hosts/types.ts b/bigtop-manager-ui/src/api/hosts/types.ts
index 519a3c29c..06e67b0ad 100644
--- a/bigtop-manager-ui/src/api/hosts/types.ts
+++ b/bigtop-manager-ui/src/api/hosts/types.ts
@@ -54,6 +54,17 @@ export interface HostVO {
   [property: string]: any
 }
 
+export interface HostListParams {
+  clusterId?: number
+  hostname?: string
+  ipv4?: string
+  orderBy?: string
+  pageNum?: number
+  pageSize?: number
+  sort?: string
+  status?: number
+}
+
 export interface HostParams {
   agentDir?: string
   authType?: number | string // '1-password，2-key，3-no_auth',
@@ -77,8 +88,15 @@ export interface InstalledStatusVO {
 }
 
 export enum Status {
-  Failed = 'FAILED',
   Installing = 'INSTALLING',
   Success = 'SUCCESS',
+  Failed = 'FAILED',
   Unknown = 'UNKNOW'
 }
+
+export enum BaseStatus {
+  'INSTALLING',
+  'SUCCESS',
+  'FAILED',
+  'UNKNOW'
+}
diff --git a/bigtop-manager-ui/src/api/job/index.ts b/bigtop-manager-ui/src/api/job/index.ts
index c7aaa0520..ebfc4f35b 100644
--- a/bigtop-manager-ui/src/api/job/index.ts
+++ b/bigtop-manager-ui/src/api/job/index.ts
@@ -16,47 +16,57 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import request from '@/api/request.ts'
-import type { JobParams, JobList, TaskLogParams, TaskParams, JobVO, StageVO, TaskVO } from './types'
+import type {
+  JobParams,
+  JobList,
+  TaskLogParams,
+  JobVO,
+  JobListParams,
+  TaskListParams,
+  StageListParams,
+  StageList,
+  TaskList,
+  LogsRes
+} from './types'
+import type { ListParams } from '../types'
+import { get, post } from '../request-util'
+import axios, { type AxiosProgressEvent, type CancelTokenSource } from 'axios'
+import request from '../request'
 
-export const retryJob = (pathParams: JobParams): Promise<JobVO> => {
-  return request({
-    method: 'post',
-    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/retry`
-  })
+export const retryJob = (pathParams: JobParams) => {
+  return post<JobVO>(`/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/retry`)
 }
 
-export const getJobList = (clusterId: number): Promise<JobList> => {
-  return request({
-    method: 'get',
-    url: `/clusters/${clusterId}/jobs`
-  })
+export const getJobDetails = (pathParams: JobParams) => {
+  return get<JobVO>(`/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}`)
 }
 
-export const getJobDetails = (pathParams: JobParams): Promise<JobVO> => {
-  return request({
-    method: 'get',
-    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}`
-  })
+export const getJobList = (pathParams: JobListParams, params: ListParams) => {
+  return get<JobList>(`/clusters/${pathParams.clusterId}/jobs`, params)
 }
 
-export const getStageList = (pathParams: JobParams): Promise<StageVO[]> => {
-  return request({
-    method: 'get',
-    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages`
-  })
+export const getStageList = (pathParams: StageListParams, params: ListParams) => {
+  return get<StageList>(`/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages`, params)
 }
 
-export const getTaskList = (pathParams: TaskParams): Promise<TaskVO[]> => {
-  return request({
-    method: 'get',
-    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages/${pathParams.stageId}/tasks`
-  })
+export const getTaskList = (pathParams: TaskListParams, params: ListParams) => {
+  return get<TaskList>(
+    `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages/${pathParams.stageId}/tasks`,
+    params
+  )
 }
 
-export const getTaskLog = (pathParams: TaskLogParams): Promise<string[]> => {
-  return request({
+export const getTaskLog = (pathParams: TaskLogParams, func: Function): LogsRes => {
+  const source: CancelTokenSource = axios.CancelToken.source()
+
+  const promise = request({
     method: 'get',
-    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages/${pathParams.stageId}/tasks/${pathParams.taskId}/log`
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages/${pathParams.stageId}/tasks/${pathParams.taskId}/log`,
+    responseType: 'stream',
+    timeout: 0,
+    cancelToken: source.token,
+    onDownloadProgress: (progressEvent: AxiosProgressEvent) => func(progressEvent)
   })
+
+  return { promise, cancel: source.cancel }
 }
diff --git a/bigtop-manager-ui/src/api/job/types.ts b/bigtop-manager-ui/src/api/job/types.ts
index 86e545554..cbfd27647 100644
--- a/bigtop-manager-ui/src/api/job/types.ts
+++ b/bigtop-manager-ui/src/api/job/types.ts
@@ -18,22 +18,21 @@
  */
 
 import type { PageVO } from '@/api/types'
+import { JobState } from '@/enums/state'
 
 export type JobList = PageVO<JobVO>
 export type StageList = PageVO<StageVO>
+export type TaskList = PageVO<TaskVO>
+
 export type JobParams = { clusterId: number; jobId: number }
 export type TaskParams = JobParams & { stageId: number }
 export type TaskLogParams = TaskParams & { taskId: number }
 
-export type StateType = keyof typeof State
+export type StateType = keyof typeof JobState
 
-export enum State {
-  'Pending' = 'pending',
-  'Processing' = 'processing',
-  'Successful' = 'successful',
-  'Failed' = 'failed',
-  'Canceled' = 'canceled'
-}
+export type JobListParams = { clusterId: number }
+export type StageListParams = JobParams
+export type TaskListParams = TaskParams
 
 export interface JobVO {
   createTime?: string
@@ -65,3 +64,8 @@ export interface TaskVO {
   updateTime?: string
   [property: string]: any
 }
+
+export interface LogsRes {
+  promise: Promise<any>
+  cancel: () => void
+}
diff --git a/bigtop-manager-ui/src/api/request-util.ts b/bigtop-manager-ui/src/api/request-util.ts
index 7a2da40e3..a2086b7b9 100644
--- a/bigtop-manager-ui/src/api/request-util.ts
+++ b/bigtop-manager-ui/src/api/request-util.ts
@@ -16,23 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import type { ResponseEntity } from './types'
 import request from './request'
 import { AxiosRequestConfig } from 'axios'
 
-const get = <T>(url: string, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
-  return request.get(url, config)
+const get = <T, U = any>(url: string, params?: U, config?: AxiosRequestConfig): Promise<T> => {
+  return request.get(url, { ...config, params })
 }
 
-const post = <T, U = any>(url: string, data?: U, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+const post = <T, U = any>(url: string, data?: U, config?: AxiosRequestConfig): Promise<T> => {
   return request.post(url, data, config)
 }
 
-const put = <T, U = any>(url: string, data: U, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+const put = <T, U = any>(url: string, data: U, config?: AxiosRequestConfig): Promise<T> => {
   return request.put(url, data, config)
 }
 
-const del = <T>(url: string, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+const del = <T>(url: string, config?: AxiosRequestConfig): Promise<T> => {
   return request.delete(url, config)
 }
 
diff --git a/bigtop-manager-ui/src/api/service/index.ts b/bigtop-manager-ui/src/api/service/index.ts
index 6642f0948..507061e7d 100644
--- a/bigtop-manager-ui/src/api/service/index.ts
+++ b/bigtop-manager-ui/src/api/service/index.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import type { ListParams } from '../types'
 import type {
   ServiceParams,
   ServiceVO,
@@ -24,66 +25,43 @@ import type {
   ServiceConfigSnapshot,
   ServiceList,
   SnapshotData,
-  SnapshotRecovery
+  SnapshotRecovery,
+  ServiceListParams
 } from './types'
-import request from '@/api/request.ts'
+import { get, post, del } from '@/api/request-util'
 
-export const getServiceList = (clusterId: number): Promise<ServiceList> => {
-  return request({
-    method: 'get',
-    url: `/clusters/${clusterId}/services`
-  })
+export const getServiceList = (clusterId: number, params?: ListParams & ServiceListParams) => {
+  return get<ServiceList>(`/clusters/${clusterId}/services`, params)
 }
 
-export const getService = (params: ServiceParams): Promise<ServiceVO> => {
-  return request({
-    method: 'get',
-    url: `/clusters/${params.clusterId}/services/${params.id}`
-  })
+export const getService = (pathParams: ServiceParams) => {
+  return get<ServiceVO>(`/clusters/${pathParams.clusterId}/services/${pathParams.id}`)
 }
 
-export const getServiceConfigs = (params: ServiceParams): Promise<ServiceConfig[]> => {
-  return request({
-    method: 'get',
-    url: `/clusters/${params.clusterId}/services/${params.id}/configs`
-  })
+export const getServiceConfigs = (pathParams: ServiceParams) => {
+  return get<ServiceConfig[]>(`/clusters/${pathParams.clusterId}/services/${pathParams.id}/configs`)
 }
 
-export const updateServiceConfigs = (params: ServiceParams, data: ServiceConfig): Promise<ServiceConfig[]> => {
-  return request({
-    method: 'post',
-    url: `/clusters/${params.clusterId}/services/${params.id}/configs`,
-    data
-  })
+export const updateServiceConfigs = (pathParams: ServiceParams, data: ServiceConfig) => {
+  return post<ServiceConfig[]>(`/clusters/${pathParams.clusterId}/services/${pathParams.id}/configs`, data)
 }
 
-export const getServiceConfigSnapshotsList = (params: ServiceParams): Promise<ServiceConfigSnapshot[]> => {
-  return request({
-    method: 'get',
-    url: `/clusters/${params.clusterId}/services/${params.id}/config-snapshots`
-  })
+export const getServiceConfigSnapshotsList = (pathParams: ServiceParams) => {
+  return get<ServiceConfigSnapshot[]>(`/clusters/${pathParams.clusterId}/services/${pathParams.id}/config-snapshots`)
 }
 
-export const takeServiceConfigSnapshot = (
-  params: ServiceParams,
-  data: SnapshotData
-): Promise<ServiceConfigSnapshot> => {
-  return request({
-    method: 'post',
-    url: `/clusters/${params.clusterId}/services/${params.id}/config-snapshots`,
+export const takeServiceConfigSnapshot = (pathParams: ServiceParams, data: SnapshotData) => {
+  return post<ServiceConfigSnapshot>(
+    `/clusters/${pathParams.clusterId}/services/${pathParams.id}/config-snapshots`,
     data
-  })
+  )
 }
 
-export const recoveryServiceConfigSnapshot = (params: SnapshotRecovery): Promise<ServiceConfig[]> => {
-  return request({
-    method: 'post',
-    url: `/clusters/${params.clusterId}/services/${params.id}/config-snapshots/${params.snapshotId}`
-  })
+export const recoveryServiceConfigSnapshot = (pathParams: SnapshotRecovery): Promise<ServiceConfig[]> => {
+  return post<ServiceConfig[]>(
+    `/clusters/${pathParams.clusterId}/services/${pathParams.id}/config-snapshots/${pathParams.snapshotId}`
+  )
 }
-export const deleteServiceConfigSnapshot = (params: SnapshotRecovery): Promise<boolean> => {
-  return request({
-    method: 'delete',
-    url: `/clusters/${params.clusterId}/services/${params.id}/config-snapshots/${params.snapshotId}`
-  })
+export const deleteServiceConfigSnapshot = (pathParams: SnapshotRecovery): Promise<boolean> => {
+  return del(`/clusters/${pathParams.clusterId}/services/${pathParams.id}/config-snapshots/${pathParams.snapshotId}`)
 }
diff --git a/bigtop-manager-ui/src/api/service/types.ts b/bigtop-manager-ui/src/api/service/types.ts
index 2afefea75..9ecd25a8e 100644
--- a/bigtop-manager-ui/src/api/service/types.ts
+++ b/bigtop-manager-ui/src/api/service/types.ts
@@ -24,6 +24,12 @@ export type ServiceList = PageVO<ServiceVO>
 export type ServiceParams = { clusterId: number; id: number }
 export type SnapshotData = { desc?: string; name?: string }
 export type SnapshotRecovery = ServiceParams & { snapshotId: string }
+export type ServiceStatusType = 1 | 2 | 3
+export type ServiceListParams = {
+  name?: string
+  restartFlag?: boolean
+  status?: ServiceStatusType
+}
 
 export interface ServiceVO {
   components?: ComponentVO[]
@@ -35,7 +41,7 @@ export interface ServiceVO {
   requiredServices?: string[]
   restartFlag?: boolean
   stack?: string
-  status?: number
+  status: ServiceStatusType
   user?: string
   version?: string
 }
diff --git a/bigtop-manager-ui/src/api/types.ts b/bigtop-manager-ui/src/api/types.ts
index 007cbb3ac..91d65f124 100644
--- a/bigtop-manager-ui/src/api/types.ts
+++ b/bigtop-manager-ui/src/api/types.ts
@@ -27,3 +27,10 @@ export interface PageVO<T = any> {
   total: number
   content: T[]
 }
+
+export interface ListParams {
+  orderBy?: string
+  pageNum?: number
+  pageSize?: number
+  sort?: string
+}
diff --git a/bigtop-manager-ui/src/api/user/types.ts b/bigtop-manager-ui/src/api/user/types.ts
index 9692e5cf4..5ce2bcdce 100644
--- a/bigtop-manager-ui/src/api/user/types.ts
+++ b/bigtop-manager-ui/src/api/user/types.ts
@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 export interface UserVO {
   id: number
   username: string
diff --git a/bigtop-manager-ui/src/assets/images/svg/bottom-activated.svg b/bigtop-manager-ui/src/assets/images/svg/bottom-activated.svg
new file mode 100644
index 000000000..46a1a50d8
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/bottom-activated.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9.33349609375"
+  height="5.33331298828125" viewBox="0 0 9.33349609375 5.33331298828125" fill="none">
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M8.66675 0.666656L4.66675 4.66666L0.666748 0.666656">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/copy.svg b/bigtop-manager-ui/src/assets/images/svg/copy.svg
new file mode 100644
index 000000000..bee762616
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/copy.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M4.33301 4.14395L4.33301 2.60425C4.33301 2.08648 4.75274 1.66675 5.27051 1.66675L13.3955 1.66675C13.9133 1.66675 14.333 2.08648 14.333 2.60425L14.333 10.7292C14.333 11.247 13.9133 11.6667 13.3955 11.6667L11.8384 11.6667">
+  </path>
+  <path
+    d="M10.7295 4.33325L2.60449 4.33325C2.08673 4.33325 1.66699 4.75299 1.66699 5.27075L1.66699 13.3958C1.66699 13.9135 2.08673 14.3333 2.60449 14.3333L10.7295 14.3333C11.2473 14.3333 11.667 13.9135 11.667 13.3958L11.667 5.27075C11.667 4.75299 11.2473 4.33325 10.7295 4.33325Z"
+    stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/download.svg b/bigtop-manager-ui/src/assets/images/svg/download.svg
new file mode 100644
index 000000000..eff45651b
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/download.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ 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.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M2 8.00277L2 14L14 14L14 8">
+  </path>
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M11 7.66675L8 10.6667L5 7.66675">
+  </path>
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M7.99707 2L7.99707 10.6667">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/components/common/button-group/index.vue b/bigtop-manager-ui/src/components/common/button-group/index.vue
index 75b3f5813..b2dd417fe 100644
--- a/bigtop-manager-ui/src/components/common/button-group/index.vue
+++ b/bigtop-manager-ui/src/components/common/button-group/index.vue
@@ -68,7 +68,7 @@
           </span>
         </a-button>
         <template #overlay>
-          <a-menu @click="item.dropdownMenuClickEvent">
+          <a-menu v-if="!item.disabled" @click="item.dropdownMenuClickEvent">
             <a-menu-item v-for="actionItem in item.dropdownMenu" :key="actionItem.action">
               {{ actionItem.text }}
             </a-menu-item>
diff --git a/bigtop-manager-ui/src/components/common/filter-form/index.vue b/bigtop-manager-ui/src/components/common/filter-form/index.vue
index 7562ea370..05c56bad6 100644
--- a/bigtop-manager-ui/src/components/common/filter-form/index.vue
+++ b/bigtop-manager-ui/src/components/common/filter-form/index.vue
@@ -18,8 +18,10 @@
 -->
 
 <script setup lang="ts">
+  import { MenuProps } from 'ant-design-vue'
+  import { ref, toRefs, computed, shallowRef, toRaw } from 'vue'
+  import { isEqual, cloneDeep } from 'lodash'
   import type { FilterFormItem } from './types'
-  import { ref, toRefs } from 'vue'
 
   interface FilterFormPops {
     filterItems: FilterFormItem[]
@@ -29,7 +31,17 @@
   const emits = defineEmits(['filter'])
   const { filterItems } = toRefs(props)
 
-  const formatFilterFormItems = ref(
+  const tempFilterParams = shallowRef({})
+  const filterParams = ref(
+    filterItems.value.reduce(
+      (pre, value) => {
+        return Object.assign(pre, { [`${value.key}`]: undefined })
+      },
+      {} as Record<string, any>
+    )
+  )
+
+  const formatFilterFormItems = computed(() =>
     filterItems.value.map((v) => {
       const formatData = {
         ...v,
@@ -43,57 +55,83 @@
     })
   )
 
-  const filterParams = ref(
-    filterItems.value.map((v) => ({
-      [`${v.key}`]: ''
-    }))
-  )
-
-  const checkSelected = ({ item, itemIdx }: any) => {
-    return filterParams.value[itemIdx][item.key] === ''
+  const openChange = (open: boolean) => {
+    if (open) {
+      tempFilterParams.value = cloneDeep(toRaw(filterParams.value))
+    } else {
+      !isEqual(tempFilterParams.value, filterParams.value) && confirmFilterParams()
+    }
   }
 
-  const resetFilter = ({ item, itemIdx }: any) => {
-    filterParams.value[itemIdx][item.key] = ''
-    confirmFilterParams()
+  const confirmFilterParams = () => {
+    emits('filter', filterParams.value)
   }
 
-  const onSelect = ({ item, key }: any, payload: any) => {
-    filterParams.value[payload.itemIdx][item.id] = key
-    confirmFilterParams()
+  const onSelect: MenuProps['onSelect'] = ({ item, key }) => {
+    filterParams.value[`${item.id}`] = key
   }
 
-  const confirmFilterParams = () => {
-    const filters = filterParams.value.reduce((pre, val) => {
-      Object.assign(pre, val)
-      return pre
-    }, {} as any)
-    emits('filter', filters)
+  const resetFilter = (item: any) => {
+    filterParams.value[item.key] = undefined
   }
 </script>
 
 <template>
   <div class="filter-form">
-    <template v-for="(item, itemIdx) in formatFilterFormItems" :key="item">
-      <a-dropdown>
+    <template v-for="item in formatFilterFormItems" :key="item">
+      <a-dropdown :trigger="['click']" @open-change="openChange">
         <span @click.prevent>
           <div class="filter-form-label">
-            <span :style="{ color: !checkSelected({ item, itemIdx }) ? 'var(--color-primary)' : 'initial' }">
+            <span :style="{ color: filterParams[`${item.key}`] != undefined ? 'var(--color-primary)' : 'initial' }">
               {{ item.label }}
             </span>
-            <svg-icon name="bottom" style="padding: 6px 4px; margin-left: 8px" />
+            <svg-icon
+              :name="filterParams[`${item.key}`] === undefined ? 'bottom' : 'bottom-activated'"
+              style="padding: 6px 4px; margin-left: 8px"
+            />
           </div>
         </span>
         <template #overlay>
           <template v-if="item.type === 'status'">
-            <a-menu :selectable="true" :items="item.options" @select="onSelect($event, { item, itemIdx })"> </a-menu>
+            <div>
+              <a-menu :selected-keys="[filterParams[item.key]]" :selectable="true" @select="onSelect">
+                <a-menu-item
+                  v-for="menuItem in item.options"
+                  :id="item.key"
+                  :key="menuItem.key"
+                  :title="menuItem.label"
+                  @click.stop
+                >
+                  <a-radio :checked="filterParams[item.key] === menuItem.key">
+                    <span>{{ menuItem.label }}</span>
+                  </a-radio>
+                </a-menu-item>
+                <a-space class="status-option">
+                  <a-button
+                    :disabled="filterParams[`${item.key}`] === undefined"
+                    size="small"
+                    type="link"
+                    @click.stop="resetFilter(item)"
+                  >
+                    {{ $t('common.reset') }}
+                  </a-button>
+                  <a-button size="small" type="primary" @click="confirmFilterParams">
+                    {{ $t('common.ok') }}
+                  </a-button>
+                </a-space>
+              </a-menu>
+            </div>
           </template>
           <template v-else-if="item.type === 'search'">
             <div class="search" @click.stop>
-              <a-input v-model:value="filterParams[itemIdx][item.key]" :placeholder="`搜索${item.label}`" @click.stop />
-              <a-space @click.stop>
-                <a-button size="small" @click="resetFilter({ item, itemIdx })">重置</a-button>
-                <a-button size="small" type="primary" @click="confirmFilterParams">搜索</a-button>
+              <a-input
+                v-model:value="filterParams[item.key]"
+                :placeholder="`${$t('common.enter_error')}${item.label.toLowerCase()}`"
+                @click.stop
+              />
+              <a-space class="search-option">
+                <a-button size="small" @click.stop="resetFilter(item)">{{ $t('common.reset') }}</a-button>
+                <a-button size="small" type="primary" @click="confirmFilterParams">{{ $t('common.search') }}</a-button>
               </a-space>
             </div>
           </template>
@@ -113,6 +151,17 @@
     min-height: 32px;
   }
 
+  .status-option {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    border-top: 1px solid #f0f0f0;
+    padding: 8px 4px 4px 4px;
+    button {
+      width: 100%;
+    }
+  }
+
   .search {
     background-color: $color-bg-base;
     box-shadow: $box-shadow-drawer-up;
@@ -122,12 +171,21 @@
     flex-direction: column;
     gap: $space-sm;
     align-items: flex-end;
+    &-option {
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      button {
+        width: 100%;
+      }
+    }
   }
 
   .filter-form {
     width: 100%;
     display: flex;
     gap: $space-sm;
+    margin-bottom: $space-md;
     &-label {
       display: inline-block;
       cursor: pointer;
diff --git a/bigtop-manager-ui/src/components/common/header-card/index.vue b/bigtop-manager-ui/src/components/common/header-card/index.vue
index d11d81bb3..d6fd6274c 100644
--- a/bigtop-manager-ui/src/components/common/header-card/index.vue
+++ b/bigtop-manager-ui/src/components/common/header-card/index.vue
@@ -41,8 +41,8 @@
     showStatus: true,
     avatar: '',
     title: '',
-    desc: '暂无描述',
-    status: 'success',
+    desc: '',
+    status: '',
     actionGroups: () => {
       return []
     }
diff --git a/bigtop-manager-ui/src/components/common/main-card/index.vue b/bigtop-manager-ui/src/components/common/main-card/index.vue
index f5efb7a78..8fa3a275b 100644
--- a/bigtop-manager-ui/src/components/common/main-card/index.vue
+++ b/bigtop-manager-ui/src/components/common/main-card/index.vue
@@ -44,13 +44,12 @@
   <div class="main-card">
     <slot>
       <a-tabs :active-key="activeKey" :tab-bar-gutter="0" @change="handleChange">
-        <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.title">
-          <slot name="tab-item"></slot>
-        </a-tab-pane>
+        <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.title"> </a-tab-pane>
         <template #renderTabBar="{ DefaultTabBar, ...props }">
           <component :is="DefaultTabBar" v-bind="props" />
         </template>
       </a-tabs>
+      <slot name="tab-item"></slot>
     </slot>
   </div>
 </template>
diff --git a/bigtop-manager-ui/src/components/common/status-dot/index.vue b/bigtop-manager-ui/src/components/common/status-dot/index.vue
index 96c401a34..5fa4860c3 100644
--- a/bigtop-manager-ui/src/components/common/status-dot/index.vue
+++ b/bigtop-manager-ui/src/components/common/status-dot/index.vue
@@ -18,21 +18,15 @@
 -->
 
 <script setup lang="ts">
+  import { StatusType, StatusColors } from '@/enums/state'
   import { computed } from 'vue'
 
   interface StatusDot {
     size?: number
-    color?: keyof typeof Colors
+    color?: StatusType
     content?: string
   }
 
-  enum Colors {
-    success = 'var(--color-success)',
-    error = 'var(--color-error)',
-    warning = 'var(--color-warning)',
-    default = 'var(--color-primary)'
-  }
-
   const props = withDefaults(defineProps<StatusDot>(), {
     color: 'default',
     size: 8,
@@ -43,7 +37,7 @@
     width: props.size + 'px',
     height: props.size + 'px',
     fontSize: fontSize.value + 'px',
-    backgroundColor: Colors[props.color]
+    backgroundColor: StatusColors[props.color]
   }))
 </script>
 
diff --git a/bigtop-manager-ui/src/components/common/svg-icon/index.vue b/bigtop-manager-ui/src/components/common/svg-icon/index.vue
index c18cc3f33..db973d4ad 100644
--- a/bigtop-manager-ui/src/components/common/svg-icon/index.vue
+++ b/bigtop-manager-ui/src/components/common/svg-icon/index.vue
@@ -47,5 +47,6 @@
     margin: 0 6px;
     vertical-align: -0.25em;
     overflow: hidden;
+    flex-shrink: 0;
   }
 </style>
diff --git a/bigtop-manager-ui/src/components/job/custom-progress.vue b/bigtop-manager-ui/src/components/job/custom-progress.vue
new file mode 100644
index 000000000..897a8fc3c
--- /dev/null
+++ b/bigtop-manager-ui/src/components/job/custom-progress.vue
@@ -0,0 +1,93 @@
+<!--
+  ~ 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.
+-->
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { JobState } from '@/enums/state'
+  import {
+    MinusCircleFilled as Canceled,
+    CheckCircleFilled as Successful,
+    CloseCircleFilled as Failed
+  } from '@ant-design/icons-vue'
+
+  interface ProgressProps {
+    state: keyof typeof JobState
+    progressData: number
+  }
+
+  const props = withDefaults(defineProps<ProgressProps>(), {})
+
+  const progressConfig = computed(() => {
+    if (props.state === 'Pending') {
+      return {
+        progress: 0,
+        status: 'normal'
+      }
+    } else if (props.state === 'Successful') {
+      return {
+        progress: 100,
+        status: 'success',
+        icon: Successful
+      }
+    } else if (props.state === 'Processing') {
+      return {
+        progress: props.progressData,
+        status: 'active'
+      }
+    } else if (props.state === 'Canceled') {
+      return {
+        progress: 100,
+        status: 'normal',
+        icon: Canceled
+      }
+    } else if (props.state === 'Failed') {
+      return {
+        progress: 100,
+        status: 'exception',
+        icon: Failed
+      }
+    } else {
+      return {
+        progress: 0,
+        status: 'status'
+      }
+    }
+  })
+</script>
+
+<template>
+  <div>
+    <a-progress
+      :percent="progressConfig.progress"
+      :status="progressConfig.status"
+      :stroke-color="JobState[props.state]"
+    >
+      <template #format="percent">
+        <span v-if="['Processing', 'Pending'].includes(props.state)"> {{ percent }} % </span>
+        <component
+          :is="progressConfig.icon"
+          v-else-if="progressConfig.icon"
+          :style="{ color: JobState[props.state] }"
+        />
+      </template>
+    </a-progress>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/bigtop-manager-ui/src/components/job/index.vue b/bigtop-manager-ui/src/components/job/index.vue
new file mode 100644
index 000000000..f318fe349
--- /dev/null
+++ b/bigtop-manager-ui/src/components/job/index.vue
@@ -0,0 +1,237 @@
+<!--
+  ~ 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.
+-->
+
+<script setup lang="ts">
+  import { computed, ComputedRef, onActivated, onDeactivated, reactive, ref, shallowRef } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { useRoute } from 'vue-router'
+  import { TableColumnType, TableProps } from 'ant-design-vue'
+  import { getJobList, getStageList, getTaskList } from '@/api/job'
+  import useBaseTable from '@/composables/use-base-table'
+  import LogsView, { type LogViewProps } from '@/components/log-view/index.vue'
+  import CustomProgress from './custom-progress.vue'
+  import type { JobVO, StageVO, StateType, TaskListParams, TaskVO } from '@/api/job/types'
+
+  interface BreadcrumbItem {
+    id: string
+    name: ComputedRef<string> | string
+  }
+  const POLLING_INTERVAL = 3000
+  const { t } = useI18n()
+  const route = useRoute()
+  const pollingIntervalId = ref<any>(null)
+  const breadcrumbs = ref<BreadcrumbItem[]>([
+    {
+      name: computed(() => t('job.job_list')),
+      id: `clusterId-${route.params.id}`
+    }
+  ])
+  const status = shallowRef<Record<StateType, string>>({
+    Pending: 'installing',
+    Processing: 'processing',
+    Failed: 'failed',
+    Canceled: 'canceled',
+    Successful: 'success'
+  })
+  const apiMap = shallowRef([
+    {
+      key: 'clusterId',
+      api: getJobList
+    },
+    {
+      key: 'jobId',
+      api: getStageList
+    },
+    {
+      key: 'stageId',
+      api: getTaskList
+    }
+  ])
+  const logsViewState = reactive<LogViewProps>({
+    open: false
+  })
+  const breadcrumbLen = computed(() => breadcrumbs.value.length)
+  const currBreadcrumb = computed(() => breadcrumbs.value.at(-1))
+  const columns = computed((): TableColumnType[] => [
+    {
+      title: '#',
+      width: '48px',
+      key: 'index',
+      customRender: ({ index }) => `${index + 1}`
+    },
+    {
+      title: t('common.name'),
+      key: 'name',
+      dataIndex: 'name',
+      ellipsis: true
+    },
+    {
+      title: t('common.status'),
+      key: 'state',
+      dataIndex: 'state'
+    },
+    {
+      title: t('common.create_time'),
+      dataIndex: 'createTime',
+      ellipsis: true
+    },
+    {
+      title: t('common.update_time'),
+      dataIndex: 'updateTime',
+      ellipsis: true
+    }
+  ])
+  const apiParams = computed(
+    (): TaskListParams =>
+      breadcrumbs.value.reduce((pre, val, index) => {
+        return Object.assign(pre, {
+          [`${apiMap.value[index].key}`]: val.id.replace(`${apiMap.value[index].key}-`, '')
+        })
+      }, {} as TaskListParams)
+  )
+
+  const { dataSource, loading, filtersParams, paginationProps, onChange } = useBaseTable<JobVO | StageVO | TaskVO>({
+    columns: columns.value
+  })
+
+  const clickBreadcrumb = (breadcrumb: BreadcrumbItem) => {
+    if (breadcrumb.id !== currBreadcrumb.value?.id) {
+      const index = breadcrumbs.value.findIndex((v) => v.id === breadcrumb.id)
+      breadcrumbs.value.splice(index + 1, breadcrumbLen.value - index - 1)
+      stopPolling()
+      startPolling()
+    }
+  }
+
+  const updateBreadcrumbs = (data: BreadcrumbItem) => {
+    if (breadcrumbLen.value + 1 > apiMap.value.length) {
+      // task log open
+      logsViewState.open = true
+      logsViewState.subTitle = data.name as string
+      logsViewState.payLoad = {
+        ...apiParams.value,
+        taskId: parseInt(data.id)
+      }
+      return
+    }
+    const currId = `${apiMap.value[breadcrumbLen.value].key}-${data.id}`
+    const index = breadcrumbs.value.findIndex((v) => v.id === currId)
+    if (index === -1) {
+      breadcrumbs.value.push({
+        id: currId,
+        name: data.name as string
+      })
+      stopPolling()
+      startPolling()
+    }
+  }
+
+  const getListData = async (isFirstCall = false) => {
+    if (!paginationProps.value) {
+      loading.value = false
+      return
+    }
+    try {
+      if (isFirstCall) {
+        loading.value = true
+      }
+      const { api } = apiMap.value[breadcrumbs.value.length - 1]
+      const res = await api(apiParams.value, filtersParams.value)
+      dataSource.value = res.content
+      paginationProps.value.total = res.total
+    } catch (error) {
+      console.log('error :>> ', error)
+      stopPolling()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const tableChange: TableProps['onChange'] = (...args) => {
+    onChange(...args)
+    stopPolling()
+    startPolling()
+  }
+
+  const startPolling = () => {
+    getListData(true)
+    pollingIntervalId.value = setInterval(() => {
+      getListData()
+    }, POLLING_INTERVAL)
+  }
+
+  const stopPolling = () => {
+    if (pollingIntervalId.value) {
+      clearInterval(pollingIntervalId.value)
+      pollingIntervalId.value = null
+    }
+  }
+
+  onActivated(() => {
+    startPolling()
+  })
+
+  onDeactivated(() => {
+    stopPolling()
+  })
+</script>
+
+<template>
+  <div class="job">
+    <header>
+      <a-breadcrumb>
+        <a-breadcrumb-item
+          v-for="breadcrumb in breadcrumbs"
+          :key="breadcrumb.id"
+          class="header-title"
+          @click="clickBreadcrumb(breadcrumb)"
+        >
+          <a v-if="currBreadcrumb?.id != breadcrumb.id">{{ breadcrumb.name }}</a>
+          <span v-else>{{ breadcrumb.name }}</span>
+        </a-breadcrumb-item>
+      </a-breadcrumb>
+    </header>
+    <a-table
+      :loading="loading"
+      :data-source="dataSource"
+      :columns="columns"
+      :pagination="paginationProps"
+      @change="tableChange"
+    >
+      <template #bodyCell="{ record, text, column }">
+        <template v-if="column.key === 'name'">
+          <a-typography-link underline @click="updateBreadcrumbs(record)">
+            <span :title="record.name">{{ record.name }}</span>
+          </a-typography-link>
+        </template>
+        <template v-if="column.key === 'state'">
+          <custom-progress v-if="breadcrumbLen === 1" :key="record.id" :state="text" :progress-data="record.progress" />
+          <svg-icon v-else :name="status[record.state as StateType]"></svg-icon>
+        </template>
+      </template>
+    </a-table>
+    <logs-view
+      v-model:open="logsViewState.open"
+      :pay-load="logsViewState.payLoad"
+      :sub-title="logsViewState.subTitle"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/bigtop-manager-ui/src/components/log-view/index.vue b/bigtop-manager-ui/src/components/log-view/index.vue
new file mode 100644
index 000000000..78e3b671e
--- /dev/null
+++ b/bigtop-manager-ui/src/components/log-view/index.vue
@@ -0,0 +1,251 @@
+<!--
+  ~ 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.
+-->
+
+<script setup lang="ts">
+  import { computed, ref, watch } from 'vue'
+  import { copyText, scrollToBottom } from '@/utils/tools'
+  import { message } from 'ant-design-vue'
+  import { useI18n } from 'vue-i18n'
+  import { getTaskLog } from '@/api/job'
+  import type { AxiosProgressEvent, Canceler } from 'axios'
+
+  type EventListener = (val: any) => void
+
+  interface Option {
+    icon: 'copy' | 'download'
+    text: string
+    on: Record<string, EventListener>
+  }
+
+  interface PayLoad {
+    clusterId: number
+    jobId: number
+    stageId: number
+    taskId: number
+  }
+
+  export interface LogViewProps {
+    open: boolean
+    payLoad?: PayLoad
+    subTitle?: string
+  }
+
+  const props = defineProps<LogViewProps>()
+  const emits = defineEmits(['update:open'])
+
+  const { t } = useI18n()
+  const title = ref('task_log')
+  const loading = ref(false)
+  const viewRef = ref<HTMLElement | null>(null)
+  const parsedLog = ref<string | null>(null)
+  const logMessage = ref<string>('')
+  const canceler = ref<Canceler>()
+  const options = computed((): Option[] => {
+    return [
+      {
+        icon: 'copy',
+        text: 'common.copy',
+        on: {
+          click: () => copyLogs()
+        }
+      },
+      {
+        icon: 'download',
+        text: 'common.download',
+        on: {
+          click: () => downloadLogs()
+        }
+      }
+    ]
+  })
+
+  watch(logMessage, (val) => {
+    parsedLog.value = val
+      .split('\n\n')
+      .map((s) => {
+        return s.substring(5)
+      })
+      .join('\n')
+  })
+
+  watch(
+    () => props.open,
+    (val) => {
+      val ? getLogMessage() : cancelSseConnect()
+      !val && (logMessage.value = '')
+    }
+  )
+
+  const getLogMessage = async () => {
+    if (!props.payLoad) {
+      return
+    }
+    try {
+      loading.value = true
+      const { cancel, promise } = getTaskLog({ ...props.payLoad }, getLogProgress)
+      canceler.value = cancel
+      promise.then(onLogComplete)
+    } catch (error) {
+      console.log('error :>> ', error)
+      loading.value = false
+    }
+  }
+
+  const onLogComplete = (res: string | undefined) => {
+    loading.value = res == undefined
+    cancelSseConnect()
+  }
+
+  const getLogProgress = ({ event }: AxiosProgressEvent) => {
+    logMessage.value = event.target.responseText
+    scrollToBottom(viewRef.value)
+  }
+
+  const cancelSseConnect = () => {
+    canceler.value && canceler.value()
+  }
+
+  const copyLogs = () => {
+    if (!parsedLog.value) {
+      return
+    }
+    copyText(parsedLog.value)
+      .then(() => {
+        message.success(`${t('common.copied')}`)
+      })
+      .catch((err: Error) => {
+        message.error(`${t('common.copy_fail')}`)
+        console.log('err :>> ', err)
+      })
+  }
+
+  const downloadLogs = () => {
+    const blob = new Blob([parsedLog.value as BlobPart], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'log.txt'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  const handleOk = () => {
+    emits('update:open', false)
+  }
+</script>
+
+<template>
+  <a-modal
+    width="60%"
+    style="min-width: 400px"
+    :mask="false"
+    :open="open"
+    :title="$t(`job.${title}`)"
+    @ok="handleOk"
+    @cancel="handleOk"
+  >
+    <template #closeIcon>
+      <svg-icon style="margin: 0" name="close" />
+    </template>
+    <template #footer>
+      <div class="log-load">
+        <div>
+          <span v-show="loading" id="log-loading">{{ $t('job.log_loading') }}</span>
+        </div>
+        <a-button key="submit" type="primary" @click="handleOk">
+          {{ $t('common.confirm') }}
+        </a-button>
+      </div>
+    </template>
+    <section>
+      <span class="sub-title">{{ props.subTitle || '' }}</span>
+      <a-space :size="16" class="options">
+        <div v-for="option in options" :key="option.icon" v-on="option.on">
+          <svg-icon :name="option.icon" />
+          <a-typography-link underline :content="$t(option.text)" />
+        </div>
+      </a-space>
+    </section>
+    <article ref="viewRef">
+      <pre>{{ parsedLog }}</pre>
+    </article>
+  </a-modal>
+</template>
+
+<style lang="scss" scoped>
+  .log-load {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  section {
+    display: flex;
+    align-content: flex-end;
+    justify-content: space-between;
+    margin-bottom: $space-sm;
+    color: rgba(0, 0, 0, 0.45);
+  }
+  article {
+    height: 500px;
+    overflow: auto;
+    pre {
+      font-size: 12px;
+      padding: 8px 16px;
+      line-height: 32px;
+      min-height: 500px;
+      overflow-y: hidden;
+      background-color: rgba(0, 0, 0, 0.88);
+      height: auto;
+      color: #fff;
+      margin: 0;
+    }
+  }
+
+  @keyframes loading-dots {
+    0% {
+      content: '';
+    }
+    16% {
+      content: '.';
+    }
+    32% {
+      content: '..';
+    }
+    48% {
+      content: '...';
+    }
+    80% {
+      content: '....';
+    }
+    96% {
+      content: '.....';
+    }
+    100% {
+      content: '......';
+    }
+  }
+
+  #log-loading::after {
+    content: '';
+    display: inline-block;
+    animation: loading-dots 1.5s infinite;
+  }
+</style>
diff --git a/bigtop-manager-ui/src/composables/use-base-table.ts b/bigtop-manager-ui/src/composables/use-base-table.ts
index 2d359b4b9..5bb04cbf9 100644
--- a/bigtop-manager-ui/src/composables/use-base-table.ts
+++ b/bigtop-manager-ui/src/composables/use-base-table.ts
@@ -18,14 +18,16 @@
  */
 
 import { ref, onUnmounted } from 'vue'
-import type { TablePaginationConfig, TableColumnType } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
+import { processData } from '@/utils/tools'
+import type { PaginationProps, TableColumnType, TableProps } from 'ant-design-vue'
+import type { FilterValue } from 'ant-design-vue/es/table/interface'
 
-type PaginationProps = TablePaginationConfig | false | undefined
+type PaginationType = PaginationProps | false | undefined
 export interface UseBaseTableProps<T = any> {
   columns: TableColumnType[]
   rows?: T[]
-  pagination?: PaginationProps
+  pagination?: PaginationType
 }
 const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
   const { columns, rows, pagination } = props
@@ -33,7 +35,7 @@ const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
   const loading = ref(false)
   const dataSource = ref<T[]>(rows || [])
   const columnsProp = ref<TableColumnType[]>(columns)
-  const paginationProps = ref<PaginationProps>({
+  const paginationProps = ref<PaginationType>({
     current: 1,
     pageSize: 10,
     total: dataSource.value.length,
@@ -42,19 +44,30 @@ const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
     pageSizeOptions: ['10', '20', '30', '40', '50'],
     showTotal: (total) => `${t('common.total', [total])}`
   })
+  const filtersParams = ref<Record<string, FilterValue | null | number | undefined>>({
+    pageNum: paginationProps.value ? paginationProps.value.current : undefined,
+    pageSize: paginationProps.value ? paginationProps.value.pageSize : undefined
+  })
 
-  // merge pagination config
+  // Merge pagination config
   if (pagination === undefined && paginationProps.value) {
-    paginationProps.value = Object.assign(paginationProps.value, pagination)
+    Object.assign(paginationProps.value, pagination)
   } else {
     paginationProps.value = false
   }
 
-  const onChange = (pagination: TablePaginationConfig) => {
+  const onChange: TableProps['onChange'] = (pagination, filters) => {
+    // Collect params of filters
+    Object.assign(filtersParams.value, processData(filters))
     if (!paginationProps.value) {
       return
     }
-    paginationProps.value = Object.assign(paginationProps.value, pagination)
+    Object.assign(paginationProps.value, pagination)
+    // Update value of params about pagination
+    Object.assign(filtersParams.value, {
+      pageNum: pagination.current,
+      pageSize: pagination.pageSize
+    })
   }
 
   const resetState = () => {
@@ -80,6 +93,7 @@ const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
     dataSource,
     loading,
     paginationProps,
+    filtersParams,
     onChange,
     resetState
   }
diff --git a/bigtop-manager-ui/src/enums/state.ts b/bigtop-manager-ui/src/enums/state.ts
index 003b044cf..5f4cee825 100644
--- a/bigtop-manager-ui/src/enums/state.ts
+++ b/bigtop-manager-ui/src/enums/state.ts
@@ -17,26 +17,31 @@
  * under the License.
  */
 
-export type MaintainState = 'Uninstalled' | 'Installed' | 'Maintained' | 'Started' | 'Stopped'
+export type StatusType = keyof typeof StatusColors
 
-export enum State {
-  Pending = '#1677ff',
-  Processing = '#1677fe',
-  Successful = '#52c41a',
-  Failed = '#ff4d4f',
-  Canceled = '#80868b'
+export enum StatusColors {
+  success = 'var(--color-success)',
+  error = 'var(--color-error)',
+  warning = 'var(--color-warning)',
+  default = 'var(--color-primary)'
 }
 
-export enum CommonState {
-  normal = '#52c41a',
-  abnormal = '#ff4d4f',
-  maintained = '#d9d9d9'
+export enum CommonStatus {
+  healthy = 'success',
+  unhealthy = 'error',
+  unknow = 'warning'
 }
 
-export enum CurrState {
-  Installed,
-  Started,
-  Maintained,
-  Uninstalled,
-  Stopped
+export enum CommonStatusTexts {
+  'healthy',
+  'unhealthy',
+  'unknow'
+}
+
+export enum JobState {
+  'Pending' = 'pending',
+  'Processing' = 'processing',
+  'Successful' = 'successful',
+  'Failed' = 'failed',
+  'Canceled' = 'canceled'
 }
diff --git a/bigtop-manager-ui/src/layouts/sider.vue b/bigtop-manager-ui/src/layouts/sider.vue
index 363f10d58..bdb988b08 100644
--- a/bigtop-manager-ui/src/layouts/sider.vue
+++ b/bigtop-manager-ui/src/layouts/sider.vue
@@ -23,6 +23,7 @@
   import { RouteExceptions } from '@/enums'
   import { useMenuStore } from '@/store/menu'
   import type { MenuItem } from '@/store/menu/types'
+  import type { ClusterStatusType } from '@/api/cluster/types'
 
   interface Props {
     siderMenuSelectedKey: string
@@ -34,13 +35,11 @@
     siderMenus: () => []
   })
 
-  type ClusterType = 1 | 2 | 3
-
   const { siderMenuSelectedKey, siderMenus } = toRefs(props)
   const router = useRouter()
   const menuStore = useMenuStore()
   const emits = defineEmits(['onSiderClick'])
-  const clusterStatus = ref<Record<ClusterType, string>>({
+  const clusterStatus = ref<Record<ClusterStatusType, string>>({
     1: 'success',
     2: 'error',
     3: 'warning'
@@ -83,7 +82,7 @@
               <div
                 style="height: 10px; margin-inline: 7px; display: flex; justify-content: center; align-items: flex-end"
               >
-                <status-dot :size="8" :color="clusterStatus[child.status as ClusterType] as any" />
+                <status-dot :size="8" :color="clusterStatus[child.status as ClusterStatusType] as any" />
               </div>
             </template>
             <div>
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
index 879cfa110..a05ff1169 100644
--- a/bigtop-manager-ui/src/locales/en_US/cluster.ts
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -17,23 +17,23 @@
  * under the License.
  */
 export default {
-  base_info: 'Basic information',
-  cluster_config: 'Cluster configuration',
+  base_info: 'Basic Information',
+  cluster_config: 'Cluster Configuration',
   cluster_management: 'Cluster',
   component_info: 'Stack',
   host_config: 'Hosts',
   create: 'Create',
   name: 'Name',
-  display_name: 'Display name',
+  display_name: 'Display Name',
   description: 'Description',
-  root_directory: 'Root directory',
-  user_group: 'User group',
-  config_source: 'Configuration source',
-  install_dependencies: 'Install dependencies',
-  add_host: 'Add host',
-  edit_host: 'Edit host',
-  view_log: 'View log',
+  root_directory: 'Root Directory',
+  user_group: 'User Group',
+  config_source: 'Configuration Source',
+  install_dependencies: 'Install Dependencies',
+  add_host: 'Add Host',
+  edit_host: 'Edit Host',
+  view_log: 'View Log',
   source: 'Source',
-  show_hosts_resolved: 'Hostnames after resolved',
+  show_hosts_resolved: 'Resolved Hostnames',
   cluster_unavailable_message: 'Sorry, you need to create cluster to use this feature.'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/common.ts b/bigtop-manager-ui/src/locales/en_US/common.ts
index 47650f45f..86a78908b 100644
--- a/bigtop-manager-ui/src/locales/en_US/common.ts
+++ b/bigtop-manager-ui/src/locales/en_US/common.ts
@@ -33,7 +33,7 @@ export default {
   rename: 'Rename',
   delete: 'Delete',
   remove: 'Remove',
-  bulk_remove: 'Bulk remove',
+  bulk_remove: 'Bulk Remove',
   disable: 'Disable',
   enable: 'Enable',
   submit: 'Submit',
@@ -45,28 +45,28 @@ export default {
   installing: 'Installing...',
   finish: 'Finish',
   more: 'More',
-  view_all: 'View all',
+  view_all: 'View All',
   select_tips: 'Please select',
   name: 'Name',
   version: 'Version',
   desc: 'Description',
   os: 'OS',
   arch: 'Arch',
-  base_url: 'Base URL',
+  base_url: 'Address',
+  cluster: 'Cluster',
   host: 'Host',
   service: 'Service',
   stack: 'Stack',
   stage: 'Stage',
   search: 'Search',
   reset: 'Reset',
-  restart: 'Restart {0}',
   required: 'Required',
-  not_required: 'Not required',
+  not_required: 'Not Required',
   progress: 'Progress',
   status_change_success: 'Status changed successfully',
-  test_success: 'Test successful !',
-  created: 'Created successfully !',
-  update_success: 'Update successfully !',
+  test_success: 'Test successful!',
+  created: 'Created!',
+  update_success: 'Updated!',
   update_fail: 'Update fail',
   error_unknown: 'Unknown error',
   error_network: 'Network error',
@@ -77,9 +77,10 @@ export default {
   update_time: 'Update Time',
   notification: 'Notification',
   copy: 'Copy',
-  copy_success: 'Copy successfully !',
+  copied: 'Copied!',
+  download: 'Download',
   copy_fail: 'Copy failed!',
-  delete_success: 'Delete successfully !',
+  delete_success: 'Deleted!',
   delete_fail: 'Delete failed!',
   delete_confirm_title: 'Delete Confirm',
   delete_confirm_content: 'Delete will not be recoverable, are you sure you want to delete {0} ?',
@@ -96,5 +97,14 @@ export default {
   file_size_error: 'File size cannot exceed 10KB!',
   upload_success: 'File uploaded successfully!',
   upload_failed: 'File upload failed!',
-  password_not_match: 'Passwords do not match.'
+  password_not_match: 'Passwords do not match.',
+  overview: 'Overview',
+  user: 'User',
+  job: 'Job',
+  start: 'Start {0}',
+  restart: 'Restart {0}',
+  stop: 'Stop {0}',
+  add: 'Add {0}',
+  more_operations: 'More Operations',
+  ok: 'Ok'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/host.ts b/bigtop-manager-ui/src/locales/en_US/host.ts
index 9eb41395f..22ae699b4 100644
--- a/bigtop-manager-ui/src/locales/en_US/host.ts
+++ b/bigtop-manager-ui/src/locales/en_US/host.ts
@@ -33,10 +33,14 @@ export default {
   auth_method: 'Authentication Method',
   password_auth: 'Password',
   key_auth: 'Key',
+  ip_address: 'IP Address',
+  component_count: 'Component Count',
   no_auth: 'No Authentication',
   agent_path: 'Agent Path',
   ssh_port: 'SSH Port',
   grpc_port: 'GRPC Port',
   description: 'Description',
-  key_password_not_match: 'Key Passwords do not match.'
+  key_password_not_match: 'Key Passwords do not match.',
+  default_agent_path: 'Agent application installed path, default to /opt',
+  default_grpc_port: 'Agent application grpc port, default to 8835'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/index.ts b/bigtop-manager-ui/src/locales/en_US/index.ts
index 5f6166be1..bc44b73be 100644
--- a/bigtop-manager-ui/src/locales/en_US/index.ts
+++ b/bigtop-manager-ui/src/locales/en_US/index.ts
@@ -26,6 +26,8 @@ import aiAssistant from '@/locales/en_US/ai-assistant.ts'
 import cluster from '@/locales/en_US/cluster.ts'
 import host from '@/locales/en_US/host.ts'
 import job from '@/locales/en_US/job.ts'
+import overview from '@/locales/en_US/overview'
+import service from '@/locales/en_US/service'
 
 export default {
   common,
@@ -36,5 +38,7 @@ export default {
   aiAssistant,
   cluster,
   host,
-  job
+  job,
+  overview,
+  service
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/job.ts b/bigtop-manager-ui/src/locales/en_US/job.ts
index 95caf7b8f..3d015fdad 100644
--- a/bigtop-manager-ui/src/locales/en_US/job.ts
+++ b/bigtop-manager-ui/src/locales/en_US/job.ts
@@ -18,5 +18,7 @@
  */
 
 export default {
-  job_list: 'Job List'
+  job_list: 'Job List',
+  task_log: 'Task Log',
+  log_loading: 'Loading logs'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/llm-config.ts b/bigtop-manager-ui/src/locales/en_US/llm-config.ts
index c23e35f10..f128d1163 100644
--- a/bigtop-manager-ui/src/locales/en_US/llm-config.ts
+++ b/bigtop-manager-ui/src/locales/en_US/llm-config.ts
@@ -17,8 +17,8 @@
  * under the License.
  */
 export default {
-  add_authorization: 'Add authorization',
-  edit_authorization: 'Edit authorization',
+  add_authorization: 'Add Authorization',
+  edit_authorization: 'Edit Authorization',
   test: 'Test',
   unavailable: 'Unavailable',
   active: 'Active',
diff --git a/bigtop-manager-ui/src/api/sse/index.ts b/bigtop-manager-ui/src/locales/en_US/overview.ts
similarity index 56%
rename from bigtop-manager-ui/src/api/sse/index.ts
rename to bigtop-manager-ui/src/locales/en_US/overview.ts
index 6b288b3b1..fde5bedc0 100644
--- a/bigtop-manager-ui/src/api/sse/index.ts
+++ b/bigtop-manager-ui/src/locales/en_US/overview.ts
@@ -16,22 +16,23 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import axios, { type AxiosProgressEvent, type CancelTokenSource } from 'axios'
-import request from '@/api/request.ts'
-import type { LogsRes } from './types'
-
-export const getLogs = (clusterId: number, id: number, func: Function): LogsRes => {
-  const source: CancelTokenSource = axios.CancelToken.source()
-
-  const promise = request({
-    method: 'get',
-    url: `/sse/clusters/${clusterId}/tasks/${id}/log`,
-    responseType: 'stream',
-    timeout: 0,
-    cancelToken: source.token,
-    onDownloadProgress: (progressEvent: AxiosProgressEvent) => func(progressEvent)
-  })
-
-  return { promise, cancel: source.cancel }
+export default {
+  basic_info: 'Basic Information',
+  service_info: 'Service Information',
+  detail: 'Details',
+  cluster_status: 'Status',
+  cluster_name: 'Name',
+  cluster_desc: 'Description',
+  host_count: 'Host Count',
+  service_count: 'Service Count',
+  memory: 'Memory',
+  chart: 'Chart',
+  core_count: 'Processor Count',
+  disk_size: 'Disk Size',
+  creator: 'Creator',
+  memory_usage: 'Memory Usage',
+  cpu_usage: 'Cpu Usage',
+  unit_host: 'Hosts',
+  unit_service: 'Services',
+  unit_processor: 'Processors'
 }
diff --git a/bigtop-manager-ui/src/api/sse/types.ts b/bigtop-manager-ui/src/locales/en_US/service.ts
similarity index 83%
rename from bigtop-manager-ui/src/api/sse/types.ts
rename to bigtop-manager-ui/src/locales/en_US/service.ts
index 8e169f04f..26d0b3280 100644
--- a/bigtop-manager-ui/src/api/sse/types.ts
+++ b/bigtop-manager-ui/src/locales/en_US/service.ts
@@ -16,12 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-export interface LogsRes {
-  promise: Promise<any>
-  cancel: () => void
-}
-export interface ChatMessagesRes {
-  promise: Promise<any>
-  cancel: () => void
+export default {
+  name: 'Service Name',
+  required_restart: 'Restart'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/user.ts b/bigtop-manager-ui/src/locales/en_US/user.ts
index dab2f04ae..29f36bd5a 100644
--- a/bigtop-manager-ui/src/locales/en_US/user.ts
+++ b/bigtop-manager-ui/src/locales/en_US/user.ts
@@ -22,6 +22,7 @@ export default {
   settings: 'Settings',
   logout: 'Log Out',
   username: 'Username',
+  user_group: 'User Group',
   nickname: 'Nickname',
   user_list: 'User List',
   set_nickname_valid: 'Nickname should not be empty'
diff --git a/bigtop-manager-ui/src/locales/zh_CN/common.ts b/bigtop-manager-ui/src/locales/zh_CN/common.ts
index 30123e19b..3005772f9 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/common.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/common.ts
@@ -53,13 +53,12 @@ export default {
   os: '系统',
   arch: '架构',
   base_url: '地址',
+  cluster: '集群',
   host: '主机',
   service: '服务',
   stack: '组件栈',
   stage: '阶段',
   search: '搜索',
-  reset: '重置',
-  restart: '重启{0}',
   required: '需重启',
   not_required: '无需重启',
   progress: '进度',
@@ -77,7 +76,8 @@ export default {
   update_time: '更新时间',
   notification: '通知',
   copy: '复制',
-  copy_success: '复制成功',
+  copied: '已复制',
+  download: '下载',
   copy_fail: '复制失败',
   delete_success: '删除成功',
   delete_fail: '删除失败',
@@ -96,5 +96,15 @@ export default {
   file_size_error: '文件大小不能超过 10KB！',
   upload_success: '文件上传成功！',
   upload_failed: '文件上传失败！',
-  password_not_match: '密码不一致。'
+  password_not_match: '密码不一致。',
+  overview: '概览',
+  user: '用户',
+  job: '作业',
+  start: '启动{0}',
+  restart: '重启{0}',
+  stop: '停止{0}',
+  add: '添加{0}',
+  reset: '重置',
+  more_operations: '其他操作',
+  ok: '确认'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/host.ts b/bigtop-manager-ui/src/locales/zh_CN/host.ts
index 30692cfa5..51b4d6627 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/host.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/host.ts
@@ -33,10 +33,14 @@ export default {
   auth_method: '认证方式',
   password_auth: '密码',
   key_auth: '密钥',
+  ip_address: 'IP 地址',
+  component_count: '组件数',
   no_auth: '无认证',
   agent_path: 'Agent路径',
   ssh_port: 'SSH端口',
-  grpc_port: 'gRPC端口',
+  grpc_port: 'GRPC端口',
   description: '备注',
-  key_password_not_match: '密钥口令不一致。'
+  key_password_not_match: '密钥口令不一致。',
+  default_agent_path: '代理应用程序安装路径，默认为/opt',
+  default_grpc_port: '代理应用程序gRPC端口，默认为8835'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/index.ts b/bigtop-manager-ui/src/locales/zh_CN/index.ts
index cbb01b6e9..5aa15877b 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/index.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/index.ts
@@ -26,6 +26,8 @@ import aiAssistant from '@/locales/zh_CN/ai-assistant.ts'
 import cluster from '@/locales/zh_CN/cluster.ts'
 import host from '@/locales/zh_CN/host.ts'
 import job from '@/locales/zh_CN/job.ts'
+import overview from '@/locales/zh_CN/overview.ts'
+import service from '@/locales/zh_CN/service.ts'
 
 export default {
   common,
@@ -36,5 +38,7 @@ export default {
   aiAssistant,
   cluster,
   host,
-  job
+  job,
+  overview,
+  service
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/job.ts b/bigtop-manager-ui/src/locales/zh_CN/job.ts
index 06cd7807b..a76d06775 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/job.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/job.ts
@@ -18,5 +18,7 @@
  */
 
 export default {
-  job_list: '作业列表'
+  job_list: '作业列表',
+  task_log: '任务日志',
+  log_loading: '获取日志中'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/overview.ts b/bigtop-manager-ui/src/locales/zh_CN/overview.ts
new file mode 100644
index 000000000..ced7f3760
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/zh_CN/overview.ts
@@ -0,0 +1,38 @@
+/*
+ * 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
+ *
+ *    https://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.
+ */
+export default {
+  basic_info: '基本信息',
+  service_info: '服务信息',
+  detail: '详情',
+  cluster_status: '集群状态',
+  cluster_name: '集群名',
+  cluster_desc: '集群备注',
+  host_count: '主机数',
+  service_count: '服务数',
+  memory: '内存',
+  chart: '图表',
+  core_count: '核心数',
+  disk_size: '磁盘大小',
+  creator: '创建人',
+  memory_usage: '内存使用率',
+  cpu_usage: 'CPU使用率',
+  unit_host: '个主机',
+  unit_service: '个服务',
+  unit_processor: '个核心'
+}
diff --git a/bigtop-manager-ui/src/locales/zh_CN/service.ts b/bigtop-manager-ui/src/locales/zh_CN/service.ts
new file mode 100644
index 000000000..e2f6ad206
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/zh_CN/service.ts
@@ -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
+ *
+ *    https://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.
+ */
+export default {
+  name: '服务名',
+  required_restart: '需要重启'
+}
diff --git a/bigtop-manager-ui/src/locales/zh_CN/user.ts b/bigtop-manager-ui/src/locales/zh_CN/user.ts
index 808f79713..1fe47abd0 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/user.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/user.ts
@@ -22,6 +22,7 @@ export default {
   settings: '个人设置',
   logout: '退出登录',
   username: '用户名',
+  user_group: '用户组',
   nickname: '昵称',
   user_list: '用户列表',
   set_nickname_valid: '昵称不能为空'
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
index 847ef1208..8bb2b193b 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
@@ -18,10 +18,11 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onMounted, ref, shallowRef, toRefs } from 'vue'
-  import type { JobVO, StateType } from '@/api/job/types'
+  import { computed, onMounted, reactive, ref, shallowRef, toRefs } from 'vue'
   import { getJobDetails, retryJob } from '@/api/job'
   import { CommandVO } from '@/api/command/types'
+  import LogsView, { type LogViewProps } from '@/components/log-view/index.vue'
+  import type { JobVO, StageVO, StateType, TaskVO } from '@/api/job/types'
 
   const props = defineProps<{ stepData: CommandVO }>()
   const emits = defineEmits(['updateData'])
@@ -29,6 +30,9 @@
   const activeKey = ref<number[]>([])
   const jobDetail = ref<JobVO>({})
   const spinning = ref(false)
+  const logsViewState = reactive<LogViewProps>({
+    open: false
+  })
   const status = shallowRef<Record<StateType, string>>({
     Pending: 'installing',
     Processing: 'processing',
@@ -92,6 +96,23 @@
     }, interval)
   }
 
+  const viewLogs = (stage: StageVO, task: TaskVO) => {
+    const { id: jobId } = stepData.value
+    const { id: stageId } = stage
+    const { id: taskId } = task
+    if (jobId === undefined || stageId === undefined || taskId === undefined) {
+      return
+    }
+    logsViewState.payLoad = {
+      clusterId: 0,
+      jobId,
+      stageId,
+      taskId
+    }
+    logsViewState.open = true
+    logsViewState.subTitle = task.name
+  }
+
   onMounted(() => {
     pollJobDetails(getJobInstanceDetails)
   })
@@ -118,13 +139,22 @@
             <span>{{ task.name }}</span>
             <a-space :size="16">
               <svg-icon :name="task.state && status[task.state]"></svg-icon>
-              <a-button v-if="task.state && !['Canceled', 'Pending'].includes(task.state)" type="link">
+              <a-button
+                v-if="task.state && !['Canceled', 'Pending'].includes(task.state)"
+                type="link"
+                @click="viewLogs(stage, task)"
+              >
                 {{ $t('cluster.view_log') }}
               </a-button>
             </a-space>
           </div>
         </a-collapse-panel>
       </a-collapse>
+      <logs-view
+        v-model:open="logsViewState.open"
+        :pay-load="logsViewState.payLoad"
+        :sub-title="logsViewState.subTitle"
+      />
     </div>
   </a-spin>
 </template>
@@ -153,8 +183,8 @@
     }
   }
   .stage-item {
+    margin-right: 68px;
     @include flexbox($justify: space-between, $align: center);
-    padding-right: 65px;
   }
   .task-item {
     height: 45px;
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
index 82a9d1e21..2db924d8b 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
@@ -18,11 +18,11 @@
 -->
 
 <script setup lang="ts">
-  import type { FormItemState } from '@/components/common/auto-form/types'
   import { computed, ref, shallowRef, watch } from 'vue'
   import { useI18n } from 'vue-i18n'
-  import type { ClusterCommandReq } from '@/api/command/types'
   import { pick } from '@/utils/tools'
+  import type { ClusterCommandReq } from '@/api/command/types'
+  import type { FormItemState } from '@/components/common/auto-form/types'
 
   type ClusterCommandReqKey = keyof ClusterCommandReq
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
index 0f8fe394c..3e6cd6847 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
@@ -19,13 +19,13 @@
 
 <script setup lang="ts">
   import { computed, ref, shallowRef, watchEffect } from 'vue'
-  import type { TableColumnType } from 'ant-design-vue'
-  import useBaseTable from '@/composables/use-base-table'
-  import SetSource from './set-source.vue'
   import { useStackStore } from '@/store/stack'
   import { storeToRefs } from 'pinia'
   import { ServiceVO } from '@/api/service/types'
   import { useI18n } from 'vue-i18n'
+  import useBaseTable from '@/composables/use-base-table'
+  import SetSource from './set-source.vue'
+  import type { TableColumnType } from 'ant-design-vue'
 
   const { t } = useI18n()
   const stackStore = useStackStore()
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
deleted file mode 100644
index 4ccb391ac..000000000
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-/*
- * 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
- *
- *    https://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.
- */
-
-export function generateTestData(count = 100) {
-  const names = ['componentA', 'componentB', 'componentC', 'componentD', 'componentE']
-  const versions = ['1.0.0', '2.3.1', '3.2.4', '4.0.0', '5.1.2']
-  const compStacks = [
-    'React, Redux, Webpack',
-    'Vue, Vuex, Vite',
-    'Angular, RxJS, NgRx',
-    'Node.js, Express, MongoDB',
-    'Svelte, Rollup, Firebase'
-  ]
-  const descriptions = [
-    '这是一个用于状态管理的组件',
-    '这是一个用于数据展示的组件',
-    '这是一个用于实时数据处理的组件',
-    '这是一个后端服务组件',
-    '这是一个前端开发框架'
-  ]
-
-  const testData = Array.from({ length: count }, (_, i) => ({
-    key: (i + 1).toString(),
-    name: names[Math.floor(Math.random() * names.length)],
-    version: versions[Math.floor(Math.random() * versions.length)],
-    compStack: compStacks[Math.floor(Math.random() * compStacks.length)],
-    descrip: descriptions[Math.floor(Math.random() * descriptions.length)]
-  }))
-
-  return testData
-}
-
-export function generateTableHostData(numRows = 100) {
-  const hostnames = ['Server-A', 'Server-B', 'Server-C', 'Server-D', 'Server-E']
-  const nodeNames = ['host-A', 'host-B', 'host-C', 'host-D']
-  const ipAddresses = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4', '192.168.1.5']
-  const systems = 'Rocky Linux 8.8'
-  const architecture = 'x86_64'
-  const remarks = ['Main server', 'Backup server', 'Database server', 'Web server', 'Test server']
-  const statuses = ['installing', 'success', 'error', 'unknow']
-
-  const tableData = []
-
-  for (let i = 0; i < numRows; i++) {
-    tableData.push({
-      key: i + 1,
-      name: hostnames[Math.floor(Math.random() * hostnames.length)],
-      system: `${systems}-${i}`,
-      architecture: `${architecture}-${i}`,
-      componentCount: `${i} components`,
-      nodeName: nodeNames[Math.floor(Math.random() * nodeNames.length)],
-      address: ipAddresses[Math.floor(Math.random() * ipAddresses.length)],
-      remark: remarks[Math.floor(Math.random() * remarks.length)],
-      status: statuses[Math.floor(Math.random() * statuses.length)]
-    })
-  }
-
-  return tableData
-}
-
-export function getCheckWorkflows(stageCount: number, maxTasksPerStage: number, maxStatus: number): Array<any> {
-  const data = []
-
-  for (let i = 0; i < stageCount; i++) {
-    const taskCount = Math.floor(Math.random() * maxTasksPerStage) + 1
-    const tasks = []
-
-    for (let j = 0; j < taskCount; j++) {
-      tasks.push({
-        id: j,
-        name: `task${j + 1}`,
-        status: Math.floor(Math.random() * maxStatus) + 1
-      })
-    }
-
-    data.push({
-      id: i,
-      name: `stage${i + 1}`,
-      status: Math.floor(Math.random() * maxStatus) + 1,
-      tasks
-    })
-  }
-
-  return data
-}
-
-export enum StatusColors {
-  success = 'success',
-  error = 'error',
-  unknow = 'warning'
-}
-
-export enum StatusTexts {
-  success = 'healthy',
-  error = 'unhealthy',
-  unknow = 'unknown'
-}
-
-export type ServiceStatus = keyof typeof StatusColors
-
-export interface ServiceItem {
-  key: string | number
-  serviceName: string
-  version: string
-  restart: boolean
-  status: ServiceStatus
-}
-
-export function getServices(): ServiceItem[] {
-  const statusList = ['success', 'error', 'unknow']
-  const serviceNames = [
-    'GraFana',
-    'Flink',
-    'Kafka',
-    'ZooKeeper',
-    'Hadoop',
-    'Hbase',
-    'Hive',
-    'MySQL',
-    'Spark',
-    'Solr',
-    'Seatunnel',
-    'Tez',
-    'Prometheus'
-  ]
-  return Array.from({ length: serviceNames.length }, (_, i) => ({
-    key: i,
-    serviceName: serviceNames[i],
-    version: `${serviceNames[i].toLowerCase()}1.0.${i}`,
-    restart: Math.floor(Math.random() * 2) == 0,
-    status: statusList[Math.floor(Math.random() * statusList.length)] as ServiceStatus
-  }))
-}
-
-export interface UserListItem {
-  serviceName: string
-  userName: string
-  userGroup: string
-  descrip: string
-}
-
-export function getUserList(count: number = 20): UserListItem[] {
-  return Array.from({ length: count }, (_, i) => ({
-    key: i,
-    serviceName: `serviceName-${i}`,
-    userName: `user-${i}`,
-    userGroup: `userGroup-${i}`,
-    descrip: 'descrip-descrip-descrip'
-  }))
-}
-
-type JobStatus = 'success' | 'exception' | 'normal' | 'active'
-export interface JobListItem {
-  name: string
-  status: JobStatus
-  progress: number
-  createTime: string
-  updateTime: string
-}
-
-export function getJobList(count: number = 20): JobListItem[] {
-  const status = ['success', 'exception', 'normal', 'active']
-  return Array.from({ length: count }, (_, i) => ({
-    key: i,
-    name: `name-${i}`,
-    progress: Math.floor(Math.random() * 100),
-    status: status[Math.floor(Math.random() * status.length)] as JobStatus,
-    createTime: '2024-09-19 11:11:11',
-    updateTime: '2024-09-19 11:11:11'
-  }))
-}
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
index 3fbee40d4..a9428be50 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -29,14 +29,7 @@
   import ComponentInfo from './components/component-info.vue'
   import HostConfig from './components/host-config.vue'
   import CheckWorkflow from './components/check-workflow.vue'
-  import {
-    ClusterCommandReq,
-    Command,
-    CommandLevel,
-    HostReq,
-    type CommandRequest,
-    type CommandVO
-  } from '@/api/command/types'
+  import { ClusterCommandReq, HostReq, type CommandRequest, type CommandVO } from '@/api/command/types'
 
   const { t } = useI18n()
   const menuStore = useMenuStore()
@@ -45,8 +38,8 @@
   const installing = ref(false)
   const stepData = ref<[Partial<ClusterCommandReq>, any, HostReq[], CommandVO]>([{}, {}, [], {}])
   const commandRequest = ref<CommandRequest>({
-    command: Command.Add,
-    commandLevel: CommandLevel.Cluster
+    command: 'Add',
+    commandLevel: 'cluster'
   })
   const installStatus = shallowRef<InstalledStatusVO[]>([])
   const components = shallowRef<any[]>([ClusterBase, ComponentInfo, HostConfig, CheckWorkflow])
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
index f39243de4..4637b96b0 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
@@ -18,95 +18,98 @@
 -->
 
 <script setup lang="ts">
-  import { TableColumnType } from 'ant-design-vue'
-  import { computed, reactive, ref } from 'vue'
-  import { generateTableHostData } from './components/mock'
+  import { TableColumnType, TableProps } from 'ant-design-vue'
+  import { computed, onActivated, reactive, ref, useAttrs } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { getHosts } from '@/api/hosts'
   import useBaseTable from '@/composables/use-base-table'
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
+  import type { HostVO } from '@/api/hosts/types'
+  import type { ClusterVO } from '@/api/cluster/types'
 
   type Key = string | number
   interface TableState {
     selectedRowKeys: Key[]
     searchText: string
-    searchedColumn: string
+    searchedColumn: keyof HostVO
   }
 
+  const { t } = useI18n()
+  const attrs = useAttrs() as ClusterVO
   const searchInputRef = ref()
-  const data = ref<any[]>(generateTableHostData(50))
+  const hostStatus = ref(['INSTALLING', 'SUCCESS', 'FAILED', 'UNKNOW'])
   const state = reactive<TableState>({
     searchText: '',
     searchedColumn: '',
     selectedRowKeys: []
   })
 
-  const columns = computed((): TableColumnType[] => [
+  const columns = computed((): TableColumnType<HostVO>[] => [
     {
-      title: '节点',
-      dataIndex: 'nodeName',
-      key: 'nodeName',
+      title: t('host.hostname'),
+      dataIndex: 'hostname',
+      key: 'hostname',
       ellipsis: true,
       customFilterDropdown: true,
-      onFilter: (value, record) => isContain(record.nodeName, value as string),
       onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
     },
     {
-      title: 'IP地址',
-      dataIndex: 'address',
-      key: 'address',
+      title: t('host.ip_address'),
+      dataIndex: 'ipv4',
+      key: 'ipv4',
       ellipsis: true,
       customFilterDropdown: true,
-      onFilter: (value, record) => isContain(record.address, value as string),
       onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
     },
     {
-      title: '系统',
-      dataIndex: 'system',
+      title: t('common.os'),
+      dataIndex: 'os',
       ellipsis: true
     },
     {
-      title: '架构',
-      dataIndex: 'architecture',
+      title: t('common.arch'),
+      dataIndex: 'arch',
       ellipsis: true
     },
     {
-      title: '组件数',
-      dataIndex: 'componentCount',
+      title: t('host.component_count'),
+      dataIndex: 'componentNum',
       ellipsis: true
     },
     {
-      title: '状态',
+      title: t('common.status'),
       dataIndex: 'status',
       key: 'status',
       width: '160px',
       ellipsis: true,
+      filterMultiple: false,
       filters: [
         {
-          text: '正常',
-          value: 'success'
+          text: t('common.success'),
+          value: 1
         },
         {
-          text: '异常',
-          value: 'error'
+          text: t('common.failed'),
+          value: 2
         },
         {
-          text: '未知',
-          value: 'unknow'
+          text: t('common.unknow'),
+          value: 3
         }
-      ],
-      onFilter: (value, record) => record.status.indexOf(value) === 0
+      ]
     },
     {
-      title: '操作',
+      title: t('common.action'),
       key: 'operation',
       width: '160px',
       fixed: 'right'
     }
   ])
 
-  const { loading, paginationProps, onChange } = useBaseTable({
+  const { loading, dataSource, filtersParams, paginationProps, onChange } = useBaseTable<HostVO>({
     columns: columns.value,
-    rows: data.value
+    rows: []
   })
 
   const operations = computed((): GroupItem[] => [
@@ -121,10 +124,6 @@
     }
   ])
 
-  const isContain = (source: string, target: string) => {
-    return source.toString().toLowerCase().includes(target.toLowerCase())
-  }
-
   const onFilterDropdownOpenChange = (visible: boolean) => {
     if (visible) {
       setTimeout(() => {
@@ -140,7 +139,7 @@
   const handleSearch = (selectedKeys: Key[], confirm: (param?: FilterConfirmProps) => void, dataIndex: string) => {
     confirm()
     state.searchText = selectedKeys[0] as string
-    state.searchedColumn = dataIndex as string
+    state.searchedColumn = dataIndex
   }
 
   const handleReset = (clearFilters: (param?: FilterResetProps) => void) => {
@@ -159,12 +158,42 @@
       console.log('row :>> ', row)
     }
   }
+
+  const getHostList = async (isReset = false) => {
+    loading.value = true
+    if (attrs.id == undefined || !paginationProps.value) {
+      loading.value = false
+      return
+    }
+    if (isReset) {
+      paginationProps.value.current = 1
+    }
+    try {
+      const res = await getHosts({ ...filtersParams.value, clusterId: attrs.id })
+      dataSource.value = res.content
+      paginationProps.value.total = res.total
+      loading.value = false
+    } catch (error) {
+      console.log('error :>> ', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const tableChange: TableProps['onChange'] = (pagination, filters, ...args) => {
+    onChange(pagination, filters, ...args)
+    getHostList()
+  }
+
+  onActivated(() => {
+    getHostList()
+  })
 </script>
 
 <template>
   <div class="host">
     <header>
-      <div class="host-title">{{ $t('host.host_list') }}</div>
+      <div class="header-title">{{ $t('host.host_list') }}</div>
       <a-space :size="16">
         <a-button type="primary" danger @click="handleDelete">{{ $t('common.bulk_remove') }}</a-button>
         <a-button type="primary">{{ $t('cluster.add_host') }}</a-button>
@@ -172,11 +201,11 @@
     </header>
     <a-table
       :loading="loading"
-      :data-source="data"
+      :data-source="dataSource"
       :columns="columns"
       :pagination="paginationProps"
       :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
-      @change="onChange"
+      @change="tableChange"
     >
       <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
         <div class="search">
@@ -187,8 +216,10 @@
             @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
             @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
           />
-          <div class="search-btn">
-            <a-button size="small" @click="handleReset(clearFilters)"> {{ $t('common.reset') }} </a-button>
+          <div class="search-option">
+            <a-button size="small" @click="handleReset(clearFilters)">
+              {{ $t('common.reset') }}
+            </a-button>
             <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
               {{ $t('common.search') }}
             </a-button>
@@ -200,11 +231,12 @@
         <svg-icon v-else :name="filtered ? 'filter_activated' : 'filter'" />
       </template>
       <template #bodyCell="{ record, column }">
-        <template v-if="column.key === 'nodeName'">
-          <a-typography-link underline> {{ record.nodeName }} </a-typography-link>
+        <template v-if="column.key === 'hostname'">
+          <a-typography-link underline> {{ record.hostname }} </a-typography-link>
         </template>
         <template v-if="column.key === 'status'">
-          <svg-icon :name="record.status" />
+          <svg-icon style="margin-left: 0" :name="hostStatus[record.status].toLowerCase()" />
+          <span>{{ $t(`common.${hostStatus[record.status].toLowerCase()}`) }}</span>
         </template>
         <template v-if="column.key === 'operation'">
           <button-group
@@ -215,7 +247,7 @@
             :args="record"
             group-shape="default"
             group-type="link"
-          ></button-group>
+          />
         </template>
       </template>
     </a-table>
@@ -223,23 +255,21 @@
 </template>
 
 <style lang="scss" scoped>
-  .host {
-    header {
-      margin-bottom: $space-md;
-    }
-    &-title {
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 22px;
-      margin-bottom: $space-md;
-    }
+  header {
+    margin-bottom: $space-md;
   }
   .search {
     display: grid;
     gap: $space-sm;
     padding: $space-sm;
-    &-btn {
-      @include flexbox($justify: flex-end, $gap: $space-md);
+    &-option {
+      width: 100%;
+      display: grid;
+      gap: $space-sm;
+      grid-template-columns: 1fr 1fr;
+      button {
+        width: 100%;
+      }
     }
   }
 </style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index 6017e998d..71ab061b0 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -18,65 +18,76 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref } from 'vue'
-  import { useRoute } from 'vue-router'
-  import type { GroupItem } from '@/components/common/button-group/types'
-  import type { TabItem } from '@/components/common/main-card/types'
+  import { computed, onMounted, ref, shallowRef } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { useClusterStore } from '@/store/cluster'
+  import { storeToRefs } from 'pinia'
+  import { execCommand } from '@/api/command'
+  import { Command } from '@/api/command/types'
+  import { CommonStatus, CommonStatusTexts } from '@/enums/state'
   import Overview from './overview.vue'
   import Service from './service.vue'
   import Host from './host.vue'
   import User from './user.vue'
-  import Job from './job.vue'
+  import Job from '@/components/job/index.vue'
+  import type { TabItem } from '@/components/common/main-card/types'
+  import type { GroupItem } from '@/components/common/button-group/types'
+  import type { ClusterStatusType } from '@/api/cluster/types'
 
-  const route = useRoute()
-  const title = computed(() => route.params.cluster as string)
-  const desc = ref('我是描述')
+  const { t } = useI18n()
+  const clusterStore = useClusterStore()
+  const { currCluster, loading } = storeToRefs(clusterStore)
   const activeKey = ref('1')
-  const tabs = ref<TabItem[]>([
+  const statusColors = shallowRef<Record<ClusterStatusType, keyof typeof CommonStatusTexts>>({
+    1: 'healthy',
+    2: 'unhealthy',
+    3: 'unknow'
+  })
+  const tabs = computed((): TabItem[] => [
     {
       key: '1',
-      title: '概览'
+      title: t('common.overview')
     },
     {
       key: '2',
-      title: '服务'
+      title: t('common.service')
     },
     {
       key: '3',
-      title: '主机'
+      title: t('common.host')
     },
     {
       key: '4',
-      title: '用户'
+      title: t('common.user')
     },
     {
       key: '5',
-      title: '作业'
+      title: t('common.job')
     }
   ])
   const actionGroup = computed<GroupItem[]>(() => [
     {
       shape: 'default',
       type: 'primary',
-      text: '添加服务',
+      text: t('common.add', [t('common.service')]),
       clickEvent: () => addService && addService()
     },
     {
       shape: 'default',
       type: 'default',
-      text: '其他操作',
+      text: t('common.more_operations'),
       dropdownMenu: [
         {
-          action: 'start',
-          text: '启动集群'
+          action: 'Start',
+          text: t('common.start', [t('common.cluster')])
         },
         {
-          action: 'restart',
-          text: '重启集群'
+          action: 'Restart',
+          text: t('common.restart', [t('common.cluster')])
         },
         {
-          action: 'stop',
-          text: '停止集群'
+          action: 'Stop',
+          text: t('common.stop', [t('common.cluster')])
         }
       ],
       dropdownMenuClickEvent: (info) => dropdownMenuClick && dropdownMenuClick(info)
@@ -88,22 +99,46 @@
     return componnts[parseInt(activeKey.value) - 1]
   })
 
-  const dropdownMenuClick: GroupItem['dropdownMenuClickEvent'] = ({ key }) => {
-    console.log('key :>> ', key)
+  const dropdownMenuClick: GroupItem['dropdownMenuClickEvent'] = async ({ key }) => {
+    try {
+      await execCommand({
+        command: key as keyof typeof Command,
+        clusterId: currCluster.value.id,
+        commandLevel: 'cluster'
+      })
+      clusterStore.loadClusters()
+      clusterStore.getClusterDetail()
+    } catch (error) {
+      console.log('error :>> ', error)
+    }
   }
 
   const addService: GroupItem['clickEvent'] = () => {
     console.log('add :>> ')
   }
+
+  onMounted(() => {
+    clusterStore.getClusterDetail()
+  })
 </script>
 
 <template>
-  <header-card :title="title" avatar="cluster" :desc="desc" :action-groups="actionGroup" />
-  <main-card v-model:active-key="activeKey" :tabs="tabs">
-    <template #tab-item>
-      <component :is="getCompName"></component>
-    </template>
-  </main-card>
+  <a-spin :spinning="loading">
+    <header-card
+      :title="currCluster.displayName"
+      avatar="cluster"
+      :status="CommonStatus[statusColors[currCluster.status as ClusterStatusType]]"
+      :desc="currCluster.desc"
+      :action-groups="actionGroup"
+    />
+    <main-card v-model:active-key="activeKey" :tabs="tabs">
+      <template #tab-item>
+        <keep-alive>
+          <component :is="getCompName" v-bind="currCluster"></component>
+        </keep-alive>
+      </template>
+    </main-card>
+  </a-spin>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/job.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/job.vue
deleted file mode 100644
index 90a1eb21b..000000000
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/job.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<!--
-  ~ 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.
--->
-
-<script setup lang="ts">
-  import { type JobListItem, getJobList } from './components/mock'
-  import { ref } from 'vue'
-  import type { TableColumnType } from 'ant-design-vue'
-  import useBaseTable from '@/composables/use-base-table'
-
-  const columns: TableColumnType[] = [
-    {
-      title: '#',
-      width: '48px',
-      key: 'index',
-      customRender: ({ index }) => {
-        return `${index + 1}`
-      }
-    },
-    {
-      title: '名称',
-      key: 'name',
-      dataIndex: 'name',
-      ellipsis: true
-    },
-    {
-      title: '状态',
-      key: 'status',
-      dataIndex: 'status'
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-      ellipsis: true
-    },
-    {
-      title: '更新时间',
-      dataIndex: 'updateTime',
-      ellipsis: true
-    }
-  ]
-  const data = ref<JobListItem[]>(getJobList(50))
-  const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
-    columns,
-    rows: data.value
-  })
-</script>
-
-<template>
-  <div class="job">
-    <header>
-      <div class="host-title">{{ $t('job.job_list') }}</div>
-    </header>
-    <a-table
-      :loading="loading"
-      :data-source="dataSource"
-      :columns="columnsProp"
-      :pagination="paginationProps"
-      @change="onChange"
-    >
-      <template #bodyCell="{ record, column }">
-        <template v-if="column.key === 'name'">
-          <a-typography-link underline> {{ record.name }} </a-typography-link>
-        </template>
-        <template v-if="column.key === 'status'">
-          <a-progress :percent="record.progress" :status="record.status" />
-        </template>
-      </template>
-    </a-table>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  .job {
-    header {
-      margin-bottom: $space-md;
-    }
-  }
-</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
index c7daf8346..3ec9aed42 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
@@ -18,89 +18,46 @@
 -->
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import type { MenuProps } from 'ant-design-vue'
+  import { computed, ref, shallowRef, useAttrs } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { storeToRefs } from 'pinia'
+  import { useServiceStore } from '@/store/service'
+  import { formatFromByte } from '@/utils/storage'
+  import { CommonStatus, CommonStatusTexts } from '@/enums/state'
   import GaugeChart from './components/gauge-chart.vue'
   import CategoryChart from './components/category-chart.vue'
-
-  const baseConfig = {
-    clusterStatus: '集群状态',
-    clusterName: '集群名',
-    clusterDesc: '集群备注',
-    hostCount: '主机数',
-    serviceCount: '服务数',
-    memory: '内存',
-    coreCount: '核心数',
-    diskSize: '磁盘大小',
-    creator: '创建人'
-  } as any
-
-  const baseInfo = {
-    clusterStatus: 'succsss',
-    clusterName: '集群名集群名集群名集群名集群名集群名集群名',
-    clusterDesc: '集群备注',
-    hostCount: '15个主机',
-    serviceCount: '15个服务',
-    memory: '内存',
-    coreCount: '15个核心',
-    diskSize: '磁盘大小',
-    creator: '创建人'
-  } as any
-
-  const serviceStack = [
-    {
-      stackId: 1,
-      stackName: 'Bigtop Stack',
-      stackVersion: 'bigtop-3.3.0',
-      services: [
-        {
-          id: 1,
-          name: 'HDFS'
-        },
-        {
-          id: 2,
-          name: 'Hive'
-        }
-      ]
-    },
-    {
-      stackId: 2,
-      stackName: 'Extra Stack',
-      stackVersion: 'extra-1.0.0',
-      services: [
-        {
-          id: 1,
-          name: 'Doris'
-        },
-        {
-          id: 2,
-          name: 'SeaTunnel'
-        }
-      ]
-    }
-  ]
-
-  const serviceOperates = [
-    {
-      action: 'start',
-      text: '启动服务'
-    },
-    {
-      action: 'restart',
-      text: '重启服务'
-    },
-    {
-      action: 'stop',
-      text: '停止服务'
-    }
-  ]
+  import type { ClusterStatusType, ClusterVO } from '@/api/cluster/types'
+  import type { MenuProps } from 'ant-design-vue'
 
   type TimeRangeText = '1m' | '15m' | '30m' | '1h' | '6h' | '30h'
   type TimeRangeItem = {
     text: TimeRangeText
     time: string
   }
-  const timeRanges: TimeRangeItem[] = [
+
+  const { t } = useI18n()
+  const attrs = useAttrs() as ClusterVO
+  const serviceStore = useServiceStore()
+  const currTimeRange = ref<TimeRangeText>('15m')
+  const chartData = ref({
+    chart1: [],
+    chart2: [],
+    chart3: [],
+    chart4: []
+  })
+  const statusColors = shallowRef<Record<ClusterStatusType, keyof typeof CommonStatusTexts>>({
+    1: 'healthy',
+    2: 'unhealthy',
+    3: 'unknow'
+  })
+  const { locateStackWithService } = storeToRefs(serviceStore)
+  const clusterDetail = computed(() => ({
+    ...attrs,
+    totalMemory: formatFromByte(attrs.totalMemory as number),
+    totalDisk: formatFromByte(attrs.totalDisk as number)
+  }))
+  const noChartData = computed(() => Object.values(chartData.value).every((v) => v.length === 0))
+  const timeRanges = computed((): TimeRangeItem[] => [
     {
       text: '1m',
       time: ''
@@ -125,9 +82,43 @@
       text: '30h',
       time: ''
     }
-  ]
-
-  const currTimeRange = ref<TimeRangeText>('15m')
+  ])
+  const baseConfig = computed((): Partial<Record<keyof ClusterVO, string>> => {
+    return {
+      status: t('overview.cluster_status'),
+      displayName: t('overview.cluster_name'),
+      desc: t('overview.cluster_desc'),
+      totalHost: t('overview.host_count'),
+      totalService: t('overview.service_count'),
+      totalMemory: t('overview.memory'),
+      totalProcessor: t('overview.core_count'),
+      totalDisk: t('overview.disk_size'),
+      createUser: t('overview.creator')
+    }
+  })
+  const unitOfBaseConfig = computed((): Partial<Record<keyof ClusterVO, string>> => {
+    return {
+      totalHost: t('overview.unit_host'),
+      totalService: t('overview.unit_service'),
+      totalProcessor: t('overview.unit_processor')
+    }
+  })
+  const detailKeys = computed(() => Object.keys(baseConfig.value) as (keyof ClusterVO)[])
+  const serviceStack = computed(() => locateStackWithService.value)
+  const serviceOperates = computed(() => [
+    {
+      action: 'start',
+      text: t('common.start', [t('common.service')])
+    },
+    {
+      action: 'restart',
+      text: t('common.restart', [t('common.service')])
+    },
+    {
+      action: 'stop',
+      text: t('common.stop', [t('common.service')])
+    }
+  ])
 
   const handleServiceOperate: MenuProps['onClick'] = (item) => {
     console.log('item :>> ', item.key)
@@ -142,66 +133,99 @@
   <div class="dashboard">
     <a-row :gutter="[50, 16]" :wrap="true">
       <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="7" style="display: flex; flex-direction: column; gap: 24px">
-        <!-- base info -->
-        <a-descriptions layout="vertical" bordered>
+        <div class="base-info">
+          <div class="box-title">
+            <a-typography-text strong :content="$t('overview.basic_info')" />
+          </div>
+          <div>
+            <a-descriptions layout="vertical" bordered>
+              <a-descriptions-item>
+                <template #label>
+                  <div class="desc-sub-label">
+                    <a-typography-text strong :content="$t('overview.detail')" />
+                  </div>
+                </template>
+                <div class="desc-sub-item-wrp">
+                  <div class="desc-sub-item">
+                    <template v-for="base in detailKeys" :key="base">
+                      <div class="desc-sub-item-desc">
+                        <a-typography-text
+                          class="desc-sub-item-desc-column"
+                          type="secondary"
+                          :content="baseConfig[base]"
+                        />
+                        <a-tag
+                          v-if="base === 'status'"
+                          class="reset-tag"
+                          :color="CommonStatus[statusColors[clusterDetail[base] as ClusterStatusType]]"
+                        >
+                          <status-dot :color="CommonStatus[statusColors[clusterDetail[base] as ClusterStatusType]]" />
+                          {{
+                            clusterDetail[base] &&
+                            $t(`common.${statusColors[clusterDetail[base] as ClusterStatusType]}`)
+                          }}
+                        </a-tag>
+                        <a-typography-text
+                          v-else
+                          class="desc-sub-item-desc-column"
+                          :content="
+                            Object.keys(unitOfBaseConfig).includes(base)
+                              ? `${clusterDetail[base]} ${unitOfBaseConfig[base]}`
+                              : `${clusterDetail[base]}`
+                          "
+                        />
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </a-descriptions-item>
+            </a-descriptions>
+          </div>
+        </div>
+        <!-- service info -->
+        <template v-if="serviceStack.length == 0">
+          <div class="service-info">
+            <div class="box-title">
+              <a-typography-text strong :content="$t('overview.service_info')" />
+            </div>
+            <div class="box-empty">
+              <a-empty />
+            </div>
+          </div>
+        </template>
+        <a-descriptions v-else layout="vertical" bordered :column="1">
           <template #title>
-            <a-typography-text strong content="基本信息" />
+            <a-typography-text strong :content="$t('overview.service_info')" />
           </template>
-          <a-descriptions-item>
+          <a-descriptions-item v-for="stack in serviceStack" :key="stack.stackName">
             <template #label>
               <div class="desc-sub-label">
-                <a-typography-text strong content="详情" />
+                <a-typography-text strong :content="stack.stackName" />
+                <a-typography-text type="secondary" :content="stack.stackVersion" />
               </div>
             </template>
-            <div class="desc-sub-item-wrp">
-              <div class="desc-sub-item">
-                <template v-for="base in Object.keys(baseInfo)" :key="base">
-                  <div class="desc-sub-item-desc">
-                    <a-typography-text type="secondary" :content="baseConfig[base]" />
-                    <a-typography-text :content="baseInfo[base]" />
-                  </div>
+            <div v-for="service in stack.services" :key="service.id" class="service-item">
+              <a-avatar shape="square" :size="16" />
+              <a-typography-text :content="service.displayName" />
+              <a-dropdown :trigger="['click']">
+                <a-button type="text" shape="circle" size="small">
+                  <svg-icon name="more" style="margin: 0" />
+                </a-button>
+                <template #overlay>
+                  <a-menu @click="handleServiceOperate">
+                    <a-menu-item v-for="operate in serviceOperates" :key="operate.action">
+                      <span>{{ operate.text }}</span>
+                    </a-menu-item>
+                  </a-menu>
                 </template>
-              </div>
+              </a-dropdown>
             </div>
           </a-descriptions-item>
         </a-descriptions>
-        <!-- service info -->
-        <a-descriptions layout="vertical" bordered :column="1">
-          <template #title>
-            <a-typography-text strong content="服务信息" />
-          </template>
-          <template v-for="stack in serviceStack" :key="stack.stackId">
-            <a-descriptions-item>
-              <template #label>
-                <div class="desc-sub-label">
-                  <a-typography-text strong :content="stack.stackName" />
-                  <a-typography-text type="secondary" :content="stack.stackVersion" />
-                </div>
-              </template>
-              <div v-for="service in stack.services" :key="service.id" class="service-item">
-                <a-avatar shape="square" :size="16" />
-                <a-typography-text :content="service.name" />
-
-                <a-dropdown :trigger="['click']">
-                  <a-button type="text" shape="circle" size="small">
-                    <svg-icon name="more" style="margin: 0" />
-                  </a-button>
-                  <template #overlay>
-                    <a-menu @click="handleServiceOperate">
-                      <a-menu-item v-for="operate in serviceOperates" :key="operate.action">
-                        <span>{{ operate.text }}</span>
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-              </div>
-            </a-descriptions-item>
-          </template>
-        </a-descriptions>
       </a-col>
       <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="17">
-        <div class="chart-title">
-          <a-typography-text strong content="图表" />
+        <div class="box-title">
+          <a-typography-text strong :content="$t('overview.chart')" />
           <a-space :size="12">
             <div
               v-for="time in timeRanges"
@@ -215,25 +239,30 @@
             </div>
           </a-space>
         </div>
-        <a-row class="chart-wrp">
+        <template v-if="noChartData">
+          <div class="box-empty">
+            <a-empty />
+          </div>
+        </template>
+        <a-row v-else class="box-content">
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <gauge-chart chart-id="chart1" title="内存使用率" />
+              <gauge-chart chart-id="chart1" :title="$t('overview.memory_usage')" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <gauge-chart chart-id="chart2" title="CPU 使用率" />
+              <gauge-chart chart-id="chart2" :title="$t('overview.cpu_usage')" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <category-chart chart-id="chart4" title="CPU 使用率" />
+              <category-chart chart-id="chart4" :title="$t('overview.cpu_usage')" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <category-chart chart-id="chart3" title="内存使用率" />
+              <category-chart chart-id="chart3" :title="$t('overview.memory_usage')" />
             </div>
           </a-col>
         </a-row>
@@ -243,68 +272,78 @@
 </template>
 
 <style lang="scss" scoped>
-  .dashboard {
-    .service-item {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
-      gap: $space-md;
-      align-items: center;
-      padding: $space-md;
-      border-bottom: 1px solid #e5e5e5;
-    }
-
-    .chart-title {
-      display: flex;
-      justify-content: space-between;
+  .box {
+    &-title {
+      @include flexbox($justify: space-between);
       margin-bottom: 20px;
     }
 
-    .time-range {
-      padding-inline: 6px;
-      border-radius: 4px;
-      text-align: center;
-      cursor: pointer;
-      user-select: none;
-      outline: none;
-      transition: background-color 0.3s;
-
-      &:hover {
-        color: $color-primary-text-hover;
-      }
-      &-activated {
-        color: $color-primary-text;
-      }
-    }
-
-    .chart-wrp {
+    &-content {
       border-radius: 8px;
       overflow: hidden;
       box-sizing: border-box;
       border: 1px solid $color-border;
     }
 
-    .chart-item-wrp {
+    &-empty {
+      @include flexbox($justify: center, $align: center);
+      min-height: 200px;
+      border-radius: 8px;
+      box-sizing: border-box;
       border: 1px solid $color-border;
-      margin-right: -1px;
-      margin-bottom: -1px;
+    }
+  }
 
-      &:first-child {
-        border-left: 0;
-        border-top: 0;
-      }
+  .time-range {
+    padding-inline: 6px;
+    border-radius: 4px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition: background-color 0.3s;
 
-      &:not(:last-child) {
-        border-right: 0;
-      }
+    &:hover {
+      color: $color-primary-text-hover;
+    }
+    &-activated {
+      color: $color-primary-text;
+    }
+  }
 
-      &:nth-child(n + 3):not(:nth-child(4)) {
-        border-bottom: 0;
-        border-left: 0;
-      }
+  .service-item {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: $space-md;
+    align-items: center;
+    padding: $space-md;
+    border-bottom: 1px solid #3b2020;
+  }
+
+  .chart-item-wrp {
+    border: 1px solid $color-border;
+    margin-right: -1px;
+    margin-bottom: -1px;
+
+    &:first-child {
+      border-left: 0;
+      border-top: 0;
+    }
+
+    &:not(:last-child) {
+      border-right: 0;
+    }
+
+    &:nth-child(n + 3):not(:nth-child(4)) {
+      border-bottom: 0;
+      border-left: 0;
     }
+  }
 
+  .dashboard {
     :deep(.ant-descriptions-view) {
       overflow: hidden;
+      border-color: $color-border;
       .ant-descriptions-item-label {
         padding: 0;
       }
@@ -314,17 +353,23 @@
     }
 
     .desc-sub-item-wrp {
-      display: flex;
-      gap: $space-md;
+      @include flexbox($gap: $space-md);
       padding: $space-md;
+      :deep(.ant-tag) {
+        width: fit-content;
+        @include flexbox($align: center, $gap: 4px);
+      }
     }
 
     .desc-sub-item {
-      @include flexbox($direction: column, $gap: $space-md);
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      gap: 16px;
       &-desc {
-        display: grid;
-        grid-template-columns: 56px auto;
-        gap: 30px;
+        display: contents;
+        &-column {
+          text-align: left;
+        }
       }
     }
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index 007a9cb21..f8062f57c 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -18,16 +18,26 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onMounted, ref, shallowRef } from 'vue'
-  import { getServices, StatusColors, StatusTexts, type ServiceItem } from './components/mock'
+  import { computed, onActivated, shallowRef, toRefs, useAttrs } from 'vue'
   import { usePngImage } from '@/utils/tools'
   import { useI18n } from 'vue-i18n'
+  import { useServiceStore } from '@/store/service'
+  import { CommonStatus, CommonStatusTexts } from '@/enums/state'
   import FilterForm from '@/components/common/filter-form/index.vue'
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { FilterFormItem } from '@/components/common/filter-form/types'
+  import type { ServiceListParams, ServiceStatusType } from '@/api/service/types'
+  import type { ClusterVO } from '@/api/cluster/types'
 
   const { t } = useI18n()
-  const data = ref<ServiceItem[]>([])
+  const attrs = useAttrs() as ClusterVO
+  const serviceStore = useServiceStore()
+  const { services, loading } = toRefs(serviceStore)
+  const statusColors = shallowRef<Record<ServiceStatusType, keyof typeof CommonStatusTexts>>({
+    1: 'healthy',
+    2: 'unhealthy',
+    3: 'unknow'
+  })
   const actionGroups = shallowRef<GroupItem[]>([
     {
       action: 'start',
@@ -63,19 +73,19 @@
     {
       type: 'search',
       key: 'serviceName',
-      label: '服务名'
+      label: t('service.name')
     },
     {
       type: 'status',
-      key: 'restart',
-      label: '需要重启',
+      key: 'restartFlag',
+      label: t('service.required_restart'),
       options: [
         {
-          label: '需重启',
+          label: t('common.required'),
           value: 1
         },
         {
-          label: '无需重启',
+          label: t('common.not_required'),
           value: 2
         }
       ]
@@ -83,73 +93,71 @@
     {
       type: 'status',
       key: 'status',
-      label: '状态',
+      label: t('common.status'),
       options: [
         {
-          label: t(`common.${StatusTexts.success}`),
-          value: StatusTexts.success
+          label: t(`common.${statusColors.value[1]}`),
+          value: 1
         },
         {
-          label: t(`common.${StatusTexts.error}`),
-          value: StatusTexts.error
+          label: t(`common.${statusColors.value[2]}`),
+          value: 2
         },
         {
-          label: t(`common.${StatusTexts.unknow}`),
-          value: StatusTexts.unknow
+          label: t(`common.${statusColors.value[3]}`),
+          value: 3
         }
       ]
     }
   ])
 
-  const onFilter = (filters: any) => {
-    console.log('filters :>> ', filters)
+  const getServices = (filters?: ServiceListParams) => {
+    attrs.id != undefined && serviceStore.getServices(attrs.id, filters)
   }
 
-  onMounted(() => {
-    data.value = getServices()
+  onActivated(() => {
+    getServices()
   })
 </script>
 
 <template>
-  <div class="service">
-    <filter-form :filter-items="filterFormItems" @filter="onFilter" />
-    <a-card v-for="item in data" :key="item.key" :hoverable="true" class="service-item">
-      <div class="header">
-        <div class="header-base-wrp">
-          <a-avatar
-            v-if="item.serviceName"
-            :src="usePngImage(item.serviceName.toLowerCase())"
-            :size="42"
-            class="header-icon"
-          />
-          <div class="header-base-title">
-            <span>{{ `${item.serviceName}` }}</span>
-            <span class="small-gray">{{ item.version }}</span>
+  <a-spin :spinning="loading" class="service">
+    <filter-form :filter-items="filterFormItems" @filter="getServices" />
+    <a-empty v-if="services.length == 0" style="width: 100%" />
+    <template v-else>
+      <a-card v-for="item in services" :key="item.id" :hoverable="true" class="service-item">
+        <div class="header">
+          <div class="header-base-wrp">
+            <a-avatar v-if="item.name" :src="usePngImage(item.name.toLowerCase())" :size="42" class="header-icon" />
+            <div class="header-base-title">
+              <span>{{ `${item.displayName}` }}</span>
+              <span class="small-gray">{{ item.version }}</span>
+            </div>
+            <div class="header-base-status">
+              <a-tag :color="statusColors[item.status]">
+                <div class="header-base-status-inner">
+                  <status-dot :color="CommonStatus[statusColors[item.status]]" />
+                  <span class="small">{{ $t(`common.${CommonStatusTexts[item.status]}`) }}</span>
+                </div>
+              </a-tag>
+            </div>
           </div>
-          <div class="header-base-status">
-            <a-tag :color="StatusColors[item.status]">
-              <div class="header-base-status-inner">
-                <status-dot :color="StatusColors[item.status]" />
-                <span class="small">{{ $t(`common.${StatusTexts[item.status]}`) }}</span>
-              </div>
-            </a-tag>
+          <div class="header-restart-status">
+            <span class="small-gray">{{ `${$t('common.restart')}` }}</span>
+            <status-dot :color="CommonStatus[statusColors[item.status]]" />
+            <span class="small">{{ `${item.restartFlag ? $t('common.required') : $t('common.not_required')}` }}</span>
           </div>
         </div>
-        <div class="header-restart-status">
-          <span class="small-gray">{{ `${$t('common.restart')}` }}</span>
-          <status-dot :color="StatusColors[item.status]" />
-          <span class="small">{{ `${item.restart ? $t('common.required') : $t('common.not_required')}` }}</span>
+        <div class="item-content">
+          <button-group :auto="true" :space="0" :groups="actionGroups">
+            <template #icon="{ item: groupItem }">
+              <svg-icon :name="groupItem.icon || ''" />
+            </template>
+          </button-group>
         </div>
-      </div>
-      <div class="item-content">
-        <button-group :auto="true" :space="0" :groups="actionGroups">
-          <template #icon="{ item: groupItem }">
-            <svg-icon :name="groupItem.icon || ''" />
-          </template>
-        </button-group>
-      </div>
-    </a-card>
-  </div>
+      </a-card>
+    </template>
+  </a-spin>
 </template>
 
 <style lang="scss" scoped>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
index 2955093de..fc9672561 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
@@ -18,12 +18,16 @@
 -->
 
 <script setup lang="ts">
-  import { type UserListItem, getUserList } from './components/mock'
-  import { ref } from 'vue'
-  import type { TableColumnType } from 'ant-design-vue'
+  import { computed, onActivated, useAttrs } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { getUserListOfService } from '@/api/cluster'
   import useBaseTable from '@/composables/use-base-table'
+  import type { TableColumnType } from 'ant-design-vue'
+  import type { ClusterVO, ServiceUserVO } from '@/api/cluster/types'
 
-  const columns: TableColumnType[] = [
+  const { t } = useI18n()
+  const attrs = useAttrs() as ClusterVO
+  const columns = computed((): TableColumnType[] => [
     {
       title: '#',
       width: '48px',
@@ -33,55 +37,68 @@
       }
     },
     {
-      title: '服务名',
-      dataIndex: 'serviceName',
+      title: t('service.name'),
+      dataIndex: 'displayName',
       width: '20%',
       ellipsis: true
     },
     {
-      title: '用户名',
-      dataIndex: 'userName',
+      title: t('user.username'),
+      dataIndex: 'user',
       width: '15%',
       ellipsis: true
     },
     {
-      title: '用户组',
+      title: t('user.user_group'),
       dataIndex: 'userGroup',
       width: '20%',
       ellipsis: true
     },
     {
-      title: '描述',
-      dataIndex: 'descrip',
+      title: t('common.desc'),
+      dataIndex: 'desc',
       ellipsis: true
     }
-  ]
-  const data = ref<UserListItem[]>(getUserList(50))
-  const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
-    columns,
-    rows: data.value
+  ])
+  const { dataSource, loading, filtersParams, paginationProps, onChange } = useBaseTable<ServiceUserVO>({
+    columns: columns.value,
+    rows: []
+  })
+
+  const loadUserListOfService = async () => {
+    if (attrs.id == undefined || !paginationProps.value) {
+      loading.value = false
+      return
+    }
+    try {
+      const data = await getUserListOfService(attrs.id, filtersParams.value)
+      dataSource.value = data.content
+      paginationProps.value.total = data.total
+    } catch (error) {
+      console.log('error :>> ', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onActivated(() => {
+    loadUserListOfService()
   })
 </script>
 
 <template>
   <div class="user">
     <header>
-      <div class="host-title">{{ $t('user.user_list') }}</div>
+      <div class="header-title">{{ $t('user.user_list') }}</div>
     </header>
     <a-table
       :loading="loading"
       :data-source="dataSource"
-      :columns="columnsProp"
+      :columns="columns"
       :pagination="paginationProps"
       @change="onChange"
     ></a-table>
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .user {
-    header {
-      margin-bottom: $space-md;
-    }
-  }
-</style>
+<style lang="scss" scoped></style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
index 85ed4a0a7..31b357be1 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
@@ -249,14 +249,13 @@
     {
       type: 'input',
       field: 'agentDir',
-      slot: 'agentDirSlot',
       formItemProps: {
         name: 'agentDir',
         label: t('host.agent_path')
       },
       controlProps: {
         disabled: isEdit.value,
-        placeholder: t('common.enter_error', [`${t('host.agent_path')}`.toLowerCase()])
+        placeholder: t('host.default_agent_path')
       }
     },
     {
@@ -273,13 +272,12 @@
     {
       type: 'input',
       field: 'grpcPort',
-      slot: 'grpcPortSlot',
       formItemProps: {
         name: 'grpcPort',
         label: t('host.grpc_port')
       },
       controlProps: {
-        placeholder: t('common.enter_error', [`${t('host.grpc_port')}`.toLowerCase()])
+        placeholder: t('host.default_grpc_port')
       }
     },
     {
@@ -506,7 +504,7 @@
             </a-upload>
           </a-form-item>
         </template>
-        <template #agentDirSlot="{ item, state }">
+        <!-- <template #agentDirSlot="{ item, state }">
           <a-form-item>
             <template #label>
               <div class="question">
@@ -518,8 +516,8 @@
             </template>
             <a-input v-bind="item.controlProps" v-model:value="state[item.field]" />
           </a-form-item>
-        </template>
-        <template #grpcPortSlot="{ item, state }">
+        </template> -->
+        <!-- <template #grpcPortSlot="{ item, state }">
           <a-form-item>
             <template #label>
               <div class="question">
@@ -531,7 +529,7 @@
             </template>
             <a-input v-bind="item.controlProps" v-model:value="state[item.field]" />
           </a-form-item>
-        </template>
+        </template> -->
       </auto-form>
       <template #footer>
         <footer>
@@ -555,7 +553,6 @@
   }
   footer {
     width: 100%;
-    display: flex;
-    justify-content: flex-end;
+    @include flexbox($justify: flex-end);
   }
 </style>
diff --git a/bigtop-manager-ui/src/store/cluster/index.ts b/bigtop-manager-ui/src/store/cluster/index.ts
index 5c8459c6d..f994d1391 100644
--- a/bigtop-manager-ui/src/store/cluster/index.ts
+++ b/bigtop-manager-ui/src/store/cluster/index.ts
@@ -17,49 +17,65 @@
  * under the License.
  */
 
+import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
-import { ClusterVO } from '@/api/cluster/types.ts'
-import { ref } from 'vue'
-import { getClusterList } from '@/api/cluster'
+import { useRoute } from 'vue-router'
+import { getCluster, getClusterList } from '@/api/cluster'
+import { useServiceStore } from '@/store/service'
+import type { ClusterVO } from '@/api/cluster/types.ts'
 
 export const useClusterStore = defineStore(
   'cluster',
   () => {
+    const route = useRoute()
+    const serviceStore = useServiceStore()
     const clusters = ref<ClusterVO[]>([])
-    const count = ref(0)
+    const loading = ref(false)
+    const currCluster = ref<ClusterVO>({})
+    const clusterId = computed(() => (route.params.id as string) || undefined)
 
     const addCluster = async () => {
-      count.value = count.value + 1
       await loadClusters()
     }
 
     const delCluster = async () => {
-      if (count.value < 0) {
-        count.value = 0
+      await loadClusters()
+    }
+
+    const getClusterDetail = async () => {
+      if (clusterId.value == undefined) {
         return
       }
-      count.value = count.value - 1
-      await loadClusters()
+      try {
+        loading.value = true
+        currCluster.value = await getCluster(parseInt(clusterId.value))
+        currCluster.value.id != undefined && serviceStore.getServices(currCluster.value.id)
+      } catch (error) {
+        console.log('error :>> ', error)
+      } finally {
+        loading.value = false
+      }
     }
 
     const loadClusters = async () => {
-      const data = await getClusterList()
-      clusters.value = data as ClusterVO[]
+      clusters.value = await getClusterList()
     }
 
     return {
       clusters,
-      count,
+      loading,
+      currCluster,
       addCluster,
       delCluster,
-      loadClusters
+      loadClusters,
+      getClusterDetail
     }
   },
   {
     persist: false
     // persist: {
     //   storage: sessionStorage,
-    //   paths: ['clusters', 'count']
+    //   paths: ['clusters',]
     // }
   }
 )
diff --git a/bigtop-manager-ui/src/store/service/index.ts b/bigtop-manager-ui/src/store/service/index.ts
new file mode 100644
index 000000000..330903f3b
--- /dev/null
+++ b/bigtop-manager-ui/src/store/service/index.ts
@@ -0,0 +1,65 @@
+/*
+ * 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
+ *
+ *    https://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 { defineStore, storeToRefs } from 'pinia'
+import { computed, ref } from 'vue'
+import { getServiceList } from '@/api/service'
+import { useStackStore } from '@/store/stack/index'
+import type { ServiceListParams, ServiceVO } from '@/api/service/types'
+
+export const useServiceStore = defineStore(
+  'service',
+  () => {
+    const stackStore = useStackStore()
+    const services = ref<ServiceVO[]>([])
+    const total = ref(0)
+    const loading = ref(false)
+    const { stacks } = storeToRefs(stackStore)
+
+    const serviceNames = computed(() => services.value.map((v) => v.name))
+    const locateStackWithService = computed(() =>
+      stacks.value.filter((item) =>
+        item.services.some((service) => service.name && serviceNames.value.includes(service.name))
+      )
+    )
+
+    const getServices = async (clusterId: number, filterParams?: ServiceListParams) => {
+      try {
+        loading.value = true
+        const data = await getServiceList(clusterId, { ...filterParams, pageNum: 1, pageSize: 50 })
+        services.value = data.content
+        total.value = data.total
+      } catch (error) {
+        console.log('error :>> ', error)
+      } finally {
+        loading.value = false
+      }
+    }
+
+    return {
+      services,
+      loading,
+      getServices,
+      locateStackWithService
+    }
+  },
+  {
+    persist: false
+  }
+)
diff --git a/bigtop-manager-ui/src/styles/index.scss b/bigtop-manager-ui/src/styles/index.scss
index f2bf2d1f5..6689600f6 100644
--- a/bigtop-manager-ui/src/styles/index.scss
+++ b/bigtop-manager-ui/src/styles/index.scss
@@ -54,3 +54,9 @@
 :where(.ant-modal-header) {
   margin-bottom: 16px !important;
 }
+
+
+.header-title {
+  font-weight: 500;
+  margin-bottom: $space-md;
+}
diff --git a/bigtop-manager-ui/src/utils/tools.ts b/bigtop-manager-ui/src/utils/tools.ts
index 9092937ae..53c8f059f 100644
--- a/bigtop-manager-ui/src/utils/tools.ts
+++ b/bigtop-manager-ui/src/utils/tools.ts
@@ -93,3 +93,23 @@ export const pick = <T extends object, K extends keyof T>(obj: T, keys: K[]): Pi
     {} as Pick<T, K>
   )
 }
+
+type Data = { [key: string]: any }
+type Result = { [key: string]: any | undefined }
+
+export const processData = (data: Data): Result => {
+  const result: Result = {}
+  if (!data) {
+    return result
+  }
+  for (const [key, value] of Object.entries(data)) {
+    if (value === null) {
+      result[key] = undefined
+    } else if (Array.isArray(value)) {
+      result[key] = value[0] || undefined
+    } else {
+      result[key] = value
+    }
+  }
+  return result
+}
diff --git a/bigtop-manager-ui/tests/__composables__/use-table.test.ts b/bigtop-manager-ui/tests/__composables__/use-table.test.ts
index 006a537f9..60a76270b 100644
--- a/bigtop-manager-ui/tests/__composables__/use-table.test.ts
+++ b/bigtop-manager-ui/tests/__composables__/use-table.test.ts
@@ -71,7 +71,6 @@ describe('useBaseTable', () => {
     }
     expect(result.paginationProps.value).toEqual(expect.objectContaining(expectedPaginationProps))
     // Test showTotal function separately
-    console.log('result.paginationProps.value.showTotal(10) :>> ', result.paginationProps.value.showTotal(10))
     expect(result.paginationProps.value.showTotal(10)).toBe('Total: 10')
   })