diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 76c96c0..9d06680 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -246,6 +246,9 @@
 </script>
 
 <style lang="scss">
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 @mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
   box-shadow:
     inset 0 0 0 3px $padding-color,
@@ -256,11 +259,11 @@
     position: absolute;
     top: -60px;
     left: 0.5rem;
-    z-index: $zindex-popover;
-    transition: $duration--moderate-01 $exit-easing--expressive;
+    //z-index: $zindex-popover;
+    //transition: $duration--moderate-01 $exit-easing--expressive;
     &:focus {
       top: 0.5rem;
-      transition-timing-function: $entrance-easing--expressive;
+      //transition-timing-function: $entrance-easing--expressive;
     }
   }
   .navbar-text,
@@ -289,6 +292,7 @@
   .navbar {
     padding: 0;
     background-color: $navbar-color;
+
     @include media-breakpoint-up($responsive-layout-bp) {
       height: $header-height;
     }
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index a5f8105..4c93be5 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -3,11 +3,11 @@
     <div class="nav-container" :class="{ open: isNavigationOpen }">
       <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
         <b-nav vertical class="mb-4">
-          <template v-for="(navItem, index) in navigationItems">
+          <template v-for="navItem in navigationItems">
             <!-- Navigation items with no children -->
             <b-nav-item
               v-if="!navItem.children"
-              :key="index"
+              :key="navItem.index"
               :to="navItem.route"
               :data-test-id="`nav-item-${navItem.id}`"
             >
@@ -16,7 +16,7 @@
             </b-nav-item>
 
             <!-- Navigation items with children -->
-            <li v-else :key="index" class="nav-item">
+            <li v-else :key="navItem.index" class="nav-item">
               <b-button
                 v-b-toggle="`${navItem.id}`"
                 variant="link"
@@ -101,7 +101,10 @@
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 svg {
   fill: currentColor;
   height: 1.2rem;
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index 9160c7b..3ceb691 100644
--- a/src/components/Global/ButtonBackToTop.vue
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -45,6 +45,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .btn-top {
   position: fixed;
   bottom: 24px;
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index 50ac961..1eafa25 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -82,6 +82,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .form-control-file {
   opacity: 0;
   height: 0;
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index c91109d..0e5c3b5 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -25,6 +25,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .btn-tooltip {
   padding: 0;
   line-height: 1em;
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index d2c0d4a..cd86920 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -48,6 +48,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .input-password-toggle-container {
   position: relative;
 }
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 0e9551b..337aaf0 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -72,6 +72,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .progress {
   position: absolute;
   left: 0;
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index ab4adb6..0de5fe7 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -17,6 +17,10 @@
 };
 </script>
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import 'bootstrap/dist/css/bootstrap.css';
 main {
   width: 100%;
   height: 100%;
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index dd39ddd..15aa383 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -18,6 +18,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .page-section {
   margin-bottom: $spacer * 4;
 }
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index c3b49d8..ca7f608 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
 export default {
   name: 'PageTitle',
   props: {
@@ -32,14 +32,17 @@
         );
         i++;
       }
-      this.title = i18n.t('appPageTitle.' + title);
-      document.title = this.title;
+      //this.title = i18n.t('appPageTitle.' + title);
+      //document.title = this.title;
     }
   },
 };
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .page-title {
   margin-bottom: $spacer * 2;
 }
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index ac8f9bf..d53315b 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -70,6 +70,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .search-input {
   padding-left: ($spacer * 2);
 }
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 4552633..6c1505e 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -34,6 +34,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .status-icon {
   vertical-align: text-bottom;
 
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index aa10cb5..4e8c5b9 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -99,15 +99,20 @@
 
 <script>
 import IconCalendar from '@carbon/icons-vue/es/calendar/20';
-import { helpers } from 'vuelidate/lib/validators';
-
+import { helpers } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
 
 export default {
   components: { IconCalendar },
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       fromDate: '',
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index f26777b..8c4f509 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -109,6 +109,11 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import 'bootstrap/dist/css/bootstrap.css';
+
 .badge {
   margin-right: $spacer / 2;
 }
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 5235fea..7c0f490 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -69,12 +69,17 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import 'bootstrap/dist/css/bootstrap.css';
+
 $toolbar-height: 46px;
 
 .toolbar-container {
   width: 100%;
   position: relative;
-  z-index: $zindex-dropdown + 1;
+  //z-index: $zindex-dropdown + 1;
 }
 
 .toolbar-content {
diff --git a/src/components/Mixins/BVPaginationMixin.js b/src/components/Mixins/BVPaginationMixin.js
index 4ccf6f2..0bdf368 100644
--- a/src/components/Mixins/BVPaginationMixin.js
+++ b/src/components/Mixins/BVPaginationMixin.js
@@ -1,4 +1,4 @@
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
 export const currentPage = 1;
 export const perPage = 20;
 export const itemsPerPageOptions = [
@@ -20,7 +20,8 @@
   },
   {
     value: 0,
-    text: i18n.t('global.table.viewAll'),
+    //text: i18n.$t('global.table.viewAll'),
+    text: 'global.table.viewAll',
   },
 ];
 const BVPaginationMixin = {
diff --git a/src/components/Mixins/TableRowExpandMixin.js b/src/components/Mixins/TableRowExpandMixin.js
index 7f815a4..92b2448 100644
--- a/src/components/Mixins/TableRowExpandMixin.js
+++ b/src/components/Mixins/TableRowExpandMixin.js
@@ -1,5 +1,7 @@
-import i18n from '@/i18n';
-export const expandRowLabel = i18n.t('global.table.expandTableRow');
+//import i18n from '@/i18n';
+//export const expandRowLabel = i18n.$t('global.table.expandTableRow');
+
+export const expandRowLabel = 'expand row label TODO';
 
 const TableRowExpandMixin = {
   methods: {