diff --git a/pkg/harvester/components/DiskTags.vue b/pkg/harvester/components/DiskTags.vue
new file mode 100644
index 00000000..d50e8214
--- /dev/null
+++ b/pkg/harvester/components/DiskTags.vue
@@ -0,0 +1,212 @@
+<script>
+import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
+import Tag from '@shell/components/Tag';
+
+export default {
+  name: 'Tags',
+
+  components: { Tag },
+
+  props: {
+    value: {
+      type:     Array,
+      required: true,
+    },
+
+    label: {
+      type:    String,
+      default: '',
+    },
+
+    labelKey: {
+      type:    String,
+      default: '',
+    },
+
+    addLabel: {
+      type:    String,
+      default: '',
+    },
+
+    addLabelKey: {
+      type:    String,
+      default: '',
+    },
+
+    canAdd: {
+      type:    Boolean,
+      default: true,
+    },
+
+    mode: {
+      type:    String,
+      default: _CREATE,
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      tags:         this.value,
+      inputVisible: false,
+      inputValue:   '',
+    };
+  },
+
+  computed: {
+    isCreate() {
+      return this.mode === _CREATE;
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+
+    canRemove() {
+      return !this.isView;
+    },
+
+    addVisible() {
+      return this.canAdd && !this.isView;
+    },
+  },
+
+  methods: {
+    onClickPlusButton() {
+      this.inputVisible = true;
+      this.$nextTick(() => {
+        if ( this.$refs.addTagInput ) {
+          this.$refs.addTagInput.focus();
+        }
+      });
+    },
+
+    confirmAdd() {
+      if (this.inputValue && !this.value.includes(this.inputValue)) {
+        this.tags.push(this.inputValue);
+        this.$emit('input', this.tags);
+      }
+
+      this.inputValue = '';
+      this.inputVisible = false;
+    },
+
+    onRemoveTag(tag) {
+      this.tags = this.tags.filter(v => v !== tag);
+      this.$emit('input', this.tags);
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="label">
+      <div class="text-label">
+        <t
+          v-if="labelKey"
+          :k="labelKey"
+        />
+        <template v-else-if="label">
+          {{ label }}
+        </template>
+      </div>
+    </div>
+    <div class="mt-10">
+      <Tag
+        v-for="(tag) in value"
+        :key="tag"
+        class="tag"
+      >
+        <span>
+          {{ tag }}
+        </span>
+        <i
+          v-if="canRemove"
+          class="icon icon-close ml-5 icon-sm"
+          @click="(e) => onRemoveTag(tag)"
+        />
+      </Tag>
+      <span
+        v-if="addVisible && !inputVisible"
+        class="tag add"
+        @click="onClickPlusButton"
+      >
+        <i class="icon icon-plus icon-sm" />
+        <span>
+          <t
+            v-if="addLabelKey"
+            :k="addLabelKey"
+          />
+          <template v-else-if="addLabel">
+            {{ addLabel }}
+          </template>
+        </span>
+      </span>
+      <span
+        v-else-if="addVisible && inputVisible"
+        class="tag input"
+      >
+        <input
+          ref="addTagInput"
+          v-model="inputValue"
+          type="text"
+          size="small"
+          @blur="confirmAdd"
+          @keydown.enter.prevent="confirmAdd"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .tag {
+    border: 1px solid var(--primary);
+    border-radius: var(--border-radius);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    line-height: 20px;
+    list-style: none;
+    display: inline-block;
+    height: auto;
+    margin-inline-end: 8px;
+    padding-inline: 7px;
+    white-space: nowrap;
+    background: var(--accent-btn);
+    opacity: 1;
+    text-align: start;
+    color: var(--link);
+    margin-bottom: 10px;
+    margin-right: 8px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+
+    i {
+      cursor: pointer;
+    }
+
+    &.add {
+      background: var(--body-bg);
+      border-style: dashed;
+      cursor: pointer;
+    }
+
+    &.input {
+      border: none;
+      border-radius: none;
+      background: var(--body-bg);
+      padding: 0px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/components/FilterBySriov.vue b/pkg/harvester/components/FilterBySriov.vue
new file mode 100644
index 00000000..4e1eade5
--- /dev/null
+++ b/pkg/harvester/components/FilterBySriov.vue
@@ -0,0 +1,134 @@
+<script>
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+
+export default {
+  name: 'HarvesterFilterLabel',
+
+  components: { LabeledSelect },
+
+  props: {
+    rows: {
+      type:     Array,
+      required: true,
+    },
+
+    parentSriovOptions: {
+      type:     Array,
+      required: true,
+    },
+
+    parentSriovLabel: {
+      type:     String,
+      required: true,
+    },
+
+    label: {
+      type:     String,
+      required: true,
+    },
+
+  },
+
+  data() {
+    return { parentSriov: this.$route.query?.parentSriov || null };
+  },
+
+  methods: {
+    remove() {
+      this.parentSriov = null;
+      this.filterRows();
+    },
+
+    filterRows() {
+      const rows = this.rows.filter((row) => {
+        if (!this.parentSriov) {
+          return true;
+        }
+
+        const label = row.labels[this.parentSriovLabel];
+
+        return label === this.parentSriov;
+      });
+
+      this.$emit('change-rows', rows, this.parentSriov);
+    }
+  },
+
+  watch: {
+    parentSriov: {
+      deep:      true,
+      immediate: true,
+      handler() {
+        this.filterRows();
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="filter">
+    <span v-if="parentSriov" class="banner-item bg-warning">
+      {{ parentSriov }} <i class="icon icon-close" @click="remove()" />
+    </span>
+
+    <v-popover
+      trigger="click"
+      placement="bottom-end"
+    >
+      <slot name="header">
+        <button ref="actionDropDown" class="btn bg-primary mr-10">
+          <slot name="title">
+            {{ label }}
+          </slot>
+        </button>
+      </slot>
+
+      <template v-slot:popover>
+        <div class="filter-popup">
+          <div>
+            <LabeledSelect
+              v-model="parentSriov"
+              :options="parentSriovOptions"
+              :searchable="true"
+              :label="label"
+            />
+          </div>
+        </div>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.filter {
+  display: inline-block;
+
+  .banner-item {
+    display: inline-block;
+    font-size: 16px;
+    margin-right: 10px;
+    padding: 6px;
+    border-radius: 2px;
+
+    i {
+      cursor: pointer;
+      vertical-align: middle;
+    }
+  }
+}
+.filter-popup {
+  width: 300px;
+}
+
+::v-deep .box {
+  display: grid;
+  grid-template-columns: 40% 40% 10%;
+  column-gap: 1.75%;
+  margin-bottom: 10px;
+}
+
+.required {
+  color: var(--error);
+}
+</style>
diff --git a/pkg/harvester/components/FilterLabel.vue b/pkg/harvester/components/FilterLabel.vue
new file mode 100644
index 00000000..7675b69b
--- /dev/null
+++ b/pkg/harvester/components/FilterLabel.vue
@@ -0,0 +1,247 @@
+<script>
+import ArrayList from '@shell/components/form/ArrayList';
+import Select from '@shell/components/form/Select';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+
+export default {
+  name: 'HarvesterFilterLabel',
+
+  components: {
+    Select,
+    ArrayList,
+    LabeledInput
+  },
+
+  props: {
+    rows: {
+      type:     Array,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      searchLabels:    [],
+      defaultAddValue: {
+        key:   '',
+        value: '',
+      }
+    };
+  },
+
+  computed: {
+    optionLabels() {
+      const labels = this.rows.map((row) => {
+        return Object.keys(row.labels);
+      });
+
+      return Array.from(new Set(labels.flat()));
+    },
+  },
+
+  methods: {
+    calcValueOptions(key) {
+      const valueOptions = [];
+
+      this.rows.map((row) => {
+        const isExistValue = valueOptions.find(value => value.label === row.labels[key]);
+
+        if (Object.keys(row.labels).includes(key) && key && row.labels[key] && !isExistValue) {
+          valueOptions.push({
+            value: row.labels[key],
+            label: row.labels[key]
+          });
+        }
+      });
+
+      return valueOptions;
+    },
+
+    removeAll() {
+      this.$set(this, 'searchLabels', []);
+      this.filterRows();
+    },
+
+    remove(label) {
+      this.searchLabels.find((L, index) => {
+        if (L.key === label.key && L.value === label.value) {
+          this.searchLabels.splice(index, 1);
+          this.filterRows();
+
+          return true;
+        }
+      });
+    },
+
+    filterRows() {
+      const rows = this.rows.filter((row) => {
+        const hasSearch = this.searchLabels.find(search => search.key);
+
+        if (!hasSearch) {
+          return this.rows;
+        }
+
+        const labels = row.labels;
+        const keys = Object.keys(labels);
+
+        return this.searchLabels.find((search) => {
+          if (search.key && keys.includes(search.key)) {
+            if (!search.value) { // If value is empty, all data containing the key is retained
+              return true;
+            } else if (search.value === labels[search.key]) {
+              return true;
+            } else if (search.value !== labels[search.key]) {
+              return false;
+            }
+          } else {
+            return false;
+          }
+        });
+      });
+
+      this.$emit('changeRows', rows, this.searchLabels);
+    }
+  },
+
+  watch: {
+    rows: {
+      deep:      true,
+      immediate: true,
+      handler() {
+        this.filterRows();
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="filter">
+    <template v-for="(label, index) in searchLabels">
+      <span v-if="label.key" :key="`${label.key}${index}`" class="banner-item bg-warning">
+        {{ label.key }}{{ label.value ? "=" : '' }}{{ label.value }}<i class="icon icon-close" @click="remove(label)" />
+      </span>
+    </template>
+
+    <v-popover
+      trigger="click"
+      placement="bottom-end"
+    >
+      <slot name="header">
+        <button ref="actionDropDown" class="btn bg-primary mr-10">
+          <slot name="title">
+            {{ t('harvester.fields.filterLabels') }}
+          </slot>
+        </button>
+      </slot>
+
+      <template slot="popover">
+        <div class="filter-popup">
+          <div>
+            <ArrayList
+              v-model="searchLabels"
+              :show-header="true"
+              :default-add-value="defaultAddValue"
+              :initial-empty-row="true"
+              @input="filterRows"
+            >
+              <template v-slot:column-headers>
+                <div class="box">
+                  <div class="key">
+                    {{ t('generic.key') }}
+                    <span class="required">*</span>
+                  </div>
+                  <div class="value">
+                    {{ t('generic.value') }}
+                  </div>
+                  <div />
+                </div>
+              </template>
+              <template v-slot:columns="scope">
+                <div class="key">
+                  <Select
+                    ref="select"
+                    key="label"
+                    v-model="scope.row.value.key"
+                    :append-to-body="false"
+                    :searchable="true"
+                    :options="optionLabels"
+                    @input="filterRows"
+                  />
+                </div>
+                <div class="value">
+                  <Select
+                    v-if="calcValueOptions(scope.row.value.key).length > 0"
+                    ref="select"
+                    key="value"
+                    v-model="scope.row.value.value"
+                    :append-to-body="false"
+                    :searchable="true"
+                    :options="calcValueOptions(scope.row.value.key)"
+                    @input="filterRows"
+                  />
+                  <LabeledInput v-else v-model="scope.row.value.value" @input="filterRows" />
+                </div>
+              </template>
+
+              <template #add="{add}">
+                <div>
+                  <button
+                    type="button"
+                    class="btn role-tertiary add"
+                    data-testid="add-item"
+                    @click="add()"
+                  >
+                    {{ t('generic.add') }}
+                  </button>
+
+                  <button
+                    type="button"
+                    class="btn role-tertiary add"
+                    data-testid="remove-all-item"
+                    @click="removeAll()"
+                  >
+                    {{ t('generic.clearAll') }}
+                  </button>
+                </div>
+              </template>
+            </ArrayList>
+          </div>
+        </div>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.filter {
+  display: inline-block;
+
+  .banner-item {
+    display: inline-block;
+    font-size: 16px;
+    margin-right: 10px;
+    padding: 6px;
+    border-radius: 2px;
+
+    i {
+      cursor: pointer;
+      vertical-align: middle;
+    }
+  }
+}
+.filter-popup {
+  width: 600px;
+}
+
+::v-deep .box {
+  display: grid;
+  grid-template-columns: 40% 40% 10%;
+  column-gap: 1.75%;
+  margin-bottom: 10px;
+}
+
+.required {
+  color: var(--error);
+}
+</style>
diff --git a/pkg/harvester/components/HarvesterUpgrade.vue b/pkg/harvester/components/HarvesterUpgrade.vue
index 1eb775c1..e70b0131 100644
--- a/pkg/harvester/components/HarvesterUpgrade.vue
+++ b/pkg/harvester/components/HarvesterUpgrade.vue
@@ -1,11 +1,11 @@
 <script>
 import { mapGetters } from 'vuex';
+import { HCI } from '../types';
 import { allHash } from '@shell/utils/promise';
 import { Checkbox } from '@components/Form/Checkbox';
 import ModalWithCard from '@shell/components/ModalWithCard';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { Banner } from '@components/Banner';
-import { HCI } from '../types';
 import UpgradeInfo from './UpgradeInfo';
 export default {
   name: 'HarvesterUpgrade',
@@ -34,7 +34,8 @@ export default {
       selectMode:       true,
       version:          '',
       enableLogging:    true,
-      readyReleaseNote: false
+      readyReleaseNote: false,
+      isOpen:           false,
     };
   },
 
@@ -44,7 +45,7 @@ export default {
     versionOptions() {
       const versions = this.$store.getters['harvester/all'](HCI.VERSION);
 
-      return versions.map(V => V.metadata.name);
+      return versions.map((V) => V.metadata.name);
     },
 
     currentVersion() {
@@ -68,7 +69,7 @@ export default {
         let upgradeMessage = [];
         const list = neu || [];
 
-        const currentResource = list.find( O => !!O.isLatestUpgrade);
+        const currentResource = list.find( (O) => !!O.isLatestUpgrade);
 
         upgradeMessage = currentResource ? currentResource.upgradeMessage : [];
 
@@ -111,12 +112,12 @@ export default {
     },
 
     cancel() {
-      this.$refs.deleteTip.hide();
+      this.isOpen = false;
       this.errors = '';
     },
 
     open() {
-      this.$refs.deleteTip.open();
+      this.isOpen = true;
     },
   }
 };
@@ -131,12 +132,21 @@ export default {
           :cluster="currentCluster.nameDisplay"
         />
       </h1>
-      <button v-if="versionOptions.length" type="button" class="btn bg-warning btn-sm" @click="open">
+      <button
+        v-if="versionOptions.length"
+        type="button"
+        class="btn bg-warning btn-sm"
+        @click="open"
+      >
         <t k="harvester.upgradePage.upgrade" />
       </button>
     </header>
 
-    <ModalWithCard ref="deleteTip" name="deleteTip" :width="850">
+    <ModalWithCard
+      v-if="isOpen"
+      name="deleteTip"
+      :width="850"
+    >
       <template #title>
         <t k="harvester.upgradePage.upgradeApp" />
       </template>
@@ -158,17 +168,36 @@ export default {
             :clearable="true"
           />
 
-          <div v-if="canEnableLogging" class="mb-5">
-            <Checkbox v-model="enableLogging" class="check" type="checkbox" :label="t('harvester.upgradePage.enableLogging')" />
+          <div
+            v-if="canEnableLogging"
+            class="mb-5"
+          >
+            <Checkbox
+              v-model="enableLogging"
+              class="check"
+              type="checkbox"
+              :label="t('harvester.upgradePage.enableLogging')"
+            />
           </div>
 
           <div v-if="version">
-            <p v-clean-html="t('harvester.upgradePage.releaseTip', {url: releaseLink}, true)" class="mb-10"></p>
+            <p
+              v-clean-html="t('harvester.upgradePage.releaseTip', {url: releaseLink}, true)"
+              class="mb-10"
+            ></p>
 
-            <Checkbox v-model="readyReleaseNote" class="check" type="checkbox" label-key="harvester.upgradePage.checkReady" />
+            <Checkbox
+              v-model="readyReleaseNote"
+              class="check"
+              type="checkbox"
+              label-key="harvester.upgradePage.checkReady"
+            />
           </div>
 
-          <Banner v-if="errors.length" color="warning">
+          <Banner
+            v-if="errors.length"
+            color="warning"
+          >
             {{ errors }}
           </Banner>
         </div>
@@ -176,10 +205,17 @@ export default {
 
       <template #footer>
         <div class="footer">
-          <button class="btn role-secondary mr-20" @click.prevent="cancel">
+          <button
+            class="btn role-secondary mr-20"
+            @click.prevent="cancel"
+          >
             <t k="generic.close" />
           </button>
-          <button :disabled="!readyReleaseNote" class="btn role-tertiary bg-primary" @click.prevent="handleUpgrade">
+          <button
+            :disabled="!readyReleaseNote"
+            class="btn role-tertiary bg-primary"
+            @click.prevent="handleUpgrade"
+          >
             <t k="harvester.upgradePage.upgrade" />
           </button>
         </div>
diff --git a/pkg/harvester/components/HarvesterUpgradeHeader.vue b/pkg/harvester/components/HarvesterUpgradeHeader.vue
index bb854673..4ac26693 100644
--- a/pkg/harvester/components/HarvesterUpgradeHeader.vue
+++ b/pkg/harvester/components/HarvesterUpgradeHeader.vue
@@ -1,13 +1,13 @@
 <script>
 import { NODE } from '@shell/config/types';
+import { HCI } from '../types';
 import { allHash } from '@shell/utils/promise';
 import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 import PercentageBar from '@shell/components/PercentageBar';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter';
-import { mapGetters } from 'vuex';
-import { PRODUCT_NAME as HARVESTER } from '../config/harvester';
-import { HCI } from '../types';
 import ProgressBarList from './HarvesterUpgradeProgressBarList';
+import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter';
+import { PRODUCT_NAME as HARVESTER } from '../config/harvester';
+import { mapGetters } from 'vuex';
 
 export default {
   name:       'HarvesterUpgradeHeader',
diff --git a/pkg/harvester/components/SerialConsole/index.vue b/pkg/harvester/components/SerialConsole/index.vue
new file mode 100644
index 00000000..a307f97d
--- /dev/null
+++ b/pkg/harvester/components/SerialConsole/index.vue
@@ -0,0 +1,268 @@
+<script>
+import { allHash } from '@shell/utils/promise';
+import debounce from 'lodash/debounce';
+
+import Socket, {
+  EVENT_CONNECTED,
+  EVENT_CONNECTING,
+  EVENT_DISCONNECTED,
+  EVENT_MESSAGE,
+  EVENT_CONNECT_ERROR,
+} from '@shell/utils/socket';
+
+export default {
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      socket:      null,
+      terminal:    null,
+      fitAddon:    null,
+      searchAddon: null,
+      webglAddon:  null,
+      isOpen:      false,
+      isOpening:   false,
+      backlog:     [],
+      firstTime:   true,
+      queue:       []
+    };
+  },
+
+  computed: {
+    xtermConfig() {
+      return {
+        allowProposedApi: true,
+        cursorBlink:      true,
+        useStyle:         true,
+        fontSize:         12,
+      };
+    },
+  },
+
+  watch: {
+    queue: {
+      handler: debounce(async function(neu) {
+        if (neu.length === 0) {
+          return;
+        }
+
+        const msg = await Promise.all(neu);
+
+        (msg || []).forEach((m) => {
+          this.terminal.write(m);
+        });
+
+        this.queue = [];
+      }, 5)
+    }
+  },
+
+  beforeDestroy() {
+    this.close();
+  },
+
+  async mounted() {
+    await this.setupTerminal();
+    await this.connect();
+  },
+
+  methods: {
+    async setupTerminal() {
+      const docStyle = getComputedStyle(document.querySelector('body'));
+      const xterm = await import(/* webpackChunkName: "xterm" */ 'xterm');
+
+      const addons = await allHash({
+        fit:      import(/* webpackChunkName: "xterm" */ 'xterm-addon-fit'),
+        webgl:    import(/* webpackChunkName: "xterm" */ 'xterm-addon-webgl'),
+        weblinks: import(/* webpackChunkName: "xterm" */ 'xterm-addon-web-links'),
+        search:   import(/* webpackChunkName: "xterm" */ 'xterm-addon-search'),
+      });
+
+      const terminal = new xterm.Terminal({
+        theme: {
+          background: docStyle.getPropertyValue('--terminal-bg').trim(),
+          cursor:     docStyle.getPropertyValue('--terminal-cursor').trim(),
+          foreground: docStyle.getPropertyValue('--terminal-text').trim()
+        },
+        ...this.xtermConfig,
+      });
+
+      this.fitAddon = new addons.fit.FitAddon();
+      this.searchAddon = new addons.search.SearchAddon();
+
+      try {
+        this.webglAddon = new addons.webgl.WebGlAddon();
+      } catch (e) {
+        // Some browsers (Safari) don't support the webgl renderer, so don't use it.
+        this.webglAddon = null;
+      }
+
+      terminal.loadAddon(this.fitAddon);
+      terminal.loadAddon(this.searchAddon);
+      terminal.loadAddon(new addons.weblinks.WebLinksAddon());
+      terminal.open(this.$refs.xterm);
+
+      if ( this.webglAddon ) {
+        terminal.loadAddon(this.webglAddon);
+      }
+
+      this.fit();
+      this.flush();
+
+      terminal.onData((input) => {
+        const msg = this.str2ab(input);
+
+        this.write(msg);
+      });
+
+      this.terminal = terminal;
+    },
+
+    str2ab(str) {
+      const enc = new TextEncoder();
+
+      return enc.encode(str);
+    },
+
+    write(msg) {
+      if ( this.isOpen ) {
+        this.socket.send(msg);
+      } else {
+        this.backlog.push(msg);
+      }
+    },
+
+    clear() {
+      this.terminal.clear();
+    },
+
+    getSocketUrl() {
+      return `${ this.value?.getSerialConsolePath }`;
+    },
+
+    async connect() {
+      if ( this.socket ) {
+        await this.socket.disconnect();
+        this.socket = null;
+        this.terminal.reset();
+      }
+
+      const url = this.getSocketUrl();
+
+      if ( !url ) {
+        return;
+      }
+
+      this.socket = new Socket(url);
+
+      this.socket.addEventListener(EVENT_CONNECTING, (e) => {
+        this.isOpen = false;
+        this.isOpening = true;
+      });
+
+      this.socket.addEventListener(EVENT_CONNECT_ERROR, (e) => {
+        this.isOpen = false;
+        this.isOpening = false;
+        console.error('Connect Error', e); // eslint-disable-line no-console
+      });
+
+      this.socket.addEventListener(EVENT_CONNECTED, (e) => {
+        this.isOpen = true;
+        this.isOpening = false;
+        if (this.show) {
+          this.fit();
+          this.flush();
+        }
+
+        if (this.firstTime) {
+          this.socket.send(this.str2ab('\n'));
+          this.firstTime = false;
+        }
+      });
+
+      this.socket.addEventListener(EVENT_DISCONNECTED, (e) => {
+        this.isOpen = false;
+        this.isOpening = false;
+        this.$emit('close');
+      });
+
+      this.socket.addEventListener(EVENT_MESSAGE, (e) => {
+        this.queue.push(e.detail.data.text());
+      });
+
+      this.socket.connect();
+      this.terminal.focus();
+    },
+
+    flush() {
+      const backlog = this.backlog.slice();
+
+      this.backlog = [];
+
+      for ( const data of backlog ) {
+        this.socket.send(data);
+      }
+    },
+
+    fit(arg) {
+      if ( !this.fitAddon ) {
+        return;
+      }
+
+      this.fitAddon.fit();
+
+      const { rows, cols } = this.fitAddon.proposeDimensions();
+
+      if ( !this.isOpen ) {
+        return;
+      }
+
+      const message = JSON.stringify({
+        Width:  cols,
+        Height: rows
+      });
+
+      this.socket.send(this.str2ab(message));
+    },
+
+    close() {
+      if ( this.socket ) {
+        this.socket.disconnect();
+      }
+
+      if ( this.terminal ) {
+        this.terminal.dispose();
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="harvester-shell-container">
+    <div ref="xterm" class="shell-body" />
+    <resize-observer @notify="fit" />
+  </div>
+</template>
+
+<style lang="scss">
+  @import '../../../../node_modules/xterm/css/xterm.css';
+
+  body, #__nuxt, #__layout, MAIN {
+    height: 100%;
+  }
+
+  .harvester-shell-container {
+    height: 100%;
+    overflow: hidden;
+
+    .shell-body, .terminal.xterm {
+      height: 100%;
+    }
+  }
+</style>
diff --git a/pkg/harvester/components/SettingList.vue b/pkg/harvester/components/SettingList.vue
new file mode 100644
index 00000000..b2bba63e
--- /dev/null
+++ b/pkg/harvester/components/SettingList.vue
@@ -0,0 +1,203 @@
+<script>
+import { mapGetters } from 'vuex';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import { HCI_ALLOWED_SETTINGS, HCI_SETTING } from '../config/settings';
+
+const CATEGORY = {
+  ui: [
+    'branding',
+    'ui-source',
+    'ui-plugin-index',
+    'ui-index',
+  ]
+};
+
+export default {
+  name: 'SettingLists',
+
+  components: {
+    AsyncButton,
+    Banner,
+  },
+
+  props: {
+    settings: {
+      type:     Array,
+      required: true,
+    },
+
+    category: {
+      type:     String,
+      required: true,
+    }
+  },
+
+  data() {
+    const categorySettings = this.settings.filter((s) => {
+      if (this.category !== 'advanced') {
+        return (CATEGORY[this.category] || []).find(item => item === s.id);
+      } else if (this.category === 'advanced') {
+        const allCategory = Object.keys(CATEGORY);
+
+        return !allCategory.some(category => (CATEGORY[category] || []).find(item => item === s.id));
+      }
+    }) || [];
+
+    return {
+      HCI_SETTING,
+      categorySettings,
+    };
+  },
+
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+
+  methods: {
+    showActionMenu(e, setting) {
+      const actionElement = e.srcElement;
+
+      this.$store.commit(`action-menu/show`, {
+        resources: setting.data,
+        elem:      actionElement
+      });
+    },
+
+    getSettingOption(id) {
+      return HCI_ALLOWED_SETTINGS.find(setting => setting.id === id);
+    },
+
+    toggleHide(s) {
+      this.categorySettings.find((setting) => {
+        if (setting.id === s.id) {
+          setting.hide = !setting.hide;
+        }
+      });
+    },
+
+    async testConnect(buttonDone, value) {
+      try {
+        const url = this.$store.getters['harvester-common/getHarvesterClusterUrl']('v1/harvester/backuptarget/healthz');
+
+        const health = await this.$store.dispatch('harvester/request', { url });
+        const settingValue = JSON.parse(value);
+
+        if (health?._status === 200) {
+          this.$store.dispatch('growl/success', {
+            title:   this.t('harvester.notification.title.succeed'),
+            message: this.t('harvester.backup.message.testConnect.successMessage', { endpoint: settingValue?.endpoint })
+          }, { root: true });
+        }
+        buttonDone(true);
+      } catch (err) {
+        if (err?._status === 400 || err?._status === 503) {
+          this.$store.dispatch('growl/error', {
+            title:   this.t('harvester.notification.title.error'),
+            message: err?.errors[0]
+          }, { root: true });
+        }
+        buttonDone(false);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-for="setting in categorySettings" :key="setting.id" class="advanced-setting mb-20">
+      <div class="header">
+        <div class="title">
+          <h1>
+            {{ setting.id }}
+            <span v-if="setting.customized" class="modified">
+              Modified
+            </span>
+          </h1>
+          <h2 v-clean-html="t(setting.description, {}, true)">
+          </h2>
+        </div>
+        <div v-if="setting.hasActions" :id="setting.id" class="action">
+          <button aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-sm role-multi-action actions" @click="showActionMenu($event, setting)">
+            <i class="icon icon-actions" />
+          </button>
+        </div>
+      </div>
+      <div value>
+        <div v-if="!setting.hide" class="settings-value">
+          <pre v-if="setting.kind === 'json'">{{ setting.json }}</pre>
+          <pre v-else-if="setting.kind === 'multiline'">{{ setting.data.value || setting.data.default }}</pre>
+          <pre v-else-if="setting.kind === 'enum'">{{ t(setting.enum) }}</pre>
+          <pre v-else-if="setting.kind === 'custom' && setting.custom">{{ setting.custom }}</pre>
+          <pre v-else-if="setting.data.value || setting.data.default">{{ setting.data.value || setting.data.default }}</pre>
+          <pre v-else class="text-muted">&lt;{{ t('advancedSettings.none') }}&gt;</pre>
+        </div>
+
+        <div class="mt-5">
+          <button v-if="setting.hide" class="btn btn-sm role-primary" @click="toggleHide(setting)">
+            {{ t('advancedSettings.show') }} {{ setting.id }}
+          </button>
+
+          <button v-if="setting.canHide && !setting.hide" class="btn btn-sm role-primary" @click="toggleHide(setting)">
+            {{ t('advancedSettings.hide') }} {{ setting.id }}
+          </button>
+
+          <AsyncButton
+            v-if="setting.id === HCI_SETTING.BACKUP_TARGET"
+            class="backupButton ml-5"
+            mode="apply"
+            size="sm"
+            :delay="0"
+            :action-label="t('harvester.backup.message.testConnect.actionLabel')"
+            :waiting-label="t('harvester.backup.message.testConnect.waitingLabel')"
+            :success-label="t('harvester.backup.message.testConnect.successLabel')"
+            @click="(buttonCb) => testConnect(buttonCb, setting.data.value)"
+          />
+        </div>
+      </div>
+      <Banner v-if="setting.data.errMessage" color="error mt-5" class="settings-banner">
+        {{ setting.data.errMessage }}
+      </Banner>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.settings-banner {
+  margin-top: 0;
+}
+.advanced-setting {
+  border: 1px solid var(--border);
+  padding: 20px;
+  border-radius: var(--border-radius);
+
+  h1 {
+    font-size: 14px;
+  }
+  h2 {
+    font-size: 12px;
+    margin-bottom: 0;
+    opacity: 0.8;
+  }
+}
+
+.settings-value pre {
+  margin: 0;
+}
+
+.header {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.title {
+  flex: 1;
+}
+
+.modified {
+  margin-left: 10px;
+  border: 1px solid var(--primary);
+  border-radius: 5px;
+  padding: 2px 10px;
+  font-size: 12px;
+}
+</style>
diff --git a/pkg/harvester/components/VMConsoleBar.vue b/pkg/harvester/components/VMConsoleBar.vue
new file mode 100644
index 00000000..2b6621f8
--- /dev/null
+++ b/pkg/harvester/components/VMConsoleBar.vue
@@ -0,0 +1,95 @@
+<script>
+import ButtonDropdown from '@shell/components/ButtonDropdown';
+import { mapGetters } from 'vuex';
+import { OFF } from '../models/kubevirt.io.virtualmachine';
+import { PRODUCT_NAME } from '../config/harvester';
+
+export default {
+  name: 'VMConsoleBar',
+
+  components: { ButtonDropdown },
+
+  props: {
+    resource: {
+      type:     Object,
+      required: true,
+      default:  () => {
+        return {};
+      }
+    }
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    isOff() {
+      return this.resource.stateDisplay === OFF;
+    },
+
+    options() {
+      return [
+        {
+          label: this.t('harvester.virtualMachine.console.novnc'),
+          value: 'vnc'
+        },
+        {
+          label: this.t('harvester.virtualMachine.console.serial'),
+          value: 'serial'
+        }
+      ];
+    }
+  },
+
+  methods: {
+    handleDropdown(c) {
+      this.show(c.value);
+    },
+
+    show(type) {
+      let uid = this.resource.metadata?.ownerReferences?.[0]?.uid;
+
+      if (uid === undefined) {
+        uid = this.resource.metadata.uid;
+      }
+
+      const host = window.location.host;
+      const prefix = window.location.pathname.replace(this.$route.path, '');
+      const params = this.$route?.params;
+
+      const url = `https://${ host }${ prefix }/${ PRODUCT_NAME }/c/${ params.cluster }/console/${ uid }/${ type }`;
+
+      window.open(
+        url,
+        '_blank',
+        'toolbars=0,width=900,height=700,left=0,top=0,noreferrer'
+      );
+    },
+
+    isEmpty(o) {
+      return o !== undefined && Object.keys(o).length === 0;
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="overview-web-console">
+    <ButtonDropdown
+      :disabled="isOff"
+      :no-drop="isOff"
+      button-label="Console"
+      :dropdown-options="options"
+      size="sm"
+      @click-action="handleDropdown"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.overview-web-console {
+  .btn {
+    line-height: 24px;
+    min-height: 24px;
+  }
+}
+</style>
diff --git a/pkg/harvester/components/novnc/NovncConsole.vue b/pkg/harvester/components/novnc/NovncConsole.vue
new file mode 100644
index 00000000..38533898
--- /dev/null
+++ b/pkg/harvester/components/novnc/NovncConsole.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div v-if="connected && disconnected">
+      <main class="main-layout error">
+        <div class="text-center">
+          <BrandImage file-name="error-desert-landscape.svg" width="900" height="300" />
+          <h1>
+            {{ t('generic.notification.title.warning') }}
+          </h1>
+          <h2 class="text-secondary mt-20">
+            {{ t('vncConsole.error.message') }}
+          </h2>
+        </div>
+      </main>
+    </div>
+    <div v-if="reconnecting">
+      <main class="main-layout">
+        <div class="text-center">
+          <h2 class="text-secondary mt-20">
+            {{ t('vncConsole.reconnecting.message') }}：{{ retryTimes }} of {{ maximumRetryTimes }}
+          </h2>
+        </div>
+      </main>
+    </div>
+    <div
+      ref="view"
+    />
+  </div>
+</template>
+
+<script>
+import RFB from '@novnc/novnc/core/rfb';
+import BrandImage from '@shell/components/BrandImage';
+
+export default {
+  props: {
+    url: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  components: { BrandImage },
+
+  data() {
+    return {
+      rfb:               null,
+      connected:         false,
+      disconnected:      false,
+      reconnectDelay:    3000,
+      reconnecting:      false,
+      maximumRetryTimes: 10,
+      retryTimes:        0,
+      setTimeout:        null,
+    };
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.connect();
+    });
+  },
+
+  beforeDestroy() {
+    this.clearTimeout();
+  },
+
+  methods: {
+    connect() {
+      const rfb = new RFB(this.$refs.view, this.url);
+
+      rfb.addEventListener('connect', () => {
+        this.clearTimeout();
+
+        this.connected = true;
+        this.retryTimes = 0;
+        this.reconnecting = false;
+      });
+
+      rfb.addEventListener('disconnect', (e) => {
+        this.clearTimeout();
+
+        this.disconnected = true;
+        this.rfb = null;
+        this.reconnect();
+      });
+
+      this.rfb = rfb;
+    },
+
+    reconnect() {
+      if (this.retryTimes >= this.maximumRetryTimes) {
+        this.reconnecting = false;
+        this.connected = true;
+        this.disconnected = true;
+
+        return;
+      }
+
+      this.retryTimes += 1;
+      this.reconnecting = true;
+      this.connected = false;
+      this.disconnected = false;
+
+      this.setTimeout = setTimeout(() => {
+        this.connect();
+      }, this.reconnectDelay);
+    },
+
+    clearTimeout() {
+      if (this.setTimeout) {
+        clearTimeout(this.setTimeout);
+      }
+    },
+
+    disconnect() {
+      this.rfb.disconnect();
+    },
+
+    ctrlAltDelete() {
+      this.rfb.sendCtrlAltDel();
+    },
+
+    sendKey(keysym, code, down) {
+      this.rfb.sendKey(keysym, code, down);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .error {
+    overflow: hidden;
+
+    .row {
+      align-items: center;
+    }
+
+    h1 {
+      font-size: 5rem;
+    }
+
+    .desert-landscape {
+      img {
+        max-width: 100%;
+      }
+    }
+  }
+</style>
diff --git a/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue b/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue
new file mode 100644
index 00000000..ae393537
--- /dev/null
+++ b/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue
@@ -0,0 +1,245 @@
+<script>
+import { STEVE } from '@shell/config/types';
+import Banner from '@components/Banner/Banner.vue';
+import AsyncButton from '@shell/components/AsyncButton';
+import ModalWithCard from '@shell/components/ModalWithCard';
+
+const PREFERED_SHORTCUT_KEYS = 'prefered-shortcut-keys';
+
+export default {
+  components: {
+    ModalWithCard, Banner, AsyncButton
+  },
+
+  data() {
+    return {
+      keysRecord:            [],
+      addedShortcutKeys:     [],
+      preferredShortcutKeys: [],
+      isRecording:           false,
+    };
+  },
+
+  computed: {
+    savedShortcutKeys() {
+      const preference = this.$store.getters['management/all'](STEVE.PREFERENCE);
+      const preferedShortcutKeys = preference?.[0]?.data?.[PREFERED_SHORTCUT_KEYS];
+      let out = [];
+
+      if (!preferedShortcutKeys) {
+        return out;
+      }
+
+      try {
+        out = JSON.parse(preferedShortcutKeys);
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', {
+          title: this.t('generic.notification.title.error', { name: this.t('harvester.virtualMachine.detail.console.customShortcutKeys') }),
+          err,
+        }, { root: true });
+      }
+
+      return out;
+    },
+
+    displayedKeys() {
+      const out = this.addedShortcutKeys.concat(this.preferredShortcutKeys).map((item) => {
+        const out = item.map(K => ` <code>${ K.key.charAt(0).toUpperCase() + K.key.slice(1) }</code>`);
+
+        return out.join(',');
+      });
+
+      return out;
+    },
+
+    recordButton() {
+      if (this.isRecording) {
+        return 'harvester.virtualMachine.detail.console.record.stop';
+      }
+
+      return 'harvester.virtualMachine.detail.console.record.start';
+    },
+
+    keysRecordFormat() {
+      if (!this.isRecording && this.keysRecord.length === 0) {
+        return this.t('harvester.virtualMachine.detail.console.record.tips');
+      }
+
+      const out = this.keysRecord.map(item => ` <code>${ item.key.charAt(0).toUpperCase() + item.key.slice(1) }</code>`);
+
+      return `Keys: ${ out.join(',') }`;
+    },
+
+    canAdd() {
+      const hasRecord = this.keysRecord.length > 0;
+      let validationList = [].concat(this.preferredShortcutKeys, this.addedShortcutKeys);
+
+      if (!hasRecord) {
+        return false;
+      }
+
+      validationList.push(this.keysRecord);
+
+      validationList = validationList.map((item) => {
+        const out = item.map(K => K.key);
+
+        return out.join(',');
+      });
+
+      return validationList.length === new Set(validationList).size;
+    },
+  },
+
+  watch: {
+    savedShortcutKeys: {
+      handler() {
+        this.preferredShortcutKeys = [].concat(this.savedShortcutKeys) || [];
+      },
+      immediate: true
+    },
+  },
+
+  methods: {
+    show() {
+      this.$refs.recordShortcutKeys.open();
+    },
+
+    closeRecordingModal() {
+      window.removeEventListener('keydown', this.handleShortcut);
+      this.$emit('close');
+    },
+
+    toggleRecording() {
+      this.isRecording = !this.isRecording;
+
+      if (this.isRecording) {
+        this.keysRecord = [];
+        window.addEventListener('keydown', this.handleShortcut);
+      } else {
+        window.removeEventListener('keydown', this.handleShortcut);
+      }
+    },
+
+    handleShortcut(event) {
+      event.preventDefault();
+
+      const {
+        key, keyCode, code, location, charCode
+      } = event;
+
+      this.keysRecord.push({
+        key, keyCode, code, location, charCode
+      });
+    },
+
+    addShortcutKey() {
+      this.addedShortcutKeys.push([].concat(this.keysRecord));
+    },
+
+    removeKey(keys) {
+      const key = keys.replace(/(\s*)<code>|<\/code>/g, '').replace(/\s*,\s*/g, ',');
+
+      this.addedShortcutKeys = this.addedShortcutKeys.filter((item) => {
+        const formatkey = item.map(K => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join(',');
+
+        return formatkey !== key;
+      });
+
+      this.preferredShortcutKeys = this.preferredShortcutKeys.filter((item) => {
+        const formatkey = item.map(K => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join(',');
+
+        return formatkey !== key;
+      });
+    },
+
+    async saveKeys(buttonCb) {
+      const out = [].concat(this.preferredShortcutKeys, this.addedShortcutKeys);
+      const preference = this.$store.getters['management/all'](STEVE.PREFERENCE)?.[0];
+
+      try {
+        this.$set(preference.data, PREFERED_SHORTCUT_KEYS, JSON.stringify(out));
+        await preference.save();
+        this.closeRecordingModal();
+        buttonCb(true);
+      } catch (err) {
+        buttonCb(false);
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <ModalWithCard ref="recordShortcutKeys" name="recordShortcutKeys" :width="550">
+    <template #title>
+      <t k="harvester.virtualMachine.detail.console.customShortcutKeys" />
+    </template>
+
+    <template #content>
+      <div class="row">
+        <div class="col span-12">
+          <Banner color="info">
+            <span v-clean-html="keysRecordFormat"></span>
+          </Banner>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-12">
+          <button class="btn bg-primary" @click="toggleRecording">
+            <t :k="recordButton" />
+            <i class="icon icon-fw" :class="isRecording ? 'icon-dot-open' : 'icon-dot'" />
+          </button>
+          <button :disabled="!canAdd" class="btn bg-primary" @click="addShortcutKey">
+            <t k="generic.add" />
+          </button>
+        </div>
+      </div>
+
+      <hr>
+
+      <div class="displayed-keys mt-20">
+        <h4
+          v-clean-html="t('harvester.virtualMachine.detail.console.record.preferredKeys')"
+          class="text-default-text"
+        />
+
+        <div class="displayed-banners">
+          <Banner v-for="(keys,index) in displayedKeys" :key="index" color="info" :closable="true" @close="removeKey(keys)">
+            <span v-clean-html="keys"></span>
+          </Banner>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="actions">
+        <button class="btn role-secondary mr-20" @click.prevent="closeRecordingModal">
+          <t k="generic.close" />
+        </button>
+        <AsyncButton
+          mode="done"
+          @click="saveKeys"
+        />
+      </div>
+    </template>
+  </ModalWithCard>
+</template>
+
+<style lang="scss" scoped>
+  .displayed-keys {
+    .banner {
+      margin: 0;
+    }
+  }
+
+  .displayed-banners {
+    max-height: 155px;
+    overflow: auto;
+  }
+
+  .actions {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>
diff --git a/pkg/harvester/components/novnc/NovncConsoleItem.vue b/pkg/harvester/components/novnc/NovncConsoleItem.vue
new file mode 100644
index 00000000..c3aee1aa
--- /dev/null
+++ b/pkg/harvester/components/novnc/NovncConsoleItem.vue
@@ -0,0 +1,89 @@
+<script>
+export default {
+  name: 'NovncConsoleItem',
+
+  props: {
+    items: {
+      type:     Object,
+      required: true,
+      default:  () => {
+        return {};
+      }
+    },
+
+    path: {
+      type:     Array,
+      required: true,
+      default:  () => {
+        return [];
+      }
+    },
+
+    pos: {
+      type:     Number,
+      required: true,
+      default:  0,
+    }
+  },
+
+  methods: {
+    keysDown(key, pos) {
+      this.addKeys({ key, pos });
+      this.$emit('send-keys');
+    },
+
+    addKeys({ key, pos }) {
+      this.$emit('update', { key, pos });
+    },
+
+    sendKeys() {
+      this.$emit('send-keys');
+    },
+
+    getOpenStatus(key, pos) {
+      return this.path[pos] === key;
+    }
+  }
+};
+</script>
+
+<template>
+  <ul class="list-unstyled dropdown combination-keys__container">
+    <li v-for="(item, key) in items" :key="key">
+      <v-popover
+        v-if="!!item.keys"
+        placement="right-start"
+        trigger="click"
+        :container="false"
+      >
+        <span :class="{ open: getOpenStatus(key, pos) }" class="p-10 hand" @click="addKeys({ key, pos })">{{ item.label }}</span>
+
+        <template v-slot:popover>
+          <novnc-console-item :items="item.keys" :path="path" :pos="pos+1" @update="addKeys" @send-keys="sendKeys" />
+        </template>
+      </v-popover>
+
+      <span v-else class="p-10 hand" @click="keysDown(key, pos)">{{ item.label }}</span>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+  .combination-keys__container {
+    max-width: 60px;
+
+    DIV, SPAN {
+      display: block;
+      text-align: center;
+    }
+
+    SPAN {
+      border-radius: 3px;
+
+      &:hover, &.open {
+        color: var(--primary-hover-text);
+        background: var(--primary-hover-bg);
+      }
+    }
+  }
+</style>
diff --git a/pkg/harvester/components/novnc/NovncConsoleWrapper.vue b/pkg/harvester/components/novnc/NovncConsoleWrapper.vue
new file mode 100644
index 00000000..668a07f6
--- /dev/null
+++ b/pkg/harvester/components/novnc/NovncConsoleWrapper.vue
@@ -0,0 +1,348 @@
+<script>
+import { STEVE } from '@shell/config/types';
+import { escapeHtml } from '@shell/utils/string';
+import { allHash } from '@shell/utils/promise';
+import KeyTable from '@novnc/novnc/core/input/keysym';
+import * as KeyboardUtil from '@novnc/novnc/core/input/util';
+import NovncConsole from './NovncConsole';
+import NovncConsoleItem from './NovncConsoleItem';
+import NovncConsoleCustomKeys from './NovncConsoleCustomKeys';
+import { HCI } from '../../types';
+
+const PREFERED_SHORTCUT_KEYS = 'prefered-shortcut-keys';
+
+const SHORT_KEYS = {
+  ControlLeft: {
+    label: 'Ctrl',
+    value: KeyTable.XK_Control_L,
+  },
+  AltLeft: {
+    label: 'Alt',
+    value: KeyTable.XK_Alt_L,
+  }
+};
+
+const FUNCTION_KEYS = {
+  Delete: {
+    label: 'Del',
+    value: KeyTable.XK_Delete,
+  },
+  PrintScreen: {
+    label: 'Print Screen',
+    value: KeyTable.XK_Print,
+  },
+};
+
+const NORMAL_KEYS = {
+  KeyN: {
+    label: 'N',
+    value: KeyTable.XK_n,
+  },
+  KeyT: {
+    label: 'T',
+    value: KeyTable.XK_t,
+  },
+  KeyW: {
+    label: 'W',
+    value: KeyTable.XK_w,
+  },
+  KeyY: {
+    label: 'Y',
+    value: KeyTable.XK_y,
+  },
+};
+
+const F_KEYS = {
+  F1: {
+    label: 'F1',
+    value: KeyTable.XK_F1,
+  },
+  F2: {
+    label: 'F2',
+    value: KeyTable.XK_F2,
+  },
+  F3: {
+    label: 'F3',
+    value: KeyTable.XK_F3,
+  },
+  F4: {
+    label: 'F4',
+    value: KeyTable.XK_F4,
+  },
+  F5: {
+    label: 'F5',
+    value: KeyTable.XK_F5,
+  },
+  F6: {
+    label: 'F6',
+    value: KeyTable.XK_F6,
+  },
+  F7: {
+    label: 'F7',
+    value: KeyTable.XK_F7,
+  },
+  F8: {
+    label: 'F8',
+    value: KeyTable.XK_F8,
+  },
+  F9: {
+    label: 'F9',
+    value: KeyTable.XK_F9,
+  },
+  F10: {
+    label: 'F10',
+    value: KeyTable.XK_F10,
+  },
+  F11: {
+    label: 'F11',
+    value: KeyTable.XK_F11,
+  },
+  F12: {
+    label: 'F12',
+    value: KeyTable.XK_F12,
+  },
+};
+
+export default {
+  components: {
+    NovncConsole, NovncConsoleItem, NovncConsoleCustomKeys
+  },
+
+  async fetch() {
+    const _hash = { vmResource: this.$store.dispatch('harvester/find', { type: HCI.VM, id: this.value.id }) };
+
+    const hash = await allHash(_hash);
+
+    this.vmResource = hash.vmResource;
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+      default:  () => {
+        return {};
+      }
+    }
+  },
+
+  data() {
+    return {
+      keysRecord:        [],
+      vmResource:        {},
+      renderKeysModal:   false,
+      currentUser:       null,
+      hideCustomKeysBar: false,
+    };
+  },
+
+  computed: {
+    savedShortcutKeys() {
+      const preference = this.$store.getters['management/all'](STEVE.PREFERENCE);
+      const preferedShortcutKeys = preference?.[0]?.data?.[PREFERED_SHORTCUT_KEYS];
+      let out = [];
+
+      if (!preference?.[0]?.data) {
+        this.hideCustomKeysBar = true;
+
+        return out;
+      }
+
+      if (!preferedShortcutKeys) {
+        return out;
+      }
+
+      try {
+        out = JSON.parse(preferedShortcutKeys);
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', {
+          title: this.t('generic.notification.title.error', { name: escapeHtml(this.value.metadata.name) }),
+          err,
+        }, { root: true });
+      }
+
+      return out;
+    },
+
+    isDown() {
+      return this.isEmpty(this.value);
+    },
+
+    url() {
+      const ip = `${ window.location.hostname }:${ window.location.port }`;
+
+      return `wss://${ ip }${ this.value?.getVMIApiPath }`;
+    },
+
+    allKeys() {
+      return {
+        ...SHORT_KEYS,
+        ...FUNCTION_KEYS,
+        ...NORMAL_KEYS,
+        ...F_KEYS,
+      };
+    },
+
+    keymap() {
+      const out = {
+        ...SHORT_KEYS,
+        PrintScreen: FUNCTION_KEYS.PrintScreen,
+        ...F_KEYS,
+      };
+
+      out.AltLeft.keys = { PrintScreen: FUNCTION_KEYS.PrintScreen, ...F_KEYS };
+      out.ControlLeft.keys = {
+        AltLeft: {
+          ...Object.assign(SHORT_KEYS.AltLeft, {}),
+          keys: { Delete: FUNCTION_KEYS.Delete }
+        },
+        ...NORMAL_KEYS,
+      };
+
+      return out;
+    },
+
+    hasSoftRebootAction() {
+      return !!this.vmResource?.actions?.softreboot;
+    },
+
+    preferredShortcutKeys() {
+      return (this.savedShortcutKeys || []).map((item) => {
+        return {
+          label: item.map(K => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join('+'),
+          value: item
+        };
+      });
+    },
+  },
+
+  methods: {
+    isEmpty(o) {
+      return o !== undefined && Object.keys(o).length === 0;
+    },
+
+    close() {
+      this.$refs.novncConsole.disconnect();
+    },
+
+    update({ key, pos }) {
+      this.keysRecord.splice(pos, this.keysRecord.length - pos, key);
+    },
+
+    // Send function key, e.g. ALT + F
+    sendKeys() {
+      this.keysRecord.forEach((key) => {
+        this.$refs.novncConsole.sendKey(this.allKeys[key].value, key, true);
+      });
+
+      this.keysRecord.reverse().forEach((key) => {
+        this.$refs.novncConsole.sendKey(this.allKeys[key].value, key, false);
+      });
+
+      this.$refs.popover.isOpen = false;
+      this.keysRecord = [];
+    },
+
+    sendCustomKeys(keys) {
+      const keyList = [].concat(keys);
+
+      keyList.forEach((K) => {
+        this.$refs.novncConsole.sendKey(KeyboardUtil.getKeysym(K), KeyboardUtil.getKeycode(K), true);
+      });
+
+      keyList.reverse().forEach((K) => {
+        this.$refs.novncConsole.sendKey(KeyboardUtil.getKeysym(K), KeyboardUtil.getKeycode(K), false);
+      });
+    },
+
+    softReboot() {
+      this.vmResource.softrebootVM();
+    },
+
+    showKeysModal() {
+      this.renderKeysModal = true;
+      this.$nextTick(() => {
+        this.$refs.keysModal.show();
+      });
+    },
+
+    hideKeysModal() {
+      this.renderKeysModal = false;
+    },
+  }
+};
+</script>
+
+<template>
+  <div id="app">
+    <div class="vm-console">
+      <div class="combination-keys">
+        <v-popover
+          ref="popover"
+          placement="top"
+          trigger="click"
+          :container="false"
+          @auto-hide="keysRecord = []"
+        >
+          <button class="btn btn-sm bg-primary">
+            {{ t("harvester.virtualMachine.detail.console.shortcutKeys") }}
+          </button>
+
+          <template v-slot:popover>
+            <novnc-console-item :items="keymap" :path="keysRecord" :pos="0" @update="update" @send-keys="sendKeys" />
+          </template>
+        </v-popover>
+
+        <button v-if="hasSoftRebootAction" class="btn btn-sm bg-primary" @click="softReboot">
+          {{ t("harvester.action.softreboot") }}
+        </button>
+
+        <v-popover
+          v-if="!hideCustomKeysBar"
+          ref="customKeyPopover"
+          placement="top"
+          trigger="click"
+          :container="false"
+        >
+          <button class="btn btn-sm bg-primary">
+            {{ t("harvester.virtualMachine.detail.console.customShortcutKeys") }}
+          </button>
+
+          <template v-slot:popover>
+            <div>
+              <button class="btn btn-sm bg-primary" @click="showKeysModal">
+                {{ t("harvester.virtualMachine.detail.console.management") }}
+              </button>
+            </div>
+
+            <hr>
+
+            <div v-for="(keys, index) in preferredShortcutKeys" :key="index" class="mb-5">
+              <button class="btn btn-sm bg-primary" @click="sendCustomKeys(keys.value)">
+                {{ keys.label }}
+              </button>
+            </div>
+          </template>
+        </v-popover>
+
+        <NovncConsoleCustomKeys v-if="renderKeysModal" ref="keysModal" :current-user="currentUser" @close="hideKeysModal" />
+      </div>
+      <NovncConsole v-if="url && !isDown" ref="novncConsole" :url="url" />
+      <p v-if="isDown">
+        {{ t("harvester.virtualMachine.detail.console.down") }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .vm-console {
+    height: 100%;
+    display: grid;
+    grid-template-rows: 30px auto;
+  }
+
+  .combination-keys {
+    background: rgb(40, 40, 40);
+  }
+</style>
diff --git a/pkg/harvester/components/settings/additional-ca.vue b/pkg/harvester/components/settings/additional-ca.vue
new file mode 100644
index 00000000..af1123ac
--- /dev/null
+++ b/pkg/harvester/components/settings/additional-ca.vue
@@ -0,0 +1,36 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
+import { TextAreaAutoGrow } from '@components/Form/TextArea';
+
+export default {
+  name: 'HarvesterAdditionalCA',
+
+  components: { FileSelector, TextAreaAutoGrow },
+
+  mixins: [CreateEditView],
+
+  methods: { onKeySelected: createOnSelected('value.value') },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div class="col span-12">
+        <FileSelector
+          class="btn btn-sm bg-primary mb-10"
+          :label="t('generic.readFromFile')"
+          @selected="onKeySelected"
+        />
+
+        <div>
+          <TextAreaAutoGrow
+            v-model="value.value"
+            :min-height="254"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/components/settings/auto-rotate-rke2-certs.vue b/pkg/harvester/components/settings/auto-rotate-rke2-certs.vue
new file mode 100644
index 00000000..8bce9dba
--- /dev/null
+++ b/pkg/harvester/components/settings/auto-rotate-rke2-certs.vue
@@ -0,0 +1,85 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { RadioGroup } from '@components/Form/Radio';
+import UnitInput from '@shell/components/form/UnitInput';
+
+export default {
+  name: 'HarvesterAutoRotateRKE2Certs',
+
+  components: { RadioGroup, UnitInput },
+
+  mixins: [CreateEditView],
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parseDefaultValue = JSON.parse(this.value.default);
+    }
+
+    return { parseDefaultValue };
+  },
+
+  created() {
+    this.update();
+  },
+
+  methods: {
+    update() {
+      const value = JSON.stringify(this.parseDefaultValue);
+
+      this.$set(this.value, 'value', value);
+    }
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        const parseDefaultValue = JSON.parse(neu.value);
+
+        this.$set(this, 'parseDefaultValue', parseDefaultValue);
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="row">
+    <div class="col span-12">
+      <RadioGroup
+        v-model="parseDefaultValue.enable"
+        class="mb-20"
+        name="model"
+        :options="[true,false]"
+        :labels="[t('generic.enabled'), t('generic.disabled')]"
+        @input="update"
+      />
+      <UnitInput
+        v-if="parseDefaultValue.enable"
+        v-model="parseDefaultValue.expiringInHours"
+        v-int-number
+        class="mb-20"
+        :min="1"
+        :max="8759"
+        :required="true"
+        :suffix="parseDefaultValue.expiringInHours === 1 ? 'Hour' : 'Hours'"
+        :label="t('harvester.setting.autoRotateRKE2Certs.expiringInHours')"
+        :mode="mode"
+        @input="update"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/components/settings/backup-target.vue b/pkg/harvester/components/settings/backup-target.vue
new file mode 100644
index 00000000..d43da9b1
--- /dev/null
+++ b/pkg/harvester/components/settings/backup-target.vue
@@ -0,0 +1,199 @@
+<script>
+import Tip from '@shell/components/Tip';
+import { HCI_SETTING } from '../../config/settings';
+import Password from '@shell/components/form/Password';
+import MessageLink from '@shell/components/MessageLink';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  name: 'HarvesterEditBackupTarget',
+
+  components: {
+    LabeledInput, LabeledSelect, Tip, Password, MessageLink
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parseDefaultValue = { type: '', endpoint: '' };
+    }
+
+    if (!parseDefaultValue.type) {
+      parseDefaultValue.type = 's3';
+    }
+
+    return {
+      parseDefaultValue,
+      errors: []
+    };
+  },
+
+  computed: {
+    typeOption() {
+      return [{
+        value: 'nfs',
+        label: 'NFS'
+      }, {
+        value: 's3',
+        label: 'S3'
+      }];
+    },
+
+    virtualHostedStyleType() {
+      return [{
+        value: true,
+        label: 'True'
+      }, {
+        value: false,
+        label: 'False'
+      }];
+    },
+
+    isS3() {
+      return this.parseDefaultValue.type === 's3';
+    },
+
+    endpointPlaceholder() {
+      return this.isS3 ? '' : 'nfs://server:/path/';
+    },
+
+    toCA() {
+      return `${ HCI_SETTING.ADDITIONAL_CA }?mode=edit`;
+    }
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        let parseDefaultValue;
+
+        try {
+          parseDefaultValue = JSON.parse(neu.value);
+        } catch (err) {
+          parseDefaultValue = { type: '', endpoint: '' };
+        }
+
+        this.$set(this, 'parseDefaultValue', parseDefaultValue);
+        this.update();
+      },
+      deep: true
+    }
+  },
+
+  created() {
+    this.update();
+  },
+
+  methods: {
+    update() {
+      if (!this.isS3) {
+        delete this.parseDefaultValue.accessKeyId;
+        delete this.parseDefaultValue.secretAccessKey;
+        delete this.parseDefaultValue.bucketName;
+        delete this.parseDefaultValue.bucketRegion;
+        delete this.parseDefaultValue.virtualHostedStyle;
+        delete this.parseDefaultValue.cert;
+      }
+
+      const value = JSON.stringify(this.parseDefaultValue);
+
+      if (!this.parseDefaultValue.type) {
+        this.$delete(this.value, 'value');
+      } else {
+        this.$set(this.value, 'value', value);
+      }
+    },
+
+    useDefault() {
+      const parseDefaultValue = { type: '', endpoint: '' };
+
+      this.$set(this, 'parseDefaultValue', parseDefaultValue);
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="row" @input="update">
+    <div class="col span-12">
+      <LabeledSelect v-model="parseDefaultValue.type" class="mb-20" :label="t('harvester.fields.type')" :options="typeOption" @input="update" />
+
+      <LabeledInput v-model="parseDefaultValue.endpoint" class="mb-5" :placeholder="endpointPlaceholder" :mode="mode" label="Endpoint" />
+      <Tip class="mb-20" icon="icon icon-info" :text="t('harvester.backup.backupTargetTip')" />
+
+      <template v-if="isS3">
+        <LabeledInput
+          v-model="parseDefaultValue.bucketName"
+          class="mb-20"
+          :mode="mode"
+          label="Bucket Name"
+          required
+        />
+
+        <LabeledInput
+          v-model="parseDefaultValue.bucketRegion"
+          class="mb-20"
+          :mode="mode"
+          label="Bucket Region"
+          required
+        />
+
+        <LabeledInput
+          v-model="parseDefaultValue.accessKeyId"
+          :placeholder="t('harvester.setting.placeholder.accessKeyId')"
+          class="mb-20"
+          :mode="mode"
+          label="Access Key ID"
+          required
+        />
+
+        <Password
+          v-model="parseDefaultValue.secretAccessKey"
+          class="mb-20"
+          :mode="mode"
+          :placeholder="t('harvester.setting.placeholder.secretAccessKey')"
+          label="Secret Access Key"
+          required
+        />
+
+        <LabeledSelect v-model="parseDefaultValue.virtualHostedStyle" class="mb-20" label="Virtual Hosted-Style" :options="virtualHostedStyleType" @input="update" />
+
+        <div class="mb-20">
+          <Tip icon="icon icon-info">
+            <MessageLink
+              :to="toCA"
+              target="_blank"
+              prefix-label="harvester.setting.message.ca.prefix"
+              middle-label="harvester.setting.message.ca.middle"
+              suffix-label="harvester.setting.message.ca.suffix"
+            />
+          </Tip>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+p {
+  display: flex;
+  align-items: center;
+}
+.icon-h-question {
+  font-size: 24px;
+}
+.tip {
+  font-size: 15px;
+}
+
+.goCA {
+  margin: 0 3px;
+}
+</style>
diff --git a/pkg/harvester/components/settings/containerd-registry.vue b/pkg/harvester/components/settings/containerd-registry.vue
new file mode 100644
index 00000000..b8413ee3
--- /dev/null
+++ b/pkg/harvester/components/settings/containerd-registry.vue
@@ -0,0 +1,377 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { _EDIT } from '@shell/config/query-params';
+import { randomStr } from '@shell/utils/string';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import KeyValue from '@shell/components/form/KeyValue';
+import InfoBox from '@shell/components/InfoBox';
+import { clone } from '@shell/utils/object';
+
+export default {
+  name: 'HarvesterContainerdRegistry',
+
+  components: {
+    InfoBox,
+    KeyValue,
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+  },
+
+  data() {
+    const originMirror = {
+      Endpoints: [],
+      Rewrites:  {}
+    };
+
+    const originConfig = {
+      Auth: {
+        Username:      '',
+        Password:      '',
+        Auth:          '',
+        IdentityToken: ''
+      },
+      TLS: { InsecureSkipVerify: false }
+    };
+
+    let originValue = {};
+    const baseValue = {
+      Mirrors: { '': clone(originMirror) },
+      Configs: {}
+    };
+
+    try {
+      originValue = JSON.parse(this.value.value);
+    } catch (error) {
+      originValue = baseValue;
+    }
+
+    if (!Object.keys(originValue).length) {
+      originValue = baseValue;
+    }
+
+    const _mirrors = originValue.Mirrors || {};
+    const _configs = originValue.Configs || {};
+    const mirrorsKeys = Object.keys(_mirrors);
+    const configsKeys = Object.keys(_configs);
+    const mirrors = mirrorsKeys.map((key) => {
+      return {
+        key,
+        value: originValue.Mirrors[key],
+        idx:   randomStr(5).toLowerCase()
+      };
+    });
+
+    const configs = configsKeys.map((key) => {
+      if (!originValue.Configs[key]?.Auth) {
+        originValue.Configs[key].Auth = originConfig.Auth;
+      }
+
+      return {
+        key,
+        value: originValue.Configs[key],
+        idx:   randomStr(5).toLowerCase()
+      };
+    });
+
+    return {
+      mirrors,
+      configs,
+      originMirror,
+      originConfig,
+      mirrorsKeys,
+      configsKeys,
+      errors: [],
+    };
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.willSave, 'willSave');
+    }
+  },
+
+  computed: {
+    insecureSkipVerifyOption() {
+      return [{
+        label: 'True',
+        value: true
+      }, {
+        label: 'False',
+        value: false
+      }];
+    },
+  },
+
+  methods: {
+    willSave() {
+      const errors = [];
+
+      if (this.value.value) {
+        try {
+          JSON.parse(this.value.value);
+
+          this.mirrors.forEach((mirror) => {
+            if (!mirror.key) {
+              errors.push(this.t('validation.required', { key: this.t('harvester.setting.containerdRegistry.mirrors.registryName') }, true));
+            }
+
+            if (mirror.value.Endpoints.length === 0) {
+              errors.push(this.t('validation.required', { key: this.t('harvester.setting.containerdRegistry.mirrors.endpoints') }, true));
+            }
+          });
+
+          this.configs.forEach((config) => {
+            if (!config.key) {
+              errors.push(this.t('validation.required', { key: this.t('harvester.setting.containerdRegistry.configs.registryEDQNorIP') }, true));
+            }
+          });
+        } catch (e) {
+
+        }
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      } else {
+        return Promise.resolve();
+      }
+    },
+
+    update() {
+      const _mirrors = {};
+      const _configs = {};
+
+      this.mirrors.forEach((mirror) => {
+        _mirrors[mirror.key] = mirror.value;
+      });
+
+      this.configs.forEach((config) => {
+        _configs[config.key] = config.value;
+      });
+
+      const out = {
+        Mirrors: _mirrors,
+        Configs: _configs
+      };
+
+      if (!Object.keys(_mirrors).length) {
+        delete out.Mirrors;
+      }
+
+      if (!Object.keys(_configs).length) {
+        delete out.Configs;
+      }
+
+      const value = Object.keys(out).length ? JSON.stringify(out) : '';
+
+      this.$set(this.value, 'value', value);
+    },
+
+    addMirror() {
+      this.mirrors.push({
+        key: '', value: clone(this.originMirror), idx: randomStr(5).toLowerCase()
+      });
+      this.update();
+    },
+
+    addConfig() {
+      this.configs.push({
+        key: '', value: clone(this.originConfig), idx: randomStr(5).toLowerCase()
+      });
+      this.update();
+    },
+
+    remove(type, idx) {
+      this[type].splice(idx, 1);
+      this.update();
+    }
+  },
+
+  watch: {
+    value: {
+      handler(value) {
+        if (!value.value) { // useDefaultVale
+          this.$set(this, 'mirrors', []);
+          this.$set(this, 'configs', []);
+          this.update();
+        }
+      },
+      deep: true,
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <h3>{{ t('harvester.setting.containerdRegistry.mirrors.mirrors') }}</h3>
+    <div>
+      <InfoBox v-for="mirror, idx in mirrors" :key="mirror.idx" class="box">
+        <button type="button" class="role-link btn btn-sm remove" @click="remove('mirrors', idx)">
+          <i class="icon icon-2x icon-x" />
+        </button>
+
+        <div class="row mb-20">
+          <div class="col span-12">
+            <LabeledInput
+              v-model="mirror.key"
+              :mode="mode"
+              required
+              label-key="harvester.setting.containerdRegistry.mirrors.registryName"
+              @keydown.native.enter.prevent="()=>{}"
+              @input="update"
+            />
+          </div>
+        </div>
+
+        <div class="mb-20">
+          <LabeledSelect
+            :key="mirror.idx"
+            v-model="mirror.value.Endpoints"
+            :mode="mode"
+            required
+            label-key="harvester.setting.containerdRegistry.mirrors.endpoints"
+            :multiple="true"
+            :taggable="true"
+            :searchable="true"
+            :options="[]"
+            @keydown.native.enter.prevent="()=>{}"
+            @input="update"
+          />
+        </div>
+
+        <div class="row mb-20">
+          <KeyValue
+            v-model="mirror.value.Rewrites"
+            :add-label="t('harvester.setting.containerdRegistry.mirrors.rewrite.addRewrite')"
+            :mode="mode"
+            :title="t('harvester.setting.containerdRegistry.mirrors.rewrite.rewrite')"
+            :read-allowed="false"
+            :value-can-be-empty="true"
+            @keydown.native.enter.prevent="()=>{}"
+            @input="update"
+          />
+        </div>
+      </infobox>
+    </div>
+
+    <button class="btn btn-sm role-primary" @click.self="addMirror">
+      {{ t('harvester.setting.containerdRegistry.mirrors.addMirror') }}
+    </button>
+
+    <hr class="divider mt-20 mb-20" />
+
+    <h3>{{ t('harvester.setting.containerdRegistry.configs.configs') }}</h3>
+    <div>
+      <InfoBox v-for="config, idx in configs" :key="config.idx" class="box">
+        <button type="button" class="role-link btn btn-sm remove" @click="remove('configs', idx)">
+          <i class="icon icon-2x icon-x" />
+        </button>
+
+        <div class="row mb-20">
+          <div class="col span-12">
+            <div class="col span-12">
+              <LabeledInput
+                v-model="config.key"
+                :mode="mode"
+                :placeholder="t('harvester.setting.containerdRegistry.configs.registryPlaceholder')"
+                label-key="harvester.setting.containerdRegistry.configs.registryEDQNorIP"
+                @input="update"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="config.value.Auth.Username"
+              :mode="mode"
+              label-key="harvester.setting.containerdRegistry.configs.username"
+              @input="update"
+            />
+          </div>
+
+          <div class="col span-6">
+            <LabeledInput
+              v-model="config.value.Auth.Password"
+              :mode="mode"
+              label-key="harvester.setting.containerdRegistry.configs.password"
+              @input="update"
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="config.value.Auth.Auth"
+              :mode="mode"
+              type="multiline"
+              :min-height="150"
+              label-key="harvester.setting.containerdRegistry.configs.auth"
+              @input="update"
+            />
+          </div>
+
+          <div class="col span-6">
+            <LabeledInput
+              v-model="config.value.Auth.IdentityToken"
+              :mode="mode"
+              type="multiline"
+              :min-height="150"
+              label-key="harvester.setting.containerdRegistry.configs.identityToken"
+              @input="update"
+            />
+          </div>
+        </div>
+
+        <div class="row">
+          <LabeledSelect
+            v-model="config.value.TLS.InsecureSkipVerify"
+            :mode="mode"
+            label-key="harvester.setting.containerdRegistry.configs.insecureSkipVerify"
+            :options="insecureSkipVerifyOption"
+            @input="update"
+          />
+        </div>
+      </infobox>
+
+      <button class="btn btn-sm role-primary" @click="addConfig">
+        {{ t('harvester.setting.containerdRegistry.configs.addConfig') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  position: relative;
+  padding-top: 40px;
+}
+.remove {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 0px;
+}
+</style>
diff --git a/pkg/harvester/components/settings/csi-driver-config.vue b/pkg/harvester/components/settings/csi-driver-config.vue
new file mode 100644
index 00000000..02638fdd
--- /dev/null
+++ b/pkg/harvester/components/settings/csi-driver-config.vue
@@ -0,0 +1,249 @@
+<script>
+import { _EDIT } from '@shell/config/query-params';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import InfoBox from '@shell/components/InfoBox';
+import { CSI_DRIVER, VOLUME_SNAPSHOT_CLASS } from '../../types';
+import { allHash } from '@shell/utils/promise';
+
+const LONGHORN_DRIVER = 'driver.longhorn.io';
+
+export default {
+  name: 'HarvesterCsiDriver',
+
+  components: {
+    InfoBox,
+    LabeledSelect,
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      csiDrivers:          this.$store.dispatch(`${ inStore }/findAll`, { type: CSI_DRIVER }),
+      volumeSnapshotClass: this.$store.dispatch(`${ inStore }/findAll`, { type: VOLUME_SNAPSHOT_CLASS })
+    };
+
+    await allHash(hash);
+  },
+
+  data() {
+    const initValue = this.value.value || this.value.default;
+    const configArr = this.parseValue(initValue);
+
+    return { configArr };
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.willSave, 'willSave');
+    }
+  },
+
+  computed: {
+    provisioners() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const csiDrivers = this.$store.getters[`${ inStore }/all`](CSI_DRIVER) || [];
+
+      return csiDrivers.filter((provisioner) => {
+        return !this.configArr.map(config => config.key).includes(provisioner.name);
+      }).map((provisioner) => {
+        return provisioner.name;
+      });
+    },
+
+    disableAdd() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const csiDrivers = this.$store.getters[`${ inStore }/all`](CSI_DRIVER) || [];
+
+      return this.configArr.length >= csiDrivers.length;
+    }
+  },
+
+  methods: {
+    getVolumeSnapshotOptions(provisioner) {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const volumeSnapshotClass = this.$store.getters[`${ inStore }/all`](VOLUME_SNAPSHOT_CLASS) || [];
+
+      return volumeSnapshotClass.filter((snapshot) => {
+        return snapshot.driver === provisioner;
+      }).map((snapshot) => {
+        return {
+          label: snapshot.name,
+          value: snapshot.name
+        };
+      });
+    },
+
+    parseValue(value) {
+      const out = [];
+      let csiConfigJson = {};
+
+      try {
+        csiConfigJson = JSON.parse(value);
+      } catch (e) {
+        new Error('json error');
+      }
+
+      for (const [key, value] of Object.entries(csiConfigJson)) {
+        out.push({
+          key,
+          value,
+        });
+      }
+
+      return out;
+    },
+
+    update() {
+      const out = {};
+
+      this.configArr.map((config) => {
+        out[config.key] = config.value;
+      });
+
+      const value = this.configArr.length ? JSON.stringify(out) : '';
+
+      this.$set(this.value, 'value', value);
+    },
+
+    willSave() {
+      this.update();
+      const errors = [];
+
+      try {
+        this.configArr.forEach((config) => {
+          if (!config.key) {
+            errors.push(this.t('validation.required', { key: this.t('harvester.setting.csiDriverConfig.provisioner') }, true));
+          }
+
+          if (!config.value.volumeSnapshotClassName) {
+            errors.push(this.t('validation.required', { key: this.t('harvester.setting.csiDriverConfig.volumeSnapshotClassName') }, true));
+          }
+
+          if (!config.value.backupVolumeSnapshotClassName) {
+            errors.push(this.t('validation.required', { key: this.t('harvester.setting.csiDriverConfig.backupVolumeSnapshotClassName') }, true));
+          }
+        });
+      } catch (e) {
+
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      } else {
+        return Promise.resolve();
+      }
+    },
+
+    remove(idx) {
+      this.configArr.splice(idx, 1);
+    },
+
+    disableEdit(driver) {
+      return driver === LONGHORN_DRIVER;
+    },
+
+    add() {
+      this.configArr.push({
+        key:   '',
+        value: { volumeSnapshotClassName: '', backupVolumeSnapshotClassName: '' }
+      });
+    },
+
+    useDefault() {
+      const configArr = this.parseValue(this.value.default);
+
+      this.$set(this, 'configArr', configArr);
+      this.update();
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <InfoBox v-for="(driver, idx) in configArr" :key="driver.key" class="box">
+      <button :disabled="disableEdit(driver.key)" type="button" class="role-link btn btn-sm remove" @click="remove(idx)">
+        <i class="icon icon-x" />
+      </button>
+
+      <div class="row">
+        <div class="col span-4">
+          <LabeledSelect
+            v-model="driver.key"
+            :mode="mode"
+            required
+            :disabled="disableEdit(driver.key)"
+            label-key="harvester.setting.csiDriverConfig.provisioner"
+            :searchable="true"
+            :options="provisioners"
+            @keydown.native.enter.prevent="()=>{}"
+            @input="update"
+          />
+        </div>
+
+        <div class="col span-4">
+          <LabeledSelect
+            v-model="driver.value.volumeSnapshotClassName"
+            :mode="mode"
+            required
+            :disabled="disableEdit(driver.key)"
+            :options="getVolumeSnapshotOptions(driver.key)"
+            :label="t('harvester.setting.csiDriverConfig.volumeSnapshotClassName')"
+            @keydown.native.enter.prevent="()=>{}"
+            @input="update"
+          />
+        </div>
+
+        <div class="col span-4">
+          <LabeledSelect
+            v-model="driver.value.backupVolumeSnapshotClassName"
+            :mode="mode"
+            required
+            :disabled="disableEdit(driver.key)"
+            :options="getVolumeSnapshotOptions(driver.key)"
+            :label="t('harvester.setting.csiDriverConfig.backupVolumeSnapshotClassName')"
+            @keydown.native.enter.prevent="()=>{}"
+            @input="update"
+          />
+        </div>
+      </div>
+    </infobox>
+
+    <button class="btn btn-sm role-primary" :disabled="disableAdd" @click.self="add">
+      {{ t('generic.add') }}
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  position: relative;
+  padding-top: 40px;
+}
+.remove {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 0px;
+}
+</style>
diff --git a/pkg/harvester/components/settings/default-vm-termination-grace-period-seconds.vue b/pkg/harvester/components/settings/default-vm-termination-grace-period-seconds.vue
new file mode 100644
index 00000000..22812ca9
--- /dev/null
+++ b/pkg/harvester/components/settings/default-vm-termination-grace-period-seconds.vue
@@ -0,0 +1,43 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import UnitInput from '@shell/components/form/UnitInput';
+
+export default {
+  name: 'DefaultVMTerminationGracePeriodSeconds',
+
+  components: { UnitInput },
+
+  mixins: [CreateEditView],
+
+  data() {
+    return { terminationGracePeriodSeconds: this.value.value || this.value.default };
+  },
+
+  methods: {
+    update() {
+      this.$set(this.value, 'value', String(this.terminationGracePeriodSeconds));
+    },
+
+    useDefault() {
+      this.$set(this, 'terminationGracePeriodSeconds', Number(this.value.default));
+      this.update();
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="row"
+  >
+    <div class="col span-12">
+      <UnitInput
+        v-model="terminationGracePeriodSeconds"
+        :suffix="terminationGracePeriodSeconds === 1 ? 'Second' : 'Seconds'"
+        :label="t('harvester.virtualMachine.terminationGracePeriodSeconds.label')"
+        :mode="mode"
+        @input="update"
+      />
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/components/settings/http-proxy.vue b/pkg/harvester/components/settings/http-proxy.vue
new file mode 100644
index 00000000..f3b91262
--- /dev/null
+++ b/pkg/harvester/components/settings/http-proxy.vue
@@ -0,0 +1,87 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+import { Banner } from '@components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export default {
+  name: 'HarvesterHttpProxy',
+
+  components: { Banner, LabeledInput },
+
+  mixins: [CreateEditView],
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parseDefaultValue = JSON.parse(this.value.default);
+    }
+
+    return {
+      parseDefaultValue,
+      errors: []
+    };
+  },
+
+  created() {
+    this.update();
+  },
+
+  methods: {
+    update() {
+      const value = JSON.stringify(this.parseDefaultValue);
+
+      this.$set(this.value, 'value', value);
+    }
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        const parseDefaultValue = JSON.parse(neu.value);
+
+        this.$set(this, 'parseDefaultValue', parseDefaultValue);
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <Banner color="warning">
+      <t k="harvester.setting.httpProxy.warning" :raw="true" />
+    </Banner>
+
+    <div class="row" @input="update">
+      <div class="col span-12">
+        <template>
+          <LabeledInput
+            v-model="parseDefaultValue.httpProxy"
+            class="mb-20"
+            :mode="mode"
+            label="http-proxy"
+          />
+
+          <LabeledInput
+            v-model="parseDefaultValue.httpsProxy"
+            class="mb-20"
+            :mode="mode"
+            label="https-proxy"
+          />
+
+          <LabeledInput
+            v-model="parseDefaultValue.noProxy"
+            class="mb-20"
+            :mode="mode"
+            label="no-proxy"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/components/settings/ntp-servers.vue b/pkg/harvester/components/settings/ntp-servers.vue
new file mode 100644
index 00000000..9dbde7c4
--- /dev/null
+++ b/pkg/harvester/components/settings/ntp-servers.vue
@@ -0,0 +1,73 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+
+export default {
+  name: 'HarvesterNtpServersConfig',
+
+  components: { ArrayList },
+
+  mixins: [CreateEditView],
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parseDefaultValue = { ntpServers: [] };
+    }
+
+    return { parseDefaultValue };
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        let parseDefaultValue;
+
+        try {
+          parseDefaultValue = JSON.parse(neu.value);
+        } catch (err) {
+          parseDefaultValue = { ntpServers: [] };
+        }
+
+        this.$set(this, 'parseDefaultValue', parseDefaultValue);
+        this.update();
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+    useDefault() {
+      const parseDefaultValue = { ntpServers: [] };
+
+      this.$set(this, 'parseDefaultValue', parseDefaultValue);
+    },
+
+    update() {
+      const value = JSON.stringify(this.parseDefaultValue);
+
+      this.$set(this.value, 'value', value);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="row">
+    <div class="col span-12">
+      <template>
+        <ArrayList
+          v-model="parseDefaultValue.ntpServers"
+          :title="t('harvester.host.ntp.label')"
+          :protip="t('harvester.host.ntp.tips')"
+          :value-placeholder="t('harvester.host.ntp.placeholder')"
+          :mode="mode"
+          @input="update"
+        />
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/components/settings/overcommit-config.vue b/pkg/harvester/components/settings/overcommit-config.vue
new file mode 100644
index 00000000..8028e398
--- /dev/null
+++ b/pkg/harvester/components/settings/overcommit-config.vue
@@ -0,0 +1,94 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import UnitInput from '@shell/components/form/UnitInput';
+
+export default {
+  name: 'HarvesterOvercommitConfig',
+
+  components: { UnitInput },
+
+  mixins: [CreateEditView],
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parseDefaultValue = JSON.parse(this.value.default);
+    }
+
+    return {
+      parseDefaultValue,
+      errors: []
+    };
+  },
+
+  created() {
+    this.update();
+  },
+
+  methods: {
+    update() {
+      const value = JSON.stringify(this.parseDefaultValue);
+
+      this.$set(this.value, 'value', value);
+    }
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        const parseDefaultValue = JSON.parse(neu.value);
+
+        this.$set(this, 'parseDefaultValue', parseDefaultValue);
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="row">
+    <div class="col span-12">
+      <template>
+        <UnitInput
+          v-model="parseDefaultValue.cpu"
+          v-int-number
+          label-key="harvester.generic.cpu"
+          suffix="%"
+          :delay="0"
+          required
+          :mode="mode"
+          class="mb-20"
+          @input="update"
+        />
+
+        <UnitInput
+          v-model="parseDefaultValue.memory"
+          v-int-number
+          label-key="harvester.generic.memory"
+          suffix="%"
+          :delay="0"
+          required
+          :mode="mode"
+          class="mb-20"
+          @input="update"
+        />
+
+        <UnitInput
+          v-model="parseDefaultValue.storage"
+          v-int-number
+          label-key="harvester.generic.storage"
+          suffix="%"
+          :delay="0"
+          required
+          :mode="mode"
+          class="mb-20"
+          @input="update"
+        />
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/components/settings/ssl-certificates.vue b/pkg/harvester/components/settings/ssl-certificates.vue
new file mode 100644
index 00000000..d55c123c
--- /dev/null
+++ b/pkg/harvester/components/settings/ssl-certificates.vue
@@ -0,0 +1,117 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import FileSelector from '@shell/components/form/FileSelector';
+
+export default {
+  name: 'HarvesterSSLCertificates',
+
+  components: { FileSelector },
+
+  mixins: [CreateEditView],
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parseDefaultValue = JSON.parse(this.value.default);
+    }
+
+    return {
+      parseDefaultValue,
+      caFileName:                '',
+      publicCertificateFileName: '',
+      privateKeyFileName:        ''
+    };
+  },
+
+  methods: {
+    onKeySelectedCa(type, file) {
+      const { name, value } = file;
+
+      this.$set(this.parseDefaultValue, type, value);
+      this.$set(this, `${ type }FileName`, name);
+      const _value = JSON.stringify(this.parseDefaultValue);
+
+      this.$set(this.value, 'value', _value);
+    }
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        const parseDefaultValue = JSON.parse(neu.value);
+
+        this.$set(this, 'parseDefaultValue', parseDefaultValue);
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div class="col span-12">
+        <div class="mb-10">
+          {{ t('harvester.setting.sslCertificates.publicCertificate') }}
+        </div>
+
+        <div class="chooseFile">
+          <FileSelector
+            :include-file-name="true"
+            class="btn btn-sm bg-primary mr-20"
+            label="Choose File"
+            @selected="onKeySelectedCa('publicCertificate', $event)"
+          />
+          <span :class="{ 'text-muted': !publicCertificateFileName }">{{ publicCertificateFileName ? publicCertificateFileName : t('harvester.generic.noFileChosen') }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div class="col span-12">
+        <div class="mb-10">
+          {{ t('harvester.setting.sslCertificates.privateKey') }}
+        </div>
+
+        <div class="chooseFile">
+          <FileSelector
+            :include-file-name="true"
+            class="btn btn-sm bg-primary mr-20"
+            label="Choose File"
+            @selected="onKeySelectedCa('privateKey', $event)"
+          />
+          <span :class="{ 'text-muted': !privateKeyFileName }">{{ privateKeyFileName ? privateKeyFileName : t('harvester.generic.noFileChosen') }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div class="col span-12">
+        <div class="mb-10">
+          {{ t('harvester.setting.sslCertificates.ca') }}
+        </div>
+
+        <div class="chooseFile">
+          <FileSelector
+            :include-file-name="true"
+            class="btn btn-sm bg-primary mr-20"
+            label="Choose File"
+            @selected="onKeySelectedCa('ca', $event)"
+          />
+          <span :class="{ 'text-muted': !caFileName }">{{ caFileName ? caFileName : t('harvester.generic.noFileChosen') }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chooseFile {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/pkg/harvester/components/settings/ssl-parameters.vue b/pkg/harvester/components/settings/ssl-parameters.vue
new file mode 100644
index 00000000..659ac702
--- /dev/null
+++ b/pkg/harvester/components/settings/ssl-parameters.vue
@@ -0,0 +1,161 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { _EDIT } from '@shell/config/query-params';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  name: 'HarvesterSslParameters',
+
+  components: {
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+  },
+
+  data() {
+    let parsedDefaultValue = {};
+
+    try {
+      parsedDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parsedDefaultValue = JSON.parse(this.value.default);
+    }
+
+    const protocols = parsedDefaultValue.protocols && (parsedDefaultValue.protocols || '').split(' ');
+
+    return {
+      parsedDefaultValue: {
+        protocols,
+        ciphers: parsedDefaultValue.ciphers,
+      },
+    };
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.willSave, 'willSave');
+    }
+  },
+
+  computed: {
+    protocolOptions() {
+      return [{
+        label: 'TLSv1.3',
+        value: 'TLSv1.3',
+      }, {
+        label: 'TLSv1.2',
+        value: 'TLSv1.2',
+      }, {
+        label: `TLSv1.1 (${ this.t('generic.deprecated') })`,
+        value: 'TLSv1.1',
+      }, {
+        label: `TLSv1 (${ this.t('generic.deprecated') })`,
+        value: 'TLSv1',
+      }, {
+        label: `SSLv3 (${ this.t('generic.deprecated') })`,
+        value: 'SSLv3',
+      }, {
+        label: `SSLv2 (${ this.t('generic.deprecated') })`,
+        value: 'SSLv2',
+      }];
+    },
+  },
+
+  methods: {
+    update() {
+      const out = {
+        protocols: (this.parsedDefaultValue.protocols || []).join(' '),
+        ciphers:   this.parsedDefaultValue.ciphers,
+      };
+
+      const value = JSON.stringify(out);
+
+      this.$set(this.value, 'value', value);
+    },
+
+    willSave() {
+      const errors = [];
+
+      const ciphers = this.parsedDefaultValue.ciphers;
+      const protocols = this.parsedDefaultValue.protocols || [];
+
+      if (ciphers && protocols.length === 0) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.sslParameters.protocols.label') }, true));
+      }
+
+      if (!ciphers && protocols.length > 0) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.sslParameters.ciphers.label') }, true));
+      }
+
+      const regex = /^(:?[A-Z0-9]+(?:-[A-Z0-9]+)+)+$/gm;
+
+      if (ciphers && (!ciphers.match(regex) || ciphers.startsWith(':'))) {
+        errors.push(this.t('validation.invalid', { key: this.t('harvester.sslParameters.ciphers.label') }, true));
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      } else {
+        return Promise.resolve();
+      }
+    },
+  },
+
+  watch: {
+    'value.value': {
+      handler(value) {
+        if (value === this.value.default) {
+          this.parsedDefaultValue.protocols = [];
+          this.parsedDefaultValue.ciphers = '';
+        }
+      },
+      deep: true,
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mt-10">
+      <div class="col span-12">
+        <LabeledSelect
+          v-model="parsedDefaultValue.protocols"
+          :mode="mode"
+          label-key="harvester.sslParameters.protocols.label"
+          :multiple="true"
+          :options="protocolOptions"
+          @input="update"
+        />
+      </div>
+    </div>
+    <div class="row mt-20">
+      <div class="col span-12">
+        <LabeledInput
+          v-model="parsedDefaultValue.ciphers"
+          :mode="mode"
+          label-key="harvester.sslParameters.ciphers.label"
+          @input="update"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/components/settings/storage-network.vue b/pkg/harvester/components/settings/storage-network.vue
new file mode 100644
index 00000000..81af5136
--- /dev/null
+++ b/pkg/harvester/components/settings/storage-network.vue
@@ -0,0 +1,240 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { RadioGroup } from '@components/Form/Radio';
+import ArrayList from '@shell/components/form/ArrayList';
+import { isValidCIDR } from '@shell/utils/validators/cidr';
+import { _EDIT } from '@shell/config/query-params';
+import { Banner } from '@components/Banner';
+import Tip from '@shell/components/Tip';
+import { HCI } from '../../types';
+import { allHash } from '@shell/utils/promise';
+import { NODE } from '@shell/config/types';
+
+export default {
+  name: 'HarvesterEditStorageNetwork',
+
+  components: {
+    ArrayList,
+    Tip,
+    Banner,
+    LabeledInput,
+    LabeledSelect,
+    RadioGroup
+  },
+
+  props: {
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({
+      clusterNetworks: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK }),
+      vlanStatus:      this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VLAN_STATUS }),
+      nodes:           this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }),
+    });
+  },
+
+  data() {
+    let parsedDefaultValue = {};
+    let openVlan = false;
+
+    try {
+      parsedDefaultValue = JSON.parse(this.value.value);
+      openVlan = true;
+    } catch (error) {
+      parsedDefaultValue = {
+        vlan:           '',
+        clusterNetwork: '',
+        range:          '',
+        exclude:        []
+      };
+    }
+    const exclude = parsedDefaultValue?.exclude?.toString().split(',') || [];
+
+    return {
+      openVlan,
+      errors:          [],
+      exclude,
+      parsedDefaultValue,
+      defaultAddValue: ''
+    };
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.willSave, 'willSave');
+    }
+  },
+
+  computed: {
+    clusterNetworkOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const clusterNetworks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK) || [];
+
+      return clusterNetworks.map((n) => {
+        const disabled = !n.isReadyForStorageNetwork;
+
+        return {
+          label: disabled ? `${ n.id } (${ this.t('generic.notReady') })` : n.id,
+          value: n.id,
+          disabled,
+        };
+      });
+    },
+  },
+
+  methods: {
+    update() {
+      const exclude = this.exclude.filter(ip => ip);
+
+      if (Array.isArray(exclude) && exclude.length > 0) {
+        this.parsedDefaultValue.exclude = exclude;
+      } else {
+        delete this.parsedDefaultValue.exclude;
+      }
+
+      const valueString = JSON.stringify(this.parsedDefaultValue);
+
+      if (this.openVlan) {
+        this.$set(this.value, 'value', valueString);
+      } else {
+        this.$set(this.value, 'value', '');
+      }
+    },
+
+    willSave() {
+      this.update();
+      const errors = [];
+
+      if (this.openVlan) {
+        const valid = !!/^(?:(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\/([1-9]|[1-2]\d|3[0-2])$/.test(this.parsedDefaultValue.range);
+
+        if (!valid) {
+          errors.push(this.t('harvester.setting.storageNetwork.range.invalid', null, true));
+        }
+
+        if (!this.parsedDefaultValue.vlan) {
+          errors.push(this.t('validation.required', { key: this.t('harvester.setting.storageNetwork.vlan') }, true));
+        }
+
+        if (!this.parsedDefaultValue.clusterNetwork) {
+          errors.push(this.t('validation.required', { key: this.t('harvester.setting.storageNetwork.clusterNetwork') }, true));
+        }
+
+        if (this.exclude) {
+          const hasInvalidCIDR = this.exclude.find((cidr) => {
+            return !isValidCIDR(cidr);
+          });
+
+          if (hasInvalidCIDR) {
+            errors.push(this.t('harvester.setting.storageNetwork.exclude.invalid', null, true));
+          }
+        }
+      } else {
+        return Promise.resolve();
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      } else {
+        return Promise.resolve();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :class="mode"
+    @input="update"
+  >
+    <Banner color="warning">
+      <t k="harvester.setting.storageNetwork.warning" :raw="true" />
+    </Banner>
+
+    <RadioGroup
+      v-model="openVlan"
+      class="mb-20"
+      name="model"
+      :options="[true,false]"
+      :labels="[t('generic.enabled'), t('generic.disabled')]"
+      @input="update"
+    />
+
+    <div v-if="openVlan">
+      <LabeledInput
+        v-model.number="parsedDefaultValue.vlan"
+        class="mb-20"
+        :mode="mode"
+        required
+        label-key="harvester.setting.storageNetwork.vlan"
+      />
+
+      <LabeledSelect
+        v-model="parsedDefaultValue.clusterNetwork"
+        label-key="harvester.setting.storageNetwork.clusterNetwork"
+        class="mb-20"
+        required
+        :options="clusterNetworkOptions"
+        @input="update"
+      />
+
+      <LabeledInput
+        v-model="parsedDefaultValue.range"
+        class="mb-5"
+        :mode="mode"
+        required
+        :placeholder="t('harvester.setting.storageNetwork.range.placeholder')"
+        label-key="harvester.setting.storageNetwork.range.label"
+      />
+      <Tip class="mb-20" icon="icon icon-info" :text="t('harvester.setting.storageNetwork.tip')">
+        <t k="harvester.setting.storageNetwork.tip" :raw="true" />
+      </Tip>
+
+      <ArrayList
+        v-model="exclude"
+        :show-header="true"
+        :default-add-value="defaultAddValue"
+        :mode="mode"
+        :add-label="t('harvester.setting.storageNetwork.exclude.addIp')"
+        @input="update"
+      >
+        <template v-slot:column-headers>
+          <div class="box">
+            <div class="key">
+              {{ t('harvester.setting.storageNetwork.exclude.label') }}
+            </div>
+          </div>
+        </template>
+        <template v-slot:columns="scope">
+          <div class="key">
+            <input
+              v-model="scope.row.value"
+              :placeholder="t('harvester.setting.storageNetwork.exclude.placeholder')"
+              @input="update"
+            />
+          </div>
+        </template>
+      </ArrayList>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/components/settings/support-bundle-image.vue b/pkg/harvester/components/settings/support-bundle-image.vue
new file mode 100644
index 00000000..70cb4216
--- /dev/null
+++ b/pkg/harvester/components/settings/support-bundle-image.vue
@@ -0,0 +1,134 @@
+<script>
+import { _EDIT } from '@shell/config/query-params';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  name: 'HarvesterSupportBundleImage',
+
+  components: { LabeledInput, LabeledSelect },
+
+  props: {
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parseDefaultValue = JSON.parse(this.value.default);
+    }
+
+    return { parseDefaultValue };
+  },
+
+  created() {
+    this.update();
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.willSave, 'willSave');
+    }
+  },
+
+  computed: {
+    imagePolicyOptions() {
+      return [{
+        label: this.t('generic.imagePullPolicy.always'),
+        value: 'Always',
+      }, {
+        label: this.t('generic.imagePullPolicy.ifNotPresent'),
+        value: 'IfNotPresent',
+      }, {
+        label: this.t('generic.imagePullPolicy.never'),
+        value: 'Never'
+      }];
+    }
+  },
+
+  methods: {
+    update() {
+      const value = JSON.stringify(this.parseDefaultValue);
+
+      this.$set(this.value, 'value', value);
+    },
+
+    willSave() {
+      const errors = [];
+
+      if (!this.parseDefaultValue.repository) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.setting.supportBundleImage.repo') }, true));
+      }
+
+      if (!this.parseDefaultValue.tag) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.setting.supportBundleImage.tag') }, true));
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      } else {
+        return Promise.resolve();
+      }
+    },
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        const parseDefaultValue = JSON.parse(neu.value);
+
+        this.$set(this, 'parseDefaultValue', parseDefaultValue);
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="row" @input="update">
+    <div class="col span-12">
+      <template>
+        <LabeledInput
+          v-model="parseDefaultValue.repository"
+          class="mb-20"
+          :mode="mode"
+          required
+          label-key="harvester.setting.supportBundleImage.repo"
+        />
+
+        <LabeledInput
+          v-model="parseDefaultValue.tag"
+          class="mb-20"
+          :mode="mode"
+          required
+          label-key="harvester.setting.supportBundleImage.tag"
+        />
+
+        <LabeledSelect
+          v-model="parseDefaultValue.imagePullPolicy"
+          class="mb-20"
+          required
+          label-key="harvester.setting.supportBundleImage.imagePullPolicy"
+          :options="imagePolicyOptions"
+          @input="update"
+        />
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/components/settings/support-bundle-namespaces.vue b/pkg/harvester/components/settings/support-bundle-namespaces.vue
new file mode 100644
index 00000000..a42da9ba
--- /dev/null
+++ b/pkg/harvester/components/settings/support-bundle-namespaces.vue
@@ -0,0 +1,73 @@
+<script>
+import { NAMESPACE } from '@shell/config/types';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  name: 'HarvesterBundleNamespaces',
+
+  components: { LabeledSelect },
+
+  mixins: [CreateEditView],
+
+  async fetch() {
+    await this.$store.dispatch('harvester/findAll', { type: NAMESPACE });
+  },
+
+  data() {
+    let namespaces = [];
+    const namespacesStr = this.value?.value || this.value?.default || '';
+
+    if (namespacesStr) {
+      namespaces = namespacesStr.split(',');
+    }
+
+    return { namespaces };
+  },
+
+  computed: {
+    namespaceOptions() {
+      return this.$store.getters['harvester/all'](NAMESPACE).map((N) => {
+        return {
+          label: N.id,
+          value: N.id
+        };
+      });
+    }
+  },
+
+  methods: {
+    update() {
+      const namespaceStr = this.namespaces.join(',');
+
+      this.$set(this.value, 'value', namespaceStr);
+    }
+  },
+
+  watch: {
+    'value.value': {
+      handler(neu) {
+        if (neu === this.value.default || !neu) {
+          this.namespaces = [];
+        }
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="row">
+    <div class="col span-12">
+      <LabeledSelect
+        v-model="namespaces"
+        :multiple="true"
+        label-key="nameNsDescription.namespace.label"
+        :mode="mode"
+        :options="namespaceOptions"
+        @input="update"
+      />
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/components/settings/vm-force-reset-policy.vue b/pkg/harvester/components/settings/vm-force-reset-policy.vue
new file mode 100644
index 00000000..adefb315
--- /dev/null
+++ b/pkg/harvester/components/settings/vm-force-reset-policy.vue
@@ -0,0 +1,81 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+
+export default {
+  name: 'HarvesterVMForceDeletePolicy',
+
+  components: { LabeledInput, RadioGroup },
+
+  mixins: [CreateEditView],
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parseDefaultValue = JSON.parse(this.value.default);
+    }
+
+    return { parseDefaultValue };
+  },
+
+  created() {
+    this.update();
+  },
+
+  methods: {
+    update() {
+      const value = JSON.stringify(this.parseDefaultValue);
+
+      this.$set(this.value, 'value', value);
+    }
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        const parseDefaultValue = JSON.parse(neu.value);
+
+        this.$set(this, 'parseDefaultValue', parseDefaultValue);
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="row" @input="update">
+    <div class="col span-12">
+      <RadioGroup
+        v-model="parseDefaultValue.enable"
+        class="mb-20"
+        name="model"
+        :options="[true,false]"
+        :labels="[t('generic.enabled'), t('generic.disabled')]"
+        @input="update"
+      />
+
+      <LabeledInput
+        v-if="parseDefaultValue.enable"
+        v-model.number="parseDefaultValue.period"
+        v-int-number
+        class="mb-20"
+        :mode="mode"
+        label-key="harvester.setting.vmForceDeletionPolicy.period"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/config/types.js b/pkg/harvester/config/types.js
new file mode 100644
index 00000000..1a8c4973
--- /dev/null
+++ b/pkg/harvester/config/types.js
@@ -0,0 +1,4 @@
+export const BACKUP_TYPE = {
+  BACKUP:   'backup',
+  SNAPSHOT: 'snapshot'
+};
diff --git a/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostBasic.vue b/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostBasic.vue
new file mode 100644
index 00000000..3f7e86c6
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostBasic.vue
@@ -0,0 +1,331 @@
+<script>
+import LabelValue from '@shell/components/LabelValue';
+import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { LONGHORN, METRIC } from '@shell/config/types';
+import { Banner } from '@components/Banner';
+import HarvesterCPUUsed from '../../formatters/HarvesterCPUUsed';
+import HarvesterMemoryUsed from '../../formatters/HarvesterMemoryUsed';
+import HarvesterStorageUsed from '../../formatters/HarvesterStorageUsed';
+
+const COMPLETE = 'complete';
+const PROMOTE_RESTART = 'promoteRestart';
+const PROMOTE_SUCCEED = 'promoteSucceed';
+
+export default {
+  name: 'BasicNode',
+
+  components: {
+    Banner,
+    LabelValue,
+    HarvesterCPUUsed,
+    HarvesterMemoryUsed,
+    HarvesterStorageUsed,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    metrics: {
+      type:     Object,
+      required: false,
+      default:  () => {
+        return null;
+      }
+    },
+
+    mode: {
+      type:     String,
+      required: false,
+      default:  'view'
+    },
+  },
+
+  computed: {
+    customName() {
+      return this.value.metadata?.annotations?.[HCI_ANNOTATIONS.HOST_CUSTOM_NAME];
+    },
+
+    consoleUrl() {
+      const consoleUrl = this.value.metadata?.annotations?.[HCI_ANNOTATIONS.HOST_CONSOLE_URL];
+      let value = consoleUrl;
+
+      if (!consoleUrl) {
+        return '';
+      }
+
+      if (!consoleUrl.startsWith('http://') && !consoleUrl.startsWith('https://')) {
+        value = `http://${ consoleUrl }`;
+      }
+
+      return {
+        display: consoleUrl,
+        value
+      };
+    },
+
+    cpuTotal() {
+      let out = 0;
+
+      if (this.metrics) {
+        out = this.metrics.cpuCapacity;
+      }
+
+      return out;
+    },
+
+    cpuUsage() {
+      let out = 0;
+
+      if (this.metrics) {
+        out = this.metrics.cpuUsage;
+      }
+
+      return out;
+    },
+
+    memoryTotal() {
+      let out = 0;
+
+      if (this.metrics) {
+        out = this.metrics.memoryCapacity;
+      }
+
+      return out;
+    },
+
+    memoryUsage() {
+      let out = 0;
+
+      if (this.metrics) {
+        out = this.metrics.memoryUsage;
+      }
+
+      return out;
+    },
+
+    cpuUnits() {
+      return 'C';
+    },
+
+    memoryUnits() {
+      const exponent = exponentNeeded(this.memoryTotal, 1024);
+
+      return `${ UNITS[exponent] }iB`;
+    },
+
+    nodeType() {
+      if (this.value.isEtcd) {
+        return this.t('harvester.host.detail.etcd');
+      }
+
+      if (this.value.isMaster) {
+        return this.t('harvester.host.detail.management');
+      }
+
+      return this.t('harvester.host.detail.compute');
+    },
+
+    lastUpdateTime() {
+      return this.value.status?.conditions?.[0]?.lastHeartbeatTime;
+    },
+
+    nodeRoleState() {
+      if (!this.value.isEtcd) {
+        const promoteStatus = this.value.metadata?.annotations?.[HCI_ANNOTATIONS.PROMOTE_STATUS];
+
+        if (promoteStatus === COMPLETE) {
+          const isExistRoleStatus = this.value.metadata?.labels?.[HCI_ANNOTATIONS.NODE_ROLE_MASTER] !== undefined || this.value.metadata?.labels?.[HCI_ANNOTATIONS.NODE_ROLE_CONTROL_PLANE] !== undefined;
+
+          return this.t(`harvester.host.promote.${ isExistRoleStatus ? PROMOTE_SUCCEED : PROMOTE_RESTART }`);
+        }
+      }
+
+      return null;
+    },
+
+    hasMetricNodeSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/schemaFor`](METRIC.NODE);
+    },
+
+    hasLonghornSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/schemaFor`](LONGHORN.NODES);
+    },
+  },
+
+  methods: {
+    memoryFormatter(value) {
+      const exponent = exponentNeeded(this.memoryTotal, 1024);
+
+      const formatOptions = {
+        addSuffix:   false,
+        increment:   1024,
+        minExponent: exponent
+      };
+
+      return formatSi(value, formatOptions);
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="host-detail">
+    <Banner
+      v-if="value.isKVMDisable"
+      color="error"
+      label-key="harvester.host.detail.kvm.disableMessage"
+    />
+    <h3>{{ t('harvester.host.tabs.overview') }}</h3>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabelValue :name="t('harvester.host.detail.customName')" :value="customName" />
+      </div>
+      <div class="col span-6">
+        <LabelValue :name="t('harvester.host.detail.hostIP')" :value="value.internalIp" />
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabelValue :name="t('harvester.host.detail.os')" :value="value.status.nodeInfo.osImage" />
+      </div>
+      <div class="col span-6">
+        <div class="role">
+          <LabelValue :name="t('harvester.host.detail.role')">
+            <template #value>
+              {{ nodeType }}
+              <span
+                v-if="nodeRoleState"
+                class="text-warning ml-20"
+              >
+                {{ nodeRoleState }}
+              </span>
+            </template>
+          </LabelValue>
+        </div>
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabelValue :name="t('harvester.host.detail.create')" :value="value.metadata.creationTimestamp" />
+      </div>
+      <div class="col span-6">
+        <LabelValue :name="t('harvester.host.detail.update')" :value="lastUpdateTime" />
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabelValue :name="t('harvester.host.detail.consoleUrl')" :value="consoleUrl.value">
+          <a slot="value" :href="consoleUrl.value" target="_blank">{{ consoleUrl.display }}</a>
+        </LabelValue>
+      </div>
+    </div>
+
+    <div v-if="hasMetricNodeSchema">
+      <hr class="divider" />
+      <h3>{{ t('harvester.host.tabs.monitor') }}</h3>
+      <div class="row mb-20">
+        <div
+          class="col"
+          :class="{
+            'span-4': hasLonghornSchema,
+            'span-6': !hasLonghornSchema,
+          }"
+        >
+          <HarvesterCPUUsed
+            :row="value"
+            :resource-name="t('node.detail.glance.consumptionGauge.cpu')"
+            :show-used="true"
+          />
+        </div>
+        <div
+          class="col"
+          :class="{
+            'span-4': hasLonghornSchema,
+            'span-6': !hasLonghornSchema,
+          }"
+        >
+          <HarvesterMemoryUsed
+            :row="value"
+            :resource-name="t('node.detail.glance.consumptionGauge.memory')"
+            :show-used="true"
+          />
+        </div>
+        <div
+          v-if="hasLonghornSchema"
+          class="col span-4"
+        >
+          <HarvesterStorageUsed
+            :row="value"
+            :resource-name="t('harvester.host.detail.storage')"
+            :show-reserved="true"
+          />
+        </div>
+      </div>
+    </div>
+
+    <hr class="section-divider" />
+    <h3>{{ t('harvester.host.detail.more') }}</h3>
+    <div class="row mb-20">
+      <div class="col span-4">
+        <LabelValue :name="t('harvester.host.detail.uuid')" :value="value.status.nodeInfo.systemUUID" />
+      </div>
+
+      <div class="col span-4">
+        <LabelValue :name="t('harvester.host.detail.kernel')" :value="value.status.nodeInfo.kernelVersion" />
+      </div>
+
+      <div class="col span-4">
+        <LabelValue :name="t('harvester.host.detail.containerRuntime')" :value="value.status.nodeInfo.containerRuntimeVersion" />
+      </div>
+    </div>
+    <div
+      v-if="value.manufacturer || value.serialNumber || value.model"
+      class="row mb-20"
+    >
+      <div
+        v-if="value.manufacturer"
+        class="col span-4"
+      >
+        <LabelValue
+          :name="t('harvester.host.detail.manufacturer')"
+          :value="value.manufacturer"
+        />
+      </div>
+      <div
+        v-if="value.serialNumber"
+        class="col span-4"
+      >
+        <LabelValue
+          :name="t('harvester.host.detail.serialNumber')"
+          :value="value.serialNumber"
+        />
+      </div>
+      <div
+        v-if="value.model"
+        class="col span-4"
+      >
+        <LabelValue
+          :name="t('harvester.host.detail.model')"
+          :value="value.model"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.role {
+  display: flex;
+}
+</style>
diff --git a/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostDisk.vue b/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostDisk.vue
new file mode 100644
index 00000000..5692c856
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostDisk.vue
@@ -0,0 +1,214 @@
+<script>
+import Tag from '@shell/components/Tag';
+import LabelValue from '@shell/components/LabelValue';
+import { BadgeState } from '@components/BadgeState';
+import { Banner } from '@components/Banner';
+import HarvesterDisk from '../../mixins/harvester-disk';
+
+export default {
+  components: {
+    LabelValue,
+    BadgeState,
+    Banner,
+    Tag
+  },
+
+  mixins: [
+    HarvesterDisk,
+  ],
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+    disks: {
+      type:    Array,
+      default: () => [],
+    },
+    mode: {
+      type:    String,
+      default: 'edit',
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    allowSchedulingOptions() {
+      return [{
+        label: this.t('generic.enabled'),
+        value: true,
+      }, {
+        label: this.t('generic.disabled'),
+        value: false,
+      }];
+    },
+
+    evictionRequestedOptions() {
+      return [{
+        label: this.t('generic.yes'),
+        value: true,
+      }, {
+        label: this.t('generic.no'),
+        value: false,
+      }];
+    },
+
+    provisionPhase() {
+      return this.value?.blockDevice?.provisionPhase || {};
+    },
+
+    mountedMessage() {
+      const state = this.value?.blockDevice?.metadata?.state || {};
+
+      if (state?.error) {
+        return state?.message;
+      } else {
+        return '';
+      }
+    },
+  },
+  methods: {
+    update() {
+      this.$emit('input', this.value);
+    },
+
+    canEditPath(value) {
+      if (this.mountedMessage) {
+        return true;
+      }
+
+      if (value.isNew && !!value.originPath) {
+        return true;
+      }
+
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="disk" @input="update">
+    <Banner
+      v-if="mountedMessage"
+      color="error"
+      :label="mountedMessage"
+    />
+    <div v-if="!value.isNew">
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue
+            v-if="value.tags.length"
+            :name="t('harvester.host.disk.tags.label')"
+          >
+            <template #value>
+              <div class="mt-5">
+                <Tag v-for="(prop, key) in value.tags" :key="key + prop" class="mr-5">
+                  {{ prop }}
+                </Tag>
+              </div>
+            </template>
+          </LabelValue>
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col span-12">
+          <div class="pull-right">
+            {{ t('harvester.host.disk.conditions') }}:
+            <BadgeState
+              v-clean-tooltip="readyCondition.message"
+              :color="readyCondition.status === 'True' ? 'bg-success' : 'bg-error' "
+              :icon="readyCondition.status === 'True' ? 'icon-checkmark' : 'icon-warning' "
+              label="Ready"
+              class="mr-10 ml-10 state"
+            />
+            <BadgeState
+              v-clean-tooltip="schedulableCondition.message"
+              :color="schedulableCondition.status === 'True' ? 'bg-success' : 'bg-error' "
+              :icon="schedulableCondition.status === 'True' ? 'icon-checkmark' : 'icon-warning' "
+              label="Schedulable"
+              class="mr-10 state"
+            />
+            <BadgeState
+              v-if="provisionPhase.label"
+              :color="provisionPhase.color"
+              :icon="provisionPhase.icon"
+              :label="provisionPhase.label"
+              class="mr-10 state"
+            />
+          </div>
+        </div>
+      </div>
+      <div v-if="!value.isNew" class="row mt-30">
+        <div class="col span-4">
+          <LabelValue
+            :name="t('harvester.host.disk.storageAvailable.label')"
+            :value="value.storageAvailable"
+          />
+        </div>
+        <div class="col span-4">
+          <LabelValue
+            :name="t('harvester.host.disk.storageScheduled.label')"
+            :value="value.storageScheduled"
+          />
+        </div>
+        <div class="col span-4">
+          <LabelValue
+            :name="t('harvester.host.disk.storageMaximum.label')"
+            :value="value.storageMaximum"
+          />
+        </div>
+      </div>
+      <hr class="mt-10" />
+    </div>
+    <div class="row mt-10">
+      <div class="col span-4">
+        <LabelValue
+          :name="t('generic.name')"
+          :value="value.displayName"
+        />
+      </div>
+      <div class="col span-4">
+        <LabelValue
+          :name="t('harvester.host.disk.path.label')"
+          :value="value.path"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.close {
+  top: 10px;
+  right: 10px;
+  padding:0;
+  position: absolute;
+}
+
+.disk {
+  position: relative;
+
+  .secret-name {
+    height: $input-height;
+  }
+
+  &:not(:last-of-type) {
+    padding-bottom: 10px;
+    margin-bottom: 30px;
+  }
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+
+.badge-state {
+    padding: 2px 5px;
+}
+</style>
diff --git a/pkg/harvester/detail/harvesterhci.io.host/HarvesterKsmtuned.vue b/pkg/harvester/detail/harvesterhci.io.host/HarvesterKsmtuned.vue
new file mode 100644
index 00000000..328b23ea
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.host/HarvesterKsmtuned.vue
@@ -0,0 +1,171 @@
+<script>
+import LabelValue from '@shell/components/LabelValue';
+import { HCI } from '../../types';
+import { ksmtunedMode, ksmtunedRunOption } from '../../edit/harvesterhci.io.host/HarvesterKsmtuned.vue';
+
+export default {
+  name:       'HarvesterKsmtuned',
+  components: { LabelValue },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true
+    },
+
+    node: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.KSTUNED });
+
+    this.ksmtuned = hash.find((node) => {
+      return node.id === this.node.id;
+    });
+  },
+
+  data() {
+    return { ksmtuned: {} };
+  },
+
+  computed: {
+    modeText() {
+      const mode = this.ksmtuned.spec.mode;
+
+      return ksmtunedMode.find(M => M.value === mode).label;
+    },
+
+    thresCoef() {
+      return `${ this.ksmtuned.spec.thresCoef } %`;
+    },
+
+    runText() {
+      const run = this.ksmtuned.spec.run;
+
+      return ksmtunedRunOption.find(M => M.value === run).label;
+    },
+
+    showRunInformation() {
+      return this.ksmtuned.spec.run === 'run';
+    },
+
+    mergeNodesText() {
+      return this.ksmtuned.spec?.mergeAcrossNodes ? this.t('harvester.host.ksmtuned.enable') : this.t('harvester.host.ksmtuned.disable');
+    },
+
+    ksmdPhase() {
+      return this.ksmtuned?.status?.ksmdPhase;
+    },
+
+    ksmdPhaseTextColor() {
+      return this.ksmdPhase === 'Running' ? 'text-success' : 'text-warning';
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <template v-if="ksmtuned.status">
+      <h2>
+        {{ t('harvester.host.ksmtuned.configure') }}
+      </h2>
+      <div class="row mb-20">
+        <div class="col span-4">
+          <LabelValue :name="t('harvester.host.ksmtuned.run')" :value="runText" />
+        </div>
+      </div>
+
+      <div v-if="showRunInformation" class="row mb-20">
+        <div class="col span-4">
+          <LabelValue :name="t('harvester.host.ksmtuned.thresCoef')" :value="thresCoef" />
+        </div>
+        <div class="col span-4">
+          <LabelValue :name="t('harvester.host.ksmtuned.mode')" :value="modeText" />
+        </div>
+
+        <div class="col span-4">
+          <LabelValue :name="t('harvester.host.ksmtuned.enableMergeNodes')" :value="mergeNodesText" />
+        </div>
+      </div>
+
+      <div v-if="showRunInformation">
+        <hr class="divider" />
+
+        <h3>{{ t('harvester.host.ksmtuned.parameters.title') }}</h3>
+        <div class="row mb-20">
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.parameters.boost')" :value="ksmtuned.spec.ksmtunedParameters.boost" />
+          </div>
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.parameters.decay')" :value="ksmtuned.spec.ksmtunedParameters.decay" />
+          </div>
+
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.parameters.sleepMsec')" :value="ksmtuned.spec.ksmtunedParameters.sleepMsec" />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.parameters.minPages')" :value="ksmtuned.spec.ksmtunedParameters.minPages" />
+          </div>
+
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.parameters.maxPages')" :value="ksmtuned.spec.ksmtunedParameters.maxPages" />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <hr class="divider" />
+        <h3><t k="harvester.host.ksmtuned.statistics.title" :raw="true" /></h3>
+        <div class="row mb-20">
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.ksmStatus')">
+              <template #value>
+                <span :class="ksmdPhaseTextColor">{{ ksmdPhase }}</span>
+              </template>
+            </LabelValue>
+          </div>
+
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.statistics.sharing')" :value="ksmtuned.status.sharing" />
+          </div>
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.statistics.shared')" :value="ksmtuned.status.shared" />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.statistics.unshared')" :value="ksmtuned.status.unshared" />
+          </div>
+
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.statistics.volatile')" :value="ksmtuned.status.volatile" />
+          </div>
+
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.statistics.fullScans')" :value="ksmtuned.status.fullScans" />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.statistics.stableNodeDups')" :value="ksmtuned.status.stableNodeDups" />
+          </div>
+
+          <div class="col span-4">
+            <LabelValue :name="t('harvester.host.ksmtuned.statistics.stableNodeChains')" :value="ksmtuned.status.stableNodeChains" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/pkg/harvester/detail/harvesterhci.io.host/HarvesterSeeder.vue b/pkg/harvester/detail/harvesterhci.io.host/HarvesterSeeder.vue
new file mode 100644
index 00000000..8267a66b
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.host/HarvesterSeeder.vue
@@ -0,0 +1,131 @@
+<script>
+import { RadioGroup } from '@components/Form/Radio';
+import LabelValue from '@shell/components/LabelValue';
+import { Banner } from '@components/Banner';
+
+export default {
+  name: 'HarvesterSeeder',
+
+  components: {
+    RadioGroup,
+    LabelValue,
+    Banner,
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true
+    },
+
+    node: {
+      type:     Object,
+      required: true,
+    },
+
+    inventory: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  data() {
+    const enableInventory = !!this.inventory?.id;
+
+    return {
+      enableInventory,
+      value: this.inventory,
+    };
+  },
+
+  computed: {
+    selectedSecret() {
+      const namespace = this.value.spec?.baseboardSpec?.connection?.authSecretRef?.namespace;
+      const name = this.value?.spec?.baseboardSpec?.connection?.authSecretRef?.name;
+
+      if (namespace && name) {
+        return `${ namespace }/${ name }`;
+      } else {
+        return 'N/A';
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="inventory.warningMessages.length > 0">
+      <Banner
+        v-for="msg in inventory.warningMessages"
+        :key="msg.text"
+        color="error"
+        :label="msg.text"
+      />
+    </div>
+    <div v-if="enableInventory">
+      <div class="row mb-20">
+        <div class="col span-6">
+          <LabelValue
+            :name="t('harvester.seeder.inventory.host.label')"
+            :value="value.spec.baseboardSpec.connection.host"
+          />
+        </div>
+        <div class="col span-6">
+          <LabelValue
+            :name="t('harvester.seeder.inventory.port.label')"
+            :value="value.spec.baseboardSpec.connection.port"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-6">
+          <LabelValue
+            :name="t('harvester.seeder.inventory.insecureTLS.label')"
+            :value="value.spec.baseboardSpec.connection.insecureTLS ? t('generic.yes') : t('generic.no')"
+          />
+        </div>
+        <div class="col span-6">
+          <LabelValue
+            :name="t('harvester.seeder.inventory.secret.label')"
+            :value="selectedSecret"
+          />
+        </div>
+      </div>
+
+      <div class="row mt-20">
+        <div class="col span-6">
+          <LabelValue
+            :name="t('harvester.seeder.inventory.event.label')"
+            :value="value.spec.events.enabled ? t('generic.enabled') : t('generic.disabled')"
+          />
+        </div>
+        <div
+          v-if="value.spec.events.enabled"
+          class="col span-6"
+        >
+          <LabelValue
+            :name="t('harvester.seeder.inventory.pollingInterval.label')"
+            :value="value.spec.events.pollingInterval"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="row"
+    >
+      <div class="col span-6">
+        <RadioGroup
+          v-model="enableInventory"
+          :options="[
+            { label: t('generic.enabled'), value: true },
+            { label: t('generic.disabled'), value: false }
+          ]"
+          :mode="mode"
+          name="enableInventory"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/detail/harvesterhci.io.host/VirtualMachineInstance.vue b/pkg/harvester/detail/harvesterhci.io.host/VirtualMachineInstance.vue
new file mode 100644
index 00000000..f82c5b63
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.host/VirtualMachineInstance.vue
@@ -0,0 +1,131 @@
+<script>
+import { STATE, AGE, NAME } from '@shell/config/table-headers';
+import SortableTable from '@shell/components/SortableTable';
+import Loading from '@shell/components/Loading';
+import HarvesterVmState from '../../formatters/HarvesterVmState';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../../types';
+import { HOSTNAME } from '@shell/config/labels-annotations';
+
+export default {
+  name: 'InstanceNode',
+
+  components: {
+    SortableTable,
+    Loading,
+    HarvesterVmState,
+  },
+
+  props: {
+    node: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const hash = await allHash({
+      vms:               this.$store.dispatch('harvester/findAll', { type: HCI.VM }),
+      vmis:              this.$store.dispatch('harvester/findAll', { type: HCI.VMI }),
+      allClusterNetwork: this.$store.dispatch('harvester/findAll', { type: HCI.CLUSTER_NETWORK }),
+    });
+    const instanceMap = {};
+
+    (hash.vmis || []).forEach((vmi) => {
+      const vmiUID = vmi?.metadata?.ownerReferences?.[0]?.uid;
+
+      if (vmiUID) {
+        instanceMap[vmiUID] = vmi;
+      }
+    });
+
+    this.allClusterNetwork = hash.allClusterNetwork;
+    this.rows = hash.vms.filter((row) => {
+      return instanceMap[row.metadata?.uid]?.status?.nodeName === this.node?.metadata?.labels?.[HOSTNAME];
+    });
+  },
+
+  data() {
+    return {
+      rows:              [],
+      allClusterNetwork: []
+    };
+  },
+
+  computed: {
+    headers() {
+      return [
+        STATE,
+        NAME,
+        {
+          name:     'vmCPU',
+          labelKey: 'tableHeaders.cpu',
+          search:   false,
+          sort:     ['spec.template.spec.domain.cpu.cores'],
+          value:    'spec.template.spec.domain.cpu.cores',
+          width:    120
+        },
+        {
+          name:     'vmRAM',
+          labelKey: 'glance.memory',
+          search:   false,
+          sort:     ['memorySort'],
+          value:    'spec.template.spec.domain.resources.limits.memory',
+          width:    120
+        },
+        {
+          name:      'ip',
+          label:     'IP Address',
+          labelKey:  'harvester.tableHeaders.vm.ipAddress',
+          value:     'id',
+          formatter: 'HarvesterIpAddress'
+        },
+        {
+          ...AGE,
+          sort: 'metadata.creationTimestamp:desc',
+        }
+      ];
+    },
+  },
+
+  methods: {}
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else id="host-instances" class="row">
+    <div class="col span-12">
+      <SortableTable
+        v-bind="$attrs"
+        :headers="headers"
+        default-sort-by="age"
+        :rows="rows"
+        key-field="_key"
+        v-on="$listeners"
+      >
+        <template slot="cell:state" slot-scope="scope" class="state-col">
+          <div class="state">
+            <HarvesterVmState class="vmstate" :row="scope.row" :all-cluster-network="allClusterNetwork" />
+          </div>
+        </template>
+      </Sortabletable>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#host-instances {
+  ::v-deep thead th {
+    vertical-align: middle;
+  }
+
+  ::v-deep .state {
+    display: flex;
+
+    .vmstate {
+      margin-right: 6px;
+    }
+  }
+}
+</style>
diff --git a/pkg/harvester/detail/harvesterhci.io.host/VlanStatus/LinkStatus.vue b/pkg/harvester/detail/harvesterhci.io.host/VlanStatus/LinkStatus.vue
new file mode 100644
index 00000000..34ecd722
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.host/VlanStatus/LinkStatus.vue
@@ -0,0 +1,71 @@
+<script>
+import LabelValue from '@shell/components/LabelValue';
+
+import { _CREATE } from '@shell/config/query-params';
+
+export default {
+  name: 'LinkStatus',
+
+  components: { LabelValue },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:    String,
+      default: _CREATE,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mt-10">
+      <div class="col span-6">
+        <LabelValue
+          :name="t('generic.name')"
+          :value="value.name"
+        />
+      </div>
+      <div class="col span-6">
+        <LabelValue
+          :name="t('tableHeaders.state')"
+          :value="value.state"
+        />
+      </div>
+    </div>
+    <div class="row mt-10">
+      <div class="col span-6">
+        <LabelValue
+          :name="t('tableHeaders.type')"
+          :value="value.type"
+        />
+      </div>
+      <div class="col span-6">
+        <LabelValue
+          :name="t('harvester.fields.macAddress')"
+          :value="value.mac"
+        />
+      </div>
+    </div>
+    <div class="row mt-10">
+      <div
+        v-if="value.promiscuous === 'true'"
+        class="col span-6"
+      >
+        <LabelValue
+          :name="t('harvester.fields.promiscuous')"
+          :value="value.promiscuous"
+        >
+          <template #value>
+            {{ value.promiscuous === 'true' ? t('generic.yes') : t('generic.no') }}
+          </template>
+        </LabelValue>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/detail/harvesterhci.io.host/VlanStatus/index.vue b/pkg/harvester/detail/harvesterhci.io.host/VlanStatus/index.vue
new file mode 100644
index 00000000..2fb8512b
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.host/VlanStatus/index.vue
@@ -0,0 +1,104 @@
+<script>
+import LabelValue from '@shell/components/LabelValue';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+import { BadgeState } from '@components/BadgeState';
+
+import { _CREATE } from '@shell/config/query-params';
+import { findBy } from '@shell/utils/array';
+
+import LinkStatus from './LinkStatus';
+import { HCI } from '../../../types';
+
+export default {
+  name: 'HarvesterHostNetwork',
+
+  components: {
+    LabelValue,
+    LinkStatus,
+    ArrayListGrouped,
+    BadgeState,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:    String,
+      default: _CREATE,
+    },
+  },
+
+  computed: {
+    conditions() {
+      return this.value?.status?.conditions || [];
+    },
+
+    readyCondition() {
+      return findBy(this.conditions, 'type', 'ready') || {};
+    },
+
+    linkStatus() {
+      const linkMonitorId = this.value?.status?.linkMonitor;
+      const nodeName = this.value?.status?.node;
+
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const linkMonitors = this.$store.getters[`${ inStore }/all`](HCI.LINK_MONITOR);
+      const linkMonitor = (linkMonitors.filter(l => l.id === linkMonitorId) || [])[0] || {};
+
+      return linkMonitor?.status?.linkStatus?.[nodeName] || [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-12">
+        <div class="pull-right">
+          {{ t('resourceTabs.conditions.tab') }}:
+          <BadgeState
+            v-clean-tooltip="readyCondition.message"
+            :color="readyCondition.status === 'True' ? 'bg-success' : 'bg-error' "
+            :icon="readyCondition.status === 'True' ? 'icon-checkmark' : 'icon-warning' "
+            :label="t('tableHeaders.ready')"
+            class="mr-10 ml-10 state"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="row mt-10">
+      <div class="col span-6">
+        <LabelValue
+          :name="t('harvester.network.clusterNetwork.label')"
+          :value="value.status.clusterNetwork"
+        />
+      </div>
+      <div class="col span-6">
+        <LabelValue
+          :name="t('harvester.vlanStatus.vlanConfig.label')"
+          :value="value.status.vlanConfig"
+        />
+      </div>
+    </div>
+    <div class="row mt-20">
+      <div class="col span-12">
+        <ArrayListGrouped
+          v-model="linkStatus"
+          :mode="mode"
+          :can-remove="false"
+        >
+          <template #default="props">
+            <LinkStatus
+              :value="props.row.value"
+              :mode="mode"
+            />
+          </template>
+        </ArrayListGrouped>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/detail/harvesterhci.io.host/index.vue b/pkg/harvester/detail/harvesterhci.io.host/index.vue
new file mode 100644
index 00000000..a3c7e445
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.host/index.vue
@@ -0,0 +1,488 @@
+<script>
+import { mapGetters } from 'vuex';
+import Tag from '@shell/components/Tag';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import InfoBox from '@shell/components/InfoBox';
+import LabelValue from '@shell/components/LabelValue';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+import Loading from '@shell/components/Loading.vue';
+import SortableTable from '@shell/components/SortableTable';
+import Banner from '@components/Banner/Banner.vue';
+
+import metricPoller from '@shell/mixins/metric-poller';
+import {
+  METRIC, NODE, LONGHORN, POD, EVENT
+} from '@shell/config/types';
+import { HCI } from '../../types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { allHash } from '@shell/utils/promise';
+import { formatSi } from '@shell/utils/units';
+import { findBy } from '@shell/utils/array';
+import { clone } from '@shell/utils/object';
+import { escapeHtml } from '@shell/utils/string';
+
+import Basic from './HarvesterHostBasic';
+import Instance from './VirtualMachineInstance';
+import Disk from './HarvesterHostDisk';
+import VlanStatus from './VlanStatus';
+import HarvesterKsmtuned from './HarvesterKsmtuned.vue';
+import HarvesterSeeder from './HarvesterSeeder';
+
+const LONGHORN_SYSTEM = 'longhorn-system';
+
+export default {
+  name: 'DetailHost',
+
+  components: {
+    Tabbed,
+    Tab,
+    Tag,
+    Basic,
+    Instance,
+    ArrayListGrouped,
+    Disk,
+    InfoBox,
+    VlanStatus,
+    LabelValue,
+    HarvesterKsmtuned,
+    Loading,
+    SortableTable,
+    HarvesterSeeder,
+    Banner,
+  },
+  mixins: [metricPoller],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      nodes: this.$store.dispatch('harvester/findAll', { type: NODE }),
+      pods:  this.$store.dispatch(`${ inStore }/findAll`, { type: POD }),
+    };
+
+    if (this.$store.getters['harvester/schemaFor'](HCI.VLAN_STATUS)) {
+      hash.hostNetworks = this.$store.dispatch('harvester/findAll', { type: HCI.VLAN_STATUS });
+    }
+
+    if (this.$store.getters['harvester/schemaFor'](HCI.BLOCK_DEVICE)) {
+      hash.blockDevices = this.$store.dispatch('harvester/findAll', { type: HCI.BLOCK_DEVICE });
+    }
+
+    if (this.$store.getters['harvester/schemaFor'](LONGHORN.NODES)) {
+      hash.longhornNodes = this.$store.dispatch('harvester/findAll', { type: LONGHORN.NODES });
+    }
+
+    if (this.$store.getters['harvester/schemaFor'](HCI.LINK_MONITOR)) {
+      hash.linkMonitors = this.$store.dispatch('harvester/findAll', { type: HCI.LINK_MONITOR });
+    }
+
+    if (this.$store.getters['harvester/schemaFor'](HCI.ADD_ONS)) {
+      hash.addons = this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS });
+    }
+
+    if (this.$store.getters['harvester/schemaFor'](HCI.INVENTORY)) {
+      hash.inventories = this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.INVENTORY });
+    }
+
+    const res = await allHash(hash);
+    const hostNetworkResource = (res.hostNetworks || []).find( O => this.value.id === O.attachNodeName);
+
+    this.loadMetrics();
+
+    if (hostNetworkResource) {
+      this.hostNetworkResource = hostNetworkResource;
+    }
+
+    const blockDevices = this.$store.getters[`${ inStore }/all`](HCI.BLOCK_DEVICE);
+    const provisionedBlockDevices = blockDevices.filter((d) => {
+      const provisioned = d?.spec?.fileSystem?.provisioned;
+      const isCurrentNode = d?.spec?.nodeName === this.value.id;
+      const isLonghornMounted = findBy(this.longhornDisks, 'name', d.metadata.name);
+
+      return provisioned && isCurrentNode && !isLonghornMounted;
+    })
+      .map((d) => {
+        return {
+          isNew:          true,
+          name:           d?.metadata?.name,
+          originPath:     d?.spec?.fileSystem?.mountPoint,
+          path:           d?.spec?.fileSystem?.mountPoint,
+          blockDevice:    d,
+          displayName:    d?.displayName,
+          forceFormatted: d?.spec?.fileSystem?.forceFormatted || false,
+        };
+      });
+
+    const disks = [...this.longhornDisks, ...provisionedBlockDevices];
+
+    this.disks = disks;
+    this.newDisks = clone(disks);
+
+    const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
+    const seeder = addons.find(addon => addon.id === 'harvester-system/harvester-seeder');
+
+    const seederEnabled = seeder ? seeder?.spec?.enabled : false;
+
+    if (seederEnabled) {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const inventories = this.$store.getters[`${ inStore }/all`](HCI.INVENTORY) || [];
+
+      const inventory = inventories.find(inv => inv.id === `harvester-system/${ this.value.id }`);
+
+      if (inventory) {
+        this.inventory = inventory;
+      } else {
+        this.inventory = await this.$store.dispatch(`${ inStore }/create`, {
+          type:     HCI.INVENTORY,
+          metadata: {
+            name:      this.value.id,
+            namespace: 'harvester-system'
+          },
+        });
+
+        this.inventory.applyDefaults();
+      }
+    }
+  },
+
+  data() {
+    return {
+      metrics:             null,
+      mode:                'view',
+      hostNetworkResource: null,
+      newDisks:            [],
+      disks:               [],
+      allEvents:           [],
+      didLoadEvents:       false,
+      inventory:           {},
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    longhornDisks() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.value.id }`);
+      const diskStatus = longhornNode?.status?.diskStatus || {};
+      const diskSpec = longhornNode?.spec?.disks || {};
+
+      const formatOptions = {
+        increment:    1024,
+        minExponent:  3,
+        maxExponent:  3,
+        maxPrecision: 2,
+        suffix:       'iB',
+      };
+
+      const longhornDisks = Object.keys(diskStatus).map((key) => {
+        const blockDevice = this.$store.getters[`${ inStore }/byId`](HCI.BLOCK_DEVICE, `longhorn-system/${ key }`);
+
+        return {
+          ...diskStatus[key],
+          ...diskSpec?.[key],
+          name:             key,
+          isNew:            false,
+          storageReserved:  formatSi(diskSpec[key]?.storageReserved, formatOptions),
+          storageAvailable: formatSi(diskStatus[key]?.storageAvailable, formatOptions),
+          storageMaximum:   formatSi(diskStatus[key]?.storageMaximum, formatOptions),
+          storageScheduled: formatSi(diskStatus[key]?.storageScheduled, formatOptions),
+          blockDevice,
+          displayName:      blockDevice?.displayName || key,
+          forceFormatted:   blockDevice?.spec?.fileSystem?.forceFormatted || false,
+          tags:             diskSpec?.[key]?.tags || [],
+        };
+      });
+
+      return longhornDisks;
+    },
+
+    hasKsmtunedSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/schemaFor`](HCI.KSTUNED);
+    },
+
+    hasBlockDevicesSchema() {
+      return !!this.$store.getters['harvester/schemaFor'](HCI.BLOCK_DEVICE);
+    },
+
+    hasHostNetworksSchema() {
+      return !!this.$store.getters['harvester/schemaFor'](HCI.VLAN_STATUS);
+    },
+
+    vlanStatuses() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const nodeId = this.value.id;
+      const vlanStatuses = this.$store.getters[`${ inStore }/all`](HCI.VLAN_STATUS);
+
+      return vlanStatuses.filter(s => s?.status?.node === nodeId) || [];
+    },
+
+    longhornNode() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const longhornNodes = this.$store.getters[`${ inStore }/all`](LONGHORN.NODES);
+
+      return longhornNodes.find(node => node.id === `${ LONGHORN_SYSTEM }/${ this.value.id }`);
+    },
+
+    events() {
+      return this.allEvents.filter((event) => {
+        return event.involvedObject?.uid === this.value?.metadata?.uid &&
+                event.reason !== 'SeederUpdated';
+      }).map((event) => {
+        return {
+          reason:    (`${ event.reason || this.t('generic.unknown') }${ event.count > 1 ? ` (${ event.count })` : '' }`).trim(),
+          message:   event.message || this.t('generic.unknown'),
+          date:      event.lastTimestamp || event.firstTimestamp || event.metadata.creationTimestamp,
+          eventType: event.eventType
+        };
+      });
+    },
+
+    eventHeaders() {
+      return [
+        {
+          name:  'reason',
+          label: this.t('tableHeaders.reason'),
+          value: 'reason',
+          sort:  'reason',
+        },
+        {
+          name:  'message',
+          label: this.t('tableHeaders.message'),
+          value: 'message',
+          sort:  'message',
+        },
+        {
+          name:          'date',
+          label:         this.t('tableHeaders.updated'),
+          value:         'date',
+          sort:          'date:desc',
+          formatter:     'LiveDate',
+          formatterOpts: { addSuffix: true },
+          width:         125
+        },
+      ];
+    },
+
+    seederEnabled() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
+      const seeder = addons.find(addon => addon.id === 'harvester-system/harvester-seeder');
+
+      return seeder ? seeder?.spec?.enabled : false;
+    },
+
+    ntpSync() {
+      const jsonString = this.value.metadata?.annotations?.[HCI_ANNOTATIONS.NODE_NTP_SYNC_STATUS];
+      let out = null;
+
+      if (!jsonString) {
+        return out;
+      }
+
+      try {
+        out = JSON.parse(jsonString);
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', {
+          title: this.t('generic.notification.title.error', { name: escapeHtml(this.value.metadata.name) }),
+          err,
+        }, { root: true });
+      }
+
+      return out;
+    },
+
+    ntpSyncedStatus() {
+      const status = this.ntpSync?.ntpSyncStatus;
+
+      if (status === 'disabled') {
+        return {
+          status:  'disabled',
+          warning: { key: 'harvester.host.ntp.ntpSyncStatus.isDisabled' }
+        };
+      }
+
+      const current = this.ntpSync?.currentNtpServers || '';
+
+      if (status === 'unsynced') {
+        return {
+          status:  'unsynced',
+          warning: {
+            key: 'harvester.host.ntp.ntpSyncStatus.isUnsynced',
+            current
+          }
+        };
+      }
+
+      return {};
+    },
+  },
+
+  methods: {
+    async loadMetrics() {
+      const schema = this.$store.getters['harvester/schemaFor'](METRIC.NODE);
+
+      if (schema) {
+        this.metrics = await this.$store.dispatch('harvester/find', {
+          type: METRIC.NODE,
+          id:   this.value.id,
+          opt:  { force: true, watch: false }
+        });
+
+        this.$forceUpdate();
+      }
+    },
+
+    // Ensures we only fetch events and show the table when the events tab has been activated
+    tabChange(neu) {
+      if (!this.didLoadEvents && neu?.selectedName === 'events') {
+        this.$store.dispatch(`harvester/findAll`, { type: EVENT }).then((events) => {
+          this.allEvents = events;
+          this.didLoadEvents = true;
+        });
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Banner
+      v-if="ntpSyncedStatus.status === 'disabled'"
+      color="warning"
+    >
+      <span v-clean-html="t(ntpSyncedStatus.warning.key)"></span>
+    </Banner>
+    <Banner
+      v-if="ntpSyncedStatus.status === 'unsynced'"
+      color="warning"
+    >
+      <span v-clean-html="t(ntpSyncedStatus.warning.key, { current: ntpSyncedStatus.warning.current }, true)"></span>
+    </Banner>
+    <Tabbed
+      v-bind="$attrs"
+      class="mt-15"
+      :side-tabs="true"
+      @changed="tabChange"
+    >
+      <Tab name="basics" :label="t('harvester.host.tabs.basics')" :weight="4" class="bordered-table">
+        <Basic
+          v-model="value"
+          :metrics="metrics"
+          :mode="mode"
+        />
+      </Tab>
+      <Tab name="instance" :label="t('harvester.host.tabs.instance')" :weight="3" class="bordered-table">
+        <Instance :node="value" />
+      </Tab>
+      <Tab
+        v-if="hasHostNetworksSchema && vlanStatuses.length > 0"
+        name="network"
+        :label="t('harvester.host.tabs.network')"
+        :weight="2"
+        class="bordered-table"
+      >
+        <InfoBox
+          v-for="vlan in vlanStatuses"
+          :key="vlan.id"
+        >
+          <VlanStatus
+            :value="vlan"
+            :mode="mode"
+          />
+        </InfoBox>
+      </Tab>
+      <Tab
+        v-if="hasBlockDevicesSchema"
+        name="disk"
+        :weight="1"
+        :label="t('harvester.host.tabs.storage')"
+      >
+        <div
+          v-if="longhornNode"
+          class="row mb-20"
+        >
+          <div class="col span-12">
+            <LabelValue
+              v-if="longhornNode.spec.tags.length"
+              :name="t('harvester.host.tags.label')"
+            >
+              <template #value>
+                <div class="mt-5">
+                  <Tag v-for="(prop, key) in longhornNode.spec.tags" :key="key + prop" class="mr-5">
+                    {{ prop }}
+                  </Tag>
+                </div>
+              </template>
+            </LabelValue>
+          </div>
+        </div>
+        <ArrayListGrouped
+          v-model="newDisks"
+          :mode="mode"
+          :can-remove="false"
+          :initial-empty-row="false"
+        >
+          <template #default="props">
+            <Disk
+              v-model="props.row.value"
+              class="mb-20"
+              :mode="mode"
+              :disks="disks"
+            />
+          </template>
+        </ArrayListGrouped>
+      </Tab>
+
+      <Tab
+        v-if="hasKsmtunedSchema"
+        name="ksmtuned"
+        :weight="0"
+        :show-header="false"
+        :label="t('harvester.host.tabs.ksmtuned')"
+      >
+        <HarvesterKsmtuned :mode="mode" :node="value" />
+      </Tab>
+
+      <Tab
+        v-if="seederEnabled"
+        name="seeder"
+        :weight="-1"
+        :label="t('harvester.host.tabs.seeder')"
+      >
+        <HarvesterSeeder
+          :mode="mode"
+          :node="value"
+          :inventory="inventory"
+        />
+      </Tab>
+
+      <Tab
+        label-key="harvester.virtualMachine.detail.tabs.events"
+        name="events"
+        :weight="-99"
+      >
+        <SortableTable
+          :rows="events"
+          :headers="eventHeaders"
+          key-field="id"
+          :search="false"
+          :table-actions="false"
+          :row-actions="false"
+          default-sort-by="date"
+        />
+      </Tab>
+    </Tabbed>
+  </div>
+</template>
diff --git a/pkg/harvester/detail/harvesterhci.io.secret.vue b/pkg/harvester/detail/harvesterhci.io.secret.vue
new file mode 100644
index 00000000..cc4187ee
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.secret.vue
@@ -0,0 +1,287 @@
+<script>
+import { SECRET_TYPES as TYPES } from '@shell/config/secret';
+import { base64Decode } from '@shell/utils/crypto';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import DetailText from '@shell/components/DetailText';
+import Tab from '@shell/components/Tabbed/Tab';
+
+const types = [
+  TYPES.OPAQUE,
+  TYPES.DOCKER_JSON,
+  TYPES.TLS,
+  TYPES.SSH,
+  TYPES.BASIC,
+];
+const registryAddresses = [
+  'DockerHub', 'Quay.io', 'Artifactory', 'Custom'
+];
+
+export default {
+  components: {
+    ResourceTabs,
+    DetailText,
+    Tab,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  data() {
+    let username;
+    let password;
+    let registryUrl;
+    let registryProvider = 'Custom';
+    let key;
+    let crt;
+
+    if (this.value._type === TYPES.DOCKER_JSON) {
+      const json = base64Decode(this.value.data['.dockerconfigjson']);
+
+      const { auths } = JSON.parse(json);
+
+      registryUrl = Object.keys(auths)[0];
+
+      if (registryUrl === 'index.docker.io/v1/') {
+        registryProvider = 'DockerHub';
+      } else if (registryUrl === 'quay.io') {
+        registryProvider = 'Quay.io';
+      } else if (registryUrl.includes('artifactory')) {
+        registryProvider = 'Artifactory';
+      }
+
+      username = auths[registryUrl].username;
+      password = auths[registryUrl].password;
+    }
+
+    const data = this.value?.data || {};
+
+    if (this.value._type === TYPES.TLS) {
+      // do not show existing key when editing
+      key = this.mode === 'edit' ? '' : base64Decode(data['tls.key']);
+
+      crt = base64Decode(data['tls.crt']);
+    }
+
+    if (this.value._type === TYPES.SERVICE_ACCT) {
+      key = base64Decode(data['token']);
+      crt = base64Decode(data['ca.crt']);
+    }
+
+    if ( this.value._type === TYPES.BASIC ) {
+      username = base64Decode(data.username || '');
+      password = base64Decode(data.password || '');
+    }
+
+    if ( this.value._type === TYPES.SSH ) {
+      username = base64Decode(data['ssh-publickey'] || '');
+      password = base64Decode(data['ssh-privatekey'] || '');
+    }
+
+    if (!this.value._type) {
+      this.$set(this.value, '_type', TYPES.OPAQUE);
+    }
+
+    return {
+      types,
+      registryAddresses,
+      registryProvider,
+      username,
+      password,
+      registryUrl,
+      key,
+      crt,
+      relatedServices: [],
+    };
+  },
+
+  computed: {
+    isCertificate() {
+      return this.value._type === TYPES.TLS;
+    },
+
+    isSvcAcctToken() {
+      return this.value._type === TYPES.SERVICE_ACCT;
+    },
+
+    isRegistry() {
+      return this.value._type === TYPES.DOCKER_JSON;
+    },
+
+    isSsh() {
+      return this.value._type === TYPES.SSH;
+    },
+
+    isBasicAuth() {
+      return this.value._type === TYPES.BASIC;
+    },
+
+    parsedRows() {
+      const rows = [];
+      const { data = {} } = this.value;
+
+      Object.keys(data).forEach((key) => {
+        const value = base64Decode(data[key]);
+
+        rows.push({
+          key,
+          value
+        });
+      });
+
+      return rows;
+    },
+
+    dataLabel() {
+      switch (this.value._type) {
+      case TYPES.TLS:
+        return this.t('secret.certificate.certificate');
+      case TYPES.SSH:
+        return this.t('secret.ssh.keys');
+      case TYPES.BASIC:
+        return this.t('secret.authentication');
+      default:
+        return this.t('secret.data');
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <ResourceTabs
+    v-model="value"
+    :need-events="false"
+    :need-related="false"
+    :mode="mode"
+  >
+    <Tab
+      name="data"
+      :label="dataLabel"
+    >
+      <template v-if="isRegistry || isBasicAuth">
+        <div
+          v-if="isRegistry"
+          class="row"
+        >
+          <div class="col span-12">
+            <DetailText
+              :value="registryUrl"
+              label-key="secret.registry.domainName"
+            />
+          </div>
+        </div>
+        <div class="row mt-20">
+          <div class="col span-6">
+            <DetailText
+              :value="username"
+              label-key="secret.registry.username"
+            />
+          </div>
+          <div class="col span-6">
+            <DetailText
+              :value="password"
+              label-key="secret.registry.password"
+              :conceal="true"
+            />
+          </div>
+        </div>
+      </template>
+
+      <div
+        v-else-if="isCertificate"
+        class="row"
+      >
+        <div class="col span-6">
+          <DetailText
+            :value="key"
+            label-key="secret.certificate.privateKey"
+            :conceal="true"
+          />
+        </div>
+        <div class="col span-6">
+          <DetailText
+            :value="crt"
+            label-key="secret.certificate.certificate"
+          />
+        </div>
+      </div>
+
+      <div
+        v-else-if="isSvcAcctToken"
+        class="row"
+      >
+        <div class="col span-6">
+          <DetailText
+            :value="crt"
+            label-key="secret.serviceAcct.ca"
+          />
+        </div>
+        <div class="col span-6">
+          <DetailText
+            :value="key"
+            label-key="secret.serviceAcct.token"
+            :conceal="true"
+          />
+        </div>
+      </div>
+
+      <div
+        v-else-if="isSsh"
+        class="row"
+      >
+        <div class="col span-6">
+          <DetailText
+            :value="username"
+            label-key="secret.ssh.public"
+          />
+        </div>
+        <div class="col span-6">
+          <DetailText
+            :value="password"
+            label-key="secret.ssh.private"
+            :conceal="true"
+          />
+        </div>
+      </div>
+
+      <div v-else>
+        <div
+          v-for="(row,idx) in parsedRows"
+          :key="idx"
+          class="entry"
+        >
+          <DetailText
+            :value="row.value"
+            :label="row.key"
+            :conceal="true"
+          />
+        </div>
+        <div v-if="!parsedRows.length">
+          <div
+            v-t="'sortableTable.noRows'"
+            class="m-20 text-center"
+          />
+        </div>
+      </div>
+    </Tab>
+  </ResourceTabs>
+</template>
+
+<style lang="scss" scoped>
+  .entry {
+    margin-top: 10px;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+  }
+</style>
diff --git a/pkg/harvester/detail/harvesterhci.io.virtualmachinebackup/index.vue b/pkg/harvester/detail/harvesterhci.io.virtualmachinebackup/index.vue
new file mode 100644
index 00000000..f97206f2
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.virtualmachinebackup/index.vue
@@ -0,0 +1,221 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import Loading from '@shell/components/Loading';
+import CruResource from '@shell/components/CruResource';
+import { Checkbox } from '@components/Form/Checkbox';
+import LabelValue from '@shell/components/LabelValue';
+import VM_MIXIN from '../../mixins/harvester-vm';
+import { allHash } from '@shell/utils/promise';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { HCI } from '../../types';
+import CpuMemory from '../../edit/kubevirt.io.virtualmachine/VirtualMachineCpuMemory';
+
+import OverviewKeypairs from '../kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineKeypairs';
+import Volume from '../../edit/kubevirt.io.virtualmachine/VirtualMachineVolume';
+import Network from '../../edit/kubevirt.io.virtualmachine/VirtualMachineNetwork';
+import CloudConfig from '../../edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig';
+const UNDEFINED = 'n/a';
+
+export default {
+  name: 'BackupDetail',
+
+  components: {
+    Volume,
+    Network,
+    CruResource,
+    Tabbed,
+    Loading,
+    LabelValue,
+    Tab,
+    CloudConfig,
+    Checkbox,
+    CpuMemory,
+    OverviewKeypairs,
+  },
+
+  mixins: [CreateEditView, VM_MIXIN],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    await allHash({ allImages: this.$store.dispatch('harvester/findAll', { type: HCI.IMAGE }) });
+  },
+
+  data() {
+    return { vm: null };
+  },
+
+  computed: {
+    name() {
+      return this.value?.metadata?.name || UNDEFINED;
+    },
+
+    hostname() {
+      return this?.spec?.template?.spec?.hostname;
+    },
+
+    imageName() {
+      const imageList = this.$store.getters['harvester/all'](HCI.IMAGE) || [];
+
+      const image = imageList.find( I => this.imageId === I.id);
+
+      return image?.spec?.displayName || '-';
+    },
+
+    disks() {
+      const disks = this?.spec?.template?.spec?.domain?.devices?.disks || [];
+
+      return disks.filter((disk) => {
+        return !!disk.bootOrder;
+      }).sort((a, b) => {
+        if (a.bootOrder < b.bootOrder) {
+          return -1;
+        }
+
+        return 1;
+      });
+    },
+
+    cdroms() {
+      const disks = this?.spec?.template?.spec?.domain?.devices?.disks || [];
+
+      return disks.filter((disk) => {
+        return !!disk.cdrom;
+      });
+    },
+  },
+
+  methods: {
+    getDeviceType(o) {
+      if (o.disk) {
+        return 'Disk';
+      } else {
+        return 'CD-ROM';
+      }
+    },
+    isEmpty(o) {
+      return o !== undefined && Object.keys(o).length === 0;
+    },
+    onTabChanged({ tab }) {
+      if (tab.name === 'advanced') {
+        this.$refs.yamlEditor?.refresh();
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <CruResource
+    v-else
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :apply-hooks="applyHooks"
+  >
+    <Tabbed v-if="spec" :side-tabs="true" @changed="onTabChanged">
+      <Tab name="Basics" :label="t('harvester.virtualMachine.detail.tabs.basics')">
+        <div class="row">
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.name')" :value="name" />
+          </div>
+
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.fields.image')" :value="imageName" />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.hostname')" :value="hostname" />
+          </div>
+
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.input.MachineType')" :value="machineType" />
+          </div>
+        </div>
+
+        <CpuMemory :cpu="cpu" :mode="mode" :memory="memory" />
+
+        <div class="row">
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.bootOrder')">
+              <template #value>
+                <div>
+                  <ul>
+                    <li v-for="(disk) in disks" :key="disk.bootOrder">
+                      {{ disk.bootOrder }}. {{ disk.name }} ({{ getDeviceType(disk) }})
+                    </li>
+                  </ul>
+                </div>
+              </template>
+            </LabelValue>
+          </div>
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.CDROMs')">
+              <template #value>
+                <div>
+                  <ul v-if="cdroms.length > 0">
+                    <li v-for="(rom) in cdroms" :key="rom.name">
+                      {{ rom.name }}
+                    </li>
+                  </ul>
+                  <span v-else>
+                    {{ t("harvester.virtualMachine.detail.notAvailable") }}
+                  </span>
+                </div>
+              </template>
+            </LabelValue>
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="volume"
+        :label="t('harvester.tab.volume')"
+        :weight="-1"
+      >
+        <Volume v-model="diskRows" :mode="mode" />
+      </Tab>
+
+      <Tab
+        name="network"
+        :label="t('harvester.tab.network')"
+        :weight="-2"
+      >
+        <Network v-model="networkRows" :mode="mode" />
+      </Tab>
+
+      <Tab name="keypairs" :label="t('harvester.virtualMachine.detail.tabs.keypairs')" class="bordered-table" :weight="-3">
+        <OverviewKeypairs v-if="vm" v-model="vm" />
+      </Tab>
+
+      <Tab
+        name="advanced"
+        :label="t('harvester.tab.advanced')"
+        :weight="-4"
+      >
+        <CloudConfig
+          ref="yamlEditor"
+          :user-script="userScript"
+          :mode="mode"
+          :network-script="networkScript"
+        />
+
+        <div class="spacer"></div>
+        <Checkbox v-model="installUSBTablet" :mode="mode" class="check" type="checkbox" :label="t('harvester.virtualMachine.enableUsb')" />
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
diff --git a/pkg/harvester/detail/harvesterhci.io.virtualmachineimage/Storage.vue b/pkg/harvester/detail/harvesterhci.io.virtualmachineimage/Storage.vue
new file mode 100644
index 00000000..6156c325
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.virtualmachineimage/Storage.vue
@@ -0,0 +1,69 @@
+<script>
+import LabelValue from '@shell/components/LabelValue';
+
+export default {
+  props: {
+    value: {
+      type:    Object,
+      default: () => {}
+    },
+  },
+
+  components: { LabelValue },
+
+  computed: {
+    migratable() {
+      return this.value.migratable === 'true' ? this.t('generic.yes') : this.t('generic.no');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="value.nodeSelector"
+      class="row mb-20"
+    >
+      <div class="col span-12">
+        <LabelValue
+          :name="t('harvester.storage.nodeSelector.label')"
+          :value="value.nodeSelector"
+        />
+      </div>
+    </div>
+    <div
+      v-if="value.diskSelector"
+      class="row mb-20"
+    >
+      <div class="col span-12">
+        <LabelValue
+          :name="t('harvester.storage.diskSelector.label')"
+          :value="value.diskSelector"
+        />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabelValue
+          :name="t('harvester.storage.migratable.label')"
+          :value="migratable"
+        />
+      </div>
+      <div class="col span-6">
+        <LabelValue
+          :name="t('harvester.storage.numberOfReplicas.label')"
+          :value="value.numberOfReplicas"
+        />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabelValue
+          :name="t('harvester.storage.staleReplicaTimeout.label')"
+          :value="value.staleReplicaTimeout"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/detail/harvesterhci.io.virtualmachineimage/index.vue b/pkg/harvester/detail/harvesterhci.io.virtualmachineimage/index.vue
new file mode 100644
index 00000000..fcb523d3
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.virtualmachineimage/index.vue
@@ -0,0 +1,137 @@
+<script>
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+import LabelValue from '@shell/components/LabelValue';
+import { DESCRIPTION } from '@shell/config/labels-annotations';
+import { HCI } from '@pkg/harvester/config/labels-annotations';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { findBy } from '@shell/utils/array';
+import { get } from '@shell/utils/object';
+
+import Storage from './Storage';
+
+export default {
+  components: {
+    CopyToClipboardText,
+    Tab,
+    Tabbed,
+    LabelValue,
+    Storage,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: {
+    formattedValue() {
+      return this.value?.downSize;
+    },
+
+    url() {
+      return this.value?.spec?.url || '-';
+    },
+
+    description() {
+      return this.value?.metadata?.annotations?.[DESCRIPTION] || '-';
+    },
+
+    errorMessage() {
+      const conditions = get(this.value, 'status.conditions');
+
+      return findBy(conditions, 'type', 'Imported')?.message || '-';
+    },
+
+    isUpload() {
+      return this.value?.spec?.sourceType === 'upload';
+    },
+
+    imageName() {
+      return this.value?.metadata?.annotations?.[HCI.IMAGE_NAME] || '-';
+    },
+  }
+};
+</script>
+
+<template>
+  <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+    <Tab
+      name="detail"
+      :label="t('harvester.virtualMachine.detail.tabs.basics')"
+      class="bordered-table"
+      :weight="99"
+    >
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue
+            v-if="isUpload"
+            :name="t('harvester.image.fileName')"
+            :value="imageName"
+            class="mb-20"
+          />
+          <LabelValue
+            v-else
+            :name="t('harvester.image.url')"
+            :value="url"
+            class="mb-20"
+          >
+            <template #value>
+              <div v-if="url !== '-'">
+                <CopyToClipboardText :text="url" />
+              </div>
+              <div v-else>
+                {{ url }}
+              </div>
+            </template>
+          </LabelValue>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue :name="t('harvester.image.size')" :value="formattedValue" class="mb-20" />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue :name="t('nameNsDescription.description.label')" :value="description" class="mb-20" />
+        </div>
+      </div>
+
+      <div v-if="errorMessage !== '-'" class="row">
+        <div class="col span-12">
+          <div>
+            {{ t('tableHeaders.message') }}
+          </div>
+          <div :class="{ 'error': errorMessage !== '-' }">
+            {{ errorMessage }}
+          </div>
+        </div>
+      </div>
+    </Tab>
+    <Tab
+      name="storage"
+      :label="t('harvester.storage.label')"
+      :weight="89"
+      class="bordered-table"
+    >
+      <Storage
+        v-model="value.spec.storageClassParameters"
+      />
+    </Tab>
+  </Tabbed>
+</template>
+
+<style lang="scss" scoped>
+.error {
+  color: var(--error);
+}
+</style>
diff --git a/pkg/harvester/detail/harvesterhci.io.vmsnapshot/index.vue b/pkg/harvester/detail/harvesterhci.io.vmsnapshot/index.vue
new file mode 100644
index 00000000..ba96430e
--- /dev/null
+++ b/pkg/harvester/detail/harvesterhci.io.vmsnapshot/index.vue
@@ -0,0 +1,221 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import Loading from '@shell/components/Loading';
+import CruResource from '@shell/components/CruResource';
+import { Checkbox } from '@components/Form/Checkbox';
+import LabelValue from '@shell/components/LabelValue';
+import VM_MIXIN from '../../mixins/harvester-vm';
+import { allHash } from '@shell/utils/promise';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { HCI } from '../../types';
+import CpuMemory from '../../edit/kubevirt.io.virtualmachine/VirtualMachineCpuMemory';
+
+import OverviewKeypairs from '../kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineKeypairs';
+import Volume from '../../edit/kubevirt.io.virtualmachine/VirtualMachineVolume';
+import Network from '../../edit/kubevirt.io.virtualmachine/VirtualMachineNetwork';
+import CloudConfig from '../../edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig';
+const UNDEFINED = 'n/a';
+
+export default {
+  name: 'VMSnapshotDetail',
+
+  components: {
+    Volume,
+    Network,
+    CruResource,
+    Tabbed,
+    Loading,
+    LabelValue,
+    Tab,
+    CloudConfig,
+    Checkbox,
+    CpuMemory,
+    OverviewKeypairs,
+  },
+
+  mixins: [CreateEditView, VM_MIXIN],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    await allHash({ allImages: this.$store.dispatch('harvester/findAll', { type: HCI.IMAGE }) });
+  },
+
+  data() {
+    return { vm: null };
+  },
+
+  computed: {
+    name() {
+      return this.value?.metadata?.name || UNDEFINED;
+    },
+
+    hostname() {
+      return this?.spec?.template?.spec?.hostname;
+    },
+
+    imageName() {
+      const imageList = this.$store.getters['harvester/all'](HCI.IMAGE) || [];
+
+      const image = imageList.find( I => this.imageId === I.id);
+
+      return image?.spec?.displayName || '-';
+    },
+
+    disks() {
+      const disks = this?.spec?.template?.spec?.domain?.devices?.disks || [];
+
+      return disks.filter((disk) => {
+        return !!disk.bootOrder;
+      }).sort((a, b) => {
+        if (a.bootOrder < b.bootOrder) {
+          return -1;
+        }
+
+        return 1;
+      });
+    },
+
+    cdroms() {
+      const disks = this?.spec?.template?.spec?.domain?.devices?.disks || [];
+
+      return disks.filter((disk) => {
+        return !!disk.cdrom;
+      });
+    },
+  },
+
+  methods: {
+    getDeviceType(o) {
+      if (o.disk) {
+        return 'Disk';
+      } else {
+        return 'CD-ROM';
+      }
+    },
+    isEmpty(o) {
+      return o !== undefined && Object.keys(o).length === 0;
+    },
+    onTabChanged({ tab }) {
+      if (tab.name === 'advanced') {
+        this.$refs.yamlEditor?.refresh();
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <CruResource
+    v-else
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :apply-hooks="applyHooks"
+  >
+    <Tabbed v-if="spec" :side-tabs="true" @changed="onTabChanged">
+      <Tab name="Basics" :label="t('harvester.virtualMachine.detail.tabs.basics')">
+        <div class="row mb-10">
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.name')" :value="name" />
+          </div>
+
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.fields.image')" :value="imageName" />
+          </div>
+        </div>
+
+        <div class="row mb-10">
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.hostname')" :value="hostname" />
+          </div>
+
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.input.MachineType')" :value="machineType" />
+          </div>
+        </div>
+
+        <CpuMemory :cpu="cpu" :mode="mode" :memory="memory" />
+
+        <div class="row mb-10">
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.bootOrder')">
+              <template #value>
+                <div>
+                  <ul>
+                    <li v-for="(disk) in disks" :key="disk.bootOrder">
+                      {{ disk.bootOrder }}. {{ disk.name }} ({{ getDeviceType(disk) }})
+                    </li>
+                  </ul>
+                </div>
+              </template>
+            </LabelValue>
+          </div>
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.CDROMs')">
+              <template #value>
+                <div>
+                  <ul v-if="cdroms.length > 0">
+                    <li v-for="(rom) in cdroms" :key="rom.name">
+                      {{ rom.name }}
+                    </li>
+                  </ul>
+                  <span v-else>
+                    {{ t("harvester.virtualMachine.detail.notAvailable") }}
+                  </span>
+                </div>
+              </template>
+            </LabelValue>
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="volume"
+        :label="t('harvester.tab.volume')"
+        :weight="-1"
+      >
+        <Volume v-model="diskRows" :mode="mode" />
+      </Tab>
+
+      <Tab
+        name="network"
+        :label="t('harvester.tab.network')"
+        :weight="-2"
+      >
+        <Network v-model="networkRows" :mode="mode" />
+      </Tab>
+
+      <Tab name="keypairs" :label="t('harvester.virtualMachine.detail.tabs.keypairs')" class="bordered-table" :weight="-3">
+        <OverviewKeypairs v-if="vm" v-model="vm" />
+      </Tab>
+
+      <Tab
+        name="advanced"
+        :label="t('harvester.tab.advanced')"
+        :weight="-4"
+      >
+        <CloudConfig
+          ref="yamlEditor"
+          :user-script="userScript"
+          :mode="mode"
+          :network-script="networkScript"
+        />
+
+        <div class="spacer"></div>
+        <Checkbox v-model="installUSBTablet" :mode="mode" class="check" type="checkbox" :label="t('harvester.virtualMachine.enableUsb')" />
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
diff --git a/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineBasics.vue b/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineBasics.vue
new file mode 100644
index 00000000..8846f9f8
--- /dev/null
+++ b/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineBasics.vue
@@ -0,0 +1,283 @@
+<script>
+import HarvesterIpAddress from '../../../formatters/HarvesterIpAddress';
+import VMConsoleBar from '../../../components/VMConsoleBar';
+import LabelValue from '@shell/components/LabelValue';
+import InputOrDisplay from '@shell/components/InputOrDisplay';
+import { HCI } from '../../../types';
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+const UNDEFINED = 'n/a';
+
+export default {
+  name: 'VMDetailsBasics',
+
+  components: {
+    VMConsoleBar,
+    HarvesterIpAddress,
+    LabelValue,
+    InputOrDisplay
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+    vmi: {
+      type:     Object,
+      required: true,
+      default:  () => {
+        return {};
+      }
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+  },
+
+  computed: {
+    creationTimestamp() {
+      const date = new Date(this.value?.metadata?.creationTimestamp);
+
+      if (!date.getMonth) {
+        return UNDEFINED;
+      }
+
+      return `${ date.getMonth() + 1 }/${ date.getDate() }/${ date.getUTCFullYear() }`;
+    },
+
+    node() {
+      const node = this.vmi?.status?.nodeName || UNDEFINED;
+
+      return this.isDown ? this.t('harvester.virtualMachine.detail.details.down') : node;
+    },
+
+    hostname() {
+      const hostName = this.vmi?.spec?.hostname || this.vmi?.status?.guestOSInfo?.hostname || this.t('harvester.virtualMachine.detail.GuestAgentNotInstalled');
+
+      return this.isDown ? this.t('harvester.virtualMachine.detail.details.down') : hostName;
+    },
+
+    imageName() {
+      const imageList = this.$store.getters['harvester/all'](HCI.IMAGE) || [];
+
+      const image = imageList.find( (I) => {
+        return this.value.rootImageId === I.id;
+      });
+
+      return image?.spec?.displayName || 'N/A';
+    },
+
+    disks() {
+      const disks = this.value?.spec?.template?.spec?.domain?.devices?.disks || [];
+
+      return disks.filter((disk) => {
+        return !!disk.bootOrder;
+      }).sort((a, b) => {
+        if (a.bootOrder < b.bootOrder) {
+          return -1;
+        }
+
+        return 1;
+      });
+    },
+
+    cdroms() {
+      const disks = this.value?.spec?.template?.spec?.domain?.devices?.disks || [];
+
+      return disks.filter((disk) => {
+        return !!disk.cdrom;
+      });
+    },
+
+    flavor() {
+      const domain = this.value?.spec?.template?.spec?.domain;
+
+      return `${ domain.cpu?.cores } vCPU , ${ domain.resources?.limits?.memory } ${ this.t('harvester.virtualMachine.input.memory') }`;
+    },
+
+    kernelRelease() {
+      const kernelRelease = this.vmi?.status?.guestOSInfo?.kernelRelease || this.t('harvester.virtualMachine.detail.GuestAgentNotInstalled');
+
+      return this.isDown ? this.t('harvester.virtualMachine.detail.details.down') : kernelRelease;
+    },
+
+    operatingSystem() {
+      const operatingSystem = this.vmi?.status?.guestOSInfo?.prettyName || this.t('harvester.virtualMachine.detail.GuestAgentNotInstalled');
+
+      return this.isDown ? this.t('harvester.virtualMachine.detail.details.down') : operatingSystem;
+    },
+
+    isDown() {
+      return this.isEmpty(this.vmi);
+    },
+
+    machineType() {
+      return this.value?.spec?.template?.spec?.domain?.machine?.type || undefined;
+    }
+  },
+
+  methods: {
+    getDeviceType(o) {
+      if (o.disk) {
+        return 'Disk';
+      } else {
+        return 'CD-ROM';
+      }
+    },
+    isEmpty(o) {
+      return o !== undefined && Object.keys(o).length === 0;
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <VMConsoleBar :resource="value" class="consoleBut" />
+    <div class="overview-basics">
+      <div class="row">
+        <div class="col span-6">
+          <LabelValue :name="t('harvester.virtualMachine.detail.details.name')" :value="value.nameDisplay">
+            <template #value>
+              <div class="smart-row">
+                <div class="console">
+                  {{ value.nameDisplay }}
+                </div>
+              </div>
+            </template>
+          </LabelValue>
+        </div>
+        <div class="col span-6">
+          <LabelValue :name="t('harvester.fields.image')" :value="imageName" />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col span-6">
+          <LabelValue :name="t('harvester.virtualMachine.detail.details.hostname')" :value="hostname">
+            <template #value>
+              <div>
+                {{ hostname }}
+              </div>
+            </template>
+          </LabelValue>
+        </div>
+
+        <div class="col span-6">
+          <LabelValue :name="t('harvester.virtualMachine.detail.details.node')" :value="node">
+            <template #value>
+              <div>
+                {{ node }}
+              </div>
+            </template>
+          </LabelValue>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col span-6">
+          <LabelValue :name="t('harvester.virtualMachine.detail.details.ipAddress')">
+            <template #value>
+              <HarvesterIpAddress v-model="value.id" :row="value" />
+            </template>
+          </LabelValue>
+        </div>
+
+        <div class="col span-6">
+          <LabelValue :name="t('harvester.virtualMachine.detail.details.created')" :value="creationTimestamp" />
+        </div>
+      </div>
+
+      <hr class="section-divider" />
+
+      <h2>{{ t('harvester.virtualMachine.detail.tabs.configurations') }}</h2>
+
+      <div class="row">
+        <div class="col span-6">
+          <InputOrDisplay :name="t('harvester.virtualMachine.detail.details.bootOrder')" :value="disks" :mode="mode">
+            <template #value>
+              <ul>
+                <li v-for="(disk) in disks" :key="disk.bootOrder">
+                  {{ disk.bootOrder }}. {{ disk.name }} ({{ getDeviceType(disk) }})
+                </li>
+              </ul>
+            </template>
+          </InputOrDisplay>
+        </div>
+        <div class="col span-6">
+          <InputOrDisplay :name="t('harvester.virtualMachine.detail.details.CDROMs')" :value="cdroms" :mode="mode">
+            <template #value>
+              <div>
+                <ul v-if="cdroms.length > 0">
+                  <li v-for="(rom) in cdroms" :key="rom.name">
+                    {{ rom.name }}
+                  </li>
+                </ul>
+                <span v-else>
+                  {{ t("harvester.virtualMachine.detail.notAvailable") }}
+                </span>
+              </div>
+            </template>
+          </InputOrDisplay>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-6">
+          <LabelValue :name="t('harvester.virtualMachine.detail.details.operatingSystem')" :value="operatingSystem" />
+        </div>
+        <LabelValue :name="t('harvester.virtualMachine.detail.details.flavor')" :value="flavor" />
+      </div>
+      <div class="row">
+        <div class="col span-6">
+          <LabelValue :name="t('harvester.virtualMachine.detail.details.kernelRelease')" :value="kernelRelease" />
+        </div>
+
+        <div class="col span-6">
+          <LabelValue :name="t('harvester.virtualMachine.input.MachineType')" :value="machineType" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .consoleBut {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .overview-basics {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: auto;
+    grid-row-gap: 15px;
+
+    .badge-state {
+      padding: 2px 5px;
+      font-size: 12px;
+      margin-right: 3px;
+    }
+
+    .smart-row {
+      display: flex;
+      flex-direction: row;
+
+      .console {
+        display: flex;
+        overflow: hidden;
+      }
+    }
+
+    &__name {
+      flex: 1;
+    }
+
+    &__ssh-key {
+      min-width: 150px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineEvents.vue b/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineEvents.vue
new file mode 100644
index 00000000..56ba3d8e
--- /dev/null
+++ b/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineEvents.vue
@@ -0,0 +1,75 @@
+<script>
+import { REASON } from '@shell/config/table-headers';
+import SortableTable from '@shell/components/SortableTable';
+
+export default {
+  name: 'VirtualMachineEvents',
+
+  components: { SortableTable },
+
+  props: {
+    events: {
+      type:     Array,
+      required: true,
+    },
+  },
+
+  data() {
+    const reason = {
+      ...REASON,
+      canBeVariable: true,
+      width:         180
+    };
+
+    const eventHeaders = [
+      reason,
+      {
+        name:          'resource',
+        label:         'Resource',
+        labelKey:      'clusterIndexPage.sections.events.resource.label',
+        value:         'displayInvolvedObject',
+        sort:          ['involvedObject.kind', 'involvedObject.name'],
+        canBeVariable: true,
+      },
+      {
+        align:         'right',
+        name:          'date',
+        label:         'Date',
+        labelKey:      'clusterIndexPage.sections.events.date.label',
+        value:         'lastTimestamp',
+        sort:          'lastTimestamp:desc',
+        formatter:     'LiveDate',
+        formatterOpts: { addSuffix: true },
+        width:         125,
+        defaultSort:   true,
+      },
+    ];
+
+    return { eventHeaders };
+  },
+
+};
+</script>
+
+<template>
+  <SortableTable
+    :rows="events"
+    :headers="eventHeaders"
+    key-field="id"
+    :search="false"
+    :table-actions="false"
+    :row-actions="false"
+    :paging="true"
+    :rows-per-page="10"
+    default-sort-by="date"
+  >
+    <template #cell:resource="{row, value}">
+      <div class="text-info">
+        {{ value }}
+      </div>
+      <div v-if="row.message">
+        {{ row.displayMessage }}
+      </div>
+    </template>
+  </SortableTable>
+</template>
diff --git a/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineKeypairs.vue b/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineKeypairs.vue
new file mode 100644
index 00000000..317e49bc
--- /dev/null
+++ b/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineKeypairs.vue
@@ -0,0 +1,114 @@
+<script>
+import isString from 'lodash/isString';
+import { HCI } from '../../../types';
+import { allHash } from '@shell/utils/promise';
+import impl from '../../../mixins/harvester-vm/impl';
+
+export default {
+  mixins: [impl],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    }
+  },
+
+  async fetch() {
+    const hash = await allHash({ allSSHs: this.$store.dispatch('harvester/findAll', { type: HCI.SSH }) });
+
+    this.allSSHs = hash.allSSHs;
+  },
+
+  data() {
+    return {
+      allSSHs: [],
+      sshKeys: []
+    };
+  },
+
+  methods: {
+    toggleShow(idx) {
+      const ssh = this.sshKeys[idx];
+
+      this.$set(this.sshKeys, idx, {
+        ...ssh,
+        showKey: !ssh.showKey
+      });
+    },
+
+    getKeys() {
+      return this.mergeAllSSHs(this.value?.spec);
+    },
+
+    isShow(id = '') {
+      const ssh = this.sshKeys.find(O => O?.data?.id === id) || {};
+
+      return ssh.showKey || false;
+    }
+  },
+
+  watch: {
+    allSSHs(neu) {
+      const out = this.getKeys().map((ssh) => {
+        return {
+          id:        ssh.id,
+          publicKey: isString(ssh.data) ? ssh.data : ssh.data?.spec?.publicKey,
+          showKey:   this.isShow(ssh.id)
+        };
+      });
+
+      this.$set(this, 'sshKeys', out);
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="overview-sshKeys">
+    <div v-for="(ssh, index) in sshKeys" :key="index" class="row overview-sshKeys__item">
+      <div class="col span-4">
+        {{ ssh.id }}
+      </div>
+      <div class="col span-7 offset-1">
+        <div v-if="ssh.showKey" class="key-display">
+          {{ ssh.publicKey }}
+          <button class="btn btn-sm role-link hide-bar" @click="toggleShow(index)">
+            <i class="icon icon-x"></i>
+          </button>
+        </div>
+        <button v-else class="btn btn-sm role-link" @click="toggleShow(index)">
+          *******<i class="icons icon-show"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .overview-sshKeys {
+    text-align: left;
+    max-height: 700px;
+    overflow: auto;
+
+    &__item {
+      margin-bottom: 15px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .key-display {
+      position: relative;
+      padding-right: 30px;
+      word-break: break-word;
+
+      .hide-bar {
+        position: absolute;
+        top: -10px;
+        right: 10px;
+      }
+    }
+  }
+</style>
diff --git a/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineMigration.vue b/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineMigration.vue
new file mode 100644
index 00000000..65a940f2
--- /dev/null
+++ b/pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineMigration.vue
@@ -0,0 +1,79 @@
+<script>
+import LabelValue from '@shell/components/LabelValue';
+
+export default {
+  name: 'VirtualMachineMigration',
+
+  components: { LabelValue },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    vmiResource: {
+      type:     Object,
+      required: true,
+      default:  () => {
+        return {};
+      }
+    }
+  },
+
+  data() {
+    return { localResource: this.vmiResource };
+  },
+
+  computed: {
+    migrationState() {
+      return this.localResource?.status?.migrationState;
+    },
+    sourceNode() {
+      return this.migrationState?.sourceNode || 'N/A';
+    },
+    targetNode() {
+      return this.migrationState?.targetNode || 'N/A';
+    },
+    started() {
+      return this.migrationState?.startTimestamp || 'N/A';
+    },
+    ended() {
+      return this.migrationState?.endTimestamp || 'N/A';
+    },
+    message() {
+      return 'N/A';
+    }
+  },
+
+  watch: {
+    vmiResource: {
+      handler(neu) {
+        this.localResource = neu;
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabelValue :name="t('harvester.virtualMachine.detail.details.sourceNode')" :value="sourceNode" />
+      </div>
+      <div class="col span-6">
+        <LabelValue :name="t('harvester.virtualMachine.detail.details.targetNode')" :value="targetNode" />
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabelValue :name="t('harvester.virtualMachine.detail.details.started')" :value="started" />
+      </div>
+      <div class="col span-6">
+        <LabelValue :name="t('harvester.virtualMachine.detail.details.ended')" :value="ended" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue b/pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue
new file mode 100644
index 00000000..e3032ffa
--- /dev/null
+++ b/pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue
@@ -0,0 +1,271 @@
+<script>
+import { mapGetters } from 'vuex';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { EVENT, SERVICE, POD } from '@shell/config/types';
+import { HCI } from '../../types';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import VM_MIXIN from '../../mixins/harvester-vm';
+import DashboardMetrics from '@shell/components/DashboardMetrics';
+import { allHash, setPromiseResult } from '@shell/utils/promise';
+import { allDashboardsExist } from '@shell/utils/grafana';
+
+import CloudConfig from '../../edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig';
+import Volume from '../../edit/kubevirt.io.virtualmachine/VirtualMachineVolume';
+import Network from '../../edit/kubevirt.io.virtualmachine/VirtualMachineNetwork';
+import NodeScheduling from '@shell/components/form/NodeScheduling';
+import PodAffinity from '@shell/components/form/PodAffinity';
+import AccessCredentials from '../../edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials';
+import Events from './VirtualMachineTabs/VirtualMachineEvents';
+import Migration from './VirtualMachineTabs/VirtualMachineMigration';
+import OverviewBasics from './VirtualMachineTabs/VirtualMachineBasics';
+import OverviewKeypairs from './VirtualMachineTabs/VirtualMachineKeypairs';
+import KeyValue from '@shell/components/form/KeyValue';
+import Labels from '@shell/components/form/Labels';
+
+const VM_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/harvester-vm-detail-1/vm-info-detail?orgId=1';
+
+export default {
+  name: 'VMIDetailsPage',
+
+  components: {
+    Tab,
+    Tabbed,
+    Events,
+    OverviewBasics,
+    Volume,
+    Network,
+    OverviewKeypairs,
+    CloudConfig,
+    Migration,
+    DashboardMetrics,
+    AccessCredentials,
+    NodeScheduling,
+    PodAffinity,
+    KeyValue,
+    Labels,
+  },
+
+  mixins: [CreateEditView, VM_MIXIN],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      switchToCloud: false,
+      VM_METRICS_DETAIL_URL,
+      showVmMetrics: false,
+    };
+  },
+
+  async created() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      pods:     this.$store.dispatch(`${ inStore }/findAll`, { type: POD }),
+      services: this.$store.dispatch(`${ inStore }/findAll`, { type: SERVICE }),
+      events:   this.$store.dispatch(`${ inStore }/findAll`, { type: EVENT }),
+      allSSHs:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SSH }),
+      vmis:     this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VMI }),
+      restore:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.RESTORE }),
+    };
+
+    await allHash(hash);
+
+    setPromiseResult(
+      allDashboardsExist(this.$store, this.currentCluster.id, [VM_METRICS_DETAIL_URL], 'harvester'),
+      this,
+      'showVmMetrics',
+      'Determine vm metrics'
+    );
+  },
+
+  computed: {
+    ...mapGetters(['currentCluster']),
+
+    vmi() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      const vmiList = this.$store.getters[`${ inStore }/all`](HCI.VMI) || [];
+      const vmi = vmiList.find( (VMI) => {
+        return VMI?.metadata?.ownerReferences?.[0]?.uid === this.value?.metadata?.uid;
+      });
+
+      return vmi;
+    },
+
+    allEvents() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/all`](EVENT);
+    },
+
+    events() {
+      return this.allEvents.filter((e) => {
+        const { name, creationTimestamp } = this.value?.metadata || {};
+        const podName = this.value.podResource?.metadata?.name;
+        const pvcName = this.value.persistentVolumeClaimName || [];
+
+        const involvedName = e?.involvedObject?.name;
+
+        const matchPVC = pvcName.find(name => name === involvedName);
+
+        return (involvedName === name || involvedName === podName || matchPVC) && e.firstTimestamp >= creationTimestamp;
+      }).sort((a, b) => {
+        if (a.lastTimestamp > b.lastTimestamp) {
+          return -1;
+        }
+
+        return 1;
+      });
+    },
+
+    graphVars() {
+      return {
+        namespace: this.value.namespace,
+        vm:        this.value.name
+      };
+    },
+  },
+
+  methods: {
+    onTabChanged({ tab }) {
+      if (tab.name === 'cloudConfig') {
+        this.$refs.yamlEditor?.refresh();
+      }
+    },
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        const diskRows = this.getDiskRows(neu);
+
+        this.$set(this, 'diskRows', diskRows);
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true" @changed="onTabChanged">
+      <Tab name="basics" :label="t('harvester.virtualMachine.detail.tabs.basics')" class="bordered-table" :weight="7">
+        <OverviewBasics v-model="value" :vmi="vmi" mode="view" />
+      </Tab>
+
+      <Tab name="disks" :label="t('harvester.tab.volume')" class="bordered-table" :weight="6">
+        <Volume
+          v-model="diskRows"
+          mode="view"
+          :namespace="value.metadata.namespace"
+          :vm="value"
+          :resource-type="value.type"
+        />
+      </Tab>
+
+      <Tab name="networks" :label="t('harvester.virtualMachine.detail.tabs.networks')" class="bordered-table" :weight="5">
+        <Network v-model="networkRows" mode="view" />
+      </Tab>
+
+      <Tab name="keypairs" :label="t('harvester.virtualMachine.detail.tabs.keypairs')" class="bordered-table" :weight="3">
+        <OverviewKeypairs v-model="value" />
+      </Tab>
+
+      <Tab
+        v-if="showVmMetrics"
+        name="vm-metrics"
+        :label="t('harvester.virtualMachine.detail.tabs.metrics')"
+        :weight="2.5"
+      >
+        <template #default="props">
+          <DashboardMetrics
+            v-if="props.active"
+            :detail-url="VM_METRICS_DETAIL_URL"
+            graph-height="550px"
+            :has-summary-and-detail="false"
+            :vars="graphVars"
+          />
+        </template>
+      </Tab>
+
+      <Tab name="nodeScheduling" :label="t('workload.container.titles.nodeScheduling')" :weight="2.4">
+        <template #default="{active}">
+          <NodeScheduling v-if="spec" :key="active" :mode="mode" :value="spec.template.spec" :nodes="nodesIdOptions" />
+        </template>
+      </Tab>
+
+      <Tab :label="t('harvester.tab.vmScheduling')" name="vmScheduling" :weight="2.3">
+        <template #default="{active}">
+          <PodAffinity
+            v-if="spec"
+            :key="active"
+            :mode="mode"
+            :value="spec.template.spec"
+            :nodes="nodes"
+            :all-namespaces-option-available="true"
+            :namespaces="filteredNamespaces"
+            :overwrite-labels="affinityLabels"
+          />
+        </template>
+      </Tab>
+
+      <Tab :label="t('harvester.tab.accessCredentials')" class="bordered-table" name="accessCredentials" :weight="2.2">
+        <AccessCredentials mode="view" :value="accessCredentials" :resource="value" />
+      </Tab>
+
+      <Tab name="cloudConfig" :label="t('harvester.virtualMachine.detail.tabs.cloudConfig')" class="bordered-table" :weight="2">
+        <CloudConfig
+          ref="yamlEditor"
+          mode="view"
+          :user-script="userScript"
+          :network-script="networkScript"
+        />
+      </Tab>
+
+      <Tab name="event" :label="t('harvester.virtualMachine.detail.tabs.events')" :weight="1">
+        <Events :resource="vmi" :events="events" />
+      </Tab>
+
+      <Tab name="migration" :label="t('harvester.virtualMachine.detail.tabs.migration')">
+        <Migration v-model="value" :vmi-resource="vmi" />
+      </Tab>
+
+      <Tab
+        name="instanceLabel"
+        :label="t('harvester.tab.instanceLabel')"
+        :weight="-99"
+      >
+        <Labels
+          :default-container-class="'labels-and-annotations-container'"
+          :value="value"
+          :mode="mode"
+          :display-side-by-side="false"
+          :show-annotations="false"
+          :show-label-title="false"
+        >
+          <template #labels="{toggler}">
+            <KeyValue
+              key="labels"
+              :value="value.instanceLabels"
+              :protected-keys="value.systemLabels || []"
+              :toggle-filter="toggler"
+              :add-label="t('labels.addLabel')"
+              :mode="mode"
+              :read-allowed="false"
+              :value-can-be-empty="true"
+              @input="value.setInstanceLabels($event)"
+            />
+          </template>
+        </Labels>
+      </Tab>
+    </Tabbed>
+  </div>
+</template>
diff --git a/pkg/harvester/detail/loadbalancer.harvesterhci.io.ippool.vue b/pkg/harvester/detail/loadbalancer.harvesterhci.io.ippool.vue
new file mode 100644
index 00000000..438dadab
--- /dev/null
+++ b/pkg/harvester/detail/loadbalancer.harvesterhci.io.ippool.vue
@@ -0,0 +1,106 @@
+<script>
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import SortableTable from '@shell/components/SortableTable';
+import { NETWORK_ATTACHMENT } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
+import { NETWORK_HEADERS } from '@pkg/harvester/list/harvesterhci.io.networkattachmentdefinition.vue';
+
+export default {
+  components: {
+    ResourceTabs,
+    Tab,
+    SortableTable,
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = { ipPools: this.$store.dispatch(`${ inStore }/findAll`, { type: NETWORK_ATTACHMENT }) };
+
+    await allHash(hash);
+  },
+
+  computed: {
+    networks() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const networks = this.$store.getters[`${ inStore }/all`](NETWORK_ATTACHMENT);
+
+      return networks.filter(n => n?.id === this.value?.spec?.selector?.network);
+    },
+
+    networkHeaders() {
+      return NETWORK_HEADERS;
+    },
+
+    ranges() {
+      return this.value.spec.ranges;
+    },
+
+    rangeHeaders() {
+      return [{
+        name:  'subnet',
+        label: this.t('harvester.ipPool.subnet.label'),
+        value: 'subnet',
+      }, {
+        name:  'gateway',
+        label: this.t('harvester.ipPool.gateway.label'),
+        value: 'gateway',
+      }, {
+        name:  'startIP',
+        label: this.t('harvester.ipPool.startIP.label'),
+        value: 'rangeStart',
+      }, {
+        name:  'endIP',
+        label: this.t('harvester.ipPool.endIP.label'),
+        value: 'rangeEnd',
+      }];
+    },
+  },
+};
+</script>
+
+<template>
+  <ResourceTabs
+    v-model="value"
+    :need-related="false"
+  >
+    <Tab
+      name="network"
+      label-key="harvester.ipPool.network.label"
+      :weight="99"
+    >
+      <SortableTable
+        key-field="_key"
+        :headers="networkHeaders"
+        :rows="networks"
+        :row-actions="false"
+        :table-actions="false"
+        :search="false"
+      />
+    </Tab>
+    <Tab
+      name="range"
+      label-key="harvester.ipPool.tabs.range"
+      :weight="89"
+    >
+      <SortableTable
+        key-field="_key"
+        :headers="rangeHeaders"
+        :rows="ranges"
+        :row-actions="false"
+        :table-actions="false"
+        :search="false"
+      />
+    </Tab>
+  </ResourceTabs>
+</template>
diff --git a/pkg/harvester/detail/loadbalancer.harvesterhci.io.loadbalancer.vue b/pkg/harvester/detail/loadbalancer.harvesterhci.io.loadbalancer.vue
new file mode 100644
index 00000000..bbe1cf14
--- /dev/null
+++ b/pkg/harvester/detail/loadbalancer.harvesterhci.io.loadbalancer.vue
@@ -0,0 +1,190 @@
+<script>
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import SortableTable from '@shell/components/SortableTable';
+import { HCI } from '@pkg/harvester/types';
+import { allHash } from '@shell/utils/promise';
+import { KEY, VALUE } from '@shell/config/table-headers';
+import { VM_HEADERS } from '@pkg/harvester/list/kubevirt.io.virtualmachine';
+import { matching } from '@shell/utils/selector';
+import { IP_POOL_HEADERS } from '../product';
+
+export default {
+  components: {
+    ResourceTabs,
+    Tab,
+    SortableTable,
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      ipPools: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.IP_POOL }),
+      vms:     this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM }),
+    };
+
+    await allHash(hash);
+  },
+
+  computed: {
+    ipPools() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const ipPools = this.$store.getters[`${ inStore }/all`](HCI.IP_POOL);
+
+      return ipPools.filter(i => i.id === this.value.status.allocatedAddress.ipPool);
+    },
+
+    ipPoolHeaders() {
+      return IP_POOL_HEADERS;
+    },
+
+    listeners() {
+      const listeners = this.value?.spec?.listeners;
+
+      return listeners;
+    },
+
+    listenerHeaders() {
+      return [
+        {
+          name:  'name',
+          label: this.t('tableHeaders.name'),
+          value: 'name',
+          sort:  'name:desc',
+        },
+        {
+          name:  'port',
+          label: this.t('tableHeaders.port'),
+          value: 'port',
+          sort:  'port:desc',
+        },
+        {
+          name:  'protocol',
+          label: this.t('tableHeaders.protocol'),
+          value: 'protocol',
+          sort:  'protocol:desc',
+        },
+        {
+          name:  'backendPort',
+          label: this.t('harvester.loadBalancer.listeners.backendPort.label'),
+          value: 'backendPort',
+          sort:  'backendPort:desc',
+        },
+      ];
+    },
+
+    backendServerSelectors() {
+      return Object.keys(this.value.spec?.backendServerSelector || {}).map(key => ({
+        key,
+        value: this.value.spec.backendServerSelector[key],
+      }));
+    },
+
+    serviceSelectorInfoHeaders() {
+      return [
+        {
+          ...KEY,
+          width: 200,
+        },
+        VALUE,
+      ];
+    },
+
+    vmHeaders() {
+      const filterNames = ['state', 'ip', 'node'];
+
+      return VM_HEADERS.filter(h => !filterNames.includes(h.name));
+    },
+
+    vms() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const vms = this.$store.getters[`${ inStore }/all`](HCI.VM).filter(vm => vm.metadata.namespace === this.value.metadata.namespace);
+      const match = matching(vms, this.value?.spec?.backendServerSelector, 'spec.template.metadata.labels');
+
+      return match;
+    }
+  },
+};
+</script>
+
+<template>
+  <ResourceTabs
+    v-model="value"
+    :need-related="false"
+  >
+    <Tab
+      v-if="value.spec.ipam === 'pool'"
+      name="ipPool"
+      label-key="harvester.loadBalancer.ipPool.label"
+      :weight="99"
+    >
+      <SortableTable
+        key-field="_key"
+        :headers="ipPoolHeaders"
+        :rows="ipPools"
+        :row-actions="false"
+        :table-actions="false"
+        :search="false"
+      />
+    </Tab>
+    <Tab
+      v-if="value.spec.workloadType === 'vm'"
+      name="vm"
+      :label="t('harvester.loadBalancer.backendServers.label')"
+      class="bordered-table"
+      :weight="98"
+    >
+      <SortableTable
+        :rows="vms"
+        :headers="vmHeaders"
+        key-field="id"
+        :row-actions="false"
+        :table-actions="false"
+        :search="vms.length > 10 ? true : false"
+      />
+    </Tab>
+    <Tab
+      v-if="value.spec.workloadType === 'vm'"
+      name="listeners"
+      :label="t('harvester.loadBalancer.tabs.listeners')"
+      class="bordered-table"
+      :weight="89"
+    >
+      <SortableTable
+        key-field="_key"
+        :headers="listenerHeaders"
+        :rows="listeners"
+        :row-actions="false"
+        :table-actions="false"
+        :search="false"
+      />
+    </Tab>
+    <Tab
+      v-if="value.spec.workloadType === 'vm'"
+      name="selector"
+      :label="t('harvester.loadBalancer.tabs.backendServer')"
+      class="bordered-table"
+      :weight="79"
+    >
+      <SortableTable
+        key-field="_key"
+        :headers="serviceSelectorInfoHeaders"
+        :rows="backendServerSelectors"
+        :row-actions="false"
+        :table-actions="false"
+        :show-headers="true"
+        :search="false"
+      />
+    </Tab>
+  </ResourceTabs>
+</template>
diff --git a/pkg/harvester/detail/network.harvesterhci.io.vlanconfig.vue b/pkg/harvester/detail/network.harvesterhci.io.vlanconfig.vue
new file mode 100644
index 00000000..757550ff
--- /dev/null
+++ b/pkg/harvester/detail/network.harvesterhci.io.vlanconfig.vue
@@ -0,0 +1,90 @@
+<script>
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import SortableTable from '@shell/components/SortableTable';
+
+import { allHash } from '@shell/utils/promise';
+import { STATE, NAME, AGE } from '@shell/config/table-headers';
+import { matching } from '@shell/utils/selector';
+import { NODE } from '@shell/config/types';
+import { isEmpty } from '@shell/utils/object';
+
+export default {
+  components: {
+    ResourceTabs,
+    Tab,
+    SortableTable,
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.$store.dispatch('harvester/findAll', { type: NODE });
+
+    const hash = { nodes: this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }) };
+
+    await allHash(hash);
+  },
+
+  computed: {
+    nodeHeaders() {
+      return [
+        STATE,
+        NAME,
+        {
+          name:     'host-ip',
+          labelKey: 'tableHeaders.hostIp',
+          search:   ['internalIp'],
+          value:    'internalIp',
+          sort:     ['internalIp'],
+        },
+        AGE,
+      ];
+    },
+
+    nodes() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      const nodes = this.$store.getters[`${ inStore }/all`](NODE);
+      const selector = this.value?.spec?.nodeSelector;
+
+      if (!isEmpty(selector)) {
+        return matching(nodes, selector);
+      } else {
+        return nodes;
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <ResourceTabs
+    v-model="value"
+    :need-related="false"
+  >
+    <Tab
+      name="node"
+      label-key="harvester.vlanConfig.titles.host"
+      :weight="99"
+    >
+      <SortableTable
+        key-field="_key"
+        :headers="nodeHeaders"
+        :rows="nodes"
+        :row-actions="false"
+        :table-actions="false"
+        :search="false"
+      />
+    </Tab>
+  </ResourceTabs>
+</template>
diff --git a/pkg/harvester/dialog/CloneVmDialog.vue b/pkg/harvester/dialog/CloneVmDialog.vue
new file mode 100644
index 00000000..a93de39d
--- /dev/null
+++ b/pkg/harvester/dialog/CloneVmDialog.vue
@@ -0,0 +1,134 @@
+<script>
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { mapGetters } from 'vuex';
+
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export default {
+  name: 'CloneVMModal',
+
+  components: {
+    AsyncButton, Banner, Checkbox, Card, LabeledInput
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      name:      '',
+      cloneData: true,
+      errors:    []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+  },
+
+  methods: {
+    close() {
+      this.name = '';
+      this.$emit('close');
+    },
+
+    async create(buttonCb) {
+      // shadow clone
+      if (!this.cloneData) {
+        this.resources[0].goToClone();
+        buttonCb(false);
+        this.close();
+
+        return;
+      }
+
+      // deep clone
+      try {
+        const res = await this.actionResource.doAction('clone', { targetVm: this.name }, {}, false);
+
+        if (res._status === 200 || res._status === 204) {
+          this.$store.dispatch('growl/success', {
+            title:   this.t('harvester.notification.title.succeed'),
+            message: this.t('harvester.modal.cloneVM.message.success', { name: this.name })
+          }, { root: true });
+
+          this.close();
+          buttonCb(true);
+        } else {
+          const error = [res?.data] || exceptionToErrorsArray(res);
+
+          this.$set(this, 'errors', error);
+          buttonCb(false);
+        }
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonCb(false);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.cloneVM.title') }}
+    </template>
+
+    <template #body>
+      <Checkbox v-model="cloneData" class="mb-10" label-key="harvester.modal.cloneVM.type" />
+
+      <LabeledInput
+        v-show="cloneData"
+        v-model="name"
+        class="mb-20"
+        :label="t('harvester.modal.cloneVM.name')"
+        required
+      />
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="create"
+          :action-label="cloneData ? t('harvester.modal.cloneVM.action.create') : t('harvester.modal.cloneVM.action.clone')"
+          :disabled="cloneData && !name"
+          @click="create"
+        />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue b/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue
new file mode 100644
index 00000000..2d6a68cc
--- /dev/null
+++ b/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue
@@ -0,0 +1,168 @@
+<script>
+import { mapState } from 'vuex';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { alternateLabel } from '@shell/utils/platform';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Banner } from '@components/Banner';
+import { Card } from '@components/Card';
+import { escapeHtml } from '@shell/utils/string';
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+
+/**
+ * @name ConfirmRelatedToRemoveDialog
+ * @description Dialog component to confirm the related resources before removing the resource.
+ */
+export default {
+  name: 'ConfirmRelatedToRemoveDialog',
+
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+    CopyToClipboardText
+  },
+
+  props: {
+    /**
+     * @property resources to be deleted.
+     * @type {Resource[]} Array of the resource model's instance
+     */
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return { errors: [], confirmName: '' };
+  },
+
+  computed: {
+    ...mapState('action-menu', ['modalData']),
+
+    warningMessageKey() {
+      return this.modalData.warningMessageKey;
+    },
+
+    names() {
+      return this.resources.map(obj => obj.nameDisplay).slice(0, 5);
+    },
+
+    resourceNames() {
+      return this.names.reduce((res, name, i) => {
+        if (i >= 5) {
+          return res;
+        }
+        res += `<b>${ escapeHtml(name) }</b>`;
+        if (i === this.names.length - 1) {
+          res += this.plusMore;
+        } else {
+          res += i === this.resources.length - 2 ? ' and ' : ', ';
+        }
+
+        return res;
+      }, '');
+    },
+
+    nameToMatch() {
+      return this.resources[0].nameDisplay;
+    },
+
+    plusMore() {
+      const remaining = this.resources.length - this.names.length;
+
+      return this.t('promptRemove.andOthers', { count: remaining });
+    },
+
+    type() {
+      const types = new Set(this.resources.reduce((array, each) => {
+        array.push(each.type);
+
+        return array;
+      }, []));
+
+      if (types.size > 1) {
+        return this.t('generic.resource', { count: this.resources.length });
+      }
+
+      const schema = this.resources[0]?.schema;
+
+      if ( !schema ) {
+        return `resource${ this.resources.length === 1 ? '' : 's' }`;
+      }
+
+      return this.$store.getters['type-map/labelFor'](schema, this.resources.length);
+    },
+
+    deleteDisabled() {
+      return this.confirmName !== this.nameToMatch;
+    },
+
+    protip() {
+      return this.t('promptRemove.protip', { alternateLabel });
+    },
+  },
+
+  methods: {
+    escapeHtml,
+
+    close() {
+      this.confirmName = '';
+      this.errors = [];
+      this.$emit('close');
+    },
+
+    async remove(buttonDone) {
+      try {
+        for (const resource of this.resources) {
+          await resource.remove();
+        }
+        buttonDone(true);
+        this.close();
+      } catch (e) {
+        this.errors = exceptionToErrorsArray(e);
+        buttonDone(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card class="prompt-related" :show-highlight-border="false">
+    <h4 slot="title" class="text-default-text">
+      {{ t('promptRemove.title') }}
+    </h4>
+    <div slot="body" class="pl-10 pr-10">
+      <span
+        v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
+      ></span>
+
+      <div class="mt-10 mb-10">
+        <span
+          v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+        ></span>
+      </div>
+      <div class="mb-10">
+        <CopyToClipboardText :text="nameToMatch" />
+      </div>
+      <input id="confirm" v-model="confirmName" type="text" />
+      <div class="text-info mt-20">
+        {{ protip }}
+      </div>
+      <Banner v-for="(error, i) in errors" :key="i" class="" color="error" :label="error" />
+    </div>
+    <template #actions>
+      <button class="btn role-secondary mr-10" @click="close">
+        {{ t('generic.cancel') }}
+      </button>
+      <AsyncButton mode="delete" class="btn bg-error ml-10" :disabled="deleteDisabled" @click="remove" />
+    </template>
+  </Card>
+</template>
+
+<style lang='scss' scoped>
+  .actions {
+    text-align: right;
+  }
+</style>
diff --git a/pkg/harvester/dialog/DeepCloneVmDialog.vue b/pkg/harvester/dialog/DeepCloneVmDialog.vue
new file mode 100644
index 00000000..a93de39d
--- /dev/null
+++ b/pkg/harvester/dialog/DeepCloneVmDialog.vue
@@ -0,0 +1,134 @@
+<script>
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { mapGetters } from 'vuex';
+
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export default {
+  name: 'CloneVMModal',
+
+  components: {
+    AsyncButton, Banner, Checkbox, Card, LabeledInput
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      name:      '',
+      cloneData: true,
+      errors:    []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+  },
+
+  methods: {
+    close() {
+      this.name = '';
+      this.$emit('close');
+    },
+
+    async create(buttonCb) {
+      // shadow clone
+      if (!this.cloneData) {
+        this.resources[0].goToClone();
+        buttonCb(false);
+        this.close();
+
+        return;
+      }
+
+      // deep clone
+      try {
+        const res = await this.actionResource.doAction('clone', { targetVm: this.name }, {}, false);
+
+        if (res._status === 200 || res._status === 204) {
+          this.$store.dispatch('growl/success', {
+            title:   this.t('harvester.notification.title.succeed'),
+            message: this.t('harvester.modal.cloneVM.message.success', { name: this.name })
+          }, { root: true });
+
+          this.close();
+          buttonCb(true);
+        } else {
+          const error = [res?.data] || exceptionToErrorsArray(res);
+
+          this.$set(this, 'errors', error);
+          buttonCb(false);
+        }
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonCb(false);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.cloneVM.title') }}
+    </template>
+
+    <template #body>
+      <Checkbox v-model="cloneData" class="mb-10" label-key="harvester.modal.cloneVM.type" />
+
+      <LabeledInput
+        v-show="cloneData"
+        v-model="name"
+        class="mb-20"
+        :label="t('harvester.modal.cloneVM.name')"
+        required
+      />
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="create"
+          :action-label="cloneData ? t('harvester.modal.cloneVM.action.create') : t('harvester.modal.cloneVM.action.clone')"
+          :disabled="cloneData && !name"
+          @click="create"
+        />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/EnablePassthrough.vue b/pkg/harvester/dialog/EnablePassthrough.vue
new file mode 100644
index 00000000..9c9bf12f
--- /dev/null
+++ b/pkg/harvester/dialog/EnablePassthrough.vue
@@ -0,0 +1,118 @@
+<script>
+import { HCI } from '../types';
+import { mapGetters } from 'vuex';
+import { Card } from '@components/Card';
+import AsyncButton from '@shell/components/AsyncButton';
+import { escapeHtml } from '@shell/utils/string';
+
+export default {
+  name: 'HarvesterEnablePassthrough',
+
+  components: {
+    AsyncButton,
+    Card,
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    async save(buttonCb) {
+      // isSingleProduct == this is a standalone Harvester cluster
+      const isSingleProduct = this.$store.getters['isSingleProduct'];
+      let userName = 'admin';
+
+      // if this is imported Harvester, there may be users other than 'admin
+      if (!isSingleProduct) {
+        const user = this.$store.getters['auth/v3User'];
+
+        userName = user?.username || user?.id;
+      }
+
+      for (let i = 0; i < this.resources.length; i++) {
+        const actionResource = this.resources[i];
+        const inStore = this.$store.getters['currentProduct'].inStore;
+        const pt = await this.$store.dispatch(`${ inStore }/create`, {
+          type:     HCI.PCI_CLAIM,
+          metadata: {
+            name:            actionResource.metadata.name,
+            ownerReferences: [{
+              apiVersion: 'devices.harvesterhci.io/v1beta1',
+              kind:       'PCIDevice',
+              name:       actionResource.metadata.name,
+              uid:        actionResource.metadata.uid,
+            }]
+          },
+          spec: {
+            address:  actionResource.status.address,
+            nodeName: actionResource.status.nodeName,
+            userName
+          }
+        } );
+
+        try {
+          await pt.save();
+          buttonCb(true);
+          this.close();
+        } catch (err) {
+          this.$store.dispatch('growl/fromError', {
+            title: this.t('harvester.pci.claimError', { name: escapeHtml(actionResource.metadata.name) }),
+            err,
+          }, { root: true });
+          buttonCb(false);
+        }
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <h4
+      slot="title"
+      v-clean-html="t('promptRemove.title')"
+      class="text-default-text"
+    />
+
+    <template #body>
+      {{ t('harvester.pci.enablePassthroughWarning') }}
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton mode="enable" @click="save" />
+      </div>
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/EnableSriovDevice.vue b/pkg/harvester/dialog/EnableSriovDevice.vue
new file mode 100644
index 00000000..5a0e5491
--- /dev/null
+++ b/pkg/harvester/dialog/EnableSriovDevice.vue
@@ -0,0 +1,107 @@
+<script>
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import { mapGetters } from 'vuex';
+import { Card } from '@components/Card';
+import AsyncButton from '@shell/components/AsyncButton';
+import { escapeHtml } from '@shell/utils/string';
+
+export default {
+  name: 'HarvesterEnableSriovDevice',
+
+  components: {
+    LabeledInput,
+    AsyncButton,
+    Card,
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    const numVFs = this.resources[0].spec?.numVFs || 1;
+
+    return { numVFs, numVFsHistory: numVFs };
+  },
+
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+
+  watch: {
+    numVFs(neu) {
+      if (!parseFloat(neu) || parseFloat(neu) < 1) {
+        this.numVFs = 1;
+      }
+    }
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    async save(buttonCb) {
+      const actionResource = this.resources[0];
+
+      try {
+        this.resources[0].spec.numVFs = this.numVFs;
+        await actionResource.save();
+        buttonCb(true);
+        this.close();
+      } catch (err) {
+        this.resources[0].spec.numVFs = this.numVFsHistory;
+        this.$store.dispatch('growl/fromError', {
+          title: this.t('generic.notification.title.error', { name: escapeHtml(actionResource.metadata.name) }),
+          err,
+        }, { root: true });
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template v-slot:title>
+      <h4
+        v-clean-html="t('promptRemove.title')"
+        class="text-default-text"
+      />
+    </template>
+
+    <template #body>
+      <LabeledInput
+        v-model.number="numVFs"
+        type="number"
+        min="1"
+        required
+        :label="t('harvester.sriov.numVFs')"
+      />
+    </template>
+
+    <template v-slot:actions>
+      <div class="buttons actions">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton mode="enable" @click="save" />
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/EnableVGpuDevice.vue b/pkg/harvester/dialog/EnableVGpuDevice.vue
new file mode 100644
index 00000000..18a29338
--- /dev/null
+++ b/pkg/harvester/dialog/EnableVGpuDevice.vue
@@ -0,0 +1,114 @@
+<script>
+import { mapGetters } from 'vuex';
+import { Card } from '@components/Card';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import AsyncButton from '@shell/components/AsyncButton';
+import { escapeHtml } from '@shell/utils/string';
+
+export default {
+  name: 'HarvesterEnableVGpuDevice',
+
+  components: {
+    AsyncButton,
+    Card,
+    LabeledSelect,
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      type:           this.resources[0].spec?.vGPUTypeName,
+      availableTypes: Object.keys(this.resources[0].status?.availableTypes || {}),
+    };
+  },
+
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    async save(buttonCb) {
+      const actionResource = this.resources[0];
+
+      try {
+        this.resources[0].spec.vGPUTypeName = this.type;
+        this.resources[0].spec.enabled = true;
+        await actionResource.save();
+        buttonCb(true);
+        this.close();
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', {
+          title: this.t('generic.notification.title.error', { name: escapeHtml(actionResource.metadata.name) }),
+          err,
+        }, { root: true });
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template v-slot:title>
+      <h4
+        v-clean-html="t('harvester.vgpu.enable.title')"
+        class="text-default-text"
+      />
+    </template>
+
+    <template #body>
+      <div class="body">
+        <div class="type-field">
+          <LabeledSelect
+            v-model="type"
+            required
+            :options="availableTypes"
+            :searchable="true"
+            :label="t('harvester.vgpu.enable.type')"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template v-slot:actions>
+      <div class="buttons actions">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton mode="edit" :disabled="!type" @click="save" />
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+
+.body {
+  display: flex;
+  flex-direction: column;
+
+  &-field {
+    margin-top: 10px;
+  }
+}
+
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterAddHotplugModal.vue b/pkg/harvester/dialog/HarvesterAddHotplugModal.vue
new file mode 100644
index 00000000..b1dac56e
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterAddHotplugModal.vue
@@ -0,0 +1,159 @@
+<script>
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { sortBy } from '@shell/utils/sort';
+import { mapGetters } from 'vuex';
+import { PVC } from '@shell/config/types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  name: 'HotplugModal',
+
+  components: {
+    AsyncButton, Card, LabeledInput, LabeledSelect, Banner
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  async fetch() {
+    this.allPVCs = await this.$store.dispatch('harvester/findAll', { type: PVC });
+  },
+
+  data() {
+    return {
+      diskName:   '',
+      volumeName: '',
+      errors:     [],
+      allPVCs:    [],
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    PVCs() {
+      return this.allPVCs.filter(P => this.actionResource.metadata.namespace === P.metadata.namespace) || [];
+    },
+
+    actionResource() {
+      return this.resources[0];
+    },
+
+    volumeOption() {
+      return sortBy(
+        this.PVCs
+          .filter( (pvc) => {
+            if (!!pvc.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_ID]) {
+              return false;
+            }
+
+            return !pvc.attachVM;
+          })
+          .map((pvc) => {
+            return {
+              label: pvc.metadata.name,
+              value: pvc.metadata.name
+            };
+          }),
+        'label'
+      );
+    },
+  },
+
+  methods: {
+    close() {
+      this.diskName = '';
+      this.volumeName = '';
+      this.$emit('close');
+    },
+
+    async save(buttonCb) {
+      if (this.actionResource) {
+        try {
+          const res = await this.actionResource.doAction('addVolume', { volumeSourceName: this.volumeName, diskName: this.diskName }, {}, false);
+
+          if (res._status === 200 || res._status === 204) {
+            this.$store.dispatch('growl/success', {
+              title:   this.t('generic.notification.title.succeed'),
+              message: this.t('harvester.modal.hotplug.success', { diskName: this.diskName, vm: this.actionResource.nameDisplay })
+            }, { root: true });
+
+            this.close();
+            buttonCb(true);
+          } else {
+            const error = [res?.data] || exceptionToErrorsArray(res);
+
+            this.$set(this, 'errors', error);
+            buttonCb(false);
+          }
+        } catch (err) {
+          const error = err?.data || err;
+          const message = exceptionToErrorsArray(error);
+
+          this.$set(this, 'errors', message);
+          buttonCb(false);
+        }
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <Card ref="modal" name="modal" :show-highlight-border="false">
+    <h4 slot="title" v-clean-html="t('harvester.modal.hotplug.title')" class="text-default-text" />
+
+    <template #body>
+      <LabeledInput
+        v-model="diskName"
+        :label="t('generic.name')"
+        required
+      />
+
+      <LabeledSelect
+        v-model="volumeName"
+        :label="t('harvester.fields.volume')"
+        :options="volumeOption"
+        class="mt-20"
+        required
+      />
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button type="button" class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="apply"
+          :disabled="!diskName || !volumeName"
+          @click="save"
+        />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterBackupModal.vue b/pkg/harvester/dialog/HarvesterBackupModal.vue
new file mode 100644
index 00000000..1b4f08e8
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterBackupModal.vue
@@ -0,0 +1,125 @@
+<script>
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { mapGetters } from 'vuex';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export default {
+  name: 'HarvesterBackupModal',
+
+  components: {
+    AsyncButton,
+    Card,
+    LabeledInput,
+    Banner
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      backUpName: '',
+      errors:     []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    }
+  },
+
+  methods: {
+    close() {
+      this.backUpName = '';
+      this.$emit('close');
+    },
+
+    async save(buttonCb) {
+      if (this.actionResource) {
+        try {
+          const res = await this.actionResource.doAction(
+            'backup',
+            { name: this.backUpName },
+            {},
+            false
+          );
+
+          if (res._status === 200 || res._status === 204) {
+            this.$store.dispatch(
+              'growl/success',
+              {
+                title:   this.t('generic.notification.title.succeed'),
+                message: this.t('harvester.modal.backup.success', { backUpName: this.backUpName })
+              },
+              { root: true }
+            );
+
+            this.close();
+
+            buttonCb(true);
+          } else {
+            const error = [res?.data] || exceptionToErrorsArray(res);
+
+            this.$set(this, 'errors', error);
+            buttonCb(false);
+          }
+        } catch (err) {
+          const error = err?.data || err;
+          const message = exceptionToErrorsArray(error);
+
+          this.$set(this, 'errors', message);
+          buttonCb(false);
+        }
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <h4
+      slot="title"
+      v-clean-html="t('harvester.modal.backup.addBackup')"
+      class="text-default-text"
+    />
+
+    <template #body>
+      <LabeledInput v-model="backUpName" :label="t('generic.name')" required />
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton mode="create" :disabled="!backUpName" @click="save" />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterCloneTemplate.vue b/pkg/harvester/dialog/HarvesterCloneTemplate.vue
new file mode 100644
index 00000000..2b605869
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterCloneTemplate.vue
@@ -0,0 +1,147 @@
+<script>
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { mapGetters } from 'vuex';
+
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export default {
+  name: 'HarvesterCloneTemplateModal',
+
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+    Checkbox,
+    LabeledInput
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      templateName: '',
+      description:  '',
+      withData:     false,
+      errors:       []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    }
+  },
+
+  methods: {
+    close() {
+      this.templateName = '';
+      this.description = '';
+      this.$emit('close');
+    },
+
+    async save(buttonCb) {
+      try {
+        const res = await this.actionResource.doAction(
+          'createTemplate',
+          {
+            name: this.templateName, description: this.description, withData: this.withData
+          },
+          {},
+          false
+        );
+
+        if (res._status === 200 || res._status === 204) {
+          this.$store.dispatch(
+            'growl/success',
+            {
+              title:   this.t('generic.notification.title.succeed'),
+              message: this.t(
+                'harvester.modal.createTemplate.message.success',
+                { templateName: this.templateName }
+              )
+            },
+            { root: true }
+          );
+
+          this.close();
+          buttonCb(true);
+        } else {
+          const error = [res?.data] || exceptionToErrorsArray(res);
+
+          this.$set(this, 'errors', error);
+          buttonCb(false);
+        }
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.createTemplate.title') }}
+    </template>
+
+    <template #body>
+      <Checkbox v-model="withData" class="mb-10" label="With Data" />
+
+      <LabeledInput
+        v-model="templateName"
+        class="mb-20"
+        :label="t('harvester.modal.createTemplate.name')"
+        required
+      />
+
+      <LabeledInput
+        v-model="description"
+        :label="t('harvester.modal.createTemplate.description')"
+      />
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="create"
+          :disabled="!templateName"
+          @click="save"
+        />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue b/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue
new file mode 100644
index 00000000..92240f6f
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue
@@ -0,0 +1,160 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Checkbox } from '@components/Form/Checkbox';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+
+export default {
+  name: 'HarvesterEjectCDROMModal',
+
+  components: {
+    AsyncButton,
+    Card,
+    Checkbox,
+    Banner
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    const allDisk = [];
+    const disks = this.resources[0].spec.template.spec.domain.devices.disks;
+
+    if (Array.isArray(disks)) {
+      disks.forEach((D) => {
+        if (D.cdrom) {
+          allDisk.push({
+            name:  D.name,
+            value: false
+          });
+        }
+      });
+    }
+
+    return {
+      allDisk,
+      errors:    [],
+      diskNames: []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+
+    isDeleteDisabled() {
+      return this.diskNames.length === 0;
+    }
+  },
+
+  methods: {
+    updateNames(names) {
+      this.diskNames = names;
+    },
+
+    async remove(buttonDone) {
+      try {
+        await this.actionResource.doAction('ejectCdRom', { diskNames: this.diskNames });
+        this.close();
+        buttonDone(true);
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonDone(false);
+      }
+    },
+
+    close() {
+      this.backupName = '';
+      this.errors = [];
+      this.$emit('close');
+    }
+  },
+
+  watch: {
+    allDisk: {
+      handler(neu) {
+        const diskNames = [];
+
+        neu.forEach((D) => {
+          if (D.value) {
+            diskNames.push(D.name);
+          }
+        });
+
+        this.$set(this, 'diskNames', diskNames);
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.ejectCDROM.title') }}
+    </template>
+
+    <template #body>
+      <span class="text-info mb-10">
+        {{ t('harvester.modal.ejectCDROM.operationTip') }}
+      </span>
+
+      <div>
+        <Checkbox
+          v-for="disk in allDisk"
+          :key="disk.name"
+          v-model="disk.value"
+          :label="disk.name"
+        />
+      </div>
+
+      <Banner color="warning">
+        <span>{{ t('harvester.modal.ejectCDROM.warnTip') }}</span>
+      </Banner>
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="delete"
+          :disabled="!diskNames.length"
+          class="btn bg-error ml-10"
+          @click="remove"
+        />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterExportImageDialog.vue b/pkg/harvester/dialog/HarvesterExportImageDialog.vue
new file mode 100644
index 00000000..1e4a3797
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterExportImageDialog.vue
@@ -0,0 +1,195 @@
+<script>
+import { mapGetters } from 'vuex';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+
+import { sortBy } from '@shell/utils/sort';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { NAMESPACE, STORAGE_CLASS } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
+
+export default {
+  name: 'HarvesterExportImageDialog',
+
+  components: {
+    AsyncButton, Banner, Card, LabeledInput, LabeledSelect
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = { storages: this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }) };
+
+    await allHash(hash);
+
+    const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find(s => s.isDefault);
+
+    this.$set(this, 'storageClassName', defaultStorage?.metadata?.name || 'longhorn');
+  },
+
+  data() {
+    const namespace = this.$store.getters['defaultNamespace'] || '';
+
+    return {
+      name:             '',
+      namespace,
+      storageClassName: '',
+      errors:           []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+
+    namespaces() {
+      const choices = this.$store.getters['harvester/all'](NAMESPACE).filter( N => !N.isSystem);
+
+      const out = sortBy(
+        choices.map((obj) => {
+          return {
+            label: obj.nameDisplay,
+            value: obj.id,
+          };
+        }),
+        'label'
+      );
+
+      return out;
+    },
+
+    disableSave() {
+      return !(this.name && this.namespace && this.storageClassName);
+    },
+
+    storageClassOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
+
+      const out = storages.filter(s => !s.parameters?.backingImage).map((s) => {
+        const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+
+        return {
+          label,
+          value: s.name,
+        };
+      }) || [];
+
+      return out;
+    },
+  },
+
+  methods: {
+    close() {
+      this.name = '';
+      this.namespace = '';
+      this.storageClassName = '';
+      this.$emit('close');
+    },
+
+    async save(buttonCb) {
+      try {
+        const res = await this.actionResource.doAction('export', {
+          displayName:      this.name,
+          namespace:        this.namespace,
+          storageClassName: this.storageClassName,
+        });
+
+        if (res._status === 200 || res._status === 204) {
+          this.$store.dispatch('growl/success', {
+            title:   this.t('generic.notification.title.succeed'),
+            message: this.t('harvester.modal.exportImage.message.success', { name: this.name })
+          }, { root: true });
+
+          this.close();
+          buttonCb(true);
+        } else {
+          const error = [res?.data] || exceptionToErrorsArray(res);
+
+          this.$set(this, 'errors', error);
+          buttonCb(false);
+        }
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonCb(false);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.exportImage.title') }}
+    </template>
+
+    <template #body>
+      <LabeledSelect
+        v-model="namespace"
+        :label="t('harvester.modal.exportImage.namespace')"
+        :options="namespaces"
+        class="mb-20"
+        required
+      />
+
+      <LabeledInput
+        v-model="name"
+        :label="t('harvester.modal.exportImage.name')"
+        required
+      />
+
+      <LabeledSelect
+        v-model="storageClassName"
+        :options="storageClassOptions"
+        :label="t('harvester.storage.storageClass.label')"
+        class="mt-20"
+        required
+      />
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="create"
+          :disabled="disableSave"
+          @click="save"
+        />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterMaintenanceDialog.vue b/pkg/harvester/dialog/HarvesterMaintenanceDialog.vue
new file mode 100644
index 00000000..e32e5dc8
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterMaintenanceDialog.vue
@@ -0,0 +1,151 @@
+<script>
+import { mapGetters } from 'vuex';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { BadgeState } from '@components/BadgeState';
+
+export default {
+  components: {
+    Card,
+    Checkbox,
+    AsyncButton,
+    Banner,
+    BadgeState
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      errors:      [],
+      unhealthyVM: '',
+      force:       false
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    async apply(buttonCb) {
+      this.errors = [];
+      this.unhealthyVM = '';
+
+      try {
+        const res = await this.actionResource.doAction('maintenancePossible');
+
+        if (this.force) {
+          if (res._status === 200 || res._status === 204) {
+            await this.actionResource.doAction('enableMaintenanceMode', { force: 'true' });
+            buttonCb(true);
+            this.close();
+          } else {
+            buttonCb(false);
+          }
+        } else if (res._status === 200 || res._status === 204) {
+          const res = await this.actionResource.doAction('listUnhealthyVM');
+
+          if (res.message) {
+            this.unhealthyVM = res;
+            buttonCb(false);
+          } else {
+            await this.actionResource.doAction('enableMaintenanceMode', { force: 'false' });
+            buttonCb(true);
+            this.close();
+          }
+        } else {
+          buttonCb(false);
+        }
+      } catch (e) {
+        const error = [e?.data] || exceptionToErrorsArray(e);
+
+        this.errors = error;
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.host.enableMaintenance.title') }}
+    </template>
+
+    <template #body>
+      <div>
+        <Checkbox
+          v-model="force"
+          label-key="harvester.host.enableMaintenance.force"
+        />
+      </div>
+      <Banner color="warning" :label="t('harvester.host.enableMaintenance.protip')" class="mb-0" />
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+
+      <div v-if="unhealthyVM">
+        <Banner color="error mb-5">
+          <p>
+            {{ unhealthyVM.message }}
+          </p>
+        </Banner>
+
+        <div class="vm-list mb-5">
+          <BadgeState
+            v-for="vm in unhealthyVM.vms"
+            :key="vm"
+            color="bg-error mb-5 mr-5"
+            :label="vm"
+          />
+        </div>
+      </div>
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="apply"
+          @click="apply"
+        />
+      </div>
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.vm-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterMigrationDialog.vue b/pkg/harvester/dialog/HarvesterMigrationDialog.vue
new file mode 100644
index 00000000..3bd1a187
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterMigrationDialog.vue
@@ -0,0 +1,179 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import { NODE } from '@shell/config/types';
+import { HCI } from '../types';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  components: {
+    AsyncButton, Banner, Card, LabeledSelect
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  async fetch() {
+    try {
+      if (!this.actionResource.hasAction('findMigratableNodes')) {
+        return;
+      }
+
+      const res = await this.actionResource.$dispatch('resourceAction', {
+        resource:   this.actionResource,
+        actionName: 'findMigratableNodes',
+        body:       {},
+        opt:        {},
+      });
+
+      this.availableNodes = res.nodes;
+    } catch (err) {
+      this.actionResource.$dispatch('growl/fromError', {
+        title: this.t('generic.notification.title.error'),
+        err:   err.data || err,
+      }, { root: true });
+    }
+  },
+
+  data() {
+    return {
+      nodeName:       '',
+      errors:         [],
+      availableNodes: []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+
+    vmi() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const vmiResources = this.$store.getters[`${ inStore }/all`](HCI.VMI);
+      const resource = vmiResources.find(VMI => VMI.id === this.actionResource?.id) || null;
+
+      return resource;
+    },
+
+    nodeNameList() {
+      const nodes = this.$store.getters['harvester/all'](NODE);
+
+      return nodes.filter((n) => {
+        // do not allow to migrate to self node
+        return !!this.availableNodes.includes(n.id);
+      }).map((n) => {
+        let label = n?.metadata?.name;
+        const value = n?.metadata?.name;
+        const custom = n?.metadata?.annotations?.[HCI_ANNOTATIONS.HOST_CUSTOM_NAME];
+
+        if (custom) {
+          label = custom;
+        }
+
+        return {
+          label,
+          value
+        };
+      });
+    },
+  },
+
+  methods: {
+    close() {
+      this.nodeName = '';
+      this.errors = [];
+      this.$emit('close');
+    },
+
+    async apply(buttonDone) {
+      if (!this.actionResource) {
+        buttonDone(false);
+
+        return;
+      }
+
+      if (!this.nodeName) {
+        const name = this.$store.getters['i18n/t']('harvester.modal.migration.fields.nodeName.label');
+        const message = this.$store.getters['i18n/t']('validation.required', { key: name });
+
+        this.$set(this, 'errors', [message]);
+        buttonDone(false);
+
+        return;
+      }
+
+      try {
+        await this.actionResource.doAction('migrate', { nodeName: this.nodeName }, {}, false);
+
+        buttonDone(true);
+        this.close();
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonDone(false);
+      }
+    },
+
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.migration.title') }}
+    </template>
+
+    <template #body>
+      <LabeledSelect
+        v-model="nodeName"
+        :label="t('harvester.modal.migration.fields.nodeName.label')"
+        :placeholder="t('harvester.modal.migration.fields.nodeName.placeholder')"
+        :options="nodeNameList"
+      />
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="apply"
+          :disabled="!nodeName"
+          @click="apply"
+        />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterRestoreDialog.vue b/pkg/harvester/dialog/HarvesterRestoreDialog.vue
new file mode 100644
index 00000000..6453a330
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterRestoreDialog.vue
@@ -0,0 +1,167 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import { randomStr } from '@shell/utils/string';
+import { HCI } from '../types';
+import { allHash } from '@shell/utils/promise';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  name: 'HarvesterRestoreModal',
+
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+    LabeledSelect
+  },
+
+  async fetch() {
+    const hash = await allHash({ backups: this.$store.dispatch('harvester/findAll', { type: HCI.BACKUP }) });
+
+    this.backups = hash.backups;
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      backups:    [],
+      backupName: '',
+      errors:     []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+
+    backupOption() {
+      const attachBackup = this.backups.filter((B) => {
+        return B.attachVM === this.actionResource?.metadata?.name;
+      });
+
+      return attachBackup.map((O) => {
+        return {
+          value: O.metadata.name,
+          label: O.metadata.name
+        };
+      });
+    }
+  },
+
+  methods: {
+    close() {
+      this.backupName = '';
+      this.errors = [];
+      this.$emit('close');
+    },
+
+    async saveRestore(buttonCb) {
+      const name = `restore-${ this.backupName }-${ randomStr(5).toLowerCase() }`;
+
+      if (!this.backupName) {
+        this.$set(this, 'errors', [
+          this.t('harvester.modal.restore.message.backup')
+        ]);
+        buttonCb(false);
+
+        return;
+      }
+
+      try {
+        const res = await this.actionResource.doAction(
+          'restore',
+          { backupName: this.backupName, name },
+          {},
+          false
+        );
+
+        if (res._status === 200 || res._status === 204) {
+          this.$store.dispatch(
+            'growl/success',
+            {
+              title:   this.t('generic.notification.title.succeed'),
+              message: this.t('harvester.modal.restore.success', { name: this.backupName })
+            },
+            { root: true }
+          );
+
+          this.close();
+          buttonCb(true);
+        } else {
+          const error = [res?.data] || exceptionToErrorsArray(res);
+
+          this.$set(this, 'errors', error);
+          buttonCb(false);
+        }
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.restore.title') }}
+    </template>
+
+    <template #body>
+      <LabeledSelect
+        v-model="backupName"
+        :label="t('harvester.modal.restore.selectBackup')"
+        :localized-label="true"
+        :options="backupOption"
+        required
+      />
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="create"
+          :disabled="!backupName"
+          @click="saveRestore"
+        />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterSupportBundle.vue b/pkg/harvester/dialog/HarvesterSupportBundle.vue
new file mode 100644
index 00000000..cbb94bad
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterSupportBundle.vue
@@ -0,0 +1,221 @@
+<script>
+import { randomStr } from '@shell/utils/string';
+import { exceptionToErrorsArray, stringify } from '@shell/utils/error';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import AsyncButton from '@shell/components/AsyncButton';
+import GraphCircle from '@shell/components/graph/Circle';
+import { Banner } from '@components/Banner';
+import AppModal from '@shell/components/AppModal.vue';
+import { HCI } from '../types';
+
+export default {
+  name: 'SupportBundle',
+
+  components: {
+    LabeledInput,
+    GraphCircle,
+    AsyncButton,
+    Banner,
+    AppModal,
+  },
+
+  data() {
+    return {
+      url:         '',
+      description: '',
+      errors:      [],
+      isOpen:      false,
+    };
+  },
+
+  computed: {
+    bundlePending() {
+      return this.$store.getters['harvester-common/isBundlePending'];
+    },
+
+    isShowBundleModal() {
+      return this.$store.getters['harvester-common/isShowBundleModal'];
+    },
+
+    percentage() {
+      return this.$store.getters['harvester-common/getBundlePercentage'];
+    }
+  },
+
+  watch: {
+    isShowBundleModal: {
+      handler(show) {
+        if (show) {
+          this.$nextTick(() => {
+            this.isOpen = true;
+          });
+        } else {
+          this.isOpen = false;
+          this.url = '';
+          this.description = '';
+        }
+      },
+      immediate: true
+    },
+  },
+
+  methods: {
+    stringify,
+
+    close() {
+      this.$store.commit('harvester-common/toggleBundleModal', false);
+      this.backUpName = '';
+    },
+
+    async save(buttonCb) {
+      this.errors = [];
+
+      const name = `bundle-${ randomStr(5).toLowerCase() }`;
+      const namespace = 'harvester-system';
+
+      const bundleCrd = {
+        apiVersion: 'harvesterhci.io/v1beta1',
+        type:       HCI.SUPPORT_BUNDLE,
+        kind:       'SupportBundle',
+        metadata:   {
+          name,
+          namespace
+        },
+        spec: {
+          issueURL:    this.url,
+          description: this.description
+        }
+      };
+
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const bundleValue = await this.$store.dispatch(`${ inStore }/create`, bundleCrd);
+
+      try {
+        await bundleValue.save();
+
+        this.$store.commit('harvester-common/setLatestBundleId', `${ namespace }/${ name }`, { root: true });
+        this.$store.dispatch('harvester-common/bundleProgress', { root: true });
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonCb(false);
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="bundleModal">
+    <app-modal
+      v-if="isOpen"
+      name="bundle-modal"
+      :click-to-close="false"
+      :width="550"
+      :height="390"
+      class="remove-modal support-modal"
+    >
+      <div class="p-20">
+        <h2>
+          {{ t('harvester.modal.bundle.title') }}
+        </h2>
+
+        <div
+          v-if="!bundlePending"
+          class="content"
+        >
+          <LabeledInput
+            v-model="url"
+            :label="t('harvester.modal.bundle.url')"
+            class="mb-20"
+          />
+
+          <LabeledInput
+            v-model="description"
+            :label="t('harvester.modal.bundle.description')"
+            type="multiline"
+            :min-height="120"
+            required
+          />
+        </div>
+
+        <div
+          v-else
+          class="content"
+        >
+          <div class="circle">
+            <GraphCircle
+              primary-stroke-color="green"
+              secondary-stroke-color="white"
+              :stroke-width="6"
+              :percentage="percentage"
+              :show-text="true"
+            />
+          </div>
+        </div>
+
+        <div
+          v-for="(err, idx) in errors"
+          :key="idx"
+        >
+          <Banner
+            color="error"
+            :label="stringify(err)"
+          />
+        </div>
+
+        <div class="footer mt-20">
+          <button
+            class="btn btn-sm role-secondary mr-10"
+            @click="close"
+          >
+            {{ t('generic.close') }}
+          </button>
+
+          <AsyncButton
+            type="submit"
+            mode="generate"
+            class="btn btn-sm bg-primary"
+            :disabled="bundlePending"
+            @click="save"
+          />
+        </div>
+      </div>
+    </app-modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bundleModal {
+  .support-modal {
+    border-radius: var(--border-radius);
+    max-height: 100vh;
+  }
+
+  .bundle {
+    cursor: pointer;
+    color: var(--primary);
+  }
+
+  .icon-spinner {
+    font-size: 100px;
+  }
+
+  .content {
+    height: 218px;
+
+    .circle {
+      padding-top: 20px;
+      height: 160px;
+    }
+  }
+
+  div {
+    line-height: normal;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterUnplugVolume.vue b/pkg/harvester/dialog/HarvesterUnplugVolume.vue
new file mode 100644
index 00000000..719f83e0
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterUnplugVolume.vue
@@ -0,0 +1,118 @@
+<script>
+import { mapState, mapGetters } from 'vuex';
+
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+
+export default {
+  name: 'HarvesterHotUnplugModal',
+
+  components: {
+    AsyncButton,
+    Card,
+    Banner
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return { errors: [] };
+  },
+
+  computed: {
+    ...mapState('action-menu', ['modalData']),
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+    diskName() {
+      return this.modalData.diskName;
+    }
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    async save(buttonCb) {
+      try {
+        const res = await this.actionResource.doAction('removeVolume', { diskName: this.diskName });
+
+        if (res._status === 200 || res._status === 204) {
+          this.$store.dispatch(
+            'growl/success',
+            {
+              title:   this.t('generic.notification.title.succeed'),
+              message: this.t('harvester.modal.hotunplug.success', { name: this.diskName })
+            },
+            { root: true }
+          );
+
+          this.close();
+          buttonCb(true);
+        } else {
+          const error = [res?.data] || exceptionToErrorsArray(res);
+
+          this.$set(this, 'errors', error);
+          buttonCb(false);
+        }
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card ref="modal" name="modal" :show-highlight-border="false">
+    <h4
+      slot="title"
+      v-clean-html="t('harvester.virtualMachine.unplug.title', { name: diskName })"
+      class="text-default-text"
+    />
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button type="button" class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="apply"
+          :action-label="t('harvester.virtualMachine.unplug.actionLabel')"
+          :waiting-label="t('harvester.virtualMachine.unplug.actionLabel')"
+          :success-label="t('harvester.virtualMachine.unplug.actionLabel')"
+          @click="save"
+        />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue b/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue
new file mode 100644
index 00000000..f027c6c2
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue
@@ -0,0 +1,149 @@
+<script>
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { mapGetters } from 'vuex';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { HCI } from '../types';
+import { BACKUP_TYPE } from '../config/types';
+
+export default {
+  name: 'HarvesterVMSnapshotDialog',
+
+  components: {
+    AsyncButton,
+    Card,
+    LabeledInput,
+    Banner
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      snapshotName:      '',
+      snapshotNamespace: '',
+      errors:            []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    }
+  },
+
+  methods: {
+    close() {
+      this.snapshotNamespace = '';
+      this.snapshotName = '';
+      this.$emit('close');
+    },
+
+    async save(buttonCb) {
+      if (this.actionResource) {
+        try {
+          const snapshot = await this.$store.dispatch('harvester/create', {
+            metadata: {
+              name:            this.snapshotName,
+              namespace:       this.actionResource.metadata.namespace,
+              ownerReferences: this.getOwnerReferencesFromVM(this.actionResource)
+            },
+            spec: {
+              source: {
+                apiGroup: 'kubevirt.io',
+                kind:     'VirtualMachine',
+                name:     this.actionResource.metadata.name
+              },
+              type: BACKUP_TYPE.SNAPSHOT
+            },
+            type: HCI.BACKUP
+          });
+
+          await snapshot.save();
+
+          this.$store.dispatch(
+            'growl/success',
+            {
+              title:   this.t('generic.notification.title.succeed'),
+              message: this.t('harvester.modal.vmSnapshot.success', { name: this.snapshotName })
+            },
+            { root: true }
+          );
+
+          this.close();
+
+          buttonCb(true);
+        } catch (err) {
+          const error = err?.data || err;
+          const message = exceptionToErrorsArray(error);
+
+          this.$set(this, 'errors', message);
+          buttonCb(false);
+        }
+      }
+    },
+
+    getOwnerReferencesFromVM(resource) {
+      const name = resource.metadata.name;
+      const kind = resource.kind;
+      const apiVersion = 'kubevirt.io/v1';
+      const uid = resource?.metadata?.uid;
+
+      return [{
+        name,
+        kind,
+        uid,
+        apiVersion,
+      }];
+    },
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <h4
+      slot="title"
+      v-clean-html="t('harvester.modal.vmSnapshot.title')"
+      class="text-default-text"
+    />
+
+    <template #body>
+      <LabeledInput v-model="actionResource.metadata.namespace" :disabled="true" :label="t('generic.namespace')" />
+      <LabeledInput v-model="snapshotName" class="mt-20" :label="t('generic.name')" required />
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton mode="create" :disabled="!snapshotName" @click="save" />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue b/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue
new file mode 100644
index 00000000..77da5c2c
--- /dev/null
+++ b/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue
@@ -0,0 +1,138 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import { HCI } from '@pkg/harvester/types';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { clone } from '@shell/utils/object';
+
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+    LabeledSelect,
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      clusterNetwork: '',
+      errors:         [],
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+
+    clusterNetworks() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      const clusterNetworks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK);
+
+      return clusterNetworks.filter((c) => {
+        return c.id !== this.actionResource.spec?.clusterNetwork && c.id !== 'mgmt';
+      }).map((c) => {
+        const label = c.id;
+        const value = c.id;
+
+        return {
+          label,
+          value,
+        };
+      });
+    },
+  },
+
+  methods: {
+    close() {
+      this.nodeName = '';
+      this.errors = [];
+      this.$emit('close');
+    },
+
+    async apply(buttonDone) {
+      try {
+        const data = clone(this.actionResource);
+
+        data.spec.clusterNetwork = this.clusterNetwork;
+
+        await this.$store.dispatch('harvester/request', {
+          url:    `/v1/harvester/${ HCI.VLAN_CONFIG }s/${ data.id }`,
+          method: 'PUT',
+          data,
+        });
+
+        buttonDone(true);
+        this.close();
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonDone(false);
+      }
+    },
+
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.migration.title') }}
+    </template>
+
+    <template #body>
+      <LabeledSelect
+        v-model="clusterNetwork"
+        :label="t('harvester.harvesterVlanConfigMigrateDialog.targetClusterNetwork.label')"
+        :placeholder="t('harvester.harvesterVlanConfigMigrateDialog.targetClusterNetwork.placeholder')"
+        :options="clusterNetworks"
+      />
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="apply"
+          :disabled="!clusterNetwork"
+          @click="apply"
+        />
+      </div>
+
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/MessageBox.vue b/pkg/harvester/dialog/MessageBox.vue
new file mode 100644
index 00000000..d0c4f0c3
--- /dev/null
+++ b/pkg/harvester/dialog/MessageBox.vue
@@ -0,0 +1,68 @@
+<script>
+import { mapState, mapGetters } from 'vuex';
+import { Card } from '@components/Card';
+
+export default {
+  name: 'HarvesterHotUnplugModal',
+
+  components: { Card },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    },
+  },
+
+  computed: {
+    ...mapState('action-menu', ['modalData']),
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+  },
+
+  methods: {
+    ok() {
+      this.modalData?.callback('ok');
+      this.$emit('close');
+    },
+  }
+};
+</script>
+
+<template>
+  <Card ref="modal" name="modal" :show-highlight-border="false">
+    <h4
+      slot="title"
+      class="text-default-text"
+    >
+      {{ t('generic.tip') }}
+    </h4>
+
+    <template #body>
+      <p v-clean-html="t(modalData.contentKey)"></p>
+    </template>
+
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button type="button" class="btn role-secondary mr-10" @click="ok">
+          {{ t('generic.ok') }}
+        </button>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/RestartVMDialog.vue b/pkg/harvester/dialog/RestartVMDialog.vue
new file mode 100644
index 00000000..4d5d2d7a
--- /dev/null
+++ b/pkg/harvester/dialog/RestartVMDialog.vue
@@ -0,0 +1,120 @@
+<script>
+import { mapGetters } from 'vuex';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+export default {
+  components: {
+    Card,
+    AsyncButton,
+    Banner,
+  },
+  props: {
+    vm: {
+      type:     Object,
+      required: true
+    },
+  },
+  data() {
+    return { errors: [], resolve: null };
+  },
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  methods:  {
+    close() {
+      this.resolve();
+      this.$emit('close');
+    },
+    apply(buttonDone) {
+      try {
+        this.vm.doActionGrowl('restart', {});
+        buttonDone(true);
+        this.resolve();
+        this.close();
+      } catch (err) {
+        console.error(err); // eslint-disable-line
+        this.errors = exceptionToErrorsArray(err);
+        buttonDone(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <app-modal
+    class="restart-modal"
+    name="restartDialog"
+    :width="600"
+    height="auto"
+    :click-to-close="false"
+    @close="close"
+  >
+    <Card
+      class="prompt-restart"
+      :show-highlight-border="false"
+    >
+      <h4
+        slot="title"
+        v-clean-html="t('harvester.modal.restart.title')"
+        class="text-default-text"
+      />
+
+      <template slot="body">
+        <slot name="body">
+          <div
+            v-clean-html="t('harvester.modal.restart.tip')"
+            class="pl-10 pr-10"
+          >
+          </div>
+        </slot>
+      </template>
+
+      <div
+        slot="actions"
+        class="bottom"
+      >
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
+        <div class="buttons">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
+            {{ t('harvester.modal.restart.cancel') }}
+          </button>
+
+          <AsyncButton
+            mode="restart"
+            @click="apply"
+          />
+        </div>
+      </div>
+    </Card>
+  </app-modal>
+</template>
+<style lang='scss' scoped>
+  .restart-modal {
+    z-index: 45;
+  }
+  .prompt-restart {
+    margin: 0;
+  }
+  .bottom {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    .banner {
+      margin-top: 0
+    }
+    .buttons {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+    }
+  }
+</style>
diff --git a/pkg/harvester/dialog/RestoreSnapshotDialog.vue b/pkg/harvester/dialog/RestoreSnapshotDialog.vue
new file mode 100644
index 00000000..ca2b257d
--- /dev/null
+++ b/pkg/harvester/dialog/RestoreSnapshotDialog.vue
@@ -0,0 +1,169 @@
+<script>
+import { mapGetters } from 'vuex';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+
+import { allHash } from '@shell/utils/promise';
+import { STORAGE_CLASS } from '@shell/config/types';
+
+export default {
+  name:       'HarvesterRestoreSnapshotDialog',
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+    LabeledInput,
+    LabeledSelect,
+  },
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      name:             '',
+      errors:           [],
+      storageClassName: '',
+    };
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = { storages: this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }) };
+
+    await allHash(hash);
+
+    if (this.showStorageClass) {
+      const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find(s => s.isDefault);
+
+      const currentStorageName = this.resources[0].metadata?.annotations[HCI_ANNOTATIONS.STORAGE_CLASS];
+
+      this.$set(this, 'storageClassName', currentStorageName || defaultStorage?.metadata?.name || 'longhorn');
+    }
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    actionResource() {
+      return this.resources[0] || {};
+    },
+    disableSave() {
+      return !(this.name && (this.showStorageClass ? this.storageClassName : true));
+    },
+
+    storageClassOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
+
+      const out = storages.filter(s => !s.parameters?.backingImage).filter((s) => {
+        return s.provisioner === this.actionResource.metadata?.annotations[HCI_ANNOTATIONS.STORAGE_PROVISIONER];
+      }).map((s) => {
+        const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+
+        return {
+          label,
+          value: s.name,
+        };
+      }) || [];
+
+      return out;
+    },
+
+    showStorageClass() {
+      return this.actionResource?.volume?.source === 'data';
+    },
+  },
+  methods: {
+    close() {
+      this.name = '';
+      this.storageClassName = '';
+
+      this.$emit('close');
+    },
+    async save(buttonCb) {
+      try {
+        const payload = { name: this.name };
+
+        if (this.showStorageClass) {
+          payload.storageClassName = this.storageClassName;
+        }
+
+        const res = await this.actionResource.doAction('restore', payload);
+
+        if (res._status === 200 || res._status === 204) {
+          this.$store.dispatch('growl/success', {
+            title:   this.t('harvester.notification.title.succeed'),
+            message: this.t('harvester.modal.restoreSnapshot.success', { name: this.name })
+          }, { root: true });
+          this.close();
+          buttonCb(true);
+        } else {
+          const error = [res?.data] || exceptionToErrorsArray(res);
+
+          this.$set(this, 'errors', error);
+          buttonCb(false);
+        }
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonCb(false);
+      }
+    }
+  },
+};
+</script>
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.restoreSnapshot.title') }}
+    </template>
+    <template #body>
+      <LabeledInput
+        v-model="name"
+        :label="t('harvester.modal.restoreSnapshot.name')"
+        required
+      />
+      <LabeledSelect
+        v-if="showStorageClass"
+        v-model="storageClassName"
+        :options="storageClassOptions"
+        :label="t('harvester.storage.storageClass.label')"
+        class="mt-20"
+        required
+      />
+    </template>
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton
+          mode="create"
+          :disabled="disableSave"
+          @click="save"
+        />
+      </div>
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/SnapshotDialog.vue b/pkg/harvester/dialog/SnapshotDialog.vue
new file mode 100644
index 00000000..1a6a423c
--- /dev/null
+++ b/pkg/harvester/dialog/SnapshotDialog.vue
@@ -0,0 +1,103 @@
+<script>
+import { mapGetters } from 'vuex';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+export default {
+  name:       'HarvesterSnapshotDialog',
+  components: {
+    AsyncButton, Banner, Card, LabeledInput
+  },
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      name:   '',
+      errors: []
+    };
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    actionResource() {
+      return this.resources[0];
+    },
+    disableSave() {
+      return !this.name;
+    }
+  },
+  methods: {
+    close() {
+      this.name = '';
+      this.$emit('close');
+    },
+    async save(buttonCb) {
+      try {
+        const res = await this.actionResource.doAction('snapshot', { name: this.name });
+
+        if (res._status === 200 || res._status === 204) {
+          this.$store.dispatch('growl/success', {
+            title:   this.t('harvester.notification.title.succeed'),
+            message: this.t('harvester.modal.snapshot.message.success', { name: this.name })
+          }, { root: true });
+          this.close();
+          buttonCb(true);
+        } else {
+          const error = [res?.data] || exceptionToErrorsArray(res);
+
+          this.$set(this, 'errors', error);
+          buttonCb(false);
+        }
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonCb(false);
+      }
+    }
+  },
+};
+</script>
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.snapshot.title') }}
+    </template>
+    <template #body>
+      <LabeledInput
+        v-model="name"
+        :label="t('harvester.modal.snapshot.name')"
+        required
+      />
+    </template>
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton
+          mode="create"
+          :disabled="disableSave"
+          @click="save"
+        />
+      </div>
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/dialog/VolumeCloneDialog.vue b/pkg/harvester/dialog/VolumeCloneDialog.vue
new file mode 100644
index 00000000..83234c79
--- /dev/null
+++ b/pkg/harvester/dialog/VolumeCloneDialog.vue
@@ -0,0 +1,118 @@
+<script>
+import { mapGetters } from 'vuex';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+
+export default {
+  name:       'HarvesterPvcCloneDialog',
+  components: {
+    AsyncButton, Banner, Card, LabeledInput, Checkbox
+  },
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      name:      '',
+      cloneData: true,
+      errors:    []
+    };
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    actionResource() {
+      return this.resources[0];
+    },
+    disableSave() {
+      return this.cloneData && !this.name;
+    }
+  },
+  methods: {
+    close() {
+      this.name = '';
+      this.$emit('close');
+    },
+    async save(buttonCb) {
+      if (!this.cloneData) {
+        this.resources[0].goToClone();
+        buttonCb(false);
+        this.close();
+
+        return;
+      }
+
+      try {
+        const res = await this.actionResource.doAction('clone', { name: this.name });
+
+        if (res._status === 200 || res._status === 204) {
+          this.$store.dispatch('growl/success', {
+            title:   this.t('harvester.notification.title.succeed'),
+            message: this.t('harvester.modal.volumeClone.message.success', { name: this.name })
+          }, { root: true });
+          this.close();
+          buttonCb(true);
+        } else {
+          const error = [res?.data] || exceptionToErrorsArray(res);
+
+          this.$set(this, 'errors', error);
+          buttonCb(false);
+        }
+      } catch (err) {
+        const error = err?.data || err;
+        const message = exceptionToErrorsArray(error);
+
+        this.$set(this, 'errors', message);
+        buttonCb(false);
+      }
+    }
+  },
+};
+</script>
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.volumeClone.title') }}
+    </template>
+    <template #body>
+      <Checkbox v-model="cloneData" class="mb-10" label-key="harvester.modal.cloneVM.type" />
+
+      <LabeledInput
+        v-show="cloneData"
+        v-model="name"
+        class="mb-20"
+        :label="t('harvester.modal.volumeClone.name')"
+        required
+      />
+    </template>
+    <div slot="actions" class="actions">
+      <div class="buttons">
+        <button class="btn role-secondary mr-10" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton
+          mode="create"
+          :disabled="disableSave"
+          @click="save"
+        />
+      </div>
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+  </Card>
+</template>
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.addon/generic.vue b/pkg/harvester/edit/harvesterhci.io.addon/generic.vue
new file mode 100644
index 00000000..fcb00ff1
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.addon/generic.vue
@@ -0,0 +1,58 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { RadioGroup } from '@components/Form/Radio';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+export default {
+  name:       'EditGenericAddon',
+  components: {
+    Tabbed,
+    Tab,
+    RadioGroup,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+};
+</script>
+
+<template>
+  <Tabbed :side-tabs="true">
+    <Tab
+      name="basic"
+      :label="t('generic.basic')"
+      :weight="99"
+    >
+      <RadioGroup
+        v-model="value.spec.enabled"
+        class="mb-20"
+        name="model"
+        :mode="mode"
+        :options="[true,false]"
+        :labels="[t('generic.enabled'), t('generic.disabled')]"
+      />
+    </Tab>
+  </Tabbed>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.addon/harvester-seeder.vue b/pkg/harvester/edit/harvesterhci.io.addon/harvester-seeder.vue
new file mode 100644
index 00000000..2804d4d5
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.addon/harvester-seeder.vue
@@ -0,0 +1,58 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { RadioGroup } from '@components/Form/Radio';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+export default {
+  name:       'EditSeederAddon',
+  components: {
+    Tabbed,
+    Tab,
+    RadioGroup,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+};
+</script>
+
+<template>
+  <Tabbed :side-tabs="true">
+    <Tab
+      name="basic"
+      :label="t('harvester.addons.vmImport.titles.basic')"
+      :weight="99"
+    >
+      <RadioGroup
+        v-model="value.spec.enabled"
+        class="mb-20"
+        name="model"
+        :mode="mode"
+        :options="[true,false]"
+        :labels="[t('generic.enabled'), t('generic.disabled')]"
+      />
+    </Tab>
+  </Tabbed>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.addon/index.vue b/pkg/harvester/edit/harvesterhci.io.addon/index.vue
new file mode 100644
index 00000000..fb3884ec
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.addon/index.vue
@@ -0,0 +1,47 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import CruResource from '@shell/components/CruResource';
+
+export default {
+  name: 'EditAddon',
+
+  components: { CruResource },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  computed: {
+    currentComponent() {
+      const name = this.value.metadata.name;
+
+      try {
+        return require(`./${ name }.vue`).default;
+      } catch {
+        return require(`./generic.vue`).default;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    @finish="save"
+  >
+    <component
+      :is="currentComponent"
+      :value="value"
+      :register-before-hook="registerBeforeHook"
+      :mode="mode"
+    />
+  </CruResource>
+</template>
diff --git a/pkg/harvester/edit/harvesterhci.io.addon/nvidia-driver-toolkit.vue b/pkg/harvester/edit/harvesterhci.io.addon/nvidia-driver-toolkit.vue
new file mode 100644
index 00000000..fdc1f1b8
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.addon/nvidia-driver-toolkit.vue
@@ -0,0 +1,156 @@
+<script>
+import merge from 'lodash/merge';
+import jsyaml from 'js-yaml';
+import { clone } from '@shell/utils/object';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+const DEFAULT_VALUE = { image: { repo: 'rancher/harvester-nvidia-driver-toolkit' } };
+
+export default {
+  name:       'EditAddonNvidiaDriverToolkit',
+  components: {
+    Banner,
+    LabeledInput,
+    RadioGroup,
+    Tabbed,
+    Tab,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  data() {
+    return {
+      initSpec:          clone(this.value.spec),
+      valuesContentJson: this.parseValuesContent()
+    };
+  },
+
+  watch: {
+    valuesContentJson: {
+      handler(neu) {
+        this.update(neu);
+      },
+      deep: true,
+    }
+  },
+
+  computed: {
+    parsingSpecError() {
+      return this.valuesContentJson && (this.valuesContentJson.image === undefined || this.valuesContentJson.driverLocation === undefined);
+    }
+  },
+
+  methods: {
+    parseValuesContent() {
+      try {
+        return merge({}, DEFAULT_VALUE, jsyaml.load(this.value.spec.valuesContent));
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', {
+          title: this.$store.getters['i18n/t']('generic.notification.title.error'),
+          err:   err.data || err,
+        }, { root: true });
+
+        return DEFAULT_VALUE;
+      }
+    },
+
+    toggleEnable(v) {
+      this.resetSpec();
+      this.value.spec.enabled = v;
+    },
+
+    resetSpec() {
+      this.value.spec = clone(this.initSpec);
+
+      this.valuesContentJson = this.parseValuesContent();
+    },
+
+    update(values) {
+      this.value.spec.valuesContent = jsyaml.dump(values);
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="parsingSpecError"
+      color="error"
+      :label="t('harvester.addons.nvidiaDriverToolkit.parsingSpecError', null, { raw: true })"
+    />
+    <Tabbed v-else :side-tabs="true">
+      <Tab
+        name="basic"
+        :label="t('harvester.addons.nvidiaDriverToolkit.titles.basic')"
+        :weight="1"
+      >
+        <RadioGroup
+          :value="value.spec.enabled"
+          class="mb-20"
+          name="model"
+          :mode="mode"
+          :options="[true,false]"
+          :labels="[t('generic.enabled'), t('generic.disabled')]"
+          @input="toggleEnable"
+        />
+        <div v-if="value.spec.enabled">
+          <div v-if="valuesContentJson.image" class="row mb-15">
+            <div class="col span-6">
+              <LabeledInput
+                v-model="valuesContentJson.image.repo"
+                :mode="mode"
+                :required="true"
+                label-key="harvester.addons.nvidiaDriverToolkit.image.repository"
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model="valuesContentJson.image.tag"
+                :mode="mode"
+                :required="true"
+                class="col span-6"
+                label-key="harvester.addons.nvidiaDriverToolkit.image.tag"
+              />
+            </div>
+          </div>
+          <div class="row mb-15">
+            <LabeledInput
+              v-model="valuesContentJson.driverLocation"
+              :mode="mode"
+              :required="true"
+              label-key="harvester.addons.nvidiaDriverToolkit.driver.location"
+            />
+          </div>
+        </div>
+      </Tab>
+    </Tabbed>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.addon/pcidevices-controller.vue b/pkg/harvester/edit/harvesterhci.io.addon/pcidevices-controller.vue
new file mode 100644
index 00000000..6e5cadb9
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.addon/pcidevices-controller.vue
@@ -0,0 +1,58 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { RadioGroup } from '@components/Form/Radio';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+export default {
+  name:       'EditAddonPCI',
+  components: {
+    Tabbed,
+    Tab,
+    RadioGroup,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+};
+</script>
+
+<template>
+  <Tabbed :side-tabs="true">
+    <Tab
+      name="basic"
+      :label="t('harvester.addons.vmImport.titles.basic')"
+      :weight="99"
+    >
+      <RadioGroup
+        v-model="value.spec.enabled"
+        class="mb-20"
+        name="model"
+        :mode="mode"
+        :options="[true,false]"
+        :labels="[t('generic.enabled'), t('generic.disabled')]"
+      />
+    </Tab>
+  </Tabbed>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.addon/rancher-logging.vue b/pkg/harvester/edit/harvesterhci.io.addon/rancher-logging.vue
new file mode 100644
index 00000000..25b150bf
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.addon/rancher-logging.vue
@@ -0,0 +1,191 @@
+<script>
+import merge from 'lodash/merge';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import jsyaml from 'js-yaml';
+
+const DEFAUL_VALUE = {
+  fluentbit: {
+    resources: {
+      limits: {
+        cpu:    '200m',
+        memory: '200Mi'
+      },
+      requests: {
+        cpu:    '50m',
+        memory: '50Mi'
+      }
+    }
+  },
+  fluentd: {
+    resources: {
+      limits: {
+        cpu:    '1000m',
+        memory: '800Mi'
+      },
+      requests: {
+        cpu:    '100m',
+        memory: '20Mi'
+      }
+    }
+  },
+};
+
+export default {
+  name:       'EditAddonLogging',
+  components: {
+    Tabbed,
+    Tab,
+    RadioGroup,
+    LabeledInput,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  data() {
+    let valuesContentJson = DEFAUL_VALUE;
+
+    try {
+      valuesContentJson = merge({}, DEFAUL_VALUE, jsyaml.load(this.value.spec.valuesContent));
+    } catch (err) {
+      valuesContentJson = DEFAUL_VALUE;
+
+      this.$store.dispatch('growl/fromError', {
+        title: this.$store.getters['i18n/t']('generic.notification.title.error'),
+        err:   err.data || err,
+      }, { root: true });
+    }
+
+    return { valuesContentJson };
+  },
+
+  watch: {
+    valuesContentJson: {
+      handler(neu) {
+        this.$set(this.value.spec, 'valuesContent', jsyaml.dump(neu));
+      },
+      deep:      true,
+      immediate: true
+    },
+  },
+};
+</script>
+
+<template>
+  <Tabbed :side-tabs="true">
+    <Tab
+      name="basic"
+      :label="t('harvester.addons.vmImport.titles.basic')"
+      :weight="99"
+    >
+      <RadioGroup
+        v-model="value.spec.enabled"
+        class="mb-20"
+        name="model"
+        :mode="mode"
+        :options="[true,false]"
+        :labels="[t('generic.enabled'), t('generic.disabled')]"
+      />
+    </Tab>
+    <Tab v-if="value.spec.enabled" name="fluentbit" :label="t('harvester.logging.configuration.section.fluentbit')" :weight="-1">
+      <div class="row mt-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.fluentbit.resources.requests.cpu"
+            :label="t('monitoring.prometheus.config.requests.cpu')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.fluentbit.resources.requests.memory"
+            :label="t('monitoring.prometheus.config.requests.memory')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+      <div class="row mt-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.fluentbit.resources.limits.cpu"
+            :label="t('monitoring.prometheus.config.limits.cpu')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.fluentbit.resources.limits.memory"
+            :label="t('monitoring.prometheus.config.limits.memory')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+    </Tab>
+    <Tab v-if="value.spec.enabled" name="fluentd" :label="t('harvester.logging.configuration.section.fluentd')" :weight="-1">
+      <div class="row mt-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.fluentd.resources.requests.cpu"
+            :label="t('monitoring.prometheus.config.requests.cpu')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.fluentd.resources.requests.memory"
+            :label="t('monitoring.prometheus.config.requests.memory')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+      <div class="row mt-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.fluentd.resources.limits.cpu"
+            :label="t('monitoring.prometheus.config.limits.cpu')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.fluentd.resources.limits.memory"
+            :label="t('monitoring.prometheus.config.limits.memory')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+    </Tab>
+  </Tabbed>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.addon/rancher-monitoring.vue b/pkg/harvester/edit/harvesterhci.io.addon/rancher-monitoring.vue
new file mode 100644
index 00000000..6ad16285
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.addon/rancher-monitoring.vue
@@ -0,0 +1,523 @@
+<script>
+import merge from 'lodash/merge';
+import isEmpty from 'lodash/isEmpty';
+import jsyaml from 'js-yaml';
+import { allHash } from '@shell/utils/promise';
+import { findBy } from '@shell/utils/array';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import LazyImage from '@shell/components/LazyImage';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { ENDPOINTS } from '@shell/config/types';
+
+const CATTLE_MONITORING_NAMESPACE = 'cattle-monitoring-system';
+const DEFAUL_VALUE = {
+  prometheus: {
+    prometheusSpec: {
+      resources: {
+        limits: {
+          cpu:    '1000m',
+          memory: '3000Mi'
+        },
+        requests: {
+          cpu:    '750m',
+          memory: '750Mi'
+        }
+      },
+      evaluationInterval: '1m',
+      scrapeInterval:     '1m',
+      retention:          '5d',
+      retentionSize:      '50GiB',
+    },
+  },
+  'prometheus-node-exporter': {
+    resources: {
+      limits: {
+        cpu:    '200m',
+        memory: '180Mi'
+      },
+      requests: {
+        cpu:    '100m',
+        memory: '30Mi'
+      }
+    }
+  },
+  grafana: {
+    resources: {
+      limits: {
+        cpu:    '200m',
+        memory: '500Mi'
+      },
+      requests: {
+        cpu:    '100m',
+        memory: '200Mi'
+      }
+    }
+  },
+  alertmanager: {
+    enabled:          false,
+    alertmanagerSpec: {
+      retention: '120h',
+      resources: {
+        limits: {
+          cpu:    '1000m',
+          memory: '600Mi'
+        },
+        requests: {
+          cpu:    '100m',
+          memory: '100Mi'
+        }
+      }
+    },
+  }
+};
+
+export default {
+  name:       'EditAddonMonitoring',
+  components: {
+    LabeledInput, RadioGroup, LazyImage, Tabbed, Tab
+  },
+
+  mixins: [CreateEditView],
+
+  async fetch() {
+    const { $store, externalLinks } = this;
+
+    if (!$store.getters['harvester/schemaFor'](ENDPOINTS)) {
+      return;
+    }
+
+    const hash = await allHash({ endpoints: $store.dispatch('harvester/findAll', { type: ENDPOINTS }) });
+
+    if (!isEmpty(hash.endpoints)) {
+      const amMatch = externalLinks.alertmanager;
+      const grafanaMatch = externalLinks.grafana;
+      const promeMatch = externalLinks.prometheus;
+      const alertmanager = findBy(
+        hash.endpoints,
+        'id',
+        `${ CATTLE_MONITORING_NAMESPACE }/rancher-monitoring-alertmanager`
+      );
+      const grafana = findBy(
+        hash.endpoints,
+        'id',
+        `${ CATTLE_MONITORING_NAMESPACE }/rancher-monitoring-grafana`
+      );
+      const prometheus = findBy(
+        hash.endpoints,
+        'id',
+        `${ CATTLE_MONITORING_NAMESPACE }/rancher-monitoring-prometheus`
+      );
+
+      if (!isEmpty(alertmanager) && !isEmpty(alertmanager.subsets)) {
+        amMatch.enabled = true;
+      }
+      if (!isEmpty(grafana) && !isEmpty(grafana.subsets)) {
+        grafanaMatch.enabled = true;
+      }
+      if (!isEmpty(prometheus) && !isEmpty(prometheus.subsets)) {
+        promeMatch.enabled = true;
+      }
+    }
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  data() {
+    const grafanaSrc = require('~shell/assets/images/vendor/grafana.svg');
+    const prometheusSrc = require('~shell/assets/images/vendor/prometheus.svg');
+    const currentCluster = this.$store.getters['currentCluster'];
+    let valuesContentJson = DEFAUL_VALUE;
+
+    try {
+      valuesContentJson = merge({}, DEFAUL_VALUE, jsyaml.load(this.value.spec.valuesContent));
+    } catch (err) {
+      valuesContentJson = DEFAUL_VALUE;
+
+      this.$store.dispatch('growl/fromError', {
+        title: this.$store.getters['i18n/t']('generic.notification.title.error'),
+        err:   err.data || err,
+      }, { root: true });
+    }
+
+    return {
+      valuesContentJson,
+      externalLinks: {
+        alertmanager: {
+          enabled:     false,
+          iconSrc:     prometheusSrc,
+          label:       'monitoring.overview.linkedList.alertManager.label',
+          description:
+            'monitoring.overview.linkedList.alertManager.description',
+          link: `/k8s/clusters/${ currentCluster.id }/api/v1/namespaces/${ CATTLE_MONITORING_NAMESPACE }/services/http:rancher-monitoring-alertmanager:9093/proxy`,
+        },
+        grafana: {
+          enabled:     false,
+          iconSrc:     grafanaSrc,
+          label:       'monitoring.overview.linkedList.grafana.label',
+          description: 'monitoring.overview.linkedList.grafana.description',
+          link:        `/k8s/clusters/${ currentCluster.id }/api/v1/namespaces/${ CATTLE_MONITORING_NAMESPACE }/services/http:rancher-monitoring-grafana:80/proxy`,
+        },
+        prometheus: {
+          enabled:     false,
+          iconSrc:     prometheusSrc,
+          label:       'monitoring.overview.linkedList.prometheusPromQl.label',
+          description:
+            'monitoring.overview.linkedList.prometheusPromQl.description',
+          link: `/k8s/clusters/${ currentCluster.id }/api/v1/namespaces/${ CATTLE_MONITORING_NAMESPACE }/services/http:rancher-monitoring-prometheus:9090/proxy`,
+        },
+      }
+    };
+  },
+
+  computed: {
+    prometheusNodeExporter() {
+      return this.valuesContentJson['prometheus-node-exporter'];
+    },
+  },
+
+  watch: {
+    valuesContentJson: {
+      handler(neu) {
+        this.$set(this.value.spec, 'valuesContent', jsyaml.dump(neu));
+      },
+      deep:      true,
+      immediate: true
+    },
+  },
+};
+</script>
+
+<template>
+  <Tabbed :side-tabs="true">
+    <Tab
+      name="basic"
+      :label="t('harvester.addons.vmImport.titles.basic')"
+      :weight="99"
+    >
+      <RadioGroup
+        v-model="value.spec.enabled"
+        class="mb-20"
+        name="model"
+        :mode="mode"
+        :options="[true,false]"
+        :labels="[t('generic.enabled'), t('generic.disabled')]"
+      />
+    </Tab>
+    <Tab v-if="value.spec.enabled" name="prometheus" :label="t('harvester.setting.harvesterMonitoring.section.prometheus')" :weight="-1">
+      <a
+        v-clean-tooltip="!externalLinks.prometheus.enabled ? t('monitoring.overview.linkedList.na') : undefined"
+        :disabled="!externalLinks.prometheus.enabled"
+        :href="externalLinks.prometheus.link"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="subtype-banner m-0 mt-10 mb-10"
+      >
+        <div class="subtype-content">
+          <div class="title">
+            <div class="subtype-logo round-image">
+              <LazyImage :src="externalLinks.prometheus.iconSrc" />
+            </div>
+            <h5>
+              <span>
+                <t :k="externalLinks.prometheus.label" />
+              </span>
+            </h5>
+            <div class="flex-right">
+              <i class="icon icon-external-link mr-10" />
+            </div>
+          </div>
+        </div>
+      </a>
+      <div class="row">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.prometheus.prometheusSpec.scrapeInterval"
+            :label="t('monitoring.prometheus.config.scrape')"
+            :tooltip="t('harvester.setting.harvesterMonitoring.tips.scrape')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.prometheus.prometheusSpec.evaluationInterval"
+            :label="t('monitoring.prometheus.config.evaluation')"
+            :tooltip="t('harvester.setting.harvesterMonitoring.tips.evaluation')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.prometheus.prometheusSpec.retention"
+            :label="t('monitoring.prometheus.config.retention')"
+            :tooltip="t('harvester.setting.harvesterMonitoring.tips.retention')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.prometheus.prometheusSpec.retentionSize"
+            :label="t('monitoring.prometheus.config.retentionSize')"
+            :tooltip="t('harvester.setting.harvesterMonitoring.tips.retentionSize')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col span-12 mt-5">
+          <h4 class="mb-0">
+            {{ t('monitoring.prometheus.config.resourceLimits') }}
+          </h4>
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.prometheus.prometheusSpec.resources.requests.cpu"
+            :label="t('monitoring.prometheus.config.requests.cpu')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.prometheus.prometheusSpec.resources.requests.memory"
+            :label="t('monitoring.prometheus.config.requests.memory')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.prometheus.prometheusSpec.resources.limits.cpu"
+            :label="t('monitoring.prometheus.config.limits.cpu')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.prometheus.prometheusSpec.resources.limits.memory"
+            :label="t('monitoring.prometheus.config.limits.memory')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+    </Tab>
+    <Tab v-if="value.spec.enabled" name="nodeExporter" :label="t('harvester.setting.harvesterMonitoring.section.prometheusNodeExporter')" :weight="-2">
+      <div class="row mt-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="prometheusNodeExporter.resources.limits.cpu"
+            :label="t('monitoring.prometheus.config.limits.cpu')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="prometheusNodeExporter.resources.limits.memory"
+            :label="t('monitoring.prometheus.config.limits.memory')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="prometheusNodeExporter.resources.requests.cpu"
+            :label="t('monitoring.prometheus.config.requests.cpu')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="prometheusNodeExporter.resources.requests.memory"
+            :label="t('monitoring.prometheus.config.requests.memory')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+    </Tab>
+    <Tab v-if="value.spec.enabled && valuesContentJson.grafana.resources" name="grafana" :label="t('harvester.setting.harvesterMonitoring.section.grafana')" :weight="-3">
+      <a
+        v-clean-tooltip="!externalLinks.grafana.enabled ? t('monitoring.overview.linkedList.na') : undefined"
+        :disabled="!externalLinks.grafana.enabled"
+        :href="externalLinks.grafana.link"
+        target="_blank"
+        rel="noopener nofollow"
+        class="subtype-banner m-0 mt-10 mb-10"
+      >
+        <div class="subtype-content">
+          <div class="title">
+            <div class="subtype-logo round-image">
+              <LazyImage :src="externalLinks.grafana.iconSrc" />
+            </div>
+            <h5>
+              <span>
+                <t :k="externalLinks.grafana.label" />
+              </span>
+            </h5>
+            <div class="flex-right">
+              <i class="icon icon-external-link mr-10" />
+            </div>
+          </div>
+        </div>
+      </a>
+      <div class="row mt-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.grafana.resources.requests.cpu"
+            :label="t('monitoring.prometheus.config.requests.cpu')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.grafana.resources.requests.memory"
+            :label="t('monitoring.prometheus.config.requests.memory')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.grafana.resources.limits.cpu"
+            :label="t('monitoring.prometheus.config.limits.cpu')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.grafana.resources.limits.memory"
+            :label="t('monitoring.prometheus.config.limits.memory')"
+            :required="true"
+            :mode="mode"
+          />
+        </div>
+      </div>
+    </Tab>
+    <Tab v-if="value.spec.enabled" name="alertmanager" :label="t('harvester.setting.harvesterMonitoring.section.alertmanager')" :weight="-4">
+      <RadioGroup
+        v-model="valuesContentJson.alertmanager.enabled"
+        class="mb-20"
+        name="model"
+        :mode="mode"
+        :options="[true,false]"
+        :labels="[t('generic.enabled'), t('generic.disabled')]"
+      />
+
+      <a
+        v-if="valuesContentJson.alertmanager.enabled"
+        v-clean-tooltip="!externalLinks.alertmanager.enabled ? t('monitoring.overview.linkedList.na') : undefined"
+        :disabled="!externalLinks.alertmanager.enabled"
+        :href="externalLinks.alertmanager.link"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="subtype-banner m-0 mt-10 mb-10"
+      >
+        <div class="subtype-content">
+          <div class="title">
+            <div class="subtype-logo round-image">
+              <LazyImage :src="externalLinks.alertmanager.iconSrc" />
+            </div>
+            <h5>
+              <span>
+                <t :k="externalLinks.alertmanager.label" />
+              </span>
+            </h5>
+            <div class="flex-right">
+              <i class="icon icon-external-link mr-10" />
+            </div>
+          </div>
+        </div>
+      </a>
+
+      <div v-if="valuesContentJson.alertmanager.enabled">
+        <div class="row mt-10">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="valuesContentJson.alertmanager.alertmanagerSpec.retention"
+              :label="t('monitoring.prometheus.config.retention')"
+              :required="true"
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="valuesContentJson.alertmanager.alertmanagerSpec.resources.limits.cpu"
+              :label="t('monitoring.prometheus.config.limits.cpu')"
+              :required="true"
+              :mode="mode"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="valuesContentJson.alertmanager.alertmanagerSpec.resources.limits.memory"
+              :label="t('monitoring.prometheus.config.limits.memory')"
+              :required="true"
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="valuesContentJson.alertmanager.alertmanagerSpec.resources.requests.cpu"
+              :label="t('monitoring.prometheus.config.requests.cpu')"
+              :required="true"
+              :mode="mode"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="valuesContentJson.alertmanager.alertmanagerSpec.resources.requests.memory"
+              :label="t('monitoring.prometheus.config.requests.memory')"
+              :required="true"
+              :mode="mode"
+            />
+          </div>
+        </div>
+      </div>
+    </Tab>
+  </Tabbed>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.addon/rancher-vcluster.vue b/pkg/harvester/edit/harvesterhci.io.addon/rancher-vcluster.vue
new file mode 100644
index 00000000..dd2b144d
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.addon/rancher-vcluster.vue
@@ -0,0 +1,151 @@
+<script>
+import merge from 'lodash/merge';
+import jsyaml from 'js-yaml';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+
+const DEFAUL_VALUE = {
+  hostname:          '',
+  rancherVersion:    '',
+  bootstrapPassword: '',
+};
+
+export default {
+  name:       'EditAddonVcluster',
+  components: { LabeledInput, RadioGroup },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+  },
+
+  data() {
+    let valuesContentJson = {};
+
+    try {
+      valuesContentJson = merge({}, DEFAUL_VALUE, jsyaml.load(this.value.spec.valuesContent));
+    } catch (err) {
+      valuesContentJson = DEFAUL_VALUE;
+
+      this.$store.dispatch('growl/fromError', {
+        title: this.$store.getters['i18n/t']('generic.notification.title.error'),
+        err:   err.data || err,
+      }, { root: true });
+    }
+
+    return { valuesContentJson };
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.willSave, 'willSave');
+    }
+  },
+
+  methods: {
+    willSave() {
+      const errors = [];
+
+      if (!this.value.spec.enabled) {
+        return Promise.resolve();
+      }
+
+      if (!this.valuesContentJson.hostname) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.addons.rancherVcluster.hostname') }, true));
+      }
+
+      if (!this.valuesContentJson.bootstrapPassword) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.addons.rancherVcluster.password') }, true));
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      } else {
+        return Promise.resolve();
+      }
+    },
+  },
+
+  watch: {
+    valuesContentJson: {
+      handler(neu) {
+        this.$set(this.value.spec, 'valuesContent', jsyaml.dump(neu));
+      },
+      deep:      true,
+      immediate: true
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-12">
+        <RadioGroup
+          v-model="value.spec.enabled"
+          class="mb-20"
+          name="model"
+          :mode="mode"
+          :options="[true,false]"
+          :labels="[t('generic.enabled'), t('generic.disabled')]"
+        />
+      </div>
+    </div>
+
+    <template v-if="value.spec.enabled">
+      <div class="row mb-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.hostname"
+            label-key="harvester.addons.rancherVcluster.hostname"
+            :required="true"
+            :mode="mode"
+            placeholder="rancher.$vip.nip.io"
+          />
+        </div>
+
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.rancherVersion"
+            label-key="harvester.addons.rancherVcluster.rancherVersion"
+            :required="true"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="row mt-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="valuesContentJson.bootstrapPassword"
+            label-key="harvester.addons.rancherVcluster.password"
+            :mode="mode"
+            :required="true"
+            type="password"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.addon/vm-import-controller.vue b/pkg/harvester/edit/harvesterhci.io.addon/vm-import-controller.vue
new file mode 100644
index 00000000..34fad699
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.addon/vm-import-controller.vue
@@ -0,0 +1,234 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { RadioGroup } from '@components/Form/Radio';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+import { STORAGE_CLASS } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
+import { set, get, clone } from '@shell/utils/object';
+
+const VALUES_YAML_KEYS = [
+  'resources.requests.cpu',
+  'resources.requests.memory',
+  'resources.limits.cpu',
+  'resources.limits.memory',
+  'pvcClaim.enabled',
+  'pvcClaim.size',
+  'pvcClaim.storageClassName',
+];
+
+const DEFAULT_VALUES = {
+  'resources.requests.cpu':    '0.5',
+  'resources.requests.memory': '2Gi',
+  'resources.limits.cpu':      '2',
+  'resources.limits.memory':   '4Gi',
+  'pvcClaim.enabled':          false,
+  'pvcClaim.size':             '200Gi',
+  'pvcClaim.storageClassName': '',
+};
+
+export default {
+  name:       'EditHarvesterLogging',
+  components: {
+    LabeledInput,
+    Tabbed,
+    Tab,
+    RadioGroup,
+    LabeledSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = { storages: this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }) };
+
+    await allHash(hash);
+  },
+
+  data() {
+    let valuesObj = {};
+
+    try {
+      valuesObj = JSON.parse(this.value?.spec?.valuesContent || '{}');
+    } catch (err) {}
+
+    const valuesContent = clone(valuesObj);
+
+    VALUES_YAML_KEYS.map((key) => {
+      if (!get(valuesObj, key)) {
+        set(valuesContent, key, DEFAULT_VALUES[key]);
+      }
+    });
+
+    return { valuesContent };
+  },
+
+  computed: {
+    storageClassOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
+
+      const out = storages.filter(s => !s.parameters?.backingImage).map((s) => {
+        const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+
+        return {
+          label,
+          value: s.name,
+        };
+      }) || [];
+
+      return out;
+    },
+  },
+
+  methods: {
+    update() {
+      set(this.value, 'spec.valuesContent', JSON.stringify(this.valuesContent));
+    },
+
+    setDefaultClassName() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find( s => s.isDefault);
+
+      this.$set(this.valuesContent.pvcClaim, 'storageClassName', this.valuesContent?.pvcClaim?.storageClassName || defaultStorage?.metadata?.name || 'longhorn');
+
+      this.update();
+    },
+  },
+
+  watch: {
+    'valuesContent.pvcClaim.enabled'(value) {
+      if (value) {
+        this.setDefaultClassName();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <Tabbed :side-tabs="true">
+    <Tab
+      name="basic"
+      :label="t('harvester.addons.vmImport.titles.basic')"
+      :weight="99"
+    >
+      <RadioGroup
+        v-model="value.spec.enabled"
+        class="mb-20"
+        name="model"
+        :mode="mode"
+        :options="[true,false]"
+        :labels="[t('generic.enabled'), t('generic.disabled')]"
+      />
+
+      <div v-if="value.spec.enabled">
+        <div class="row mt-10">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="valuesContent.resources.limits.cpu"
+              :label="t('monitoring.prometheus.config.limits.cpu')"
+              :required="true"
+              :mode="mode"
+              @input="update"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="valuesContent.resources.limits.memory"
+              :label="t('monitoring.prometheus.config.limits.memory')"
+              :required="true"
+              :mode="mode"
+              @input="update"
+            />
+          </div>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="valuesContent.resources.requests.cpu"
+              :label="t('monitoring.prometheus.config.requests.cpu')"
+              :required="true"
+              :mode="mode"
+              @input="update"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="valuesContent.resources.requests.memory"
+              :label="t('monitoring.prometheus.config.requests.memory')"
+              :required="true"
+              :mode="mode"
+              @input="update"
+            />
+          </div>
+        </div>
+
+        <br />
+        <h2>{{ t('harvester.addons.vmImport.titles.pvc') }}</h2>
+        <div v-if="value.spec.enabled">
+          <RadioGroup
+            v-model="valuesContent.pvcClaim.enabled"
+            class="mb-20"
+            name="model"
+            :mode="mode"
+            :options="[true,false]"
+            :labels="[t('generic.enabled'), t('generic.disabled')]"
+            @input="update"
+          />
+
+          <div v-if="valuesContent.pvcClaim.enabled">
+            <div class="row mt-10">
+              <div class="col span-6">
+                <LabeledInput
+                  v-model="valuesContent.pvcClaim.size"
+                  :label="t('harvester.volume.size')"
+                  :required="true"
+                  :mode="mode"
+                  @input="update"
+                />
+              </div>
+              <div class="col span-6">
+                <LabeledSelect
+                  v-model="valuesContent.pvcClaim.storageClassName"
+                  :options="storageClassOptions"
+                  :label="t('harvester.storage.storageClass.label')"
+                  :mode="mode"
+                  class="mb-20"
+                  @input="update"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Tab>
+  </Tabbed>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.cloudtemplate.vue b/pkg/harvester/edit/harvesterhci.io.cloudtemplate.vue
new file mode 100644
index 00000000..2026fcf4
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.cloudtemplate.vue
@@ -0,0 +1,123 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import CruResource from '@shell/components/CruResource';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import YamlEditor from '@shell/components/YamlEditor';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { HCI } from '@pkg/harvester/config/labels-annotations';
+
+export default {
+  name: 'HarvesterEditCloudTemplate',
+
+  components: {
+    Tab,
+    Tabbed,
+    YamlEditor,
+    CruResource,
+    LabeledSelect,
+    NameNsDescription,
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+    return {
+      config: this.value.data?.cloudInit || '',
+      type:   this.value?.metadata?.labels?.[HCI.CLOUD_INIT] || 'user',
+    };
+  },
+
+  computed: {
+    types() {
+      return [{
+        label: 'User Data',
+        value: 'user'
+      }, {
+        label: 'Network Data',
+        value: 'network'
+      }];
+    },
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  methods: {
+    update() {
+      this.value.data = { cloudInit: this.config };
+    },
+
+    updateBeforeSave() {
+      if (this.isCreate) {
+        this.value.metadata.labels = {
+          ...this.value.metadata.labels,
+          [HCI.CLOUD_INIT]: this.type,
+        };
+
+        this.value.data = { cloudInit: this.config };
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :mode="mode"
+    :resource="value"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="save"
+    @cancel="done"
+  >
+    <NameNsDescription
+      v-model="value"
+      :mode="mode"
+      :namespaced="true"
+    />
+
+    <Tabbed :side-tabs="true">
+      <Tab name="basics" :label="t('harvester.host.tabs.basics')" :weight="1">
+        <div class="mb-20">
+          <LabeledSelect
+            v-model="type"
+            :label="t('harvester.cloudTemplate.templateType')"
+            :disabled="!isCreate"
+            :options="types"
+          />
+        </div>
+
+        <div class="resource-yaml">
+          <YamlEditor
+            ref="yamlUser"
+            v-model="config"
+            class="yaml-editor"
+            :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
+            @onChanges="update"
+          />
+        </div>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+  $yaml-height: 200px;
+
+  ::v-deep .yaml-editor{
+    flex: 1;
+    min-height: $yaml-height;
+    & .code-mirror .CodeMirror {
+      position: initial;
+      height: auto;
+      min-height: $yaml-height;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue b/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue
new file mode 100644
index 00000000..bd10b089
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue
@@ -0,0 +1,293 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabelValue from '@shell/components/LabelValue';
+import { BadgeState } from '@components/BadgeState';
+import { Banner } from '@components/Banner';
+import { RadioGroup, RadioButton } from '@components/Form/Radio';
+import HarvesterDisk from '../../mixins/harvester-disk';
+import Tags from '../../components/DiskTags';
+import { HCI } from '../../types';
+import { LONGHORN_SYSTEM } from './index';
+
+export default {
+  components: {
+    LabeledInput,
+    LabelValue,
+    BadgeState,
+    Banner,
+    RadioGroup,
+    RadioButton,
+    Tags,
+  },
+
+  mixins: [
+    HarvesterDisk,
+  ],
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+    disks: {
+      type:    Array,
+      default: () => [],
+    },
+    mode: {
+      type:    String,
+      default: 'edit',
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    allowSchedulingOptions() {
+      return [{
+        label: this.t('generic.enabled'),
+        value: true,
+      }, {
+        label: this.t('generic.disabled'),
+        value: false,
+      }];
+    },
+
+    evictionRequestedOptions() {
+      return [{
+        label: this.t('generic.yes'),
+        value: true,
+      }, {
+        label: this.t('generic.no'),
+        value: false,
+      }];
+    },
+
+    mountedMessage() {
+      const state = this.blockDevice?.metadata?.state || {};
+
+      if (state?.error) {
+        return state?.message;
+      } else {
+        return '';
+      }
+    },
+
+    isProvisioned() {
+      return this.blockDevice?.spec.fileSystem.provisioned;
+    },
+
+    forceFormattedDisabled() {
+      const lastFormattedAt = this.blockDevice?.status?.deviceStatus?.fileSystem?.LastFormattedAt;
+      const fileSystem = this.blockDevice?.status?.deviceStatus?.fileSystem.type;
+
+      const systems = ['ext4', 'XFS'];
+
+      if (lastFormattedAt || this.blockDevice?.childParts?.length > 0) {
+        return true;
+      } else if (systems.includes(fileSystem)) {
+        return false;
+      } else if (!fileSystem) {
+        return true;
+      } else {
+        return !this.canEditPath;
+      }
+    },
+
+    canEditPath() {
+      if (this.mountedMessage) {
+        return true;
+      }
+
+      if (this.value.isNew && !this.value.originPath) {
+        return true;
+      }
+
+      return false;
+    },
+
+    isFormatted() {
+      return !!this.blockDevice?.status?.deviceStatus?.fileSystem?.LastFormattedAt;
+    },
+
+    formattedBannerLabel() {
+      const system = this.blockDevice?.status?.deviceStatus?.fileSystem?.type;
+
+      const label = this.t('harvester.host.disk.lastFormattedAt.info');
+
+      if (system) {
+        return `${ label } ${ this.t('harvester.host.disk.fileSystem.info', { system }) }`;
+      } else {
+        return label;
+      }
+    },
+
+    provisionPhase() {
+      return this.blockDevice?.provisionPhase || {};
+    },
+
+    blockDevice() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const name = this.value?.name;
+
+      return this.$store.getters[`${ inStore }/byId`](HCI.BLOCK_DEVICE, `${ LONGHORN_SYSTEM }/${ name }`) || {};
+    },
+
+    isCorrupted() {
+      return this.blockDevice?.status?.deviceStatus?.fileSystem?.corrupted;
+    },
+
+    isFormatting() {
+      return this.blockDevice.isFormatting;
+    },
+  },
+  methods: {
+    update() {
+      this.$emit('input', this.value);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="disk" @input="update">
+    <div class="mt-10" />
+    <Banner
+      v-if="mountedMessage && isProvisioned"
+      color="error"
+      :label="mountedMessage"
+    />
+    <Banner
+      v-if="isFormatting"
+      color="info"
+      :label="t('harvester.host.disk.fileSystem.formatting')"
+    />
+    <Banner
+      v-else-if="isFormatted && !isCorrupted"
+      color="info"
+      :label="formattedBannerLabel"
+    />
+    <div v-if="!value.isNew">
+      <div class="row">
+        <div class="col span-12">
+          <Tags
+            v-model="value.tags"
+            :label="t('harvester.host.disk.tags.label')"
+            :add-label="t('harvester.host.disk.tags.addLabel')"
+            :mode="mode"
+          />
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col span-12">
+          <div class="pull-right">
+            {{ t('harvester.host.disk.conditions') }}:
+            <BadgeState
+              v-clean-tooltip="readyCondition.message"
+              :color="readyCondition.status === 'True' ? 'bg-success' : 'bg-error' "
+              :icon="readyCondition.status === 'True' ? 'icon-checkmark' : 'icon-warning' "
+              label="Ready"
+              class="mr-10 ml-10 state"
+            />
+            <BadgeState
+              v-clean-tooltip="schedulableCondition.message"
+              :color="schedulableCondition.status === 'True' ? 'bg-success' : 'bg-error' "
+              :icon="schedulableCondition.status === 'True' ? 'icon-checkmark' : 'icon-warning' "
+              label="Schedulable"
+              class="mr-10 state"
+            />
+            <BadgeState
+              v-if="provisionPhase.label"
+              :color="provisionPhase.color"
+              :icon="provisionPhase.icon"
+              :label="provisionPhase.label"
+              class="mr-10 state"
+            />
+          </div>
+        </div>
+      </div>
+      <div v-if="!value.isNew" class="row mt-30">
+        <div class="col flex span-12">
+          <LabelValue
+            :name="t('harvester.host.disk.storageAvailable.label')"
+            :value="value.storageAvailable"
+          />
+          <LabelValue
+            :name="t('harvester.host.disk.storageScheduled.label')"
+            :value="value.storageScheduled"
+          />
+          <LabelValue
+            :name="t('harvester.host.disk.storageMaximum.label')"
+            :value="value.storageMaximum"
+          />
+        </div>
+      </div>
+      <hr class="mt-10" />
+    </div>
+    <div class="row mt-10">
+      <div class="col span-12">
+        <LabeledInput
+          v-model="value.displayName"
+          :label="t('generic.name')"
+          :disabled="true"
+        />
+      </div>
+    </div>
+    <div v-if="(value.isNew && !isFormatted) || isCorrupted" class="row mt-10">
+      <div class="col span-6">
+        <RadioGroup
+          v-model="value.forceFormatted"
+          :mode="mode"
+          name="forceFormatted"
+          label-key="harvester.host.disk.forceFormatted.label"
+          :labels="[t('generic.no'),t('harvester.host.disk.forceFormatted.yes')]"
+          :options="[false, true]"
+          :disabled="forceFormattedDisabled"
+          tooltip-key="harvester.host.disk.forceFormatted.toolTip"
+        >
+          <template #1="{option, listeners}">
+            <RadioButton
+              :label="option.label"
+              :val="option.value"
+              :value="value.forceFormatted"
+              :disabled="forceFormattedDisabled && !value.forceFormatted"
+              v-on="listeners"
+            />
+          </template>
+        </RadioGroup>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.close {
+  top: 10px;
+  right: 10px;
+  padding:0;
+  position: absolute;
+}
+
+.disk {
+  position: relative;
+
+  .secret-name {
+    height: $input-height;
+  }
+
+  &:not(:last-of-type) {
+    padding-bottom: 10px;
+    margin-bottom: 30px;
+  }
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+
+.badge-state {
+    padding: 2px 5px;
+}
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.host/HarvesterKsmtuned.vue b/pkg/harvester/edit/harvesterhci.io.host/HarvesterKsmtuned.vue
new file mode 100644
index 00000000..541c9f10
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.host/HarvesterKsmtuned.vue
@@ -0,0 +1,216 @@
+<script>
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import UnitInput from '@shell/components/form/UnitInput';
+import { RadioGroup } from '@components/Form/Radio';
+import { Checkbox } from '@components/Form/Checkbox';
+import { HCI } from '../../types';
+
+export const ksmtunedMode = [{
+  value: 'standard',
+  label: 'Standard'
+}, {
+  value: 'high',
+  label: 'High-Perfomanace'
+}, {
+  value: 'customized',
+  label: 'Customized'
+}];
+
+export const ksmtunedRunOption = [{
+  label: 'Run',
+  value: 'run'
+}, {
+  label: 'Stop',
+  value: 'stop'
+}, {
+  label: 'Prune',
+  value: 'prune'
+}];
+
+export default {
+  name:       'HarvesterKsmtuned',
+  components: {
+    Checkbox, LabeledInput, LabeledSelect, RadioGroup, UnitInput
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true
+    },
+
+    node: {
+      type:     Object,
+      required: true,
+    },
+
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.KSTUNED });
+
+    this.ksmtuned = hash.find((node) => {
+      return node.id === this.node.id;
+    });
+
+    this.enableMergeAcrossNodes = !!this.ksmtuned.spec?.mergeAcrossNodes;
+    this.spec = this.ksmtuned.spec;
+  },
+
+  data() {
+    return {
+      ksmtuned:               {},
+      spec:                   {},
+      thresCoef:              30,
+      ksmtunedMode,
+      ksmtunedRunOption,
+      enableMergeAcrossNodes: true
+    };
+  },
+
+  created() {
+    this.registerBeforeHook(this.saveKsmtuned, 'saveKsmtuned');
+  },
+
+  computed: {
+    isCustomizedMode() {
+      return this.spec.mode === 'customized';
+    },
+
+    showKsmt() {
+      return this.spec.run === 'run';
+    }
+  },
+
+  methods: {
+    async saveKsmtuned() {
+      this.spec.mergeAcrossNodes = this.enableMergeAcrossNodes ? 1 : 0;
+      this.$set(this.ksmtuned, 'spec', this.spec);
+
+      await this.ksmtuned.save().catch((reason) => {
+        if (reason?.type === 'error') {
+          this.$store.dispatch('growl/error', {
+            title:   this.t('harvester.notification.title.error'),
+            message: reason?.message
+          }, { root: true });
+
+          return Promise.reject(new Error('saveKsmtuned error'));
+        }
+      });
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <LabeledSelect
+      v-model="spec.run"
+      :label="t('harvester.host.ksmtuned.run')"
+      :options="ksmtunedRunOption"
+      class="mb-20"
+      :mode="mode"
+      required
+    />
+
+    <template v-if="showKsmt">
+      <UnitInput
+        v-model="spec.thresCoef"
+        v-int-number
+        :label="t('harvester.host.ksmtuned.thresCoef')"
+        suffix="%"
+        :delay="0"
+        required
+        :mode="mode"
+        class="mb-20"
+      />
+
+      <Checkbox v-model="enableMergeAcrossNodes" :mode="mode" class="check mb-20" type="checkbox" :label="t('harvester.host.ksmtuned.enableMergeNodes')" />
+
+      <h3>
+        <t k="harvester.host.ksmtuned.modeLink" :raw="true" />
+      </h3>
+      <RadioGroup
+        v-model="spec.mode"
+        class="mb-20"
+        :name="t('harvester.host.ksmtuned.mode')"
+        :options="ksmtunedMode"
+      />
+
+      <template v-if="isCustomizedMode">
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model.number="spec.ksmtunedParameters.boost"
+              required
+              type="number"
+              :label="t('harvester.host.ksmtuned.parameters.boost')"
+              :tooltip="t('harvester.host.ksmtuned.parameters.description.boost')"
+              class="mb-20"
+              :mode="mode"
+            />
+          </div>
+
+          <div class="col span-6">
+            <LabeledInput
+              v-model.number="spec.ksmtunedParameters.decay"
+              required
+              type="number"
+              :label="t('harvester.host.ksmtuned.parameters.decay')"
+              :tooltip="t('harvester.host.ksmtuned.parameters.description.decay')"
+              class="mb-20"
+              :mode="mode"
+            />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model.number="spec.ksmtunedParameters.minPages"
+              required
+              type="number"
+              :label="t('harvester.host.ksmtuned.parameters.minPages')"
+              :tooltip="t('harvester.host.ksmtuned.parameters.description.minPages')"
+              class="mb-20"
+              :mode="mode"
+            />
+          </div>
+
+          <div class="col span-6">
+            <LabeledInput
+              v-model.number="spec.ksmtunedParameters.maxPages"
+              required
+              type="number"
+              :label="t('harvester.host.ksmtuned.parameters.maxPages')"
+              :tooltip="t('harvester.host.ksmtuned.parameters.description.maxPages')"
+              class="mb-20"
+              :mode="mode"
+            />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model.number="spec.ksmtunedParameters.sleepMsec"
+              required
+              type="number"
+              :label="t('harvester.host.ksmtuned.parameters.sleepMsec')"
+              :tooltip="t('harvester.host.ksmtuned.parameters.description.sleepMsec')"
+              class="mb-20"
+              :mode="mode"
+            />
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/harvesterhci.io.host/HarvesterSeeder.vue b/pkg/harvester/edit/harvesterhci.io.host/HarvesterSeeder.vue
new file mode 100644
index 00000000..ffd84011
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.host/HarvesterSeeder.vue
@@ -0,0 +1,370 @@
+<script>
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import { Checkbox } from '@components/Form/Checkbox';
+import { SECRET } from '@shell/config/types';
+import ModalWithCard from '@shell/components/ModalWithCard';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { Banner } from '@components/Banner';
+
+import { base64Encode, base64Decode } from '@shell/utils/crypto';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+
+const _NEW = '_NEW';
+
+export default {
+  name: 'HarvesterSeeder',
+
+  components: {
+    Checkbox,
+    LabeledInput,
+    LabeledSelect,
+    RadioGroup,
+    ModalWithCard,
+    NameNsDescription,
+    Banner,
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true
+    },
+
+    node: {
+      type:     Object,
+      required: true,
+    },
+
+    registerAfterHook: {
+      type:     Function,
+      required: true,
+    },
+
+    inventory: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  data() {
+    const enableInventory = !!this.inventory?.id;
+
+    return {
+      enableInventory,
+      value:             this.inventory,
+      secret:            {},
+      errors:            [],
+      newSecretSelected: false,
+      isOpen:            false,
+    };
+  },
+
+  created() {
+    this.registerAfterHook(this.saveInventory, 'saveInventory');
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.secret = await this.$store.dispatch(`${ inStore }/create`, {
+      type: SECRET,
+      data: {
+        username: '',
+        password: '',
+      },
+      metadata: {
+        namespace: '',
+        name:      '',
+        describe:  '',
+      },
+    });
+  },
+
+  computed: {
+    secretOption() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      const out = this.$store.getters[`${ inStore }/all`](SECRET).filter((s) => {
+        return s.data?.username && s.data?.password;
+      }).map( (s) => {
+        return {
+          label: s.id,
+          value: s.id
+        };
+      });
+
+      // if (!(this.disableCreate || this.mode === _VIEW) && this.isCreatable) {
+      out.unshift({
+        label: this.t('harvester.virtualMachine.createSSHKey'),
+        value: _NEW,
+      });
+      // }
+
+      return out;
+    },
+
+    selectedSecret: {
+      get() {
+        const namespace = this.value.spec?.baseboardSpec?.connection?.authSecretRef?.namespace;
+        const name = this.value?.spec?.baseboardSpec?.connection?.authSecretRef?.name;
+
+        if (namespace && name) {
+          return `${ namespace }/${ name }`;
+        } else {
+          return '';
+        }
+      },
+
+      set(value) {
+        if (value === _NEW) {
+          this.newSecretSelected = true;
+        } else {
+          const [namespace, name] = value.split('/');
+
+          this.$set(this.value.spec.baseboardSpec.connection.authSecretRef, 'namespace', namespace);
+          this.$set(this.value.spec.baseboardSpec.connection.authSecretRef, 'name', name);
+        }
+      },
+    },
+
+    username: {
+      get() {
+        return base64Decode(this.secret?.data?.username);
+      },
+
+      set(value) {
+        this.$set(this.secret.data, 'username', base64Encode(value));
+      }
+    },
+
+    password: {
+      get() {
+        return base64Decode(this.secret?.data?.password);
+      },
+
+      set(value) {
+        this.$set(this.secret.data, 'password', base64Encode(value));
+      }
+    },
+  },
+
+  methods: {
+    async saveInventory() {
+      if (this.enableInventory) {
+        const errors = [];
+
+        if (!this.value.spec.baseboardSpec.connection.host) {
+          errors.push(this.t('validation.required', { key: this.t('harvester.seeder.inventory.host.label') }, true));
+        }
+
+        if (!this.value.spec.baseboardSpec.connection.port) {
+          errors.push(this.t('validation.required', { key: this.t('harvester.seeder.inventory.port.label') }, true));
+        }
+
+        if (!this.selectedSecret) {
+          errors.push(this.t('validation.required', { key: this.t('harvester.seeder.inventory.secret.label') }, true));
+        }
+
+        if (errors.length > 0) {
+          return Promise.reject(exceptionToErrorsArray(errors));
+        }
+
+        if (!this.value.id) {
+          this.value.metadata.annotations['metal.harvesterhci.io/local-node-name'] = this.node.id;
+        }
+
+        this.value.metadata.annotations['metal.harvesterhci.io/local-inventory'] = 'true';
+
+        return await this.value.save();
+      } else if (this.value.id) {
+        return await this.value.remove();
+      } else {
+        return Promise.resolve();
+      }
+    },
+
+    show() {
+      this.isOpen = true;
+    },
+
+    hide() {
+      this.isOpen = false;
+      this.newSecretSelected = false;
+    },
+
+    cancel() {
+      this.hide();
+    },
+
+    async saveSecret(buttonCb) {
+      this.errors = [];
+
+      if (!this.username) {
+        this.errors.push(this.t('validation.required', { key: this.t('harvester.virtualMachine.input.username') }, true));
+      }
+
+      if (!this.password) {
+        this.errors.push(this.t('validation.required', { key: this.t('harvester.virtualMachine.input.password') }, true));
+      }
+
+      if (this.errors.length > 0) {
+        buttonCb(false);
+
+        return;
+      }
+
+      try {
+        const res = await this.secret.save();
+
+        if (res.id) {
+          this.secretOption.push({
+            label: res.id,
+            value: res.id
+          });
+        }
+
+        this.selectedSecret = res.id;
+
+        buttonCb(true);
+        this.cancel();
+      } catch (err) {
+        this.errors = [err.message];
+        buttonCb(false);
+      }
+    }
+  },
+
+  watch: {
+    newSecretSelected(val) {
+      if (val) {
+        this.show();
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="inventory.warningMessages.length > 0">
+      <Banner
+        v-for="msg in inventory.warningMessages"
+        :key="msg.text"
+        color="error"
+        :label="msg.text"
+      />
+    </div>
+    <div class="row">
+      <div class="col span-6">
+        <RadioGroup
+          v-model="enableInventory"
+          :options="[
+            { label: t('generic.enabled'), value: true },
+            { label: t('generic.disabled'), value: false }
+          ]"
+          :mode="mode"
+          name="enableInventory"
+        />
+      </div>
+    </div>
+    <div v-if="enableInventory">
+      <div class="row mt-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="value.spec.baseboardSpec.connection.host"
+            :label="t('harvester.seeder.inventory.host.label')"
+            :placeholder="t('harvester.seeder.inventory.host.placeholder')"
+            :mode="mode"
+            required
+          />
+          <Checkbox
+            v-model="value.spec.baseboardSpec.connection.insecureTLS"
+            class="mt-5"
+            :mode="mode"
+            :label="t('harvester.seeder.inventory.insecureTLS.label')"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model.number="value.spec.baseboardSpec.connection.port"
+            :label="t('harvester.seeder.inventory.port.label')"
+            :placeholder="t('harvester.seeder.inventory.port.placeholder')"
+            :mode="mode"
+            required
+          />
+        </div>
+      </div>
+      <div class="row mt-20">
+        <div class="col span-6">
+          <LabeledSelect
+            v-model="selectedSecret"
+            :label="t('harvester.seeder.inventory.secret.label')"
+            :mode="mode"
+            :options="secretOption"
+            required
+          />
+        </div>
+      </div>
+      <div class="row mt-20">
+        <div class="col span-6">
+          <RadioGroup
+            v-model="value.spec.events.enabled"
+            name="enabled"
+            :options="[true, false]"
+            :label="t('harvester.seeder.inventory.event.label')"
+            :labels="[t('generic.enabled'), t('generic.disabled')]"
+            :mode="mode"
+          />
+        </div>
+        <div
+          v-if="value.spec.events.enabled"
+          class="col span-6"
+        >
+          <LabeledInput
+            v-model="value.spec.events.pollingInterval"
+            :label="t('harvester.seeder.inventory.pollingInterval.label')"
+            :mode="mode"
+          />
+        </div>
+      </div>
+
+      <ModalWithCard
+        v-if="isOpen"
+        width="80%"
+        :errors="errors"
+        name="secretModal"
+        @finish="saveSecret"
+        @close="cancel"
+      >
+        <template #title>
+          {{ t('harvester.seeder.inventory.secret.create.title') }}
+        </template>
+
+        <template #content>
+          <NameNsDescription
+            v-model="secret"
+            :namespaced="true"
+            mode="create"
+          />
+
+          <LabeledInput
+            v-model="username"
+            :label="t('harvester.virtualMachine.input.username')"
+            class="mb-20"
+            required
+          />
+
+          <LabeledInput
+            v-model="password"
+            type="password"
+            :label="t('harvester.virtualMachine.input.password')"
+            class="mb-20"
+            required
+          />
+        </template>
+      </ModalWithCard>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/harvesterhci.io.host/index.vue b/pkg/harvester/edit/harvesterhci.io.host/index.vue
new file mode 100644
index 00000000..74a5db28
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.host/index.vue
@@ -0,0 +1,688 @@
+<script>
+import { mapGetters } from 'vuex';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import Footer from '@shell/components/form/Footer';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+import ButtonDropdown from '@shell/components/ButtonDropdown';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { HCI as HCI_LABELS_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { LONGHORN, SECRET } from '@shell/config/types';
+import { HCI } from '../../types';
+import { allHash } from '@shell/utils/promise';
+import { formatSi } from '@shell/utils/units';
+import { findBy } from '@shell/utils/array';
+import { clone } from '@shell/utils/object';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import KeyValue from '@shell/components/form/KeyValue';
+import Loading from '@shell/components/Loading.vue';
+import MessageLink from '@shell/components/MessageLink';
+import { ADD_ONS } from '@pkg/harvester/config/harvester-map';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '@pkg/harvester/config/harvester';
+
+import { _EDIT } from '@shell/config/query-params';
+import { sortBy } from '@shell/utils/sort';
+import { Banner } from '@components/Banner';
+import HarvesterDisk from './HarvesterDisk';
+import HarvesterKsmtuned from './HarvesterKsmtuned';
+import HarvesterSeeder from './HarvesterSeeder';
+import Tags from '../../components/DiskTags';
+
+export const LONGHORN_SYSTEM = 'longhorn-system';
+
+export default {
+  name:       'HarvesterEditNode',
+  components: {
+    Footer,
+    Tabbed,
+    Tab,
+    LabeledInput,
+    NameNsDescription,
+    ArrayListGrouped,
+    HarvesterDisk,
+    HarvesterKsmtuned,
+    ButtonDropdown,
+    KeyValue,
+    Banner,
+    Tags,
+    Loading,
+    HarvesterSeeder,
+    MessageLink,
+  },
+  mixins: [CreateEditView],
+  props:  {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      longhornNodes: this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.NODES }),
+      blockDevices:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.BLOCK_DEVICE }),
+      addons:        this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS }),
+      secrets:       this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET }),
+    };
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.INVENTORY)) {
+      hash.inventories = this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.INVENTORY });
+    }
+
+    await allHash(hash);
+
+    const blockDevices = this.$store.getters[`${ inStore }/all`](HCI.BLOCK_DEVICE);
+    const provisionedBlockDevices = blockDevices.filter((d) => {
+      const provisioned = d?.spec?.fileSystem?.provisioned;
+      const isCurrentNode = d?.spec?.nodeName === this.value.id;
+      const isLonghornMounted = findBy(this.longhornDisks, 'name', d.metadata.name);
+
+      return provisioned && isCurrentNode && !isLonghornMounted;
+    })
+      .map((d) => {
+        const corrupted = d?.status?.deviceStatus?.fileSystem?.corrupted;
+
+        return {
+          isNew:          true,
+          name:           d?.metadata?.name,
+          originPath:     d?.spec?.fileSystem?.mountPoint,
+          path:           d?.spec?.fileSystem?.mountPoint,
+          blockDevice:    d,
+          displayName:    d?.displayName,
+          forceFormatted: corrupted ? true : d?.spec?.fileSystem?.forceFormatted || false,
+        };
+      });
+
+    const disks = [...this.longhornDisks, ...provisionedBlockDevices];
+
+    this.disks = disks;
+    this.newDisks = clone(disks);
+    this.blockDeviceOpts = this.getBlockDeviceOpts();
+
+    const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
+    const seeder = addons.find(addon => addon.id === `harvester-system/${ ADD_ONS.HARVESTER_SEEDER }`);
+
+    const seederEnabled = seeder ? seeder?.spec?.enabled : false;
+
+    if (seederEnabled) {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const inventories = this.$store.getters[`${ inStore }/all`](HCI.INVENTORY) || [];
+
+      const inventory = inventories.find(inv => inv.id === `harvester-system/${ this.value.id }`);
+
+      if (inventory) {
+        this.inventory = await this.$store.dispatch(`${ inStore }/clone`, { resource: inventory });
+      } else {
+        this.inventory = await this.$store.dispatch(`${ inStore }/create`, {
+          type:     HCI.INVENTORY,
+          metadata: {
+            name:      this.value.id,
+            namespace: 'harvester-system'
+          },
+        });
+
+        this.inventory.applyDefaults();
+      }
+    }
+  },
+
+  data() {
+    const customName = this.value.metadata?.annotations?.[HCI_LABELS_ANNOTATIONS.HOST_CUSTOM_NAME] || '';
+    const consoleUrl = this.value.metadata?.annotations?.[HCI_LABELS_ANNOTATIONS.HOST_CONSOLE_URL] || '';
+
+    return {
+      customName,
+      consoleUrl,
+      disks:           [],
+      newDisks:        [],
+      blockDevice:     [],
+      blockDeviceOpts: [],
+      filteredLabels:  clone(this.value.filteredSystemLabels),
+      inventory:       {},
+      originValue:     clone(this.value),
+    };
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    removedDisks() {
+      const out = this.disks.filter((d) => {
+        return !findBy(this.newDisks, 'name', d.name);
+      }) || [];
+
+      return out;
+    },
+
+    longhornDisks() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `${ LONGHORN_SYSTEM }/${ this.value.id }`);
+      const diskStatus = longhornNode?.status?.diskStatus || {};
+      const diskSpec = longhornNode?.spec?.disks || {};
+
+      const formatOptions = {
+        increment:    1024,
+        minExponent:  3,
+        maxExponent:  3,
+        maxPrecision: 2,
+        suffix:       'iB',
+      };
+
+      const longhornDisks = Object.keys(diskStatus).map((key) => {
+        const blockDevice = this.$store.getters[`${ inStore }/byId`](HCI.BLOCK_DEVICE, `${ LONGHORN_SYSTEM }/${ key }`);
+
+        return {
+          ...diskStatus[key],
+          ...diskSpec?.[key],
+          name:             key,
+          isNew:            false,
+          storageReserved:  formatSi(diskSpec[key]?.storageReserved, formatOptions),
+          storageAvailable: formatSi(diskStatus[key]?.storageAvailable, formatOptions),
+          storageMaximum:   formatSi(diskStatus[key]?.storageMaximum, formatOptions),
+          storageScheduled: formatSi(diskStatus[key]?.storageScheduled, formatOptions),
+          blockDevice,
+          displayName:      blockDevice?.displayName || key,
+          forceFormatted:   blockDevice?.spec?.fileSystem?.forceFormatted || false,
+          tags:             diskSpec?.[key]?.tags || [],
+        };
+      });
+
+      return longhornDisks;
+    },
+
+    showFormattedWarning() {
+      const out = this.newDisks.filter(d => d.forceFormatted && d.isNew) || [];
+
+      return out.length > 0;
+    },
+
+    hasKsmtunedSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/schemaFor`](HCI.KSTUNED);
+    },
+
+    hasBlockDevicesSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/schemaFor`](HCI.BLOCK_DEVICE);
+    },
+
+    longhornNode() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const longhornNodes = this.$store.getters[`${ inStore }/all`](LONGHORN.NODES);
+
+      return longhornNodes.find(node => node.id === `${ LONGHORN_SYSTEM }/${ this.value.id }`);
+    },
+
+    seederEnabled() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
+      const seeder = addons.find(addon => addon.id === `harvester-system/${ ADD_ONS.HARVESTER_SEEDER }`);
+
+      return seeder ? seeder?.spec?.enabled : false;
+    },
+
+    toEnableSeederAddon() {
+      const { cluster } = this.$router?.currentRoute?.params || {};
+
+      return {
+        name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-namespace-id`,
+        params: {
+          resource:  `${ HCI.ADD_ONS }`,
+          namespace: 'harvester-system',
+          cluster,
+          id:        `${ ADD_ONS.HARVESTER_SEEDER }`
+        },
+        query: { mode: _EDIT }
+      };
+    },
+
+    hasAddonSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/schemaFor`](HCI.ADD_ONS);
+    },
+
+    hasSeederAddon() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
+
+      return addons.find(addon => addon.id === `harvester-system/${ ADD_ONS.HARVESTER_SEEDER }`);
+    },
+
+    hasInventorySchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/schemaFor`](HCI.INVENTORY);
+    },
+  },
+  watch: {
+    customName(neu) {
+      this.value.setAnnotation(HCI_LABELS_ANNOTATIONS.HOST_CUSTOM_NAME, neu);
+    },
+
+    consoleUrl(neu) {
+      this.value.setAnnotation(HCI_LABELS_ANNOTATIONS.HOST_CONSOLE_URL, neu);
+    },
+
+    newDisks() {
+      this.blockDeviceOpts = this.getBlockDeviceOpts();
+    },
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.willSave, 'willSave');
+    }
+
+    if (this.registerAfterHook) {
+      this.registerAfterHook(this.saveDisk);
+      this.registerAfterHook(this.saveLonghornNode);
+    }
+  },
+
+  methods: {
+    addDisk(id) {
+      const removedDisk = findBy(this.removedDisks, 'blockDevice.id', id);
+
+      if (removedDisk) {
+        return this.newDisks.push(removedDisk);
+      }
+
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const disk = this.$store.getters[`${ inStore }/byId`](HCI.BLOCK_DEVICE, id);
+      const mountPoint = disk?.spec?.fileSystem?.mountPoint;
+      const lastFormattedAt = disk?.status?.deviceStatus?.fileSystem?.LastFormattedAt;
+
+      let forceFormatted = true;
+      const systems = ['ext4', 'XFS'];
+
+      if (disk.childParts?.length > 0) {
+        forceFormatted = true;
+      } else if (lastFormattedAt) {
+        forceFormatted = false;
+      } else if (systems.includes(disk?.status?.deviceStatus?.fileSystem?.type)) {
+        forceFormatted = false;
+      }
+
+      const name = disk?.metadata?.name;
+
+      this.newDisks.push({
+        name,
+        path:              mountPoint,
+        allowScheduling:   false,
+        evictionRequested: false,
+        storageReserved:   0,
+        isNew:             true,
+        originPath:        disk?.spec?.fileSystem?.mountPoint,
+        blockDevice:       disk,
+        displayName:       disk?.displayName,
+        forceFormatted,
+      });
+    },
+
+    async saveDisk() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const addDisks = this.newDisks.filter(d => d.isNew);
+      const removeDisks = this.disks.filter(d => !findBy(this.newDisks, 'name', d.name) && d.blockDevice);
+
+      if (addDisks.length === 0 && removeDisks.length === 0) {
+        return Promise.resolve();
+      } else if (addDisks.length !== 0 && removeDisks.length === 0) {
+        const updatedDisks = addDisks.filter((d) => {
+          const blockDevice = this.$store.getters[`${ inStore }/byId`](HCI.BLOCK_DEVICE, `${ LONGHORN_SYSTEM }/${ d.name }`);
+          const { provisioned, forceFormatted } = blockDevice.spec.fileSystem;
+
+          if (provisioned && forceFormatted === d.forceFormatted) {
+            return false;
+          } else {
+            return true;
+          }
+        });
+
+        if (updatedDisks.length === 0) {
+          return Promise.resolve();
+        }
+      }
+
+      try {
+        await Promise.all(addDisks.map((d) => {
+          const blockDevice = this.$store.getters[`${ inStore }/byId`](HCI.BLOCK_DEVICE, `${ LONGHORN_SYSTEM }/${ d.name }`);
+
+          blockDevice.spec.fileSystem.provisioned = true;
+          blockDevice.spec.fileSystem.forceFormatted = d.forceFormatted;
+
+          return blockDevice.save();
+        }));
+
+        await Promise.all(removeDisks.map((d) => {
+          const blockDevice = this.$store.getters[`${ inStore }/byId`](HCI.BLOCK_DEVICE, `${ LONGHORN_SYSTEM }/${ d.name }`);
+
+          blockDevice.spec.fileSystem.provisioned = false;
+
+          return blockDevice.save();
+        }));
+
+        this.$store.dispatch('growl/success', {
+          title:   this.t('generic.notification.title.succeed'),
+          message: this.t('harvester.host.disk.notification.success', { name: this.value.metadata?.name || '' }),
+        }, { root: true });
+      } catch (err) {
+        return Promise.reject(exceptionToErrorsArray(err));
+      }
+    },
+
+    canRemove(row) {
+      return !!row?.value?.blockDevice;
+    },
+
+    onRemove(scope) {
+      scope.remove();
+    },
+
+    updateHostLabels(labels) {
+      this.filteredLabels = labels;
+    },
+
+    selectable(opt) {
+      if ( opt.disabled) {
+        return false;
+      }
+
+      return true;
+    },
+
+    getBlockDeviceOpts() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const blockDevices = this.$store.getters[`${ inStore }/all`](HCI.BLOCK_DEVICE);
+
+      const out = blockDevices
+        .filter((d) => {
+          const addedToNodeCondition = findBy(d?.status?.conditions || [], 'type', 'AddedToNode');
+          const isAdded = findBy(this.newDisks, 'name', d.metadata.name);
+          const isRemoved = findBy(this.removedDisks, 'name', d.metadata.name);
+
+          const deviceType = d.status?.deviceStatus?.details?.deviceType;
+
+          if (deviceType !== 'disk' || d?.status?.state !== 'Active') {
+            return false;
+          }
+
+          if ((!findBy(this.disks || [], 'name', d.metadata.name) &&
+                d?.spec?.nodeName === this.value.id &&
+                (!addedToNodeCondition || addedToNodeCondition?.status === 'False') &&
+                !d.spec?.fileSystem?.provisioned &&
+                !isAdded) ||
+                isRemoved
+          ) {
+            return true;
+          } else {
+            return false;
+          }
+        })
+        .map((d) => {
+          const devPath = d.spec?.devPath;
+          const deviceType = d.status?.deviceStatus?.details?.deviceType;
+          const sizeBytes = d.status?.deviceStatus?.capacity?.sizeBytes;
+          const size = formatSi(sizeBytes, { increment: 1024 });
+          const parentDevice = d.status?.deviceStatus?.parentDevice;
+          const isChildAdded = this.newDisks.find(newDisk => newDisk.blockDevice?.status?.deviceStatus?.parentDevice === devPath);
+          const name = d.displayName;
+
+          let label = `${ name } (Type: ${ deviceType }, Size: ${ size })`;
+
+          if (parentDevice) {
+            label = `- ${ label }`;
+          }
+
+          return {
+            label,
+            value:    d.id,
+            action:   this.addDisk,
+            kind:     !parentDevice ? 'group' : '',
+            disabled: !!isChildAdded,
+            group:    parentDevice || devPath,
+            isParent: !!parentDevice,
+          };
+        });
+
+      return sortBy(out, ['group', 'isParent', 'label']);
+    },
+
+    ddButtonAction() {
+      this.blockDeviceOpts = this.getBlockDeviceOpts();
+    },
+
+    willSave() {
+      const filteredLabels = this.filteredLabels || {};
+
+      this.value.metadata.labels = {
+        ...this.value.metadata.labels,
+        ...filteredLabels,
+      };
+
+      const originLabels = this.value.filteredSystemLabels;
+
+      Object.keys(originLabels).map((key) => {
+        if (!filteredLabels[key]) {
+          delete this.value.metadata.labels[key];
+        }
+      });
+    },
+
+    async saveLonghornNode() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      const disks = this.longhornNode?.spec?.disks || {};
+
+      this.newDisks.map((disk) => {
+        (disks[disk.name] || {}).tags = disk.tags;
+      });
+
+      let count = 0;
+
+      const retrySave = async() => {
+        try {
+          await this.longhornNode.save();
+        } catch (err) {
+          if ((err.status === 409 || err.status === 403) && count < 3) {
+            count++;
+
+            await this.$store.dispatch(`${ inStore }/find`, {
+              type: LONGHORN.NODES,
+              id:   this.longhornNode.id,
+              opt:  { force: true },
+            });
+
+            await new Promise(resolve => setTimeout(resolve, '5000'));
+            await retrySave();
+          } else {
+            return Promise.reject(exceptionToErrorsArray(err));
+          }
+        }
+      };
+
+      await retrySave();
+    },
+  },
+};
+</script>
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else id="node">
+    <div class="content">
+      <NameNsDescription
+        :value="value"
+        :namespaced="false"
+        :mode="mode"
+      />
+      <Tabbed ref="tabbed" class="mt-15" :side-tabs="true">
+        <Tab name="basics" :weight="100" :label="t('harvester.host.tabs.basics')">
+          <LabeledInput
+            v-model="customName"
+            :label="t('harvester.host.detail.customName')"
+            class="mb-20"
+            :mode="mode"
+          />
+
+          <LabeledInput
+            v-model="consoleUrl"
+            :label="t('harvester.host.detail.consoleUrl')"
+            class="mb-20"
+            :mode="mode"
+          />
+        </Tab>
+        <Tab
+          v-if="hasBlockDevicesSchema"
+          name="disk"
+          :weight="80"
+          :label="t('harvester.host.tabs.storage')"
+        >
+          <div
+            v-if="longhornNode"
+            class="row mb-20"
+          >
+            <div class="col span-12">
+              <Tags
+                v-model="longhornNode.spec.tags"
+                :label="t('harvester.host.tags.label')"
+                :add-label="t('harvester.host.tags.addLabel')"
+                :mode="mode"
+              />
+            </div>
+          </div>
+          <ArrayListGrouped
+            v-model="newDisks"
+            :mode="mode"
+            :initial-empty-row="false"
+          >
+            <template #default="props">
+              <HarvesterDisk
+                v-model="props.row.value"
+                class="mb-20"
+                :mode="mode"
+                :disks="disks"
+              />
+            </template>
+            <template #add>
+              <ButtonDropdown
+                v-if="!isView"
+                :button-label="t('harvester.host.disk.add')"
+                :dropdown-options="blockDeviceOpts"
+                size="sm"
+                :selectable="selectable"
+                @click-action="e=>addDisk(e.value)"
+                @dd-button-action="ddButtonAction"
+              >
+                <template #option="option">
+                  <template v-if="option.kind === 'group'">
+                    <b>
+                      {{ option.label }}
+                    </b>
+                  </template>
+                  <div v-else>
+                    {{ option.label }}
+                  </div>
+                </template>
+              </ButtonDropdown>
+            </template>
+            <template #remove-button="scope">
+              <button
+                v-if="canRemove(scope.row, scope.i) && !isView"
+                type="button"
+                class="btn role-link close btn-sm"
+                @click="() => onRemove(scope)"
+              >
+                <i class="icon icon-x" />
+              </button>
+              <span v-else />
+            </template>
+          </ArrayListGrouped>
+        </Tab>
+        <Tab v-if="hasKsmtunedSchema" name="Ksmtuned" :weight="70" :label="t('harvester.host.tabs.ksmtuned')">
+          <HarvesterKsmtuned :mode="mode" :node="value" :register-before-hook="registerBeforeHook" />
+        </Tab>
+        <Tab
+          v-if="hasAddonSchema"
+          name="seeder"
+          :weight="60"
+          :label="t('harvester.host.tabs.seeder')"
+        >
+          <HarvesterSeeder
+            v-if="seederEnabled && hasInventorySchema"
+            :mode="mode"
+            :node="value"
+            :register-after-hook="registerAfterHook"
+            :inventory="inventory"
+          />
+          <div v-else-if="seederEnabled && !hasInventorySchema">
+            <Banner
+              color="info"
+              :label="t('harvester.seeder.banner.noInventory')"
+            />
+          </div>
+          <div v-else>
+            <Banner
+              v-if="hasSeederAddon"
+              color="info"
+            >
+              <MessageLink
+                :to="toEnableSeederAddon"
+                prefix-label="harvester.seeder.banner.enable.prefix"
+                middle-label="harvester.seeder.banner.enable.middle"
+                suffix-label="harvester.seeder.banner.enable.suffix"
+              />
+            </Banner>
+            <Banner
+              v-else
+              color="warning"
+              :label="t('harvester.seeder.banner.noAddon')"
+            />
+          </div>
+        </Tab>
+        <Tab name="labels" label-key="harvester.host.tabs.labels">
+          <KeyValue
+            key="labels"
+            :value="filteredLabels"
+            :add-label="t('labels.addLabel')"
+            :mode="mode"
+            :title="t('labels.labels.title')"
+            :read-allowed="false"
+            :value-can-be-empty="true"
+            @input="updateHostLabels"
+          />
+        </Tab>
+      </Tabbed>
+      <Banner
+        v-if="showFormattedWarning"
+        color="warning"
+        :label="t('harvester.host.disk.forceFormatted.toolTip')"
+      />
+    </div>
+
+    <Footer class="footer" :mode="mode" :errors="errors" @save="save" @done="done" />
+  </div>
+</template>
+<style lang="scss" scoped>
+#node {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+
+  .content {
+    flex-grow: 1
+  }
+
+  .wrapper{
+    position: relative;
+  }
+  .nicOption {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.keypair.vue b/pkg/harvester/edit/harvesterhci.io.keypair.vue
new file mode 100644
index 00000000..4b76e3d1
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.keypair.vue
@@ -0,0 +1,112 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import CruResource from '@shell/components/CruResource';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
+
+import { randomStr } from '@shell/utils/string';
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+export default {
+  name: 'HarvesterEditKeypair',
+
+  components: {
+    Tab,
+    Tabbed,
+    CruResource,
+    LabeledInput,
+    FileSelector,
+    NameNsDescription
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  data() {
+    if ( !this.value.spec ) {
+      this.value.spec = {};
+      this.value.metadata = { name: '' };
+    }
+
+    return {
+      publicKey:    this.value.spec.publicKey || '',
+      randomString: '',
+    };
+  },
+
+  watch: {
+    publicKey(neu) {
+      const trimNeu = neu.trim();
+
+      this.value.spec.publicKey = trimNeu;
+
+      const splitSSH = trimNeu.split(/\s+/);
+
+      if (splitSSH.length === 3 && !this.value.metadata.name) {
+        const keyComment = splitSSH[2];
+
+        this.randomString = randomStr(10).toLowerCase();
+        this.value.metadata.name = keyComment.includes('@') ? keyComment.split('@')[0] : keyComment;
+      }
+    }
+  },
+
+  methods: { onKeySelected: createOnSelected('publicKey') },
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="save"
+  >
+    <div class="header mb-20">
+      <FileSelector
+        v-if="isCreate"
+        class="btn btn-sm bg-primary mt-10"
+        :label="t('generic.readFromFile')"
+        accept=".pub"
+        @selected="onKeySelected"
+      />
+    </div>
+
+    <NameNsDescription
+      ref="nd"
+      :key="randomString"
+      v-model="value"
+      :mode="mode"
+    />
+
+    <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+      <Tab name="basic" :label="t('harvester.sshKey.tabs.basics')" :weight="1" class="bordered-table">
+        <LabeledInput
+          v-model="publicKey"
+          type="multiline"
+          :mode="mode"
+          :min-height="160"
+          :label="t('harvester.sshKey.keypair')"
+          required
+        />
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.logging.clusterflow.vue b/pkg/harvester/edit/harvesterhci.io.logging.clusterflow.vue
new file mode 100644
index 00000000..c889d68f
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.logging.clusterflow.vue
@@ -0,0 +1,25 @@
+<script>
+import { LAST_NAMESPACE } from '@shell/store/prefs';
+import { LOGGING } from '@shell/config/types';
+import Flow from '@shell/edit/logging-flow';
+
+export default {
+  extends: Flow,
+  created() {
+    if (this.isCreate && this.value.type === LOGGING.CLUSTER_FLOW) {
+      this.value.metadata.namespace = 'cattle-logging-system';
+    }
+
+    this.registerBeforeHook(this.willSave, 'willSave');
+    this.registerAfterHook(() => {
+      const allNamespaces = this.$store.getters['allNamespaces'];
+      const defaultNamepsace = allNamespaces.find(N => N.id === 'default');
+      const ns = defaultNamepsace?.id || allNamespaces?.[0]?.id || '';
+
+      this.value.$dispatch('prefs/set', { key: LAST_NAMESPACE, value: ns }, { root: true });
+      this.willSave();
+    });
+  }
+};
+
+</script>
diff --git a/pkg/harvester/edit/harvesterhci.io.logging.clusteroutput.vue b/pkg/harvester/edit/harvesterhci.io.logging.clusteroutput.vue
new file mode 100644
index 00000000..85d6f434
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.logging.clusteroutput.vue
@@ -0,0 +1,21 @@
+<script>
+import { LAST_NAMESPACE } from '@shell/store/prefs';
+import CreateEditView from './harvesterhci.io.logging.output';
+
+export default {
+  extends: CreateEditView,
+  created() {
+    if (this.isCreate) {
+      this.value.metadata.namespace = 'cattle-logging-system';
+    }
+
+    this.registerAfterHook(() => {
+      const allNamespaces = this.$store.getters['allNamespaces'];
+      const defaultNamepsace = allNamespaces.find(N => N.id === 'default');
+      const ns = defaultNamepsace?.id || allNamespaces?.[0]?.id || '';
+
+      this.value.$dispatch('prefs/set', { key: LAST_NAMESPACE, value: ns }, { root: true });
+    });
+  }
+};
+</script>
diff --git a/pkg/harvester/edit/harvesterhci.io.logging.flow.vue b/pkg/harvester/edit/harvesterhci.io.logging.flow.vue
new file mode 100644
index 00000000..e4297a7e
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.logging.flow.vue
@@ -0,0 +1,7 @@
+<script>
+import Flow from '@shell/edit/logging-flow';
+export default { components: { Flow } };
+</script>
+<template>
+  <Flow v-bind="$attrs" />
+</template>
diff --git a/pkg/harvester/edit/harvesterhci.io.logging.output.vue b/pkg/harvester/edit/harvesterhci.io.logging.output.vue
new file mode 100644
index 00000000..495d5326
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.logging.output.vue
@@ -0,0 +1,345 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { SECRET, LOGGING, SCHEMA } from '@shell/config/types';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import Labels from '@shell/components/form/Labels';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { Banner } from '@components/Banner';
+import { PROVIDERS } from '@shell/models/logging.banzaicloud.io.output';
+import { _VIEW } from '@shell/config/query-params';
+import { clone, set } from '@shell/utils/object';
+import isEqual from 'lodash/isEqual';
+import isEmpty from 'lodash/isEmpty';
+import jsyaml from 'js-yaml';
+import { createYaml } from '@shell/utils/create-yaml';
+import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
+import { FLOW_TYPE } from '../config/harvester-map';
+
+const LOGGING_EVENT = 'Logging/Event';
+const AUDIT_ONLY = 'Audit Only';
+const OUTPUT_TYPE = [LOGGING_EVENT, AUDIT_ONLY];
+
+export default {
+  components: {
+    Banner, CruResource, Labels, LabeledSelect, NameNsDescription, Tab, Tabbed, YamlEditor
+  },
+
+  mixins: [CreateEditView],
+
+  async fetch() {
+    await this.$store.dispatch('harvester/findAll', { type: SECRET });
+  },
+
+  data() {
+    const schemas = this.$store.getters['harvester/all'](SCHEMA);
+
+    if (this.isCreate) {
+      this.value.metadata.namespace = 'default';
+    }
+
+    set(this.value, 'spec', this.value.spec || {});
+
+    const providers = PROVIDERS.map(provider => ({
+      ...provider,
+      value: provider.name,
+      label: this.t(provider.labelKey)
+    }));
+
+    if (this.mode !== _VIEW) {
+      this.$set(this.value, 'spec', this.value.spec || {});
+
+      providers.forEach((provider) => {
+        this.$set(this.value.spec, provider.name, this.value.spec[provider.name] || clone(provider.default));
+      });
+    }
+
+    const selectedProviders = providers.filter((provider) => {
+      const specProvider = this.value.spec[provider.name];
+      const correctedSpecProvider = provider.name === 'forward' ? specProvider?.servers?.[0] || {} : specProvider;
+
+      return !isEmpty(correctedSpecProvider) && !isEqual(correctedSpecProvider, provider.default);
+    });
+
+    const selectedProvider = selectedProviders?.[0]?.value || providers[0].value;
+
+    let bufferYaml;
+
+    if ( !isEmpty(this.value.spec[selectedProvider]?.buffer) ) {
+      bufferYaml = jsyaml.dump(this.value.spec[selectedProvider].buffer);
+    } else {
+      bufferYaml = createYaml(schemas, `logging.banzaicloud.io.v1beta1.output.spec.${ selectedProvider }.buffer`, []);
+      // createYaml doesn't support passing reference types (array, map) as the first type. As such
+      // I'm manipulating the output since I'm not sure it's something we want to actually support
+      // seeing as it's really createResourceYaml and this here is a gray area between spoofed types
+      // and just a field within a spec.
+      bufferYaml = bufferYaml.substring(bufferYaml.indexOf('\n') + 1).replaceAll('#  ', '#');
+    }
+
+    return {
+      bufferYaml,
+      initialBufferYaml:            bufferYaml,
+      providers,
+      selectedProvider,
+      hasMultipleProvidersSelected: selectedProviders.length > 1,
+      selectedProviders,
+      LOGGING,
+      loggingType:                  this.value.loggingType !== FLOW_TYPE.AUDIT ? LOGGING_EVENT : AUDIT_ONLY
+    };
+  },
+
+  computed: {
+    EDITOR_MODES() {
+      return EDITOR_MODES;
+    },
+    enabledProviders() {
+      return this.providers.filter(p => p.enabled);
+    },
+    cruMode() {
+      if (this.selectedProviders.length > 1 || !this.value.allProvidersSupported) {
+        return _VIEW;
+      }
+
+      return this.mode;
+    },
+    outputTypeOptions() {
+      return OUTPUT_TYPE;
+    },
+  },
+
+  created() {
+    this.registerBeforeHook(this.willSave, 'willSave');
+  },
+  methods: {
+    getComponent(name) {
+      return require(`@shell/edit/logging.banzaicloud.io.output/providers/${ name }`).default;
+    },
+    launch(provider) {
+      this.$refs.tabbed.select(provider.name);
+    },
+    willSave() {
+      this.value.spec = { [this.selectedProvider]: this.value.spec[this.selectedProvider] };
+
+      const bufferJson = jsyaml.load(this.bufferYaml);
+
+      if (!isEmpty(bufferJson)) {
+        this.value.spec[this.selectedProvider].buffer = bufferJson;
+      } else {
+        this.$delete(this.value.spec[this.selectedProvider], 'buffer');
+      }
+
+      if (this.loggingType === AUDIT_ONLY) {
+        this.$set(this.value.spec, 'loggingRef', 'harvester-kube-audit-log-ref');
+      }
+    },
+    tabChanged({ tab }) {
+      if ( tab.name === 'buffer' ) {
+        this.$nextTick(() => {
+          if ( this.$refs.yaml ) {
+            this.$refs.yaml.refresh();
+            this.$refs.yaml.focus();
+          }
+        });
+      }
+    },
+    onYamlEditorReady(cm) {
+      cm.getMode().fold = 'yamlcomments';
+      cm.execCommand('foldAll');
+      cm.execCommand('unfold');
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="output">
+    <CruResource
+      :done-route="doneRoute"
+      :mode="cruMode"
+      :resource="value"
+      :subtypes="[]"
+      :validation-passed="true"
+      :errors="errors"
+      :can-yaml="true"
+      @error="e=>errors = e"
+      @finish="save"
+      @cancel="done"
+    >
+      <NameNsDescription
+        v-if="!isView"
+        :value="value"
+        :mode="mode"
+        label="generic.name"
+        :register-before-hook="registerBeforeHook"
+        :namespaced="value.type !== LOGGING.CLUSTER_OUTPUT"
+      />
+      <Banner v-if="selectedProviders.length > 1" color="info">
+        {{ t('logging.output.tips.singleProvider') }}
+      </Banner>
+      <Banner v-else-if="!value.allProvidersSupported" color="info">
+        {{ t('logging.output.tips.multipleProviders') }}
+      </Banner>
+      <Tabbed v-else ref="tabbed" :side-tabs="true" @changed="tabChanged($event)">
+        <Tab name="Output" label="Output" :weight="2">
+          <div class="row">
+            <div class="col span-6">
+              <LabeledSelect
+                v-model="loggingType"
+                class="mb-20"
+                :options="outputTypeOptions"
+                :disabled="!isCreate"
+                :mode="mode"
+                :label="t('generic.type')"
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-6">
+              <LabeledSelect v-model="selectedProvider" label="Output" :options="providers" :mode="mode" />
+            </div>
+          </div>
+          <div class="spacer"></div>
+          <component :is="getComponent(selectedProvider)" :value="value.spec[selectedProvider]" :namespace="value.namespace" :mode="mode" />
+        </Tab>
+        <Tab name="buffer" :label="t('logging.output.buffer.label')" :weight="1">
+          <YamlEditor
+            ref="yaml"
+            v-model="bufferYaml"
+            :scrolling="false"
+            :initial-yaml-values="initialBufferYaml"
+            :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
+            @onReady="onYamlEditorReady"
+          />
+        </Tab>
+        <Tab
+          v-if="!isView"
+          name="labels-and-annotations"
+          label-key="generic.labelsAndAnnotations"
+          :weight="0"
+        >
+          <Labels
+            default-container-class="labels-and-annotations-container"
+            :value="value"
+            :mode="mode"
+            :display-side-by-side="false"
+          />
+        </Tab>
+      </Tabbed>
+    </CruResource>
+  </div>
+</template>
+
+<style lang="scss">
+  $chart: 110px;
+  $side: 15px;
+  $margin: 10px;
+  $logo: 60px;
+
+.output {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  .provider {
+    h1 {
+      display: inline-block;
+    }
+  }
+
+  .box-container {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin: 0 -1*$margin;
+
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-4')) {
+      .toggle-gradient-box {
+        width: 100%;
+      }
+    }
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-7')) {
+      .toggle-gradient-box {
+        width: calc(50% - 2 * #{$margin});
+      }
+    }
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-9')) {
+      .toggle-gradient-box {
+        width: calc(33.33333% - 2 * #{$margin});
+      }
+    }
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-12')) {
+      .toggle-gradient-box {
+        width: calc(25% - 2 * #{$margin});
+      }
+    }
+
+    .toggle-gradient-box {
+      margin: $margin;
+      padding: $margin;
+      position: relative;
+      border-radius: calc( 1.5 * var(--border-radius));
+
+      &:hover {
+        box-shadow: 0 0 30px var(--shadow);
+        transition: box-shadow 0.1s ease-in-out;
+        cursor: pointer;
+      }
+
+      .side-label {
+        transform: rotate(180deg);
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        min-width: calc(1.5 * var(--border-radius));
+        width: $side;
+        border-top-right-radius: calc( 1.5 * var(--border-radius));
+        border-bottom-right-radius: calc( 1.5 * var(--border-radius));
+
+        label {
+          text-align: center;
+          writing-mode: tb;
+          height: 100%;
+          padding: 0 2px;
+          display: block;
+          white-space: no-wrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .logo {
+        text-align: center;
+        width: $logo;
+        height: $logo;
+        border-radius: calc(2 * var(--border-radius));
+        overflow: hidden;
+        background-color: white;
+        display: inline-block;
+        vertical-align: middle;
+
+        img {
+          width: $logo - 4px;
+          height: $logo - 4px;
+          object-fit: contain;
+          position: relative;
+          top: 2px;
+        }
+      }
+
+      &:hover {
+        background-position: right center;
+      }
+
+      .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 0;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.monitoring.alertmanagerconfig/index.vue b/pkg/harvester/edit/harvesterhci.io.monitoring.alertmanagerconfig/index.vue
new file mode 100644
index 00000000..933c5bf9
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.monitoring.alertmanagerconfig/index.vue
@@ -0,0 +1,278 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { MONITORING } from '@shell/config/types';
+import Loading from '@shell/components/Loading';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { EDITOR_MODES } from '@shell/components/YamlEditor';
+import { RECEIVERS_TYPES } from '@shell/models/monitoring.coreos.com.receiver';
+import RouteConfig from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/routeConfig';
+import ResourceTable from '@shell/components/ResourceTable';
+import ActionMenu from '@shell/components/ActionMenu';
+import { _CREATE, _EDIT, _VIEW, _CONFIG } from '@shell/config/query-params';
+
+export default {
+  components: {
+    ActionMenu,
+    CruResource,
+    Loading,
+    NameNsDescription,
+    ResourceTable,
+    RouteConfig,
+    Tab,
+    Tabbed,
+  },
+
+  mixins: [CreateEditView],
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const alertmanagerConfigId = this.value.id;
+
+    const alertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/find`, { type: MONITORING.ALERTMANAGERCONFIG, id: alertmanagerConfigId });
+
+    this.alertmanagerConfigId = alertmanagerConfigId;
+    this.alertmanagerConfigResource = alertmanagerConfigResource;
+    this.alertmanagerConfigDetailRoute = alertmanagerConfigResource._detailLocation;
+
+    const alertmanagerConfigActions = alertmanagerConfigResource.availableActions;
+    const receiverActions = alertmanagerConfigResource.getReceiverActions(alertmanagerConfigActions);
+
+    this.receiverActions = receiverActions;
+  },
+
+  data() {
+    this.value.applyDefaults();
+
+    const defaultReceiverValues = {};
+    const receiverSchema = this.$store.getters['harvester/schemaFor'](MONITORING.SPOOFED.ALERTMANAGERCONFIG_RECEIVER_SPEC);
+    const routeSchema = this.$store.getters['harvester/schemaFor'](MONITORING.SPOOFED.ALERTMANAGERCONFIG_ROUTE_SPEC);
+    const receiverOptions = (this.value?.spec?.receivers || []).map((receiver) => receiver.name);
+
+    return {
+      actionMenuTargetElement:  null,
+      actionMenuTargetEvent:    null,
+      config:                   _CONFIG,
+      create:                   _CREATE,
+      createReceiverLink:       this.value.getCreateReceiverRoute(),
+      defaultReceiverValues,
+      receiverActionMenuIsOpen: false,
+      receiverTableHeaders:     [
+        {
+          name:          'name',
+          labelKey:      'tableHeaders.name',
+          value:         'name',
+          sort:          ['nameSort'],
+          formatter:     'LinkDetail',
+          canBeVariable: true,
+        },
+        {
+          name:          'type',
+          labelKey:      'tableHeaders.type',
+          value:         'name',
+          formatter:     'ReceiverIcons',
+          canBeVariable: true,
+        }
+        // Add more columns
+      ],
+      newReceiverType:      null,
+      receiverActions:      [],
+      receiverOptions,
+      receiverTypes:        RECEIVERS_TYPES,
+      routeSchema,
+      receiverSchema,
+      selectedReceiverName: '',
+      selectedRowValue:     null,
+      view:                 _VIEW,
+    };
+  },
+
+  computed: {
+    editorMode() {
+      if ( this.mode === _VIEW ) {
+        return EDITOR_MODES.VIEW_CODE;
+      }
+
+      return EDITOR_MODES.EDIT_CODE;
+    },
+  },
+  methods: {
+    translateReceiverTypes() {
+      return this.receiverTypes.map((receiverType) => {
+        return {
+          ...receiverType,
+          label: this.t(receiverType.label)
+        };
+      });
+    },
+    getReceiverDetailLink(receiverData) {
+      if (receiverData && receiverData.name) {
+        return this.value.getReceiverDetailLink(receiverData.name);
+      }
+    },
+
+    toggleReceiverActionMenu() {
+      this.receiverActionMenuIsOpen = true;
+    },
+    setActionMenuState(eventData) {
+      // This method is called when the user clicks a context menu
+      // for a receiver in the receiver in the receiver list view.
+      // It sets the target element so the menu can open where the
+      // user clicked.
+      const { event, targetElement } = eventData;
+
+      // TargetElement could be an array of more than
+      // one if there is more than one ref of the same name.
+      if (event && targetElement) {
+        this.actionMenuTargetElement = targetElement;
+        this.actionMenuTargetEvent = event;
+
+        // We take the selected receiver name out of the target
+        // element's ID to help us build the URL to link to
+        // the detail page of that receiver.
+        // We use a plus sign as the delimiter to separate the
+        // name because the plus is not an allowed character in
+        // Kubernetes names.
+        this.selectedReceiverName = targetElement.id.split('+').slice(2).join('');
+
+        this.toggleReceiverActionMenu();
+      } else {
+        throw new Error('Could not find action menu target element.');
+      }
+    },
+    goToEdit() {
+      // 'goToEdit' is the exact name of an action for AlertmanagerConfig
+      // and this method executes the action.
+      this.$router.push(this.alertmanagerConfigResource.getEditReceiverConfigRoute(this.selectedReceiverName, _EDIT));
+    },
+
+    goToEditYaml() {
+      // 'goToEditYaml' is the exact name of an action for AlertmanagerConfig
+      // and this method executes the action.
+      this.$router.push(this.alertmanagerConfigResource.getEditReceiverYamlRoute(this.selectedReceiverName, _EDIT));
+    },
+    promptRemove() {
+      // 'promptRemove' is the exact name of an action for AlertmanagerConfig
+      // and this method executes the action.
+      // Get the name of the receiver to delete from the action info.
+      const nameOfReceiverToDelete = this.selectedReceiverName;
+      // Remove it from the configuration of the parent AlertmanagerConfig
+      // resource.
+      const existingReceivers = this.alertmanagerConfigResource.spec.receivers || [];
+      const receiversMinusDeletedItem = existingReceivers.filter((receiver) => {
+        return receiver.name !== nameOfReceiverToDelete;
+      });
+
+      this.alertmanagerConfigResource.spec.receivers = receiversMinusDeletedItem;
+      // After saving the AlertmanagerConfig, the resource has been deleted.
+      this.alertmanagerConfigResource.save(...arguments);
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <CruResource
+    v-else
+    class="route"
+    :done-route="doneRoute"
+    :errors="errors"
+    :mode="mode"
+    :resource="value"
+    :subtypes="[]"
+    :cancel-event="true"
+    @error="e=>errors = e"
+    @finish="save"
+    @cancel="done"
+  >
+    <NameNsDescription
+      v-model="value"
+      :mode="mode"
+      :namespaced="isNamespaced"
+    />
+
+    <Tabbed>
+      <Tab
+        :label="t('monitoring.route.label')"
+        :weight="1"
+        name="route"
+      >
+        <RouteConfig
+          :value="value.spec.route"
+          :mode="mode"
+          :receiver-options="receiverOptions"
+        />
+      </Tab>
+      <Tab
+        :label="t('alertmanagerConfigReceiver.receivers')"
+        :weight="2"
+        name="receivers"
+      >
+        <ResourceTable
+          :headers="receiverTableHeaders"
+          :schema="receiverSchema"
+          :rows="value.spec.receivers || []"
+          :get-custom-detail-link="getReceiverDetailLink"
+          :table-actions="false"
+          :custom-actions="value.receiverActions"
+          @clickedActionButton="setActionMenuState"
+        >
+          <template #header-button>
+            <router-link
+              v-if="createReceiverLink && createReceiverLink.name"
+              :to="mode !== create ? createReceiverLink : {}"
+            >
+              <button
+                class="btn role-primary"
+                :disabled="mode === create"
+                :tooltip="t('monitoring.alertmanagerConfig.disabledReceiverButton')"
+              >
+                {{ t('monitoring.receiver.addReceiver') }}
+                <i
+                  v-if="mode === create"
+                  v-clean-tooltip="t('monitoring.alertmanagerConfig.disabledReceiverButton')"
+                  class="icon icon-info"
+                />
+              </button>
+            </router-link>
+          </template>
+        </ResourceTable>
+      </Tab>
+    </Tabbed>
+    <ActionMenu
+      :custom-actions="receiverActions"
+      :open="receiverActionMenuIsOpen"
+      :use-custom-target-element="true"
+      :custom-target-element="actionMenuTargetElement"
+      :custom-target-event="actionMenuTargetEvent"
+      @close="receiverActionMenuIsOpen = false"
+      @goToEdit="goToEdit"
+      @goToEditYaml="goToEditYaml"
+      @promptRemove="promptRemove"
+    />
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+  h3 {
+    margin-top: 2em;
+  }
+  input {
+    margin-top: 1em;
+  }
+  .route {
+    &[real-mode=view] .label {
+      color: var(--input-label);
+    }
+  }
+  button {
+    margin-left: 0.5em;
+  }
+  a:hover {
+      text-decoration: none;
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.networkattachmentdefinition.vue b/pkg/harvester/edit/harvesterhci.io.networkattachmentdefinition.vue
new file mode 100644
index 00000000..42cdd31f
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.networkattachmentdefinition.vue
@@ -0,0 +1,282 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import CruResource from '@shell/components/CruResource';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+import { HCI as HCI_LABELS_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../types';
+
+const AUTO = 'auto';
+const MANUAL = 'manual';
+
+export default {
+  components: {
+    Tab,
+    Tabbed,
+    CruResource,
+    LabeledInput,
+    NameNsDescription,
+    RadioGroup,
+    LabeledSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  data() {
+    const config = JSON.parse(this.value.spec.config);
+    const annotations = this.value?.metadata?.annotations || {};
+    const layer3Network = JSON.parse(annotations[HCI_LABELS_ANNOTATIONS.NETWORK_ROUTE] || '{}');
+
+    if ((config.bridge || '').endsWith('-br')) {
+      config.bridge = config.bridge.slice(0, -3);
+    }
+
+    const type = this.value.vlanType || 'L2VlanNetwork' ;
+
+    return {
+      config,
+      type,
+      layer3Network: {
+        mode:         layer3Network.mode || AUTO,
+        serverIPAddr: layer3Network.serverIPAddr || '',
+        cidr:         layer3Network.cidr || '',
+        gateway:      layer3Network.gateway || '',
+      },
+    };
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({ clusterNetworks: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK }) });
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  computed: {
+    modeOptions() {
+      return [{
+        label: this.t('harvester.network.layer3Network.mode.auto'),
+        value: AUTO,
+      }, {
+        label: this.t('harvester.network.layer3Network.mode.manual'),
+        value: MANUAL,
+      }];
+    },
+
+    clusterNetworkOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const clusterNetworks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK) || [];
+
+      return clusterNetworks.map((n) => {
+        const disabled = !n.isReady;
+
+        return {
+          label: disabled ? `${ n.id } (${ this.t('generic.notReady') })` : n.id,
+          value: n.id,
+          disabled,
+        };
+      });
+    },
+
+    networkType() {
+      return ['L2VlanNetwork', 'UntaggedNetwork'];
+    },
+
+    isUntaggedNetwork() {
+      if (this.isView) {
+        return this.value.vlanType === 'UntaggedNetwork';
+      }
+
+      return this.type === 'UntaggedNetwork';
+    }
+  },
+
+  methods: {
+    async saveNetwork(buttonCb) {
+      const errors = [];
+
+      if (!this.config.vlan && !this.isUntaggedNetwork) {
+        errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('tableHeaders.networkVlan') }));
+      }
+
+      if (!this.config.bridge) {
+        errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.clusterNetwork.label') }));
+      }
+
+      if (this.layer3Network.mode === MANUAL) {
+        if (!this.layer3Network.gateway) {
+          errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.layer3Network.gateway.label') }));
+        }
+        if (!this.layer3Network.cidr) {
+          errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.layer3Network.cidr.label') }));
+        }
+      }
+
+      if (errors.length > 0) {
+        buttonCb(false);
+        this.errors = errors;
+
+        return false;
+      }
+
+      this.value.setAnnotation(HCI_LABELS_ANNOTATIONS.NETWORK_ROUTE, JSON.stringify(this.layer3Network));
+
+      await this.save(buttonCb);
+    },
+
+    input(neu) {
+      const pattern = /^([1-9]|[1-9][0-9]{1,2}|[1-3][0-9]{3}|40[0-9][0-4])$/;
+
+      if (!pattern.test(neu) && neu !== '') {
+        this.config.vlan = neu > 4094 ? 4094 : 1;
+      }
+    },
+
+    updateBeforeSave() {
+      this.config.name = this.value.metadata.name;
+
+      if (this.isUntaggedNetwork) {
+        delete this.config.vlan;
+      }
+
+      this.value.spec.config = JSON.stringify({
+        ...this.config,
+        bridge: `${ this.config.bridge }-br`,
+      });
+    },
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="saveNetwork"
+  >
+    <NameNsDescription
+      ref="nd"
+      v-model="value"
+      :mode="mode"
+    />
+    <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+      <Tab name="basics" :label="t('harvester.network.tabs.basics')" :weight="99" class="bordered-table">
+        <LabeledSelect
+          v-model="type"
+          class="mb-20"
+          :options="networkType"
+          :mode="mode"
+          :label="t('harvester.fields.type')"
+          required
+        />
+
+        <LabeledInput
+          v-if="!isUntaggedNetwork"
+          v-model.number="config.vlan"
+          v-int-number
+          class="mb-20"
+          required
+          type="number"
+          placeholder="e.g. 1-4094"
+          :label="t('tableHeaders.networkVlan')"
+          :mode="mode"
+          @input="input"
+        />
+
+        <div class="row">
+          <div
+            class="col span-12"
+          >
+            <LabeledSelect
+              v-model="config.bridge"
+              class="mb-20"
+              :label="t('harvester.network.clusterNetwork.label')"
+              required
+              :options="clusterNetworkOptions"
+              :mode="mode"
+              :placeholder="t('harvester.network.clusterNetwork.selectPlaceholder')"
+            />
+          </div>
+        </div>
+      </Tab>
+      <Tab
+        v-if="!isUntaggedNetwork"
+        name="layer3Network"
+        :label="t('harvester.network.tabs.layer3Network')"
+        :weight="98"
+        class="bordered-table"
+      >
+        <div class="row mt-10">
+          <div class="col span-6">
+            <RadioGroup
+              v-model="layer3Network.mode"
+              name="layer3NetworkMode"
+              :label="t('harvester.network.layer3Network.mode.label')"
+              :mode="mode"
+              :options="modeOptions"
+            />
+          </div>
+        </div>
+        <div
+          v-if="layer3Network.mode === 'auto'"
+          class="row mt-10"
+        >
+          <div class="col span-6">
+            <LabeledInput
+              v-model="layer3Network.serverIPAddr"
+              class="mb-20"
+              :label="t('harvester.network.layer3Network.serverIPAddr.label')"
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div
+          v-else
+          class="row mt-10"
+        >
+          <div class="col span-6">
+            <LabeledInput
+              v-model="layer3Network.cidr"
+              class="mb-20"
+              :label="t('harvester.network.layer3Network.cidr.label')"
+              :placeholder="t('harvester.network.layer3Network.cidr.placeholder')"
+              :mode="mode"
+              required
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="layer3Network.gateway"
+              class="mb-20"
+              :label="t('harvester.network.layer3Network.gateway.label')"
+              :placeholder="t('harvester.network.layer3Network.gateway.placeholder')"
+              :mode="mode"
+              required
+            />
+          </div>
+        </div>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
diff --git a/pkg/harvester/edit/harvesterhci.io.secret.vue b/pkg/harvester/edit/harvesterhci.io.secret.vue
new file mode 100644
index 00000000..1568f014
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.secret.vue
@@ -0,0 +1,281 @@
+<script>
+import { SECRET_TYPES as TYPES } from '@shell/config/secret';
+import { MANAGEMENT, NAMESPACE, DEFAULT_WORKSPACE } from '@shell/config/types';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import CruResource from '@shell/components/CruResource';
+import {
+  CLOUD_CREDENTIAL, _CLONE, _CREATE, _EDIT, _FLAGGED
+} from '@shell/config/query-params';
+import Loading from '@shell/components/Loading';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import Labels from '@shell/components/form/Labels';
+import { HIDE_SENSITIVE, LAST_NAMESPACE } from '@shell/store/prefs';
+import { CAPI } from '@shell/config/labels-annotations';
+import { clear } from '@shell/utils/array';
+import { importCloudCredential } from '@shell/utils/dynamic-importer';
+import SelectIconGrid from '@shell/components/SelectIconGrid';
+import { ucFirst } from '@shell/utils/string';
+
+export default {
+  name: 'CruSecret',
+
+  components: {
+    LabeledInput,
+    LabeledSelect,
+    Loading,
+    NameNsDescription,
+    CruResource,
+    Tabbed,
+    Tab,
+    Labels,
+    SelectIconGrid
+  },
+
+  mixins: [CreateEditView],
+
+  async fetch() {
+    if ( this.isCloud ) {
+      this.nodeDrivers = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_DRIVER });
+    }
+  },
+
+  data() {
+    const newCloudCred = this.$route.query[CLOUD_CREDENTIAL] === _FLAGGED;
+    const editCloudCred = this.mode === _EDIT && this.value._type === TYPES.CLOUD_CREDENTIAL;
+    const cloneCloudCred = this.realMode === _CLONE && this.liveValue._type === TYPES.CLOUD_CREDENTIAL;
+    const isCloud = newCloudCred || editCloudCred || cloneCloudCred;
+
+    if ( newCloudCred ) {
+      this.value.metadata.namespace = DEFAULT_WORKSPACE;
+
+      this.$set(this.value.metadata, 'name', '');
+
+      this.$set(this.value, 'data', {});
+    }
+
+    const secretTypes = [
+      {
+        label: 'Custom',
+        value: 'custom'
+      },
+      {
+        label:    'divider',
+        disabled: true,
+        kind:     'divider'
+      }
+    ];
+
+    Object.values(TYPES).forEach((t) => {
+      secretTypes.push({
+        label: t,
+        value: t
+      });
+    });
+
+    if ( this.mode === _CREATE ) {
+      this.$set(this.value, '_type', TYPES.OPAQUE);
+    }
+
+    return {
+      isCloud,
+      nodeDrivers:       null,
+      secretTypes,
+      secretType:        this.value._type,
+      initialSecretType: this.value._type
+    };
+  },
+
+  computed: {
+    typeKey() {
+      if ( this.isCloud ) {
+        return 'cloud';
+      }
+
+      switch ( this.value._type ) {
+      case TYPES.TLS: return 'tls';
+      case TYPES.BASIC: return 'basic';
+      case TYPES.DOCKER_JSON: return 'registry';
+      case TYPES.SSH: return 'ssh';
+      }
+
+      return 'generic';
+    },
+
+    dataComponent() {
+      return require(`@shell/edit/secret/${ this.typeKey }`).default;
+    },
+
+    driverName() {
+      const driver = this.value.metadata?.annotations?.[CAPI.CREDENTIAL_DRIVER];
+
+      return driver;
+    },
+
+    cloudComponent() {
+      const driver = this.driverName;
+      const haveProviders = this.$store.getters['plugins/credentialDrivers'];
+
+      if ( haveProviders.includes(driver) ) {
+        return importCloudCredential(driver);
+      }
+
+      return importCloudCredential('generic');
+    },
+
+    namespaces() {
+      return this.$store.getters['cluster/all'](NAMESPACE).map((obj) => {
+        return {
+          label: obj.nameDisplay,
+          value: obj.id,
+        };
+      });
+    },
+
+    hideSensitiveData() {
+      return this.$store.getters['prefs/get'](HIDE_SENSITIVE);
+    },
+
+    dataLabel() {
+      switch (this.value._type) {
+      case TYPES.TLS:
+        return this.t('secret.certificate.certificate');
+      case TYPES.SSH:
+        return this.t('secret.ssh.keys');
+      case TYPES.BASIC:
+        return this.t('secret.authentication');
+      default:
+        return this.t('secret.data');
+      }
+    },
+  },
+
+  created() {
+    this.registerAfterHook(() => {
+      const allNamespaces = this.$store.getters['allNamespaces'];
+      const defaultNamepsace = allNamespaces.find(N => N.id === 'default');
+      const ns = defaultNamepsace?.id || allNamespaces?.[0]?.id || '';
+
+      this.value.$dispatch('prefs/set', { key: LAST_NAMESPACE, value: ns }, { root: true });
+    });
+  },
+
+  methods: {
+    async saveSecret(btnCb) {
+      if ( this.errors ) {
+        clear(this.errors);
+      }
+
+      if ( typeof this.$refs.cloudComponent?.test === 'function' ) {
+        try {
+          const res = await this.$refs.cloudComponent.test();
+
+          if ( !res || res?.errors) {
+            if (res?.errors) {
+              this.errors = res.errors;
+            } else {
+              this.errors = ['Authentication test failed, please check your credentials'];
+            }
+            btnCb(false);
+
+            return;
+          }
+        } catch (e) {
+          this.errors = [e];
+          btnCb(false);
+
+          return;
+        }
+      }
+
+      return this.save(btnCb);
+    },
+
+    typeDisplay(type, driver) {
+      if ( type === CAPI.CREDENTIAL_DRIVER ) {
+        return this.$store.getters['i18n/withFallback'](`cluster.provider."${ driver }"`, null, driver);
+      } else {
+        const fallback = type.replace(/^kubernetes.io\//, '');
+
+        return this.$store.getters['i18n/withFallback'](`secret.types."${ type }"`, null, fallback);
+      }
+    },
+
+    initialDisplayFor(type) {
+      const fallback = (ucFirst(this.typeDisplay(type) || '').replace(/[^A-Z]/g, '') || type).substr(0, 3);
+
+      return this.$store.getters['i18n/withFallback'](`secret.initials."${ type }"`, null, fallback);
+    },
+
+    selectCustomType(type) {
+      if (type !== 'custom') {
+        this.$set(this.value, '_type', type);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <form class="filled-height">
+    <Loading v-if="$fetchState.pending" />
+    <CruResource
+      v-else
+      :mode="mode"
+      :validation-passed="true"
+      :selected-subtype="value._type"
+      :resource="value"
+      :errors="errors"
+      @finish="saveSecret"
+      @error="e=>errors = e"
+    >
+      <NameNsDescription
+        v-model="value"
+        :mode="mode"
+        :namespaced="!isCloud"
+      />
+
+      <div class="spacer" />
+      <component
+        :is="cloudComponent"
+        v-if="isCloud"
+        ref="cloudComponent"
+        :driver-name="driverName"
+        :value="value"
+        :mode="mode"
+        :hide-sensitive-data="hideSensitiveData"
+      />
+      <Tabbed
+        v-else
+        :side-tabs="true"
+        default-tab="data"
+      >
+        <Tab
+          name="data"
+          :label="dataLabel"
+          :weight="99"
+        >
+          <component
+            :is="dataComponent"
+            :value="value"
+            :mode="mode"
+            :hide-sensitive-data="hideSensitiveData"
+          />
+        </Tab>
+        <Tab
+          name="labels"
+          label-key="generic.labelsAndAnnotations"
+          :weight="-1"
+        >
+          <Labels
+            v-model="value"
+            :mode="mode"
+          />
+        </Tab>
+      </Tabbed>
+    </CruResource>
+  </form>
+</template>
diff --git a/pkg/harvester/edit/harvesterhci.io.setting.vue b/pkg/harvester/edit/harvesterhci.io.setting.vue
new file mode 100644
index 00000000..bad638d4
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.setting.vue
@@ -0,0 +1,255 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { TextAreaAutoGrow } from '@components/Form/TextArea';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+import { HCI_ALLOWED_SETTINGS, HCI_SINGLE_CLUSTER_ALLOWED_SETTING, HCI_SETTING } from '../config/settings';
+
+export default {
+  components: {
+    CruResource,
+    LabeledInput,
+    LabeledSelect,
+    RadioGroup,
+    TextAreaAutoGrow
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+    const t = this.$store.getters['i18n/t'];
+    const setting =
+      HCI_ALLOWED_SETTINGS[this.value.id] ||
+      HCI_SINGLE_CLUSTER_ALLOWED_SETTING[this.value.id];
+
+    let enumOptions = [];
+
+    if (setting.kind === 'enum') {
+      enumOptions = setting.options.map(id => ({
+        label: `advancedSettings.enum.harv-${ this.value.id }.${ id }`,
+        value: id
+      }));
+    }
+
+    const canReset =
+      setting.canReset || !!this.value.default || this.value.canReset;
+
+    if (this.value.value === undefined) {
+      this.$set(this.value, 'value', null);
+    }
+
+    this.value.value = this.value.value || this.value.default || '';
+    const oldValue = this.value.value;
+
+    const isHarvester = this.value?.type?.includes('harvesterhci');
+
+    // Get all the custom volume types from the file names of this folder
+    const customSettingComponents = require
+      .context('../components/settings', false, /^.*\.vue$/)
+      .keys()
+      .map(path => path.replace(/(\.\/)|(.vue)/g, ''));
+
+    return {
+      setting,
+      description:        isHarvester ? t(`advancedSettings.descriptions.harv-${ this.value.id }`) : t(`advancedSettings.descriptions.${ this.value.id }`),
+      editHelp:           t(`advancedSettings.editHelp.${ this.value.id }`),
+      enumOptions,
+      canReset,
+      errors:             [],
+      hasCustomComponent: false,
+      customComponent:    null,
+      customSettingComponents,
+      oldValue
+    };
+  },
+
+  computed: {
+    doneLocationOverride() {
+      return this.value.doneOverride;
+    }
+  },
+
+  created() {
+    let customComponent = false;
+    const hasCustomComponent = this.customSettingComponents.includes(this.value.id);
+
+    if ( hasCustomComponent ) {
+      try {
+        customComponent = require(`../components/settings/${ this.value.id }.vue`).default;
+      } catch {}
+    } else {
+      // Some resources like vlan and network go out to a non-standard location (edit/<resource>/<id>.vue). For example
+      // 'edit/harvesterhci.io.managedchart/rancher-monitoring.vue'
+      const resource = this.$route.params.resource;
+      const name = this.value.metadata.name;
+
+      try {
+        customComponent = require(`./${ resource }/${ name }.vue`).default;
+      } catch {}
+    }
+
+    this.hasCustomComponent = !!customComponent;
+    this.customComponent = customComponent;
+
+    this.registerAfterHook(() => {
+      if (this.value.id === HCI_SETTING.RANCHER_MANAGER_SUPPORT) {
+        this.$store.commit('isRancherInHarvester', this.value.value === 'true');
+      }
+    });
+  },
+
+  methods: {
+    done() {
+      this.$router.go(-1);
+    },
+
+    async saveSettings(done) {
+      const t = this.$store.getters['i18n/t'];
+
+      // Validate the JSON if the setting is a json value
+      if (this.setting.kind === 'json' && this.value.default) {
+        try {
+          JSON.parse(this.value.value);
+          this.errors = [];
+        } catch (e) {
+          this.errors = [t('advancedSettings.edit.invalidJSON')];
+
+          return done(false);
+        }
+      }
+
+      if (this.value.metadata.name === HCI_SETTING.CLUSTER_REGISTRATION_URL && this.oldValue && this.value.value !== this.oldValue) {
+        await this.clusterRegistrationUrlTip();
+      }
+
+      this.save(done);
+    },
+
+    clusterRegistrationUrlTip() {
+      return new Promise((resolve) => {
+        this.$store.dispatch('harvester/promptModal', {
+          component: 'MessageBox',
+          callback:  (action) => {
+            if (action === 'ok') {
+              resolve();
+            }
+          },
+          contentKey: 'harvester.setting.clusterRegistrationUrl.message'
+        }, { root: true });
+      });
+    },
+
+    useDefault(ev) {
+      // Lose the focus on the button after click
+      if (ev && ev.srcElement) {
+        ev.srcElement.blur();
+      }
+
+      if (this.value.id === HCI_SETTING.VLAN) {
+        this.value.enable = false;
+        if (this.value.config) {
+          this.value.config.defaultPhysicalNIC = '';
+        }
+      } else {
+        this.value.value = this.value.default || '';
+      }
+
+      if (typeof this.$refs.settingComp?.useDefault === 'function') {
+        this.$refs.settingComp.useDefault();
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    class="route"
+    :errors="errors"
+    :mode="mode"
+    :resource="value"
+    :subtypes="[]"
+    :can-yaml="false"
+    :cancel-event="true"
+    @error="e => (errors = e)"
+    @finish="saveSettings"
+    @cancel="done"
+  >
+    <h4 v-clean-html="description"></h4>
+
+    <h5 v-if="editHelp" v-clean-html="editHelp" class="edit-help" />
+
+    <div class="edit-change mt-20">
+      <h5 v-t="'advancedSettings.edit.changeSetting'" />
+      <button
+        :disabled="!canReset"
+        type="button"
+        class="btn role-primary"
+        @click="useDefault"
+      >
+        {{ t('advancedSettings.edit.useDefault') }}
+      </button>
+    </div>
+
+    <div class="mt-20">
+      <div v-if="setting.from === 'import'">
+        <component
+          :is="customComponent"
+          v-if="hasCustomComponent"
+          ref="settingComp"
+          v-model="value"
+          :register-before-hook="registerBeforeHook"
+          :mode="mode"
+        />
+      </div>
+      <div v-else-if="setting.kind === 'enum'">
+        <LabeledSelect
+          v-model="value.value"
+          :label="t('advancedSettings.edit.value')"
+          :localized-label="true"
+          :mode="mode"
+          :options="enumOptions"
+        />
+      </div>
+      <div v-else-if="setting.kind === 'boolean'">
+        <RadioGroup
+          v-model="value.value"
+          name="settings_value"
+          :labels="[
+            t('advancedSettings.edit.trueOption'),
+            t('advancedSettings.edit.falseOption')
+          ]"
+          :options="['true', 'false']"
+        />
+      </div>
+      <div v-else-if="setting.kind === 'multiline' || setting.kind === 'json'">
+        <TextAreaAutoGrow v-model="value.value" :min-height="254" />
+      </div>
+      <div v-else>
+        <LabeledInput
+          v-model="value.value"
+          :label="t('advancedSettings.edit.value')"
+        />
+      </div>
+    </div>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+.edit-change {
+  align-items: center;
+  display: flex;
+
+  > h5 {
+    flex: 1;
+  }
+}
+
+::v-deep .edit-help code {
+  padding: 1px 5px;
+}
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.storage/index.vue b/pkg/harvester/edit/harvesterhci.io.storage/index.vue
new file mode 100644
index 00000000..34dbc90b
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.storage/index.vue
@@ -0,0 +1,324 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import Tags from '../../components/DiskTags';
+import ArrayList from '@shell/components/form/ArrayList';
+import Tab from '@shell/components/Tabbed/Tab';
+import Tabbed from '@shell/components/Tabbed';
+import { RadioGroup } from '@components/Form/Radio';
+
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import Loading from '@shell/components/Loading';
+
+import { _CREATE, _VIEW } from '@shell/config/query-params';
+import { mapFeature, UNSUPPORTED_STORAGE_DRIVERS } from '@shell/store/features';
+import { STORAGE_CLASS, LONGHORN } from '@shell/config/types';
+import { CSI_DRIVER } from '../../types';
+import { allHash } from '@shell/utils/promise';
+import { clone } from '@shell/utils/object';
+
+const LONGHORN_DRIVER = 'driver.longhorn.io';
+
+export default {
+  name: 'HarvesterStorage',
+
+  components: {
+    ArrayList,
+    CruResource,
+    LabeledSelect,
+    LabeledInput,
+    NameNsDescription,
+    RadioGroup,
+    Tab,
+    Tabbed,
+    Loading,
+    Tags,
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+    const reclaimPolicyOptions = [{
+      label: this.t('storageClass.customize.reclaimPolicy.delete'),
+      value: 'Delete'
+    }, {
+      label: this.t('storageClass.customize.reclaimPolicy.retain'),
+      value: 'Retain'
+    }];
+
+    const allowVolumeExpansionOptions = [
+      {
+        label: this.t('generic.enabled'),
+        value: true
+      },
+      {
+        label: this.t('generic.disabled'),
+        value: false
+      }
+    ];
+
+    const volumeBindingModeOptions = [
+      {
+        label: this.t('storageClass.customize.volumeBindingMode.now'),
+        value: 'Immediate'
+      },
+      {
+        label: this.t('harvester.storage.customize.volumeBindingMode.later'),
+        value: 'WaitForFirstConsumer'
+      }
+    ];
+
+    const allowedTopologies = clone(this.value.allowedTopologies?.[0]?.matchLabelExpressions || []);
+
+    this.$set(this.value, 'parameters', this.value.parameters || {});
+    this.$set(this.value, 'provisioner', this.value.provisioner || LONGHORN_DRIVER);
+    this.$set(this.value, 'allowVolumeExpansion', this.value.allowVolumeExpansion || allowVolumeExpansionOptions[0].value);
+    this.$set(this.value, 'reclaimPolicy', this.value.reclaimPolicy || reclaimPolicyOptions[0].value);
+    this.$set(this.value, 'volumeBindingMode', this.value.volumeBindingMode || volumeBindingModeOptions[0].value);
+
+    return {
+      reclaimPolicyOptions,
+      allowVolumeExpansionOptions,
+      volumeBindingModeOptions,
+      mountOptions:    [],
+      provisioner:     LONGHORN_DRIVER,
+      STORAGE_CLASS,
+      allowedTopologies,
+      defaultAddValue: {
+        key:    '',
+        values: [],
+      }
+    };
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      storages:      this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }),
+      longhornNodes: this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.NODES }),
+      csiDrivers:    this.$store.dispatch(`${ inStore }/findAll`, { type: CSI_DRIVER }),
+    };
+
+    await allHash(hash);
+  },
+
+  computed: {
+    showUnsupportedStorage: mapFeature(UNSUPPORTED_STORAGE_DRIVERS),
+
+    inStore() {
+      return this.$store.getters['currentProduct'].inStore;
+    },
+
+    modeOverride() {
+      return this.isCreate ? _CREATE : _VIEW;
+    },
+
+    provisionerWatch() {
+      return this.value.provisioner;
+    },
+
+    provisioners() {
+      const csiDrivers = this.$store.getters[`${ this.inStore }/all`](CSI_DRIVER) || [];
+      const format = { [LONGHORN_DRIVER]: 'storageClass.longhorn.title' };
+
+      return csiDrivers.map((provisioner) => {
+        return {
+          label: format[provisioner.name] || provisioner.name,
+          value: provisioner.name,
+        };
+      });
+    },
+
+    schema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/schemaFor`](STORAGE_CLASS);
+    },
+  },
+
+  watch: {
+    provisionerWatch() {
+      this.$set(this.value, 'parameters', {});
+    }
+  },
+
+  created() {
+    this.registerBeforeHook(this.willSave, 'willSave');
+  },
+
+  methods: {
+    getComponent(name) {
+      try {
+        return require(`./provisioners/${ name }`).default;
+      } catch {
+        return require(`./provisioners/custom`).default;
+      }
+    },
+
+    updateProvisioner(provisioner) {
+      this.$set(this.value, 'provisioner', provisioner);
+      this.$set(this.value, 'allowVolumeExpansion', provisioner === LONGHORN_DRIVER);
+    },
+
+    willSave() {
+      Object.keys(this.value.parameters).forEach((key) => {
+        if (this.value.parameters[key] === null || this.value.parameters[key] === '') {
+          delete this.value.parameters[key];
+        }
+      });
+
+      this.formatAllowedTopoloties();
+    },
+
+    formatAllowedTopoloties() {
+      const neu = this.allowedTopologies;
+
+      if (!neu || neu.length === 0) {
+        delete this.value.allowedTopologies;
+
+        return;
+      }
+
+      const matchLabelExpressions = neu.filter(R => !!R.key.trim() && (R.values.length > 0 && !R.values.find(V => !V.trim())));
+
+      if (matchLabelExpressions.length > 0) {
+        this.value.allowedTopologies = [{ matchLabelExpressions }];
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <CruResource
+    v-else
+    :done-route="doneRoute"
+    :mode="mode"
+    :resource="value"
+    :subtypes="[]"
+    :validation-passed="true"
+    :apply-hooks="applyHooks"
+    :errors="errors"
+    @error="e=>errors = e"
+    @finish="save"
+    @cancel="done"
+  >
+    <NameNsDescription
+      :namespaced="false"
+      :value="value"
+      :mode="mode"
+      :register-before-hook="registerBeforeHook"
+    />
+    <LabeledSelect
+      :value="value.provisioner"
+      label="Provisioner"
+      :options="provisioners"
+      :localized-label="true"
+      :mode="modeOverride"
+      :searchable="true"
+      :taggable="true"
+      class="mb-20"
+      @input="updateProvisioner($event)"
+    />
+    <Tabbed :side-tabs="true">
+      <Tab name="parameters" :label="t('storageClass.parameters.label')" :weight="2">
+        <component
+          :is="getComponent(value.provisioner)"
+          :key="value.provisioner"
+          :value="value"
+          :mode="modeOverride"
+          :real-mode="realMode"
+        />
+      </Tab>
+      <Tab name="customize" :label="t('storageClass.customize.label')">
+        <div class="row mt-20">
+          <div class="col span-6">
+            <RadioGroup
+              v-model="value.reclaimPolicy"
+              name="reclaimPolicy"
+              :label="t('storageClass.customize.reclaimPolicy.label')"
+              :mode="modeOverride"
+              :options="reclaimPolicyOptions"
+            />
+          </div>
+          <div class="col span-6">
+            <RadioGroup
+              v-model="value.allowVolumeExpansion"
+              name="allowVolumeExpansion"
+              :label="t('storageClass.customize.allowVolumeExpansion.label')"
+              :mode="modeOverride"
+              :options="allowVolumeExpansionOptions"
+            />
+          </div>
+        </div>
+        <div class="row mt-20">
+          <div class="col span-6">
+            <RadioGroup
+              v-model="value.volumeBindingMode"
+              name="volumeBindingMode"
+              :label="t('storageClass.customize.volumeBindingMode.label')"
+              :mode="modeOverride"
+              :options="volumeBindingModeOptions"
+            />
+          </div>
+        </div>
+      </Tab>
+      <Tab
+        name="allowedTopologies"
+        :label="t('harvester.storage.allowedTopologies.title')"
+        :weight="-1"
+        :tooltip="t('harvester.storage.allowedTopologies.tooltip')"
+      >
+        <ArrayList
+          v-model="allowedTopologies"
+          :default-add-value="defaultAddValue"
+          :initial-empty-row="true"
+          :show-header="true"
+          :mode="modeOverride"
+        >
+          <template v-slot:column-headers>
+            <div class="box">
+              <div class="row">
+                <div class="col span-4 key">
+                  {{ t('generic.key') }}
+                  <span class="required">*</span>
+                </div>
+                <div class="col span-8 value">
+                  {{ t('generic.value') }}
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-slot:columns="scope">
+            <div class="row custom-headers">
+              <div class="col span-4 key">
+                <LabeledInput
+                  v-model="scope.row.value.key"
+                  :required="true"
+                  :mode="modeOverride"
+                />
+              </div>
+              <div class="col span-8 value">
+                <Tags
+                  v-model="scope.row.value.values"
+                  :add-label="t('generic.add')"
+                  :mode="modeOverride"
+                />
+              </div>
+            </div>
+          </template>
+        </ArrayList>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+  .custom-headers {
+    align-items: center;
+  }
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.storage/provisioners/custom.vue b/pkg/harvester/edit/harvesterhci.io.storage/provisioners/custom.vue
new file mode 100644
index 00000000..54fa3b73
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.storage/provisioners/custom.vue
@@ -0,0 +1,25 @@
+<script>
+import KeyValue from '@shell/components/form/KeyValue';
+
+export default {
+  components: { KeyValue },
+  props:      {
+    value: {
+      type:     Object,
+      required: true
+    },
+    mode: {
+      type:     String,
+      required: true
+    }
+  }
+};
+</script>
+<template>
+  <KeyValue
+    v-model="value.parameters"
+    :add-label="t('storageClass.custom.addLabel')"
+    :read-allowed="false"
+    :mode="mode"
+  />
+</template>
diff --git a/pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io.vue b/pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io.vue
new file mode 100644
index 00000000..329f61d2
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io.vue
@@ -0,0 +1,249 @@
+<script>
+import KeyValue from '@shell/components/form/KeyValue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import RadioGroup from '@components/Form/Radio/RadioGroup';
+
+import { _CREATE, _VIEW } from '@shell/config/query-params';
+import { LONGHORN } from '@shell/config/types';
+import { clone } from '@shell/utils/object';
+import { uniq } from '@shell/utils/array';
+
+const DEFAULT_PARAMETERS = [
+  'numberOfReplicas',
+  'staleReplicaTimeout',
+  'diskSelector',
+  'nodeSelector',
+  'migratable',
+];
+
+export default {
+  components: {
+    KeyValue,
+    LabeledSelect,
+    LabeledInput,
+    RadioGroup,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+    mode: {
+      type:     String,
+      required: true
+    },
+    realMode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  data() {
+    if (this.realMode === _CREATE) {
+      this.$set(this.value, 'parameters', {
+        numberOfReplicas:    '3',
+        staleReplicaTimeout: '30',
+        diskSelector:        null,
+        nodeSelector:        null,
+        migratable:          'true',
+      });
+    }
+
+    return {};
+  },
+
+  computed: {
+    longhornNodes() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/all`](LONGHORN.NODES);
+    },
+
+    nodeTags() {
+      return (this.longhornNodes || []).reduce((sum, node) => {
+        const tags = node.spec?.tags || [];
+
+        return uniq([...sum, ...tags]);
+      }, []);
+    },
+
+    diskTags() {
+      return (this.longhornNodes || []).reduce((sum, node) => {
+        const disks = node.spec?.disks;
+
+        const tagsOfNode = Object.keys(disks).reduce((sum, key) => {
+          const tags = disks[key]?.tags || [];
+
+          return uniq([...sum, ...tags]);
+        }, []);
+
+        return uniq([...sum, ...tagsOfNode]);
+      }, []);
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    migratableOptions() {
+      return [{
+        label: this.t('generic.yes'),
+        value: 'true'
+      }, {
+        label: this.t('generic.no'),
+        value: 'false'
+      }];
+    },
+
+    parameters: {
+      get() {
+        const parameters = clone(this.value?.parameters) || {};
+
+        DEFAULT_PARAMETERS.map((key) => {
+          delete parameters[key];
+        });
+
+        return parameters;
+      },
+
+      set(value) {
+        Object.assign(this.value.parameters, value);
+      }
+    },
+
+    nodeSelector: {
+      get() {
+        const nodeSelector = this.value?.parameters?.nodeSelector;
+
+        if ((nodeSelector || '').includes(',')) {
+          return nodeSelector.split(',');
+        } else if (nodeSelector) {
+          return [nodeSelector];
+        } else {
+          return [];
+        }
+      },
+
+      set(value) {
+        this.value.parameters.nodeSelector = (value || []).join(',');
+      }
+    },
+
+    diskSelector: {
+      get() {
+        const diskSelector = this.value?.parameters?.diskSelector;
+
+        if ((diskSelector || '').includes(',')) {
+          return diskSelector.split(',');
+        } else if (diskSelector) {
+          return [diskSelector];
+        } else {
+          return [];
+        }
+      },
+
+      set(value) {
+        this.value.parameters.diskSelector = (value || []).join(',');
+      }
+    },
+
+    numberOfReplicas: {
+      get() {
+        return this.value?.parameters?.numberOfReplicas;
+      },
+
+      set(value) {
+        if (value >= 1 && value <= 3) {
+          this.value.parameters.numberOfReplicas = String(value);
+        }
+      }
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-6">
+        <LabeledInput
+          v-model="numberOfReplicas"
+          :label="t('harvester.storage.parameters.numberOfReplicas.label')"
+          :required="true"
+          :mode="mode"
+          min="1"
+          max="3"
+          type="number"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          v-model="value.parameters.staleReplicaTimeout"
+          :label="t('harvester.storage.parameters.staleReplicaTimeout.label')"
+          :required="true"
+          :mode="mode"
+          type="number"
+        />
+      </div>
+    </div>
+    <div class="row mt-10">
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="nodeSelector"
+          :label="t('harvester.storage.parameters.nodeSelector.label')"
+          :options="nodeTags"
+          :taggable="true"
+          :multiple="true"
+          :mode="mode"
+        >
+          <template #no-options="{ searching }">
+            <span v-if="!searching" class="text-muted">
+              {{ t('harvester.storage.parameters.nodeSelector.no-options', null, true) }}
+            </span>
+          </template>
+        </LabeledSelect>
+      </div>
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="diskSelector"
+          :label="t('harvester.storage.parameters.diskSelector.label')"
+          :options="diskTags"
+          :taggable="true"
+          :multiple="true"
+          :mode="mode"
+        >
+          <template #no-options="{ searching }">
+            <span v-if="!searching" class="text-muted">
+              {{ t('harvester.storage.parameters.diskSelector.no-options', null, true) }}
+            </span>
+          </template>
+        </LabeledSelect>
+      </div>
+    </div>
+    <div class="row mt-10">
+      <div class="col span-6">
+        <RadioGroup
+          v-model="value.parameters.migratable"
+          name="layer3NetworkMode"
+          :label="t('harvester.storage.parameters.migratable.label')"
+          :mode="mode"
+          :options="migratableOptions"
+        />
+      </div>
+    </div>
+    <KeyValue
+      v-model="parameters"
+      :add-label="t('storageClass.longhorn.addLabel')"
+      :read-allowed="false"
+      :mode="mode"
+      class="mt-10"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.labeled-input.compact-input {
+  padding: 7px 10px;
+}
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.virtualmachinebackup.vue b/pkg/harvester/edit/harvesterhci.io.virtualmachinebackup.vue
new file mode 100644
index 00000000..5257d9d2
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.virtualmachinebackup.vue
@@ -0,0 +1,299 @@
+<script>
+import Footer from '@shell/components/form/Footer';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import Checkbox from '@components/Form/Checkbox/Checkbox';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { allHash } from '@shell/utils/promise';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { sortBy } from '@shell/utils/sort';
+import { clone } from '@shell/utils/object';
+import { HCI } from '../types';
+import { BACKUP_TYPE } from '../config/types';
+
+const createObject = {
+  apiVersion: 'harvesterhci.io/v1beta1',
+  kind:       'VirtualMachineRestore',
+  metadata:   { name: '', namespace: '' },
+  type:       HCI.RESTORE,
+  spec:       {
+    target: {
+      apiGroup: 'kubevirt.io',
+      kind:     'VirtualMachine',
+      name:     ''
+    },
+    virtualMachineBackupName: '',
+    newVM:                    true,
+    deletionPolicy:           'delete'
+  }
+};
+
+export default {
+  name:       'CreateRestore',
+  components: {
+    Checkbox,
+    Footer,
+    RadioGroup,
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  async fetch() {
+    await allHash({
+      backups: this.$store.dispatch('harvester/findAll', { type: HCI.BACKUP }),
+      vms:     this.$store.dispatch('harvester/findAll', { type: HCI.VM }),
+    });
+  },
+
+  data() {
+    const restoreMode = this.$route.query?.restoreMode;
+    const backupName = this.$route.query?.resourceName;
+
+    const restoreResource = clone(createObject);
+
+    const restoreNewVm = restoreMode === 'new' || restoreMode === undefined;
+
+    return {
+      backupName,
+      restoreNewVm,
+      restoreResource,
+      name:           '',
+      description:    '',
+      deletionPolicy: 'delete',
+      namespace:      ''
+    };
+  },
+
+  computed: {
+    backupOption() {
+      const choices = this.$store.getters['harvester/all'](HCI.BACKUP);
+
+      return choices.filter( (T) => {
+        const hasVM = this.restoreNewVm || T.attachVmExisting;
+
+        return hasVM && T?.status?.readyToUse && T.spec?.type !== BACKUP_TYPE.SNAPSHOT;
+      }).map( (T) => {
+        return {
+          label: T.metadata.name,
+          value: T.metadata.name
+        };
+      });
+    },
+
+    deletionPolicyOption() {
+      return [{
+        value: 'delete',
+        label: 'Delete'
+      }, {
+        value: 'retain',
+        label: 'Retain'
+      }];
+    },
+
+    currentBackupResource() {
+      const name = this.backupName;
+
+      const backupList = this.$store.getters['harvester/all'](HCI.BACKUP);
+
+      return backupList.find( O => O.name === name);
+    },
+
+    disableExisting() {
+      return !this.currentBackupResource?.attachVmExisting;
+    },
+
+    backupNamespace() {
+      const backupList = this.$store.getters['harvester/all'](HCI.BACKUP);
+
+      return backupList.find( B => B.metadata.name === this.backupName)?.metadata?.namespace;
+    },
+
+    namespaces() {
+      const allNamespaces = this.$store.getters['allNamespaces'];
+
+      const out = sortBy(
+        allNamespaces.map((obj) => {
+          return {
+            label: obj.nameDisplay,
+            value: obj.id,
+          };
+        }),
+        'label'
+      );
+
+      return out;
+    },
+  },
+
+  watch: {
+    backupName: {
+      handler(neu) {
+        if (this.currentBackupResource) {
+          if (!this.restoreNewVm) {
+            this.name = this?.currentBackupResource?.attachVM;
+          }
+        }
+
+        this.restoreResource.spec.virtualMachineBackupName = neu;
+      },
+      immediate: true
+    },
+
+    restoreNewVm(neu) {
+      if (neu) {
+        this.name = '';
+      } else {
+        this.name = this?.currentBackupResource?.attachVM;
+      }
+    },
+
+    backupNamespace: {
+      handler(neu) {
+        this.namespace = neu;
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    async saveRestore(buttonCb) {
+      this.update();
+
+      const proxyResource = await this.$store.dispatch('harvester/create', this.restoreResource);
+
+      proxyResource.metadata.namespace = this.namespace;
+      proxyResource.spec.virtualMachineBackupNamespace = this.backupNamespace;
+
+      try {
+        await proxyResource.save();
+        buttonCb(true);
+
+        this.$router.push({
+          name:   this.doneRoute,
+          params: { resource: HCI.VM }
+        });
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err) || err;
+        buttonCb(false);
+      }
+    },
+
+    update() {
+      this.restoreResource.metadata.generateName = `restore-${ this.backupName }-`;
+      if (this.name) {
+        this.restoreResource.spec.target.name = this.name;
+      }
+
+      if (this.restoreNewVm) {
+        delete this.restoreResource.spec.deletionPolicy;
+        this.restoreResource.spec.newVM = true;
+      } else {
+        this.restoreResource.spec.deletionPolicy = this.deletionPolicy;
+        delete this.restoreResource.spec.newVM;
+        delete this.restoreResource.spec.keepMacAddress;
+      }
+    }
+  },
+
+  componentTitle() {
+    return 'restoreVM';
+  }
+};
+</script>
+
+<template>
+  <div id="restore">
+    <div class="content">
+      <div class="mb-20">
+        <RadioGroup
+          v-model="restoreNewVm"
+          name="model"
+          :options="[true,false]"
+          :labels="[t('harvester.backup.restore.createNew'), t('harvester.backup.restore.replaceExisting')]"
+          :disabled="disableExisting"
+          :mode="mode"
+        />
+      </div>
+
+      <div class="row">
+        <div class="col span-6">
+          <LabeledSelect
+            v-model="namespace"
+            :disabled="!restoreNewVm"
+            :label="t('nameNsDescription.namespace.label')"
+            :options="namespaces"
+          />
+        </div>
+
+        <div class="col span-6">
+          <LabeledInput
+            v-model="name"
+            :disabled="!restoreNewVm"
+            :label="t('harvester.backup.restore.virtualMachineName')"
+            :placeholder="t('nameNsDescription.name.placeholder')"
+            class="mb-20"
+          />
+        </div>
+      </div>
+
+      <LabeledSelect
+        v-model="backupName"
+        class="mb-20"
+        :label="t('harvester.backup.restore.backup')"
+        :options="backupOption"
+      />
+
+      <Checkbox
+        v-if="restoreNewVm"
+        v-model="restoreResource.spec.keepMacAddress"
+        type="checkbox"
+        :label="t('harvester.backup.restore.keepMacAddress')"
+      />
+
+      <LabeledSelect
+        v-if="!restoreNewVm"
+        v-model="deletionPolicy"
+        :label="t('harvester.backup.restore.deletePreviousVolumes')"
+        :options="deletionPolicyOption"
+      />
+    </div>
+
+    <Footer mode="create" class="footer" :errors="errors" @save="saveRestore" @done="done" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#restore {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+
+  .content {
+    flex-grow: 1
+  }
+
+  .footer {
+    border-top: var(--header-border-size) solid var(--header-border);
+
+    // Overrides outlet padding
+    margin-left: -$space-m;
+    margin-right: -$space-m;
+    margin-bottom: -$space-m;
+    padding: $space-s $space-m;
+
+    ::v-deep .spacer-small {
+      padding: 0px;
+    }
+  }
+}
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.virtualmachineimage.vue b/pkg/harvester/edit/harvesterhci.io.virtualmachineimage.vue
new file mode 100644
index 00000000..6ab9cae6
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.virtualmachineimage.vue
@@ -0,0 +1,446 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import KeyValue from '@shell/components/form/KeyValue';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { RadioGroup } from '@components/Form/Radio';
+import Select from '@shell/components/form/Select';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { OS } from '../mixins/harvester-vm';
+import { VM_IMAGE_FILE_FORMAT } from '../validators/vm-image';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { allHash } from '@shell/utils/promise';
+import { STORAGE_CLASS } from '@shell/config/types';
+import { HCI } from '../types';
+
+const DOWNLOAD = 'download';
+const UPLOAD = 'upload';
+const rawORqcow2 = 'raw_qcow2';
+
+export default {
+  name: 'EditImage',
+
+  components: {
+    Tab,
+    Tabbed,
+    KeyValue,
+    Select,
+    CruResource,
+    LabeledInput,
+    NameNsDescription,
+    RadioGroup,
+    LabeledSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({
+      images:         this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.IMAGE }),
+      storageClasses: this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }),
+    });
+
+    const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find(s => s.isDefault);
+
+    this.$set(this, 'storageClassName', this.storageClassName || defaultStorage?.metadata?.name || 'longhorn');
+  },
+
+  data() {
+    if ( !this.value.spec ) {
+      this.$set(this.value, 'spec', { sourceType: DOWNLOAD });
+    }
+
+    if (!this.value.metadata.name) {
+      this.value.metadata.generateName = 'image-';
+    }
+
+    return {
+      url:      this.value.spec.url,
+      files:    [],
+      resource: '',
+      headers:  {},
+      fileUrl:  '',
+      file:     '',
+    };
+  },
+
+  computed: {
+    uploadFileName() {
+      return this.file?.name || '';
+    },
+
+    imageName() {
+      return this.value?.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_NAME] || '-';
+    },
+
+    isCreateEdit() {
+      return this.isCreate || this.isEdit;
+    },
+
+    showEditAsYaml() {
+      return this.value.spec.sourceType === DOWNLOAD;
+    },
+
+    storageClassOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
+
+      const out = storages.filter(s => !s.parameters?.backingImage).map((s) => {
+        const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+
+        return {
+          label,
+          value: s.name,
+        };
+      }) || [];
+
+      return out;
+    },
+
+    storageClassName: {
+      get() {
+        return this.value.metadata.annotations[HCI_ANNOTATIONS.STORAGE_CLASS];
+      },
+
+      set(nue) {
+        this.value.metadata.annotations[HCI_ANNOTATIONS.STORAGE_CLASS] = nue;
+      }
+    },
+  },
+
+  watch: {
+    'value.spec.url'(neu) {
+      const url = neu.trim();
+
+      this.setImageLabels(url);
+    },
+
+    'value.spec.sourceType'() {
+      this.$set(this, 'file', null);
+      this.url = '';
+
+      if (this.$refs?.file?.value) {
+        this.$refs.file.value = null;
+      }
+    },
+  },
+
+  methods: {
+    async saveImage(buttonCb) {
+      this.value.spec.displayName = (this.value.spec.displayName || '').trim();
+
+      if (this.value.spec.sourceType === UPLOAD && this.isCreate) {
+        try {
+          this.value.spec.url = '';
+
+          const file = this.file;
+
+          this.value.metadata.annotations[HCI_ANNOTATIONS.IMAGE_NAME] = file?.name;
+
+          const res = await this.value.save();
+
+          res.uploadImage(file);
+
+          buttonCb(true);
+          this.done();
+        } catch (e) {
+          this.errors = exceptionToErrorsArray(e);
+          buttonCb(false);
+        }
+      } else {
+        this.save(buttonCb);
+      }
+    },
+
+    setImageLabels(str) {
+      const suffixName = str?.split('/')?.pop() || str;
+
+      const fileSuffix = suffixName?.split('.')?.pop()?.toLowerCase();
+
+      if (VM_IMAGE_FILE_FORMAT.includes(fileSuffix)) {
+        const labelValue = fileSuffix === 'iso' ? fileSuffix : rawORqcow2;
+
+        this.addLabel(HCI_ANNOTATIONS.IMAGE_SUFFIX, labelValue);
+
+        if (!this.value.spec.displayName) {
+          this.$refs.nd.changeNameAndNamespace({
+            text:     suffixName,
+            selected: this.value.metadata.namespace,
+          });
+        }
+      }
+
+      const os = this.getOSType(str);
+
+      if (os) {
+        this.addLabel(HCI_ANNOTATIONS.OS_TYPE, os.value);
+      }
+    },
+
+    addLabel(labelKey, value) {
+      const rows = this.$refs.labels.rows;
+
+      rows.map((label, idx) => {
+        if (label.key === labelKey) {
+          this.$refs.labels.remove(idx);
+        }
+      });
+      this.$refs.labels.add(labelKey, value);
+    },
+
+    handleFileUpload() {
+      const file = this.$refs.file.files[0];
+
+      this.file = file;
+
+      this.setImageLabels(file?.name);
+
+      if (!this.value.spec.displayName) {
+        this.$refs.nd.changeNameAndNamespace({
+          text:     file?.name,
+          selected: this.value.metadata.namespace,
+        });
+      }
+
+      this.setImageLabels();
+    },
+
+    selectFile() {
+      // Clear the value so the user can reselect the same file again
+      this.$refs.file.value = null;
+      this.$refs.file.click();
+    },
+
+    internalAnnotations(option) {
+      const optionKeys = [HCI_ANNOTATIONS.OS_TYPE, HCI_ANNOTATIONS.IMAGE_SUFFIX];
+
+      return optionKeys.find(O => O === option.key);
+    },
+
+    calculateOptions(keyName) {
+      if (keyName === HCI_ANNOTATIONS.OS_TYPE) {
+        return OS;
+      } else if (keyName === HCI_ANNOTATIONS.IMAGE_SUFFIX) {
+        return [{
+          label: 'ISO',
+          value: 'iso'
+        }, {
+          label: 'raw/qcow2',
+          value: rawORqcow2
+        }];
+      }
+
+      return [];
+    },
+
+    focusKey() {
+      this.$refs.key.focus();
+    },
+
+    getOSType(str) {
+      if (!str) {
+        return;
+      }
+
+      return OS.find( (os) => {
+        if (os.match) {
+          return os.match.find(matchValue => str.toLowerCase().includes(matchValue)) ? os.value : false;
+        } else {
+          return str.toLowerCase().includes(os.value.toLowerCase()) ? os.value : false;
+        }
+      });
+    }
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :can-yaml="showEditAsYaml ? true : false"
+    :apply-hooks="applyHooks"
+    @finish="saveImage"
+  >
+    <NameNsDescription
+      ref="nd"
+      v-model="value"
+      :mode="mode"
+      :label="t('generic.name')"
+      name-key="spec.displayName"
+    />
+
+    <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+      <Tab
+        name="basic"
+        :label="t('harvester.image.tabs.basics')"
+        :weight="99"
+        class="bordered-table"
+      >
+        <RadioGroup
+          v-if="isCreate"
+          v-model="value.spec.sourceType"
+          name="model"
+          :options="[
+            'download',
+            'upload',
+          ]"
+          :labels="[
+            t('harvester.image.sourceType.download'),
+            t('harvester.image.sourceType.upload'),
+          ]"
+          :mode="mode"
+        />
+        <div class="row mb-20 mt-20">
+          <div class="col span-12">
+            <LabeledInput
+              v-if="!isCreate"
+              v-model="value.spec.sourceType"
+              :mode="mode"
+              class="mb-20"
+              :disabled="isEdit"
+              label-key="harvester.image.source"
+            />
+
+            <LabeledInput
+              v-if="value.spec.sourceType === 'download'"
+              v-model="value.spec.url"
+              :mode="mode"
+              :disabled="isEdit"
+              class="mb-20 labeled-input--tooltip"
+              required
+              label-key="harvester.image.url"
+              :tooltip="t('harvester.image.urlTip', {}, true)"
+            />
+
+            <div v-else>
+              <LabeledInput
+                v-if="isView"
+                v-model="imageName"
+                :mode="mode"
+                class="mt-20"
+                label-key="harvester.image.fileName"
+              />
+
+              <button
+                v-if="isCreate"
+                type="button"
+                class="btn role-primary"
+                @click="selectFile"
+              >
+                <span>
+                  {{ t('harvester.image.uploadFile') }}
+                </span>
+                <input
+                  v-show="false"
+                  id="file"
+                  ref="file"
+                  type="file"
+                  accept=".qcow, .qcow2, .raw, .img, .iso"
+                  @change="handleFileUpload()"
+                />
+              </button>
+
+              <div
+                v-if="uploadFileName"
+                class="fileName mt-5"
+              >
+                <span class="icon icon-file" />
+                {{ uploadFileName }}
+              </div>
+            </div>
+
+            <LabeledInput
+              v-if="value.spec.sourceType === 'download'"
+              v-model="value.spec.checksum"
+              :mode="mode"
+              :disabled="isEdit"
+              label-key="harvester.image.checksum"
+              :tooltip="t('harvester.image.checksumTip')"
+            />
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="storage"
+        :label="t('harvester.storage.label')"
+        :weight="89"
+        class="bordered-table"
+      >
+        <div class="row">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="storageClassName"
+              :options="storageClassOptions"
+              :label="t('harvester.storage.storageClass.label')"
+              :mode="mode"
+              :disabled="isEdit"
+              class="mb-20"
+            />
+          </div>
+        </div>
+      </Tab>
+
+      <Tab name="labels" :label="t('labels.labels.title')" :weight="2" class="bordered-table">
+        <KeyValue
+          key="labels"
+          ref="labels"
+          :value="value.labels"
+          :add-label="t('labels.addLabel')"
+          :mode="mode"
+          :pad-left="false"
+          :read-allowed="false"
+          @focusKey="focusKey"
+          @input="value.setLabels($event)"
+        >
+          <template #value="{row, keyName, valueName, queueUpdate}">
+            <Select
+              v-if="internalAnnotations(row)"
+              v-model="row[valueName]"
+              :mode="mode"
+              :searchable="true"
+              :clearable="false"
+              :options="calculateOptions(row[keyName])"
+              @input="queueUpdate"
+            />
+            <input
+              v-else
+              v-model="row[valueName]"
+              :disabled="isView"
+              :type="'text'"
+              :placeholder="t('keyValue.valuePlaceholder')"
+              autocorrect="off"
+              autocapitalize="off"
+              spellcheck="false"
+              @input="queueUpdate"
+            />
+          </template>
+        </KeyValue>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+.kv-item.value > .unlabeled-select {
+  height: 40px;
+  line-height: 1;
+}
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.virtualmachinetemplateversion.vue b/pkg/harvester/edit/harvesterhci.io.virtualmachinetemplateversion.vue
new file mode 100644
index 00000000..c5b7e897
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.virtualmachinetemplateversion.vue
@@ -0,0 +1,423 @@
+<script>
+import { mapGetters } from 'vuex';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { Checkbox } from '@components/Form/Checkbox';
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import Labels from '@shell/components/form/Labels';
+import KeyValue from '@shell/components/form/KeyValue';
+import NodeScheduling from '@shell/components/form/NodeScheduling';
+import PodAffinity from '@shell/components/form/PodAffinity';
+import UnitInput from '@shell/components/form/UnitInput';
+
+import Reserved from './kubevirt.io.virtualmachine/VirtualMachineReserved';
+import Volume from './kubevirt.io.virtualmachine/VirtualMachineVolume';
+import Network from './kubevirt.io.virtualmachine/VirtualMachineNetwork';
+import CpuMemory from './kubevirt.io.virtualmachine/VirtualMachineCpuMemory';
+import CloudConfig from './kubevirt.io.virtualmachine/VirtualMachineCloudConfig';
+import SSHKey from './kubevirt.io.virtualmachine/VirtualMachineSSHKey';
+
+import { HCI } from '../types';
+import { randomStr } from '@shell/utils/string';
+import { RunStrategys } from '../config/harvester-map';
+import { _CONFIG, _EDIT, _VIEW } from '@shell/config/query-params';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+
+import VM_MIXIN from '../mixins/harvester-vm';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { AFTER_SAVE_HOOKS } from '@shell/mixins/child-hook';
+
+export default {
+  name: 'HarvesterEditVMTemplate',
+
+  components: {
+    Tab,
+    SSHKey,
+    Volume,
+    Tabbed,
+    Network,
+    Checkbox,
+    CpuMemory,
+    CruResource,
+    CloudConfig,
+    LabeledSelect,
+    NameNsDescription,
+    NodeScheduling,
+    PodAffinity,
+    Reserved,
+    UnitInput,
+    Labels,
+    KeyValue,
+  },
+
+  mixins: [CreateEditView, VM_MIXIN],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  data() {
+    if (this.mode === _EDIT) {
+      this.value.cleanForNew();
+    }
+
+    const templateId = this.value.templateId || this.$route.query.templateId;
+
+    return {
+      templateId,
+      templateValue:    null,
+      templateSpec:     null,
+      versionName:      '',
+      description:      '',
+      defaultVersion:   null,
+      isDefaultVersion: false,
+      RunStrategys,
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    isConfig() {
+      return this.$route.query?.as === _CONFIG || this.isView;
+    },
+
+    realTemplateMode() {
+      return this.templateId ? _VIEW : this.mode;
+    },
+
+    secretNamePrefix() {
+      return this.templateValue?.metadata?.name;
+    },
+  },
+
+  watch: {
+    templateId: {
+      async handler(neu) {
+        const templates = await this.$store.dispatch('harvester/findAll', { type: HCI.VM_TEMPLATE });
+        let templateValue = templates.find( V => V.id === neu) || null;
+        let templateSpec = templateValue?.spec;
+
+        if (!templateValue) {
+          templateSpec = {
+            description:      '',
+            defaultVersionId: ''
+          };
+
+          templateValue = await this.$store.dispatch('harvester/create', {
+            metadata: {
+              name:      '',
+              namespace: ''
+            },
+            spec: templateSpec,
+            type: HCI.VM_TEMPLATE
+          });
+        }
+
+        this.templateValue = templateValue;
+        this.templateSpec = templateSpec;
+      },
+      immediate: true
+    }
+  },
+
+  created() {
+    this.registerAfterHook(async() => {
+      if (this.isDefaultVersion) {
+        // Set the default version according to annotation:[HCI_ANNOTATIONS.TEMPLATE_VERSION_CUSTOM_NAME]
+        const versions = await this.$store.dispatch('harvester/findAll', { type: HCI.VM_VERSION, opt: { force: true } });
+
+        const version = versions.find( V => V?.metadata?.annotations?.[HCI_ANNOTATIONS.TEMPLATE_VERSION_CUSTOM_NAME] === this.customName);
+
+        if (version) {
+          try {
+            this.templateValue.defaultVersionId = version.id;
+
+            const data = [{
+              op: 'replace', path: '/spec/defaultVersionId', value: version.id
+            }];
+
+            await this.templateValue.patch( data, { url: this.templateValue.linkFor('view') });
+          } catch (err) {
+            return Promise.reject(new Error(err.message));
+          }
+        }
+      }
+    });
+  },
+
+  mounted() {
+    this.imageId = this.diskRows[0]?.image || '';
+  },
+
+  methods: {
+    async saveVMT(buttonCb) {
+      this.parseVM();
+
+      const templates = await this.$store.dispatch('harvester/findAll', { type: HCI.VM_TEMPLATE });
+      const template = templates.find( O => O.metadata.name === this.templateValue.metadata.name);
+
+      try {
+        if (!this.templateId) {
+          if (this.templateValue?.metadata?.name) {
+            await this.templateValue.save();
+          } else {
+            this.errors = [this.t('validation.required', { key: this.t('harvester.vmTemplate.nameNsDescription.name') })];
+            buttonCb(false);
+
+            return;
+          }
+        } else {
+          template.save();
+        }
+
+        this.value.cleanForNew();
+        this.customName = randomStr(10);
+        this.$set(this.value.metadata, 'annotations', {
+          ...this.value.metadata.annotations,
+          [HCI_ANNOTATIONS.TEMPLATE_VERSION_CUSTOM_NAME]: this.customName
+        });
+
+        const name = this.templateValue.metadata.name || template.metadata.name;
+        const namespace = this.templateValue.metadata.namespace || template.metadata.namespace;
+
+        if (this.isCreate) {
+          this.value.metadata.namespace = namespace;
+        }
+
+        this.$set(this.value.spec, 'templateId', `${ namespace }/${ name }`);
+        const res = await this.value.save();
+
+        await this.saveSecret(res);
+        await this.applyHooks(AFTER_SAVE_HOOKS);
+        this.done();
+      } catch (e) {
+        this.errors = [e];
+        buttonCb(false);
+      }
+    },
+
+    onTabChanged({ tab }) {
+      if (tab.name === 'advanced') {
+        this.$refs.yamlEditor?.refresh();
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    v-if="templateSpec && spec"
+    :done-route="doneRoute"
+    :resource="value"
+    :can-yaml="false"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="saveVMT"
+  >
+    <NameNsDescription
+      v-model="templateValue"
+      :mode="realTemplateMode"
+      name-label="harvester.vmTemplate.nameNsDescription.name"
+      :namespaced="true"
+    />
+
+    <Checkbox
+      v-if="templateId"
+      v-model="isDefaultVersion"
+      class="mb-20"
+      :label="t('tableHeaders.defaultVersion')"
+      type="checkbox"
+      :mode="mode"
+    />
+
+    <Tabbed :side-tabs="true" @changed="onTabChanged">
+      <Tab name="Basics" :label="t('harvester.vmTemplate.tabs.basics')">
+        <CpuMemory :cpu="cpu" :memory="memory" :disabled="isConfig" @updateCpuMemory="updateCpuMemory" />
+
+        <div class="mb-20">
+          <SSHKey
+            v-model="sshKey"
+            :create-namespace="true"
+            :namespace="templateValue.metadata.namespace"
+            :disable-create="isView"
+            :mode="mode"
+            @update:sshKey="updateSSHKey"
+          />
+        </div>
+      </Tab>
+
+      <Tab name="Volume" :label="t('harvester.tab.volume')" :weight="-1">
+        <Volume v-model="diskRows" :mode="mode" :namespace="value.metadata.namespace" :existing-volume-disabled="true" />
+      </Tab>
+
+      <Tab name="Network" :label="t('harvester.tab.network')" :weight="-2">
+        <Network v-model="networkRows" :mode="mode" />
+      </Tab>
+
+      <Tab
+        name="nodeScheduling"
+        :label="t('workload.container.titles.nodeScheduling')"
+        :weight="-89"
+      >
+        <template #default="{active}">
+          <NodeScheduling
+            :key="active"
+            :mode="mode"
+            :value="spec.template.spec"
+            :nodes="nodesIdOptions"
+          />
+        </template>
+      </Tab>
+
+      <Tab :label="t('harvester.tab.vmScheduling')" name="vmScheduling" :weight="-90">
+        <template #default="{active}">
+          <PodAffinity
+            :key="active"
+            :mode="mode"
+            :value="spec.template.spec"
+            :nodes="nodes"
+            :all-namespaces-option-available="true"
+            :namespaces="filteredNamespaces"
+            :overwrite-labels="affinityLabels"
+          />
+        </template>
+      </Tab>
+
+      <Tab name="advanced" :label="t('harvester.tab.advanced')" :weight="-99">
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="runStrategy"
+              label-key="harvester.virtualMachine.runStrategy"
+              :options="RunStrategys"
+              :mode="mode"
+            />
+          </div>
+
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="osType"
+              label-key="harvester.virtualMachine.osType"
+              :mode="mode"
+              :options="OS"
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <a v-if="showAdvanced" v-t="'harvester.generic.showMore'" role="button" @click="toggleAdvanced" />
+          <a v-else v-t="'harvester.generic.showMore'" role="button" @click="toggleAdvanced" />
+        </div>
+
+        <div v-if="showAdvanced">
+          <div class="row mb-20">
+            <div class="col span-6">
+              <Reserved
+                :reserved-memory="reservedMemory"
+                :mode="mode"
+                @updateReserved="updateReserved"
+              />
+            </div>
+            <div class="col span-6">
+              <UnitInput
+                v-model="terminationGracePeriodSeconds"
+                :suffix="terminationGracePeriodSeconds == 1 ? 'Second' : 'Seconds'"
+                :label="t('harvester.virtualMachine.terminationGracePeriodSeconds.label')"
+                :mode="mode"
+                @change="updateTerminationGracePeriodSeconds"
+              />
+            </div>
+          </div>
+        </div>
+
+        <CloudConfig
+          ref="yamlEditor"
+          :mode="mode"
+          :user-script="userScript"
+          :namespace="templateValue.metadata.namespace"
+          :network-script="networkScript"
+          @updateUserData="updateUserData"
+          @updateNetworkData="updateNetworkData"
+        />
+
+        <div class="spacer"></div>
+        <Checkbox
+          v-model="installUSBTablet"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.enableUsb')"
+          :mode="mode"
+        />
+
+        <Checkbox
+          v-model="installAgent"
+          class="check"
+          type="checkbox"
+          label-key="harvester.virtualMachine.installAgent"
+          :mode="mode"
+        />
+
+        <Checkbox
+          v-model="tpmEnabled"
+          class="check"
+          type="checkbox"
+          label-key="harvester.virtualMachine.advancedOptions.tpm"
+          :mode="mode"
+        />
+
+        <Checkbox
+          v-model="efiEnabled"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.efiEnabled')"
+          :mode="mode"
+        />
+
+        <Checkbox
+          v-if="efiEnabled"
+          v-model="secureBoot"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.secureBoot')"
+          :mode="mode"
+        />
+      </Tab>
+
+      <Tab
+        :name="t('generic.labels')"
+        :label="t('harvester.tab.instanceLabel')"
+        :weight="-99"
+      >
+        <Labels
+          :default-container-class="'labels-and-annotations-container'"
+          :value="value"
+          :mode="mode"
+          :display-side-by-side="false"
+          :show-annotations="false"
+          :show-label-title="false"
+        >
+          <template #labels="{toggler}">
+            <KeyValue
+              key="labels"
+              :value="value.instanceLabels"
+              :protected-keys="value.systemLabels || []"
+              :toggle-filter="toggler"
+              :add-label="t('labels.addLabel')"
+              :mode="mode"
+              :read-allowed="false"
+              :value-can-be-empty="true"
+              @input="value.setInstanceLabels($event)"
+            />
+          </template>
+        </Labels>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
diff --git a/pkg/harvester/edit/harvesterhci.io.vmsnapshot.vue b/pkg/harvester/edit/harvesterhci.io.vmsnapshot.vue
new file mode 100644
index 00000000..60f40ce5
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.vmsnapshot.vue
@@ -0,0 +1,279 @@
+<script>
+import Footer from '@shell/components/form/Footer';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { allHash } from '@shell/utils/promise';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { NAMESPACE } from '@shell/config/types';
+import { HCI } from '../types';
+import { sortBy } from '@shell/utils/sort';
+import { clone } from '@shell/utils/object';
+import { BACKUP_TYPE } from '../config/types';
+
+const createObject = {
+  apiVersion: 'harvesterhci.io/v1beta1',
+  kind:       'VirtualMachineRestore',
+  metadata:   { name: '', namespace: '' },
+  type:       HCI.RESTORE,
+  spec:       {
+    target: {
+      apiGroup: 'kubevirt.io',
+      kind:     'VirtualMachine',
+      name:     ''
+    },
+    virtualMachineBackupName: '',
+    newVM:                    true,
+    deletionPolicy:           'retain'
+  }
+};
+
+export default {
+  name:       'CreateRestore',
+  components: {
+    Footer,
+    RadioGroup,
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  async fetch() {
+    await allHash({
+      backups: this.$store.dispatch('harvester/findAll', { type: HCI.BACKUP }),
+      vms:     this.$store.dispatch('harvester/findAll', { type: HCI.VM }),
+    });
+  },
+
+  data() {
+    const restoreMode = this.$route.query?.restoreMode;
+    const snapshotName = this.$route.query?.resourceName;
+
+    const restoreResource = clone(createObject);
+
+    const restoreNewVm = restoreMode === 'new' || restoreMode === undefined;
+
+    return {
+      snapshotName,
+      restoreNewVm,
+      restoreResource,
+      name:           '',
+      description:    '',
+      deletionPolicy: 'retain',
+      namespace:      ''
+    };
+  },
+
+  computed: {
+    snapshotOption() {
+      const choices = this.$store.getters['harvester/all'](HCI.BACKUP);
+
+      return choices.filter( (T) => {
+        const hasVM = this.restoreNewVm || T.attachVmExisting;
+
+        return hasVM && T?.status?.readyToUse && T.spec?.type === BACKUP_TYPE.SNAPSHOT;
+      }).map( (T) => {
+        return {
+          label: T.metadata.name,
+          value: T.metadata.name
+        };
+      });
+    },
+
+    deletionPolicyOption() {
+      return [{
+        value: 'retain',
+        label: 'Retain'
+      }];
+    },
+
+    currentBackupResource() {
+      const name = this.snapshotName;
+
+      const backupList = this.$store.getters['harvester/all'](HCI.BACKUP);
+
+      return backupList.find( O => O.name === name);
+    },
+
+    disableExisting() {
+      return !this.currentBackupResource?.attachVmExisting;
+    },
+
+    snapshotNamespace() {
+      const backupList = this.$store.getters['harvester/all'](HCI.BACKUP);
+
+      return backupList.find( B => B.metadata.name === this.snapshotName)?.metadata?.namespace;
+    },
+
+    namespaces() {
+      const inStore = this.$store.getters['currentStore'](NAMESPACE);
+      const choices = this.$store.getters[`${ inStore }/all`](NAMESPACE);
+      const systemNamespaces = this.$store.getters['systemNamespaces'];
+
+      const out = sortBy(
+        choices.filter(N => !systemNamespaces.includes(N.metadata.name)).map((obj) => {
+          return {
+            label: obj.nameDisplay,
+            value: obj.id,
+          };
+        }),
+        'label'
+      );
+
+      return out;
+    },
+  },
+
+  watch: {
+    snapshotName: {
+      handler(neu) {
+        if (this.currentBackupResource) {
+          if (!this.restoreNewVm) {
+            this.name = this?.currentBackupResource?.attachVM;
+          }
+        }
+
+        this.restoreResource.spec.virtualMachineBackupName = neu;
+      },
+      immediate: true
+    },
+
+    restoreNewVm(neu) {
+      if (neu) {
+        this.name = '';
+      } else {
+        this.name = this?.currentBackupResource?.attachVM;
+      }
+    },
+
+    snapshotNamespace: {
+      handler(neu) {
+        this.namespace = neu;
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    async saveRestore(buttonCb) {
+      this.update();
+
+      const proxyResource = await this.$store.dispatch('harvester/create', this.restoreResource);
+
+      proxyResource.metadata.namespace = this.namespace;
+      proxyResource.spec.virtualMachineBackupNamespace = this.snapshotNamespace;
+
+      try {
+        await proxyResource.save();
+        buttonCb(true);
+
+        this.$router.push({
+          name:   this.doneRoute,
+          params: { resource: HCI.VM }
+        });
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err) || err;
+        buttonCb(false);
+      }
+    },
+
+    update() {
+      this.restoreResource.metadata.generateName = `restore-${ this.snapshotName }-`;
+      if (this.name) {
+        this.restoreResource.spec.target.name = this.name;
+      }
+
+      if (this.restoreNewVm) {
+        delete this.restoreResource.spec.deletionPolicy;
+        this.restoreResource.spec.newVM = true;
+      } else {
+        this.restoreResource.spec.deletionPolicy = this.deletionPolicy;
+        delete this.restoreResource.spec.newVM;
+      }
+    }
+  },
+
+  componentTitle() {
+    return 'restoreVM';
+  }
+};
+</script>
+
+<template>
+  <div id="restore">
+    <div class="content">
+      <div class="mb-20">
+        <RadioGroup
+          v-model="restoreNewVm"
+          name="model"
+          :options="[true,false]"
+          :labels="[t('harvester.backup.restore.createNew'), t('harvester.backup.restore.replaceExisting')]"
+          :disabled="disableExisting"
+          :mode="mode"
+        />
+      </div>
+
+      <div class="row">
+        <div class="col span-6">
+          <LabeledSelect
+            v-model="namespace"
+            :disabled="true"
+            :label="t('nameNsDescription.namespace.label')"
+            :options="namespaces"
+          />
+        </div>
+
+        <div class="col span-6">
+          <LabeledInput
+            v-model="name"
+            :disabled="!restoreNewVm"
+            :label="t('harvester.backup.restore.virtualMachineName')"
+            :placeholder="t('nameNsDescription.name.placeholder')"
+            class="mb-20"
+          />
+        </div>
+      </div>
+
+      <LabeledSelect v-model="snapshotName" class="mb-20" :label="t('harvester.vmSnapshot.snapshot')" :options="snapshotOption" />
+
+      <LabeledSelect v-if="!restoreNewVm" v-model="deletionPolicy" :label="t('harvester.backup.restore.deletePreviousVolumes')" :options="deletionPolicyOption" />
+    </div>
+
+    <Footer mode="create" class="footer" :errors="errors" @save="saveRestore" @done="done" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#restore {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+
+  .content {
+    flex-grow: 1
+  }
+
+  .footer {
+    border-top: var(--header-border-size) solid var(--header-border);
+
+    // Overrides outlet padding
+    margin-left: -$space-m;
+    margin-right: -$space-m;
+    margin-bottom: -$space-m;
+    padding: $space-s $space-m;
+
+    ::v-deep .spacer-small {
+      padding: 0px;
+    }
+  }
+}
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.volume.vue b/pkg/harvester/edit/harvesterhci.io.volume.vue
new file mode 100644
index 00000000..5c8c4196
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.volume.vue
@@ -0,0 +1,372 @@
+<script>
+import Tab from '@shell/components/Tabbed/Tab';
+import SortableTable from '@shell/components/SortableTable';
+import CruResource from '@shell/components/CruResource';
+import UnitInput from '@shell/components/form/UnitInput';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+
+import { allHash } from '@shell/utils/promise';
+import { get } from '@shell/utils/object';
+import { HCI, VOLUME_SNAPSHOT } from '../types';
+import { STORAGE_CLASS, LONGHORN, PV } from '@shell/config/types';
+import { sortBy } from '@shell/utils/sort';
+import { saferDump } from '@shell/utils/create-yaml';
+import { InterfaceOption, VOLUME_DATA_SOURCE_KIND } from '../config/harvester-map';
+import { _CREATE } from '@shell/config/query-params';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { STATE, NAME, AGE, NAMESPACE } from '@shell/config/table-headers';
+
+export default {
+  name: 'HarvesterVolume',
+
+  components: {
+    Tab,
+    UnitInput,
+    CruResource,
+    SortableTable,
+    ResourceTabs,
+    LabeledSelect,
+    LabeledInput,
+    NameNsDescription,
+  },
+
+  mixins: [CreateEditView],
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const _hash = {
+      images:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.IMAGE }),
+      snapshots: this.$store.dispatch(`${ inStore }/findAll`, { type: VOLUME_SNAPSHOT }),
+      storages:  this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }),
+      pvs:       this.$store.dispatch(`${ inStore }/findAll`, { type: PV }),
+    };
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](LONGHORN.VOLUMES)) {
+      _hash.longhornVolumes = this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.VOLUMES });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](LONGHORN.ENGINES)) {
+      _hash.longhornEngines = this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.ENGINES });
+    }
+
+    const hash = await allHash(_hash);
+
+    this.snapshots = hash.snapshots;
+
+    const defaultStorage = this.$store.getters[`harvester/all`](STORAGE_CLASS).find( O => O.isDefault);
+
+    this.$set(this.value.spec, 'storageClassName', this.value?.spec?.storageClassName || defaultStorage?.metadata?.name || 'longhorn');
+  },
+
+  data() {
+    if (this.mode === _CREATE) {
+      this.value.spec.volumeMode = 'Block';
+      this.value.spec.accessModes = ['ReadWriteMany'];
+    }
+
+    const storage = this.value?.spec?.resources?.requests?.storage || null;
+    const imageId = get(this.value, `metadata.annotations."${ HCI_ANNOTATIONS.IMAGE_ID }"`);
+    const source = !imageId ? 'blank' : 'url';
+
+    return {
+      source,
+      storage,
+      imageId,
+      snapshots: [],
+    };
+  },
+
+  created() {
+    this.registerBeforeHook(this.willSave, 'willSave');
+  },
+
+  computed: {
+    isBlank() {
+      return this.source === 'blank';
+    },
+
+    isVMImage() {
+      return this.source === 'url';
+    },
+
+    sourceOption() {
+      return [{
+        value: 'blank',
+        label: this.t('harvester.volume.sourceOptions.new')
+      }, {
+        value: 'url',
+        label: this.t('harvester.volume.sourceOptions.vmImage')
+      }];
+    },
+
+    interfaceOption() {
+      return InterfaceOption;
+    },
+
+    imageOption() {
+      const choices = this.$store.getters['harvester/all'](HCI.IMAGE);
+
+      return sortBy(
+        choices
+          .filter(obj => obj.isReady)
+          .map((obj) => {
+            return {
+              label: `${ obj.metadata.namespace }/${ obj.spec.displayName }`,
+              value: obj.id
+            };
+          }),
+        'label'
+      );
+    },
+
+    snapshotHeaders() {
+      return [
+        STATE,
+        NAME,
+        NAMESPACE,
+        {
+          name:          'size',
+          labelKey:      'tableHeaders.size',
+          value:         'status.restoreSize',
+          sort:          'size',
+          formatter:     'Si',
+          formatterOpts: {
+            opts: {
+              increment: 1024, addSuffix: true, maxExponent: 3, minExponent: 3, suffix: 'i',
+            },
+            needParseSi: true
+          },
+        },
+        {
+          name:      'readyToUse',
+          labelKey:  'tableHeaders.readyToUse',
+          value:     'status.readyToUse',
+          align:     'left',
+          formatter: 'Checked',
+        },
+        AGE
+      ];
+    },
+
+    dataSourceKind() {
+      return VOLUME_DATA_SOURCE_KIND[this.value.spec?.dataSource?.kind];
+    },
+
+    storageClassOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
+
+      const out = storages.filter(s => !s.parameters?.backingImage).map((s) => {
+        const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+
+        return {
+          label,
+          value: s.name,
+        };
+      }) || [];
+
+      return out;
+    },
+
+    frontend() {
+      return this.value.longhornVolume?.spec?.frontend;
+    },
+
+    frontendDisplay() {
+      const format = ['blockdev'];
+
+      if (format.includes(this.frontend)) {
+        return this.t(`harvester.volume.${ this.frontend }`);
+      }
+
+      return this.frontend;
+    },
+
+    attachedNode() {
+      return this.value.longhornVolume?.spec?.nodeID;
+    },
+
+    endpoint() {
+      return this.value.longhornEngine?.status?.endpoint;
+    },
+
+    diskTags() {
+      return this.value.longhornVolume?.spec?.diskSelector;
+    },
+
+    nodeTags() {
+      return this.value.longhornVolume?.spec?.nodeSelector;
+    },
+
+    replicasNumber() {
+      return this.value.longhornVolume?.spec?.numberOfReplicas;
+    },
+
+    lastBackup() {
+      return this.value.longhornVolume?.status?.lastBackup;
+    },
+
+    lastBackupAt() {
+      return this.value.longhornVolume?.status?.lastBackupAt;
+    },
+
+    rebuildStatus() {
+      return this.value.longhornEngine?.status?.rebuildStatus;
+    }
+  },
+
+  methods: {
+    willSave() {
+      this.update();
+    },
+    update() {
+      let imageAnnotations = '';
+      let storageClassName = this.value.spec.storageClassName;
+
+      if (this.isVMImage && this.imageId) {
+        const images = this.$store.getters['harvester/all'](HCI.IMAGE);
+
+        imageAnnotations = {
+          ...this.value.metadata.annotations,
+          [HCI_ANNOTATIONS.IMAGE_ID]: this.imageId
+        };
+        storageClassName = images?.find(image => this.imageId === image.id)?.storageClassName;
+      } else {
+        imageAnnotations = { ...this.value.metadata.annotations };
+      }
+
+      const spec = {
+        ...this.value.spec,
+        resources: { requests: { storage: this.storage } },
+        storageClassName
+      };
+
+      this.value.setAnnotations(imageAnnotations);
+
+      this.$set(this.value, 'spec', spec);
+    },
+
+    generateYaml() {
+      const out = saferDump(this.value);
+
+      return out;
+    },
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :generate-yaml="generateYaml"
+    :apply-hooks="applyHooks"
+    @finish="save"
+  >
+    <NameNsDescription :value="value" :namespaced="true" :mode="mode" />
+
+    <ResourceTabs
+      v-model="value"
+      class="mt-15"
+      :need-conditions="false"
+      :need-related="false"
+      :side-tabs="true"
+      :mode="mode"
+    >
+      <Tab name="basic" :label="t('harvester.volume.tabs.basics')" :weight="3" class="bordered-table">
+        <LabeledSelect
+          v-model="source"
+          :label="t('harvester.volume.source')"
+          :options="sourceOption"
+          :disabled="!isCreate"
+          required
+          :mode="mode"
+          class="mb-20"
+          @input="update"
+        />
+
+        <LabeledSelect
+          v-if="isVMImage"
+          v-model="imageId"
+          :label="t('harvester.volume.image')"
+          :options="imageOption"
+          :disabled="!isCreate"
+          required
+          :mode="mode"
+          class="mb-20"
+          @input="update"
+        />
+
+        <LabeledSelect
+          v-if="source === 'blank'"
+          v-model="value.spec.storageClassName"
+          :options="storageClassOptions"
+          :label="t('harvester.storage.storageClass.label')"
+          :mode="mode"
+          class="mb-20"
+          :disabled="!isCreate"
+          @input="update"
+        />
+
+        <UnitInput
+          v-model="storage"
+          v-int-number
+          :label="t('harvester.volume.size')"
+          :input-exponent="3"
+          :output-modifier="true"
+          :increment="1024"
+          :mode="mode"
+          required
+          class="mb-20"
+          @input="update"
+        />
+      </Tab>
+      <Tab v-if="!isCreate" name="details" :label="t('harvester.volume.tabs.details')" :weight="2.5" class="bordered-table">
+        <LabeledInput v-model="frontendDisplay" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.frontend')" />
+        <LabeledInput v-model="attachedNode" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.attachedNode')" />
+        <LabeledInput v-model="endpoint" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.endpoint')" />
+        <LabeledSelect
+          v-model="diskTags"
+          :multiple="true"
+          :label="t('harvester.volume.diskTags')"
+          :options="[]"
+          :disabled="true"
+          :mode="mode"
+          class="mb-20"
+        />
+        <LabeledSelect
+          v-model="nodeTags"
+          :multiple="true"
+          :label="t('harvester.volume.nodeTags')"
+          :options="[]"
+          :disabled="true"
+          :mode="mode"
+          class="mb-20"
+        />
+        <LabeledInput v-model="lastBackup" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.lastBackup')" />
+        <LabeledInput v-model="lastBackupAt" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.lastBackupAt')" />
+        <LabeledInput v-model="replicasNumber" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.replicasNumber')" />
+      </Tab>
+      <Tab v-if="!isCreate" name="instances" :label="t('harvester.volume.tabs.snapshots')" :weight="2" class="bordered-table">
+        <SortableTable
+          v-bind="$attrs"
+          :headers="snapshotHeaders"
+          default-sort-by="age"
+          :rows="value.relatedVolumeSnapshotCounts"
+          key-field="_key"
+          v-on="$listeners"
+        />
+      </Tab>
+      <Tab v-if="!isCreate && value.spec.dataSource" name="datasource" :label="t('harvester.volume.tabs.datasource')" :weight="1" class="bordered-table">
+        <LabeledInput v-model="dataSourceKind" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.kind')" />
+        <LabeledInput v-model="value.spec.dataSource.name" :mode="mode" :disabled="true" :label="t('nameNsDescription.name.label')" />
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>
diff --git a/pkg/harvester/edit/harvesterhci.io.volumesnapshot.vue b/pkg/harvester/edit/harvesterhci.io.volumesnapshot.vue
new file mode 100644
index 00000000..30fce06b
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.volumesnapshot.vue
@@ -0,0 +1,92 @@
+<script>
+import Tab from '@shell/components/Tabbed/Tab';
+import CruResource from '@shell/components/CruResource';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { get } from '@shell/utils/object';
+import { HCI } from '../types';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { HCI as HCI_ANNOTATIONS } from '@shell/config/labels-annotations';
+
+export default {
+  name:       'HarvesterSnapshot',
+  components: {
+    LabeledInput,
+    Tab,
+    ResourceTabs,
+    CruResource,
+    NameNsDescription,
+  },
+
+  mixins: [CreateEditView],
+
+  computed: {
+    volume() {
+      return this.volumes.find((V) => {
+        return V.metadata.name === this.targetVolume;
+      });
+    },
+
+    size() {
+      return this.value?.status?.restoreSize;
+    },
+
+    isImageVolume() {
+      return !!get(this.value, `metadata.annotations."${ HCI_ANNOTATIONS.IMAGE_ID }"`);
+    },
+
+    imageName() {
+      const image = this.$store.getters['harvester/all'](HCI.IMAGE).find((I) => {
+        return I.id === get(this.value, `metadata.annotations."${ HCI_ANNOTATIONS.IMAGE_ID }"`);
+      });
+
+      return image?.spec?.displayName;
+    },
+
+    targetVolume() {
+      return this.value?.spec?.source?.persistentVolumeClaimName;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <CruResource
+      :done-route="doneRoute"
+      :resource="value"
+      :mode="mode"
+      :errors="errors"
+      :apply-hooks="applyHooks"
+      @finish="save"
+    >
+      <NameNsDescription :value="value" :namespaced="true" :mode="mode" />
+      <ResourceTabs
+        v-model="value"
+        class="mt-15"
+        :need-conditions="false"
+        :need-related="false"
+        :side-tabs="true"
+        :mode="mode"
+      >
+        <Tab name="basics" :label="t('harvester.virtualMachine.detail.tabs.basics')" class="bordered-table">
+          <div class="row">
+            <div class="col span-12">
+              <LabeledInput v-model="size" :label="t('harvester.snapshot.size')" class="mt-20" :disabled="true" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledInput v-model="targetVolume" :label="t('harvester.snapshot.targetVolume')" class="mt-20" :disabled="true" />
+            </div>
+          </div>
+          <div v-if="isImageVolume" class="row">
+            <div class="col span-12">
+              <LabeledInput v-model="imageName" :label="t('harvester.snapshot.image')" class="mt-20" :disabled="true" />
+            </div>
+          </div>
+        </Tab>
+      </ResourceTabs>
+    </CruResource>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/AccessCredentialsUsers.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/AccessCredentialsUsers.vue
new file mode 100644
index 00000000..2b1d15f2
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/AccessCredentialsUsers.vue
@@ -0,0 +1,191 @@
+<script>
+import { mapGetters } from 'vuex';
+import { clone } from '@shell/utils/object';
+import { randomStr } from '@shell/utils/string';
+
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ModalWithCard from '@shell/components/ModalWithCard';
+
+const _NEW = '_NEW';
+
+export default {
+  components: {
+    LabeledInput,
+    LabeledSelect,
+    ModalWithCard,
+  },
+
+  props: {
+    value: {
+      type:    [Array, String],
+      default: () => {
+        return [];
+      }
+    },
+
+    resource: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    userOptions: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    multiple: {
+      type:    Boolean,
+      default: false
+    },
+
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      selectedUser: this.value,
+      newUsername:  '',
+      randomStr:    randomStr(5).toLowerCase(),
+      errors:       [],
+      isOpen:       false,
+    };
+  },
+
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+
+  watch: {
+    value(neu) {
+      this.selectedUser = neu;
+    },
+
+    selectedUser(val, old) {
+      if ( val.includes(_NEW)) {
+        this.$set(this, 'selectedUser', old);
+        this.update();
+        this.show();
+      }
+    }
+  },
+
+  methods: {
+    update() {
+      this.$emit('update:user', clone(this.selectedUser));
+    },
+
+    addUser(buttonCb) {
+      const reg = /^[-._0-9a-zA-Z]+$/;
+
+      this.errors = [];
+
+      if (!reg.test(this.newUsername)) {
+        const message = this.t('harvester.virtualMachine.accessCredentials.invalidUser');
+
+        this.errors.push(message);
+        buttonCb(false);
+
+        return;
+      }
+
+      if (this.userOptions.includes(this.newUsername)) {
+        const message = this.t('harvester.virtualMachine.accessCredentials.duplicatedUser');
+
+        this.errors.push(message);
+        buttonCb(false);
+
+        return;
+      }
+
+      if (this.multiple) {
+        this.selectedUser.push(this.newUsername);
+      } else {
+        this.selectedUser = this.newUsername;
+      }
+
+      this.$emit('update:newUser', this.newUsername);
+      this.update();
+
+      buttonCb(true);
+      this.cancel();
+    },
+
+    show() {
+      this.isOpen = true;
+    },
+
+    hide() {
+      this.isOpen = false;
+    },
+
+    cancel() {
+      this.hide();
+      this.newUsername = '';
+    },
+
+  }
+};
+</script>
+
+<template>
+  <div class="vm__credentials-users">
+    <LabeledSelect
+      v-model="selectedUser"
+      :options="userOptions"
+      :label="t('harvester.virtualMachine.accessCredentials.injectSSH.users')"
+      :taggable="multiple"
+      :mode="mode"
+      :multiple="multiple"
+      :searchable="false"
+      :tooltip="t('harvester.virtualMachine.accessCredentials.userTips')"
+      :class="{'hasUsers': selectedUser.length > 0}"
+      @input="update"
+    />
+
+    <ModalWithCard
+      v-if="isOpen"
+      :name="randomStr"
+      width="40%"
+      :errors="errors"
+      @finish="addUser"
+      @close="cancel"
+    >
+      <template #title>
+        {{ t('harvester.virtualMachine.accessCredentials.injectSSH.addUser') }}
+      </template>
+
+      <template #content>
+        <LabeledInput
+          v-model="newUsername"
+          :label="t('harvester.virtualMachine.input.username')"
+          class="mb-20"
+          required
+          @keydown.native.enter.prevent="()=>{}"
+        />
+      </template>
+    </ModalWithCard>
+  </div>
+</template>
+
+<style lang="scss">
+  .vm__credentials-users {
+    .hasUsers.labeled-select.edit.taggable {
+      .labeled-tooltip {
+        .icon.status-icon {
+          top: 30px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/index.vue
new file mode 100644
index 00000000..6ea60e5f
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/index.vue
@@ -0,0 +1,212 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import { Banner } from '@components/Banner';
+import InfoBox from '@shell/components/InfoBox';
+
+import { randomStr } from '@shell/utils/string';
+import { removeObject } from '@shell/utils/array';
+import { ACCESS_CREDENTIALS } from '../../../config/harvester-map';
+import { _EDIT } from '@shell/config/query-params';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+
+const _NEW = '_NEW';
+
+export default {
+  components: {
+    Banner,
+    InfoBox
+  },
+
+  props: {
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    resource: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+
+    disableCreate: {
+      type:    Boolean,
+      default: false
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false
+    },
+
+    isQemuInstalled: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      ACCESS_CREDENTIALS,
+      toRemove:       [],
+      toSave:         [],
+      rows:           [],
+      newUserOptions: [],
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+
+    historyUsersOptions() {
+      const out = JSON.parse(this.resource?.spec?.template?.metadata?.annotations?.[HCI_ANNOTATIONS.DYNAMIC_SSHKEYS_USERS] || '[]');
+
+      out.unshift({
+        label: this.t('harvester.virtualMachine.accessCredentials.injectSSH.addUser'),
+        value: _NEW,
+      });
+
+      return out;
+    },
+
+    userOptions() {
+      return Array.from(new Set([...this.historyUsersOptions, ...this.newUserOptions]));
+    },
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        this.rows = [...neu];
+      },
+      deep:      true,
+      immediate: true,
+    },
+  },
+
+  methods: {
+    addCredentials(type) {
+      const neu = {
+        source:      type,
+        users:       [],
+        sshkeys:     [],
+        username:    '',
+        newPassword: '',
+        secretName:  this.generateSecretName(this.resource.metadata.name),
+      };
+
+      this.rows.push(neu);
+      this.update();
+    },
+
+    remove(row) {
+      removeObject(this.rows, row);
+      this.update();
+    },
+
+    update() {
+      this.$emit('input', this.rows);
+    },
+
+    updateNewUser(newUser) {
+      this.newUserOptions.push(newUser);
+    },
+
+    generateSecretName(name) {
+      return name ? `${ name }-${ randomStr(5).toLowerCase() }` : undefined;
+    },
+
+    componentFor(type) {
+      switch (type) {
+      case ACCESS_CREDENTIALS.RESET_PWD:
+        return require(`./type/basicAuth.vue`).default;
+      case ACCESS_CREDENTIALS.INJECT_SSH:
+        return require(`./type/sshkey.vue`).default;
+      }
+    },
+
+    headerFor(type) {
+      return {
+        userPassword: this.$store.getters['i18n/t']('harvester.virtualMachine.accessCredentials.resetPwd.label'),
+        sshPublicKey: this.$store.getters['i18n/t']('harvester.virtualMachine.accessCredentials.injectSSH.label'),
+      }[type];
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <Banner class="mb-20" color="info" :label="t('harvester.virtualMachine.accessCredentials.tips')" />
+
+    <div v-for="(row, i) in rows" :key="row.id">
+      <InfoBox class="volume-source">
+        <button v-if="isEdit" type="button" class="role-link btn btn-sm remove-vol" @click="remove(row)">
+          <i class="icon icon-x" />
+        </button>
+        <h3>
+          <span>
+            {{ headerFor(row.source) }}
+          </span>
+        </h3>
+        <div>
+          <component
+            :is="componentFor(row.source)"
+            v-model="rows[i]"
+            :rows="rows"
+            :resource="resource"
+            :user-options="userOptions"
+            :mode="mode"
+            :idx="i"
+            @update="update"
+            @update:newUser="updateNewUser"
+          />
+        </div>
+      </InfoBox>
+    </div>
+
+    <div v-if="isEdit && isQemuInstalled" class="mt-20">
+      <button
+        type="button"
+        class="btn btn-sm bg-primary mr-15 mb-10"
+        @click="addCredentials(ACCESS_CREDENTIALS.RESET_PWD)"
+      >
+        {{ t('harvester.virtualMachine.accessCredentials.resetPwd.label') }}
+      </button>
+
+      <button
+        type="button"
+        class="btn btn-sm bg-primary mr-15 mb-10"
+        @click="addCredentials(ACCESS_CREDENTIALS.INJECT_SSH)"
+      >
+        {{ t('harvester.virtualMachine.accessCredentials.injectSSH.label') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .volume-source {
+    position: relative;
+  }
+
+  .remove-vol {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 0px;
+  }
+</style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/type/basicAuth.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/type/basicAuth.vue
new file mode 100644
index 00000000..f9aad32d
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/type/basicAuth.vue
@@ -0,0 +1,94 @@
+<script>
+import Password from '@shell/components/form/Password';
+import AccessCredentialsUsers from '../AccessCredentialsUsers';
+
+export default {
+  name:       'HarvesterEditVolume',
+  components: { Password, AccessCredentialsUsers },
+
+  props: {
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+
+    resource: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    userOptions: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+  },
+
+  data() {
+    return {
+      defaultPwdValue: {
+        username:    '',
+        newPassword: ''
+      }
+    };
+  },
+
+  methods: {
+    update() {
+      this.$emit('update');
+    },
+
+    updateUser(neu) {
+      this.$set(this.value, 'username', neu);
+      this.update();
+    },
+
+    updateNewUser(neu) {
+      this.$emit('update:newUser', neu);
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="row" @input="update">
+    <div class="col span-6">
+      <AccessCredentialsUsers
+        v-model="value.username"
+        :resource="resource"
+        :user-options="userOptions"
+        :multiple="false"
+        :mode="mode"
+        @update:user="updateUser"
+        @update:newUser="updateNewUser"
+      />
+    </div>
+    <div class="col span-6">
+      <Password
+        ref="password"
+        v-model="value.newPassword"
+        :mode="mode"
+        :disabled="mode !== 'edit'"
+        :label="t('harvester.virtualMachine.input.password')"
+        required
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.action {
+  display: flex;
+  flex-direction: row-reverse;
+}
+</style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/type/sshkey.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/type/sshkey.vue
new file mode 100644
index 00000000..d604dbf6
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/type/sshkey.vue
@@ -0,0 +1,85 @@
+<script>
+import SSHKey from '../../VirtualMachineSSHKey';
+import AccessCredentialsUsers from '../AccessCredentialsUsers';
+
+export default {
+  name:       'HarvesterEditVolume',
+  components: { SSHKey, AccessCredentialsUsers },
+
+  props: {
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+
+    resource: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    userOptions: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+  },
+
+  methods: {
+    update() {
+      this.$emit('update');
+    },
+
+    updateUser(neu) {
+      this.$set(this.value, 'users', neu);
+      this.update();
+    },
+
+    updateSSH(neu) {
+      this.$set(this.value, 'sshkeys', neu);
+      this.update();
+    },
+
+    updateNewUser(neu) {
+      this.$emit('update:newUser', neu);
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="columns row">
+      <div class="col span-6">
+        <AccessCredentialsUsers
+          v-model="value.users"
+          :resource="resource"
+          :user-options="userOptions"
+          :mode="mode"
+          :multiple="true"
+          @update:user="updateUser"
+          @update:newUser="updateNewUser"
+        />
+      </div>
+      <div class="col span-6">
+        <SSHKey
+          v-model="value.sshkeys"
+          class="mb-20"
+          :namespace="resource.metadata.namespace"
+          :mode="mode"
+          :searchable="false"
+          @update:sshKey="updateSSH"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/DataTemplate.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/DataTemplate.vue
new file mode 100644
index 00000000..06989607
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/DataTemplate.vue
@@ -0,0 +1,155 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
+
+import { _VIEW } from '@shell/config/query-params';
+import { CONFIG_MAP } from '@shell/config/types';
+
+const _NEW = '_NEW';
+const _NONE = '_NONE';
+
+export default {
+  components: { YamlEditor, LabeledSelect },
+
+  props: {
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+    value: {
+      type:    String,
+      default: ''
+    },
+    type: {
+      type:    String,
+      default: ''
+    },
+    options: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+    configId: {
+      type:    String,
+      default: ''
+    },
+    viewCode: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      id:         '',
+      yamlScript: this.value,
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    editorMode() {
+      return this.isView || this.viewCode ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE;
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+  },
+
+  watch: {
+    value(neu) {
+      this.yamlScript = neu;
+    },
+
+    configId(neu) {
+      this.id = this.configId;
+    },
+
+    id(neu, old) {
+      const cloudInit = this.$store.getters['harvester/byId'](CONFIG_MAP, neu)?.data?.cloudInit || '';
+
+      this.$emit('updateTemplateId', this.type, neu);
+      if (!neu) {
+        // should not reset yaml when nothing is selected
+        return;
+      } else if (neu === _NEW) {
+        this.$emit('show', this.type);
+        this.id = old;
+
+        return;
+      } else if (neu === _NONE ) {
+        this.yamlScript = '';
+      } else {
+        this.yamlScript = cloudInit;
+      }
+
+      this.$refs['yaml'].updateValue(cloudInit);
+    },
+
+    yamlScript(neu) {
+      this.$emit('update', neu, this.type);
+    }
+  },
+
+  methods: {
+    refresh() {
+      this.$refs.yaml.refresh();
+    },
+
+    updateValue() {
+      this.$refs['yaml'].updateValue(this.value);
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="mb-20">
+    <h3>{{ t(`harvester.virtualMachine.cloudConfig.${type}.title`) }}</h3>
+    <p class="text-muted mb-20">
+      <t :k="`harvester.virtualMachine.cloudConfig.${type}.tip`" :raw="true" />
+    </p>
+
+    <LabeledSelect
+      v-if="!isView"
+      v-model="id"
+      class="mb-20"
+      :options="options"
+      :disabled="viewCode"
+      :label-key="`harvester.virtualMachine.cloudConfig.${type}.label`"
+    />
+
+    <div class="resource-yaml">
+      <YamlEditor
+        ref="yaml"
+        v-model="yamlScript"
+        class="yaml-editor"
+        :editor-mode="editorMode"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$yaml-height: 200px;
+
+::v-deep .resource-yaml {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  & .yaml-editor{
+    flex: 1;
+    min-height: $yaml-height;
+
+    & .code-mirror .CodeMirror {
+      min-height: $yaml-height;
+    }
+  }
+}
+</style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/index.vue
new file mode 100644
index 00000000..041a33f1
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/index.vue
@@ -0,0 +1,287 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import { LabeledInput } from '@components/Form/LabeledInput';
+import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
+import ModalWithCard from '@shell/components/ModalWithCard';
+
+import { CONFIG_MAP } from '@shell/config/types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { _VIEW } from '@shell/config/query-params';
+import DataTemplate from './DataTemplate';
+
+const _NEW = '_NEW';
+
+export default {
+  components: {
+    DataTemplate, YamlEditor, LabeledInput, ModalWithCard
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+    namespace: {
+      type:    String,
+      default: ''
+    },
+    userScript: {
+      type:    String,
+      default: ''
+    },
+    networkScript: {
+      type:    String,
+      default: ''
+    },
+    viewCode: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      errors:            [],
+      templateType:      '',
+      cloudTemplate:     '',
+      cloudTemplateName: '',
+      configUserId:      '',
+      configNetworkId:   '',
+      optionUser:        [],
+      optionNetwork:     [],
+      isOpen:            false
+    };
+  },
+
+  async fetch() {
+    const configs = await this.$store.dispatch('harvester/findAll', { type: CONFIG_MAP });
+
+    const optionUser = [];
+    const optionNetwork = [];
+
+    for (const config of configs) {
+      if (config.metadata?.labels?.[HCI_ANNOTATIONS.CLOUD_INIT] === 'user') {
+        optionUser.push({
+          label: config?.id,
+          value: config?.id
+        });
+      }
+
+      if (config.metadata?.labels?.[HCI_ANNOTATIONS.CLOUD_INIT] === 'network') {
+        optionNetwork.push({
+          label: config?.id,
+          value: config?.id
+        });
+      }
+    }
+
+    optionUser.unshift({
+      label: this.t('harvester.virtualMachine.cloudConfig.createNew'),
+      value: _NEW,
+    });
+
+    optionNetwork.unshift({
+      label: this.t('harvester.virtualMachine.cloudConfig.createNew'),
+      value: _NEW,
+    });
+
+    this.optionUser = optionUser;
+    this.optionNetwork = optionNetwork;
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    createTypeLable() {
+      const label = `harvester.virtualMachine.cloudConfig.${ this.templateType }.label`;
+
+      return this.t(label);
+    },
+
+    editorMode() {
+      return this.isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE;
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+  },
+
+  methods: {
+    updateValue() {
+      this.$refs['userTemplate'].updateValue();
+      this.$refs['networkTemplate'].updateValue();
+    },
+
+    update(value, type) {
+      if (type === 'user') {
+        this.$emit('updateUserData', value);
+      }
+      if (type === 'network') {
+        this.$emit('updateNetworkData', value);
+      }
+    },
+
+    updateTemplateId(type, id) {
+      this.$emit('updateDataTemplateId', type, id);
+    },
+
+    show(templateType) {
+      this.templateType = templateType;
+      this.isOpen = true;
+    },
+
+    async save(buttonCb) {
+      this.errors = [];
+
+      if (!this.cloudTemplateName) {
+        this.errors.push(this.t('validation.required', { key: this.t('harvester.virtualMachine.input.name') }, true));
+        buttonCb(false);
+
+        return;
+      }
+
+      if (!this.cloudTemplate) {
+        const keyLabel = this.templateType === 'user' ? 'harvester.cloudTemplate.userData' : 'harvester.cloudTemplate.networkData';
+
+        this.errors.push(this.t('validation.required', { key: this.t(keyLabel) }, true));
+        buttonCb(false);
+
+        return;
+      }
+
+      const templateValue = await this.$store.dispatch('harvester/create', {
+        type:     CONFIG_MAP,
+        metadata: {
+          labels:    { [HCI_ANNOTATIONS.CLOUD_INIT]: this.templateType },
+          name:      this.cloudTemplateName,
+          namespace: this.namespace
+        },
+        data: { cloudInit: this.cloudTemplate },
+      });
+
+      try {
+        const res = await templateValue.save();
+
+        if (res.id) {
+          this.templateType === 'user' ? this.configUserId = res.id : this.configNetworkId = res.id;
+          this.$fetch();
+        }
+        buttonCb(true);
+        this.cancel();
+      } catch (err) {
+        this.errors = [err.message];
+        buttonCb(false);
+      }
+    },
+
+    cancel() {
+      this.cloudTemplate = '';
+      this.cloudTemplateName = '';
+      this.$set(this, 'errors', []);
+      this.isOpen = false;
+    },
+
+    refresh() {
+      this.$refs['userTemplate'].refresh();
+      this.$refs['networkTemplate'].refresh();
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <h2 v-if="!isView">
+      {{ t('harvester.virtualMachine.cloudConfig.title') }}
+    </h2>
+
+    <div class="mb-20">
+      <DataTemplate
+        ref="userTemplate"
+        v-model="userScript"
+        type="user"
+        :view-code="viewCode"
+        :mode="mode"
+        :config-id="configUserId"
+        :options="optionUser"
+        @show="show"
+        @update="update"
+        @updateTemplateId="updateTemplateId"
+      />
+    </div>
+
+    <div class="mb-20">
+      <DataTemplate
+        ref="networkTemplate"
+        v-model="networkScript"
+        type="network"
+        :view-code="viewCode"
+        :mode="mode"
+        :config-id="configNetworkId"
+        :options="optionNetwork"
+        @show="show"
+        @update="update"
+      />
+    </div>
+
+    <ModalWithCard
+      v-if="isOpen"
+      name="createCloudTemplate"
+      width="40%"
+      :errors="errors"
+      @finish="save"
+      @close="cancel"
+    >
+      <template #title>
+        {{ t('harvester.virtualMachine.cloudConfig.createTemplateTitle', { name: createTypeLable }) }}
+      </template>
+
+      <template #content>
+        <LabeledInput
+          v-model="cloudTemplateName"
+          :label="t('harvester.virtualMachine.input.name')"
+          class="mb-20"
+          required
+          @keydown.native.enter.prevent="()=>{}"
+        />
+
+        <div class="yaml">
+          <div class="resource-yaml">
+            <YamlEditor
+              ref="createTemplate"
+              v-model="cloudTemplate"
+              class="yaml-editor"
+              :editor-mode="editorMode"
+            />
+          </div>
+        </div>
+      </template>
+    </ModalWithCard>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$yaml-height: 350px;
+
+.yaml {
+  height: $yaml-height;
+  overflow: auto;
+}
+
+::v-deep .resource-yaml {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  & .yaml-editor{
+    flex: 1;
+    min-height: $yaml-height;
+
+    & .code-mirror .CodeMirror {
+      min-height: $yaml-height;
+    }
+  }
+}
+</style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCpuMemory.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCpuMemory.vue
new file mode 100644
index 00000000..427792d1
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCpuMemory.vue
@@ -0,0 +1,113 @@
+<script>
+import UnitInput from '@shell/components/form/UnitInput';
+import InputOrDisplay from '@shell/components/InputOrDisplay';
+
+export default {
+  name:       'HarvesterEditCpuMemory',
+  components: { UnitInput, InputOrDisplay },
+
+  props: {
+    cpu: {
+      type:    Number,
+      default: null
+    },
+    memory: {
+      type:    String,
+      default: null
+    },
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+    disabled: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      localCpu:    this.cpu,
+      localMemory: this.memory
+    };
+  },
+
+  computed: {
+    cupDisplay() {
+      return `${ this.localCpu } C`;
+    },
+
+    memoryDisplay() {
+      return `${ this.localMemory }`;
+    }
+  },
+
+  watch: {
+    cpu(neu) {
+      this.localCpu = neu;
+    },
+    memory(neu) {
+      if (neu && !neu.includes('null')) {
+        this.localMemory = neu;
+      }
+    }
+  },
+
+  methods: {
+    change() {
+      let memory = '';
+
+      if (String(this.localMemory).includes('Gi')) {
+        memory = this.localMemory;
+      } else {
+        memory = `${ this.localMemory }Gi`;
+      }
+      if (memory.includes('null')) {
+        memory = null;
+      }
+      this.$emit('updateCpuMemory', this.localCpu, memory);
+    },
+
+  }
+};
+</script>
+
+<template>
+  <div class="row">
+    <div class="col span-6">
+      <InputOrDisplay name="CPU" :value="cupDisplay" :mode="mode" class="mb-10">
+        <UnitInput
+          v-model="localCpu"
+          v-int-number
+          label="CPU"
+          suffix="C"
+          :delay="0"
+          required
+          :disabled="disabled"
+          :mode="mode"
+          class="mb-20"
+          @input="change"
+        />
+      </InputOrDisplay>
+    </div>
+
+    <div class="col span-6">
+      <InputOrDisplay :name="t('harvester.virtualMachine.input.memory')" :value="memoryDisplay" :mode="mode" class="mb-10">
+        <UnitInput
+          v-model="localMemory"
+          v-int-number
+          :label="t('harvester.virtualMachine.input.memory')"
+          :mode="mode"
+          :input-exponent="3"
+          :delay="0"
+          :increment="1024"
+          :output-modifier="true"
+          :disabled="disabled"
+          required
+          class="mb-20"
+          @input="change"
+        />
+      </InputOrDisplay>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/__tests__/HarvesterEditNetwork.test.ts b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/__tests__/HarvesterEditNetwork.test.ts
new file mode 100644
index 00000000..0c381742
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/__tests__/HarvesterEditNetwork.test.ts
@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils';
+import HarvesterEditNetwork from '../base.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: HarvesterEditNetwork', () => {
+  // eslint-disable-next-line jest/no-commented-out-tests
+  // it('should display all the inputs', () => {
+  //   const wrapper = mount(HarvesterEditNetwork, { propsData: { mode: _EDIT } });
+
+  //   const inputWraps = wrapper.findAll('[data-testid^=input-hen-]');
+
+  //   expect(inputWraps).toHaveLength(5);
+  // });
+
+  it.each([
+    'name',
+  ])('should emit an update on %p input', (field) => {
+    const wrapper = mount(HarvesterEditNetwork, { propsData: { mode: _EDIT } });
+    const input = wrapper.find(`[data-testid="input-hen-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  it.each([
+    'model',
+    'networkName',
+    'type',
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(HarvesterEditNetwork, { propsData: { mode: _EDIT } });
+    const select = wrapper.find(`[data-testid="input-hen-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+});
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/base.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/base.vue
new file mode 100644
index 00000000..35f1530e
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/base.vue
@@ -0,0 +1,306 @@
+<script>
+import InputOrDisplay from '@shell/components/InputOrDisplay';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+import { clone } from '@shell/utils/object';
+import { _CREATE, _VIEW } from '@shell/config/query-params';
+import { MANAGEMENT_NETWORK } from '../../../mixins/harvester-vm';
+
+const MODEL = [{
+  label: 'virtio',
+  value: 'virtio'
+}, {
+  label: 'e1000',
+  value: 'e1000'
+}, {
+  label: 'e1000e',
+  value: 'e1000e'
+}, {
+  label: 'ne2k_pci',
+  value: 'ne2k_pci'
+}, {
+  label: 'pcnet',
+  value: 'pcnet'
+}, {
+  label: 'rtl8139',
+  value: 'rtl8139'
+}];
+
+export default {
+  name:       'HarvesterEditNetwork',
+  components: {
+    LabeledInput, LabeledSelect, InputOrDisplay
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    networkOption: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    rows: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+
+    isSingle: {
+      type:    Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    const isMasquerade = this.value.isPod;
+
+    if (isMasquerade) {
+      this.value.networkName = MANAGEMENT_NETWORK;
+    }
+
+    return {
+      isMasquerade,
+      hasManagementNetwork: false,
+      showAdvanced:         false,
+    };
+  },
+
+  computed: {
+    isDisabled() {
+      return this.isMasquerade && !this.value.newCreateId && !this.isCreate;
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    isCreate() {
+      return this.mode === _CREATE;
+    },
+
+    modelOption() {
+      return MODEL;
+    },
+
+    allNetworkOption() {
+      const vlanNetwork = clone(this.networkOption);
+      const managementNetwork = [{
+        label: MANAGEMENT_NETWORK,
+        value: MANAGEMENT_NETWORK
+      }];
+
+      if (this.value.newCreateId && this.hasManagementNetwork) {
+        return vlanNetwork;
+      } else if (this.value.newCreateId && !this.hasManagementNetwork) {
+        return [...managementNetwork, ...vlanNetwork];
+      } else if (this.isMasquerade) {
+        return managementNetwork;
+      } else {
+        return vlanNetwork;
+      }
+    },
+
+    typeOption() {
+      const masquerade = [{
+        label: 'masquerade',
+        value: 'masquerade'
+      }, {
+        label: 'bridge',
+        value: 'bridge'
+      }];
+
+      const other = [{
+        label: 'bridge',
+        value: 'bridge'
+      }];
+
+      return this.isMasquerade ? masquerade : other;
+    }
+  },
+
+  watch: {
+    rows: {
+      handler(neu) {
+        const hasManagementNetwork = !!neu.some(N => N.isPod);
+
+        this.$set(this, 'hasManagementNetwork', hasManagementNetwork);
+      },
+      immediate: true,
+      deep:      true
+    },
+
+    isSingle(neu) {
+      if (!neu) {
+        this.$set(this.value, 'macAddress', '');
+        this.update();
+      }
+    }
+  },
+
+  methods: {
+    /**
+     * Patch k8s value based on type of network
+     */
+    updateNetworkName(neu) {
+      if (neu === MANAGEMENT_NETWORK) {
+        this.value.isPod = true;
+        this.value.macAddress = '';
+      } else {
+        this.value.isPod = false;
+      }
+
+      this.$set(this, 'isMasquerade', this.value.isPod);
+
+      if (this.value.isPod) {
+        this.value.type = 'masquerade';
+      } else {
+        this.value.type = 'bridge';
+      }
+      this.update();
+    },
+
+    update() {
+      this.$emit('update');
+    },
+
+    toggleAdvanced() {
+      this.showAdvanced = !this.showAdvanced;
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div
+        data-testid="input-hen-name"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.name')"
+          :value="value.name"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="value.name"
+            :label="t('harvester.fields.name')"
+            required
+            :mode="mode"
+            :disabled="isDisabled"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+
+      <div
+        data-testid="input-hen-model"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.model')"
+          :value="value.model"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.model"
+            :label="t('harvester.fields.model')"
+            :disabled="isDisabled"
+            :options="modelOption"
+            :mode="mode"
+            required
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+
+    <div class="row" :class="{'mb-20': !isMasquerade}">
+      <div
+        data-testid="input-hen-networkName"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.network')"
+          :value="value.networkName"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.networkName"
+            :label="t('harvester.fields.network')"
+            :options="allNetworkOption"
+            :mode="mode"
+            required
+            :disabled="isDisabled"
+            @input="updateNetworkName"
+          />
+        </InputOrDisplay>
+      </div>
+
+      <div
+        data-testid="input-hen-type"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.type')"
+          :value="value.type"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.type"
+            :label="t('harvester.fields.type')"
+            :options="typeOption"
+            :mode="mode"
+            required
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+
+    <div v-if="!isMasquerade && isSingle">
+      <div class="row mb-20">
+        <a role="button" @click="toggleAdvanced">
+          {{ showAdvanced ? t('harvester.generic.hideMore') : t('harvester.generic.showMore') }}
+        </a>
+      </div>
+
+      <div class="row">
+        <div
+          v-if="showAdvanced"
+          data-testid="input-hen-macAddress"
+          class="col span-6"
+        >
+          <InputOrDisplay
+            :name="t('harvester.fields.macAddress')"
+            :value="value.macAddress"
+            :mode="mode"
+          >
+            <LabeledInput
+              v-model="value.macAddress"
+              label-key="harvester.fields.macAddress"
+              :mode="mode"
+              :tooltip="t('harvester.virtualMachine.volume.macTip')"
+              @input="update"
+            />
+          </InputOrDisplay>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
new file mode 100644
index 00000000..91781a59
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
@@ -0,0 +1,165 @@
+<script>
+import InfoBox from '@shell/components/InfoBox';
+import Base from './base';
+
+import { NETWORK_ATTACHMENT } from '@shell/config/types';
+import { HCI as HCI_ANNOTATIONS } from '../../../config/labels-annotations';
+import { sortBy } from '@shell/utils/sort';
+import { clone } from '@shell/utils/object';
+import { randomStr } from '@shell/utils/string';
+import { removeObject } from '@shell/utils/array';
+import { _VIEW } from '@shell/config/query-params';
+
+export default {
+  components: { InfoBox, Base },
+
+  props: {
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    isSingle: {
+      type:    Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      rows:    this.addKeyId(clone(this.value)),
+      nameIdx: 1
+    };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    networkOption() {
+      const choices = this.$store.getters['harvester/all'](NETWORK_ATTACHMENT).filter((row) => {
+        return !row.metadata?.annotations?.[HCI_ANNOTATIONS.STORAGE_NETWORK];
+      });
+
+      const out = sortBy(
+        choices.map((N) => {
+          const label = N.isNotReady ? `${ N.id } (${ this.t('generic.notReady') })` : N.id;
+
+          return {
+            label,
+            value:    N.id,
+            disabled: N.isNotReady,
+          };
+        }),
+        'label'
+      );
+
+      return out;
+    },
+  },
+
+  watch: {
+    value(neu) {
+      this.rows = neu;
+    },
+  },
+
+  methods: {
+    add(type) {
+      const name = this.generateName();
+
+      const neu = {
+        name,
+        networkName: '',
+        model:       'virtio',
+        type:        'bridge',
+        newCreateId: randomStr(10),
+        rowKeyId:    randomStr(10)
+      };
+
+      this.rows.push(neu);
+      this.update();
+    },
+
+    remove(vol) {
+      removeObject(this.rows, vol);
+      this.update();
+    },
+
+    addKeyId(row) {
+      return row.map((R) => {
+        return {
+          ...R,
+          rowKeyId: randomStr(10)
+        };
+      });
+    },
+
+    generateName() {
+      let name = '';
+      let hasUsed = true;
+
+      while (hasUsed) {
+        name = `nic-${ this.nameIdx }`;
+        hasUsed = this.rows.find( O => O.name === name);
+        this.nameIdx++;
+      }
+
+      return name;
+    },
+
+    update() {
+      this.$emit('input', this.rows);
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <InfoBox v-for="(row, i) in rows" :key="i" class="infoBox">
+      <button v-if="!isView" type="button" class="role-link remove-vol" @click="remove(row)">
+        <i class="icon icon-x" />
+      </button>
+
+      <h3> {{ t('harvester.virtualMachine.network.title') }} </h3>
+
+      <Base
+        :key="rows[i].rowKeyId"
+        v-model="rows[i]"
+        :rows="rows"
+        :mode="mode"
+        :is-single="isSingle"
+        :network-option="networkOption"
+        @update="update"
+      />
+    </InfoBox>
+
+    <button v-if="!isView" type="button" class="btn btn-sm bg-primary" @click="add">
+      {{ t('harvester.virtualMachine.network.addNetwork') }}
+    </button>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.infoBox{
+  position: relative;
+}
+
+.remove-vol {
+  position: absolute;
+  top: 10px;
+  right: 16px;
+  padding:0px;
+  max-height: 28px;
+  min-height: 28px;
+}
+</style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/CompatibilityMatrix.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/CompatibilityMatrix.vue
new file mode 100644
index 00000000..22c757e1
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/CompatibilityMatrix.vue
@@ -0,0 +1,157 @@
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    /**
+     * deviceId/vendorId is unique per type of device - there may be multiple pciDevice CRD objects for a given device
+     * {
+     *  [deviceId/vendorId]: {
+     *      nodes: array of devicecrd.status.nodeName's for given device,
+     *      deviceCRDs: array of all instances (pciDevice CRD) of given device
+     *      }
+     * }
+     */
+    enabledDevices: {
+      type:     Array,
+      required: true
+    },
+    /**
+ * {
+ *  [node name]: [devices]
+ * }
+ */
+    devicesByNode: {
+      type:     Object,
+      required: true
+    },
+
+    /**
+ * {
+ *  [deviceCRD.status.resourceName]: {
+ *      count: number of this device in use by other vms
+ *      usedBy: [names of all vms using this device]
+ *    }
+ * }
+ */
+
+    devicesInUse: {
+      type:    Object,
+      default: () => {}
+    }
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    allNodeNames() {
+      return Object.keys(this.devicesByNode);
+    },
+
+    allDeviceIds() {
+      return Object.keys(this.uniqueDevices);
+    }
+  },
+
+  methods: {
+    nodeNameFromId(id) {
+      return this.devicesByNode[id]?.name;
+    },
+
+    nodeHasDevice(nodeName, deviceCRD) {
+      return deviceCRD.status.nodeName === nodeName;
+    },
+
+    noneAvailable(deviceCRD) {
+      const name = deviceCRD.metadata?.name;
+
+      return !!this.devicesInUse[name];
+    },
+
+    deviceTooltip(deviceCRD) {
+      return `${ deviceCRD?.status?.resourceName }<br/>${ deviceCRD?.status?.description }`;
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="compat-matrix">
+    <div class="device-col node-names">
+      <div class="blank-corner">
+        <div class="text-right">
+          {{ t('harvester.pci.matrixDeviceClaimName') }}
+        </div>
+        <div>{{ t('harvester.pci.matrixHostName') }}</div>
+      </div>
+      <div v-for="nodeName in allNodeNames" :key="nodeName" class="node-label">
+        <span>  {{ nodeName }}</span>
+      </div>
+    </div>
+    <div v-for="deviceCRD in enabledDevices" :key="deviceCRD.metadata.name" class="device-col">
+      <div v-clean-tooltip="deviceTooltip(deviceCRD)" class="compat-cell device-label" :class="{'text-muted': noneAvailable(deviceCRD)}">
+        {{ deviceCRD.metadata.name }}
+      </div>
+      <div
+        v-for="nodeName in allNodeNames"
+        :key="nodeName"
+        class="compat-cell"
+        :class="{'has-device': nodeHasDevice(nodeName, deviceCRD)}"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang='scss'>
+.compat-matrix {
+    display: flex;
+}
+
+.device-col {
+    display: flex;
+    flex-direction: column;
+
+    border-right: 1px solid var(--border);
+
+    &>*{
+        border-bottom: 1px solid var(--border);
+    }
+}
+
+.compat-cell {
+    flex-basis: 1em;
+    padding: 0px 10px 0px 10px;
+
+    &.has-device {
+        background-color: var(--info-banner-bg);
+    }
+}
+
+.node-label, .device-label {
+    display: flex;
+    align-items: center;
+    color: var(--input-label);
+}
+
+.node-label{
+    padding: 0 10px;
+    justify-content: center;
+}
+
+.node-label, .device-label, .compat-cell, .blank-corner {
+    flex-basis: calc(2em + 10px);
+}
+
+.blank-corner {
+  background: linear-gradient(
+              to top right,
+              #fff 0%,
+              #fff calc(50% - 1px),
+                var(--body-text) 50%,
+              #fff calc(50% + 1px),
+              #fff 100%
+           );
+
+  DIV.text-right {
+    padding-left: 80px;
+  }
+}
+</style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/DeviceList.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/DeviceList.vue
new file mode 100644
index 00000000..24c437d5
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/DeviceList.vue
@@ -0,0 +1,189 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import FilterBySriov from '../../../components/FilterBySriov';
+import { HCI } from '../../../types';
+import { STATE, SIMPLE_NAME } from '@shell/config/table-headers';
+import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
+import { allHash } from '@shell/utils/promise';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+
+export default {
+  name: 'ListPciDevices',
+
+  components: { ResourceTable, FilterBySriov },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+
+    devices: {
+      type:     Array,
+      required: true,
+    },
+
+  },
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const _hash = {
+      pciclaims: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.PCI_CLAIM }),
+      sriovs:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SR_IOV }),
+    };
+
+    await allHash(_hash);
+  },
+
+  data() {
+    const isSingleProduct = this.$store.getters['isSingleProduct'];
+    const headers = [
+      { ...STATE },
+      SIMPLE_NAME,
+      {
+        name:     'description',
+        labelKey: 'tableHeaders.description',
+        value:    'status.description',
+        sort:     ['status.description']
+      },
+      {
+        name:     'node',
+        labelKey: 'tableHeaders.node',
+        value:    'status.nodeName',
+        sort:     ['status.nodeName']
+      },
+      {
+        name:  'address',
+        label: 'Address',
+        value: 'status.address',
+        sort:  ['status.address']
+      },
+      {
+        name:  'vendorid',
+        label: 'Vendor ID',
+        value: 'status.vendorId',
+        sort:  ['status.vendorId', 'status.deviceId']
+      },
+      {
+        name:  'deviceid',
+        label: 'Device ID',
+        value: 'status.deviceId',
+        sort:  ['status.deviceId', 'status.vendorId']
+      },
+
+    ];
+
+    if (!isSingleProduct) {
+      headers.push( {
+        name:  'claimed',
+        label: 'Claimed By',
+        value: 'passthroughClaim.userName',
+        sort:  ['passthroughClaim.userName'],
+
+      });
+    }
+
+    return {
+      headers,
+      rows:        [],
+      parentSriov: null,
+      filterRows:  []
+    };
+  },
+
+  watch: {
+    devices: {
+      handler(v) {
+        this.rows = v;
+        this.filterRows = this.rows;
+      },
+      immediate: true,
+    },
+  },
+
+  computed: {
+    parentSriovOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const allSriovs = this.$store.getters[`${ inStore }/all`](HCI.SR_IOV) || [];
+
+      return allSriovs.map((sriov) => {
+        return sriov.id;
+      });
+    },
+    parentSriovLabel() {
+      return HCI_ANNOTATIONS.PARENT_SRIOV;
+    }
+  },
+
+  methods: {
+    enableGroup(rows = []) {
+      const row = rows[0];
+
+      if (row) {
+        row.enablePassthroughBulk(rows);
+      }
+    },
+    disableGroup(rows = []) {
+      rows.forEach((row) => {
+        if (row.passthroughClaim) {
+          row.disablePassthrough();
+        }
+      });
+    },
+    groupIsAllEnabled(rows = []) {
+      return !rows.find(device => !device.passthroughClaim);
+    },
+
+    changeRows(filterRows, parentSriov) {
+      this.$set(this, 'filterRows', filterRows);
+      this.$set(this, 'parentSriov', parentSriov);
+    },
+
+    sortGenerationFn() {
+      let base = defaultTableSortGenerationFn(this.schema, this.$store);
+
+      if (this.parentSriov) {
+        base += this.parentSriov;
+      }
+
+      return base;
+    },
+  }
+};
+</script>
+
+<template>
+  <ResourceTable
+    :headers="headers"
+    :schema="schema"
+    :rows="filterRows"
+    :use-query-params-for-simple-filtering="true"
+    :sort-generation-fn="sortGenerationFn"
+    :rows-per-page="10"
+  >
+    <template #group-by="{group}">
+      <div :ref="group.key" v-trim-whitespace class="group-tab">
+        <button v-if="groupIsAllEnabled(group.rows)" type="button" class="btn btn-sm role-secondary mr-5" @click="e=>{disableGroup(group.rows); e.target.blur()}">
+          {{ t('harvester.pci.disableGroup') }}
+        </button>
+        <button v-else type="button" class="btn btn-sm role-secondary mr-5" @click="e=>{enableGroup(group.rows); e.target.blur()}">
+          {{ t('harvester.pci.enableGroup') }}
+        </button>
+        <span v-clean-html="group.key" />
+      </div>
+    </template>
+    <template #cell:claimed="{row}">
+      <span v-if="row.isEnabled">{{ row.claimedBy }}</span>
+      <span v-else class="text-muted">&mdash;</span>
+    </template>
+    <template #more-header-middle>
+      <FilterBySriov
+        ref="filterByParentSRIOV"
+        :parent-sriov-options="parentSriovOptions"
+        :parent-sriov-label="parentSriovLabel"
+        :label="t('harvester.sriov.parentSriov')"
+        :rows="rows"
+        @change-rows="changeRows"
+      />
+    </template>
+  </ResourceTable>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue
new file mode 100644
index 00000000..814e3f19
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue
@@ -0,0 +1,269 @@
+<script>
+import { _EDIT } from '@shell/config/query-params';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../../../types';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import Banner from '@components/Banner/Banner.vue';
+import CompatibilityMatrix from './CompatibilityMatrix';
+import DeviceList from './DeviceList';
+
+import remove from 'lodash/remove';
+import { get, set } from '@shell/utils/object';
+
+export default {
+  name:       'VirtualMachinePCIDevices',
+  components: {
+    LabeledSelect,
+    DeviceList,
+    CompatibilityMatrix,
+    Banner
+  },
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+    // spec.template.spec
+    value: {
+      type:    Object,
+      default: () => {}
+    },
+
+    vm: {
+      type:    Object,
+      default: () => {}
+    }
+  },
+
+  async fetch() {
+    const hash = {
+      // claims fetched here so synchronous pciDevice model property works
+      pciDevices: this.$store.dispatch('harvester/findAll', { type: HCI.PCI_DEVICE }),
+      claims:     this.$store.dispatch('harvester/findAll', { type: HCI.PCI_CLAIM }),
+      vms:        this.$store.dispatch(`harvester/findAll`, { type: HCI.VM })
+
+    };
+
+    const res = await allHash(hash);
+
+    for (const key in res) {
+      this[key] = res[key];
+    }
+
+    const selectedDevices = [];
+    const oldFormatDevices = [];
+
+    (this.value?.domain?.devices?.hostDevices || []).forEach(({ name, deviceName }) => {
+      const checkName = (deviceName || '').split('/')?.[1];
+
+      if (checkName && name.includes(checkName)) {
+        oldFormatDevices.push(name);
+      } else if (this.enabledDevices.find(device => device?.metadata?.name === name)) {
+        selectedDevices.push(name);
+      }
+    });
+
+    if (oldFormatDevices.length > 0) {
+      this.oldFormatDevices = oldFormatDevices;
+    } else {
+      this.selectedDevices = selectedDevices;
+    }
+  },
+
+  data() {
+    return {
+      pciDevices:       [],
+      claims:           [],
+      vms:              [],
+      selectedDevices:  [],
+      pciDeviceSchema:  this.$store.getters['harvester/schemaFor'](HCI.PCI_DEVICE),
+      showMatrix:       false,
+      oldFormatDevices: [],
+    };
+  },
+
+  watch: {
+    selectedDevices(neu) {
+      const formatted = neu.map((selectedDevice) => {
+        const deviceCRD = this.enabledDevices.find(device => device.metadata.name === selectedDevice);
+        const deviceName = deviceCRD?.status?.resourceName;
+
+        return {
+          deviceName,
+          name: deviceCRD?.metadata.name,
+        };
+      });
+
+      set(this.value.domain.devices, 'hostDevices', formatted);
+    }
+  },
+
+  computed: {
+    // user can only select devices for whcih pci passthrough is enabled/claimed by them - determined by finding the associated passthrough CRD
+    enabledDevices() {
+      return this.pciDevices.filter((device) => {
+        return device.isEnabled && device.claimedByMe;
+      }) || [];
+    },
+
+    // find devices in use by other VMs and sum the number of each device already in use
+    devicesInUse() {
+      const inUse = this.vms.reduce((inUse, vm) => {
+        // dont count devices in this vm as 'disabled' if they're just being used in the vm currently being edited
+        if (vm.metadata.name === this.vm?.metadata?.name) {
+          return inUse;
+        }
+        const devices = get(vm, 'spec.template.spec.domain.devices.hostDevices') || [];
+
+        devices.forEach((device) => {
+          inUse[device.name] = { usedBy: [vm.metadata.name] };
+        });
+
+        return inUse;
+      }, {});
+
+      return inUse;
+    },
+
+    devicesByNode() {
+      const out = {};
+
+      this.enabledDevices.forEach((deviceCRD) => {
+        const nodeName = deviceCRD.status?.nodeName;
+
+        if (!out[nodeName]) {
+          out[nodeName] = [deviceCRD];
+        } else {
+          out[nodeName].push(deviceCRD);
+        }
+      });
+
+      return out;
+    },
+
+    // determine which nodes contain all devices selected
+    compatibleNodes() {
+      const out = [...Object.keys(this.devicesByNode)];
+
+      this.selectedDevices.forEach((deviceUid) => {
+        remove(out, (nodeName) => {
+          const device = this.enabledDevices.find(deviceCRD => deviceCRD.metadata.name === deviceUid);
+
+          return device.status.nodeName !== nodeName;
+        });
+      });
+
+      return out;
+    },
+
+    // format an array of available devices for the dropdown
+    deviceOpts() {
+      const filteredOptions = this.enabledDevices.filter((deviceCRD) => {
+        if (this.selectedDevices.length > 0) {
+          const selectedDevice = this.enabledDevices.find(device => device.metadata.name === this.selectedDevices[0]);
+
+          return !this.devicesInUse[deviceCRD?.metadata.name] && deviceCRD.status.nodeName === selectedDevice.status.nodeName;
+        }
+
+        return !this.devicesInUse[deviceCRD?.metadata.name];
+      });
+
+      return filteredOptions.map((deviceCRD) => {
+        return {
+          value:        deviceCRD?.metadata.name,
+          label:        deviceCRD?.metadata.name,
+          displayLabel: deviceCRD?.status?.resourceName,
+        };
+      });
+    },
+
+    oldFormatDevicesHTML() {
+      return this.oldFormatDevices.map((device) => {
+        return `<li>${ device }</li>`;
+      }).join('');
+    },
+  },
+
+  methods: {
+    nodeNameFromUid(uid) {
+      for (const deviceUid in this.uniqueDevices) {
+        const nodes = this.uniqueDevices[deviceUid].nodes;
+        const thisNode = nodes.find(node => node.systemUUID === uid);
+
+        if (thisNode) {
+          return thisNode.name;
+        }
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="oldFormatDevices.length > 0"
+      class="row"
+    >
+      <div class="col span-12">
+        <Banner color="warning">
+          <p v-clean-html="t('harvester.pci.oldFormatDevices.help', {oldFormatDevicesHTML}, true)" />
+        </Banner>
+      </div>
+    </div>
+    <div v-else>
+      <div class="row">
+        <div class="col span-12">
+          <Banner color="info">
+            <t k="harvester.pci.howToUseDevice" />
+          </Banner>
+          <Banner v-if="selectedDevices.length > 0" color="info">
+            <t k="harvester.pci.deviceInTheSameHost" />
+          </Banner>
+        </div>
+      </div>
+      <template v-if="enabledDevices.length">
+        <div class="row">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="selectedDevices"
+              label="Available PCI Devices"
+              searchable
+              multiple
+              taggable
+              :options="deviceOpts"
+              :mode="mode"
+            >
+              <template #option="option">
+                <span>{{ option.value }} <span class="text-label">({{ option.displayLabel }})</span></span>
+              </template>
+            </LabeledSelect>
+          </div>
+        </div>
+        <div v-if="compatibleNodes.length && selectedDevices.length" class="row">
+          <div class="col span-12 text-muted">
+            Compatible hosts:
+            <!-- eslint-disable-next-line vue/no-parsing-error -->
+            <span v-for="(node, idx) in compatibleNodes" :key="node">{{ node }}{{ idx < compatibleNodes.length-1 ? ', ' : '' }}</span>
+          </div>
+        </div>
+        <div v-else-if="selectedDevices.length" class="text-error">
+          {{ t('harvester.pci.impossibleSelection') }}
+        </div>
+        <button type="button" class="btn btn-sm role-link pl-0" @click="e=>{showMatrix = !showMatrix; e.target.blur()}">
+          {{ showMatrix ? t('harvester.pci.hideCompatibility') : t('harvester.pci.showCompatibility') }}
+        </button>
+        <div v-if="showMatrix" class="row mt-20">
+          <div class="col span-12">
+            <CompatibilityMatrix :enabled-devices="enabledDevices" :devices-by-node="devicesByNode" :devices-in-use="devicesInUse" />
+          </div>
+        </div>
+      </template>
+      <div class="row mt-20">
+        <div class="col span-12">
+          <DeviceList :schema="pciDeviceSchema" :devices="pciDevices" @submit.prevent />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineReserved.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineReserved.vue
new file mode 100644
index 00000000..dd5c694b
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineReserved.vue
@@ -0,0 +1,50 @@
+<script>
+import UnitInput from '@shell/components/form/UnitInput';
+
+export default {
+  name:       'HarvesterReserved',
+  components: { UnitInput },
+
+  props: {
+    reservedMemory: {
+      type:    String,
+      default: null
+    },
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+  },
+
+  data() {
+    return { memory: this.reservedMemory };
+  },
+
+  watch: {
+    reservedMemory(memory) {
+      this.memory = memory;
+    },
+  },
+
+  methods: {
+    change() {
+      const { memory } = this;
+
+      this.$emit('updateReserved', { memory });
+    },
+  }
+};
+</script>
+
+<template>
+  <UnitInput
+    v-model="memory"
+    v-int-number
+    :label="t('harvester.virtualMachine.input.reservedMemory')"
+    :mode="mode"
+    :input-exponent="2"
+    :increment="1024"
+    :output-modifier="true"
+    @input="change"
+  />
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineSSHKey.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineSSHKey.vue
new file mode 100644
index 00000000..368acd91
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineSSHKey.vue
@@ -0,0 +1,285 @@
+<script>
+import { mapGetters } from 'vuex';
+import { randomStr } from '@shell/utils/string';
+
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ModalWithCard from '@shell/components/ModalWithCard';
+
+import { HCI } from '../../types';
+import { clone } from '@shell/utils/object';
+import { _VIEW } from '@shell/config/query-params';
+
+import { NAMESPACE } from '@shell/config/types';
+
+const _NEW = '_NEW';
+
+export default {
+  components: {
+    LabeledInput,
+    ModalWithCard,
+    LabeledSelect,
+  },
+
+  props: {
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+
+    disableCreate: {
+      type:    Boolean,
+      default: false
+    },
+
+    namespace: {
+      type:    String,
+      default: ''
+    },
+
+    createNamespace: {
+      type:    Boolean,
+      default: false,
+    },
+
+    searchable: {
+      type:    Boolean,
+      default: true,
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      checkedSsh: this.value,
+      publicKey:  '',
+      sshName:    '',
+      randomStr:  randomStr(5).toLowerCase(),
+      errors:     [],
+      isAll:      false,
+      checkAll:   false,
+      isOpen:     false,
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    schema() {
+      return this.$store.getters['harvester/schemaFor']( HCI.SSH );
+    },
+
+    isCreatable() {
+      if ( this.schema && !this.schema?.collectionMethods.find((x) => ['blocked-post', 'post'].includes(x.toLowerCase())) ) {
+        return false;
+      }
+
+      return true ;
+    },
+
+    sshOption() {
+      const out = this.$store.getters['harvester/all'](HCI.SSH).map( (O) => {
+        return {
+          label: O.id,
+          value: O.id
+        };
+      });
+
+      if (!(this.disableCreate || this.mode === _VIEW) && this.isCreatable) {
+        out.unshift({
+          label: this.t('harvester.virtualMachine.createSSHKey'),
+          value: _NEW,
+        });
+      }
+
+      return out;
+    },
+  },
+
+  watch: {
+    publicKey(neu) {
+      const trimNeu = neu.trim();
+      const splitSSH = trimNeu.split(/\s+/);
+
+      if (splitSSH.length === 3 && !this.sshName) {
+        const keyComment = splitSSH[2];
+
+        this.randomStr = randomStr(10).toLowerCase();
+        this.sshName = keyComment.includes('@') ? keyComment.split('@')[0] : keyComment;
+      }
+    },
+
+    value(neu) {
+      this.checkedSsh = neu;
+    },
+
+    checkedSsh(val, old) {
+      if ( val.includes(_NEW)) {
+        this.$set(this, 'checkedSsh', old);
+        this.update();
+        this.show();
+      }
+    }
+  },
+
+  methods: {
+    show() {
+      this.isOpen = true;
+    },
+
+    hide() {
+      this.isOpen = false;
+    },
+
+    async createNamespaceIfNeeded() {
+      if (!this.createNamespace || this.disableCreate) {
+        return;
+      }
+
+      const namespaces = await this.$store.dispatch('harvester/findAll', { type: NAMESPACE });
+
+      const exists = namespaces?.find((n) => n.name === this.namespace);
+
+      if (!exists) {
+        const ns = await this.$store.dispatch('harvester/createNamespace', { name: this.namespace }, { root: true });
+
+        ns.applyDefaults();
+        await ns.save();
+      }
+    },
+
+    async createSSHKey() {
+      const sshValue = await this.$store.dispatch('harvester/create', {
+        metadata: {
+          name:      this.sshName,
+          namespace: this.namespace
+        },
+        spec: { publicKey: this.publicKey },
+        type: HCI.SSH
+      });
+
+      const res = await sshValue.save();
+
+      if (res.id) {
+        this.checkedSsh.push(`${ this.namespace }/${ this.sshName }`);
+      }
+    },
+
+    async save(buttonCb) {
+      this.errors = [];
+
+      if (!this.sshName) {
+        const fieldName = this.t('harvester.virtualMachine.input.name');
+        const message = this.t('validation.required', { key: fieldName });
+
+        this.errors.push(message);
+      }
+
+      if (!this.publicKey) {
+        const fieldName = this.t('harvester.virtualMachine.input.sshKeyValue');
+        const message = this.t('validation.required', { key: fieldName });
+
+        this.errors.push(message);
+      }
+
+      if (this.sshName.length > 63) {
+        const message = this.t('harvester.validation.custom.tooLongName', { max: 63 });
+
+        this.errors.push(message);
+      }
+
+      if (this.errors.length > 0) {
+        buttonCb(false);
+
+        return;
+      }
+
+      try {
+        await this.createNamespaceIfNeeded();
+
+        await this.createSSHKey();
+
+        buttonCb(true);
+        this.cancel();
+      } catch (err) {
+        this.errors = [err.message];
+        buttonCb(false);
+      }
+    },
+
+    cancel() {
+      this.hide();
+      this.resetFields();
+    },
+
+    resetFields() {
+      this.sshName = '';
+      this.publicKey = '';
+      this.errors = [];
+    },
+
+    update() {
+      this.$emit('update:sshKey', clone(this.checkedSsh));
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <LabeledSelect
+      v-model="checkedSsh"
+      :label="t('harvester.virtualMachine.input.sshKey')"
+      :taggable="true"
+      :mode="mode"
+      :multiple="true"
+      :searchable="searchable"
+      :disabled="disabled"
+      :options="sshOption"
+      @input="update"
+    />
+
+    <ModalWithCard
+      v-if="isOpen"
+      :name="randomStr"
+      width="40%"
+      :errors="errors"
+      @finish="save"
+      @close="cancel"
+    >
+      <template #title>
+        {{ t('harvester.virtualMachine.sshTitle') }}
+      </template>
+
+      <template #content>
+        <LabeledInput
+          v-model="sshName"
+          :label="t('harvester.virtualMachine.input.name')"
+          class="mb-20"
+          required
+          @keydown.native.enter.prevent="()=>{}"
+        />
+
+        <LabeledInput
+          v-model="publicKey"
+          :label="t('harvester.virtualMachine.input.sshKeyValue')"
+          :min-height="160"
+          class="mb-20"
+          type="multiline"
+          required
+        />
+      </template>
+    </ModalWithCard>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVGpuDevices/VGpuDeviceList.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVGpuDevices/VGpuDeviceList.vue
new file mode 100644
index 00000000..2a288006
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVGpuDevices/VGpuDeviceList.vue
@@ -0,0 +1,129 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import FilterBySriov from '../../../components/FilterBySriov';
+import { HCI } from '../../../types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { STATE, SIMPLE_NAME } from '@shell/config/table-headers';
+import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
+import { allHash } from '@shell/utils/promise';
+
+export default {
+  name: 'VGpuDeviceList',
+
+  components: { ResourceTable, FilterBySriov },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+
+    devices: {
+      type:     Array,
+      required: true,
+    },
+
+  },
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const hash = { sriovgpus: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SR_IOVGPU_DEVICE }) };
+
+    await allHash(hash);
+  },
+
+  data() {
+    const headers = [
+      { ...STATE },
+      SIMPLE_NAME,
+      {
+        name:  'vGPUTypeName',
+        label: 'vGPU Type',
+        value: 'spec.vGPUTypeName',
+        sort:  ['spec.vGPUTypeName']
+      },
+      {
+        name:     'node',
+        labelKey: 'tableHeaders.node',
+        value:    'spec.nodeName',
+        sort:     ['spec.nodeName']
+      },
+      {
+        name:  'address',
+        label: 'Address',
+        value: 'spec.address',
+        sort:  ['spec.address']
+      },
+    ];
+
+    return {
+      headers,
+      rows:        [],
+      parentSriov: null,
+      filterRows:  []
+    };
+  },
+
+  watch: {
+    devices: {
+      handler(v) {
+        this.rows = v;
+        this.filterRows = this.rows;
+      },
+      immediate: true,
+    }
+  },
+
+  computed: {
+    parentSriovOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const allSriovs = this.$store.getters[`${ inStore }/all`](HCI.SR_IOVGPU_DEVICE) || [];
+
+      return allSriovs.map((sriov) => {
+        return sriov.id;
+      });
+    },
+    parentSriovLabel() {
+      return HCI_ANNOTATIONS.PARENT_SRIOV_GPU;
+    }
+  },
+
+  methods: {
+    changeRows(filterRows, parentSriov) {
+      this.$set(this, 'filterRows', filterRows);
+      this.$set(this, 'parentSriov', parentSriov);
+    },
+
+    sortGenerationFn() {
+      let base = defaultTableSortGenerationFn(this.schema, this.$store);
+
+      if (this.parentSriov) {
+        base += this.parentSriov;
+      }
+
+      return base;
+    },
+  }
+};
+</script>
+
+<template>
+  <ResourceTable
+    :headers="headers"
+    :schema="schema"
+    :rows="filterRows"
+    :use-query-params-for-simple-filtering="true"
+    :sort-generation-fn="sortGenerationFn"
+    :rows-per-page="10"
+  >
+    <template #more-header-middle>
+      <FilterBySriov
+        ref="filterByParentSRIOV"
+        :parent-sriov-options="parentSriovOptions"
+        :parent-sriov-label="parentSriovLabel"
+        :label="t('harvester.sriovgpu.parentSriov')"
+        :rows="rows"
+        @change-rows="changeRows"
+      />
+    </template>
+  </ResourceTable>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVGpuDevices/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVGpuDevices/index.vue
new file mode 100644
index 00000000..70c5c4fd
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVGpuDevices/index.vue
@@ -0,0 +1,203 @@
+<script>
+import { _EDIT } from '@shell/config/query-params';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../../../types';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import Banner from '@components/Banner/Banner.vue';
+import VGpuDeviceList from './VGpuDeviceList';
+
+import remove from 'lodash/remove';
+import { get, set } from '@shell/utils/object';
+
+export default {
+  name:       'VirtualMachinedevices',
+  components: {
+    Banner,
+    LabeledSelect,
+    VGpuDeviceList
+  },
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+
+    value: {
+      type:    Object,
+      default: () => {}
+    },
+
+    vm: {
+      type:    Object,
+      default: () => {}
+    }
+  },
+
+  async fetch() {
+    const hash = {
+      devices: this.$store.dispatch('harvester/findAll', { type: HCI.VGPU_DEVICE }),
+      vms:     this.$store.dispatch(`harvester/findAll`, { type: HCI.VM })
+    };
+
+    const res = await allHash(hash);
+
+    for (const key in res) {
+      this[key] = res[key];
+    }
+
+    (this.value?.domain?.devices?.gpus || []).forEach(({ name }) => {
+      if (this.enabledDevices.find(device => device?.metadata?.name === name)) {
+        this.selectedDevices.push(name);
+      }
+    });
+  },
+
+  data() {
+    return {
+      deviceSchema:    this.$store.getters['harvester/schemaFor'](HCI.VGPU_DEVICE),
+      devices:         [],
+      vms:             [],
+      selectedDevices: [],
+    };
+  },
+
+  watch: {
+    selectedDevices(neu) {
+      const formatted = neu.map((selectedDevice) => {
+        const deviceCRD = this.enabledDevices.find(device => device.metadata.name === selectedDevice);
+        const deviceName = `nvidia.com/${ deviceCRD?.status?.configureVGPUTypeName?.replace(/\s+/g, '_') }`;
+
+        return {
+          deviceName,
+          name: deviceCRD?.metadata.name,
+        };
+      });
+
+      set(this.value.domain.devices, 'gpus', formatted);
+    }
+  },
+
+  computed: {
+    enabledDevices() {
+      return this.devices.filter((device) => {
+        return device.isEnabled;
+      }) || [];
+    },
+
+    devicesInUse() {
+      const inUse = this.vms.reduce((inUse, vm) => {
+        if (vm.metadata.name === this.vm?.metadata?.name) {
+          return inUse;
+        }
+        const devices = get(vm, 'spec.template.spec.domain.devices.hostDevices') || [];
+
+        devices.forEach((device) => {
+          inUse[device.name] = { usedBy: [vm.metadata.name] };
+        });
+
+        return inUse;
+      }, {});
+
+      return inUse;
+    },
+
+    devicesByNode() {
+      const out = {};
+
+      this.enabledDevices.forEach((deviceCRD) => {
+        const nodeName = deviceCRD.spec?.nodeName;
+
+        if (!out[nodeName]) {
+          out[nodeName] = [deviceCRD];
+        } else {
+          out[nodeName].push(deviceCRD);
+        }
+      });
+
+      return out;
+    },
+
+    compatibleNodes() {
+      const out = [...Object.keys(this.devicesByNode)];
+
+      this.selectedDevices.forEach((deviceUid) => {
+        remove(out, (nodeName) => {
+          const device = this.enabledDevices.find(deviceCRD => deviceCRD.metadata.name === deviceUid);
+
+          return device.spec.nodeName !== nodeName;
+        });
+      });
+
+      return out;
+    },
+
+    deviceOpts() {
+      const filteredOptions = this.enabledDevices.filter((deviceCRD) => {
+        if (this.selectedDevices.length > 0) {
+          const selectedDevice = this.enabledDevices.find(device => device.metadata.name === this.selectedDevices[0]);
+
+          return !this.devicesInUse[deviceCRD?.metadata.name] && deviceCRD.spec.nodeName === selectedDevice.spec.nodeName;
+        }
+
+        return !this.devicesInUse[deviceCRD?.metadata.name];
+      });
+
+      return filteredOptions.map((deviceCRD) => {
+        return {
+          value: deviceCRD?.metadata.name,
+          label: deviceCRD?.metadata.name,
+        };
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-12">
+        <Banner color="info">
+          <t k="harvester.vgpu.howToUseDevice" />
+        </Banner>
+        <Banner v-if="selectedDevices.length > 0" color="info">
+          <t k="harvester.vgpu.deviceInTheSameHost" />
+        </Banner>
+      </div>
+    </div>
+    <template v-if="enabledDevices.length">
+      <div class="row">
+        <div class="col span-6">
+          <LabeledSelect
+            v-model="selectedDevices"
+            label="Available vGPU Devices"
+            searchable
+            multiple
+            taggable
+            :options="deviceOpts"
+            :mode="mode"
+          >
+            <template #option="option">
+              <span>{{ option.value }}</span>
+            </template>
+          </LabeledSelect>
+        </div>
+      </div>
+      <div v-if="compatibleNodes.length && selectedDevices.length" class="row">
+        <div class="col span-12 text-muted">
+          Compatible hosts:
+          <!-- eslint-disable-next-line vue/no-parsing-error -->
+          <span v-for="(node, idx) in compatibleNodes" :key="node">{{ node }}{{ idx < compatibleNodes.length-1 ? ', ' : '' }}</span>
+        </div>
+      </div>
+      <div v-else-if="selectedDevices.length" class="text-error">
+        {{ t('harvester.vgpu.impossibleSelection') }}
+      </div>
+    </template>
+    <div class="row mt-20">
+      <div class="col span-12">
+        <VGpuDeviceList :schema="deviceSchema" :devices="devices" @submit.prevent />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
new file mode 100644
index 00000000..2663ae92
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
@@ -0,0 +1,498 @@
+<script>
+import draggable from 'vuedraggable';
+import InfoBox from '@shell/components/InfoBox';
+import { Banner } from '@components/Banner';
+import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter';
+import UnitInput from '@shell/components/form/UnitInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ModalWithCard from '@shell/components/ModalWithCard';
+
+import { PVC, STORAGE_CLASS } from '@shell/config/types';
+import { HCI } from '../../../types';
+import { clone } from '@shell/utils/object';
+import { removeObject } from '@shell/utils/array';
+import { randomStr } from '@shell/utils/string';
+import { SOURCE_TYPE } from '../../../config/harvester-map';
+import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../../config/harvester';
+import { PLUGIN_DEVELOPER, DEV } from '@shell/store/prefs';
+
+export default {
+  components: {
+    Banner, BadgeStateFormatter, draggable, InfoBox, LabeledInput, UnitInput, LabeledSelect, ModalWithCard
+  },
+
+  props: {
+    vm: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    mode: {
+      type:    String,
+      default: _CREATE
+    },
+
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    namespace: {
+      type:    String,
+      default: null
+    },
+
+    existingVolumeDisabled: {
+      type:    Boolean,
+      default: false
+    },
+
+    validateRequired: {
+      type:    Boolean,
+      default: false
+    },
+
+    customVolumeMode: {
+      type:    String,
+      default: 'Block'
+    },
+
+    customAccessMode: {
+      type:    String,
+      default: 'ReadWriteMany'
+    },
+
+    resourceType: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  async fetch() {
+    await this.$store.dispatch('harvester/findAll', { type: PVC });
+  },
+
+  data() {
+    return {
+      SOURCE_TYPE,
+      rows:    clone(this.value),
+      nameIdx: 1,
+      vol:     null,
+      isOpen:  false,
+    };
+  },
+
+  computed: {
+    dev() {
+      try {
+        return this.$store.getters['prefs/get'](PLUGIN_DEVELOPER);
+      } catch {
+        return this.$store.getters['prefs/get'](DEV);
+      }
+    },
+
+    isVirtualType() {
+      return this.resourceType === HCI.VM;
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+
+    isCreate() {
+      return this.mode === _CREATE;
+    },
+
+    showVolumeTip() {
+      const imageName = this.getImageDisplayName(this.rows[0]?.image);
+
+      if (this.rows.length === 1 && this.rows[0].type === 'cd-rom' && /.iso$/i.test(imageName)) {
+        return true;
+      }
+
+      return false;
+    },
+
+    pvcs() {
+      return this.$store.getters['harvester/all'](PVC) || [];
+    },
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        const rows = neu.map((V) => {
+          if (!this.isCreate && V.source !== SOURCE_TYPE.CONTAINER && !V.newCreateId) {
+            V.to = {
+              name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-namespace-id`,
+              params: {
+                resource:  HCI.VOLUME,
+                namespace: this.namespace,
+                id:        V.realName
+              },
+              query: { mode: _EDIT }
+            };
+
+            V.pvc = this.pvcs.find((pvc) => pvc.metadata.name === V.realName);
+          }
+
+          return V;
+        });
+
+        this.$set(this, 'rows', rows);
+      },
+      deep:      true,
+      immediate: true,
+    },
+  },
+
+  methods: {
+    addVolume(type) {
+      const name = this.generateName();
+      const neu = {
+        id:          randomStr(5),
+        name,
+        source:      type,
+        size:        '10Gi',
+        type:        'disk',
+        accessMode:  this.customAccessMode,
+        volumeMode:  this.customVolumeMode,
+        volumeName:  '',
+        bus:         'virtio',
+        newCreateId: randomStr(10), // judge whether it is a disk that has been created
+      };
+
+      if (type === SOURCE_TYPE.NEW) {
+        const inStore = this.$store.getters['currentProduct'].inStore;
+        const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find( (O) => O.isDefault);
+
+        neu.storageClassName = defaultStorage?.metadata?.name || 'longhorn';
+      }
+
+      this.rows.push(neu);
+      this.update();
+    },
+
+    generateName() {
+      let name = '';
+      let hasName = true;
+
+      while (hasName) {
+        name = `disk-${ this.nameIdx }`;
+        hasName = this.rows.find((O) => O.name === name);
+        this.nameIdx++;
+      }
+
+      return name;
+    },
+
+    removeVolume(vol) {
+      this.vol = vol;
+      if (!vol.newCreateId && this.isEdit && this.isVirtualType) {
+        this.isOpen = true;
+      } else {
+        removeObject(this.rows, vol);
+        this.update();
+      }
+    },
+
+    unplugVolume(volume) {
+      this.vm.unplugVolume(volume.name);
+    },
+
+    componentFor(type) {
+      switch (type) {
+      case SOURCE_TYPE.NEW:
+        return require(`./type/volume.vue`).default;
+      case SOURCE_TYPE.IMAGE:
+        return require(`./type/vmImage.vue`).default;
+      case SOURCE_TYPE.ATTACH_VOLUME:
+        return require(`./type/existing.vue`).default;
+      case SOURCE_TYPE.CONTAINER:
+        return require(`./type/container.vue`).default;
+      }
+    },
+
+    headerFor(type) {
+      return {
+        [SOURCE_TYPE.NEW]:           this.$store.getters['i18n/t']('harvester.virtualMachine.volume.title.volume'),
+        [SOURCE_TYPE.IMAGE]:         this.$store.getters['i18n/t']('harvester.virtualMachine.volume.title.vmImage'),
+        [SOURCE_TYPE.ATTACH_VOLUME]: this.$store.getters['i18n/t']('harvester.virtualMachine.volume.title.existingVolume'),
+        [SOURCE_TYPE.CONTAINER]:     this.$store.getters['i18n/t']('harvester.virtualMachine.volume.title.container'),
+      }[type];
+    },
+
+    update() {
+      this.$emit('input', this.rows);
+    },
+
+    deleteVolume() {
+      removeObject(this.rows, this.vol);
+      this.update();
+      this.cancel();
+    },
+
+    cancel() {
+      this.isOpen = false;
+    },
+
+    changeSort(idx, type) {
+      // true: down, false: up
+      this.rows.splice(type ? idx : idx - 1, 1, ...this.rows.splice(type ? idx + 1 : idx, 1, this.rows[type ? idx : idx - 1]));
+      this.update();
+    },
+
+    getImageDisplayName(id) {
+      return this.$store.getters['harvester/all'](HCI.IMAGE).find((image) => image.id === id)?.spec?.displayName;
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="!isView"
+      color="info"
+      label-key="harvester.virtualMachine.volume.dragTip"
+    />
+    <draggable
+      v-model="rows"
+      :disabled="isView"
+      @end="update"
+    >
+      <transition-group>
+        <div
+          v-for="(volume, i) in rows"
+          :key="volume.id"
+        >
+          <InfoBox class="box">
+            <button
+              v-if="!isView"
+              type="button"
+              class="role-link btn btn-sm remove"
+              @click="removeVolume(volume)"
+            >
+              <i class="icon icon-x" />
+            </button>
+            <button
+              v-if="volume.hotpluggable && isView"
+              type="button"
+              class="role-link btn remove"
+              @click="unplugVolume(volume)"
+            >
+              {{ t('harvester.virtualMachine.unplug.detachVolume') }}
+            </button>
+            <h3>
+              <span
+                v-if="volume.to && isVirtualType"
+                class="title"
+              >
+                <router-link :to="volume.to">
+                  {{ t('harvester.virtualMachine.volume.edit') }} {{ headerFor(volume.source) }}
+                </router-link>
+
+                <BadgeStateFormatter
+                  v-if="volume.pvc"
+                  class="ml-10 state"
+                  :arbitrary="true"
+                  :row="volume.pvc"
+                  :value="volume.pvc.state"
+                />
+                <a
+                  v-if="dev && !!volume.pvc && !!volume.pvc.resourceExternalLink"
+                  v-clean-tooltip="t(volume.pvc.resourceExternalLink.tipsKey || 'generic.resourceExternalLinkTips')"
+                  class="ml-5 resource-external"
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                  :href="volume.pvc.resourceExternalLink.url"
+                >
+                  <i class="icon icon-external-link" />
+                </a>
+              </span>
+
+              <span v-else>
+                {{ headerFor(volume.source) }}
+              </span>
+            </h3>
+            <div>
+              <component
+                :is="componentFor(volume.source)"
+                v-model="rows[i]"
+                :rows="rows"
+                :namespace="namespace"
+                :is-create="isCreate"
+                :is-edit="isEdit"
+                :is-view="isView"
+                :is-virtual-type="isVirtualType"
+                :mode="mode"
+                :idx="i"
+                :validate-required="validateRequired"
+                @update="update"
+              />
+            </div>
+
+            <div class="bootOrder">
+              <div
+                v-if="!isView"
+                class="mr-15"
+              >
+                <button
+                  :disabled="i === 0"
+                  class="btn btn-sm role-primary"
+                  @click.prevent="changeSort(i, false)"
+                >
+                  <i class="icon icon-lg icon-chevron-up"></i>
+                </button>
+
+                <button
+                  :disabled="i === rows.length -1"
+                  class="btn btn-sm role-primary"
+                  @click.prevent="changeSort(i, true)"
+                >
+                  <i class="icon icon-lg icon-chevron-down"></i>
+                </button>
+              </div>
+
+              <div class="text-muted">
+                bootOrder: {{ i + 1 }}
+              </div>
+            </div>
+
+            <Banner
+              v-if="volume.volumeStatus && !isCreate"
+              class="mt-15 volume-status"
+              color="warning"
+              :label="volume.volumeStatus"
+            />
+          </InfoBox>
+        </div>
+      </transition-group>
+    </draggable>
+    <Banner
+      v-if="showVolumeTip"
+      color="warning"
+      :label="t('harvester.virtualMachine.volume.volumeTip')"
+    />
+
+    <div v-if="!isView">
+      <button
+        type="button"
+        class="btn btn-sm bg-primary mr-15 mb-10"
+        :disabled="rows.length === 0"
+        @click="addVolume(SOURCE_TYPE.NEW)"
+      >
+        {{ t('harvester.virtualMachine.volume.addVolume') }}
+      </button>
+
+      <button
+        v-if="!existingVolumeDisabled"
+        type="button"
+        class="btn btn-sm bg-primary mr-15 mb-10"
+        @click="addVolume(SOURCE_TYPE.ATTACH_VOLUME)"
+      >
+        {{ t('harvester.virtualMachine.volume.addExistingVolume') }}
+      </button>
+
+      <button
+        type="button"
+        class="btn btn-sm bg-primary mr-15 mb-10"
+        @click="addVolume(SOURCE_TYPE.IMAGE)"
+      >
+        {{ t('harvester.virtualMachine.volume.addVmImage') }}
+      </button>
+
+      <button
+        type="button"
+        class="btn btn-sm bg-primary mb-10"
+        @click="addVolume(SOURCE_TYPE.CONTAINER)"
+      >
+        {{ t('harvester.virtualMachine.volume.addContainer') }}
+      </button>
+    </div>
+
+    <ModalWithCard
+      v-if="isOpen"
+      name="deleteTip"
+      :width="400"
+    >
+      <template #title>
+        {{ t('harvester.virtualMachine.volume.unmount.title') }}
+      </template>
+
+      <template #content>
+        <span>{{ t('harvester.virtualMachine.volume.unmount.message') }}</span>
+      </template>
+
+      <template #footer>
+        <div class="buttons">
+          <button
+            class="btn role-secondary mr-20"
+            @click.prevent="cancel"
+          >
+            {{ t('generic.no') }}
+          </button>
+
+          <button
+            class="btn bg-primary mr-20"
+            @click.prevent="deleteVolume"
+          >
+            {{ t('generic.yes') }}
+          </button>
+        </div>
+      </template>
+    </ModalWithCard>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .box {
+    position: relative;
+  }
+
+  .title {
+    display: flex;
+
+    .state {
+      font-size: 16px;
+    }
+  }
+
+  .remove {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 0px;
+  }
+
+  .bootOrder {
+    display: flex;
+    align-items: center;
+  }
+
+  .buttons {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .volume-status:first-letter {
+    text-transform: uppercase;
+  }
+
+  .resource-external {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditContainer.test.ts b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditContainer.test.ts
new file mode 100644
index 00000000..d9082fe7
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditContainer.test.ts
@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils';
+import HarvesterEditContainer from '../container.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: HarvesterEditContainer', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(HarvesterEditContainer, { propsData: { mode: _EDIT, value: {} } });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-hec-]');
+
+    expect(inputWraps).toHaveLength(4);
+  });
+
+  it.each([
+    'name',
+    'container',
+  ])('should emit an update on %p input', (field) => {
+    const wrapper = mount(HarvesterEditContainer, { propsData: { mode: _EDIT, value: {} } });
+    const input = wrapper.find(`[data-testid="input-hec-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  it.each([
+    'type',
+    'bus',
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(HarvesterEditContainer, { propsData: { mode: _EDIT, value: {} } });
+    const select = wrapper.find(`[data-testid="input-hec-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+});
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditExisting.test.ts b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditExisting.test.ts
new file mode 100644
index 00000000..a9857e28
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditExisting.test.ts
@@ -0,0 +1,103 @@
+import { mount } from '@vue/test-utils';
+import HarvesterEditExisting from '../existing.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: HarvesterEditExisting', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(HarvesterEditExisting, {
+      propsData: {
+        mode: _EDIT, value: {}, rows: []
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'harvester/all': () => [],
+            'i18n/t':        jest.fn()
+          }
+        }
+      }
+    });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-hee-]');
+
+    expect(inputWraps).toHaveLength(5);
+  });
+
+  it.each([
+    'name',
+  ])('should emit an update on %p input', (field) => {
+    const wrapper = mount(HarvesterEditExisting, {
+      propsData: {
+        mode: _EDIT, value: {}, rows: []
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'harvester/all': () => [],
+            'i18n/t':        jest.fn()
+          }
+        }
+      }
+    });
+    const input = wrapper.find(`[data-testid="input-hee-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  // TODO: #6179: Restore this test when the input is allowed to edit
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip.each([
+    'size',
+  ])('should emit an update on %p input and blur', (field) => {
+    const wrapper = mount(HarvesterEditExisting, {
+      propsData: {
+        mode: _EDIT, value: {}, rows: []
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'harvester/all': () => [],
+            'i18n/t':        jest.fn()
+          }
+        }
+      }
+    });
+    const input = wrapper.find(`[data-testid="input-hee-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+    input.trigger('blur');
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+
+  it.each([
+    'type',
+    'volumeName',
+    // 'bus',  // disabled
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(HarvesterEditExisting, {
+      propsData: {
+        mode: _EDIT, value: {}, rows: []
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'harvester/all': () => [],
+            'i18n/t':        jest.fn()
+          }
+        }
+      }
+    });
+    const select = wrapper.find(`[data-testid="input-hee-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+});
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditVMImage.test.ts b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditVMImage.test.ts
new file mode 100644
index 00000000..d1790fe4
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditVMImage.test.ts
@@ -0,0 +1,117 @@
+import { mount } from '@vue/test-utils';
+import HarvesterEditVMImage from '../vmImage.vue';
+import { _CREATE } from '@shell/config/query-params';
+
+describe('component: HarvesterEditVMImage', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(HarvesterEditVMImage, {
+      propsData: {
+        mode:             _CREATE,
+        isVirtualType:    false,
+        newCreateId:      '123',
+        validateRequired: true,
+        idx:              1
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+          }
+        },
+      }
+    });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-hevi-]');
+
+    expect(inputWraps).toHaveLength(5);
+  });
+
+  it.each([
+    'name',
+  ])('should emit an update on %p input', (field) => {
+    const wrapper = mount(HarvesterEditVMImage, {
+      propsData: {
+        mode:             _CREATE,
+        isVirtualType:    false,
+        newCreateId:      '123',
+        validateRequired: true,
+        idx:              1
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+          }
+        },
+      }
+    });
+    const input = wrapper.find(`[data-testid="input-hevi-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  it.each([
+    'size',
+  ])('should emit an update on %p input blur', (field) => {
+    const wrapper = mount(HarvesterEditVMImage, {
+      propsData: {
+        mode:             _CREATE,
+        isVirtualType:    false,
+        newCreateId:      '123',
+        validateRequired: true,
+        idx:              1
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+          }
+        },
+      }
+    });
+    const input = wrapper.find(`[data-testid="input-hevi-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+    input.trigger('blur');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  it.each([
+    'type',
+    'image',
+    'bus',
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(HarvesterEditVMImage, {
+      propsData: {
+        mode:             _CREATE,
+        isVirtualType:    false,
+        newCreateId:      '123',
+        validateRequired: true,
+        idx:              1
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+          }
+        },
+      }
+    });
+    const select = wrapper.find(`[data-testid="input-hevi-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+});
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditVolume.test.ts b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditVolume.test.ts
new file mode 100644
index 00000000..a44144ce
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditVolume.test.ts
@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import HarvesterEditVolume from '../volume.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: HarvesterEditVolume', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(HarvesterEditVolume, {
+      propsData: { validateRequired: true },
+      mocks:     {
+        $store: {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+            'i18n/exists':   jest.fn(),
+          }
+        },
+      }
+    });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-hev-]');
+
+    expect(inputWraps).toHaveLength(4);
+  });
+
+  it.each([
+    'name',
+    'size',
+  ])('should emit an update on %p input blur', (field) => {
+    const wrapper = mount(HarvesterEditVolume, {
+      propsData: { mode: _EDIT, validateRequired: true },
+      mocks:     {
+        $store: {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+            'i18n/exists':   jest.fn(),
+          }
+        },
+      }
+    });
+    const input = wrapper.find(`[data-testid="input-hev-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+    input.trigger('blur');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  it.each([
+    'type',
+    'bus'
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(HarvesterEditVolume, {
+      propsData: { mode: _EDIT, validateRequired: true },
+      mocks:     {
+        $store: {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+            'i18n/exists':   jest.fn(),
+          }
+        },
+      }
+    });
+    const select = wrapper.find(`[data-testid="input-hev-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+});
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/container.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/container.vue
new file mode 100644
index 00000000..4a992224
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/container.vue
@@ -0,0 +1,132 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import InputOrDisplay from '@shell/components/InputOrDisplay';
+import { VOLUME_TYPE, InterfaceOption } from '../../../../config/harvester-map';
+
+export default {
+  name:       'HarvesterEditContainer',
+  components: {
+    LabeledInput, LabeledSelect, InputOrDisplay
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+
+    value: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  data() {
+    return {
+      VOLUME_TYPE,
+      InterfaceOption
+    };
+  },
+
+  watch: {
+    'value.type'(neu) {
+      if (neu === 'cd-rom') {
+        this.$set(this.value, 'bus', 'sata');
+        this.update();
+      }
+    },
+  },
+
+  methods: {
+    update() {
+      this.$emit('update');
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div
+        data-testid="input-hec-name"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.name')"
+          :value="value.name"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="value.name"
+            :label="t('harvester.fields.name')"
+            required
+            :mode="mode"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+
+      <div
+        data-testid="input-hec-type"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.type')"
+          :value="value.type"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.type"
+            :label="t('harvester.fields.type')"
+            :options="VOLUME_TYPE"
+            :mode="mode"
+            required
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div
+        data-testid="input-hec-container"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.volume.dockerImage')"
+          :value="value.container"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="value.container"
+            :label="t('harvester.virtualMachine.volume.dockerImage')"
+            :mode="mode"
+            required
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+
+      <div
+        data-testid="input-hec-bus"
+        class="col span-3"
+      >
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.volume.bus')"
+          :value="value.bus"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.bus"
+            :label="t('harvester.virtualMachine.volume.bus')"
+            :options="InterfaceOption"
+            :mode="mode"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/existing.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/existing.vue
new file mode 100644
index 00000000..935697d6
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/existing.vue
@@ -0,0 +1,298 @@
+<script>
+import UnitInput from '@shell/components/form/UnitInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import InputOrDisplay from '@shell/components/InputOrDisplay';
+
+import { sortBy } from '@shell/utils/sort';
+import { PVC } from '@shell/config/types';
+import { HCI } from '../../../../types';
+import { _CREATE } from '@shell/config/query-params';
+import { VOLUME_TYPE, InterfaceOption } from '../../../../config/harvester-map';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+
+export default {
+  name:       'HarvesterEditExisting',
+  components: {
+    UnitInput, LabeledInput, LabeledSelect, InputOrDisplay
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: _CREATE
+    },
+
+    value: {
+      type:     Object,
+      required: true
+    },
+
+    isEdit: {
+      type:    Boolean,
+      default: false
+    },
+
+    namespace: {
+      type:    String,
+      default: null
+    },
+
+    idx: {
+      type:    Number,
+      default: 0
+    },
+
+    rows: {
+      type:     Array,
+      required: true
+    },
+  },
+
+  data() {
+    if (this.value.realName) {
+      this.value.volumeName = this.value.realName;
+    }
+
+    return {
+      VOLUME_TYPE,
+      InterfaceOption,
+      loading: false,
+    };
+  },
+
+  computed: {
+    isDisabled() {
+      return !this.value.newCreateId && this.isEdit;
+    },
+
+    allPVCs() {
+      const allPVCs = this.$store.getters['harvester/all'](PVC);
+
+      return allPVCs.filter((P) => {
+        return this.namespace ? this.namespace === P.metadata.namespace : true;
+      }) || [];
+    },
+
+    image() {
+      const imageResource = this.$store.getters['harvester/all'](HCI.IMAGE).find(I => I.id === this.pvcResource?.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_ID]);
+
+      if (!imageResource) {
+        return;
+      }
+
+      return `${ imageResource.metadata.namespace }/${ imageResource.spec.displayName }`;
+    },
+
+    pvcResource() {
+      return this.allPVCs.find( P => P.metadata.name === this.value.volumeName );
+    },
+
+    volumeOption() {
+      return sortBy(
+        this.allPVCs
+          .filter( (pvc) => {
+            let isAvailable = true;
+            let isBeingUsed = false;
+
+            this.rows.forEach( (O) => {
+              if (O.volumeName === pvc.metadata.name) {
+                isAvailable = false;
+              }
+            });
+
+            if (this.idx === 0 && !pvc.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_ID]) {
+              return false;
+            }
+
+            if (pvc.attachVM && isAvailable && pvc.attachVM?.id === this.vm?.id && this.isEdit) {
+              isBeingUsed = false;
+            } else if (pvc.attachVM) {
+              isBeingUsed = true;
+            }
+
+            return isAvailable && !isBeingUsed && pvc.isAvailable;
+          })
+          .map((pvc) => {
+            return {
+              label: pvc.metadata.name,
+              value: pvc.metadata.name
+            };
+          }),
+        'label'
+      );
+    },
+  },
+
+  watch: {
+    'value.volumeName'(neu) {
+      const pvcResource = this.allPVCs.find( P => P.metadata.name === neu);
+
+      if (!pvcResource) {
+        return;
+      }
+
+      this.value.accessModes = pvcResource.spec.accessModes[0];
+      this.value.size = pvcResource.spec.resources.requests.storage;
+      this.value.storageClassName = pvcResource.spec.storageClassName;
+      this.value.volumeMode = pvcResource.spec.volumeMode;
+    },
+
+    'value.type'(neu) {
+      if (neu === 'cd-rom') {
+        this.$set(this.value, 'bus', 'sata');
+        this.update();
+      }
+    },
+
+    pvcResource: {
+      handler(pvc) {
+        if (!this.value.volumeName && pvc?.metadata?.name) {
+          this.value.volumeName = pvc.metadata.name;
+        }
+      },
+      deep:      true,
+      immediate: true
+    },
+  },
+
+  methods: {
+    update() {
+      this.$emit('update');
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div
+        data-testid="input-hee-name"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.name')"
+          :value="value.name"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="value.name"
+            :label="t('harvester.fields.name')"
+            :mode="mode"
+            required
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+
+      <div
+        data-testid="input-hee-type"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.type')"
+          :value="value.type"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.type"
+            :label="t('harvester.fields.type')"
+            :mode="mode"
+            :options="VOLUME_TYPE"
+            required
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div
+        data-testid="input-hee-volumeName"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.volume')"
+          :value="value.volumeName"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.volumeName"
+            :disabled="isDisabled"
+            :label="t('harvester.fields.volume')"
+            :mode="mode"
+            :options="volumeOption"
+            required
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+
+      <div
+        data-testid="input-hee-size"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.size')"
+          :value="value.size"
+          :mode="mode"
+        >
+          <UnitInput
+            v-model="value.size"
+            :output-modifier="true"
+            :increment="1024"
+            :input-exponent="3"
+            :label="t('harvester.fields.size')"
+            :mode="mode"
+            :disabled="true"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div
+        v-if="!!image"
+        data-testid="input-hee-image"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.image')"
+          :value="image"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="image"
+            :label="t('harvester.fields.image')"
+            :mode="mode"
+            :disabled="true"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+
+      <div
+        data-testid="input-hee-bus"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.volume.bus')"
+          :value="value.bus"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.bus"
+            :label="t('harvester.virtualMachine.volume.bus')"
+            :mode="mode"
+            :options="InterfaceOption"
+            :disabled="true"
+            required
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/vmImage.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/vmImage.vue
new file mode 100644
index 00000000..3f5f9e09
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/vmImage.vue
@@ -0,0 +1,282 @@
+<script>
+import { findBy } from '@shell/utils/array';
+import UnitInput from '@shell/components/form/UnitInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import InputOrDisplay from '@shell/components/InputOrDisplay';
+import { PVC } from '@shell/config/types';
+import { HCI } from '../../../../types';
+import { formatSi, parseSi } from '@shell/utils/units';
+import { VOLUME_TYPE, InterfaceOption } from '../../../../config/harvester-map';
+
+export default {
+  name: 'HarvesterEditVMImage',
+
+  components: {
+    UnitInput, LabeledInput, LabeledSelect, InputOrDisplay
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    namespace: {
+      type:    String,
+      default: null
+    },
+
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+
+    idx: {
+      type:     Number,
+      required: true
+    },
+
+    isCreate: {
+      type:    Boolean,
+      default: true
+    },
+    isEdit: {
+      type:    Boolean,
+      default: false
+    },
+
+    validateRequired: {
+      type:     Boolean,
+      required: true
+    },
+
+    isVirtualType: {
+      type:    Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      VOLUME_TYPE,
+      InterfaceOption,
+      loading: false,
+      images:  [],
+    };
+  },
+
+  fetch() {
+    this.images = this.$store.getters['harvester/all'](HCI.IMAGE);
+  },
+
+  computed: {
+    imagesOption() {
+      return this.images.filter(c => c.isReady).sort((a, b) => a.creationTimestamp > b.creationTimestamp ? -1 : 1).map( (I) => {
+        return {
+          label: `${ I.metadata.namespace }/${ I.spec.displayName }`,
+          value: I.id
+        };
+      });
+    },
+
+    imageName() {
+      const image = this.imagesOption.find(I => I.value === this.value.image);
+
+      return image ? image.label : '-';
+    },
+
+    pvcsResource() {
+      const allPVCs = this.$store.getters['harvester/all'](PVC) || [];
+
+      return allPVCs.find((P) => {
+        return this.namespace ? P.id === `${ this.namespace }/${ this.value.volumeName }` : true;
+      });
+    }
+  },
+
+  watch: {
+    'value.type'(neu) {
+      if (neu === 'cd-rom') {
+        this.$set(this.value, 'bus', 'sata');
+        this.update();
+      }
+    },
+
+    'value.image'(neu) {
+      this.checkImageExists(neu);
+    },
+
+    imagesOption() {
+      this.checkImageExists(this.value.image);
+    },
+
+    pvcsResource: {
+      handler(pvc) {
+        if (pvc?.spec?.resources?.requests?.storage && this.isVirtualType) {
+          const parseValue = parseSi(pvc.spec.resources.requests.storage);
+
+          const formatSize = formatSi(parseValue, {
+            increment:   1024,
+            addSuffix:   false,
+            maxExponent: 3,
+            minExponent: 3,
+          });
+
+          this.value.size = `${ formatSize }Gi`;
+        }
+      },
+      deep:      true,
+      immediate: true
+    },
+  },
+
+  methods: {
+    update() {
+      this.$emit('update');
+    },
+
+    onImageChange() {
+      const imageResource = this.$store.getters['harvester/all'](HCI.IMAGE)?.find( I => this.value.image === I.id);
+
+      if (this.idx === 0) {
+        if (/iso$/i.test(imageResource?.imageSuffix)) {
+          this.$set(this.value, 'type', 'cd-rom');
+          this.$set(this.value, 'bus', 'sata');
+        } else {
+          this.$set(this.value, 'type', 'disk');
+          this.$set(this.value, 'bus', 'virtio');
+        }
+      }
+
+      this.update();
+    },
+
+    onOpen() {
+      this.images = this.$store.getters['harvester/all'](HCI.IMAGE);
+    },
+
+    checkImageExists(imageId) {
+      if (!!imageId && this.imagesOption.length > 0 && !findBy(this.imagesOption, 'value', imageId)) {
+        this.$store.dispatch('growl/error', {
+          title:   this.$store.getters['i18n/t']('harvester.vmTemplate.tips.notExistImage.title', { name: imageId }),
+          message: this.$store.getters['i18n/t']('harvester.vmTemplate.tips.notExistImage.message')
+        }, { root: true });
+
+        this.$set(this.value, 'image', '');
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div
+        data-testid="input-hevi-name"
+        class="col span-6"
+      >
+        <InputOrDisplay :name="t('harvester.fields.name')" :value="value.name" :mode="mode">
+          <LabeledInput
+            v-model="value.name"
+            :label="t('harvester.fields.name')"
+            required
+            :mode="mode"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+
+      <div
+        data-testid="input-hevi-type"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.type')"
+          :value="value.type"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.type"
+            :label="t('harvester.fields.type')"
+            :options="VOLUME_TYPE"
+            :mode="mode"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div
+        data-testid="input-hevi-image"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.image')"
+          :value="imageName"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.image"
+            :disabled="idx === 0 && !isCreate && !value.newCreateId && isVirtualType"
+            :label="t('harvester.fields.image')"
+            :options="imagesOption"
+            :mode="mode"
+            :searchable="true"
+            :required="validateRequired"
+            @input="onImageChange"
+          />
+        </InputOrDisplay>
+      </div>
+
+      <div
+        data-testid="input-hevi-size"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.size')"
+          :value="value.size"
+          :mode="mode"
+        >
+          <UnitInput
+            v-model="value.size"
+            v-int-number
+            :output-modifier="true"
+            :increment="1024"
+            :input-exponent="3"
+            :label="t('harvester.fields.size')"
+            :mode="mode"
+            :required="validateRequired"
+            suffix="GiB"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div
+        data-testid="input-hevi-bus"
+        class="col span-3"
+      >
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.volume.bus')"
+          :value="value.bus"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.bus"
+            :label="t('harvester.virtualMachine.volume.bus')"
+            :mode="mode"
+            :options="InterfaceOption"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/volume.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/volume.vue
new file mode 100644
index 00000000..8cd29f05
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/volume.vue
@@ -0,0 +1,230 @@
+<script>
+import Loading from '@shell/components/Loading';
+import UnitInput from '@shell/components/form/UnitInput';
+import InputOrDisplay from '@shell/components/InputOrDisplay';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+import { PVC, STORAGE_CLASS } from '@shell/config/types';
+import { formatSi, parseSi } from '@shell/utils/units';
+import { VOLUME_TYPE, InterfaceOption } from '../../../../config/harvester-map';
+
+export default {
+  name:       'HarvesterEditVolume',
+  components: {
+    InputOrDisplay, Loading, LabeledInput, LabeledSelect, UnitInput,
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+
+    isEdit: {
+      type:    Boolean,
+      default: false
+    },
+
+    namespace: {
+      type:    String,
+      default: null
+    },
+
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    validateRequired: {
+      type:     Boolean,
+      required: true
+    },
+
+    isVirtualType: {
+      type:    Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      VOLUME_TYPE,
+      InterfaceOption,
+      loading: false,
+    };
+  },
+
+  computed: {
+    pvcsResource() {
+      const allPVCs = this.$store.getters['harvester/all'](PVC) || [];
+
+      return allPVCs.find(P => P.id === `${ this.namespace }/${ this.value.volumeName }`);
+    },
+
+    isDisabled() {
+      return !this.value.newCreateId && this.isEdit && this.isVirtualType;
+    },
+
+    storageClassOptions() {
+      const storages = this.$store.getters[`harvester/all`](STORAGE_CLASS) || [];
+
+      const out = storages.filter(s => !s.parameters?.backingImage).map((s) => {
+        const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+
+        return {
+          label,
+          value: s.name,
+        };
+      }) || [];
+
+      return out;
+    },
+  },
+
+  watch: {
+    'value.type'(neu) {
+      if (neu === 'cd-rom') {
+        this.$set(this.value, 'bus', 'sata');
+        this.update();
+      }
+    },
+
+    pvcsResource: {
+      handler(pvc) {
+        if (pvc?.spec?.resources?.requests?.storage) {
+          const parseValue = parseSi(pvc.spec.resources.requests.storage);
+
+          const formatSize = formatSi(parseValue, {
+            increment:   1024,
+            addSuffix:   false,
+            maxExponent: 3,
+            minExponent: 3,
+          });
+
+          this.value.size = `${ formatSize }Gi`;
+        }
+      },
+      deep:      true,
+      immediate: true
+    },
+  },
+
+  methods: {
+    update() {
+      this.$emit('update');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Loading mode="relative" :loading="loading" />
+    <div class="row mb-20">
+      <div
+        class="col span-6"
+        data-testid="input-hev-name"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.name')"
+          :value="value.name"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="value.name"
+            :label="t('harvester.fields.name')"
+            :mode="mode"
+            required
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+
+      <div
+        class="col span-6"
+        data-testid="input-hev-type"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.type')"
+          :value="value.type"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.type"
+            :label="t('harvester.fields.type')"
+            :options="VOLUME_TYPE"
+            required
+            :mode="mode"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div
+        data-testid="input-hav-storage"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.storage.storageClass.label')"
+          :value="value.storageClassName"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.storageClassName"
+            :options="storageClassOptions"
+            :label="t('harvester.storage.storageClass.label')"
+            :mode="mode"
+            :disabled="isDisabled"
+            :required="validateRequired"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+      <div
+        class="col span-6"
+        data-testid="input-hev-size"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.size')"
+          :value="value.size"
+          :mode="mode"
+        >
+          <UnitInput
+            v-model="value.size"
+            v-int-number
+            :output-modifier="true"
+            :increment="1024"
+            :input-exponent="3"
+            :mode="mode"
+            :required="validateRequired"
+            :label="t('harvester.fields.size')"
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div
+        data-testid="input-hev-bus"
+        class="col span-3"
+      >
+        <InputOrDisplay :name="t('harvester.virtualMachine.volume.bus')" :value="value.bus" :mode="mode">
+          <LabeledSelect
+            v-model="value.bus"
+            :label="t('harvester.virtualMachine.volume.bus')"
+            :mode="mode"
+            :options="InterfaceOption"
+            required
+            @input="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
new file mode 100644
index 00000000..4ec22f88
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
@@ -0,0 +1,836 @@
+<script>
+import { isEqual } from 'lodash';
+import { mapGetters } from 'vuex';
+
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { Checkbox } from '@components/Form/Checkbox';
+import CruResource from '@shell/components/CruResource';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import UnitInput from '@shell/components/form/UnitInput';
+import Labels from '@shell/components/form/Labels';
+
+import Reserved from './VirtualMachineReserved';
+import SSHKey from './VirtualMachineSSHKey';
+import Volume from './VirtualMachineVolume';
+import Network from './VirtualMachineNetwork';
+import CpuMemory from './VirtualMachineCpuMemory';
+import CloudConfig from './VirtualMachineCloudConfig';
+import NodeScheduling from '@shell/components/form/NodeScheduling';
+import PodAffinity from '@shell/components/form/PodAffinity';
+import AccessCredentials from './VirtualMachineAccessCredentials';
+import PciDevices from './VirtualMachinePciDevices/index';
+import VirtualMachineVGpuDevices from './VirtualMachineVGpuDevices/index';
+import RestartVMDialog from '../../dialog/RestartVMDialog';
+import KeyValue from '@shell/components/form/KeyValue';
+
+import { clear } from '@shell/utils/array';
+import { clone } from '@shell/utils/object';
+import { HCI } from '../../types';
+import { RunStrategys } from '../../config/harvester-map';
+import { saferDump } from '@shell/utils/create-yaml';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { BEFORE_SAVE_HOOKS, AFTER_SAVE_HOOKS } from '@shell/mixins/child-hook';
+
+import VM_MIXIN from '../../mixins/harvester-vm';
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+import { parseVolumeClaimTemplates } from '@pkg/utils/vm';
+
+export default {
+  name: 'HarvesterEditVM',
+
+  components: {
+    Tab,
+    Tabbed,
+    Checkbox,
+    RadioGroup,
+    CruResource,
+    LabeledInput,
+    LabeledSelect,
+    NameNsDescription,
+    Volume,
+    SSHKey,
+    Network,
+    CpuMemory,
+    CloudConfig,
+    NodeScheduling,
+    PodAffinity,
+    AccessCredentials,
+    Reserved,
+    Labels,
+    PciDevices,
+    RestartVMDialog,
+    UnitInput,
+    VirtualMachineVGpuDevices,
+    KeyValue,
+  },
+
+  mixins: [CreateEditView, VM_MIXIN],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  data() {
+    const cloneVM = clone(this.value);
+    const isRestartImmediately = this.value.actualState === 'Running';
+
+    const hostname = this.value.spec.template.spec.hostname || '';
+
+    return {
+      cloneVM,
+      count:             2,
+      templateId:        '',
+      templateVersionId: '',
+      namePrefix:        '',
+      isSingle:          true,
+      useTemplate:       false,
+      isOpen:            false,
+      hostname,
+      isRestartImmediately,
+      RunStrategys,
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    machineTypeOptions() {
+      return [{
+        label: 'None',
+        value: ''
+      }, {
+        label: 'q35',
+        value: 'q35'
+      }];
+    },
+
+    templateOptions() {
+      return this.templates.map( (T) => {
+        const isReady = this.hasAvailableVersion(T.id);
+
+        return {
+          label:    T.id,
+          value:    T.id,
+          disabled: !isReady
+        };
+      });
+    },
+
+    versionOptions() {
+      const defaultVersion = this.curTemplateResource?.defaultVersion;
+
+      return this.versions.filter( (O) => O.templateId === this.templateId).map( (T) => {
+        const version = T.version;
+
+        const label = defaultVersion === version ? `${ version } (${ this.t('generic.default') })` : version;
+        const value = T.id;
+
+        return {
+          label,
+          value,
+          disabled: !T.isReady
+        };
+      });
+    },
+
+    curTemplateResource() {
+      return this.templates.find( (O) => O.id === this.templateId);
+    },
+
+    nameLabel() {
+      return this.isSingle ? 'harvester.virtualMachine.instance.single.nameLabel' : 'harvester.virtualMachine.instance.multiple.nameLabel';
+    },
+
+    hostnameLabel() {
+      return this.isSingle ? 'harvester.virtualMachine.instance.single.host.label' : 'harvester.virtualMachine.instance.multiple.host.label';
+    },
+
+    hostPlaceholder() {
+      return this.isSingle ? this.t('harvester.virtualMachine.instance.single.host.placeholder') : this.t('harvester.virtualMachine.instance.multiple.host.placeholder');
+    },
+
+    secretNamePrefix() {
+      return this.value?.metadata?.name;
+    },
+
+    isQemuInstalled() {
+      return this.value.isQemuInstalled;
+    },
+
+    hasRestartAction() {
+      return this.value.hasAction('restart');
+    },
+
+    hasStartAction() {
+      return this.value.hasAction('start');
+    },
+  },
+
+  watch: {
+    templateId: {
+      async handler(id, old) {
+        if (!id) {
+          return;
+        }
+        if (id !== old && !this.templateVersionId) {
+          const templates = await this.$store.dispatch('harvester/findAll', { type: HCI.VM_TEMPLATE });
+
+          this.templateVersionId = templates.find( (O) => O.id === id)?.spec?.defaultVersionId;
+        }
+      },
+      immediate: false
+    },
+
+    templateVersionId: {
+      async handler(id) {
+        if (!id) {
+          return;
+        }
+        const versions = await this.$store.dispatch('harvester/findAll', { type: HCI.VM_VERSION });
+        const curVersion = versions.find( (V) => V.id === id);
+        const cloneVersionVM = clone(curVersion.spec.vm);
+
+        delete cloneVersionVM.spec?.template?.spec?.accessCredentials;
+        delete cloneVersionVM.spec?.template?.metadata?.annotations?.[HCI_ANNOTATIONS.DYNAMIC_SSHKEYS_NAMES];
+        delete cloneVersionVM.spec?.template?.metadata?.annotations?.[HCI_ANNOTATIONS.DYNAMIC_SSHKEYS_USERS];
+
+        const claimTemplate = parseVolumeClaimTemplates(cloneVersionVM);
+
+        const deleteDataSource = claimTemplate.map((volume) => {
+          if (volume?.spec?.dataSource) {
+            delete volume.spec.dataSource;
+          }
+
+          return volume;
+        });
+
+        cloneVersionVM.metadata.annotations[HCI_ANNOTATIONS.VOLUME_CLAIM_TEMPLATE] = JSON.stringify(deleteDataSource);
+
+        this.getInitConfig({
+          value: cloneVersionVM, existUserData: true, fromTemplate: true
+        });
+        this.$set(this, 'hasCreateVolumes', []); // When using the template, all volume names need to be newly created
+      }
+    },
+
+    useTemplate(neu) {
+      if (neu === false) {
+        this.templateId = '';
+        this.templateVersionId = '';
+        this.value.applyDefaults();
+        this.getInitConfig({ value: this.value, init: this.isCreate });
+      }
+    },
+  },
+
+  created() {
+    this.registerAfterHook(async() => {
+      await this.restartVM();
+      const id = `${ this.value.metadata.namespace }/${ this.value.metadata.name }`;
+
+      const res = this.$store.getters['harvester/byId'](HCI.VM, id);
+
+      try {
+        await this.saveSecret(res);
+        await this.saveAccessCredentials(res);
+      } catch (e) {
+        this.errors.push(...exceptionToErrorsArray(e));
+      }
+
+      if (!this.errors.length && this.isSingle) {
+        this.done();
+      }
+    });
+
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  mounted() {
+    this.imageId = this.$route.query?.image || this.imageId;
+
+    const diskRows = this.getDiskRows(this.value);
+
+    this.$set(this, 'diskRows', diskRows);
+    const templateId = this.$route.query.templateId;
+    const templateVersionId = this.$route.query.versionId;
+
+    if (templateId && templateVersionId) {
+      this.templateId = templateId;
+      this.templateVersionId = templateVersionId;
+      this.useTemplate = true;
+    }
+  },
+
+  methods: {
+    saveVM(buttonCb) {
+      clear(this.errors);
+
+      if (this.isSingle) {
+        this.saveSingle(buttonCb);
+      } else {
+        this.saveMultiple(buttonCb);
+      }
+    },
+
+    async saveSingle(buttonCb) {
+      this.parseVM();
+      this.value.spec.template.spec.hostname = this.hostname ? this.hostname : this.value.metadata.name;
+      await this._save(this.value, buttonCb);
+      if (!this.errors.length) {
+        buttonCb(true);
+      } else {
+        buttonCb(false);
+      }
+    },
+
+    async saveMultiple(buttonCb) {
+      this.namePrefix = this.value.metadata.name || '';
+      const join = this.namePrefix.endsWith('-') ? '' : '-';
+      const baseHostname = this.hostname ? this.hostname : this.namePrefix;
+
+      if (this.count < 1) {
+        this.errors = [this.t('harvester.virtualMachine.instance.multiple.countTip')];
+        buttonCb(false);
+
+        return;
+      }
+
+      if (!this.value.metadata.name) {
+        this.errors.push(this.t('validation.required', { key: this.t('generic.name') }, true));
+        buttonCb(false);
+
+        return;
+      }
+
+      const cloneValue = clone(this.value);
+      const cloneSpec = clone(this.spec);
+
+      for (let i = 1; i <= this.count; i++) {
+        this.$set(this.value, 'spec', cloneValue.spec);
+        this.$set(this, 'spec', cloneSpec);
+        const suffix = i < 10 ? `0${ i }` : i;
+
+        this.value.cleanForNew();
+        this.value.metadata.name = `${ this.namePrefix }${ join }${ suffix }`;
+        this.$set(this.value.spec.template.spec, 'hostname', `${ baseHostname }${ join }${ suffix }`);
+        this.secretName = '';
+        await this.parseVM();
+        const basicValue = await this.$store.dispatch('harvester/clone', { resource: this.value });
+
+        await this._save(basicValue, buttonCb);
+
+        if (i === this.count && !this.errors.length) {
+          buttonCb(true);
+          this.done();
+        } else if (i === this.count) {
+          this.value.metadata.name = this.namePrefix;
+          buttonCb(false);
+        }
+      }
+    },
+
+    async _save(value, buttonCb) {
+      try {
+        await this.applyHooks(BEFORE_SAVE_HOOKS);
+        await value.save();
+        await this.applyHooks(AFTER_SAVE_HOOKS);
+      } catch (e) {
+        this.errors.push(...exceptionToErrorsArray(e));
+        buttonCb(false);
+      }
+    },
+
+    restartVM() {
+      if (this.mode !== 'edit') {
+        return;
+      }
+      if (!this.value.isRunning) {
+        return;
+      }
+      const cloneDeepNewVM = clone(this.value);
+
+      delete cloneDeepNewVM?.metadata;
+      delete this.cloneVM?.metadata;
+      delete this.cloneVM?.__clone;
+
+      const oldVM = JSON.parse(JSON.stringify(this.cloneVM));
+      const newVM = JSON.parse(JSON.stringify(cloneDeepNewVM));
+
+      if (isEqual(oldVM, newVM)) {
+        return;
+      }
+
+      return new Promise((resolve) => {
+        this.isOpen = true;
+        this.$refs.restartDialog.resolve = resolve;
+      });
+    },
+
+    updateBeforeSave() {
+      if (this.isSingle) {
+        if (!this.value.spec.template.spec.hostname) {
+          this.$set(this.value.spec.template.spec, 'hostname', this.value.metadata.name);
+        }
+      }
+
+      const errors = this.getAccessCredentialsValidation();
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      } else {
+        return Promise.resolve();
+      }
+    },
+
+    validateCount(count) {
+      if (count > 10) {
+        this.$set(this, 'count', 10);
+      }
+    },
+
+    updateTemplateId() {
+      this.templateVersionId = '';
+    },
+
+    onTabChanged({ tab }) {
+      if (tab.name === 'advanced') {
+        this.$refs.yamlEditor?.refresh();
+      }
+    },
+
+    hasAvailableVersion(templateId) {
+      let hasAvailableVersion = false;
+
+      this.versions.filter( (O) => O.templateId === templateId).find( (T) => {
+        if (T.isReady) {
+          hasAvailableVersion = true;
+        }
+      });
+
+      return hasAvailableVersion;
+    },
+
+    generateYaml() {
+      this.parseVM();
+      const out = saferDump(this.value);
+
+      return out;
+    },
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    v-if="spec"
+    id="vm"
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :can-yaml="isSingle ? true : false"
+    :errors="errors"
+    :generate-yaml="generateYaml"
+    :apply-hooks="applyHooks"
+    @finish="saveVM"
+  >
+    <RadioGroup
+      v-if="isCreate"
+      v-model="isSingle"
+      class="mb-20 vm-radio-group"
+      name="createInstanceMode"
+      :options="[true,false]"
+      :labels="[t('harvester.virtualMachine.instance.single.label'), t('harvester.virtualMachine.instance.multiple.label')]"
+    />
+
+    <NameNsDescription
+      v-model="value"
+      :mode="mode"
+      :has-extra="!isSingle"
+      :name-label="nameLabel"
+      :namespaced="true"
+      :name-placeholder="isSingle ? 'nameNsDescription.name.placeholder' : 'harvester.virtualMachine.instance.multiple.nameNsDescription'"
+      :extra-columns="isSingle ? [] :['type']"
+    >
+      <template v-slot:type>
+        <LabeledInput
+          v-if="!isSingle"
+          v-model.number="count"
+          v-int-number
+          :min="2"
+          type="number"
+          :label="t('harvester.virtualMachine.instance.multiple.count')"
+          required
+          @input="validateCount"
+        />
+      </template>
+    </NameNsDescription>
+
+    <Checkbox
+      v-if="isCreate"
+      v-model="useTemplate"
+      class="check mb-20"
+      type="checkbox"
+      label-key="harvester.virtualMachine.useTemplate.label"
+    />
+
+    <div
+      v-if="useTemplate"
+      class="row mb-20"
+    >
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="templateId"
+          label-key="harvester.virtualMachine.useTemplate.template.label"
+          :options="templateOptions"
+          @input="updateTemplateId"
+        />
+      </div>
+
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="templateVersionId"
+          label-key="harvester.virtualMachine.useTemplate.version.label"
+          :options="versionOptions"
+        />
+      </div>
+    </div>
+
+    <Tabbed
+      :side-tabs="true"
+      @changed="onTabChanged"
+    >
+      <Tab
+        name="basics"
+        :label="t('harvester.virtualMachine.detail.tabs.basics')"
+      >
+        <CpuMemory
+          :cpu="cpu"
+          :memory="memory"
+          :mode="mode"
+          @updateCpuMemory="updateCpuMemory"
+        />
+
+        <SSHKey
+          v-model="sshKey"
+          class="mb-20"
+          :create-namespace="true"
+          :namespace="value.metadata.namespace"
+          :mode="mode"
+          :disabled="isWindows"
+          @update:sshKey="updateSSHKey"
+          @register-after-hook="registerAfterHook"
+        />
+      </Tab>
+
+      <Tab
+        name="Volume"
+        :label="t('harvester.tab.volume')"
+        :weight="-1"
+      >
+        <Volume
+          v-model="diskRows"
+          :mode="mode"
+          :custom-volume-mode="customVolumeMode"
+          :namespace="value.metadata.namespace"
+          :resource-type="value.type"
+          :vm="value"
+          :validate-required="true"
+        />
+      </Tab>
+
+      <Tab
+        name="Network"
+        :label="t('harvester.tab.network')"
+        :weight="-2"
+      >
+        <Network
+          v-model="networkRows"
+          :mode="mode"
+          :is-single="isSingle"
+        />
+      </Tab>
+
+      <Tab
+        name="nodeScheduling"
+        :label="t('workload.container.titles.nodeScheduling')"
+        :weight="-3"
+      >
+        <template #default="{active}">
+          <NodeScheduling
+            :key="active"
+            :mode="mode"
+            :value="spec.template.spec"
+            :nodes="nodesIdOptions"
+          />
+        </template>
+      </Tab>
+
+      <Tab
+        :label="t('harvester.tab.vmScheduling')"
+        name="vmScheduling"
+        :weight="-4"
+      >
+        <template #default="{active}">
+          <PodAffinity
+            :key="active"
+            :mode="mode"
+            :value="spec.template.spec"
+            :nodes="nodes"
+            :all-namespaces-option-available="true"
+            :namespaces="filteredNamespaces"
+            :overwrite-labels="affinityLabels"
+          />
+        </template>
+      </Tab>
+
+      <Tab
+        v-if="enabledPCI"
+        :label="t('harvester.tab.pciDevices')"
+        name="pciDevices"
+        :weight="-5"
+      >
+        <PciDevices
+          :mode="mode"
+          :value="spec.template.spec"
+          :vm="value"
+        />
+      </Tab>
+
+      <Tab
+        v-if="enabledSriovgpu"
+        :label="t('harvester.tab.vGpuDevices')"
+        name="vGpuDevices"
+        :weight="-6"
+      >
+        <VirtualMachineVGpuDevices
+          :mode="mode"
+          :value="spec.template.spec"
+          :vm="value"
+        />
+      </Tab>
+
+      <Tab
+        v-if="isEdit"
+        :label="t('harvester.tab.accessCredentials')"
+        name="accessCredentials"
+        :weight="-7"
+      >
+        <AccessCredentials
+          v-model="accessCredentials"
+          :mode="mode"
+          :resource="value"
+          :is-qemu-installed="isQemuInstalled"
+        />
+      </Tab>
+
+      <Tab
+        name="advanced"
+        :label="t('harvester.tab.advanced')"
+        :weight="-8"
+      >
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="runStrategy"
+              label-key="harvester.virtualMachine.runStrategy"
+              :options="RunStrategys"
+              :mode="mode"
+            />
+          </div>
+
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="osType"
+              label-key="harvester.virtualMachine.osType"
+              :options="OS"
+              :disabled="!isCreate"
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <a
+            v-if="showAdvanced"
+            v-t="'harvester.generic.showMore'"
+            role="button"
+            @click="toggleAdvanced"
+          />
+          <a
+            v-else
+            v-t="'harvester.generic.showMore'"
+            role="button"
+            @click="toggleAdvanced"
+          />
+        </div>
+
+        <div
+          v-if="showAdvanced"
+          class="mb-20"
+        >
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model="hostname"
+                :label-key="hostnameLabel"
+                :placeholder="hostPlaceholder"
+                :mode="mode"
+              />
+            </div>
+
+            <div class="col span-6">
+              <LabeledSelect
+                v-model="machineType"
+                label-key="harvester.virtualMachine.input.MachineType"
+                :options="machineTypeOptions"
+                :mode="mode"
+              />
+            </div>
+          </div>
+
+          <div class="row mb-20">
+            <div class="col span-6">
+              <Reserved
+                :reserved-memory="reservedMemory"
+                :mode="mode"
+                @updateReserved="updateReserved"
+              />
+            </div>
+            <div class="col span-6">
+              <UnitInput
+                v-model="terminationGracePeriodSeconds"
+                :suffix="terminationGracePeriodSeconds == 1 ? 'Second' : 'Seconds'"
+                :label="t('harvester.virtualMachine.terminationGracePeriodSeconds.label')"
+                :mode="mode"
+                positive
+                @input="updateTerminationGracePeriodSeconds"
+              />
+            </div>
+          </div>
+        </div>
+
+        <CloudConfig
+          ref="yamlEditor"
+          :user-script="userScript"
+          :mode="mode"
+          :view-code="isWindows"
+          :namespace="value.metadata.namespace"
+          :network-script="networkScript"
+          @updateUserData="updateUserData"
+          @updateNetworkData="updateNetworkData"
+          @updateDataTemplateId="updateDataTemplateId"
+        />
+
+        <Checkbox
+          v-model="installUSBTablet"
+          class="check mt-20"
+          type="checkbox"
+          tooltip-key="harvester.virtualMachine.usbTip"
+          label-key="harvester.virtualMachine.enableUsb"
+          :mode="mode"
+        />
+
+        <Checkbox
+          v-model="installAgent"
+          class="check"
+          type="checkbox"
+          :disabled="isWindows"
+          label-key="harvester.virtualMachine.installAgent"
+          :mode="mode"
+          @input="updateAgent"
+        />
+
+        <Checkbox
+          v-model="tpmEnabled"
+          class="check"
+          type="checkbox"
+          label-key="harvester.virtualMachine.advancedOptions.tpm"
+          :mode="mode"
+        />
+
+        <Checkbox
+          v-model="efiEnabled"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.efiEnabled')"
+          :mode="mode"
+        />
+
+        <Checkbox
+          v-if="efiEnabled"
+          v-model="secureBoot"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.secureBoot')"
+          :mode="mode"
+        />
+      </Tab>
+
+      <Tab
+        name="instanceLabel"
+        :label="t('harvester.tab.instanceLabel')"
+        :weight="-99"
+      >
+        <Labels
+          :default-container-class="'labels-and-annotations-container'"
+          :value="value"
+          :mode="mode"
+          :display-side-by-side="false"
+          :show-annotations="false"
+          :show-label-title="false"
+        >
+          <template #labels="{toggler}">
+            <KeyValue
+              key="labels"
+              :value="value.instanceLabels"
+              :protected-keys="value.systemLabels || []"
+              :toggle-filter="toggler"
+              :add-label="t('labels.addLabel')"
+              :mode="mode"
+              :read-allowed="false"
+              :value-can-be-empty="true"
+              @input="value.setInstanceLabels($event)"
+            />
+          </template>
+        </Labels>
+      </Tab>
+    </Tabbed>
+
+    <RestartVMDialog
+      v-if="isOpen"
+      :vm="value"
+    />
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+#vm {
+  ::v-deep .vm-radio-group .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+
+  .restart {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .banner-right {
+    width: auto;
+    display: flex;
+    justify-items: center;
+  }
+}
+</style>
diff --git a/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/Priority.vue b/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/Priority.vue
new file mode 100644
index 00000000..883b8afd
--- /dev/null
+++ b/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/Priority.vue
@@ -0,0 +1,157 @@
+<script>
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { removeAt } from '@shell/utils/array';
+import { clone } from '@shell/utils/object';
+import { mapGetters } from 'vuex';
+import PriorityRow from './PriorityRow';
+
+export default {
+  components: { PriorityRow },
+
+  props: {
+    value: {
+      type:    Array,
+      default: null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    autoAddIfEmpty: {
+      type:    Boolean,
+      default: true,
+    }
+  },
+
+  data() {
+    const rows = clone(this.value || []);
+
+    return { rows };
+  },
+
+  computed: {
+    ...mapGetters(['isRancherInHarvester', 'isStandaloneHarvester']),
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    showAdd() {
+      return !this.isView;
+    },
+
+    showRemove() {
+      return !this.isView;
+    },
+
+    showProjectAndCluster() {
+      return !this.isStandaloneHarvester;
+    },
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 500);
+  },
+
+  methods: {
+    add() {
+      const defaultRow = { namespace: '*' };
+
+      if (!this.showProjectAndCluster) {
+        this.rows.push(defaultRow);
+      } else {
+        this.rows.push({
+          ...defaultRow,
+          project:      '*',
+          guestCluster: '*',
+        });
+      }
+
+      this.queueUpdate();
+    },
+
+    remove(idx) {
+      removeAt(this.rows, idx);
+      this.queueUpdate();
+    },
+
+    update() {
+      if ( this.isView ) {
+        return;
+      }
+
+      this.$emit('input', this.rows);
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h3>
+      {{ t('harvester.ipPool.scope.label') }}
+    </h3>
+    <div v-if="rows.length">
+      <div
+        class="pool-headers"
+        :class="{
+          'show-project-and-cluster': showProjectAndCluster,
+        }"
+      >
+        <span
+          v-if="showProjectAndCluster"
+          class="pool-project"
+        >
+          <t k="harvester.ipPool.project.label" />
+        </span>
+        <span class="pool-namespace">
+          <t k="harvester.ipPool.namespace.label" />
+        </span>
+        <span
+          v-if="showProjectAndCluster"
+          class="pool-guestCluster"
+        >
+          <t k="harvester.ipPool.guestCluster.label" />
+        </span>
+        <span
+          v-if="showRemove"
+          class="remove"
+        />
+      </div>
+      <div
+        v-for="(row, idx) in rows"
+        :key="idx"
+      >
+        <PriorityRow
+          :row="row"
+          :mode="mode"
+          :rows="rows"
+          :idx="idx"
+          @input="queueUpdate"
+          @remove="remove(idx)"
+        />
+      </div>
+    </div>
+    <div v-if="showAdd" class="footer">
+      <button type="button" class="btn role-tertiary add" @click="add()">
+        <t k="harvester.ipPool.scope.addLabel" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .pool-headers {
+    display: grid;
+    grid-column-gap: $column-gutter;
+    margin-bottom: 10px;
+    align-items: center;
+
+    grid-template-columns: 40% 40% 15%;
+
+    &.show-project-and-cluster {
+      grid-template-columns: 25% 25% 25% 15%;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/PriorityRow.vue b/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/PriorityRow.vue
new file mode 100644
index 00000000..1a88916d
--- /dev/null
+++ b/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/PriorityRow.vue
@@ -0,0 +1,241 @@
+<script>
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import Select from '@shell/components/form/Select';
+import { MANAGEMENT, CAPI } from '@shell/config/types';
+import { mapGetters } from 'vuex';
+import { HCI } from '@pkg/harvester/types';
+
+export default {
+  components: { Select },
+
+  props: {
+    row: {
+      type:    Object,
+      default: () => ({}),
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+
+    rows: {
+      type:    Array,
+      default: () => [],
+    },
+
+    idx: {
+      type:     Number,
+      required: true,
+    },
+  },
+
+  data() {
+    return { value: '' };
+  },
+
+  computed: {
+    ...mapGetters(['allNamespaces', 'currentCluster', 'isRancherInHarvester', 'isStandaloneHarvester']),
+
+    showProjectAndCluster() {
+      return !this.isStandaloneHarvester;
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    showRemove() {
+      return !this.isView;
+    },
+
+    filteredNamespaces() {
+      const namespaces = this.allNamespaces || [];
+
+      return namespaces.filter((namespace) => {
+        if (this.row.project === '*') {
+          return true;
+        } else if (this.row.project) {
+          return namespace.project?.id === this.row.project;
+        } else {
+          return true;
+        }
+      });
+    },
+
+    namespaceOptions() {
+      const out = (this.filteredNamespaces || []).map((namespace) => {
+        return {
+          label: namespace.metadata.name,
+          value: namespace.id,
+        };
+      });
+
+      return [{
+        label: this.t('generic.all'),
+        value: '*',
+      }, ...out];
+    },
+
+    guestClusterOptions() {
+      const clusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
+      const configs = this.$store.getters['management/all'](HCI.HARVESTER_CONFIG);
+      const selectedClusters = this.rows.map(row => row?.guestCluster);
+      const filteredNamespaces = this.filteredNamespaces.map(n => n.id);
+
+      const out = clusters.filter((c) => {
+        const machinePools = c.spec?.rkeConfig?.machinePools || [];
+        const machineConfigName = machinePools[0]?.machineConfigRef?.name;
+        const config = configs.find(c => c.id === `fleet-default/${ machineConfigName }`);
+
+        if (config) {
+          const vmNamespace = config?.vmNamespace;
+
+          if (this.row.namespace === '*' && filteredNamespaces.includes(vmNamespace)) {
+            return true;
+          } else {
+            return vmNamespace === this.row.namespace && !selectedClusters.includes(c.id);
+          }
+        } else {
+          return false;
+        }
+      }).map((cluster) => {
+        return {
+          label: cluster.nameDisplay,
+          value: cluster.metadata.name,
+        };
+      });
+
+      return [{
+        label: this.t('generic.none'),
+        value: '',
+      }, {
+        label: this.t('generic.all'),
+        value: '*',
+      }, ...out];
+    },
+
+    projectOptions() {
+      const projects = this.$store.getters['management/all'](MANAGEMENT.PROJECT);
+
+      const out = projects.filter(p => p.metadata.namespace === this.currentCluster.id).map((project) => {
+        return {
+          label: project.nameDisplay,
+          value: project.id,
+        };
+      });
+
+      return [{
+        label: this.t('generic.none'),
+        value: '',
+      }, {
+        label: this.t('generic.all'),
+        value: '*',
+      }, ...out];
+    },
+  },
+
+  methods: {
+    update() {
+      const { namespace, project, guestCluster } = this.row;
+
+      this.$emit('input', {
+        namespace,
+        project,
+        guestCluster,
+      });
+    },
+
+    remove() {
+      this.$emit('remove');
+    },
+  },
+
+  watch: {
+    'row.project'() {
+      if (this.row.namespace !== '*') {
+        this.row.namespace = '';
+      }
+
+      if (this.row.guestCluster !== '*' || this.row.guestCluster !== '') {
+        this.row.guestCluster = '';
+      }
+    },
+
+    'row.namespace'() {
+      if (this.row.guestCluster !== '*') {
+        this.row.guestCluster = '';
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="pool-row"
+    :class="{
+      'show-project-and-cluster': showProjectAndCluster,
+    }"
+  >
+    <div
+      v-if="showProjectAndCluster"
+      class="pool-project"
+    >
+      <span v-if="isView">
+        {{ row.project }}
+      </span>
+      <Select
+        v-else
+        v-model="row.project"
+        :options="projectOptions"
+        @input="update"
+      />
+    </div>
+    <div class="pool-namespace">
+      <span v-if="isView">
+        {{ row.namespace }}
+      </span>
+      <Select
+        v-else
+        v-model="row.namespace"
+        :options="namespaceOptions"
+        @input="update"
+      />
+    </div>
+    <div
+      v-if="showProjectAndCluster"
+      class="pool-guestCluster"
+    >
+      <span v-if="isView">
+        {{ row.guestCluster }}
+      </span>
+      <Select
+        v-else
+        v-model="row.guestCluster"
+        :options="guestClusterOptions"
+        @input="update"
+      />
+    </div>
+    <div v-if="showRemove" class="remove">
+      <button type="button" class="btn role-link" @click="remove(idx)">
+        <t k="generic.remove" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .pool-row {
+    display: grid;
+    grid-column-gap: $column-gutter;
+    margin-bottom: 10px;
+    align-items: center;
+
+    grid-template-columns: 40% 40% 15%;
+
+    &.show-project-and-cluster {
+      grid-template-columns: 25% 25% 25% 15%;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/Range.vue b/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/Range.vue
new file mode 100644
index 00000000..1b111010
--- /dev/null
+++ b/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/Range.vue
@@ -0,0 +1,233 @@
+<script>
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { removeAt } from '@shell/utils/array';
+
+export default {
+  props: {
+    value: {
+      type:    Array,
+      default: null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    specType: {
+      type:    String,
+      default: 'ClusterIP',
+    },
+    autoAddIfEmpty: {
+      type:    Boolean,
+      default: true,
+    }
+  },
+
+  data() {
+    const rows = (this.value || []).map((row) => {
+      let type = 'cidr';
+
+      if (row.rangeStart && row.rangeEnd) {
+        type = 'range';
+      }
+
+      return {
+        ...row,
+        type,
+      };
+    });
+
+    return { rows };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    showAdd() {
+      return !this.isView;
+    },
+
+    showRemove() {
+      return !this.isView;
+    },
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 500);
+  },
+
+  methods: {
+    addCIDR() {
+      this.rows.push({
+        subnet:  '',
+        gateway: '',
+        type:    'cidr',
+      });
+
+      this.queueUpdate();
+    },
+
+    addRange() {
+      this.rows.push({
+        subnet:     '',
+        gateway:    '',
+        rangeStart: '',
+        rangeEnd:   '',
+        type:       'range',
+      });
+
+      this.queueUpdate();
+    },
+
+    remove(idx) {
+      removeAt(this.rows, idx);
+      this.queueUpdate();
+    },
+
+    update() {
+      if ( this.isView ) {
+        return;
+      }
+
+      this.$emit('input', this.rows);
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="rows.length">
+      <div
+        v-for="(row, idx) in rows"
+        :key="idx"
+      >
+        <div
+          class="pool-headers"
+          :class="{
+            [row.type]: true,
+          }"
+        >
+          <span class="pool-subnet">
+            <t k="harvester.ipPool.subnet.label" />
+            <span class="text-error">
+              *
+            </span>
+          </span>
+          <span
+            class="pool-gateway"
+          >
+            <t k="harvester.ipPool.gateway.label" />
+          </span>
+          <span
+            v-if="row.type === 'range'"
+            class="pool-startIP"
+          >
+            <t k="harvester.ipPool.startIP.label" />
+          </span>
+          <span
+            v-if="row.type === 'range'"
+            class="pool-endIP"
+          >
+            <t k="harvester.ipPool.endIP.label" />
+          </span>
+          <span
+            v-if="showRemove"
+            class="remove"
+          />
+        </div>
+        <div
+          class="pool-row"
+          :class="{
+            [row.type]: true,
+          }"
+        >
+          <div class="pool-subnet">
+            <span v-if="isView">
+              {{ row.subnet }}
+            </span>
+            <input
+              v-else
+              v-model="row.subnet"
+              type="text"
+              @input="queueUpdate"
+            />
+          </div>
+          <div
+            class="pool-gateway"
+          >
+            <span v-if="isView">
+              {{ row.gateway }}
+            </span>
+            <input
+              v-else
+              v-model="row.gateway"
+              type="text"
+              @input="queueUpdate"
+            />
+          </div>
+          <div
+            v-if="row.type === 'range'"
+            class="pool-startIP"
+          >
+            <span v-if="isView">
+              {{ row.rangeStart }}
+            </span>
+            <input
+              v-else
+              v-model="row.rangeStart"
+              type="text"
+              @input="queueUpdate"
+            />
+          </div>
+          <div
+            v-if="row.type === 'range'"
+            class="pool-endIP"
+          >
+            <span v-if="isView">
+              {{ row.rangeEnd }}
+            </span>
+            <input
+              v-else
+              v-model="row.rangeEnd"
+              type="text"
+              @input="queueUpdate"
+            />
+          </div>
+          <div v-if="showRemove" class="remove">
+            <button type="button" class="btn role-link" @click="remove(idx)">
+              <t k="generic.remove" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="showAdd" class="footer">
+      <button type="button" class="btn role-tertiary add" @click="addCIDR()">
+        <t k="harvester.ipPool.cidr.addLabel" />
+      </button>
+      <button type="button" class="btn role-tertiary add" @click="addRange()">
+        <t k="harvester.ipPool.range.addLabel" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .pool-headers, .pool-row {
+    display: grid;
+    grid-column-gap: $column-gutter;
+    margin-bottom: 10px;
+    align-items: center;
+
+    &.cidr {
+      grid-template-columns: 40%+$column-gutter 40%+$column-gutter 15%;
+    }
+
+    &.range {
+      grid-template-columns: 20% 20% 20% 20% 15%;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/Selector.vue b/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/Selector.vue
new file mode 100644
index 00000000..53d3090e
--- /dev/null
+++ b/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/Selector.vue
@@ -0,0 +1,101 @@
+<script>
+import debounce from 'lodash/debounce';
+
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import Priority from './Priority';
+
+import { NETWORK_ATTACHMENT } from '@shell/config/types';
+import { _EDIT } from '@shell/config/query-params';
+
+export default {
+  components: {
+    LabeledSelect,
+    LabeledInput,
+    Priority,
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+  },
+
+  data() {
+    const selector = this.value || {
+      network:  '',
+      priority: 0,
+      scope:    [],
+    };
+
+    return { selector };
+  },
+
+  computed: {
+    networkOptions() {
+      const networks = this.$store.getters['harvester/all'](NETWORK_ATTACHMENT) || [];
+
+      return [{
+        label: this.t('generic.none'),
+        value: '',
+      }, ...networks.map(n => ({
+        label: n.id,
+        value: n.id,
+      }))];
+    },
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 500);
+  },
+
+  methods: {
+    update() {
+      if ( this.isView ) {
+        return;
+      }
+
+      this.$emit('input', this.selector);
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="selector.network"
+          :label="t('harvester.ipPool.network.label')"
+          :options="networkOptions"
+          :mode="mode"
+          @input="queueUpdate"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          v-model.number="selector.priority"
+          :label="t('harvester.ipPool.priority.label')"
+          :mode="mode"
+          type="number"
+          min="0"
+          @input="update"
+        />
+      </div>
+    </div>
+    <Priority
+      v-model="selector.scope"
+      class="col span-12"
+      :mode="mode"
+      @input="update"
+    />
+  </div>
+</template>
diff --git a/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/index.vue b/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/index.vue
new file mode 100644
index 00000000..982e0035
--- /dev/null
+++ b/pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/index.vue
@@ -0,0 +1,119 @@
+<script>
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { NETWORK_ATTACHMENT, CAPI } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
+import CruResource from '@shell/components/CruResource';
+import Range from './Range';
+import Selector from './Selector';
+import { HCI } from '@pkg/harvester/types';
+
+export default {
+  name: 'HarvesterIPPool',
+
+  components: {
+    NameNsDescription,
+    ResourceTabs,
+    Tab,
+    CruResource,
+    Range,
+    Selector,
+  },
+
+  mixins: [CreateEditView],
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      networks: this.$store.dispatch(`${ inStore }/findAll`, { type: NETWORK_ATTACHMENT }),
+      settings: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SETTING }),
+    };
+
+    if (this.$store.getters['management/schemaFor'](HCI.HARVESTER_CONFIG)) {
+      hash.harvesterConfigs = this.$store.dispatch(`management/findAll`, { type: HCI.HARVESTER_CONFIG });
+    }
+
+    if (this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER)) {
+      hash.rancherClusters = this.$store.dispatch(`management/findAll`, { type: CAPI.RANCHER_CLUSTER });
+    }
+
+    await allHash(hash);
+  },
+
+  data() {
+    return { errors: [] };
+  },
+
+  computed: {
+    yamlModifiers() {
+      const activelyRemove = [
+        'metadata.managedFields',
+        'metadata.relationships',
+        'metadata.state',
+        'links',
+        'type',
+        'id'
+      ];
+
+      if (this.isCreate) {
+        activelyRemove.push('status');
+      }
+
+      return { activelyRemove };
+    },
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    :yaml-modifiers="yamlModifiers"
+    @finish="save"
+  >
+    <NameNsDescription
+      :value="value"
+      :namespaced="false"
+      :mode="mode"
+    />
+
+    <ResourceTabs
+      class="mt-15"
+      :need-conditions="false"
+      :need-related="false"
+      :side-tabs="true"
+      :mode="mode"
+    >
+      <Tab
+        name="range"
+        :label="t('harvester.ipPool.tabs.range')"
+        :weight="98"
+        class="bordered-table"
+      >
+        <Range
+          v-model="value.spec.ranges"
+          class="col span-12"
+          :mode="mode"
+        />
+      </Tab>
+      <Tab
+        name="selector"
+        :label="t('harvester.ipPool.tabs.selector')"
+        :weight="97"
+        class="bordered-table"
+      >
+        <Selector
+          v-model="value.spec.selector"
+          :mode="mode"
+        />
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>
diff --git a/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/HealthCheck.vue b/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/HealthCheck.vue
new file mode 100644
index 00000000..307ace0e
--- /dev/null
+++ b/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/HealthCheck.vue
@@ -0,0 +1,127 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import RadioGroup from '@components/Form/Radio/RadioGroup';
+
+export default {
+  components: {
+    LabeledInput,
+    LabeledSelect,
+    RadioGroup,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    model: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return { healthCheckEnabled: !!this.value.port };
+  },
+
+  computed: {
+    portOptions() {
+      const ports = this.model?.spec?.listeners || [];
+
+      return ports.filter(p => p.port && p.protocol === 'TCP').map(p => p.backendPort) || [];
+    },
+  },
+
+  methods: {
+    onToggle(value) {
+      this.$emit('enabled', value);
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-6">
+        <RadioGroup
+          v-model="healthCheckEnabled"
+          :mode="mode"
+          name="healthCheckEnabled"
+          :labels="[t('generic.disabled'),t('generic.enabled')]"
+          :options="[false, true]"
+          :disabled="disabled"
+          @input="onToggle"
+        />
+      </div>
+    </div>
+    <div v-if="healthCheckEnabled">
+      <div class="row mt-10">
+        <div v-if="healthCheckEnabled" class="col span-6">
+          <LabeledSelect
+            v-model="value.port"
+            :mode="mode"
+            :options="portOptions"
+            required
+            :label="t('harvester.service.healthCheckPort.label')"
+            :disabled="disabled"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model.number="value.successThreshold"
+            :mode="mode"
+            type="number"
+            :label="t('harvester.service.healthCheckSuccessThreshold.label')"
+            :tooltip="t('harvester.service.healthCheckSuccessThreshold.description')"
+            :disabled="disabled"
+          />
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model.number="value.failureThreshold"
+            :mode="mode"
+            type="number"
+            :label="t('harvester.service.healthCheckFailureThreshold.label')"
+            :tooltip="t('harvester.service.healthCheckFailureThreshold.description')"
+            :disabled="disabled"
+          />
+        </div>
+        <div class="col span-6">
+          <LabeledInput
+            v-model.number="value.periodSeconds"
+            :mode="mode"
+            type="number"
+            :label="t('harvester.service.healthCheckPeriod.label')"
+            :disabled="disabled"
+          />
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model.number="value.timeoutSeconds"
+            :mode="mode"
+            type="number"
+            :label="t('harvester.service.healthCheckTimeout.label')"
+            :disabled="disabled"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/Listeners.vue b/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/Listeners.vue
new file mode 100644
index 00000000..744b979f
--- /dev/null
+++ b/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/Listeners.vue
@@ -0,0 +1,208 @@
+<script>
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { removeAt } from '@shell/utils/array';
+import { clone } from '@shell/utils/object';
+import Select from '@shell/components/form/Select';
+
+export default {
+  components: { Select },
+  props:      {
+    value: {
+      type:    Array,
+      default: null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    autoAddIfEmpty: {
+      type:    Boolean,
+      default: true,
+    }
+  },
+
+  data() {
+    const rows = clone(this.value || []);
+
+    return { rows };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    showAdd() {
+      return !this.isView;
+    },
+
+    showRemove() {
+      return !this.isView;
+    },
+
+    protocolOptions() {
+      return ['TCP', 'UDP'];
+    },
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 500);
+  },
+
+  mounted() {
+    if ( this.isView ) {
+      return;
+    }
+
+    if (this.autoAddIfEmpty && this.mode !== _EDIT && this?.rows.length < 1) {
+      // don't focus on mount because we'll pull focus from name/namespace input
+      this.add(false);
+    }
+  },
+
+  methods: {
+    add(focus = true) {
+      this.rows.push({
+        name:        '',
+        port:        null,
+        protocol:    'TCP',
+        backendPort: null,
+      });
+
+      this.queueUpdate();
+
+      if (this.rows.length > 0 && focus) {
+        this.$nextTick(() => {
+          const inputs = this.$refs['port-name'];
+
+          inputs[inputs.length - 1].focus();
+        });
+      }
+    },
+
+    remove(idx) {
+      removeAt(this.rows, idx);
+      this.queueUpdate();
+    },
+
+    update() {
+      if ( this.isView ) {
+        return;
+      }
+
+      this.$emit('input', this.rows);
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="rows.length">
+      <div
+        class="listener-headers"
+      >
+        <span class="listener-name">
+          <t k="harvester.loadBalancer.listeners.name.label" />
+        </span>
+        <span class="listener-protocol">
+          <t k="harvester.loadBalancer.listeners.protocol.label" />
+        </span>
+        <span class="listener-port">
+          <t k="harvester.loadBalancer.listeners.port.label" />
+          <span class="text-error">
+            *
+          </span>
+        </span>
+        <span class="listener-backendPort">
+          <t k="harvester.loadBalancer.listeners.backendPort.label" />
+          <span class="text-error">
+            *
+          </span>
+        </span>
+        <span
+          v-if="showRemove"
+          class="remove"
+        />
+      </div>
+      <div
+        v-for="(row, idx) in rows"
+        :key="idx"
+        class="listener-row"
+      >
+        <div class="port-name">
+          <span v-if="isView">
+            {{ row.name }}
+          </span>
+          <input
+            v-else
+            ref="port-name"
+            v-model.number="row.name"
+            type="text"
+            :placeholder="t('servicePorts.rules.name.placeholder')"
+            @input="queueUpdate"
+          />
+        </div>
+        <div class="port-protocol">
+          <span v-if="isView">
+            {{ row.protocol }}
+          </span>
+          <Select
+            v-else
+            v-model="row.protocol"
+            :options="protocolOptions"
+            @input="queueUpdate"
+          />
+        </div>
+        <div class="port">
+          <span v-if="isView">
+            {{ row.port }}
+          </span>
+          <input
+            v-else
+            ref="port"
+            v-model.number="row.port"
+            type="number"
+            min="1"
+            max="65535"
+            :placeholder="t('servicePorts.rules.listening.placeholder')"
+            @input="queueUpdate"
+          />
+        </div>
+        <div class="target-port">
+          <span v-if="isView">{{ row.backendPort }}</span>
+          <input
+            v-else
+            v-model.number="row.backendPort"
+            type="number"
+            min="1"
+            max="65535"
+            :placeholder="t('harvester.loadBalancer.listeners.backendPort.placeholder')"
+            @input="queueUpdate"
+          />
+        </div>
+        <div v-if="showRemove" class="remove">
+          <button type="button" class="btn role-link" @click="remove(idx)">
+            <t k="generic.remove" />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div v-if="showAdd" class="footer">
+      <button type="button" class="btn role-tertiary add" @click="add()">
+        <t k="generic.add" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .listener-headers, .listener-row{
+    display: grid;
+    grid-column-gap: $column-gutter;
+    margin-bottom: 10px;
+    align-items: center;
+    grid-template-columns: 35% 15% 15% 15% 15%;
+  }
+</style>
diff --git a/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/index.vue b/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/index.vue
new file mode 100644
index 00000000..62634720
--- /dev/null
+++ b/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/index.vue
@@ -0,0 +1,399 @@
+<script>
+import { throttle, isEmpty } from 'lodash';
+
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import Tab from '@shell/components/Tabbed/Tab';
+import CruResource from '@shell/components/CruResource';
+import KeyValue from '@shell/components/form/KeyValue';
+import Banner from '@components/Banner/Banner';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+import { MANAGEMENT, NAMESPACE } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
+import { matching } from '@shell/utils/selector';
+import { HCI } from '@pkg/harvester/types';
+
+import Listeners from './Listeners';
+import HealthCheck from './HealthCheck';
+
+const NAMESPACE_SELECTOR = 'loadbalancer.harvesterhci.io/namespace';
+const PROJECT_SELECTOR = 'loadbalancer.harvesterhci.io/project';
+
+export default {
+  name: 'HarvesterLoadBalancer',
+
+  components: {
+    NameNsDescription,
+    ResourceTabs,
+    LabeledSelect,
+    Tab,
+    Listeners,
+    HealthCheck,
+    CruResource,
+    KeyValue,
+    Banner,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      ipPools:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.IP_POOL }),
+      namespaces: this.$store.dispatch(`${ inStore }/findAll`, { type: NAMESPACE }),
+      vms:        this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM }),
+    };
+
+    if (this.$store.getters['management/schemaFor'](MANAGEMENT.PROJECT)) {
+      hash.projects = this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT });
+    }
+
+    await allHash(hash);
+
+    this.updateMatchingVMs();
+  },
+
+  data() {
+    const annotations = this.value.metadata.annotations || [];
+
+    if (!this.value.spec.healthCheck) {
+      this.value.spec.healthCheck = {};
+    }
+
+    const matchingVMs = {
+      matched: 0,
+      matches: [],
+      none:    true,
+      sample:  null,
+      total:   0,
+    };
+
+    return {
+      ipPool:            this.value.spec.ipPool,
+      projectSelector:   annotations[PROJECT_SELECTOR] || '',
+      namespaceSelector: annotations[NAMESPACE_SELECTOR] || '',
+      matchingVMs,
+    };
+  },
+
+  computed: {
+    ipamOption() {
+      return [{
+        label: this.t('harvester.loadBalancer.ipam.options.dhcp'),
+        value: 'dhcp',
+      }, {
+        label: this.t('harvester.loadBalancer.ipam.options.pool'),
+        value: 'pool',
+      }];
+    },
+
+    ipPoolOptions() {
+      const ipPools = this.$store.getters['harvester/all'](HCI.IP_POOL);
+
+      const out = ipPools.map(ipPool => ipPool.id);
+
+      return [{
+        label: this.t('harvester.loadBalancer.ipPool.options.none'),
+        value: '',
+      }, ...out];
+    },
+
+    projectOptions() {
+      const projects = this.$store.getters['harvester/all'](MANAGEMENT.PROJECT);
+
+      return projects.map(project => project.id);
+    },
+
+    namespaceOptions() {
+      const namespaces = this.$store.getters['harvester/all'](NAMESPACE);
+
+      return namespaces.map(n => n.id);
+    },
+
+    backendServerSelector: {
+      get() {
+        const out = {};
+
+        Object.keys(this.value.spec?.backendServerSelector || {}).map((key) => {
+          out[key] = (this.value.spec.backendServerSelector[key] || []).join(',') || '';
+        });
+
+        return out;
+      },
+
+      set(value) {
+        const backendServerSelector = {};
+
+        Object.keys(value).map((key) => {
+          backendServerSelector[key] = (value[key] || '').split(',');
+        });
+
+        this.$set(this.value.spec, 'backendServerSelector', backendServerSelector);
+      },
+    },
+
+    yamlModifiers() {
+      const activelyRemove = [
+        'metadata.managedFields',
+        'metadata.relationships',
+        'metadata.state',
+        'links',
+        'type',
+        'id'
+      ];
+
+      if (this.isCreate) {
+        activelyRemove.push('status');
+      }
+
+      return { activelyRemove };
+    },
+
+    healthCheckPortInUseWarning() {
+      const healthCheckPort = this.value?.spec?.healthCheck?.port;
+      const portInUse = this.value?.spec?.listeners?.find(l => l.backendPort === healthCheckPort);
+
+      if (healthCheckPort && portInUse) {
+        return this.t('harvester.loadBalancer.healthCheck.warning.portInUse', { port: portInUse.backendPort }, true);
+      }
+
+      return '';
+    }
+  },
+
+  methods: {
+    update() {
+      const { projectSelector, namespaceSelector } = this;
+
+      if (projectSelector) {
+        this.value.metadata.annotations[PROJECT_SELECTOR] = projectSelector;
+      }
+
+      if (namespaceSelector) {
+        this.value.metadata.annotations[NAMESPACE_SELECTOR] = namespaceSelector;
+      }
+    },
+
+    updateMatchingVMs: throttle(function() {
+      const backendServerSelector = this.value.spec.backendServerSelector;
+      const allVMs = this.$store.getters['harvester/all'](HCI.VM).filter(vm => vm.metadata.namespace === this.value.metadata.namespace);
+
+      if (isEmpty(backendServerSelector)) {
+        this.matchingVMs = {
+          matched: 0,
+          total:   allVMs.length,
+          none:    true,
+          sample:  null,
+        };
+      } else {
+        const match = matching(allVMs, backendServerSelector, 'spec.template.metadata.labels');
+
+        this.matchingVMs = {
+          matched: match.length,
+          total:   allVMs.length,
+          none:    match.length === 0,
+          sample:  match[0] ? match[0].nameDisplay : null,
+        };
+      }
+    }, 250, { leading: true }),
+
+    healthCheckEnabled(v) {
+      if (!v) {
+        this.value.spec.healthCheck = {};
+      }
+    }
+  },
+
+  watch: {
+    backendServerSelector:      'updateMatchingVMs',
+    'value.metadata.namespace': 'updateMatchingVMs',
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    :yaml-modifiers="yamlModifiers"
+    @finish="save"
+  >
+    <NameNsDescription
+      :value="value"
+      :namespaced="true"
+      :mode="mode"
+    />
+
+    <ResourceTabs
+      class="mt-15"
+      :need-conditions="false"
+      :need-related="false"
+      :side-tabs="true"
+      :mode="mode"
+    >
+      <Tab
+        name="basic"
+        :label="t('harvester.loadBalancer.tabs.basic')"
+        :weight="99"
+        class="bordered-table"
+      >
+        <div class="row">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="value.spec.ipam"
+              :label="t('harvester.loadBalancer.ipam.label')"
+              :options="ipamOption"
+              :mode="mode"
+            />
+          </div>
+          <div
+            v-if="value.spec.ipam === 'pool'"
+            class="col span-6"
+          >
+            <LabeledSelect
+              v-model="value.spec.ipPool"
+              :label="t('harvester.loadBalancer.ipPool.label')"
+              :options="ipPoolOptions"
+              :mode="mode"
+              @input="update"
+            />
+          </div>
+        </div>
+      </Tab>
+      <Tab
+        v-if="value.spec.workloadType === 'vm'"
+        name="listeners"
+        :label="t('harvester.loadBalancer.tabs.listeners')"
+        :weight="98"
+        class="bordered-table"
+      >
+        <Banner
+          v-if="healthCheckPortInUseWarning"
+          color="warning"
+        >
+          <span v-clean-html="healthCheckPortInUseWarning" />
+        </Banner>
+        <Listeners
+          v-model="value.spec.listeners"
+          class="col span-12"
+          :mode="mode"
+        />
+      </Tab>
+      <Tab
+        v-if="value.spec.workloadType === 'vm'"
+        name="backendServer"
+        :label="t('harvester.loadBalancer.tabs.backendServer')"
+        :weight="97"
+        class="bordered-table"
+      >
+        <div class="row">
+          <div class="col span-12">
+            <Banner :color="(matchingVMs.none ? 'warning' : 'success')">
+              <span v-clean-html="t('harvester.loadBalancer.backendServerSelector.matchingVMs.matchesSome', matchingVMs)" />
+            </Banner>
+          </div>
+        </div>
+        <KeyValue
+          v-model="backendServerSelector"
+          :mode="mode"
+          :read-allowed="false"
+          :initial-empty-row="true"
+        />
+      </Tab>
+      <Tab
+        v-if="value.spec.workloadType === 'vm'"
+        name="healthCheck"
+        :label="t('harvester.loadBalancer.tabs.healthCheck')"
+        :weight="96"
+        class="bordered-table"
+      >
+        <HealthCheck
+          v-model="value.spec.healthCheck"
+          :mode="mode"
+          :model="value"
+          @enabled="healthCheckEnabled"
+        />
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+ $remove: 75;
+  $checkbox: 75;
+
+  .title {
+    margin-bottom: 10px;
+
+    .read-from-file {
+      float: right;
+    }
+  }
+
+  .ports-headers, .ports-row{
+    display: grid;
+    grid-column-gap: $column-gutter;
+    margin-bottom: 10px;
+    align-items: center;
+
+    &.show-protocol{
+      grid-template-columns: 23% 23% 10% 15% 15% 10%;
+      &:not(.show-node-port){
+        grid-template-columns: 31% 31% 10% 15% 10%;
+      }
+    }
+    &.show-node-port:not(.show-protocol){
+      grid-template-columns: 28% 28% 15% 15% 10%;
+    }
+  }
+
+  .ports-headers {
+    color: var(--input-label);
+  }
+
+  .toggle-host-ports {
+    color: var(--primary);
+  }
+
+  .remove BUTTON {
+    padding: 0px;
+  }
+
+  .ports-row {
+    > div {
+      height: 100%;
+    }
+
+    .port-protocol ::v-deep {
+      .unlabeled-select {
+        .v-select.inline {
+          margin-top: 2px;
+        }
+      }
+    }
+  }
+
+  .footer {
+    margin-top: 10px;
+    margin-left: 5px;
+
+    .protip {
+      float: right;
+      padding: 5px 0;
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/management.cattle.io.project.vue b/pkg/harvester/edit/management.cattle.io.project.vue
new file mode 100644
index 00000000..9fd84fdc
--- /dev/null
+++ b/pkg/harvester/edit/management.cattle.io.project.vue
@@ -0,0 +1,296 @@
+<script>
+import { mapGetters } from 'vuex';
+import ContainerResourceLimit from '@shell/components/ContainerResourceLimit';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
+import CruResource from '@shell/components/CruResource';
+import Labels from '@shell/components/form/Labels';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceQuota from '@shell/components/form/ResourceQuota/Project';
+import { HARVESTER_TYPES, RANCHER_TYPES } from '@shell/components/form/ResourceQuota/shared';
+import Tab from '@shell/components/Tabbed/Tab';
+import Tabbed from '@shell/components/Tabbed';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { MANAGEMENT } from '@shell/config/types';
+import { NAME } from '@shell/config/product/explorer';
+import { PROJECT_ID, _VIEW, _CREATE, _EDIT } from '@shell/config/query-params';
+import ProjectMembershipEditor from '@shell/components/form/Members/ProjectMembershipEditor';
+import { canViewProjectMembershipEditor } from '@shell/components/form/Members/ProjectMembershipEditor.vue';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import { Banner } from '@components/Banner';
+
+export default {
+  components: {
+    ContainerResourceLimit, CruResource, Labels, LabeledSelect, NameNsDescription, ProjectMembershipEditor, ResourceQuota, Tabbed, Tab, Banner
+  },
+
+  mixins: [CreateEditView, FormValidation],
+  async fetch() {
+    if ( this.$store.getters['management/canList'](MANAGEMENT.POD_SECURITY_POLICY_TEMPLATE) ) {
+      this.allPSPs = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.POD_SECURITY_POLICY_TEMPLATE });
+    }
+
+    // User can only change the PSP if the user has permissions to see the binding schema for PSP Templates
+    const pspBindingSchema = this.$store.getters['management/schemaFor'](MANAGEMENT.PSP_TEMPLATE_BINDING);
+
+    this.canEditPSPBindings = !!pspBindingSchema;
+  },
+  data() {
+    this.$set(this.value, 'spec', this.value.spec || {});
+    this.$set(this.value.spec, 'podSecurityPolicyTemplateId', this.value.status?.podSecurityPolicyTemplateId || '');
+
+    return {
+      allPSPs:                          [],
+      projectRoleTemplateBindingSchema: this.$store.getters[`management/schemaFor`](MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING),
+      createLocation:                   {
+        name:   'c-cluster-product-resource-create',
+        params: {
+          product:  NAME,
+          resource: MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING,
+        },
+        query: { [PROJECT_ID]: this.project?.id?.replace('/', ':') }
+      },
+      resource:           MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING,
+      saveBindings:       null,
+      membershipHasOwner: false,
+      membershipUpdate:   {},
+      HARVESTER_TYPES,
+      RANCHER_TYPES,
+      fvFormRuleSets:     [{ path: 'spec.displayName', rules: ['required'] }],
+      canEditPSPBindings: true,
+    };
+  },
+  computed: {
+    ...mapGetters(['currentCluster', 'isStandaloneHarvester']),
+
+    canViewMembers() {
+      return canViewProjectMembershipEditor(this.$store);
+    },
+
+    canEditProject() {
+      return this.value?.links?.update;
+    },
+
+    isDescriptionDisabled() {
+      return (this.mode === _EDIT && !this.canEditProject) || false;
+    },
+
+    canEditTabElements() {
+      if (this.mode === _EDIT && !this.canEditProject) {
+        return _VIEW;
+      }
+
+      return this.mode;
+    },
+
+    showBannerForOnlyManagingMembers() {
+      return this.mode === _EDIT && !this.canEditProject;
+    },
+
+    isK3s() {
+      return (this.currentCluster?.spec?.kubernetesVersion || '').includes('k3s');
+    },
+
+    pspOptions() {
+      if ( this.isK3s || !this.currentCluster.spec.defaultPodSecurityPolicyTemplateName ) {
+        return null;
+      }
+
+      const out = [{ label: this.t('project.psp.default'), value: '' }];
+
+      if ( this.allPSPs ) {
+        for ( const pspt of this.allPSPs ) {
+          out.push({
+            label: pspt.nameDisplay,
+            value: pspt.id,
+          });
+        }
+      }
+
+      const cur = this.value.status?.podSecurityPolicyTemplateId;
+
+      if ( cur && !out.find(x => x.value === cur) ) {
+        out.unshift({ label: this.t('project.psp.current', { value: cur }), value: cur });
+      }
+
+      return out;
+    },
+
+    isHarvester() {
+      return this.$store.getters['currentProduct'].inStore === HARVESTER;
+    },
+
+    resourceQuotaLabel() {
+      if (this.isHarvester) {
+        return this.t('project.vmDefaultResourceLimit');
+      }
+
+      return this.t('project.containerDefaultResourceLimit');
+    },
+  },
+  watch: {
+    hasOwner() {
+      this.errors = this.hasOwner ? [] : [this.t('project.haveOneOwner')];
+    }
+  },
+  created() {
+    this.$set(this.value.metadata, 'namespace', this.$store.getters['currentCluster'].id);
+    this.$set(this.value, 'spec', this.value.spec || {});
+    this.$set(this.value.spec, 'containerDefaultResourceLimit', this.value.spec.containerDefaultResourceLimit || {});
+  },
+  methods: {
+    async save(saveCb) {
+      try {
+        // clear up of the unused resourceQuotas will now be done on the model side
+
+        if (this.mode === _CREATE) {
+          const savedProject = await this.value.save();
+
+          if (this.membershipUpdate.save) {
+            await this.membershipUpdate.save(savedProject.id);
+          }
+        } else if (this.mode === _EDIT) {
+          if (this.canEditProject) {
+            await this.value.save(true);
+
+            // We updated the Norman resource - re-fetch the Steve resource so we know it is definitely updated in the store
+            await this.$store.dispatch('management/find', {
+              type: MANAGEMENT.PROJECT,
+              id:   this.value.id,
+              opt:  { force: true }
+            });
+          }
+
+          // // we allow users with permissions for projectroletemplatebindings to be able to manage members on projects
+          if (this.membershipUpdate.save) {
+            const norman = await this.value.norman;
+
+            await this.membershipUpdate.save(norman.id);
+          }
+        }
+
+        saveCb(true);
+        this.$router.replace(this.value.listLocation);
+      } catch (ex) {
+        this.errors.push(ex);
+        saveCb(false);
+      }
+    },
+
+    onHasOwnerChanged(hasOwner) {
+      this.$set(this, 'membershipHasOwner', hasOwner);
+    },
+
+    onMembershipUpdate(update) {
+      this.$set(this, 'membershipUpdate', update);
+    },
+
+    removeQuota(key) {
+      ['resourceQuota', 'namespaceDefaultResourceQuota'].forEach((specProp) => {
+        if (this.value?.spec[specProp]?.limit && this.value?.spec[specProp]?.limit[key]) {
+          delete this.value?.spec[specProp]?.limit[key];
+        }
+        if (this.value?.spec[specProp]?.usedLimit && this.value?.spec[specProp]?.usedLimit[key]) {
+          delete this.value?.spec[specProp]?.usedLimit[key];
+        }
+      });
+    }
+  },
+};
+</script>
+<template>
+  <CruResource
+    class="project"
+    :done-route="value.listLocation"
+    :errors="fvUnreportedValidationErrors"
+    :mode="mode"
+    :resource="value"
+    :subtypes="[]"
+    :can-yaml="false"
+    :validation-passed="fvFormIsValid"
+    @error="e=>errors = e"
+    @finish="save"
+    @cancel="done"
+  >
+    <NameNsDescription
+      v-model="value"
+      :name-editable="true"
+      :mode="mode"
+      :namespaced="false"
+      description-key="spec.description"
+      :description-disabled="isDescriptionDisabled"
+      name-key="spec.displayName"
+      :normalize-name="false"
+      :rules="{ name: fvGetAndReportPathRules('spec.displayName'), namespace: [], description: [] }"
+    />
+    <div class="row mb-20">
+      <div class="col span-3">
+        <LabeledSelect
+          v-if="pspOptions"
+          v-model="value.spec.podSecurityPolicyTemplateId"
+          class="psp"
+          :mode="mode"
+          :options="pspOptions"
+          :disabled="!canEditPSPBindings"
+          :label="t('project.psp.label')"
+        />
+      </div>
+    </div>
+    <Tabbed :side-tabs="true">
+      <Tab
+        v-if="canViewMembers"
+        name="members"
+        :label="t('project.members.label')"
+        :weight="10"
+      >
+        <Banner
+          v-if="showBannerForOnlyManagingMembers"
+          color="info"
+          :label="t('project.membersEditOnly')"
+        />
+        <ProjectMembershipEditor
+          :mode="mode"
+          :parent-id="value.id"
+          @has-owner-changed="onHasOwnerChanged"
+          @membership-update="onMembershipUpdate"
+        />
+      </Tab>
+      <Tab
+        name="resource-quotas"
+        :label="t('project.resourceQuotas')"
+        :weight="9"
+      >
+        <ResourceQuota
+          v-model="value"
+          :mode="canEditTabElements"
+          :types="isStandaloneHarvester ? HARVESTER_TYPES : RANCHER_TYPES"
+          @remove="removeQuota"
+        />
+      </Tab>
+      <Tab
+        name="container-default-resource-limit"
+        :label="resourceQuotaLabel"
+        :weight="8"
+      >
+        <ContainerResourceLimit
+          v-model="value.spec.containerDefaultResourceLimit"
+          :mode="canEditTabElements"
+          :show-tip="false"
+          :register-before-hook="registerBeforeHook"
+        />
+      </Tab>
+      <Tab
+        name="labels-and-annotations"
+        label-key="generic.labelsAndAnnotations"
+        :weight="7"
+      >
+        <Labels
+          default-container-class="labels-and-annotations-container"
+          :value="value"
+          :mode="canEditTabElements"
+          :display-side-by-side="false"
+        />
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
diff --git a/pkg/harvester/edit/network.harvesterhci.io.clusternetwork/index.vue b/pkg/harvester/edit/network.harvesterhci.io.clusternetwork/index.vue
new file mode 100644
index 00000000..d11090b6
--- /dev/null
+++ b/pkg/harvester/edit/network.harvesterhci.io.clusternetwork/index.vue
@@ -0,0 +1,91 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index';
+import Tab from '@shell/components/Tabbed/Tab';
+import Labels from '@shell/components/form/Labels';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+export default {
+  name: 'EditClusterNetwork',
+
+  components: {
+    CruResource,
+    NameNsDescription,
+    ResourceTabs,
+    Tab,
+    Labels,
+  },
+
+  mixins: [CreateEditView],
+
+  computed: {
+    doneLocationOverride() {
+      return this.value.doneOverride;
+    }
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.validate);
+    }
+  },
+
+  methods: {
+    validate() {
+      const errors = [];
+
+      const name = this.value?.metadata?.name;
+
+      if (!name) {
+        errors.push(this.t('validation.required', { key: this.t('generic.name') }, true));
+      } else if (name.length > 12) {
+        errors.push(this.t('validation.stringLength.max', {
+          key:   this.t('generic.name'),
+          count: 12,
+        }, true));
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      } else {
+        return Promise.resolve();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    @finish="save"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+    />
+    <ResourceTabs
+      v-model="value"
+      :mode="mode"
+      :side-tabs="true"
+    >
+      <Tab
+        name="labels-and-annotations"
+        label-key="generic.labelsAndAnnotations"
+        :weight="-1"
+      >
+        <Labels
+          default-container-class="labels-and-annotations-container"
+          :value="value"
+          :mode="mode"
+          :display-side-by-side="false"
+        />
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>
diff --git a/pkg/harvester/edit/network.harvesterhci.io.vlanconfig/NodeSelector.vue b/pkg/harvester/edit/network.harvesterhci.io.vlanconfig/NodeSelector.vue
new file mode 100644
index 00000000..6f2065dc
--- /dev/null
+++ b/pkg/harvester/edit/network.harvesterhci.io.vlanconfig/NodeSelector.vue
@@ -0,0 +1,171 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import { RadioGroup } from '@components/Form/Radio';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import KeyValue from '@shell/components/form/KeyValue';
+
+import { HOSTNAME } from '@shell/config/labels-annotations';
+import { findBy } from '@shell/utils/array';
+import { HCI } from '../../types';
+
+export default {
+  components: {
+    RadioGroup,
+    LabeledSelect,
+    KeyValue,
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    nodes: {
+      type:    Array,
+      default: () => []
+    },
+
+    mode: {
+      type:    String,
+      default: 'create'
+    }
+  },
+
+  data() {
+    const { nodeSelector = {} } = this.value;
+
+    let selectNode = 'all';
+    let nodeName = '';
+
+    if (nodeSelector[HOSTNAME] && Object.keys(nodeSelector).length === 1) {
+      selectNode = 'nodeSelector';
+      nodeName = nodeSelector[HOSTNAME];
+    } else if (Object.keys(nodeSelector).length > 0) {
+      selectNode = 'custom';
+    }
+
+    return {
+      selectNode,
+      nodeName,
+      nodeSelector,
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    selectNodeOptions() {
+      const out = [{
+        label: this.t(`harvester.vlanConfig.scheduling.affinity.allNodes`),
+        value: 'all'
+      },
+      {
+        label: this.t(`harvester.vlanConfig.scheduling.affinity.specificNode`),
+        value: 'nodeSelector'
+      },
+      {
+        label: this.t(`harvester.vlanConfig.scheduling.affinity.schedulingRules`),
+        value: 'custom'
+      }];
+
+      return out;
+    },
+
+    nics() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const linkMonitor = this.$store.getters[`${ inStore }/byId`](HCI.LINK_MONITOR, 'nic') || {};
+      const linkStatus = linkMonitor?.status?.linkStatus || {};
+
+      const out = [];
+
+      Object.keys(linkStatus).map((nodeName) => {
+        const nics = linkStatus[nodeName] || [];
+
+        nics.map((nic) => {
+          if (!findBy(out, 'name', nic.name) && !nic.masterIndex) {
+            out.push({
+              ...nic,
+              nodeName,
+            });
+          }
+        });
+      });
+
+      return out;
+    },
+  },
+
+  methods: {
+    update() {
+      const { nodeName, nodeSelector } = this;
+
+      switch (this.selectNode) {
+      case 'all':
+        delete this.value?.nodeSelector;
+
+        break;
+      case 'nodeSelector':
+        delete this.value?.nodeSelector;
+
+        Object.assign(this.value, { nodeSelector: { [HOSTNAME]: nodeName } });
+        break;
+      case 'custom':
+        delete this.value.nodeName;
+        delete this.value.nodeSelector;
+
+        Object.assign(this.value, { nodeSelector });
+        break;
+      default:
+        delete this.value.nodeSelector;
+      }
+
+      this.$emit('updateMatchingNICs');
+      this.$emit('updateMatchingNodes');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <RadioGroup
+        v-model="selectNode"
+        name="selectNode"
+        :options="selectNodeOptions"
+        :mode="mode"
+        @input="update"
+      />
+    </div>
+    <template v-if="selectNode === 'nodeSelector'">
+      <div class="row mb-10">
+        <div class="col span-6">
+          <LabeledSelect
+            v-model="nodeName"
+            :label="t('workload.scheduling.affinity.nodeName')"
+            :options="nodes || []"
+            :mode="mode"
+            :multiple="false"
+            @input="update"
+          />
+        </div>
+      </div>
+    </template>
+    <template v-else-if="selectNode === 'custom'">
+      <KeyValue
+        v-model="nodeSelector"
+        :key-label="t('generic.key')"
+        :mode="mode"
+        :add-label="t('workload.scheduling.affinity.addNodeSelector')"
+        :read-allowed="false"
+        :value-label="t('generic.value')"
+        :initial-empty-row="true"
+        @input="update"
+      />
+    </template>
+  </div>
+</template>
diff --git a/pkg/harvester/edit/network.harvesterhci.io.vlanconfig/index.vue b/pkg/harvester/edit/network.harvesterhci.io.vlanconfig/index.vue
new file mode 100644
index 00000000..7eb26860
--- /dev/null
+++ b/pkg/harvester/edit/network.harvesterhci.io.vlanconfig/index.vue
@@ -0,0 +1,517 @@
+<script>
+import { isEmpty, throttle } from 'lodash';
+
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import ArrayListSelect from '@shell/components/form/ArrayListSelect';
+import LabelValue from '@shell/components/LabelValue';
+import Loading from '@shell/components/Loading';
+import { Banner } from '@components/Banner';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+import { NODE } from '@shell/config/types';
+import { set, clone } from '@shell/utils/object';
+import { uniq, findBy } from '@shell/utils/array';
+import { HCI } from '../../types';
+import { allHash } from '@shell/utils/promise';
+import { HOSTNAME } from '@shell/config/labels-annotations';
+import { matching } from '@shell/utils/selector';
+
+import NodeSelector from './NodeSelector';
+
+export default {
+  components: {
+    CruResource,
+    NameNsDescription,
+    LabeledInput,
+    LabeledSelect,
+    Tabbed,
+    Tab,
+    NodeSelector,
+    ArrayListSelect,
+    LabelValue,
+    Loading,
+    Banner,
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+    const originNics = clone(this.value?.spec?.uplink?.nics || []);
+
+    const matchingNodes = {
+      matched: 0,
+      matches: [],
+      none:    true,
+      sample:  null,
+      total:   0,
+    };
+
+    return {
+      type:      'vlan',
+      matchNICs: [],
+      originNics,
+      matchingNodes,
+      nicErrors: [],
+    };
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.validate);
+    }
+
+    const clusterNetwork = this.$route.query.clusterNetwork;
+
+    if (clusterNetwork) {
+      set(this.value, 'spec.clusterNetwork', clusterNetwork);
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      linkMonitors: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.LINK_MONITOR }),
+      nodes:        this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }),
+    };
+
+    await allHash(hash);
+
+    this.updateMatchingNICs();
+    this.updateMatchingNodes();
+  },
+
+  computed: {
+    nodeOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const nodes = this.$store.getters[`${ inStore }/all`](NODE);
+
+      return nodes.filter(n => n.isEtcd !== 'true').map((node) => {
+        return {
+          label: node.nameDisplay,
+          value: node.id
+        };
+      });
+    },
+
+    mtu: {
+      get() {
+        return this.value?.spec?.uplink?.linkAttributes?.mtu;
+      },
+
+      set(value) {
+        set(this.value, 'spec.uplink.linkAttributes.mtu', value);
+      }
+    },
+
+    bondOptionMode: {
+      get() {
+        return this.value?.spec?.uplink?.bondOptions?.mode;
+      },
+
+      set(value) {
+        set(this.value, 'spec.uplink.bondOptions.mode', value);
+      },
+    },
+
+    miimon: {
+      get() {
+        return this.value?.spec?.uplink?.bondOptions?.miimon;
+      },
+
+      set(value) {
+        set(this.value, 'spec.uplink.bondOptions.miimon', value);
+      },
+    },
+
+    bondOptions() {
+      return [
+        'balance-rr',
+        'active-backup',
+        'balance-xor',
+        'broadcast',
+        '802.3ad',
+        'balance-tlb',
+        'balance-alb',
+      ];
+    },
+
+    doneLocationOverride() {
+      return this.value.doneOverride;
+    },
+
+    nics() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const linkMonitor = this.$store.getters[`${ inStore }/byId`](HCI.LINK_MONITOR, 'nic') || {};
+      const linkStatus = linkMonitor?.status?.linkStatus || {};
+      const nodes = this.nodes.map(n => n.id);
+
+      const out = [];
+
+      // The node name in the Link monitor is not deleted after the nodes is deleted
+      // So the UI needs to filter it first.
+      Object.keys(linkStatus).map((nodeName) => {
+        if (nodes.includes(nodeName)) {
+          const nics = linkStatus[nodeName] || [];
+
+          nics.map((nic) => {
+            out.push({
+              ...nic,
+              nodeName,
+            });
+          });
+        }
+      });
+
+      return out;
+    },
+
+    nicOptions() {
+      const out = [];
+      const map = {};
+
+      (this.matchNICs || []).map((nic) => {
+        if (nic.masterIndex && !this.originNics.includes(nic.name)) {
+          set(map, `${ nic.name }.masterIndex`, true);
+        } else if (!findBy(out, 'name', nic.name)) {
+          out.push(nic);
+
+          set(map, `${ nic.name }.total`, 1);
+          set(map, `${ nic.name }.down`, nic.state === 'down' ? 1 : 0);
+        } else if (findBy(out, 'name', nic.name)) {
+          set(map, `${ nic.name }.total`, map[nic.name].total + 1);
+          set(map, `${ nic.name }.down`, nic.state === 'down' ? map[nic.name].down + 1 : map[nic.name].down);
+        }
+      });
+
+      return out.filter(o => !map[o.name].masterIndex).map((o) => {
+        let label = '';
+
+        if (map[o.name].down === 0) {
+          label = `${ o.name } (Up)`;
+        } else if (map[o.name].total === 1) {
+          label = `${ o.name } (Down)`;
+        } else {
+          label = `${ o.name } (${ map[o.name].down }/${ map[o.name].total } Down)`;
+        }
+
+        return {
+          label,
+          value:    o.name,
+          disabled: map[o.name].down > 0,
+        };
+      });
+    },
+
+    nodes() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const nodes = this.$store.getters[`${ inStore }/all`](NODE);
+
+      return nodes.filter(n => n.isEtcd !== 'true');
+    },
+  },
+
+  methods: {
+    validate() {
+      const errors = [];
+
+      const nics = this.value.spec?.uplink?.nics || [];
+      const nicRequired = this.t('validation.arrayCountRequired', { key: this.t('harvester.vlanConfig.uplink.nics.label'), count: 1 }, true);
+
+      if (nics.length === 0) {
+        errors.push(nicRequired);
+      } else {
+        nics.map((n) => {
+          if (!n) {
+            errors.push(nicRequired);
+          }
+
+          const option = this.nicOptions.find(option => option.value === n);
+
+          if (option && option?.disabled) {
+            errors.push(this.t('harvester.vlanConfig.uplink.nics.validate.available', { nic: n }, true));
+          }
+        });
+      }
+
+      if (!this.value?.metadata?.name) {
+        errors.push(this.t('validation.required', { key: this.t('generic.name') }, true));
+      }
+
+      if (!this.value?.spec?.clusterNetwork) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.network.clusterNetwork.label') }, true));
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(uniq(errors));
+      } else {
+        const miimon = this.value?.spec?.uplink?.bondOptions?.miimon;
+
+        if (!miimon && miimon !== 0) {
+          delete this.value?.spec?.uplink?.bondOptions?.miimon;
+        }
+
+        const mtu = this.value?.spec?.uplink?.linkAttributes?.mtu;
+
+        if (!mtu && mtu !== 0 ) {
+          delete this.value?.spec?.uplink?.linkAttributes?.mtu;
+        }
+
+        return Promise.resolve();
+      }
+    },
+
+    updateMatchingNICs: throttle(function() {
+      const nodeSelector = this.value?.spec?.nodeSelector || {};
+
+      const allNICs = this.nics || [];
+      let matchNICs = [];
+      let commonNodes = [];
+
+      if (isEmpty(nodeSelector)) {
+        matchNICs = clone(allNICs);
+        commonNodes = (this.nodes || []).map(n => n.id);
+      } else if (nodeSelector[HOSTNAME] && Object.keys(nodeSelector).length === 1) {
+        matchNICs = allNICs.filter(n => n.nodeName === nodeSelector[HOSTNAME]);
+        commonNodes = [nodeSelector[HOSTNAME]];
+      } else {
+        const matchNodes = matching(this.nodes || [], nodeSelector).map(n => n.id);
+
+        matchNICs = allNICs.filter(n => matchNodes.includes(n.nodeName));
+        commonNodes = matchNodes.map(n => n.id);
+      }
+
+      this.matchNICs = this.intersection(matchNICs, commonNodes) || [];
+    }, 250, { leading: true }),
+
+    intersection(nics = [], commonNodes = []) {
+      const map = {};
+
+      nics.map((n) => {
+        map[n.name] = (map[n.name] || 0) + 1;
+      });
+
+      return nics.filter(n => map[n.name] === commonNodes.length);
+    },
+
+    updateMatchingNodes: throttle(function() {
+      const selector = this.value?.spec?.nodeSelector || {};
+      const allNodes = this.nodes || [];
+
+      if (isEmpty(selector)) {
+        this.matchingNodes = {
+          matched: allNodes.length,
+          total:   allNodes.length,
+          none:    false,
+          sample:  allNodes[0] ? allNodes[0].nameDisplay : null,
+        };
+      } else if (selector[HOSTNAME] && Object.keys(selector).length === 1) {
+        const matchNode = allNodes.find(n => n.id === selector[HOSTNAME]);
+
+        this.matchingNodes = {
+          matched: 1,
+          total:   allNodes.length,
+          none:    false,
+          sample:  matchNode ? matchNode.nameDisplay : selector[HOSTNAME],
+        };
+      } else {
+        const match = matching(allNodes, selector);
+
+        this.matchingNodes = {
+          matched: match.length,
+          total:   allNodes.length,
+          none:    match.length === 0,
+          sample:  match[0] ? match[0].nameDisplay : null,
+        };
+      }
+    }, 250, { leading: true }),
+  },
+
+  watch: {
+    nicOptions(options) {
+      const nics = this.value.spec?.uplink?.nics || [];
+      const nicErrors = [];
+
+      nics.map((n) => {
+        const option = options.find(option => option.value === n);
+
+        if ((option && option?.disabled) || !option) {
+          nicErrors.push(this.t('harvester.vlanConfig.uplink.nics.validate.available', { nic: n }, true));
+        }
+      });
+
+      this.nicErrors = uniq(nicErrors);
+    },
+
+    'value.spec.uplink.nics'(nics = []) {
+      const nicErrors = [];
+      const options = this.nicOptions || [];
+
+      nics.map((n) => {
+        const option = options.find(option => option.value === n);
+
+        if ((option && option?.disabled) || !option) {
+          nicErrors.push(this.t('harvester.vlanConfig.uplink.nics.validate.available', { nic: n }, true));
+        }
+      });
+
+      this.nicErrors = uniq(nicErrors);
+    }
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <CruResource
+    v-else
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    @finish="save"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+    />
+
+    <Tabbed
+      :side-tabs="true"
+    >
+      <Tab
+        name="nodeSelector"
+        :label="t('harvester.vlanConfig.titles.nodeSelector')"
+        :weight="99"
+      >
+        <div class="row">
+          <div class="col span-12">
+            <Banner :color="(matchingNodes.none ? 'warning' : 'success')">
+              <span v-clean-html="t('harvester.vlanConfig.nodeSelector.matchingNodes.matchesSome', matchingNodes)" />
+            </Banner>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col span-12">
+            <NodeSelector
+              :mode="mode"
+              :value="value.spec"
+              :nodes="nodeOptions"
+              @updateMatchingNICs="updateMatchingNICs"
+              @updateMatchingNodes="updateMatchingNodes"
+            />
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="upLink"
+        :label="t('harvester.vlanConfig.titles.uplink')"
+        :weight="99"
+        :show-header="false"
+      >
+        <div class="row mt-10">
+          <div class="col span-6">
+            <LabelValue
+              :name="t('harvester.network.clusterNetwork.label')"
+              :value="value.spec.clusterNetwork"
+            />
+          </div>
+          <div class="col span-6">
+            <LabelValue
+              name="Type"
+              value="VLAN"
+            />
+          </div>
+        </div>
+
+        <div class="row mt-20">
+          <div class="col span-12">
+            <Banner
+              v-for="(err, i) in nicErrors"
+              :key="i"
+              color="warning"
+              :label="err"
+            />
+            <ArrayListSelect
+              v-model="value.spec.uplink.nics"
+              :mode="mode"
+              :options="nicOptions"
+              :array-list-props="{
+                addLabel: t('harvester.vlanConfig.uplink.nics.addLabel'),
+                initialEmptyRow: true,
+                title: t('harvester.vlanConfig.uplink.nics.label'),
+                required: true,
+                protip: false,
+              }"
+              :select-props="{
+                placeholder: t('harvester.vlanConfig.uplink.nics.placeholder'),
+              }"
+            />
+          </div>
+        </div>
+
+        <h3 class="mt-20">
+          {{ t('harvester.vlanConfig.titles.bondOptions') }}
+        </h3>
+        <div class="row">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="bondOptionMode"
+              :label="t('harvester.vlanConfig.uplink.bondOptions.mode.label')"
+              :mode="mode"
+              :options="bondOptions"
+              required
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model.number="miimon"
+              :label="t('harvester.vlanConfig.uplink.bondOptions.miimon.label')"
+              :mode="mode"
+              type="number"
+              :tooltip="t('harvester.vlanConfig.uplink.bondOptions.miimon.tooltip', null, true)"
+            />
+          </div>
+        </div>
+
+        <h3 class="mt-20">
+          {{ t('harvester.vlanConfig.titles.attributes') }}
+        </h3>
+        <div class="row mt-10">
+          <div class="col span-6">
+            <LabeledInput
+              v-model.number="mtu"
+              :label="t('harvester.vlanConfig.uplink.linkAttributes.mtu.label')"
+              :mode="mode"
+              type="number"
+            />
+          </div>
+        </div>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+button {
+  all: unset;
+  height: 0;
+  position: relative;
+  top: -35px;
+  float: right;
+  margin-right: 7px;
+
+  cursor: pointer;
+
+  .align-value {
+    padding-top: 7px;
+  }
+}
+</style>
diff --git a/pkg/harvester/formatters/AttachVMWithName.vue b/pkg/harvester/formatters/AttachVMWithName.vue
new file mode 100644
index 00000000..716c9fff
--- /dev/null
+++ b/pkg/harvester/formatters/AttachVMWithName.vue
@@ -0,0 +1,49 @@
+<script>
+import { HCI } from '../types';
+
+export default {
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+    row: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  data() {
+    const vmList = this.$store.getters['harvester/all'](HCI.VM) || [];
+
+    return { vmList };
+  },
+
+  computed: {
+    vm() {
+      const vm = this.vmList.find( (V) => V.id === `${ this.row.metadata.namespace }/${ this.value }`);
+
+      return vm;
+    },
+
+    to() {
+      return this.vm?.detailLocation;
+    },
+  }
+};
+</script>
+
+<template>
+  <router-link
+    v-if="to"
+    :to="to"
+  >
+    {{ value }}
+  </router-link>
+
+  <span v-else>
+    {{ value }}
+  </span>
+</template>
diff --git a/pkg/harvester/formatters/CloudInitType.vue b/pkg/harvester/formatters/CloudInitType.vue
new file mode 100644
index 00000000..ef6fb7e4
--- /dev/null
+++ b/pkg/harvester/formatters/CloudInitType.vue
@@ -0,0 +1,27 @@
+<script>
+import { HCI } from '@pkg/harvester/config/labels-annotations';
+import { mapGetters } from 'vuex';
+
+export default {
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    displayLabel() {
+      return this.value?.[HCI.CLOUD_INIT] === 'user' ? this.t('harvester.cloudTemplate.userData') : this.t('harvester.cloudTemplate.networkData');
+    }
+  },
+};
+</script>
+
+<template>
+  <span> {{ displayLabel }} </span>
+</template>
diff --git a/pkg/harvester/formatters/HarvesterBackupProgressBar.vue b/pkg/harvester/formatters/HarvesterBackupProgressBar.vue
new file mode 100644
index 00000000..b1f7a67a
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterBackupProgressBar.vue
@@ -0,0 +1,107 @@
+<script>
+import ProgressBarMulti from '@shell/components/ProgressBarMulti';
+
+export default {
+  name:       'HarvesterBackupProgressBar',
+  components: { ProgressBarMulti },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    isEmpty() {
+      return this.value?.percentage === undefined;
+    },
+    status() {
+      switch (this.value?.percentage) {
+      case 0:
+        return 'starting';
+      case 100:
+        return 'complete';
+
+      default:
+        return 'progress';
+      }
+    },
+
+    percentage() {
+      const value = Number(this.value.percentage);
+      let color = 'bg-success';
+
+      if (value === 0) {
+        color = 'bg-secondary';
+      } else if (value < 30) {
+        color = 'bg-darker';
+      } else if (value < 70) {
+        color = 'bg-warning';
+      }
+
+      return [{
+        value,
+        color
+      }];
+    },
+
+    tooltip() {
+      if (!this.value?.details?.volumes?.length) {
+        return null;
+      }
+      const title = this.t(`harvester.${ this.value.type }.progress.details`);
+      const rows = this.value.details.volumes.map(v => `<br><b>${ v.volumeName }</b>:  ${ v.progress || 0 }%`);
+
+      return rows.reduce((acc, r) => acc + r, `${ title }<br>`);
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="isEmpty" class="empty">
+    <span class="text-muted">
+      &mdash;
+    </span>
+  </div>
+  <div
+    v-else-if="status != 'complete'"
+    class="parent"
+  >
+    <div class="progress-box">
+      <ProgressBarMulti
+        v-clean-tooltip="tooltip"
+        :values="percentage"
+        :min="0"
+        :max="100"
+      />
+    </div>
+    <div class="text">
+      {{ value.percentage || 0 }}%
+    </div>
+  </div>
+  <div v-else>
+    {{ t('generic.completed') }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .parent {
+    display: grid;
+    grid-template-areas: "progress text";
+    grid-template-columns: auto 80px;
+    align-items: center;
+    .progress {
+      background-color: darken(#EBEEF5, 15%);
+      width: 100%;
+    }
+    .progress-box {
+      grid-area: progress;
+    }
+    .text {
+      grid-area: text;
+      text-align: center;
+    }
+  }
+</style>
diff --git a/pkg/harvester/formatters/HarvesterBackupTargetValidation.vue b/pkg/harvester/formatters/HarvesterBackupTargetValidation.vue
new file mode 100644
index 00000000..5336901f
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterBackupTargetValidation.vue
@@ -0,0 +1,49 @@
+<script>
+import { HCI } from '../types';
+
+export default {
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  async fetch() {
+    const harvesterSettings = await this.$store.dispatch('harvester/findAll', { type: HCI.SETTING });
+
+    this.harvesterSettings = harvesterSettings;
+  },
+
+  data() {
+    return { harvesterSettings: [] };
+  },
+
+  computed: {
+    isMatch() {
+      const harvesterSettings = this.$store.getters['harvester/all'](HCI.SETTING) || [];
+      const resource = harvesterSettings.find( V => V.id === 'backup-target');
+
+      let isMatch = false;
+
+      try {
+        isMatch = this.value === resource?.parseValue?.endpoint;
+      } catch (e) {}
+
+      return isMatch;
+    }
+  }
+};
+</script>
+
+<template>
+  <div v-if="isMatch">
+    {{ value }}
+  </div>
+  <div v-else>
+    {{ value }}
+    <p v-if="value" class="text-error">
+      {{ t('harvester.backup.matchTarget') }}
+    </p>
+  </div>
+</template>
diff --git a/pkg/harvester/formatters/HarvesterCPUUsed.vue b/pkg/harvester/formatters/HarvesterCPUUsed.vue
new file mode 100644
index 00000000..f1830882
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterCPUUsed.vue
@@ -0,0 +1,128 @@
+<script>
+import ConsumptionGauge from '@shell/components/ConsumptionGauge';
+import { METRIC, NODE } from '@shell/config/types';
+import { parseSi } from '@shell/utils/units';
+
+export default {
+  name:       'HarvesterCpuUsed',
+  components: { ConsumptionGauge },
+
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    resourceName: {
+      type:    String,
+      default: ''
+    },
+
+    showUsed: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: {
+    metrics() {
+      return this.$store.getters['harvester/byId'](METRIC.NODE, this.row.id);
+    },
+
+    cpuTotal() {
+      let out = 0;
+
+      if (this.metrics) {
+        out = this.metrics.cpuCapacity;
+      }
+
+      return out;
+    },
+
+    cpuUnits() {
+      return 'C';
+    },
+
+    node() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const node = this.$store.getters[`${ inStore }/byId`](NODE, this.row.id);
+
+      return node;
+    },
+
+    reserved() {
+      if (this.metrics) {
+        return this.node.cpuReserved;
+      } else {
+        return 0;
+      }
+    },
+
+    used() {
+      if (this.metrics) {
+        return parseSi(this.metrics?.usage?.cpu || '0m');
+      } else {
+        return 0;
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <ConsumptionGauge
+      :capacity="cpuTotal"
+      :used="reserved"
+      :units="cpuUnits"
+      :resource-name="resourceName"
+    >
+      <template #title="{amountTemplateValues, formattedPercentage}">
+        <span>
+          {{ t('clusterIndexPage.hardwareResourceGauge.reserved') }}
+        </span>
+        <span class="precent-data">
+          {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
+          <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
+          </span>
+        </span>
+      </template>
+    </ConsumptionGauge>
+    <div
+      v-if="showUsed"
+      class="mt-10"
+    >
+      <ConsumptionGauge
+        :capacity="cpuTotal"
+        :used="used"
+        :units="cpuUnits"
+      >
+        <template #title="{amountTemplateValues, formattedPercentage}">
+          <span>
+            {{ t('clusterIndexPage.hardwareResourceGauge.used') }}
+          </span>
+          <span class="precent-data">
+            {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
+            <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
+            </span>
+          </span>
+        </template>
+      </ConsumptionGauge>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.precent-data {
+  white-space: nowrap;
+}
+</style>
diff --git a/pkg/harvester/formatters/HarvesterDiskState.vue b/pkg/harvester/formatters/HarvesterDiskState.vue
new file mode 100644
index 00000000..09158858
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterDiskState.vue
@@ -0,0 +1,109 @@
+<script>
+import { BadgeState } from '@components/BadgeState';
+import { stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
+
+const ACTIVE = 'healthy';
+const WARNING = 'warning';
+
+export default {
+  components: { BadgeState },
+  props:      {
+    value: {
+      type:    String,
+      default: ''
+    },
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  computed: {
+    diskState() {
+      const longhornDisks = this.row?.longhornDisks || [];
+      const out = longhornDisks.reduce((state, disk) => {
+        if (disk?.readyCondition?.status !== 'True' || disk?.schedulableCondition?.status !== 'True') {
+          state = WARNING;
+        }
+
+        return state;
+      }, ACTIVE);
+
+      return out;
+    },
+
+    stateDisplay() {
+      return stateDisplay(this.diskState);
+    },
+
+    stateBackground() {
+      if ( this.diskState === ACTIVE ) {
+        return 'bg-success';
+      } else {
+        return 'bg-warning';
+      }
+    },
+
+    errorMessage() {
+      if (this.diskState !== ACTIVE) {
+        return this.t('harvester.host.disk.error');
+      }
+
+      return '';
+    },
+
+    warningMessage() {
+      const blockDevices = this.row?.unProvisionedDisks || [];
+
+      const out = [];
+
+      blockDevices.map((b) => {
+        if (b.metadata.state.error) {
+          out.push(b.metadata.state.message);
+        }
+      });
+
+      return out;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="state">
+    <BadgeState
+      v-clean-tooltip="errorMessage"
+      :color="stateBackground"
+      :label="stateDisplay"
+    />
+    <v-popover
+      v-if="warningMessage.length"
+      trigger="hover"
+      offset="16"
+    >
+      <span class="tooltip-target ml-5">
+        <i class="icon icon-warning icon-lg text-warning" />
+      </span>
+
+      <template slot="popover">
+        <p
+          v-for="(message, index) in warningMessage"
+          :key="message"
+        >
+          {{ index + 1 }}. {{ message }}
+        </p>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.state {
+  display: flex;
+  justify-content: left;
+
+  .icon-warning {
+    margin-top: 2px;
+  }
+}
+</style>
diff --git a/pkg/harvester/formatters/HarvesterHost.vue b/pkg/harvester/formatters/HarvesterHost.vue
new file mode 100644
index 00000000..c18361da
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterHost.vue
@@ -0,0 +1,36 @@
+<script>
+import { NODE } from '@shell/config/types';
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+
+export default {
+  components: { CopyToClipboardText },
+  props:      {
+    value: {
+      type:    String,
+      default: ''
+    },
+  },
+
+  computed: {
+    node() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/byId`](NODE, this.value);
+    },
+
+    ip() {
+      return this.node?.internalIp;
+    },
+
+    nameDisplay() {
+      return this.node?.nameDisplay || '';
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <CopyToClipboardText v-clean-tooltip="ip" :text="nameDisplay" />
+  </div>
+</template>
diff --git a/pkg/harvester/formatters/HarvesterIpAddress.vue b/pkg/harvester/formatters/HarvesterIpAddress.vue
new file mode 100644
index 00000000..69a788c6
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterIpAddress.vue
@@ -0,0 +1,103 @@
+<script>
+import { OFF } from '../models/kubevirt.io.virtualmachine';
+import { get } from '@shell/utils/object';
+import { isIpv4 } from '@shell/utils/string';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { HCI } from '../types';
+import { MANAGEMENT_NETWORK } from '../mixins/harvester-vm';
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+
+export default {
+  components: { CopyToClipboardText },
+  props:      {
+    value: {
+      type:    String,
+      default: ''
+    },
+    row: {
+      type:     Object,
+      required: true
+    },
+    col: {
+      type:    Object,
+      default: () => {}
+    }
+  },
+
+  data() {
+    return { inStore: 'harvester' };
+  },
+
+  created() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.inStore = inStore;
+  },
+
+  computed: {
+    // Return VM instance IP and VM annotation IP
+    ips() {
+      return [...this.vmiIp, ...this.networkAnnotationIP]
+        .filter(Boolean)
+        .sort((a, b) => a.ip < b.ip ? -1 : 1);
+    },
+
+    networkAnnotationIP() {
+      if (this.row.actualState !== 'Running') { // TODO: Running
+        return [];
+      }
+
+      const annotationIp = get(this.row, `metadata.annotations."${ HCI_ANNOTATIONS.NETWORK_IPS }"`) || '[]';
+
+      // Obtain IP from VM annotation, remove the CIDR suffix number if CIDR Exist
+      try {
+        const out = JSON.parse(annotationIp);
+
+        return out.map( ip => ({
+          ip:   ip.replace(/\/[\d\D]*/, ''),
+          name: ''
+        }));
+      } catch (e) {
+        return [];
+      }
+    },
+
+    vmiIp() {
+      const vmiResources = this.$store.getters[`${ this.inStore }/all`](HCI.VMI);
+      const resource = vmiResources.find(VMI => VMI.id === this.value) || null;
+      const networksName = this.row.networksName || [];
+      const vmiNetworks = resource?.spec?.networks || [];
+
+      return (resource?.status?.interfaces || []).filter((intf) => {
+        return isIpv4(intf.ipAddress) && networksName.includes(intf.name);
+      }).map((intf) => {
+        let name;
+        const network = vmiNetworks.find(network => network.name === intf.name);
+
+        if (network && network.multus) {
+          name = network.multus.networkName;
+        } else if (network && network.pod) {
+          name = MANAGEMENT_NETWORK;
+        }
+
+        return {
+          ip: intf.ipAddress,
+          name
+        };
+      });
+    },
+
+    showIP() {
+      return this.row.stateDisplay !== OFF;
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="showIP">
+    <span v-for="{ip, name} in ips" :key="ip">
+      <CopyToClipboardText v-clean-tooltip="name" :text="ip" />
+    </span>
+  </div>
+</template>
diff --git a/pkg/harvester/formatters/HarvesterListener.vue b/pkg/harvester/formatters/HarvesterListener.vue
new file mode 100644
index 00000000..dd38eabb
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterListener.vue
@@ -0,0 +1,75 @@
+<script>
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+import { isMaybeSecure } from '@shell/utils/url';
+
+export default {
+  components: { CopyToClipboardText },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true,
+    },
+    col: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    parsed() {
+      const row = this.row || {};
+      const listeners = row?.spec?.listeners || [];
+      const out = [];
+      const address = row.status?.address;
+
+      if (!address) {
+        return;
+      }
+
+      if (listeners.length > 0) {
+        listeners.forEach((p) => {
+          let proxyUrl;
+
+          const hidePort = [80, 443].includes(p.port);
+
+          if (p?.protocol === 'TCP' && hidePort) {
+            if (isMaybeSecure(p.port, p?.protocol)) {
+              proxyUrl = `https://${ address }:${ p.port }`;
+            } else {
+              proxyUrl = `http://${ address }:${ p.port }`;
+            }
+          } else {
+            proxyUrl = `http://${ address }:${ p.port }`;
+          }
+
+          let label = address;
+
+          if (!hidePort) {
+            label = `${ address }:${ p.port }`;
+          }
+
+          const html = `<a href="${ proxyUrl }" target="_blank" rel="noopener noreferrer nofollow">${ label }</a>`;
+
+          out.push({ html, label });
+        });
+      } else {
+        out.push({ html: address, label: address });
+      }
+
+      return out;
+    },
+  },
+};
+</script>>
+
+<template>
+  <div>
+    <div
+      v-for="(port, index) in parsed"
+      :key="index"
+    >
+      <CopyToClipboardText :text="port.label" />
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/formatters/HarvesterMemoryUsed.vue b/pkg/harvester/formatters/HarvesterMemoryUsed.vue
new file mode 100644
index 00000000..53515204
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterMemoryUsed.vue
@@ -0,0 +1,146 @@
+<script>
+import ConsumptionGauge from '@shell/components/ConsumptionGauge';
+import { METRIC, NODE } from '@shell/config/types';
+import { formatSi, exponentNeeded, UNITS, parseSi } from '@shell/utils/units';
+
+export default {
+  name:       'HarvesterMemoryUsed',
+  components: { ConsumptionGauge },
+
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    resourceName: {
+      type:    String,
+      default: ''
+    },
+
+    showUsed: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: {
+    metrics() {
+      return this.$store.getters['harvester/byId'](METRIC.NODE, this.row.id);
+    },
+
+    memoryTotal() {
+      let out = 0;
+
+      if (this.metrics) {
+        out = this.metrics.memoryCapacity;
+      }
+
+      return out;
+    },
+
+    memoryUnits() {
+      const exponent = exponentNeeded(this.memoryTotal, 1024);
+
+      return `${ UNITS[exponent] }iB`;
+    },
+
+    node() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const node = this.$store.getters[`${ inStore }/byId`](NODE, this.row.id);
+
+      return node;
+    },
+
+    reserved() {
+      if (this.metrics) {
+        return this.node.memoryReserved;
+      } else {
+        return 0;
+      }
+    },
+
+    used() {
+      if (this.metrics) {
+        return parseSi(this.metrics?.usage?.memory || '0m', { increment: 1024 });
+      } else {
+        return 0;
+      }
+    },
+  },
+
+  methods: {
+    memoryFormatter(value) {
+      const exponent = exponentNeeded(this.memoryTotal, 1024);
+
+      const formatOptions = {
+        addSuffix:   false,
+        increment:   1024,
+        minExponent: exponent
+      };
+
+      return formatSi(value, formatOptions);
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <ConsumptionGauge
+      :capacity="memoryTotal"
+      :used="reserved"
+      :units="memoryUnits"
+      :number-formatter="memoryFormatter"
+      :resource-name="resourceName"
+    >
+      <template #title="{amountTemplateValues, formattedPercentage}">
+        <span>
+          {{ t('clusterIndexPage.hardwareResourceGauge.reserved') }}
+        </span>
+        <span class="precent-data">
+          {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
+          <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
+          </span>
+        </span>
+      </template>
+    </ConsumptionGauge>
+    <div
+      v-if="showUsed"
+      class="mt-10"
+    >
+      <ConsumptionGauge
+        :capacity="memoryTotal"
+        :used="used"
+        :units="memoryUnits"
+        :number-formatter="memoryFormatter"
+      >
+        <template #title="{amountTemplateValues, formattedPercentage}">
+          <span>
+            {{ t('clusterIndexPage.hardwareResourceGauge.used') }}
+          </span>
+          <span class="precent-data">
+            {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
+            <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
+            </span>
+          </span>
+        </template>
+      </ConsumptionGauge>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.precent-data {
+  white-space: nowrap;
+}
+</style>
diff --git a/pkg/harvester/formatters/HarvesterMigrationState.vue b/pkg/harvester/formatters/HarvesterMigrationState.vue
new file mode 100644
index 00000000..e72a856d
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterMigrationState.vue
@@ -0,0 +1,88 @@
+<script>
+import { HCI } from '../types';
+import { BadgeState } from '@components/BadgeState';
+
+export default {
+  components: { BadgeState },
+
+  props: {
+    vmResource: {
+      type:     Object,
+      required: true
+    },
+    showSuccess: {
+      type:    Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    vmiResource() {
+      const vmiList = this.$store.getters['harvester/all'](HCI.VMI) || [];
+      const vmi = vmiList.find( (VMI) => {
+        return VMI?.metadata?.ownerReferences?.[0]?.uid === this.vmResource?.metadata?.uid;
+      });
+
+      return vmi;
+    },
+    migrationState() {
+      return this.vmiResource?.migrationState?.status || '';
+    },
+    migrationBackground() {
+      return this.vmiResource?.migrationStateBackground || '';
+    }
+  },
+
+  watch: {
+    migrationState(neu) {
+      this.$emit('state-changed', neu);
+    }
+  },
+};
+</script>
+
+<template>
+  <div v-if="migrationState">
+    <span v-if="!showSuccess">/</span>
+    <BadgeState :label="migrationState" :color="migrationBackground" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .badge-state {
+    padding: 5px 10px;
+    border: 1px solid transparent;
+    border-radius: 20px;
+
+    &.bg-info {
+      border-color: var(--primary);
+    }
+
+    &.bg-error {
+      border-color: var(--error);
+    }
+
+    &.bg-warning {
+      border-color: var(--warning);
+    }
+
+    // Successful states are de-emphasized by using [text-]color instead of background-color
+    &.bg-success {
+      color: var(--success);
+      border-color: var(--success);
+      background: transparent;
+    }
+  }
+
+  .sortable-table TD .badge-state {
+    @include clip;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    padding: 2px 10px 1px 10px;
+    font-size: 1em;
+    max-width: 200px;
+    font-size: .85em;
+    vertical-align: middle;
+  }
+</style>
diff --git a/pkg/harvester/formatters/HarvesterStorageUsed.vue b/pkg/harvester/formatters/HarvesterStorageUsed.vue
new file mode 100644
index 00000000..97ec63ea
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterStorageUsed.vue
@@ -0,0 +1,191 @@
+<script>
+import ConsumptionGauge from '@shell/components/ConsumptionGauge';
+import { LONGHORN } from '@shell/config/types';
+import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
+
+export default {
+  name:       'HarvesterStorageUsed',
+  components: { ConsumptionGauge },
+
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    resourceName: {
+      type:    String,
+      default: ''
+    },
+
+    showReserved: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: {
+    usage() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.row.id }`) || {};
+
+      return longhornNode?.used || 0;
+    },
+
+    reserved() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.row.id }`);
+      let reserved = 0;
+
+      const disks = longhornNode?.spec?.disks || {};
+
+      Object.values(disks).map((disk) => {
+        if (disk.allowScheduling) {
+          reserved += disk.storageReserved;
+        }
+      });
+
+      return reserved;
+    },
+
+    total() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.row.id }`);
+      let out = 0;
+
+      const diskStatus = longhornNode?.status?.diskStatus || {};
+
+      Object.values(diskStatus).map((disk) => {
+        if (disk?.storageMaximum) {
+          out += disk.storageMaximum;
+        }
+      });
+
+      return out;
+    },
+
+    units() {
+      const exponent = exponentNeeded(this.total, 1024);
+
+      return `${ UNITS[exponent] }iB`;
+    },
+
+    used() {
+      let out = this.formatter(this.usage || 0);
+
+      if (!Number.parseFloat(out) > 0) {
+        out = this.formatter(this.usage || 0, { canRoundToZero: false });
+      }
+
+      return out;
+    },
+
+    formatReserved() {
+      let out = this.formatter(this.reserved || 0);
+
+      if (!Number.parseFloat(out) > 0) {
+        out = this.formatter(this.reserved || 0, { canRoundToZero: false });
+      }
+
+      return out;
+    },
+
+    usedAmountTemplateValues() {
+      return {
+        used:  this.used,
+        total: this.formatter(this.total || 0),
+        unit:  this.units,
+      };
+    },
+
+    reservedAmountTemplateValues() {
+      return {
+        used:  this.formatReserved,
+        total: this.formatter(this.total || 0),
+        unit:  this.units,
+      };
+    },
+  },
+
+  methods: {
+    formatter(value, format) {
+      const minExponent = exponentNeeded(this.total, 1024);
+      const formatOptions = {
+        addSuffix: false,
+        increment: 1024,
+        minExponent,
+      };
+
+      return formatSi(value, {
+        ...formatOptions,
+        ...format,
+      });
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="showReserved"
+    >
+      <ConsumptionGauge
+        :capacity="total"
+        :used="reserved"
+        :units="units"
+        :number-formatter="formatter"
+        :resource-name="resourceName"
+      >
+        <template #title="{formattedPercentage}">
+          <span>
+            {{ t('clusterIndexPage.hardwareResourceGauge.reserved') }}
+          </span>
+          <span class="precent-data">
+            {{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
+            <span class="ml-10 percentage">
+              /&nbsp;{{ formattedPercentage }}
+            </span>
+          </span>
+        </template>
+      </ConsumptionGauge>
+    </div>
+    <ConsumptionGauge
+      :capacity="total"
+      :used="usage"
+      :units="units"
+      :number-formatter="formatter"
+      :resource-name="showReserved ? '' : resourceName"
+      :class="{
+        'mt-10': showReserved,
+      }"
+    >
+      <template #title="{formattedPercentage}">
+        <span>
+          {{ t('node.detail.glance.consumptionGauge.used') }}
+        </span>
+        <span class="precent-data">
+          {{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
+          <span class="ml-10 percentage">
+            /&nbsp;{{ formattedPercentage }}
+          </span>
+        </span>
+      </template>
+    </ConsumptionGauge>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.precent-data {
+  white-space: nowrap;
+}
+</style>
diff --git a/pkg/harvester/formatters/HarvesterVFAddress.vue b/pkg/harvester/formatters/HarvesterVFAddress.vue
new file mode 100644
index 00000000..be8d0749
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterVFAddress.vue
@@ -0,0 +1,116 @@
+<script>
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+
+export default {
+  name: 'HarvesterVFAddress',
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  data() {
+    return { showAll: false, limitedNumbers: 3 };
+  },
+
+  computed: {
+    allVFs() {
+      return this.row.status?.vfAddresses || [];
+    },
+
+    rows() {
+      const out = this.allVFs.map((O) => {
+        const [prefix, middle, suffix] = O.split(':');
+        const q = `${ this.row.spec?.nodeName }-${ prefix }${ middle }${ suffix.replace('.', '') }`;
+        const to = {
+          name:   `${ HARVESTER_PRODUCT }-c-cluster-resource`,
+          params: { cluster: this.$store.getters['clusterId'], resource: this.row.childDevice },
+          query:  { q }
+        };
+
+        return {
+          to,
+          name: O
+        };
+      });
+
+      return {
+        visible:   out.slice(0, this.limitedNumbers),
+        invisible: out.slice(this.limitedNumbers)
+      };
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="vfs">
+    <span
+      v-for="(vf, index) in rows.visible"
+      :key="vf.name"
+    >
+      <router-link
+        :to="vf.to"
+      >
+        {{ vf.name }}
+      </router-link>
+
+      <span v-if="index < rows.visible.length - 1">, </span>
+    </span>
+
+    <v-popover
+      trigger="click"
+      placement="top"
+    >
+      <span v-if="allVFs.length > limitedNumbers">
+        , <a
+          href="javascript:void(0)"
+          class="show-more"
+          @click.prevent="showAll = !showAll"
+        >
+          {{ t('harvester.sriov.showMore') }}
+        </a>
+      </span>
+
+      <template v-slot:popover>
+        <div class="vfs-popup">
+          <div>
+            <span
+              v-for="(vf, index) in rows.invisible"
+              :key="vf.name"
+            >
+              <router-link
+                :to="vf.to"
+              >
+                {{ vf.name }}
+              </router-link>
+
+              <span v-if="index < rows.invisible.length - 1">, </span>
+            </span>
+          </div>
+        </div>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+  .vfs {
+    min-width: 380px;
+
+    .show-more {
+      font-size: 12px;
+    }
+  }
+  .popover .popover-inner .vfs-popup a {
+    color: var(--link);
+
+    &:hover {
+      text-decoration: underline;
+      color: var(--body-text);
+    }
+  }
+</style>
diff --git a/pkg/harvester/formatters/HarvesterVFsNum.vue b/pkg/harvester/formatters/HarvesterVFsNum.vue
new file mode 100644
index 00000000..f7a5bd65
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterVFsNum.vue
@@ -0,0 +1,34 @@
+<script>
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+
+export default {
+  name: 'HarvesterVFsNum',
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  computed: {
+    to() {
+      return {
+        name:   `${ HARVESTER_PRODUCT }-c-cluster-resource`,
+        params: { cluster: this.$store.getters['clusterId'], resource: this.row.childDevice },
+        query:  { parentSriov: this.row.id }
+      };
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="vfs-num">
+    <router-link
+      :to="to"
+    >
+      {{ row.numVFs }}
+    </router-link>
+  </div>
+</template>
diff --git a/pkg/harvester/formatters/HarvesterVGpuDevices.vue b/pkg/harvester/formatters/HarvesterVGpuDevices.vue
new file mode 100644
index 00000000..fcf7391d
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterVGpuDevices.vue
@@ -0,0 +1,113 @@
+<script>
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+
+export default {
+  name: 'HarvesterVGpuDevices',
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  data() {
+    return { showAll: false, limitedNumbers: 2 };
+  },
+
+  computed: {
+    allVGpuDevices() {
+      return this.row.status?.vGPUDevices || [];
+    },
+
+    rows() {
+      const out = this.allVGpuDevices.map((device) => {
+        const to = {
+          name:   `${ HARVESTER_PRODUCT }-c-cluster-resource`,
+          params: { cluster: this.$store.getters['clusterId'], resource: this.row.childDevice },
+          query:  { q: device }
+        };
+
+        return {
+          to,
+          name: device
+        };
+      });
+
+      return {
+        visible:   out.slice(0, this.limitedNumbers),
+        invisible: out.slice(this.limitedNumbers)
+      };
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="vgpudevices">
+    <span
+      v-for="(vgpu, index) in rows.visible"
+      :key="vgpu.name"
+    >
+      <router-link
+        :to="vgpu.to"
+      >
+        {{ vgpu.name }}
+      </router-link>
+
+      <span v-if="index < rows.visible.length - 1">, </span>
+    </span>
+
+    <v-popover
+      trigger="click"
+      placement="top"
+    >
+      <span v-if="allVGpuDevices.length > limitedNumbers">
+        , <a
+          href="javascript:void(0)"
+          class="show-more"
+          @click.prevent="showAll = !showAll"
+        >
+          {{ t('harvester.sriovgpu.showMore') }}
+        </a>
+      </span>
+
+      <template v-slot:popover>
+        <div class="vgpu-popup">
+          <div>
+            <span
+              v-for="(vgpu, index) in rows.invisible"
+              :key="vgpu.name"
+            >
+              <router-link
+                :to="vgpu.to"
+              >
+                {{ vgpu.name }}
+              </router-link>
+
+              <span v-if="index < rows.invisible.length - 1">, </span>
+            </span>
+          </div>
+        </div>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .vgpudevices {
+    min-width: 380px;
+
+    .show-more {
+      font-size: 12px;
+    }
+  }
+  .popover .popover-inner .vgpu-popup a {
+    color: var(--link);
+
+    &:hover {
+      text-decoration: underline;
+      color: var(--body-text);
+    }
+  }
+</style>
diff --git a/pkg/harvester/formatters/HarvesterVmState.vue b/pkg/harvester/formatters/HarvesterVmState.vue
new file mode 100644
index 00000000..9434ffe7
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterVmState.vue
@@ -0,0 +1,175 @@
+<script>
+import VMState from '@shell/components/formatter/BadgeStateFormatter';
+import HarvesterMigrationState from './HarvesterMigrationState';
+
+export default {
+  components: { VMState, HarvesterMigrationState },
+  props:      {
+    value: {
+      type:    String,
+      default: ''
+    },
+
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    allNodeNetwork: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    allClusterNetwork: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+
+  data() {
+    return {
+      isMigrating: false,
+      timer:       null,
+    };
+  },
+
+  beforeDestroy() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  },
+
+  computed: {
+    warningMessage() {
+      const out = [];
+
+      if (this.row?.actualState === 'VM error' && this.row.warningMessage?.message) {
+        out.push(this.row.warningMessage?.message);
+      }
+
+      if (this.row?.migrationMessage) {
+        out.push(this.row?.migrationMessage.message);
+      }
+
+      if (this.row.warningMessage?.message) {
+        if (this.row.warningMessage?.pod) {
+          const pod = this.row.warningMessage.pod;
+
+          if (pod.metadata?.state?.error && !/pod has unbound immediate PersistentVolumeClaims/.test(pod.metadata?.state?.message)) {
+            out.push(pod.metadata?.state?.message);
+          }
+        } else {
+          out.push(this.row.warningMessage?.message);
+        }
+      }
+
+      return out;
+    }
+  },
+
+  methods: {
+    migrationStateChanged(neu) {
+      if (neu === 'Failed') {
+        this.isMigrating = false;
+      } else {
+        this.isMigrating = !!neu;
+      }
+    },
+
+    showMessage(show) {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+
+      if (this.$refs.popover) {
+        if (show) {
+          this.$refs.popover.show();
+        } else {
+          this.$refs.popover.hide();
+        }
+      }
+    },
+
+    delayClose() {
+      this.timer = setTimeout(() => {
+        this.showMessage(false);
+      }, 500);
+    },
+
+    async dismiss() {
+      try {
+        await this.row.doAction('dismissInsufficientResourceQuota');
+      } catch (err) {
+        if (err?._status === 400 || err?._status === 503) {
+          this.$store.dispatch('growl/error', {
+            title:   this.t('harvester.notification.title.error'),
+            message: err?.errors[0]
+          }, { root: true });
+        }
+      }
+    },
+
+    canMiss(row, message) {
+      return row.warningMessage?.message === message && row.warningMessage?.canDismiss;
+    }
+  },
+};
+</script>
+
+<template>
+  <span>
+    <HarvesterMigrationState v-show="isMigrating" :vm-resource="row" @state-changed="migrationStateChanged" />
+    <div v-show="!isMigrating" class="state">
+      <VMState :row="row" />
+      <v-popover
+        v-if="warningMessage.length"
+        ref="popover"
+        trigger="manual"
+        offset="16"
+      >
+        <span
+          class="tooltip-target"
+          @mouseenter="showMessage(true)"
+          @mouseleave="delayClose()"
+        >
+          <i class="icon icon-warning icon-lg text-warning" />
+        </span>
+
+        <template slot="popover">
+          <div
+            @mouseenter="showMessage(true)"
+            @mouseleave="showMessage(false)"
+          >
+            <p v-for="(message, index) in warningMessage" :key="message">
+              {{ index + 1 }}.
+              <a
+                v-if="canMiss(row, message)"
+                class="text-link"
+                role="button"
+                @click="dismiss"
+              >
+                {{ t('harvester.upgradePage.dismissMessage') }}
+              </a>
+              {{ message }}
+            </p>
+          </div>
+        </template>
+      </v-popover>
+    </div>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.state {
+  display: flex;
+  justify-content: space-between;
+
+  .icon-warning {
+    margin-top: 2px;
+  }
+}
+</style>
diff --git a/pkg/harvester/formatters/HarvesterVolumeState.vue b/pkg/harvester/formatters/HarvesterVolumeState.vue
new file mode 100644
index 00000000..930a0a58
--- /dev/null
+++ b/pkg/harvester/formatters/HarvesterVolumeState.vue
@@ -0,0 +1,94 @@
+<script>
+import ProgressBarMulti from '@shell/components/ProgressBarMulti';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import VolumeState from '@shell/components/formatter/BadgeStateFormatter';
+
+export default {
+  components: { VolumeState, ProgressBarMulti },
+  props:      {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  computed: {
+    warningMessage() {
+      return this.row.relatedPV?.metadata?.annotations?.[HCI_ANNOTATIONS.VOLUME_ERROR];
+    },
+
+    rebuildStatus() {
+      return this.row.longhornEngine?.status?.rebuildStatus;
+    },
+
+    isRebuilding() {
+      return this.rebuildStatus && Object.keys(this.rebuildStatus).length > 0;
+    },
+
+    percentage() {
+      if (!this.isRebuilding) {
+        return;
+      }
+
+      const rebuildStatus = Object.values(this.rebuildStatus)?.[0];
+      const value = rebuildStatus?.progress;
+
+      return [{
+        value,
+        color: 'bg-warning'
+      }];
+    },
+
+    rebuildingMessage() {
+      return this.$store.getters['i18n/t']('harvester.volume.rebuildingMessage', { percentage: this.percentage[0].value });
+    }
+  },
+};
+</script>
+
+<template>
+  <span>
+    <div>
+      <ProgressBarMulti
+        v-if="isRebuilding"
+        v-clean-tooltip="rebuildingMessage"
+        :values="percentage"
+        :min="0"
+        :max="100"
+        class="mb-10"
+      />
+    </div>
+    <div class="state">
+      <VolumeState :row="row" />
+      <v-popover
+        v-if="!!warningMessage"
+        trigger="hover"
+        offset="16"
+      >
+        <span class="tooltip-target">
+          <i class="icon icon-warning icon-lg text-warning" />
+        </span>
+
+        <template slot="popover">
+          <p class="warning-message">
+            {{ warningMessage }}
+          </p>
+        </template>
+      </v-popover>
+    </div>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.state {
+  display: flex;
+
+  .icon-warning {
+    margin-top: 2px;
+  }
+}
+.warning-message:first-letter {
+  text-transform: uppercase;
+}
+
+</style>
diff --git a/pkg/harvester/formatters/NetworkRouteConnectivity.vue b/pkg/harvester/formatters/NetworkRouteConnectivity.vue
new file mode 100644
index 00000000..425f536a
--- /dev/null
+++ b/pkg/harvester/formatters/NetworkRouteConnectivity.vue
@@ -0,0 +1,47 @@
+<script>
+import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter';
+
+export default {
+  components: { BadgeStateFormatter },
+  props:      {
+    value: {
+      type:    String,
+      default: ''
+    },
+    row: {
+      type:     Object,
+      required: true
+    },
+    col: {
+      type:    Object,
+      default: () => {}
+    },
+
+    arbitrary: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {};
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="value !== 'N/A'" class="text">
+      <BadgeStateFormatter class="ml-10" :arbitrary="arbitrary" :row="row" :value="value" />
+    </div>
+    <div v-else class="text">
+      {{ value }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text {
+  text-align: center;
+}
+</style>
diff --git a/pkg/harvester/formatters/RelatedVolumeSnapshotCounts.vue b/pkg/harvester/formatters/RelatedVolumeSnapshotCounts.vue
new file mode 100644
index 00000000..72fa4d17
--- /dev/null
+++ b/pkg/harvester/formatters/RelatedVolumeSnapshotCounts.vue
@@ -0,0 +1,37 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+    row: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  computed: {
+    to() {
+      const to = this.row?.detailLocation;
+
+      to.hash = '#instances';
+
+      return to;
+    },
+  }
+};
+</script>
+
+<template>
+  <router-link
+    v-if="value.length > 0"
+    :to="to"
+  >
+    {{ value.length }}
+  </router-link>
+</template>
diff --git a/pkg/harvester/formatters/SnapshotTargetVolume.vue b/pkg/harvester/formatters/SnapshotTargetVolume.vue
new file mode 100644
index 00000000..7b785123
--- /dev/null
+++ b/pkg/harvester/formatters/SnapshotTargetVolume.vue
@@ -0,0 +1,45 @@
+<script>
+import { PVC } from '@shell/config/types';
+export default {
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+    row: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  async fetch() {
+    this.volumeList = await this.$store.dispatch('harvester/findAll', { type: PVC });
+  },
+  data() {
+    return { volumeList: [] };
+  },
+  computed: {
+    volume() {
+      const namespace = this.row?.metadata?.namespace;
+      const volume = this.volumeList.find( (V) => V.id === `${ namespace }/${ this.value }`) || {};
+
+      return volume;
+    },
+    to() {
+      return this.volume?.detailLocation;
+    },
+  }
+};
+</script>
+<template>
+  <router-link
+    v-if="to"
+    :to="to"
+  >
+    {{ value }}
+  </router-link>
+  <span v-else>
+    {{ value }}
+  </span>
+</template>
diff --git a/pkg/harvester/formatters/StateWithPopover.vue b/pkg/harvester/formatters/StateWithPopover.vue
new file mode 100644
index 00000000..1d8b747b
--- /dev/null
+++ b/pkg/harvester/formatters/StateWithPopover.vue
@@ -0,0 +1,59 @@
+<script>
+import State from '@shell/components/formatter/BadgeStateFormatter';
+
+export default {
+  components: { State },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  computed: {
+    warningMessages() {
+      return this.row.warningMessages;
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <div class="state">
+      <State
+        :row="row"
+      />
+      <v-popover
+        v-if="warningMessages.length > 0"
+        trigger="hover"
+        offset="16"
+      >
+        <span class="tooltip-target">
+          <i class="icon icon-warning icon-lg text-warning" />
+        </span>
+
+        <template v-slot:popover>
+          <p
+            v-for="(message, index) in warningMessages"
+            :key="message.text"
+          >
+            {{ index + 1 }}.
+            {{ message.text }}
+          </p>
+        </template>
+      </v-popover>
+    </div>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.state {
+  display: flex;
+
+  .icon-warning {
+    margin-top: 2px;
+  }
+}
+</style>
diff --git a/pkg/harvester/index.ts b/pkg/harvester/index.ts
index 0be76a0b..caf46dd5 100644
--- a/pkg/harvester/index.ts
+++ b/pkg/harvester/index.ts
@@ -1,6 +1,6 @@
 import { importTypes } from '@rancher/auto-import';
 import { IPlugin } from '@shell/core/types';
-import extensionRouting from './routing/extension-routing';
+import extensionRouting from './routing/harvester-routing';
 import harvesterCommonStore from './store/harvester-common';
 import harvesterStore from './store/harvester-store';
 import customValidators from './validators';
@@ -22,7 +22,7 @@ export default function(plugin: IPlugin): void {
   plugin.addDashboardStore(harvesterCommonStore.config.namespace, harvesterCommonStore.specifics, harvesterCommonStore.config);
   plugin.addDashboardStore(harvesterStore.config.namespace, harvesterStore.specifics, harvesterStore.config, harvesterStore.init);
 
-  // plugin.validators = customValidators;
+  plugin.validators = customValidators;
 
   plugin.register('component', 'NavHeaderRight', () => import(/* webpackChunkName: "pkg/harvester/components" */ `./components/HarvesterUpgradeHeader.vue`));
 }
diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index d0abafad..67513932 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -55,7 +55,7 @@ harvester:
     cloneVM:
       title: Clone VM
       name: New VM Name
-      type: clone volume data
+      type: Clone volume data
       action:
         create: Create
         clone: Clone
@@ -181,12 +181,14 @@ harvester:
     volumeSnapshotCounts: Snapshot Counts
     networkState: Network State
     storageClass: Storage Class
+    restore: Restore
   tab:
     volume: Volumes
     network: Networks
     advanced: Advanced Options
     accessCredentials: Access Credentials
     pciDevices: PCI Devices
+    vGpuDevices: VGPU Devices
     vmScheduling: VM Scheduling
     instanceLabel: Instance Labels
   fields:
@@ -283,6 +285,8 @@ harvester:
     image:
       ruleTip: 'The URL you have entered ends in an extension that we do not support. We only accept image files that end in .img, .iso, .qcow, .qcow2, .raw.'
       ruleFileTip: 'The file you have chosen ends in an extension that we do not support. We only accept image files that end in .img, .iso, .qcow, .qcow2, .raw.'
+    hash:
+      sha512: 'Invalid SHA512 checksum.'
 
   dashboard:
     label: Dashboard
@@ -344,6 +348,7 @@ harvester:
       manufacturer: Manufacturer
       serialNumber: Serial Number
       model: Model
+      etcd: Witness Node
     enableMaintenance:
       title: Enable Maintenance Mode
       protip: The operation will migrate all virtual machines on this node to other nodes.
@@ -699,6 +704,8 @@ harvester:
         =1 {1 image is uploading, please do not refresh or close the page.}
         other {{count} images are uploading, please do not refresh or close the page.}
         }
+    checksum: Checksum
+    checksumTip: Validate the image using the SHA512 checksum, if specified.
 
   vmTemplate:
     label: Templates
@@ -779,7 +786,22 @@ harvester:
       createNew: Create new
       replaceExisting: Replace existing
       virtualMachineName: Virtual Machine Name
+      keepMacAddress: Keep MAC Address
     matchTarget: The current backup target does not match the existing one.
+    progress: 
+      details: Volume details
+      tooltip:
+        starting: Backup initiating
+        progress: Backup in progress
+        complete: Backup completed
+
+  restore:
+    progress:
+      details: Volume details
+      tooltip:
+        starting: Restore initiating
+        progress: Restore in progress
+        complete: Restore completed
 
   network:
     label: VM Networks
@@ -851,6 +873,8 @@ harvester:
       tip: 'IP Range should be in IPV4 format. <code>Number of IPs Required = Number of Nodes * 4 + Number of Disks * 2 + Number of Images to Download/Upload </code>. See <a href="https://docs.harvesterhci.io/v1.2/advanced/storagenetwork#configuration-example" target="_blank">doc</a> for more details.'
     vmForceDeletionPolicy:
       period: Period
+    autoRotateRKE2Certs:
+      expiringInHours: Expiring in
     httpProxy:
       warning: 'WARNING: <br/> If you configure "http-proxy" and "https-proxy", you must also put Harvester node&apos;s CIDR into "no-proxy", otherwise the Harvester cluster will be broken.'
     supportBundleImage:
@@ -1094,6 +1118,7 @@ harvester:
       'cattle-monitoring-system/rancher-monitoring': rancher-monitoring is an addon to collect Harvester cluster and VM metrics, view them on the embedded dashboard, and send alert(s) to remote servers.
       'vm-import-controller': vm-import-controller is an addon to help migrate VM workloads from other source clusters to an existing Harvester cluster.
       'pcidevices-controller': pcidevices-controller is an addon to help discover PCI devices for nodes in your cluster and allow users to prepare devices for PCI Passthrough, for use with Harvester VM and guest Clusters.
+      'nvidia-driver-toolkit': 'nvidia-driver-toolkit is an addon to enable vGPU devices and assign them to Harvester VMs.'
       'rancher-logging': rancher-logging is an addon to collect versatile logs, events and audits from the Harvester cluster and route them to many kinds of servers based on flows.
       'rancher-monitoring': rancher-monitoring is an addon to collect Harvester cluster and VM metrics, view them on the embedded dashboard, and send alert(s) to remote servers.
       'rancher-vcluster': rancher-vcluster deploys a vcluster with rancher installed.
@@ -1109,8 +1134,18 @@ harvester:
       rancherVersion: Rancher Version
       password: Bootstrap Password
     switchFailed: "{action} {name} failed!"
-      
-
+    nvidiaDriverToolkit:
+      titles:
+        basic: Controller
+        image: Image
+        driver: Driver
+      image:
+        tag: Image Tag
+        repository: Image Repository
+      driver:
+        location: Driver Location
+      parsingSpecError:
+        The field 'spec.valuesContent' has invalid format.
 
   loadBalancer:
     label: Load Balancers
@@ -1153,6 +1188,9 @@ harvester:
           }
     backendServers:
       label: Backend Servers
+    healthCheck:
+      warning:
+        portInUse: Warning, Backend Port {port} is in use in Health Check settings; in case of updating the port, update the Health Check settings accordingly.
 
   ipPool:
     label: IP Pools
@@ -1215,6 +1253,38 @@ harvester:
     showMore: Show More
     parentSriov: Filter By Parent SR-IOV
 
+  sriovgpu:
+    label: SR-IOV GPU Devices
+    nodeName: Node
+    numVFs: Number Of Virtual Functions
+    vfAddresses: Virtual Functions Addresses
+    vGpuDevices: vGPU Devices
+    showMore: Show More
+    parentSriov: Filter By Parent SR-IOV GPU
+    noPermission: Please contact system admin to add Harvester addons first
+    goSetting:
+      prefix: The nvidia-driver-toolkit addon is not enabled, click
+      middle: here
+      suffix: to enable it to manage your SR-IOV GPU devices.
+
+  vgpu:
+    label: vGPU Devices
+    noPermission: Please contact system admin to add Harvester addons first
+    goSetting:
+      prefix: The nvidia-driver-toolkit addon is not enabled, click
+      middle: here
+      suffix: to enable it to manage your vGPU devices.
+    enableGroup: Enable Group
+    disableGroup: Disable Group
+    enable:
+      title: Select vGPU
+      type: Type
+    available: Available Devices
+    compatibleNodes: Compatible Nodes
+    impossibleSelection: 'There are no hosts with all of the selected devices.'
+    howToUseDevice: 'Use the table below to enable vGPU devices you want to use in this VM.'
+    deviceInTheSameHost: 'You can only select devices on the same host.'
+
   harvesterVlanConfigMigrateDialog:
     targetClusterNetwork: 
       label: Target Cluster Network
@@ -1278,6 +1348,7 @@ advancedSettings:
     'harv-additional-ca': 'Custom CA root certificates for TLS validation.'
     'harv-overcommit-config': 'Resource overcommit configuration.'
     'harv-support-bundle-timeout': 'Support Bundle timeout config in minutes, use 0 to disable the timeout.'
+    'harv-support-bundle-expiration': 'Support Bundle expiration config in minutes.'
     'harv-vm-force-reset-policy': Config the force-reset action when a VM is stuck on a node that is down.
     'harv-ssl-parameters': Custom SSL Parameters for TLS validation.
     'harv-storage-network': 'Longhorn storage-network setting.'
@@ -1287,6 +1358,7 @@ advancedSettings:
     'harv-release-download-url': This setting allows you to configure the <code>upgrade release download</code> URL address. Harvester will get the ISO URL and checksum value from the (<code>$URL</code>/<code>$VERSION</code>/version.yaml) file hosted by the configured URL.
     'harv-default-vm-termination-grace-period-seconds': Config the VM termination grace period for VM stop.
     'harv-ntp-servers': Configure NTP server. You can configure multiple IPv4 addresses or host addresses.
+    'harv-auto-rotate-rke2-certs': The certificate rotation mechanism relies on Rancher. Harvester will automatically update certificates generation to trigger rotation.
 
 typeLabel:
   kubevirt.io.virtualmachine: |-
@@ -1409,6 +1481,19 @@ typeLabel:
       one { SR-IOV Network Device }
       other { SR-IOV Network Devices }
     }
+
+  devices.harvesterhci.io.sriovgpudevice: |-
+    {count, plural,
+      one { SR-IOV GPU Device }
+      other { SR-IOV GPU Devices }
+    }
+
+  devices.harvesterhci.io.vgpudevice: |-
+    {count, plural,
+      one { vGPU Device }
+      other { vGPU Devices }
+    }
+
   harvesterhci.io.secret: |-
     {count, plural,
       one { Secret }
diff --git a/pkg/harvester/l10n/zh-hans.yaml b/pkg/harvester/l10n/zh-hans.yaml
index c30cadab..4d9e3957 100644
--- a/pkg/harvester/l10n/zh-hans.yaml
+++ b/pkg/harvester/l10n/zh-hans.yaml
@@ -1278,6 +1278,7 @@ advancedSettings:
     'harv-additional-ca': '用于 TLS 验证的自定义 CA 根证书。'
     'harv-overcommit-config': '资源超额配置。'
     'harv-support-bundle-timeout': 'Support Bundle 超时配置（单位：分钟），你可以使用 0 来禁用超时。'
+    'harv-support-bundle-expiration': 'Support Bundle 过期配置（单位：分钟）。'
     'harv-vm-force-reset-policy': 配置当虚拟机卡在停机的节点上时的强制重置动作。
     'harv-ssl-parameters': 用于 TLS 验证的自定义 SSL 参数。
     'harv-storage-network': 'Longhorn 存储网络设置。'
diff --git a/pkg/harvester/list/devices.harvesterhci.io.pcidevice.vue b/pkg/harvester/list/devices.harvesterhci.io.pcidevice.vue
new file mode 100644
index 00000000..ab0a779d
--- /dev/null
+++ b/pkg/harvester/list/devices.harvesterhci.io.pcidevice.vue
@@ -0,0 +1,95 @@
+<script>
+import { HCI } from '../types';
+import { SCHEMA } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
+import Banner from '@components/Banner/Banner.vue';
+import Loading from '@shell/components/Loading';
+import MessageLink from '@shell/components/MessageLink';
+import DeviceList from '../edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/DeviceList';
+import { ADD_ONS } from '../config/harvester-map';
+
+const schema = {
+  id:         HCI.PCI_DEVICE,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.PCI_DEVICE,
+    namespaced: false
+  },
+  metadata: { name: HCI.PCI_DEVICE },
+};
+
+export default {
+  name: 'ListPciDevicePage',
+
+  components: {
+    Banner, DeviceList, Loading, MessageLink
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.hasSchema = this.$store.getters[`${ inStore }/schemaFor`](HCI.PCI_DEVICE);
+    this.hasAddonSchema = this.$store.getters[`${ inStore }/schemaFor`](HCI.ADD_ONS);
+
+    if (this.hasSchema) {
+      try {
+        const inStore = this.$store.getters['currentProduct'].inStore;
+
+        const hash = await allHash({
+          pcidevice: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.PCI_DEVICE }),
+          addons:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS }),
+        });
+
+        this.enabledPCI = hash.addons.find(addon => addon.name === ADD_ONS.PCI_DEVICE_CONTROLLER)?.spec?.enabled === true;
+
+        this.$store.dispatch('type-map/configureType', { match: HCI.PCI_DEVICE, isCreatable: this.enabledPCI });
+      } catch (e) {}
+    }
+  },
+
+  data() {
+    return {
+      enabledPCI: false,
+      hasSchema:  false,
+      to:         `${ HCI.ADD_ONS }/harvester-system/${ ADD_ONS.PCI_DEVICE_CONTROLLER }?mode=edit`
+    };
+  },
+
+  computed: {
+    schema() {
+      return schema;
+    },
+
+    rows() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const rows = this.$store.getters[`${ inStore }/all`](HCI.PCI_DEVICE);
+
+      return rows;
+    }
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else-if="!hasAddonSchema">
+    <Banner color="warning">
+      {{ t('harvester.pci.noPCIPermission') }}
+    </Banner>
+  </div>
+  <DeviceList v-else-if="hasSchema && enabledPCI" :devices="rows" :schema="schema" />
+  <div v-else>
+    <Banner color="warning">
+      <MessageLink
+        :to="to"
+        prefix-label="harvester.pci.goSetting.prefix"
+        middle-label="harvester.pci.goSetting.middle"
+        suffix-label="harvester.pci.goSetting.suffix"
+      />
+    </Banner>
+  </div>
+</template>
diff --git a/pkg/harvester/list/devices.harvesterhci.io.sriovgpudevice.vue b/pkg/harvester/list/devices.harvesterhci.io.sriovgpudevice.vue
new file mode 100644
index 00000000..6157f868
--- /dev/null
+++ b/pkg/harvester/list/devices.harvesterhci.io.sriovgpudevice.vue
@@ -0,0 +1,166 @@
+<script>
+import { HCI } from '../types';
+import { ADD_ONS } from '../config/harvester-map';
+import { NODE } from '@shell/config/types';
+import { STATE, AGE, SIMPLE_NAME } from '@shell/config/table-headers';
+import { allHash } from '@shell/utils/promise';
+import Banner from '@components/Banner/Banner.vue';
+import Loading from '@shell/components/Loading';
+import MessageLink from '@shell/components/MessageLink';
+import ResourceTable from '@shell/components/ResourceTable';
+
+export default {
+  name: 'ListSriovGpuDevices',
+
+  components: {
+    Banner,
+    Loading,
+    MessageLink,
+    ResourceTable,
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.schema = this.$store.getters[`${ inStore }/schemaFor`](HCI.SR_IOVGPU_DEVICE);
+    this.hasAddonSchema = this.$store.getters[`${ inStore }/schemaFor`](HCI.ADD_ONS);
+
+    if (this.hasSchema) {
+      try {
+        const inStore = this.$store.getters['currentProduct'].inStore;
+
+        const hash = await allHash({
+          sriovgpus:   this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SR_IOVGPU_DEVICE }),
+          vGpuDevices: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VGPU_DEVICE }),
+          addons:      this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS }),
+        });
+
+        this.hasPCIAddon = hash.addons.find(addon => addon.name === ADD_ONS.PCI_DEVICE_CONTROLLER)?.spec?.enabled === true;
+        this.hasSriovgpuAddon = hash.addons.find(addon => addon.name === ADD_ONS.NVIDIA_DRIVER_TOOLKIT_CONTROLLER)?.spec?.enabled === true;
+      } catch (e) {}
+    }
+  },
+
+  data() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    return {
+      hasAddonSchema:   false,
+      hasPCIAddon:      false,
+      hasSriovgpuAddon: false,
+      schema:           null,
+      hasNode:          this.$store.getters[`${ inStore }/schemaFor`](NODE),
+      toVGpuAddon:      `${ HCI.ADD_ONS }/harvester-system/${ ADD_ONS.NVIDIA_DRIVER_TOOLKIT_CONTROLLER }?mode=edit`,
+      toPciAddon:       `${ HCI.ADD_ONS }/harvester-system/${ ADD_ONS.PCI_DEVICE_CONTROLLER }?mode=edit`
+    };
+  },
+
+  computed: {
+    hasSchema() {
+      return !!this.schema;
+    },
+
+    rows() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const rows = this.$store.getters[`${ inStore }/all`](HCI.SR_IOVGPU_DEVICE);
+
+      return rows;
+    },
+
+    headers() {
+      const nodeCol = {
+        name:      'node',
+        label:     'Node',
+        value:     'realNodeName',
+        sort:      ['realNodeName'],
+        formatter: 'CopyToClipboard',
+        labelKey:  'tableHeaders.node'
+      };
+
+      const cols = [
+        STATE,
+        SIMPLE_NAME,
+        {
+          name:  'address',
+          label: 'Address',
+          value: 'spec.address',
+          sort:  ['spec.address']
+        },
+        {
+          name:        'vfAddresses',
+          label:       'VF Addresses',
+          labelKey:    'harvester.sriovgpu.vfAddresses',
+          sort:        ['status.vfAddresses'],
+          value:       'status.vfAddresses',
+          formatter:   'HarvesterVFAddress',
+          align:       'center',
+          dashIfEmpty: true,
+        },
+        {
+          name:        'vGpuDevices',
+          label:       'vGPU Devices',
+          labelKey:    'harvester.sriovgpu.vGpuDevices',
+          sort:        ['status.vGPUDevices'],
+          value:       'status.vGPUDevices',
+          formatter:   'HarvesterVGpuDevices',
+          align:       'center',
+          dashIfEmpty: true,
+        },
+        {
+          ...AGE,
+          sort: 'metadata.creationTimestamp:desc',
+        }
+      ];
+
+      if (this.hasNode) {
+        cols.splice(-1, 0, nodeCol);
+      }
+
+      return cols;
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else-if="!hasAddonSchema">
+    <Banner color="warning">
+      {{ t('harvester.sriovgpu.noPermission') }}
+    </Banner>
+  </div>
+  <div v-else-if="!hasSriovgpuAddon || !hasPCIAddon">
+    <Banner
+      v-if="!hasSriovgpuAddon"
+      color="warning"
+    >
+      <MessageLink
+        :to="toVGpuAddon"
+        prefix-label="harvester.sriovgpu.goSetting.prefix"
+        middle-label="harvester.sriovgpu.goSetting.middle"
+        suffix-label="harvester.sriovgpu.goSetting.suffix"
+      />
+    </Banner>
+    <Banner
+      v-if="!hasPCIAddon"
+      color="warning"
+    >
+      <MessageLink
+        :to="toPciAddon"
+        prefix-label="harvester.pci.goSetting.prefix"
+        middle-label="harvester.pci.goSetting.middle"
+        suffix-label="harvester.pci.goSetting.suffix"
+      />
+    </Banner>
+  </div>
+  <ResourceTable
+    v-else-if="hasSchema"
+    v-bind="$attrs"
+    :groupable="false"
+    :namespaced="false"
+    :headers="headers"
+    :schema="schema"
+    :rows="rows"
+    key-field="_key"
+  />
+</template>
diff --git a/pkg/harvester/list/devices.harvesterhci.io.sriovnetworkdevice.vue b/pkg/harvester/list/devices.harvesterhci.io.sriovnetworkdevice.vue
new file mode 100644
index 00000000..83ac523a
--- /dev/null
+++ b/pkg/harvester/list/devices.harvesterhci.io.sriovnetworkdevice.vue
@@ -0,0 +1,88 @@
+<script>
+import { STATE, AGE, SIMPLE_NAME } from '@shell/config/table-headers';
+import { NODE } from '@shell/config/types';
+import ResourceTable from '@shell/components/ResourceTable';
+
+export default {
+  name: 'ListHarvesterSRIOV',
+
+  components: { ResourceTable },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+    rows: {
+      type:     Array,
+      required: true,
+    },
+  },
+
+  data() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    return { hasNode: this.$store.getters[`${ inStore }/schemaFor`](NODE) };
+  },
+
+  computed: {
+    headers() {
+      const nodeCol = {
+        name:      'node',
+        label:     'Node',
+        value:     'realNodeName',
+        sort:      ['realNodeName'],
+        formatter: 'CopyToClipboard',
+        labelKey:  'tableHeaders.node'
+      };
+
+      const cols = [
+        STATE,
+        SIMPLE_NAME,
+        {
+          name:        'numVFs',
+          label:       'Num VFs',
+          sort:        ['numVFs'],
+          value:       'numVFs',
+          formatter:   'HarvesterVFsNum',
+          align:       'center',
+          labelKey:    'harvester.sriov.numVFs',
+          dashIfEmpty: true,
+        },
+        {
+          name:        'vfAddresses',
+          label:       'VF Addresses',
+          labelKey:    'harvester.sriov.vfAddresses',
+          sort:        ['status.vfAddresses'],
+          value:       'status.vfAddresses',
+          formatter:   'HarvesterVFAddress',
+          align:       'center',
+          dashIfEmpty: true,
+        },
+        {
+          ...AGE,
+          sort: 'metadata.creationTimestamp:desc',
+        }
+      ];
+
+      if (this.hasNode) {
+        cols.splice(-1, 0, nodeCol);
+      }
+
+      return cols;
+    },
+  }
+};
+</script>
+
+<template>
+  <ResourceTable
+    v-bind="$attrs"
+    :groupable="false"
+    :namespaced="false"
+    :headers="headers"
+    :schema="schema"
+    :rows="rows"
+    key-field="_key"
+  />
+</template>
diff --git a/pkg/harvester/list/devices.harvesterhci.io.vgpudevice.vue b/pkg/harvester/list/devices.harvesterhci.io.vgpudevice.vue
new file mode 100644
index 00000000..b08a3c0a
--- /dev/null
+++ b/pkg/harvester/list/devices.harvesterhci.io.vgpudevice.vue
@@ -0,0 +1,112 @@
+<script>
+import { HCI } from '../types';
+import { allHash } from '@shell/utils/promise';
+import Banner from '@components/Banner/Banner.vue';
+import Loading from '@shell/components/Loading';
+import MessageLink from '@shell/components/MessageLink';
+import VGpuDeviceList from '../edit/kubevirt.io.virtualmachine/VirtualMachineVGpuDevices/VGpuDeviceList';
+import { ADD_ONS } from '../config/harvester-map';
+
+export default {
+  name: 'ListVGpuDevices',
+
+  components: {
+    Banner,
+    Loading,
+    MessageLink,
+    VGpuDeviceList
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.schema = this.$store.getters[`${ inStore }/schemaFor`](HCI.VGPU_DEVICE);
+    this.hasAddonSchema = this.$store.getters[`${ inStore }/schemaFor`](HCI.ADD_ONS);
+
+    if (this.hasSchema) {
+      try {
+        const hash = await allHash({
+          vGpuDevices: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VGPU_DEVICE }),
+          addons:      this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS }),
+        });
+
+        this.hasPCIAddon = hash.addons.find(addon => addon.name === ADD_ONS.PCI_DEVICE_CONTROLLER)?.spec?.enabled === true;
+        this.hasSriovgpuAddon = hash.addons.find(addon => addon.name === ADD_ONS.NVIDIA_DRIVER_TOOLKIT_CONTROLLER)?.spec?.enabled === true;
+
+        this.hasSRIOVGPUSchema = !!this.$store.getters[`${ inStore }/schemaFor`](HCI.SR_IOVGPU_DEVICE);
+        if (this.hasSRIOVGPUSchema) {
+          await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SR_IOVGPU_DEVICE });
+        }
+      } catch (e) {}
+    }
+  },
+
+  data() {
+    return {
+      hasAddonSchema:    false,
+      hasPCIAddon:       false,
+      hasSriovgpuAddon:  false,
+      hasSRIOVGPUSchema: false,
+      schema:            null,
+      toVGpuAddon:       `${ HCI.ADD_ONS }/harvester-system/${ ADD_ONS.NVIDIA_DRIVER_TOOLKIT_CONTROLLER }?mode=edit`,
+      toPciAddon:        `${ HCI.ADD_ONS }/harvester-system/${ ADD_ONS.PCI_DEVICE_CONTROLLER }?mode=edit`
+    };
+  },
+
+  computed: {
+    hasSchema() {
+      return !!this.schema;
+    },
+
+    rows() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const vGpuDevices = this.$store.getters[`${ inStore }/all`](HCI.VGPU_DEVICE) || [];
+      const srioVGpuDevices = this.$store.getters[`${ inStore }/all`](HCI.SR_IOVGPU_DEVICE) || [];
+
+      if (this.hasSRIOVGPUSchema) {
+        return vGpuDevices.filter(device => !!srioVGpuDevices.find(s => s.isEnabled && s.spec?.nodeName === device.spec?.nodeName));
+      }
+
+      return vGpuDevices;
+    }
+  },
+
+  typeDisplay() {
+    return this.t('harvester.vgpu.label');
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else-if="!hasAddonSchema">
+    <Banner color="warning">
+      {{ t('harvester.vgpu.noPermission') }}
+    </Banner>
+  </div>
+  <div v-else-if="!hasSriovgpuAddon || !hasPCIAddon">
+    <Banner
+      v-if="!hasSriovgpuAddon"
+      color="warning"
+    >
+      <MessageLink
+        :to="toVGpuAddon"
+        prefix-label="harvester.vgpu.goSetting.prefix"
+        middle-label="harvester.vgpu.goSetting.middle"
+        suffix-label="harvester.vgpu.goSetting.suffix"
+      />
+    </Banner>
+    <Banner
+      v-if="!hasPCIAddon"
+      color="warning"
+    >
+      <MessageLink
+        :to="toPciAddon"
+        prefix-label="harvester.pci.goSetting.prefix"
+        middle-label="harvester.pci.goSetting.middle"
+        suffix-label="harvester.pci.goSetting.suffix"
+      />
+    </Banner>
+  </div>
+  <VGpuDeviceList v-else-if="hasSchema" :devices="rows" :schema="schema" />
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.addon.vue b/pkg/harvester/list/harvesterhci.io.addon.vue
new file mode 100644
index 00000000..1df270d0
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.addon.vue
@@ -0,0 +1,96 @@
+<script>
+import Loading from '@shell/components/Loading';
+import ResourceTable from '@shell/components/ResourceTable';
+
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../types';
+import { STATE, NAME } from '@shell/config/table-headers';
+
+export default {
+  name: 'ListHarvesterAddons',
+
+  components: {
+    ResourceTable,
+    Loading,
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({ addons: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS }) });
+  },
+
+  computed: {
+    rows() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
+
+      return addons;
+    },
+
+    headers() {
+      return [
+        STATE,
+        NAME,
+        {
+          name:          'description',
+          labelKey:      'tableHeaders.description',
+          value:         'metadata.name',
+          align:         'left',
+          sort:          ['status.description'],
+          formatter:     'Translate',
+          formatterOpts: { prefix: 'harvester.addons.descriptions' },
+        },
+      ];
+    },
+
+    schema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/schemaFor`](HCI.ADD_ONS);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Loading v-if="$fetchState.pending" />
+    <ResourceTable
+      :rows="rows"
+      :groupable="false"
+      :namespaced="false"
+      :schema="schema"
+      :headers="headers"
+    >
+      <template slot="cell:name" slot-scope="scope">
+        <div class="cell-name">
+          <LinkDetail v-model="scope.row.displayName" :row="scope.row" />
+
+          <a
+            v-if="scope.row.metadata.name === 'rancher-vcluster' && scope.row.spec.enabled"
+            v-tooltip="t('harvester.addons.rancherVcluster.accessRancher')"
+            class="ml-5"
+            rel="nofollow noopener noreferrer"
+            target="_blank"
+            :href="scope.row.rancherHostname"
+          >
+            <i class="icon icon-external-link" />
+          </a>
+        </div>
+      </template>
+    </ResourceTable>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+::v-deep .sortable-table TD .badge-state {
+    max-width: 250px;
+    text-overflow: clip;
+  }
+
+::v-deep .cell-name {
+  white-space: nowrap;
+}
+</style>
diff --git a/pkg/harvester/list/harvesterhci.io.cloudtemplate.vue b/pkg/harvester/list/harvesterhci.io.cloudtemplate.vue
new file mode 100644
index 00000000..6daa1002
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.cloudtemplate.vue
@@ -0,0 +1,81 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import { CONFIG_MAP, SCHEMA } from '@shell/config/types';
+import { HCI } from '../types';
+import { NAME, AGE, NAMESPACE } from '@shell/config/table-headers';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+
+const schema = {
+  id:         HCI.CLOUD_TEMPLATE,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.CLOUD_TEMPLATE,
+    namespaced: true
+  },
+  metadata: { name: HCI.CLOUD_TEMPLATE },
+};
+
+export default {
+  name:       'HarvesterListCloudTemplate',
+  components: { ResourceTable, Loading },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.rows = await this.$store.dispatch(`${ inStore }/findAll`, { type: CONFIG_MAP });
+
+    const configSchema = this.$store.getters[`${ inStore }/schemaFor`](CONFIG_MAP);
+
+    if (!configSchema?.collectionMethods.find(x => x.toLowerCase() === 'post')) {
+      this.$store.dispatch('type-map/configureType', { match: HCI.CLOUD_TEMPLATE, isCreatable: false });
+    }
+  },
+
+  data() {
+    return { rows: [] };
+  },
+
+  computed: {
+    headers() {
+      return [
+        NAME,
+        NAMESPACE,
+        {
+          name:      'type',
+          labelKey:  'tableHeaders.type',
+          value:     'metadata.labels',
+          formatter: 'CloudInitType',
+        },
+        AGE
+      ];
+    },
+
+    filteredRows() {
+      return this.rows.filter(r => !!r.metadata?.labels?.[HCI_ANNOTATIONS.CLOUD_INIT]);
+    },
+
+    schema() {
+      return schema;
+    }
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <ResourceTable
+    v-else
+    v-bind="$attrs"
+    :headers="headers"
+    :groupable="true"
+    :schema="schema"
+    :rows="filteredRows"
+    key-field="_key"
+    v-on="$listeners"
+  />
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.dashboard.vue b/pkg/harvester/list/harvesterhci.io.dashboard.vue
index 0b45ceb4..8cf0219e 100644
--- a/pkg/harvester/list/harvesterhci.io.dashboard.vue
+++ b/pkg/harvester/list/harvesterhci.io.dashboard.vue
@@ -15,6 +15,7 @@ import { REASON } from '@shell/config/table-headers';
 import {
   EVENT, METRIC, NODE, SERVICE, PVC, LONGHORN, POD, COUNT, NETWORK_ATTACHMENT
 } from '@shell/config/types';
+import { HCI } from '../types';
 import ResourceSummary, { resourceCounts, colorToCountName } from '@shell/components/ResourceSummary';
 import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
 import HardwareResourceGauge from '@shell/components/HardwareResourceGauge';
@@ -24,8 +25,7 @@ import DashboardMetrics from '@shell/components/DashboardMetrics';
 import metricPoller from '@shell/mixins/metric-poller';
 import { allDashboardsExist } from '@shell/utils/grafana';
 import { isEmpty } from '@shell/utils/object';
-import { HCI } from '../types';
-import HarvesterUpgrade from '../components/HarvesterUpgrade.vue';
+import HarvesterUpgrade from '../components/HarvesterUpgrade';
 import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
 
 dayjs.extend(utc);
@@ -287,8 +287,8 @@ export default {
           let errorCount = 0;
 
           (this.nodes || []).map((node) => {
-            total += node.diskStatusCount?.total;
-            errorCount += node.diskStatusCount?.errorCount;
+            total += node.diskStatusCount.total;
+            errorCount += node.diskStatusCount.errorCount;
           });
 
           out[resource.type] = {
diff --git a/pkg/harvester/list/harvesterhci.io.host.vue b/pkg/harvester/list/harvesterhci.io.host.vue
new file mode 100644
index 00000000..d87a4326
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.host.vue
@@ -0,0 +1,208 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import { STATE, NAME, AGE } from '@shell/config/table-headers';
+import {
+  CAPI, METRIC, NODE, SCHEMA, LONGHORN, POD
+} from '@shell/config/types';
+import { HCI } from '../types';
+import { allHash } from '@shell/utils/promise';
+import metricPoller from '@shell/mixins/metric-poller';
+
+const schema = {
+  id:         HCI.HOST,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.HOST,
+    namespaced: true
+  },
+  metadata: { name: HCI.HOST },
+};
+
+export default {
+  name: 'HarvesterListHost',
+
+  components: {
+    ResourceTable,
+    Loading,
+  },
+
+  mixins: [metricPoller],
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const _hash = {
+      nodes: this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }),
+      pods:  this.$store.dispatch(`${ inStore }/findAll`, { type: POD }),
+    };
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](METRIC.NODE)) {
+      _hash.metric = this.$store.dispatch(`${ inStore }/findAll`, { type: METRIC.NODE });
+    } else {
+      this.hasMetricSchema = false;
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](LONGHORN.NODES)) {
+      _hash.longhornNodes = this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.NODES });
+    } else {
+      this.hasLonghornSchema = false;
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.BLOCK_DEVICE)) {
+      _hash.blockDevices = this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.BLOCK_DEVICE });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.INVENTORY)) {
+      _hash.inventories = this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.INVENTORY });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](CAPI.MACHINE)) {
+      _hash.machines = this.$store.dispatch(`${ inStore }/findAll`, { type: CAPI.MACHINE });
+    }
+
+    const hash = await allHash(_hash);
+
+    this.rows = hash.nodes;
+  },
+
+  data() {
+    return {
+      rows:              [],
+      hasMetricSchema:   true,
+      hasLonghornSchema: true,
+    };
+  },
+
+  computed: {
+    headers() {
+      const out = [
+        {
+          ...STATE,
+          formatter: 'StateWithPopover',
+        },
+        {
+          ...NAME,
+          width: 130,
+        },
+        {
+          name:      'host-ip',
+          labelKey:  'tableHeaders.hostIp',
+          search:    ['internalIp'],
+          value:     'internalIp',
+          formatter: 'CopyToClipboard',
+          sort:      ['internalIp'],
+        },
+      ];
+
+      if (this.hasMetricSchema) {
+        const metricCol = [
+          {
+            name:          'cpu',
+            labelKey:      'node.detail.glance.consumptionGauge.cpu',
+            value:         'id',
+            formatter:     'HarvesterCPUUsed',
+            formatterOpts: { showUsed: true },
+          },
+          {
+            name:          'memory',
+            labelKey:      'node.detail.glance.consumptionGauge.memory',
+            value:         'id',
+            formatter:     'HarvesterMemoryUsed',
+            formatterOpts: { showUsed: true },
+          },
+        ];
+
+        out.splice(-1, 0, ...metricCol);
+      }
+
+      if (this.hasLonghornSchema) {
+        const storageHeader = {
+          name:          'storage',
+          labelKey:      'tableHeaders.storage',
+          value:         'id',
+          formatter:     'HarvesterStorageUsed',
+          formatterOpts: { showReserved: true },
+        };
+
+        out.splice(-1, 0, storageHeader);
+      }
+
+      if (this.hasLonghornSchema) {
+        out.push({
+          name:      'diskState',
+          labelKey:  'tableHeaders.diskState',
+          value:     'diskState',
+          formatter: 'HarvesterDiskState',
+          width:     130,
+        });
+      }
+
+      out.push(AGE);
+
+      out.push({
+        name:  'console',
+        label: ' ',
+        align: 'right',
+        width: 65,
+      });
+
+      return out;
+    },
+
+    schema() {
+      return schema;
+    }
+  },
+  methods: {
+    async loadMetrics() {
+      const schema = this.$store.getters['harvester/schemaFor'](METRIC.NODE);
+
+      if (schema) {
+        await this.$store.dispatch('harvester/findAll', {
+          type: METRIC.NODE,
+          opt:  { force: true }
+        });
+
+        this.$forceUpdate();
+      }
+    },
+
+    goto(row) {
+      window.open(row.consoleUrl, '_blank');
+    }
+  },
+
+  typeDisplay() {
+    const { params:{ resource: type } } = this.$route;
+    let paramSchema = schema;
+
+    if (type !== schema.id) {
+      paramSchema = this.$store.getters['harvester/schemaFor'](type);
+    }
+
+    return this.$store.getters['type-map/labelFor'](paramSchema, 99);
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <ResourceTable
+      v-bind="$attrs"
+      :schema="schema"
+      :groupable="false"
+      :headers="headers"
+      :rows="[...rows]"
+      :namespaced="false"
+      key-field="_key"
+      v-on="$listeners"
+    >
+      <template #cell:console="{row}">
+        <button type="button" class="btn btn-sm role-primary" :disabled="!row.consoleUrl" @click="goto(row)">
+          {{ t('harvester.host.console') }}
+        </button>
+      </template>
+    </ResourceTable>
+  </div>
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.logging.clusterflow.vue b/pkg/harvester/list/harvesterhci.io.logging.clusterflow.vue
new file mode 100644
index 00000000..ae50efc0
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.logging.clusterflow.vue
@@ -0,0 +1,94 @@
+<script>
+import { allHash } from '@shell/utils/promise';
+import ResourceTable from '@shell/components/ResourceTable';
+import Banner from '@components/Banner/Banner.vue';
+import MessageLink from '@shell/components/MessageLink';
+import Loading from '@shell/components/Loading';
+import { SCHEMA, LOGGING } from '@shell/config/types';
+import { HCI } from '../types';
+
+const schema = {
+  id:         HCI.CLUSTER_FLOW,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.CLUSTER_FLOW,
+    namespaced: true
+  },
+  metadata: { name: HCI.CLUSTER_FLOW },
+};
+
+const LOGGING_ID = 'cattle-logging-system/rancher-logging';
+
+export default {
+  name:       'ListApps',
+  components: {
+    Loading, ResourceTable, Banner, MessageLink
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const _hash = {};
+
+    this.listSchema = this.$store.getters[`${ inStore }/schemaFor`](LOGGING.CLUSTER_FLOW);
+
+    if (this.listSchema) {
+      _hash.clusteroutput = this.$store.dispatch(`${ inStore }/findAll`, { type: LOGGING.CLUSTER_OUTPUT });
+      _hash.rows = this.$store.dispatch(`${ inStore }/findAll`, { type: LOGGING.CLUSTER_FLOW });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.ADD_ONS )) {
+      _hash.loggingAddon = this.$store.dispatch(`${ inStore }/find`, { type: HCI.ADD_ONS, id: LOGGING_ID });
+    }
+
+    const hash = await allHash(_hash);
+
+    this.rows = hash.rows;
+    this.loggingAddon = hash.loggingAddon;
+
+    this.$store.dispatch('type-map/configureType', { match: HCI.CLUSTER_FLOW, isCreatable: this.listSchema && this.listSchema?.collectionMethods.find(x => x.toLowerCase() === 'post') });
+  },
+
+  data() {
+    return {
+      rows: [], listSchema: null, loggingAddon: null
+    };
+  },
+
+  computed: {
+    schema() {
+      return schema;
+    },
+
+    to() {
+      return `${ HCI.ADD_ONS }/cattle-logging-system/rancher-logging?mode=edit#basic`;
+    },
+
+    loggingEnabled() {
+      return this.loggingAddon?.spec?.enabled;
+    },
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else-if="listSchema">
+    <Banner v-if="loggingEnabled === false" color="info">
+      <MessageLink
+        :to="to"
+        prefix-label="harvester.logging.diabledTips.prefix"
+        middle-label="harvester.logging.diabledTips.middle"
+        suffix-label="harvester.logging.diabledTips.suffix"
+      />
+    </Banner>
+
+    <ResourceTable :schema="schema" :rows="rows" :ignore-filter="true" :groupable="false" />
+  </div>
+  <Banner v-else color="warning">
+    {{ t('harvester.generic.noSchema', {schema: schema.id}) }}
+  </Banner>
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.logging.clusteroutput.vue b/pkg/harvester/list/harvesterhci.io.logging.clusteroutput.vue
new file mode 100644
index 00000000..ee06ab00
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.logging.clusteroutput.vue
@@ -0,0 +1,93 @@
+<script>
+import { allHash } from '@shell/utils/promise';
+import ResourceTable from '@shell/components/ResourceTable';
+import Banner from '@components/Banner/Banner.vue';
+import MessageLink from '@shell/components/MessageLink';
+import Loading from '@shell/components/Loading';
+import { SCHEMA, LOGGING } from '@shell/config/types';
+import { HCI } from '../types';
+
+const schema = {
+  id:         HCI.CLUSTER_OUTPUT,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.CLUSTER_OUTPUT,
+    namespaced: true
+  },
+  metadata: { name: HCI.CLUSTER_OUTPUT },
+};
+
+const LOGGING_ID = 'cattle-logging-system/rancher-logging';
+
+export default {
+  name:       'ListApps',
+  components: {
+    Loading, ResourceTable, Banner, MessageLink
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const _hash = {};
+
+    this.listSchema = this.$store.getters[`${ inStore }/schemaFor`](LOGGING.CLUSTER_OUTPUT);
+
+    if (this.listSchema) {
+      _hash.rows = this.$store.dispatch(`${ inStore }/findAll`, { type: LOGGING.CLUSTER_OUTPUT });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.ADD_ONS )) {
+      _hash.loggingAddon = this.$store.dispatch(`${ inStore }/find`, { type: HCI.ADD_ONS, id: LOGGING_ID });
+    }
+
+    const hash = await allHash(_hash);
+
+    this.rows = hash.rows;
+    this.loggingAddon = hash.loggingAddon;
+
+    this.$store.dispatch('type-map/configureType', { match: HCI.CLUSTER_OUTPUT, isCreatable: this.listSchema && this.listSchema?.collectionMethods.find(x => x.toLowerCase() === 'post') });
+  },
+
+  data() {
+    return {
+      rows: [], listSchema: null, loggingAddon: null
+    };
+  },
+
+  computed: {
+    schema() {
+      return schema;
+    },
+
+    to() {
+      return `${ HCI.ADD_ONS }/cattle-logging-system/rancher-logging?mode=edit#basic`;
+    },
+
+    loggingEnabled() {
+      return this.loggingAddon?.spec?.enabled;
+    },
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else-if="listSchema">
+    <Banner v-if="loggingEnabled === false" color="info">
+      <MessageLink
+        :to="to"
+        prefix-label="harvester.logging.diabledTips.prefix"
+        middle-label="harvester.logging.diabledTips.middle"
+        suffix-label="harvester.logging.diabledTips.suffix"
+      />
+    </Banner>
+
+    <ResourceTable :schema="schema" :rows="rows" :ignore-filter="true" :groupable="false" />
+  </div>
+  <Banner v-else color="warning">
+    {{ t('harvester.generic.noSchema', {schema: schema.id}) }}
+  </Banner>
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.logging.flow.vue b/pkg/harvester/list/harvesterhci.io.logging.flow.vue
new file mode 100644
index 00000000..f2730d4e
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.logging.flow.vue
@@ -0,0 +1,99 @@
+<script>
+import { allHash } from '@shell/utils/promise';
+import ResourceTable from '@shell/components/ResourceTable';
+import Banner from '@components/Banner/Banner.vue';
+import MessageLink from '@shell/components/MessageLink';
+import Loading from '@shell/components/Loading';
+import { SCHEMA, LOGGING } from '@shell/config/types';
+import { HCI } from '../types';
+
+const schema = {
+  id:         HCI.FLOW,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.FLOW,
+    namespaced: true
+  },
+  metadata: { name: HCI.FLOW },
+};
+
+const LOGGING_ID = 'cattle-logging-system/rancher-logging';
+
+export default {
+  name:       'ListApps',
+  components: {
+    Loading, ResourceTable, Banner, MessageLink
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const _hash = {};
+
+    this.listSchema = this.$store.getters[`${ inStore }/schemaFor`](LOGGING.FLOW);
+    this.clusteroutputSchema = this.$store.getters[`${ inStore }/schemaFor`](LOGGING.CLUSTER_OUTPUT);
+
+    if (this.listSchema) {
+      _hash.output = this.$store.dispatch(`${ inStore }/findAll`, { type: LOGGING.OUTPUT });
+      _hash.rows = this.$store.dispatch(`${ inStore }/findAll`, { type: LOGGING.FLOW });
+    }
+
+    if (this.clusteroutputSchema) {
+      _hash.clusteroutput = this.$store.dispatch(`${ inStore }/findAll`, { type: LOGGING.CLUSTER_OUTPUT });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.ADD_ONS )) {
+      _hash.loggingAddon = this.$store.dispatch(`${ inStore }/find`, { type: HCI.ADD_ONS, id: LOGGING_ID });
+    }
+
+    const hash = await allHash(_hash);
+
+    this.rows = hash.rows;
+    this.loggingAddon = hash.loggingAddon;
+
+    this.$store.dispatch('type-map/configureType', { match: HCI.FLOW, isCreatable: this.listSchema && this.listSchema?.collectionMethods.find(x => x.toLowerCase() === 'post') });
+  },
+
+  data() {
+    return {
+      rows: [], listSchema: null, loggingAddon: null
+    };
+  },
+
+  computed: {
+    schema() {
+      return schema;
+    },
+
+    to() {
+      return `${ HCI.ADD_ONS }/cattle-logging-system/rancher-logging?mode=edit#basic`;
+    },
+
+    loggingEnabled() {
+      return this.loggingAddon?.spec?.enabled;
+    },
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else-if="listSchema">
+    <Banner v-if="loggingEnabled === false" color="info">
+      <MessageLink
+        :to="to"
+        prefix-label="harvester.logging.diabledTips.prefix"
+        middle-label="harvester.logging.diabledTips.middle"
+        suffix-label="harvester.logging.diabledTips.suffix"
+      />
+    </Banner>
+
+    <ResourceTable :schema="schema" :rows="rows" :ignore-filter="true" :groupable="false" />
+  </div>
+  <Banner v-else color="warning">
+    {{ t('harvester.generic.noSchema', {schema: schema.id}) }}
+  </Banner>
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.logging.output.vue b/pkg/harvester/list/harvesterhci.io.logging.output.vue
new file mode 100644
index 00000000..f9246ccd
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.logging.output.vue
@@ -0,0 +1,93 @@
+<script>
+import { allHash } from '@shell/utils/promise';
+import ResourceTable from '@shell/components/ResourceTable';
+import Banner from '@components/Banner/Banner.vue';
+import MessageLink from '@shell/components/MessageLink';
+import Loading from '@shell/components/Loading';
+import { SCHEMA, LOGGING } from '@shell/config/types';
+import { HCI } from '../types';
+
+const schema = {
+  id:         HCI.OUTPUT,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.OUTPUT,
+    namespaced: true
+  },
+  metadata: { name: HCI.OUTPUT },
+};
+
+const LOGGING_ID = 'cattle-logging-system/rancher-logging';
+
+export default {
+  name:       'ListApps',
+  components: {
+    Loading, ResourceTable, Banner, MessageLink
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const _hash = {};
+
+    this.listSchema = this.$store.getters[`${ inStore }/schemaFor`](LOGGING.OUTPUT);
+
+    if (this.listSchema) {
+      _hash.rows = this.$store.dispatch(`${ inStore }/findAll`, { type: LOGGING.OUTPUT });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.ADD_ONS )) {
+      _hash.loggingAddon = this.$store.dispatch(`${ inStore }/find`, { type: HCI.ADD_ONS, id: LOGGING_ID });
+    }
+
+    const hash = await allHash(_hash);
+
+    this.rows = hash.rows;
+    this.loggingAddon = hash.loggingAddon;
+
+    this.$store.dispatch('type-map/configureType', { match: HCI.OUTPUT, isCreatable: this.listSchema && this.listSchema?.collectionMethods.find(x => x.toLowerCase() === 'post') });
+  },
+
+  data() {
+    return {
+      rows: [], listSchema: null, loggingAddon: null
+    };
+  },
+
+  computed: {
+    schema() {
+      return schema;
+    },
+
+    to() {
+      return `${ HCI.ADD_ONS }/cattle-logging-system/rancher-logging?mode=edit#basic`;
+    },
+
+    loggingEnabled() {
+      return this.loggingAddon?.spec?.enabled;
+    },
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else-if="listSchema">
+    <Banner v-if="loggingEnabled === false" color="info">
+      <MessageLink
+        :to="to"
+        prefix-label="harvester.logging.diabledTips.prefix"
+        middle-label="harvester.logging.diabledTips.middle"
+        suffix-label="harvester.logging.diabledTips.suffix"
+      />
+    </Banner>
+
+    <ResourceTable :schema="schema" :rows="rows" :ignore-filter="true" :groupable="false" />
+  </div>
+  <Banner v-else color="warning">
+    {{ t('harvester.generic.noSchema', {schema: schema.id}) }}
+  </Banner>
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.monitoring.alertmanagerconfig.vue b/pkg/harvester/list/harvesterhci.io.monitoring.alertmanagerconfig.vue
new file mode 100644
index 00000000..7640e195
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.monitoring.alertmanagerconfig.vue
@@ -0,0 +1,136 @@
+<script>
+import jsyaml from 'js-yaml';
+import { allHash } from '@shell/utils/promise';
+import { Banner } from '@components/Banner';
+import MessageLink from '@shell/components/MessageLink';
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+
+import { SCHEMA, MONITORING } from '@shell/config/types';
+import { HCI } from '../types';
+
+const schema = {
+  id:         HCI.ALERTMANAGERCONFIG,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.ALERTMANAGERCONFIG,
+    namespaced: true
+  },
+  metadata: { name: HCI.ALERTMANAGERCONFIG },
+};
+
+const MONITORING_ID = 'cattle-monitoring-system/rancher-monitoring';
+
+export default {
+  name:       'ListAlertManagerConfigs',
+  components: {
+    Banner, Loading, ResourceTable, MessageLink
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const _hash = { rows: this.$store.dispatch(`${ inStore }/findAll`, { type: MONITORING.ALERTMANAGERCONFIG }) };
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.ADD_ONS )) {
+      _hash.monitoring = this.$store.dispatch(`${ inStore }/find`, { type: HCI.ADD_ONS, id: MONITORING_ID });
+    }
+
+    const hash = await allHash(_hash);
+
+    this.rows = hash.rows;
+    this.monitoringAddon = hash.monitoring;
+
+    const configSchema = this.$store.getters[`${ inStore }/schemaFor`](MONITORING.ALERTMANAGERCONFIG);
+
+    this.$store.dispatch('type-map/configureType', { match: HCI.ALERTMANAGERCONFIG, isCreatable: configSchema?.collectionMethods.find(x => x.toLowerCase() === 'post') });
+  },
+
+  data() {
+    return { rows: null, monitoringAddon: null };
+  },
+
+  computed: {
+    schema() {
+      return schema;
+    },
+
+    to() {
+      return `${ HCI.ADD_ONS }/cattle-monitoring-system/rancher-monitoring?mode=edit#alertmanager`;
+    },
+
+    monitoringEnabled() {
+      return this.monitoringAddon?.spec?.enabled;
+    },
+
+    alertingEnabled() {
+      const valueJson = jsyaml.load(this.monitoringAddon?.spec?.valuesContent);
+
+      return valueJson?.alertmanager?.enabled;
+    },
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Banner v-if="monitoringEnabled === false" color="info">
+      <MessageLink
+        :to="to"
+        prefix-label="harvester.monitoring.alertmanagerConfig.diabledMonitoringTips.prefix"
+        middle-label="harvester.monitoring.alertmanagerConfig.diabledMonitoringTips.middle"
+        suffix-label="harvester.monitoring.alertmanagerConfig.diabledMonitoringTips.suffix"
+      />
+    </Banner>
+    <Banner v-if="alertingEnabled === false" color="info">
+      <MessageLink
+        :to="to"
+        prefix-label="harvester.monitoring.alertmanagerConfig.diabledAlertingTips.prefix"
+        middle-label="harvester.monitoring.alertmanagerConfig.diabledAlertingTips.middle"
+        suffix-label="harvester.monitoring.alertmanagerConfig.diabledAlertingTips.suffix"
+      />
+    </Banner>
+    <Banner color="info">
+      {{ t('monitoring.alertmanagerConfig.description') }}
+    </Banner>
+    <ResourceTable
+      v-bind="$attrs"
+      :groupable="true"
+      :schema="schema"
+      :rows="rows"
+      key-field="_key"
+      v-on="$listeners"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 6em;
+  min-height: 100%;
+}
+
+i {
+  font-size: 10em;
+  opacity: 50%;
+  margin: 0;
+}
+
+h2 {
+  margin: 0;
+}
+
+h3 {
+  margin-top: 2em;
+}
+
+</style>
diff --git a/pkg/harvester/list/harvesterhci.io.networkattachmentdefinition.vue b/pkg/harvester/list/harvesterhci.io.networkattachmentdefinition.vue
new file mode 100644
index 00000000..5d97e806
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.networkattachmentdefinition.vue
@@ -0,0 +1,208 @@
+<script>
+import { Banner } from '@components/Banner';
+import Loading from '@shell/components/Loading';
+import ResourceTable from '@shell/components/ResourceTable';
+import BadgeState from '@shell/components/formatter/BadgeStateFormatter';
+
+import { NAME, AGE, NAMESPACE, STATE } from '@shell/config/table-headers';
+import { NETWORK_ATTACHMENT, SCHEMA } from '@shell/config/types';
+import { HCI as HCI_ANNOTATIONS } from '../config/labels-annotations';
+import { HCI } from '../types';
+
+import { allHash } from '@shell/utils/promise';
+
+const schema = {
+  id:         HCI.NETWORK_ATTACHMENT,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.NETWORK_ATTACHMENT,
+    namespaced: true
+  },
+  metadata: { name: HCI.NETWORK_ATTACHMENT },
+};
+
+export const NETWORK_HEADERS = [
+  NAME,
+  NAMESPACE,
+  {
+    name:     'type',
+    value:    'vlanType',
+    sort:     'spec.config',
+    labelKey: 'tableHeaders.networkType'
+  },
+  {
+    name:     'vlan',
+    value:    'vlanId',
+    sort:     'spec.config',
+    labelKey: 'tableHeaders.networkVlan'
+  },
+  {
+    name:          'connectivity',
+    value:         'connectivity',
+    labelKey:      'tableHeaders.routeConnectivity',
+    formatter:     'BadgeStateFormatter',
+    formatterOpts: { arbitrary: true },
+    width:         130,
+  },
+  AGE
+];
+
+export default {
+  name:       'HarvesterListNetworks',
+  components: {
+    ResourceTable,
+    Banner,
+    Loading,
+    BadgeState,
+  },
+
+  async fetch() {
+    const currentCluster = this.$store.getters['currentCluster'];
+    const storeName = currentCluster.isHarvester ? 'harvester' : 'cluster';
+
+    const _hash = { rows: this.$store.dispatch(`${ storeName }/findAll`, { type: NETWORK_ATTACHMENT }) };
+
+    if (this.$store.getters[`${ storeName }/schemaFor`](HCI.NODE_NETWORK)) {
+      _hash.hostNetworks = this.$store.dispatch(`${ storeName }/findAll`, { type: HCI.NODE_NETWORK });
+    }
+
+    if (this.$store.getters[`${ storeName }/schemaFor`](HCI.CLUSTER_NETWORK)) {
+      _hash.clusterNetworks = this.$store.dispatch(`${ storeName }/findAll`, { type: HCI.CLUSTER_NETWORK });
+    }
+
+    const hash = await allHash(_hash);
+
+    this.rows = hash.rows;
+    this.hostNetworks = hash.hostNetworks || [];
+  },
+
+  data() {
+    return {
+      hash:         {},
+      rows:         [],
+      hosts:        [],
+      hostNetworks: [],
+    };
+  },
+
+  computed: {
+    headers() {
+      return [
+        STATE,
+        NAME,
+        NAMESPACE,
+        {
+          name:     'type',
+          value:    'vlanType',
+          sort:     'spec.config',
+          labelKey: 'tableHeaders.networkType'
+        },
+        {
+          name:     'clusterNetwork',
+          value:    'clusterNetwork',
+          sort:     'clusterNetwork',
+          labelKey: 'harvester.network.clusterNetwork.label'
+        },
+        {
+          name:     'vlan',
+          value:    'vlanId',
+          sort:     'spec.config',
+          labelKey: 'tableHeaders.networkVlan'
+        },
+        {
+          name:          'connectivity',
+          value:         'connectivity',
+          labelKey:      'tableHeaders.routeConnectivity',
+          formatter:     'NetworkRouteConnectivity',
+          formatterOpts: { arbitrary: true },
+          width:         130,
+        },
+        AGE
+      ];
+    },
+
+    schema() {
+      return schema;
+    },
+
+    abnormalNetwork() {
+      const notReadyCrd = this.hostNetworks.filter( (O) => !O.isReady);
+
+      return notReadyCrd.map( (O) => O.linkMessage);
+    },
+
+    filterRows() {
+      return this.rows.filter((row) => {
+        return !row.metadata?.annotations?.[HCI_ANNOTATIONS.STORAGE_NETWORK];
+      });
+    }
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <template v-if="abnormalNetwork.length">
+      <Banner
+        v-for="item in abnormalNetwork"
+        :key="item.name"
+        color="error"
+      >
+        <router-link :to="item.to">
+          {{ item.name }}:
+        </router-link>
+        {{ item.message }}
+      </Banner>
+    </template>
+
+    <ResourceTable
+      v-bind="$attrs"
+      :headers="headers"
+      default-sort-by="age"
+      :schema="schema"
+      :groupable="true"
+      :rows="filterRows"
+      key-field="_key"
+      v-on="$listeners"
+    >
+      <template #cell:state="{row}">
+        <div class="state">
+          <BadgeState
+            :row="row"
+          />
+          <v-popover
+            v-if="row.clusterNetworkErrorMessage"
+            trigger="hover"
+            offset="16"
+          >
+            <span class="tooltip-target">
+              <i class="icon icon-warning icon-lg text-warning" />
+            </span>
+
+            <template slot="popover">
+              <p>
+                {{ row.clusterNetworkErrorMessage }}
+              </p>
+            </template>
+          </v-popover>
+        </div>
+      </template>
+    </ResourceTable>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.state {
+  display: flex;
+  justify-content: space-between;
+
+  .icon-warning {
+    margin-top: 2px;
+  }
+}
+</style>
diff --git a/pkg/harvester/list/harvesterhci.io.secret.vue b/pkg/harvester/list/harvesterhci.io.secret.vue
new file mode 100644
index 00000000..e73afa8d
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.secret.vue
@@ -0,0 +1,60 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import { SECRET, SCHEMA } from '@shell/config/types';
+import { HCI } from '../types';
+
+const schema = {
+  id:         HCI.SECRET,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.SECRET,
+    namespaced: true
+  },
+  metadata: { name: HCI.SECRET },
+};
+
+export default {
+  name:       'HarvesterSecret',
+  components: { ResourceTable, Loading },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.rows = await this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET });
+
+    const configSchema = this.$store.getters[`${ inStore }/schemaFor`](SECRET);
+
+    if (!configSchema?.collectionMethods.find(x => x.toLowerCase() === 'post')) {
+      this.$store.dispatch('type-map/configureType', { match: HCI.SECRET, isCreatable: false });
+    }
+  },
+
+  data() {
+    return { rows: [] };
+  },
+
+  computed: {
+    schema() {
+      return schema;
+    }
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <ResourceTable
+    v-else
+    v-bind="$attrs"
+    :groupable="true"
+    :schema="schema"
+    :rows="rows"
+    key-field="_key"
+    v-on="$listeners"
+  />
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.setting.vue b/pkg/harvester/list/harvesterhci.io.setting.vue
new file mode 100644
index 00000000..d5ab7fcf
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.setting.vue
@@ -0,0 +1,176 @@
+<script>
+import { mapGetters } from 'vuex';
+import { Banner } from '@components/Banner';
+import Loading from '@shell/components/Loading';
+import { VIEW_IN_API, DEV } from '@shell/store/prefs';
+import { MANAGEMENT } from '@shell/config/types';
+import { HCI } from '../types';
+import { allHash } from '@shell/utils/promise';
+import { HCI_ALLOWED_SETTINGS, HCI_SINGLE_CLUSTER_ALLOWED_SETTING } from '../config/settings';
+import Tabbed from '@shell/components/Tabbed/index.vue';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import Settings from '@pkg/harvester/components/SettingList.vue';
+
+export default {
+  components: {
+    Banner,
+    Loading,
+    Tabbed,
+    Tab,
+    Settings,
+  },
+
+  async fetch() {
+    let isDev;
+
+    try {
+      isDev = this.$store.getters['prefs/get'](VIEW_IN_API);
+    } catch {
+      isDev = this.$store.getters['prefs/get'](DEV);
+    }
+
+    const isSingleProduct = !!this.$store.getters['isSingleProduct'];
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = { harvesterSettings: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SETTING }) };
+
+    if (isSingleProduct) {
+      hash.settings = this.$store.dispatch('management/findAll', { type: MANAGEMENT.SETTING });
+    }
+
+    const rows = await allHash(hash);
+
+    let allRows = [];
+
+    allRows.push(...rows.harvesterSettings);
+
+    if (isSingleProduct) {
+      allRows = [...rows.settings, ...allRows];
+    }
+
+    // Map settings from array to object keyed by id
+    const settingsMap = allRows.reduce((res, s) => {
+      res[s.id] = s;
+
+      return res;
+    }, {});
+
+    const initSettings = [];
+    let SETTINGS = HCI_ALLOWED_SETTINGS;
+
+    if (this.isStandaloneHarvester) {
+      SETTINGS = {
+        ...SETTINGS,
+        ...HCI_SINGLE_CLUSTER_ALLOWED_SETTING,
+      };
+    }
+
+    Object.keys(SETTINGS).forEach((setting) => {
+      if (!settingsMap[setting]) {
+        return;
+      }
+      const realSetting = SETTINGS[setting]?.alias || setting;
+      const s = {
+        ...SETTINGS[setting],
+        id:   realSetting,
+        data: settingsMap[setting],
+      };
+
+      s.hide = s.canHide = (s.kind === 'json' || s.kind === 'multiline' || s.customFormatter === 'json' || s.data.customFormatter === 'json');
+      s.hasActions = !s.readOnly || isDev;
+      initSettings.push(s);
+    });
+
+    this.initSettings = initSettings.sort((a, b) => {
+      if (a.id < b.id) {
+        return -1;
+      }
+      if (a.id > b.id) {
+        return 1;
+      }
+
+      return 0;
+    });
+  },
+
+  data() {
+    return { initSettings: [] };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    ...mapGetters(['isStandaloneHarvester']),
+
+    settings() {
+      return this.initSettings.map((setting) => {
+        const s = setting;
+
+        const isHarvester = s.data?.type?.includes('harvesterhci');
+
+        if (s.kind === 'json') {
+          try {
+            s.json = JSON.stringify(JSON.parse(s.data.value || s.data.default || '{}'), null, 2);
+          } catch (e) {
+            console.error(`${ s.data.id }: wrong format`); // eslint-disable-line no-console
+            s.json = {};
+          }
+        } else if (s.kind === 'enum') {
+          const v = s.data.value || s.data.default;
+
+          s.enum = isHarvester ? `advancedSettings.enum.harv-${ s.id }.${ v }` : `advancedSettings.enum.${ s.id }.${ v }`;
+        } else if (s.kind === 'custom') {
+          s.custom = s.data.customValue;
+        }
+
+        return {
+          ...s,
+          description: isHarvester ? `advancedSettings.descriptions.harv-${ s.id }` : `advancedSettings.descriptions.${ s.id }`,
+          customized:  (!s.readOnly && s.data.value && s.data.value !== s.data.default) || s.data.hasCustomized
+        };
+      });
+    }
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Banner color="warning" class="settings-banner">
+      <div>
+        {{ t('advancedSettings.subtext') }}
+      </div>
+    </Banner>
+
+    <Tabbed
+      class="mt-30"
+    >
+      <Tab
+        name="advanced"
+        :label="t('harvester.setting.tabs.advanced')"
+        :weight="99"
+      >
+        <Settings
+          :settings="settings"
+          category="advanced"
+        />
+      </Tab>
+      <Tab
+        name="ui"
+        :label="t('harvester.setting.tabs.ui')"
+        :weight="89"
+      >
+        <Settings
+          :settings="settings"
+          category="ui"
+        />
+      </Tab>
+    </Tabbed>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.settings-banner {
+  margin-top: 0;
+}
+</style>
diff --git a/pkg/harvester/list/harvesterhci.io.storage.vue b/pkg/harvester/list/harvesterhci.io.storage.vue
new file mode 100644
index 00000000..65535dfb
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.storage.vue
@@ -0,0 +1,88 @@
+<script>
+import Loading from '@shell/components/Loading';
+import ResourceTable from '@shell/components/ResourceTable';
+
+import { allHash } from '@shell/utils/promise';
+import { SCHEMA, STORAGE_CLASS } from '@shell/config/types';
+import { HCI } from '../types';
+import {
+  STATE, AGE, NAME, STORAGE_CLASS_PROVISIONER, STORAGE_CLASS_DEFAULT
+} from '@shell/config/table-headers';
+
+const schema = {
+  id:         HCI.STORAGE,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.STORAGE,
+    namespaced: false
+  },
+  metadata: { name: HCI.STORAGE },
+};
+
+export default {
+  name: 'ListHarvesterStorages',
+
+  components: {
+    ResourceTable,
+    Loading,
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({ storages: this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }) });
+
+    const storageSchema = this.$store.getters[`${ inStore }/schemaFor`](STORAGE_CLASS);
+
+    if ( storageSchema && !storageSchema?.collectionMethods.find(x => ['blocked-post', 'post'].includes(x.toLowerCase())) ) {
+      this.$store.dispatch('type-map/configureType', { match: HCI.STORAGE, isCreatable: false });
+    }
+  },
+
+  data() {
+    return { schema };
+  },
+
+  computed: {
+    rows() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
+
+      return storages.filter(s => !s.parameters?.backingImage);
+    },
+
+    headers() {
+      return [
+        STATE,
+        NAME,
+        STORAGE_CLASS_PROVISIONER,
+        STORAGE_CLASS_DEFAULT,
+        {
+          name:     'numberOfReplicas',
+          labelKey: 'harvester.storage.numberOfReplicas.label',
+          value:    'parameters.numberOfReplicas',
+          sort:     ['parameters.numberOfReplicas'],
+          align:    'center'
+        },
+        AGE,
+      ];
+    },
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Loading v-if="$fetchState.pending" />
+    <ResourceTable
+      :rows="rows"
+      :schema="schema"
+      :headers="headers"
+    />
+  </div>
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.virtualmachinebackup.vue b/pkg/harvester/list/harvesterhci.io.virtualmachinebackup.vue
new file mode 100644
index 00000000..fe5f0a5d
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.virtualmachinebackup.vue
@@ -0,0 +1,236 @@
+<script>
+import { Banner } from '@components/Banner';
+import Loading from '@shell/components/Loading';
+import MessageLink from '@shell/components/MessageLink';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import ResourceTable from '@shell/components/ResourceTable';
+
+import { HCI } from '../types';
+import { allSettled } from '../utils/promise';
+import { STATE, AGE, NAME, NAMESPACE } from '@shell/config/table-headers';
+import { BACKUP_TYPE } from '../config/types';
+
+export default {
+  name:       'HarvesterListBackup',
+  components: {
+    ResourceTable, Banner, Loading, Masthead, MessageLink
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const hash = await allSettled({
+      vms:      this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM }),
+      settings: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SETTING }),
+      rows:     this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.BACKUP }),
+    });
+
+    this.rows = hash.rows;
+    this.settings = hash.settings;
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.SETTING)) {
+      const backupTargetResource = hash.settings.find( (O) => O.id === 'backup-target');
+      const isEmpty = this.getBackupTargetValueIsEmpty(backupTargetResource);
+
+      if (backupTargetResource && !isEmpty) {
+        this.testConnect();
+      }
+    }
+  },
+
+  data() {
+    const params = { ...this.$route.params };
+
+    const resource = params.resource;
+
+    return {
+      rows:     [],
+      settings: [],
+      resource,
+      to:       `${ HCI.SETTING }/backup-target?mode=edit`,
+    };
+  },
+
+  methods: {
+    async testConnect() {
+      try {
+        const url = this.$store.getters['harvester-common/getHarvesterClusterUrl']('v1/harvester/backuptarget/healthz');
+
+        await this.$store.dispatch('harvester/request', { url });
+      } catch (err) {
+        if (err?._status === 400 || err?._status === 503) {
+          this.$store.dispatch('growl/error', {
+            title:   this.t('harvester.notification.title.error'),
+            message: err.errors[0]
+          }, { root: true });
+        }
+      }
+    },
+
+    getBackupTargetValueIsEmpty(resource) {
+      let out = true;
+
+      if (resource?.value) {
+        try {
+          const valueJson = JSON.parse(resource?.value);
+
+          out = !valueJson.type;
+        } catch (e) {}
+      }
+
+      return out;
+    }
+  },
+
+  computed: {
+    headers() {
+      const cols = [
+        STATE,
+        NAME,
+        NAMESPACE,
+        {
+          name:      'targetVM',
+          labelKey:  'tableHeaders.targetVm',
+          value:     'attachVM',
+          align:     'left',
+          formatter: 'AttachVMWithName'
+        },
+        {
+          name:      'backupTarget',
+          labelKey:  'tableHeaders.backupTarget',
+          value:     'backupTarget',
+          align:     'left',
+          formatter: 'HarvesterBackupTargetValidation'
+        },
+        {
+          name:      'readyToUse',
+          labelKey:  'tableHeaders.readyToUse',
+          value:     'status.readyToUse',
+          align:     'left',
+          formatter: 'Checked',
+        },
+      ];
+
+      if (this.hasBackupProgresses) {
+        cols.push({
+          name:      'backupProgress',
+          labelKey:  'tableHeaders.progress',
+          value:     'backupProgress',
+          align:     'left',
+          formatter: 'HarvesterBackupProgressBar',
+          width:     200,
+        });
+      }
+
+      cols.push(AGE);
+
+      return cols;
+    },
+
+    hasBackupProgresses() {
+      return !!this.rows.find((R) => R.status?.progress !== undefined);
+    },
+
+    filteredRows() {
+      return this.rows.filter((R) => R.spec?.type !== BACKUP_TYPE.SNAPSHOT);
+    },
+
+    backupTargetResource() {
+      return this.settings.find( (O) => O.id === 'backup-target');
+    },
+
+    isEmptyValue() {
+      return this.getBackupTargetValueIsEmpty(this.backupTargetResource);
+    },
+
+    canUpdate() {
+      return this?.backupTargetResource?.canUpdate;
+    },
+
+    errorMessage() {
+      return this.backupTargetResource?.errMessage;
+    },
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+      :create-button-label="t('harvester.backup.createText')"
+    />
+
+    <Banner
+      v-if="(errorMessage || isEmptyValue) && canUpdate"
+      color="error"
+    >
+      <MessageLink
+        v-if="isEmptyValue"
+        :to="to"
+        prefix-label="harvester.backup.message.noSetting.prefix"
+        middle-label="harvester.backup.message.noSetting.middle"
+        suffix-label="harvester.backup.message.noSetting.suffix"
+      />
+
+      <MessageLink
+        v-else
+        :to="to"
+        prefix-label="harvester.backup.message.errorTip.prefix"
+        middle-label="harvester.backup.message.errorTip.middle"
+      >
+        <template v-slot:suffix>
+          {{ t('harvester.backup.message.errorTip.suffix') }} {{ errorMessage }}
+        </template>
+      </MessageLink>
+    </Banner>
+
+    <div v-else-if="canUpdate">
+      <Banner
+        color="info"
+      >
+        <MessageLink
+          :to="to"
+          prefix-label="harvester.backup.message.viewSetting.prefix"
+          middle-label="harvester.backup.message.viewSetting.middle"
+          suffix-label="harvester.backup.message.viewSetting.suffix"
+        />
+      </Banner>
+    </div>
+
+    <ResourceTable
+      v-bind="$attrs"
+      :headers="headers"
+      :groupable="true"
+      :rows="filteredRows"
+      :schema="schema"
+      key-field="_key"
+      default-sort-by="age"
+      v-on="$listeners"
+    >
+      <template #col:name="{row}">
+        <td>
+          <span>
+            <router-link
+              v-if="row.status && row.status.source"
+              :to="row.detailLocation"
+            >
+              {{ row.nameDisplay }}
+            </router-link>
+            <span v-else>
+              {{ row.nameDisplay }}
+            </span>
+          </span>
+        </td>
+      </template>
+    </ResourceTable>
+  </div>
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.virtualmachineimage.vue b/pkg/harvester/list/harvesterhci.io.virtualmachineimage.vue
new file mode 100644
index 00000000..13dad01f
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.virtualmachineimage.vue
@@ -0,0 +1,80 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import { Banner } from '@components/Banner';
+import FilterLabel from '../components/FilterLabel';
+import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
+
+export default {
+  name: 'ListHarvesterImage',
+
+  components: {
+    ResourceTable,
+    Banner,
+    FilterLabel
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+    rows: {
+      type:     Array,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      searchLabels: [],
+      filterRows:   []
+    };
+  },
+
+  computed: {
+    uploadingImages() {
+      return this.$store.getters['harvester-common/uploadingImages'] || [];
+    },
+  },
+
+  methods: {
+    changeRows(filterRows, searchLabels) {
+      this.$set(this, 'filterRows', filterRows);
+      this.$set(this, 'searchLabels', searchLabels);
+    },
+
+    sortGenerationFn() {
+      let base = defaultTableSortGenerationFn(this.schema, this.$store);
+
+      this.searchLabels.map((label) => {
+        base += label.key;
+        base += label.value;
+      });
+
+      return base;
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="uploadingImages.length > 0"
+      color="warning"
+      :label="t('harvester.image.warning.uploading', {count: uploadingImages.length} )"
+    />
+    <ResourceTable
+      v-bind="$attrs"
+      :rows="filterRows"
+      :schema="schema"
+      :sort-generation-fn="sortGenerationFn"
+      key-field="_key"
+      v-on="$listeners"
+    >
+      <template #more-header-middle>
+        <FilterLabel ref="filterLabel" :rows="rows" @changeRows="changeRows" />
+      </template>
+    </ResourceTable>
+  </div>
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.virtualmachinetemplateversion.vue b/pkg/harvester/list/harvesterhci.io.virtualmachinetemplateversion.vue
new file mode 100644
index 00000000..298ae409
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.virtualmachinetemplateversion.vue
@@ -0,0 +1,185 @@
+<script>
+import Loading from '@shell/components/Loading';
+import LiveData from '@shell/components/formatter/LiveDate';
+import ResourceTable from '@shell/components/ResourceTable';
+
+import { HCI } from '../types';
+import { allHash } from '@shell/utils/promise';
+import { STATE, AGE, NAME, NAMESPACE } from '@shell/config/table-headers';
+
+export default {
+  name:       'HarvesterListTemplate',
+  components: {
+    ResourceTable, LiveData, Loading
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const hash = await allHash({
+      template:        this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM_TEMPLATE }),
+      templateVersion: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM_VERSION }),
+    });
+
+    this.template = hash.template;
+    this.templateVersion = hash.templateVersion;
+  },
+
+  data() {
+    return {
+      template:        [],
+      templateVersion: [],
+    };
+  },
+
+  computed: {
+    headers() {
+      return [
+        STATE,
+        NAME,
+        NAMESPACE,
+        {
+          name:     'defaultVersion',
+          value:    'id',
+          labelKey: 'tableHeaders.defaultVersion'
+        },
+        AGE
+      ];
+    },
+
+    rows() {
+      return [...this.templateVersion];
+    },
+
+    groupBy() {
+      return 'spec.templateId';
+    },
+
+    groupTitleBy() {
+      return HCI.VM_TEMPLATE;
+    },
+  },
+
+  methods: {
+    showActions(e, group) {
+      const template = group.rows[0].template;
+
+      this.$store.commit(`action-menu/show`, {
+        resources: [template],
+        elem:      e.target
+      });
+    },
+
+    valueFor(group) {
+      const resource = group?.rows?.[0].template;
+
+      return resource?.metadata?.creationTimestamp;
+    },
+
+    templateLabel(group) {
+      return group.key;
+    },
+
+    templateResource(group) {
+      return group?.rows?.[0].template;
+    }
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <ResourceTable
+    v-else
+    v-bind="$attrs"
+    :headers="headers"
+    :sub-rows="true"
+    :groupable="false"
+    :rows="rows"
+    :group-title-by="groupTitleBy"
+    :group-by="groupBy"
+    :schema="schema"
+    :group-can-action="true"
+    key-field="_key"
+    v-on="$listeners"
+  >
+    <template #group-by="group">
+      <div class="group-bar">
+        <div class="group-tab">
+          <div v-clean-html="templateLabel(group.group)" class="project-name" />
+        </div>
+
+        <div class="right">
+          <div class="age">
+            <LiveData
+              :value="valueFor(group.group)"
+              :row="templateResource(group.group)"
+            />
+          </div>
+
+          <button type="button" class="btn btn-sm actions mr-10 role-multi-action" @click="showActions($event, group.group)">
+            <i class="icon icon-actions" />
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <template #col:defaultVersion="{row}">
+      <td v-if="row.isDefaultVersion">
+        <i class="icon icon-checkmark" />
+      </td>
+      <td v-else></td>
+    </template>
+  </ResourceTable>
+</template>
+
+<style lang="scss" scoped>
+::v-deep {
+  .group-name {
+    line-height: 30px;
+  }
+
+  .group-bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .right {
+      display: flex;
+      align-items: center;
+      .age {
+        width: 100px;
+      }
+
+      .actions {
+        padding-right: 7px;
+      }
+    }
+
+    &.has-description {
+      .right {
+        margin-top: 5px;
+      }
+      .group-tab {
+        &, &::after {
+            height: 50px;
+        }
+
+        &::after {
+            right: -20px;
+        }
+
+        .description {
+            margin-top: -20px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/pkg/harvester/list/harvesterhci.io.vmsnapshot.vue b/pkg/harvester/list/harvesterhci.io.vmsnapshot.vue
new file mode 100644
index 00000000..3b617615
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.vmsnapshot.vue
@@ -0,0 +1,131 @@
+<script>
+import Loading from '@shell/components/Loading';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import ResourceTable from '@shell/components/ResourceTable';
+
+import { HCI } from '../types';
+import { SCHEMA } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
+import { STATE, AGE, NAME, NAMESPACE } from '@shell/config/table-headers';
+import { BACKUP_TYPE } from '../config/types';
+
+const schema = {
+  id:         HCI.VM_SNAPSHOT,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.VM_SNAPSHOT,
+    namespaced: true
+  },
+  metadata: { name: HCI.VM_SNAPSHOT },
+};
+
+export default {
+  name:       'HarvesterListVMSnapshot',
+  components: {
+    ResourceTable, Loading, Masthead
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const hash = await allHash({
+      vms:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM }),
+      rows: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.BACKUP }),
+    });
+
+    const schema = this.$store.getters[`${ inStore }/schemaFor`](HCI.BACKUP);
+
+    if (!schema?.collectionMethods.find((x) => x.toLowerCase() === 'post')) {
+      this.$store.dispatch('type-map/configureType', { match: HCI.VM_SNAPSHOT, isCreatable: false });
+    }
+
+    this.rows = hash.rows;
+  },
+
+  data() {
+    const params = { ...this.$route.params };
+
+    const resource = params.resource;
+
+    return {
+      rows: [],
+      resource,
+    };
+  },
+
+  computed: {
+    headers() {
+      return [
+        STATE,
+        NAME,
+        NAMESPACE,
+        {
+          name:      'targetVM',
+          labelKey:  'tableHeaders.targetVm',
+          value:     'attachVM',
+          align:     'left',
+          formatter: 'AttachVMWithName'
+        },
+        {
+          name:      'readyToUse',
+          labelKey:  'tableHeaders.readyToUse',
+          value:     'status.readyToUse',
+          align:     'left',
+          formatter: 'Checked',
+        },
+        AGE
+      ];
+    },
+
+    schema() {
+      return schema;
+    },
+
+    typeDisplay() {
+      return this.$store.getters['type-map/labelFor'](schema, 99);
+    },
+
+    filteredRows() {
+      return this.rows.filter((R) => R.spec?.type !== BACKUP_TYPE.BACKUP);
+    },
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="null"
+      :resource="resource"
+      :type-display="typeDisplay"
+      :create-button-label="t('harvester.vmSnapshot.createText')"
+    />
+
+    <ResourceTable
+      v-bind="$attrs"
+      :headers="headers"
+      :groupable="true"
+      :rows="filteredRows"
+      :schema="schema"
+      key-field="_key"
+      default-sort-by="age"
+      v-on="$listeners"
+    >
+      <template #col:name="{row}">
+        <td>
+          <span>
+            <router-link
+              v-if="row.status && row.status.source"
+              :to="row.detailLocation"
+            >
+              {{ row.nameDisplay }}
+            </router-link>
+            <span v-else>
+              {{ row.nameDisplay }}
+            </span>
+          </span>
+        </td>
+      </template>
+    </resourcetable>
+  </div>
+</template>
diff --git a/pkg/harvester/list/harvesterhci.io.volume.vue b/pkg/harvester/list/harvesterhci.io.volume.vue
new file mode 100644
index 00000000..1b5faef2
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.volume.vue
@@ -0,0 +1,184 @@
+<script>
+import Loading from '@shell/components/Loading';
+import ResourceTable from '@shell/components/ResourceTable';
+import HarvesterVolumeState from '../formatters/HarvesterVolumeState';
+
+import { allSettled } from '../utils/promise';
+import { PV, PVC, SCHEMA, LONGHORN } from '@shell/config/types';
+import { HCI, VOLUME_SNAPSHOT } from '../types';
+import { STATE, AGE, NAME, NAMESPACE } from '@shell/config/table-headers';
+
+const schema = {
+  id:         HCI.VOLUME,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.VOLUME,
+    namespaced: true
+  },
+  metadata: { name: HCI.VOLUME },
+};
+
+export default {
+  name:       'HarvesterListVolume',
+  components: {
+    Loading, ResourceTable, HarvesterVolumeState
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const _hash = {
+      pvcs: this.$store.dispatch(`${ inStore }/findAll`, { type: PVC }),
+      pvs:  this.$store.dispatch(`${ inStore }/findAll`, { type: PV }),
+      vms:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM }),
+    };
+
+    const volumeSnapshotSchema = this.$store.getters[`${ inStore }/schemaFor`](VOLUME_SNAPSHOT);
+
+    if (volumeSnapshotSchema) {
+      _hash.snapshots = this.$store.dispatch(`${ inStore }/findAll`, { type: VOLUME_SNAPSHOT });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](LONGHORN.VOLUMES)) {
+      _hash.longhornVolumes = this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.VOLUMES });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](LONGHORN.ENGINES)) {
+      _hash.longhornEngines = this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.ENGINES });
+    }
+
+    const hash = await allSettled(_hash);
+
+    const pvcSchema = this.$store.getters[`${ inStore }/schemaFor`](PVC);
+
+    if (!pvcSchema?.collectionMethods.find((x) => x.toLowerCase() === 'post')) {
+      this.$store.dispatch('type-map/configureType', { match: HCI.VOLUME, isCreatable: false });
+    }
+
+    this.rows = hash.pvcs;
+  },
+
+  data() {
+    return { rows: [] };
+  },
+
+  computed: {
+    schema() {
+      return schema;
+    },
+
+    headers() {
+      return [
+        STATE,
+        NAME,
+        NAMESPACE,
+        {
+          name:          'size',
+          labelKey:      'tableHeaders.size',
+          value:         'spec.resources.requests.storage',
+          sort:          'volumeSort',
+          formatter:     'Si',
+          formatterOpts: {
+            opts: {
+              increment: 1024, addSuffix: true, maxExponent: 3, minExponent: 3, suffix: 'i',
+            },
+            needParseSi: true
+          },
+        },
+        {
+          name:     'storageClass',
+          labelKey: 'tableHeaders.storageClass',
+          value:    'spec.storageClassName'
+        },
+        {
+          name:     'AttachedVM',
+          labelKey: 'tableHeaders.attachedVM',
+          type:     'attached',
+          value:    'spec.claimRef',
+          sort:     'name',
+        },
+        {
+          name:      'VolumeSnapshotCounts',
+          labelKey:  'harvester.tableHeaders.volumeSnapshotCounts',
+          value:     'relatedVolumeSnapshotCounts',
+          formatter: 'RelatedVolumeSnapshotCounts',
+          sort:      'name',
+          align:     'center',
+        },
+        {
+          ...STATE,
+          name:          'phase',
+          labelKey:      'tableHeaders.phase',
+          formatterOpts: { arbitrary: true },
+          value:         'phaseState',
+        },
+        AGE,
+      ];
+    },
+  },
+
+  methods: {
+    goTo(row) {
+      return row?.attachVM?.detailLocation;
+    },
+
+    getVMName(row) {
+      return row.attachVM?.metadata?.name || '';
+    }
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <ResourceTable
+    v-else
+    v-bind="$attrs"
+    :headers="headers"
+    :groupable="true"
+    default-sort-by="age"
+    :namespaced="true"
+    :rows="rows"
+    :schema="schema"
+    key-field="_key"
+    v-on="$listeners"
+  >
+    <template
+      slot="cell:state"
+      slot-scope="scope"
+    >
+      <div class="state">
+        <HarvesterVolumeState
+          class="vmstate"
+          :row="scope.row"
+        />
+      </div>
+    </template>
+    <template
+      slot="cell:AttachedVM"
+      slot-scope="scope"
+    >
+      <div>
+        <router-link
+          v-if="getVMName(scope.row)"
+          :to="goTo(scope.row)"
+        >
+          {{ getVMName(scope.row) }}
+        </router-link>
+      </div>
+    </template>
+  </ResourceTable>
+</template>
+
+<style lang="scss" scoped>
+.state {
+  display: flex;
+
+  .vmstate {
+    margin-right: 6px;
+  }
+}
+</style>
diff --git a/pkg/harvester/list/harvesterhci.io.volumesnapshot.vue b/pkg/harvester/list/harvesterhci.io.volumesnapshot.vue
new file mode 100644
index 00000000..c16f8ae1
--- /dev/null
+++ b/pkg/harvester/list/harvesterhci.io.volumesnapshot.vue
@@ -0,0 +1,76 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import { SCHEMA, PVC } from '@shell/config/types';
+import { VOLUME_SNAPSHOT, HCI } from '../types';
+import { allHash } from '@shell/utils/promise';
+
+const schema = {
+  id:         HCI.SNAPSHOT,
+  type:       SCHEMA,
+  attributes: {
+    kind:       HCI.SNAPSHOT,
+    namespaced: true
+  },
+  metadata: { name: HCI.SNAPSHOT },
+};
+
+export default {
+  name: 'HarvesterListSnapshot',
+
+  components: { ResourceTable, Loading },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const hash = {
+      volumes:   this.$store.dispatch(`${ inStore }/findAll`, { type: PVC }),
+      snapshots: this.$store.dispatch(`${ inStore }/findAll`, { type: VOLUME_SNAPSHOT }),
+    };
+
+    const res = await allHash(hash);
+
+    this.rows = res.snapshots;
+
+    const snapShotSchema = this.$store.getters[`${ inStore }/schemaFor`](VOLUME_SNAPSHOT);
+
+    if (!snapShotSchema?.collectionMethods.find(x => x.toLowerCase() === 'post')) {
+      this.$store.dispatch('type-map/configureType', { match: HCI.SNAPSHOT, isCreatable: false });
+    }
+  },
+
+  data() {
+    return { rows: [] };
+  },
+
+  computed: {
+    filteredRows() {
+      return this.rows.filter((R) => {
+        return R.metadata?.ownerReferences?.[0]?.kind === 'PersistentVolumeClaim';
+      });
+    },
+
+    schema() {
+      return schema;
+    }
+  },
+
+  typeDisplay() {
+    return this.$store.getters['type-map/labelFor'](schema, 99);
+  }
+
+};
+
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <ResourceTable
+    v-else
+    v-bind="$attrs"
+    :groupable="true"
+    :schema="schema"
+    :rows="filteredRows"
+    key-field="_key"
+    v-on="$listeners"
+  />
+</template>
diff --git a/pkg/harvester/list/kubevirt.io.virtualmachine.vue b/pkg/harvester/list/kubevirt.io.virtualmachine.vue
new file mode 100644
index 00000000..f28bf60d
--- /dev/null
+++ b/pkg/harvester/list/kubevirt.io.virtualmachine.vue
@@ -0,0 +1,222 @@
+<script>
+import ConsoleBar from '../components/VMConsoleBar';
+import ResourceTable from '@shell/components/ResourceTable';
+import LinkDetail from '@shell/components/formatter/LinkDetail';
+import HarvesterVmState from '../formatters/HarvesterVmState';
+
+import { STATE, AGE, NAME, NAMESPACE } from '@shell/config/table-headers';
+import { NODE, POD } from '@shell/config/types';
+import { HCI } from '../types';
+
+import { allHash } from '@shell/utils/promise';
+import Loading from '@shell/components/Loading';
+import { clone } from '@shell/utils/object';
+
+export const VM_HEADERS = [
+  STATE,
+  {
+    ...NAME,
+    width: 350,
+  },
+  NAMESPACE,
+  {
+    name:        'CPU',
+    label:       'CPU',
+    sort:        ['spec.template.spec.domain.cpu.cores'],
+    value:       'spec.template.spec.domain.cpu.cores',
+    align:       'center',
+    dashIfEmpty: true,
+  },
+  {
+    name:          'Memory',
+    value:         'displayMemory',
+    sort:          ['memorySort'],
+    align:         'center',
+    labelKey:      'tableHeaders.memory',
+    formatter:     'Si',
+    formatterOpts: {
+      opts: {
+        increment: 1024, addSuffix: true, maxExponent: 3, minExponent: 3, suffix: 'i',
+      },
+      needParseSi: true
+    },
+  },
+  {
+    name:      'ip',
+    label:     'IP Address',
+    value:     'id',
+    formatter: 'HarvesterIpAddress',
+    labelKey:  'tableHeaders.ipAddress',
+    sort:      ['id'],
+  },
+  {
+    ...AGE,
+    sort: 'metadata.creationTimestamp:desc',
+  }
+];
+
+export default {
+  name:       'HarvesterListVM',
+  components: {
+    Loading,
+    HarvesterVmState,
+    LinkDetail,
+    ConsoleBar,
+    ResourceTable
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const _hash = {
+      vms:     this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM }),
+      pod:     this.$store.dispatch(`${ inStore }/findAll`, { type: POD }),
+      restore: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.RESTORE }),
+      backups: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.BACKUP }),
+    };
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](NODE)) {
+      _hash.nodes = this.$store.dispatch(`${ inStore }/findAll`, { type: NODE });
+      this.hasNode = true;
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.NODE_NETWORK)) {
+      _hash.nodeNetworks = this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.NODE_NETWORK });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.CLUSTER_NETWORK)) {
+      _hash.clusterNetworks = this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK });
+    }
+
+    const hash = await allHash(_hash);
+
+    this.allVMs = hash.vms;
+    this.allNodeNetworks = hash.nodeNetworks || [];
+    this.allClusterNetworks = hash.clusterNetworks || [];
+  },
+
+  data() {
+    return {
+      hasNode:            false,
+      allVMs:             [],
+      allVMIs:            [],
+      allNodeNetworks:    [],
+      allClusterNetworks: [],
+      HCI
+    };
+  },
+
+  computed: {
+    headers() {
+      const restoreCol = {
+        name:      'restoreProgress',
+        labelKey:  'tableHeaders.restore',
+        value:     'restoreProgress',
+        align:     'left',
+        formatter: 'HarvesterBackupProgressBar',
+        width:     200,
+      };
+      const nodeCol = {
+        name:      'node',
+        label:     'Node',
+        value:     'nodeName',
+        sort:      ['realAttachNodeName'],
+        formatter: 'HarvesterHost',
+        labelKey:  'tableHeaders.node'
+      };
+
+      const cols = clone(VM_HEADERS);
+
+      if (this.hasNode) {
+        cols.splice(-1, 0, nodeCol);
+      }
+
+      if (this.hasRestoredVMs) {
+        cols.splice(-1, 0, restoreCol);
+      }
+
+      return cols;
+    },
+
+    rows() {
+      const matchVMIs = this.allVMIs.filter(VMI => !this.allVMs.find(VM => VM.id === VMI.id));
+
+      return [...this.allVMs, ...matchVMIs];
+    },
+
+    hasRestoredVMs() {
+      return !!this.rows.find(r => !!r.restoreResource);
+    }
+  },
+
+  async created() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const vmis = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VMI });
+
+    await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VMIM });
+
+    this.$set(this, 'allVMIs', vmis);
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <ResourceTable
+      v-bind="$attrs"
+      :headers="headers"
+      default-sort-by="age"
+      :rows="rows"
+      :schema="schema"
+      :groupable="true"
+      key-field="_key"
+      v-on="$listeners"
+    >
+      <template slot="cell:state" slot-scope="scope" class="state-col">
+        <div class="state">
+          <HarvesterVmState class="vmstate" :row="scope.row" :all-node-network="allNodeNetworks" :all-cluster-network="allClusterNetworks" />
+        </div>
+      </template>
+
+      <template slot="cell:name" slot-scope="scope">
+        <div class="name-console">
+          <LinkDetail v-if="scope.row.type !== HCI.VMI" v-model="scope.row.metadata.name" :row="scope.row" />
+          <span v-else>
+            {{ scope.row.metadata.name }}
+          </span>
+
+          <ConsoleBar :resource="scope.row" class="console mr-10 ml-10" />
+        </div>
+      </template>
+    </ResourceTable>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.state {
+  display: flex;
+
+  .vmstate {
+    margin-right: 6px;
+  }
+}
+
+.name-console {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  span {
+    padding-right: 4px;
+    line-height: 26px;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/pkg/harvester/list/network.harvesterhci.io.clusternetwork.vue b/pkg/harvester/list/network.harvesterhci.io.clusternetwork.vue
new file mode 100644
index 00000000..a86fdb91
--- /dev/null
+++ b/pkg/harvester/list/network.harvesterhci.io.clusternetwork.vue
@@ -0,0 +1,295 @@
+<script>
+import Loading from '@shell/components/Loading';
+import ResourceTable from '@shell/components/ResourceTable';
+import Masthead from '@shell/components/ResourceList/Masthead';
+
+import { allHash } from '@shell/utils/promise';
+import { STATE, AGE, NAME } from '@shell/config/table-headers';
+import { mapPref, GROUP_RESOURCES } from '@shell/store/prefs';
+import { NODE } from '@shell/config/types';
+
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+import { CLUSTER_NETWORK } from '../config/query-params';
+import { HCI } from '../types';
+
+export default {
+  name: 'ListHarvesterVLANConfigs',
+
+  components: {
+    ResourceTable,
+    Loading,
+    Masthead,
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({
+      configs:         this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VLAN_CONFIG }),
+      clusterNetworks: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK }),
+      vlanStatuses:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VLAN_STATUS }),
+      nodes:           this.$store.dispatch(`${ inStore }/findAll`, { type: NODE })
+    });
+  },
+
+  data() {
+    return { HCI };
+  },
+
+  computed: {
+    groupPreference: mapPref(GROUP_RESOURCES),
+
+    headers() {
+      return [
+        STATE,
+        {
+          ...NAME,
+          width: 300,
+        },
+        {
+          name:     'type',
+          labelKey: 'tableHeaders.type',
+          value:    'typeDisplay',
+          getValue: (row) => row.typeDisplay,
+          sort:     ['typeDisplay'],
+        },
+        AGE,
+      ];
+    },
+
+    rows() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      const configs = this.$store.getters[`${ inStore }/all`](HCI.VLAN_CONFIG);
+
+      return configs;
+    },
+
+    vlanConfigSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/schemaFor`](HCI.VLAN_CONFIG);
+    },
+
+    clusterNetworkSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/schemaFor`](HCI.CLUSTER_NETWORK);
+    },
+
+    isClusterNetworkCreatable() {
+      return (this.clusterNetworkSchema?.collectionMethods || []).includes('POST');
+    },
+
+    createClusterNetworkLocation() {
+      const location = {
+        name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+        params: {
+          product:  HARVESTER_PRODUCT,
+          resource: HCI.CLUSTER_NETWORK,
+        },
+      };
+
+      return location;
+    },
+
+    clusterNetworkWithoutConfigs() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      const clusterNetworks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK);
+
+      const out = clusterNetworks.map((network) => {
+        const hasChild = !!this.rows.find((config) => config?.spec?.clusterNetwork === network.id);
+
+        return {
+          ...network,
+          hasChild
+        };
+      });
+
+      return out;
+    },
+
+    rowsWithFakeClusterNetworks() {
+      const fakeRows = this.clusterNetworkWithoutConfigs.map((network) => {
+        return {
+          groupByLabel:          network.id,
+          isFake:                true,
+          mainRowKey:            network.id,
+          nameDisplay:           network.id,
+          groupByClusterNetwork: network.id,
+          availableActions:      []
+        };
+      });
+
+      return [...this.rows, ...fakeRows];
+    },
+  },
+
+  methods: {
+    showClusterNetworkActionButton(group) {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const clusterNetwork = group.key;
+
+      const resource = this.$store.getters[`${ inStore }/byId`](HCI.CLUSTER_NETWORK, clusterNetwork);
+
+      return !!resource;
+    },
+
+    showClusterNetworkAction(event, group) {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const clusterNetwork = group.key;
+
+      const resource = this.$store.getters[`${ inStore }/byId`](HCI.CLUSTER_NETWORK, clusterNetwork);
+
+      this.$store.commit(`action-menu/show`, {
+        resources: [resource],
+        elem:      event.target
+      });
+    },
+
+    createVlanConfigLocation(group) {
+      const clusterNetwork = group.key;
+
+      const location = {
+        name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+        params: {
+          product:  HARVESTER_PRODUCT,
+          resource: HCI.VLAN_CONFIG,
+        },
+      };
+
+      location.query = { [CLUSTER_NETWORK]: clusterNetwork };
+
+      return location;
+    },
+
+    slotName(clusterNetwork) {
+      return `main-row:${ clusterNetwork }`;
+    },
+
+    groupLabel(group) {
+      const row = group.rows[0];
+
+      if (row.isFake) {
+        return `${ this.t('harvester.network.clusterNetwork.label') }: ${ row.nameDisplay }`;
+      }
+
+      return `${ this.t('harvester.network.clusterNetwork.label') }: ${ group.key }`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Loading v-if="$fetchState.pending" />
+    <div v-else>
+      <Masthead
+        :schema="clusterNetworkSchema"
+        :type-display="t('harvester.clusterNetwork.title')"
+        :resource="HCI.CLUSTER_NETWORK"
+        :create-location="createClusterNetworkLocation"
+        :create-button-label="t('harvester.clusterNetwork.create.button.label')"
+      />
+      <ResourceTable
+        :rows="rowsWithFakeClusterNetworks"
+        :headers="headers"
+        :groupable="true"
+        :schema="vlanConfigSchema"
+        group-by="groupByClusterNetwork"
+      >
+        <template #header-middle>
+          <div />
+        </template>
+        <template #group-by="{group}">
+          <div class="group-bar">
+            <div class="group-tab">
+              <span>
+                {{ groupLabel(group) }}
+              </span>
+            </div>
+
+            <div class="right">
+              <router-link
+                v-if="isClusterNetworkCreatable && group.key !== 'mgmt'"
+                class="btn btn-sm role-secondary mr-5"
+                :to="createVlanConfigLocation(group)"
+              >
+                {{ t('harvester.vlanConfig.createNetworkConfig') }}
+              </router-link>
+              <button
+                type="button"
+                class="btn btn-sm role-multi-action actions mr-10"
+                :class="{invisible: !showClusterNetworkActionButton(group)}"
+                @click="showClusterNetworkAction($event, group)"
+              >
+                <i class="icon icon-actions" />
+              </button>
+            </div>
+          </div>
+        </template>
+        <template
+          v-for="clusterNetwork in clusterNetworkWithoutConfigs"
+          v-slot:[slotName(clusterNetwork.id)]
+        >
+          <tr
+            v-show="!clusterNetwork.hasChild"
+            :key="clusterNetwork.id"
+            class="main-row"
+          >
+            <td
+              class="empty text-center"
+              colspan="12"
+            >
+              {{ clusterNetwork.id === 'mgmt' ? t('harvester.clusterNetwork.mgmt') : t('harvester.clusterNetwork.clusterNetwork') }}
+            </td>
+          </tr>
+        </template>
+      </ResourceTable>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.group-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .right {
+    margin-top: 5px;
+    margin-bottom: 3px;
+  }
+
+  .group-tab {
+    &, &::after {
+        height: 50px;
+    }
+
+    &::after {
+        right: -20px;
+    }
+
+    SPAN {
+      color: var(--body-text) !important;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .col-link-detail {
+    // Avoid 'Create Network Config' button to overlap the namespace tab when resize table to min length
+    min-width: 200px;
+  }
+</style>
+
+<style lang="scss">
+  .group-bar .right {
+    display: flex;
+    margin-left: 50px;
+    a {
+      height: 30px;
+    }
+  }
diff --git a/pkg/harvester/mixins/harvester-disk.js b/pkg/harvester/mixins/harvester-disk.js
new file mode 100644
index 00000000..6b8a26bb
--- /dev/null
+++ b/pkg/harvester/mixins/harvester-disk.js
@@ -0,0 +1,25 @@
+import { findBy, isArray } from '@shell/utils/array';
+
+export default {
+  computed: {
+    conditions() {
+      return this.value?.conditions || [];
+    },
+
+    readyCondition() {
+      if (isArray(this.conditions)) {
+        return findBy(this.conditions, 'type', 'Ready') || {};
+      } else {
+        return this.conditions.Ready;
+      }
+    },
+
+    schedulableCondition() {
+      if (isArray(this.conditions)) {
+        return findBy(this.conditions, 'type', 'Schedulable') || {};
+      } else {
+        return this.conditions.Schedulable;
+      }
+    },
+  },
+};
diff --git a/pkg/harvester/mixins/harvester-vm/impl.js b/pkg/harvester/mixins/harvester-vm/impl.js
new file mode 100644
index 00000000..ebf67032
--- /dev/null
+++ b/pkg/harvester/mixins/harvester-vm/impl.js
@@ -0,0 +1,306 @@
+import YAML from 'yaml';
+import jsyaml from 'js-yaml';
+import isEqual from 'lodash/isEqual';
+import { clone } from '@shell/utils/object';
+import { SECRET } from '@shell/config/types';
+import { HCI } from '../../types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { OS } from './index';
+import { parseVolumeClaimTemplates } from '../../utils/vm';
+
+export const QGA_JSON = {
+  package_update: true,
+  packages:       ['qemu-guest-agent'],
+  runcmd:         [
+    [
+      'systemctl',
+      'enable',
+      '--now',
+      'qemu-guest-agent.service'
+    ]
+  ]
+};
+
+export const QGA_MAP = { default: 'qemu-guest-agent.service' };
+
+export const USB_TABLET = [{
+  bus:  'usb',
+  name: 'tablet',
+  type: 'tablet'
+}];
+
+export const SSH_EXISTING_TYPE = {
+  EXISTING_ALL:             'EXISTING_ALL',
+  EXISTING_ONLY_ANNOTATION: 'EXISTING_ANNOTATION',
+  EXISTING_ONLY_CLOUD:      'EXISTING_CLOUD',
+};
+
+export default {
+  methods: {
+    hasCloudConfigComment(userScript) {
+      // Check that userData contains: #cloud-config
+      const userDataDoc = userScript ? YAML.parseDocument(userScript) : YAML.parseDocument({});
+      const items = userDataDoc?.contents?.items || [];
+
+      let exist = false;
+
+      if (userDataDoc?.comment === 'cloud-config' || userDataDoc?.comment?.includes('cloud-config\n')) {
+        exist = true;
+      }
+
+      if (userDataDoc?.commentBefore === 'cloud-config' || userDataDoc?.commentBefore?.includes('cloud-config\n')) {
+        exist = true;
+      }
+
+      items.map((item) => {
+        const key = item.key;
+
+        if (key?.commentBefore === 'cloud-config' || key?.commentBefore?.includes('cloud-config\n')) {
+          exist = true;
+        }
+      });
+
+      return exist;
+    },
+
+    getSSHValue(id) {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const sshs = this.$store.getters[`${ inStore }/all`](HCI.SSH) || [];
+
+      return sshs.find( O => O.id === id)?.spec?.publicKey || undefined;
+    },
+
+    getOsType(vm) {
+      return vm.metadata?.labels?.[HCI_ANNOTATIONS.OS];
+    },
+
+    getMatchQGA(osType) {
+      const _QGA_JSON = clone(QGA_JSON);
+      let hasCustomQGA = false;
+
+      OS.forEach((O) => {
+        if (O.match) {
+          hasCustomQGA = O.match.find(type => type === osType);
+        }
+      });
+
+      if (hasCustomQGA) {
+        _QGA_JSON.runcmd[0][3] = QGA_MAP[osType];
+      } else {
+        _QGA_JSON.runcmd[0][3] = QGA_MAP['default'];
+      }
+
+      return _QGA_JSON;
+    },
+
+    getSimilarRuncmd(osType) {
+      const _QGA_JSON = clone(QGA_JSON);
+
+      if (osType === 'openSUSE') {
+        _QGA_JSON.runcmd[0][3] = QGA_MAP['default'];
+      } else {
+        _QGA_JSON.runcmd[0][3] = QGA_MAP['suse'];
+      }
+
+      return _QGA_JSON.runcmd[0];
+    },
+
+    hasInstallAgent(userScript, osType, oldValue) {
+      let dataFormat = {};
+      const _QGA_JSON = this.getMatchQGA(osType);
+
+      try {
+        dataFormat = jsyaml.load(userScript) || {};
+      } catch (e) {
+        new Error('Function(hasInstallAgent) error');
+
+        return oldValue;
+      }
+
+      return dataFormat?.packages?.includes('qemu-guest-agent') && !!dataFormat?.runcmd?.find( S => Array.isArray(S) && S.join('-') === _QGA_JSON.runcmd[0].join('-'));
+    },
+
+    isInstallUSBTablet(spec) {
+      const inputs = spec?.template?.spec?.domain?.devices?.inputs;
+
+      if (Array.isArray(inputs)) {
+        return !!inputs.find((O) => {
+          return isEqual(O, USB_TABLET[0]);
+        });
+      } else {
+        return false;
+      }
+    },
+
+    isEfiEnabled(spec) {
+      return !!(spec?.template?.spec?.domain?.firmware?.bootloader?.efi);
+    },
+
+    isTpmEnabled(spec) {
+      return !!spec?.template?.spec?.domain?.devices?.tpm ;
+    },
+
+    isSecureBoot(spec) {
+      return !!spec?.template?.spec?.domain?.firmware?.bootloader?.efi?.secureBoot;
+    },
+
+    getCloudInitNoCloud(spec) {
+      const secret = this.getSecret(spec);
+      let userData = secret?.decodedData?.userdata;
+      let networkData = secret?.decodedData?.networkdata;
+
+      const cloudInitNoCloud = spec?.template?.spec?.volumes?.find( (V) => {
+        return V.name === 'cloudinitdisk';
+      })?.cloudInitNoCloud || {};
+
+      // If the value is not found inside the secret, the data may be written directly in the yaml
+      if (cloudInitNoCloud?.userData) {
+        userData = cloudInitNoCloud.userData;
+        this.saveUserDataAsClearText = true;
+      }
+
+      if (cloudInitNoCloud?.networkData) {
+        networkData = cloudInitNoCloud.networkData;
+        this.saveNetworkDataAsClearText = true;
+      }
+
+      return { userData, networkData };
+    },
+
+    getSecret(spec) {
+      const cloudInitNoCloud = spec?.template?.spec?.volumes?.find( (V) => {
+        return V.name === 'cloudinitdisk';
+      })?.cloudInitNoCloud || {};
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const secrets = this.$store.getters[`${ inStore }/all`](SECRET) || [];
+
+      const secretName = cloudInitNoCloud?.secretRef?.name || cloudInitNoCloud?.networkDataSecretRef?.name;
+
+      const secret = secrets.find(s => s.metadata.name === secretName);
+
+      return secret;
+    },
+
+    getAccessCredentials(spec) {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const secrets = this.$store.getters[`${ inStore }/all`](SECRET) || [];
+      const credentials = spec?.template?.spec?.accessCredentials || [];
+      const annotations = JSON.parse(spec.template.metadata?.annotations?.[HCI_ANNOTATIONS.DYNAMIC_SSHKEYS_NAMES] || '[]');
+
+      return credentials.map((c) => {
+        const source = !!c.userPassword ? 'userPassword' : 'sshPublicKey';
+        const secretName = c[source]?.source?.secret?.secretName;
+        const secretRef = secrets.find(s => s.metadata.name === secretName);
+        const out = {
+          source, username: '', newPassword: '', users: [], sshkeys: [], secretName, secretRef
+        };
+
+        if (!secretRef) {
+          out.secretRef = undefined;
+        } else if (source === 'userPassword') {
+          const username = Object.keys(secretRef?.data)[0];
+          const newPassword = secretRef.decodedData[username];
+
+          out.username = username;
+          out.newPassword = newPassword;
+        } else {
+          const users = c[source].propagationMethod.qemuGuestAgent.users;
+          const sshkeys = annotations?.[secretName];
+
+          out.users = users;
+          out.sshkeys = sshkeys;
+        }
+
+        return out;
+      });
+    },
+
+    getRootImageId(vm) {
+      const volumes = parseVolumeClaimTemplates(vm);
+
+      return volumes?.[0]?.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_ID] || '';
+    },
+
+    getSSHFromAnnotation(spec) {
+      const ids = spec?.template?.metadata?.annotations?.[HCI_ANNOTATIONS.SSH_NAMES] || '[]';
+
+      return JSON.parse(ids);
+    },
+
+    convertToJson(script = '') {
+      let out = {};
+
+      try {
+        out = jsyaml.load(script);
+      } catch (e) {
+        new Error('Function(convertToJson) error');
+      }
+
+      return out;
+    },
+
+    getSSHFromUserData(userData) {
+      return this.convertToJson(userData)?.ssh_authorized_keys || [];
+    },
+
+    compareSSHValue(a = '', b = '') {
+      const r = /(\r\n\t|\n|\r\t)|(\s*)/gm;
+
+      return a.replace(r, '') === b.replace(r, '');
+    },
+
+    mergeAllSSHs(spec) {
+      const keys = this.getSSHFromAnnotation(spec);
+      const { userScript: userData } = this.getCloudInitNoCloud(spec);
+
+      if (!keys?.length < 0 && !userData) {
+        return [];
+      }
+
+      let out = [];
+
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const allSSHs = this.$store.getters[`${ inStore }/all`](HCI.SSH) || [];
+
+      out = (keys || []).map((id) => {
+        const hasSSHResource = allSSHs.find(ssh => ssh.id === id);
+
+        if (hasSSHResource) {
+          return {
+            id:   hasSSHResource.id,
+            data: hasSSHResource,
+            type: SSH_EXISTING_TYPE.EXISTING_ALL
+          };
+        } else {
+          return {
+            id,
+            data: id,
+            type: SSH_EXISTING_TYPE.EXISTING_ONLY_ANNOTATION
+          };
+        }
+      });
+
+      const _userDataSSH = this.getSSHFromUserData(userData);
+
+      _userDataSSH.map( (sshValue) => {
+        const hasSSHResource = allSSHs.find(ssh => this.compareSSHValue(sshValue, ssh.spec?.publicKey));
+
+        if (hasSSHResource && !out.find(O => O.id === hasSSHResource.id)) {
+          out.push({
+            id:   hasSSHResource.id,
+            data: hasSSHResource,
+            type: SSH_EXISTING_TYPE.EXISTING_ALL
+          });
+        } else if (!hasSSHResource) {
+          out.push({
+            id:   'Unknown',
+            data: sshValue,
+            type: SSH_EXISTING_TYPE.EXISTING_ONLY_CLOUD
+          });
+        }
+      });
+
+      return out;
+    },
+  },
+};
diff --git a/pkg/harvester/mixins/harvester-vm/index.js b/pkg/harvester/mixins/harvester-vm/index.js
new file mode 100644
index 00000000..7367863c
--- /dev/null
+++ b/pkg/harvester/mixins/harvester-vm/index.js
@@ -0,0 +1,1522 @@
+import YAML from 'yaml';
+import jsyaml from 'js-yaml';
+import isEqual from 'lodash/isEqual';
+import isEmpty from 'lodash/isEmpty';
+import difference from 'lodash/difference';
+
+import { sortBy } from '@shell/utils/sort';
+import { set } from '@shell/utils/object';
+
+import { allHash } from '@shell/utils/promise';
+import { randomStr } from '@shell/utils/string';
+import { base64Decode } from '@shell/utils/crypto';
+import { formatSi, parseSi } from '@shell/utils/units';
+import { _CLONE, _CREATE, _VIEW } from '@shell/config/query-params';
+import {
+  PV, PVC, STORAGE_CLASS, NODE, SECRET, CONFIG_MAP, NETWORK_ATTACHMENT, NAMESPACE, LONGHORN
+} from '@shell/config/types';
+import { HOSTNAME } from '@shell/config/labels-annotations';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { uniq } from '@shell/utils/array';
+import { ADD_ONS, SOURCE_TYPE, ACCESS_CREDENTIALS } from '../../config/harvester-map';
+import { HCI_SETTING } from '../../config/settings';
+import { HCI } from '../../types';
+import { parseVolumeClaimTemplates } from '../../utils/vm';
+import impl, { QGA_JSON, USB_TABLET } from './impl';
+
+export const MANAGEMENT_NETWORK = 'management Network';
+
+export const OS = [{
+  label: 'Windows',
+  value: 'windows'
+}, {
+  label: 'Linux',
+  value: 'linux'
+}, {
+  label: 'SUSE Linux Enterprise',
+  value: 'SLEs'
+}, {
+  label: 'Debian',
+  value: 'debian'
+}, {
+  label: 'Fedora',
+  value: 'fedora'
+}, {
+  label: 'Gentoo',
+  value: 'gentoo'
+}, {
+  label: 'Oracle',
+  value: 'oracle'
+}, {
+  label: 'Red Hat',
+  value: 'redhat'
+}, {
+  label: 'openSUSE',
+  value: 'openSUSE',
+}, {
+  label: 'Ubuntu',
+  value: 'ubuntu'
+}, {
+  label: 'Other Linux',
+  match: ['centos'],
+  value: 'otherLinux'
+}];
+
+export const CD_ROM = 'cd-rom';
+export const HARD_DISK = 'disk';
+
+export default {
+  mixins: [impl],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    resource: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const hash = {
+      pvs:               this.$store.dispatch(`${ inStore }/findAll`, { type: PV }),
+      pvcs:              this.$store.dispatch(`${ inStore }/findAll`, { type: PVC }),
+      storageClasses:    this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }),
+      sshs:              this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SSH }),
+      settings:          this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SETTING }),
+      images:            this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.IMAGE }),
+      versions:          this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM_VERSION }),
+      templates:         this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM_TEMPLATE }),
+      networkAttachment: this.$store.dispatch(`${ inStore }/findAll`, { type: NETWORK_ATTACHMENT }),
+      vmis:              this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VMI }),
+      vmims:             this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VMIM }),
+      vms:               this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM }),
+      secrets:           this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET }),
+      addons:            this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS }),
+    };
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](NODE)) {
+      hash.nodes = this.$store.dispatch(`${ inStore }/findAll`, { type: NODE });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.CLUSTER_NETWORK)) {
+      hash.clusterNetworks = this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](HCI.VLAN_CONFIG)) {
+      hash.clusterNetworks = this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VLAN_CONFIG });
+    }
+
+    if (this.$store.getters[`${ inStore }/schemaFor`](LONGHORN.VOLUMES)) {
+      hash.longhornVolumes = this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.VOLUMES });
+    }
+
+    const res = await allHash(hash);
+
+    const hasPCISchema = !!this.$store.getters[`${ inStore }/schemaFor`](HCI.PCI_DEVICE);
+    const hasSRIOVGPUSchema = !!this.$store.getters[`${ inStore }/schemaFor`](HCI.SR_IOVGPU_DEVICE);
+
+    const hasPCIAddon = res.addons.find(addon => addon.name === ADD_ONS.PCI_DEVICE_CONTROLLER)?.spec?.enabled === true;
+    const hasSriovgpuAddon = res.addons.find(addon => addon.name === ADD_ONS.NVIDIA_DRIVER_TOOLKIT_CONTROLLER)?.spec?.enabled === true;
+
+    this.enabledPCI = hasPCIAddon && hasPCISchema;
+    this.enabledSriovgpu = hasSriovgpuAddon && hasPCIAddon && hasSRIOVGPUSchema;
+  },
+
+  data() {
+    const isClone = this.realMode === _CLONE;
+
+    return {
+      OS,
+      isClone,
+      spec:                          null,
+      osType:                        'linux',
+      sshKey:                        [],
+      runStrategy:                   'RerunOnFailure',
+      installAgent:                  true,
+      hasCreateVolumes:              [],
+      installUSBTablet:              true,
+      networkScript:                 '',
+      userScript:                    '',
+      imageId:                       '',
+      diskRows:                      [],
+      networkRows:                   [],
+      machineType:                   '',
+      secretName:                    '',
+      secretRef:                     null,
+      showAdvanced:                  false,
+      deleteAgent:                   true,
+      memory:                        null,
+      cpu:                           '',
+      reservedMemory:                null,
+      accessCredentials:             [],
+      efiEnabled:                    false,
+      tpmEnabled:                    false,
+      secureBoot:                    false,
+      userDataTemplateId:            '',
+      saveUserDataAsClearText:       false,
+      saveNetworkDataAsClearText:    false,
+      enabledPCI:                    false,
+      enabledSriovgpu:               false,
+      immutableMode:                 this.realMode === _CREATE ? _CREATE : _VIEW,
+      terminationGracePeriodSeconds: '',
+    };
+  },
+
+  computed: {
+    inStore() {
+      return this.$store.getters['currentProduct'].inStore;
+    },
+
+    images() {
+      return this.$store.getters[`${ this.inStore }/all`](HCI.IMAGE);
+    },
+
+    versions() {
+      return this.$store.getters[`${ this.inStore }/all`](HCI.VM_VERSION);
+    },
+
+    templates() {
+      return this.$store.getters[`${ this.inStore }/all`](HCI.VM_TEMPLATE);
+    },
+
+    pvcs() {
+      return this.$store.getters[`${ this.inStore }/all`](PVC);
+    },
+
+    secrets() {
+      return this.$store.getters[`${ this.inStore }/all`](SECRET);
+    },
+
+    filteredNamespaces() {
+      return this.$store.getters['harvester/all'](NAMESPACE).filter(namespace => !namespace.isSystem);
+    },
+
+    nodes() {
+      return this.$store.getters['harvester/all'](NODE);
+    },
+
+    nodesIdOptions() {
+      const nodes = this.$store.getters[`${ this.inStore }/all`](NODE);
+
+      const networkNames = this.networkRows.map(n => n.networkName);
+      const vmNetworks = this.$store.getters[`${ this.inStore }/all`](NETWORK_ATTACHMENT);
+      const selectedVMNetworks = networkNames.map(name => vmNetworks.find(n => n.id === name)).filter(n => n?.id);
+      const clusterNetworks = uniq(selectedVMNetworks.map(n => n.clusterNetworkResource?.id));
+
+      return nodes.filter(N => !N.isUnSchedulable).map((node) => {
+        const requireLabelKeys = [];
+        let isNetworkSchedule = true;
+
+        if (clusterNetworks.length > 0) {
+          clusterNetworks.map((clusterNetwork) => {
+            requireLabelKeys.push(`network.harvesterhci.io/${ clusterNetwork }`);
+          });
+        }
+
+        requireLabelKeys.map((requireLabelKey) => {
+          if (node.metadata?.labels?.[requireLabelKey] !== 'true') {
+            isNetworkSchedule = false;
+          }
+        });
+
+        return {
+          label:    isNetworkSchedule ? node.nameDisplay : `${ node.nameDisplay } (${ this.t('harvester.virtualMachine.scheduling.networkNotSupport') })`,
+          value:    node.id,
+          disabled: !isNetworkSchedule,
+        };
+      });
+    },
+
+    defaultStorageClass() {
+      const defaultStorage = this.$store.getters[`${ this.inStore }/all`](STORAGE_CLASS).find( O => O.isDefault);
+
+      return defaultStorage?.metadata?.name || 'longhorn';
+    },
+
+    storageClassSetting() {
+      try {
+        const storageClassValue = this.$store.getters[`${ this.inStore }/all`](HCI.SETTING).find( O => O.id === HCI_SETTING.DEFAULT_STORAGE_CLASS)?.value;
+
+        return JSON.parse(storageClassValue);
+      } catch (e) {
+        return {};
+      }
+    },
+
+    customVolumeMode() {
+      return this.storageClassSetting.volumeMode || 'Block';
+    },
+
+    customAccessMode() {
+      return this.storageClassSetting.accessModes || 'ReadWriteMany';
+    },
+
+    isWindows() {
+      return this.osType === 'windows';
+    },
+
+    needNewSecret() {
+      // When creating a template it is always necessary to create a new secret.
+      return this.resource === HCI.VM_VERSION || this.isCreate;
+    },
+
+    defaultTerminationSetting() {
+      const setting = this.$store.getters[`${ this.inStore }/all`](HCI.SETTING).find( O => O.id === HCI_SETTING.VM_TERMINATION_PERIOD) || {};
+
+      return Number(setting?.value || setting?.default);
+    },
+
+    affinityLabels() {
+      return {
+        namespaceInputLabel:      this.t('harvesterManager.affinity.namespaces.label'),
+        namespaceSelectionLabels: [
+          this.t('harvesterManager.affinity.thisPodNamespace'),
+          this.t('workload.scheduling.affinity.allNamespaces'),
+          this.t('harvesterManager.affinity.matchExpressions.inNamespaces')
+        ],
+        addLabel:               this.t('harvesterManager.affinity.addLabel'),
+        topologyKeyPlaceholder: this.t('harvesterManager.affinity.topologyKey.placeholder')
+      };
+    },
+  },
+
+  async created() {
+    await this.$store.dispatch(`${ this.inStore }/findAll`, { type: SECRET });
+    this.getInitConfig({ value: this.value, init: this.isCreate });
+  },
+
+  methods: {
+    getInitConfig(config) {
+      const {
+        value, existUserData, fromTemplate = false, init = false
+      } = config;
+
+      const vm = this.resource === HCI.VM ? value : this.resource === HCI.BACKUP ? this.value.status?.source : value.spec.vm;
+
+      const spec = vm?.spec;
+
+      if (!spec) {
+        return;
+      }
+      const resources = spec.template.spec.domain.resources;
+
+      // If the user is created via yaml, there may be no "resources.limits": kubectl apply -f https://kubevirt.io/labs/manifests/vm.yaml
+      if (!resources?.limits || (resources?.limits && !resources?.limits?.memory && resources?.limits?.memory !== null)) {
+        spec.template.spec.domain.resources = {
+          ...spec.template.spec.domain.resources,
+          limits: {
+            ...spec.template.spec.domain.resources.limits,
+            memory: spec.template.spec.domain.resources.requests.memory
+          }
+        };
+      }
+
+      const runStrategy = spec.runStrategy || 'RerunOnFailure';
+      const machineType = value.machineType;
+      const cpu = spec.template.spec.domain?.cpu?.cores;
+      const memory = spec.template.spec.domain.resources.limits.memory;
+      const reservedMemory = vm.metadata?.annotations?.[HCI_ANNOTATIONS.VM_RESERVED_MEMORY];
+      const terminationGracePeriodSeconds = spec.template.spec?.terminationGracePeriodSeconds || this.defaultTerminationSetting;
+
+      const sshKey = this.getSSHFromAnnotation(spec) || [];
+
+      const imageId = this.getRootImageId(vm) || '';
+      const diskRows = this.getDiskRows(vm);
+      const networkRows = this.getNetworkRows(vm, { fromTemplate, init });
+      const hasCreateVolumes = this.getHasCreatedVolumes(spec) || [];
+
+      let { userData = undefined, networkData = undefined } = this.getCloudInitNoCloud(spec);
+
+      if (this.resource === HCI.BACKUP) {
+        const secretBackups = this.value.status?.secretBackups;
+
+        if (secretBackups) {
+          const secretNetworkData = secretBackups[0]?.data?.networkdata || '';
+          const secretUserData = secretBackups[0]?.data?.userdata || '';
+
+          userData = base64Decode(secretUserData);
+          networkData = base64Decode(secretNetworkData);
+        }
+      }
+      const osType = this.getOsType(vm) || 'linux';
+
+      userData = this.isCreate && !existUserData && !this.isClone ? this.getInitUserData({ osType }) : userData;
+
+      const installUSBTablet = this.isInstallUSBTablet(spec);
+      const installAgent = this.hasInstallAgent(userData, osType, true);
+      const efiEnabled = this.isEfiEnabled(spec);
+      const tpmEnabled = this.isTpmEnabled(spec);
+      const secureBoot = this.isSecureBoot(spec);
+
+      const secretRef = this.getSecret(spec);
+      const accessCredentials = this.getAccessCredentials(spec);
+
+      if (Object.prototype.hasOwnProperty.call(spec, 'running')) {
+        delete spec.running;
+        spec.runStrategy = 'RerunOnFailure';
+      }
+
+      this.$set(this, 'spec', spec);
+      this.$set(this, 'runStrategy', runStrategy);
+      this.$set(this, 'secretRef', secretRef);
+      this.$set(this, 'accessCredentials', accessCredentials);
+      this.$set(this, 'userScript', userData);
+      this.$set(this, 'networkScript', networkData);
+
+      this.$set(this, 'sshKey', sshKey);
+      this.$set(this, 'osType', osType);
+      this.$set(this, 'installAgent', installAgent);
+
+      this.$set(this, 'cpu', cpu);
+      this.$set(this, 'memory', memory);
+      this.$set(this, 'reservedMemory', reservedMemory);
+      this.$set(this, 'machineType', machineType);
+      this.$set(this, 'terminationGracePeriodSeconds', terminationGracePeriodSeconds);
+
+      this.$set(this, 'installUSBTablet', installUSBTablet);
+      this.$set(this, 'efiEnabled', efiEnabled);
+      this.$set(this, 'tpmEnabled', tpmEnabled);
+      this.$set(this, 'secureBoot', secureBoot);
+
+      this.$set(this, 'hasCreateVolumes', hasCreateVolumes);
+      this.$set(this, 'networkRows', networkRows);
+      this.$set(this, 'imageId', imageId);
+
+      this.$set(this, 'diskRows', diskRows);
+
+      this.refreshYamlEditor();
+    },
+
+    getDiskRows(vm) {
+      const namespace = vm.metadata.namespace;
+      const _volumes = vm.spec.template.spec.volumes || [];
+      const _disks = vm.spec.template.spec.domain.devices.disks || [];
+      const _volumeClaimTemplates = parseVolumeClaimTemplates(vm);
+
+      let out = [];
+
+      if (_disks.length === 0) {
+        out.push({
+          id:               randomStr(5),
+          source:           SOURCE_TYPE.IMAGE,
+          name:             'disk-0',
+          accessMode:       'ReadWriteMany',
+          bus:              'virtio',
+          volumeName:       '',
+          size:             '10Gi',
+          type:             HARD_DISK,
+          storageClassName: '',
+          image:            this.imageId,
+          volumeMode:       'Block',
+        });
+      } else {
+        out = _disks.map( (DISK, index) => {
+          const volume = _volumes.find( V => V.name === DISK.name );
+
+          let size = '';
+          let image = '';
+          let source = '';
+          let realName = '';
+          let container = '';
+          let volumeName = '';
+          let accessMode = '';
+          let volumeMode = '';
+          let storageClassName = '';
+          let hotpluggable = false;
+          let dataSource = null;
+
+          const type = DISK?.cdrom ? CD_ROM : DISK?.disk ? HARD_DISK : '';
+
+          if (volume?.containerDisk) { // SOURCE_TYPE.CONTAINER
+            source = SOURCE_TYPE.CONTAINER;
+            container = volume.containerDisk.image;
+          }
+
+          if (volume.persistentVolumeClaim && volume.persistentVolumeClaim?.claimName) {
+            volumeName = volume.persistentVolumeClaim.claimName;
+            const DVT = _volumeClaimTemplates.find( T => T.metadata.name === volumeName);
+
+            realName = volumeName;
+            // If the DVT can be found, it cannot be an existing volume
+            if (DVT) {
+              // has annotation (HCI_ANNOTATIONS.IMAGE_ID) => SOURCE_TYPE.IMAGE
+              if (DVT.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_ID] !== undefined) {
+                image = DVT.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_ID];
+                source = SOURCE_TYPE.IMAGE;
+              } else {
+                source = SOURCE_TYPE.NEW;
+              }
+
+              const dataVolumeSpecPVC = DVT?.spec || {};
+
+              volumeMode = dataVolumeSpecPVC?.volumeMode;
+              accessMode = dataVolumeSpecPVC?.accessModes?.[0];
+              size = dataVolumeSpecPVC?.resources?.requests?.storage || '10Gi';
+              storageClassName = dataVolumeSpecPVC?.storageClassName;
+              dataSource = dataVolumeSpecPVC?.dataSource;
+            } else {
+              // SOURCE_TYPE.ATTACH_VOLUME
+              // Compatible with VMS that have been created before, Because they're not saved in the annotation
+              const allPVCs = this.$store.getters['harvester/all'](PVC);
+              const pvcResource = allPVCs.find( O => O.id === `${ namespace }/${ volume?.persistentVolumeClaim?.claimName }`);
+
+              source = SOURCE_TYPE.ATTACH_VOLUME;
+              accessMode = pvcResource?.spec?.accessModes?.[0] || 'ReadWriteMany';
+              size = pvcResource?.spec?.resources?.requests?.storage || '10Gi';
+              storageClassName = pvcResource?.spec?.storageClassName;
+              volumeMode = pvcResource?.spec?.volumeMode || 'Block';
+              volumeName = pvcResource?.metadata?.name || '';
+            }
+
+            hotpluggable = volume.persistentVolumeClaim.hotpluggable || false;
+          }
+
+          const bus = DISK?.disk?.bus || DISK?.cdrom?.bus;
+
+          const bootOrder = DISK?.bootOrder ? DISK?.bootOrder : index;
+
+          const parseValue = parseSi(size);
+
+          const formatSize = formatSi(parseValue, {
+            increment:   1024,
+            addSuffix:   false,
+            maxExponent: 3,
+            minExponent: 3,
+          });
+
+          const volumeStatus = this.pvcs.find(P => P.id === `${ this.value.metadata.namespace }/${ volumeName }`)?.relatedPV?.metadata?.annotations?.[HCI_ANNOTATIONS.VOLUME_ERROR];
+
+          return {
+            id:         randomStr(5),
+            bootOrder,
+            source,
+            name:       DISK.name,
+            realName,
+            bus,
+            volumeName,
+            container,
+            accessMode,
+            size:       `${ formatSize }Gi`,
+            volumeMode: volumeMode || this.customVolumeMode,
+            image,
+            type,
+            storageClassName,
+            hotpluggable,
+            volumeStatus,
+            dataSource,
+            namespace
+          };
+        });
+      }
+
+      out = sortBy(out, 'bootOrder');
+
+      return out.filter( O => O.name !== 'cloudinitdisk');
+    },
+
+    getNetworkRows(vm, config) {
+      const { fromTemplate = false, init = false } = config;
+
+      const networks = vm.spec.template.spec.networks || [];
+      const interfaces = vm.spec.template.spec.domain.devices.interfaces || [];
+
+      const out = interfaces.map( (I, index) => {
+        const network = networks.find( N => I.name === N.name);
+
+        const type = I.sriov ? 'sriov' : I.bridge ? 'bridge' : 'masquerade';
+
+        const isPod = !!network.pod;
+
+        return {
+          ...I,
+          index,
+          type,
+          isPod,
+          newCreateId: (fromTemplate || init) ? randomStr(10) : false,
+          model:       I.model,
+          networkName: isPod ? MANAGEMENT_NETWORK : network?.multus?.networkName,
+        };
+      });
+
+      return out;
+    },
+
+    parseVM() {
+      this.userData = this.getUserData({ osType: this.osType, installAgent: this.installAgent });
+      this.parseOther();
+      this.parseAccessCredentials();
+      this.parseNetworkRows(this.networkRows);
+      this.parseDiskRows(this.diskRows);
+    },
+
+    parseOther() {
+      if (!this.spec.template.spec.domain.machine) {
+        this.$set(this.spec.template.spec.domain, 'machine', { type: this.machineType });
+      } else {
+        this.$set(this.spec.template.spec.domain.machine, 'type', this.machineType);
+      }
+
+      this.spec.template.spec.domain.cpu.cores = this.cpu;
+      this.spec.template.spec.domain.resources.limits.cpu = this.cpu ? this.cpu.toString() : this.cpu;
+      this.spec.template.spec.domain.resources.limits.memory = this.memory;
+      this.spec.template.spec.terminationGracePeriodSeconds = this.terminationGracePeriodSeconds;
+
+      // parse reserved memory
+      const vm = this.resource === HCI.VM ? this.value : this.value.spec.vm;
+
+      if (!this.reservedMemory) {
+        delete vm.metadata.annotations[HCI_ANNOTATIONS.VM_RESERVED_MEMORY];
+      } else {
+        vm.metadata.annotations[HCI_ANNOTATIONS.VM_RESERVED_MEMORY] = this.reservedMemory;
+      }
+    },
+
+    parseDiskRows(disk) {
+      const disks = [];
+      const volumes = [];
+      const diskNameLables = [];
+      const volumeClaimTemplates = [];
+
+      disk.forEach( (R, index) => {
+        const prefixName = this.value.metadata?.name || '';
+
+        let dataVolumeName = '';
+
+        if (R.source === SOURCE_TYPE.ATTACH_VOLUME) {
+          dataVolumeName = R.volumeName;
+        } else if (this.isClone || !this.hasCreateVolumes.includes(R.realName)) {
+          dataVolumeName = `${ prefixName }-${ R.name }-${ randomStr(5).toLowerCase() }`;
+        } else {
+          dataVolumeName = R.realName;
+        }
+
+        const _disk = this.parseDisk(R, index);
+        const _volume = this.parseVolume(R, dataVolumeName);
+        const _dataVolumeTemplate = this.parseVolumeClaimTemplate(R, dataVolumeName);
+
+        disks.push(_disk);
+        volumes.push(_volume);
+        diskNameLables.push(dataVolumeName);
+
+        if (R.source !== SOURCE_TYPE.CONTAINER) {
+          volumeClaimTemplates.push(_dataVolumeTemplate);
+        }
+      });
+
+      if (!this.secretName || this.needNewSecret) {
+        this.secretName = this.generateSecretName(this.secretNamePrefix);
+      }
+
+      if (!disks.find( D => D.name === 'cloudinitdisk') && (this.userData || this.networkData)) {
+        if (!this.isWindows) {
+          disks.push({
+            name: 'cloudinitdisk',
+            disk: { bus: 'virtio' }
+          });
+
+          const userData = this.getUserData({ osType: this.osType, installAgent: this.installAgent });
+
+          const cloudinitdisk = {
+            name:             'cloudinitdisk',
+            cloudInitNoCloud: {}
+          };
+
+          if (this.saveUserDataAsClearText) {
+            cloudinitdisk.cloudInitNoCloud.userData = userData;
+          } else {
+            cloudinitdisk.cloudInitNoCloud.secretRef = { name: this.secretName };
+          }
+
+          if (this.saveNetworkDataAsClearText) {
+            cloudinitdisk.cloudInitNoCloud.networkData = this.networkScript;
+          } else {
+            cloudinitdisk.cloudInitNoCloud.networkDataSecretRef = { name: this.secretName };
+          }
+
+          volumes.push(cloudinitdisk);
+        }
+      }
+
+      let spec = {
+        ...this.spec,
+        runStrategy: this.runStrategy,
+        template:    {
+          ...this.spec.template,
+          metadata: {
+            ...this.spec?.template?.metadata,
+            annotations: {
+              ...this.spec?.template?.metadata?.annotations,
+              [HCI_ANNOTATIONS.SSH_NAMES]: JSON.stringify(this.sshKey)
+            },
+            labels: {
+              ...this.spec?.template?.metadata?.labels,
+              [HCI_ANNOTATIONS.VM_NAME]: this.value?.metadata?.name,
+            }
+          },
+          spec: {
+            ...this.spec.template?.spec,
+            domain: {
+              ...this.spec.template?.spec?.domain,
+              devices: {
+                ...this.spec.template?.spec?.domain?.devices,
+                disks,
+              },
+            },
+            volumes,
+          }
+        }
+      };
+
+      if (volumes.length === 0) {
+        delete spec.template.spec.volumes;
+      }
+
+      if (this.resource === HCI.VM) {
+        if (!this.isSingle) {
+          spec = this.multiVMScheduler(spec);
+        }
+
+        this.$set(this.value.metadata, 'annotations', {
+          ...this.value.metadata.annotations,
+          [HCI_ANNOTATIONS.VOLUME_CLAIM_TEMPLATE]: JSON.stringify(volumeClaimTemplates),
+          [HCI_ANNOTATIONS.NETWORK_IPS]:           JSON.stringify(this.value.networkIps)
+        });
+
+        this.$set(this.value.metadata, 'labels', {
+          ...this.value.metadata.labels,
+          [HCI_ANNOTATIONS.CREATOR]: 'harvester',
+          [HCI_ANNOTATIONS.OS]:      this.osType
+        });
+
+        this.$set(this.value, 'spec', spec);
+        this.$set(this, 'spec', spec);
+      } else if (this.resource === HCI.VM_VERSION) {
+        this.$set(this.value.spec.vm, 'spec', spec);
+        this.$set(this.value.spec.vm.metadata, 'annotations', { ...this.value.spec.vm.metadata.annotations, [HCI_ANNOTATIONS.VOLUME_CLAIM_TEMPLATE]: JSON.stringify(volumeClaimTemplates) });
+        this.$set(this.value.spec.vm.metadata, 'labels', {
+          ...this.value.spec.vm.metadata.labels,
+          [HCI_ANNOTATIONS.OS]: this.osType,
+        });
+        this.$set(this, 'spec', spec);
+      }
+    },
+
+    removeTrailingHyphen(str) {
+      while (str.endsWith('-')) {
+        str = str.slice(0, -1);
+      }
+
+      return str;
+    },
+
+    multiVMScheduler(spec) {
+      const namePrefix = this.removeTrailingHyphen(this.namePrefix);
+
+      spec.template.metadata.labels[HCI_ANNOTATIONS.VM_NAME_PREFIX] = namePrefix;
+
+      const rule = {
+        weight:          1,
+        podAffinityTerm: {
+          topologyKey:   HOSTNAME,
+          labelSelector: { matchLabels: { [HCI_ANNOTATIONS.VM_NAME_PREFIX]: namePrefix } }
+        }
+      };
+
+      return {
+        ...spec,
+        template: {
+          ...spec.template,
+          spec: {
+            ...spec.template.spec,
+            affinity: {
+              ...spec.template.spec.affinity,
+              podAntiAffinity: {
+                ...spec.template.spec?.affinity?.podAntiAffinity,
+                preferredDuringSchedulingIgnoredDuringExecution: [
+                  ...(spec.template.spec?.affinity?.podAntiAffinity?.preferredDuringSchedulingIgnoredDuringExecution || []),
+                  rule
+                ]
+              }
+            }
+          }
+        }
+      };
+    },
+
+    parseNetworkRows(networkRow) {
+      const networks = [];
+      const interfaces = [];
+
+      networkRow.forEach( (R) => {
+        const _network = this.parseNetwork(R);
+        const _interface = this.parseInterface(R);
+
+        networks.push(_network);
+        interfaces.push(_interface);
+      });
+
+      const spec = {
+        ...this.spec.template.spec,
+        domain: {
+          ...this.spec.template.spec.domain,
+          devices: {
+            ...this.spec.template.spec.domain.devices,
+            interfaces,
+          },
+        },
+        networks
+      };
+
+      this.$set(this.spec.template, 'spec', spec);
+    },
+
+    parseAccessCredentials() {
+      const out = [];
+      const annotations = {};
+      const users = JSON.parse(this.spec?.template?.metadata?.annotations?.[HCI_ANNOTATIONS.DYNAMIC_SSHKEYS_USERS] || '[]');
+
+      for (const row of this.accessCredentials) {
+        if (this.needNewSecret) {
+          row.secretName = this.generateSecretName(this.secretNamePrefix);
+        }
+
+        if (row.source === ACCESS_CREDENTIALS.RESET_PWD) {
+          users.push(row.username);
+          out.push({
+            userPassword: {
+              source:            { secret: { secretName: row.secretName } },
+              propagationMethod: { qemuGuestAgent: { } }
+            }
+          });
+        }
+
+        if (row.source === ACCESS_CREDENTIALS.INJECT_SSH) {
+          users.push(...row.users);
+          annotations[row.secretName] = row.sshkeys;
+          out.push({
+            sshPublicKey: {
+              source:            { secret: { secretName: row.secretName } },
+              propagationMethod: { qemuGuestAgent: { users: row.users } }
+            }
+          });
+        }
+      }
+
+      if (out.length === 0 && !!this.spec.template.spec.accessCredentials) {
+        delete this.spec.template.spec.accessCredentials;
+      } else {
+        this.spec.template.spec.accessCredentials = out;
+      }
+
+      if (users.length !== 0) {
+        this.spec.template.metadata.annotations[HCI_ANNOTATIONS.DYNAMIC_SSHKEYS_USERS] = JSON.stringify(Array.from(new Set(users)));
+        this.spec.template.metadata.annotations[HCI_ANNOTATIONS.DYNAMIC_SSHKEYS_NAMES] = JSON.stringify(annotations);
+      }
+    },
+
+    getInitUserData(config) {
+      const _QGA_JSON = this.getMatchQGA(config.osType);
+
+      const out = jsyaml.dump(_QGA_JSON);
+
+      return `#cloud-config\n${ out }`;
+    },
+
+    /**
+     * Generate user data yaml which is decide by the "Install guest agent",
+     * "OS type", "SSH Keys" and user input.
+     * @param config
+     */
+    getUserData(config) {
+      try {
+        // https://github.com/eemeli/yaml/issues/136
+        let userDataDoc = this.userScript ? YAML.parseDocument(this.userScript) : YAML.parseDocument({});
+
+        const allSSHAuthorizedKeys = this.mergeSSHAuthorizedKeys(this.userScript);
+
+        if (allSSHAuthorizedKeys.length > 0) {
+          userDataDoc.setIn(['ssh_authorized_keys'], allSSHAuthorizedKeys);
+        } else if (YAML.isCollection(userDataDoc.getIn('ssh_authorized_keys'))) {
+          userDataDoc.deleteIn(['ssh_authorized_keys']);
+        }
+
+        userDataDoc = config.installAgent ? this.mergeQGA({ userDataDoc, ...config }) : this.deleteQGA({ userDataDoc, ...config });
+        const userDataYaml = userDataDoc.toString();
+
+        if (userDataYaml === '{}\n') {
+          // When the YAML parsed value is '{}\n', it means that the userData is empty, then undefined is returned.
+          return undefined;
+        }
+
+        return userDataYaml;
+      } catch (e) {
+        console.error('Error: Unable to parse yaml document', e); // eslint-disable-line no-console
+
+        return this.userScript;
+      }
+    },
+
+    updateSSHKey(neu) {
+      this.$set(this, 'sshKey', neu);
+    },
+
+    updateCpuMemory(cpu, memory) {
+      this.$set(this, 'cpu', cpu);
+      this.$set(this, 'memory', memory);
+    },
+
+    parseDisk(R, index) {
+      const out = { name: R.name };
+
+      if (R.type === HARD_DISK) {
+        out.disk = { bus: R.bus };
+      } else if (R.type === CD_ROM) {
+        out.cdrom = { bus: R.bus };
+      }
+
+      out.bootOrder = index + 1;
+
+      return out;
+    },
+
+    parseVolume(R, dataVolumeName) {
+      const out = { name: R.name };
+
+      if (R.source === SOURCE_TYPE.CONTAINER) {
+        out.containerDisk = { image: R.container };
+      } else if (R.source === SOURCE_TYPE.IMAGE || R.source === SOURCE_TYPE.NEW || R.source === SOURCE_TYPE.ATTACH_VOLUME) {
+        out.persistentVolumeClaim = { claimName: dataVolumeName };
+        if (R.hotpluggable) {
+          out.persistentVolumeClaim.hotpluggable = true;
+        }
+      }
+
+      return out;
+    },
+
+    parseVolumeClaimTemplate(R, dataVolumeName) {
+      if (!String(R.size).includes('Gi') && R.size) {
+        R.size = `${ R.size }Gi`;
+      }
+
+      const out = {
+        metadata: { name: dataVolumeName },
+        spec:     {
+          accessModes: [R.accessMode],
+          resources:   { requests: { storage: R.size } },
+          volumeMode:  R.volumeMode
+        }
+      };
+
+      if (R.dataSource) {
+        out.spec.dataSource = R.dataSource;
+      }
+
+      switch (R.source) {
+      case SOURCE_TYPE.ATTACH_VOLUME:
+        out.spec.storageClassName = R.storageClassName;
+        break;
+      case SOURCE_TYPE.NEW:
+        out.spec.storageClassName = R.storageClassName;
+        break;
+      case SOURCE_TYPE.IMAGE: {
+        const image = this.images.find( I => R.image === I.id);
+
+        if (image) {
+          out.spec.storageClassName = image.storageClassName;
+          out.metadata.annotations = { [HCI_ANNOTATIONS.IMAGE_ID]: image.id };
+        } else {
+          out.metadata.annotations = { [HCI_ANNOTATIONS.IMAGE_ID]: '' };
+        }
+
+        break;
+      }
+      }
+
+      return out;
+    },
+
+    getSSHListValue(arr) {
+      return arr.map( id => this.getSSHValue(id)).filter( O => O !== undefined);
+    },
+
+    parseInterface(R) {
+      const _interface = {};
+      const type = R.type;
+
+      _interface[type] = {};
+
+      if (R.macAddress) {
+        _interface.macAddress = R.macAddress;
+      }
+
+      _interface.model = R.model;
+      _interface.name = R.name;
+
+      return _interface;
+    },
+
+    parseNetwork(R) {
+      const out = { name: R.name };
+
+      if (R.isPod) {
+        out.pod = {};
+      } else {
+        out.multus = { networkName: R.networkName };
+      }
+
+      return out;
+    },
+
+    updateUserData(value) {
+      this.userScript = value;
+    },
+
+    updateNetworkData(value) {
+      this.networkScript = value;
+    },
+
+    mergeSSHAuthorizedKeys(yaml) {
+      try {
+        const sshAuthorizedKeys = YAML.parseDocument(yaml)
+          .get('ssh_authorized_keys')
+          ?.toJSON() || [];
+
+        const sshList = this.getSSHListValue(this.sshKey);
+
+        return sshAuthorizedKeys.length ? [...new Set([...sshList, ...sshAuthorizedKeys])] : sshList;
+      } catch (e) {
+        return [];
+      }
+    },
+
+    /**
+     * @param paths A Object path, e.g. 'a.b.c' => ['a', 'b', 'c']. Refer to https://eemeli.org/yaml/#scalar-values
+     * @returns
+     */
+    deleteYamlDocProp(doc, paths) {
+      try {
+        const item = doc.getIn([])?.items[0];
+        const key = item?.key;
+        const hasCloudConfigComment = !!key?.commentBefore?.includes('cloud-config');
+        const isMatchProp = key.source === paths[paths.length - 1];
+
+        if (key && hasCloudConfigComment && isMatchProp) {
+          // Comments are mounted on the next node and we should not delete the node containing cloud-config
+        } else {
+          doc.deleteIn(paths);
+        }
+      } catch (e) {}
+    },
+
+    mergeQGA(config) {
+      const { osType, userDataDoc } = config;
+      const _QGA_JSON = this.getMatchQGA(osType);
+      const userDataYAML = userDataDoc.toString();
+      const userDataJSON = YAML.parse(userDataYAML);
+      let packages = userDataJSON?.packages || [];
+      let runcmd = userDataJSON?.runcmd || [];
+
+      userDataDoc.setIn(['package_update'], true);
+
+      if (Array.isArray(packages)) {
+        if (!packages.includes('qemu-guest-agent')) {
+          packages.push('qemu-guest-agent');
+        }
+      } else {
+        packages = QGA_JSON.packages;
+      }
+
+      if (Array.isArray(runcmd)) {
+        let findIndex = -1;
+        const hasSameRuncmd = runcmd.find( S => Array.isArray(S) && S.join('-') === _QGA_JSON.runcmd[0].join('-'));
+
+        const hasSimilarRuncmd = runcmd.find( (S, index) => {
+          if (Array.isArray(S) && S.join('-') === this.getSimilarRuncmd(osType).join('-')) {
+            findIndex = index;
+
+            return true;
+          }
+
+          return false;
+        });
+
+        if (hasSimilarRuncmd) {
+          runcmd[findIndex] = _QGA_JSON.runcmd[0];
+        } else if (!hasSameRuncmd) {
+          runcmd.push(_QGA_JSON.runcmd[0]);
+        }
+      } else {
+        runcmd = _QGA_JSON.runcmd;
+      }
+
+      if (packages.length > 0) {
+        userDataDoc.setIn(['packages'], packages);
+      } else {
+        userDataDoc.setIn(['packages'], []); // It needs to be set empty first, as it is possible that cloud-init comments are mounted on this node
+        this.deleteYamlDocProp(userDataDoc, ['packages']);
+        this.deleteYamlDocProp(userDataDoc, ['package_update']);
+      }
+
+      if (runcmd.length > 0) {
+        userDataDoc.setIn(['runcmd'], runcmd);
+      } else {
+        this.deleteYamlDocProp(userDataDoc, ['runcmd']);
+      }
+
+      return userDataDoc;
+    },
+
+    deleteQGA(config) {
+      const { osType, userDataDoc, deletePackage = false } = config;
+
+      const userDataTemplateValue = this.$store.getters['harvester/byId'](CONFIG_MAP, this.userDataTemplateId)?.data?.cloudInit || '';
+
+      const userDataYAML = userDataDoc.toString();
+      const userDataJSON = YAML.parse(userDataYAML);
+      const packages = userDataJSON?.packages || [];
+      const runcmd = userDataJSON?.runcmd || [];
+
+      if (Array.isArray(packages) && deletePackage) {
+        const templateHasQGAPackage = this.convertToJson(userDataTemplateValue);
+
+        for (let i = 0; i < packages.length; i++) {
+          if (packages[i] === 'qemu-guest-agent') {
+            if (!(Array.isArray(templateHasQGAPackage?.packages) && templateHasQGAPackage.packages.includes('qemu-guest-agent'))) {
+              packages.splice(i, 1);
+            }
+          }
+        }
+      }
+
+      if (Array.isArray(runcmd)) {
+        const _QGA_JSON = this.getMatchQGA(osType);
+
+        for (let i = 0; i < runcmd.length; i++) {
+          if (Array.isArray(runcmd[i]) && runcmd[i].join('-') === _QGA_JSON.runcmd[0].join('-')) {
+            runcmd.splice(i, 1);
+          }
+        }
+      }
+
+      if (packages.length > 0) {
+        userDataDoc.setIn(['packages'], packages);
+      } else {
+        userDataDoc.setIn(['packages'], []);
+        this.deleteYamlDocProp(userDataDoc, ['packages']);
+        this.deleteYamlDocProp(userDataDoc, ['package_update']);
+      }
+
+      if (runcmd.length > 0) {
+        userDataDoc.setIn(['runcmd'], runcmd);
+      } else {
+        this.deleteYamlDocProp(userDataDoc, ['runcmd']);
+      }
+
+      return userDataDoc;
+    },
+
+    generateSecretName(name) {
+      return name ? `${ name }-${ randomStr(5).toLowerCase() }` : undefined;
+    },
+
+    getOwnerReferencesFromVM(resource) {
+      const name = resource.metadata.name;
+      const kind = resource.kind;
+      const apiVersion = this.resource === HCI.VM ? 'kubevirt.io/v1' : 'harvesterhci.io/v1beta1';
+      const uid = resource?.metadata?.uid;
+
+      return [{
+        name,
+        kind,
+        uid,
+        apiVersion,
+      }];
+    },
+
+    async saveSecret(vm) {
+      if (!vm?.spec || !this.secretName || this.isWindows) {
+        return true;
+      }
+
+      let secret = this.getSecret(vm.spec);
+
+      // const userData = this.getUserData({ osType: this.osType, installAgent: this.installAgent });
+      if (!secret && this.isEdit && this.secretRef) {
+        // When editing the vm, if the userData and networkData are deleted, we also need to clean up the secret values
+        secret = this.secretRef;
+      }
+
+      if (!secret || this.needNewSecret) {
+        secret = await this.$store.dispatch('harvester/create', {
+          metadata: {
+            name:            this.secretName,
+            namespace:       this.value.metadata.namespace,
+            labels:          { [HCI_ANNOTATIONS.CLOUD_INIT]: 'harvester' },
+            ownerReferences: this.getOwnerReferencesFromVM(vm)
+          },
+          type: SECRET
+        });
+      }
+
+      try {
+        if (secret) {
+          // If none of the data comes from the secret, then no data needs to be saved to the secret
+          if (!this.saveUserDataAsClearText || !this.saveNetworkDataAsClearText) {
+            secret.setData('userdata', this.userData || '');
+            secret.setData('networkdata', this.networkScript || '');
+            await secret.save();
+          }
+        }
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+
+    async saveAccessCredentials(vm) {
+      if (!vm?.spec) {
+        return true;
+      }
+
+      // save
+      const toSave = [];
+
+      for (const row of this.accessCredentials) {
+        let secretRef = row.secretRef;
+
+        if (!secretRef || this.needNewSecret) {
+          secretRef = await this.$store.dispatch('harvester/create', {
+            metadata: {
+              name:            row.secretName,
+              namespace:       vm.metadata.namespace,
+              labels:          { [HCI_ANNOTATIONS.CLOUD_INIT]: 'harvester' },
+              ownerReferences: this.getOwnerReferencesFromVM(vm)
+            },
+            type: SECRET
+          });
+        }
+
+        if (row.source === ACCESS_CREDENTIALS.RESET_PWD) {
+          secretRef.setData(row.username, row.newPassword);
+        }
+
+        if (row.source === ACCESS_CREDENTIALS.INJECT_SSH) {
+          for (const secretId of row.sshkeys) {
+            const keypair = (this.$store.getters['harvester/all'](HCI.SSH) || []).find(s => s.id === secretId);
+
+            secretRef.setData(`${ keypair.metadata.namespace }-${ keypair.metadata.name }`, keypair.spec.publicKey);
+          }
+        }
+
+        toSave.push(secretRef);
+      }
+
+      try {
+        for (const resource of toSave) {
+          await resource.save();
+        }
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+
+    getAccessCredentialsValidation() {
+      const errors = [];
+
+      for (let i = 0; i < this.accessCredentials.length; i++) {
+        const row = this.accessCredentials[i];
+        const source = row.source;
+
+        if (source === ACCESS_CREDENTIALS.RESET_PWD) {
+          if (!row.username) {
+            const fieldName = this.t('harvester.virtualMachine.input.username');
+            const message = this.t('validation.required', { key: fieldName });
+
+            errors.push(message);
+          }
+
+          if (!row.newPassword) {
+            const fieldName = this.t('harvester.virtualMachine.input.password');
+            const message = this.t('validation.required', { key: fieldName });
+
+            errors.push(message);
+          }
+
+          if (row.newPassword && row.newPassword.length < 6) {
+            const fieldName = this.t('harvester.virtualMachine.input.password');
+            const message = this.t('validation.number.min', { key: fieldName, val: '6' });
+
+            errors.push(message);
+          }
+        } else {
+          if (!row.users || row.users.length === 0) {
+            const fieldName = this.t('harvester.virtualMachine.input.username');
+            const message = this.t('validation.required', { key: fieldName });
+
+            errors.push(message);
+          }
+
+          if (!row.sshkeys || row.sshkeys.length === 0) {
+            const fieldName = this.t('harvester.virtualMachine.input.sshKeyValue');
+            const message = this.t('validation.required', { key: fieldName });
+
+            errors.push(message);
+          }
+        }
+
+        if (errors.length > 0) {
+          break;
+        }
+      }
+
+      return errors;
+    },
+
+    getHasCreatedVolumes(spec) {
+      const out = [];
+
+      if (spec.template.spec.volumes) {
+        spec.template.spec.volumes.forEach((V) => {
+          if (V?.persistentVolumeClaim?.claimName) {
+            out.push(V.persistentVolumeClaim.claimName);
+          }
+        });
+      }
+
+      return out;
+    },
+
+    handlerUSBTablet(val) {
+      const hasExist = this.isInstallUSBTablet(this.spec);
+      const inputs = this.spec.template.spec.domain.devices?.inputs || [];
+
+      if (val && !hasExist) {
+        if (inputs.length > 0) {
+          inputs.push(USB_TABLET[0]);
+        } else {
+          Object.assign(this.spec.template.spec.domain.devices, {
+            inputs: [
+              USB_TABLET[0]
+            ]
+          });
+        }
+      } else if (!val) {
+        const index = inputs.findIndex(O => isEqual(O, USB_TABLET[0]));
+
+        if (hasExist && inputs.length === 1) {
+          this.$delete(this.spec.template.spec.domain.devices, 'inputs');
+        } else if (hasExist) {
+          inputs.splice(index, 1);
+          this.$set(this.spec.template.spec.domain.devices, 'inputs', inputs);
+        }
+      }
+    },
+
+    setBootMethod(boot = { efi: false, secureBoot: false }) {
+      if (boot.efi && boot.secureBoot) {
+        set(this.spec.template.spec.domain, 'features.smm.enabled', true);
+        set(this.spec.template.spec.domain, 'firmware.bootloader.efi.secureBoot', true);
+      } else if (boot.efi && !boot.secureBoot) {
+        // set(this.spec.template.spec.domain, 'features.smm.enabled', false);
+
+        try {
+          this.$delete(this.spec.template.spec.domain.features.smm, 'enabled');
+          const noKeys = Object.keys(this.spec.template.spec.domain.features.smm).length === 0;
+
+          if (noKeys) {
+            this.$delete(this.spec.template.spec.domain.features, 'smm');
+          }
+        } catch (e) {}
+        set(this.spec.template.spec.domain, 'firmware.bootloader.efi.secureBoot', false);
+      } else {
+        this.$delete(this.spec.template.spec.domain, 'firmware');
+        this.$delete(this.spec.template.spec.domain.features, 'smm');
+      }
+    },
+
+    setTPM(tpmEnabled) {
+      if (tpmEnabled) {
+        set(this.spec.template.spec.domain.devices, 'tpm', {});
+      } else {
+        this.$delete(this.spec.template.spec.domain.devices, 'tpm');
+      }
+    },
+
+    deleteSSHFromUserData(ssh = []) {
+      const sshAuthorizedKeys = this.getSSHFromUserData(this.userScript);
+
+      ssh.map((id) => {
+        const index = sshAuthorizedKeys.findIndex(value => value === this.getSSHValue(id));
+
+        if (index >= 0) {
+          sshAuthorizedKeys.splice(index, 1);
+        }
+      });
+
+      const userDataJson = this.convertToJson(this.userScript);
+
+      userDataJson.ssh_authorized_keys = sshAuthorizedKeys;
+
+      if (sshAuthorizedKeys.length === 0) {
+        delete userDataJson.ssh_authorized_keys;
+      }
+
+      if (isEmpty(userDataJson)) {
+        this.$set(this, 'userScript', undefined);
+      } else {
+        this.$set(this, 'userScript', jsyaml.dump(userDataJson));
+      }
+
+      this.refreshYamlEditor();
+    },
+
+    refreshYamlEditor() {
+      this.$nextTick(() => {
+        this.$refs.yamlEditor?.updateValue();
+      });
+    },
+
+    toggleAdvanced() {
+      this.showAdvanced = !this.showAdvanced;
+    },
+
+    updateAgent(value) {
+      if (!value) {
+        this.deletePackage = true;
+      }
+    },
+
+    updateDataTemplateId(type, id) {
+      if (type === 'user') {
+        const oldInstallAgent = this.installAgent;
+
+        this.userDataTemplateId = id;
+        this.$nextTick(() => {
+          if (oldInstallAgent) {
+            this.installAgent = oldInstallAgent;
+          }
+        });
+      }
+    },
+
+    updateReserved(value = {}) {
+      const { memory } = value;
+
+      this.$set(this, 'reservedMemory', memory);
+    },
+
+    updateTerminationGracePeriodSeconds(value) {
+      this.$set(this, 'terminationGracePeriodSeconds', value);
+    },
+  },
+
+  watch: {
+    diskRows: {
+      handler(neu, old) {
+        if (Array.isArray(neu)) {
+          const imageId = neu[0]?.image;
+          const image = this.images.find( I => imageId === I.id);
+          const osType = image?.imageOSType;
+
+          const oldImageId = old[0]?.image;
+
+          if (this.isCreate && oldImageId === imageId && imageId) {
+            this.osType = osType;
+          }
+        }
+      }
+    },
+
+    secretRef: {
+      handler(secret) {
+        if (secret && this.resource !== HCI.BACKUP) {
+          this.secretName = secret?.metadata.name;
+        }
+      },
+      immediate: true,
+      deep:      true
+    },
+
+    isWindows(val) {
+      if (val) {
+        this.$set(this, 'sshKey', []);
+        this.$set(this, 'userScript', undefined);
+        this.$set(this, 'installAgent', false);
+      }
+    },
+
+    installUSBTablet(val) {
+      this.handlerUSBTablet(val);
+    },
+
+    efiEnabled(val) {
+      this.setBootMethod({ efi: val, secureBoot: this.secureBoot });
+    },
+
+    secureBoot(val) {
+      this.setBootMethod({ efi: this.efiEnabled, secureBoot: val });
+    },
+
+    tpmEnabled(val) {
+      this.setTPM(val);
+    },
+
+    installAgent: {
+      /**
+       * rules
+       * 1. The value in user Data is the first priority
+       * 2. After selecting the template, if checkbox is checked, only merge operation will be performed on user data,
+       *    if checkbox is unchecked, no value will be deleted in user data
+       */
+      handler(neu) {
+        if (this.deleteAgent) {
+          let out = this.getUserData({
+            installAgent: neu, osType: this.osType, deletePackage: this.deletePackage
+          });
+
+          if (neu) {
+            const hasCloudComment = this.hasCloudConfigComment(out);
+
+            if (!hasCloudComment) {
+              out = `#cloud-config\n${ out }`;
+            }
+          }
+
+          this.$set(this, 'userScript', out);
+          this.refreshYamlEditor();
+        }
+        this.deleteAgent = true;
+        this.deletePackage = false;
+      }
+    },
+
+    osType(neu) {
+      const out = this.getUserData({ installAgent: this.installAgent, osType: neu });
+
+      this.$set(this, 'userScript', out);
+      this.refreshYamlEditor();
+    },
+
+    userScript(neu, old) {
+      const hasInstallAgent = this.hasInstallAgent(neu, this.osType, this.installAgent);
+
+      if (hasInstallAgent !== this.installAgent) {
+        this.deleteAgent = false;
+        this.installAgent = hasInstallAgent;
+      }
+    },
+
+    sshKey(neu, old) {
+      const _diff = difference(old, neu);
+
+      if (_diff.length && this.isEdit) {
+        this.deleteSSHFromUserData(_diff);
+      }
+    }
+  }
+};
diff --git a/pkg/harvester/models/clusterroletemplatebinding.js b/pkg/harvester/models/clusterroletemplatebinding.js
new file mode 100644
index 00000000..208a6baf
--- /dev/null
+++ b/pkg/harvester/models/clusterroletemplatebinding.js
@@ -0,0 +1,24 @@
+import { MANAGEMENT } from '@shell/config/types';
+import NormanModel from '@shell/plugins/steve/norman-class';
+
+export default class CRTB extends NormanModel {
+  get clusterroletemplatebinding() {
+    return this.$rootGetters[`management/byId`](MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING, this.id?.replace(':', '/'));
+  }
+
+  get principalId() {
+    return this.userPrincipalId || this.groupPrincipalId;
+  }
+
+  get roleDisplay() {
+    return this.roleTemplate.nameDisplay;
+  }
+
+  get roleDescription() {
+    return this.roleTemplate.description;
+  }
+
+  get roleTemplate() {
+    return this.$rootGetters['management/byId'](MANAGEMENT.ROLE_TEMPLATE, this.roleTemplateId);
+  }
+}
diff --git a/pkg/harvester/models/devices.harvesterhci.io.pcidevice.js b/pkg/harvester/models/devices.harvesterhci.io.pcidevice.js
new file mode 100644
index 00000000..2cbbac84
--- /dev/null
+++ b/pkg/harvester/models/devices.harvesterhci.io.pcidevice.js
@@ -0,0 +1,170 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+import { escapeHtml } from '@shell/utils/string';
+import { HCI } from '../types';
+
+const STATUS_DISPLAY = {
+  enabled: {
+    displayKey: 'generic.enabled',
+    color:      'bg-success'
+  },
+  pending: {
+    displayKey: 'generic.inProgress',
+    color:      'bg-info'
+  },
+  disabled: {
+    displayKey: 'generic.disabled',
+    color:      'bg-warning'
+  },
+  error: {
+    displayKey: 'generic.disabled',
+    color:      'bg-warning'
+  }
+};
+
+/**
+ * Class representing PCI Device resource.
+ * @extends SteveModal
+ */
+export default class PCIDevice extends SteveModel {
+  get _availableActions() {
+    const out = super._availableActions;
+
+    out.push(
+      {
+        action:     'enablePassthroughBulk',
+        enabled:    !this.isEnabling,
+        icon:       'icon icon-fw icon-dot',
+        label:      'Enable Passthrough',
+        bulkable:   true,
+        bulkAction: 'enablePassthroughBulk'
+      },
+      {
+        action:   'disablePassthrough',
+        enabled:  this.isEnabling && this.claimedByMe,
+        icon:     'icon icon-fw icon-dot-open',
+        label:    'Disable Passthrough',
+        bulkable: true
+      },
+    );
+
+    return out;
+  }
+
+  get canYaml() {
+    return false;
+  }
+
+  get canDelete() {
+    return false;
+  }
+
+  goToDetail() {
+    return false;
+  }
+
+  goToEdit() {
+    return false;
+  }
+
+  get passthroughClaim() {
+    const passthroughClaims = this.$getters['all'](HCI.PCI_CLAIM) || [];
+
+    return !!this.status && passthroughClaims.find(req => req?.spec?.nodeName === this.status?.nodeName && req?.spec?.address === this.status?.address);
+  }
+
+  // this is an id for each 'type' of device - there may be multiple instances of device CRs
+  get uniqueId() {
+    return `${ this.status?.vendorId }:${ this.status?.deviceId }`;
+  }
+
+  get claimedBy() {
+    return this.passthroughClaim?.spec?.userName;
+  }
+
+  get claimedByMe() {
+    if (!this.passthroughClaim) {
+      return false;
+    }
+    const isSingleProduct = this.$rootGetters['isSingleProduct'];
+    let userName = 'admin';
+
+    // if this is imported Harvester, there may be users other than admin
+    if (!isSingleProduct) {
+      const user = this.$rootGetters['auth/v3User'];
+
+      userName = user?.username || user?.id;
+    }
+
+    return this.claimedBy === userName;
+  }
+
+  // isEnabled controls visibility in vm create page & ability to delete claim
+  // isEnabling controls ability to add claim
+  // there will be a brief period where isEnabling === true && isEnabled === false
+  get isEnabled() {
+    return !!this.passthroughClaim?.status?.passthroughEnabled;
+  }
+
+  get isEnabling() {
+    return !!this.passthroughClaim;
+  }
+
+  // map status.passthroughEnabled to disabled/enabled & overwrite default dash colors
+  get claimStatusDisplay() {
+    if (!this.passthroughClaim) {
+      return STATUS_DISPLAY.disabled;
+    }
+    if (this.isEnabled) {
+      return STATUS_DISPLAY.enabled;
+    }
+
+    return STATUS_DISPLAY.pending;
+  }
+
+  get stateDisplay() {
+    const t = this.$rootGetters['i18n/t'];
+
+    return t(this.claimStatusDisplay.displayKey);
+  }
+
+  get stateBackground() {
+    return this.claimStatusDisplay.color;
+  }
+
+  // 'enable' passthrough creates the passthrough claim CRD -
+  enablePassthroughBulk(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'EnablePassthrough'
+    });
+  }
+
+  // 'disable' passthrough deletes claim
+  // backend should return error if device is in use
+  async disablePassthrough() {
+    try {
+      if (!this.claimedByMe) {
+        throw new Error(this.$rootGetters['i18n/t']('harvester.pci.cantUnclaim', { name: escapeHtml(this.metadata.name) }));
+      } else {
+        await this.passthroughClaim.remove();
+      }
+    } catch (err) {
+      this.$dispatch('growl/fromError', {
+        title: this.$rootGetters['i18n/t']('harvester.pci.unclaimError', { name: escapeHtml(this.metadata.name) }),
+        err,
+      }, { root: true });
+    }
+  }
+
+  // group device list by node
+  get groupByNode() {
+    const name = this.status?.nodeName || this.$rootGetters['i18n/t']('generic.none');
+
+    return this.$rootGetters['i18n/t']('resourceTable.groupLabel.node', { name: escapeHtml(name) });
+  }
+
+  // group device list by unique device (same vendorid and deviceid)
+  get groupByDevice() {
+    return this.status?.description;
+  }
+}
diff --git a/pkg/harvester/models/devices.harvesterhci.io.sriovgpudevice.js b/pkg/harvester/models/devices.harvesterhci.io.sriovgpudevice.js
new file mode 100644
index 00000000..657f288f
--- /dev/null
+++ b/pkg/harvester/models/devices.harvesterhci.io.sriovgpudevice.js
@@ -0,0 +1,130 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+import { escapeHtml } from '@shell/utils/string';
+import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import { NODE } from '@shell/config/types';
+import { HCI } from '../types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+
+/**
+ * Class representing SR-IOV Device resource.
+ * @extends SteveModal
+ */
+export default class SRIOVDevice extends SteveModel {
+  get _availableActions() {
+    const out = super._availableActions;
+
+    out.push(
+      {
+        action:  'enableDevice',
+        enabled: !this.isEnabled,
+        icon:    'icon icon-fw icon-dot',
+        label:   'Enable',
+      },
+      {
+        action:  'disableDevice',
+        enabled: this.isEnabled,
+        icon:    'icon icon-fw icon-dot-open',
+        label:   'Disable',
+      },
+    );
+
+    return out;
+  }
+
+  get canYaml() {
+    return false;
+  }
+
+  get canDelete() {
+    return false;
+  }
+
+  goToDetail() {
+    return false;
+  }
+
+  goToEdit() {
+    return false;
+  }
+
+  get actualState() {
+    return this.isEnabled ? 'Enabled' : 'Disabled';
+  }
+
+  get stateDisplay() {
+    return this.actualState;
+  }
+
+  get stateColor() {
+    const state = this.actualState;
+
+    return colorForState(state);
+  }
+
+  get isEnabled() {
+    return this.spec.enabled && this.status?.vfAddresses?.length > 0 && this.status?.vGPUDevices?.length > 0;
+  }
+
+  async enableDevice() {
+    try {
+      this.spec.enabled = true;
+      await this.save();
+    } catch (err) {
+      this.$dispatch('growl/fromError', {
+        title: this.t('generic.notification.title.error', { name: escapeHtml(this.metadata.name) }),
+        err,
+      }, { root: true });
+    }
+  }
+
+  async disableDevice() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+    const schema = this.$rootGetters[`${ inStore }/schemaFor`](HCI.VGPU_DEVICE);
+
+    if (!!schema) {
+      const vGpuDevices = this.$rootGetters[`${ inStore }/all`](HCI.VGPU_DEVICE) || [];
+      const vGpuDevicesEnabled = vGpuDevices
+        .filter(f => f.labels[HCI_ANNOTATIONS.PARENT_SRIOV_GPU] === this.id && f.spec?.enabled)
+        .map(m => m.id);
+
+      if (vGpuDevicesEnabled.length > 0) {
+        this.$dispatch('growl/error', {
+          title:   this.t('generic.notification.title.error', { name: escapeHtml(this.metadata.name) }),
+          message: `
+            Cannot disable ${ this.metadata.name }, following vGPU devices are enabled:
+            [${ vGpuDevicesEnabled.join(', ') }]
+          `,
+        }, { root: true });
+
+        return;
+      }
+    }
+
+    try {
+      this.spec.enabled = false;
+      await this.save();
+    } catch (err) {
+      this.$dispatch('growl/fromError', {
+        title: this.t('generic.notification.title.error', { name: escapeHtml(this.metadata.name) }),
+        err,
+      }, { root: true });
+    }
+  }
+
+  get realNodeName() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+    const nodeName = this.spec?.nodeName;
+    const nodes = this.$rootGetters[`${ inStore }/all`](NODE);
+    const node = nodes.find(N => N.id === nodeName);
+
+    return node?.nameDisplay || '';
+  }
+
+  get numVFs() {
+    return this.status?.vfAddresses?.length || 0;
+  }
+
+  get childDevice() {
+    return HCI.VGPU_DEVICE;
+  }
+}
diff --git a/pkg/harvester/models/devices.harvesterhci.io.sriovnetworkdevice.js b/pkg/harvester/models/devices.harvesterhci.io.sriovnetworkdevice.js
new file mode 100644
index 00000000..b21fa3a4
--- /dev/null
+++ b/pkg/harvester/models/devices.harvesterhci.io.sriovnetworkdevice.js
@@ -0,0 +1,105 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+import { escapeHtml } from '@shell/utils/string';
+import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import { NODE } from '@shell/config/types';
+import { HCI } from '../types';
+
+/**
+ * Class representing SR-IOV Device resource.
+ * @extends SteveModal
+ */
+export default class SRIOVGpuDevice extends SteveModel {
+  get _availableActions() {
+    const out = super._availableActions;
+
+    out.push(
+      {
+        action:  'enableDevice',
+        enabled: !this.isEnabled,
+        icon:    'icon icon-fw icon-dot',
+        label:   'Enable',
+      },
+      {
+        action:  'disableDevice',
+        enabled: this.isEnabled,
+        icon:    'icon icon-fw icon-dot-open',
+        label:   'Disable',
+      },
+    );
+
+    return out;
+  }
+
+  get canYaml() {
+    return false;
+  }
+
+  get canDelete() {
+    return false;
+  }
+
+  goToDetail() {
+    return false;
+  }
+
+  goToEdit() {
+    return false;
+  }
+
+  get actualState() {
+    return this.isEnabled ? 'Enabled' : 'Disabled';
+  }
+
+  get stateDisplay() {
+    return this.actualState;
+  }
+
+  get stateColor() {
+    const state = this.actualState;
+
+    return colorForState(state);
+  }
+
+  get isEnabled() {
+    return this.status?.status === 'sriovNetworkDeviceEnabled' && this.spec?.numVFs > 0;
+  }
+
+  enableDevice(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'EnableSriovDevice'
+    });
+  }
+
+  async disableDevice() {
+    const numVFsHistory = this.spec.numVFs;
+
+    try {
+      this.spec.numVFs = 0;
+      await this.save();
+    } catch (err) {
+      this.spec.numVFs = numVFsHistory;
+      this.$dispatch('growl/fromError', {
+        title: this.t('generic.notification.title.error', { name: escapeHtml(this.metadata.name) }),
+        err,
+      }, { root: true });
+    }
+  }
+
+  get realNodeName() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+    const nodeName = this.spec?.nodeName;
+    const nodes = this.$rootGetters[`${ inStore }/all`](NODE);
+    const node = nodes.find(N => N.id === nodeName);
+
+    return node?.nameDisplay || '';
+  }
+
+  get numVFs() {
+    return this.spec?.numVFs;
+  }
+
+  get childDevice() {
+    return HCI.PCI_DEVICE;
+  }
+}
diff --git a/pkg/harvester/models/devices.harvesterhci.io.vgpudevice.js b/pkg/harvester/models/devices.harvesterhci.io.vgpudevice.js
new file mode 100644
index 00000000..f529bb52
--- /dev/null
+++ b/pkg/harvester/models/devices.harvesterhci.io.vgpudevice.js
@@ -0,0 +1,129 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+import { escapeHtml } from '@shell/utils/string';
+
+const STATUS_DISPLAY = {
+  enabled: {
+    displayKey: 'generic.enabled',
+    color:      'bg-success'
+  },
+  pending: {
+    displayKey: 'generic.inProgress',
+    color:      'bg-info'
+  },
+  disabled: {
+    displayKey: 'generic.disabled',
+    color:      'bg-warning'
+  },
+  error: {
+    displayKey: 'generic.disabled',
+    color:      'bg-warning'
+  }
+};
+
+/**
+ * Class representing PCI Device resource.
+ * @extends SteveModal
+ */
+export default class VGpuDevice extends SteveModel {
+  get _availableActions() {
+    const out = super._availableActions;
+
+    out.push(
+      {
+        action:  'enableVGpu',
+        enabled: !this.isEnabled,
+        icon:    'icon icon-fw icon-dot',
+        label:   'Enable',
+      },
+      {
+        action:   'disableVGpu',
+        enabled:  this.isEnabled,
+        icon:     'icon icon-fw icon-dot-open',
+        label:    'Disable',
+        bulkable: true,
+      },
+    );
+
+    return out;
+  }
+
+  get canYaml() {
+    return false;
+  }
+
+  get canDelete() {
+    return false;
+  }
+
+  goToDetail() {
+    return false;
+  }
+
+  goToEdit() {
+    return false;
+  }
+
+  get isEnabled() {
+    return this?.spec?.enabled === true;
+  }
+
+  get isEnabling() {
+    return this.status?.vGPUStatus && this.status?.vGPUStatus !== 'vGPUConfigured';
+  }
+
+  get statusDisplay() {
+    if (this.isEnabling) {
+      return STATUS_DISPLAY.pending;
+    }
+    if (this.isEnabled) {
+      return STATUS_DISPLAY.enabled;
+    }
+
+    return STATUS_DISPLAY.disabled;
+  }
+
+  get stateDisplay() {
+    const t = this.$rootGetters['i18n/t'];
+
+    return t(this.statusDisplay.displayKey);
+  }
+
+  get stateBackground() {
+    return this.statusDisplay.color;
+  }
+
+  enableVGpu(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'EnableVGpuDevice'
+    });
+  }
+
+  async disableVGpu() {
+    const { vGPUTypeName, enabled } = this.spec;
+
+    try {
+      this.spec.vGPUTypeName = undefined;
+      this.spec.enabled = false;
+      await this.save();
+    } catch (err) {
+      this.spec.vGPUTypeName = vGPUTypeName;
+      this.spec.enabled = enabled;
+
+      this.$dispatch('growl/fromError', {
+        title: this.t('generic.notification.title.error', { name: escapeHtml(this.metadata.name) }),
+        err,
+      }, { root: true });
+    }
+  }
+
+  get groupByNode() {
+    const name = this.spec?.nodeName || this.$rootGetters['i18n/t']('generic.none');
+
+    return this.$rootGetters['i18n/t']('resourceTable.groupLabel.node', { name: escapeHtml(name) });
+  }
+
+  get vGpuAvailableTypes() {
+    return this.status?.availableTypes ? Object.keys(this.status.availableTypes) : [];
+  }
+}
diff --git a/pkg/harvester/models/harvester.js b/pkg/harvester/models/harvester.js
new file mode 100644
index 00000000..9c4576a8
--- /dev/null
+++ b/pkg/harvester/models/harvester.js
@@ -0,0 +1,69 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+import { VIEW_IN_API, DEV } from '@shell/store/prefs';
+
+export default class HarvesterResource extends SteveModel {
+  get listLocation() {
+    const name = this.harvesterResourcesInExplorer ? 'c-cluster-product-resource' : `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return this.$rootGetters['type-map/optionsFor'](this.type).customRoute || {
+      name,
+      params: {
+        product:  this.$rootGetters['productId'],
+        cluster:  this.$rootGetters['clusterId'],
+        resource: this.type,
+      },
+    };
+  }
+
+  get parentLocationOverride() {
+    return this.listLocation;
+  }
+
+  get doneRoute() {
+    return this.listLocation.name;
+  }
+
+  get doneOverride() {
+    return this.listLocation;
+  }
+
+  get harvesterResourcesInExplorer() {
+    return this.$rootGetters['productId'] !== HARVESTER_PRODUCT;
+  }
+
+  get _detailLocation() {
+    const schema = this.$getters['schemaFor'](this.type);
+    const id = this.id?.replace(/.*\//, '');
+    const name = this.harvesterResourcesInExplorer ? `c-cluster-product-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id` : `${ HARVESTER_PRODUCT }-c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`;
+
+    const out = {
+      name,
+      params: {
+        product:   this.$rootGetters['productId'],
+        cluster:   this.$rootGetters['clusterId'],
+        resource:  this.type,
+        namespace: this.metadata?.namespace,
+        id,
+      },
+    };
+
+    if (this.harvesterResourcesInExplorer) {
+      out.query = { as: 'yaml' };
+    }
+
+    return out;
+  }
+
+  get forceYaml() {
+    return this.harvesterResourcesInExplorer;
+  }
+
+  get canViewInApi() {
+    try {
+      return this.hasLink('self') && this.$rootGetters['prefs/get'](VIEW_IN_API);
+    } catch {
+      return this.hasLink('self') && this.$rootGetters['prefs/get'](DEV);
+    }
+  }
+}
diff --git a/pkg/harvester/models/harvester/configmap.js b/pkg/harvester/models/harvester/configmap.js
new file mode 100644
index 00000000..4f5f8cb4
--- /dev/null
+++ b/pkg/harvester/models/harvester/configmap.js
@@ -0,0 +1,33 @@
+import { clone } from '@shell/utils/object';
+import { HCI } from '../../types';
+import HarvesterResource from '../harvester';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+
+export default class HciConfigMap extends HarvesterResource {
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.CLOUD_TEMPLATE;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.CLOUD_TEMPLATE;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.CLOUD_TEMPLATE }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+}
diff --git a/pkg/harvester/models/harvester/k8s.cni.cncf.io.networkattachmentdefinition.js b/pkg/harvester/models/harvester/k8s.cni.cncf.io.networkattachmentdefinition.js
new file mode 100644
index 00000000..174ff373
--- /dev/null
+++ b/pkg/harvester/models/harvester/k8s.cni.cncf.io.networkattachmentdefinition.js
@@ -0,0 +1,91 @@
+import { clone } from '@shell/utils/object';
+import { HCI } from '../../types';
+import NetworkAttachmentDef from '@pkg/harvester/models/k8s.cni.cncf.io.networkattachmentdefinition';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+
+const NOT_READY = 'Not Ready';
+
+export default class HarvesterNetworkAttachmentDef extends NetworkAttachmentDef {
+  get listLocation() {
+    return this.$rootGetters['type-map/optionsFor'](this.type).customRoute || {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource`,
+      params: {
+        product:  HARVESTER_PRODUCT,
+        cluster:  this.$rootGetters['clusterId'],
+        resource: this.type,
+      },
+    };
+  }
+
+  get doneRoute() {
+    return this.listLocation.name;
+  }
+
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.NETWORK_ATTACHMENT;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource-namespace-id`;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.NETWORK_ATTACHMENT;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.NETWORK_ATTACHMENT }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  get inStore() {
+    return this.$rootGetters['currentProduct'].inStore;
+  }
+
+  get clusterNetworkResource() {
+    const clusterNetworks = this.$rootGetters[`${ this.inStore }/all`](HCI.CLUSTER_NETWORK);
+
+    return clusterNetworks.find((c) => c.id === this.clusterNetwork);
+  }
+
+  get clusterNetworkErrorMessage() {
+    if (!this.clusterNetworkResource) {
+      return this.t('harvester.clusterNetwork.notExist', { clusterNetwork: this.clusterNetwork });
+    } else if (!this.clusterNetworkResource.isReady) {
+      return this.t('harvester.clusterNetwork.notReady', { clusterNetwork: this.clusterNetwork });
+    } else {
+      return '';
+    }
+  }
+
+  get stateDisplay() {
+    if (this.clusterNetworkErrorMessage) {
+      return NOT_READY;
+    }
+
+    return super.stateDisplay;
+  }
+
+  get stateBackground() {
+    if (this.stateDisplay === NOT_READY) {
+      return 'bg-warning';
+    }
+
+    return super.stateBackground;
+  }
+
+  get isNotReady() {
+    return this.clusterNetworkErrorMessage;
+  }
+}
diff --git a/pkg/harvester/models/harvester/logging.banzaicloud.io.clusterflow.js b/pkg/harvester/models/harvester/logging.banzaicloud.io.clusterflow.js
new file mode 100644
index 00000000..37bd6205
--- /dev/null
+++ b/pkg/harvester/models/harvester/logging.banzaicloud.io.clusterflow.js
@@ -0,0 +1,55 @@
+import { clone } from '@shell/utils/object';
+import { LOGGING } from '@shell/config/types';
+import { HCI } from '../../types';
+import HarvesterFlow from './logging.banzaicloud.io.flow';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+
+export default class HciClusterflow extends HarvesterFlow {
+  get allOutputs() {
+    return this.$rootGetters['harvester/all'](LOGGING.CLUSTER_OUTPUT) || [];
+  }
+
+  get _detailLocation() {
+    const schema = this.$getters['schemaFor'](this.type);
+
+    const id = this.id?.replace(/.*\//, '');
+
+    return {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`,
+      params: {
+        product:   HARVESTER_PRODUCT,
+        cluster:   this.$rootGetters['clusterId'],
+        resource:  this.type,
+        id,
+        namespace: this.metadata.namespace,
+      },
+    };
+  }
+
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.CLUSTER_FLOW;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.CLUSTER_FLOW;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.CLUSTER_FLOW }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+}
diff --git a/pkg/harvester/models/harvester/logging.banzaicloud.io.clusteroutput.js b/pkg/harvester/models/harvester/logging.banzaicloud.io.clusteroutput.js
new file mode 100644
index 00000000..9ee5aee2
--- /dev/null
+++ b/pkg/harvester/models/harvester/logging.banzaicloud.io.clusteroutput.js
@@ -0,0 +1,50 @@
+import { clone } from '@shell/utils/object';
+import { HCI } from '../../types';
+import LogOutput from './logging.banzaicloud.io.output';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+
+export default class HciClusteroutput extends LogOutput {
+  get _detailLocation() {
+    const schema = this.$getters['schemaFor'](this.type);
+
+    const id = this.id?.replace(/.*\//, '');
+
+    return {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`,
+      params: {
+        product:   HARVESTER_PRODUCT,
+        cluster:   this.$rootGetters['clusterId'],
+        resource:  this.type,
+        id,
+        namespace: this.metadata.namespace,
+      },
+    };
+  }
+
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.CLUSTER_OUTPUT;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.CLUSTER_OUTPUT;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.CLUSTER_OUTPUT }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+}
diff --git a/pkg/harvester/models/harvester/logging.banzaicloud.io.flow.js b/pkg/harvester/models/harvester/logging.banzaicloud.io.flow.js
new file mode 100644
index 00000000..95a5c449
--- /dev/null
+++ b/pkg/harvester/models/harvester/logging.banzaicloud.io.flow.js
@@ -0,0 +1,72 @@
+import { LOGGING } from '@shell/config/types';
+import { HCI } from '../../types';
+import { clone } from '@shell/utils/object';
+import Flow from '@shell/models/logging.banzaicloud.io.flow';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+import { FLOW_TYPE } from '../../config/harvester-map';
+
+export default class HarvesterLogFlow extends Flow {
+  get allOutputs() {
+    return this.$rootGetters['harvester/all'](LOGGING.OUTPUT) || [];
+  }
+
+  get allClusterOutputs() {
+    return this.$rootGetters['harvester/all'](LOGGING.CLUSTER_OUTPUT) || [];
+  }
+
+  get _detailLocation() {
+    const schema = this.$getters['schemaFor'](this.type);
+
+    const id = this.id?.replace(/.*\//, '');
+
+    return {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`,
+      params: {
+        product:   HARVESTER_PRODUCT,
+        cluster:   this.$rootGetters['clusterId'],
+        resource:  this.type,
+        id,
+        namespace: this.metadata.namespace,
+      },
+    };
+  }
+
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.FLOW;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.FLOW;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.FLOW }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  get loggingType() {
+    if (this.spec.loggingRef === 'harvester-kube-audit-log-ref') {
+      return FLOW_TYPE.AUDIT;
+    }
+
+    if ((this.spec.match || []).find(M => !!M?.select?.labels?.['app.kubernetes.io/name'])) {
+      return FLOW_TYPE.EVENT;
+    }
+
+    return FLOW_TYPE.LOGGING;
+  }
+}
diff --git a/pkg/harvester/models/harvester/logging.banzaicloud.io.output.js b/pkg/harvester/models/harvester/logging.banzaicloud.io.output.js
new file mode 100644
index 00000000..2df15c36
--- /dev/null
+++ b/pkg/harvester/models/harvester/logging.banzaicloud.io.output.js
@@ -0,0 +1,63 @@
+import { clone } from '@shell/utils/object';
+import { HCI } from '../../types';
+import LogOutput from '@shell/models/logging.banzaicloud.io.output';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+import { FLOW_TYPE } from '../../config/harvester-map';
+
+export default class HarvesterLogOutput extends LogOutput {
+  get _detailLocation() {
+    const schema = this.$getters['schemaFor'](this.type);
+
+    const id = this.id?.replace(/.*\//, '');
+
+    return {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`,
+      params: {
+        product:   HARVESTER_PRODUCT,
+        cluster:   this.$rootGetters['clusterId'],
+        resource:  this.type,
+        id,
+        namespace: this.metadata.namespace,
+      },
+    };
+  }
+
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.OUTPUT;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.OUTPUT;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.OUTPUT }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  get url() {
+    return this.detailLocation;
+  }
+
+  get loggingType() {
+    if (this.spec.loggingRef === 'harvester-kube-audit-log-ref') {
+      return FLOW_TYPE.AUDIT;
+    }
+
+    return FLOW_TYPE.LOGGING;
+  }
+}
diff --git a/pkg/harvester/models/harvester/management.cattle.io.setting.js b/pkg/harvester/models/harvester/management.cattle.io.setting.js
new file mode 100644
index 00000000..ac439012
--- /dev/null
+++ b/pkg/harvester/models/harvester/management.cattle.io.setting.js
@@ -0,0 +1,45 @@
+import { HCI } from '../../types';
+import { clone } from '@shell/utils/object';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+import ManagementSetting from '@shell/models/management.cattle.io.setting';
+
+export default class HCIManagementSetting extends ManagementSetting {
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.SETTING;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.SETTING;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get doneRoute() {
+    return null;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.SETTING }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  get doneParams() {
+    return {
+      product:  this.$rootGetters['productId'],
+      cluster:  this.$rootGetters['clusterId'],
+      resource: HCI.SETTING,
+    };
+  }
+}
diff --git a/pkg/harvester/models/harvester/monitoring.coreos.com.alertmanagerconfig.js b/pkg/harvester/models/harvester/monitoring.coreos.com.alertmanagerconfig.js
new file mode 100644
index 00000000..a6f228d9
--- /dev/null
+++ b/pkg/harvester/models/harvester/monitoring.coreos.com.alertmanagerconfig.js
@@ -0,0 +1,142 @@
+import { clone, set } from '@shell/utils/object';
+import { _YAML, _CREATE, _VIEW, _CONFIG } from '@shell/config/query-params';
+import { HCI } from '../../types';
+import SteveModel from '@shell/plugins/steve/steve-class';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+
+export default class HciAlertmanagerConfig extends SteveModel {
+  get _detailLocation() {
+    return {
+      name:   this.alertmanagerConfigDoneRouteName,
+      params: {
+        cluster:   this.$rootGetters['clusterId'],
+        resource:  HCI.ALERTMANAGERCONFIG,
+        namespace: this.metadata?.namespace,
+        id:        this.name,
+      },
+      hash:  '#receivers',
+      query: { as: 'config' }
+    };
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.ALERTMANAGERCONFIG;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.ALERTMANAGERCONFIG }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  applyDefaults() {
+    if (this.spec) {
+      return this.spec;
+    }
+    const existingReceivers = this.spec?.route?.receivers || [];
+
+    const defaultSpec = {
+      receivers: [...existingReceivers],
+      route:     {
+        receivers:      this.spec?.route?.receivers || [],
+        groupBy:        this.spec?.route?.groupBy || [],
+        groupWait:      this.spec?.route?.groupWait || '30s',
+        groupInterval:  this.spec?.route?.groupInterval || '5m',
+        repeatInterval: this.spec?.route?.repeatInterval || '4h',
+        match:          this.spec?.route?.match || {},
+        matchRe:        this.spec?.route?.matchRe || {}
+      }
+    };
+
+    set(this, 'spec', defaultSpec);
+  }
+
+  get _availableActions() {
+    const out = super._availableActions;
+
+    return out;
+  }
+
+  getReceiverActions(alertmanagerConfigActions) {
+    return alertmanagerConfigActions.filter((actionData) => {
+      if (actionData.divider) {
+        return true;
+      }
+      switch (actionData.action) {
+      case 'goToEdit':
+        return true;
+      case 'goToEditYaml':
+        return true;
+      case 'promptRemove':
+        return true;
+      default:
+        return false;
+      }
+    });
+  }
+
+  get alertmanagerConfigDoneRouteName() {
+    return `${ HARVESTER_PRODUCT }-c-cluster-resource-namespace-id`;
+  }
+
+  getCreateReceiverRoute() {
+    return {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-alertmanagerconfig-alertmanagerconfigid-receiver`,
+      params: { cluster: this.$rootGetters['clusterId'], alertmanagerconfigid: this.id },
+      query:  { mode: _CREATE, currentView: _CONFIG }
+    };
+  }
+
+  getReceiverDetailLink(receiverName) {
+    return {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-alertmanagerconfig-alertmanagerconfigid-receiver`,
+      params: {
+        cluster:              this.$rootGetters['clusterId'],
+        alertmanagerconfigid: this.id,
+        receiverName
+      },
+      query: {
+        mode: _VIEW, receiverName, currentView: _CONFIG
+      }
+    };
+  }
+
+  getEditReceiverYamlRoute(receiverName, queryMode) {
+    return {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-alertmanagerconfig-alertmanagerconfigid-receiver`,
+      params: {
+        cluster:              this.$rootGetters['clusterId'],
+        alertmanagerconfigid: this.id
+      },
+      query: {
+        mode:        queryMode || _VIEW,
+        receiverName,
+        currentView: _YAML
+      }
+    };
+  }
+
+  getEditReceiverConfigRoute(receiverName, queryMode) {
+    return {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-alertmanagerconfig-alertmanagerconfigid-receiver`,
+      params: {
+        cluster:              this.$rootGetters['clusterId'],
+        alertmanagerconfigid: this.id
+      },
+      query: {
+        mode:        queryMode || _VIEW,
+        receiverName,
+        currentView: _CONFIG
+      }
+    };
+  }
+}
diff --git a/pkg/harvester/models/harvester/namespace.js b/pkg/harvester/models/harvester/namespace.js
new file mode 100644
index 00000000..4d392df9
--- /dev/null
+++ b/pkg/harvester/models/harvester/namespace.js
@@ -0,0 +1,110 @@
+import { insertAt } from '@shell/utils/array';
+import namespace from '@shell/models/namespace';
+import { SYSTEM_NAMESPACE, FLEET } from '@shell/config/labels-annotations';
+import SYSTEM_NAMESPACES from '@shell/config/system-namespaces';
+import { get } from '@shell/utils/object';
+import { NAMESPACE } from '@shell/config/types';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '@pkg/harvester/config/harvester';
+
+const OBSCURE_NAMESPACE_PREFIX = [
+  'c-', // cluster namespace
+
+  // Project namespace. When a user creates a project, Rancher creates
+  // namespaces in the local cluster with the 'p-' prefix which are
+  // used to manage RBAC for the project. If these namespaces are deleted,
+  // role bindings can be lost and Rancher may need to be restored from
+  // backup. Therefore we hide these namespaces unless the developer setting
+  // is turned on from the user preferences.
+  'p-',
+
+  'user-', // user namespace
+  'local', // local namespace
+];
+
+export default class HciNamespace extends namespace {
+  get _availableActions() {
+    const out = super._availableActions;
+    const remove = out.findIndex(a => a.action === 'promptRemove');
+
+    const promptRemove = {
+      action:     'promptRemove',
+      altAction:  'remove',
+      label:      this.t('action.remove'),
+      icon:       'icon icon-trash',
+      bulkable:   true,
+      enabled:    this.canDelete,
+      bulkAction: 'promptRemove',
+      weight:     -10,
+    };
+
+    if (remove > -1) {
+      out.splice(remove, 1);
+    }
+
+    insertAt(out, out.length - 1, promptRemove);
+
+    return out;
+  }
+
+  promptRemove(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      warningMessageKey: 'promptRemove.confirmRelatedResource',
+      component:         'ConfirmRelatedToRemoveDialog'
+    });
+  }
+
+  get isSystem() {
+    const systemNamespaces = ['fleet-default'];
+
+    if (systemNamespaces.includes(this.metadata.name)) {
+      return true;
+    }
+
+    if ( this.metadata?.annotations?.[SYSTEM_NAMESPACE] === 'true' ) {
+      return true;
+    }
+
+    if ( SYSTEM_NAMESPACES.includes(this.metadata.name) ) {
+      return true;
+    }
+
+    if ( this.metadata.name.endsWith('-system') ) {
+      return true;
+    }
+
+    if ( this.project ) {
+      return this.project.isSystem;
+    }
+
+    if (get(this, `metadata.labels."${ FLEET.MANAGED }"`) === 'true') {
+      return true;
+    }
+
+    const isSettingSystemNamespace = this.$rootGetters['systemNamespaces'].includes(this.metadata.name);
+    const isObscurePrefix = !!OBSCURE_NAMESPACE_PREFIX.some(prefix => this.metadata.name.startsWith(prefix));
+
+    return isSettingSystemNamespace || isObscurePrefix;
+  }
+
+  get detailLocation() {
+    const id = this.id?.replace(/.*\//, '');
+
+    const detailLocation = {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-id`,
+      params: {
+        product:   this.$rootGetters['productId'],
+        cluster:   this.$rootGetters['clusterId'],
+        resource:  NAMESPACE,
+        namespace: this.metadata?.namespace,
+        id,
+      }
+    };
+
+    return detailLocation;
+  }
+
+  get hideDetailLocation() {
+    return !!this.$rootGetters['currentProduct'].hideNamespaceLocation;
+  }
+}
diff --git a/pkg/harvester/models/harvester/node.js b/pkg/harvester/models/harvester/node.js
new file mode 100644
index 00000000..e1c77ec9
--- /dev/null
+++ b/pkg/harvester/models/harvester/node.js
@@ -0,0 +1,607 @@
+import pickBy from 'lodash/pickBy';
+import { CAPI, LONGHORN, POD, NODE } from '@shell/config/types';
+import { HCI } from '../../types';
+import { CAPI as CAPI_ANNOTATIONS } from '@shell/config/labels-annotations.js';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { clone } from '@shell/utils/object';
+import findLast from 'lodash/findLast';
+import {
+  colorForState,
+  stateDisplay,
+  STATES_ENUM,
+} from '@shell/plugins/dashboard-store/resource-class';
+import { parseSi } from '@shell/utils/units';
+import HarvesterResource from '../harvester';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+import { findBy, isArray } from '@shell/utils/array';
+
+import { ucFirst } from '@shell/utils/string';
+
+const ALLOW_SYSTEM_LABEL_KEYS = [
+  'topology.kubernetes.io/zone',
+  'topology.kubernetes.io/region',
+];
+
+const HEALTHY = 'healthy';
+const WARNING = 'warning';
+
+export default class HciNode extends HarvesterResource {
+  get _availableActions() {
+    const cordon = {
+      action:  'cordon',
+      enabled: this.hasAction('cordon') && !this.isCordoned,
+      icon:    'icon icon-fw icon-pause',
+      label:   this.t('harvester.action.cordon'),
+      total:   1
+    };
+
+    const uncordon = {
+      action:  'uncordon',
+      enabled: this.hasAction('uncordon'),
+      icon:    'icon icon-fw icon-play',
+      label:   this.t('harvester.action.uncordon'),
+      total:   1
+    };
+
+    const enableMaintenance = {
+      action:  'enableMaintenanceMode',
+      enabled: this.hasAction('enableMaintenanceMode'),
+      icon:    'icon icon-fw icon-unlock',
+      label:   this.t('harvester.action.enableMaintenance'),
+      total:   1
+    };
+
+    const disableMaintenance = {
+      action:  'disableMaintenanceMode',
+      enabled: this.hasAction('disableMaintenanceMode'),
+      icon:    'icon icon-fw icon-lock',
+      label:   this.t('harvester.action.disableMaintenance'),
+      total:   1
+    };
+
+    const shutDown = {
+      action:  'shutDown',
+      enabled: this.hasAction('powerActionPossible') && this.hasAction('powerAction') && !this.isStopped && !!this.inventory,
+      icon:    'icon icon-fw icon-dot',
+      label:   this.t('harvester.action.shutdown'),
+      total:   1
+    };
+
+    const powerOn = {
+      action:  'powerOn',
+      enabled: this.hasAction('powerActionPossible') && this.hasAction('powerAction') && this.isStopped && !!this.inventory,
+      icon:    'icon icon-fw icon-play',
+      label:   this.t('harvester.action.powerOn'),
+      total:   1
+    };
+
+    const reboot = {
+      action:  'reboot',
+      enabled: this.hasAction('powerActionPossible') && this.hasAction('powerAction') && !this.isStopped && !!this.inventory,
+      icon:    'icon icon-fw icon-refresh',
+      label:   this.t('harvester.action.reboot'),
+      total:   1
+    };
+
+    return [
+      cordon,
+      uncordon,
+      enableMaintenance,
+      disableMaintenance,
+      shutDown,
+      powerOn,
+      reboot,
+      ...super._availableActions
+    ];
+  }
+
+  promptRemove(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      warningMessageKey: 'promptRemove.confirmRelatedResource',
+      component:         'ConfirmRelatedToRemoveDialog'
+    });
+  }
+
+  remove(resources = this) {
+    const nodes = Array.isArray(resources) ? resources : [resources];
+
+    nodes.forEach((node) => {
+      if (node.capiMachine) {
+        node.capiMachine.remove();
+      } else {
+        node.remove();
+      }
+    });
+  }
+
+  get capiMachine() {
+    const namespace = this.annotations?.[CAPI_ANNOTATIONS.CLUSTER_NAMESPACE];
+    const name = this.annotations?.[CAPI_ANNOTATIONS.MACHINE_NAME];
+
+    if (namespace && name) {
+      const inStore = this.$rootGetters['currentProduct'].inStore;
+
+      return this.$rootGetters[`${ inStore }/byId`](CAPI.MACHINE, `${ namespace }/${ name }`);
+    }
+
+    return null;
+  }
+
+  get confirmRemove() {
+    return true;
+  }
+
+  get consoleUrl() {
+    const url = this.metadata?.annotations?.[HCI_ANNOTATIONS.HOST_CONSOLE_URL];
+
+    if (!url) {
+      return false;
+    }
+
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+      return `http://${ url }`;
+    }
+
+    return url;
+  }
+
+  get filteredSystemLabels() {
+    const reg = /(k3s|kubernetes|kubevirt|harvesterhci|k3os)+\.io/;
+
+    const labels = pickBy(this.labels, (value, key) => {
+      return !reg.test(key);
+    });
+
+    ALLOW_SYSTEM_LABEL_KEYS.map((key) => {
+      const value = this?.metadata?.labels?.[key];
+
+      if (value) {
+        labels[key] = value;
+      }
+    });
+
+    return labels;
+  }
+
+  get nameDisplay() {
+    return (
+      this.metadata?.annotations?.[HCI_ANNOTATIONS.HOST_CUSTOM_NAME] ||
+      this.name
+    );
+  }
+
+  get isKVMDisable() {
+    const allNotExist = !this.metadata?.labels?.[HCI_ANNOTATIONS.KVM_AMD_CPU] && !this.metadata?.labels?.[HCI_ANNOTATIONS.KVM_INTEL_CPU];
+
+    return this.metadata?.labels?.[HCI_ANNOTATIONS.KVM_AMD_CPU] === 'false' || this.metadata?.labels?.[HCI_ANNOTATIONS.KVM_INTEL_CPU] === 'false' || allNotExist;
+  }
+
+  get stateDisplay() {
+    if (this.isEnteringMaintenance) {
+      return 'Entering maintenance mode';
+    }
+
+    if (this.isStopping) {
+      return ucFirst(STATES_ENUM.STOPPING);
+    }
+
+    if (this.isStarting) {
+      return ucFirst(STATES_ENUM.STARTING);
+    }
+
+    if (this.isStopped) {
+      return ucFirst(STATES_ENUM.OFF);
+    }
+
+    if (this.isRebooting) {
+      return 'Rebooting';
+    }
+
+    if (this.isMaintenance) {
+      return 'Maintenance';
+    }
+
+    if (this.isCordoned) {
+      return 'Cordoned';
+    }
+
+    return stateDisplay(this.state);
+  }
+
+  get stateBackground() {
+    if (this.isStopped || this.isStopping || this.isStarting || this.isRebooting) {
+      return colorForState(
+        this.stateDisplay,
+        false,
+        this.stateObj?.transitioning
+      ).replace('text-', 'bg-');
+    }
+
+    return colorForState(
+      this.stateDisplay,
+      this.stateObj?.error,
+      this.stateObj?.transitioning
+    ).replace('text-', 'bg-');
+  }
+
+  get stateDescription() {
+    const currentIP = this.metadata?.annotations?.[HCI_ANNOTATIONS.CURRENT_IP];
+    const initIP = this.metadata?.annotations?.[HCI_ANNOTATIONS.INIT_IP];
+
+    if (initIP && currentIP && currentIP !== initIP) {
+      return this.t('harvester.host.inconsistentIP', { currentIP, initIP });
+    }
+
+    return super.stateDescription;
+  }
+
+  get stateObj() {
+    const currentIP = this.metadata?.annotations?.[HCI_ANNOTATIONS.CURRENT_IP];
+    const initIP = this.metadata?.annotations?.[HCI_ANNOTATIONS.INIT_IP];
+
+    if (initIP && currentIP && currentIP !== initIP) {
+      this.metadata.state.error = true;
+    }
+
+    return this.metadata?.state;
+  }
+
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.HOST;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.HOST;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.HOST }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  get internalIp() {
+    const addresses = this.status?.addresses || [];
+
+    return findLast(addresses, address => address.type === 'InternalIP')
+      ?.address;
+  }
+
+  get isMaster() {
+    return (
+      this.metadata?.labels?.[HCI_ANNOTATIONS.NODE_ROLE_MASTER] !== undefined ||
+      this.metadata?.labels?.[HCI_ANNOTATIONS.NODE_ROLE_CONTROL_PLANE] !==
+        undefined
+    );
+  }
+
+  cordon() {
+    this.doActionGrowl('cordon', {});
+  }
+
+  uncordon() {
+    this.doAction('uncordon', {});
+  }
+
+  enableMaintenanceMode(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'HarvesterMaintenanceDialog'
+    });
+  }
+
+  disableMaintenanceMode() {
+    this.doAction('disableMaintenanceMode', {});
+  }
+
+  get isUnSchedulable() {
+    return (
+      this.metadata?.labels?.[HCI_ANNOTATIONS.NODE_SCHEDULABLE] === 'false' ||
+      this.spec.unschedulable
+    );
+  }
+
+  get isMigratable() {
+    const states = ['in-progress', 'unavailable'];
+
+    return (
+      !this.metadata?.annotations?.[HCI_ANNOTATIONS.MAINTENANCE_STATUS] &&
+      !this.isUnSchedulable &&
+      !states.includes(this.state)
+    );
+  }
+
+  get isCordoned() {
+    return (this.isUnSchedulable && !this.isEtcd) || this.hasAction('uncordon');
+  }
+
+  get isEtcd() {
+    return this.metadata?.labels?.[HCI_ANNOTATIONS.NODE_ROLE_ETCD];
+  }
+
+  get isEnteringMaintenance() {
+    return (
+      this.metadata?.annotations?.[HCI_ANNOTATIONS.MAINTENANCE_STATUS] ===
+      'running'
+    );
+  }
+
+  get isMaintenance() {
+    return (
+      this.metadata?.annotations?.[HCI_ANNOTATIONS.MAINTENANCE_STATUS] ===
+      'completed'
+    );
+  }
+
+  get longhornDisks() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+    const longhornNode = this.$rootGetters[`${ inStore }/byId`](
+      LONGHORN.NODES,
+      `longhorn-system/${ this.id }`
+    );
+    const diskStatus = longhornNode?.status?.diskStatus || {};
+    const diskSpec = longhornNode?.spec?.disks || {};
+
+    const longhornDisks = Object.keys(diskStatus).map((key) => {
+      const conditions = diskStatus[key]?.conditions || [];
+      let readyCondition = {};
+      let schedulableCondition = {};
+
+      if (isArray(conditions)) {
+        readyCondition = findBy(conditions, 'type', 'Ready') || {};
+        schedulableCondition = findBy(conditions, 'type', 'Schedulable') || {};
+      } else {
+        readyCondition = conditions.Ready;
+        schedulableCondition = conditions.Schedulable;
+      }
+
+      let state;
+
+      if (readyCondition?.status !== 'True' || schedulableCondition?.status !== 'True') {
+        state = WARNING;
+      } else {
+        state = HEALTHY;
+      }
+
+      return {
+        ...diskSpec[key],
+        ...diskStatus[key],
+        name:             key,
+        storageReserved:  diskSpec[key]?.storageReserved,
+        storageAvailable: diskStatus[key]?.storageAvailable,
+        storageMaximum:   diskStatus[key]?.storageMaximum,
+        storageScheduled: diskStatus[key]?.storageScheduled,
+        readyCondition,
+        schedulableCondition,
+        state,
+      };
+    });
+
+    return longhornDisks;
+  }
+
+  get pods() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+    const pods = this.$rootGetters[`${ inStore }/all`](POD) || [];
+
+    return pods.filter(
+      p => p?.spec?.nodeName === this.id && p?.metadata?.name !== 'removing'
+    );
+  }
+
+  get reserved() {
+    try {
+      return JSON.parse(this.metadata.annotations[HCI_ANNOTATIONS.HOST_REQUEST] || '{}');
+    } catch {
+      return {};
+    }
+  }
+
+  get cpuReserved() {
+    return parseSi(this.reserved.cpu || '0');
+  }
+
+  get memoryReserved() {
+    return parseSi(this.reserved.memory || '0');
+  }
+
+  get canDelete() {
+    const nodes = this.$rootGetters['harvester/all'](NODE) || [];
+
+    return nodes.length > 1;
+  }
+
+  get vlanStatuses() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+    const nodeId = this.id;
+    const vlanStatuses = this.$rootGetters[`${ inStore }/all`](HCI.VLAN_STATUS);
+
+    return vlanStatuses.filter(s => s?.status?.node === nodeId) || [];
+  }
+
+  get blockDevices() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+    const nodeId = this.id;
+    const blockDevices = this.$rootGetters[`${ inStore }/all`](HCI.BLOCK_DEVICE);
+
+    return blockDevices.filter(s => s?.spec?.nodeName === nodeId) || [];
+  }
+
+  get unProvisionedDisks() {
+    const blockDevices = this.blockDevices || [];
+
+    return blockDevices.filter(d => d?.spec?.fileSystem?.provisioned && d?.status?.provisionPhase !== 'Provisioned');
+  }
+
+  get diskStatusCount() {
+    const errorBlockDevices = this.unProvisionedDisks.filter(b => b.metadata.state.error) || [];
+
+    let errorCount = 0;
+
+    this.longhornDisks.map((d) => {
+      if (d.state === 'warning') {
+        errorCount++;
+      }
+    });
+
+    const total = this.longhornDisks.length + errorBlockDevices.length;
+
+    return {
+      total,
+      errorCount: errorCount + errorBlockDevices.length,
+      useful:     total - errorCount,
+    };
+  }
+
+  get manufacturer() {
+    return this.metadata?.labels?.[HCI_ANNOTATIONS.NODE_MANUFACTURER];
+  }
+
+  get serialNumber() {
+    return this.metadata?.labels?.[HCI_ANNOTATIONS.NODE_SERIAL_NUMBER];
+  }
+
+  get model() {
+    return this.metadata?.labels?.[HCI_ANNOTATIONS.NODE_MODEL];
+  }
+
+  get isStopped() {
+    const inventory = this.inventory || {};
+
+    return inventory.spec?.powerActionRequested === 'shutdown' &&
+            inventory.status?.powerAction?.actionStatus === 'complete';
+  }
+
+  get isStopping() {
+    const inventory = this.inventory || {};
+
+    if (!Object.prototype.hasOwnProperty.call(inventory?.status?.powerAction || {}, 'actionStatus')) {
+      return inventory.spec?.powerActionRequested === 'shutdown';
+    } else {
+      return false;
+    }
+  }
+
+  get isStarted() {
+    const inventory = this.inventory || {};
+
+    return inventory.spec?.powerActionRequested === 'poweron' &&
+            inventory.status?.powerAction?.actionStatus === 'complete';
+  }
+
+  get isStarting() {
+    const inventory = this.inventory || {};
+
+    if (!Object.prototype.hasOwnProperty.call(inventory?.status?.powerAction || {}, 'actionStatus')) {
+      return inventory.spec?.powerActionRequested === 'poweron';
+    } else {
+      return false;
+    }
+  }
+
+  get isRebooting() {
+    const inventory = this.inventory || {};
+
+    if (!Object.prototype.hasOwnProperty.call(inventory?.status?.powerAction || {}, 'actionStatus')) {
+      return inventory.spec?.powerActionRequested === 'reboot';
+    } else {
+      return false;
+    }
+  }
+
+  async shutDown(resources = this) {
+    try {
+      await this.doAction('powerActionPossible', {});
+
+      await this.doAction('powerAction', { operation: 'shutdown' });
+
+      await this.$dispatch('growl/success', {
+        title:   this.t('generic.notification.title.succeed'),
+        message: this.t('harvester.host.powerAction.message.success', {
+          name:      this.name,
+          operation: 'shut down'
+        })
+      }, { root: true });
+    } catch (err) {
+      await this.$dispatch('growl/error', {
+        title:   this.t('generic.notification.title.error'),
+        message: err,
+      }, { root: true });
+    }
+  }
+
+  async powerOn(resources = this) {
+    const operation = 'poweron';
+
+    try {
+      await this.doAction('powerActionPossible', {});
+
+      await this.doAction('powerAction', { operation });
+
+      await this.$dispatch('growl/success', {
+        title:   this.t('generic.notification.title.succeed'),
+        message: this.t('harvester.host.powerAction.message.success', {
+          name: this.name,
+          operation,
+        })
+      }, { root: true });
+    } catch (err) {
+      await this.$dispatch('growl/error', {
+        title:   this.t('generic.notification.title.error'),
+        message: err,
+      }, { root: true });
+    }
+  }
+
+  async reboot(resources = this) {
+    const operation = 'reboot';
+
+    try {
+      await this.doAction('powerActionPossible', {});
+
+      await this.doAction('powerAction', { operation });
+
+      await this.$dispatch('growl/success', {
+        title:   this.t('generic.notification.title.succeed'),
+        message: this.t('harvester.host.powerAction.message.success', {
+          name: this.name,
+          operation,
+        })
+      }, { root: true });
+    } catch (err) {
+      await this.$dispatch('growl/error', {
+        title:   this.t('generic.notification.title.error'),
+        message: err,
+      }, { root: true });
+    }
+  }
+
+  get inventory() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+    const inventories = this.$rootGetters[`${ inStore }/all`](HCI.INVENTORY) || [];
+
+    return inventories.find(inv => inv.id === `harvester-system/${ this.id }`);
+  }
+
+  get warningMessages() {
+    let out = [];
+
+    out = out.concat(this.inventory?.warningMessages || []);
+
+    return out;
+  }
+}
diff --git a/pkg/harvester/models/harvester/persistentvolumeclaim.js b/pkg/harvester/models/harvester/persistentvolumeclaim.js
new file mode 100644
index 00000000..1b657411
--- /dev/null
+++ b/pkg/harvester/models/harvester/persistentvolumeclaim.js
@@ -0,0 +1,307 @@
+import Vue from 'vue';
+import { _CLONE } from '@shell/config/query-params';
+import pick from 'lodash/pick';
+import { HCI, VOLUME_SNAPSHOT } from '../../types';
+import { PV, LONGHORN } from '@shell/config/types';
+import { DESCRIPTION } from '@shell/config/labels-annotations';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { findBy } from '@shell/utils/array';
+import { get, clone } from '@shell/utils/object';
+import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import HarvesterResource from '../harvester';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+
+const DEGRADED_ERROR = 'replica scheduling failed';
+
+export default class HciPv extends HarvesterResource {
+  applyDefaults(_, realMode) {
+    const accessModes = realMode === _CLONE ? this.spec.accessModes : [];
+    const storage =
+      realMode === _CLONE ? this.spec.resources.requests.storage : null;
+    const storageClassName =
+      realMode === _CLONE ? this.spec.storageClassName : '';
+
+    Vue.set(this, 'spec', {
+      accessModes,
+      storageClassName,
+      volumeName: '',
+      resources:  { requests: { storage } }
+    });
+  }
+
+  get availableActions() {
+    const out = super._availableActions;
+    const clone = out.find(action => action.action === 'goToClone');
+
+    if (clone) {
+      clone.action = 'goToCloneVolume';
+    }
+
+    return [
+      {
+        action:  'exportImage',
+        enabled: this.hasAction('export'),
+        icon:    'icon icon-copy',
+        label:   this.t('harvester.action.exportImage')
+      },
+      {
+        action:  'cancelExpand',
+        enabled: this.hasAction('cancelExpand'),
+        icon:    'icon icon-backup',
+        label:   this.t('harvester.action.cancelExpand')
+      },
+      {
+        action:  'snapshot',
+        enabled: this.hasAction('snapshot'),
+        icon:    'icon icon-backup',
+        label:   this.t('harvester.action.snapshot'),
+      },
+      ...out
+    ];
+  }
+
+  exportImage(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'HarvesterExportImageDialog'
+    });
+  }
+
+  cancelExpand(resources = this) {
+    this.doActionGrowl('cancelExpand', {});
+  }
+
+  snapshot(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'SnapshotDialog'
+    });
+  }
+
+  goToCloneVolume(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'VolumeCloneDialog'
+    });
+  }
+
+  cleanForNew() {
+    this.$dispatch(`cleanForNew`, this);
+
+    delete this.metadata.finalizers;
+    const keys = [HCI_ANNOTATIONS.IMAGE_ID, DESCRIPTION];
+
+    this.metadata.annotations = pick(this.metadata.annotations, keys);
+  }
+
+  get canUpdate() {
+    return this.hasLink('update');
+  }
+
+  get stateDisplay() {
+    const ownedBy = this?.metadata?.annotations?.[HCI_ANNOTATIONS.OWNED_BY];
+    const volumeError = this.relatedPV?.metadata?.annotations?.[HCI_ANNOTATIONS.VOLUME_ERROR];
+    const degradedVolume = volumeError === DEGRADED_ERROR;
+    const status = this?.status?.phase === 'Bound' && !volumeError && this.isLonghornVolumeReady ? 'Ready' : 'Not Ready';
+
+    const conditions = this?.status?.conditions || [];
+
+    if (findBy(conditions, 'type', 'Resizing')?.status === 'True') {
+      return 'Resizing';
+    } else if (ownedBy && !volumeError) {
+      return 'In-use';
+    } else if (degradedVolume) {
+      return 'Degraded';
+    } else {
+      return status;
+    }
+  }
+
+  // state is similar with stateDisplay, the reason we keep this property is the status of In-use should not be displayed on vm detail page
+  get state() {
+    const volumeError = this.relatedPV?.metadata?.annotations?.[HCI_ANNOTATIONS.VOLUME_ERROR];
+    const degradedVolume = volumeError === DEGRADED_ERROR;
+    let status = this?.status?.phase === 'Bound' && !volumeError ? 'Ready' : 'Not Ready';
+
+    const conditions = this?.status?.conditions || [];
+
+    if (degradedVolume) {
+      status = 'Degraded';
+    }
+
+    if (findBy(conditions, 'type', 'Resizing')?.status === 'True') {
+      status = 'Resizing';
+    }
+
+    return status;
+  }
+
+  get stateColor() {
+    const state = this.stateDisplay;
+
+    return colorForState(state);
+  }
+
+  get stateDescription() {
+    return (
+      super.stateDescription
+    );
+  }
+
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.VOLUME;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.VOLUME;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.VOLUME }"`, { count: 1 }).trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  get phaseState() {
+    return this.status?.phase || 'N/A';
+  }
+
+  get attachVM() {
+    const allVMs = this.$rootGetters['harvester/all'](HCI.VM);
+    const ownedBy =
+      get(this, `metadata.annotations."${ HCI_ANNOTATIONS.OWNED_BY }"`) || '';
+
+    if (!ownedBy) {
+      return null;
+    }
+
+    const ownedId = JSON.parse(ownedBy)[0]?.refs?.[0];
+
+    return allVMs.find(D => D.id === ownedId);
+  }
+
+  get isAvailable() {
+    const unAvailable = ['Resizing', 'Not Ready'];
+
+    return !unAvailable.includes(this.stateDisplay);
+  }
+
+  get volumeSort() {
+    const volume = this.spec?.resources?.requests?.storage || 0;
+
+    return parseInt(volume);
+  }
+
+  get isSystemResource() {
+    const systemNamespaces = this.$rootGetters['systemNamespaces'];
+
+    if (systemNamespaces.includes(this.metadata?.namespace)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  get longhornVolume() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+
+    return this.$rootGetters[`${ inStore }/all`](LONGHORN.VOLUMES).find(v => v.metadata?.name === this.spec?.volumeName);
+  }
+
+  get longhornEngine() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+
+    return this.$rootGetters[`${ inStore }/all`](LONGHORN.ENGINES).find(v => v.spec?.volumeName === this.spec?.volumeName);
+  }
+
+  // https://github.com/longhorn/longhorn-manager/blob/master/api/model.go#L1151
+  get isLonghornVolumeReady() {
+    let ready = true;
+    const longhornVolume = this.longhornVolume || {};
+
+    const scheduledCondition = (longhornVolume?.status?.conditions || []).find(c => c.type === 'Scheduled' || c.type === 'scheduled') || {};
+
+    if ((longhornVolume?.spec?.nodeID === '' && longhornVolume?.status?.state !== 'detached') ||
+          (longhornVolume?.status?.state === 'detached' && scheduledCondition.status !== 'True') ||
+          longhornVolume?.status?.robustness === 'faulted' ||
+          longhornVolume?.status?.restoreRequired ||
+          longhornVolume?.status?.cloneStatus?.state === 'failed'
+    ) {
+      ready = false;
+    }
+
+    return ready;
+  }
+
+  get relatedVolumeSnapshotCounts() {
+    const snapshots = this.$rootGetters['harvester/all'](VOLUME_SNAPSHOT);
+
+    return snapshots.filter((snapshot) => {
+      const volumeId = `${ snapshot.metadata?.namespace }/${ snapshot.spec?.source?.persistentVolumeClaimName }`;
+      const kind = snapshot.metadata?.ownerReferences?.[0]?.kind;
+
+      return volumeId === this.id && kind === 'PersistentVolumeClaim';
+    });
+  }
+
+  get originalSnapshot() {
+    if (this.spec?.dataSource) {
+      return this.$rootGetters['harvester/all'](VOLUME_SNAPSHOT).find(V => V.metadata?.name === this.spec.dataSource.name);
+    } else {
+      return null;
+    }
+  }
+
+  get source() {
+    const imageId = get(this, `metadata.annotations."${ HCI_ANNOTATIONS.IMAGE_ID }"`);
+
+    return imageId ? 'image' : 'data';
+  }
+
+  get warnDeletionMessage() {
+    return this.t('harvester.volume.promptRemove.tips');
+  }
+
+  get relatedPV() {
+    return this.$rootGetters['harvester/all'](PV).find(pv => pv.metadata?.name === this.spec?.volumeName);
+  }
+
+  get resourceExternalLink() {
+    const host = window.location.host;
+    const { params } = this.currentRoute();
+    const volumeName = this.spec?.volumeName;
+
+    if (!volumeName) {
+      return null;
+    }
+
+    return {
+      tipsKey: 'harvester.volume.externalLink.tips',
+      url:     `https://${ host }/k8s/clusters/${ params.cluster }/api/v1/namespaces/longhorn-system/services/http:longhorn-frontend:80/proxy/#/volume/${ volumeName }`
+    };
+  }
+
+  get customValidationRules() {
+    return [
+      {
+        nullable:   false,
+        path:       'spec.resources.requests.storage',
+        required:   true,
+        validators: ['volumeSize']
+      },
+    ];
+  }
+}
diff --git a/pkg/harvester/models/harvester/pod.js b/pkg/harvester/models/harvester/pod.js
new file mode 100644
index 00000000..966f9e5b
--- /dev/null
+++ b/pkg/harvester/models/harvester/pod.js
@@ -0,0 +1,185 @@
+import includes from 'lodash/includes';
+import { findBy } from '@shell/utils/array';
+import { get } from '@shell/utils/object';
+import { NODE } from '@shell/config/types';
+import HarvesterResource from '../harvester';
+
+const POD_STATUS_NOT_SCHEDULABLE = 'POD_NOT_SCHEDULABLE';
+
+const POD_STATUS_FAILED = 'POD_FAILED';
+const POD_STATUS_CRASHLOOP_BACKOFF = 'POD_CRASHLOOP_BACKOFF';
+const POD_STATUS_UNKNOWN = 'POD_STATUS_UNKNOWN';
+const POD_STATUS_CONTAINER_FAILING = 'POD_CONTAINER_FAILING';
+const POD_STATUS_NOT_READY = 'POD_NOT_READY';
+
+const POD_STATUS_PENDING = 'POD_STATUS_PENDING';
+const POD_STATUS_COMPLETED = 'POD_STATUS_COMPLETED';
+const POD_STATUS_SUCCEEDED = 'POD_STATUS_SUCCEEDED';
+const POD_STATUS_RUNNING = 'POD_STATUS_RUNNING';
+
+const failedWaitingContainerReasons = ['ImagePullBackOff', 'ErrImagePull', 'CrashLoopBackOff'];
+const failedTerminationContainerReasons = ['Error'];
+
+const errorStatusMapper = {
+  Failed:           POD_STATUS_FAILED,
+  CrashLoopBackOff: POD_STATUS_CRASHLOOP_BACKOFF,
+  Unknown:          POD_STATUS_UNKNOWN,
+};
+
+const okStatusMapper = {
+  Pending:   POD_STATUS_PENDING,
+  Running:   POD_STATUS_RUNNING,
+  Completed: POD_STATUS_COMPLETED,
+  Succeeded: POD_STATUS_SUCCEEDED,
+};
+
+const stateReasonResolver = {
+  terminated: ({ reason, exitCode }) => `Terminated with ${ reason }${ exitCode ? ` (exit code ${ exitCode }).` : '.' }`,
+  waiting:    ({ reason }) => `Waiting (${ reason }).`,
+};
+
+export default class HciPod extends HarvesterResource {
+  get inStore() {
+    return this.$rootGetters['currentProduct'].inStore;
+  }
+
+  get nodes() {
+    return this.$rootGetters[`${ this.inStore }/all`](NODE);
+  }
+
+  get node() {
+    const { nodeName } = this.spec;
+
+    return this.nodes.filter((node) => {
+      return node?.metadata?.name === nodeName;
+    })[0];
+  }
+
+  get getPodStatus() {
+    return this.isNotSchedulable ||
+    this.hasErrorStatus ||
+    this.isContainerFailing ||
+    this.isNotReady ||
+    this.hasOkStatus || { status: POD_STATUS_UNKNOWN };
+  }
+
+  get isNotSchedulable() {
+    if (!this.isPodSchedulable) {
+      const conditions = get(this, 'status.conditions');
+      const podScheduledCond = findBy(conditions, 'type', 'PodScheduled');
+
+      return {
+        status:  POD_STATUS_NOT_SCHEDULABLE,
+        message: podScheduledCond.message || 'Pod scheduling failed.',
+      };
+    }
+
+    return null;
+  }
+
+  get hasErrorStatus() {
+    const status = errorStatusMapper[this?.status?.phase];
+
+    if (status) {
+      return {
+        status,
+        message: this.getContainerStatusReason(this.findFailingContainerStatus),
+      };
+    }
+
+    return null;
+  }
+
+  get isPodSchedulable() {
+    const conditions = get(this, 'status.conditions');
+    const podScheduledCond = findBy(conditions, 'type', 'PodScheduled');
+
+    return !(
+      podScheduledCond &&
+      podScheduledCond.status !== 'True' &&
+      podScheduledCond.reason === 'Unschedulable'
+    );
+  }
+
+  get findFailingContainerStatus() {
+    return (get(this, 'status.containerStatuses'), []).find((container) => {
+      return !container.ready &&
+      (includes(failedWaitingContainerReasons, get(container, 'state.waiting.reason')) ||
+      includes(failedTerminationContainerReasons, get(container, 'state.terminated.reason')));
+    });
+  }
+
+  get getContainerStatusReason() {
+    return (containerStatus) => {
+      if (containerStatus) {
+        const stateName = Object.getOwnPropertyNames(containerStatus.state).find(
+          pn => !!containerStatus.state[pn].reason,
+        );
+
+        if (stateName) {
+          const state = containerStatus.state[stateName];
+
+          return (
+            state.message ||
+            (stateReasonResolver[stateName] && stateReasonResolver[stateName](state)) ||
+            stateName
+          );
+        }
+      }
+
+      return undefined;
+    };
+  }
+
+  get isContainerFailing() {
+    const failingContainer = this.findFailingContainerStatus;
+
+    if (failingContainer) {
+      return {
+        status:  POD_STATUS_CONTAINER_FAILING,
+        message: this.getContainerStatusReason(failingContainer),
+      };
+    }
+
+    return null;
+  }
+
+  get isNotReady() {
+    const message = this.findPodFalseStatusConditionMessage;
+
+    if (message) {
+      return {
+        status: POD_STATUS_NOT_READY,
+        message,
+      };
+    }
+
+    return null;
+  }
+
+  get hasOkStatus() {
+    const status = okStatusMapper[this?.status?.phase];
+
+    if (status) {
+      return { status };
+    }
+
+    return null;
+  }
+
+  get findPodFalseStatusConditionMessage() {
+    const notReadyConditions = this.getPodFalseStatusConditions;
+
+    if (notReadyConditions.length > 0) {
+      return notReadyConditions[0].message || `Step: ${ notReadyConditions[0].type }`;
+    }
+
+    return undefined;
+  }
+
+  get getPodFalseStatusConditions() {
+    const conditions = get(this, 'status.conditions') || [];
+
+    return conditions.filter(condition => condition.status !== 'True');
+  }
+}
diff --git a/pkg/harvester/models/harvester/secret.js b/pkg/harvester/models/harvester/secret.js
new file mode 100644
index 00000000..0c8536dd
--- /dev/null
+++ b/pkg/harvester/models/harvester/secret.js
@@ -0,0 +1,88 @@
+import { clone } from '@shell/utils/object';
+import { HCI } from '../../types';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+import Secret from '@shell/models/secret';
+
+export default class HciSecret extends Secret {
+  get _detailLocation() {
+    const schema = this.$getters['schemaFor'](this.type);
+
+    const id = this.id?.replace(/.*\//, '');
+
+    return {
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`,
+      params: {
+        product:   HARVESTER_PRODUCT,
+        cluster:   this.$rootGetters['clusterId'],
+        resource:  this.type,
+        id,
+        namespace: this.metadata.namespace,
+      },
+    };
+  }
+
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.SECRET;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.SECRET;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get doneRoute() {
+    return this.doneOverride.name;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.SECRET }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  get details() {
+    const out = [
+      {
+        label:   this.t('secret.type'),
+        content: this.typeDisplay
+      }
+    ];
+
+    if (this.cn) {
+      out.push({
+        label:   this.t('secret.certificate.cn'),
+        content: this.plusMoreNames ? `${ this.cn } ${ this.t('secret.certificate.plusMore', { n: this.plusMoreNames }) }` : this.cn
+      });
+    }
+
+    if (this.issuer) {
+      out.push({
+        label:   this.t('secret.certificate.issuer'),
+        content: this.issuer
+      });
+    }
+
+    if (this.notAfter) {
+      out.push({
+        label:         'Expires',
+        formatter:     'Date',
+        formatterOpts: { class: this.dateClass },
+        content:       this.notAfter
+      });
+    }
+
+    return out;
+  }
+}
diff --git a/pkg/harvester/models/harvester/snapshot.storage.k8s.io.volumesnapshot.js b/pkg/harvester/models/harvester/snapshot.storage.k8s.io.volumesnapshot.js
new file mode 100644
index 00000000..5cd5aecf
--- /dev/null
+++ b/pkg/harvester/models/harvester/snapshot.storage.k8s.io.volumesnapshot.js
@@ -0,0 +1,70 @@
+import { clone } from '@shell/utils/object';
+import { HCI } from '../../types';
+import HarvesterResource from '../harvester';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+import { PVC } from '@shell/config/types';
+
+export default class HciSnapshot extends HarvesterResource {
+  get availableActions() {
+    return [
+      {
+        action:  'restoreSnapshot',
+        enabled: this.hasAction('restore'),
+        icon:    'icon icon-refresh',
+        label:   this.t('harvester.action.restore'),
+      },
+      ...super._availableActions
+    ];
+  }
+
+  get canClone() {
+    return false;
+  }
+
+  restoreSnapshot(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'RestoreSnapshotDialog'
+    });
+  }
+
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.SNAPSHOT;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.SNAPSHOT;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.SNAPSHOT }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  get volume() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+    const namespace = this?.metadata?.namespace;
+    const pvc = this?.spec?.source?.persistentVolumeClaimName;
+
+    const volume = this.$rootGetters[`${ inStore }/byId`](
+      PVC,
+      `${ namespace }/${ pvc }`
+    );
+
+    return volume;
+  }
+}
diff --git a/pkg/harvester/models/harvester/storage.k8s.io.storageclass.js b/pkg/harvester/models/harvester/storage.k8s.io.storageclass.js
new file mode 100644
index 00000000..80dffc49
--- /dev/null
+++ b/pkg/harvester/models/harvester/storage.k8s.io.storageclass.js
@@ -0,0 +1,34 @@
+import { clone } from '@shell/utils/object';
+import { HCI } from '../../types';
+import StorageClass from '@shell/models/storage.k8s.io.storageclass';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+
+export default class HciStorageClass extends StorageClass {
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+
+    detailLocation.params.resource = HCI.STORAGE;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource-id`;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = HCI.STORAGE;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  get parentNameOverride() {
+    return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.STORAGE }"`, { count: 1 })?.trim();
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.addon.js b/pkg/harvester/models/harvesterhci.io.addon.js
new file mode 100644
index 00000000..e7ff9d45
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.addon.js
@@ -0,0 +1,140 @@
+import HarvesterResource from './harvester';
+import { HCI as HCI_ANNOTATIONS } from '../config/labels-annotations';
+import jsyaml from 'js-yaml';
+import startCase from 'lodash/startCase';
+
+export default class HciAddonConfig extends HarvesterResource {
+  get availableActions() {
+    const out = super._availableActions;
+
+    if (this.id === 'harvester-system/rancher-vcluster') {
+      const rancherDashboard = {
+        action:  'goToRancher',
+        enabled: this.spec.enabled,
+        icon:    'icon icon-external-link',
+        label:   this.t('harvester.addons.rancherVcluster.accessRancher'),
+      };
+
+      out.push(rancherDashboard);
+    }
+
+    const toggleAddon = {
+      action:  'toggleAddon',
+      enabled: true,
+      icon:    this.spec.enabled ? 'icon icon-pause' : 'icon icon-play',
+      label:   this.spec.enabled ? this.t('generic.disable') : this.t('generic.enable'),
+    };
+
+    out.unshift(toggleAddon);
+
+    return out;
+  }
+
+  async toggleAddon() {
+    const enableHistory = this.spec.enabled;
+
+    try {
+      if (!this.spec.enabled && this.id === 'rancher-vcluster/rancher-vcluster') {
+        const valuesContent = jsyaml.load(this.spec.valuesContent);
+
+        if (!valuesContent.hostname || !valuesContent.bootstrapPassword) {
+          this.goToEdit();
+
+          return;
+        }
+      }
+
+      this.spec.enabled = !this.spec.enabled;
+      await this.save();
+    } catch (err) {
+      this.spec.enabled = enableHistory;
+      this.$dispatch('growl/fromError', {
+        title: this.t('harvester.addons.switchFailed', { action: enableHistory ? this.t('generic.disable') : this.t('generic.enable'), name: (this.metadata.name) }),
+        err,
+      }, { root: true });
+    }
+  }
+
+  goToRancher() {
+    const valuesContent = jsyaml.load(this.spec.valuesContent);
+
+    window.open(
+      `https://${ valuesContent.hostname }`,
+      '_blank',
+    );
+  }
+
+  get rancherHostname() {
+    const valuesContent = jsyaml.load(this.spec.valuesContent);
+
+    return `https://${ valuesContent.hostname }`;
+  }
+
+  get stateColor() {
+    const state = this.stateDisplay;
+
+    if (state?.toLowerCase().includes('enabled') || state?.toLowerCase().includes('success')) {
+      return 'text-success';
+    } else if (state === 'Disabled') {
+      return 'text-darker';
+    } else if (state?.toLowerCase().includes('ing')) {
+      return 'text-info';
+    } else if (state?.toLowerCase().includes('failed') || state?.toLowerCase().includes('error')) {
+      return 'text-error';
+    } else {
+      return 'text-info';
+    }
+  }
+
+  get stateDisplay() {
+    const out = this?.status?.status;
+
+    if (!out) {
+      return 'Disabled';
+    }
+
+    if (out.startsWith('Addon')) {
+      return startCase(out.replace('Addon', ''));
+    }
+
+    return out;
+  }
+
+  get stateDescription() {
+    const failedCondition = (this.status?.conditions || []).find(C => C.type === 'OperationFailed');
+
+    return failedCondition?.message || super.stateDescription;
+  }
+
+  get displayName() {
+    const isExperimental = this.metadata?.labels?.[HCI_ANNOTATIONS.ADDON_EXPERIMENTAL] === 'true';
+
+    return isExperimental ? `${ this.metadata.name } (${ this.t('generic.experimental') })` : this.metadata.name;
+  }
+
+  get customValidationRules() {
+    let rules = [];
+
+    if (this.metadata.name === 'rancher-monitoring') {
+      rules = [
+        {
+          nullable:   false,
+          path:       'spec.valuesContent',
+          validators: ['rancherMonitoring'],
+        },
+      ];
+    }
+
+    if (this.metadata.name === 'rancher-logging') {
+      rules = [
+        {
+          nullable:   false,
+          path:       'spec.valuesContent',
+          validators: ['rancherLogging'],
+        },
+      ];
+    }
+
+    return rules;
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.blockdevice.js b/pkg/harvester/models/harvesterhci.io.blockdevice.js
new file mode 100644
index 00000000..06078faf
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.blockdevice.js
@@ -0,0 +1,62 @@
+import { HCI } from '../types';
+import HarvesterResource from './harvester';
+
+export default class HciBlockDevice extends HarvesterResource {
+  get childParts() {
+    const inStore = this.$rootGetters['currentProduct'].inStore;
+    const bds = this.$rootGetters[`${ inStore }/all`](HCI.BLOCK_DEVICE);
+
+    const parts = bds.filter((b) => {
+      return b.status?.deviceStatus?.parentDevice === this.spec?.devPath &&
+              b.spec.nodeName === this.spec.nodeName;
+    });
+
+    return parts;
+  }
+
+  get isChildPartProvisioned() {
+    const parts = this.childParts.filter(p => p.spec?.fileSystem?.provisioned) || [];
+
+    return parts.length > 0;
+  }
+
+  get provisionPhase() {
+    const label = this?.status?.provisionPhase;
+    let color = '';
+    let icon = '';
+
+    switch (label) {
+    case 'Provisioned':
+      color = 'bg-success';
+      icon = 'icon-checkmark';
+      break;
+    case 'Unprovisioning':
+      color = 'bg-warning';
+      icon = 'icon-warning';
+      break;
+    case 'NotProvisioned':
+      color = 'bg-error';
+      icon = 'icon-warning';
+      break;
+    default:
+      break;
+    }
+
+    return {
+      label,
+      color,
+      icon,
+    };
+  }
+
+  get displayName() {
+    return this.status?.deviceStatus?.devPath || this?.metadata?.name;
+  }
+
+  get isFormatting() {
+    const conditions = this?.status?.conditions || [];
+    const formatting = conditions.find(c => c.type === 'Formatting') || {};
+
+    return formatting.status === 'True';
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.keypair.js b/pkg/harvester/models/harvesterhci.io.keypair.js
new file mode 100644
index 00000000..917f390b
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.keypair.js
@@ -0,0 +1,12 @@
+import { get } from '@shell/utils/object';
+import { findBy } from '@shell/utils/array';
+import HarvesterResource from './harvester';
+
+export default class HciKeypair extends HarvesterResource {
+  get stateDisplay() {
+    const conditions = get(this, 'status.conditions');
+    const status = (findBy(conditions, 'type', 'validated') || {}).status ;
+
+    return status === 'True' ? 'Validated' : 'Not Validated';
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.setting.js b/pkg/harvester/models/harvesterhci.io.setting.js
new file mode 100644
index 00000000..7ae1d288
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.setting.js
@@ -0,0 +1,158 @@
+import { findBy } from '@shell/utils/array';
+import { HCI } from '../types';
+import { HCI_ALLOWED_SETTINGS, HCI_SETTING } from '../config/settings';
+import HarvesterResource from './harvester';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+
+export default class HciSetting extends HarvesterResource {
+  get _availableActions() {
+    const toFilter = ['cloneYaml', 'download', 'goToEditYaml', 'goToViewYaml', 'goToViewConfig', 'promptRemove'];
+    const settingMetadata = HCI_ALLOWED_SETTINGS[this.id];
+
+    let out = super._availableActions;
+
+    // Some settings are not editable
+    if ( settingMetadata?.readOnly || this.fromEnv ) {
+      toFilter.push('goToEdit');
+    }
+
+    out = out.filter((action) => {
+      return (!toFilter.includes(action.action));
+    });
+
+    // Change the label on the first action (edit)
+    const editAction = out.find(action => action.action === 'goToEdit');
+
+    if (editAction) {
+      editAction.label = this.t('advancedSettings.edit.label');
+    }
+
+    const schema = this.$getters['schemaFor'](HCI.UPGRADE);
+    const hasUpgradeAccess = !!schema?.collectionMethods.find(x => ['post'].includes(x.toLowerCase()));
+
+    if (this.id === HCI_SETTING.SERVER_VERSION && hasUpgradeAccess) {
+      const latestUpgrade = this.$getters['all'](HCI.UPGRADE).find(upgrade => upgrade.isLatestUpgrade);
+
+      out.unshift({
+        action:   'goToAirgapUpgrade',
+        enabled:  true,
+        icon:     'icon icon-refresh',
+        label:    this.t('harvester.upgradePage.upgrade'),
+        disabled: !!latestUpgrade && !latestUpgrade?.isUpgradeSucceeded
+      });
+    }
+
+    return out;
+  }
+
+  goToAirgapUpgrade() {
+    const router = this.currentRouter();
+
+    router.push({
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-airgapupgrade`,
+      params: { cluster: this.$rootGetters['currentCluster'].id, product: 'harvester' },
+    });
+  }
+
+  get customValue() {
+    if (this.metadata.name === HCI_SETTING.STORAGE_NETWORK) {
+      try {
+        return JSON.stringify(JSON.parse(this.value), null, 2);
+      } catch (e) {}
+    }
+
+    return false;
+  }
+
+  get customFormatter() {
+    if (this.metadata.name === HCI_SETTING.STORAGE_NETWORK) {
+      try {
+        JSON.stringify(JSON.parse(this.value), null, 2);
+
+        return 'json';
+      } catch (e) {
+
+      }
+    }
+
+    return false;
+  }
+
+  get backupTargetIsEmpty() {
+    return !this.value;
+  }
+
+  get errMessage() {
+    const configuredCondition = findBy((this?.status?.conditions || []), 'type', 'configured') || {};
+
+    if (this.metadata?.state?.error === true) {
+      return this.metadata.state.message;
+    } else if (configuredCondition?.status === 'False') {
+      return configuredCondition.message;
+    } else {
+      return false;
+    }
+  }
+
+  get valueOrDefaultValue() {
+    return this.value || this.default;
+  }
+
+  get currentVersion() {
+    return this.value || '';
+  }
+
+  get displayValue() { // Select the field you want to display
+    if (this.id === 'backup-target') {
+      return this.parseValue?.endpoint || ' ';
+    }
+
+    return null;
+  }
+
+  get parseValue() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value);
+    } catch (err) {
+      parseDefaultValue = JSON.parse(this.default);
+    }
+
+    return parseDefaultValue;
+  }
+
+  get isS3() {
+    return this.parseValue.type === 's3';
+  }
+
+  get isNFS() {
+    return this.parseValue.type === 'nfs';
+  }
+
+  get customValidationRules() {
+    const id = this.id;
+
+    const out = [];
+
+    switch (id) {
+    case 'backup-target':
+      out.push( {
+        nullable:   false,
+        path:       'value',
+        type:       'string',
+        validators: ['backupTarget'],
+      });
+      break;
+    case 'ntp-servers':
+      out.push( {
+        nullable:   true,
+        path:       'value',
+        validators: ['ntpServers'],
+      });
+      break;
+    }
+
+    return out;
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.supportbundle.js b/pkg/harvester/models/harvesterhci.io.supportbundle.js
new file mode 100644
index 00000000..72af0f27
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.supportbundle.js
@@ -0,0 +1,35 @@
+import HarvesterResource from './harvester';
+
+export default class HciSupportBundle extends HarvesterResource {
+  get bundleState() {
+    const state = this?.status?.state;
+
+    // ready、generating
+    return state;
+  }
+
+  get bundleMessage() {
+    const state = this?.metadata?.state;
+
+    if (state.error) {
+      return state?.message;
+    }
+
+    return false;
+  }
+
+  get precent() {
+    return this?.status?.progress / 100 || 0;
+  }
+
+  get customValidationRules() {
+    return [
+      {
+        nullable:       false,
+        path:           'spec.description',
+        required:       true,
+        translationKey: 'harvester.modal.bundle.description',
+      },
+    ];
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.upgrade.js b/pkg/harvester/models/harvesterhci.io.upgrade.js
new file mode 100644
index 00000000..8c323c01
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.upgrade.js
@@ -0,0 +1,226 @@
+import jsyaml from 'js-yaml';
+import { NODE } from '@shell/config/types';
+import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import { HCI } from '@pkg/harvester/config/labels-annotations';
+import HarvesterResource from './harvester';
+
+export default class HciUpgrade extends HarvesterResource {
+  get isLatestUpgrade() {
+    return this?.metadata?.labels?.[HCI.LATEST_UPGRADE] === 'true';
+  }
+
+  get isUpgradeSucceeded() {
+    return this?.metadata?.labels?.[HCI.UPGRADE_STATE] === 'Succeeded';
+  }
+
+  get hasReadMessage() {
+    return this?.metadata?.labels?.[HCI.REAY_MESSAGE] === 'true';
+  }
+
+  get repoInfo() {
+    const repoInfo = this?.status?.repoInfo;
+
+    if (repoInfo) {
+      try {
+        return jsyaml.load(repoInfo);
+      } catch (e) {
+        return false;
+      }
+    }
+
+    return false;
+  }
+
+  get stateDisplay() {
+    const conditions = this?.status?.conditions || [];
+    const completedCondition = conditions.find( cond => cond.type === 'Completed');
+    const status = completedCondition?.status;
+
+    if (status === 'True') {
+      return 'Success';
+    } else if (status === 'False') {
+      return 'Fail';
+    } else {
+      return 'on-going';
+    }
+  }
+
+  get stateColor() {
+    return colorForState(this.stateDisplay);
+  }
+
+  get nodes() {
+    return this.$rootGetters['harvester/all'](NODE);
+  }
+
+  get upgradeImage() {
+    return this?.status?.imageID;
+  }
+
+  get upgradeMessage() {
+    const upgradeMessage = [];
+    const nodeStatuses = this?.status?.nodeStatuses || {};
+    const conditions = this?.status?.conditions || [];
+
+    for (const key in nodeStatuses) {
+      const state = nodeStatuses[key]?.state;
+
+      if (nodeStatuses[key] && state !== 'Succeeded' && state !== 'succeeded') {
+        upgradeMessage.push({
+          id:      key,
+          message: `The node ${ key } is ${ nodeStatuses[key]?.state }`
+        });
+      }
+    }
+
+    for (let i = 0; i < conditions.length; i++) {
+      const type = conditions[i].type;
+
+      if (type === 'systemServiceUpgraded' && conditions[i]?.status !== 'True') {
+        upgradeMessage.push({
+          id:      'systemService',
+          message: `The systemService is upgrading`
+        });
+      }
+    }
+
+    if (this.metadata?.state?.message && this.metadata?.state?.error) {
+      upgradeMessage.push({
+        id:      'message',
+        message: `${ this.metadata.state.message }`
+      });
+    }
+
+    return upgradeMessage;
+  }
+
+  get createRepo() {
+    const conditions = this?.status?.conditions || [];
+    const repoCondition = conditions.find( cond => cond.type === 'RepoReady');
+    const isReady = repoCondition?.status === 'True';
+
+    return {
+      isReady,
+      message: repoCondition?.message || repoCondition?.reason
+    };
+  }
+
+  get overallMessage() {
+    const conditions = this?.status?.conditions || [];
+    const completedCondition = conditions.find( cond => cond.type === 'Completed');
+    const hasError = completedCondition?.status === 'False';
+    const message = completedCondition?.message || completedCondition?.reason;
+
+    return hasError ? message : '';
+  }
+
+  get upgradeImageMessage() {
+    const conditions = this?.status?.conditions || [];
+    const imageReady = conditions.find( cond => cond.type === 'ImageReady');
+    const hasError = imageReady?.status === 'False';
+    const message = imageReady?.message || imageReady?.reason;
+
+    return hasError ? message : '';
+  }
+
+  get nodeUpgradeMessage() {
+    const message = [];
+    const nodeStatuses = this?.status?.nodeStatuses || {};
+
+    for (const key in nodeStatuses) {
+      const state = nodeStatuses[key]?.state;
+      const _message = nodeStatuses[key]?.message;
+
+      let percent = 0;
+
+      if (state === 'Upgrading') {
+        percent = 50;
+      } else if (state === 'Succeeded' || state === 'succeeded') {
+        percent = 100;
+      }
+
+      message.push({
+        name:    key,
+        state,
+        percent,
+        message: _message
+      });
+    }
+
+    for (const node of this.nodes) {
+      const hasNode = message.find( O => O.name === node.id);
+
+      if (!hasNode) {
+        message.push({
+          name:    node.id,
+          state:   'Pending',
+          percent: 0,
+        });
+      }
+    }
+
+    return message;
+  }
+
+  get nodeTotalPercent() {
+    let out = 0;
+
+    for (let i = 0; i < this.nodeUpgradeMessage.length; i++) {
+      out += this.nodeUpgradeMessage[i].percent;
+    }
+
+    out = Math.floor(out / this.nodeUpgradeMessage.length);
+    const conditions = this?.status?.conditions || [];
+    const nodeUpgradedCondition = conditions.find( cond => cond.type === 'NodesUpgraded');
+
+    if (out === 100 && !nodeUpgradedCondition) {
+      out = 99;
+    }
+
+    return out;
+  }
+
+  get sysServiceUpgradeMessage() {
+    let percent = 0;
+    let state = 'Pending';
+    const message = [];
+    const conditions = this?.status?.conditions || [];
+
+    for (let i = 0; i < conditions.length; i++) {
+      const type = conditions[i].type;
+
+      if (type === 'SystemServicesUpgraded') {
+        if (conditions[i].status === 'True') {
+          percent = 100;
+          state = 'Succeeded';
+        } else {
+          percent = 50;
+        }
+
+        message.push({
+          name:    'system services',
+          state,
+          percent,
+          message: conditions[i]?.message
+        });
+      }
+    }
+
+    if (message.length === 0) {
+      message.push({
+        name: 'system services',
+        state,
+        percent,
+      });
+    }
+
+    return message;
+  }
+
+  get totalPercent() {
+    const nodePercent = this.nodeTotalPercent * this.nodeUpgradeMessage.length;
+    const servicePercent = this.sysServiceUpgradeMessage?.[0].percent;
+
+    return Math.floor((nodePercent + servicePercent) / (this.nodeUpgradeMessage.length + 1));
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.upgradelog.js b/pkg/harvester/models/harvesterhci.io.upgradelog.js
new file mode 100644
index 00000000..31bd4b3d
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.upgradelog.js
@@ -0,0 +1,54 @@
+import { get } from '@shell/utils/object';
+import { HCI } from '../types';
+import Parse from 'url-parse';
+import { findBy } from '@shell/utils/array';
+import HarvesterResource from './harvester';
+
+export default class HciUpgradeLog extends HarvesterResource {
+  get canStartedDownload() {
+    const conditions = get(this, 'status.conditions');
+    const status = (findBy(conditions, 'type', 'DownloadReady') || {}).status ;
+
+    return status === 'True';
+  }
+
+  downloadLog(filename) {
+    const parse = Parse(window.history.href);
+    const clusterId = this.$rootGetters['clusterId'];
+    const prefix = `/k8s/clusters/${ clusterId }`;
+
+    if (this.$rootGetters['isMultiCluster']) {
+      window.location.href = `${ parse.origin }${ prefix }/v1/harvester/${ HCI.UPGRADE_LOG }s/${ this.id }/download?archiveName=${ filename }`;
+    } else {
+      window.location.href = `${ parse.origin }/v1/harvester/${ HCI.UPGRADE_LOG }s/${ this.id }/download?archiveName=${ filename }`;
+    }
+  }
+
+  fileIsReady(filename) {
+    const fileArchive = (this.status?.archives || {})[filename];
+
+    return fileArchive?.ready === true || fileArchive?.reason;
+  }
+
+  downloadArchivesStatus(filename) {
+    return (this.status?.archives || {})[filename]?.reason;
+  }
+
+  get latestArchivesFileName() {
+    const archives = this.status?.archives || {};
+    const fileNamePrefix = `${ this.metadata.name }-archive-`;
+    const fileNames = Object.keys(archives).map((filename) => {
+      return filename.replace(fileNamePrefix, '');
+    });
+    const latestFileName = fileNames.sort((a, b) => {
+      const _a = a.replace(/(\d{2})-(\d{2})-(\d{2})T(\d{2})-(\d{2})-(\d{2})Z/, '$1-$2-$3T$4:$5:$6Z');
+      const _b = b.replace(/(\d{2})-(\d{2})-(\d{2})T(\d{2})-(\d{2})-(\d{2})Z/, '$1-$2-$3T$4:$5:$6Z');
+
+      return Date.parse(_b) - Date.parse(_a);
+    }).map((filename) => {
+      return `${ fileNamePrefix }${ filename }`;
+    });
+
+    return latestFileName[0];
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.virtualmachinebackup.js b/pkg/harvester/models/harvesterhci.io.virtualmachinebackup.js
new file mode 100644
index 00000000..995fda03
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.virtualmachinebackup.js
@@ -0,0 +1,161 @@
+import { get, clone } from '@shell/utils/object';
+import { findBy } from '@shell/utils/array';
+import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import { _CREATE } from '@shell/config/query-params';
+import { HCI } from '../types';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+import { BACKUP_TYPE } from '../config/types';
+import HarvesterResource from './harvester';
+
+export default class HciVmBackup extends HarvesterResource {
+  detailPageHeaderActionOverride(realMode) {
+    const route = this.currentRoute();
+
+    if (realMode === _CREATE) {
+      return route.params.resource === HCI.BACKUP ? this.t('harvester.backup.title') : this.t('harvester.vmSnapshot.title');
+    }
+  }
+
+  get detailLocation() {
+    const detailLocation = clone(this._detailLocation);
+    const route = this.currentRoute();
+
+    detailLocation.params.resource = route.params.resource;
+
+    return detailLocation;
+  }
+
+  get doneOverride() {
+    const route = this.currentRoute();
+    const detailLocation = clone(this._detailLocation);
+
+    delete detailLocation.params.namespace;
+    delete detailLocation.params.id;
+    detailLocation.params.resource = route.params.resource;
+    detailLocation.name = `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+
+    return detailLocation;
+  }
+
+  get parentNameOverride() {
+    const route = this.currentRoute();
+
+    return this.$rootGetters['i18n/t'](`typeLabel."${ route.params.resource }"`, { count: 1 })?.trim();
+  }
+
+  get parentLocationOverride() {
+    return this.doneOverride;
+  }
+
+  get _availableActions() {
+    const toFilter = ['goToEdit', 'cloneYaml', 'goToClone', 'download'];
+
+    const out = super._availableActions.filter((action) => {
+      if (!toFilter.includes(action.action)) {
+        return action;
+      }
+    });
+
+    const schema = this.$getters['schemaFor'](HCI.VM);
+    let canCreateVM = true;
+
+    if ( schema && !schema?.collectionMethods.find(x => ['post'].includes(x.toLowerCase())) ) {
+      canCreateVM = false;
+    }
+
+    return [
+      {
+        action:  'restoreExistingVM',
+        enabled: canCreateVM && this.attachVmExisting && this?.status?.readyToUse,
+        icon:    'icons icon-refresh',
+        label:   this.t('harvester.action.restoreExistingVM'),
+      },
+      {
+        action:  'restoreNewVM',
+        enabled: canCreateVM && this?.status?.readyToUse,
+        icon:    'icons icon-backup',
+        label:   this.t('harvester.action.restoreNewVM'),
+      },
+      ...out
+    ];
+  }
+
+  restoreExistingVM(resource = this) {
+    const route = this.currentRoute();
+    const router = this.currentRouter();
+
+    router.push({
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+      params: { resource: route.params.resource },
+      query:  { restoreMode: 'existing', resourceName: resource.name }
+    });
+  }
+
+  restoreNewVM(resource = this) {
+    const route = this.currentRoute();
+    const router = this.currentRouter();
+
+    router.push({
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+      params: { resource: route.params.resource },
+      query:  { restoreMode: 'new', resourceName: resource.name }
+    });
+  }
+
+  get state() {
+    let out = 'Pending';
+    const conditions = get(this, 'status.conditions');
+    const isProgress = findBy(conditions, 'type', 'InProgress')?.status === 'True';
+    const isReady = findBy(conditions, 'type', 'Ready')?.status === 'True';
+
+    if (this?.status?.readyToUse) {
+      out = 'Ready';
+    } else if (isProgress) {
+      out = 'Progressing';
+    } else if (!isReady) {
+      out = 'error';
+    }
+
+    return out;
+  }
+
+  get stateColor() {
+    const state = this.state;
+
+    return colorForState(state);
+  }
+
+  get attachVM() {
+    return this.spec.source.name;
+  }
+
+  get backupContentName() {
+    return this?.status?.virtualMachineBackupContentName || '';
+  }
+
+  get backupProgress() {
+    return {
+      type:       BACKUP_TYPE.BACKUP,
+      percentage: this.status?.progress === undefined && !this.status?.readyToUse ? 0 : this.status?.progress,
+      details:    { volumes: this.status?.volumeBackups }
+    };
+  }
+
+  get backupTarget() {
+    return this?.status?.backupTarget?.endpoint || '';
+  }
+
+  get attachVmExisting() {
+    const vmList = this.$rootGetters['harvester/all'](HCI.VM);
+
+    return !!vmList.find( V => V.metadata.name === this.attachVM);
+  }
+
+  remove() {
+    const opt = { ...arguments };
+
+    opt.params = { propagationPolicy: 'Foreground' };
+
+    return this._remove(opt);
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.virtualmachineimage.js b/pkg/harvester/models/harvesterhci.io.virtualmachineimage.js
new file mode 100644
index 00000000..47d9cb2e
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.virtualmachineimage.js
@@ -0,0 +1,296 @@
+import Vue from 'vue';
+import { HCI } from '../types';
+import {
+  DESCRIPTION,
+  ANNOTATIONS_TO_IGNORE_REGEX,
+} from '@shell/config/labels-annotations';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { get, clone } from '@shell/utils/object';
+import { formatSi } from '@shell/utils/units';
+import { ucFirst } from '@shell/utils/string';
+import { stateDisplay, colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import { _CLONE } from '@shell/config/query-params';
+import HarvesterResource from './harvester';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+
+function isReady() {
+  function getStatusConditionOfType(type, defaultValue = []) {
+    const conditions = Array.isArray(get(this, 'status.conditions')) ? this.status.conditions : defaultValue;
+
+    return conditions.find( cond => cond.type === type);
+  }
+
+  const initialized = getStatusConditionOfType.call(this, 'Initialized');
+  const imported = getStatusConditionOfType.call(this, 'Imported');
+  const isCompleted = this.status?.progress === 100;
+
+  if ([initialized?.status, imported?.status].includes('False')) {
+    return false;
+  } else {
+    return isCompleted && true;
+  }
+}
+export default class HciVmImage extends HarvesterResource {
+  get availableActions() {
+    let out = super._availableActions;
+    const toFilter = ['goToEditYaml'];
+
+    out = out.filter( A => !toFilter.includes(A.action));
+
+    const schema = this.$getters['schemaFor'](HCI.VM);
+    let canCreateVM = true;
+
+    if ( schema && !schema?.collectionMethods.find(x => ['post'].includes(x.toLowerCase())) ) {
+      canCreateVM = false;
+    }
+
+    return [
+      {
+        action:   'createFromImage',
+        enabled:  canCreateVM,
+        icon:     'icon icon-fw icon-spinner',
+        label:    this.t('harvester.action.createVM'),
+        disabled: !this.isReady,
+      },
+      {
+        action:  'download',
+        enabled: this.links?.download,
+        icon:    'icon icon-download',
+        label:   this.t('asyncButton.download.action'),
+      },
+      ...out
+    ];
+  }
+
+  applyDefaults(resources = this, realMode) {
+    if (realMode !== _CLONE) {
+      Vue.set(this.metadata, 'labels', { [HCI_ANNOTATIONS.OS_TYPE]: '', [HCI_ANNOTATIONS.IMAGE_SUFFIX]: '' });
+      Vue.set(this.metadata, 'annotations', { [HCI_ANNOTATIONS.STORAGE_CLASS]: '' });
+    }
+  }
+
+  createFromImage() {
+    const router = this.currentRouter();
+
+    router.push({
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+      params: { resource: HCI.VM },
+      query:  { image: this.id }
+    });
+  }
+
+  cleanForNew() {
+    this.$dispatch(`cleanForNew`, this);
+
+    delete this.spec.displayName;
+  }
+
+  get nameDisplay() {
+    return this.spec?.displayName;
+  }
+
+  get isOSImage() {
+    return this?.metadata?.annotations?.[HCI_ANNOTATIONS.OS_UPGRADE_IMAGE] === 'True';
+  }
+
+  get isReady() {
+    return isReady.call(this);
+  }
+
+  get stateDisplay() {
+    const initialized = this.getStatusConditionOfType('Initialized');
+    const imported = this.getStatusConditionOfType('Imported');
+
+    if (imported?.status === 'Unknown') {
+      if (this.spec.sourceType === 'download') {
+        return 'Downloading';
+      }
+
+      if (this.spec.sourceType === 'upload') {
+        if (this.uploadError) {
+          return 'Failed';
+        }
+
+        return 'Uploading';
+      }
+
+      return 'Exporting';
+    }
+
+    if (initialized?.message || imported?.message) {
+      return 'Failed';
+    }
+
+    return stateDisplay(this.metadata.state.name);
+  }
+
+  get imageMessage() {
+    if (this.uploadError) {
+      return ucFirst(this.uploadError);
+    }
+
+    const conditions = this?.status?.conditions || [];
+    const initialized = conditions.find( cond => cond.type === 'Initialized');
+    const imported = conditions.find( cond => cond.type === 'Imported');
+    const message = initialized?.message || imported?.message;
+
+    return ucFirst(message);
+  }
+
+  get stateBackground() {
+    return colorForState(this.stateDisplay).replace('text-', 'bg-');
+  }
+
+  get imageSource() {
+    return get(this, `spec.sourceType`) || 'download';
+  }
+
+  get progress() {
+    return this?.status?.progress || 0;
+  }
+
+  get annotationsToIgnoreRegexes() {
+    return [DESCRIPTION].concat(ANNOTATIONS_TO_IGNORE_REGEX);
+  }
+
+  get downSize() {
+    const size = this.status?.size;
+
+    if (!size) {
+      return '-';
+    }
+
+    return formatSi(size, {
+      increment:    1024,
+      maxPrecision: 2,
+      suffix:       'B',
+      firstSuffix:  'B',
+    });
+  }
+
+  getStatusConditionOfType(type, defaultValue = []) {
+    const conditions = Array.isArray(get(this, 'status.conditions')) ? this.status.conditions : defaultValue;
+
+    return conditions.find( cond => cond.type === type);
+  }
+
+  get stateObj() {
+    const state = clone(this.metadata?.state);
+    const initialized = this.getStatusConditionOfType('Initialized');
+    const imported = this.getStatusConditionOfType('Imported');
+
+    if ([initialized?.status, imported?.status].includes('False') || this.uploadError) {
+      state.error = true;
+    }
+
+    return state;
+  }
+
+  get stateDescription() {
+    return this.imageMessage;
+  }
+
+  get displayName() {
+    return this.spec?.displayName;
+  }
+
+  get storageClassName() {
+    return this.status?.storageClassName || '';
+  }
+
+  get uploadImage() {
+    return async(file) => {
+      const formData = new FormData();
+
+      formData.append('chunk', file);
+
+      try {
+        this.$ctx.commit('harvester-common/uploadStart', this.metadata.name, { root: true });
+
+        await this.doAction('upload', formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+            'File-Size':    file.size,
+          },
+          params: { size: file.size },
+        });
+      } catch (err) {
+        this.$ctx.commit('harvester-common/uploadError', { name: this.name, message: err.message }, { root: true });
+
+        this.$ctx.commit('harvester-common/uploadEnd', this.metadata.name, { root: true });
+
+        return Promise.reject(err);
+      }
+
+      this.$ctx.commit('harvester-common/uploadEnd', this.metadata.name, { root: true });
+    };
+  }
+
+  get uploadError() {
+    return this.$rootGetters['harvester-common/uploadingImageError'](this.name);
+  }
+
+  get imageSuffix() {
+    return this.metadata?.labels?.[HCI_ANNOTATIONS.IMAGE_SUFFIX];
+  }
+
+  get imageOSType() {
+    return this.metadata?.labels?.[HCI_ANNOTATIONS.OS_TYPE];
+  }
+
+  get customValidationRules() {
+    const out = [];
+
+    if (this.imageSource === 'download') {
+      const urlFormat = {
+        nullable:   false,
+        path:       'spec.url',
+        validators: ['imageUrl'],
+      };
+
+      const urlRequired = {
+        nullable:       false,
+        path:           'spec.url',
+        required:       true,
+        translationKey: 'harvester.image.url'
+      };
+
+      out.push(urlFormat, urlRequired);
+    }
+
+    if (this.imageSource === 'upload') {
+      const fileRequired = {
+        nullable:   false,
+        path:       'metadata.annotations',
+        validators: ['fileRequired'],
+      };
+
+      out.push(fileRequired);
+    }
+
+    if (this.spec?.checksum?.length) {
+      const checksumFormat = {
+        path:       'spec.checksum',
+        validators: ['hashSHA512'],
+      };
+
+      out.push(checksumFormat);
+    }
+
+    return [
+      {
+        nullable:       false,
+        path:           'spec.displayName',
+        required:       true,
+        minLength:      1,
+        maxLength:      63,
+        translationKey: 'generic.name',
+      },
+      ...out
+    ];
+  }
+
+  download() {
+    window.location.href = this.links.download;
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.virtualmachinerestore.js b/pkg/harvester/models/harvesterhci.io.virtualmachinerestore.js
new file mode 100644
index 00000000..7e40c386
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.virtualmachinerestore.js
@@ -0,0 +1,43 @@
+import HarvesterResource from './harvester';
+
+export default class HciVmRestore extends HarvesterResource {
+  get isComplete() {
+    return this?.status?.complete || false;
+  }
+
+  get pvcNames() {
+    const restores = this?.status?.restores || [];
+    const out = restores.map( O => O?.persistentVolumeClaimSpec?.name);
+
+    return out;
+  }
+
+  get customValidationRules() {
+    const isNew = this.spec?.newVM;
+
+    const rules = [{
+      nullable:       false,
+      path:           'spec.target.name',
+      required:       true,
+      minLength:      1,
+      maxLength:      63,
+      translationKey: 'harvester.fields.virtualName',
+    }, {
+      nullable:       false,
+      path:           'spec.virtualMachineBackupName',
+      required:       true,
+      translationKey: 'harvester.backup.restore.backup',
+    }];
+
+    if (!isNew) {
+      rules.push({
+        path:           'spec.deletionPolicy',
+        required:       true,
+        type:           'string',
+        translationKey: 'harvester.backup.restore.deletePreviousVolumes',
+      });
+    }
+
+    return rules;
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.virtualmachinetemplate.js b/pkg/harvester/models/harvesterhci.io.virtualmachinetemplate.js
new file mode 100644
index 00000000..8506f15a
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.virtualmachinetemplate.js
@@ -0,0 +1,70 @@
+import { HCI } from '../types';
+import { MODE, _CREATE } from '@shell/config/query-params';
+import HarvesterResource from './harvester';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+
+export default class HciVmTemplate extends HarvesterResource {
+  get availableActions() {
+    const toFilter = ['goToEdit', 'cloneYaml', 'goToClone', 'goToEditYaml', 'download'];
+
+    const out = super._availableActions.filter((action) => {
+      if (action.altAction === 'remove') {
+        action.bulkable = false;
+      }
+
+      if (!toFilter.includes(action.action)) {
+        return action;
+      }
+    });
+
+    const schema = this.$getters['schemaFor'](HCI.VM);
+    let canCreateVM = true;
+
+    if ( schema && !schema?.collectionMethods.find(x => ['post'].includes(x.toLowerCase())) ) {
+      canCreateVM = false;
+    }
+
+    return [
+      {
+        action:  'createFromTemplate',
+        enabled: canCreateVM,
+        icon:    'icon icon-spinner',
+        label:   this.t('harvester.action.createVM'),
+      },
+      {
+        action:  'addVersion',
+        enabled: this.canCreate,
+        icon:    'icon icon-fw icon-circle-plus',
+        label:   this.t('harvester.action.addTemplateVersion'),
+      },
+      ...out
+    ];
+  }
+
+  createFromTemplate() {
+    const router = this.currentRouter();
+
+    router.push({
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+      params: { resource: HCI.VM },
+      query:  { templateId: this.id, versionId: this.spec.defaultVersionId }
+    });
+  }
+
+  addVersion(moreQuery = {}) {
+    const router = this.currentRouter();
+
+    router.push({
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+      params: { resource: HCI.VM_VERSION },
+      query:  {
+        [MODE]:     _CREATE,
+        templateId: this.id
+      }
+    });
+  }
+
+  get defaultVersion() {
+    return this.status?.defaultVersion;
+  }
+}
diff --git a/pkg/harvester/models/harvesterhci.io.virtualmachinetemplateversion.js b/pkg/harvester/models/harvesterhci.io.virtualmachinetemplateversion.js
new file mode 100644
index 00000000..19aa63a2
--- /dev/null
+++ b/pkg/harvester/models/harvesterhci.io.virtualmachinetemplateversion.js
@@ -0,0 +1,277 @@
+import Vue from 'vue';
+import { find, pickBy, omitBy } from 'lodash';
+import { HCI } from '../types';
+import {
+  AS, MODE, _VIEW, _CONFIG, _UNFLAG, _EDIT
+} from '@shell/config/query-params';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import HarvesterResource from './harvester';
+import { findBy } from '@shell/utils/array';
+import { get, set } from '@shell/utils/object';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import { LABELS_TO_IGNORE_REGEX } from '@shell/config/labels-annotations';
+import { matchesSomeRegex } from '@shell/utils/string';
+
+export default class HciVmTemplateVersion extends HarvesterResource {
+  get availableActions() {
+    let out = super._availableActions;
+    const toFilter = ['goToClone', 'cloneYaml', 'goToViewConfig', 'goToEditYaml', 'goToViewYaml'];
+
+    out = out.filter((action) => {
+      if (!toFilter.includes(action.action)) {
+        return action;
+      }
+    });
+
+    const schema = this.$getters['schemaFor'](HCI.VM);
+    let canCreateVM = true;
+
+    if ( schema && !schema?.collectionMethods.find(x => ['post'].includes(x.toLowerCase())) ) {
+      canCreateVM = false;
+    }
+
+    return [
+      {
+        action:   'launchFromTemplate',
+        icon:     'icon icon-spinner',
+        disabled: !canCreateVM || !this.isReady,
+        label:    this.t('harvester.action.launchFormTemplate'),
+      },
+      {
+        action:  'cloneTemplate',
+        enabled: this.currentTemplate?.canCreate,
+        icon:    'icon icon-fw icon-edit',
+        label:   this.t('harvester.action.modifyTemplate'),
+      },
+      {
+        action:  'setDefaultVersion',
+        enabled: this.currentTemplate?.canCreate,
+        icon:    'icon icon-fw icon-checkmark',
+        label:   this.t('harvester.action.setDefaultVersion'),
+      },
+      {
+        action: 'goToViewConfig',
+        label:  this.t('action.view'),
+        icon:   'icon icon-edit',
+      },
+      ...out
+    ];
+  }
+
+  applyDefaults() {
+    const spec = {
+      vm: {
+        metadata: { annotations: { [HCI_ANNOTATIONS.VOLUME_CLAIM_TEMPLATE]: '[]' } },
+        spec:     {
+          runStrategy: 'RerunOnFailure',
+          template:    {
+            metadata: { annotations: {} },
+            spec:     {
+              domain: {
+                machine: { type: '' },
+                cpu:     {
+                  cores:   null,
+                  sockets: 1,
+                  threads: 1
+                },
+                devices: {
+                  inputs: [{
+                    bus:  'usb',
+                    name: 'tablet',
+                    type: 'tablet'
+                  }],
+                  interfaces: [{
+                    masquerade: {},
+                    model:      'virtio',
+                    name:       'default'
+                  }],
+                  disks: [],
+                },
+                resources: {
+                  limits: {
+                    memory: null,
+                    cpu:    ''
+                  }
+                },
+                features: { acpi: { enabled: true } },
+              },
+              evictionStrategy: 'LiveMigrateIfPossible',
+              hostname:         '',
+              networks:         [{
+                name: 'default',
+                pod:  {}
+              }],
+              volumes:  [],
+              affinity: {},
+            }
+          }
+        }
+      }
+    };
+
+    Vue.set(this, 'spec', spec);
+  }
+
+  get canDelete() {
+    return this.hasLink('remove') && this.$rootGetters['type-map/optionsFor'](this.type).isRemovable && !this.isDefaultVersion;
+  }
+
+  get template() {
+    return this.$rootGetters['harvester/all'](HCI.VM_TEMPLATE).find((T) => {
+      return T.id === this.spec.templateId;
+    });
+  }
+
+  get isReady() {
+    const conditions = get(this, 'status.conditions');
+    const readyCondition = findBy(conditions, 'type', 'ready');
+
+    // Compatibility processing
+    return readyCondition ? readyCondition?.status === 'True' : true;
+  }
+
+  get stateDisplay() {
+    if (this.isReady) {
+      return 'Active';
+    } else {
+      return 'Not Ready';
+    }
+  }
+
+  get stateColor() {
+    const state = this.stateDisplay;
+
+    return colorForState(state);
+  }
+
+  get version() {
+    return this?.status?.version;
+  }
+
+  get templates() {
+    return this.$rootGetters['harvester/all'](HCI.VM_TEMPLATE);
+  }
+
+  get machineType() {
+    return this.vm?.spec?.template?.spec?.domain?.machine?.type || '';
+  }
+
+  get templateId() {
+    return this.spec.templateId;
+  }
+
+  launchFromTemplate() {
+    const templateResource = this.currentTemplate;
+    const templateId = templateResource.id;
+    const launchVersion = this.id;
+    const router = this.currentRouter();
+
+    router.push({
+      name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+      params: { resource: HCI.VM },
+      query:  { templateId, versionId: launchVersion }
+    });
+  }
+
+  cloneTemplate(moreQuery = {}) {
+    const location = this.detailLocation;
+
+    location.query = {
+      ...location.query,
+      [MODE]: _EDIT,
+      [AS]:   _UNFLAG,
+      ...moreQuery
+    };
+
+    this.currentRouter().push(location);
+  }
+
+  goToViewConfig(moreQuery = {}) {
+    const location = this.detailLocation;
+
+    location.query = {
+      ...location.query,
+      [MODE]:     _VIEW,
+      [AS]:       _CONFIG,
+      templateId: this.templateId,
+      ...moreQuery
+    };
+
+    this.currentRouter().push(location);
+  }
+
+  get currentTemplate() {
+    return find(this.templates, T => T.id === this.templateId);
+  }
+
+  async setDefaultVersion(moreQuery = {}) {
+    const templateResource = this.currentTemplate;
+
+    templateResource.spec.defaultVersionId = this.id;
+    await templateResource.save();
+  }
+
+  get defaultVersion() {
+    const templates = this.$rootGetters['harvester/all'](HCI.VM_TEMPLATE);
+    const template = templates.find(T => this.templateId === T.id);
+
+    return template?.status?.defaultVersion;
+  }
+
+  get isDefaultVersion() {
+    return this.defaultVersion === this?.status?.version;
+  }
+
+  get customValidationRules() {
+    const rules = [
+      // {
+      //   nullable:       false,
+      //   path:           'spec.vm.spec.template.spec.domain.cpu.cores',
+      //   min:            1,
+      //   max:            100,
+      //   required:       true,
+      //   translationKey: 'harvester.fields.cpu',
+      // },
+      // {
+      //   nullable:       false,
+      //   path:           'spec.vm.spec.template.spec.domain.resources.requests.memory',
+      //   required:       false,
+      //   translationKey: 'harvester.fields.memory',
+      // },
+      // {
+      //   nullable:       false,
+      //   path:           'spec.vm.spec.template.spec',
+      //   validators:     ['vmNetworks'],
+      // },
+      // {
+      //   nullable:       false,
+      //   path:           'spec.vm.spec',
+      //   validators:     ['vmDisks:isVMTemplate'],
+      // },
+    ];
+
+    return rules;
+  }
+
+  get instanceLabels() {
+    const all = this.spec?.vm?.spec?.template?.metadata?.labels || {};
+
+    return omitBy(all, (value, key) => {
+      return matchesSomeRegex(key, LABELS_TO_IGNORE_REGEX);
+    });
+  }
+
+  setInstanceLabels(val) {
+    if ( !this.spec?.vm?.spec?.template?.metadata?.labels ) {
+      set(this, 'spec.vm.spec.template.metadata.labels', {});
+    }
+
+    const all = this.spec.vm.spec.template.metadata.labels || {};
+    const wasIgnored = pickBy(all, (value, key) => {
+      return matchesSomeRegex(key, LABELS_TO_IGNORE_REGEX);
+    });
+
+    Vue.set(this.spec.vm.spec.template.metadata, 'labels', { ...wasIgnored, ...val });
+  }
+}
diff --git a/pkg/harvester/models/k8s.cni.cncf.io.networkattachmentdefinition.js b/pkg/harvester/models/k8s.cni.cncf.io.networkattachmentdefinition.js
new file mode 100644
index 00000000..0af171bf
--- /dev/null
+++ b/pkg/harvester/models/k8s.cni.cncf.io.networkattachmentdefinition.js
@@ -0,0 +1,89 @@
+import Vue from 'vue';
+import SteveModel from '@shell/plugins/steve/steve-class';
+import { HCI } from '@shell/config/labels-annotations';
+
+export default class NetworkAttachmentDef extends SteveModel {
+  applyDefaults() {
+    const spec = this.spec || {
+      config: JSON.stringify({
+        cniVersion:  '0.3.1',
+        name:        '',
+        type:        'bridge',
+        bridge:      '',
+        promiscMode: true,
+        vlan:        '',
+        ipam:        {}
+      })
+    };
+
+    Vue.set(this, 'spec', spec);
+  }
+
+  get parseConfig() {
+    try {
+      return JSON.parse(this.spec.config) || {};
+    } catch (err) {
+      return {};
+    }
+  }
+
+  get isIpamStatic() {
+    return this.parseConfig.ipam?.type === 'static';
+  }
+
+  get clusterNetwork() {
+    return this?.metadata?.labels?.[HCI.CLUSTER_NETWORK];
+  }
+
+  get vlanType() {
+    const labels = this.metadata?.labels || {};
+    const type = labels[HCI.NETWORK_TYPE];
+
+    return type;
+  }
+
+  get vlanId() {
+    return this.vlanType === 'UntaggedNetwork' ? 'N/A' : this.parseConfig.vlan;
+  }
+
+  get customValidationRules() {
+    const rules = [
+      {
+        nullable:       false,
+        path:           'metadata.name',
+        required:       true,
+        minLength:      1,
+        maxLength:      63,
+        translationKey: 'harvester.fields.name'
+      }
+    ];
+
+    return rules;
+  }
+
+  get connectivity() {
+    const annotations = this.metadata?.annotations || {};
+    const route = annotations[HCI.NETWORK_ROUTE];
+    let config = {};
+
+    if (this.vlanType === 'UntaggedNetwork') {
+      return 'N/A';
+    }
+
+    try {
+      config = JSON.parse(route || '{}');
+    } catch {
+      return 'invalid';
+    }
+
+    const connectivity = config.connectivity;
+
+    if (connectivity === 'false') {
+      return 'inactive';
+    } else if (connectivity === 'true') {
+      return 'active';
+    } else {
+      return connectivity;
+    }
+  }
+}
diff --git a/pkg/harvester/models/kubevirt.io.virtualmachine.js b/pkg/harvester/models/kubevirt.io.virtualmachine.js
new file mode 100644
index 00000000..e5044945
--- /dev/null
+++ b/pkg/harvester/models/kubevirt.io.virtualmachine.js
@@ -0,0 +1,1062 @@
+import Vue from 'vue';
+import { load } from 'js-yaml';
+import { omitBy, pickBy } from 'lodash';
+
+import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import { POD, NODE, PVC } from '@shell/config/types';
+import { HCI } from '../types';
+import { findBy } from '@shell/utils/array';
+import { parseSi } from '@shell/utils/units';
+import { get, set } from '@shell/utils/object';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { _CLONE } from '@shell/config/query-params';
+import HarvesterResource from './harvester';
+import { matchesSomeRegex } from '@shell/utils/string';
+import { LABELS_TO_IGNORE_REGEX } from '@shell/config/labels-annotations';
+import { BACKUP_TYPE } from '../config/types';
+import { parseVolumeClaimTemplates } from '@pkg/utils/vm';
+
+export const OFF = 'Off';
+
+const VMI_WAITING_MESSAGE =
+  'The virtual machine is waiting for resources to become available.';
+const VM_ERROR = 'VM error';
+const STOPPING = 'Stopping';
+const UNSCHEDULABLE = 'Unschedulable';
+const WAITING = 'Waiting';
+const NOT_READY = 'Not Ready';
+const AGENT_CONNECTED = 'AgentConnected';
+
+const PAUSED = 'Paused';
+const PAUSED_VM_MODAL_MESSAGE =
+  'This VM has been paused. If you wish to unpause it, please click the Unpause button below. For further details, please check with your system administrator.';
+
+const POD_STATUS_NOT_SCHEDULABLE = 'POD_NOT_SCHEDULABLE';
+const POD_STATUS_CONTAINER_FAILING = 'POD_CONTAINER_FAILING';
+// eslint-disable-next-line no-unused-vars
+const POD_STATUS_NOT_READY = 'POD_NOT_READY';
+
+const POD_STATUS_FAILED = 'POD_FAILED';
+const POD_STATUS_CRASHLOOP_BACKOFF = 'POD_CRASHLOOP_BACKOFF';
+const POD_STATUS_UNKNOWN = 'POD_STATUS_UNKNOWN';
+
+const POD_STATUS_ALL_ERROR = [
+  POD_STATUS_NOT_SCHEDULABLE,
+  POD_STATUS_CONTAINER_FAILING,
+  POD_STATUS_FAILED,
+  POD_STATUS_CRASHLOOP_BACKOFF,
+  POD_STATUS_UNKNOWN
+];
+
+const POD_STATUS_COMPLETED = 'POD_STATUS_COMPLETED';
+const POD_STATUS_SUCCEEDED = 'POD_STATUS_SUCCEEDED';
+const POD_STATUS_RUNNING = 'POD_STATUS_RUNNING';
+
+const POD_STATUS_ALL_READY = [
+  POD_STATUS_RUNNING,
+  POD_STATUS_COMPLETED,
+  POD_STATUS_SUCCEEDED
+];
+
+const RunStrategy = {
+  Always:         'Always',
+  RerunOnFailure: 'RerunOnFailure',
+  Halted:         'Halted',
+  Manual:         'Manual'
+};
+
+const StateChangeRequest = {
+  Start: 'Start',
+  Stop:  'Stop'
+};
+
+const STARTING_MESSAGE =
+  'This virtual machine will start shortly. Preparing storage, networking, and compute resources.';
+
+const VMIPhase = {
+  Pending:    'Pending',
+  Scheduling: 'Scheduling',
+  Scheduled:  'Scheduled',
+  Running:    'Running',
+  Succeeded:  'Succeeded',
+  Failed:     'Failed',
+  Unknown:    'Unknown'
+};
+
+let productInStore;
+
+const IgnoreMessages = ['pod has unbound immediate PersistentVolumeClaims'];
+
+export default class VirtVm extends HarvesterResource {
+  get availableActions() {
+    const out = super._availableActions;
+
+    const clone = out.find(action => action.action === 'goToClone');
+
+    if (clone) {
+      clone.action = 'goToCloneVM';
+    }
+
+    return [
+      {
+        action:   'stopVM',
+        enabled:  !!this.actions?.stop,
+        icon:     'icon icon-close',
+        label:    this.t('harvester.action.stop'),
+        bulkable: true
+      },
+      {
+        action:   'forceStop',
+        enabled:  !!this.actions?.forceStop,
+        icon:     'icon icon-close',
+        label:    this.t('harvester.action.forceStop'),
+        bulkable: true
+      },
+      {
+        action:  'pauseVM',
+        enabled: !!this.actions?.pause,
+        icon:    'icon icon-pause',
+        label:   this.t('harvester.action.pause')
+      },
+      {
+        action:  'unpauseVM',
+        enabled: !!this.actions?.unpause,
+        icon:    'icon icon-spinner',
+        label:   this.t('harvester.action.unpause')
+      },
+      {
+        action:   'restartVM',
+        enabled:  !!this.actions?.restart,
+        icon:     'icon icon-refresh',
+        label:    this.t('harvester.action.restart'),
+        bulkable: true
+      },
+      {
+        action:  'softrebootVM',
+        enabled: !!this.actions?.softreboot,
+        icon:    'icon icon-refresh',
+        label:   this.t('harvester.action.softreboot')
+      },
+      {
+        action:   'startVM',
+        enabled:  !!this.actions?.start,
+        icon:     'icon icon-play',
+        label:    this.t('harvester.action.start'),
+        bulkable: true
+      },
+      {
+        action:  'backupVM',
+        enabled: !!this.actions?.backup,
+        icon:    'icon icon-backup',
+        label:   this.t('harvester.action.backup')
+      },
+      {
+        action:  'takeVMSnapshot',
+        enabled: !!this.actions?.backup,
+        icon:    'icon icon-backup',
+        label:   this.t('harvester.action.vmSnapshot')
+      },
+      {
+        action:  'restoreVM',
+        enabled: !!this.actions?.restore,
+        icon:    'icon icon-backup-restore',
+        label:   this.t('harvester.action.restore')
+      },
+      {
+        action:  'ejectCDROM',
+        enabled: !!this.actions?.ejectCdRom,
+        icon:    'icon icon-delete',
+        label:   this.t('harvester.action.ejectCDROM')
+      },
+      {
+        action:  'migrateVM',
+        enabled: !!this.actions?.migrate,
+        icon:    'icon icon-copy',
+        label:   this.t('harvester.action.migrate')
+      },
+      {
+        action:  'abortMigrationVM',
+        enabled: !!this.actions?.abortMigration,
+        icon:    'icon icon-close',
+        label:   this.t('harvester.action.abortMigration')
+      },
+      {
+        action:  'addHotplug',
+        enabled: !!this.actions?.addVolume,
+        icon:    'icon icon-plus',
+        label:   this.t('harvester.action.addHotplug')
+      },
+      {
+        action:  'createTemplate',
+        enabled: !!this.actions?.createTemplate,
+        icon:    'icon icon-copy',
+        label:   this.t('harvester.action.createTemplate')
+      },
+      {
+        action:  'openLogs',
+        enabled: !!this.podResource,
+        icon:    'icon icon-fw icon-chevron-right',
+        label:   this.t('harvester.action.viewlogs'),
+        total:   1
+      },
+      ...out
+    ];
+  }
+
+  get productInStore() {
+    if (!productInStore) {
+      productInStore = this.$rootGetters['currentProduct'].inStore;
+    }
+
+    return productInStore;
+  }
+
+  applyDefaults(resources = this, realMode) {
+    const spec = {
+      runStrategy: 'RerunOnFailure',
+      template:    {
+        metadata: { annotations: {} },
+        spec:     {
+          domain: {
+            machine: { type: '' },
+            cpu:     {
+              cores:   null,
+              sockets: 1,
+              threads: 1
+            },
+            devices: {
+              inputs: [
+                {
+                  bus:  'usb',
+                  name: 'tablet',
+                  type: 'tablet'
+                }
+              ],
+              interfaces: [
+                {
+                  masquerade: {},
+                  model:      'virtio',
+                  name:       'default'
+                }
+              ],
+              disks: []
+            },
+            resources: {
+              limits: {
+                memory: null,
+                cpu:    ''
+              }
+            },
+            features: { acpi: { enabled: true } }
+          },
+          evictionStrategy: 'LiveMigrateIfPossible',
+          hostname:         '',
+          networks:         [
+            {
+              name: 'default',
+              pod:  {}
+            }
+          ],
+          volumes:  [],
+          affinity: {},
+        }
+      }
+    };
+
+    if (realMode !== _CLONE) {
+      Vue.set(this.metadata, 'annotations', { [HCI_ANNOTATIONS.VOLUME_CLAIM_TEMPLATE]: '[]' });
+      Vue.set(this, 'spec', spec);
+    }
+  }
+
+  cleanForNew() {
+    this.$dispatch(`cleanForNew`, this);
+
+    this.spec.template.spec.hostname = '';
+    const interfaces = this.spec.template.spec.domain.devices?.interfaces || [];
+
+    for (let i = 0; i < interfaces.length; i++) {
+      if (interfaces[i].macAddress) {
+        interfaces[i].macAddress = '';
+      }
+    }
+
+    // delete, spec?.dataSource:  The original data should not be saved when clone template
+    const deleteDataSource = this.volumeClaimTemplates.map((volume) => {
+      if (volume?.spec?.dataSource) {
+        delete volume.spec.dataSource;
+      }
+
+      return volume;
+    });
+
+    this.metadata.annotations[HCI_ANNOTATIONS.VOLUME_CLAIM_TEMPLATE] = JSON.stringify(deleteDataSource);
+  }
+
+  restartVM() {
+    this.doActionGrowl('restart', {});
+  }
+
+  softrebootVM() {
+    this.doActionGrowl('softreboot', {});
+  }
+
+  openLogs() {
+    this.$dispatch(
+      'wm/open',
+      {
+        id:        `${ this.id }-logs`,
+        label:     this.nameDisplay,
+        icon:      'file',
+        component: 'ContainerLogs',
+        attrs:     {
+          pod:              this.podResource,
+          initialContainer: this.podResource.metadata.annotations['kubectl.kubernetes.io/default-container']
+        }
+      },
+      { root: true }
+    );
+  }
+
+  backupVM(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'HarvesterBackupModal'
+    });
+  }
+
+  takeVMSnapshot(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'HarvesterVMSnapshotDialog'
+    });
+  }
+
+  unplugVolume(diskName) {
+    const resources = this;
+
+    this.$dispatch('promptModal', {
+      resources,
+      diskName,
+      component: 'HarvesterUnplugVolume'
+    });
+  }
+
+  restoreVM(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'HarvesterRestoreDialog'
+    });
+  }
+
+  get machineType() {
+    return this.spec?.template?.spec?.domain?.machine?.type || '';
+  }
+
+  get realAttachNodeName() {
+    const vmi = this.$getters['byId'](HCI.VMI, this.id);
+    const nodeName = vmi?.status?.nodeName;
+    const node = this.$getters['byId'](NODE, nodeName);
+
+    return node?.nameDisplay || '';
+  }
+
+  get nodeName() {
+    const vmi = this.$getters['byId'](HCI.VMI, this.id);
+    const nodeName = vmi?.status?.nodeName;
+    const node = this.$getters['byId'](NODE, nodeName);
+
+    return node?.id;
+  }
+
+  pauseVM() {
+    this.doActionGrowl('pause', {});
+  }
+
+  goToCloneVM(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'CloneVmDialog'
+    });
+  }
+
+  unpauseVM() {
+    this.doActionGrowl('unpause', {});
+  }
+
+  stopVM() {
+    this.doActionGrowl('stop', {});
+  }
+
+  forceStop() {
+    this.doActionGrowl('forceStop', {});
+  }
+
+  startVM() {
+    this.doActionGrowl('start', {});
+  }
+
+  migrateVM(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'HarvesterMigrationDialog'
+    });
+  }
+
+  ejectCDROM(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'HarvesterEjectCDROMDialog'
+    });
+  }
+
+  abortMigrationVM() {
+    this.doActionGrowl('abortMigration', {});
+  }
+
+  createTemplate(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'HarvesterCloneTemplate'
+    });
+  }
+
+  addHotplug(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'HarvesterAddHotplugModal'
+    });
+  }
+
+  get networksName() {
+    const interfaces = this.spec.template.spec.domain.devices?.interfaces || [];
+
+    return interfaces.map(I => I.name);
+  }
+
+  get isOff() {
+    return !this.isVMExpectedRunning ? { status: OFF } : null;
+  }
+
+  get isWaitingForVMI() {
+    if (this && this.isVMExpectedRunning && !this.isVMCreated) {
+      return { status: WAITING, message: VMI_WAITING_MESSAGE };
+    }
+
+    return null;
+  }
+
+  get isVMExpectedRunning() {
+    if (!this?.spec) {
+      return false;
+    }
+    const { running = null, runStrategy = null } = this.spec;
+    const conditions = this?.status?.conditions || [];
+
+    if (running) {
+      return true;
+    }
+
+    if (runStrategy !== null) {
+      let changeRequests;
+
+      switch (runStrategy) {
+      case RunStrategy.Halted:
+        return false;
+      case RunStrategy.Always:
+        return true;
+      case RunStrategy.RerunOnFailure:
+        if (
+          this.status?.printableStatus === 'ErrorUnschedulable' &&
+            conditions.find(
+              C => C.message && C.message.includes(IgnoreMessages)
+            )
+        ) {
+          return true;
+        }
+
+        return ['Starting', 'Running'].includes(this.status?.printableStatus);
+      case RunStrategy.Manual:
+      default:
+        changeRequests = new Set(
+          (this.status?.stateChangeRequests || []).map(
+            chRequest => chRequest?.action
+          )
+        );
+
+        if (changeRequests.has(StateChangeRequest.Stop)) {
+          return false;
+        }
+        if (changeRequests.has(StateChangeRequest.Start)) {
+          return true;
+        }
+
+        if (changeRequests.size === 0) {
+          return ['Starting', 'Running'].includes(
+            this.status?.printableStatus
+          );
+        }
+
+        return this.isVMCreated; // if there is no change request we can assume created is representing running (current and expected)
+      }
+    }
+
+    return false;
+  }
+
+  get podResource() {
+    const inStore = this.productInStore;
+
+    const vmiResource = this.$rootGetters[`${ inStore }/byId`](HCI.VMI, this.id);
+    const podList = this.$rootGetters[`${ inStore }/all`](POD);
+
+    return podList.find((P) => {
+      return (
+        vmiResource?.metadata?.name &&
+        vmiResource?.metadata?.name === P.metadata?.ownerReferences?.[0].name
+      );
+    });
+  }
+
+  get isPaused() {
+    const conditions = this.vmi?.status?.conditions || [];
+    const isPause = conditions.filter(cond => cond.type === PAUSED).length > 0;
+
+    return isPause ? {
+      status:  PAUSED,
+      message: PAUSED_VM_MODAL_MESSAGE
+    } : null;
+  }
+
+  get isVMError() {
+    const conditions = get(this, 'status.conditions');
+    const vmFailureCond = findBy(conditions, 'type', 'Failure');
+
+    if (vmFailureCond) {
+      return {
+        status:          VM_ERROR,
+        detailedMessage: vmFailureCond.message
+      };
+    }
+
+    return null;
+  }
+
+  get vmi() {
+    const inStore = this.productInStore;
+
+    const vmis = this.$rootGetters[`${ inStore }/all`](HCI.VMI);
+
+    return vmis.find(VMI => VMI.id === this.id);
+  }
+
+  get isError() {
+    const conditions = get(this.vmi, 'status.conditions');
+    const vmiFailureCond = findBy(conditions, 'type', 'Failure');
+
+    if (vmiFailureCond) {
+      return { status: 'VMI error', detailedMessage: vmiFailureCond.message };
+    }
+
+    if ((this.vmi || this.isVMCreated) && this.podResource) {
+      // const podStatus = this.podResource.getPodStatus;
+      // if (POD_STATUS_ALL_ERROR.includes(podStatus?.status)) {
+      //   return {
+      //     ...podStatus,
+      //     status: 'LAUNCHER_POD_ERROR',
+      //     pod:    this.podResource,
+      //   };
+      // }
+    }
+
+    return this?.vmi?.status?.phase;
+  }
+
+  get isRunning() {
+    const conditions = get(this.vmi, 'status.conditions');
+    const isVMIReady = findBy(conditions, 'type', 'Ready')?.status === 'True';
+
+    if (this.vmi?.status?.phase === VMIPhase.Running && isVMIReady) {
+      return { status: VMIPhase.Running };
+    }
+
+    return null;
+  }
+
+  get isNotReady() {
+    const conditions = get(this.vmi, 'status.conditions');
+    const VMIReadyCondition = findBy(conditions, 'type', 'Ready');
+
+    if (
+      VMIReadyCondition?.status === 'False' &&
+      this.vmi?.status?.phase === VMIPhase.Running
+    ) {
+      return { status: NOT_READY };
+    }
+
+    return null;
+  }
+
+  get isBeingStopped() {
+    if (this && !this.isVMExpectedRunning && this.isVMCreated && this.vmi?.status?.phase !== VMIPhase.Succeeded) {
+      return { status: STOPPING };
+    }
+
+    return null;
+  }
+
+  get isStarting() {
+    if (this.isVMExpectedRunning && this.isVMCreated) {
+      // created but not yet ready
+      if (this.podResource) {
+        const podStatus = this.podResource.getPodStatus;
+
+        if (!POD_STATUS_ALL_READY.includes(podStatus?.status)) {
+          return {
+            ...podStatus,
+            status:          'Starting',
+            message:         STARTING_MESSAGE,
+            detailedMessage: podStatus?.message,
+            pod:             this.podResource
+          };
+        }
+      }
+
+      return {
+        status:  'Starting',
+        message: STARTING_MESSAGE,
+        pod:     this.podResource
+      };
+    }
+
+    return null;
+  }
+
+  get isUnschedulable() {
+    if (this.isBeingStopped || this.isStarting) {
+      const condition = this.status?.conditions?.find(c => c.reason === UNSCHEDULABLE);
+
+      if (!!condition) {
+        return {
+          status:  UNSCHEDULABLE,
+          message: condition.message || 'VM is unschedulable',
+        };
+      }
+    }
+
+    return null;
+  }
+
+  get otherState() {
+    const state = (this.vmi &&
+      [VMIPhase.Scheduling, VMIPhase.Scheduled].includes(
+        this.vmi?.status?.phase
+      ) && {
+      status:  'Starting',
+      message: STARTING_MESSAGE
+    }) ||
+      (this.vmi &&
+        this.vmi.status?.phase === VMIPhase.Pending && {
+        status:  'VMI_WAITING',
+        message: VMI_WAITING_MESSAGE
+      }) ||
+      (this.vmi &&
+        this.vmi?.status?.phase === VMIPhase.Failed && { status: 'VMI_ERROR' }) ||
+      (this.isVMExpectedRunning &&
+        !this.isVMCreated && { status: 'Pending' }) || { status: 'UNKNOWN' };
+
+    return state;
+  }
+
+  get isVMCreated() {
+    return !!this?.status?.created;
+  }
+
+  get getDataVolumeTemplates() {
+    return get(this, 'spec.volumeClaimTemplates') === null ? [] : this.spec.volumeClaimTemplates;
+  }
+
+  get restoreResource() {
+    const id = `${ this.metadata.namespace }/${ get(
+      this,
+      `metadata.annotations."${ HCI_ANNOTATIONS.RESTORE_NAME }"`
+    ) }`;
+
+    const inStore = this.productInStore;
+
+    const allRestore = this.$rootGetters[`${ inStore }/all`](HCI.RESTORE);
+
+    return allRestore.find(O => O.id === id);
+  }
+
+  get restoreProgress() {
+    const inStore = this.productInStore;
+    const allBackups = this.$rootGetters[`${ inStore }/all`](HCI.BACKUP);
+
+    const isSnapshotRestore = !!allBackups
+      .filter(b => b.spec?.type !== BACKUP_TYPE.BACKUP)
+      .find(s => s.id === `${ this.restoreResource?.spec?.virtualMachineBackupNamespace }/${ this.restoreResource?.spec?.virtualMachineBackupName }`);
+
+    if (isSnapshotRestore) {
+      return {};
+    }
+
+    const status = this.restoreResource?.status;
+
+    if (status !== undefined) {
+      return {
+        type:       'restore',
+        percentage: status?.progress || 0,
+        details:    { volumes: status?.restores || [] }
+      };
+    }
+
+    return {};
+  }
+
+  get restoreState() {
+    if (!this.restoreResource) {
+      return true;
+    }
+
+    return this.restoreResource?.isComplete;
+  }
+
+  get actualState() {
+    if (!this.restoreState) {
+      return 'Restoring';
+    }
+
+    if (this?.metadata?.deletionTimestamp) {
+      return 'Terminating';
+    }
+
+    if (
+      !!this?.vmi?.migrationState &&
+      this.vmi.migrationState.status !== 'Failed'
+    ) {
+      return this.vmi.migrationState.status;
+    }
+
+    const state =
+      this.isUnschedulable?.status ||
+      this.isPaused?.status ||
+      this.isVMError?.status ||
+      this.isBeingStopped?.status ||
+      this.isOff?.status ||
+      this.isError?.status ||
+      this.isRunning?.status ||
+      this.isNotReady?.status ||
+      this.isStarting?.status ||
+      this.isWaitingForVMI?.state ||
+      this.otherState?.status;
+
+    return state;
+  }
+
+  get warningMessage() {
+    if (this.metadata?.annotations[HCI_ANNOTATIONS.VM_INSUFFICIENT]) {
+      return {
+        message:    this.metadata?.annotations[HCI_ANNOTATIONS.VM_INSUFFICIENT],
+        canDismiss: true,
+      };
+    }
+
+    const conditions = get(this, 'status.conditions');
+    const vmFailureCond = findBy(conditions, 'type', 'Failure');
+
+    if (vmFailureCond) {
+      return {
+        status:  VM_ERROR,
+        message: vmFailureCond.message
+      };
+    }
+
+    const vmiConditions = get(this.vmi, 'status.conditions');
+    const vmiFailureCond = findBy(vmiConditions, 'type', 'Failure');
+
+    if (vmiFailureCond) {
+      return { status: 'VMI error', detailedMessage: vmiFailureCond.message };
+    }
+
+    if ((this.vmi || this.isVMCreated) && this.podResource) {
+      const podStatus = this.podResource.getPodStatus;
+
+      if (POD_STATUS_ALL_ERROR.includes(podStatus?.status)) {
+        return {
+          ...podStatus,
+          status: 'LAUNCHER_POD_ERROR',
+          pod:    this.podResource
+        };
+      }
+    }
+
+    return null;
+  }
+
+  get migrationMessage() {
+    if (
+      !!this?.vmi?.migrationState &&
+      this.vmi.migrationState.status === 'Failed'
+    ) {
+      return {
+        ...this.actualState,
+        message: this.t('harvester.modal.migration.failedMessage')
+      };
+    }
+
+    return null;
+  }
+
+  get stateDisplay() {
+    return this.actualState;
+  }
+
+  get stateColor() {
+    const state = this.actualState;
+
+    return colorForState(state);
+  }
+
+  get networkIps() {
+    let networkData = '';
+    const out = [];
+    const arrVolumes = this.spec.template?.spec?.volumes || [];
+
+    arrVolumes.forEach((V) => {
+      if (V.cloudInitNoCloud) {
+        networkData = V.cloudInitNoCloud.networkData;
+      }
+    });
+
+    try {
+      const newInitScript = load(networkData);
+
+      if (newInitScript?.config && Array.isArray(newInitScript.config)) {
+        const config = newInitScript.config;
+
+        config.forEach((O) => {
+          if (O?.subnets && Array.isArray(O.subnets)) {
+            const subnets = O.subnets;
+
+            subnets.forEach((S) => {
+              if (S.address) {
+                out.push(S.address);
+              }
+            });
+          }
+        });
+      }
+    } catch (err) {}
+
+    return out;
+  }
+
+  get warningCount() {
+    return this.resourcesStatus.warningCount;
+  }
+
+  get errorCount() {
+    return this.resourcesStatus.errorCount;
+  }
+
+  get resourcesStatus() {
+    const inStore = this.productInStore;
+    const vmList = this.$rootGetters[`${ inStore }/all`](HCI.VM);
+    let warningCount = 0;
+    let errorCount = 0;
+
+    vmList.forEach((vm) => {
+      const status = vm.actualState;
+
+      if (status === VM_ERROR) {
+        errorCount += 1;
+      } else if (
+        status === 'Stopping' ||
+        status === 'Waiting' ||
+        status === 'Pending' ||
+        status === 'Starting' ||
+        status === 'Terminating'
+      ) {
+        warningCount += 1;
+      }
+    });
+
+    return {
+      warningCount,
+      errorCount
+    };
+  }
+
+  get volumeClaimTemplates() {
+    return parseVolumeClaimTemplates(this);
+  }
+
+  get persistentVolumeClaimName() {
+    const volumes = this.spec.template.spec.volumes || [];
+
+    return volumes
+      .map((O) => {
+        return O?.persistentVolumeClaim?.claimName;
+      })
+      .filter(name => !!name);
+  }
+
+  get rootImageId() {
+    let imageId = '';
+    const inStore = this.productInStore;
+    const pvcs = this.$rootGetters[`${ inStore }/all`](PVC) || [];
+
+    const volumes = this.spec.template.spec.volumes || [];
+
+    const firstVolumeName = volumes[0]?.persistentVolumeClaim?.claimName;
+    const isNoExistingVolume = this.volumeClaimTemplates.find((volume) => {
+      return firstVolumeName === volume?.metadata?.name;
+    });
+
+    if (!isNoExistingVolume) {
+      const existingVolume = pvcs.find(
+        P => P.id === `${ this.metadata.namespace }/${ firstVolumeName }`
+      );
+
+      if (existingVolume) {
+        return existingVolume?.metadata?.annotations?.[
+          'harvesterhci.io/imageId'
+        ];
+      }
+    }
+
+    this.volumeClaimTemplates.find((volume) => {
+      imageId = volume?.metadata?.annotations?.['harvesterhci.io/imageId'];
+
+      return !!imageId;
+    });
+
+    return imageId;
+  }
+
+  get restoreName() {
+    return (
+      get(this, `metadata.annotations."${ HCI_ANNOTATIONS.RESTORE_NAME }"`) || ''
+    );
+  }
+
+  get customValidationRules() {
+    const rules = [
+      {
+        nullable:       false,
+        path:           'metadata.name',
+        required:       true,
+        minLength:      1,
+        maxLength:      63,
+        translationKey: 'harvester.fields.name'
+      },
+      {
+        nullable:       false,
+        path:           'spec.template.spec.domain.cpu.cores',
+        min:            1,
+        required:       true,
+        translationKey: 'harvester.fields.cpu'
+      },
+      {
+        nullable:       false,
+        path:           'spec.template.spec.domain.resources.limits.memory',
+        required:       true,
+        translationKey: 'harvester.fields.memory'
+      },
+      {
+        nullable:   false,
+        path:       'spec.template.spec',
+        validators: ['vmNetworks']
+      },
+      {
+        nullable:   false,
+        path:       'spec',
+        validators: [`vmDisks`]
+      }
+    ];
+
+    return rules;
+  }
+
+  get attachNetwork() {
+    const networks = this.spec?.template?.spec?.networks || [];
+    const hasMultus = networks.find(N => N.multus);
+
+    return !!hasMultus;
+  }
+
+  get memorySort() {
+    const memory =
+      this?.spec?.template?.spec?.domain?.resources?.requests?.memory || 0;
+
+    const formatSize = parseSi(memory);
+
+    return parseInt(formatSize);
+  }
+
+  get ingoreVMMessage() {
+    const ignoreConditions = [
+      {
+        name:    'unavailable',
+        error:   false,
+        vmState: this.actualState === PAUSED
+      }
+    ];
+
+    const state = this.metadata?.state;
+
+    return (
+      ignoreConditions.find(
+        condition => condition.name === state?.name &&
+          condition.error === state?.error &&
+          condition.vmState
+      ) ||
+      IgnoreMessages.find(M => super.stateDescription?.includes(M)) ||
+      this.isOff
+    );
+  }
+
+  get stateDescription() {
+    return this.ingoreVMMessage ? '' : super.stateDescription;
+  }
+
+  get displayMemory() {
+    return (
+      this.spec.template.spec.domain.resources?.limits?.memory ||
+      this.spec.template.spec.domain.resources?.requests?.memory
+    );
+  }
+
+  get isQemuInstalled() {
+    const conditions = this.vmi?.status?.conditions || [];
+    const qemu = conditions.find(cond => cond.type === AGENT_CONNECTED);
+
+    return qemu?.status === 'True';
+  }
+
+  get warnDeletionMessage() {
+    return this.t('harvester.virtualMachine.promptRemove.tips');
+  }
+
+  get instanceLabels() {
+    const all = this.spec?.template?.metadata?.labels || {};
+
+    return omitBy(all, (value, key) => {
+      return matchesSomeRegex(key, LABELS_TO_IGNORE_REGEX);
+    });
+  }
+
+  setInstanceLabels(val) {
+    if ( !this.spec?.template?.metadata?.labels ) {
+      set(this, 'spec.template.metadata.labels', {});
+    }
+
+    const all = this.spec.template.metadata.labels || {};
+    const wasIgnored = pickBy(all, (value, key) => {
+      return matchesSomeRegex(key, LABELS_TO_IGNORE_REGEX);
+    });
+
+    Vue.set(this.spec.template.metadata, 'labels', { ...wasIgnored, ...val });
+  }
+}
diff --git a/pkg/harvester/models/kubevirt.io.virtualmachineinstance.js b/pkg/harvester/models/kubevirt.io.virtualmachineinstance.js
new file mode 100644
index 00000000..b97458da
--- /dev/null
+++ b/pkg/harvester/models/kubevirt.io.virtualmachineinstance.js
@@ -0,0 +1,143 @@
+import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import { NODE } from '@shell/config/types';
+import { HCI } from '../types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import HarvesterResource from './harvester';
+
+const PAUSED = 'Paused';
+const PAUSED_VM_MODAL_MESSAGE = 'This VM has been paused. If you wish to unpause it, please click the Unpause button below. For further details, please check with your system administrator.';
+const VMIPhase = {
+  Pending:    'Pending',
+  Scheduling: 'Scheduling',
+  Scheduled:  'Scheduled',
+  Running:    'Running',
+  Succeeded:  'Succeeded',
+  Failed:     'Failed',
+  Unknown:    'Unknown',
+};
+
+export default class VirtVmInstance extends HarvesterResource {
+  get _availableActions() {
+    const out = super._availableActions;
+
+    const actions = out.find((O) => {
+      return O.action === 'promptRemove';
+    });
+
+    return [actions];
+  }
+
+  get stateDisplay() {
+    if (this?.metadata?.deletionTimestamp) {
+      return 'Terminating';
+    }
+
+    return this?.status?.phase;
+  }
+
+  get stateBackground() {
+    return colorForState(this.stateDisplay).replace('text-', 'bg-');
+  }
+
+  get stateColor() {
+    const state = this.stateDisplay;
+
+    return colorForState(state);
+  }
+
+  get vmimResource() {
+    const all = this.$rootGetters['harvester/all'](HCI.VMIM) || [];
+    const vmimList = all.filter(vmim => vmim.spec?.vmiName === this.metadata?.name);
+
+    if (vmimList.length === 0) {
+      return [];
+    }
+
+    vmimList.sort((a, b) => {
+      return a?.metadata?.creationTimestamp > b?.metadata?.creationTimestamp ? -1 : 1;
+    });
+
+    return vmimList[0];
+  }
+
+  get migrationState() {
+    const state = this.metadata?.annotations?.[HCI_ANNOTATIONS.MIGRATION_STATE];
+
+    if (this.vmimResource?.status?.phase === VMIPhase.Failed) {
+      return {
+        type:   'migration',
+        status: VMIPhase.Failed
+      };
+    }
+
+    if (this.vmimResource?.status?.phase && state) {
+      return {
+        type:   'migration',
+        status: state
+      };
+    }
+
+    return null;
+  }
+
+  get migrationStateBackground() {
+    const state = this.migrationState.status;
+
+    return colorForState(state).replace('text-', 'bg-');
+  }
+
+  get isPaused() {
+    const conditions = this?.status?.conditions || [];
+    const isPause = conditions.filter(cond => cond.type === PAUSED).length > 0;
+
+    return isPause ? {
+      status:  PAUSED,
+      message: PAUSED_VM_MODAL_MESSAGE
+    } : null;
+  }
+
+  get isRunning() {
+    if (this?.status?.phase === VMIPhase.Running) {
+      return { status: VMIPhase.Running };
+    }
+
+    return null;
+  }
+
+  get isTerminated() {
+    const conditions = this?.status?.conditions || [];
+
+    return conditions.find(cond => cond.type === 'Ready')?.status === 'False';
+  }
+
+  get getVMIApiPath() {
+    const clusterId = this.$rootGetters['clusterId'];
+
+    if (this.$rootGetters['isMultiCluster']) {
+      const prefix = `/k8s/clusters/${ clusterId }`;
+
+      return `${ prefix }/apis/subresources.kubevirt.io/v1/namespaces/${ this.metadata.namespace }/virtualmachineinstances/${ this.name }/vnc`;
+    } else {
+      return `/apis/subresources.kubevirt.io/v1/namespaces/${ this.metadata.namespace }/virtualmachineinstances/${ this.name }/vnc`;
+    }
+  }
+
+  get realAttachNodeName() {
+    const nodeName = this?.status?.nodeName;
+    const node = this.$getters['byId'](NODE, nodeName);
+
+    return node?.nameDisplay || '';
+  }
+
+  get getSerialConsolePath() {
+    const clusterId = this.$rootGetters['clusterId'];
+
+    if (this.$rootGetters['isMultiCluster']) {
+      const prefix = `/k8s/clusters/${ clusterId }`;
+
+      return `${ prefix }/apis/subresources.kubevirt.io/v1/namespaces/${ this.metadata.namespace }/virtualmachineinstances/${ this.name }/console`;
+    } else {
+      return `/apis/subresources.kubevirt.io/v1/namespaces/${ this.metadata.namespace }/virtualmachineinstances/${ this.name }/console`;
+    }
+  }
+}
diff --git a/pkg/harvester/models/loadbalancer.harvesterhci.io.ippool.js b/pkg/harvester/models/loadbalancer.harvesterhci.io.ippool.js
new file mode 100644
index 00000000..a40feea4
--- /dev/null
+++ b/pkg/harvester/models/loadbalancer.harvesterhci.io.ippool.js
@@ -0,0 +1,105 @@
+import Vue from 'vue';
+import { clone } from '@shell/utils/object';
+import HarvesterResource from '@pkg/harvester/models/harvester';
+import { HCI } from '@pkg/harvester/types';
+
+const NOT_READY = 'Not Ready';
+
+export default class HciLB extends HarvesterResource {
+  applyDefaults() {
+    const spec = this.spec || {};
+    const meta = this.metadata || {};
+
+    spec.ranges = spec.ranges || [];
+    spec.selector = spec.selector || {};
+    spec.selector.network = spec.selector.network || '';
+
+    Vue.set(this, 'spec', spec);
+    Vue.set(this, 'metadata', meta);
+  }
+
+  get customValidationRules() {
+    return [
+      {
+        nullable:       false,
+        path:           'metadata.name',
+        required:       true,
+        translationKey: 'generic.name',
+        type:           'dnsLabel',
+      },
+      {
+        nullable:   false,
+        path:       'spec.ranges',
+        type:       'array',
+        validators: ['ranges'],
+      }
+    ];
+  }
+
+  get subnetDisplay() {
+    const ranges = this.spec?.ranges || [];
+
+    return ranges.map(r => r.subnet).join(', ');
+  }
+
+  get startIPDisplay() {
+    const ranges = this.spec?.ranges || [];
+
+    return ranges.filter(r => r.startIP).map(r => r.startIP).join(', ');
+  }
+
+  get endIPDisplay() {
+    const ranges = this.spec?.ranges || [];
+
+    return ranges.filter(r => r.endIP).map(r => r.endIP).join(', ');
+  }
+
+  get details() {
+    const out = [{
+      label:   this.t('harvester.ipPool.availableIP.label'),
+      content: this.status?.available,
+    }];
+
+    return out;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this.listLocation);
+
+    detailLocation.params.resource = HCI.IP_POOL;
+
+    return detailLocation;
+  }
+
+  get parentLocationOverride() {
+    return {
+      ...this.listLocation,
+      params: {
+        ...this.listLocation.params,
+        resource: HCI.IP_POOL,
+      }
+    };
+  }
+
+  get isReady() {
+    const readyCondition = (this?.status?.conditions || []).find(c => c.type === 'Ready') || {};
+
+    return readyCondition?.status === 'True';
+  }
+
+  get stateDisplay() {
+    if (!this.isReady) {
+      return NOT_READY;
+    }
+
+    return super.stateDisplay;
+  }
+
+  get stateBackground() {
+    if (!this.isReady) {
+      return 'bg-warning';
+    }
+
+    return super.stateBackground;
+  }
+}
diff --git a/pkg/harvester/models/loadbalancer.harvesterhci.io.loadbalancer.js b/pkg/harvester/models/loadbalancer.harvesterhci.io.loadbalancer.js
new file mode 100644
index 00000000..50d4e2f0
--- /dev/null
+++ b/pkg/harvester/models/loadbalancer.harvesterhci.io.loadbalancer.js
@@ -0,0 +1,112 @@
+import { set, clone } from '@shell/utils/object';
+import HarvesterResource from '@pkg/harvester/models/harvester';
+import { HCI } from '@pkg/harvester/types';
+
+const WORKLOAD_TYPE_VM = 'vm';
+const NOT_READY = 'Not Ready';
+
+export default class HciLB extends HarvesterResource {
+  applyDefaults() {
+    const spec = this.spec || {};
+    const meta = this.metadata || {};
+
+    spec.workloadType = spec.workloadType || WORKLOAD_TYPE_VM;
+    spec.ipam = spec.ipam || 'dhcp';
+    spec.healthCheck = spec.healthCheck || {};
+    spec.backendServerSelector = spec.backendServerSelector || {};
+
+    set(this, 'spec', spec);
+    set(this, 'metadata', meta);
+  }
+
+  get workloadTypeDisplay() {
+    const workloadType = this.spec?.workloadType || 'cluster';
+
+    return this.$rootGetters['i18n/t'](`harvester.loadBalancer.workloadType.options.${ workloadType }`);
+  }
+
+  get ipamDisplay() {
+    const ipam = this.spec?.ipam;
+
+    return this.$rootGetters['i18n/t'](`harvester.loadBalancer.ipam.options.${ ipam }`);
+  }
+
+  get customValidationRules() {
+    return [
+      {
+        nullable:       false,
+        path:           'metadata.name',
+        required:       true,
+        translationKey: 'generic.name',
+        type:           'dnsLabel',
+      },
+    ];
+  }
+
+  get canCustomEdit() {
+    return this.$rootGetters['type-map/hasCustomEdit'](this.type, this.id) && this.spec.workloadType === WORKLOAD_TYPE_VM;
+  }
+
+  get canUpdate() {
+    return this.hasLink('update') && this.$rootGetters['type-map/optionsFor'](this.type).isEditable && this.spec.workloadType === WORKLOAD_TYPE_VM;
+  }
+
+  get canClone() {
+    return this.spec.workloadType === WORKLOAD_TYPE_VM;
+  }
+
+  get details() {
+    const out = [{
+      label:   this.t('harvester.loadBalancer.ipam.label'),
+      content: this.ipamDisplay,
+    }, {
+      label:   this.t('harvester.loadBalancer.workloadType.label'),
+      content: this.workloadTypeDisplay,
+    }, {
+      label:   this.t('tableHeaders.address'),
+      content: this.status.address,
+    }];
+
+    return out;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this.listLocation);
+
+    detailLocation.params.resource = HCI.LB;
+
+    return detailLocation;
+  }
+
+  get parentLocationOverride() {
+    return {
+      ...this.listLocation,
+      params: {
+        ...this.listLocation.params,
+        resource: HCI.LB,
+      }
+    };
+  }
+
+  get isReady() {
+    const readyCondition = (this?.status?.conditions || []).find(c => c.type === 'Ready') || {};
+
+    return readyCondition?.status === 'True';
+  }
+
+  get stateDisplay() {
+    if (!this.isReady) {
+      return NOT_READY;
+    }
+
+    return super.stateDisplay;
+  }
+
+  get stateBackground() {
+    if (!this.isReady) {
+      return 'bg-warning';
+    }
+
+    return super.stateBackground;
+  }
+}
diff --git a/pkg/harvester/models/longhorn.io.node.js b/pkg/harvester/models/longhorn.io.node.js
new file mode 100644
index 00000000..b9e3842f
--- /dev/null
+++ b/pkg/harvester/models/longhorn.io.node.js
@@ -0,0 +1,44 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+
+const HEALTHY = 'healthy';
+const WARNING = 'warning';
+
+export default class LonghornNode extends SteveModel {
+  get used() {
+    let out = 0;
+
+    this.disks.filter(d => d.allowScheduling).map((disk) => {
+      if (disk?.storageAvailable && disk?.storageMaximum) {
+        out += disk.storageMaximum - disk.storageAvailable;
+      }
+    });
+
+    return out;
+  }
+
+  get disks() {
+    const diskStatus = this?.status?.diskStatus || {};
+    const diskSpec = this?.spec?.disks || {};
+
+    return Object.keys(diskSpec).map((key) => {
+      const conditions = diskStatus[key]?.conditions || [];
+      const readyCondition = conditions.find(c => c.type === 'Ready') || {};
+      const schedulableCondition = conditions.find(c => c.type === 'Schedulable') || {};
+
+      let state;
+
+      if (readyCondition?.status !== 'True' || schedulableCondition?.status !== 'True') {
+        state = WARNING;
+      } else {
+        state = HEALTHY;
+      }
+
+      return {
+        ...diskStatus[key],
+        ...diskSpec[key],
+        id: key,
+        state,
+      };
+    }) || [];
+  }
+}
diff --git a/pkg/harvester/models/metal.harvesterhci.io.inventory.js b/pkg/harvester/models/metal.harvesterhci.io.inventory.js
new file mode 100644
index 00000000..6a16d99a
--- /dev/null
+++ b/pkg/harvester/models/metal.harvesterhci.io.inventory.js
@@ -0,0 +1,47 @@
+import HarvesterResource from './harvester';
+import { set } from '@shell/utils/object';
+
+export default class HciInventory extends HarvesterResource {
+  applyDefaults() {
+    const defaultSpec = {
+      baseboardSpec: {
+        connection: {
+          authSecretRef: {},
+          insecureTLS:   false,
+        }
+      },
+      events: {
+        enabled:         true,
+        pollingInterval: '1h',
+      },
+      primaryDisk:                   '',
+      managementInterfaceMacAddress: '',
+    };
+
+    set(this, 'metadata.annotations', {});
+    set(this, 'spec', this.spec || defaultSpec);
+    set(this, 'spec.baseboardSpec', this.spec?.baseboardSpec || defaultSpec.baseboardSpec);
+    set(this, 'spec.baseboardSpec.connection', this.spec?.baseboardSpec?.connection || defaultSpec.baseboardSpec.connection);
+    set(this, 'spec.baseboardSpec.connection.authSecretRef', this.spec?.baseboardSpec?.connection?.authSecretRef || {});
+  }
+
+  get warningMessages() {
+    const out = [];
+
+    if (this.metadata?.state?.error) {
+      out.push({ text: this.metadata?.state.message });
+    }
+
+    return out;
+  }
+
+  get customValidationRules() {
+    return [
+      {
+        path:           'spec.events.pollingInterval',
+        translationKey: 'harvester.seeder.inventory.pollingInterval.label',
+        validators:     ['interval'],
+      },
+    ];
+  }
+}
diff --git a/pkg/harvester/models/network.harvesterhci.io.clusternetwork.js b/pkg/harvester/models/network.harvesterhci.io.clusternetwork.js
new file mode 100644
index 00000000..b06b2cb0
--- /dev/null
+++ b/pkg/harvester/models/network.harvesterhci.io.clusternetwork.js
@@ -0,0 +1,69 @@
+import { HCI } from '../types';
+import { clone } from '@shell/utils/object';
+import HarvesterResource from './harvester';
+import { NODE } from '@shell/config/types';
+
+export default class HciClusterNetwork extends HarvesterResource {
+  get doneOverride() {
+    const detailLocation = clone(this.listLocation);
+
+    detailLocation.params.resource = HCI.CLUSTER_NETWORK;
+
+    return detailLocation;
+  }
+
+  get parentLocationOverride() {
+    return {
+      ...this.listLocation,
+      params: {
+        ...this.listLocation.params,
+        resource: HCI.CLUSTER_NETWORK
+      }
+    };
+  }
+
+  get canDelete() {
+    return this._canDelete && this.id !== 'mgmt';
+  }
+
+  get canUpdate() {
+    return this.hasLink('update') && this.$rootGetters['type-map/optionsFor'](this.type).isEditable && this.id !== 'mgmt';
+  }
+
+  get isReady() {
+    const readyCondition = (this?.status?.conditions || []).find(c => c.type === 'ready') || {};
+
+    return readyCondition?.status === 'True';
+  }
+
+  get inStore() {
+    return this.$rootGetters['currentProduct'].inStore;
+  }
+
+  get nodes() {
+    const nodes = this.$rootGetters[`${ this.inStore }/all`](NODE);
+
+    // filter out witness nodes and unschedulable nodes
+    return nodes.filter(n => !n.isUnSchedulable && n.isEtcd !== 'true');
+  }
+
+  get vlanStatuses() {
+    const vlanStatuses = this.$rootGetters[`${ this.inStore }/all`](HCI.VLAN_STATUS);
+    const nodeIds = this.nodes.map(n => n.id);
+
+    return vlanStatuses.filter((s) => {
+      return nodeIds.includes(s?.status?.node) &&
+              this.id === s?.status?.clusterNetwork;
+    }) || [];
+  }
+
+  get isReadyForStorageNetwork() {
+    if (this.id === 'mgmt') {
+      return true;
+    } else {
+      const readyStatuses = this.vlanStatuses.filter(s => s.isReady) || [];
+
+      return readyStatuses.length === this.nodes.length && this.isReady;
+    }
+  }
+}
diff --git a/pkg/harvester/models/network.harvesterhci.io.nodenetwork.js b/pkg/harvester/models/network.harvesterhci.io.nodenetwork.js
new file mode 100644
index 00000000..7b61edec
--- /dev/null
+++ b/pkg/harvester/models/network.harvesterhci.io.nodenetwork.js
@@ -0,0 +1,34 @@
+import { findBy } from '@shell/utils/array';
+import { get } from '@shell/utils/object';
+import { HCI } from '../types';
+import HarvesterResource from './harvester';
+
+export default class HciNodeNetwork extends HarvesterResource {
+  get message() {
+    const conditions = get(this, 'status.conditions');
+
+    return (findBy(conditions, 'type', 'Ready') || {}).message ;
+  }
+
+  get isReady() {
+    const conditions = get(this, 'status.conditions');
+
+    return (findBy(conditions, 'type', 'Ready') || {})?.status === 'True';
+  }
+
+  get nics() {
+    return this?.status?.nics || [];
+  }
+
+  get attachNodeName() {
+    return get(this, `metadata.labels."network.harvesterhci.io/nodename"`) || '';
+  }
+
+  get linkMessage() {
+    return {
+      name:    this.attachNodeName,
+      message: this.message,
+      to:      `${ HCI.HOST }/${ this.attachNodeName }?mode=edit`
+    };
+  }
+}
diff --git a/pkg/harvester/models/network.harvesterhci.io.vlanconfig.js b/pkg/harvester/models/network.harvesterhci.io.vlanconfig.js
new file mode 100644
index 00000000..def2081b
--- /dev/null
+++ b/pkg/harvester/models/network.harvesterhci.io.vlanconfig.js
@@ -0,0 +1,137 @@
+import { isEmpty } from 'lodash';
+
+import { set, clone } from '@shell/utils/object';
+import HarvesterResource from './harvester';
+import { HCI } from '../types';
+import { insertAt } from '@shell/utils/array';
+import { HOSTNAME } from '@shell/config/labels-annotations';
+import { matching } from '@shell/utils/selector';
+import { NODE } from '@shell/config/types';
+
+const NOT_READY = 'Not Ready';
+
+export default class HciVlanConfig extends HarvesterResource {
+  applyDefaults() {
+    const defaultSpec = {
+      uplink: {
+        nics:           [],
+        linkAttributes: {},
+        bondOptions:    { mode: 'active-backup' },
+      },
+    };
+
+    set(this, 'spec', this.spec || defaultSpec);
+    set(this, 'spec.uplink.linkAttributes', this.spec?.uplink?.linkAttributes || {});
+    set(this, 'spec.uplink.bondOptions', this.spec?.uplink?.bondOptions || {});
+  }
+
+  get groupByClusterNetwork() {
+    return this.spec?.clusterNetwork;
+  }
+
+  get doneOverride() {
+    const detailLocation = clone(this.listLocation);
+
+    detailLocation.params.resource = HCI.CLUSTER_NETWORK;
+
+    return detailLocation;
+  }
+
+  get parentLocationOverride() {
+    return {
+      ...this.listLocation,
+      params: {
+        ...this.listLocation.params,
+        resource: HCI.CLUSTER_NETWORK
+      }
+    };
+  }
+
+  get typeDisplay() {
+    return 'VLAN';
+  }
+
+  get _availableActions() {
+    const out = super._availableActions;
+
+    insertAt(out, 0, this.migrateAction);
+
+    return out;
+  }
+
+  get migrateAction() {
+    return {
+      action: 'migrate',
+      icon:   'icon icon-copy',
+      label:  this.t('harvester.vlanConfig.action.migrate'),
+    };
+  }
+
+  migrate(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'HarvesterVlanConfigMigrateDialog',
+    });
+  }
+
+  get inStore() {
+    return this.$rootGetters['currentProduct'].inStore;
+  }
+
+  get vlanStatuses() {
+    const nodes = this.nodes.map(n => n.id) || [];
+    const vlanStatuses = this.$rootGetters[`${ this.inStore }/all`](HCI.VLAN_STATUS);
+
+    return vlanStatuses.filter((s) => {
+      return nodes.includes(s?.status?.node) &&
+              this.id === s?.status?.vlanConfig;
+    }) || [];
+  }
+
+  get isReady() {
+    if (this.nodes.length === 0 || (this.vlanStatuses.length !== this.nodes.length)) {
+      return false;
+    } else {
+      const states = this.vlanStatuses.filter((s) => {
+        return s.isReady;
+      });
+
+      return states.length === this.vlanStatuses.length;
+    }
+  }
+
+  get selectedNodes() {
+    const nodeSelector = this.spec?.nodeSelector || {};
+    const nodes = this.$rootGetters[`${ this.inStore }/all`](NODE);
+
+    if (isEmpty(nodeSelector)) {
+      return nodes;
+    } else if (nodeSelector[HOSTNAME] && Object.keys(nodeSelector).length === 1) {
+      return nodes.filter(n => n.id === nodeSelector[HOSTNAME]) || [];
+    } else {
+      const matchNodes = matching(nodes || [], nodeSelector).map(n => n.id);
+
+      return nodes.filter(n => matchNodes.includes(n.id));
+    }
+  }
+
+  get nodes() {
+    return this.selectedNodes.filter(n => !n.isUnSchedulable && n.isEtcd !== 'true');
+  }
+
+  get stateDisplay() {
+    if (!this.isReady) {
+      return NOT_READY;
+    }
+
+    return super.stateDisplay;
+  }
+
+  get stateBackground() {
+    if (!this.isReady) {
+      return 'bg-warning';
+    }
+
+    return super.stateBackground;
+  }
+}
diff --git a/pkg/harvester/models/network.harvesterhci.io.vlanstatus.js b/pkg/harvester/models/network.harvesterhci.io.vlanstatus.js
new file mode 100644
index 00000000..6af161bf
--- /dev/null
+++ b/pkg/harvester/models/network.harvesterhci.io.vlanstatus.js
@@ -0,0 +1,12 @@
+import { findBy } from '@shell/utils/array';
+
+import HarvesterResource from './harvester';
+
+export default class HciVlanStatus extends HarvesterResource {
+  get isReady() {
+    const conditions = this.status?.conditions || [];
+    const readyCondition = findBy(conditions, 'type', 'ready') || {};
+
+    return readyCondition.status === 'True';
+  }
+}
diff --git a/pkg/harvester/pages/c/_cluster/_resource/_id.vue b/pkg/harvester/pages/c/_cluster/_resource/_id.vue
new file mode 100644
index 00000000..31953e82
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/_resource/_id.vue
@@ -0,0 +1,12 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail/index.vue';
+
+export default {
+  name:       'HarvesterResourcedId',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail />
+</template>
diff --git a/pkg/harvester/pages/c/_cluster/_resource/_namespace/_id.vue b/pkg/harvester/pages/c/_cluster/_resource/_namespace/_id.vue
new file mode 100644
index 00000000..2ff4c674
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/_resource/_namespace/_id.vue
@@ -0,0 +1,12 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail/index.vue';
+
+export default {
+  name:       'HarvesterResourcedNamespaceId',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail />
+</template>
diff --git a/pkg/harvester/pages/c/_cluster/_resource/create.vue b/pkg/harvester/pages/c/_cluster/_resource/create.vue
new file mode 100644
index 00000000..d8b8b07a
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/_resource/create.vue
@@ -0,0 +1,12 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail/index.vue';
+
+export default {
+  name:       'HarvesterResourceCreate',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail />
+</template>
diff --git a/pkg/harvester/pages/c/_cluster/_resource/index.vue b/pkg/harvester/pages/c/_cluster/_resource/index.vue
new file mode 100644
index 00000000..3c32a7e1
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/_resource/index.vue
@@ -0,0 +1,12 @@
+<script>
+import ResourceList from '@shell/components/ResourceList/index.vue';
+
+export default {
+  name:       'HarvesterResourcedList',
+  components: { ResourceList },
+};
+</script>
+
+<template>
+  <ResourceList />
+</template>
diff --git a/pkg/harvester/pages/c/_cluster/airgapupgrade/index.vue b/pkg/harvester/pages/c/_cluster/airgapupgrade/index.vue
new file mode 100644
index 00000000..c737af3a
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/airgapupgrade/index.vue
@@ -0,0 +1,328 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import { RadioGroup } from '@components/Form/Radio';
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import UpgradeInfo from '../../../../components/UpgradeInfo';
+
+import { HCI } from '../../../../types';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../../../config/harvester';
+
+const IMAGE_METHOD = {
+  NEW:   'new',
+  EXIST: 'exist'
+};
+
+const DOWNLOAD = 'download';
+const UPLOAD = 'upload';
+
+export default {
+  name:       'HarvesterAirgapUpgrade',
+  components: {
+    Checkbox, CruResource, LabeledSelect, LabeledInput, RadioGroup, UpgradeInfo
+  },
+
+  async fetch() {
+    await this.$store.dispatch('harvester/findAll', { type: HCI.IMAGE });
+
+    const value = await this.$store.dispatch('harvester/create', {
+      type:     HCI.UPGRADE,
+      metadata: {
+        generateName: 'hvst-upgrade-',
+        namespace:    'harvester-system',
+      },
+      spec: { image: '' }
+    });
+
+    const imageValue = await this.$store.dispatch('harvester/create', {
+      type:     HCI.IMAGE,
+      metadata: {
+        name:         '',
+        namespace:    'harvester-system',
+        generateName: 'image-',
+        annotations:  {}
+      },
+      spec: {
+        sourceType:  UPLOAD,
+        displayName: '',
+        checksum:    ''
+      },
+    });
+
+    this.value = value;
+    this.imageValue = imageValue;
+  },
+
+  data() {
+    return {
+      value:         null,
+      file:          {},
+      imageId:       '',
+      imageSource:   IMAGE_METHOD.NEW,
+      sourceType:    UPLOAD,
+      imageValue:    null,
+      errors:        [],
+      enableLogging: true,
+      IMAGE_METHOD
+    };
+  },
+
+  computed: {
+    doneRoute() {
+      return `${ HARVESTER_PRODUCT }-c-cluster-resource`;
+    },
+
+    osImageOptions() {
+      return this.$store.getters['harvester/all'](HCI.IMAGE)
+        .filter(I => I.isOSImage)
+        .map((I) => {
+          return {
+            label:    I.spec.displayName,
+            value:    I.id,
+            disabled: !I.isReady
+          };
+        });
+    },
+
+    uploadImage() {
+      return this.imageSource === IMAGE_METHOD.NEW;
+    },
+
+    fileName() {
+      return this.file?.name || '';
+    },
+
+    canEnableLogging() {
+      return this.$store.getters['harvester/schemaFor'](HCI.UPGRADE_LOG);
+    },
+  },
+
+  methods: {
+    done() {
+      this.$router.push({
+        name:   this.doneRoute,
+        params: { resource: HCI.SETTING, product: 'harvester' }
+      });
+    },
+
+    async save(buttonCb) {
+      let res = null;
+
+      this.errors = [];
+      if (!this.imageValue.spec.displayName && this.uploadImage) {
+        this.errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('generic.name') }));
+        buttonCb(false);
+
+        return;
+      }
+
+      try {
+        if (this.imageSource === IMAGE_METHOD.NEW) {
+          this.imageValue.metadata.annotations[HCI_ANNOTATIONS.OS_UPGRADE_IMAGE] = 'True';
+
+          if (this.sourceType === UPLOAD) {
+            this.imageValue.spec.sourceType = UPLOAD;
+            const file = this.file;
+
+            if (!file.name) {
+              this.errors.push(this.$store.getters['i18n/t']('harvester.setting.upgrade.selectExitImage'));
+              buttonCb(false);
+
+              return;
+            }
+
+            this.imageValue.spec.url = '';
+
+            this.imageValue.metadata.annotations[HCI_ANNOTATIONS.IMAGE_NAME] = file.name;
+
+            res = await this.imageValue.save();
+
+            res.uploadImage(file);
+          } else if (this.sourceType === DOWNLOAD) {
+            this.imageValue.spec.sourceType = DOWNLOAD;
+            if (!this.imageValue.spec.url) {
+              this.errors.push(this.$store.getters['i18n/t']('harvester.setting.upgrade.imageUrl'));
+              buttonCb(false);
+
+              return;
+            }
+
+            res = await this.imageValue.save();
+          }
+
+          this.value.spec.image = res.id;
+        } else if (this.imageSource === IMAGE_METHOD.EXIST) {
+          if (!this.imageId) {
+            this.errors.push(this.$store.getters['i18n/t']('harvester.setting.upgrade.chooseFile'));
+
+            return;
+          }
+
+          this.value.spec.image = this.imageId;
+        }
+
+        if (this.canEnableLogging) {
+          this.value.spec.logEnabled = this.enableLogging;
+        }
+
+        await this.value.save();
+        this.done();
+        buttonCb(true);
+      } catch (e) {
+        this.errors = exceptionToErrorsArray(e);
+        buttonCb(false);
+      }
+    },
+
+    handleFileUpload() {
+      this.file = this.$refs.file.files[0];
+    },
+
+    selectFile() {
+      this.$refs.file.value = null;
+      this.$refs.file.click();
+    },
+  },
+
+  watch: {
+    'imageValue.spec.url': {
+      handler(neu) {
+        const suffixName = neu?.split('/')?.pop();
+        const splitName = suffixName?.split('.') || [];
+        const fileSuffix = splitName?.pop()?.toLowerCase();
+
+        if (splitName.length > 1 && fileSuffix === 'iso' && !this.imageValue.spec.displayName) {
+          this.imageValue.spec.displayName = suffixName;
+        }
+      },
+      deep: true
+    },
+
+    file(neu) {
+      if (!this.imageValue.spec.displayName && neu.name) {
+        this.imageValue.spec.displayName = neu.name;
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div v-if="value" id="air-gap">
+    <h3 class="mb-20">
+      {{ t('harvester.upgradePage.osUpgrade') }}
+    </h3>
+    <CruResource
+      :done-route="doneRoute"
+      :resource="value"
+      mode="create"
+      :errors="errors"
+      :can-yaml="false"
+      finish-button-mode="upgrade"
+      :cancel-event="true"
+      @finish="save"
+      @cancel="done"
+    >
+      <RadioGroup
+        v-model="imageSource"
+        class="image-group"
+        name="image"
+        :options="[
+          IMAGE_METHOD.NEW,
+          IMAGE_METHOD.EXIST,
+        ]"
+        :labels="[
+          t('harvester.upgradePage.uploadNew'),
+          t('harvester.upgradePage.selectExisting'),
+        ]"
+      />
+
+      <UpgradeInfo />
+
+      <div v-if="uploadImage">
+        <LabeledInput v-model.trim="imageValue.spec.displayName" class="mb-20" label-key="harvester.fields.name" required />
+
+        <LabeledInput v-model="imageValue.spec.checksum" class="mb-10" label-key="harvester.setting.upgrade.checksum" />
+
+        <Checkbox
+          v-if="canEnableLogging"
+          v-model="enableLogging"
+          class="check mb-20"
+          type="checkbox"
+          :label="t('harvester.upgradePage.enableLogging')"
+        />
+
+        <RadioGroup
+          v-model="sourceType"
+          class="mb-20 image-group"
+          name="sourceType"
+          :options="[
+            'upload',
+            'download',
+          ]"
+          :labels="[
+            t('harvester.image.sourceType.upload'),
+            t('harvester.image.sourceType.download')
+          ]"
+        />
+
+        <LabeledInput
+          v-if="sourceType === 'download'"
+          v-model.trim="imageValue.spec.url"
+          class="labeled-input--tooltip"
+          required
+          label-key="harvester.image.url"
+        />
+
+        <div v-else class="chooseFile">
+          <button
+            type="button"
+            class="btn role-primary"
+            @click="selectFile"
+          >
+            {{ t('harvester.image.uploadFile') }}
+            <input
+              v-show="false"
+              id="file"
+              ref="file"
+              type="file"
+              accept=".iso"
+              @change="handleFileUpload()"
+            />
+          </button>
+
+          <span :class="{ 'text-muted': !fileName }" class="ml-20">
+            {{ fileName ? fileName : t('harvester.generic.noFileChosen') }}
+          </span>
+        </div>
+      </div>
+
+      <LabeledSelect
+        v-else
+        v-model="imageId"
+        :options="osImageOptions"
+        required
+        class="mb-20"
+        label-key="harvester.fields.image"
+      />
+    </CruResource>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#air-gap {
+  ::v-deep .image-group .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+  .chooseFile {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/pkg/harvester/pages/c/_cluster/alertmanagerconfig/_alertmanagerconfigid/index.vue b/pkg/harvester/pages/c/_cluster/alertmanagerconfig/_alertmanagerconfigid/index.vue
new file mode 100644
index 00000000..7bb98489
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/alertmanagerconfig/_alertmanagerconfigid/index.vue
@@ -0,0 +1,12 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'AlertmanagerConfig',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail />
+</template>
diff --git a/pkg/harvester/pages/c/_cluster/alertmanagerconfig/_alertmanagerconfigid/receiver.vue b/pkg/harvester/pages/c/_cluster/alertmanagerconfig/_alertmanagerconfigid/receiver.vue
new file mode 100644
index 00000000..65a42206
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/alertmanagerconfig/_alertmanagerconfigid/receiver.vue
@@ -0,0 +1,304 @@
+<script>
+import ActionMenu from '@shell/components/ActionMenu';
+import ReceiverConfig from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig';
+import ButtonGroup from '@shell/components/ButtonGroup';
+import ResourceYaml from '@shell/components/ResourceYaml';
+import { createYaml } from '@shell/utils/create-yaml';
+import { EDITOR_MODES } from '@shell/components/YamlEditor';
+import { MONITORING, SCHEMA } from '@shell/config/types';
+import {
+  _CREATE, _EDIT, _VIEW, _CONFIG, _YAML, _DETAIL
+} from '@shell/config/query-params';
+
+import { clone } from '@shell/utils/object';
+
+export default {
+  name:       'AlertmanagerConfigReceiverCreateEdit',
+  components: {
+    ActionMenu,
+    ButtonGroup,
+    ReceiverConfig,
+    ResourceYaml
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.receiverName = this.$route.query.receiverName;
+
+    const alertmanagerConfigId = this.$route.params.alertmanagerconfigid;
+    const originalAlertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/find`, { type: MONITORING.ALERTMANAGERCONFIG, id: alertmanagerConfigId });
+    const alertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/clone`, { resource: originalAlertmanagerConfigResource });
+    const mode = this.$route.query.mode;
+
+    if (mode !== _CREATE) {
+      const existingReceiverData = (alertmanagerConfigResource.spec.receivers || []).find((receiverData) => {
+        return receiverData.name === this.receiverName;
+      });
+
+      if (existingReceiverData) {
+        this.receiverValue = existingReceiverData;
+      }
+    }
+
+    this.alertmanagerConfigId = alertmanagerConfigResource.id;
+    this.alertmanagerConfigResource = alertmanagerConfigResource;
+    this.alertmanagerConfigDetailRoute = alertmanagerConfigResource._detailLocation;
+  },
+
+  // take edit link and edit request from AlertmanagerConfig resource
+  // and pass it to ReceiverConfig as a prop
+
+  data() {
+    return {
+      actionMenuTargetElement:       null,
+      actionMenuTargetEvent:         null,
+      alertmanagerConfigId:          '',
+      alertmanagerConfigResource:    null,
+      alertmanagerConfigDetailRoute: null,
+      config:                        _CONFIG,
+      create:                        _CREATE,
+      detail:                        _DETAIL,
+      edit:                          _EDIT,
+      receiverActionMenuIsOpen:      false,
+      receiverName:                  '',
+      receiverValue:                 {},
+      showPreview:                   false,
+      view:                          _VIEW,
+      viewOptions:                   [
+        {
+          labelKey: 'resourceDetail.masthead.config',
+          value:    'config',
+        }, {
+          labelKey: 'resourceDetail.masthead.yaml',
+          value:    _YAML,
+        }
+      ],
+      yaml: _YAML
+    };
+  },
+
+  computed: {
+    currentView() {
+      return this.$route.query.currentView;
+    },
+    receiverActions() {
+      const alertmanagerConfigActions = this.alertmanagerConfigResource?.availableActions;
+
+      if (!alertmanagerConfigActions) {
+        return [];
+      }
+
+      // Receivers are not a separate resource, so they
+      // should only have a subset of the AlertmanagerConfig
+      // actions. So we take AlertmanagerConfig's actions and filter
+      // out any that don't apply.
+      // Example action data:
+      // {
+      //     "action": "goToEdit",
+      //     "label": "Edit Config",
+      //     "icon": "icon icon-edit",
+      //     "enabled": true
+      // },
+      return this.alertmanagerConfigResource.getReceiverActions(alertmanagerConfigActions);
+    },
+    resourceYaml() {
+      const resource = this.alertmanagerConfigResource;
+
+      const inStore = this.$store.getters['currentStore'](resource);
+      const schemas = this.$store.getters[`${ inStore }/all`](SCHEMA);
+      const clonedResource = clone(resource);
+
+      const out = createYaml(schemas, MONITORING.ALERTMANAGERCONFIG, clonedResource);
+
+      return out;
+    },
+    mode() {
+      // Use the route as a dependency of the
+      // computed property so that the component
+      // updates when you navigate between edit
+      // and view.
+      return this.$route.query.mode;
+    },
+    editorMode() {
+      if ( this.mode === this.view ) {
+        return EDITOR_MODES.VIEW_CODE;
+      } else if ( this.showPreview ) {
+        return EDITOR_MODES.DIFF_CODE;
+      }
+
+      return EDITOR_MODES.EDIT_CODE;
+    },
+    heading() {
+      switch (this.$route.query.mode) {
+      case this.create:
+        return this.t('monitoring.alertmanagerConfig.receiverFormNames.create');
+      case this.edit:
+        if (this.currentView === this.yaml || this.$route.query.as === this.yaml) {
+          // When you edit as YAML, you edit the whole AlertmanagerConfig
+          // at once, so the header is just "Edit AlertmanagerConfig"
+          return this.t('monitoring.alertmanagerConfig.receiverFormNames.editYaml');
+        }
+
+        // When you edit as a form, you edit only the receiver,
+        // so the form header is "Edit Receiver in AlertmanagerConfig"
+        return this.t('monitoring.alertmanagerConfig.receiverFormNames.edit');
+
+      default:
+        return this.t('monitoring.alertmanagerConfig.receiverFormNames.detail');
+      }
+    },
+  },
+
+  methods: {
+    // When creating or editing a receiver, in both cases
+    // it is actually the one existing AlertmanagerConfig
+    // being saved. Therefore we take the save from the
+    // AlertmanagerConfig resource and pass it into the
+    // receiver config form.
+    saveOverride(buttonDone) {
+      if (this.alertmanagerConfigResource.yamlError) {
+        this.alertmanagerConfigResource.errors = this.alertmanagerConfigResource.errors || [];
+        this.alertmanagerConfigResource.errors.push(this.alertmanagerConfigResource.yamlError);
+
+        buttonDone(false);
+
+        return;
+      }
+
+      this.alertmanagerConfigResource.save(...arguments);
+      this.redirectToAlertmanagerConfigDetail();
+    },
+    handleButtonGroupClick(event) {
+      if (event === this.yaml) {
+        this.goToEditYaml(this.view);
+      }
+      if (event === this.config) {
+        this.goToEdit(this.view);
+      }
+    },
+    toggleReceiverActionMenu() {
+      this.receiverActionMenuIsOpen = !this.receiverActionMenuIsOpen;
+    },
+    handleReceiverActionMenuClick(event) {
+      this.actionMenuTargetElement = this.$refs.actions;
+      this.actionMenuTargetEvent = event;
+      this.toggleReceiverActionMenu();
+    },
+    goToEdit() {
+    // 'goToEdit' is the exact name of an action for AlertmanagerConfig
+    // and this method executes the action.
+      this.$router.push(this.alertmanagerConfigResource.getEditReceiverConfigRoute(this.receiverValue.name, _EDIT));
+    },
+    goToEditYaml() {
+    // 'goToEditYaml' is the exact name of an action for AlertmanagerConfig
+    // and this method executes the action.
+      this.$router.push(this.alertmanagerConfigResource.getEditReceiverYamlRoute(this.receiverValue.name, _EDIT));
+    },
+    promptRemove(actionData) {
+      // 'promptRemove' is the exact name of an action for AlertmanagerConfig
+      // and this method executes the action.
+      // Get the name of the receiver to delete from the action info.
+      const nameOfReceiverToDelete = actionData.route.query.receiverName;
+      // Remove it from the configuration of the parent AlertmanagerConfig
+      // resource.
+      const existingReceivers = this.alertmanagerConfigResource.spec.receivers || [];
+      const receiversMinusDeletedItem = existingReceivers.filter((receiver) => {
+        return receiver.name !== nameOfReceiverToDelete;
+      });
+
+      this.alertmanagerConfigResource.spec.receivers = receiversMinusDeletedItem;
+      // After saving the AlertmanagerConfig, the resource has been deleted.
+      this.alertmanagerConfigResource.save(...arguments);
+      this.$router.push(this.alertmanagerConfigResource._detailLocation);
+    },
+    redirectToReceiverDetail(receiverName) {
+      return this.alertmanagerConfigResource.getReceiverDetailLink(receiverName);
+    },
+    redirectToAlertmanagerConfigDetail() {
+      const route = this.alertmanagerConfigResource._detailLocation;
+
+      this.$router.push(route);
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <header class="header">
+      <div class="title">
+        <div class="primaryheader">
+          <h1>
+            {{ heading }}
+          </h1>
+        </div>
+      </div>
+      <div class="actions-container">
+        <div class="actions">
+          <ButtonGroup
+            v-if="viewOptions && mode === view"
+            :value="currentView"
+            :options="viewOptions"
+            @input="handleButtonGroupClick"
+          />
+
+          <button
+            v-if="mode === view"
+            ref="actions"
+            aria-haspopup="true"
+            type="button"
+            class="btn role-multi-action actions"
+            @click="handleReceiverActionMenuClick"
+          >
+            <i class="icon icon-actions" />
+          </button>
+        </div>
+      </div>
+    </header>
+    <ResourceYaml
+      v-if="currentView === yaml && alertmanagerConfigResource"
+      ref="resourceyaml"
+      :value="alertmanagerConfigResource"
+      :mode="mode"
+      :initial-yaml-for-diff="null"
+      :yaml="resourceYaml"
+      :offer-preview="mode === edit"
+      :done-route="JSON.stringify(redirectToReceiverDetail(receiverName))"
+      :done-override="alertmanagerConfigDetailRoute"
+      :apply-hooks="alertmanagerConfigResource.applyHooks"
+      @error="e=>$emit('error', e)"
+    />
+    <ReceiverConfig
+      v-if="(currentView === config || currentView === detail) && alertmanagerConfigResource"
+      :value="receiverValue"
+      :mode="mode"
+      :alertmanager-config-id="alertmanagerConfigId"
+      :alertmanager-config-resource="alertmanagerConfigResource"
+      :save-override="saveOverride"
+    />
+    <ActionMenu
+      :custom-actions="receiverActions"
+      :open="receiverActionMenuIsOpen"
+      :use-custom-target-element="true"
+      :custom-target-element="actionMenuTargetElement"
+      :custom-target-event="actionMenuTargetEvent"
+      @close="receiverActionMenuIsOpen = false"
+      @goToEdit="goToEdit"
+      @goToEditYaml="goToEditYaml"
+      @promptRemove="promptRemove"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.header{
+  H1{
+    flex: 1;
+  }
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 0;
+  padding-bottom: 20px;
+}
+
+</style>
diff --git a/pkg/harvester/pages/c/_cluster/alertmanagerconfig/index.vue b/pkg/harvester/pages/c/_cluster/alertmanagerconfig/index.vue
new file mode 100644
index 00000000..94e7fcae
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/alertmanagerconfig/index.vue
@@ -0,0 +1,24 @@
+<script>
+
+export default {
+  name: 'AlertmanagerConfig',
+
+  data() {
+    return {};
+  },
+
+};
+</script>
+
+<template>
+  <div>AlertmanagerConfig</div>
+</template>
+
+<style lang='scss' scoped>
+.header{
+  display: flex;
+  H1{
+    flex: 1;
+  }
+}
+</style>
diff --git a/pkg/harvester/pages/c/_cluster/brand/index.vue b/pkg/harvester/pages/c/_cluster/brand/index.vue
new file mode 100644
index 00000000..b64349a2
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/brand/index.vue
@@ -0,0 +1,376 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import ColorInput from '@shell/components/form/ColorInput';
+import TypeDescription from '@shell/components/TypeDescription';
+import { Checkbox } from '@components/Form/Checkbox';
+import FileSelector from '@shell/components/form/FileSelector';
+import SimpleBox from '@shell/components/SimpleBox';
+import Loading from '@shell/components/Loading';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Banner } from '@components/Banner';
+import { allHash } from '@shell/utils/promise';
+import { MANAGEMENT } from '@shell/config/types';
+import { getVendor, setVendor } from '@shell/config/private-label';
+import { fetchOrCreateSetting } from '@shell/utils/settings';
+import { SETTING } from '@shell/config/settings';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { setFavIcon } from '@shell/utils/favicon';
+const Color = require('color');
+
+export default {
+  components: {
+    LabeledInput, Checkbox, FileSelector, Loading, SimpleBox, AsyncButton, Banner, ColorInput, TypeDescription
+  },
+  async fetch() {
+    const hash = await allHash({
+      uiPLSetting:        this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.PL }),
+      uiLogoDarkSetting:  fetchOrCreateSetting(this.$store, SETTING.LOGO_DARK, ''),
+      uiLogoLightSetting: fetchOrCreateSetting(this.$store, SETTING.LOGO_LIGHT, ''),
+      uiColorSetting:     fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),
+      uiLinkColorSetting: fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),
+      uiFaviconSetting:   fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
+    });
+
+    Object.assign(this, hash);
+    if (hash.uiLogoDarkSetting.value) {
+      try {
+        this.uiLogoDark = hash.uiLogoDarkSetting.value;
+        this.customizeLogo = true;
+      } catch {}
+    }
+    if (hash.uiLogoLightSetting.value) {
+      try {
+        this.uiLogoLight = hash.uiLogoLightSetting.value;
+        this.customizeLogo = true;
+      } catch {}
+    }
+    if (hash.uiFaviconSetting.value) {
+      try {
+        this.uiFavicon = hash.uiFaviconSetting.value;
+        this.customizeFavicon = true;
+      } catch {}
+    }
+    if (hash.uiColorSetting.value) {
+      this.uiColor = Color(hash.uiColorSetting.value).hex();
+      this.customizeColor = true;
+    }
+    if (hash.uiLinkColorSetting.value) {
+      this.uiLinkColor = Color(hash.uiLinkColorSetting.value).hex();
+      this.customizeLinkColor = true;
+    }
+  },
+  data() {
+    return {
+      vendor:             getVendor(),
+      uiPLSetting:        {},
+      uiLogoDarkSetting:  {},
+      uiLogoDark:         '',
+      uiLogoLightSetting: {},
+      uiLogoLight:        '',
+      customizeLogo:      false,
+      uiFaviconSetting:   {},
+      uiFavicon:          '',
+      customizeFavicon:   false,
+      uiColorSetting:     {},
+      uiColor:            null,
+      customizeColor:     false,
+      uiLinkColorSetting: {},
+      uiLinkColor:        null,
+      customizeLinkColor: false,
+      errors:             [],
+    };
+  },
+  computed: {
+    mode() {
+      const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
+
+      return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;
+    }
+  },
+  mounted() {
+    let uiColor = getComputedStyle(document.body).getPropertyValue('--primary');
+    let uiLinkColor = getComputedStyle(document.body).getPropertyValue('--link');
+    const suse = document.querySelector('.suse');
+
+    if (suse) {
+      uiColor = getComputedStyle(suse).getPropertyValue('--primary');
+      uiLinkColor = getComputedStyle(suse).getPropertyValue('--link');
+    }
+    // Only set the color to the default if not already set from the custom color
+    this.uiColor = this.uiColor || uiColor.trim();
+    this.uiLinkColor = this.uiLinkColor || uiLinkColor.trim();
+  },
+  methods: {
+    updateLogo(img, key) {
+      this[key] = img;
+    },
+    setError(e) {
+      this.errors = [];
+      this.errors.push(e);
+    },
+    async save(btnCB) {
+      this.uiPLSetting.value = this.uiPLSetting.value.replaceAll(/[\<>&=#()"]/gm, '');
+      if (this.customizeLogo) {
+        this.uiLogoLightSetting.value = this.uiLogoLight;
+        this.uiLogoDarkSetting.value = this.uiLogoDark;
+      } else {
+        this.uiLogoLightSetting.value = '';
+        this.uiLogoDarkSetting.value = '';
+      }
+      if (this.customizeFavicon) {
+        this.uiFaviconSetting.value = this.uiFavicon;
+      } else {
+        this.uiFaviconSetting.value = '';
+      }
+      if (this.customizeColor) {
+        this.uiColorSetting.value = Color(this.uiColor).rgb().string();
+      } else {
+        this.uiColorSetting.value = null;
+      }
+      if (this.customizeLinkColor) {
+        this.uiLinkColorSetting.value = Color(this.uiLinkColor).rgb().string();
+      } else {
+        this.uiLinkColorSetting.value = null;
+      }
+      this.errors = [];
+      try {
+        await Promise.all([
+          this.uiPLSetting.save(),
+          this.uiLogoDarkSetting.save(),
+          this.uiLogoLightSetting.save(),
+          this.uiColorSetting.save(),
+          this.uiLinkColorSetting.save(),
+          this.uiFaviconSetting.save()
+        ]);
+        if (this.uiPLSetting.value !== this.vendor) {
+          setVendor(this.uiPLSetting.value);
+        }
+        setFavIcon(this.$store);
+        btnCB(true);
+      } catch (err) {
+        this.errors.push(err);
+        btnCB(false);
+      }
+    },
+  }
+};
+</script>
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <h1 class="mb-20">
+      {{ t('branding.label') }}
+    </h1>
+    <TypeDescription resource="branding" />
+    <div>
+      <div class="row mb-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="uiPLSetting.value"
+            :label="t('branding.uiPL.label')"
+            :mode="mode"
+            :maxlength="100"
+          />
+        </div>
+      </div>
+      <h3 class="mt-20 mb-5 pb-5">
+        {{ t('branding.logos.label') }}
+      </h3>
+      <label class="text-label">
+        {{ t('branding.logos.tip', {}, true) }}
+      </label>
+      <div class="row mt-10 mb-20">
+        <Checkbox
+          v-model="customizeLogo"
+          :label="t('branding.logos.useCustom')"
+          :mode="mode"
+        />
+      </div>
+      <div
+        v-if="customizeLogo"
+        class="row mb-20"
+      >
+        <div class="col logo-container span-6">
+          <div class="mb-10">
+            <FileSelector
+              :byte-limit="20000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.logos.uploadLight')"
+              :mode="mode"
+              @error="setError"
+              @selected="updateLogo($event, 'uiLogoLight')"
+            />
+          </div>
+          <SimpleBox
+            v-if="uiLogoLight || uiLogoDark"
+            class="theme-light  mb-10"
+          >
+            <label class="text-muted">{{ t('branding.logos.lightPreview') }}</label>
+            <img
+              class="logo-preview"
+              :src="uiLogoLight ? uiLogoLight : uiLogoDark"
+            >
+          </SimpleBox>
+        </div>
+        <div class="col logo-container span-6">
+          <div class="mb-10">
+            <FileSelector
+              :byte-limit="20000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.logos.uploadDark')"
+              :mode="mode"
+              @error="setError"
+              @selected="updateLogo($event, 'uiLogoDark')"
+            />
+          </div>
+          <SimpleBox
+            v-if="uiLogoDark || uiLogoLight"
+            class="theme-dark  mb-10"
+          >
+            <label class="text-muted">{{ t('branding.logos.darkPreview') }}</label>
+            <img
+              class="logo-preview"
+              :src="uiLogoDark ? uiLogoDark : uiLogoLight"
+            >
+          </SimpleBox>
+        </div>
+      </div>
+      <h3 class="mt-20 mb-5 pb-5">
+        {{ t('branding.favicon.label') }}
+      </h3>
+      <label class="text-label">
+        {{ t('branding.favicon.tip', {}, true) }}
+      </label>
+      <div class="row mt-10 mb-20">
+        <Checkbox
+          v-model="customizeFavicon"
+          :label="t('branding.favicon.useCustom')"
+          :mode="mode"
+        />
+      </div>
+      <div
+        v-if="customizeFavicon"
+        class="row mb-20"
+      >
+        <div class="col logo-container span-12">
+          <div class="mb-10">
+            <FileSelector
+              :byte-limit="20000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.favicon.upload')"
+              :mode="mode"
+              @error="setError"
+              @selected="updateLogo($event, 'uiFavicon')"
+            />
+          </div>
+          <SimpleBox v-if="uiFavicon">
+            <label class="text-muted">{{ t('branding.favicon.preview') }}</label>
+            <img
+              class="logo-preview"
+              :src="uiFavicon"
+            >
+          </SimpleBox>
+        </div>
+      </div>
+      <h3 class="mt-40 mb-5 pb-0">
+        {{ t('branding.color.label') }}
+      </h3>
+      <label class="text-label">
+        {{ t('branding.color.tip', {}, true) }}
+      </label>
+      <div class="row mt-20">
+        <Checkbox
+          v-model="customizeColor"
+          :label="t('branding.color.useCustom')"
+          :mode="mode"
+        />
+      </div>
+      <div
+        v-if="customizeColor"
+        class="row mt-20 mb-20"
+      >
+        <ColorInput
+          v-model="uiColor"
+          component-testid="primary"
+        />
+      </div>
+      <h3 class="mt-40 mb-5 pb-0">
+        {{ t('branding.linkColor.label') }}
+      </h3>
+      <label class="text-label">
+        {{ t('branding.linkColor.tip', {}, true) }}
+      </label>
+      <div class="row mt-20">
+        <Checkbox
+          v-model="customizeLinkColor"
+          :label="t('branding.linkColor.useCustom')"
+          :mode="mode"
+        />
+      </div>
+      <div
+        v-if="customizeLinkColor"
+        class="row mt-20 mb-20"
+      >
+        <ColorInput
+          v-model="uiLinkColor"
+          class="col"
+          component-testid="link"
+        />
+        <span class="col link-example">
+          <a>
+            {{ t('branding.linkColor.example') }}
+          </a>
+        </span>
+      </div>
+    </div>
+    <template v-for="err in errors">
+      <Banner
+        :key="err"
+        color="error"
+        :label="err"
+      />
+    </template>
+    <div v-if="mode === 'edit'">
+      <AsyncButton
+        component-testid="branding-apply"
+        class="pull-right mt-20"
+        mode="apply"
+        @click="save"
+      />
+    </div>
+  </div>
+</template>
+
+  <style scoped lang='scss'>
+  .link-example {
+    display: flex;
+    align-content: center;
+    a {
+      margin: auto;
+    }
+  }
+  .logo-container {
+      display: flex;
+      flex-direction: column;
+      ::v-deep.simple-box {
+          position: relative;
+          flex: 1;
+          max-height: 120px;
+          .content {
+            height: 100%;
+            display: flex;
+          }
+          .logo-preview {
+            max-width: 100%;
+          }
+      }
+      & LABEL {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+      }
+  }
+  </style>
diff --git a/pkg/harvester/pages/c/_cluster/console/_uid/serial.vue b/pkg/harvester/pages/c/_cluster/console/_uid/serial.vue
new file mode 100644
index 00000000..91c37b22
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/console/_uid/serial.vue
@@ -0,0 +1,53 @@
+<script>
+import { HCI } from '../../../../../types';
+import SerialConsole from '../../../../../components/SerialConsole';
+import Loading from '@shell/components/Loading';
+
+export default {
+  components: { SerialConsole, Loading },
+
+  async fetch() {
+    this.rows = await this.$store.dispatch('harvester/findAll', { type: HCI.VMI });
+  },
+
+  data() {
+    return { uid: this.$route.params.uid };
+  },
+
+  computed: {
+    vmi() {
+      const vmiList = this.$store.getters['harvester/all'](HCI.VMI) || [];
+      const vmi = vmiList.find( (VMI) => {
+        return VMI?.metadata?.ownerReferences?.[0]?.uid === this.uid;
+      });
+
+      return vmi;
+    },
+  },
+
+  mounted() {
+    window.addEventListener('beforeunload', () => {
+      this.$refs.serialConsole.close();
+    });
+  },
+
+  head() {
+    return { title: this.vmi?.metadata?.name };
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <SerialConsole
+    v-else
+    ref="serialConsole"
+    v-model="vmi"
+  />
+</template>
+
+<style lang="scss" scoped>
+  body, #__nuxt, #__layout, main {
+    height: 100%;
+  }
+</style>
diff --git a/pkg/harvester/pages/c/_cluster/console/_uid/vnc.vue b/pkg/harvester/pages/c/_cluster/console/_uid/vnc.vue
new file mode 100644
index 00000000..78567847
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/console/_uid/vnc.vue
@@ -0,0 +1,55 @@
+<script>
+import { HCI } from '../../../../../types';
+import NovncConsoleWrapper from '../../../../../components/novnc/NovncConsoleWrapper.vue';
+import Loading from '@shell/components/Loading';
+
+export default {
+  components: { NovncConsoleWrapper, Loading },
+
+  async fetch() {
+    this.rows = await this.$store.dispatch('harvester/findAll', { type: HCI.VMI });
+  },
+
+  data() {
+    return { uid: this.$route.params.uid };
+  },
+
+  computed: {
+    vmi() {
+      const vmiList = this.$store.getters['harvester/all'](HCI.VMI) || [];
+
+      const vmi = vmiList.find( (VMI) => {
+        return VMI?.metadata?.ownerReferences?.[0]?.uid === this.uid;
+      });
+
+      return vmi;
+    },
+  },
+
+  mounted() {
+    window.addEventListener('beforeunload', () => {
+      this.$refs.console.close();
+    });
+  },
+
+  head() {
+    return { title: this.vmi?.metadata?.name };
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <NovncConsoleWrapper
+    v-else
+    ref="console"
+    v-model="vmi"
+    class="novnc-wrapper"
+  />
+</template>
+
+<style>
+HTML, BODY, MAIN, #__nuxt, #__layout, #app, .vm-console, .vm-console > DIV, .vm-console > DIV > DIV {
+  height: 100%;
+}
+</style>
diff --git a/pkg/harvester/pages/c/_cluster/index.vue b/pkg/harvester/pages/c/_cluster/index.vue
new file mode 100644
index 00000000..ef2a1d4c
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/index.vue
@@ -0,0 +1,23 @@
+<script>
+import { PRODUCT_NAME } from '../../../config/harvester';
+import { HCI } from '../../../types';
+
+export default {
+  middleware({ redirect, route }) {
+    return redirect({
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: {
+        ...route.params,
+        product:  PRODUCT_NAME,
+        resource: HCI.DASHBOARD
+      }
+    });
+  }
+};
+</script>
+
+<template>
+  <div>
+    This is harvester Dashboard.
+  </div>
+</template>
diff --git a/pkg/harvester/pages/c/_cluster/members/index.vue b/pkg/harvester/pages/c/_cluster/members/index.vue
new file mode 100644
index 00000000..4d600620
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/members/index.vue
@@ -0,0 +1,22 @@
+<script>
+import ExplorerMembers from '@shell/components/ExplorerMembers';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../../../config/harvester';
+import { MANAGEMENT } from '@shell/config/types';
+export default {
+  components: { ExplorerMembers },
+  computed:   {
+    createLocationOverride() {
+      return {
+        name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+        params: {
+          product:  HARVESTER_PRODUCT,
+          cluster:  this.$store.getters['currentCluster']?.id,
+          resource: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING
+        }
+      };
+    }
+  }
+};
+</script>
+
+<template><ExplorerMembers :create-location-override="createLocationOverride" v-bind="$attrs" /></template>
diff --git a/pkg/harvester/pages/c/_cluster/projectsnamespaces.vue b/pkg/harvester/pages/c/_cluster/projectsnamespaces.vue
new file mode 100644
index 00000000..13df4ea9
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/projectsnamespaces.vue
@@ -0,0 +1,35 @@
+<script lang="ts">
+import Vue from 'vue';
+import { Location } from 'vue-router';
+import ExplorerProjectsNamespaces from '@shell/components/ExplorerProjectsNamespaces.vue';
+import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../../config/harvester';
+import { MANAGEMENT, NAMESPACE } from '@shell/config/types';
+interface Data {
+  createProjectLocation: Location,
+  createNamespaceLocation: Location
+}
+export default Vue.extend<Data, any, any, any>({
+  components: { ExplorerProjectsNamespaces },
+  data() {
+    return {
+      createProjectLocation: {
+        name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+        params: {
+          product:  HARVESTER_PRODUCT,
+          cluster:  this.$store.getters['currentCluster']?.id,
+          resource: MANAGEMENT.PROJECT
+        },
+      },
+      createNamespaceLocation: {
+        name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
+        params: {
+          product:  HARVESTER_PRODUCT,
+          resource: NAMESPACE
+        },
+      }
+    };
+  }
+});
+</script>
+
+<template><ExplorerProjectsNamespaces v-bind="$attrs" :create-project-location-override="createProjectLocation" :create-namespace-location-override="createNamespaceLocation" /></template>
diff --git a/pkg/harvester/pages/c/_cluster/support/index.vue b/pkg/harvester/pages/c/_cluster/support/index.vue
new file mode 100644
index 00000000..c6de7830
--- /dev/null
+++ b/pkg/harvester/pages/c/_cluster/support/index.vue
@@ -0,0 +1,251 @@
+<script>
+import { mapGetters } from 'vuex';
+import { PLUGIN_DEVELOPER, DEV } from '@shell/store/prefs';
+import BannerGraphic from '@shell/components/BannerGraphic';
+import IndentedPanel from '@shell/components/IndentedPanel';
+import HarvesterSupportBundle from '../../../../dialog/HarvesterSupportBundle';
+import CommunityLinks from '@shell/components/CommunityLinks';
+import { SCHEMA } from '@shell/config/types';
+import { HCI } from '../../../../types';
+
+export default {
+  components: {
+    BannerGraphic,
+    IndentedPanel,
+    CommunityLinks,
+    HarvesterSupportBundle
+  },
+
+  data() {
+    return {
+      options: {
+        'footer.docs':   'https://docs.harvesterhci.io',
+        'footer.forums': 'https://forums.rancher.com/c/harvester/',
+        'footer.slack':  'https://slack.rancher.io',
+        'footer.issue':  'https://github.com/harvester/harvester/issues/new/choose'
+      }
+    };
+  },
+
+  computed: {
+    ...mapGetters(['currentCluster']),
+
+    dev() {
+      try {
+        return this.$store.getters['prefs/get'](PLUGIN_DEVELOPER);
+      } catch {
+        return this.$store.getters['prefs/get'](DEV);
+      }
+    },
+
+    title() {
+      return 'harvester.support.title';
+    },
+
+    showSupportBundle() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/byId`](
+        SCHEMA,
+        HCI.SUPPORT_BUNDLE
+      );
+    },
+
+    internalPrefix() {
+      const host = window.location.host;
+      const prefix = window.location.pathname.replace(this.$route.path, '');
+      const params = this.$route?.params;
+
+      return {
+        host, prefix, params
+      };
+    },
+
+    rancherLink() {
+      const { host, prefix, params } = this.internalPrefix;
+
+      return `https://${ host }${ prefix }/c/${ params.cluster }/explorer`;
+    },
+
+    longhornLink() {
+      const { host, params } = this.internalPrefix;
+
+      return `https://${ host }/k8s/clusters/${ params.cluster }/api/v1/namespaces/longhorn-system/services/http:longhorn-frontend:80/proxy/#/dashboard`;
+    }
+  },
+
+  methods: {
+    open() {
+      this.$store.commit('harvester-common/toggleBundleModal', true);
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <BannerGraphic :title="t(title, {}, true)" />
+
+    <IndentedPanel>
+      <div class="content mt-20">
+        <div class="promo">
+          <div
+            v-if="showSupportBundle"
+            class="box mb-20 box-primary"
+          >
+            <h2>
+              {{ t('harvester.modal.bundle.title') }}
+            </h2>
+            <div>
+              <p class="pb-10">
+                {{ t('harvester.modal.bundle.titleDescription') }}
+              </p>
+              <button
+                class="btn role-secondary btn-sm"
+                type="button"
+                @click="open"
+              >
+                {{ t('harvester.modal.bundle.title') }}
+              </button>
+            </div>
+          </div>
+          <div
+            class="box box-primary"
+            :class="{'mb-20': dev }"
+          >
+            <h2>
+              {{ t('harvester.support.kubeconfig.title') }}
+            </h2>
+            <div>
+              <p class="pb-10">
+                {{ t('harvester.support.kubeconfig.titleDescription') }}
+              </p>
+              <button
+                class="btn role-secondary btn-sm"
+                type="button"
+                @click="currentCluster.downloadKubeConfig()"
+              >
+                {{ t('harvester.support.kubeconfig.title') }}
+              </button>
+            </div>
+          </div>
+          <div
+            v-if="dev"
+            class="row"
+          >
+            <div class="col span-6 box box-primary">
+              <h2>
+                <a
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                  :href="rancherLink"
+                >{{ t('harvester.support.internal.rancher.title') }} <i class="icon icon-external-link" /></a>
+              </h2>
+              <div>
+                <p class="warning">
+                  <t
+                    k="harvester.support.internal.rancher.titleDescription"
+                    :raw="true"
+                  />
+                </p>
+              </div>
+            </div>
+            <div class="col span-6 box box-primary">
+              <h2>
+                <a
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                  :href="longhornLink"
+                >{{ t('harvester.support.internal.longhorn.title') }} <i class="icon icon-external-link" /></a>
+              </h2>
+              <div>
+                <p class="warning">
+                  <t
+                    k="harvester.support.internal.longhorn.titleDescription"
+                    :raw="true"
+                  />
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="community">
+          <CommunityLinks :link-options="options" />
+        </div>
+        <div class="external">
+          <a
+            href="https://www.suse.com/suse-harvester/support-matrix/all-supported-versions"
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+          >{{ t('harvester.support.community.learnMore') }} <i class="icon icon-external-link" /></a>
+          or
+          <a
+            href="https://www.suse.com/products/harvester/"
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+          >{{ t('harvester.support.community.pricing') }} <i class="icon icon-external-link" /></a>
+        </div>
+      </div>
+    </IndentedPanel>
+    <HarvesterSupportBundle v-if="showSupportBundle" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: grid;
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  grid-template-columns: 70% 30%;
+}
+
+.only-community {
+  display: grid;
+  grid-template-columns: 100%;
+}
+
+.community {
+  border-left: 1px solid var(--border);
+  padding-left: 20px;
+  > h2 {
+    font-size: 18px;
+    font-weight: 300;
+    margin-bottom: 20px;
+  }
+  .support-link {
+    margin: 10px 0;
+  }
+}
+
+.box {
+  padding: 20px;
+  border: 1px solid var(--border);
+
+  &.box-primary {
+    border-color: var(--primary);
+  }
+
+  > h2 {
+    font-size: 20px;
+    font-weight: 300;
+  }
+
+  > div {
+    font-weight: 300;
+    line-height: 18px;
+    opacity: 0.8;
+  }
+}
+
+.role-secondary {
+  &:focus {
+    background-color: transparent;
+  }
+}
+
+.warning {
+  margin: 0 -5px 0 -5px;
+  padding: 5px;
+  background-color: var(--warning-banner-bg);
+}
+</style>
diff --git a/pkg/harvester/pages/index.vue b/pkg/harvester/pages/index.vue
deleted file mode 100644
index c7c56b3d..00000000
--- a/pkg/harvester/pages/index.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-
-export default { name: 'HarvesterDashboard' };
-</script>
-
-<template>
-  <span>Hello harvester!</span>
-</template>
diff --git a/pkg/harvester/product.ts b/pkg/harvester/product.ts
index 2c94b6f6..dc7ff85c 100644
--- a/pkg/harvester/product.ts
+++ b/pkg/harvester/product.ts
@@ -1,62 +1,852 @@
-import { IPlugin } from '@shell/core/types';
-import { PRODUCT_NAME, BLANK_CLUSTER, LOGO as logo } from './config/harvester';
-import { HCI } from './types';
+import {
+  NODE,
+  CONFIG_MAP,
+  NAMESPACE,
+  VIRTUAL_TYPES,
+  MANAGEMENT,
+  PVC,
+  NETWORK_ATTACHMENT,
+  MONITORING,
+  LOGGING,
+  STORAGE_CLASS,
+  SECRET
+} from '@shell/config/types';
+import {
+  STATE,
+  NAME_UNLINKED,
+  NAME as NAME_COL,
+  AGE,
+  NAMESPACE as NAMESPACE_COL,
+  LOGGING_OUTPUT_PROVIDERS,
+  OUTPUT,
+  CLUSTER_OUTPUT,
+  CONFIGURED_PROVIDERS,
+  SUB_TYPE,
+  ADDRESS,
+} from '@shell/config/table-headers';
+import { HCI, VOLUME_SNAPSHOT } from './types';
+import {
+  IMAGE_DOWNLOAD_SIZE,
+  FINGERPRINT,
+  IMAGE_PROGRESS,
+  SNAPSHOT_TARGET_VOLUME,
+} from './config/table-headers';
 
-export function init($plugin: IPlugin, store: any) {
+// import { IF_HAVE } from '@shell/store/type-map';
+const IF_HAVE = { MULTI_CLUSTER: false };
+
+const TEMPLATE = HCI.VM_VERSION;
+const MONITORING_GROUP = 'Monitoring & Logging::Monitoring';
+const LOGGING_GROUP = 'Monitoring & Logging::Logging';
+
+export const PRODUCT_NAME = 'harvester';
+
+export const IP_POOL_HEADERS = [
+  STATE,
+  NAME_COL,
+  {
+    name:     'subnet',
+    labelKey: 'harvester.ipPool.subnet.label',
+    value:    'subnetDisplay',
+  },
+  {
+    name:     'availableIP',
+    labelKey: 'harvester.ipPool.availableIP.label',
+    value:    'status.available',
+  },
+  AGE
+];
+
+export function init($plugin: any, store: any) {
   const {
-    basicType,
-    configureType,
     product,
+    basicType,
+    headers,
+    configureType,
     virtualType,
+    weightGroup,
+    weightType,
   } = $plugin.DSL(store, PRODUCT_NAME);
 
-  const isSingleProduct = process.env.rancherEnv === PRODUCT_NAME;
+  const isSingleVirtualCluster = process.env.rancherEnv === PRODUCT_NAME;
 
-  if (isSingleProduct) {
+  if (isSingleVirtualCluster) {
     const home = {
-      name:      `${ PRODUCT_NAME }-c-cluster`,
-      path:      `/${ PRODUCT_NAME }/c/:cluster`
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: {
+        product:  PRODUCT_NAME,
+        resource: HCI.DASHBOARD
+      }
     };
 
     store.dispatch('setIsSingleProduct', {
+      logo:              require(`@shell/assets/images/providers/harvester.svg`),
       productNameKey:    'harvester.productLabel',
       getVersionInfo:    (store: any) => store.getters[`${ PRODUCT_NAME }/byId`]?.(HCI.SETTING, 'server-version')?.value || 'unknown',
       afterLoginRoute:   home,
       logoRoute:         home,
-      supportCustomLogo: true,
-      logo,
+      supportCustomLogo: true
     });
   }
 
   product({
-    inStore:               'management',
+    inStore:               PRODUCT_NAME,
+    removable:             false,
     showNamespaceFilter:   true,
     hideKubeShell:         true,
     hideKubeConfig:        true,
     showClusterSwitcher:   true,
     hideCopyConfig:        true,
     hideSystemResources:   true,
-    hideNamespaceLocation: true,
-    weight:                100,
-    to:                    {
-      name:      `${ PRODUCT_NAME }-c-cluster`,
-      path:      `/${ PRODUCT_NAME }/c/:cluster`,
-      params:      {
-        product: PRODUCT_NAME,
-        cluster: BLANK_CLUSTER,
-        pkg:     PRODUCT_NAME
+    customNamespaceFilter: true,
+    typeStoreMap:          {
+      [MANAGEMENT.PROJECT]:                       'management',
+      [MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING]: 'management',
+      [MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING]: 'management'
+    },
+    supportRoute: { name: `${ PRODUCT_NAME }-c-cluster-support` },
+    to:           {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: {
+        product:  PRODUCT_NAME,
+        resource: HCI.DASHBOARD
       }
-    }
+    },
+    hideNamespaceLocation: true,
   });
 
   basicType([HCI.DASHBOARD]);
   virtualType({
     labelKey: 'harvester.dashboard.label',
+    group:    'Root',
     name:     HCI.DASHBOARD,
+    weight:   500,
     route:    {
-      name:      `${ PRODUCT_NAME }-c-cluster`,
-      path:      `/${ PRODUCT_NAME }/c/:cluster`
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: {
+        product:  PRODUCT_NAME,
+        resource: HCI.DASHBOARD
+      }
     }
   });
   configureType(HCI.DASHBOARD, { showListMasthead: false });
+
+  configureType(HCI.HOST, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.HOST }
+    },
+    resource:       NODE,
+    resourceDetail: HCI.HOST,
+    resourceEdit:   HCI.HOST
+  });
+
+  configureType(HCI.HOST, { isCreatable: false, isEditable: true });
+  basicType([HCI.HOST]);
+
+  virtualType({
+    ifHaveType: NODE,
+    labelKey:   'harvester.host.label',
+    group:      'Root',
+    name:       HCI.HOST,
+    namespaced: true,
+    weight:     399,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.HOST }
+    },
+    exact: false
+  });
+
+  // multiVirtualCluster
+  basicType(['cluster-members'], 'rbac');
+  virtualType({
+    ifHave:     IF_HAVE.MULTI_CLUSTER,
+    labelKey:   'members.clusterMembers',
+    group:      'root',
+    namespaced: false,
+    name:       VIRTUAL_TYPES.CLUSTER_MEMBERS,
+    weight:     100,
+    route:      { name: `${ PRODUCT_NAME }-c-cluster-members` },
+    exact:      true,
+    ifHaveType: {
+      type:  MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
+      store: 'management'
+    }
+  });
+
+  basicType([HCI.VM]);
+  virtualType({
+    labelKey:   'harvester.virtualMachine.label',
+    group:      'root',
+    name:       HCI.VM,
+    namespaced: true,
+    weight:     299,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VM }
+    },
+    exact: false
+  });
+
+  basicType([HCI.VOLUME]);
+  configureType(HCI.VOLUME, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VOLUME }
+    },
+    resource:       PVC,
+    resourceDetail: HCI.VOLUME,
+    resourceEdit:   HCI.VOLUME
+  });
+  virtualType({
+    labelKey:   'harvester.volume.label',
+    group:      'root',
+    ifHaveType: PVC,
+    name:       HCI.VOLUME,
+    namespaced: true,
+    weight:     199,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VOLUME }
+    },
+    exact: false
+  });
+
+  basicType([HCI.IMAGE]);
+  headers(HCI.IMAGE, [
+    STATE,
+    NAME_COL,
+    NAMESPACE_COL,
+    IMAGE_PROGRESS,
+    IMAGE_DOWNLOAD_SIZE,
+    AGE
+  ]);
+  virtualType({
+    labelKey:   'harvester.image.label',
+    group:      'root',
+    name:       HCI.IMAGE,
+    namespaced: true,
+    weight:     198,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.IMAGE }
+    },
+    exact: false
+  });
+
+  basicType(['projects-namespaces']);
+  virtualType({
+    ifHave:     IF_HAVE.MULTI_CLUSTER,
+    labelKey:   'harvester.projectNamespace.label',
+    group:      'root',
+    namespaced: true,
+    name:       'projects-namespaces',
+    weight:     98,
+    route:      { name: `${ PRODUCT_NAME }-c-cluster-projectsnamespaces` },
+    exact:      true,
+  });
+
+  // singleVirtualCluster
+  if (isSingleVirtualCluster) {
+    headers(NAMESPACE, [STATE, NAME_UNLINKED, AGE]);
+    basicType([NAMESPACE]);
+    virtualType({
+      labelKey:   'harvester.namespace.label',
+      name:       NAMESPACE,
+      namespaced: true,
+      weight:     89,
+      route:      {
+        name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+        params: { resource: NAMESPACE }
+      },
+      exact: false,
+    });
+  }
+
+  basicType([
+    HCI.ALERTMANAGERCONFIG
+  ], MONITORING_GROUP);
+
+  basicType([
+    HCI.CLUSTER_FLOW,
+    HCI.CLUSTER_OUTPUT,
+    HCI.FLOW,
+    HCI.OUTPUT,
+  ], LOGGING_GROUP);
+
+  weightGroup('Monitoring', 2, true);
+  weightGroup('Logging', 1, true);
+
+  headers(HCI.ALERTMANAGERCONFIG, [
+    STATE,
+    NAME_COL,
+    NAMESPACE_COL,
+    {
+      name:      'receivers',
+      labelKey:  'tableHeaders.receivers',
+      formatter: 'ReceiverIcons',
+      value:     'name'
+    },
+  ]);
+
+  configureType(HCI.ALERTMANAGERCONFIG, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.ALERTMANAGERCONFIG },
+    },
+    resource:       MONITORING.ALERTMANAGERCONFIG,
+    resourceDetail: HCI.ALERTMANAGERCONFIG,
+    resourceEdit:   HCI.ALERTMANAGERCONFIG
+  });
+
+  virtualType({
+    ifHaveType: MONITORING.ALERTMANAGERCONFIG,
+    labelKey:   'harvester.monitoring.alertmanagerConfig.label',
+    name:       HCI.ALERTMANAGERCONFIG,
+    namespaced: true,
+    weight:     87,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.ALERTMANAGERCONFIG }
+    },
+    exact: false,
+  });
+
+  configureType(HCI.CLUSTER_FLOW, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.CLUSTER_FLOW },
+    },
+    resource:       LOGGING.CLUSTER_FLOW,
+    resourceDetail: HCI.CLUSTER_FLOW,
+    resourceEdit:   HCI.CLUSTER_FLOW
+  });
+
+  virtualType({
+    labelKey:   'harvester.logging.clusterFlow.label',
+    name:       HCI.CLUSTER_FLOW,
+    namespaced: true,
+    weight:     79,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.CLUSTER_FLOW }
+    },
+    exact: false,
+  });
+
+  configureType(HCI.CLUSTER_OUTPUT, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.CLUSTER_OUTPUT },
+    },
+    resource:       LOGGING.CLUSTER_OUTPUT,
+    resourceDetail: HCI.CLUSTER_OUTPUT,
+    resourceEdit:   HCI.CLUSTER_OUTPUT
+  });
+
+  virtualType({
+    labelKey:   'harvester.logging.clusterOutput.label',
+    name:       HCI.CLUSTER_OUTPUT,
+    namespaced: true,
+    weight:     78,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.CLUSTER_OUTPUT }
+    },
+    exact: false,
+  });
+
+  configureType(HCI.FLOW, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.FLOW },
+    },
+    resource:       LOGGING.FLOW,
+    resourceDetail: HCI.FLOW,
+    resourceEdit:   HCI.FLOW
+  });
+
+  virtualType({
+    labelKey:   'harvester.logging.flow.label',
+    name:       HCI.FLOW,
+    namespaced: true,
+    weight:     77,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.FLOW }
+    },
+    exact: false,
+  });
+
+  configureType(HCI.OUTPUT, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.OUTPUT },
+    },
+    resource:       LOGGING.OUTPUT,
+    resourceDetail: HCI.OUTPUT,
+    resourceEdit:   HCI.OUTPUT
+  });
+
+  virtualType({
+    labelKey:   'harvester.logging.output.label',
+    name:       HCI.OUTPUT,
+    namespaced: true,
+    weight:     76,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.OUTPUT }
+    },
+    exact: false,
+  });
+
+  headers(HCI.FLOW, [STATE, NAME_COL, NAMESPACE_COL, OUTPUT, CLUSTER_OUTPUT, CONFIGURED_PROVIDERS, AGE]);
+  headers(HCI.OUTPUT, [STATE, NAME_COL, NAMESPACE_COL, LOGGING_OUTPUT_PROVIDERS, AGE]);
+  headers(HCI.CLUSTER_FLOW, [STATE, NAME_COL, NAMESPACE_COL, CLUSTER_OUTPUT, CONFIGURED_PROVIDERS, AGE]);
+  headers(HCI.CLUSTER_OUTPUT, [STATE, NAME_COL, NAMESPACE_COL, LOGGING_OUTPUT_PROVIDERS, AGE]);
+
+  basicType(
+    [
+      HCI.CLUSTER_NETWORK,
+      HCI.NETWORK_ATTACHMENT,
+      HCI.LB,
+      HCI.IP_POOL,
+    ],
+    'networks'
+  );
+
+  basicType(
+    [
+      HCI.BACKUP,
+      HCI.SNAPSHOT,
+      HCI.VM_SNAPSHOT,
+    ],
+    'backupAndSnapshot'
+  );
+
+  weightGroup('networks', 300, true);
+  weightType(NAMESPACE, 299, true);
+  weightGroup('backupAndSnapshot', 289, true);
+
+  basicType(
+    [
+      TEMPLATE,
+      HCI.SSH,
+      HCI.CLOUD_TEMPLATE,
+      HCI.STORAGE,
+      HCI.SR_IOV,
+      HCI.PCI_DEVICE,
+      HCI.SR_IOVGPU_DEVICE,
+      HCI.VGPU_DEVICE,
+      HCI.ADD_ONS,
+      HCI.SECRET,
+      HCI.SETTING
+    ],
+    'advanced'
+  );
+
+  configureType(HCI.CLUSTER_NETWORK, {
+    realResource: HCI.SETTING,
+    showState:    false
+  });
+
+  virtualType({
+    labelKey:   'harvester.vmTemplate.label',
+    group:      'root',
+    name:       TEMPLATE,
+    namespaced: true,
+    weight:     289,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: TEMPLATE }
+    },
+    exact: false
+  });
+
+  configureType(HCI.BACKUP, { showListMasthead: false, showConfigView: false });
+  virtualType({
+    labelKey:   'harvester.backup.label',
+    name:       HCI.BACKUP,
+    namespaced: true,
+    weight:     200,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.BACKUP }
+    },
+    exact: false
+  });
+
+  configureType(HCI.VLAN_CONFIG, { hiddenNamespaceGroupButton: true });
+
+  configureType(HCI.CLUSTER_NETWORK, { showListMasthead: false });
+  virtualType({
+    labelKey:   'harvester.clusterNetwork.title',
+    name:       HCI.CLUSTER_NETWORK,
+    ifHaveType: HCI.CLUSTER_NETWORK,
+    namespaced: false,
+    weight:     189,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.CLUSTER_NETWORK }
+    },
+    exact: false,
+  });
+
+  configureType(HCI.NETWORK_ATTACHMENT, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.NETWORK_ATTACHMENT }
+    },
+    resource:       NETWORK_ATTACHMENT,
+    resourceDetail: HCI.NETWORK_ATTACHMENT,
+    resourceEdit:   HCI.NETWORK_ATTACHMENT
+  });
+
+  virtualType({
+    labelKey:   'harvester.network.label',
+    name:       HCI.NETWORK_ATTACHMENT,
+    namespaced: true,
+    weight:     188,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.NETWORK_ATTACHMENT }
+    },
+    exact: false
+  });
+
+  configureType(HCI.SNAPSHOT, {
+    isCreatable: false,
+    location:    {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.SNAPSHOT },
+    },
+    resource:       VOLUME_SNAPSHOT,
+    resourceDetail: HCI.SNAPSHOT,
+    resourceEdit:   HCI.SNAPSHOT,
+  });
+  headers(HCI.SNAPSHOT, [STATE, NAME_COL, NAMESPACE_COL, SNAPSHOT_TARGET_VOLUME, AGE]);
+  virtualType({
+    labelKey:   'harvester.snapshot.label',
+    name:       HCI.SNAPSHOT,
+    namespaced: true,
+    weight:     190,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.SNAPSHOT }
+    },
+    exact: false,
+  });
+
+  configureType(HCI.VM_SNAPSHOT, {
+    showListMasthead: false,
+    location:         {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VM_SNAPSHOT }
+    },
+    resource:       HCI.BACKUP,
+    resourceDetail: HCI.VM_SNAPSHOT,
+    resourceEdit:   HCI.VM_SNAPSHOT
+  });
+
+  virtualType({
+    labelKey:   'harvester.vmSnapshot.label',
+    name:       HCI.VM_SNAPSHOT,
+    namespaced: true,
+    weight:     191,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VM_SNAPSHOT }
+    },
+    exact: false
+  });
+
+  headers(HCI.SSH, [STATE, NAME_COL, NAMESPACE_COL, FINGERPRINT, AGE]);
+  virtualType({
+    labelKey:   'harvester.sshKey.label',
+    name:       HCI.SSH,
+    namespaced: true,
+    weight:     170,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.SSH }
+    },
+    exact: false
+  });
+
+  configureType(HCI.CLOUD_TEMPLATE, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.CLOUD_TEMPLATE }
+    },
+    resource:       CONFIG_MAP,
+    resourceDetail: HCI.CLOUD_TEMPLATE,
+    resourceEdit:   HCI.CLOUD_TEMPLATE
+  });
+
+  virtualType({
+    labelKey:   'harvester.cloudTemplate.label',
+    name:       HCI.CLOUD_TEMPLATE,
+    namespaced: true,
+    weight:     87,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.CLOUD_TEMPLATE }
+    },
+    exact: false
+  });
+
+  headers(HCI.SECRET, [
+    STATE,
+    NAME_COL,
+    NAMESPACE_COL,
+    SUB_TYPE,
+    {
+      name:      'data',
+      labelKey:  'tableHeaders.data',
+      value:     'dataPreview',
+      formatter: 'SecretData'
+    },
+    AGE
+  ]);
+
+  configureType(HCI.SECRET, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.SECRET }
+    },
+    resource:           SECRET,
+    resourceDetail:     HCI.SECRET,
+    resourceEdit:       HCI.SECRET,
+    notFilterNamespace: ['cattle-monitoring-system', 'cattle-logging-system']
+  });
+
+  virtualType({
+    labelKey:   'harvester.secret.label',
+    name:       HCI.SECRET,
+    namespaced: true,
+    weight:     -999,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.SECRET }
+    },
+    exact: false
+  });
+
+  // settings
+  configureType(HCI.SETTING, { isCreatable: false });
+  virtualType({
+    ifHaveType: HCI.SETTING,
+    ifHaveVerb: 'POST',
+    labelKey:   'harvester.setting.label',
+    name:       HCI.SETTING,
+    namespaced: true,
+    weight:     -1000,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.SETTING }
+    },
+    exact: false
+  });
+
+  configureType(HCI.STORAGE, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.STORAGE }
+    },
+    resource:       STORAGE_CLASS,
+    resourceDetail: HCI.STORAGE,
+    resourceEdit:   HCI.STORAGE,
+    isCreatable:    true,
+  });
+  virtualType({
+    labelKey:   'harvester.storage.title',
+    group:      'root',
+    ifHaveType: STORAGE_CLASS,
+    name:       HCI.STORAGE,
+    namespaced: false,
+    weight:     79,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.STORAGE }
+    },
+    exact: false,
+  });
+
+  virtualType({
+    label:      'PCI Devices',
+    group:      'advanced',
+    weight:     14,
+    name:       HCI.PCI_DEVICE,
+    namespaced: false,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.PCI_DEVICE }
+    },
+    exact: false,
+  });
+
+  configureType(HCI.PCI_DEVICE, {
+    isCreatable:                false,
+    hiddenNamespaceGroupButton: true,
+    listGroups:                 [
+      {
+        icon:       'icon-list-grouped',
+        value:      'description',
+        field:      'groupByDevice',
+        hideColumn: 'description',
+        tooltipKey: 'resourceTable.groupBy.device'
+      },
+      {
+        icon:       'icon-cluster',
+        value:      'node',
+        field:      'groupByNode',
+        hideColumn: 'node',
+        tooltipKey: 'resourceTable.groupBy.node'
+      }
+    ]
+  });
+
+  virtualType({
+    ifHaveType: HCI.SR_IOV,
+    labelKey:   'harvester.sriov.label',
+    group:      'advanced',
+    weight:     15,
+    name:       HCI.SR_IOV,
+    namespaced: false,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.SR_IOV }
+    },
+    exact: false
+  });
+
+  configureType(HCI.SR_IOV, {
+    isCreatable:                false,
+    hiddenNamespaceGroupButton: true,
+  });
+
+  virtualType({
+    ifHaveType: HCI.SR_IOVGPU_DEVICE,
+    labelKey:   'harvester.sriovgpu.label',
+    group:      'advanced',
+    weight:     13,
+    name:       HCI.SR_IOVGPU_DEVICE,
+    namespaced: false,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.SR_IOVGPU_DEVICE }
+    },
+    exact: false,
+  });
+
+  configureType(HCI.SR_IOVGPU_DEVICE, {
+    isCreatable:                false,
+    hiddenNamespaceGroupButton: true,
+  });
+
+  virtualType({
+    labelKey:   'harvester.vgpu.label',
+    group:      'advanced',
+    weight:     12,
+    name:       HCI.VGPU_DEVICE,
+    namespaced: false,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VGPU_DEVICE }
+    },
+    exact: false,
+  });
+
+  configureType(HCI.VGPU_DEVICE, {
+    isCreatable:                false,
+    hiddenNamespaceGroupButton: true,
+    listGroups:                 [
+      {
+        icon:       'icon-cluster',
+        value:      'node',
+        field:      'groupByNode',
+        hideColumn: 'node',
+        tooltipKey: 'resourceTable.groupBy.node'
+      }
+    ]
+  });
+
+  configureType(HCI.ADD_ONS, {
+    isCreatable: false,
+    isRemovable: false,
+    showState:   false,
+  });
+
+  virtualType({
+    label:      'Addons',
+    group:      'advanced',
+    name:       HCI.ADD_ONS,
+    ifHaveType: HCI.ADD_ONS,
+    weight:     -900,
+    namespaced: false,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.ADD_ONS }
+    },
+    exact: false,
+  });
+
+  configureType(HCI.LB, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.LB }
+    },
+  });
+  virtualType({
+    labelKey:   'harvester.loadBalancer.label',
+    name:       HCI.LB,
+    namespaced: true,
+    weight:     185,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.LB }
+    },
+    exact:      false,
+    ifHaveType: HCI.LB,
+  });
+  headers(HCI.LB, [
+    STATE,
+    NAME_COL,
+    {
+      ...ADDRESS,
+      formatter: 'HarvesterListener',
+    },
+    {
+      name:     'workloadType',
+      labelKey: 'harvester.loadBalancer.workloadType.label',
+      value:    'workloadTypeDisplay',
+    },
+    {
+      name:     'ipam',
+      labelKey: 'harvester.loadBalancer.ipam.label',
+      value:    'ipamDisplay',
+    },
+    AGE
+  ]);
+
+  configureType(HCI.IP_POOL, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.IP_POOL }
+    },
+  });
+  virtualType({
+    labelKey:   'harvester.ipPool.label',
+    name:       HCI.IP_POOL,
+    namespaced: false,
+    weight:     184,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.IP_POOL }
+    },
+    exact:      false,
+    ifHaveType: HCI.IP_POOL,
+  });
+  headers(HCI.IP_POOL, IP_POOL_HEADERS);
 }
diff --git a/pkg/harvester/promptRemove/kubevirt.io.virtualmachine.vue b/pkg/harvester/promptRemove/kubevirt.io.virtualmachine.vue
new file mode 100644
index 00000000..53ba008c
--- /dev/null
+++ b/pkg/harvester/promptRemove/kubevirt.io.virtualmachine.vue
@@ -0,0 +1,164 @@
+<script>
+import { mapState, mapGetters } from 'vuex';
+import { HCI } from '../types';
+import { isEmpty } from '@shell/utils/object';
+import Parse from 'url-parse';
+import { resourceNames } from '@shell/utils/string';
+
+export default {
+  name: 'HarvesterPromptRemove',
+
+  props: {
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    names: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    type: {
+      type:     String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      checkedList: [],
+      checkAll:    true
+    };
+  },
+
+  computed: {
+    ...mapState('action-menu', ['toRemove']),
+    ...mapGetters({ t: 'i18n/t' }),
+
+    removeNameArr() {
+      const out = {};
+
+      this.value.forEach((crd) => {
+        if (crd.type !== HCI.VM) {
+          return;
+        }
+        const volumes = crd.spec.template.spec?.volumes || [];
+        const names = volumes.filter(volume => volume.persistentVolumeClaim ).map((volume) => {
+          if (volume.persistentVolumeClaim) {
+            return volume.name;
+          }
+        });
+
+        out[crd.id] = names;
+      });
+
+      return out;
+    },
+
+    plusMore() {
+      const remaining = this.toRemove.length - this.names.length;
+
+      return this.t('promptRemove.andOthers', { count: remaining });
+    },
+  },
+
+  watch: {
+    removeNameArr: {
+      handler(neu) {
+        if (this.value.length === 1) {
+          const keys = Object.values(neu[this.value[0].id]);
+
+          this.checkedList.unshift(keys[0]);
+        }
+      },
+      deep:      true,
+      immediate: true
+    }
+  },
+
+  methods: {
+    resourceNames,
+    remove() {
+      const parentComponent = this.$parent.$parent.$parent;
+
+      let goTo;
+
+      if (parentComponent.doneLocation) {
+        // doneLocation will recompute to undefined when delete request completes
+        goTo = { ...parentComponent.doneLocation };
+      }
+
+      Promise.all(this.value.map((resource) => {
+        if (resource.type !== HCI.VM) { // maybe is VMI
+          resource.remove();
+
+          return;
+        }
+
+        let removedDisks = '';
+
+        if (this.value.length > 1) {
+          if (this.checkAll) {
+            this.removeNameArr[resource.id].forEach((item) => {
+              removedDisks += `removedDisks=${ item }&`;
+            });
+          }
+        } else {
+          this.checkedList.forEach((item) => {
+            removedDisks += `removedDisks=${ item }&`;
+          });
+          removedDisks.replace(/&$/, '');
+        }
+
+        const parsed = Parse(resource.links.self);
+
+        resource.remove({ url: `${ parsed.pathname }?${ removedDisks }propagationPolicy=Foreground` });
+      })).then((results) => {
+        if ( goTo && !isEmpty(goTo) ) {
+          parentComponent.currentRouter.push(goTo);
+        }
+        parentComponent.close();
+      }).catch((err) => {
+        parentComponent.error = err;
+      });
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="mt-10">
+    {{ t('promptRemove.attemptingToRemove', {type}) }}
+    <span v-clean-html="resourceNames(names, plusMore, t)"></span>
+
+    <div class="mt-10">
+      {{ t('harvester.virtualMachine.promptRemove.title') }}
+    </div>
+    <div v-if="value.length === 1">
+      <span v-for="name in removeNameArr[value[0].id]" :key="name">
+        <label class="checkbox-container mr-15"><input v-model="checkedList" type="checkbox" :label="name" :value="name" />
+          <span
+            class="checkbox-custom mr-5"
+            role="checkbox"
+          />
+          {{ name }}
+        </label>
+      </span>
+    </div>
+
+    <div v-else>
+      <label class="checkbox-container mr-15"><input v-model="checkAll" type="checkbox" />
+        <span
+          class="checkbox-custom mr-5"
+          role="checkbox"
+        />
+        {{ t('harvester.virtualMachine.promptRemove.deleteAll') }}
+      </label>
+    </div>
+  </div>
+</template>
diff --git a/pkg/harvester/routing/extension-routing.js b/pkg/harvester/routing/extension-routing.js
deleted file mode 100644
index befe07f2..00000000
--- a/pkg/harvester/routing/extension-routing.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// Don't forget to create a VueJS page called index.vue in the /pages folder!!!
-import Dashboard from '../pages/index.vue';
-import Home from '../list/harvesterhci.io.dashboard.vue';
-import { PRODUCT_NAME, BLANK_CLUSTER } from '../config/harvester';
-
-const routes = [
-  {
-    name:      `${ PRODUCT_NAME }-c-cluster`,
-    path:      `/${ PRODUCT_NAME }/c/:cluster`,
-    component: Home,
-    meta:      {
-      product: PRODUCT_NAME,
-      cluster: BLANK_CLUSTER,
-      pkg:     PRODUCT_NAME
-    }
-  }
-];
-
-export default routes;
diff --git a/pkg/harvester/routing/harvester-routing.ts b/pkg/harvester/routing/harvester-routing.ts
new file mode 100644
index 00000000..a5adb39b
--- /dev/null
+++ b/pkg/harvester/routing/harvester-routing.ts
@@ -0,0 +1,82 @@
+// import { RouteConfig } from 'vue-router';
+import { PRODUCT_NAME } from '../config/harvester';
+
+import Root from '../pages/c/_cluster/index.vue';
+import HarvesterSupport from '../pages/c/_cluster/support/index.vue';
+import HarvesterConsoleSerial from '../pages/c/_cluster/console/_uid/serial.vue';
+import HarvesterConsoleVnc from '../pages/c/_cluster/console/_uid/vnc.vue';
+import ListHarvesterResource from '../pages/c/_cluster/_resource/index.vue';
+import HarvesterBrand from '../pages/c/_cluster/brand/index.vue';
+import CreateHarvesterResource from '../pages/c/_cluster/_resource/create.vue';
+import ViewHarvesterResource from '../pages/c/_cluster/_resource/_id.vue';
+import ViewHarvesterNsResource from '../pages/c/_cluster/_resource/_namespace/_id.vue';
+import HarvesterAirgapUpdgrade from '../pages/c/_cluster/airgapupgrade/index.vue';
+import HarvesterMembers from '../pages/c/_cluster/members/index.vue';
+import ProjectNamespaces from '../pages/c/_cluster/projectsnamespaces.vue';
+import HarvesterAlertmanagerReceiver from '../pages/c/_cluster/alertmanagerconfig/_alertmanagerconfigid/receiver.vue';
+
+const routes: any[] = [
+  {
+    name:      `${ PRODUCT_NAME }-c-cluster-support`,
+    path:      `/:product/c/:cluster/support`,
+    component: HarvesterSupport,
+  },
+  {
+    name:      `${ PRODUCT_NAME }-c-cluster-console-uid-serial`,
+    path:      `/:product/c/:cluster/console/:uid/serial`,
+    component: HarvesterConsoleSerial,
+  },
+  {
+    name:      `${ PRODUCT_NAME }-c-cluster-console-uid-vnc`,
+    path:      `/:product/c/:cluster/console/:uid/vnc`,
+    component: HarvesterConsoleVnc,
+  },
+  {
+    name:      `${ PRODUCT_NAME }-c-cluster-airgapupgrade`,
+    path:      `/:product/c/:cluster/airgapupgrade`,
+    component: HarvesterAirgapUpdgrade,
+  },
+  {
+    name:      `${ PRODUCT_NAME }-c-cluster-brand`,
+    path:      `/:product/c/:cluster/brand`,
+    component: HarvesterBrand,
+  },
+  {
+    name:      `${ PRODUCT_NAME }-c-cluster-alertmanagerconfig-alertmanagerconfigid-receiver`,
+    path:      `/:product/c/:cluster/alertmanagerconfig/:alertmanagerconfigid/receiver`,
+    component: HarvesterAlertmanagerReceiver,
+  },
+  {
+    name:      `${ PRODUCT_NAME }-c-cluster-members`,
+    path:      `/:product/c/:cluster/members`,
+    component: HarvesterMembers,
+  },
+  {
+    name:      `${ PRODUCT_NAME }-c-cluster`,
+    path:      `/:product/c/:cluster`,
+    component: Root,
+  }, {
+    name:      `${ PRODUCT_NAME }-c-cluster-projectsnamespaces`,
+    path:      `/:product/c/:cluster/projectsnamespaces`,
+    component: ProjectNamespaces,
+  }, {
+    name:      `${ PRODUCT_NAME }-c-cluster-resource`,
+    path:      `/:product/c/:cluster/:resource`,
+    component: ListHarvesterResource,
+  }, {
+    name:      `${ PRODUCT_NAME }-c-cluster-resource-create`,
+    path:      `/:product/c/:cluster/:resource/create`,
+    component: CreateHarvesterResource,
+  }, {
+    name:      `${ PRODUCT_NAME }-c-cluster-resource-id`,
+    path:      `/:product/c/:cluster/:resource/:id`,
+    component: ViewHarvesterResource,
+  }, {
+    name:      `${ PRODUCT_NAME }-c-cluster-resource-namespace-id`,
+    path:      `/:product/c/:cluster/:resource/:namespace/:id`,
+    component: ViewHarvesterNsResource,
+  },
+
+];
+
+export default routes;
diff --git a/pkg/harvester/types.ts b/pkg/harvester/types.ts
index 70910b38..6638cacc 100644
--- a/pkg/harvester/types.ts
+++ b/pkg/harvester/types.ts
@@ -35,6 +35,8 @@ export const HCI = {
   PCI_DEVICE:         'devices.harvesterhci.io.pcidevice',
   PCI_CLAIM:          'devices.harvesterhci.io.pcideviceclaim',
   SR_IOV:             'devices.harvesterhci.io.sriovnetworkdevice',
+  VGPU_DEVICE:        'devices.harvesterhci.io.vgpudevice',
+  SR_IOVGPU_DEVICE:   'devices.harvesterhci.io.sriovgpudevice',
   VLAN_CONFIG:        'network.harvesterhci.io.vlanconfig',
   VLAN_STATUS:        'network.harvesterhci.io.vlanstatus',
   ADD_ONS:            'harvesterhci.io.addon',
diff --git a/pkg/harvester/utils/promise.js b/pkg/harvester/utils/promise.js
new file mode 100644
index 00000000..62a89390
--- /dev/null
+++ b/pkg/harvester/utils/promise.js
@@ -0,0 +1,18 @@
+export function allSettled(hash) {
+  const keys = Object.keys(hash);
+  const promises = Object.values(hash);
+
+  return Promise.allSettled(promises).then((res) => {
+    const out = {};
+
+    for ( let i = 0 ; i < keys.length ; i++ ) {
+      if (res[i].status === 'fulfilled') {
+        out[keys[i]] = res[i].value;
+      } else {
+        out[keys[i]] = [];
+      }
+    }
+
+    return out;
+  });
+}
diff --git a/pkg/harvester/utils/regular.js b/pkg/harvester/utils/regular.js
new file mode 100644
index 00000000..d060d486
--- /dev/null
+++ b/pkg/harvester/utils/regular.js
@@ -0,0 +1,14 @@
+
+export function isValidMac(value) {
+  return /^[A-Fa-f0-9]{2}(-[A-Fa-f0-9]{2}){5}$|^[A-Fa-f0-9]{2}(:[A-Fa-f0-9]{2}){5}$/.test(value);
+}
+
+/**
+ * RFC 1123
+ * https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#dns-label-names
+ */
+export function isValidDNSLabelName(str) {
+  const reg = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/;
+
+  return reg.test(str);
+}
diff --git a/pkg/harvester/utils/vm.js b/pkg/harvester/utils/vm.js
new file mode 100644
index 00000000..ca7d6fbc
--- /dev/null
+++ b/pkg/harvester/utils/vm.js
@@ -0,0 +1,11 @@
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+
+export function parseVolumeClaimTemplates(data) {
+  let out = [];
+
+  try {
+    out = JSON.parse(data?.metadata?.annotations?.[HCI_ANNOTATIONS.VOLUME_CLAIM_TEMPLATE]) || [];
+  } catch (e) {}
+
+  return out;
+}
diff --git a/pkg/harvester/validators/vm.js b/pkg/harvester/validators/vm.js
index c1ded608..7dd7b44a 100644
--- a/pkg/harvester/validators/vm.js
+++ b/pkg/harvester/validators/vm.js
@@ -87,7 +87,7 @@ export function vmDisks(spec, getters, errors, validatorArgs, displayKey, value)
         errors.push(getters['i18n/t']('harvester.validation.generic.tabError', { prefix, message }));
       }
 
-      if (typeValue?.spec?.resources?.requests?.storage && !/^([1-9][0-9]{0,8})[a-zA-Z]+$/.test(typeValue?.spec?.resources?.requests?.storage)) {
+      if (typeValue?.spec?.resources?.requests?.storage && !/^([0-9][0-9]{0,8})[a-zA-Z]+$/.test(typeValue?.spec?.resources?.requests?.storage)) {
         const message = getters['i18n/t']('harvester.validation.generic.maximumSize', { max: '999999999 GiB' });
 
         errors.push(getters['i18n/t']('harvester.validation.generic.tabError', { prefix, message }));
diff --git a/pkg/harvester/validators/volume.js b/pkg/harvester/validators/volume.js
index 24c885bf..2f75bc27 100644
--- a/pkg/harvester/validators/volume.js
+++ b/pkg/harvester/validators/volume.js
@@ -1,5 +1,11 @@
 export function volumeSize(size, getters, errors, validatorArgs, displayKey, value) {
-  if (!/^([1-9][0-9]{0,8})[a-zA-Z]+$/.test(size)) {
+  if (!size) {
+    const key = getters['i18n/t']('harvester.volume.size');
+
+    errors.push(getters['i18n/t']('validation.required', { key }));
+  }
+
+  if (size && !/^([0-9][0-9]{0,8})[a-zA-Z]+$/.test(size)) {
     const message = getters['i18n/t']('harvester.validation.generic.maximumSize', { max: '999999999 GiB' });
 
     errors.push(message);