diff --git a/bigtop-manager-ui/src/api/cluster/index.ts b/bigtop-manager-ui/src/api/cluster/index.ts
index 8d74653b2..ed38562f4 100644
--- a/bigtop-manager-ui/src/api/cluster/index.ts
+++ b/bigtop-manager-ui/src/api/cluster/index.ts
@@ -18,9 +18,24 @@
  */
 
 import request from '@/api/request.ts'
-import { ClusterVO } from '@/api/cluster/types.ts'
+import type { ClusterVO, UpdateClusterParam } from './types'
 
-export const getClusters = (): Promise<ClusterVO[]> => {
+export const getCluster = (id: number): Promise<ClusterVO[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${id}`
+  })
+}
+
+export const updateCluster = (id: number, data: UpdateClusterParam) => {
+  return request({
+    method: 'put',
+    url: `/clusters/${id}`,
+    data
+  })
+}
+
+export const getClusterList = (): Promise<ClusterVO[]> => {
   return request({
     method: 'get',
     url: '/clusters'
diff --git a/bigtop-manager-ui/src/api/cluster/types.ts b/bigtop-manager-ui/src/api/cluster/types.ts
index 1af5c674c..b9f8beb53 100644
--- a/bigtop-manager-ui/src/api/cluster/types.ts
+++ b/bigtop-manager-ui/src/api/cluster/types.ts
@@ -17,28 +17,21 @@
  * under the License.
  */
 
-export interface ClusterReq {
-  clusterName: string
-  clusterType: number
-  stackName: string
-  stackVersion: string
-  repoInfoList: RepoReq[]
-  hostnames: string[]
-}
+export type UpdateClusterParam = { name: string; desc: string }
 
 export interface ClusterVO {
-  id: number
-  clusterName: string
-  clusterType: number
-  stackName: string
-  stackVersion: string
-  selected: boolean
-}
-
-export interface RepoReq {
-  repoId: string
-  repoName: string
-  baseUrl: string
-  os: string
-  arch: string
+  createUser?: string
+  desc?: string
+  displayName?: string
+  id?: number
+  name?: string
+  rootDir?: string
+  status?: number
+  totalDisk?: number
+  totalHost?: number
+  totalMemory?: number
+  totalProcessor?: number
+  totalService?: number
+  type?: number
+  userGroup?: string
 }
diff --git a/bigtop-manager-ui/src/api/command/index.ts b/bigtop-manager-ui/src/api/command/index.ts
index 197fad134..8e84df0d7 100644
--- a/bigtop-manager-ui/src/api/command/index.ts
+++ b/bigtop-manager-ui/src/api/command/index.ts
@@ -18,9 +18,9 @@
  */
 
 import request from '@/api/request.ts'
-import { CommandVO } from '@/api/command/types.ts'
+import { CommandRequest, CommandVO } from '@/api/command/types.ts'
 
-export const execCommand = (data: any): Promise<CommandVO> => {
+export const execCommand = (data: CommandRequest): Promise<CommandVO> => {
   return request({
     method: 'post',
     url: '/command',
diff --git a/bigtop-manager-ui/src/api/command/types.ts b/bigtop-manager-ui/src/api/command/types.ts
index a1d66922d..30f599906 100644
--- a/bigtop-manager-ui/src/api/command/types.ts
+++ b/bigtop-manager-ui/src/api/command/types.ts
@@ -17,7 +17,123 @@
  * under the License.
  */
 
+export interface CommandRequest {
+  clusterCommand?: ClusterCommandReq
+  clusterId?: number
+  command: Command
+  commandLevel: CommandLevel
+  componentCommands?: ComponentCommandReq[]
+  customCommand?: string
+  hostCommands?: HostCommandReq[]
+  serviceCommands?: ServiceCommandReq[]
+  [property: string]: any
+}
+
+export interface ClusterCommandReq {
+  desc?: string
+  displayName: string
+  hosts: HostReq[]
+  name: string
+  rootDir?: string
+  type: number
+  userGroup?: string
+  [property: string]: any
+}
+
+export interface HostReq {
+  agentDir?: string
+  authType?: number | string
+  clusterId?: number
+  desc?: string
+  grpcPort?: number
+  hostnames?: string[]
+  sshKeyFilename?: string
+  sshKeyPassword?: string
+  sshKeyString?: string
+  sshPassword?: string
+  sshPort?: number
+  sshUser?: string
+  [property: string]: any
+}
+
+export enum Command {
+  Add = 'Add',
+  Check = 'Check',
+  Configure = 'Configure',
+  Custom = 'Custom',
+  Init = 'Init',
+  Prepare = 'Prepare',
+  Restart = 'Restart',
+  Start = 'Start',
+  Status = 'Status',
+  Stop = 'Stop'
+}
+
+export enum CommandLevel {
+  Cluster = 'cluster',
+  Component = 'component',
+  Host = 'host',
+  Service = 'service'
+}
+
+export interface ComponentCommandReq {
+  componentName: string
+  hostnames: string[]
+  [property: string]: any
+}
+
+export interface HostCommandReq {
+  agentDir?: string
+  authType?: number
+  clusterId?: number
+  desc?: string
+  grpcPort?: number
+  hostnames?: string[]
+  sshKeyFilename?: string
+  sshKeyPassword?: string
+  sshKeyString?: string
+  sshPassword?: string
+  sshPort?: number
+  sshUser?: string
+  [property: string]: any
+}
+
+export interface ServiceCommandReq {
+  componentHosts: ComponentHostReq[]
+  configs: ServiceConfigReq[]
+  serviceName: string
+  [property: string]: any
+}
+
+export interface ComponentHostReq {
+  componentName: string
+  hostnames: string[]
+  [property: string]: any
+}
+
+export interface ServiceConfigReq {
+  id?: number
+  name?: string
+  properties?: PropertyReq[]
+  [property: string]: any
+}
+
+export interface PropertyReq {
+  attrs?: AttrsReq
+  desc?: string
+  displayName?: string
+  name: string
+  value?: string
+  [property: string]: any
+}
+
+export interface AttrsReq {
+  type?: string
+  [property: string]: any
+}
+
 export interface CommandVO {
-  id: number
-  state: string
+  id?: number
+  state?: string
+  [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/api/component/index.ts b/bigtop-manager-ui/src/api/component/index.ts
index 8a0d4fba4..60cba9a84 100644
--- a/bigtop-manager-ui/src/api/component/index.ts
+++ b/bigtop-manager-ui/src/api/component/index.ts
@@ -16,13 +16,3 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { HostComponentVO } from '@/api/component/types.ts'
-import request from '@/api/request.ts'
-
-export const getHostComponents = (clusterId: number): Promise<HostComponentVO[]> => {
-  return request({
-    method: 'get',
-    url: '/clusters/' + clusterId + '/host-components'
-  })
-}
diff --git a/bigtop-manager-ui/src/api/component/types.ts b/bigtop-manager-ui/src/api/component/types.ts
index a7238170e..86e619dcb 100644
--- a/bigtop-manager-ui/src/api/component/types.ts
+++ b/bigtop-manager-ui/src/api/component/types.ts
@@ -17,30 +17,30 @@
  * under the License.
  */
 
-import { MaintainState } from '@/enums/state'
-
+/**
+ * ComponentVO
+ */
 export interface ComponentVO {
-  id: number
-  componentName: string
-  displayName: string
-  category: string
-  serviceName: string
-  clusterName: string
-  cardinality: string
+  cardinality?: string
+  category?: string
+  displayName?: string
+  hostname?: string
+  id?: number
+  name?: string
+  quickLink?: QuickLinkVO
+  serviceDisplayName?: string
+  serviceId?: number
+  serviceName?: string
+  stack?: string
+  status?: number
+  [property: string]: any
 }
 
-export interface ServiceComponentVO {
-  serviceName: string
-  components: ComponentVO[]
-}
-
-export interface HostComponentVO {
-  id: number
-  componentName: string
-  displayName: string
-  category: string
-  serviceName: string
-  clusterName: string
-  hostname: string
-  state: MaintainState
+/**
+ * QuickLinkVO
+ */
+export interface QuickLinkVO {
+  displayName?: string
+  url?: string
+  [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/api/hosts/index.ts b/bigtop-manager-ui/src/api/hosts/index.ts
index ba5bb533f..f970167ea 100644
--- a/bigtop-manager-ui/src/api/hosts/index.ts
+++ b/bigtop-manager-ui/src/api/hosts/index.ts
@@ -18,11 +18,34 @@
  */
 
 import request from '@/api/request.ts'
-import { HostVO } from '@/api/hosts/types.ts'
+import { HostParams, HostVO, HostVOList, InstalledStatusVO } from '@/api/hosts/types.ts'
 
-export const getHosts = (clusterId: number): Promise<HostVO[]> => {
+export const getHosts = (): Promise<HostVOList> => {
   return request({
     method: 'get',
-    url: '/clusters/' + clusterId + '/hosts'
+    url: '/hosts'
+  })
+}
+
+export const addHost = (data: HostParams): Promise<HostVO> => {
+  return request({
+    method: 'post',
+    url: '/hosts',
+    data
+  })
+}
+
+export const installDependencies = (data: HostParams) => {
+  return request({
+    method: 'post',
+    url: '/hosts/install-dependencies',
+    data
+  })
+}
+
+export const getInstalledStatus = (): Promise<InstalledStatusVO[]> => {
+  return request({
+    method: 'get',
+    url: '/hosts/installed-status'
   })
 }
diff --git a/bigtop-manager-ui/src/api/hosts/types.ts b/bigtop-manager-ui/src/api/hosts/types.ts
index b1280eb0d..519a3c29c 100644
--- a/bigtop-manager-ui/src/api/hosts/types.ts
+++ b/bigtop-manager-ui/src/api/hosts/types.ts
@@ -17,17 +17,68 @@
  * under the License.
  */
 
+import type { PageVO } from '@/api/types'
+
+export type HostVOList = PageVO<HostVO>
+
+/**
+ * HostVO
+ */
 export interface HostVO {
-  id: number
-  clusterName: string
-  hostname: string
-  ipv4: string
-  arch: string
-  os: string
-  availableProcessors: string
-  freeMemorySize: string
-  totalMemorySize: string
-  state: string
-  freeDisk: string
-  totalDisk: string
+  agentDir?: string
+  arch?: string
+  authType?: number
+  availableProcessors?: number
+  clusterDisplayName?: string
+  clusterName?: string
+  componentNum?: number
+  desc?: string
+  errInfo?: string
+  freeDisk?: number
+  freeMemorySize?: number
+  grpcPort?: number
+  hostname?: string
+  id?: number
+  ipv4?: string
+  ipv6?: string
+  os?: string
+  sshKeyFilename?: string
+  sshKeyPassword?: string
+  sshKeyString?: string
+  sshPassword?: string
+  sshPort?: number
+  sshUser?: string
+  status?: number
+  totalDisk?: number
+  totalMemorySize?: number
+  [property: string]: any
+}
+
+export interface HostParams {
+  agentDir?: string
+  authType?: number | string // '1-password，2-key，3-no_auth',
+  clusterId?: number
+  desc?: string
+  grpcPort?: number
+  hostnames?: string[]
+  sshKeyFilename?: string
+  sshKeyPassword?: string
+  sshKeyString?: string
+  sshPassword?: string
+  sshPort?: number
+  sshUser?: string
+  [property: string]: any
+}
+
+export interface InstalledStatusVO {
+  hostname?: string
+  message?: string
+  status?: Status
+}
+
+export enum Status {
+  Failed = 'FAILED',
+  Installing = 'INSTALLING',
+  Success = 'SUCCESS',
+  Unknown = 'UNKNOW'
 }
diff --git a/bigtop-manager-ui/src/api/job/index.ts b/bigtop-manager-ui/src/api/job/index.ts
index 14f8e2aaa..c7aaa0520 100644
--- a/bigtop-manager-ui/src/api/job/index.ts
+++ b/bigtop-manager-ui/src/api/job/index.ts
@@ -16,28 +16,47 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import request from '@/api/request.ts'
-import { JobVO, Pagination } from '@/api/job/types.ts'
+import type { JobParams, JobList, TaskLogParams, TaskParams, JobVO, StageVO, TaskVO } from './types'
 
-export const getJob = (id: number, clusterId: number): Promise<JobVO> => {
+export const retryJob = (pathParams: JobParams): Promise<JobVO> => {
+  return request({
+    method: 'post',
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/retry`
+  })
+}
+
+export const getJobList = (clusterId: number): Promise<JobList> => {
   return request({
     method: 'get',
-    url: '/clusters/' + clusterId + '/jobs/' + id
+    url: `/clusters/${clusterId}/jobs`
   })
 }
 
