diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue
index e8de9e2..a66d112 100644
--- a/src/components/Global/Alert.vue
+++ b/src/components/Global/Alert.vue
@@ -24,7 +24,7 @@
 
 <script>
 import StatusIcon from '@/components/Global/StatusIcon';
-import { BAlert } from 'bootstrap-vue';
+import { BAlert } from 'bootstrap-vue-next';
 
 export default {
   name: 'Alert',
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index 6d2f740..be6c75d 100644
--- a/src/components/Global/ButtonBackToTop.vue
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -8,7 +8,9 @@
     @click="scrollToTop"
   >
     <icon-up-to-top />
-    <span class="sr-only">{{ $t('global.ariaLabel.scrollToTop') }}</span>
+    <span class="visually-hidden-focusable">
+      {{ $t('global.ariaLabel.scrollToTop') }}
+    </span>
   </b-button>
 </template>
 
diff --git a/src/components/Global/ConfirmModal.vue b/src/components/Global/ConfirmModal.vue
new file mode 100644
index 0000000..8a9a7b8
--- /dev/null
+++ b/src/components/Global/ConfirmModal.vue
@@ -0,0 +1,54 @@
+<template>
+  <!-- Simplified ConfirmModal using native Window.confirm() -->
+  <!-- This component preserves the API for future proper modal implementation -->
+  <div style="display: none"></div>
+</template>
+
+<script>
+export default {
+  name: 'ConfirmModal',
+  data() {
+    return {
+      resolve: null,
+    };
+  },
+  created() {
+    const bus = require('@/eventBus').default;
+    bus.$on('confirm:open', this.handleConfirm);
+  },
+  beforeUnmount() {
+    require('@/eventBus').default.$off('confirm:open', this.handleConfirm);
+  },
+  methods: {
+    handleConfirm(options) {
+      // Extract message from options (could be string or object)
+      const message =
+        typeof options === 'string'
+          ? options
+          : options.message || 'Are you sure?';
+
+      // Use native browser confirm for now
+      // The following parameters are accepted but not used by the window.confirm() shim.
+      // They will be used when the proper Bootstrap 5 modal is implemented:
+      // - title: Modal title text
+      // - okTitle: OK/Confirm button text
+      // - cancelTitle: Cancel button text
+      // - okVariant: OK button Bootstrap variant (e.g., 'danger', 'primary')
+      // - cancelVariant: Cancel button Bootstrap variant (e.g., 'secondary')
+      // - autoFocusButton: Which button to focus ('ok' or 'cancel')
+      // - processing: Show processing state with progress bar
+      // - processingText: Processing state message
+      // - processingMax: Processing progress bar maximum value
+      //
+      // Code can safely pass these parameters now and they will work when the
+      // proper modal implementation is added.
+      const result = window.confirm(message);
+
+      // Resolve the promise with result
+      if (options.resolve) {
+        options.resolve(result);
+      }
+    },
+  },
+};
+</script>
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;
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index fc80216..cd7acc1 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -6,7 +6,9 @@
     :title="title"
   >
     <icon-tooltip />
-    <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span>
+    <span class="visually-hidden-focusable">
+      {{ $t('global.ariaLabel.tooltip') }}
+    </span>
   </b-button>
 </template>
 
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index b682cd5..4212dc2 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -10,7 +10,7 @@
     >
       <icon-view-off v-if="isVisible" />
       <icon-view v-else />
-      <span class="sr-only">{{ togglePasswordLabel }}</span>
+      <span class="visually-hidden">{{ togglePasswordLabel }}</span>
     </b-button>
   </div>
 </template>
@@ -31,8 +31,7 @@
   },
   methods: {
     toggleVisibility() {
-      const firstChild = this.$children[0];
-      const inputEl = firstChild ? firstChild.$el : null;
+      const inputEl = this.$el.querySelector('input');
 
       this.isVisible = !this.isVisible;
 
@@ -55,5 +54,6 @@
 <style lang="scss" scoped>
 .input-password-toggle-container {
   position: relative;
+  display: inline-block;
 }
 </style>
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 8b63093..9297690 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -24,16 +24,21 @@
     };
   },
   created() {
-    this.$root.$on('loader-start', () => {
+    this.$eventBus.on('loader-start', () => {
       this.startLoadingInterval();
     });
-    this.$root.$on('loader-end', () => {
+    this.$eventBus.on('loader-end', () => {
       this.endLoadingInterval();
     });
-    this.$root.$on('loader-hide', () => {
+    this.$eventBus.on('loader-hide', () => {
       this.hideLoadingBar();
     });
   },
+  beforeUnmount() {
+    this.$eventBus.off('loader-start', this.handleLoaderStart);
+    this.$eventBus.off('loader-end', this.handleLoaderEnd);
+    this.$eventBus.off('loader-hide', this.handleLoaderHide);
+  },
   methods: {
     startLoadingInterval() {
       this.clearLoadingInterval();
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index ab4adb6..762a0d7 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -10,10 +10,18 @@
   name: 'PageContainer',
   mixins: [JumpLinkMixin],
   created() {
-    this.$root.$on('skip-navigation', () => {
+    // Use global event bus instead of removed $root.$on
+    const eventBus = require('@/eventBus').default;
+    eventBus.$on('skip-navigation', () => {
       this.setFocus(this.$el);
     });
   },
+  beforeUnmount() {
+    require('@/eventBus').default.$off(
+      'skip-navigation',
+      this.handleSkipNavigation,
+    );
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -22,8 +30,8 @@
   height: 100%;
   padding-top: $spacer * 1.5;
   padding-bottom: $spacer * 3;
-  padding-left: $spacer;
-  padding-right: $spacer;
+  padding-inline-start: $spacer;
+  padding-inline-end: $spacer;
 
   &:focus-visible {
     box-shadow: inset 0 0 0 2px theme-color('primary');
@@ -31,7 +39,7 @@
   }
 
   @include media-breakpoint-up($responsive-layout-bp) {
-    padding-left: $spacer * 2;
+    padding-inline-start: $spacer * 2;
   }
 }
 </style>
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index dcc1ca0..82d9719 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -2,16 +2,18 @@
   <div class="search-global">
     <b-form-group
       :label="$t('global.form.search')"
-      :label-for="`searchInput-${_uid}`"
+      :label-for="`searchInput-${uid}`"
       label-class="invisible"
       class="mb-2"
     >
       <b-input-group size="md" class="align-items-center">
-        <b-input-group-prepend>
-          <icon-search class="search-icon" />
-        </b-input-group-prepend>
+        <template #prepend>
+          <b-input-group-text>
+            <icon-search class="search-icon" />
+          </b-input-group-text>
+        </template>
         <b-form-input
-          :id="`searchInput-${_uid}`"
+          :id="`searchInput-${uid}`"
           ref="searchInput"
           v-model="filter"
           class="search-input"
@@ -29,7 +31,9 @@
           @click="onClearSearch"
         >
           <icon-close />
-          <span class="sr-only">{{ $t('global.ariaLabel.clearSearch') }}</span>
+          <span class="visually-hidden">
+            {{ $t('global.ariaLabel.clearSearch') }}
+          </span>
         </b-button>
       </b-input-group>
     </b-form-group>
@@ -58,6 +62,7 @@
     return {
       $t: useI18n().t,
       filter: null,
+      uid: Math.random().toString(36).slice(2),
     };
   },
   methods: {
@@ -67,21 +72,15 @@
     onClearSearch() {
       this.filter = '';
       this.$emit('clear-search');
-      this.$refs.searchInput.focus();
+      const input = this.$refs.searchInput;
+      if (input && typeof input.focus === 'function') input.focus();
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.search-input {
-  padding-left: ($spacer * 2);
-}
 .search-icon {
-  position: absolute;
-  left: 10px;
-  top: 12px;
-  z-index: 4;
-  stroke: gray('400');
+  stroke: $gray-400;
 }
 </style>
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 4552633..9044e52 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -47,7 +47,7 @@
     color: theme-color('danger');
   }
   &.secondary {
-    color: gray('600');
+    color: $gray-600;
     transform: rotate(-45deg);
   }
   &.warning {
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index ca1c852..6d11a07 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -4,13 +4,13 @@
       <b-form-group
         :label="$t('global.table.fromDate')"
         label-for="input-from-date"
-        class="mr-3 my-0 w-100"
+        class="me-3 my-0 w-100"
       >
         <b-input-group>
           <b-form-input
             id="input-from-date"
             v-model="fromDate"
-            placeholder="YYYY-MM-DD"
+            type="date"
             :state="getValidationState(v$.fromDate)"
             class="form-control-with-button mb-3 mb-md-0"
             @blur="v$.fromDate.$touch()"
@@ -20,31 +20,13 @@
               {{ $t('global.form.invalidFormat') }}
             </template>
             <template v-if="v$.fromDate.maxDate.$invalid">
-              {{ $t('global.form.dateMustBeBefore', { date: toDate }) }}
+              {{
+                $t('global.form.dateMustBeBefore', {
+                  date: toDate,
+                })
+              }}
             </template>
           </b-form-invalid-feedback>
-          <b-form-datepicker
-            v-model="fromDate"
-            class="btn-datepicker btn-icon-only"
-            button-only
-            right
-            :max="toDate"
-            :hide-header="true"
-            :locale="locale"
-            :label-help="
-              $t('global.calendar.useCursorKeysToNavigateCalendarDates')
-            "
-            :title="$t('global.calendar.selectDate')"
-            button-variant="link"
-            aria-controls="input-from-date"
-          >
-            <template #button-content>
-              <icon-calendar />
-              <span class="sr-only">
-                {{ $t('global.calendar.selectDate') }}
-              </span>
-            </template>
-          </b-form-datepicker>
         </b-input-group>
       </b-form-group>
       <b-form-group
@@ -56,7 +38,7 @@
           <b-form-input
             id="input-to-date"
             v-model="toDate"
-            placeholder="YYYY-MM-DD"
+            type="date"
             :state="getValidationState(v$.toDate)"
             class="form-control-with-button"
             @blur="v$.toDate.$touch()"
@@ -66,31 +48,13 @@
               {{ $t('global.form.invalidFormat') }}
             </template>
             <template v-if="v$.toDate.minDate.$invalid">
-              {{ $t('global.form.dateMustBeAfter', { date: fromDate }) }}
+              {{
+                $t('global.form.dateMustBeAfter', {
+                  date: fromDate,
+                })
+              }}
             </template>
           </b-form-invalid-feedback>
-          <b-form-datepicker
-            v-model="toDate"
-            class="btn-datepicker btn-icon-only"
-            button-only
-            right
-            :min="fromDate"
-            :hide-header="true"
-            :locale="locale"
-            :label-help="
-              $t('global.calendar.useCursorKeysToNavigateCalendarDates')
-            "
-            :title="$t('global.calendar.selectDate')"
-            button-variant="link"
-            aria-controls="input-to-date"
-          >
-            <template #button-content>
-              <icon-calendar />
-              <span class="sr-only">
-                {{ $t('global.calendar.selectDate') }}
-              </span>
-            </template>
-          </b-form-datepicker>
         </b-input-group>
       </b-form-group>
     </b-col>
@@ -98,7 +62,6 @@
 </template>
 
 <script>
-import IconCalendar from '@carbon/icons-vue/es/calendar/20';
 import { helpers } from 'vuelidate/lib/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import { useVuelidate } from '@vuelidate/core';
@@ -107,7 +70,6 @@
 const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
 
 export default {
-  components: { IconCalendar },
   mixins: [VuelidateMixin],
   emits: ['change'],
   setup() {
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index 690f453..e3afb3e 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -3,7 +3,7 @@
     <p class="d-inline-block mb-0">
       <b-badge v-for="(tag, index) in tags" :key="index" pill>
         {{ tag }}
-        <b-button-close
+        <b-close-button
           :disabled="dropdownVisible"
           :aria-hidden="true"
           @click="removeTag(tag)"
@@ -22,7 +22,7 @@
         <icon-filter />
         {{ $t('global.action.filter') }}
       </template>
-      <b-dropdown-form>
+      <div class="px-3 py-2">
         <b-form-group
           v-for="(filter, index) of filters"
           :key="index"
@@ -35,20 +35,21 @@
               :value="value"
               :data-test-id="`tableFilter-checkbox-${value}`"
             >
-              <b-dropdown-item>
-                {{ value }}
-              </b-dropdown-item>
+              <span class="dropdown-item-text">{{ value }}</span>
             </b-form-checkbox>
           </b-form-checkbox-group>
         </b-form-group>
-      </b-dropdown-form>
-      <b-dropdown-item-button
-        variant="primary"
-        data-test-id="tableFilter-button-clearAll"
-        @click="clearAllTags"
-      >
-        {{ $t('global.action.clearAll') }}
-      </b-dropdown-item-button>
+      </div>
+      <div class="px-3 pb-2">
+        <b-button
+          size="sm"
+          variant="primary"
+          data-test-id="tableFilter-button-clearAll"
+          @click="clearAllTags"
+        >
+          {{ $t('global.action.clearAll') }}
+        </b-button>
+      </div>
     </b-dropdown>
   </div>
 </template>
@@ -113,6 +114,6 @@
 
 <style lang="scss" scoped>
 .badge {
-  margin-right: $spacer / 2;
+  margin-inline-end: calc(#{$spacer} / 2);
 }
 </style>
diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
index e00a380..79162bc 100644
--- a/src/components/Global/TableRowAction.vue
+++ b/src/components/Global/TableRowAction.vue
@@ -1,8 +1,9 @@
 <template>
   <span>
-    <b-link
+    <b-button
       v-if="value === 'export'"
-      class="align-bottom btn-icon-only py-0 btn-link"
+      variant="link"
+      class="align-bottom btn-icon-only py-0"
       :download="download"
       :href="href"
       :title="title"
@@ -10,46 +11,48 @@
       <slot name="icon">
         {{ $t('global.action.export') }}
       </slot>
-      <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
-    </b-link>
-    <b-link
+      <span v-if="btnIconOnly" class="visually-hidden">{{ title }}</span>
+    </b-button>
+    <b-button
       v-else-if="
         value === 'download' && downloadInNewTab && downloadLocation !== ''
       "
-      class="align-bottom btn-icon-only py-0 btn-link"
+      variant="link"
+      class="align-bottom btn-icon-only py-0"
       target="_blank"
       :href="downloadLocation"
       :title="title"
     >
       <slot name="icon" />
-      <span class="sr-only">
+      <span class="visually-hidden">
         {{ $t('global.action.download') }}
       </span>
-    </b-link>
-    <b-link
+    </b-button>
+    <b-button
       v-else-if="value === 'download' && downloadLocation !== ''"
-      class="align-bottom btn-icon-only py-0 btn-link"
+      variant="link"
+      class="align-bottom btn-icon-only py-0"
       :download="exportName"
       :href="downloadLocation"
       :title="title"
     >
       <slot name="icon" />
-      <span class="sr-only">
+      <span class="visually-hidden">
         {{ $t('global.action.download') }}
       </span>
-    </b-link>
+    </b-button>
     <b-button
       v-else-if="showButton"
       variant="link"
       :class="{ 'btn-icon-only': btnIconOnly }"
       :disabled="!enabled"
-      :title="btnIconOnly ? title : !title"
+      :title="title"
       @click="$emit('click-table-action', value)"
     >
       <slot name="icon">
         {{ title }}
       </slot>
-      <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
+      <span v-if="btnIconOnly" class="visually-hidden">{{ title }}</span>
     </b-button>
   </span>
 </template>
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 373b90a..ad7c996 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -101,7 +101,7 @@
 
 // Using v-deep to style export slot child-element
 // depricated and vue-js 3
-.toolbar-actions ::v-deep .btn {
+.toolbar-actions :deep(.btn) {
   position: relative;
   &:after {
     content: '';