diff --git a/bigtop-manager-ui/src/components/create-service/components/component-assigner.vue b/bigtop-manager-ui/src/components/create-service/components/component-assigner.vue
index 231d354af..9f8664f51 100644
--- a/bigtop-manager-ui/src/components/create-service/components/component-assigner.vue
+++ b/bigtop-manager-ui/src/components/create-service/components/component-assigner.vue
@@ -18,14 +18,16 @@
 -->
 
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n'
   import { computed, onActivated, reactive, ref, shallowRef } from 'vue'
+  import { useI18n } from 'vue-i18n'
   import { TableColumnType, Empty } from 'ant-design-vue'
-  import { HostVO } from '@/api/hosts/types'
   import { getHosts } from '@/api/hosts'
-  import useCreateService from './use-create-service'
+  import { useCreateServiceStore } from '@/store/create-service'
+  import { useServiceStore } from '@/store/service'
+  import { storeToRefs } from 'pinia'
   import useBaseTable from '@/composables/use-base-table'
   import TreeSelector from './tree-selector.vue'
+  import type { HostVO } from '@/api/hosts/types'
   import type { FilterConfirmProps, FilterResetProps, TableRowSelection } from 'ant-design-vue/es/table/interface'
   import type { Key } from 'ant-design-vue/es/_util/type'
 
@@ -36,6 +38,10 @@
   }
 
   const { t } = useI18n()
+  const createStore = useCreateServiceStore()
+  const serviceStore = useServiceStore()
+  const { stepContext, selectedServices, allComps, allCompsMeta } = storeToRefs(createStore)
+
   const searchInputRef = ref()
   const currComp = ref<string>('')
   const fieldNames = shallowRef({
@@ -48,15 +54,6 @@
     searchedColumn: '',
     selectedRowKeys: []
   })
