diff --git a/bigtop-manager-ui/src/assets/images/svg/warn.svg b/bigtop-manager-ui/src/assets/images/svg/warn.svg
new file mode 100644
index 000000000..6568a1998
--- /dev/null
+++ b/bigtop-manager-ui/src/assets/images/svg/warn.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+  viewBox="0 0 16 16" fill="none">
+  <circle cx=" 8" cy="8" r="7.33" stroke="rgba(250, 173, 20, 1)" stroke-width="1.333" fill="none" />
+  <path d="M8 4.5v4" stroke="rgba(250, 173, 20, 1)" stroke-width="1.333" stroke-linecap="round" />
+  <circle cx="8" cy="10.8" r="0.67" fill="rgba(250, 173, 20, 1)" />
+</svg>
\ No newline at end of file
diff --git a/bigtop-manager-ui/src/components/common/svg-icon/index.vue b/bigtop-manager-ui/src/components/common/svg-icon/index.vue
index 0d3fc9d6e..0421e6133 100644
--- a/bigtop-manager-ui/src/components/common/svg-icon/index.vue
+++ b/bigtop-manager-ui/src/components/common/svg-icon/index.vue
@@ -70,7 +70,8 @@
     stop: IconSvgStop,
     success: IconSvgSuccess,
     unknown: IconSvgUnknown,
-    'carbon-language': IconSvgCarbonLanguage
+    'carbon-language': IconSvgCarbonLanguage,
+    warn: IconSvgWarn
   }
 
   const props = defineProps<{ name: string | undefined }>()
diff --git a/bigtop-manager-ui/src/components/create-cluster/components/host-manage.vue b/bigtop-manager-ui/src/components/create-cluster/components/host-manage.vue
index e51f26174..9886e4304 100644
--- a/bigtop-manager-ui/src/components/create-cluster/components/host-manage.vue
+++ b/bigtop-manager-ui/src/components/create-cluster/components/host-manage.vue
@@ -18,28 +18,34 @@
 -->
 
 <script setup lang="ts">
-  import { TableColumnType } from 'ant-design-vue'
+  import { PaginationProps, TableColumnType } from 'ant-design-vue'
   import { computed, reactive, ref, watch } from 'vue'
   import { generateRandomId } from '@/utils/tools'
   import { useI18n } from 'vue-i18n'
+
   import useBaseTable from '@/composables/use-base-table'
-  import HostCreate from '@/pages/cluster-manage/hosts/create.vue'
+  import HostCreate from '@/components/create-host/create.vue'
+
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { HostReq } from '@/api/command/types'
 
   type Key = string | number
+  type conflictItem = HostReq & { strategy: 'override' | 'keep' }
+
   interface TableState {
     selectedRowKeys: Key[]
     searchText: string
     searchedColumn: string
   }
+
   const { t } = useI18n()
   const props = defineProps<{ stepData: HostReq[] }>()
   const emits = defineEmits(['updateData'])
-  const data = ref<HostReq[]>([])
+
   const searchInputRef = ref()
   const hostCreateRef = ref<InstanceType<typeof HostCreate> | null>(null)
+
   const state = reactive<TableState>({
     searchText: '',
     searchedColumn: '',
@@ -86,43 +92,19 @@
     }
   ])
 
-  const { loading, dataSource, paginationProps, onChange } = useBaseTable({
-    columns: columns.value,
-    rows: data.value
-  })
+  const { loading, dataSource, paginationProps, onChange } = useBaseTable<HostReq>({ columns: columns.value, rows: [] })
 
   const operations = computed((): GroupItem[] => [
-    {
-      text: 'edit',
-      clickEvent: (_item, args) => editHost(args)
-    },
-    {
-      text: 'remove',
-      danger: true,
-      clickEvent: (_item, args) => deleteHost(args)
-    }
+    { text: 'edit', clickEvent: (_item, args) => updateHost('EDIT', args) },
+    { text: 'remove', danger: true, clickEvent: (_item, args) => deleteHost(args) }
   ])
 
-  watch(
-    () => props.stepData,
-    (val) => {
-      dataSource.value = val
-    },
-    {
-      immediate: true
-    }
-  )
-
   const isContain = (source: string, target: string): boolean => {
     return source.toString().toLowerCase().includes(target.toLowerCase())
   }
 
   const onFilterDropdownOpenChange = (visible: boolean) => {
-    if (visible) {
-      setTimeout(() => {
-        searchInputRef.value.focus()
-      }, 100)
-    }
+    visible && setTimeout(searchInputRef.value.focus(), 100)
   }
 
   const onSelectChange = (selectedRowKeys: Key[]) => {
@@ -140,60 +122,108 @@
     state.searchText = ''
   }
 
