diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index c337bf1..57eface 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -1,37 +1,39 @@
 <template>
   <div class="custom-form-file-container">
-    <label>
-      <b-form-file
-        :id="id"
-        v-model="file"
-        :accept="accept"
-        :disabled="disabled"
-        :state="state"
-        plain
-        @input="$emit('input', $event)"
-      >
-      </b-form-file>
-      <span
-        class="add-file-btn btn"
-        :class="{
-          disabled,
-          'btn-secondary': isSecondary,
-          'btn-primary': !isSecondary,
-        }"
-      >
-        {{ $t('global.fileUpload.browseText') }}
-      </span>
-      <slot name="invalid"></slot>
-    </label>
+    <b-form-file
+      :id="id"
+      ref="fileInput"
+      v-model="file"
+      :accept="accept"
+      :disabled="disabled"
+      :state="state"
+      plain
+      @input="$emit('input', $event)"
+    >
+    </b-form-file>
+    <button
+      type="button"
+      class="add-file-btn btn mt-2"
+      :class="{
+        disabled,
+        'btn-secondary': isSecondary,
+        'btn-primary': !isSecondary,
+      }"
+      :disabled="disabled"
+      @click="openFilePicker"
+    >
+      {{ $t('global.fileUpload.browseText') }}
+    </button>
+    <slot name="invalid"></slot>
     <div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
       {{ file ? file.name : '' }}
       <b-button
         variant="light"
-        class="px-2 ml-auto"
+        class="px-2 ms-auto"
         :disabled="disabled"
         @click="file = null"
         ><icon-close :title="$t('global.fileUpload.clearSelectedFile')" /><span
-          class="sr-only"
+          class="visually-hidden-focusable"
           >{{ $t('global.fileUpload.clearSelectedFile') }}</span
         >
       </b-button>
@@ -40,7 +42,7 @@
 </template>
 
 <script>
-import { BFormFile } from 'bootstrap-vue';
+import { BFormFile } from 'bootstrap-vue-next';
 import IconClose from '@carbon/icons-vue/es/close/20';
 import { useI18n } from 'vue-i18n';
 
@@ -81,36 +83,48 @@
       return this.variant === 'secondary';
     },
   },
+  methods: {
+    openFilePicker() {
+      // Access the native input element within the BFormFile component
+      const fileInput = document.getElementById(this.id);
+      if (fileInput) {
+        fileInput.click();
+      }
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.form-control-file {
+// Hide the native file input but keep it accessible
+:deep(.form-control),
+:deep(input[type='file']) {
   opacity: 0;
   height: 0;
-  &:focus + span {
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.add-file-btn {
+  &.disabled {
+    border-color: $gray-400;
+    background-color: $gray-400;
+    color: $gray-600;
+    box-shadow: none !important;
+  }
+  &:focus {
     box-shadow:
       inset 0 0 0 3px theme-color('primary'),
       inset 0 0 0 5px $white;
   }
 }
 
-// Get mouse pointer on complete element
-.add-file-btn {
-  position: relative;
-  &.disabled {
-    border-color: gray('400');
-    background-color: gray('400');
-    color: gray('600');
-    box-shadow: none !important;
-  }
-}
-
 .clear-selected-file {
   display: flex;
   align-items: center;
   background-color: theme-color('light');
-  word-break: break-all; // break long file name into multiple lines
+  word-break: break-all;
   .btn {
     width: 36px;
     height: 36px;