diff --git a/src/views/Operations/FactoryReset/FactoryReset.vue b/src/views/Operations/FactoryReset/FactoryReset.vue
index f59b0a2..8e9ed8f 100644
--- a/src/views/Operations/FactoryReset/FactoryReset.vue
+++ b/src/views/Operations/FactoryReset/FactoryReset.vue
@@ -20,7 +20,7 @@
               >
                 {{ $t('pageFactoryReset.form.resetBiosOptionLabel') }}
               </b-form-radio>
-              <b-form-text id="reset-bios" class="ml-4 mb-3">
+              <b-form-text id="reset-bios" class="ms-4 mb-3">
                 {{ $t('pageFactoryReset.form.resetBiosOptionHelperText') }}
               </b-form-text>
 
@@ -32,7 +32,7 @@
               >
                 {{ $t('pageFactoryReset.form.resetToDefaultsOptionLabel') }}
               </b-form-radio>
-              <b-form-text id="reset-to-defaults" class="ml-4 mb-3">
+              <b-form-text id="reset-to-defaults" class="ms-4 mb-3">
                 {{
                   $t('pageFactoryReset.form.resetToDefaultsOptionHelperText')
                 }}
@@ -51,7 +51,11 @@
     </b-form>
 
     <!-- Modals -->
-    <modal-reset :reset-type="resetOption" @ok-confirm="onOkConfirm" />
+    <modal-reset
+      v-model="showResetModal"
+      :reset-type="resetOption"
+      @ok-confirm="onOkConfirm"
+    />
   </b-container>
 </template>
 
@@ -69,6 +73,7 @@
   data() {
     return {
       $t: useI18n().t,
+      showResetModal: false,
       resetOption: 'resetBios',
     };
   },