-  const addHost = () => {
-    hostCreateRef.value?.handleOpen('ADD')
+  const updateHost = (type: 'ADD' | 'EDIT', row?: HostReq) => {
+    hostCreateRef.value?.handleOpen(type, row)
   }
 
-  const editHost = (row: HostReq) => {
-    hostCreateRef.value?.handleOpen('EDIT', row)
+  const deleteHost = (row?: HostReq) => {
+    if (row?.hostnames) {
+      dataSource.value = dataSource.value?.filter((v) => row!.key !== v.key)
+    } else {
+      dataSource.value = dataSource.value?.filter((v) => !state.selectedRowKeys.includes(v.key)) || []
+    }
+    updateStepData()
   }
 
   const updateStepData = () => {
-    const res = dataSource.value.map((v) => {
-      return {
-        ...v,
-        hostnames: [v.hostname]
-      }
-    })
+    Object.assign(paginationProps.value as PaginationProps, { total: dataSource.value.length })
+    const res = dataSource.value.map((v) => ({ ...v, hostnames: [v.hostname] }))
     emits('updateData', res)
   }
 
-  const addHostSuccess = (type: 'ADD' | 'EDIT', item: HostReq) => {
+  /**
+   * Merges duplicate hostnames based on strategy.
+   * @param list
+   * @param duplicateHosts
+   * @param config host config
+   */
+  const mergeByStrategy = (list: HostReq[], duplicateHosts: conflictItem[], config: HostReq): HostReq[] => {
+    const strategyMap = new Map<string, conflictItem>()
+    duplicateHosts.forEach((s) => strategyMap.set(s.hostname, s))
+
+    const existingHostnames = new Set<string>()
+    const mainPart: HostReq[] = []
+    const prependPart: HostReq[] = []
+
+    for (const item of list) {
+      existingHostnames.add(item.hostname)
+      const strategy = strategyMap.get(item.hostname)
+
+      if (!strategy) {
+        mainPart.push(item)
+      } else if (strategy.strategy === 'override') {
+        mainPart.push(generateNewHostItem(item.hostname, config))
+      } else {
+        mainPart.push(item)
+      }
+    }
+
+    for (const s of duplicateHosts) {
+      if (!existingHostnames.has(s.hostname)) {
+        prependPart.push(generateNewHostItem(s.hostname, config))
+      }
+    }
+
+    return [...prependPart, ...mainPart]
+  }
+
+  const generateNewHostItem = (hostname: string, config: HostReq): HostReq => ({
+    ...config,
+    key: generateRandomId(),
+    hostname: hostname,
+    status: 'UNKNOWN'
+  })
+
+  /**
+   * Handles successful addition or editing of hosts.
+   */
+  const addHostSuccess = (type: 'ADD' | 'EDIT', item: HostReq, duplicateHosts: any) => {
     if (type === 'ADD') {
-      const items = item.hostnames?.map((v) => {
-        return {
-          ...item,
-          key: generateRandomId(),
-          hostname: v,
-          status: 'UNKNOWN'
-        }
-      }) as HostReq[]
-      dataSource.value?.unshift(...items)
-    } else {
+      if (duplicateHosts.length > 0) {
+        dataSource.value = mergeByStrategy(dataSource.value, duplicateHosts, item)
+      } else {
+        const items = item.hostnames?.map((v) => generateNewHostItem(v, item)) as HostReq[]
+        dataSource.value?.unshift(...items)
+      }
+    }
+
+    if (type === 'EDIT') {
       const index = dataSource.value.findIndex((data) => data.key === item.key)
+
       if (index !== -1) {
         dataSource.value[index] = item
       }
     }
+
     updateStepData()
   }
 
-  const deleteHost = (row?: HostReq) => {
-    if (!row?.key) {
-      state.selectedRowKeys.length > 0 &&
-        (dataSource.value = dataSource.value?.filter((v) => !state.selectedRowKeys.includes(v.key)) || [])
-    } else {
-      dataSource.value = dataSource.value?.filter((v) => row.key !== v.key)
+  watch(
+    () => props.stepData,
+    (val) => {
+      dataSource.value = JSON.parse(JSON.stringify(val))
+    },
+    {
+      immediate: true
     }
-    updateStepData()
-  }
+  )
 </script>
 
 <template>
   <div class="host-config">
     <header>
       <a-space :size="16">
-        <a-button type="primary" @click="addHost">{{ $t('cluster.add_host') }}</a-button>
+        <a-button type="primary" @click="updateHost('ADD')">{{ $t('cluster.add_host') }}</a-button>
         <a-button type="primary" danger @click="deleteHost">{{ $t('common.bulk_remove') }}</a-button>
       </a-space>
     </header>
@@ -246,7 +276,7 @@
         </template>
       </template>
     </a-table>
-    <host-create ref="hostCreateRef" @on-ok="addHostSuccess" />
+    <host-create ref="hostCreateRef" :current-hosts="dataSource" @on-ok="addHostSuccess" />
   </div>
 </template>
 
diff --git a/bigtop-manager-ui/src/components/create-cluster/create.vue b/bigtop-manager-ui/src/components/create-cluster/create.vue
index b18632578..960902911 100644
--- a/bigtop-manager-ui/src/components/create-cluster/create.vue
+++ b/bigtop-manager-ui/src/components/create-cluster/create.vue
@@ -37,6 +37,7 @@
 
   const { t } = useI18n()
   const menuStore = useMenuStore()
+
   const compRef = ref<any>()
   const installing = ref(false)
   const stepData = ref<[Partial<ClusterCommandReq>, any, HostReq[], CommandVO]>([{}, {}, [], {}])
@@ -48,16 +49,17 @@
   const installStatus = shallowRef<InstalledStatusVO[]>([])
   const components = shallowRef<any[]>([ClusterBase, ComponentInfo, HostManage, CheckWorkflow])
   const isInstall = computed(() => current.value === 2)
-  const hasUnknownHost = computed(() => stepData.value[2].filter((v) => v.status === Status.Unknown).length == 0)
-
+  const currentStepItems = computed(() => stepData.value[2])
+  const hasNoUnknownHosts = computed(() => currentStepItems.value.every((item) => item.status !== Status.Unknown))
   const allInstallSuccess = computed(
     () =>
-      stepData.value[2].length != 0 &&
-      stepData.value[2].every((v) => v.status === Status.Success) &&
-      hasUnknownHost.value
+      currentStepItems.value.length > 0 &&
+      currentStepItems.value.every((item) => item.status === Status.Success) &&
+      hasNoUnknownHosts.value
   )
   const getCompName = computed(() => components.value[current.value])
   const isDone = computed(() => ['Successful', 'Failed'].includes(stepData.value[stepData.value.length - 1].state))
+
   const steps = computed(() => [
     'cluster.cluster_info',
     'cluster.component_info',
@@ -71,18 +73,6 @@
     stepData.value[current.value] = val
   }
 
-  const createCluster = async () => {
-    try {
-      commandRequest.value.clusterCommand = stepData.value[0] as ClusterCommandReq
-      commandRequest.value.clusterCommand.hosts = stepData.value[2]
-      stepData.value[stepData.value.length - 1] = await execCommand(commandRequest.value)
-      return true
-    } catch (error) {
-      console.log('error :>> ', error)
-      return false
-    }
-  }
-
   const prepareNextStep = async () => {
     if (current.value === 0) {
       const check = await compRef.value.check()
@@ -101,42 +91,59 @@
     }
   }
 
+  /**
+   * Resolves installation dependencies by setting status and calling API.
+   * Starts polling to track progress.
+   */
   const resolveInstallDependencies = async () => {
+    const targetStepData = stepData.value[current.value]
+
     if (stepData.value[2].length == 0) {
       message.error(t('host.uninstallable'))
       return
     }
     try {
       installing.value = true
-      const data = await installDependencies(stepData.value[current.value])
-      data && pollUntilInstalled()
+      stepData.value[current.value] = setInstallItemStatus(targetStepData, Status.Installing)
+
+      const result = await installDependencies(stepData.value[current.value])
+      if (result) {
+        pollUntilInstalled()
+      }
     } catch (error) {
+      console.error('Error resolving dependencies:', error)
       installing.value = false
-      console.log('error :>> ', error)
+      stepData.value[current.value] = setInstallItemStatus(stepData.value[current.value], Status.Failed)
     }
   }
 
+  /**
+   * Records and updates current install status for items.
+   * @returns whether all items are no longer in "Installing" state
+   */
   const recordInstalledStatus = async () => {
     try {
       const data = await getInstalledStatus()
       installStatus.value = data
-      stepData.value[current.value] = mergeByHostname(stepData.value[current.value], data)
+      stepData.value[current.value] = setInstallItemStatus(stepData.value[current.value], data)
+
       return data.every((item) => item.status != Status.Installing)
     } catch (error) {
-      console.log('error :>> ', error)
+      console.error('Error recording installation status:', error)
     }
   }
 
+  /**
+   * Starts polling install status until all items are complete.
+   * @param interval polling interval in milliseconds (default: 1000)
+   */
   const pollUntilInstalled = (interval: number = 1000): void => {
     let isInitialized = false
     let intervalId: NodeJS.Timeout
 
     const poll = async () => {
       if (!isInitialized) {
-        stepData.value[current.value] = stepData.value[current.value].map((item: HostReq) => ({
-          ...item,
-          status: Status.Installing
-        }))
+        stepData.value[current.value] = setInstallItemStatus(stepData.value[current.value], Status.Installing)
         isInitialized = true
       }
       const result = await recordInstalledStatus()
@@ -150,34 +157,46 @@
     poll()
   }
 
-  const mergeByHostname = (arr1: any[], arr2: any[]): any[] => {
-    const mergedMap = new Map<string, any>()
-    for (const item of arr1) {
+  /**
+   * Merges install items with status.
+   * If status is an array, merge each item by hostname.
+   * If status is a string, apply it uniformly to all items.
+   *
+   * @param items original install item list
+   * @param status array of partial updates OR a uniform status string
+   * @returns merged install item list
+   */
+  const setInstallItemStatus = <T extends HostReq>(items: T[], status: T[] | string): T[] => {
+    const mergedMap = new Map<string, T>()
+
+    for (const item of items) {
       mergedMap.set(item.hostname, { ...item })
     }
-    for (const item of arr2) {
-      if (mergedMap.has(item.hostname)) {
-        mergedMap.set(item.hostname, { ...mergedMap.get(item.hostname), ...item })
-      } else {
-        mergedMap.set(item.hostname, { ...item })
+
+    if (Array.isArray(status)) {
+      for (const item of status) {
+        const mergedMapItem = mergedMap.get(item.hostname)
+        mergedMap.set(item.hostname, mergedMapItem ? { ...mergedMapItem, ...item } : { ...item })
+      }
+    } else {
+      for (const [hostname, item] of mergedMap) {
+        mergedMap.set(hostname, { ...item, status })
       }
     }
+
     return Array.from(mergedMap.values())
   }
 
-  // const changeStep = (step: number) => {
-  //   if (current.value > step) {
-  //     const previousCount = current.value - step
-  //     Array.from({ length: previousCount }).forEach(() => previousStep())
-  //   }
-  //   if (current.value < step) {
-  //     const nextCount = step - current.value
-  //     Array.from({ length: nextCount }).forEach(() => prepareNextStep())
-  //   }
-  // }
-
-  const onSave = () => {
-    menuStore.updateSider()
+  const createCluster = async () => {
+    try {
+      commandRequest.value.clusterCommand = stepData.value[0] as ClusterCommandReq
+      commandRequest.value.clusterCommand.hosts = stepData.value[2]
+      stepData.value[stepData.value.length - 1] = await execCommand(commandRequest.value)
+      return true
+    } catch (error) {
+      console.log('error :>> ', error)
+      return false
+    }
   }
 
   onBeforeRouteLeave((_to, _from, next) => {
@@ -243,7 +262,7 @@
               {{ $t('common.next') }}
             </a-button>
           </template>
-          <a-button v-show="current === stepsLimit && isDone" type="primary" @click="onSave"
+          <a-button v-show="current === stepsLimit && isDone" type="primary" @click="() => menuStore.updateSider()"
             >{{ $t('common.done') }}
           </a-button>
         </a-space>
diff --git a/bigtop-manager-ui/src/components/create-host/components/conflict-resolver.vue b/bigtop-manager-ui/src/components/create-host/components/conflict-resolver.vue
new file mode 100644
index 000000000..7889b570a
--- /dev/null
+++ b/bigtop-manager-ui/src/components/create-host/components/conflict-resolver.vue
@@ -0,0 +1,77 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import type { HostReq } from '@/api/command/types'
+  import type { TableColumnType } from 'ant-design-vue'
+
+  type conflictItem = HostReq & { strategy: 'override' | 'keep' }
+
+  const props = defineProps<{ parsedHosts: conflictItem[]; duplicateHostnames: string[] }>()
+  const emits = defineEmits<{ (event: 'update:parsedHosts', val: conflictItem[]): void }>()
+
+  const options = ['keep', 'override']
+
+  const { t } = useI18n()
+  const columns = computed((): TableColumnType[] => [
+    {
+      title: t('host.hostname'),
+      dataIndex: 'hostname',
+      key: 'hostname',
+      ellipsis: true
+    },
+    {
+      title: t('common.operation'),
+      key: 'operation',
+      width: '200px',
+      fixed: 'right'
+    }
+  ])
+
+  const handleStrategyChange = (hostname: string, strategy: 'keep' | 'override') => {
+    const updated = props.parsedHosts.map((item) => (item.hostname === hostname ? { ...item, strategy } : item))
+    emits('update:parsedHosts', updated)
+  }
+</script>
+
+<template>
+  <div>
+    <a-table
+      :data-source="$props.parsedHosts.filter((v) => $props.duplicateHostnames.includes(v.hostname))"
+      :columns="columns"
+    >
+      <template #bodyCell="{ record, column }">
+        <template v-if="column.key === 'operation'">
+          <a-radio-group
+            :value="record.strategy"
+            style="display: flex"
+            @change="(e) => handleStrategyChange(record.hostname, e.target.value)"
+          >
+            <a-radio v-for="opt in options" :key="opt" :value="opt">{{ opt }}</a-radio>
+          </a-radio-group>
+        </template>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/bigtop-manager-ui/src/components/create-host/components/parsed-preview.vue b/bigtop-manager-ui/src/components/create-host/components/parsed-preview.vue
new file mode 100644
index 000000000..e910b02b4
--- /dev/null
+++ b/bigtop-manager-ui/src/components/create-host/components/parsed-preview.vue
@@ -0,0 +1,168 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+-->
+
+<script setup lang="ts">
+  import { ref, shallowRef } from 'vue'
+  import { parseHostNamesAsPatternExpression } from '@/utils/array'
+  import ConflictResolver from './conflict-resolver.vue'
+
+  import type { HostReq } from '@/api/command/types'
+
+  type Data = HostReq & { hostname?: string }
+  type conflictItem = HostReq & { strategy: 'override' | 'keep' }
+
+  interface ParsedRes {
+    parsedData: Data
+    confirmStatus: boolean
+    duplicateHosts?: conflictItem[]
+  }
+
+  const props = defineProps<{ data: Data; isPublic: boolean | undefined }>()
+  const emits = defineEmits<{ (event: 'parsed', value: ParsedRes): void }>()
+
+  const open = ref(false)
+  const showConflictList = ref(false)
+  const parsedHostNames = ref<string[]>([])
+  const duplicateHostnames = ref<string[]>([])
+  const parsedHosts = ref<conflictItem[]>([])
+  const cacheCurrentHosts = shallowRef<Data[]>([])
+
+  const parsed = (currentHosts: Data[]) => {
+    resetState()
+    open.value = true
+    cacheCurrentHosts.value = currentHosts
+    parsedHostNames.value = parseHostNamesAsPatternExpression(props.data.hostname || '')
+    parsedHosts.value = parsedHostNames.value.map((v) => ({ hostname: v, strategy: 'override' }))
+  }
+
+  const getDuplicateHostnames = () => {
+    const currentHostNamse = cacheCurrentHosts.value.map((v) => v.hostname)
+    return parsedHostNames.value.filter((item) => currentHostNamse.includes(item))
+  }
+
+  const handleOk = () => {
+    const duplicates = getDuplicateHostnames()
+    duplicateHostnames.value = duplicates
+
+    const hasConflicts = duplicates.length > 0
+
+    if (!hasConflicts || showConflictList.value) {
+      emits('parsed', {
+        parsedData: { ...props.data, hostnames: parsedHostNames.value },
+        confirmStatus: true,
+        duplicateHosts: hasConflicts ? parsedHosts.value : []
+      })
+      resetState()
+    }
+
+    if (hasConflicts) {
+      showConflictList.value = true
+    }
+  }
+
+  const handleCancel = () => {
+    emits('parsed', { parsedData: { ...props.data }, confirmStatus: false, duplicateHosts: [] })
+    resetState()
+  }
+
+  const resetState = () => {
+    open.value = false
+    showConflictList.value = false
+    parsedHostNames.value = []
+    duplicateHostnames.value = []
+  }
+
+  defineExpose({
+    parsed
+  })
+</script>
+
+<template>
+  <a-modal v-model:open="open" :centered="true" width="680px" :z-index="2000" @ok="handleOk" @cancel="handleCancel">
+    <template #title>
+      <div class="icon">
+        <span class="icon-wrp">
+          <svg-icon :name="showConflictList ? 'warn' : 'success'"></svg-icon>
+        </span>
+        <span class="title">
+          {{
+            showConflictList
+              ? $t('cluster.duplicate_hostname', [`${duplicateHostnames.length}`])
+              : $t('cluster.show_hosts_resolved')
+          }}
+        </span>
+      </div>
+    </template>
+    <div v-if="!showConflictList" class="content">
+      <div v-for="(name, index) in parsedHostNames" :key="index" class="item">{{ name }}</div>
+    </div>
+    <div v-else>
+      <conflict-resolver v-model:parsedHosts="parsedHosts" :duplicate-hostnames="duplicateHostnames" />
+    </div>
+    <template #footer>
+      <footer>
+        <a-space size="middle">
+          <a-button @click="handleCancel">
+            {{ $t('common.cancel') }}
+          </a-button>
+          <a-button v-if="showConflictList" @click="() => (showConflictList = false)">
+            {{ $t('common.prev') }}
+          </a-button>
+          <a-button type="primary" @click="handleOk">
+            {{ $t('common.confirm') }}
+          </a-button>
+        </a-space>
+      </footer>
+    </template>
+  </a-modal>
+</template>
+
+<style lang="scss" scoped>
+  .content {
+    margin-inline-start: 2.125rem;
+    max-height: 31.25rem;
+    overflow: auto;
+  }
+
+  .title {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .icon-wrp {
+    font-size: 1.375rem;
+    font-weight: 600;
+    color: green;
+  }
+
+  .item {
+    margin: 0.625rem;
+  }
+
+  footer {
+    width: 100%;
+    @include flexbox($justify: flex-end);
+  }
+</style>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue b/bigtop-manager-ui/src/components/create-host/create.vue
similarity index 74%
rename from bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
rename to bigtop-manager-ui/src/components/create-host/create.vue
index c202eb53e..0036eec5a 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue
+++ b/bigtop-manager-ui/src/components/create-host/create.vue
@@ -18,21 +18,25 @@
 -->
 
 <script setup lang="ts">
-  import { computed, h, nextTick, ref, watch } from 'vue'
+  import { computed, nextTick, ref, watch } from 'vue'
+  import { Rule } from 'ant-design-vue/es/form'
+  import { message } from 'ant-design-vue'
+  import { storeToRefs } from 'pinia'
   import { useI18n } from 'vue-i18n'
-  import { FormItemState } from '@/components/common/auto-form/types'
-  import { CheckCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
-  import { parseHostNamesAsPatternExpression } from '@/utils/array'
-  import { message, Modal } from 'ant-design-vue'
+  import { UploadOutlined } from '@ant-design/icons-vue'
+
   import { useLocaleStore } from '@/store/locale'
-  import { storeToRefs } from 'pinia'
+  import { useClusterStore } from '@/store/cluster'
+
   import { uploadFile } from '@/api/upload-file'
-  import { Rule } from 'ant-design-vue/es/form'
   import { updateHost } from '@/api/hosts'
-  import { useClusterStore } from '@/store/cluster'
+
+  import ParsedPreview from './components/parsed-preview.vue'
+
   import type { UploadProps } from 'ant-design-vue'
   import type { HostReq } from '@/api/command/types'
   import type { HostParams, HostVO } from '@/api/hosts/types'
+  import type { FormItemState } from '@/components/common/auto-form/types'
 
   enum Mode {
     EDIT = 'cluster.edit_host',
@@ -40,18 +44,28 @@
   }
 
   interface Emits {
-    (event: 'onOk', type: keyof typeof Mode, value: HostReq | HostVO): void
+    (
+      event: 'onOk',
+      type: keyof typeof Mode,
+      value: HostReq | HostVO,
+      duplicateHosts?: HostReq & { strategy: 'override' | 'keep' }[]
+    ): void
   }
 
-  const props = withDefaults(defineProps<{ isPublic?: boolean; apiEditCaller?: boolean }>(), {
-    isPublic: false,
-    apiEditCaller: false
-  })
+  interface Props {
+    isPublic?: boolean
+    apiEditCaller?: boolean
+    currentHosts: HostReq[]
+  }
 
-  const { t } = useI18n()
+  const props = withDefaults(defineProps<Props>(), { isPublic: false, apiEditCaller: false })
   const emits = defineEmits<Emits>()
+
+  const { t } = useI18n()
   const localeStore = useLocaleStore()
   const clusterStore = useClusterStore()
+  const { locale } = storeToRefs(localeStore)
+
   const open = ref(false)
   const loading = ref(false)
   const mode = ref<keyof typeof Mode>('ADD')
@@ -59,9 +73,13 @@
   const autoFormRef = ref<Comp.AutoFormInstance | null>(null)
   const formValue = ref<HostReq & { hostname?: string }>({})
   const fileName = ref('')
-  const { locale } = storeToRefs(localeStore)
+  const previewRef = ref<InstanceType<typeof ParsedPreview> | null>()
+
   const isEdit = computed(() => mode.value === 'EDIT')
 
+  /**
+   * Validates SSH password confirmation.
+   */
   const checkSshPassword = async (_rule: Rule, value: string) => {
     if (!value) {
       return Promise.reject(t('common.enter_error', [`${t('host.confirm_password')}`.toLowerCase()]))
@@ -73,6 +91,9 @@
     }
   }
 
+  /**
+   * Validates SSH key password confirmation.
+   */
   const checkSshKeyPassword = async (_rule: Rule, value: string) => {
     if (value != formValue.value?.sshKeyPassword) {
       return Promise.reject(t('host.key_password_not_match'))
@@ -331,185 +352,81 @@
   ])
 
   const filterFormItems = computed((): FormItemState[] => {
+    const baseItems = [...formItems.value]
+    const isPublic = props.isPublic
+
     if (formValue.value.authType === '1') {
-      const data = [...formItems.value]
-      data.splice(2, 0, ...formItemsForSshPassword.value)
-      return props.isPublic ? [...formItemsOfPublicHost.value, ...data] : data
+      baseItems.splice(2, 0, ...formItemsForSshPassword.value)
     } else if (formValue.value.authType === '2') {
-      const data = [...formItems.value]
-      data.splice(2, 0, ...formItemsForSshKeyPassword.value)
-      return props.isPublic ? [...formItemsOfPublicHost.value, ...data] : data
+      baseItems.splice(2, 0, ...formItemsForSshKeyPassword.value)
     }
-    return props.isPublic ? [...formItemsOfPublicHost.value, ...formItems.value] : [...formItems.value]
+
+    return isPublic ? [...formItemsOfPublicHost.value, ...baseItems] : baseItems
   })
 
   watch(
-    () => formValue.value,
-    (val) => {
-      if (val.inputType && val.inputType === '1') {
-        hiddenItems.value = ['sshKeyString']
-      } else if (val.inputType && val.inputType === '2') {
-        hiddenItems.value = ['sshKeyFilename']
-      } else {
-        hiddenItems.value = []
+    () => formValue.value.inputType,
+    (inputType) => {
+      const hiddenMap: Record<string, string[]> = {
+        '1': ['sshKeyString'],
+        '2': ['sshKeyFilename']
       }
-    },
-    {
-      deep: true
+      hiddenItems.value = hiddenMap[inputType] ?? []
     }
   )
 
-  const handleOpen = async (type: keyof typeof Mode, payload?: HostParams) => {
-    open.value = true
-    mode.value = type
-    if (payload) {
-      formValue.value = Object.assign(formValue.value, {
-        ...payload,
-        authType: `${payload?.authType ?? 1}`,
-        inputType: `${payload?.inputType ?? 1}`
-      })
-    } else {
-      Object.assign(formValue.value, {
-        authType: '1',
-        inputType: '1'
-      })
-    }
-
-    props.isPublic && (await getClusterSelectOptions())
-  }
-
-  const getClusterSelectOptions = async () => {
-    await nextTick()
-    const formatClusters = Object.values(clusterStore.clusterMap).map((v) => ({ ...v, clusterId: v.id }))
-    autoFormRef.value?.setOptions('clusterId', formatClusters)
-  }
-
+  /**
+   * Handles host editing.
+   */
   const editHost = async (hostConfig: HostReq) => {
     try {
       const data = await updateHost(hostConfig)
       if (data) {
-        loading.value = false
         message.success(t('common.update_success'))
         emits('onOk', mode.value, formValue.value)
         handleCancel()
       }
     } catch (error) {
-      console.log('error :>> ', error)
+      console.error('Error editing host:', error)
     } finally {
       loading.value = false
     }
   }
 
+  /**
+   * Handles parsed data from preview.
+   */
+  const handleParsed = ({ parsedData, confirmStatus, duplicateHosts }: any) => {
+    if (confirmStatus) {
+      Object.assign(formValue.value, parsedData)
+      emits('onOk', mode.value, formValue.value, duplicateHosts)
+      handleCancel()
+    }
+  }
+
   const handleOk = async () => {
     const validate = await autoFormRef.value?.getFormValidation()
     if (!validate) return
-    try {
-      if (!isEdit.value) {
-        const confirmStatus = await showHosts()
-        if (confirmStatus) {
-          emits('onOk', mode.value, formValue.value)
-          handleCancel()
-        }
-      } else {
-        if (props.apiEditCaller) {
-          loading.value = true
-          await editHost(formValue.value)
-        } else {
-          emits('onOk', mode.value, formValue.value)
-          handleCancel()
-        }
-      }
-    } catch (e) {
-      console.log(e)
-    }
-  }
 
-  const createHostNameEls = (list: string[]) => {
-    const elStyles = {
-      contentStyle: {
-        marginInlineStart: '2.125rem',
-        width: '100%',
-        maxHeight: '31.25rem',
-        overflow: 'auto'
-      },
-      itemStyle: { margin: '0.625rem' },
-      iconWrpStyle: {
-        fontSize: '1.375rem',
-        fontWeight: 600,
-        color: 'green',
-        marginInlineEnd: '0.75rem'
-      },
-      titleStyle: {
-        fontSize: '1rem',
-        fontWeight: 600
-      },
-      redfIconStyle: {
-        display: 'flex',
-        alignItems: 'center'
-      }
+    if (!isEdit.value) {
+      previewRef.value?.parsed(props.currentHosts)
+    } else if (props.apiEditCaller) {
+      loading.value = true
+      await editHost(formValue.value)
+    } else {
+      emits('onOk', mode.value, formValue.value)
+      handleCancel()
     }
-    const items = list.map((item: string, idx: number) => {
-      return h('li', { key: idx, style: elStyles.itemStyle }, item)
-    })
-    const iconWrpStyle = h(
-      'span',
-      {
-        style: elStyles.iconWrpStyle
-      },
-      [h(CheckCircleOutlined)]
-    )
-    const replaceTitle = h('span', { style: elStyles.titleStyle }, `${t('cluster.show_hosts_resolved')}`)
-    const reDefineIcon = h('div', { style: elStyles.redfIconStyle }, [iconWrpStyle, replaceTitle])
-    const box = h(
-      'div',
-      {
-        style: elStyles.contentStyle
-      },
-      items
-    )
-
-    return { box, reDefineIcon }
-  }
-
-  const showHosts = (): Promise<boolean> => {
-    const hostList = parseHostNamesAsPatternExpression(formValue.value.hostname as string)
-    const { box: content, reDefineIcon: icon } = createHostNameEls(hostList)
-    return new Promise((resolve) => {
-      Modal.confirm({
-        title: '',
-        icon,
-        centered: true,
-        width: '31.25rem',
-        content,
-        onOk() {
-          formValue.value.hostnames = hostList
-          resolve(true)
-        },
-        onCancel() {
-          resolve(false)
-          Modal.destroyAll()
-        }
-      })
-    })
   }
 
   const handleCancel = () => {
-    formValue.value = {
-      authType: '1',
-      inputType: '1'
-    }
+    formValue.value = { authType: '1', inputType: '1' }
     fileName.value = ''
     open.value = false
   }
 
   const beforeUpload: UploadProps['beforeUpload'] = (file) => {
-    // const isText = file.type === 'text/plain'
-    const checkLimitSize = file.size / 1024 <= 10
-    // if (!isText) {
-    //   message.error(t('common.file_type_error'))
-    //   return false
-    // }
-    if (!checkLimitSize) {
+    if (file.size / 1024 > 10) {
       message.error(t('common.file_size_error'))
       return false
     }
@@ -533,6 +450,25 @@
     }
   }
 
+  const handleOpen = async (type: keyof typeof Mode, payload?: HostParams) => {
+    open.value = true
+    mode.value = type
+
+    formValue.value = payload
+      ? { ...payload, authType: `${payload?.authType ?? 1}`, inputType: `${payload?.inputType ?? 1}` }
+      : { authType: '1', inputType: '1' }
+
+    if (props.isPublic) {
+      await getClusterSelectOptions()
+    }
+  }
+
+  const getClusterSelectOptions = async () => {
+    await nextTick()
+    const formatClusters = Object.values(clusterStore.clusterMap).map((v) => ({ ...v, clusterId: v.id }))
+    autoFormRef.value?.setOptions('clusterId', formatClusters)
+  }
+
   defineExpose({
     handleOpen
   })
@@ -591,13 +527,11 @@
         </footer>
       </template>
     </a-modal>
+    <parsed-preview ref="previewRef" :is-public="$props.isPublic" :data="formValue" @parsed="handleParsed" />
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .question {
-    cursor: pointer;
-  }
   .filename {
     color: $color-primary;
     padding-inline: $space-sm;
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/install-dependencies.vue b/bigtop-manager-ui/src/components/create-host/install-dependencies.vue
similarity index 98%
rename from bigtop-manager-ui/src/pages/cluster-manage/hosts/install-dependencies.vue
rename to bigtop-manager-ui/src/components/create-host/install-dependencies.vue
index adc60a9f2..820d3c2bb 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/install-dependencies.vue
+++ b/bigtop-manager-ui/src/components/create-host/install-dependencies.vue
@@ -26,8 +26,10 @@
   import { useClusterStore } from '@/store/cluster'
   import { generateRandomId } from '@/utils/tools'
   import { execCommand } from '@/api/command'
-  import HostCreate from '@/pages/cluster-manage/hosts/create.vue'
+
+  import HostCreate from './create.vue'
   import useBaseTable from '@/composables/use-base-table'
+
   import { type InstalledStatusVO, Status } from '@/api/hosts/types'
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
@@ -49,10 +51,12 @@
   const emits = defineEmits<Emits>()
   const clusterStore = useClusterStore()
   const { clusterMap } = storeToRefs(clusterStore)
+
   const installing = ref(false)
   const open = ref(false)
   const searchInputRef = ref()
   const hostCreateRef = ref<InstanceType<typeof HostCreate> | null>(null)
+
   const installStatus = shallowRef<InstalledStatusVO[]>([])
   const state = reactive<TableState>({
     searchText: '',
@@ -336,7 +340,7 @@
         </template>
       </a-table>
     </a-modal>
-    <host-create ref="hostCreateRef" :is-public="true" @on-ok="handleOk" />
+    <host-create ref="hostCreateRef" :current-hosts="dataSource" :is-public="true" @on-ok="handleOk" />
   </div>
 </template>
 
diff --git a/bigtop-manager-ui/src/layouts/sider.vue b/bigtop-manager-ui/src/layouts/sider.vue
index 1a70130d3..adbe5d779 100644
--- a/bigtop-manager-ui/src/layouts/sider.vue
+++ b/bigtop-manager-ui/src/layouts/sider.vue
@@ -31,6 +31,7 @@
   const clusterStore = useClusterStore()
   const routeParamsLen = ref(0)
   const openKeys = ref<string[]>(['clusters'])
+
   const { siderMenuSelectedKey, headerSelectedKey, siderMenus, routePathFromClusters } = storeToRefs(menuStore)
   const { clusterCount, clusterMap } = storeToRefs(clusterStore)
 
@@ -49,29 +50,27 @@
    */
   const handleRouteChange = async (newRoute: typeof route) => {
     const token = localStorage.getItem('Token') ?? sessionStorage.getItem('Token') ?? undefined
+    const { params, path, meta, name: RouteName } = newRoute
 
     if (!token) {
       return
     }
 
-    const { params, path, meta, name } = newRoute
-    const clusterId = params.id
-    const isClusterPath = path.includes(routePathFromClusters.value)
-    const isNotCreatingCluster = name !== 'CreateCluster'
-
     routeParamsLen.value = Object.keys(params).length
 
-    if (isClusterPath && clusterCount.value > 0 && isNotCreatingCluster) {
-      if (clusterId && clusterMap.value[`${clusterId}`]) {
-        siderMenuSelectedKey.value = `${routePathFromClusters.value}/${clusterId}`
+    if (path.includes(routePathFromClusters.value) && RouteName !== 'CreateCluster') {
+      if (params.id && clusterMap.value[`${params.id}`]) {
+        siderMenuSelectedKey.value = `${routePathFromClusters.value}/${params.id}`
         openKeys.value.push(siderMenuSelectedKey.value)
-      } else {
-        siderMenuSelectedKey.value = ''
-        menuStore.setupSider()
+        return
       }
-    } else {
-      siderMenuSelectedKey.value = meta.activeMenu ?? path
+
+      siderMenuSelectedKey.value = ''
+      menuStore.setupSider()
+      return
     }
+
+    siderMenuSelectedKey.value = meta.activeMenu ?? path
   }
 
   /**
@@ -89,8 +88,8 @@
     router.push({ name: 'CreateCluster' })
   }
 
-  onMounted(async () => {
-    await clusterStore.loadClusters()
+  onMounted(() => {
+    clusterStore.loadClusters()
   })
 
   watch(
diff --git a/bigtop-manager-ui/src/locales/en_US/cluster.ts b/bigtop-manager-ui/src/locales/en_US/cluster.ts
index 11979d821..d3af59c69 100644
--- a/bigtop-manager-ui/src/locales/en_US/cluster.ts
+++ b/bigtop-manager-ui/src/locales/en_US/cluster.ts
@@ -36,5 +36,9 @@ export default {
   view_log: 'View Log',
   source: 'Repository',
   show_hosts_resolved: 'Resolved Hostnames',
-  cluster_unavailable_message: 'Sorry, you need to create cluster to use this feature.'
+  duplicate_hostname: '{0} host name(s) are duplicated. Please choose how to handle them.',
+  exist_duplicate_hostname: 'Duplicate host name found. Choose an action.',
+  cluster_unavailable_message: 'Sorry, you need to create cluster to use this feature.',
+  keep: 'keep',
+  override: 'override'
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
index 29a9cd702..a37580ff7 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/cluster.ts
@@ -35,5 +35,9 @@ export default {
   view_log: '查看日志',
   source: '配置源',
   show_hosts_resolved: '解析后的主机名列表',
-  cluster_unavailable_message: '抱歉，你还没有集群，无法使用集群管理能力。'
+  duplicate_hostname: '有 {0} 个主机名重复，请选择处理方式',
+  exist_duplicate_hostname: '主机名重复，请选择处理方式',
+  cluster_unavailable_message: '抱歉，你还没有集群，无法使用集群管理能力。',
+  keep: '保留',
+  override: '覆盖'
 }
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
index 1a2253afd..bafe924b0 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
@@ -26,8 +26,8 @@
   import { useRouter } from 'vue-router'
 
   import useBaseTable from '@/composables/use-base-table'
-  import HostCreate from '@/pages/cluster-manage/hosts/create.vue'
-  import InstallDependencies from '@/pages/cluster-manage/hosts/install-dependencies.vue'
+  import HostCreate from '@/components/create-host/create.vue'
+  import InstallDependencies from '@/components/create-host/install-dependencies.vue'
 
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
@@ -279,7 +279,12 @@
         </template>
       </template>
     </a-table>
-    <host-create ref="hostCreateRef" :api-edit-caller="true" @on-ok="afterSetupHostConfig" />
+    <host-create
+      ref="hostCreateRef"
+      :current-hosts="dataSource"
+      :api-edit-caller="true"
+      @on-ok="afterSetupHostConfig"
+    />
     <install-dependencies ref="installRef" @on-install-success="getHostList(true)" />
   </div>
 </template>
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 f0cee3961..1d6512216 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue
@@ -22,11 +22,14 @@
   import { computed, onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue'
   import { useRouter } from 'vue-router'
   import { useI18n } from 'vue-i18n'
+
   import { useClusterStore } from '@/store/cluster'
   import * as hostApi from '@/api/hosts'
+
   import useBaseTable from '@/composables/use-base-table'
-  import HostCreate from '@/pages/cluster-manage/hosts/create.vue'
-  import InstallDependencies from '@/pages/cluster-manage/hosts/install-dependencies.vue'
+  import HostCreate from '@/components/create-host/create.vue'
+  import InstallDependencies from '@/components/create-host/install-dependencies.vue'
+
   import type { FilterConfirmProps, FilterResetProps, TableRowSelection } from 'ant-design-vue/es/table/interface'
   import type { HostReq } from '@/api/command/types'
   import type { GroupItem } from '@/components/common/button-group/types'
@@ -346,7 +349,13 @@
         </template>
       </template>
     </a-table>
-    <host-create ref="hostCreateRef" :api-edit-caller="true" :is-public="true" @on-ok="afterSetupHostConfig" />
+    <host-create
+      ref="hostCreateRef"
+      :current-hosts="dataSource"
+      :api-edit-caller="true"
+      :is-public="true"
+      @on-ok="afterSetupHostConfig"
+    />
     <install-dependencies ref="installRef" @on-install-success="getHostList(true)" />
   </div>
 </template>
diff --git a/bigtop-manager-ui/src/router/guard.ts b/bigtop-manager-ui/src/router/guard.ts
index 61824c910..7fce803c0 100644
--- a/bigtop-manager-ui/src/router/guard.ts
+++ b/bigtop-manager-ui/src/router/guard.ts
@@ -18,20 +18,20 @@
  */
 
 import type { Router } from 'vue-router'
+
 function setCommonGuard(router: Router) {
   const token = localStorage.getItem('Token') ?? sessionStorage.getItem('Token') ?? undefined
 
   router.beforeEach(async (to, _from, next) => {
     if (!token) {
-      next()
-      return
+      return next()
     }
 
     if (to.name === 'Clusters' && token) {
-      next({ name: 'Default' })
-    } else {
-      next()
+      return next({ name: 'Default' })
     }
+
+    return next()
   })
 }
 
diff --git a/bigtop-manager-ui/src/router/routes/modules/clusters.ts b/bigtop-manager-ui/src/router/routes/modules/clusters.ts
index 0651679e5..beecba9dc 100644
--- a/bigtop-manager-ui/src/router/routes/modules/clusters.ts
+++ b/bigtop-manager-ui/src/router/routes/modules/clusters.ts
@@ -178,7 +178,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'HostCreation',
             path: 'add',
-            component: () => import('@/pages/cluster-manage/hosts/create.vue'),
+            component: () => import('@/components/create-host/create.vue'),
             meta: {
               hidden: true,
               activeMenu: '/cluster-manage/hosts/list'
diff --git a/bigtop-manager-ui/src/store/cluster/index.ts b/bigtop-manager-ui/src/store/cluster/index.ts
index 6301711e7..461047e70 100644
--- a/bigtop-manager-ui/src/store/cluster/index.ts
+++ b/bigtop-manager-ui/src/store/cluster/index.ts
@@ -21,14 +21,12 @@ import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { getCluster, getClusterList } from '@/api/cluster'
 import { useServiceStore } from '@/store/service'
-import { useMenuStore } from '@/store/menu'
 import type { ClusterVO } from '@/api/cluster/types.ts'
 
 export const useClusterStore = defineStore(
   'cluster',
   () => {
     const serviceStore = useServiceStore()
-    const menuStore = useMenuStore()
     const loading = ref(false)
     const clusters = ref<ClusterVO[]>([])
     const currCluster = ref<ClusterVO>({})
@@ -46,9 +44,7 @@ export const useClusterStore = defineStore(
           {} as Record<string, ClusterVO>
         )
       } catch (error) {
-        const token = localStorage.getItem('Token') ?? sessionStorage.getItem('Token') ?? undefined
         clusterMap.value = {}
-        token && menuStore.setupMenu()
         console.error('Failed to get clusters:', error)
       }
     }