-export const retryJob = (id: number, clusterId: number): Promise<JobVO> => {
+export const getJobDetails = (pathParams: JobParams): Promise<JobVO> => {
   return request({
-    method: 'post',
-    url: '/clusters/' + clusterId + '/jobs/' + id + '/retry'
+    method: 'get',
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}`
+  })
+}
+
+export const getStageList = (pathParams: JobParams): Promise<StageVO[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages`
+  })
+}
+
+export const getTaskList = (pathParams: TaskParams): Promise<TaskVO[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages/${pathParams.stageId}/tasks`
   })
 }
 
-export const getJobs = (clusterId: number, pagination: Pagination): Promise<{ content: JobVO[]; total: number }> => {
+export const getTaskLog = (pathParams: TaskLogParams): Promise<string[]> => {
   return request({
     method: 'get',
-    url: `/clusters/${clusterId}/jobs`,
-    params: pagination
+    url: `/clusters/${pathParams.clusterId}/jobs/${pathParams.jobId}/stages/${pathParams.stageId}/tasks/${pathParams.taskId}/log`
   })
 }
diff --git a/bigtop-manager-ui/src/api/job/types.ts b/bigtop-manager-ui/src/api/job/types.ts
index 81aaf643a..86e545554 100644
--- a/bigtop-manager-ui/src/api/job/types.ts
+++ b/bigtop-manager-ui/src/api/job/types.ts
@@ -17,40 +17,51 @@
  * under the License.
  */
 
-import { State } from '@/enums/state'
+import type { PageVO } from '@/api/types'
 
-export type StateType = keyof typeof State
+export type JobList = PageVO<JobVO>
+export type StageList = PageVO<StageVO>
+export type JobParams = { clusterId: number; jobId: number }
+export type TaskParams = JobParams & { stageId: number }
+export type TaskLogParams = TaskParams & { taskId: number }
 
-interface BaseVO {
-  id: number
-  name: string
-  state: StateType
-  createTime?: string
-  updateTime?: string
-  progress?: number
-}
-
-export interface JobVO extends BaseVO {
-  stages: StageVO[]
-}
+export type StateType = keyof typeof State
 
-export interface StageVO extends BaseVO {
-  order: number
-  tasks: TaskVO[]
+export enum State {
+  'Pending' = 'pending',
+  'Processing' = 'processing',
+  'Successful' = 'successful',
+  'Failed' = 'failed',
+  'Canceled' = 'canceled'
 }
 
-export interface TaskVO extends BaseVO {
-  hostname: string
+export interface JobVO {
+  createTime?: string
+  id?: number
+  name?: string
+  stages?: StageVO[]
+  state?: StateType
+  updateTime?: string
+  [property: string]: any
 }
 
-export interface Pagination {
-  pageNum: number
-  pageSize: number
-  sort?: 'asc' | 'desc'
-  orderBy?: string
+export interface StageVO {
+  createTime?: string
+  id?: number
+  name?: string
+  order?: number
+  state?: StateType
+  tasks?: TaskVO[]
+  updateTime?: string
+  [property: string]: any
 }
 
-export interface OuterData {
-  meta: JobVO[]
-  currItem: StageVO | TaskVO | undefined
+export interface TaskVO {
+  createTime?: string
+  hostname?: string
+  id?: number
+  name?: string
+  state?: StateType
+  updateTime?: string
+  [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/api/llm-config/types.ts b/bigtop-manager-ui/src/api/llm-config/types.ts
index f1ef52129..2dacbe326 100644
--- a/bigtop-manager-ui/src/api/llm-config/types.ts
+++ b/bigtop-manager-ui/src/api/llm-config/types.ts
@@ -26,7 +26,8 @@ export enum AuthPlatformStatus {
 export enum LlmLogo {
   'openai' = 1,
   'dashscope' = 2,
-  'qianfan' = 3
+  'qianfan' = 3,
+  'deepseek' = 4
 }
 
 export type LlmLogoFlag = `${LlmLogo}`
diff --git a/bigtop-manager-ui/src/api/repo/index.ts b/bigtop-manager-ui/src/api/repo/index.ts
new file mode 100644
index 000000000..94108d6c6
--- /dev/null
+++ b/bigtop-manager-ui/src/api/repo/index.ts
@@ -0,0 +1,36 @@
+/*
+ * 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 { RepoUpdate, RepoVO } from './types'
+import request from '@/api/request.ts'
+
+export const getRepoList = (): Promise<RepoVO[]> => {
+  return request({
+    method: 'get',
+    url: 'repos'
+  })
+}
+
+export const updateRepo = (data: RepoUpdate[]) => {
+  return request({
+    method: 'put',
+    url: 'repos',
+    data
+  })
+}
diff --git a/bigtop-manager-ui/src/api/repo/types.ts b/bigtop-manager-ui/src/api/repo/types.ts
index ade427565..597adce4c 100644
--- a/bigtop-manager-ui/src/api/repo/types.ts
+++ b/bigtop-manager-ui/src/api/repo/types.ts
@@ -16,12 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 export interface RepoVO {
-  repoId: string
-  repoName: string
-  repoType: string
-  baseUrl: string
-  os: string
-  arch: string
+  arch?: string
+  baseUrl?: string
+  id?: number
+  name?: string
+  [property: string]: any
+}
+
+export interface RepoUpdate {
+  baseUrl?: string
+  id?: number
+  [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/api/request-util.ts b/bigtop-manager-ui/src/api/request-util.ts
new file mode 100644
index 000000000..7a2da40e3
--- /dev/null
+++ b/bigtop-manager-ui/src/api/request-util.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 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 post = <T, U = any>(url: string, data?: U, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+  return request.post(url, data, config)
+}
+
+const put = <T, U = any>(url: string, data: U, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+  return request.put(url, data, config)
+}
+
+const del = <T>(url: string, config?: AxiosRequestConfig): Promise<ResponseEntity<T>> => {
+  return request.delete(url, config)
+}
+
+export { get, post, put, del }
diff --git a/bigtop-manager-ui/src/api/request.ts b/bigtop-manager-ui/src/api/request.ts
index b1c7771b3..2578fd50f 100644
--- a/bigtop-manager-ui/src/api/request.ts
+++ b/bigtop-manager-ui/src/api/request.ts
@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import type { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import axios, { AxiosError } from 'axios'
 import { message } from 'ant-design-vue'
 import { ResponseEntity } from '@/api/types'
 import router from '@/router'
@@ -25,13 +26,17 @@ import i18n from '@/locales'
 import { API_EXPIRE_TIME } from '@/utils/constant.ts'
 import { Locale } from '@/store/locale/types.ts'
 
-const request = axios.create({
+const baseConfig = {
   baseURL: import.meta.env.VITE_APP_BASE_API,
   withCredentials: true,
   timeout: API_EXPIRE_TIME
-})
+}
+
+const axiosInstance: AxiosInstance = axios.create(baseConfig)
+const request = axiosInstance.interceptors.request
+const response = axiosInstance.interceptors.response
 
-request.interceptors.request.use((config: InternalAxiosRequestConfig<any>): InternalAxiosRequestConfig<any> => {
+request.use((config: InternalAxiosRequestConfig<any>): InternalAxiosRequestConfig<any> => {
   config.headers = config.headers || {}
 
   const locale = i18n.global.locale.value as Locale
@@ -45,7 +50,7 @@ request.interceptors.request.use((config: InternalAxiosRequestConfig<any>): Inte
   return config
 })
 
-request.interceptors.response.use(
+response.use(
   async (res: AxiosResponse) => {
     if (res.config.responseType === 'stream') {
       // Skip SSE api check
@@ -80,4 +85,4 @@ request.interceptors.response.use(
   }
 )
 
-export default request
+export default axiosInstance
diff --git a/bigtop-manager-ui/src/api/service/index.ts b/bigtop-manager-ui/src/api/service/index.ts
index 9b61a3845..6642f0948 100644
--- a/bigtop-manager-ui/src/api/service/index.ts
+++ b/bigtop-manager-ui/src/api/service/index.ts
@@ -17,12 +17,73 @@
  * under the License.
  */
 
+import type {
+  ServiceParams,
+  ServiceVO,
+  ServiceConfig,
+  ServiceConfigSnapshot,
+  ServiceList,
+  SnapshotData,
+  SnapshotRecovery
+} from './types'
 import request from '@/api/request.ts'
-import { ServiceVO } from '@/api/service/types.ts'
 
-export const getService = (clusterId: number): Promise<ServiceVO[]> => {
+export const getServiceList = (clusterId: number): Promise<ServiceList> => {
   return request({
     method: 'get',
-    url: '/clusters/' + clusterId + '/services'
+    url: `/clusters/${clusterId}/services`
+  })
+}
+
+export const getService = (params: ServiceParams): Promise<ServiceVO> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${params.clusterId}/services/${params.id}`
+  })
+}
+
+export const getServiceConfigs = (params: ServiceParams): Promise<ServiceConfig[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${params.clusterId}/services/${params.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 getServiceConfigSnapshotsList = (params: ServiceParams): Promise<ServiceConfigSnapshot[]> => {
+  return request({
+    method: 'get',
+    url: `/clusters/${params.clusterId}/services/${params.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`,
+    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 deleteServiceConfigSnapshot = (params: SnapshotRecovery): Promise<boolean> => {
+  return request({
+    method: 'delete',
+    url: `/clusters/${params.clusterId}/services/${params.id}/config-snapshots/${params.snapshotId}`
   })
 }
diff --git a/bigtop-manager-ui/src/api/service/types.ts b/bigtop-manager-ui/src/api/service/types.ts
index d6a5d0d24..2afefea75 100644
--- a/bigtop-manager-ui/src/api/service/types.ts
+++ b/bigtop-manager-ui/src/api/service/types.ts
@@ -17,21 +17,51 @@
  * under the License.
  */
 
+import type { ComponentVO } from '@/api/component/types'
+import type { PageVO } from '@/api/types'
+
+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 interface ServiceVO {
+  components?: ComponentVO[]
+  configs?: ServiceConfig[]
+  desc?: string
+  displayName?: string
+  id?: number
+  name?: string
+  requiredServices?: string[]
+  restartFlag?: boolean
+  stack?: string
+  status?: number
+  user?: string
+  version?: string
+}
+
+export interface ServiceConfig {
   id?: number
-  serviceName: string
-  displayName: string
-  serviceDesc: string
-  serviceVersion: string
-  clusterName?: string
-  serviceUser?: string
-  serviceGroup?: string
-  isClient?: boolean
-  isHealthy?: boolean
-  quickLinks?: QuickLinkVO[]
+  name?: string
+  properties?: Property[]
 }
 
-export interface QuickLinkVO {
-  displayName: string
-  url: string
+export interface Property {
+  attrs?: Attr
+  desc?: string
+  displayName?: string
+  name: string
+  value?: string
+}
+
+export interface Attr {
+  type?: string
+}
+
+export interface ServiceConfigSnapshot {
+  configJson?: string
+  desc?: string
+  id?: number
+  name?: string
+  [property: string]: any
 }
diff --git a/bigtop-manager-ui/src/api/stack/index.ts b/bigtop-manager-ui/src/api/stack/index.ts
index f7d400429..cbd1825c2 100644
--- a/bigtop-manager-ui/src/api/stack/index.ts
+++ b/bigtop-manager-ui/src/api/stack/index.ts
@@ -19,8 +19,6 @@
 
 import request from '@/api/request.ts'
 import { StackVO } from '@/api/stack/types.ts'
-import { ServiceComponentVO } from '@/api/component/types.ts'
-import { ServiceConfigVO } from '@/api/config/types.ts'
 
 export const getStacks = (): Promise<StackVO[]> => {
   return request({
@@ -28,17 +26,3 @@ export const getStacks = (): Promise<StackVO[]> => {
     url: '/stacks'
   })
 }
-
-export const getStackComponents = (stackName: string, stackVersion: string): Promise<ServiceComponentVO[]> => {
-  return request({
-    method: 'get',
-    url: '/stacks/' + stackName + '/' + stackVersion + '/components'
-  })
-}
-
-export const getStackConfigs = (stackName: string, stackVersion: string): Promise<ServiceConfigVO[]> => {
-  return request({
-    method: 'get',
-    url: '/stacks/' + stackName + '/' + stackVersion + '/configurations'
-  })
-}
diff --git a/bigtop-manager-ui/src/api/stack/types.ts b/bigtop-manager-ui/src/api/stack/types.ts
index 3b7440123..67f655372 100644
--- a/bigtop-manager-ui/src/api/stack/types.ts
+++ b/bigtop-manager-ui/src/api/stack/types.ts
@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import { ServiceVO } from '@/api/service/types.ts'
 import { RepoVO } from '@/api/repo/types.ts'
+import { ServiceVO } from '../service/types'
 
 export interface StackVO {
   stackName: string
diff --git a/bigtop-manager-ui/src/api/upload-file/index.ts b/bigtop-manager-ui/src/api/upload-file/index.ts
new file mode 100644
index 000000000..8b5644e9e
--- /dev/null
+++ b/bigtop-manager-ui/src/api/upload-file/index.ts
@@ -0,0 +1,31 @@
+/*
+ * 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 request from '@/api/request.ts'
+
+export const uploadFile = (data: FormData): Promise<string> => {
+  return request({
+    method: 'post',
+    url: '/files/upload-key',
+    data,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
diff --git a/bigtop-manager-ui/src/assets/images/cluster.png b/bigtop-manager-ui/src/assets/images/cluster.png
new file mode 100644
index 000000000..142077657
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/cluster.png differ
diff --git a/bigtop-manager-ui/src/assets/images/deepseek.png b/bigtop-manager-ui/src/assets/images/deepseek.png
new file mode 100644
index 000000000..161d03e29
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/deepseek.png differ
diff --git a/bigtop-manager-ui/src/assets/images/default.png b/bigtop-manager-ui/src/assets/images/default.png
new file mode 100644
index 000000000..40849b5a3
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/default.png differ
diff --git a/bigtop-manager-ui/src/assets/images/flink.png b/bigtop-manager-ui/src/assets/images/flink.png
new file mode 100644
index 000000000..c508e1e77
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/flink.png differ
diff --git a/bigtop-manager-ui/src/assets/images/grafana.png b/bigtop-manager-ui/src/assets/images/grafana.png
new file mode 100644
index 000000000..307d392d0
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/grafana.png differ
diff --git a/bigtop-manager-ui/src/assets/images/hadoop.png b/bigtop-manager-ui/src/assets/images/hadoop.png
new file mode 100644
index 000000000..176856a96
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/hadoop.png differ
diff --git a/bigtop-manager-ui/src/assets/images/hbase.png b/bigtop-manager-ui/src/assets/images/hbase.png
new file mode 100644
index 000000000..c975a8d68
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/hbase.png differ
diff --git a/bigtop-manager-ui/src/assets/images/hive.png b/bigtop-manager-ui/src/assets/images/hive.png
new file mode 100644
index 000000000..095282218
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/hive.png differ
diff --git a/bigtop-manager-ui/src/assets/images/host.png b/bigtop-manager-ui/src/assets/images/host.png
new file mode 100644
index 000000000..1e7040303
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/host.png differ
diff --git a/bigtop-manager-ui/src/assets/images/kafka.png b/bigtop-manager-ui/src/assets/images/kafka.png
new file mode 100644
index 000000000..3f18c3dd9
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/kafka.png differ
diff --git a/bigtop-manager-ui/src/assets/images/mysql.png b/bigtop-manager-ui/src/assets/images/mysql.png
new file mode 100644
index 000000000..a37ef476e
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/mysql.png differ
diff --git a/bigtop-manager-ui/src/assets/images/prometheus.png b/bigtop-manager-ui/src/assets/images/prometheus.png
new file mode 100644
index 000000000..1b87345f9
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/prometheus.png differ
diff --git a/bigtop-manager-ui/src/assets/images/seatunnel.png b/bigtop-manager-ui/src/assets/images/seatunnel.png
new file mode 100644
index 000000000..0e859ebea
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/seatunnel.png differ
diff --git a/bigtop-manager-ui/src/assets/images/solr.png b/bigtop-manager-ui/src/assets/images/solr.png
new file mode 100644
index 000000000..6d0d02daa
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/solr.png differ
diff --git a/bigtop-manager-ui/src/assets/images/spark.png b/bigtop-manager-ui/src/assets/images/spark.png
new file mode 100644
index 000000000..3a3cede97
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/spark.png differ
diff --git a/bigtop-manager-ui/src/assets/images/svg/bottom.svg b/bigtop-manager-ui/src/assets/images/svg/bottom.svg
new file mode 100644
index 000000000..edc1e747f
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/bottom.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(51, 51, 51, 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/canceled.svg b/bigtop-manager-ui/src/assets/images/svg/canceled.svg
new file mode 100644
index 000000000..1adf2461c
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/canceled.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
+    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6819 14.6668 7.99998C14.6668 4.31808 11.6821 1.33331 8.00016 1.33331C4.31826 1.33331 1.3335 4.31808 1.3335 7.99998C1.3335 11.6819 4.31826 14.6666 8.00016 14.6666Z"
+    stroke="rgba(250, 173, 20, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round">
+  </path>
+  <path stroke="rgba(250, 173, 20, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M5 5L11 11">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/error.svg b/bigtop-manager-ui/src/assets/images/svg/error.svg
new file mode 100644
index 000000000..44d3bf63c
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/error.svg
@@ -0,0 +1,32 @@
+<?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
+    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
+    stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M9.88549 6.11438L6.11426 9.88561">
+  </path>
+  <path stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M6.11426 6.11438L9.88549 9.88561">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/failed.svg b/bigtop-manager-ui/src/assets/images/svg/failed.svg
new file mode 100644
index 000000000..44d3bf63c
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/failed.svg
@@ -0,0 +1,32 @@
+<?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
+    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
+    stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M9.88549 6.11438L6.11426 9.88561">
+  </path>
+  <path stroke="rgba(255, 77, 79, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M6.11426 6.11438L9.88549 9.88561">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/detail.vue b/bigtop-manager-ui/src/assets/images/svg/filter.svg
similarity index 69%
rename from bigtop-manager-ui/src/pages/cluster-manage/cluster/detail.vue
rename to bigtop-manager-ui/src/assets/images/svg/filter.svg
index d76126734..22f0cceff 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/detail.vue
+++ b/bigtop-manager-ui/src/assets/images/svg/filter.svg
@@ -1,3 +1,4 @@
+<?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
@@ -16,11 +17,9 @@
   ~ specific language governing permissions and limitations
   ~ under the License.
 -->
-
-<script setup lang="ts"></script>
-
-<template>
-  <div>detail </div>
-</template>
-
-<style scoped></style>
+<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 d="M2 3L6.8 8.60593L6.8 12.8148L9.2 14L9.2 8.60593L14 3L2 3Z" stroke="rgba(51, 51, 51, 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/filter_activated.svg b/bigtop-manager-ui/src/assets/images/svg/filter_activated.svg
new file mode 100644
index 000000000..af28467f9
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/filter_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="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <path d="M2 3L6.8 8.60593L6.8 12.8148L9.2 14L9.2 8.60593L14 3L2 3Z" 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/installing.svg b/bigtop-manager-ui/src/assets/images/svg/installing.svg
new file mode 100644
index 000000000..a51ec2056
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/installing.svg
@@ -0,0 +1,58 @@
+<?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(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M8 1.33337L8 2.66671">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M11.3332 2.22656L10.6665 3.38126">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M13.7734 4.66663L12.6187 5.33329">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M14.6668 8L13.3335 8">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M13.7734 11.3333L12.6187 10.6666">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M11.3332 13.7735L10.6665 12.6188">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M8 14.6667L8 13.3334">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M4.6665 13.7735L5.33317 12.6188">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M2.22656 11.3333L3.38127 10.6666">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M1.3335 8L2.66683 8">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M2.22656 4.66663L3.38127 5.33329">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M4.6665 2.22656L5.33317 3.38126">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/more_line.svg b/bigtop-manager-ui/src/assets/images/svg/more_line.svg
new file mode 100644
index 000000000..0fa0cca82
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/more_line.svg
@@ -0,0 +1,32 @@
+<?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
+    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
+    stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <circle cx="4.66650390625" cy="8" r="1" fill="#333333">
+  </circle>
+  <circle cx="8" cy="8" r="1" fill="#333333">
+  </circle>
+  <circle cx="11.33349609375" cy="8" r="1" fill="#333333">
+  </circle>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/processing.svg b/bigtop-manager-ui/src/assets/images/svg/processing.svg
new file mode 100644
index 000000000..015797f81
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/processing.svg
@@ -0,0 +1,28 @@
+<?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="M1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325">
+  </path>
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M12 8C12 5.79087 10.2091 4 8 4C5.79087 4 4 5.79087 4 8C4 10.2091 5.79087 12 8 12">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/question.svg b/bigtop-manager-ui/src/assets/images/svg/question.svg
new file mode 100644
index 000000000..79a6923cb
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/question.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">
+    <g opacity="0">
+        <rect x="0" y="0" width="16" height="16" fill="#000000">
+        </rect>
+    </g>
+    <path
+        d="M1 8C1 11.87 4.13 15 8 15C11.87 15 15 11.87 15 8C15 4.13 11.87 1 8 1C4.13 1 1 4.13 1 8ZM7.62 9.8125C7.55 9.8125 7.5 9.7525 7.5 9.6925L7.5 9.3525C7.5 8.9925 7.6 8.6325 7.81 8.3325C8.01 8.0425 8.29 7.8225 8.62 7.7025C9.16 7.4925 9.5 7.0525 9.5 6.5625C9.5 5.8725 8.83 5.3125 8 5.3125C7.17 5.3125 6.5 5.8725 6.5 6.5625L6.5 6.6825C6.5 6.7525 6.44 6.8025 6.38 6.8025L5.62 6.8025C5.56 6.8025 5.5 6.7525 5.5 6.6825L5.5 6.5625C5.5 5.9525 5.77 5.3725 6.26 4.9525C6.73 4.5425 7.34 4.3125 8 4.3125C8.66 4.3125 9.27 4.5325 9.74 4.9525C10.23 5.3725 10.5 5.9525 10.5 6.5625C10.5 7.4625 9.9 8.2825 8.98 8.6325C8.69 8.7425 8.5 9.0225 8.5 9.3325L8.5 9.6925C8.5 9.7525 8.44 9.8125 8.37 9.8125L7.62 9.8125ZM8.005 12.0625C8.345 12.0625 8.625 11.7825 8.625 11.4425C8.625 11.0925 8.345 10.8125 8.005 10.8125C7.655 10.8125 7.375 11.0925 7.375 11.4425C7.375 11.7825 7.655 12.0625 8.005 12.0625Z"
+        fill-rule="evenodd" fill="#000000">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/restart.svg b/bigtop-manager-ui/src/assets/images/svg/restart.svg
new file mode 100644
index 000000000..4d6466755
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/restart.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 d="M7 8L7 6L8.66667 7L10.3333 8L8.66667 9L7 10L7 8Z" stroke="rgba(51, 51, 51, 1)"
+    stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M3.75737 12.2426C4.84313 13.3284 6.34313 14 8 14C11.3137 14 14 11.3137 14 8C14 4.6863 11.3137 2 8 2C6.34313 2 4.84313 2.67157 3.75737 3.75737C3.2047 4.31003 2 5.66667 2 5.66667">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M2 3L2 5.66667L4.66667 5.66667">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/search.svg b/bigtop-manager-ui/src/assets/images/svg/search.svg
new file mode 100644
index 000000000..cbaaf37f2
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/search.svg
@@ -0,0 +1,37 @@
+<?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(0, 0, 0, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M1.33301 2.33331L14.6663 2.33331">
+  </path>
+  <path stroke="rgba(0, 0, 0, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M1.33301 7.66669L4.99967 7.66669">
+  </path>
+  <path stroke="rgba(0, 0, 0, 1)" stroke-width="1.3333333333333333" stroke-linecap="round" d="M1.33301 13L4.99967 13">
+  </path>
+  <path
+    d="M10.5003 11.3334C12.0651 11.3334 13.3337 10.0648 13.3337 8.50002C13.3337 6.93522 12.0651 5.66669 10.5003 5.66669C8.93553 5.66669 7.66699 6.93522 7.66699 8.50002C7.66699 10.0648 8.93553 11.3334 10.5003 11.3334Z"
+    stroke="rgba(0, 0, 0, 1)" stroke-width="1.3333333333333333">
+  </path>
+  <path stroke="rgba(0, 0, 0, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M12.333 10.6667L14.6663 13.0169">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/search_activated.svg b/bigtop-manager-ui/src/assets/images/svg/search_activated.svg
new file mode 100644
index 000000000..4f830254a
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/search_activated.svg
@@ -0,0 +1,37 @@
+<?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-linecap="round"
+    d="M1.33301 2.33331L14.6663 2.33331">
+  </path>
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M1.33301 7.66669L4.99967 7.66669">
+  </path>
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linecap="round" d="M1.33301 13L4.99967 13">
+  </path>
+  <path
+    d="M10.5003 11.3334C12.0651 11.3334 13.3337 10.0648 13.3337 8.50002C13.3337 6.93522 12.0651 5.66669 10.5003 5.66669C8.93553 5.66669 7.66699 6.93522 7.66699 8.50002C7.66699 10.0648 8.93553 11.3334 10.5003 11.3334Z"
+    stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333">
+  </path>
+  <path stroke="rgba(22, 119, 255, 1)" stroke-width="1.3333333333333333" stroke-linecap="round"
+    d="M12.333 10.6667L14.6663 13.0169">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/start.svg b/bigtop-manager-ui/src/assets/images/svg/start.svg
new file mode 100644
index 000000000..e24b7ae02
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/start.svg
@@ -0,0 +1,30 @@
+<?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
+    d="M7.99992 14.6666C11.6818 14.6666 14.6666 11.6818 14.6666 7.99992C14.6666 4.31802 11.6818 1.33325 7.99992 1.33325C4.31802 1.33325 1.33325 4.31802 1.33325 7.99992C1.33325 11.6818 4.31802 14.6666 7.99992 14.6666Z"
+    stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path
+    d="M6.66675 8.00007L6.66675 5.69067L8.66675 6.84537L10.6667 8.00007L8.66675 9.15477L6.66675 10.3095L6.66675 8.00007Z"
+    stroke="rgba(51, 51, 51, 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/stop.svg b/bigtop-manager-ui/src/assets/images/svg/stop.svg
new file mode 100644
index 000000000..48249fa5d
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/stop.svg
@@ -0,0 +1,32 @@
+<?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
+    d="M7.99992 14.6666C11.6818 14.6666 14.6666 11.6818 14.6666 7.99992C14.6666 4.31802 11.6818 1.33325 7.99992 1.33325C4.31802 1.33325 1.33325 4.31802 1.33325 7.99992C1.33325 11.6818 4.31802 14.6666 7.99992 14.6666Z"
+    stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M6.33325 6L6.33325 10">
+  </path>
+  <path stroke="rgba(51, 51, 51, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M9.66675 6L9.66675 10">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/success.svg b/bigtop-manager-ui/src/assets/images/svg/success.svg
new file mode 100644
index 000000000..4b1e36274
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/success.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
+    d="M7.99967 14.6667C9.84061 14.6667 11.5073 13.9205 12.7137 12.7141C13.9201 11.5076 14.6663 9.84097 14.6663 8.00004C14.6663 6.15911 13.9201 4.49244 12.7137 3.28599C11.5073 2.07957 9.84061 1.33337 7.99967 1.33337C6.15874 1.33337 4.49207 2.07957 3.28563 3.28599C2.0792 4.49244 1.33301 6.15911 1.33301 8.00004C1.33301 9.84097 2.0792 11.5076 3.28563 12.7141C4.49207 13.9205 6.15874 14.6667 7.99967 14.6667Z"
+    stroke="rgba(82, 196, 26, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(82, 196, 26, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M5.33301 8L7.33301 10L11.333 6">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/svg/unknow.svg b/bigtop-manager-ui/src/assets/images/svg/unknow.svg
new file mode 100644
index 000000000..2bb5e7912
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/unknow.svg
@@ -0,0 +1,33 @@
+<?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
+    d="M8.00016 14.6666C9.8411 14.6666 11.5078 13.9204 12.7142 12.714C13.9206 11.5075 14.6668 9.84085 14.6668 7.99992C14.6668 6.15899 13.9206 4.49232 12.7142 3.28587C11.5078 2.07945 9.8411 1.33325 8.00016 1.33325C6.15923 1.33325 4.49256 2.07945 3.28612 3.28587C2.07969 4.49232 1.3335 6.15899 1.3335 7.99992C1.3335 9.84085 2.07969 11.5075 3.28612 12.714C4.49256 13.9204 6.15923 14.6666 8.00016 14.6666Z"
+    stroke="rgba(250, 173, 20, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round">
+  </path>
+  <path stroke="rgba(250, 173, 20, 1)" stroke-width="1.3333333333333333" stroke-linejoin="round" stroke-linecap="round"
+    d="M8 9.54159L8 8.20825C9.10457 8.20825 10 7.31282 10 6.20825C10 5.10369 9.10457 4.20825 8 4.20825C6.89543 4.20825 6 5.10369 6 6.20825">
+  </path>
+  <path
+    d="M7.99984 12.5417C8.46007 12.5417 8.83317 12.1686 8.83317 11.7083C8.83317 11.2481 8.46007 10.875 7.99984 10.875C7.5396 10.875 7.1665 11.2481 7.1665 11.7083C7.1665 12.1686 7.5396 12.5417 7.99984 12.5417Z"
+    fill-rule="evenodd" fill="#FAAD14">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/assets/images/tez.png b/bigtop-manager-ui/src/assets/images/tez.png
new file mode 100644
index 000000000..bcceea0ee
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/tez.png differ
diff --git a/bigtop-manager-ui/src/assets/images/zookeeper.png b/bigtop-manager-ui/src/assets/images/zookeeper.png
new file mode 100644
index 000000000..080dd55ed
Binary files /dev/null and b/bigtop-manager-ui/src/assets/images/zookeeper.png differ
diff --git a/bigtop-manager-ui/src/components/ai-assistant/index.vue b/bigtop-manager-ui/src/components/ai-assistant/index.vue
index 871d5c13e..7b0e04963 100644
--- a/bigtop-manager-ui/src/components/ai-assistant/index.vue
+++ b/bigtop-manager-ui/src/components/ai-assistant/index.vue
@@ -170,7 +170,7 @@
       <template #extra>
         <button-group i18n="aiAssistant" :groups="checkActions" @on-click="onActions">
           <template #icon="{ item }">
-            <svg-icon :name="item.icon" />
+            <svg-icon v-if="item.icon" :name="item.icon" />
           </template>
         </button-group>
       </template>
diff --git a/bigtop-manager-ui/src/components/common/auto-form/index.vue b/bigtop-manager-ui/src/components/common/auto-form/index.vue
index 9d924006c..0022d9508 100644
--- a/bigtop-manager-ui/src/components/common/auto-form/index.vue
+++ b/bigtop-manager-ui/src/components/common/auto-form/index.vue
@@ -20,13 +20,15 @@
 <script lang="ts" setup>
   import { computed, onMounted, ref, toRaw, toRefs, watch } from 'vue'
   import { Emits, FormState, Props } from './types'
+  import { useLocaleStore } from '@/store/locale'
+  import { storeToRefs } from 'pinia'
 
   const props = withDefaults(defineProps<Props>(), {
     showButton: true,
     disabledItems: null, // Has higher priority than controlProps of formItems
     hiddenItems: () => [],
     labelCol: () => {
-      return { span: 7 }
+      return { span: 5 }
     },
     wrapperCol: () => {
       return { span: 14 }
@@ -43,6 +45,8 @@
 
   const emits = defineEmits<Emits>()
 
+  const localeStore = useLocaleStore()
+  const { locale } = storeToRefs(localeStore)
   const formRef = ref()
   const formState = ref<FormState>({})
   const tmpCacheFormState = ref<FormState>({})
@@ -71,6 +75,10 @@
     }
   )
 
+  watch(locale, () => {
+    formRef.value.clearValidate()
+  })
+
   const initForm = () => {
     const newForm: FormState = {}
     props.formItems.forEach((item) => {
@@ -85,7 +93,7 @@
 
   const getFormValidation = async () => {
     try {
-      await formRef.value.validateFields()
+      await formRef.value?.validateFields()
       return Promise.resolve(true)
     } catch (error) {
       console.log('Failed:', error)
@@ -142,20 +150,33 @@
     <a-form
       ref="formRef"
       label-align="left"
+      :colon="false"
       :model="formState"
       :label-col="props.labelCol"
       :wrapper-col="props.wrapperCol"
       :disabled="props.formDisabled"
     >
       <div v-for="item in props.formItems" :key="item.field">
-        <slot :="{ item, state: formState }" :name="item.field">
-          <a-form-item v-if="!props.hiddenItems.includes(item.field)" v-bind="item.formItemProps">
+        <slot
+          v-if="!props.hiddenItems.includes(item.field)"
+          :="{ item, state: formState }"
+          :name="item.slot ?? item.field"
+        >
+          <a-form-item v-bind="item.formItemProps">
             <!-- input -->
             <a-input
               v-if="item.type == 'input'"
               v-model:value="formState[item.field]"
               v-bind="item.controlProps"
-              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps.disabled"
+              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps?.disabled"
+              v-on="formItemEvents[item.field] || {}"
+            />
+
+            <a-input-password
+              v-if="item.type == 'inputPassword'"
+              v-model:value="formState[item.field]"
+              v-bind="item.controlProps"
+              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps?.disabled"
               v-on="formItemEvents[item.field] || {}"
             />
 
@@ -164,7 +185,7 @@
               v-if="item.type == 'textarea'"
               v-model:value="formState[item.field]"
               v-bind="item.controlProps"
-              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps.disabled"
+              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps?.disabled"
               v-on="formItemEvents[item.field] || {}"
             />
 
@@ -173,7 +194,7 @@
               v-if="item.type == 'select'"
               v-model:value="formState[item.field]"
               v-bind="item.controlProps"
-              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps.disabled"
+              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps?.disabled"
               v-on="formItemEvents[item.field] || {}"
             >
               <a-select-option
@@ -190,7 +211,7 @@
               v-if="item.type == 'radio'"
               v-model:value="formState[item.field]"
               v-bind="item.controlProps"
-              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps.disabled"
+              :disabled="disabledItems ? disabledItems.includes(item.field) : item.controlProps?.disabled"
               v-on="formItemEvents[item.field] || {}"
             >
               <a-radio
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 bc2b6d500..75b3f5813 100644
--- a/bigtop-manager-ui/src/components/common/button-group/index.vue
+++ b/bigtop-manager-ui/src/components/common/button-group/index.vue
@@ -19,39 +19,91 @@
 
 <script setup lang="ts">
   import { toRefs } from 'vue'
-  import type { Props } from './types'
+  import type { GroupItem, Props } from './types'
+  import { useI18n } from 'vue-i18n'
 
   const props = withDefaults(defineProps<Props>(), {
     i18n: '',
+    textCompact: false,
     groupShape: 'circle',
     groupType: 'text',
+    space: 8,
     groups: () => {
       return []
     }
   })
 
-  const { groups, groupShape, groupType } = toRefs(props)
+  const { t } = useI18n()
+  const { groups, groupShape, groupType, space, args } = toRefs(props)
+
+  const checkTitle = (item: GroupItem) => {
+    if (props.i18n) {
+      if (item.tip) {
+        return t(`${props.i18n}.${item.tip}`)
+      } else if (item.text) {
+        return t(`${props.i18n}.${item.text}`)
+      }
+    } else {
+      return item.tip ? item.tip : item.text ? item.text : undefined
+    }
+  }
 </script>
 
 <template>
-  <a-space>
-    <a-button
-      v-for="(item, idx) in groups"
-      :key="idx"
-      :disabled="item.disabled"
-      :shape="item.shape || groupShape || 'default'"
-      :type="item.type || groupType || 'default'"
-      :title="(item.tip && $t(`${$props.i18n}.${item.tip}`)) || (item.text && $t(`${$props.i18n}.${item.text}`))"
-      @click="item.clickEvent ? item.clickEvent(item) : () => {}"
-    >
-      <template #icon>
-        <slot name="icon" :item="item" />
-      </template>
-      <span v-if="item.text">
-        {{ item.text && $t(`${$props.i18n}.${item.text}`) }}
-      </span>
-    </a-button>
+  <a-space :size="space" :wrap="true" :class="{ 'text-compact': $props.textCompact, 'btn-auto': $props.auto }">
+    <template v-for="(item, _index) in groups" :key="_index">
+      <a-dropdown v-if="item.dropdownMenu">
+        <a-button
+          :disabled="item.disabled"
+          :shape="item.shape || groupShape || 'default'"
+          :type="item.type || groupType || 'default'"
+          :title="checkTitle(item)"
+          @click="item.clickEvent ? item.clickEvent(item) : () => {}"
+        >
+          <template #icon>
+            <slot name="icon" :item="item" />
+          </template>
+          <span v-if="item.text">
+            {{ $props.i18n && item.text ? $t(`${$props.i18n}.${item.text}`) : item.text }}
+          </span>
+        </a-button>
+        <template #overlay>
+          <a-menu @click="item.dropdownMenuClickEvent">
+            <a-menu-item v-for="actionItem in item.dropdownMenu" :key="actionItem.action">
+              {{ actionItem.text }}
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+      <a-button
+        v-else
+        :danger="item.danger"
+        :disabled="item.disabled"
+        :shape="item.shape || groupShape || 'default'"
+        :type="item.type || groupType || 'default'"
+        :title="checkTitle(item)"
+        @click="item.clickEvent ? item.clickEvent(item, args) : () => {}"
+      >
+        <template #icon>
+          <slot name="icon" :item="item" />
+        </template>
+        <span v-if="item.text">
+          {{ $props.i18n && item.text ? $t(`${$props.i18n}.${item.text}`) : item.text }}
+        </span>
+      </a-button>
+    </template>
   </a-space>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .text-compact {
+    button {
+      padding: 0;
+    }
+  }
+  .btn-auto {
+    width: 100%;
+    @include flexbox($align: center, $justify: space-between);
+    margin-bottom: 0 !important;
+  }
+</style>
diff --git a/bigtop-manager-ui/src/components/common/button-group/types.ts b/bigtop-manager-ui/src/components/common/button-group/types.ts
index ae481660d..7f2d17d43 100644
--- a/bigtop-manager-ui/src/components/common/button-group/types.ts
+++ b/bigtop-manager-ui/src/components/common/button-group/types.ts
@@ -17,9 +17,15 @@
  * under the License.
  */
 
+import { MenuItemProps, MenuProps } from 'ant-design-vue'
+
 type BtnType = 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default'
 type ShapeType = 'default' | 'circle' | 'round'
 
+export interface DropdownMenu extends MenuItemProps {
+  action: string
+  text: string
+}
 export interface GroupItem<T = string> {
   icon?: string
   tip?: string
@@ -28,12 +34,19 @@ export interface GroupItem<T = string> {
   type?: BtnType
   shape?: ShapeType
   disabled?: boolean
+  danger?: boolean
+  dropdownMenu?: DropdownMenu[]
   clickEvent?: (item?: GroupItem, ...args: any[]) => void
+  dropdownMenuClickEvent?: MenuProps['onClick']
 }
 
 export interface Props {
-  i18n: string
+  i18n?: string
+  textCompact?: boolean
   groups: GroupItem[]
   groupType?: BtnType
   groupShape?: ShapeType
+  space?: number
+  args?: any
+  auto?: boolean
 }
diff --git a/bigtop-manager-ui/src/components/common/filter-form/index.vue b/bigtop-manager-ui/src/components/common/filter-form/index.vue
new file mode 100644
index 000000000..7562ea370
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/filter-form/index.vue
@@ -0,0 +1,153 @@
+<!--
+  ~ 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 { FilterFormItem } from './types'
+  import { ref, toRefs } from 'vue'
+
+  interface FilterFormPops {
+    filterItems: FilterFormItem[]
+  }
+
+  const props = defineProps<FilterFormPops>()
+  const emits = defineEmits(['filter'])
+  const { filterItems } = toRefs(props)
+
+  const formatFilterFormItems = ref(
+    filterItems.value.map((v) => {
+      const formatData = {
+        ...v,
+        options: v.options?.map((o) => ({
+          ...o,
+          id: v.key,
+          key: o.value
+        }))
+      }
+      return formatData
+    })
+  )
+
+  const filterParams = ref(
+    filterItems.value.map((v) => ({
+      [`${v.key}`]: ''
+    }))
+  )
+
+  const checkSelected = ({ item, itemIdx }: any) => {
+    return filterParams.value[itemIdx][item.key] === ''
+  }
+
+  const resetFilter = ({ item, itemIdx }: any) => {
+    filterParams.value[itemIdx][item.key] = ''
+    confirmFilterParams()
+  }
+
+  const onSelect = ({ item, key }: any, payload: any) => {
+    filterParams.value[payload.itemIdx][item.id] = key
+    confirmFilterParams()
+  }
+
+  const confirmFilterParams = () => {
+    const filters = filterParams.value.reduce((pre, val) => {
+      Object.assign(pre, val)
+      return pre
+    }, {} as any)
+    emits('filter', filters)
+  }
+</script>
+
+<template>
+  <div class="filter-form">
+    <template v-for="(item, itemIdx) in formatFilterFormItems" :key="item">
+      <a-dropdown>
+        <span @click.prevent>
+          <div class="filter-form-label">
+            <span :style="{ color: !checkSelected({ item, itemIdx }) ? 'var(--color-primary)' : 'initial' }">
+              {{ item.label }}
+            </span>
+            <svg-icon name="bottom" 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>
+          </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-space>
+            </div>
+          </template>
+        </template>
+      </a-dropdown>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  :deep(.ant-dropdown-menu-body) {
+    padding-inline: 8px;
+    padding-block: 8px;
+  }
+  :deep(.ant-dropdown-menu-head) {
+    padding: 8px 16px;
+    min-height: 32px;
+  }
+
+  .search {
+    background-color: $color-bg-base;
+    box-shadow: $box-shadow-drawer-up;
+    padding: $space-sm;
+    border-radius: $space-sm;
+    display: flex;
+    flex-direction: column;
+    gap: $space-sm;
+    align-items: flex-end;
+  }
+
+  .filter-form {
+    width: 100%;
+    display: flex;
+    gap: $space-sm;
+    &-label {
+      display: inline-block;
+      cursor: pointer;
+      line-height: 20px;
+      .ant-tag {
+        line-height: 40px;
+        border-radius: 8px;
+      }
+    }
+    &-input-wrp {
+      display: flex;
+      flex-direction: column;
+    }
+    &-input {
+      flex-shrink: 0;
+      margin-block: 10px;
+    }
+    &-option-wrp {
+      max-height: 200px;
+      overflow: auto;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/components/common/filter-form/types.ts b/bigtop-manager-ui/src/components/common/filter-form/types.ts
new file mode 100644
index 000000000..c2d1e3b52
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/filter-form/types.ts
@@ -0,0 +1,31 @@
+/*
+ * 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 interface FilterFormItemOptionItem {
+  value: string | number | boolean
+  label: string
+  [propkey: string]: any
+}
+
+export interface FilterFormItem {
+  type: string
+  key: string
+  label: string
+  options?: FilterFormItemOptionItem[]
+}
diff --git a/bigtop-manager-ui/src/components/common/header-card/index.vue b/bigtop-manager-ui/src/components/common/header-card/index.vue
new file mode 100644
index 000000000..d11d81bb3
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/header-card/index.vue
@@ -0,0 +1,109 @@
+<!--
+  ~ 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 { usePngImage } from '@/utils/tools'
+  import { GroupItem } from '../button-group/types'
+  import { computed } from 'vue'
+
+  interface Props {
+    showAvatar?: boolean
+    showStatus?: boolean
+    avatar?: string
+    title?: string
+    desc?: string
+    status?: string
+    actionGroups?: GroupItem[]
+  }
+
+  interface Emits {
+    (event: 'onClick', item: GroupItem): void
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showAvatar: true,
+    showStatus: true,
+    avatar: '',
+    title: '',
+    desc: '暂无描述',
+    status: 'success',
+    actionGroups: () => {
+      return []
+    }
+  })
+
+  const emits = defineEmits<Emits>()
+  const avatarSrc = computed(() => props.avatar && usePngImage(props.avatar))
+
+  const onActions = (item: GroupItem) => {
+    emits('onClick', item)
+  }
+</script>
+
+<template>
+  <div class="header-card">
+    <slot>
+      <div class="header-card-info">
+        <a-avatar v-if="showAvatar" :src="avatarSrc" shape="square" :size="54" />
+        <div class="card-info-title">
+          <div class="card-info-status">
+            <a-typography-title :level="5">{{ $props.title }}</a-typography-title>
+            <svg-icon v-if="showStatus" :name="status" />
+          </div>
+          <a-typography-text type="secondary">{{ $props.desc }}</a-typography-text>
+        </div>
+      </div>
+      <div class="header-card-action">
+        <slot name="actions">
+          <button-group :groups="$props.actionGroups" @on-click="onActions" />
+        </slot>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .header-card {
+    width: 100%;
+    min-width: 389px;
+    min-height: 102px;
+    @include flexbox($justify: space-between, $align: center);
+    background-color: $color-white;
+    padding: $space-md;
+    margin-bottom: $space-md;
+    &-info {
+      @include flexbox($align: center);
+      gap: $space-md;
+      :deep(.ant-avatar) {
+        border-radius: 4px;
+      }
+    }
+  }
+  .card-info {
+    &-title {
+      @include flexbox($direction: column, $align: space-between, $gap: $space-sm);
+    }
+    &-status {
+      @include flexbox($align: center, $gap: 2px);
+      .ant-typography {
+        margin: 0;
+      }
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/components/common/main-card/index.vue b/bigtop-manager-ui/src/components/common/main-card/index.vue
new file mode 100644
index 000000000..f5efb7a78
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/main-card/index.vue
@@ -0,0 +1,68 @@
+<!--
+  ~ 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 { TabsProps } from 'ant-design-vue'
+  import { TabItem } from './types'
+
+  interface Props {
+    activeKey?: string
+    tabs?: TabItem[]
+  }
+
+  withDefaults(defineProps<Props>(), {
+    activeKey: '',
+    tabs: () => {
+      return []
+    }
+  })
+
+  const emits = defineEmits(['update:activeKey'])
+
+  const handleChange: TabsProps['onChange'] = (activeKey) => {
+    emits('update:activeKey', activeKey)
+  }
+</script>
+
+<template>
+  <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>
+        <template #renderTabBar="{ DefaultTabBar, ...props }">
+          <component :is="DefaultTabBar" v-bind="props" />
+        </template>
+      </a-tabs>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .main-card {
+    min-width: 389px;
+    background-color: $color-white;
+    padding: $space-md;
+    :deep(.ant-tabs-tab) {
+      padding-top: 0;
+      padding-inline: 16px;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/components/common/main-card/types.ts b/bigtop-manager-ui/src/components/common/main-card/types.ts
new file mode 100644
index 000000000..abc7c4dae
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/main-card/types.ts
@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    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 interface TabItem {
+  key: string
+  title: string
+}
diff --git a/bigtop-manager-ui/src/components/common/status-dot/index.vue b/bigtop-manager-ui/src/components/common/status-dot/index.vue
new file mode 100644
index 000000000..96c401a34
--- /dev/null
+++ b/bigtop-manager-ui/src/components/common/status-dot/index.vue
@@ -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
+  ~
+  ~   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 } from 'vue'
+
+  interface StatusDot {
+    size?: number
+    color?: keyof typeof Colors
+    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,
+    content: ''
+  })
+  const fontSize = computed(() => props.size * 0.6)
+  const dotStyle = computed(() => ({
+    width: props.size + 'px',
+    height: props.size + 'px',
+    fontSize: fontSize.value + 'px',
+    backgroundColor: Colors[props.color]
+  }))
+</script>
+
+<template>
+  <div class="dot" :style="dotStyle">
+    {{ content }}
+  </div>
+</template>
+
+<style scoped>
+  .dot {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: white;
+  }
+</style>
diff --git a/bigtop-manager-ui/src/composables/use-base-table.ts b/bigtop-manager-ui/src/composables/use-base-table.ts
index f1010693d..2d359b4b9 100644
--- a/bigtop-manager-ui/src/composables/use-base-table.ts
+++ b/bigtop-manager-ui/src/composables/use-base-table.ts
@@ -19,31 +19,41 @@
 
 import { ref, onUnmounted } from 'vue'
 import type { TablePaginationConfig, TableColumnType } from 'ant-design-vue'
-export interface UseBaseTableProps<T> {
+import { useI18n } from 'vue-i18n'
+
+type PaginationProps = TablePaginationConfig | false | undefined
+export interface UseBaseTableProps<T = any> {
   columns: TableColumnType[]
   rows?: T[]
-  pagination?: TablePaginationConfig | false | undefined
+  pagination?: PaginationProps
 }
 const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
   const { columns, rows, pagination } = props
+  const { t } = useI18n()
   const loading = ref(false)
   const dataSource = ref<T[]>(rows || [])
   const columnsProp = ref<TableColumnType[]>(columns)
-  const paginationProps = ref<TablePaginationConfig>({
+  const paginationProps = ref<PaginationProps>({
     current: 1,
     pageSize: 10,
     total: dataSource.value.length,
     size: 'small',
     showSizeChanger: true,
-    pageSizeOptions: ['10', '20', '30', '40', '50']
+    pageSizeOptions: ['10', '20', '30', '40', '50'],
+    showTotal: (total) => `${t('common.total', [total])}`
   })
 
   // merge pagination config
-  if (pagination) {
+  if (pagination === undefined && paginationProps.value) {
     paginationProps.value = Object.assign(paginationProps.value, pagination)
+  } else {
+    paginationProps.value = false
   }
 
   const onChange = (pagination: TablePaginationConfig) => {
+    if (!paginationProps.value) {
+      return
+    }
     paginationProps.value = Object.assign(paginationProps.value, pagination)
   }
 
@@ -56,7 +66,8 @@ const useBaseTable = <T>(props: UseBaseTableProps<T>) => {
       total: dataSource.value.length || 0,
       size: 'small',
       showSizeChanger: true,
-      pageSizeOptions: ['10', '20', '30', '40', '50']
+      pageSizeOptions: ['10', '20', '30', '40', '50'],
+      showTotal: (total) => `${t('common.total', [total])}`
     }
   }
 
diff --git a/bigtop-manager-ui/src/layouts/default.vue b/bigtop-manager-ui/src/layouts/default.vue
index 1f109f211..a135f333d 100644
--- a/bigtop-manager-ui/src/layouts/default.vue
+++ b/bigtop-manager-ui/src/layouts/default.vue
@@ -17,10 +17,33 @@
   ~ under the License.
 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { usePngImage } from '@/utils/tools'
+</script>
 
 <template>
-  <div>default content</div>
+  <a-card>
+    <div class="default">
+      <img :src="usePngImage('default')" />
+      <a-typography-text>{{ $t('cluster.cluster_unavailable_message') }}</a-typography-text>
+      <a-typography-link underline @click="() => $router.push({ name: 'ClusterCreate' })">
+        {{ $t('cluster.create') }}
+      </a-typography-link>
+    </div>
+  </a-card>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .default {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    height: 630px;
+    img {
+      width: 400px;
+      height: 200px;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/layouts/index.vue b/bigtop-manager-ui/src/layouts/index.vue
index 7c70c6dc5..c48ab595d 100644
--- a/bigtop-manager-ui/src/layouts/index.vue
+++ b/bigtop-manager-ui/src/layouts/index.vue
@@ -23,22 +23,21 @@
   import LayoutHeader from '@/layouts/header.vue'
   import LayoutSider from '@/layouts/sider.vue'
   import { useUserStore } from '@/store/user'
-  import { useClusterStore } from '@/store/cluster'
+  // import { useClusterStore } from '@/store/cluster'
   import { useMenuStore } from '@/store/menu/index'
+  import { useStackStore } from '@/store/stack'
   import { storeToRefs } from 'pinia'
 
   const userStore = useUserStore()
   const menuStore = useMenuStore()
-  const clusterStore = useClusterStore()
+  // const clusterStore = useClusterStore()
+  const stackStore = useStackStore()
   const { headerSelectedKey, headerMenus, siderMenuSelectedKey, siderMenus } = storeToRefs(menuStore)
 
   onMounted(async () => {
     userStore.getUserInfo()
-    clusterStore.loadClusters()
-    // setInterval(() => {
-    //   clusterStore.addCluster()
-    // }, 5000)
     menuStore.setUpMenu()
+    stackStore.loadStacks()
   })
 </script>
 
diff --git a/bigtop-manager-ui/src/layouts/sider.vue b/bigtop-manager-ui/src/layouts/sider.vue
index 9ace43381..530d126f6 100644
--- a/bigtop-manager-ui/src/layouts/sider.vue
+++ b/bigtop-manager-ui/src/layouts/sider.vue
@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { toRefs } from 'vue'
+  import { toRefs, ref } from 'vue'
   import { useRouter } from 'vue-router'
   import { RouteExceptions } from '@/enums'
   import { useMenuStore } from '@/store/menu'
@@ -34,10 +34,17 @@
     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>>({
+    1: 'success',
+    2: 'error',
+    3: 'warning'
+  })
 
   const toggleActivatedIcon = (menuItem: MenuItem) => {
     const { key, icon } = menuItem
@@ -66,20 +73,28 @@
           :key="menuItem.key"
         >
           <template #icon>
-            <svg-icon :name="toggleActivatedIcon(menuItem)" />
+            <svg-icon style="height: 16px; width: 16px" :name="toggleActivatedIcon(menuItem)" />
           </template>
           <template #title>
             <span>{{ $t(menuItem.label) }}</span>
           </template>
           <a-menu-item v-for="child in menuItem.children" :key="child.key">
-            <span style="margin: 0 6px">{{ child.icon }}</span>
-            <span>{{ child.label }}</span>
+            <template #icon>
+              <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" />
+              </div>
+            </template>
+            <div>
+              <span>{{ child.label }}</span>
+            </div>
           </a-menu-item>
         </a-sub-menu>
         <template v-else>
           <a-menu-item :key="menuItem.key">
             <template #icon>
-              <svg-icon :name="toggleActivatedIcon(menuItem)" />
+              <svg-icon style="height: 16px; width: 16px" :name="toggleActivatedIcon(menuItem)" />
             </template>
             <span>{{ $t(menuItem.label) }}</span>
           </a-menu-item>
@@ -90,8 +105,10 @@
       <a-divider />
       <div class="create-option">
         <a-button type="primary" ghost @click="addCluster">
-          <svg-icon name="plus" />
-          <label>{{ $t('menu.create') }}</label>
+          <div>
+            <svg-icon style="margin-left: 0" name="plus" />
+            <label>{{ $t('menu.create') }}</label>
+          </div>
         </a-button>
       </div>
     </div>
@@ -129,9 +146,10 @@
       padding-bottom: $space-lg;
       button {
         width: 160px;
-        @include flexbox($align: center);
+        @include flexbox($align: center, $justify: center);
         label {
           margin-left: 10px;
+          cursor: pointer;
         }
       }
     }
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
new file mode 100644
index 000000000..879cfa110
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 {
+  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',
+  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',
+  source: 'Source',
+  show_hosts_resolved: 'Hostnames after resolved',
+  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 7765f2ea0..47650f45f 100644
--- a/bigtop-manager-ui/src/locales/en_US/common.ts
+++ b/bigtop-manager-ui/src/locales/en_US/common.ts
@@ -24,9 +24,16 @@ export default {
   exit: 'Exit',
   action: 'Action',
   status: 'Status',
+  healthy: 'Healthy',
+  unhealthy: 'Unhealthy',
+  unknow: 'Unknown',
+  failed: 'Failed',
+  success: 'Normal',
   edit: 'Edit',
   rename: 'Rename',
   delete: 'Delete',
+  remove: 'Remove',
+  bulk_remove: 'Bulk remove',
   disable: 'Disable',
   enable: 'Enable',
   submit: 'Submit',
@@ -35,6 +42,7 @@ export default {
   confirm: 'Confirm',
   exit_confirm: 'Are you sure you want to exit?',
   install: 'Install',
+  installing: 'Installing...',
   finish: 'Finish',
   more: 'More',
   view_all: 'View all',
@@ -49,6 +57,11 @@ export default {
   service: 'Service',
   stack: 'Stack',
   stage: 'Stage',
+  search: 'Search',
+  reset: 'Reset',
+  restart: 'Restart {0}',
+  required: 'Required',
+  not_required: 'Not required',
   progress: 'Progress',
   status_change_success: 'Status changed successfully',
   test_success: 'Test successful !',
@@ -74,5 +87,14 @@ export default {
   loading_text_verifying: 'Verifying',
   enter_error: 'Please enter {0}',
   select_error: 'Please select {0}',
-  delete_msg: 'Are you sure you want to delete this?'
+  add_error: 'Please add {0}',
+  delete_msg: 'Are you sure you want to delete this?',
+  total: 'Total {0} items',
+  note: 'Note: Changes to the source address will take effect for all clusters.',
+  upload_file: 'Upload file',
+  file_type_error: 'Only text files are allowed!',
+  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.'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/host.ts b/bigtop-manager-ui/src/locales/en_US/host.ts
new file mode 100644
index 000000000..9eb41395f
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/en_US/host.ts
@@ -0,0 +1,42 @@
+/*
+ * 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 {
+  host_list: 'Host List',
+  uninstallable: 'Please add the host first',
+  hostname: 'Hostname',
+  ssh_user: 'Username',
+  confirm_password: 'Confirm Password',
+  input_method: 'Input Method',
+  file: 'File',
+  text: 'Text',
+  key_file: 'Key File',
+  key_text: 'Key Text',
+  key_password: 'Key Password',
+  confirm_key_password: 'Confirm Key Password',
+  username: 'Username',
+  auth_method: 'Authentication Method',
+  password_auth: 'Password',
+  key_auth: 'Key',
+  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.'
+}
diff --git a/bigtop-manager-ui/src/locales/en_US/index.ts b/bigtop-manager-ui/src/locales/en_US/index.ts
index 804d309c4..5f6166be1 100644
--- a/bigtop-manager-ui/src/locales/en_US/index.ts
+++ b/bigtop-manager-ui/src/locales/en_US/index.ts
@@ -23,6 +23,9 @@ import login from '@/locales/en_US/login'
 import user from '@/locales/en_US/user.ts'
 import llmConfig from '@/locales/en_US/llm-config.ts'
 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'
 
 export default {
   common,
@@ -30,5 +33,8 @@ export default {
   login,
   user,
   llmConfig,
-  aiAssistant
+  aiAssistant,
+  cluster,
+  host,
+  job
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/job.ts b/bigtop-manager-ui/src/locales/en_US/job.ts
new file mode 100644
index 000000000..95caf7b8f
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/en_US/job.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 {
+  job_list: 'Job List'
+}
diff --git a/bigtop-manager-ui/src/locales/en_US/user.ts b/bigtop-manager-ui/src/locales/en_US/user.ts
index e97993e03..dab2f04ae 100644
--- a/bigtop-manager-ui/src/locales/en_US/user.ts
+++ b/bigtop-manager-ui/src/locales/en_US/user.ts
@@ -23,5 +23,6 @@ export default {
   logout: 'Log Out',
   username: 'Username',
   nickname: 'Nickname',
+  user_list: 'User List',
   set_nickname_valid: 'Nickname should not be empty'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
new file mode 100644
index 000000000..eb9ba5044
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 {
+  base_info: '基本信息',
+  cluster_config: '集群配置',
+  cluster_management: '集群管理',
+  component_info: '组件信息',
+  host_config: '主机管理',
+  create: '创建集群',
+  name: '集群名',
+  display_name: '集群显示名',
+  description: '集群描述',
+  root_directory: '集群根目录',
+  user_group: '集群用户组',
+  config_source: '配置源',
+  install_dependencies: '安装依赖',
+  add_host: '新增主机',
+  edit_host: '编辑主机',
+  view_log: '查看日志',
+  source: '配置源',
+  show_hosts_resolved: '解析后的主机名列表',
+  cluster_unavailable_message: '抱歉，你还没有集群，无法使用集群管理能力。'
+}
diff --git a/bigtop-manager-ui/src/locales/zh_CN/common.ts b/bigtop-manager-ui/src/locales/zh_CN/common.ts
index 65cea43ca..30123e19b 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/common.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/common.ts
@@ -24,8 +24,15 @@ export default {
   exit: '退出',
   action: '操作',
   status: '状态',
+  healthy: '健康',
+  unhealthy: '不健康',
+  unknow: '未知',
+  success: '正常',
+  failed: '异常',
   edit: '编辑',
   delete: '删除',
+  remove: '移除',
+  bulk_remove: '批量删除',
   rename: '重命名',
   disable: '停用',
   enable: '使用',
@@ -35,6 +42,7 @@ export default {
   confirm: '确认',
   exit_confirm: '确定要退出吗？',
   install: '安装',
+  installing: '安装中...',
   finish: '完成',
   more: '更多',
   view_all: '查看全部',
@@ -49,6 +57,11 @@ export default {
   service: '服务',
   stack: '组件栈',
   stage: '阶段',
+  search: '搜索',
+  reset: '重置',
+  restart: '重启{0}',
+  required: '需重启',
+  not_required: '无需重启',
   progress: '进度',
   created: '创建成功',
   status_change_success: '状态更新成功',
@@ -74,5 +87,14 @@ export default {
   loading_text_verifying: '校验中',
   enter_error: '请输入{0}',
   select_error: '请选择{0}',
-  delete_msg: '确认要删除该记录吗？'
+  add_error: '请添加{0}',
+  delete_msg: '确认要删除该记录吗？',
+  total: '共{0}条数据',
+  note: '注: 源地址的改动对所有集群生效。',
+  upload_file: '上传文件',
+  file_type_error: '只能上传文本文件！',
+  file_size_error: '文件大小不能超过 10KB！',
+  upload_success: '文件上传成功！',
+  upload_failed: '文件上传失败！',
+  password_not_match: '密码不一致。'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/host.ts b/bigtop-manager-ui/src/locales/zh_CN/host.ts
new file mode 100644
index 000000000..30692cfa5
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/zh_CN/host.ts
@@ -0,0 +1,42 @@
+/*
+ * 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 {
+  host_list: '主机列表',
+  uninstallable: '请先添加主机',
+  hostname: '主机名',
+  ssh_user: '用户名',
+  confirm_password: '确认密码',
+  input_method: '输入方式',
+  file: '文件',
+  text: '文本',
+  key_file: '密钥文件',
+  key_text: '密钥文本',
+  key_password: '密钥口令',
+  confirm_key_password: '确认口令',
+  username: '用户名',
+  auth_method: '认证方式',
+  password_auth: '密码',
+  key_auth: '密钥',
+  no_auth: '无认证',
+  agent_path: 'Agent路径',
+  ssh_port: 'SSH端口',
+  grpc_port: 'gRPC端口',
+  description: '备注',
+  key_password_not_match: '密钥口令不一致。'
+}
diff --git a/bigtop-manager-ui/src/locales/zh_CN/index.ts b/bigtop-manager-ui/src/locales/zh_CN/index.ts
index 2cc7eeb31..cbb01b6e9 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/index.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/index.ts
@@ -23,6 +23,9 @@ import login from '@/locales/zh_CN/login'
 import user from '@/locales/zh_CN/user.ts'
 import llmConfig from '@/locales/zh_CN/llm-config.ts'
 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'
 
 export default {
   common,
@@ -30,5 +33,8 @@ export default {
   login,
   user,
   llmConfig,
-  aiAssistant
+  aiAssistant,
+  cluster,
+  host,
+  job
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/job.ts b/bigtop-manager-ui/src/locales/zh_CN/job.ts
new file mode 100644
index 000000000..06cd7807b
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/zh_CN/job.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 {
+  job_list: '作业列表'
+}
diff --git a/bigtop-manager-ui/src/locales/zh_CN/user.ts b/bigtop-manager-ui/src/locales/zh_CN/user.ts
index b8b28be1c..808f79713 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/user.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/user.ts
@@ -23,5 +23,6 @@ export default {
   logout: '退出登录',
   username: '用户名',
   nickname: '昵称',
+  user_list: '用户列表',
   set_nickname_valid: '昵称不能为空'
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue
new file mode 100644
index 000000000..c9abfd99c
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/category-chart.vue
@@ -0,0 +1,159 @@
+<!--
+  ~ 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 { onBeforeUnmount, onMounted, shallowRef } from 'vue'
+  import * as echarts from 'echarts/core'
+  import { GridComponent, GridComponentOption, TooltipComponent, TooltipComponentOption } from 'echarts/components'
+  import { LineChart, LineSeriesOption } from 'echarts/charts'
+  import { UniversalTransition } from 'echarts/features'
+  import { CanvasRenderer } from 'echarts/renderers'
+
+  echarts.use([GridComponent, LineChart, TooltipComponent, CanvasRenderer, UniversalTransition])
+
+  type EChartsOption = echarts.ComposeOption<GridComponentOption | TooltipComponentOption | LineSeriesOption>
+
+  const props = defineProps<{
+    chartId: string
+    title: string
+  }>()
+
+  const myChart = shallowRef<echarts.ECharts | null>(null)
+
+  const generateTimeLabels = () => {
+    const times = []
+    for (let h = 0; h < 24; h++) {
+      for (let m = 0; m < 60; m += 15) {
+        const hour = h.toString().padStart(2, '0')
+        const minute = m.toString().padStart(2, '0')
+        times.push(`${hour}:${minute}`)
+      }
+    }
+    return times
+  }
+
+  const initCharts = () => {
+    const chartDom = document.getElementById(`${props.chartId}`)
+    myChart.value = echarts.init(chartDom, null, {
+      devicePixelRatio: window.devicePixelRatio
+    })
+    const option: EChartsOption = {
+      grid: {
+        top: '20px',
+        left: '40px',
+        right: '30px',
+        bottom: '20px'
+      },
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: '#000',
+        borderColor: 'rgba(236,236,236,0.1)',
+        // formatter: (params) => {
+        //   console.log('params :>> ', params)
+        //   return ''
+        // },
+        textStyle: {
+          color: '#fff'
+        },
+        axisPointer: {
+          type: 'cross',
+          crossStyle: {
+            color: '#999'
+          }
+        }
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: generateTimeLabels(),
+          axisPointer: {
+            type: 'line'
+          },
+          axisLabel: {
+            interval: 14,
+            fontSize: 8
+          }
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              formatter: '{value} %'
+            }
+          },
+          min: 0,
+          max: 100,
+          interval: 20,
+          axisLabel: {
+            fontSize: 8,
+            formatter: '{value} %'
+          }
+        }
+      ],
+      series: [
+        {
+          name: props.title,
+          type: 'line',
+          data: Array.from({ length: generateTimeLabels().length }, () => Math.floor(Math.random() * 0)),
+          lineStyle: {
+            color: '#49A4FF',
+            width: 2
+          }
+        }
+      ]
+    }
+    option && myChart.value.setOption(option)
+  }
+
+  const resizeChart = () => {
+    myChart.value?.resize()
+  }
+
+  onMounted(() => {
+    initCharts()
+    window.addEventListener('resize', resizeChart, true)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart, true)
+  })
+</script>
+
+<template>
+  <div class="chart">
+    <div class="chart-title">{{ $props.title }}</div>
+    <div :id="$props.chartId" style="height: 260px; width: 100%"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .chart {
+    height: 300px;
+    box-sizing: border-box;
+    padding: 10px;
+    &-title {
+      text-align: start;
+      font-size: 12px;
+      font-weight: 600;
+    }
+  }
+</style>
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
new file mode 100644
index 000000000..847ef1208
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/check-workflow.vue
@@ -0,0 +1,170 @@
+<!--
+  ~ 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, onMounted, ref, shallowRef, toRefs } from 'vue'
+  import type { JobVO, StateType } from '@/api/job/types'
+  import { getJobDetails, retryJob } from '@/api/job'
+  import { CommandVO } from '@/api/command/types'
+
+  const props = defineProps<{ stepData: CommandVO }>()
+  const emits = defineEmits(['updateData'])
+  const { stepData } = toRefs(props)
+  const activeKey = ref<number[]>([])
+  const jobDetail = ref<JobVO>({})
+  const spinning = ref(false)
+  const status = shallowRef<Record<StateType, string>>({
+    Pending: 'installing',
+    Processing: 'processing',
+    Failed: 'failed',
+    Canceled: 'canceled',
+    Successful: 'success'
+  })
+  const stages = computed(() => {
+    if (jobDetail.value.stages) {
+      return [...jobDetail.value.stages].sort((a, b) => a.order! - b.order!)
+    }
+    return []
+  })
+
+  const getJobInstanceDetails = async () => {
+    const { id: jobId } = stepData.value
+    if (jobId === undefined) {
+      return true
+    }
+    try {
+      const data = await getJobDetails({ jobId, clusterId: 0 })
+      jobDetail.value = data
+      activeKey.value = data.stages ? data.stages?.map((v) => v.id!) : []
+      emits('updateData', { ...stepData.value, ...data })
+      return ['Successful', 'Failed'].includes(data.state as StateType)
+    } catch (error) {
+      console.log('error :>> ', error)
+      return true
+    }
+  }
+
+  const handleRetryJob = async () => {
+    const { id: jobId } = stepData.value
+    if (jobId === undefined) {
+      return true
+    }
+    try {
+      await retryJob({ jobId, clusterId: 0 })
+      pollJobDetails(getJobInstanceDetails)
+    } catch (error) {
+      console.log('error :>> ', error)
+    }
+  }
+
+  const pollJobDetails = (execFunc: Function, interval: number = 200): void => {
+    let firstPoll = true
+    let firstPollCompleted = false
+    const intervalId = setInterval(async () => {
+      if (firstPoll) {
+        spinning.value = true
+        firstPoll = false
+      }
+      const result = await execFunc()
+      if (!firstPollCompleted) {
+        spinning.value = false
+        firstPollCompleted = true
+      }
+      if (result) {
+        clearInterval(intervalId)
+      }
+    }, interval)
+  }
+
+  onMounted(() => {
+    pollJobDetails(getJobInstanceDetails)
+  })
+</script>
+
+<template>
+  <a-spin :spinning="spinning">
+    <a-empty v-if="stages.length == 0" />
+    <div v-else class="check-workflow">
+      <div class="retry">
+        <a-button v-if="stepData.state === 'Failed'" type="link" @click="handleRetryJob">{{
+          $t('common.retry')
+        }}</a-button>
+      </div>
+      <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
+        <a-collapse-panel v-for="stage in stages" :key="stage.id">
+          <template #header>
+            <div class="stage-item">
+              <span>{{ stage.name }}</span>
+              <svg-icon :name="stage.state && status[stage.state]"></svg-icon>
+            </div>
+          </template>
+          <div v-for="task in stage.tasks" :key="task.id" class="task-item">
+            <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">
+                {{ $t('cluster.view_log') }}
+              </a-button>
+            </a-space>
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
+    </div>
+  </a-spin>
+</template>
+
+<style lang="scss" scoped>
+  .check-workflow {
+    button {
+      padding: 0;
+    }
+    :deep(.ant-collapse-header) {
+      background-color: $color-fill-quaternary;
+    }
+    :deep(.ant-collapse-content-box) {
+      padding: 0 !important;
+    }
+    .retry {
+      text-align: end;
+      line-height: 14px;
+      margin-bottom: $space-sm;
+      button {
+        margin: 0;
+        padding: 0;
+        line-height: inherit;
+        height: 0;
+      }
+    }
+  }
+  .stage-item {
+    @include flexbox($justify: space-between, $align: center);
+    padding-right: 65px;
+  }
+  .task-item {
+    height: 45px;
+    padding: 10px;
+    box-sizing: border-box;
+    padding-left: $space-lg;
+    border-top: 1px solid $color-border-secondary;
+    @include flexbox($justify: space-between, $align: center);
+    &:last-child {
+      border-bottom: 1px solid $color-border-secondary;
+    }
+  }
+</style>
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
new file mode 100644
index 000000000..82a9d1e21
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/cluster-base.vue
@@ -0,0 +1,212 @@
+<!--
+  ~ 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 { 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'
+
+  type ClusterCommandReqKey = keyof ClusterCommandReq
+
+  const { t } = useI18n()
+  const activeKey = ref(['1', '2'])
+  const autoFormRefMap = shallowRef<Map<string, Comp.AutoFormInstance>>(new Map())
+  const props = defineProps<{ stepData: ClusterCommandReq }>()
+  const emits = defineEmits(['updateData'])
+  const collapses = ref([
+    {
+      title: computed(() => t('cluster.base_info')),
+      formValue: pick<ClusterCommandReq, ClusterCommandReqKey>(props.stepData, ['name', 'displayName', 'desc']),
+      formItems: computed(() => baseInfoFormItems.value)
+    },
+    {
+      title: computed(() => t('cluster.cluster_config')),
+      formValue: pick<ClusterCommandReq, ClusterCommandReqKey>(props.stepData, ['rootDir', 'userGroup']),
+      formItems: computed(() => clusterConfigFormItems.value)
+    }
+  ])
+  const formLayout = computed(() => ({
+    labelCol: { xs: 5, sm: 5, md: 5, lg: 4, xl: 3 },
+    wrapperCol: { xs: 10, sm: 10, md: 10, lg: 10, xl: { xl: 10, pull: 1 } }
+  }))
+
+  const baseInfoFormItems = computed((): FormItemState[] => [
+    {
+      type: 'input',
+      field: 'name',
+      formItemProps: {
+        name: 'name',
+        label: t('cluster.name'),
+        rules: [
+          { required: true, message: t('common.enter_error', [`${t('cluster.name')}`.toLowerCase()]), trigger: 'blur' }
+        ]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('cluster.name')}`.toLowerCase()])
+      }
+    },
+    {
+      type: 'input',
+      field: 'displayName',
+      formItemProps: {
+        name: 'displayName',
+        label: t('cluster.display_name'),
+        rules: [
+          {
+            required: true,
+            message: t('common.enter_error', [`${t('cluster.display_name')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('cluster.display_name')}`.toLowerCase()])
+      }
+    },
+    {
+      type: 'textarea',
+      field: 'desc',
+      formItemProps: {
+        name: 'desc',
+        label: t('cluster.description'),
+        rules: [
+          {
+            required: true,
+            message: t('common.enter_error', [`${t('cluster.description')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('cluster.description')}`.toLowerCase()])
+      }
+    }
+  ])
+
+  const clusterConfigFormItems = computed((): FormItemState[] => [
+    {
+      type: 'input',
+      field: 'rootDir',
+      formItemProps: {
+        name: 'rootDir',
+        label: t('cluster.root_directory'),
+        rules: [
+          {
+            required: true,
+            message: t('common.enter_error', [`${t('cluster.root_directory')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('cluster.root_directory')}`.toLowerCase()])
+      }
+    },
+    {
+      type: 'input',
+      field: 'userGroup',
+      formItemProps: {
+        name: 'userGroup',
+        label: t('cluster.user_group'),
+        rules: [
+          {
+            required: true,
+            message: t('common.enter_error', [`${t('cluster.user_group')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('cluster.user_group')}`.toLowerCase()])
+      }
+    }
+  ])
+
+  const getFormValues = () => {
+    return collapses.value.reduce((pre, val) => {
+      Object.assign(pre, val.formValue)
+      return pre
+    }, {})
+  }
+
+  const collectAutoFormRefs = (el: any, title: string) => {
+    // Synchronous I18n switch
+    el ? autoFormRefMap.value.set(title, el) : autoFormRefMap.value.delete(title)
+  }
+
+  const check = async () => {
+    try {
+      const autoFormRefs = [...autoFormRefMap.value.values()]
+      const validation = await Promise.all(autoFormRefs.map((formRef) => formRef?.getFormValidation()))
+      const allValid = validation.every((res) => res)
+      autoFormRefs.forEach((_formRef, index) => {
+        !validation[index] && !activeKey.value.includes(`${index + 1}`) && activeKey.value.push(`${index + 1}`)
+      })
+      return allValid
+    } catch (error) {
+      console.error('Error during form validation:', error)
+      return
+    }
+  }
+
+  watch(
+    () => [collapses.value[0].formValue, collapses.value[1].formValue],
+    () => {
+      emits('updateData', getFormValues())
+    },
+    {
+      deep: true
+    }
+  )
+
+  defineExpose({
+    check
+  })
+</script>
+
+<template>
+  <div class="cluster-base">
+    <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
+      <a-collapse-panel v-for="(collapse, idx) in collapses" :key="`${idx + 1}`" :header="collapse.title">
+        <auto-form
+          :key="collapse.title"
+          :ref="
+            (el) => {
+              collectAutoFormRefs(el, collapse.title)
+            }
+          "
+          v-bind="formLayout"
+          v-model:form-value="collapse.formValue"
+          :form-items="collapse.formItems"
+          :show-button="false"
+        />
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .cluster-base {
+    :deep(.ant-collapse-header) {
+      background-color: $color-fill-quaternary;
+    }
+  }
+</style>
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
new file mode 100644
index 000000000..0f8fe394c
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/component-info.vue
@@ -0,0 +1,117 @@
+<!--
+  ~ 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, 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'
+
+  const { t } = useI18n()
+  const stackStore = useStackStore()
+  const { stacks } = storeToRefs(stackStore)
+
+  const data = ref<ServiceVO[]>([])
+  const stackSelected = ref('bigtop')
+  const setSourceRef = ref<InstanceType<typeof SetSource>>()
+  const stackGroup = shallowRef(['bigtop', 'infra', 'extra'])
+  const currentStack = computed(() => stacks.value.find((stack) => stack.stackName === stackSelected.value))
+  const columns = computed((): TableColumnType[] => [
+    {
+      title: '#',
+      width: '48px',
+      key: 'index',
+      customRender: ({ index }) => {
+        return `${index + 1}`
+      }
+    },
+    {
+      title: t('common.name'),
+      dataIndex: 'displayName',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      title: t('common.version'),
+      dataIndex: 'version',
+      width: '15%',
+      ellipsis: true
+    },
+    {
+      key: 'stack',
+      title: t('common.stack'),
+      dataIndex: 'stack',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      title: t('common.desc'),
+      dataIndex: 'desc',
+      ellipsis: true
+    }
+  ])
+
+  const { loading, paginationProps, onChange, resetState } = useBaseTable({
+    columns: columns.value,
+    rows: data.value
+  })
+
+  watchEffect(() => {
+    resetState()
+    data.value = stacks.value.find((v) => v.stackName === stackSelected.value)?.services || []
+  })
+
+  const handleSetSource = () => {
+    setSourceRef.value?.handleOpen()
+  }
+</script>
+
+<template>
+  <div class="component-info">
+    <header>
+      <a-radio-group v-model:value="stackSelected" button-style="solid">
+        <a-radio-button v-for="(stack, idx) in stackGroup" :key="idx" :value="stack">
+          {{ stackGroup[idx].replace(/^\w/, (c) => c.toUpperCase()) }}
+        </a-radio-button>
+      </a-radio-group>
+      <a-button type="primary" @click="handleSetSource">{{ $t('cluster.config_source') }}</a-button>
+    </header>
+    <a-table :loading="loading" :data-source="data" :columns="columns" :pagination="paginationProps" @change="onChange">
+      <template #bodyCell="{ column }">
+        <template v-if="column.key === 'stack'">
+          <span> {{ `${stackSelected}-${currentStack?.stackVersion}` }} </span>
+        </template>
+      </template>
+    </a-table>
+    <set-source ref="setSourceRef" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .component-info {
+    header {
+      @include flexbox($justify: space-between);
+      margin-bottom: $space-md;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue
new file mode 100644
index 000000000..d2d2dcaae
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/gauge-chart.vue
@@ -0,0 +1,148 @@
+<!--
+  ~ 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 { onBeforeUnmount, onMounted, shallowRef } from 'vue'
+  import * as echarts from 'echarts/core'
+  import { GaugeChart, GaugeSeriesOption } from 'echarts/charts'
+  import { CanvasRenderer } from 'echarts/renderers'
+
+  echarts.use([GaugeChart, CanvasRenderer])
+
+  type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>
+
+  const props = defineProps<{
+    chartId: string
+    title: string
+  }>()
+
+  const myChart = shallowRef<echarts.ECharts | null>(null)
+
+  const initCharts = () => {
+    const chartDom = document.getElementById(`${props.chartId}`)
+    myChart.value = echarts.init(chartDom, null, {
+      devicePixelRatio: window.devicePixelRatio
+    })
+    const option: EChartsOption = {
+      series: [
+        {
+          type: 'gauge',
+          radius: '90%',
+          center: ['50%', '50%'],
+          axisLine: {
+            lineStyle: {
+              width: 14,
+              color: [
+                [0.3, '#67e0e3'],
+                [0.7, '#37a2da'],
+                [1, '#fd666d']
+              ]
+            }
+          },
+          pointer: {
+            itemStyle: {
+              color: 'auto'
+            }
+          },
+          axisTick: {
+            distance: -50,
+            length: 40,
+            lineStyle: {
+              color: '#fff',
+              width: 1
+            }
+          },
+          splitLine: {
+            distance: -28,
+            length: 28,
+            lineStyle: {
+              color: '#fff',
+              width: 4
+            }
+          },
+          axisLabel: {
+            color: 'inherit',
+            distance: 28,
+            fontSize: 14
+          },
+          detail: {
+            valueAnimation: true,
+            formatter: '{value} %',
+            color: 'inherit',
+            fontSize: 18
+          },
+          data: [
+            {
+              value: 80
+            }
+          ]
+        }
+      ]
+    }
+
+    myChart.value?.setOption<echarts.EChartsCoreOption>({
+      series: [
+        {
+          data: [
+            {
+              value: +(Math.random() * 100).toFixed(2)
+            }
+          ]
+        }
+      ]
+    })
+
+    option && myChart.value.setOption(option)
+  }
+
+  const resizeChart = async () => {
+    setTimeout(() => {
+      myChart.value?.resize()
+    })
+  }
+
+  onMounted(() => {
+    initCharts()
+    window.addEventListener('resize', resizeChart, true)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart, true)
+  })
+</script>
+
+<template>
+  <div class="chart">
+    <div class="chart-title">{{ $props.title }}</div>
+    <div :id="$props.chartId" style="height: 260px; width: 100%"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .chart {
+    height: 300px;
+    box-sizing: border-box;
+    padding: 10px;
+    &-title {
+      text-align: start;
+      font-size: 12px;
+      font-weight: 600;
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
new file mode 100644
index 000000000..a222bc431
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/host-config.vue
@@ -0,0 +1,270 @@
+<!--
+  ~ 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 { TableColumnType } from 'ant-design-vue'
+  import { computed, reactive, ref, watch } from 'vue'
+  import { generateRandomId } from '@/utils/tools'
+  import { useI18n } from 'vue-i18n'
+  import useBaseTable from '@/composables/use-base-table'
+  import HostCreate from '@/pages/cluster-manage/hosts/create.vue'
+  import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
+  import type { GroupItem } from '@/components/common/button-group/types'
+  import type { HostReq } from '@/api/command/types'
+
+  type Key = string | number
+  interface TableState {
+    selectedRowKeys: Key[]
+    searchText: string
+    searchedColumn: string
+  }
+  const { t } = useI18n()
+  const props = defineProps<{ stepData: HostReq[] }>()
+  const emits = defineEmits(['updateData'])
+  const data = ref<HostReq[]>([])
+  const searchInputRef = ref()
+  const hostCreateRef = ref<InstanceType<typeof HostCreate> | null>(null)
+  const state = reactive<TableState>({
+    searchText: '',
+    searchedColumn: '',
+    selectedRowKeys: []
+  })
+
+  const columns = computed((): TableColumnType[] => [
+    {
+      title: t('host.hostname'),
+      dataIndex: 'hostname',
+      key: 'hostname',
+      ellipsis: true,
+      customFilterDropdown: true,
+      onFilter: (value, record) => isContain(record.hostname, value as string),
+      onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
+    },
+    {
+      title: t('host.ssh_user'),
+      dataIndex: 'sshUser',
+      width: '260px',
+      key: 'sshUser',
+      ellipsis: true,
+      customFilterDropdown: true,
+      onFilter: (value, record) => isContain(record.sshUser, value as string),
+      onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
+    },
+    {
+      title: t('common.desc'),
+      dataIndex: 'desc',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      key: 'status',
+      title: t('common.status'),
+      dataIndex: 'status',
+      ellipsis: true
+    },
+    {
+      title: t('common.action'),
+      key: 'operation',
+      width: '160px',
+      fixed: 'right'
+    }
+  ])
+
+  const { loading, dataSource, paginationProps, onChange } = useBaseTable({
+    columns: columns.value,
+    rows: data.value
+  })
+
+  const operations = computed((): GroupItem[] => [
+    {
+      text: 'edit',
+      clickEvent: (_item, args) => editHost(args)
+    },
+    {
+      text: 'remove',
+      danger: true,
+      clickEvent: (_item, args) => deleteHost(args)
+    }
+  ])
+
+  watch(
+    () => props.stepData,
+    (val) => {
+      dataSource.value = val
+    },
+    {
+      immediate: true
+    }
+  )
+
+  const isContain = (source: string, target: string) => {
+    return source.toString().toLowerCase().includes(target.toLowerCase())
+  }
+
+  const onFilterDropdownOpenChange = (visible: boolean) => {
+    if (visible) {
+      setTimeout(() => {
+        searchInputRef.value.focus()
+      }, 100)
+    }
+  }
+
+  const onSelectChange = (selectedRowKeys: Key[]) => {
+    state.selectedRowKeys = selectedRowKeys
+  }
+
+  const handleSearch = (selectedKeys: Key[], confirm: (param?: FilterConfirmProps) => void, dataIndex: string) => {
+    confirm()
+    state.searchText = selectedKeys[0] as string
+    state.searchedColumn = dataIndex as string
+  }
+
+  const handleReset = (clearFilters: (param?: FilterResetProps) => void) => {
+    clearFilters({ confirm: true })
+    state.searchText = ''
+  }
+
+  const addHost = () => {
+    hostCreateRef.value?.handleOpen('ADD')
+  }
+
+  const editHost = (row: HostReq) => {
+    hostCreateRef.value?.handleOpen('EDIT', row)
+  }
+
+  const updateStepData = () => {
+    const res = dataSource.value.map((v) => {
+      return {
+        ...v,
+        hostnames: [v.hostname]
+      }
+    })
+    emits('updateData', res)
+  }
+
+  const addHostSuccess = (type: 'ADD' | 'EDIT', item: HostReq) => {
+    if (type === 'ADD') {
+      const items = item.hostnames?.map((v) => {
+        return {
+          ...item,
+          key: generateRandomId(),
+          hostname: v,
+          status: 'UNKNOW'
+        }
+      }) as HostReq[]
+      dataSource.value?.unshift(...items)
+    } else {
+      const index = dataSource.value.findIndex((data) => data.key === item.key)
+      if (index !== -1) {
+        dataSource.value[index] = item
+      }
+    }
+    updateStepData()
+  }
+
+  const deleteHost = (row?: HostReq) => {
+    if (!row?.key) {
+      state.selectedRowKeys.length > 0 &&
+        (dataSource.value = dataSource.value?.filter((v) => !state.selectedRowKeys.includes(v.key)) || [])
+    } else {
+      dataSource.value = dataSource.value?.filter((v) => row.key !== v.key)
+    }
+    updateStepData()
+  }
+</script>
+
+<template>
+  <div class="host-config">
+    <header>
+      <a-space :size="16">
+        <a-button type="primary" @click="addHost">{{ $t('cluster.add_host') }}</a-button>
+        <a-button type="primary" danger @click="deleteHost">{{ $t('common.bulk_remove') }}</a-button>
+      </a-space>
+    </header>
+    <a-table
+      :loading="loading"
+      :data-source="dataSource"
+      :columns="columns"
+      :pagination="paginationProps"
+      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
+      @change="onChange"
+    >
+      <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
+        <div class="search">
+          <a-input
+            ref="searchInputRef"
+            :placeholder="$t('common.enter_error', [column.title])"
+            :value="selectedKeys[0]"
+            @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
+            @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
+          />
+          <a-space :size="16">
+            <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
+              {{ $t('common.search') }}
+            </a-button>
+            <a-button size="small" @click="handleReset(clearFilters)"> {{ $t('common.reset') }} </a-button>
+          </a-space>
+        </div>
+      </template>
+      <template #customFilterIcon="{ filtered }">
+        <svg-icon :name="filtered ? 'search_activated' : 'search'" />
+      </template>
+      <template #bodyCell="{ record, column }">
+        <template v-if="column.key === 'status'">
+          <svg-icon :name="record.status.toLowerCase()" />
+          <span :title="`${record.message ? record.message : ''}`">
+            {{ `${$t(`common.${record.status.toLowerCase()}`)}` }}
+            {{ record.message ? `:  ${record.message}` : '' }}
+          </span>
+        </template>
+        <template v-if="column.key === 'operation'">
+          <button-group
+            i18n="common"
+            :text-compact="true"
+            :space="24"
+            :groups="operations"
+            :args="record"
+            group-shape="default"
+            group-type="link"
+          ></button-group>
+        </template>
+      </template>
+    </a-table>
+    <host-create ref="hostCreateRef" @on-ok="addHostSuccess" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .host-config {
+    header {
+      @include flexbox($justify: space-between);
+      margin-bottom: $space-md;
+    }
+  }
+  .search {
+    display: grid;
+    gap: $space-sm;
+    padding: $space-sm;
+  }
+
+  .highlight {
+    background-color: rgb(255, 192, 105);
+    padding: 0px;
+  }
+</style>
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
new file mode 100644
index 000000000..4ccb391ac
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/mock.ts
@@ -0,0 +1,187 @@
+/*
+ * 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/components/set-source.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
new file mode 100644
index 000000000..4c8d996a6
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/components/set-source.vue
@@ -0,0 +1,151 @@
+<!--
+  ~ 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, reactive, ref, toRefs } from 'vue'
+  import { getRepoList, updateRepo } from '@/api/repo'
+  import { message, type FormInstance, type TableColumnType } from 'ant-design-vue'
+  import { useI18n } from 'vue-i18n'
+  import type { RepoVO } from '@/api/repo/types'
+
+  const { t } = useI18n()
+  const open = ref(false)
+  const loading = ref(false)
+  const formRef = ref<FormInstance>()
+  const form = reactive({
+    list: [] as RepoVO[]
+  })
+  const { list } = toRefs(form)
+
+  const columns = computed((): TableColumnType[] => [
+    {
+      title: t('common.name'),
+      dataIndex: 'name',
+      key: 'name',
+      ellipsis: true
+    },
+    {
+      title: t('common.arch'),
+      dataIndex: 'arch',
+      key: 'arch',
+      ellipsis: true
+    },
+    {
+      title: t('common.base_url'),
+      dataIndex: 'baseUrl',
+      key: 'baseUrl',
+      ellipsis: true
+    }
+  ])
+
+  const handleOpen = () => {
+    open.value = true
+    getSource()
+  }
+
+  const getSource = async () => {
+    loading.value = true
+    try {
+      const data = await getRepoList()
+      list.value = data
+    } catch (error) {
+      console.log('error :>> ', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateSourceUrl = async () => {
+    try {
+      const params = list.value.map(({ id, baseUrl }) => ({ id, baseUrl }))
+      await updateRepo(params)
+      formRef.value?.resetFields()
+      message.success(t('common.update_success'))
+      open.value = false
+    } catch (error) {
+      message.error(t('common.update_fail'))
+      console.log('error :>> ', error)
+    }
+  }
+
+  const handleOk = () => {
+    formRef.value
+      ?.validateFields()
+      .then(() => {
+        updateSourceUrl()
+      })
+      .catch((info) => {
+        console.log('Validate Failed:', info)
+      })
+  }
+
+  const handleCancel = () => {
+    open.value = false
+  }
+
+  defineExpose({
+    handleOpen
+  })
+</script>
+
+<template>
+  <div class="set-source">
+    <a-modal
+      v-model:open="open"
+      width="50%"
+      :centered="true"
+      :mask="false"
+      :title="$t('cluster.source')"
+      :mask-closable="false"
+      :destroy-on-close="true"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <a-form ref="formRef" :model="form">
+        <a-table :loading="loading" :scroll="{ y: 340 }" :data-source="list" :columns="columns" :pagination="false">
+          <template #bodyCell="{ index, column, record }">
+            <template v-if="column.dataIndex == 'baseUrl'">
+              <a-form-item
+                label=" "
+                :colon="false"
+                :name="['list', index, 'baseUrl']"
+                :rules="[{ required: true, message: $t('common.enter_error'), trigger: 'blur' }]"
+              >
+                <a-input v-model:value="record[column.key]" />
+              </a-form-item>
+            </template>
+          </template>
+        </a-table>
+      </a-form>
+      <a-typography-text class="set-source-tip" type="danger">{{ `*${$t('common.note')}` }}</a-typography-text>
+    </a-modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .set-source {
+    &-tip {
+      margin-top: $space-sm;
+      font-size: 12px;
+    }
+  }
+  :deep(.ant-form-item) {
+    margin-bottom: 0;
+  }
+</style>
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 a1f074d6b..3fbee40d4 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/create.vue
@@ -19,23 +19,259 @@
 
 <script setup lang="ts">
   import { useMenuStore } from '@/store/menu'
+  import { computed, ref, shallowRef } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { getInstalledStatus, installDependencies } from '@/api/hosts'
+  import { message } from 'ant-design-vue'
+  import { InstalledStatusVO, Status } from '@/api/hosts/types'
+  import { execCommand } from '@/api/command'
+  import ClusterBase from './components/cluster-base.vue'
+  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'
+
+  const { t } = useI18n()
   const menuStore = useMenuStore()
+  const current = ref(0)
+  const compRef = ref<any>()
+  const installing = ref(false)
+  const stepData = ref<[Partial<ClusterCommandReq>, any, HostReq[], CommandVO]>([{}, {}, [], {}])
+  const commandRequest = ref<CommandRequest>({
+    command: Command.Add,
+    commandLevel: CommandLevel.Cluster
+  })
+  const installStatus = shallowRef<InstalledStatusVO[]>([])
+  const components = shallowRef<any[]>([ClusterBase, ComponentInfo, HostConfig, CheckWorkflow])
+  const isInstall = computed(() => current.value === 2)
+  const stepsLimit = computed(() => steps.value.length - 1)
+  const hasUnknowHost = computed(() => stepData.value[2].filter((v) => v.status === Status.Unknown).length == 0)
+  const allInstallSuccess = computed(
+    () =>
+      stepData.value[2].length != 0 &&
+      stepData.value[2].every((v) => v.status === Status.Success) &&
+      hasUnknowHost.value
+  )
+  const isDone = computed(() => ['Successful', 'Failed'].includes(stepData.value[stepData.value.length - 1].state))
+  const steps = computed(() => [
+    'cluster.cluster_management',
+    'cluster.component_info',
+    'cluster.host_config',
+    'cluster.create'
+  ])
 
-  const onSave = () => {
-    menuStore.updateSiderMenu()
+  const getCompName = computed(() => {
+    return components.value[current.value]
+  })
+
+  const updateData = (val: Partial<ClusterCommandReq> | any | HostReq[]) => {
+    stepData.value[current.value] = val
+  }
+
+  const createCluster = async () => {
+    try {
+      commandRequest.value.clusterCommand = stepData.value[0] as ClusterCommandReq
+      commandRequest.value.clusterCommand.hosts = stepData.value[2]
+      stepData.value[stepData.value.length - 1] = await execCommand(commandRequest.value)
+      return true
+    } catch (error) {
+      console.log('error :>> ', error)
+      return false
+    }
+  }
+
+  const previousStep = () => {
+    if (current.value > 0) {
+      current.value = current.value - 1
+    }
+  }
+
+  const nextStep = async () => {
+    if (current.value < stepsLimit.value) {
+      current.value = current.value + 1
+    }
+  }
+
+  const prepareNextStep = async () => {
+    if (current.value === 0) {
+      const check = await compRef.value.check()
+      if (check) {
+        nextStep()
+      }
+    } else if (current.value === 2) {
+      if (!allInstallSuccess.value) {
+        await resolveInstallDependencies()
+      } else {
+        const isClusterExisting = await createCluster()
+        isClusterExisting && nextStep()
+      }
+    } else {
+      nextStep()
+    }
+  }
+
+  const resolveInstallDependencies = async () => {
+    if (stepData.value[2].length == 0) {
+      message.error(t('host.uninstallable'))
+      return
+    }
+    try {
+      installing.value = true
+      const data = await installDependencies(stepData.value[current.value])
+      data && pollUntilInstalled()
+    } catch (error) {
+      installing.value = false
+      console.log('error :>> ', error)
+    }
   }
 
-  const onDel = () => {
-    menuStore.updateSiderMenu(true)
+  const recordInstalledStatus = async () => {
+    try {
+      const data = await getInstalledStatus()
+      installStatus.value = data
+      stepData.value[current.value] = mergeByHostname(stepData.value[current.value], data)
+      const allResolved = data.every((item) => item.status != Status.Installing)
+      if (allResolved) {
+        return true
+      } else {
+        return false
+      }
+    } catch (error) {
+      console.log('error :>> ', error)
+    }
+  }
+
+  const pollUntilInstalled = (interval: number = 1000): void => {
+    let isInitialized = false
+    const intervalId = setInterval(async () => {
+      if (!isInitialized) {
+        stepData.value[current.value] = stepData.value[current.value].map((item: HostReq) => ({
+          ...item,
+          status: Status.Installing
+        }))
+        isInitialized = true
+      }
+      const result = await recordInstalledStatus()
+      if (result) {
+        installing.value = false
+        clearInterval(intervalId)
+      }
+    }, interval)
+  }
+
+  const mergeByHostname = (arr1: any[], arr2: any[]): any[] => {
+    const mergedMap = new Map<string, any>()
+    for (const item of arr1) {
+      mergedMap.set(item.hostname, { ...item })
+    }
+    for (const item of arr2) {
+      if (mergedMap.has(item.hostname)) {
+        mergedMap.set(item.hostname, { ...mergedMap.get(item.hostname), ...item })
+      } else {
+        mergedMap.set(item.hostname, { ...item })
+      }
+    }
+    return Array.from(mergedMap.values())
+  }
+
+  // const changeStep = (step: number) => {
+  //   if (current.value > step) {
+  //     const previousCount = current.value - step
+  //     Array.from({ length: previousCount }).forEach(() => previousStep())
+  //   }
+  //   if (current.value < step) {
+  //     const nextCount = step - current.value
+  //     Array.from({ length: nextCount }).forEach(() => prepareNextStep())
+  //   }
+  // }
+
+  const onSave = () => {
+    menuStore.updateSiderMenu()
   }
 </script>
 
 <template>
-  <div>
-    <div> create & del</div>
-    <a-button @click="onSave">create</a-button>
-    <a-button @click="onDel">delete</a-button>
+  <div class="cluster-create">
+    <header-card>
+      <div class="steps-wrp">
+        <a-steps :current="current">
+          <a-step v-for="step in steps" :key="step" :disabled="true">
+            <template #title>
+              <span>{{ $t(step) }}</span>
+            </template>
+          </a-step>
+        </a-steps>
+      </div>
+    </header-card>
+    <main-card>
+      <template v-for="stepItem in steps" :key="stepItem.title">
+        <div v-show="steps[current] === stepItem" class="step-title">
+          <h5>{{ $t(stepItem) }}</h5>
+          <section :class="{ 'step-content': current < stepsLimit }"> </section>
+        </div>
+      </template>
+      <component :is="getCompName" ref="compRef" :step-data="stepData[current]" @update-data="updateData" />
+      <div class="step-action">
+        <a-space>
+          <a-button v-show="current != stepsLimit" @click="() => $router.go(-1)">{{ $t('common.exit') }}</a-button>
+          <a-button v-show="current > 0 && current < stepsLimit" type="primary" @click="previousStep">
+            {{ $t('common.prev') }}
+          </a-button>
+          <template v-if="current >= 0 && current <= stepsLimit - 1">
+            <a-button
+              v-if="isInstall && !allInstallSuccess"
+              type="primary"
+              :disabled="installing"
+              @click="prepareNextStep"
+            >
+              {{ $t('cluster.install_dependencies') }}
+            </a-button>
+            <a-button v-else type="primary" @click="prepareNextStep">
+              {{ $t('common.next') }}
+            </a-button>
+          </template>
+          <a-button v-show="current === stepsLimit && isDone" type="primary" @click="onSave">{{
+            $t('common.done')
+          }}</a-button>
+        </a-space>
+      </div>
+    </main-card>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+  .cluster-create {
+    min-width: 600px;
+    .header-card {
+      min-height: 80px;
+    }
+    .steps-wrp {
+      width: 100%;
+      height: 100%;
+      padding-inline: 6%;
+    }
+  }
+  .step-title {
+    h5 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 500;
+      letter-spacing: 0px;
+      line-height: 16px;
+    }
+  }
+  .step-content {
+    padding-block: $space-md;
+  }
+  .step-action {
+    text-align: end;
+    margin-top: $space-md;
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
new file mode 100644
index 000000000..f39243de4
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
@@ -0,0 +1,245 @@
+<!--
+  ~ 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 { TableColumnType } from 'ant-design-vue'
+  import { computed, reactive, ref } from 'vue'
+  import { generateTableHostData } from './components/mock'
+  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'
+
+  type Key = string | number
+  interface TableState {
+    selectedRowKeys: Key[]
+    searchText: string
+    searchedColumn: string
+  }
+
+  const searchInputRef = ref()
+  const data = ref<any[]>(generateTableHostData(50))
+  const state = reactive<TableState>({
+    searchText: '',
+    searchedColumn: '',
+    selectedRowKeys: []
+  })
+
+  const columns = computed((): TableColumnType[] => [
+    {
+      title: '节点',
+      dataIndex: 'nodeName',
+      key: 'nodeName',
+      ellipsis: true,
+      customFilterDropdown: true,
+      onFilter: (value, record) => isContain(record.nodeName, value as string),
+      onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
+    },
+    {
+      title: 'IP地址',
+      dataIndex: 'address',
+      key: 'address',
+      ellipsis: true,
+      customFilterDropdown: true,
+      onFilter: (value, record) => isContain(record.address, value as string),
+      onFilterDropdownOpenChange: (visible) => onFilterDropdownOpenChange(visible)
+    },
+    {
+      title: '系统',
+      dataIndex: 'system',
+      ellipsis: true
+    },
+    {
+      title: '架构',
+      dataIndex: 'architecture',
+      ellipsis: true
+    },
+    {
+      title: '组件数',
+      dataIndex: 'componentCount',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: '160px',
+      ellipsis: true,
+      filters: [
+        {
+          text: '正常',
+          value: 'success'
+        },
+        {
+          text: '异常',
+          value: 'error'
+        },
+        {
+          text: '未知',
+          value: 'unknow'
+        }
+      ],
+      onFilter: (value, record) => record.status.indexOf(value) === 0
+    },
+    {
+      title: '操作',
+      key: 'operation',
+      width: '160px',
+      fixed: 'right'
+    }
+  ])
+
+  const { loading, paginationProps, onChange } = useBaseTable({
+    columns: columns.value,
+    rows: data.value
+  })
+
+  const operations = computed((): GroupItem[] => [
+    {
+      text: 'edit',
+      clickEvent: (_item, args) => handleEdit(args)
+    },
+    {
+      text: 'remove',
+      danger: true,
+      clickEvent: (_item, args) => handleDelete(args)
+    }
+  ])
+
+  const isContain = (source: string, target: string) => {
+    return source.toString().toLowerCase().includes(target.toLowerCase())
+  }
+
+  const onFilterDropdownOpenChange = (visible: boolean) => {
+    if (visible) {
+      setTimeout(() => {
+        searchInputRef.value.focus()
+      }, 100)
+    }
+  }
+
+  const onSelectChange = (selectedRowKeys: Key[]) => {
+    state.selectedRowKeys = selectedRowKeys
+  }
+
+  const handleSearch = (selectedKeys: Key[], confirm: (param?: FilterConfirmProps) => void, dataIndex: string) => {
+    confirm()
+    state.searchText = selectedKeys[0] as string
+    state.searchedColumn = dataIndex as string
+  }
+
+  const handleReset = (clearFilters: (param?: FilterResetProps) => void) => {
+    clearFilters({ confirm: true })
+    state.searchText = ''
+  }
+
+  const handleEdit = (row: any) => {
+    console.log('row :>> ', row)
+  }
+
+  const handleDelete = (row?: any) => {
+    if (!row) {
+      console.log('selectedRowKeys :>> ', state.selectedRowKeys)
+    } else {
+      console.log('row :>> ', row)
+    }
+  }
+</script>
+
+<template>
+  <div class="host">
+    <header>
+      <div class="host-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>
+      </a-space>
+    </header>
+    <a-table
+      :loading="loading"
+      :data-source="data"
+      :columns="columns"
+      :pagination="paginationProps"
+      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
+      @change="onChange"
+    >
+      <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
+        <div class="search">
+          <a-input
+            ref="searchInputRef"
+            :placeholder="$t('common.enter_error', [column.title])"
+            :value="selectedKeys[0]"
+            @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>
+            <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
+              {{ $t('common.search') }}
+            </a-button>
+          </div>
+        </div>
+      </template>
+      <template #customFilterIcon="{ filtered, column }">
+        <svg-icon v-if="column.key != 'status'" :name="filtered ? 'search_activated' : 'search'" />
+        <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>
+        <template v-if="column.key === 'status'">
+          <svg-icon :name="record.status" />
+        </template>
+        <template v-if="column.key === 'operation'">
+          <button-group
+            i18n="common"
+            :text-compact="true"
+            :space="24"
+            :groups="operations"
+            :args="record"
+            group-shape="default"
+            group-type="link"
+          ></button-group>
+        </template>
+      </template>
+    </a-table>
+  </div>
+</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;
+    }
+  }
+  .search {
+    display: grid;
+    gap: $space-sm;
+    padding: $space-sm;
+    &-btn {
+      @include flexbox($justify: flex-end, $gap: $space-md);
+    }
+  }
+</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 d78ec09f2..6017e998d 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -17,12 +17,93 @@
   ~ under the License.
 -->
 
-<script setup lang="ts"></script>
+<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 Overview from './overview.vue'
+  import Service from './service.vue'
+  import Host from './host.vue'
+  import User from './user.vue'
+  import Job from './job.vue'
+
+  const route = useRoute()
+  const title = computed(() => route.params.cluster as string)
+  const desc = ref('我是描述')
+  const activeKey = ref('1')
+  const tabs = ref<TabItem[]>([
+    {
+      key: '1',
+      title: '概览'
+    },
+    {
+      key: '2',
+      title: '服务'
+    },
+    {
+      key: '3',
+      title: '主机'
+    },
+    {
+      key: '4',
+      title: '用户'
+    },
+    {
+      key: '5',
+      title: '作业'
+    }
+  ])
+  const actionGroup = computed<GroupItem[]>(() => [
+    {
+      shape: 'default',
+      type: 'primary',
+      text: '添加服务',
+      clickEvent: () => addService && addService()
+    },
+    {
+      shape: 'default',
+      type: 'default',
+      text: '其他操作',
+      dropdownMenu: [
+        {
+          action: 'start',
+          text: '启动集群'
+        },
+        {
+          action: 'restart',
+          text: '重启集群'
+        },
+        {
+          action: 'stop',
+          text: '停止集群'
+        }
+      ],
+      dropdownMenuClickEvent: (info) => dropdownMenuClick && dropdownMenuClick(info)
+    }
+  ])
+
+  const getCompName = computed(() => {
+    const componnts = [Overview, Service, Host, User, Job]
+    return componnts[parseInt(activeKey.value) - 1]
+  })
+
+  const dropdownMenuClick: GroupItem['dropdownMenuClickEvent'] = ({ key }) => {
+    console.log('key :>> ', key)
+  }
+
+  const addService: GroupItem['clickEvent'] = () => {
+    console.log('add :>> ')
+  }
+</script>
 
 <template>
-  <div>
-    <a-card>{{ $route.params }}</a-card>
-  </div>
+  <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>
 </template>
 
-<style scoped></style>
+<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
new file mode 100644
index 000000000..90a1eb21b
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/job.vue
@@ -0,0 +1,94 @@
+<!--
+  ~ 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
new file mode 100644
index 000000000..c7daf8346
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
@@ -0,0 +1,341 @@
+<!--
+  ~ 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 { ref } from 'vue'
+  import type { MenuProps } from 'ant-design-vue'
+  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: '停止服务'
+    }
+  ]
+
+  type TimeRangeText = '1m' | '15m' | '30m' | '1h' | '6h' | '30h'
+  type TimeRangeItem = {
+    text: TimeRangeText
+    time: string
+  }
+  const timeRanges: TimeRangeItem[] = [
+    {
+      text: '1m',
+      time: ''
+    },
+    {
+      text: '15m',
+      time: ''
+    },
+    {
+      text: '30m',
+      time: ''
+    },
+    {
+      text: '1h',
+      time: ''
+    },
+    {
+      text: '6h',
+      time: ''
+    },
+    {
+      text: '30h',
+      time: ''
+    }
+  ]
+
+  const currTimeRange = ref<TimeRangeText>('15m')
+
+  const handleServiceOperate: MenuProps['onClick'] = (item) => {
+    console.log('item :>> ', item.key)
+  }
+
+  const handleTimeRange = (time: TimeRangeItem) => {
+    currTimeRange.value = time.text
+  }
+</script>
+
+<template>
+  <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>
+          <template #title>
+            <a-typography-text strong content="基本信息" />
+          </template>
+          <a-descriptions-item>
+            <template #label>
+              <div class="desc-sub-label">
+                <a-typography-text strong content="详情" />
+              </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>
+                </template>
+              </div>
+            </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="图表" />
+          <a-space :size="12">
+            <div
+              v-for="time in timeRanges"
+              :key="time.text"
+              tabindex="0"
+              class="time-range"
+              :class="{ 'time-range-activated': currTimeRange === time.text }"
+              @click="handleTimeRange(time)"
+            >
+              {{ time.text }}
+            </div>
+          </a-space>
+        </div>
+        <a-row class="chart-wrp">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+            <div class="chart-item-wrp">
+              <gauge-chart chart-id="chart1" title="内存使用率" />
+            </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 使用率" />
+            </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 使用率" />
+            </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="内存使用率" />
+            </div>
+          </a-col>
+        </a-row>
+      </a-col>
+    </a-row>
+  </div>
+</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;
+      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 {
+      border-radius: 8px;
+      overflow: hidden;
+      box-sizing: border-box;
+      border: 1px solid $color-border;
+    }
+
+    .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;
+      }
+    }
+
+    :deep(.ant-descriptions-view) {
+      overflow: hidden;
+      .ant-descriptions-item-label {
+        padding: 0;
+      }
+      .ant-descriptions-item-content {
+        padding: 0;
+      }
+    }
+
+    .desc-sub-item-wrp {
+      display: flex;
+      gap: $space-md;
+      padding: $space-md;
+    }
+
+    .desc-sub-item {
+      @include flexbox($direction: column, $gap: $space-md);
+      &-desc {
+        display: grid;
+        grid-template-columns: 56px auto;
+        gap: 30px;
+      }
+    }
+
+    .desc-sub-label {
+      @include flexbox($align: center, $gap: $space-sm);
+      background-color: $color-border-secondary;
+      padding: $space-md;
+
+      :deep(.a-typography-text:last-child) {
+        font-size: 12px;
+      }
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
new file mode 100644
index 000000000..007a9cb21
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -0,0 +1,226 @@
+<!--
+  ~ 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, onMounted, ref, shallowRef } from 'vue'
+  import { getServices, StatusColors, StatusTexts, type ServiceItem } from './components/mock'
+  import { usePngImage } from '@/utils/tools'
+  import { useI18n } from 'vue-i18n'
+  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'
+
+  const { t } = useI18n()
+  const data = ref<ServiceItem[]>([])
+  const actionGroups = shallowRef<GroupItem[]>([
+    {
+      action: 'start',
+      icon: 'start',
+      clickEvent: (item) => {
+        console.log('item :>> ', item?.action)
+      }
+    },
+    {
+      action: 'stop',
+      icon: 'stop',
+      clickEvent: (item) => {
+        console.log('item :>> ', item?.action)
+      }
+    },
+    {
+      action: 'restart',
+      icon: 'restart',
+      clickEvent: (item) => {
+        console.log('item :>> ', item?.action)
+      }
+    },
+    {
+      action: 'more',
+      icon: 'more_line',
+      clickEvent: (item) => {
+        console.log('item :>> ', item?.action)
+      }
+    }
+  ])
+
+  const filterFormItems = computed((): FilterFormItem[] => [
+    {
+      type: 'search',
+      key: 'serviceName',
+      label: '服务名'
+    },
+    {
+      type: 'status',
+      key: 'restart',
+      label: '需要重启',
+      options: [
+        {
+          label: '需重启',
+          value: 1
+        },
+        {
+          label: '无需重启',
+          value: 2
+        }
+      ]
+    },
+    {
+      type: 'status',
+      key: 'status',
+      label: '状态',
+      options: [
+        {
+          label: t(`common.${StatusTexts.success}`),
+          value: StatusTexts.success
+        },
+        {
+          label: t(`common.${StatusTexts.error}`),
+          value: StatusTexts.error
+        },
+        {
+          label: t(`common.${StatusTexts.unknow}`),
+          value: StatusTexts.unknow
+        }
+      ]
+    }
+  ])
+
+  const onFilter = (filters: any) => {
+    console.log('filters :>> ', filters)
+  }
+
+  onMounted(() => {
+    data.value = 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>
+          </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>
+        </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>
+      </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>
+</template>
+
+<style lang="scss" scoped>
+  .small {
+    font-size: 12px;
+  }
+
+  .small-gray {
+    line-height: 12px;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.45);
+  }
+
+  .service {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+
+  .service-item {
+    width: 280px;
+    height: 150px;
+    border-radius: 8px;
+    @include flexbox($direction: column);
+    :deep(.ant-card-body) {
+      padding: 0;
+      height: 100%;
+      @include flexbox($direction: column);
+    }
+  }
+
+  .item-content {
+    flex: 1;
+    @include flexbox($align: center);
+    padding-inline: 8px;
+  }
+
+  .header {
+    padding: $space-md;
+    border-bottom: 1px solid $color-border-secondary;
+    &-base-wrp {
+      @include flexbox($gap: $space-sm);
+      margin-bottom: 10px;
+    }
+    &-base-title {
+      @include flexbox($direction: column);
+    }
+    &-base-status {
+      flex: 1;
+      text-align: end;
+      &-inner {
+        @include flexbox($align: center, $gap: 4px);
+      }
+      .ant-tag {
+        margin-inline-end: 0;
+      }
+    }
+    &-restart-status {
+      @include flexbox($align: center, $gap: 6px);
+      .dot {
+        margin-top: 2px;
+      }
+    }
+    &-icon {
+      flex-shrink: 0;
+      border-radius: 0;
+    }
+    :deep(.ant-avatar) {
+      img {
+        object-fit: contain !important;
+      }
+    }
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
new file mode 100644
index 000000000..2955093de
--- /dev/null
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
@@ -0,0 +1,87 @@
+<!--
+  ~ 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 UserListItem, getUserList } 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: '服务名',
+      dataIndex: 'serviceName',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      title: '用户名',
+      dataIndex: 'userName',
+      width: '15%',
+      ellipsis: true
+    },
+    {
+      title: '用户组',
+      dataIndex: 'userGroup',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      title: '描述',
+      dataIndex: 'descrip',
+      ellipsis: true
+    }
+  ]
+  const data = ref<UserListItem[]>(getUserList(50))
+  const { columnsProp, dataSource, loading, paginationProps, onChange } = useBaseTable({
+    columns,
+    rows: data.value
+  })
+</script>
+
+<template>
+  <div class="user">
+    <header>
+      <div class="host-title">{{ $t('user.user_list') }}</div>
+    </header>
+    <a-table
+      :loading="loading"
+      :data-source="dataSource"
+      :columns="columnsProp"
+      :pagination="paginationProps"
+      @change="onChange"
+    ></a-table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .user {
+    header {
+      margin-bottom: $space-md;
+    }
+  }
+</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 c4e831863..85ed4a0a7 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
@@ -17,10 +17,545 @@
   ~ under the License.
 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { computed, h, ref, watch } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { FormItemState } from '@/components/common/auto-form/types'
+  import { CheckCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
+  import { parseHostNamesAsPatternExpression } from '@/utils/array'
+  import { message, Modal } from 'ant-design-vue'
+  import { useLocaleStore } from '@/store/locale'
+  import { storeToRefs } from 'pinia'
+  import { uploadFile } from '@/api/upload-file'
+  import { Rule } from 'ant-design-vue/es/form'
+  import { HostReq } from '@/api/command/types'
+  import type { UploadProps } from 'ant-design-vue'
+  import type { HostParams } from '@/api/hosts/types'
+
+  enum Mode {
+    EDIT = 'cluster.edit_host',
+    ADD = 'cluster.add_host'
+  }
+
+  interface Emits {
+    (event: 'onOk', type: keyof typeof Mode, value: HostReq): void
+  }
+
+  const { t } = useI18n()
+  const emits = defineEmits<Emits>()
+  const localeStore = useLocaleStore()
+  const open = ref(false)
+  const mode = ref<keyof typeof Mode>('ADD')
+  const hiddenItems = ref<string[]>([])
+  const autoFormRef = ref<Comp.AutoFormInstance | null>(null)
+  const formValue = ref<HostReq & { hostname?: string }>({})
+  const { locale } = storeToRefs(localeStore)
+  const isEdit = computed(() => mode.value === 'EDIT')
+
+  const checkPassword = async (_rule: Rule, value: string) => {
+    if (!value) {
+      return Promise.reject(t('common.enter_error', [`${t('host.confirm_password')}`.toLowerCase()]))
+    }
+    if (value != formValue.value?.sshKeyPassword) {
+      return Promise.reject(t('common.password_not_match'))
+    } else {
+      return Promise.resolve()
+    }
+  }
+
+  const checkSshKeyPassword = async (_rule: Rule, value: string) => {
+    if (value != formValue.value?.sshKeyPassword) {
+      return Promise.reject(t('host.key_password_not_match'))
+    } else {
+      return Promise.resolve()
+    }
+  }
+
+  const formItemsForPassword = computed((): FormItemState[] => [
+    {
+      type: 'inputPassword',
+      field: 'sshKeyPassword',
+      formItemProps: {
+        name: 'sshKeyPassword',
+        label: t('host.password_auth'),
+        rules: [
+          {
+            required: true,
+            message: t('common.enter_error', [`${t('host.password_auth')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('host.password_auth')}`.toLowerCase()])
+      }
+    },
+    {
+      type: 'inputPassword',
+      field: 'sshKeyPasswordAgain',
+      formItemProps: {
+        name: 'sshKeyPasswordAgain',
+        label: t('host.confirm_password'),
+        rules: [
+          {
+            required: true,
+            validator: checkPassword,
+            trigger: 'blur'
+          }
+        ]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('host.confirm_password')}`.toLowerCase()])
+      }
+    }
+  ])
+
+  const formItemsForKey = computed((): FormItemState[] => [
+    {
+      type: 'radio',
+      field: 'inputType',
+      defaultValue: '1',
+      defaultOptionsMap: [
+        { value: '1', label: t('host.file') },
+        { value: '2', label: t('host.text') }
+      ],
+      formItemProps: {
+        name: 'inputType',
+        label: t('host.input_method'),
+        rules: [
+          {
+            required: true,
+            message: t('common.select_error', [`${t('host.input_method')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
+      }
+    },
+
+    {
+      type: 'input',
+      field: 'sshKeyFilename',
+      slot: 'sshKeyFilenameSlot',
+      formItemProps: {
+        name: 'sshKeyFilename',
+        label: t('host.key_file'),
+        rules: [
+          {
+            required: true,
+            message: t('common.add_error', [`${t('host.key_file')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
+      }
+    },
+    {
+      type: 'textarea',
+      field: 'sshKeyString',
+      formItemProps: {
+        name: 'sshKeyString',
+        label: t('host.key_text'),
+        rules: [
+          { required: true, message: t('common.enter_error', [`${t('host.key_text')}`.toLowerCase()]), trigger: 'blur' }
+        ]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('host.key_text')}`.toLowerCase()])
+      }
+    },
+    {
+      type: 'input',
+      field: 'keyPassword',
+      formItemProps: {
+        name: 'keyPassword',
+        label: t('host.key_password')
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('host.key_password')}`.toLowerCase()])
+      }
+    },
+    {
+      type: 'textarea',
+      field: 'keyPasswordAgain',
+      formItemProps: {
+        name: 'keyPasswordAgain',
+        label: t('host.confirm_key_password'),
+        rules: [
+          {
+            required: false,
+            validator: checkSshKeyPassword,
+            trigger: 'blur'
+          }
+        ]
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('host.confirm_key_password')}`.toLowerCase()])
+      }
+    }
+  ])
+  const formItems = computed((): FormItemState[] => [
+    {
+      type: 'input',
+      field: 'sshUser',
+      formItemProps: {
+        name: 'sshUser',
+        label: t('host.username'),
+        rules: [
+          { required: true, message: t('common.enter_error', [`${t('host.username')}`.toLowerCase()]), trigger: 'blur' }
+        ]
+      },
+      controlProps: {
+        disabled: isEdit.value,
+        placeholder: t('common.enter_error', [`${t('host.username')}`.toLowerCase()])
+      }
+    },
+    {
+      type: 'radio',
+      field: 'authType',
+      defaultValue: '1',
+      defaultOptionsMap: [
+        { value: '1', label: t('host.password_auth') },
+        { value: '2', label: t('host.key_auth') },
+        { value: '3', label: t('host.no_auth') }
+      ],
+      formItemProps: {
+        name: 'authType',
+        label: t('host.auth_method'),
+        rules: [
+          {
+            required: true,
+            message: t('common.select_error', [`${t('host.auth_method')}`.toLowerCase()]),
+            trigger: 'blur'
+          }
+        ]
+      }
+    },
+
+    {
+      type: mode.value == 'ADD' ? 'textarea' : 'input',
+      field: 'hostname',
+      formItemProps: {
+        name: 'hostname',
+        label: t('host.hostname'),
+        rules: [
+          { required: true, message: t('common.enter_error', [`${t('host.hostname')}`.toLowerCase()]), trigger: 'blur' }
+        ]
+      },
+      controlProps: {
+        disabled: isEdit.value,
+        placeholder: t('common.enter_error', [`${t('host.hostname')}`.toLowerCase()])
+      }
+    },
+
+    {
+      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()])
+      }
+    },
+    {
+      type: 'input',
+      field: 'sshPort',
+      formItemProps: {
+        name: 'sshPort',
+        label: t('host.ssh_port')
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('host.ssh_port')}`.toLowerCase()])
+      }
+    },
+    {
+      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()])
+      }
+    },
+    {
+      type: 'textarea',
+      field: 'desc',
+      formItemProps: {
+        name: 'desc',
+        label: t('host.description')
+      },
+      controlProps: {
+        placeholder: t('common.enter_error', [`${t('host.description')}`.toLowerCase()])
+      }
+    }
+  ])
+
+  const filterFormItems = computed((): FormItemState[] => {
+    if (formValue.value.authType === '1') {
+      const data = [...formItems.value]
+      data.splice(2, 0, ...formItemsForPassword.value)
+      return data
+    } else if (formValue.value.authType === '2') {
+      const data = [...formItems.value]
+      data.splice(2, 0, ...formItemsForKey.value)
+      return data
+    }
+    return [...formItems.value]
+  })
+
+  watch(
+    () => formValue.value,
+    (val) => {
+      if (val.inputType && val.inputType === '1') {
+        hiddenItems.value = ['sshKeyString']
+      } else if (val.inputType && val.inputType === '2') {
+        hiddenItems.value = ['sshKeyFilename']
+      } else {
+        hiddenItems.value = []
+      }
+    },
+    {
+      deep: true
+    }
+  )
+
+  const handleOpen = async (type: keyof typeof Mode, payload?: HostParams) => {
+    open.value = true
+    mode.value = type
+    if (payload) {
+      formValue.value = Object.assign(formValue.value, { ...payload })
+    } else {
+      Object.assign(formValue.value, {
+        authType: '1',
+        inputType: '1'
+      })
+    }
+  }
+
+  const handleOk = async () => {
+    const validate = await autoFormRef.value?.getFormValidation()
+    if (!validate) return
+    try {
+      if (!isEdit.value) {
+        const confirmStatus = await showHosts()
+        if (confirmStatus) {
+          emits('onOk', mode.value, formValue.value)
+          handleCancel()
+        }
+      } else {
+        emits('onOk', mode.value, formValue.value)
+        handleCancel()
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  const createHostNameEls = (list: string[]) => {
+    const elStyles = {
+      contentStyle: {
+        marginInlineStart: '2.125rem',
+        width: '100%',
+        maxHeight: '31.25rem',
+        overflow: 'auto'
+      },
+      itemStyle: { margin: '0.625rem' },
+      iconWrpStyle: {
+        fontSize: '1.375rem',
+        fontWeight: 600,
+        color: 'green',
+        marginInlineEnd: '0.75rem'
+      },
+      titleStyle: {
+        fontSize: '1rem',
+        fontWeight: 600
+      },
+      redfIconStyle: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }
+    const items = list.map((item: string, idx: number) => {
+      return h('li', { key: idx, style: elStyles.itemStyle }, item)
+    })
+    const iconWrpStyle = h(
+      'span',
+      {
+        style: elStyles.iconWrpStyle
+      },
+      [h(CheckCircleOutlined)]
+    )
+    const replaceTitle = h('span', { style: elStyles.titleStyle }, `${t('cluster.show_hosts_resolved')}`)
+    const reDefineIcon = h('div', { style: elStyles.redfIconStyle }, [iconWrpStyle, replaceTitle])
+    const box = h(
+      'div',
+      {
+        style: elStyles.contentStyle
+      },
+      items
+    )
+
+    return { box, reDefineIcon }
+  }
+
+  const showHosts = (): Promise<boolean> => {
+    const hostList = parseHostNamesAsPatternExpression(formValue.value.hostname as string)
+    const { box: content, reDefineIcon: icon } = createHostNameEls(hostList)
+    return new Promise((resolve) => {
+      Modal.confirm({
+        title: '',
+        icon,
+        centered: true,
+        width: '31.25rem',
+        content,
+        onOk() {
+          formValue.value.hostnames = hostList
+          resolve(true)
+        },
+        onCancel() {
+          resolve(false)
+          Modal.destroyAll()
+        }
+      })
+    })
+  }
+
+  const handleCancel = () => {
+    formValue.value = {
+      authType: '1',
+      inputType: '1'
+    }
+    open.value = false
+  }
+
+  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+    const isText = file.type === 'text/plain'
+    const checkLimitSize = file.size / 1024 <= 10
+    if (!isText) {
+      message.error(t('common.file_type_error'))
+      return false
+    }
+    if (!checkLimitSize) {
+      message.error(t('common.file_size_error'))
+      return false
+    }
+    return true
+  }
+
+  const customRequest = async (options: { file: any; onSuccess: any; onError: any }) => {
+    const { file, onSuccess, onError } = options
+    try {
+      const formData = new FormData()
+      formData.append('file', file)
+      const data = await uploadFile(formData)
+      formValue.value!.sshKeyFilename = data
+      onSuccess(data, file)
+      message.success(t('common.upload_success'))
+    } catch (error) {
+      onError(error)
+      message.error(t('common.upload_failed'))
+    }
+  }
+
+  const fileList = ref()
+
+  defineExpose({
+    handleOpen
+  })
+</script>
 
 <template>
-  <div>host create </div>
+  <div class="add-host">
+    <a-modal
+      :open="open"
+      :width="600"
+      :title="Mode[mode] && $t(Mode[mode])"
+      :mask-closable="false"
+      :centered="true"
+      :destroy-on-close="true"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <auto-form
+        ref="autoFormRef"
+        v-model:form-value="formValue"
+        :label-col="{
+          span: locale === 'zh_CN' ? 5 : 7
+        }"
+        :hidden-items="hiddenItems"
+        :show-button="false"
+        :form-items="filterFormItems"
+      >
+        <template #sshKeyFilenameSlot="{ item }">
+          <a-form-item v-bind="item.formItemProps">
+            <a-upload
+              :file-list="fileList"
+              :before-upload="beforeUpload"
+              :custom-request="customRequest"
+              :show-upload-list="false"
+            >
+              <a-button>
+                <upload-outlined></upload-outlined>
+                {{ $t('common.upload_file') }}
+              </a-button>
+            </a-upload>
+          </a-form-item>
+        </template>
+        <template #agentDirSlot="{ item, state }">
+          <a-form-item>
+            <template #label>
+              <div class="question">
+                <span>
+                  {{ item.formItemProps?.label }}
+                </span>
+                <svg-icon style="padding: 1px 0 0 0" name="question" />
+              </div>
+            </template>
+            <a-input v-bind="item.controlProps" v-model:value="state[item.field]" />
+          </a-form-item>
+        </template>
+        <template #grpcPortSlot="{ item, state }">
+          <a-form-item>
+            <template #label>
+              <div class="question">
+                <span>
+                  {{ item.formItemProps?.label }}
+                </span>
+                <svg-icon style="padding: 1px 0 0 0" name="question" />
+              </div>
+            </template>
+            <a-input v-bind="item.controlProps" v-model:value="state[item.field]" />
+          </a-form-item>
+        </template>
+      </auto-form>
+      <template #footer>
+        <footer>
+          <a-space size="middle">
+            <a-button @click="handleCancel">
+              {{ $t('common.cancel') }}
+            </a-button>
+            <a-button type="primary" @click="handleOk">
+              {{ $t('common.confirm') }}
+            </a-button>
+          </a-space>
+        </footer>
+      </template>
+    </a-modal>
+  </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+  .question {
+    cursor: pointer;
+  }
+  footer {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>
diff --git a/bigtop-manager-ui/src/store/cluster/index.ts b/bigtop-manager-ui/src/store/cluster/index.ts
index 397b49bb1..5c8459c6d 100644
--- a/bigtop-manager-ui/src/store/cluster/index.ts
+++ b/bigtop-manager-ui/src/store/cluster/index.ts
@@ -20,7 +20,7 @@
 import { defineStore } from 'pinia'
 import { ClusterVO } from '@/api/cluster/types.ts'
 import { ref } from 'vue'
-// import { getClusters } from '@/api/cluster'
+import { getClusterList } from '@/api/cluster'
 
 export const useClusterStore = defineStore(
   'cluster',
@@ -28,21 +28,6 @@ export const useClusterStore = defineStore(
     const clusters = ref<ClusterVO[]>([])
     const count = ref(0)
 
-    const generateRandomDataArray = () => {
-      const dataArray = []
-      for (let i = 0; i < count.value; i++) {
-        dataArray.push({
-          id: i,
-          clusterName: `Cluster-${i}`,
-          clusterType: Math.floor(Math.random() * 10),
-          stackName: `Stack-${i}`,
-          stackVersion: `Version-${i}`,
-          selected: Math.random() < 0.5
-        })
-      }
-      return dataArray
-    }
-
     const addCluster = async () => {
       count.value = count.value + 1
       await loadClusters()
@@ -58,12 +43,8 @@ export const useClusterStore = defineStore(
     }
 
     const loadClusters = async () => {
-      // clusters.value = await getClusters()
-      clusters.value = (await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(generateRandomDataArray())
-        }, 1000)
-      })) as ClusterVO[]
+      const data = await getClusterList()
+      clusters.value = data as ClusterVO[]
     }
 
     return {
diff --git a/bigtop-manager-ui/src/store/llm-config/config.ts b/bigtop-manager-ui/src/store/llm-config/config.ts
index 7aa767d5a..e2e735d3b 100644
--- a/bigtop-manager-ui/src/store/llm-config/config.ts
+++ b/bigtop-manager-ui/src/store/llm-config/config.ts
@@ -92,13 +92,13 @@ export function useFormItemConfig() {
         rules: [
           {
             required: true,
-            message: t('common.enter_error', [t('llmConfig.desc')]),
+            message: t('common.enter_error', [t('llmConfig.desc').toLowerCase()]),
             trigger: 'blur'
           }
         ]
       },
       controlProps: {
-        placeholder: t('common.enter_error', [t('llmConfig.desc')])
+        placeholder: t('common.enter_error', [t('llmConfig.desc').toLowerCase()])
       }
     }
   ])
diff --git a/bigtop-manager-ui/src/store/menu/index.ts b/bigtop-manager-ui/src/store/menu/index.ts
index 887bd24d8..72df905e9 100644
--- a/bigtop-manager-ui/src/store/menu/index.ts
+++ b/bigtop-manager-ui/src/store/menu/index.ts
@@ -89,10 +89,11 @@ export const useMenuStore = defineStore(
           item.children = clusters.value.map((v) => {
             return {
               icon: '',
-              key: `${item.key}/${v.clusterName}/${v.id}`,
-              label: v.clusterName,
-              title: v.clusterName,
-              activeMenu: item.key
+              key: `${item.key}/${v.displayName}/${v.id}`,
+              label: v.displayName || '',
+              title: v.displayName || '',
+              activeMenu: item.key,
+              status: v.status || 3
             }
           })
         }
@@ -144,8 +145,10 @@ export const useMenuStore = defineStore(
       router.push(siderMenuSelectedKey.value)
     }
 
-    const setUpMenu = () => {
+    const setUpMenu = async () => {
       setBaseRoutesMap()
+      await clusterStore.loadClusters()
+      updateSiderMenu()
     }
 
     const cleanUpMenu = () => {
@@ -168,6 +171,9 @@ export const useMenuStore = defineStore(
     }
   },
   {
-    persist: false
+    persist: {
+      storage: localStorage,
+      paths: ['siderMenus']
+    }
   }
 )
diff --git a/bigtop-manager-ui/src/store/menu/types.ts b/bigtop-manager-ui/src/store/menu/types.ts
index fa5c94906..bf995ef30 100644
--- a/bigtop-manager-ui/src/store/menu/types.ts
+++ b/bigtop-manager-ui/src/store/menu/types.ts
@@ -23,5 +23,6 @@ export interface MenuItem {
   title: string
   name?: string
   activeMenu?: string
+  status?: number
   children?: MenuItem[]
 }
diff --git a/bigtop-manager-ui/src/store/stack/index.ts b/bigtop-manager-ui/src/store/stack/index.ts
new file mode 100644
index 000000000..02d7884c6
--- /dev/null
+++ b/bigtop-manager-ui/src/store/stack/index.ts
@@ -0,0 +1,44 @@
+/*
+ * 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 { getStacks } from '@/api/stack'
+import { StackVO } from '@/api/stack/types'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useStackStore = defineStore(
+  'stack',
+  () => {
+    const stacks = ref<StackVO[]>([])
+    const loadStacks = async () => {
+      const data = await getStacks()
+      stacks.value = data
+    }
+
+    return {
+      stacks,
+      loadStacks
+    }
+  },
+  {
+    persist: {
+      storage: sessionStorage
+    }
+  }
+)
diff --git a/bigtop-manager-ui/src/styles/ant-design-vue.scss b/bigtop-manager-ui/src/styles/ant-design-vue.scss
index a23e7d2f9..dda4a10c5 100644
--- a/bigtop-manager-ui/src/styles/ant-design-vue.scss
+++ b/bigtop-manager-ui/src/styles/ant-design-vue.scss
@@ -381,3 +381,5 @@ $box-shadow-tabs-overflow-top: var(--box-shadow-tabs-overflow-top);
 $box-shadow-tabs-overflow-bottom: var(--box-shadow-tabs-overflow-bottom);
 $_token-key: var(--_token-key);
 $_hash-id: var(--_hash-id);
+
+
diff --git a/bigtop-manager-ui/src/styles/index.scss b/bigtop-manager-ui/src/styles/index.scss
index 7e114fdfa..f2bf2d1f5 100644
--- a/bigtop-manager-ui/src/styles/index.scss
+++ b/bigtop-manager-ui/src/styles/index.scss
@@ -45,3 +45,12 @@
     height: 20px;
   }
 }
+
+// temp resolve error on console
+.ant-modal div[aria-hidden='true'] {
+  display: none !important;
+}
+
+:where(.ant-modal-header) {
+  margin-bottom: 16px !important;
+}
diff --git a/bigtop-manager-ui/src/styles/variables.scss b/bigtop-manager-ui/src/styles/variables.scss
index ee3ab848e..57c3aadb4 100644
--- a/bigtop-manager-ui/src/styles/variables.scss
+++ b/bigtop-manager-ui/src/styles/variables.scss
@@ -41,3 +41,13 @@ $layout-sider-bg-color: $color-bg-base;
   align-items: $align;
   gap: $gap;
 }
+
+@mixin status-dot($background: $color-success, $width: 8px, $height: 8px, $margin: 0 6px 0 0) {
+  content: '';
+  display: inline-block;
+  background-color: $background;
+  width: $width;
+  height: $height;
+  border-radius: 50%;
+  margin: $margin;
+}
diff --git a/bigtop-manager-ui/src/types/components.d.ts b/bigtop-manager-ui/src/types/components.d.ts
new file mode 100644
index 000000000..f9673d004
--- /dev/null
+++ b/bigtop-manager-ui/src/types/components.d.ts
@@ -0,0 +1,30 @@
+/*
+ * 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 {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    HeaderCard: (typeof import('@/components/common/header-card/index.vue'))['default']
+    MainCard: (typeof import('@/components/common/main-card/index.vue'))['default']
+    AutoForm: (typeof import('@/components/common/auto-form/index.vue'))['default']
+    ButtonGroup: (typeof import('@/components/common/button-group/index.vue'))['default']
+    MarkdownView: (typeof import('@/components/common/markdown-view/index.vue'))['default']
+    StatusDot: (typeof import('@/components/common/status-dot/index.vue'))['default']
+  }
+}
diff --git a/bigtop-manager-ui/src/utils/tools.ts b/bigtop-manager-ui/src/utils/tools.ts
index 3be3f4d38..9092937ae 100644
--- a/bigtop-manager-ui/src/utils/tools.ts
+++ b/bigtop-manager-ui/src/utils/tools.ts
@@ -75,3 +75,21 @@ export const getRandomFromTimestamp = (len: number = 6) => {
 export const formatTime = (time: string | undefined, formatRule: string = 'YYYY-MM-DD HH:mm:ss') => {
   return typeof time === 'string' && dayjs(time).tz(dayjs.tz.guess(), true).format(formatRule)
 }
+
+export const generateRandomId = (length = 8) => {
+  return Math.random()
+    .toString(36)
+    .substring(2, length + 2)
+}
+
+export const pick = <T extends object, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> => {
+  return keys.reduce(
+    (acc, key) => {
+      if (obj.hasOwnProperty(key)) {
+        acc[key] = obj[key]
+      }
+      return acc
+    },
+    {} as Pick<T, K>
+  )
+}
diff --git a/bigtop-manager-ui/tests/__composables__/use-table.test.ts b/bigtop-manager-ui/tests/__composables__/use-table.test.ts
index ec424d601..006a537f9 100644
--- a/bigtop-manager-ui/tests/__composables__/use-table.test.ts
+++ b/bigtop-manager-ui/tests/__composables__/use-table.test.ts
@@ -16,11 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import { describe, it, expect, vi } from 'vitest'
 import useBaseTable from '../../src/composables/use-base-table'
 import { withSetup } from '../test-util'
 
+// Mock useI18n
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string, args?: any[]) => {
+      if (key === 'common.total') {
+        return `Total: ${args?.[0] || 0}`
+      }
+      return key
+    }
+  })
+}))
+
 describe('useBaseTable', () => {
   const columns = [{ title: 'Column 1' }]
   const rows = [{ id: 1, name: 'Item 1' }]
@@ -30,27 +41,38 @@ describe('useBaseTable', () => {
     expect(result.columnsProp.value).toEqual(columns)
     expect(result.dataSource.value).toEqual(rows)
     expect(result.loading.value).toBe(false)
-    expect(result.paginationProps.value).toEqual({
+
+    // Compare paginationProps excluding the showTotal function
+    const expectedPaginationProps = {
       current: 1,
       pageSize: 10,
       total: rows.length,
       size: 'small',
       showSizeChanger: true,
       pageSizeOptions: ['10', '20', '30', '40', '50']
-    })
+    }
+    expect(result.paginationProps.value).toEqual(expect.objectContaining(expectedPaginationProps))
+    // Test showTotal function separately
+    expect(result.paginationProps.value.showTotal(5)).toBe('Total: 5')
   })
 
   it('should update paginationProps when onChange is called', () => {
     const [result] = withSetup(useBaseTable, { columns, rows })
     result.onChange({ current: 2, pageSize: 20 })
-    expect(result.paginationProps.value).toEqual({
+
+    // Compare paginationProps excluding the showTotal function
+    const expectedPaginationProps = {
       current: 2,
       pageSize: 20,
       total: rows.length,
       size: 'small',
       showSizeChanger: true,
       pageSizeOptions: ['10', '20', '30', '40', '50']
-    })
+    }
+    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')
   })
 
   it('should reset state when resetState is called', () => {
@@ -59,14 +81,19 @@ describe('useBaseTable', () => {
     expect(result.columnsProp.value).toEqual(columns)
     expect(result.dataSource.value).toEqual([])
     expect(result.loading.value).toBe(false)
-    expect(result.paginationProps.value).toEqual({
+
+    // Compare paginationProps excluding the showTotal function
+    const expectedPaginationProps = {
       current: 1,
       pageSize: 10,
       total: 0,
       size: 'small',
       showSizeChanger: true,
       pageSizeOptions: ['10', '20', '30', '40', '50']
-    })
+    }
+    expect(result.paginationProps.value).toEqual(expect.objectContaining(expectedPaginationProps))
+    // Test showTotal function separately
+    expect(result.paginationProps.value.showTotal(0)).toBe('Total: 0')
   })
 
   it('should update columnsProp when columns change', () => {
@@ -78,12 +105,12 @@ describe('useBaseTable', () => {
 
   it('should call resetState when component unmounts', () => {
     const [result, app] = withSetup(useBaseTable, { columns, rows })
-    const restStateSpy = vi.fn()
-    result.resetState = restStateSpy
+    const resetStateSpy = vi.fn()
+    result.resetState = resetStateSpy
     app.unmount = vi.fn().mockImplementation(() => {
-      restStateSpy()
+      resetStateSpy()
     })
     app.unmount()
-    expect(restStateSpy).toHaveBeenCalled()
+    expect(resetStateSpy).toHaveBeenCalled()
   })
 })