@@ -77,7 +82,7 @@
   },
   methods: {
     onResetSubmit() {
-      this.$bvModal.show('modal-reset');
+      this.showResetModal = true;
     },
     onOkConfirm() {
       if (this.resetOption == 'resetBios') {
diff --git a/src/views/Operations/FactoryReset/FactoryResetModal.vue b/src/views/Operations/FactoryReset/FactoryResetModal.vue
index 5865bb3..97c74c4 100644
--- a/src/views/Operations/FactoryReset/FactoryResetModal.vue
+++ b/src/views/Operations/FactoryReset/FactoryResetModal.vue
@@ -2,33 +2,33 @@
   <b-modal
     id="modal-reset"
     ref="modal"
-    :title="$t(`pageFactoryReset.modal.${resetType}Title`)"
+    :title="modalTitle"
     title-tag="h2"
     @hidden="resetConfirm"
   >
     <p class="mb-2">
-      <strong>{{ $t(`pageFactoryReset.modal.${resetType}Header`) }}</strong>
+      <strong>{{ modalHeader }}</strong>
     </p>
-    <ul v-if="resetType == 'resetBios'" class="pl-3 mb-4">
+    <ul v-if="resetType == 'resetBios'" class="ps-3 mb-4">
       <li class="mt-1 mb-1">
-        {{ $t('pageFactoryReset.modal.resetBiosSettingsList.item1') }}
+        {{ t('pageFactoryReset.modal.resetBiosSettingsList.item1') }}
       </li>
       <li class="mt-1 mb-1">
-        {{ $t('pageFactoryReset.modal.resetBiosSettingsList.item2') }}
+        {{ t('pageFactoryReset.modal.resetBiosSettingsList.item2') }}
       </li>
     </ul>
-    <ul v-else-if="resetType == 'resetToDefaults'" class="pl-3 mb-4">
+    <ul v-else-if="resetType == 'resetToDefaults'" class="ps-3 mb-4">
       <li class="mt-1 mb-1">
-        {{ $t('pageFactoryReset.modal.resetToDefaultsSettingsList.item1') }}
+        {{ t('pageFactoryReset.modal.resetToDefaultsSettingsList.item1') }}
       </li>
       <li class="mt-1 mb-1">
-        {{ $t('pageFactoryReset.modal.resetToDefaultsSettingsList.item2') }}
+        {{ t('pageFactoryReset.modal.resetToDefaultsSettingsList.item2') }}
       </li>
       <li class="mt-1 mb-1">
-        {{ $t('pageFactoryReset.modal.resetToDefaultsSettingsList.item3') }}
+        {{ t('pageFactoryReset.modal.resetToDefaultsSettingsList.item3') }}
       </li>
       <li class="mt-1 mb-1">
-        {{ $t('pageFactoryReset.modal.resetToDefaultsSettingsList.item4') }}
+        {{ t('pageFactoryReset.modal.resetToDefaultsSettingsList.item4') }}
       </li>
     </ul>
 
@@ -36,8 +36,8 @@
     <template v-if="!isServerOff">
       <p class="d-flex mb-2">
         <status-icon status="danger" />
-        <span id="reset-to-default-warning" class="ml-1">
-          {{ $t(`pageFactoryReset.modal.resetWarningMessage`) }}
+        <span id="reset-to-default-warning" class="ms-1">
+          {{ t(`pageFactoryReset.modal.resetWarningMessage`) }}
         </span>
       </p>
       <b-form-checkbox
@@ -45,23 +45,23 @@
         aria-describedby="reset-to-default-warning"
         @input="v$.confirm.$touch()"
       >
-        {{ $t(`pageFactoryReset.modal.resetWarningCheckLabel`) }}
+        {{ t(`pageFactoryReset.modal.resetWarningCheckLabel`) }}
       </b-form-checkbox>
       <b-form-invalid-feedback
         role="alert"
         :state="getValidationState(v$.confirm)"
       >
-        {{ $t('global.form.fieldRequired') }}
+        {{ t('global.form.fieldRequired') }}
       </b-form-invalid-feedback>
     </template>
 
-    <template #modal-footer="{ cancel }">
+    <template #footer="{ cancel }">
       <b-button
         variant="secondary"
         data-test-id="factoryReset-button-cancel"
         @click="cancel()"
       >
-        {{ $t('global.action.cancel') }}
+        {{ t('global.action.cancel') }}
       </b-button>
       <b-button
         type="sumbit"
@@ -69,7 +69,7 @@
         data-test-id="factoryReset-button-confirm"
         @click="handleConfirm"
       >
-        {{ $t(`pageFactoryReset.modal.${resetType}SubmitText`) }}
+        {{ modalSubmitText }}
       </b-button>
     </template>
   </b-modal>
@@ -97,7 +97,7 @@
   },
   data() {
     return {
-      $t: useI18n().t,
+      t: useI18n().t,
       confirm: false,
     };
   },
@@ -108,6 +108,15 @@
     isServerOff() {
       return this.serverStatus === 'off' ? true : false;
     },
+    modalTitle() {
+      return this.t(`pageFactoryReset.modal.${this.resetType}Title`);
+    },
+    modalHeader() {
+      return this.t(`pageFactoryReset.modal.${this.resetType}Header`);
+    },
+    modalSubmitText() {
+      return this.t(`pageFactoryReset.modal.${this.resetType}SubmitText`);
+    },
   },
   validations: {
     confirm: {
@@ -116,6 +125,19 @@
       },
     },
   },
