diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 666d2a31e39b..5e74bdccbe5f 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -3066,6 +3066,7 @@
 "message.no.description": "No description entered.",
 "message.offering.internet.protocol.warning": "WARNING: IPv6 supported Networks use static routing and will require upstream routes to be configured manually.",
 "message.offering.ipv6.warning": "Please refer documentation for creating IPv6 enabled Network/VPC offering <a href='http://docs.cloudstack.apache.org/en/latest/plugins/ipv6.html#isolated-network-and-vpc-tier'>IPv6 support in CloudStack - Isolated Networks and VPC Network Tiers</a>",
+"message.oobm.configured": "Successfully configured out-of-band management for host",
 "message.ovf.configurations": "OVF configurations available for the selected appliance. Please select the desired value. Incompatible compute offerings will get disabled.",
 "message.path.description": "NFS: exported path from the server. VMFS: /datacenter name/datastore name. SharedMountPoint: path where primary storage is mounted, such as /mnt/primary.",
 "message.please.confirm.remove.ssh.key.pair": "Please confirm that you want to remove this SSH key pair.",
diff --git a/ui/src/config/section/infra/hosts.js b/ui/src/config/section/infra/hosts.js
index f13029b61ca0..79ec40287fb7 100644
--- a/ui/src/config/section/infra/hosts.js
+++ b/ui/src/config/section/infra/hosts.js
@@ -150,16 +150,8 @@ export default {
       message: 'label.outofbandmanagement.configure',
       docHelp: 'adminguide/hosts.html#out-of-band-management',
       dataView: true,
-      post: true,
-      args: ['hostid', 'address', 'port', 'username', 'password', 'driver'],
-      mapping: {
-        hostid: {
-          value: (record) => { return record.id }
-        },
-        driver: {
-          options: ['ipmitool', 'nestedcloudstack', 'redfish']
-        }
-      }
+      popup: true,
+      component: shallowRef(defineAsyncComponent(() => import('@/views/infra/ConfigureHostOOBM')))
     },
     {
       api: 'enableOutOfBandManagementForHost',
diff --git a/ui/src/views/infra/ConfigureHostOOBM.vue b/ui/src/views/infra/ConfigureHostOOBM.vue
new file mode 100644
index 000000000000..d80ac68fc067
--- /dev/null
+++ b/ui/src/views/infra/ConfigureHostOOBM.vue
@@ -0,0 +1,172 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout">
+    <a-form
+      :ref="formRef"
+      :model="form"
+      :rules="rules"
+      @finish="handleSubmit"
+      v-ctrl-enter="handleSubmit"
+      class="form"
+      layout="vertical"
+    >
+      <a-alert type="warning">
+        <template #message>
+          <span v-html="$t('label.outofbandmanagement.configure')" />
+        </template>
+      </a-alert>
+      <div style="margin-top: 10px;">
+        <a-form-item name="address" ref="address">
+          <template #label>
+            <tooltip-label :title="$t('label.address')" :tooltip="apiParams.address.description"/>
+          </template>
+          <a-input
+            v-model:value="form.address"
+            v-focus="true" />
+        </a-form-item>
+        <a-form-item name="port" ref="port">
+          <template #label>
+            <tooltip-label :title="$t('label.port')" :tooltip="apiParams.port.description"/>
+          </template>
+          <a-input
+            v-model:value="form.port" />
+        </a-form-item>
+        <a-form-item name="username" ref="username">
+          <template #label>
+            <tooltip-label :title="$t('label.username')" :tooltip="apiParams.username.description"/>
+          </template>
+          <a-input
+            v-model:value="form.username" />
+        </a-form-item>
+        <a-form-item name="password" ref="password">
+          <template #label>
+            <tooltip-label :title="$t('label.password')" :tooltip="apiParams.password.description"/>
+          </template>
+          <a-input-password
+            v-model:value="form.password"
+            :placeholder="apiParams.password.description"/>
+        </a-form-item>
+        <a-form-item name="driver" ref="driver">
+          <template #label>
+            <tooltip-label :title="$t('label.driver')" :tooltip="apiParams.driver.description"/>
+          </template>
+          <a-select
+            v-model:value="form.driver"
+              style="width: 100%;"
+              optionFilterProp="value"
+              :filterOption="(input, option) => {
+                return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
+              <a-select-option key="" label="">{{ }}</a-select-option>
+              <a-select-option value="ipmitool">ipmitool</a-select-option>
+              <a-select-option value="nestedcloudstack">nestedcloudstack</a-select-option>
+              <a-select-option value="redfish">redfish</a-select-option>
+            </a-select>
+        </a-form-item>
+      </div>
+      <div :span="24" class="action-button">
+        <a-button @click="onCloseAction">{{ $t('label.cancel') }}</a-button>
+        <a-button type="primary" @click="handleSubmit" ref="submit">{{ $t('label.ok') }}</a-button>
+      </div>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+import { ref, reactive, toRaw } from 'vue'
+import { api } from '@/api'
+
+export default {
+  name: 'ConfigureHostOOBM',
+  components: {
+    TooltipLabel
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  beforeCreate () {
+    this.apiParams = this.$getApiParams('configureOutOfBandManagement')
+  },
+  created () {
+    this.initForm()
+  },
+  methods: {
+    initForm () {
+      this.formRef = ref()
+      this.form = reactive({
+        address: this.resource.outofbandmanagement.address || '',
+        port: this.resource.outofbandmanagement.port || '',
+        username: this.resource.outofbandmanagement.username || '',
+        password: '',
+        driver: this.resource.outofbandmanagement.driver || ''
+      })
+      this.rules = reactive({
+        address: [{ required: true, message: this.$t('message.error.required.input') }],
+        port: [{ required: true, message: this.$t('message.error.required.input') }],
+        username: [{ required: true, message: this.$t('message.error.required.input') }],
+        password: [{ required: true, message: this.$t('message.error.required.input') }],
+        driver: [{ required: true, message: this.$t('message.error.required.input') }]
+      })
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.formRef.value.validate().then(() => {
+        const values = toRaw(this.form)
+        const params = {
+          hostid: this.resource.id,
+          address: values.address,
+          port: values.port,
+          username: values.username,
+          password: values.password,
+          driver: values.driver
+        }
+
+        api('configureOutOfBandManagement', {}, 'POST', params).then(_ => {
+          this.$message.success(this.$t('message.oobm.configured'))
+          this.$emit('refresh-data')
+          this.onCloseAction()
+        }).catch(error => {
+          this.$notifyError(error)
+        })
+      })
+    },
+    onCloseAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.form-layout {
+    width: 30vw;
+
+    @media (min-width: 500px) {
+      width: 450px;
+    }
+  }
+</style>