-  const {
-    clusterId,
-    installedStore,
-    allComps,
-    allCompsMeta,
-    creationModeType,
-    selectedServices,
-    updateHostsForComponent
-  } = useCreateService()
 
   const serviceList = computed(() =>
     selectedServices.value.map((v) => ({
@@ -67,7 +64,9 @@
 
   const currCompInfo = computed(() => allComps.value.get(currComp.value.split('/')[1]))
   const currCompInfoMeta = computed(() => allCompsMeta.value.get(currComp.value.split('/')[1]))
-  const installedServices = computed(() => installedStore.getInstalledNamesOrIdsOfServiceByKey(`${clusterId.value}`))
+  const installedServices = computed(() =>
+    serviceStore.getInstalledNamesOrIdsOfServiceByKey(`${stepContext.value.clusterId}`)
+  )
   const hostsOfCurrComp = computed((): HostVO[] => {
     const temp = currComp.value.split('/').at(-1)
     return allComps.value.has(temp!) ? allComps.value.get(temp!)?.hosts ?? [] : []
@@ -115,7 +114,8 @@
       return
     }
     try {
-      const res = await getHosts({ ...filtersParams.value, clusterId: clusterId.value })
+      const { clusterId } = stepContext.value
+      const res = await getHosts({ ...filtersParams.value, clusterId })
       dataSource.value = res.content.map((v) => ({ ...v, name: v.id, displayName: v.hostname }))
       paginationProps.value.total = res.total
       loading.value = false
@@ -133,8 +133,9 @@
   })
 
   const validateHostIsCheck = (host: HostVO) => {
+    const { type } = stepContext.value
     const notAdd = currCompInfoMeta.value?.hosts.findIndex((v) => v.hostname === host.hostname) == -1
-    if (creationModeType.value === 'component') {
+    if (type === 'component') {
       return !currCompInfo.value?.uninstall && !notAdd
     } else {
       return installedServices.value.includes(currComp.value.split('/')[0]) && !notAdd
@@ -149,8 +150,21 @@
   }
 
   const onSelectChange: TableRowSelection['onChange'] = (selectedRowKeys, selectedRows) => {
-    allComps.value.has(currComp.value.split('/').at(-1)!) && updateHostsForComponent(currComp.value, selectedRows)
-    state.selectedRowKeys = selectedRowKeys
+    const { cardinality, displayName } = currCompInfo.value || {}
+    const newCount = selectedRowKeys.length
+    const compKey = currComp.value.split('/').at(-1)!
+    const isInAllComps = allComps.value.has(compKey)
+    const shouldValidate = !!cardinality
+    const isValid = !shouldValidate || createStore.validCardinality(cardinality, newCount, displayName || '')
+
+    const isDeselecting = newCount < state.selectedRowKeys.length
+
+    if (isValid || isDeselecting) {
+      state.selectedRowKeys = selectedRowKeys
+      if (isInAllComps) {
+        createStore.setComponentHosts(currComp.value, selectedRows)
+      }
+    }
   }
 
   const resetSelectedRowKeys = (key: string) => {
diff --git a/bigtop-manager-ui/src/components/create-service/components/service-configurator.vue b/bigtop-manager-ui/src/components/create-service/components/service-configurator.vue
index 0fb1aa07b..150a876c4 100644
--- a/bigtop-manager-ui/src/components/create-service/components/service-configurator.vue
+++ b/bigtop-manager-ui/src/components/create-service/components/service-configurator.vue
@@ -19,10 +19,12 @@
 
 <script setup lang="ts">
   import { computed, onActivated, onDeactivated, ref, shallowRef, watch } from 'vue'
+  import { storeToRefs } from 'pinia'
   import { debounce } from 'lodash'
   import { Empty } from 'ant-design-vue'
   import TreeSelector from './tree-selector.vue'
-  import useCreateService from './use-create-service'
+  import { useCreateServiceStore } from '@/store/create-service'
+  import { useServiceStore } from '@/store/service'
   import type { ServiceConfigReq } from '@/api/command/types'
   import type { ComponentVO } from '@/api/component/types'
   import type { Key } from 'ant-design-vue/es/_util/type'
@@ -36,7 +38,9 @@
     isView: false
   })
 
-  const { clusterId, installedStore, selectedServices } = useCreateService()
+  const createStore = useCreateServiceStore()
+  const serviceStore = useServiceStore()
+  const { stepContext, selectedServices } = storeToRefs(createStore)
   const searchStr = ref('')
   const currService = ref<Key>('')
   const configs = ref<ServiceConfigReq[]>([])
@@ -65,15 +69,16 @@
 
   const serviceList = computed(() => selectedServices.value)
   const disabled = computed(() => {
-    return installedStore
-      .getInstalledNamesOrIdsOfServiceByKey(`${clusterId.value}`)
+    const clusterId = stepContext.value.clusterId
+    return serviceStore
+      .getInstalledNamesOrIdsOfServiceByKey(`${clusterId}`)
       .includes(currService.value.toString().split('/').at(-1)!)
   })
 
   // const disabled = computed(() => {
   //   return creationModeType.value === 'component'
   //     ? false
-  //     : installedStore
+  //     : serviceStore
   //         .getInstalledNamesOrIdsOfServiceByKey(`${clusterId.value}`)
   //         .includes(currService.value.toString().split('/').at(-1)!)
   // })
diff --git a/bigtop-manager-ui/src/components/create-service/components/service-selector.vue b/bigtop-manager-ui/src/components/create-service/components/service-selector.vue
index 200604707..65636bf29 100644
--- a/bigtop-manager-ui/src/components/create-service/components/service-selector.vue
+++ b/bigtop-manager-ui/src/components/create-service/components/service-selector.vue
@@ -20,7 +20,10 @@
 <script setup lang="ts">
   import { computed, onActivated, reactive, ref, shallowRef, toRefs } from 'vue'
   import { usePngImage } from '@/utils/tools'
-  import useCreateService from './use-create-service'
+  import { useStackStore } from '@/store/stack'
+  import { useServiceStore } from '@/store/service'
+  import { useCreateServiceStore } from '@/store/create-service'
+  import { storeToRefs } from 'pinia'
   import type { ExpandServiceVO } from '@/store/stack'
   import type { ComponentVO } from '@/api/component/types.ts'
   import type { ServiceVO } from '@/api/service/types'
@@ -30,28 +33,20 @@
     selectedData: ExpandServiceVO[]
   }
 
+  const stackStore = useStackStore()
+  const createStore = useCreateServiceStore()
+  const serviceStore = useServiceStore()
   const searchStr = ref('')
+  const spinning = ref(false)
   const licenseOfConflictService = shallowRef(['AGPL-3.0', 'GPLv2'])
   const state = reactive<State>({
     isAddableData: [],
     selectedData: []
   })
-  const {
-    clusterId,
-    routeParams,
-    selectedServices,
-    servicesOfInfra,
-    servicesOfExcludeInfra,
-    installedStore,
-    creationMode,
-    creationModeType,
-    confirmServiceDependencies,
-    setDataByCurrent
-  } = useCreateService()
+  const { stepContext, selectedServices, infraServices, excludeInfraServices } = storeToRefs(createStore)
   const { isAddableData } = toRefs(state)
-  const checkSelectedServicesOnlyInstalled = computed(
-    () => selectedServices.value.filter((v: ExpandServiceVO) => !v.isInstalled).length === 0
-  )
+  const targetServiceName = computed(() => serviceStore.serviceFlatMap[stepContext.value.serviceId].name!)
+  const checkIfInstalled = computed(() => selectedServices.value.filter((v) => !v.isInstalled).length === 0)
   const filterAddableData = computed(() =>
     isAddableData.value.filter(
       (v) =>
@@ -92,22 +87,22 @@
   const handleInstallItem = (item: ExpandServiceVO, from: ExpandServiceVO[], to: ExpandServiceVO[]) => {
     item.components = item.components?.map((v) => ({ ...v, hosts: [] }))
     moveItem(from, to, item)
-    setDataByCurrent(state.selectedData)
+    createStore.updateSelectedService(state.selectedData)
   }
 
-  const addInstallItem = async (item: ExpandServiceVO) => {
-    const items = await confirmServiceDependencies(item)
+  const modifyInstallItems = async (type: 'add' | 'remove', item: ExpandServiceVO) => {
+    const items = await createStore.confirmServiceDependencyAction(type, item)
     if (items.length > 0) {
       items.forEach((i) => {
-        handleInstallItem(i, state.isAddableData, state.selectedData)
+        if (type === 'add') {
+          handleInstallItem(i, state.isAddableData, state.selectedData)
+        } else {
+          handleInstallItem(i, state.selectedData, state.isAddableData)
+        }
       })
     }
   }
 
-  const removeInstallItem = (item: ExpandServiceVO) => {
-    handleInstallItem(item, state.selectedData, state.isAddableData)
-  }
-
   const splitSearchStr = (splitStr: string) => {
     return splitStr.toString().split(new RegExp(`(?<=${searchStr.value})|(?=${searchStr.value})`, 'i'))
   }
@@ -119,7 +114,8 @@
         if (!acc[name!]) {
           acc[name!] = {
             ...item,
-            hosts: [{ hostname, name: hostname, displayName: hostname }]
+            hosts: [{ hostname, name: hostname, displayName: hostname }],
+            cardinality: stackStore.stackRelationMap?.components[item.name!].cardinality
           }
         } else {
           acc[name!].hosts.push({ hostname, name: hostname, displayName: hostname })
@@ -130,7 +126,8 @@
   }
 
   const initInstalledServicesDetail = async () => {
-    const detailRes = await installedStore.getInstalledServicesDetailByKey(`${clusterId.value}`)
+    const clusterId = stepContext.value.clusterId
+    const detailRes = await serviceStore.getInstalledServicesDetailByKey(`${clusterId}`)
     const detailMap = new Map<string, ExpandServiceVO>()
     if (!detailRes) {
       return detailMap
@@ -146,60 +143,77 @@
     }
   }
 
-  const mergeInherentServiceAndInstalledService = (
+  const buildCompleteServiceInfo = (
     installedServiceMap: Map<string, ExpandServiceVO>,
     inherentServices: ServiceVO[]
   ) => {
-    const inherentService = inherentServices.filter((v) => v.name === routeParams.value.service)[0]
-    const installedService = { ...installedServiceMap.get(routeParams.value.service)! }
-    installedService.license = inherentService.license
-    const map = new Map(installedService.components!.map((item) => [item.name, item]))
-    inherentService.components!.forEach((item) => {
-      !map.has(item.name) && map.set(item.name, { ...item, hosts: [], uninstall: true })
-    })
-    installedService.components = [...map.values()]
-    return installedService
+    const inherent = inherentServices.find((v) => v.name === targetServiceName.value)!
+    const installed = { ...installedServiceMap.get(targetServiceName.value)! }
+    const mergedComponentsMap = new Map(
+      (installed.components ?? []).map((component) => [component.name, { ...component }])
+    )
+    for (const component of inherent.components ?? []) {
+      if (!mergedComponentsMap.has(component.name)) {
+        mergedComponentsMap.set(component.name, { ...component, hosts: [], uninstall: true })
+      }
+    }
+    installed.components = [...mergedComponentsMap.values()]
+    installed.license = inherent.license
+
+    return installed as ExpandServiceVO
   }
 
-  const addInstalledSymbolForSelectedServices = async (onlyInstalled: boolean) => {
-    if (onlyInstalled) {
-      const installedServiceMap = await initInstalledServicesDetail()
-      const installedServiceNames = installedStore.getInstalledNamesOrIdsOfServiceByKey(`${clusterId.value}`)
-      const inherentServices = creationMode.value === 'internal' ? servicesOfExcludeInfra.value : servicesOfInfra.value
+  const markSelectedAsInstalled = async (hasInstalled: boolean) => {
+    const { type, creationMode, clusterId } = stepContext.value
+    if (!hasInstalled) {
+      state.selectedData = [...selectedServices.value]
+      return
+    }
+    const installedServiceMap = await initInstalledServicesDetail()
+    const installedServiceNames = serviceStore.getInstalledNamesOrIdsOfServiceByKey(`${clusterId}`)
+    const rawServices = creationMode === 'internal' ? excludeInfraServices.value : infraServices.value
+    // Clone to prevent mutation of original data
+    const inherentServices = rawServices.map((s) => ({ ...s }))
 
-      if (creationModeType.value === 'component' && installedServiceMap.has(routeParams.value.service)) {
-        state.selectedData[0] = mergeInherentServiceAndInstalledService(installedServiceMap, inherentServices)
-        state.selectedData[0].isInstalled = true
-        state.isAddableData = []
-      } else {
-        for (const service of inherentServices) {
-          if (installedServiceNames.includes(service.name || '')) {
-            Object.assign(service, installedServiceMap.get(service.name!))
+    if (type === 'component' && installedServiceMap.has(targetServiceName.value!)) {
+      const completeService = buildCompleteServiceInfo(installedServiceMap, inherentServices)
+      state.selectedData[0] = { ...completeService, isInstalled: true }
+      state.isAddableData = []
+    } else {
+      for (const service of inherentServices) {
+        const name = service.name || ''
+        if (installedServiceNames.includes(name)) {
+          const installed = installedServiceMap.get(name)
+          if (installed) {
+            Object.assign(service, installed)
             service.isInstalled = true
-            state.selectedData.push(service as ExpandServiceVO)
-          } else {
-            state.isAddableData.push(service as ExpandServiceVO)
           }
+          state.selectedData.push(service as ExpandServiceVO)
+        } else {
+          state.isAddableData.push(service as ExpandServiceVO)
         }
       }
-      setDataByCurrent(state.selectedData)
-    } else {
-      state.selectedData = [...selectedServices.value]
     }
+
+    createStore.updateSelectedService(state.selectedData)
+    createStore.setTempData(state.selectedData)
   }
 
   onActivated(async () => {
-    await addInstalledSymbolForSelectedServices(checkSelectedServicesOnlyInstalled.value)
+    spinning.value = true
+    markSelectedAsInstalled(checkIfInstalled.value).finally(() => {
+      spinning.value = false
+    })
   })
 
   defineExpose({
-    addInstallItem
+    modifyInstallItems
   })
 </script>
 
 <template>
   <div class="service-selector">
-    <div>
+    <a-spin :spinning="spinning">
       <div class="list-title">
         <div>{{ $t('service.select_service') }}</div>
         <a-input v-model:value="searchStr" :placeholder="$t('service.please_enter_search_keyword')" />
@@ -208,7 +222,7 @@
         <template #renderItem="{ item }">
           <a-list-item>
             <template #actions>
-              <a-button type="primary" @click="addInstallItem(item)">{{ $t('common.add') }}</a-button>
+              <a-button type="primary" @click="modifyInstallItems('add', item)">{{ $t('common.add') }}</a-button>
             </template>
             <a-list-item-meta>
               <template #title>
@@ -248,9 +262,9 @@
           </a-list-item>
         </template>
       </a-list>
-    </div>
+    </a-spin>
     <a-divider type="vertical" class="divider" />
-    <div>
+    <a-spin :spinning="spinning">
       <div class="list-title">
         <div>{{ $t('service.pending_installation_services') }}</div>
       </div>
@@ -258,7 +272,7 @@
         <template #renderItem="{ item }">
           <a-list-item>
             <template #actions>
-              <a-button danger :disabled="item.isInstalled" type="primary" @click="removeInstallItem(item)">
+              <a-button danger :disabled="item.isInstalled" type="primary" @click="modifyInstallItems('remove', item)">
                 {{ $t('common.remove') }}
               </a-button>
             </template>
@@ -290,7 +304,7 @@
           </a-list-item>
         </template>
       </a-list>
-    </div>
+    </a-spin>
   </div>
 </template>
 
diff --git a/bigtop-manager-ui/src/components/create-service/components/use-create-service.ts b/bigtop-manager-ui/src/components/create-service/components/use-create-service.ts
deleted file mode 100644
index aaaeb25cd..000000000
--- a/bigtop-manager-ui/src/components/create-service/components/use-create-service.ts
+++ /dev/null
@@ -1,312 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *    https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { computed, ComputedRef, createVNode, effectScope, Ref, ref, watch } from 'vue'
-import { message, Modal } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
-import { ExpandServiceVO, useStackStore } from '@/store/stack'
-import { useInstalledStore } from '@/store/installed'
-import { execCommand } from '@/api/command'
-import useSteps from '@/composables/use-steps'
-import SvgIcon from '@/components/common/svg-icon/index.vue'
-import type { HostVO } from '@/api/hosts/types'
-import type { CommandRequest, CommandVO, ServiceCommandReq } from '@/api/command/types'
-import type { ServiceVO } from '@/api/service/types'
-import type { ComponentVO } from '@/api/component/types'
-
-interface ProcessResult {
-  success: boolean
-  conflictService?: ExpandServiceVO
-}
-
-interface RouteParams {
-  service: string
-  serviceId: number
-  id: number
-  cluster: string
-}
-
-interface CompItem extends ComponentVO {
-  hosts: HostVO[]
-}
-
-const scope = effectScope()
-let isChange = false
-let selectedServices: Ref<ExpandServiceVO[]>
-let selectedServicesMeta: Ref<ExpandServiceVO[]>
-let afterCreateRes: Ref<CommandVO>
-let servicesOfInfra: ComputedRef<ExpandServiceVO[]>
-let servicesOfExcludeInfra: ComputedRef<ExpandServiceVO[] | ServiceVO[]>
-let steps: ComputedRef<string[]>
-
-const setupStore = () => {
-  scope.run(() => {
-    selectedServices = ref<ExpandServiceVO[]>([])
-    selectedServicesMeta = ref<ExpandServiceVO[]>([])
-    afterCreateRes = ref<{ clusterId: number } & CommandVO>({ id: undefined, clusterId: 0 })
-    servicesOfInfra = computed(() => useStackStore().getServicesByExclude(['bigtop', 'extra']) as ExpandServiceVO[])
-    servicesOfExcludeInfra = computed(() => useStackStore().getServicesByExclude(['infra']))
-    steps = computed(() => [
-      'service.select_service',
-      'service.assign_component',
-      'service.configure_service',
-      'service.service_overview',
-      'service.install_component'
-    ])
-  })
-}
-
-const useCreateService = () => {
-  if (!isChange) {
-    setupStore()
-    isChange = true
-  }
-  const installedStore = useInstalledStore()
-  const route = useRoute()
-  const { t } = useI18n()
-  const processedServices = ref(new Set())
-  const { current, stepsLimit, previousStep, nextStep } = useSteps(steps.value)
-  const clusterId = computed(() => Number(route.params.id))
-  const creationMode = computed(() => route.params.creationMode as 'internal' | 'public')
-  const creationModeType = computed(() => route.params.type)
-  const routeParams = computed(() => route.params as unknown as RouteParams)
-
-  const commandRequest = ref<CommandRequest>({
-    command: 'Add',
-    commandLevel: 'service',
-    clusterId: clusterId.value
-  })
-
-  const allComps = computed(() => {
-    return new Map(
-      selectedServices.value.flatMap((s) =>
-        s.components!.map((comp) => [
-          comp.name,
-          { serviceName: s.name, serviceDisplayName: s.displayName, serviceId: s.id, ...comp }
-        ])
-      )
-    ) as Map<string, CompItem>
-  })
-
-  const allCompsMeta = computed(() => {
-    return new Map(
-      selectedServicesMeta.value.flatMap((s) =>
-        s.components!.map((comp) => [
-          comp.name,
-          { serviceName: s.name, serviceDisplayName: s.displayName, serviceId: s.id, ...comp }
-        ])
-      )
-    ) as Map<string, CompItem>
-  })
-
-  watch(
-    () => selectedServices.value,
-    () => {
-      processedServices.value = new Set(selectedServices.value.map((v) => v.name))
-    },
-    {
-      deep: true
-    }
-  )
-
-  const setDataByCurrent = (val: ExpandServiceVO[]) => {
-    selectedServices.value = val
-    selectedServicesMeta.value = JSON.parse(JSON.stringify(val))
-  }
-
-  const updateHostsForComponent = (compName: string, hosts: HostVO[]) => {
-    const [serviceName, componentName] = compName.split('/')
-    const service = selectedServices.value.find((svc) => svc.name === serviceName)
-    if (!service) return false
-    const component = service.components?.find((comp) => comp.name === componentName)
-    if (!component) return false
-    component.hosts = hosts
-  }
-
-  const transformServiceData = (services: ExpandServiceVO[]) => {
-    return services.map((service) => ({
-      serviceName: service.name,
-      installed: service.isInstalled === undefined ? false : service.isInstalled,
-      componentHosts: (service.components || []).map((component) => ({
-        componentName: component.name,
-        hostnames: (component.hosts || []).map((host: HostVO) => host.hostname)
-      })),
-      configs: service.configs
-    })) as ServiceCommandReq[]
-  }
-
-  // Validate services from infra
-  const validServiceFromInfra = (targetService: ExpandServiceVO, requiredServices: string[]) => {
-    const servicesOfInfraNames = servicesOfInfra.value.map((v) => v.name)
-    const installedServicesOfInfra = installedStore.getInstalledNamesOrIdsOfServiceByKey('0', 'names')
-    const set = new Set(installedServicesOfInfra)
-    const missServices = requiredServices.reduce((acc, name) => {
-      !set.has(name) && servicesOfInfraNames.includes(name) && acc.push(name)
-      return acc
-    }, [] as string[])
-
-    if (missServices.length === 0) return false
-    message.error(t('service.dependencies_conflict_msg', [targetService.displayName!, missServices.join(',')]))
-    return true
-  }
-
-  const processDependencies = async (
-    targetService: ExpandServiceVO,
-    serviceMap: Map<string, ExpandServiceVO>,
-    servicesOfInfra: ExpandServiceVO[],
-    collected: ExpandServiceVO[]
-  ): Promise<ProcessResult> => {
-    const dependencies = targetService.requiredServices || []
-
-    if (creationMode.value === 'internal' && validServiceFromInfra(targetService, dependencies)) {
-      return {
-        success: false,
-        conflictService: targetService
-      }
-    }
-
-    for (const serviceName of dependencies) {
-      const dependency = serviceMap.get(serviceName)
-      if (!dependency || processedServices.value.has(dependency.name!)) continue
-
-      if (dependency.isInstalled) continue
-
-      const shouldAdd = await confirmRequiredServicesToInstall(targetService, dependency)
-      if (!shouldAdd) return { success: false }
-
-      collected.push(dependency)
-      processedServices.value.add(dependency.name!)
-      const result = await processDependencies(dependency, serviceMap, servicesOfInfra, collected)
-
-      if (!result.success) {
-        collected.splice(collected.indexOf(dependency), 1)
-        processedServices.value.delete(dependency.name!)
-        return result
-      }
-    }
-    return { success: true }
-  }
-
-  const getServiceMap = (services: ServiceVO[]) => {
-    return new Map(services.map((s) => [s.name as string, s as ExpandServiceVO]))
-  }
-
-  const handlePreSelectedServiceDependencies = async (preSelectedService: ExpandServiceVO) => {
-    const serviceMap =
-      creationMode.value == 'public'
-        ? getServiceMap(servicesOfInfra.value)
-        : getServiceMap(servicesOfExcludeInfra.value)
-
-    const result: ExpandServiceVO[] = []
-    const dependenciesSuccess = await processDependencies(preSelectedService, serviceMap, servicesOfInfra.value, result)
-    if (dependenciesSuccess.success) {
-      result.unshift(preSelectedService)
-      return result
-    }
-    return []
-  }
-
-  const confirmServiceDependencies = async (preSelectedService: ExpandServiceVO) => {
-    const { requiredServices } = preSelectedService
-    if (!requiredServices) {
-      return [preSelectedService]
-    }
-    if (creationMode.value === 'internal' && validServiceFromInfra(preSelectedService, requiredServices)) {
-      return []
-    } else {
-      return await handlePreSelectedServiceDependencies(preSelectedService)
-    }
-  }
-
-  const confirmRequiredServicesToInstall = (targetService: ExpandServiceVO, requiredService: ExpandServiceVO) => {
-    return new Promise((resolve) => {
-      Modal.confirm({
-        content: t('service.dependencies_msg', [targetService.displayName, requiredService.displayName]),
-        icon: createVNode(SvgIcon, { name: 'unknown' }),
-        cancelText: t('common.no'),
-        okText: t('common.yes'),
-        onOk: () => resolve(true),
-        onCancel: () => {
-          Modal.destroyAll()
-          return resolve(false)
-        }
-      })
-    })
-  }
-
-  const createService = async () => {
-    try {
-      commandRequest.value.serviceCommands = transformServiceData(selectedServices.value)
-      afterCreateRes.value = await execCommand(commandRequest.value)
-      Object.assign(afterCreateRes.value, { clusterId })
-      return true
-    } catch (error) {
-      console.log('error :>> ', error)
-      return false
-    }
-  }
-
-  const addComponentForService = async () => {
-    try {
-      commandRequest.value.commandLevel = 'component'
-      commandRequest.value.componentCommands = []
-      for (const [compName, comp] of allComps.value) {
-        commandRequest.value.componentCommands?.push({
-          componentName: compName!,
-          hostnames: comp.hosts.map((v) => v.hostname!)
-        })
-      }
-      afterCreateRes.value = await execCommand(commandRequest.value)
-      Object.assign(afterCreateRes.value, { clusterId })
-      return true
-    } catch (error) {
-      console.log('error :>> ', error)
-      return false
-    }
-  }
-
-  return {
-    steps,
-    clusterId,
-    current,
-    stepsLimit,
-    selectedServices,
-    selectedServicesMeta,
-    servicesOfExcludeInfra,
-    servicesOfInfra,
-    installedStore,
-    allComps,
-    afterCreateRes,
-    scope,
-    creationMode,
-    creationModeType,
-    routeParams,
-    allCompsMeta,
-    setDataByCurrent,
-    addComponentForService,
-    updateHostsForComponent,
-    confirmServiceDependencies,
-    createService,
-    previousStep,
-    nextStep
-  }
-}
-
-export default useCreateService
diff --git a/bigtop-manager-ui/src/components/create-service/create.vue b/bigtop-manager-ui/src/components/create-service/create.vue
index e687373b5..101434bbb 100644
--- a/bigtop-manager-ui/src/components/create-service/create.vue
+++ b/bigtop-manager-ui/src/components/create-service/create.vue
@@ -18,48 +18,28 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onUnmounted, ref, shallowRef } from 'vue'
+  import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
   import { message } from 'ant-design-vue'
   import { useI18n } from 'vue-i18n'
-  import useCreateService from './components/use-create-service'
+  import { storeToRefs } from 'pinia'
+  import { useRoute } from 'vue-router'
+  import { StepContext, useCreateServiceStore } from '@/store/create-service'
   import ServiceSelector from './components/service-selector.vue'
   import ComponentAssigner from './components/component-assigner.vue'
   import ServiceConfigurator from './components/service-configurator.vue'
   import ComponentInstaller from './components/component-installer.vue'
 
   const { t } = useI18n()
-  const components = shallowRef<any[]>([ServiceSelector, ComponentAssigner, ServiceConfigurator, ServiceConfigurator])
-  const {
-    scope,
-    current,
-    stepsLimit,
-    steps,
-    allComps,
-    allCompsMeta,
-    creationModeType,
-    afterCreateRes,
-    selectedServices,
-    setDataByCurrent,
-    previousStep,
-    nextStep,
-    createService,
-    confirmServiceDependencies,
-    addComponentForService
-  } = useCreateService()
+  const route = useRoute()
+  const createStore = useCreateServiceStore()
+  const { current, stepsLimit, stepContext, selectedServices, createdPayload } = storeToRefs(createStore)
+
   const compRef = ref<any>()
+  const components = shallowRef<any[]>([ServiceSelector, ComponentAssigner, ServiceConfigurator, ServiceConfigurator])
   const currComp = computed(() => components.value[current.value])
-  const noUninstallComponent = computed(() => {
-    return (
-      current.value === 1 &&
-      creationModeType.value === 'component' &&
-      Array.from(allComps.value).every(
-        ([compName, { hosts }]) => hosts.length === allCompsMeta.value.get(compName)?.hosts?.length
-      )
-    )
-  })
 
   const validateServiceSelection = async () => {
-    if (creationModeType.value === 'component') {
+    if (stepContext.value.type === 'component') {
       return true
     }
 
@@ -74,13 +54,13 @@
   const validateDependenciesOfServiceSelection = async () => {
     let selectedServiceNames = new Set(selectedServices.value.map((service) => service.name))
     for (const selectedService of selectedServices.value) {
-      const serviceDependencies = await confirmServiceDependencies(selectedService)
+      const serviceDependencies = await createStore.confirmServiceDependencyAction('add', selectedService)
       if (serviceDependencies.length === 0) {
         return false
       }
       for (const service of serviceDependencies) {
         if (!selectedServiceNames.has(service.name)) {
-          compRef.value.addInstallItem(service)
+          compRef.value.modifyInstallItems('add', service)
           selectedServiceNames.add(service.name)
         }
       }
@@ -89,30 +69,52 @@
   }
 
   const validateComponentAssignments = () => {
-    const allComponents = Array.from(allComps.value.values())
-    const isValid = allComponents.every((comp) => comp?.hosts?.length > 0)
-    if (!isValid) {
-      message.error(t('service.component_host_assignment'))
+    let valid = true
+    for (const info of createStore.allComps.values()) {
+      if (!info.cardinality) {
+        continue
+      }
+      valid = createStore.validCardinality(info.cardinality, info.hosts.length, info.displayName!)
+      if (!valid) {
+        return
+      }
     }
-    return isValid
+    return valid
   }
 
   const stepValidators = [validateServiceSelection, validateComponentAssignments, () => true, () => true]
 
   const proceedToNextStep = async () => {
-    if (current.value < 3) {
-      ;(await stepValidators[current.value]()) && nextStep()
+    const { type } = stepContext.value
+    if (current.value < 3 && (await stepValidators[current.value]())) {
+      createStore.nextStep()
     } else if (current.value === 3) {
-      const state = creationModeType.value === 'component' ? await addComponentForService() : await createService()
+      const action = type === 'component' ? createStore.attachComponentToService : createStore.createService
+      const state = await action()
       if (state) {
-        nextStep()
+        createStore.nextStep()
       }
     }
   }
 
+  const setupStepCtx = () => {
+    const { id: clusterId, serviceId, creationMode, type } = route.params as StepContext
+    createStore.setStepContext({ clusterId, serviceId, creationMode, type })
+  }
+
+  watch(
+    () => route,
+    () => {
+      createStore.$reset()
+      setupStepCtx()
+    },
+    {
+      immediate: true
+    }
+  )
+
   onUnmounted(() => {
-    scope.stop()
-    setDataByCurrent([])
+    createStore.$reset()
   })
 </script>
 
@@ -121,7 +123,7 @@
     <header-card>
       <div class="steps-wrp">
         <a-steps :current="current">
-          <a-step v-for="step in steps" :key="step" :disabled="true">
+          <a-step v-for="step in createStore.steps" :key="step" :disabled="true">
             <template #title>
               <span>{{ $t(step) }}</span>
             </template>
@@ -130,29 +132,24 @@
       </div>
     </header-card>
     <main-card>
-      <template v-for="stepItem in steps" :key="stepItem.title">
-        <div v-show="steps[current] === stepItem" class="step-title">
+      <template v-for="stepItem in createStore.steps" :key="stepItem.title">
+        <div v-show="createStore.steps[current] === stepItem" class="step-title">
           <h5>{{ $t(stepItem) }}</h5>
           <section :class="{ 'step-content': current < stepsLimit }"></section>
         </div>
       </template>
       <keep-alive>
-        <component
-          :is="currComp"
-          ref="compRef"
-          :is-view="current === 3"
-          v-bind="{ ...$route.params, creationMode: $route.params.creationMode || 'internal' }"
-        />
+        <component :is="currComp" ref="compRef" :is-view="current === 3" />
       </keep-alive>
-      <component-installer v-if="current == stepsLimit" :step-data="afterCreateRes" />
+      <component-installer v-if="current == stepsLimit" :step-data="createdPayload" />
       <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">
+          <a-button v-show="current > 0 && current < stepsLimit" type="primary" @click="createStore.previousStep">
             {{ $t('common.prev') }}
           </a-button>
           <template v-if="current >= 0 && current <= stepsLimit - 1">
-            <a-button :disabled="noUninstallComponent" type="primary" @click="proceedToNextStep">
+            <a-button :disabled="false" type="primary" @click="proceedToNextStep">
               {{ $t('common.next') }}
             </a-button>
           </template>
diff --git a/bigtop-manager-ui/src/components/service-management/components.vue b/bigtop-manager-ui/src/components/service-management/components.vue
index 2d8528064..9fb8539ff 100644
--- a/bigtop-manager-ui/src/components/service-management/components.vue
+++ b/bigtop-manager-ui/src/components/service-management/components.vue
@@ -31,6 +31,7 @@
   import type { ComponentVO } from '@/api/component/types'
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { Command, CommandRequest } from '@/api/command/types'
+  import type { ServiceVO } from '@/api/service/types'
 
   type Key = string | number
   interface TableState {
@@ -40,20 +41,13 @@
     selectedRows: ComponentVO[]
   }
 
-  interface ServieceInfo {
-    cluster: string
-    id: number
-    service: string
-    serviceId: number
-  }
-
   const POLLING_INTERVAL = 3000
   const { t } = useI18n()
   const jobProgressStore = useJobProgress()
   const stackStore = useStackStore()
   const route = useRoute()
   const router = useRouter()
-  const attrs = useAttrs()
+  const attrs = useAttrs() as unknown as Required<ServiceVO> & { clusterId: number }
   const { stacks, stackRelationMap } = storeToRefs(stackStore)
   const searchInputRef = ref()
   const pollingIntervalId = ref<any>(null)
@@ -70,7 +64,6 @@
     selectedRows: []
   })
 
-  const currServiceInfo = computed(() => route.params as unknown as ServieceInfo)
   const componentsFromStack = computed(
     () =>
       new Map(
@@ -90,7 +83,7 @@
       key: 'name',
       ellipsis: true,
       filterMultiple: false,
-      filters: [...(componentsFromStack.value.get(currServiceInfo.value.service)?.values() || [])]?.map((v) => ({
+      filters: [...(componentsFromStack.value.get(attrs.name)?.values() || [])]?.map((v) => ({
         text: v?.displayName || '',
         value: v?.name || ''
       }))
@@ -201,14 +194,14 @@
     state.searchText = selectedKeys[0] as string
     state.searchedColumn = dataIndex
     stopPolling()
-    startPolling()
+    startPolling(true, true)
   }
 
   const handleReset = (clearFilters: (param?: FilterResetProps) => void) => {
     clearFilters({ confirm: true })
     state.searchText = ''
     stopPolling()
-    startPolling()
+    startPolling(true, true)
   }
 
   const dropdownMenuClick: GroupItem['dropdownMenuClickEvent'] = async ({ key }) => {
@@ -241,14 +234,11 @@
 
   const execOperation = async () => {
     try {
-      await jobProgressStore.processCommand(
-        { ...commandRequest.value, clusterId: currServiceInfo.value.id },
-        async () => {
-          getComponentList(true, true)
-          state.selectedRowKeys = []
-          state.selectedRows = []
-        }
-      )
+      await jobProgressStore.processCommand({ ...commandRequest.value, clusterId: attrs.clusterId }, async () => {
+        getComponentList(true, true)
+        state.selectedRowKeys = []
+        state.selectedRows = []
+      })
     } catch (error) {
       console.log('error :>> ', error)
     }
@@ -259,7 +249,7 @@
       title: t('common.delete_msg'),
       async onOk() {
         try {
-          const data = await deleteComponent({ clusterId: currServiceInfo.value.id, id: row.id! })
+          const data = await deleteComponent({ clusterId: attrs.clusterId, id: row.id! })
           if (data) {
             message.success(t('common.delete_success'))
             getComponentList(true, true)
@@ -272,8 +262,8 @@
   }
 
   const getComponentList = async (isReset = false, isFirstCall = false) => {
-    const { id: clusterId, serviceId } = currServiceInfo.value
-    if (attrs.id == undefined || !paginationProps.value) {
+    const { clusterId, id: serviceId } = attrs
+    if (!paginationProps.value) {
       loading.value = false
       return
     }
@@ -301,8 +291,8 @@
     startPolling()
   }
 
-  const startPolling = () => {
-    getComponentList(true, true)
+  const startPolling = (isReset = false, isFirstCall = false) => {
+    getComponentList(isReset, isFirstCall)
     pollingIntervalId.value = setInterval(() => {
       getComponentList()
     }, POLLING_INTERVAL)
@@ -316,9 +306,8 @@
   }
 
   const addComponent = () => {
-    const { cluster: clusterId } = route.params
-    const creationMode = clusterId == '0' ? 'public' : 'internal'
-    const routerName = clusterId == '0' ? 'CreateInfraComponent' : 'CreateComponent'
+    const creationMode = Number(attrs.clusterId) === 0 ? 'public' : 'internal'
+    const routerName = Number(attrs.clusterId) === 0 ? 'CreateInfraComponent' : 'CreateComponent'
     router.push({
       name: routerName,
       params: { ...route.params, creationMode, type: 'component' }
diff --git a/bigtop-manager-ui/src/components/service-management/configs.vue b/bigtop-manager-ui/src/components/service-management/configs.vue
index 346e2b897..06f997d76 100644
--- a/bigtop-manager-ui/src/components/service-management/configs.vue
+++ b/bigtop-manager-ui/src/components/service-management/configs.vue
@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { onActivated, inject, useAttrs, shallowRef, ref, onDeactivated, ComputedRef } from 'vue'
+  import { onActivated, inject, useAttrs, shallowRef, ref, onDeactivated } from 'vue'
   import { debounce } from 'lodash'
   import { useI18n } from 'vue-i18n'
   import { Empty, message } from 'ant-design-vue'
@@ -27,16 +27,8 @@
   import SnapshotManagement from './components/snapshot-management.vue'
   import type { Property, ServiceConfig, ServiceVO } from '@/api/service/types'
 
-  interface ServieceInfo {
-    cluster: string
-    id: number
-    service: string
-    serviceId: number
-  }
-
-  const { routeParams }: { routeParams: ComputedRef<ServieceInfo> } = inject('service') as any
-  const attrs = useAttrs() as unknown as ServiceVO
   const { t } = useI18n()
+  const attrs = useAttrs() as unknown as Required<ServiceVO> & { clusterId: number }
   const getServiceDetail = inject('getServiceDetail') as () => any
   const searchStr = ref('')
   const loading = ref(false)
@@ -99,9 +91,9 @@
 
   const saveConfigs = async () => {
     try {
-      const { serviceId, id: clusterId } = routeParams.value
+      const { id, clusterId } = attrs
       loading.value = true
-      const data = await updateServiceConfigs({ id: serviceId, clusterId }, [...configs.value])
+      const data = await updateServiceConfigs({ id, clusterId }, [...configs.value])
       if (data) {
         message.success(t('common.update_success'))
         getServiceDetail()
@@ -114,13 +106,13 @@
   }
 
   const onCaptureSnapshot = () => {
-    const { serviceId, id: clusterId } = routeParams.value
-    captureRef.value?.handleOpen({ id: serviceId, clusterId })
+    const { id, clusterId } = attrs
+    captureRef.value?.handleOpen({ id, clusterId })
   }
 
   const openSnapshotManagement = () => {
-    const { serviceId, id: clusterId } = routeParams.value
-    snapshotRef.value?.handleOpen({ id: serviceId, clusterId })
+    const { id, clusterId } = attrs
+    snapshotRef.value?.handleOpen({ id, clusterId })
   }
 
   onActivated(async () => {
diff --git a/bigtop-manager-ui/src/components/service-management/index.vue b/bigtop-manager-ui/src/components/service-management/index.vue
index d02c5f123..0cf98bcaa 100644
--- a/bigtop-manager-ui/src/components/service-management/index.vue
+++ b/bigtop-manager-ui/src/components/service-management/index.vue
@@ -32,10 +32,8 @@
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { ServiceVO } from '@/api/service/types'
 
-  interface ServieceInfo {
-    cluster: string
+  interface RouteParams {
     id: number
-    service: string
     serviceId: number
   }
 
@@ -43,10 +41,10 @@
   const route = useRoute()
   const serviceStore = useServiceStore()
   const jobProgressStore = useJobProgress()
-  const { loading } = storeToRefs(serviceStore)
+  const { loading, serviceMap } = storeToRefs(serviceStore)
   const activeKey = ref('1')
   const serviceDetail = shallowRef<ServiceVO>()
-  const routeParams = computed(() => route.params as unknown as ServieceInfo)
+  const routeParams = computed(() => route.params as unknown as RouteParams)
   const tabs = computed((): TabItem[] => [
     {
       key: '1',
@@ -90,13 +88,15 @@
   })
 
   const dropdownMenuClick: GroupItem['dropdownMenuClickEvent'] = async ({ key }) => {
+    const { id: clusterId, serviceId } = routeParams.value
+    const serviceName = serviceMap.value[clusterId].filter((service) => Number(serviceId) === service.id)[0].name!
     try {
       await jobProgressStore.processCommand(
         {
           command: key as keyof typeof Command,
-          clusterId: routeParams.value.id,
+          clusterId,
           commandLevel: 'service',
-          serviceCommands: [{ serviceName: routeParams.value.service, installed: true }]
+          serviceCommands: [{ serviceName, installed: true }]
         },
         getServiceDetail
       )
@@ -118,7 +118,6 @@
   }
 
   provide('getServiceDetail', getServiceDetail)
-  provide('service', { routeParams })
 
   onMounted(() => {
     getServiceDetail()
@@ -136,7 +135,7 @@
     <main-card v-model:active-key="activeKey" :tabs="tabs">
       <template #tab-item>
         <keep-alive>
-          <component :is="getCompName" v-bind="serviceDetail"></component>
+          <component :is="getCompName" v-bind="{ ...serviceDetail, clusterId: routeParams.id }"></component>
         </keep-alive>
       </template>
     </main-card>
diff --git a/bigtop-manager-ui/src/components/service-management/overview.vue b/bigtop-manager-ui/src/components/service-management/overview.vue
index 9ede91286..6fe460d5b 100644
--- a/bigtop-manager-ui/src/components/service-management/overview.vue
+++ b/bigtop-manager-ui/src/components/service-management/overview.vue
@@ -32,7 +32,7 @@
   }
 
   const { t } = useI18n()
-  const attrs = useAttrs()
+  const attrs = useAttrs() as unknown as Required<ServiceVO> & { clusterId: number }
   const currTimeRange = ref<TimeRangeText>('15m')
   const chartData = ref({
     chart1: [],
@@ -45,7 +45,6 @@
     2: 'unhealthy',
     3: 'unknown'
   })
-  const serviceDetail = computed(() => attrs as unknown as ServiceVO)
   const serviceKeys = computed(() => Object.keys(baseConfig.value) as (keyof ServiceVO)[])
   const noChartData = computed(() => Object.values(chartData.value).every((v) => v.length === 0))
   const timeRanges = computed((): TimeRangeItem[] => [
@@ -119,27 +118,27 @@
                         <a-tag
                           v-if="key === 'status'"
                           class="reset-tag"
-                          :color="CommonStatus[statusColors[serviceDetail[key]]]"
+                          :color="CommonStatus[statusColors[attrs[key]]]"
                         >
-                          <status-dot :color="CommonStatus[statusColors[serviceDetail[key]]]" />
-                          {{ serviceDetail[key] && $t(`common.${statusColors[serviceDetail[key]]}`) }}
+                          <status-dot :color="CommonStatus[statusColors[attrs[key]]]" />
+                          {{ attrs[key] && $t(`common.${statusColors[attrs[key]]}`) }}
                         </a-tag>
                         <a-typography-text
                           v-else-if="key === 'stack'"
                           class="desc-sub-item-desc-column"
-                          :content="serviceDetail[key]?.toLowerCase()"
+                          :content="attrs[key]?.toLowerCase()"
                         />
                         <a-typography-text
                           v-else-if="key === 'restartFlag'"
                           class="desc-sub-item-desc-column"
-                          :content="serviceDetail[key] ? $t('common.yes') : $t('common.no')"
+                          :content="attrs[key] ? $t('common.yes') : $t('common.no')"
                         />
                         <a-typography-text
                           v-else-if="['kerberos', 'metrics'].includes(key)"
                           class="desc-sub-item-desc-column"
                           :content="$t('common.disabled')"
                         />
-                        <a-typography-text v-else class="desc-sub-item-desc-column" :content="serviceDetail[key]" />
+                        <a-typography-text v-else class="desc-sub-item-desc-column" :content="attrs[key]" />
                       </div>
                     </template>
                   </div>
diff --git a/bigtop-manager-ui/src/layouts/index.vue b/bigtop-manager-ui/src/layouts/index.vue
index 11e3604a2..a9032d53c 100644
--- a/bigtop-manager-ui/src/layouts/index.vue
+++ b/bigtop-manager-ui/src/layouts/index.vue
@@ -24,21 +24,21 @@
 
   import { useUserStore } from '@/store/user'
   import { useMenuStore } from '@/store/menu'
-  import { useInstalledStore } from '@/store/installed'
   import { useClusterStore } from '@/store/cluster'
   import { useStackStore } from '@/store/stack'
+  import { useServiceStore } from '@/store/service'
   import { onMounted } from 'vue'
 
   const userStore = useUserStore()
   const menuStore = useMenuStore()
-  const installedStore = useInstalledStore()
+  const serviceStore = useServiceStore()
   const stackStore = useStackStore()
   const clusterStore = useClusterStore()
 
   onMounted(async () => {
     stackStore.loadStacks()
     await clusterStore.loadClusters()
-    installedStore.getServicesOfInfra()
+    serviceStore.getServicesOfInfra()
     userStore.getUserInfo()
     menuStore.setupMenu()
   })
diff --git a/bigtop-manager-ui/src/layouts/sider.vue b/bigtop-manager-ui/src/layouts/sider.vue
index 060a7b069..34a5cb349 100644
--- a/bigtop-manager-ui/src/layouts/sider.vue
+++ b/bigtop-manager-ui/src/layouts/sider.vue
@@ -32,7 +32,7 @@
   const routeParamsLen = ref(0)
   const openKeys = ref<string[]>(['clusters'])
   const { siderMenuSelectedKey, headerSelectedKey, siderMenus, routePathFromClusters } = storeToRefs(menuStore)
-  const { clusters, clusterCount } = storeToRefs(clusterStore)
+  const { clusterCount, clusterMap } = storeToRefs(clusterStore)
 
   const showCreateClusterBtn = computed(() => headerSelectedKey.value === '/cluster-manage')
   const selectMenuKeyFromClusters = computed(() => siderMenuSelectedKey.value.includes(routePathFromClusters.value))
@@ -48,10 +48,13 @@
     () => route,
     (newRoute) => {
       const { params, path, meta } = newRoute
+      const targetCluster = clusterMap.value[`${params.id}`]
       routeParamsLen.value = Object.keys(params).length
       if (path.includes(routePathFromClusters.value) && routeParamsLen.value > 0 && clusterCount.value > 0) {
-        const cluster = clusters.value.find((v) => `${v.id}` === params.id)
-        cluster && (siderMenuSelectedKey.value = `${routePathFromClusters.value}/${cluster.name}/${cluster.id}`)
+        if (targetCluster) {
+          // siderMenuSelectedKey.value = `${routePathFromClusters.value}/${targetCluster.name}/${targetCluster.id}`
+          siderMenuSelectedKey.value = `${routePathFromClusters.value}/${targetCluster.id}`
+        }
       } else {
         siderMenuSelectedKey.value = meta.activeMenu ?? path
       }
@@ -81,7 +84,7 @@
       v-model="openKeys"
       :selected-keys="[siderMenuSelectedKey]"
       mode="inline"
-      @select="({ key }) => menuStore.onSiderClick(key)"
+      @click="({ key }) => menuStore.onSiderClick(key)"
     >
       <template v-for="menuItem in siderMenus" :key="menuItem.path">
         <a-sub-menu v-if="menuItem.name === 'Clusters'" :key="menuItem.path">
@@ -100,8 +103,8 @@
             <span>{{ $t(menuItem.meta!.title!) }}</span>
           </template>
           <a-menu-item
-            v-for="child in clusters"
-            :key="`${routePathFromClusters}/${child.name}/${child.id}`"
+            v-for="child of clusterMap"
+            :key="`${routePathFromClusters}/${child.id}`"
             :title="child.displayName"
           >
             <template #icon>
diff --git a/bigtop-manager-ui/src/locales/en_US/service.ts b/bigtop-manager-ui/src/locales/en_US/service.ts
index b34603db4..a64422f3e 100644
--- a/bigtop-manager-ui/src/locales/en_US/service.ts
+++ b/bigtop-manager-ui/src/locales/en_US/service.ts
@@ -32,10 +32,14 @@ export default {
   component_host_assignment: 'Assign at least one host for each component',
   service_selection: 'Please select services to install',
   dependencies_conflict_msg: '{0} requires infra service {1} to be installed first',
-  dependencies_msg: '{0} requires service {1}, add it also?',
+  dependencies_add_msg: '{0} requires service {1}, add it also?',
+  dependencies_remove_msg: '{0} requires service {1}, remove it also?',
   capture_snapshot: 'Capture Snapshot',
   snapshot_management: 'Snapshot Management',
   snapshot_name: 'Name',
   snapshot_description: 'Description',
-  snapshot_notes: 'Snapshot Notes'
+  snapshot_notes: 'Snapshot Notes',
+  exact: '{0} requires exactly {1} host(s).',
+  range: '{0} requires between {1} and {2} host(s).',
+  minOnly: '{0} requires at least {1} host(s).'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/service.ts b/bigtop-manager-ui/src/locales/zh_CN/service.ts
index 515c839e1..5fde4be55 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/service.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/service.ts
@@ -32,10 +32,14 @@ export default {
   component_host_assignment: '每个组件至少分配一个主机',
   service_selection: '请选择需要安装的服务',
   dependencies_conflict_msg: '{0} 依赖于基础服务 {1}，请先前往安装',
-  dependencies_msg: '{0} 依赖于服务 {1}, 是否一起安装？',
+  dependencies_add_msg: '{0} 依赖于服务 {1}, 是否一起安装？',
+  dependencies_remove_msg: '{0} 依赖于服务 {1}, 是否一起移除？',
   capture_snapshot: '拍摄快照',
   snapshot_management: '快照管理',
   snapshot_name: '快照名',
   snapshot_description: '快照描述',
-  snapshot_notes: '快照备注'
+  snapshot_notes: '快照备注',
+  exact: '{0} 需要 {1} 个主机',
+  range: '{0} 需要 {1} 到 {2} 个主机',
+  minOnly: '{0} 至少需要 {1} 个主机'
 }
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 61784027e..5f0563917 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -121,7 +121,7 @@
   }
 
   const addService: GroupItem['clickEvent'] = () => {
-    router.push({ name: 'CreateService', params: { creationMode: 'internal' } })
+    router.push({ name: 'CreateService', params: { id: currCluster.value.id, creationMode: 'internal' } })
   }
 
   onMounted(() => {
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index 03165b570..253b89efa 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -139,7 +139,7 @@
   const viewServiceDetail = (payload: ServiceVO) => {
     router.push({
       name: 'ServiceDetail',
-      params: { service: payload.name, serviceId: payload.id }
+      params: { serviceId: payload.id }
     })
   }
 
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 45d67fb26..027aaf45d 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
@@ -380,7 +380,7 @@
 
   const getClusterSelectOptions = async () => {
     await nextTick()
-    const formatClusters = clusterStore.clusters.map((v) => ({ ...v, clusterId: v.id }))
+    const formatClusters = Object.values(clusterStore.clusterMap).map((v) => ({ ...v, clusterId: v.id }))
     autoFormRef.value?.setOptions('clusterId', formatClusters)
   }
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue
index 233cccfbd..b184f20d5 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue
@@ -55,7 +55,7 @@
     selectedRowKeys: []
   })
   const filtersOfClusterDisplayName = computed(() =>
-    clusterStore.clusters.map((v) => ({
+    Object.values(clusterStore.clusterMap).map((v) => ({
       text: v.displayName || v.name,
       value: v.id!
     }))
@@ -212,7 +212,7 @@
   }
 
   const editHost = (row: HostVO) => {
-    const cluster = clusterStore.clusters.find((v) => v.name === row.clusterName)
+    const cluster = Object.values(clusterStore.clusterMap).find((v) => v.name === row.clusterName)
     const formatHost = { ...row, displayName: row.clusterDisplayName, clusterId: cluster?.id }
     hostCreateRef.value?.handleOpen('EDIT', formatHost)
   }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/install-dependencies.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/install-dependencies.vue
index 559bdbbfb..c9c2d0341 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/install-dependencies.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/install-dependencies.vue
@@ -48,7 +48,7 @@
   const { t } = useI18n()
   const emits = defineEmits<Emits>()
   const clusterStore = useClusterStore()
-  const { clusters } = storeToRefs(clusterStore)
+  const { clusterMap } = storeToRefs(clusterStore)
   const installing = ref(false)
   const open = ref(false)
   const searchInputRef = ref()
@@ -60,7 +60,6 @@
     selectedRowKeys: []
   })
   const allInstallSuccess = computed(() => dataSource.value.every((v) => v.status === Status.Success))
-  const clusterNameMap = computed(() => new Map(clusters.value.map((v) => [v.id, v])))
   const columns = computed((): TableColumnType<HostReq & { status: string }>[] => [
     {
       title: t('host.hostname'),
@@ -312,8 +311,8 @@
         </template>
         <template #bodyCell="{ record, column }">
           <template v-if="column.key === 'clusterId'">
-            <span :title="`${clusterNameMap.get(record.clusterId)?.displayName}`">
-              {{ clusterNameMap.get(record.clusterId)?.displayName }}
+            <span :title="`${clusterMap[record.clusterId]?.displayName}`">
+              {{ clusterMap[record.clusterId]?.displayName }}
             </span>
           </template>
           <template v-if="column.key === 'status'">
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
index ae19d1078..54fece856 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
@@ -24,9 +24,9 @@
   import { formatFromByte } from '@/utils/storage.ts'
   import { usePngImage } from '@/utils/tools'
   import { CommonStatus, CommonStatusTexts } from '@/enums/state.ts'
+  import { useServiceStore } from '@/store/service'
   import { useJobProgress } from '@/store/job-progress'
   import { useStackStore } from '@/store/stack'
-  import { useInstalledStore } from '@/store/installed'
   import { getComponentsByHost } from '@/api/hosts'
   import { Command } from '@/api/command/types'
   import CategoryChart from '@/pages/cluster-manage/cluster/components/category-chart.vue'
@@ -50,8 +50,8 @@
   const { hostInfo } = toRefs(props)
   const { t } = useI18n()
   const stackStore = useStackStore()
+  const serviceStore = useServiceStore()
   const jobProgressStore = useJobProgress()
-  const installedStore = useInstalledStore()
   const currTimeRange = ref<TimeRangeText>('15m')
   const statusColors = shallowRef<Record<HostStatusType, keyof typeof CommonStatusTexts>>({
     1: 'healthy',
@@ -133,9 +133,9 @@
 
   const handleHostOperate = async (item: MenuItem, component: ComponentVO) => {
     const { serviceName } = component
-    const installedServiceMap = Object.values(installedStore.installedServiceMap)
+    const installedServiceMap = Object.values(serviceStore.serviceMap)
       .flat()
-      .filter((v) => v.serviceName === serviceName)
+      .filter((v) => v.name === serviceName)
     if (installedServiceMap.length > 0) {
       try {
         await jobProgressStore.processCommand(
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
index 1824c0d0c..e667fdb33 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
@@ -32,8 +32,7 @@
   const router = useRouter()
   const activeKey = ref('1')
   const currCluster = shallowRef<ClusterVO>({
-    id: 0,
-    name: '0'
+    id: 0
   })
 
   const tabs = computed((): TabItem[] => [
@@ -62,7 +61,7 @@
   })
 
   const addService: GroupItem['clickEvent'] = () => {
-    router.push({ name: 'CreateInfraService', params: { id: 0, cluster: 0, creationMode: 'public' } })
+    router.push({ name: 'CreateInfraService', params: { id: 0, creationMode: 'public' } })
   }
 </script>
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
index 18a0d459b..f014ee532 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
@@ -119,8 +119,6 @@
       name: 'InfraServiceDetail',
       params: {
         id: clusterInfo.id,
-        service: payload.name,
-        cluster: clusterInfo.name,
         serviceId: payload.id
       }
     })
diff --git a/bigtop-manager-ui/src/router/guard.ts b/bigtop-manager-ui/src/router/guard.ts
index 6f7030f96..e907185e8 100644
--- a/bigtop-manager-ui/src/router/guard.ts
+++ b/bigtop-manager-ui/src/router/guard.ts
@@ -20,8 +20,9 @@
 import type { NavigationGuardNext, Router } from 'vue-router'
 import { useClusterStore } from '@/store/cluster'
 function setCommonGuard(router: Router) {
-  router.beforeEach(async (to, from, next) => {
-    if (to.name === 'Clusters' && from.name !== 'Login') {
+  const token = localStorage.getItem('Token') ?? sessionStorage.getItem('Token') ?? undefined
+  router.beforeEach(async (to, _from, next) => {
+    if (to.name === 'Clusters' && token) {
       checkClusterSelect(next)
     } else {
       next()
diff --git a/bigtop-manager-ui/src/router/routes/modules/clusters.ts b/bigtop-manager-ui/src/router/routes/modules/clusters.ts
index 7e5139b99..be915a892 100644
--- a/bigtop-manager-ui/src/router/routes/modules/clusters.ts
+++ b/bigtop-manager-ui/src/router/routes/modules/clusters.ts
@@ -50,7 +50,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'ClusterDetail',
-            path: ':cluster/:id',
+            path: ':id',
             component: () => import('@/pages/cluster-manage/cluster/index.vue'),
             meta: {
               hidden: true
@@ -66,7 +66,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'CreateService',
-            path: ':cluster/:id/create-service/:creationMode?',
+            path: ':id/create-service/:creationMode?',
             component: () => import('@/components/create-service/create.vue'),
             meta: {
               hidden: true
@@ -74,7 +74,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'ServiceDetail',
-            path: ':cluster/:id/service-detail/:service/:serviceId',
+            path: ':id/service-detail/:serviceId',
             component: () => import('@/components/service-management/index.vue'),
             meta: {
               hidden: true
@@ -82,7 +82,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'CreateComponent',
-            path: ':cluster/:id/create-component/:service/:serviceId/:creationMode?/:type',
+            path: ':id/create-component/:serviceId/:creationMode?/:type',
             component: () => import('@/components/create-service/create.vue'),
             meta: {
               hidden: true
@@ -119,7 +119,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'InfraServiceDetail',
-            path: 'create-infra-service/service-detail/:id/:cluster/:service/:serviceId',
+            path: 'create-infra-service/service-detail/:id/:serviceId',
             component: () => import('@/components/service-management/index.vue'),
             meta: {
               hidden: true,
@@ -128,7 +128,7 @@ const routes: RouteRecordRaw[] = [
           },
           {
             name: 'CreateInfraComponent',
-            path: '/create-infra-service/create-infra-component/:id/:cluster/:service/:serviceId/:creationMode/:type',
+            path: '/create-infra-service/create-infra-component/:id/:serviceId/:creationMode/:type',
             component: () => import('@/components/create-service/create.vue'),
             meta: {
               hidden: true,
diff --git a/bigtop-manager-ui/src/store/cluster/index.ts b/bigtop-manager-ui/src/store/cluster/index.ts
index b9a770300..c42048ddc 100644
--- a/bigtop-manager-ui/src/store/cluster/index.ts
+++ b/bigtop-manager-ui/src/store/cluster/index.ts
@@ -17,51 +17,50 @@
  * under the License.
  */
 
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { useRoute } from 'vue-router'
 import { getCluster, getClusterList } from '@/api/cluster'
 import { useServiceStore } from '@/store/service'
-import { useInstalledStore } from '@/store/installed'
 import type { ClusterVO } from '@/api/cluster/types.ts'
 
 export const useClusterStore = defineStore(
   'cluster',
   () => {
     const route = useRoute()
-    const installedStore = useInstalledStore()
     const serviceStore = useServiceStore()
-    const clusters = ref<ClusterVO[]>([])
     const loading = ref(false)
+    const clusters = ref<ClusterVO[]>([])
     const currCluster = ref<ClusterVO>({})
+    const clusterMap = ref<Record<string, ClusterVO>>({})
     const clusterId = computed(() => (route.params.id as string) || undefined)
-    const clusterCount = computed(() => clusters.value.length)
+    const clusterCount = computed(() => Object.values(clusterMap.value).length)
 
-    watch(
-      () => clusters.value,
-      (val) => {
-        val.forEach((cluster) => {
-          installedStore.setInstalledMapKey(`${cluster.id}`)
-        })
+    const loadClusters = async () => {
+      try {
+        const clusterList = await getClusterList()
+        clusterMap.value = clusterList.reduce(
+          (pre, cluster) => {
+            pre[cluster.id!] = cluster
+            return pre
+          },
+          {} as Record<string, ClusterVO>
+        )
+      } catch (error) {
+        clusterMap.value = {}
+        console.log('error :>> ', error)
       }
-    )
-
-    const addCluster = async () => {
-      await loadClusters()
-    }
-
-    const delCluster = async () => {
-      await loadClusters()
     }
 
     const getClusterDetail = async () => {
       if (clusterId.value == undefined) {
+        currCluster.value = {}
         return
       }
       try {
         loading.value = true
-        currCluster.value = await getCluster(parseInt(clusterId.value))
-        await serviceStore.getServices(currCluster.value.id!)
+        currCluster.value = await getCluster(Number(clusterId.value))
+        await serviceStore.getServices(Number(clusterId.value))
       } catch (error) {
         currCluster.value = {}
         console.log('error :>> ', error)
@@ -70,30 +69,30 @@ export const useClusterStore = defineStore(
       }
     }
 
-    const loadClusters = async () => {
-      try {
-        clusters.value = await getClusterList()
-      } catch (error) {
-        clusters.value.length = 0
-        console.log('error :>> ', error)
-      }
+    const addCluster = async () => {
+      await loadClusters()
+    }
+
+    const delCluster = async () => {
+      await loadClusters()
     }
 
     return {
       clusters,
+      clusterMap,
       loading,
       currCluster,
       clusterCount,
-      addCluster,
-      delCluster,
       loadClusters,
-      getClusterDetail
+      getClusterDetail,
+      addCluster,
+      delCluster
     }
   },
   {
     persist: {
       storage: sessionStorage,
-      paths: ['clusters']
+      paths: ['clusterMap']
     }
   }
 )
diff --git a/bigtop-manager-ui/src/store/create-service/index.ts b/bigtop-manager-ui/src/store/create-service/index.ts
new file mode 100644
index 000000000..385d09197
--- /dev/null
+++ b/bigtop-manager-ui/src/store/create-service/index.ts
@@ -0,0 +1,304 @@
+/*
+ * 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 { computed, ref, shallowRef } from 'vue'
+import { defineStore } from 'pinia'
+import useSteps from '@/composables/use-steps'
+import { useValidations } from './validation'
+import { ExpandServiceVO, useStackStore } from '@/store/stack'
+import { execCommand } from '@/api/command'
+import type { ServiceVO } from '@/api/service/types'
+import type { CommandRequest, CommandVO, ComponentCommandReq, ServiceCommandReq } from '@/api/command/types'
+import type { HostVO } from '@/api/hosts/types'
+import type { ComponentVO } from '@/api/component/types'
+
+const STEPS_TITLES = [
+  'service.select_service',
+  'service.assign_component',
+  'service.configure_service',
+  'service.service_overview',
+  'service.install_component'
+]
+
+export interface ProcessResult {
+  success: boolean
+  conflictService?: ExpandServiceVO
+}
+
+export interface StepContext {
+  clusterId: number
+  serviceId: number
+  creationMode: 'internal' | 'public'
+  type?: 'component'
+  [propName: string]: any
+}
+
+export interface CompItem extends ComponentVO {
+  hosts: HostVO[]
+}
+
+export const useCreateServiceStore = defineStore(
+  'service-create',
+  () => {
+    const validations = useValidations()
+    const stackStore = useStackStore()
+
+    const steps = shallowRef(STEPS_TITLES)
+    const selectedServices = ref<ExpandServiceVO[]>([])
+    const selectedServicesMeta = ref<ExpandServiceVO[]>([])
+    const createdPayload = ref<CommandVO>({})
+    const stepContext = ref<StepContext>({
+      clusterId: 0,
+      serviceId: 0,
+      creationMode: 'internal'
+    })
+    const commandRequest = ref<CommandRequest>({
+      command: 'Add',
+      commandLevel: 'service'
+    })
+    const { current, stepsLimit, previousStep, nextStep } = useSteps(steps.value)
+    const infraServices = computed(() => stackStore.getServicesByExclude(['bigtop', 'extra']) as ExpandServiceVO[])
+    const excludeInfraServices = computed(() => stackStore.getServicesByExclude(['infra']))
+    const infraServiceNames = computed(() => infraServices.value.map((v) => v.name!))
+    const processedServices = computed(() => new Set(selectedServices.value.map((v) => v.name)))
+    const creationMode = computed(() => stepContext.value.creationMode)
+    const currentClusterId = computed(() => (creationMode.value === 'internal' ? stepContext.value.clusterId : 0))
+
+    const allComps = computed(() => {
+      return new Map(
+        selectedServices.value.flatMap((s) =>
+          s.components!.map((comp) => {
+            return [comp.name, { serviceName: s.name, serviceDisplayName: s.displayName, serviceId: s.id, ...comp }]
+          })
+        )
+      ) as Map<string, CompItem>
+    })
+
+    const allCompsMeta = computed(() => {
+      return new Map(
+        selectedServicesMeta.value.flatMap((s) =>
+          s.components!.map((comp) => [
+            comp.name,
+            { serviceName: s.name, serviceDisplayName: s.displayName, serviceId: s.id, ...comp }
+          ])
+        )
+      ) as Map<string, CompItem>
+    })
+
+    function getServiceMap(services: ServiceVO[]) {
+      return new Map(services.map((s) => [s.name as string, s as ExpandServiceVO]))
+    }
+
+    function updateSelectedService(partial: ExpandServiceVO[]) {
+      selectedServices.value = partial
+    }
+
+    function setTempData(partial: ExpandServiceVO[]) {
+      selectedServicesMeta.value = JSON.parse(JSON.stringify(partial))
+    }
+
+    function setStepContext(partial: StepContext) {
+      stepContext.value = partial
+    }
+
+    async function confirmServiceDependencyAction(type: 'add' | 'remove', preSelectedService: ExpandServiceVO) {
+      const { requiredServices } = preSelectedService
+      if (!requiredServices && type === 'add') {
+        return [preSelectedService]
+      }
+      const valid = validations.validServiceFromInfra(preSelectedService, requiredServices!, infraServiceNames.value)
+      if (type === 'add' && creationMode.value === 'internal' && valid) {
+        return []
+      } else {
+        return await handleServiceDependencyConfirm(type, preSelectedService)
+      }
+    }
+
+    async function handleServiceDependencyConfirm(type: 'add' | 'remove', preSelectedService: ExpandServiceVO) {
+      let dependenciesSuccess: ProcessResult = { success: false }
+      const result: ExpandServiceVO[] = []
+      if (type === 'add') {
+        const target = creationMode.value === 'public' ? infraServices.value : excludeInfraServices.value
+        const serviceMap = getServiceMap(target)
+        dependenciesSuccess = await processDependencies(preSelectedService, serviceMap, infraServices.value, result)
+      } else {
+        dependenciesSuccess = await notifyDependents(preSelectedService, result)
+      }
+      if (dependenciesSuccess.success) {
+        result.unshift(preSelectedService)
+        return result
+      }
+      return []
+    }
+
+    async function notifyDependents(
+      targetService: ExpandServiceVO,
+      collected: ExpandServiceVO[]
+    ): Promise<ProcessResult> {
+      for (const service of selectedServices.value) {
+        if (!service.requiredServices?.includes(targetService.name!)) continue
+
+        const shouldRemove = await validations.confirmDependencyAddition('remove', service, targetService)
+        if (!shouldRemove) return { success: false }
+        collected.push(service)
+
+        const result = await notifyDependents(service, collected)
+        if (!result.success) {
+          collected.splice(collected.indexOf(service), 1)
+          processedServices.value.delete(service.name!)
+          return result
+        }
+      }
+      return { success: true }
+    }
+
+    async function processDependencies(
+      targetService: ExpandServiceVO,
+      serviceMap: Map<string, ExpandServiceVO>,
+      servicesOfInfra: ExpandServiceVO[],
+      collected: ExpandServiceVO[]
+    ): Promise<ProcessResult> {
+      const dependencies = targetService.requiredServices || []
+
+      const valid = validations.validServiceFromInfra(targetService, dependencies, infraServiceNames.value)
+      if (creationMode.value === 'internal' && valid) {
+        return { success: false, conflictService: targetService }
+      }
+
+      for (const serviceName of dependencies) {
+        const dependency = serviceMap.get(serviceName)
+        if (!dependency || processedServices.value.has(dependency.name!)) continue
+
+        if (dependency.isInstalled) continue
+
+        const shouldAdd = await validations.confirmDependencyAddition('add', targetService, dependency)
+        if (!shouldAdd) return { success: false }
+
+        collected.push(dependency)
+        processedServices.value.add(dependency.name!)
+        const result = await processDependencies(dependency, serviceMap, servicesOfInfra, collected)
+        if (!result.success) {
+          collected.splice(collected.indexOf(dependency), 1)
+          processedServices.value.delete(dependency.name!)
+          return result
+        }
+      }
+      return { success: true }
+    }
+
+    function formatServiceData(services: ExpandServiceVO[]) {
+      return services.map((service) => ({
+        serviceName: service.name,
+        installed: service.isInstalled === undefined ? false : service.isInstalled,
+        componentHosts: (service.components || []).map((component) => ({
+          componentName: component.name,
+          hostnames: (component.hosts || []).map((host: HostVO) => host.hostname)
+        })),
+        configs: service.configs
+      })) as ServiceCommandReq[]
+    }
+
+    function formatComponentData(components: Map<string, CompItem>) {
+      const componentCommands = [] as ComponentCommandReq[]
+      for (const [compName, comp] of components) {
+        componentCommands?.push({
+          componentName: compName!,
+          hostnames: comp.hosts.map((v) => v.hostname!)
+        })
+      }
+      return componentCommands
+    }
+
+    function setComponentHosts(compName: string, hosts: HostVO[]) {
+      const [serviceName, componentName] = compName.split('/')
+      const service = selectedServices.value.find((svc) => svc.name === serviceName)
+      if (!service) return false
+      const component = service.components?.find((comp) => comp.name === componentName)
+      if (!component) return false
+      component.hosts = hosts
+    }
+
+    async function createService() {
+      try {
+        commandRequest.value.serviceCommands = formatServiceData(selectedServices.value)
+        createdPayload.value = await execCommand({ ...commandRequest.value, clusterId: currentClusterId.value })
+        Object.assign(createdPayload.value, { clusterId: currentClusterId.value })
+        return true
+      } catch (error) {
+        console.log('error :>> ', error)
+        return false
+      }
+    }
+
+    async function attachComponentToService() {
+      try {
+        commandRequest.value.commandLevel = 'component'
+        commandRequest.value.componentCommands = formatComponentData(allComps.value)
+        createdPayload.value = await execCommand({ ...commandRequest.value, clusterId: currentClusterId.value })
+        Object.assign(createdPayload.value, { clusterId: currentClusterId.value })
+        return true
+      } catch (error) {
+        console.log('error :>> ', error)
+        return false
+      }
+    }
+
+    function $reset() {
+      current.value = 0
+      selectedServices.value = []
+      selectedServicesMeta.value = []
+      createdPayload.value = {}
+      stepContext.value = {
+        clusterId: 0,
+        serviceId: 0,
+        creationMode: 'internal'
+      }
+      commandRequest.value = {
+        command: 'Add',
+        commandLevel: 'service'
+      }
+    }
+
+    return {
+      steps,
+      selectedServices,
+      stepContext,
+      infraServices,
+      excludeInfraServices,
+      current,
+      stepsLimit,
+      nextStep,
+      previousStep,
+      allComps,
+      allCompsMeta,
+      updateSelectedService,
+      setStepContext,
+      setTempData,
+      confirmServiceDependencyAction,
+      setComponentHosts,
+      createService,
+      createdPayload,
+      attachComponentToService,
+      $reset,
+      validCardinality: validations.validCardinality
+    }
+  },
+  {
+    persist: false
+  }
+)
diff --git a/bigtop-manager-ui/src/store/create-service/validation.ts b/bigtop-manager-ui/src/store/create-service/validation.ts
new file mode 100644
index 000000000..cf5c361e9
--- /dev/null
+++ b/bigtop-manager-ui/src/store/create-service/validation.ts
@@ -0,0 +1,105 @@
+/*
+ * 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 { message, Modal } from 'ant-design-vue'
+import { createVNode } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useServiceStore } from '@/store/service'
+import SvgIcon from '@/components/common/svg-icon/index.vue'
+import type { ExpandServiceVO } from '@/store/stack'
+
+export function useValidations() {
+  const { t } = useI18n()
+  const serviceStore = useServiceStore()
+
+  // Validate services from infra
+  function validServiceFromInfra(
+    targetService: ExpandServiceVO,
+    requiredServices: string[],
+    infraServiceNames: string[]
+  ) {
+    const installedInfra = serviceStore.getInstalledNamesOrIdsOfServiceByKey('0', 'names')
+    const set = new Set(installedInfra)
+    const missServices = requiredServices.reduce((acc, name) => {
+      !set.has(name) && infraServiceNames.includes(name) && acc.push(name)
+      return acc
+    }, [] as string[])
+
+    if (missServices.length === 0) return false
+    message.error(t('service.dependencies_conflict_msg', [targetService.displayName!, missServices.join(',')]))
+    return true
+  }
+
+  function confirmDependencyAddition(
+    type: 'add' | 'remove',
+    targetService: ExpandServiceVO,
+    requiredService: ExpandServiceVO
+  ) {
+    const content = type === 'add' ? 'dependencies_add_msg' : 'dependencies_remove_msg'
+    return new Promise((resolve) => {
+      Modal.confirm({
+        content: t(`service.${content}`, [targetService.displayName, requiredService.displayName]),
+        icon: createVNode(SvgIcon, { name: 'unknown' }),
+        cancelText: t('common.no'),
+        okText: t('common.yes'),
+        onOk: () => resolve(true),
+        onCancel: () => {
+          Modal.destroyAll()
+          return resolve(false)
+        }
+      })
+    })
+  }
+
+  function validCardinality(cardinality: string, count: number, displayName: string): boolean {
+    if (/^\d+$/.test(cardinality)) {
+      const expected = parseInt(cardinality, 10)
+      if (count != expected) {
+        message.error(t('service.exact', [displayName, expected]))
+        return false
+      }
+    }
+
+    if (/^\d+-\d+$/.test(cardinality)) {
+      const [minStr, maxStr] = cardinality.split('-')
+      const min = parseInt(minStr, 10)
+      const max = parseInt(maxStr, 10)
+      if (count < min || count > max) {
+        message.error(t('service.range', [displayName, min, max]))
+        return false
+      }
+    }
+
+    if (/^\d+\+$/.test(cardinality)) {
+      const min = parseInt(cardinality.slice(0, -1), 10)
+      if (count < min) {
+        message.error(t('service.minOnly', [displayName, min]))
+        return false
+      }
+    }
+
+    return true
+  }
+
+  return {
+    confirmDependencyAddition,
+    validCardinality,
+    validServiceFromInfra
+  }
+}
diff --git a/bigtop-manager-ui/src/store/installed/index.ts b/bigtop-manager-ui/src/store/installed/index.ts
deleted file mode 100644
index bb404d472..000000000
--- a/bigtop-manager-ui/src/store/installed/index.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *    https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { useServiceStore } from '@/store/service'
-import type { ServiceVO } from '@/api/service/types.ts'
-
-export interface InstalledMapItem {
-  serviceId: number
-  serviceName: string
-  serviceDisplayName: string
-  clusterId: number
-}
-
-export const useInstalledStore = defineStore(
-  'installed',
-  () => {
-    const serviceStore = useServiceStore()
-    const installedServiceMap = ref<Record<string, InstalledMapItem[]>>({})
-
-    const getInstalledNamesOrIdsOfServiceByKey = (key: string, flag: 'names' | 'ids' = 'names') => {
-      return installedServiceMap.value[key].map((value) => {
-        if (flag === 'ids') {
-          return value.serviceId
-        } else {
-          return value.serviceName
-        }
-      })
-    }
-
-    const setInstalledMapKey = (key: string) => {
-      installedServiceMap.value[key] = []
-    }
-
-    const setInstalledMapKeyOfValue = (key: string, value: InstalledMapItem[]) => {
-      installedServiceMap.value[key] = value
-    }
-
-    const getServicesOfInfra = async () => {
-      await serviceStore.getServices(0)
-    }
-
-    const getInstalledServicesDetailByKey = async (key: string): Promise<ServiceVO[] | undefined> => {
-      try {
-        const serviceIds = getInstalledNamesOrIdsOfServiceByKey(key, 'ids')
-        const allDetail = serviceIds?.map((id) =>
-          serviceStore.getServiceDetail(Number(key), Number(id))
-        ) as Promise<ServiceVO>[]
-        return await Promise.all(allDetail)
-      } catch (error) {
-        console.log(error)
-      }
-    }
-
-    return {
-      serviceStore,
-      installedServiceMap,
-      getServicesOfInfra,
-      setInstalledMapKey,
-      setInstalledMapKeyOfValue,
-      getInstalledNamesOrIdsOfServiceByKey,
-      getInstalledServicesDetailByKey
-    }
-  },
-  {
-    persist: {
-      storage: sessionStorage,
-      key: 'installed',
-      paths: ['installedServiceMap']
-    }
-  }
-)
diff --git a/bigtop-manager-ui/src/store/job-progress/index.ts b/bigtop-manager-ui/src/store/job-progress/index.ts
index 597ad2b81..e2bf4d1d2 100644
--- a/bigtop-manager-ui/src/store/job-progress/index.ts
+++ b/bigtop-manager-ui/src/store/job-progress/index.ts
@@ -90,12 +90,8 @@ export const useJobProgress = defineStore('job-progress', () => {
   }))
 
   const getClusterDisplayName = (clusterId: number) => {
-    const clusters = clusterStore.clusters
-    const index = clusters.findIndex((v) => v.id == clusterId)
-    if (index != -1) {
-      return clusters[index].displayName
-    }
-    return 'Global'
+    const targetCluster = clusterStore.clusterMap[clusterId]
+    return targetCluster ? targetCluster.displayName : 'Global'
   }
 
   const createStateIcon = (execRes: CommandRes) => {
diff --git a/bigtop-manager-ui/src/store/menu/helper.ts b/bigtop-manager-ui/src/store/menu/helper.ts
deleted file mode 100644
index 69810f3b1..000000000
--- a/bigtop-manager-ui/src/store/menu/helper.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *    https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { MenuItem } from './types'
-
-export const findActivePath = (menu: MenuItem): string | undefined => {
-  return menu?.children && menu?.children.length > 0 ? findActivePath(menu.children[0]) : menu?.key
-}
diff --git a/bigtop-manager-ui/src/store/menu/index.ts b/bigtop-manager-ui/src/store/menu/index.ts
index ab265c160..1f0ed9855 100644
--- a/bigtop-manager-ui/src/store/menu/index.ts
+++ b/bigtop-manager-ui/src/store/menu/index.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { nextTick, ref, shallowRef } from 'vue'
+import { computed, nextTick, ref, shallowRef } from 'vue'
 import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
 import { dynamicRoutes as dr } from '@/router/routes/index'
 import { defineStore } from 'pinia'
@@ -35,6 +35,7 @@ export const useMenuStore = defineStore(
     const headerSelectedKey = ref()
     const siderMenuSelectedKey = ref()
     const routePathFromClusters = shallowRef('/cluster-manage/clusters')
+    const clusterList = computed(() => Object.values(clusterStore.clusterMap))
 
     const buildMenuMap = () => {
       baseRoutesMap.value = dr.reduce((buildRes, { path, name, meta, children }) => {
@@ -46,17 +47,17 @@ export const useMenuStore = defineStore(
     const setupHeader = () => {
       headerSelectedKey.value = route.matched[0].path ?? '/cluster-manage'
       headerMenus.value = Object.values(baseRoutesMap.value)
-      siderMenus.value = baseRoutesMap.value[headerSelectedKey.value].children || []
+      siderMenus.value = baseRoutesMap.value[headerSelectedKey.value]?.children || []
     }
 
     const setupSider = () => {
-      siderMenus.value = baseRoutesMap.value[headerSelectedKey.value].children || []
-      if (siderMenus.value[0].redirect) {
+      siderMenus.value = baseRoutesMap.value[headerSelectedKey.value]?.children || []
+      if (siderMenus.value[0]?.redirect) {
         siderMenuSelectedKey.value = siderMenus.value[0].redirect
       } else {
-        if (clusterStore.clusters[0]) {
-          const { id, name } = clusterStore.clusters[0]
-          onSiderClick(`${routePathFromClusters.value}/${name}/${id}`)
+        if (clusterList.value.length > 0) {
+          const { id } = clusterList.value[0]
+          onSiderClick(`${routePathFromClusters.value}/${id}`)
         } else {
           onSiderClick(`${routePathFromClusters.value}/default`)
         }
@@ -75,9 +76,9 @@ export const useMenuStore = defineStore(
 
     const updateSider = async () => {
       await clusterStore.loadClusters()
-      const { id, name } = clusterStore.clusters[clusterStore.clusterCount - 1]
+      const { id } = clusterList.value[clusterList.value.length - 1]
       await nextTick()
-      onSiderClick(`${routePathFromClusters.value}/${name}/${id}`)
+      onSiderClick(`${routePathFromClusters.value}/${id}`)
     }
 
     const setupMenu = async () => {
@@ -100,7 +101,7 @@ export const useMenuStore = defineStore(
   },
   {
     persist: {
-      storage: sessionStorage,
+      storage: localStorage,
       paths: ['headerMenus', 'siderMenus']
     }
   }
diff --git a/bigtop-manager-ui/src/store/service/index.ts b/bigtop-manager-ui/src/store/service/index.ts
index 3eb044588..1c233cdb1 100644
--- a/bigtop-manager-ui/src/store/service/index.ts
+++ b/bigtop-manager-ui/src/store/service/index.ts
@@ -21,15 +21,14 @@ import { defineStore, storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
 import { getService, getServiceList } from '@/api/service'
 import { useStackStore } from '@/store/stack'
-import { InstalledMapItem, useInstalledStore } from '@/store/installed'
 import type { ServiceListParams, ServiceVO } from '@/api/service/types'
 
 export const useServiceStore = defineStore(
   'service',
   () => {
     const stackStore = useStackStore()
-    const installedStore = useInstalledStore()
     const services = ref<ServiceVO[]>([])
+    const serviceMap = ref<Record<string, (ServiceVO & { clusterId: number })[]>>({})
     const total = ref(0)
     const loading = ref(false)
     const { stacks } = storeToRefs(stackStore)
@@ -40,20 +39,26 @@ export const useServiceStore = defineStore(
       )
     })
 
+    const serviceFlatMap = computed(() => {
+      const result: Record<string, ServiceVO> = {}
+
+      for (const services of Object.values(serviceMap.value)) {
+        for (const service of services) {
+          result[service.id!] = service
+        }
+      }
+      return result
+    })
+
     const getServices = async (clusterId: number, filterParams?: ServiceListParams) => {
       try {
         loading.value = true
         const data = await getServiceList(clusterId, { ...filterParams, pageNum: 1, pageSize: 100 })
         services.value = data.content
         total.value = data.total
-        const serviceMap = services.value.map((v) => ({
-          serviceId: v.id,
-          serviceName: v.name,
-          serviceDisplayName: v.displayName,
-          clusterId: clusterId
-        })) as InstalledMapItem[]
-        installedStore.setInstalledMapKeyOfValue(`${clusterId}`, serviceMap)
+        serviceMap.value[clusterId] = data.content.map((service) => ({ ...service, clusterId }))
       } catch (error) {
+        serviceMap.value = {}
         console.log('error :>> ', error)
       } finally {
         loading.value = false
@@ -68,16 +73,48 @@ export const useServiceStore = defineStore(
       }
     }
 
+    const getServicesOfInfra = async () => {
+      await getServices(0)
+    }
+
+    const getInstalledNamesOrIdsOfServiceByKey = (key: string, flag: 'names' | 'ids' = 'names') => {
+      return Object.values(serviceMap.value[key] || {}).map((service: ServiceVO) => {
+        if (flag === 'ids') {
+          return service.id
+        } else {
+          return service.name
+        }
+      })
+    }
+
+    const getInstalledServicesDetailByKey = async (key: string): Promise<ServiceVO[] | undefined> => {
+      try {
+        const serviceIds = getInstalledNamesOrIdsOfServiceByKey(key, 'ids')
+        const allDetail = serviceIds?.map((id) => getServiceDetail(Number(key), Number(id))) as Promise<ServiceVO>[]
+        return await Promise.all(allDetail)
+      } catch (error) {
+        console.log(error)
+      }
+    }
+
     return {
+      serviceMap,
       services,
       loading,
+      serviceNames,
+      locateStackWithService,
+      serviceFlatMap,
       getServices,
       getServiceDetail,
-      serviceNames,
-      locateStackWithService
+      getServicesOfInfra,
+      getInstalledServicesDetailByKey,
+      getInstalledNamesOrIdsOfServiceByKey
     }
   },
   {
-    persist: false
+    persist: {
+      storage: sessionStorage,
+      paths: ['serviceMap']
+    }
   }
 )
diff --git a/bigtop-manager-ui/src/store/stack/index.ts b/bigtop-manager-ui/src/store/stack/index.ts
index 99acbaa5d..30aeda34f 100644
--- a/bigtop-manager-ui/src/store/stack/index.ts
+++ b/bigtop-manager-ui/src/store/stack/index.ts
@@ -25,17 +25,20 @@ import type { ServiceConfig, ServiceVO } from '@/api/service/types'
 import type { StackVO } from '@/api/stack/types'
 
 export type ExpandServiceVO = ServiceVO & { order: number }
+export type ServiceMap = {
+  displayName: string
+  stack: string
+  components: string[]
+  configs: ServiceConfig
+  requiredServices: string[]
+}
+export type ComponentMap = {
+  service: string
+  stack: string
+} & ComponentVO
 export interface StackRelationMap {
-  services: {
-    displayName: string
-    stack: string
-    components: string[]
-    configs: ServiceConfig
-  }
-  components: {
-    service: string
-    stack: string
-  } & ComponentVO
+  services: ServiceMap
+  components: ComponentMap
 }
 
 export const useStackStore = defineStore(
@@ -62,7 +65,8 @@ export const useStackStore = defineStore(
             displayName,
             stack: stackName,
             components: components!.map(({ name }) => name),
-            configs
+            configs,
+            requiredServices: service.requiredServices
           }
           for (const component of components!) {
             relationMap.components[component.name!] = {