+  watch: {
+    isServerOff: {
+      handler(newValue) {
+        // Touch validation when server is on to show required message immediately
+        if (!newValue) {
+          this.$nextTick(() => {
+            this.v$.confirm.$touch();
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
   methods: {
     handleConfirm() {
       this.v$.$touch();
diff --git a/src/views/Operations/Firmware/FirmwareCardsBios.vue b/src/views/Operations/Firmware/FirmwareCardsBios.vue
index a2994cc..184f0a3 100644
--- a/src/views/Operations/Firmware/FirmwareCardsBios.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsBios.vue
@@ -1,38 +1,45 @@
 <template>
   <page-section :section-title="$t('pageFirmware.sectionTitleBiosCards')">
-    <b-card-group deck>
+    <b-row class="row-cols-1 row-cols-md-2">
       <!-- Running image -->
-      <b-card>
-        <template #header>
-          <p class="font-weight-bold m-0">
-            {{ $t('pageFirmware.cardTitleRunning') }}
-          </p>
-        </template>
-        <dl class="mb-0">
-          <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
-          <dd class="mb-0">{{ runningVersion }}</dd>
-        </dl>
-      </b-card>
+      <b-col class="mb-3">
+        <b-card class="h-100">
+          <template #header>
+            <p class="fw-bold m-0">
+              {{ $t('pageFirmware.cardTitleRunning') }}
+            </p>
+          </template>
+          <dl class="mb-0">
+            <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
+            <dd class="mb-0">{{ runningVersion }}</dd>
+          </dl>
+        </b-card>
+      </b-col>
 
       <!-- Backup image -->
-      <b-card>
-        <template #header>
-          <p class="font-weight-bold m-0">
-            {{ $t('pageFirmware.cardTitleBackup') }}
-          </p>
-        </template>
-        <dl class="mb-0">
-          <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
-          <dd class="mb-0">
-            <status-icon v-if="showBackupImageStatus" status="danger" />
-            <span v-if="showBackupImageStatus" class="sr-only">
-              {{ backupStatus }}
-            </span>
-            {{ backupVersion }}
-          </dd>
-        </dl>
-      </b-card>
-    </b-card-group>
+      <b-col class="mb-3">
+        <b-card class="h-100">
+          <template #header>
+            <p class="fw-bold m-0">
+              {{ $t('pageFirmware.cardTitleBackup') }}
+            </p>
+          </template>
+          <dl class="mb-0">
+            <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
+            <dd class="mb-0">
+              <status-icon v-if="showBackupImageStatus" status="danger" />
+              <span
+                v-if="showBackupImageStatus"
+                class="visually-hidden-focusable"
+              >
+                {{ backupStatus }}
+              </span>
+              {{ backupVersion }}
+            </dd>
+          </dl>
+        </b-card>
+      </b-col>
+    </b-row>
   </page-section>
 </template>
 
diff --git a/src/views/Operations/Firmware/FirmwareCardsBmc.vue b/src/views/Operations/Firmware/FirmwareCardsBmc.vue
index 2d18d5b..0e763f3 100644
--- a/src/views/Operations/Firmware/FirmwareCardsBmc.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsBmc.vue
@@ -1,53 +1,64 @@
 <template>
   <div>
     <page-section :section-title="sectionTitle">
-      <b-card-group deck>
+      <b-row class="row-cols-1 row-cols-md-2">
         <!-- Running image -->
-        <b-card>
-          <template #header>
-            <p class="font-weight-bold m-0">
-              {{ $t('pageFirmware.cardTitleRunning') }}
-            </p>
-          </template>
-          <dl class="mb-0">
-            <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
-            <dd class="mb-0">{{ runningVersion }}</dd>
-          </dl>
-        </b-card>
+        <b-col class="mb-3">
+          <b-card class="h-100">
+            <template #header>
+              <p class="fw-bold m-0">
+                {{ $t('pageFirmware.cardTitleRunning') }}
+              </p>
+            </template>
+            <dl class="mb-0">
+              <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
+              <dd class="mb-0">{{ runningVersion }}</dd>
+            </dl>
+          </b-card>
+        </b-col>
 
         <!-- Backup image -->
-        <b-card>
-          <template #header>
-            <p class="font-weight-bold m-0">
-              {{ $t('pageFirmware.cardTitleBackup') }}
-            </p>
-          </template>
-          <dl>
-            <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
-            <dd>
-              <status-icon v-if="showBackupImageStatus" status="danger" />
-              <span v-if="showBackupImageStatus" class="sr-only">
-                {{ backupStatus }}
-              </span>
-              {{ backupVersion }}
-            </dd>
-          </dl>
-          <b-btn
-            v-if="!switchToBackupImageDisabled"
-            v-b-modal.modal-switch-to-running
-            data-test-id="firmware-button-switchToRunning"
-            variant="link"
-            size="sm"
-            class="py-0 px-1 mt-2"
-            :disabled="isPageDisabled || !backup || !isServerOff"
-          >
-            <icon-switch class="d-none d-sm-inline-block" />
-            {{ $t('pageFirmware.cardActionSwitchToRunning') }}
-          </b-btn>
-        </b-card>
-      </b-card-group>
+        <b-col class="mb-3">
+          <b-card class="h-100">
+            <template #header>
+              <p class="fw-bold m-0">
+                {{ $t('pageFirmware.cardTitleBackup') }}
+              </p>
+            </template>
+            <dl>
+              <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
+              <dd>
+                <status-icon v-if="showBackupImageStatus" status="danger" />
+                <span
+                  v-if="showBackupImageStatus"
+                  class="visually-hidden-focusable"
+                >
+                  {{ backupStatus }}
+                </span>
+                {{ backupVersion }}
+              </dd>
+            </dl>
+            <b-btn
+              v-if="!switchToBackupImageDisabled"
+              data-test-id="firmware-button-switchToRunning"
+              variant="link"
+              size="sm"
+              class="py-0 px-1 mt-2"
+              :disabled="isPageDisabled || !backup || !isServerOff"
+              @click="showSwitchToRunning = true"
+            >
+              <icon-switch class="d-none d-sm-inline-block" />
+              {{ $t('pageFirmware.cardActionSwitchToRunning') }}
+            </b-btn>
+          </b-card>
+        </b-col>
+      </b-row>
     </page-section>
-    <modal-switch-to-running :backup="backupVersion" @ok="switchToRunning" />
+    <modal-switch-to-running
+      v-model="showSwitchToRunning"
+      :backup="backupVersion"
+      @ok="switchToRunning"
+    />
   </div>
 </template>
 
@@ -82,6 +93,7 @@
       loading,
       switchToBackupImageDisabled:
         process.env.VUE_APP_SWITCH_TO_BACKUP_IMAGE_DISABLED === 'true',
+      showSwitchToRunning: false,
     };
   },
   computed: {
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index 2b9a616..a9e327d 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -6,6 +6,7 @@
         <b-form-group
           :label="$t('pageFirmware.form.updateFirmware.imageFile')"
           label-for="image-file"
+          class="mb-3"
         >
           <form-file
             id="image-file"
@@ -34,7 +35,7 @@
     </div>
 
     <!-- Modals -->
-    <modal-update-firmware @ok="updateFirmware" />
+    <modal-update-firmware v-model="showUpdateModal" @ok="updateFirmware" />
   </div>
 </template>
 
@@ -74,6 +75,7 @@
     return {
       $t: useI18n().t,
       loading,
+      showUpdateModal: false,
       file: null,
       isServerPowerOffRequired:
         process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
@@ -120,7 +122,7 @@
     onSubmitUpload() {
       this.v$.$touch();
       if (this.v$.$invalid) return;
-      this.$bvModal.show('modal-update-firmware');
+      this.showUpdateModal = true;
     },
     onFileUpload(file) {
       this.file = file;
diff --git a/src/views/Operations/KeyClear/KeyClear.vue b/src/views/Operations/KeyClear/KeyClear.vue
index 7baad34..d0a6a5e 100644
--- a/src/views/Operations/KeyClear/KeyClear.vue
+++ b/src/views/Operations/KeyClear/KeyClear.vue
@@ -4,7 +4,7 @@
     <b-row>
       <b-col md="8" xl="6">
         <alert variant="info" class="mb-4">
-          <div class="font-weight-bold">
+          <div class="fw-bold">
             {{ $t('pageKeyClear.alert.title') }}
           </div>
           <div>
@@ -26,19 +26,19 @@
               <b-form-radio class="mb-1" value="NONE">
                 {{ $t('pageKeyClear.form.none') }}
               </b-form-radio>
-              <b-form-text id="key-clear-not-requested" class="ml-4 mb-3">
+              <b-form-text id="key-clear-not-requested" class="ms-4 mb-3">
                 {{ $t('pageKeyClear.form.keyClearNotRequested') }}
               </b-form-text>
               <b-form-radio class="mb-1" value="ALL">
                 {{ $t('pageKeyClear.form.clearAllLabel') }}
               </b-form-radio>
-              <b-form-text id="clear-all" class="ml-4 mb-3">
+              <b-form-text id="clear-all" class="ms-4 mb-3">
                 {{ $t('pageKeyClear.form.clearAllHeperText') }}
               </b-form-text>
               <b-form-radio class="mb-1" value="POWERVM_SYSKEY">
                 {{ $t('pageKeyClear.form.clearHypervisorSystemKeyLabel') }}
               </b-form-radio>
-              <b-form-text id="clear-hypervisor-key" class="ml-4 mb-3">
+              <b-form-text id="clear-hypervisor-key" class="ms-4 mb-3">
                 {{ $t('pageKeyClear.form.clearHypervisorSystemKeyHelperText') }}
               </b-form-text>
               <template v-if="username == 'service'">
@@ -71,11 +71,16 @@
 import Alert from '@/components/Global/Alert';
 import { useI18n } from 'vue-i18n';
 import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   name: 'KeyClear',
   components: { PageTitle, Alert },
   mixins: [LoadingBarMixin, BVToastMixin],
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
@@ -88,22 +93,20 @@
   },
   methods: {
     onKeyClearSubmit(valueSelected) {
-      this.$bvModal
-        .msgBoxConfirm(i18n.global.t('pageKeyClear.modal.clearAllMessage'), {
-          title: i18n.global.t('pageKeyClear.modal.clearAllTitle'),
-          okTitle: i18n.global.t('pageKeyClear.modal.clear'),
-          okVariant: 'danger',
-          cancelTitle: i18n.global.t('global.action.cancel'),
-          autoFocusButton: 'cancel',
-        })
-        .then((clearConfirmed) => {
-          if (clearConfirmed) {
-            this.$store
-              .dispatch('keyClear/clearEncryptionKeys', valueSelected)
-              .then((message) => this.successToast(message))
-              .catch(({ message }) => this.errorToast(message));
-          }
-        });
+      this.$confirm(i18n.global.t('pageKeyClear.modal.clearAllMessage'), {
+        title: i18n.global.t('pageKeyClear.modal.clearAllTitle'),
+        okTitle: i18n.global.t('pageKeyClear.modal.clear'),
+        okVariant: 'danger',
+        cancelTitle: i18n.global.t('global.action.cancel'),
+        autoFocusButton: 'cancel',
+      }).then((clearConfirmed) => {
+        if (clearConfirmed) {
+          this.$store
+            .dispatch('keyClear/clearEncryptionKeys', valueSelected)
+            .then((message) => this.successToast(message))
+            .catch(({ message }) => this.errorToast(message));
+        }
+      });
     },
   },
 };
diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index 64ee897..1ea6771 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -4,9 +4,7 @@
       <b-row class="d-flex">
         <b-col class="d-flex flex-column justify-content-end" cols="4">
           <dl class="mb-2" sm="2" md="2">
-            <dt class="d-inline font-weight-bold mr-1">
-              {{ $t('pageKvm.status') }}:
-            </dt>
+            <dt class="d-inline fw-bold me-1">{{ $t('pageKvm.status') }}:</dt>
             <dd class="d-inline">
               <status-icon :status="serverStatusIcon" />
               <span class="d-none d-md-inline"> {{ serverStatus }}</span>
@@ -14,7 +12,7 @@
           </dl>
         </b-col>
 
-        <b-col class="d-flex justify-content-end pr-1">
+        <b-col class="d-flex justify-content-end pe-1">
           <b-button
             v-if="isConnected"
             variant="link"
@@ -125,7 +123,9 @@
       this.resizeKvmWindow = throttle(() => {
         setTimeout(that.setWidthToolbar, 0);
       }, 1000);
-      window.addEventListener('resize', this.resizeKvmWindow);
+      window.addEventListener('resize', this.resizeKvmWindow, {
+        passive: true,
+      });
 
       this.rfb.addEventListener('connect', () => {
         that.isConnected = true;
@@ -178,16 +178,16 @@
 
 <style scoped lang="scss">
 .button-ctrl-alt-delete {
-  float: right;
+  float: inline-end;
 }
 
 .kvm-status {
-  padding-top: $spacer / 2;
-  padding-left: $spacer / 4;
+  padding-top: calc(#{$spacer} / 2);
+  padding-inline-start: calc(#{$spacer} / 4);
   display: inline-block;
 }
 
 .margin-left-full-window {
-  margin-left: 5px;
+  margin-inline-start: 5px;
 }
 </style>
diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue
index d8c529c..e98b7da 100644
--- a/src/views/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/Operations/RebootBmc/RebootBmc.vue
@@ -40,6 +40,7 @@
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import { useI18n } from 'vue-i18n';
 import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   name: 'RebootBmc',
@@ -49,6 +50,10 @@
     this.hideLoader();
     next();
   },
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
@@ -67,16 +72,14 @@
   },
   methods: {
     onClick() {
-      this.$bvModal
-        .msgBoxConfirm(i18n.global.t('pageRebootBmc.modal.confirmMessage'), {
-          title: i18n.global.t('pageRebootBmc.modal.confirmTitle'),
-          okTitle: i18n.global.t('global.action.confirm'),
-          cancelTitle: i18n.global.t('global.action.cancel'),
-          autoFocusButton: 'ok',
-        })
-        .then((confirmed) => {
-          if (confirmed) this.rebootBmc();
-        });
+      this.$confirm(i18n.global.t('pageRebootBmc.modal.confirmMessage'), {
+        title: i18n.global.t('pageRebootBmc.modal.confirmTitle'),
+        okTitle: i18n.global.t('global.action.confirm'),
+        cancelTitle: i18n.global.t('global.action.cancel'),
+        autoFocusButton: 'ok',
+      }).then((confirmed) => {
+        if (confirmed) this.rebootBmc();
+      });
     },
     rebootBmc() {
       this.$store
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
index 8f1c4bc..ca6a46d 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -17,7 +17,7 @@
     <b-row class="d-flex">
       <b-col class="d-flex flex-column justify-content-end">
         <dl class="mb-2" sm="6" md="6">
-          <dt class="d-inline font-weight-bold mr-1">
+          <dt class="d-inline fw-bold me-1">
             {{ $t('pageSerialOverLan.status') }}:
           </dt>
           <dd class="d-inline">
diff --git a/src/views/Operations/ServerPowerOperations/BootSettings.vue b/src/views/Operations/ServerPowerOperations/BootSettings.vue
index ea66baa..b9ea035 100644
--- a/src/views/Operations/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Operations/ServerPowerOperations/BootSettings.vue
@@ -13,7 +13,7 @@
           v-model="form.bootOption"
           :disabled="bootSourceOptions.length === 0"
           :options="bootSourceOptions"
-          @change="onChangeSelect"
+          @update:model-value="onChangeSelect"
         >
         </b-form-select>
       </b-form-group>
@@ -118,7 +118,9 @@
     this.$store
       .dispatch('serverBootSettings/getTpmPolicy')
       .finally(() =>
-        this.$root.$emit('server-power-operations-boot-settings-complete'),
+        require('@/eventBus').default.$emit(
+          'server-power-operations-boot-settings-complete',
+        ),
       );
   },
   methods: {
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index 8dca96e..95a36d3 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -9,7 +9,9 @@
           <b-row>
             <b-col>
               <dl>
-                <dt>{{ $t('pageServerPowerOperations.serverStatus') }}</dt>
+                <dt>
+                  {{ $t('pageServerPowerOperations.serverStatus') }}
+                </dt>
                 <dd
                   v-if="serverStatus === 'on'"
                   data-test-id="powerServerOps-text-hostStatus"
@@ -180,6 +182,7 @@
 import i18n from '@/i18n';
 import { privilegesId } from '@/store/modules/GlobalStore';
 import { mapGetters } from 'vuex';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   name: 'ServerPowerOperations',
@@ -189,6 +192,10 @@
     this.hideLoader();
     next();
   },
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
@@ -223,10 +230,9 @@
   },
   created() {
     this.startLoader();
+    const eventBus = require('@/eventBus').default;
     const bootSettingsPromise = new Promise((resolve) => {
-      this.$root.$on('server-power-operations-boot-settings-complete', () =>
-        resolve(),
-      );
+      eventBus.$once('server-power-operations-boot-settings-complete', resolve);
     });
     Promise.all([
       this.$store.dispatch('serverBootSettings/getBootSettings'),
@@ -252,17 +258,13 @@
       };
 
       if (this.form.rebootOption === 'orderly') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverSoftReboot');
-          });
+        this.confirmDialog(modalMessage, modalOptions).then((confirmed) => {
+          if (confirmed) this.$store.dispatch('controls/serverSoftReboot');
+        });
       } else if (this.form.rebootOption === 'immediate') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverHardReboot');
-          });
+        this.confirmDialog(modalMessage, modalOptions).then((confirmed) => {
+          if (confirmed) this.$store.dispatch('controls/serverHardReboot');
+        });
       }
     },
     shutdownServer() {
@@ -279,20 +281,19 @@
       };
 
       if (this.form.shutdownOption === 'orderly') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverSoftPowerOff');
-          });
+        this.confirmDialog(modalMessage, modalOptions).then((confirmed) => {
+          if (confirmed) this.$store.dispatch('controls/serverSoftPowerOff');
+        });
       }
       if (this.form.shutdownOption === 'immediate') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverHardPowerOff');
-          });
+        this.confirmDialog(modalMessage, modalOptions).then((confirmed) => {
+          if (confirmed) this.$store.dispatch('controls/serverHardPowerOff');
+        });
       }
     },
