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));
+        }
+      });
     },
   },
 };