+    confirmDialog(message, options = {}) {
+      return this.$confirm({ message, ...options });
+    },
   },
 };
 </script>
diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
index 682528b..b2eaaae 100644
--- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -36,6 +36,7 @@
           id="username"
           v-model="form.username"
           type="text"
+          autocomplete="username"
           data-test-id="configureConnection-input-username"
         />
       </b-form-group>
@@ -47,6 +48,7 @@
           id="password"
           v-model="form.password"
           type="password"
+          autocomplete="current-password"
           data-test-id="configureConnection-input-password"
         />
       </b-form-group>
@@ -81,10 +83,6 @@
     connection: {
       type: Object,
       default: null,
-      validator: (prop) => {
-        console.log(prop);
-        return true;
-      },
     },
   },
   emits: ['ok'],
diff --git a/src/views/Operations/VirtualMedia/VirtualMedia.vue b/src/views/Operations/VirtualMedia/VirtualMedia.vue
index e158059..36fb909 100644
--- a/src/views/Operations/VirtualMedia/VirtualMedia.vue
+++ b/src/views/Operations/VirtualMedia/VirtualMedia.vue
@@ -69,7 +69,7 @@
                 <b-button
                   v-if="!device.isActive"
                   variant="primary"
-                  class="float-right"
+                  class="float-end"
                   :disabled="!device.serverUri"
                   @click="startLegacy(device)"
                 >
@@ -78,7 +78,7 @@
                 <b-button
                   v-if="device.isActive"
                   variant="primary"
-                  class="float-right"
+                  class="float-end"
                   @click="stopLegacy(device)"
                 >
                   {{ $t('pageVirtualMedia.stop') }}
@@ -90,6 +90,7 @@
       </b-col>
     </b-row>
     <modal-configure-connection
+      v-model="showConfigureConnectionModal"
       :connection="modalConfigureConnection"
       @ok="saveConnection"
     />
@@ -106,15 +107,21 @@
 import FormFile from '@/components/Global/FormFile';
 import { useI18n } from 'vue-i18n';
 import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   name: 'VirtualMedia',
   components: { PageTitle, PageSection, ModalConfigureConnection, FormFile },
   mixins: [BVToastMixin, LoadingBarMixin],
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
       modalConfigureConnection: null,
+      showConfigureConnectionModal: false,
       loadImageFromExternalServer:
         process.env.VUE_APP_VIRTUAL_MEDIA_LIST_ENABLED === 'true'
           ? true
@@ -223,7 +230,7 @@
     },
     configureConnection(connectionData) {
       this.modalConfigureConnection = connectionData;
-      this.$bvModal.show('configure-connection');
+      this.showConfigureConnectionModal = true;
     },
     concatId(val) {
       return val.split(' ').join('_').toLowerCase();