diff --git a/src/App.vue b/src/App.vue
index fc04b70..35a743c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,8 @@
   name: 'App',
   computed: {
     assetTag() {
-      return this.$store.getters['global/assetTag'];
+      return '';
+      //return this.$store.getters['global/assetTag'];
     },
   },
   watch: {
@@ -25,12 +26,15 @@
       }
     },
   },
+  getters: {},
   created() {
-    document.title = this.$route.meta.title || 'Page is missing title';
+    document.title = '';
+    //document.title = this.$route.meta.title || 'Page is missing title';
   },
 };
 </script>
 
 <style lang="scss">
-@import '@/assets/styles/_obmc-custom';
+//@import '@/assets/styles/_obmc-custom';
+//@import './assets/styles/bootstrap/_helpers.scss';
 </style>
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 2a7b816..597766c 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -1,3 +1,5 @@
+@import 'bootstrap/dist/css/bootstrap.css';
+
 .btn {
   padding-top: $spacer / 2;
   padding-right: $spacer;
@@ -71,7 +73,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  z-index: $zindex-dropdown + 1;
+  //z-index: $zindex-dropdown + 1;
 }
 
 // Contain input buttons within input
diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
index 969c4c6..56d2ace 100644
--- a/src/assets/styles/bmc/custom/_dropdown.scss
+++ b/src/assets/styles/bmc/custom/_dropdown.scss
@@ -1,6 +1,8 @@
+@import 'bootstrap/dist/css/bootstrap.css';
+
 // Make calendar visible over the table
 .dropdown-menu {
-  z-index: $zindex-dropdown + 1;
+  //z-index: $zindex-dropdown + 1;
   padding: 0;
 }
 .dropdown-item {
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index e8b5a83..deeddc3 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -1,6 +1,8 @@
+@import 'bootstrap/dist/css/bootstrap.css'
+
 .table {
   position: relative;
-  z-index: $zindex-dropdown;
+  //z-index: $zindex-dropdown;
 
   td {
     border-top: 1px solid gray("300");
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: {
diff --git a/src/env/assets/styles/_default.scss b/src/env/assets/styles/_default.scss
new file mode 100644
index 0000000..8d78728
--- /dev/null
+++ b/src/env/assets/styles/_default.scss
@@ -0,0 +1 @@
+// This file shall remain empty.
\ No newline at end of file
diff --git a/src/eventBus.js b/src/eventBus.js
index c31c98a..68c120f 100644
--- a/src/eventBus.js
+++ b/src/eventBus.js
@@ -1,5 +1,5 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 
-const eventBus = new Vue();
+const eventBus = createApp();
 
 export default eventBus;
diff --git a/src/i18n.js b/src/i18n.js
index c60573c..8135a40 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -1,26 +1,17 @@
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
+import { createI18n } from 'vue-i18n';
 
-Vue.use(VueI18n);
+import en_us from './locales/en-US.json';
+import ru_ru from './locales/ru-RU.json';
 
 function loadLocaleMessages() {
-  const locales = require.context(
-    './locales',
-    true,
-    /[A-Za-z0-9-_,\s]+\.json$/i,
-  );
-  const messages = {};
-  locales.keys().forEach((key) => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
-    if (matched && matched.length > 1) {
-      const locale = matched[1];
-      messages[locale] = locales(key);
-    }
-  });
+  const messages = {
+    'en-US': en_us,
+    'ru-RU': ru_ru,
+  };
   return messages;
 }
 
-export default new VueI18n({
+const i18n = createI18n({
   // Get default locale from local storage
   locale: window.localStorage.getItem('storedLanguage'),
   // Locales that don't exist will fallback to English
@@ -29,4 +20,8 @@
   // Silent fallback suppresses console warnings when using fallback
   silentFallbackWarn: true,
   messages: loadLocaleMessages(),
+  globalInjection: false,
+  legacy: true,
 });
+
+export default i18n;
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 25ba3f6..fa9c212 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -63,6 +63,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .app-container {
   display: grid;
   grid-template-columns: 100%;
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index dba1980..a79228f 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -44,9 +44,16 @@
     };
   },
 };
+('');
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bmc/helpers';
+@import '@/assets/styles/bootstrap/_helpers';
+
 .login-container {
   background: gray('100');
   display: flex;
diff --git a/src/main.js b/src/main.js
index 43d09b8..23bfb69 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,26 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
+
 import App from './App.vue';
+import i18n from './i18n';
+
 import router from './router';
 
+//import { format } from 'date-fns-tz';
+
 //Do not change store import.
 //Exact match alias set to support
 //dotenv customizations.
 import store from './store';
 import eventBus from './eventBus';
 
+import './assets/styles/bmc/helpers/_index.scss';
+import './assets/styles/bootstrap/_helpers.scss';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+
 import {
+  BootstrapVue,
   AlertPlugin,
   BadgePlugin,
   ButtonPlugin,
@@ -39,11 +51,9 @@
   ToastPlugin,
   TooltipPlugin,
 } from 'bootstrap-vue';
-import Vuelidate from 'vuelidate';
-import i18n from './i18n';
-import { format } from 'date-fns-tz';
 
 // Filters
+/*
 Vue.filter('shortTimeZone', function (value) {
   const longTZ = value
     .toString()
@@ -83,12 +93,24 @@
     return format(value, pattern, { timezone }).replace('GMT', 'UTC');
   }
 });
+*/
+
+const app = createApp({
+  router,
+  store,
+  render: (h) => h(App),
+});
+app.use(i18n);
+
+app.use(router);
+app.use(store);
 
 // Plugins
-Vue.use(AlertPlugin);
-Vue.use(BadgePlugin);
-Vue.use(ButtonPlugin);
-Vue.use(BVConfigPlugin, {
+app.use(BootstrapVue);
+app.use(AlertPlugin);
+app.use(BadgePlugin);
+app.use(ButtonPlugin);
+app.use(BVConfigPlugin, {
   BFormText: { textVariant: 'secondary' },
   BTable: {
     headVariant: 'light',
@@ -102,38 +124,33 @@
     variant: 'primary',
   },
 });
-Vue.use(CardPlugin);
-Vue.use(CollapsePlugin);
-Vue.use(DropdownPlugin);
-Vue.use(FormPlugin);
-Vue.use(FormCheckboxPlugin);
-Vue.use(FormDatepickerPlugin);
-Vue.use(FormFilePlugin);
-Vue.use(FormGroupPlugin);
-Vue.use(FormInputPlugin);
-Vue.use(FormRadioPlugin);
-Vue.use(FormSelectPlugin);
-Vue.use(FormTagsPlugin);
-Vue.use(InputGroupPlugin);
-Vue.use(LayoutPlugin);
-Vue.use(LayoutPlugin);
-Vue.use(LinkPlugin);
-Vue.use(ListGroupPlugin);
-Vue.use(ModalPlugin);
-Vue.use(NavbarPlugin);
-Vue.use(NavPlugin);
-Vue.use(PaginationPlugin);
-Vue.use(ProgressPlugin);
-Vue.use(TablePlugin);
-Vue.use(TabsPlugin);
-Vue.use(ToastPlugin);
-Vue.use(TooltipPlugin);
-Vue.use(Vuelidate);
 
-new Vue({
-  router,
-  store,
-  i18n,
-  render: (h) => h(App),
-}).$mount('#app');
-Vue.prototype.$eventBus = eventBus;
+app.use(CardPlugin);
+app.use(CollapsePlugin);
+app.use(DropdownPlugin);
+app.use(FormPlugin);
+app.use(FormCheckboxPlugin);
+app.use(FormDatepickerPlugin);
+app.use(FormFilePlugin);
+app.use(FormGroupPlugin);
+app.use(FormInputPlugin);
+app.use(FormRadioPlugin);
+app.use(FormSelectPlugin);
+app.use(FormTagsPlugin);
+app.use(InputGroupPlugin);
+app.use(LayoutPlugin);
+app.use(LayoutPlugin);
+app.use(LinkPlugin);
+app.use(ListGroupPlugin);
+app.use(ModalPlugin);
+app.use(NavbarPlugin);
+app.use(NavPlugin);
+app.use(PaginationPlugin);
+app.use(ProgressPlugin);
+app.use(TablePlugin);
+app.use(TabsPlugin);
+app.use(ToastPlugin);
+app.use(TooltipPlugin);
+
+app.mount('#app');
+app.prototype.$eventBus = eventBus;
diff --git a/src/router/routes.js b/src/router/routes.js
index 5424cab..8b3ff17 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -30,7 +30,7 @@
 import VirtualMedia from '@/views/Operations/VirtualMedia';
 import Power from '@/views/ResourceManagement/Power';
 import SnmpAlerts from '@/views/Settings/SnmpAlerts';
-import i18n from '@/i18n';
+//import { i18n } from '@/i18n';
 
 const roles = {
   administrator: 'Administrator',
@@ -49,7 +49,7 @@
         name: 'login',
         component: Login,
         meta: {
-          title: i18n.t('appPageTitle.login'),
+          //title: i18n.$t('appPageTitle.login'),
         },
       },
       {
@@ -57,7 +57,7 @@
         name: 'change-password',
         component: ChangePassword,
         meta: {
-          title: i18n.t('appPageTitle.changePassword'),
+          //title: i18n.$t('appPageTitle.changePassword'),
           requiresAuth: true,
         },
       },
@@ -75,7 +75,7 @@
         name: 'serial-over-lan-console',
         component: SerialOverLanConsole,
         meta: {
-          title: i18n.t('appPageTitle.serialOverLan'),
+          //title: i18n.t('appPageTitle.serialOverLan'),
         },
       },
       {
@@ -83,7 +83,7 @@
         name: 'kvm-console',
         component: KvmConsole,
         meta: {
-          title: i18n.t('appPageTitle.kvm'),
+          //title: i18n.t('appPageTitle.kvm'),
         },
       },
     ],
@@ -100,7 +100,7 @@
         name: 'overview',
         component: Overview,
         meta: {
-          title: i18n.t('appPageTitle.overview'),
+          //title: i18n.t('appPageTitle.overview'),
         },
       },
       {
@@ -108,7 +108,7 @@
         name: 'profile-settings',
         component: ProfileSettings,
         meta: {
-          title: i18n.t('appPageTitle.profileSettings'),
+          //title: i18n.t('appPageTitle.profileSettings'),
         },
       },
       {
@@ -116,7 +116,7 @@
         name: 'event-logs',
         component: EventLogs,
         meta: {
-          title: i18n.t('appPageTitle.eventLogs'),
+          //title: i18n.t('appPageTitle.eventLogs'),
         },
       },
       {
@@ -124,7 +124,7 @@
         name: 'post-code-logs',
         component: PostCodeLogs,
         meta: {
-          title: i18n.t('appPageTitle.postCodeLogs'),
+          //title: i18n.t('appPageTitle.postCodeLogs'),
         },
       },
       {
@@ -132,7 +132,7 @@
         name: 'inventory',
         component: Inventory,
         meta: {
-          title: i18n.t('appPageTitle.inventory'),
+          //title: i18n.t('appPageTitle.inventory'),
         },
       },
       {
@@ -140,7 +140,7 @@
         name: 'sensors',
         component: Sensors,
         meta: {
-          title: i18n.t('appPageTitle.sensors'),
+          //title: i18n.t('appPageTitle.sensors'),
         },
       },
       {
@@ -148,7 +148,7 @@
         name: 'sessions',
         component: Sessions,
         meta: {
-          title: i18n.t('appPageTitle.sessions'),
+          //title: i18n.t('appPageTitle.sessions'),
         },
       },
       {
@@ -156,7 +156,7 @@
         name: 'ldap',
         component: Ldap,
         meta: {
-          title: i18n.t('appPageTitle.ldap'),
+          //title: i18n.t('appPageTitle.ldap'),
         },
       },
       {
@@ -164,7 +164,7 @@
         name: 'user-management',
         component: UserManagement,
         meta: {
-          title: i18n.t('appPageTitle.userManagement'),
+          //title: i18n.t('appPageTitle.userManagement'),
         },
       },
       {
@@ -172,7 +172,7 @@
         name: 'policies',
         component: Policies,
         meta: {
-          title: i18n.t('appPageTitle.policies'),
+          //title: i18n.t('appPageTitle.policies'),
         },
       },
       {
@@ -180,7 +180,7 @@
         name: 'certificates',
         component: Certificates,
         meta: {
-          title: i18n.t('appPageTitle.certificates'),
+          //title: i18n.t('appPageTitle.certificates'),
         },
       },
       {
@@ -188,7 +188,7 @@
         name: 'date-time',
         component: DateTime,
         meta: {
-          title: i18n.t('appPageTitle.dateTime'),
+          //title: i18n.t('appPageTitle.dateTime'),
         },
       },
       {
@@ -196,7 +196,7 @@
         name: 'snmp-alerts',
         component: SnmpAlerts,
         meta: {
-          title: i18n.t('appPageTitle.snmpAlerts'),
+          //title: i18n.t('appPageTitle.snmpAlerts'),
         },
       },
       {
@@ -204,7 +204,7 @@
         name: 'factory-reset',
         component: FactoryReset,
         meta: {
-          title: i18n.t('appPageTitle.factoryReset'),
+          //title: i18n.t('appPageTitle.factoryReset'),
         },
       },
       {
@@ -212,7 +212,7 @@
         name: 'key-clear',
         component: KeyClear,
         meta: {
-          title: i18n.t('appPageTitle.keyClear'),
+          //title: i18n.t('appPageTitle.keyClear'),
         },
       },
       {
@@ -220,7 +220,7 @@
         name: 'kvm',
         component: Kvm,
         meta: {
-          title: i18n.t('appPageTitle.kvm'),
+          //title: i18n.t('appPageTitle.kvm'),
         },
       },
       {
@@ -228,7 +228,7 @@
         name: 'firmware',
         component: Firmware,
         meta: {
-          title: i18n.t('appPageTitle.firmware'),
+          //title: i18n.t('appPageTitle.firmware'),
         },
       },
       {
@@ -236,7 +236,7 @@
         name: 'network',
         component: Network,
         meta: {
-          title: i18n.t('appPageTitle.network'),
+          //title: i18n.t('appPageTitle.network'),
         },
       },
       {
@@ -244,7 +244,7 @@
         name: 'power-restore-policy',
         component: PowerRestorePolicy,
         meta: {
-          title: i18n.t('appPageTitle.powerRestorePolicy'),
+          //title: i18n.t('appPageTitle.powerRestorePolicy'),
         },
       },
       {
@@ -252,7 +252,7 @@
         name: 'power',
         component: Power,
         meta: {
-          title: i18n.t('appPageTitle.power'),
+          //title: i18n.t('appPageTitle.power'),
         },
       },
       {
@@ -260,7 +260,7 @@
         name: 'reboot-bmc',
         component: RebootBmc,
         meta: {
-          title: i18n.t('appPageTitle.rebootBmc'),
+          //title: i18n.t('appPageTitle.rebootBmc'),
         },
       },
       {
@@ -268,7 +268,7 @@
         name: 'serial-over-lan',
         component: SerialOverLan,
         meta: {
-          title: i18n.t('appPageTitle.serialOverLan'),
+          //title: i18n.t('appPageTitle.serialOverLan'),
           exclusiveToRoles: [roles.administrator],
         },
       },
@@ -277,7 +277,7 @@
         name: 'server-power-operations',
         component: ServerPowerOperations,
         meta: {
-          title: i18n.t('appPageTitle.serverPowerOperations'),
+          //title: i18n.t('appPageTitle.serverPowerOperations'),
         },
       },
       {
@@ -285,7 +285,7 @@
         name: 'virtual-media',
         component: VirtualMedia,
         meta: {
-          title: i18n.t('appPageTitle.virtualMedia'),
+          //title: i18n.t('appPageTitle.virtualMedia'),
           exclusiveToRoles: [roles.administrator],
         },
       },
@@ -294,7 +294,7 @@
         name: 'page-not-found',
         component: PageNotFound,
         meta: {
-          title: i18n.t('appPageTitle.pageNotFound'),
+          //title: i18n.t('appPageTitle.pageNotFound'),
         },
       },
     ],
diff --git a/src/store/api.js b/src/store/api.js
index 0bd84e6..45ffc3c 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -4,7 +4,7 @@
 //Do not change store import.
 //Exact match alias set to support
 //dotenv customizations.
-import store from '../store';
+import store from '.';
 
 Axios.defaults.headers.common['Accept'] = 'application/json';
 Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
diff --git a/src/store/index.js b/src/store/index.js
index 453e0f6..029df7a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -36,7 +36,7 @@
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
@@ -74,3 +74,5 @@
     keyClear: KeyClearStore,
   },
 });
+
+export default store;
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index 2440ace..002362a 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -72,16 +72,22 @@
 </template>
 
 <script>
-import { required, sameAs } from 'vuelidate/lib/validators';
+import { required, sameAs } from '@vuelidate/validators';
 import Alert from '@/components/Global/Alert';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   name: 'ChangePassword',
   components: { Alert, InputPasswordToggle },
   mixins: [VuelidateMixin, BVToastMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
@@ -126,6 +132,11 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .change-password__form-container {
   @include media-breakpoint-up('md') {
     max-width: 360px;
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index cf3ee2b..8c1e50d 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -88,14 +88,14 @@
                 <!-- BMC date and time -->
                 <dt>{{ $t('pageInventory.table.bmcDateTime') }}:</dt>
                 <dd>
-                  {{ item.dateTime | formatDate }}
-                  {{ item.dateTime | formatTime }}
+                  {{ item.dateTime }}
+                  {{ item.dateTime }}
                 </dd>
                 <!-- Reset date and time -->
                 <dt>{{ $t('pageInventory.table.lastResetTime') }}:</dt>
                 <dd>
-                  {{ item.lastResetTime | formatDate }}
-                  {{ item.lastResetTime | formatTime }}
+                  {{ item.lastResetTime }}
+                  {{ item.lastResetTime }}
                 </dd>
               </dl>
             </b-col>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index db475c5..aaf1128 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -18,15 +18,15 @@
         id="username"
         v-model="userInfo.username"
         aria-describedby="login-error-alert username-required"
-        :state="getValidationState($v.userInfo.username)"
+        :state="getValidationState(v$.userInfo.username)"
         type="text"
         autofocus="autofocus"
         data-test-id="login-input-username"
-        @input="$v.userInfo.username.$touch()"
+        @input="v$.userInfo.username.$touch()"
       >
       </b-form-input>
       <b-form-invalid-feedback id="username-required" role="alert">
-        <template v-if="!$v.userInfo.username.required">
+        <template v-if="!v$.userInfo.username.required">
           {{ $t('global.form.fieldRequired') }}
         </template>
       </b-form-invalid-feedback>
@@ -38,16 +38,16 @@
           id="password"
           v-model="userInfo.password"
           aria-describedby="login-error-alert password-required"
-          :state="getValidationState($v.userInfo.password)"
+          :state="getValidationState(v$.userInfo.password)"
           type="password"
           data-test-id="login-input-password"
           class="form-control-with-button"
-          @input="$v.userInfo.password.$touch()"
+          @input="v$.userInfo.password.$touch()"
         >
         </b-form-input>
       </input-password-toggle>
       <b-form-invalid-feedback id="password-required" role="alert">
-        <template v-if="!$v.userInfo.password.required">
+        <template v-if="!v$.userInfo.password.required">
           {{ $t('global.form.fieldRequired') }}
         </template>
       </b-form-invalid-feedback>
@@ -64,8 +64,10 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
 import i18n from '@/i18n';
 import Alert from '@/components/Global/Alert';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
@@ -74,6 +76,11 @@
   name: 'Login',
   components: { Alert, InputPasswordToggle },
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       userInfo: {
@@ -110,8 +117,8 @@
   },
   methods: {
     login: function () {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       this.disableSubmitButton = true;
       const username = this.userInfo.username;
       const password = this.userInfo.password;
diff --git a/src/views/Logs/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue
index e89acd9..5a9869a 100644
--- a/src/views/Logs/Dumps/Dumps.vue
+++ b/src/views/Logs/Dumps/Dumps.vue
@@ -84,8 +84,8 @@
 
             <!-- Date and Time column -->
             <template #cell(dateTime)="{ value }">
-              <p class="mb-0">{{ value | formatDate }}</p>
-              <p class="mb-0">{{ value | formatTime }}</p>
+              <p class="mb-0">{{ value }}</p>
+              <p class="mb-0">{{ value }}</p>
             </template>
 
             <!-- Size column -->
diff --git a/src/views/Logs/Dumps/DumpsForm.vue b/src/views/Logs/Dumps/DumpsForm.vue
index 0a9b058..40cea7e 100644
--- a/src/views/Logs/Dumps/DumpsForm.vue
+++ b/src/views/Logs/Dumps/DumpsForm.vue
@@ -33,7 +33,8 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import ModalConfirmation from './DumpsModalConfirmation';
 import Alert from '@/components/Global/Alert';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
@@ -42,6 +43,11 @@
 export default {
   components: { Alert, ModalConfirmation },
   mixins: [BVToastMixin, VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       selectedDumpType: null,
diff --git a/src/views/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
index f8e20cf..2a1e552 100644
--- a/src/views/Logs/Dumps/DumpsModalConfirmation.vue
+++ b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
@@ -40,10 +40,16 @@
 <script>
 import StatusIcon from '@/components/Global/StatusIcon';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: { StatusIcon },
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       confirmed: false,
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 0e7c494..f52e211 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -144,8 +144,8 @@
                     <!-- Modified date -->
                     <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
                     <dd v-if="item.modifiedDate">
-                      {{ item.modifiedDate | formatDate }}
-                      {{ item.modifiedDate | formatTime }}
+                      {{ item.modifiedDate }}
+                      {{ item.modifiedDate }}
                     </dd>
                     <dd v-else>--</dd>
                   </dl>
@@ -170,8 +170,8 @@
           </template>
           <!-- Date column -->
           <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
+            <p class="mb-0">{{ value }}</p>
+            <p class="mb-0">{{ value }}</p>
           </template>
 
           <!-- Status column -->
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index 6b3030b..ad62afc 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -97,8 +97,8 @@
           </template>
           <!-- Date column -->
           <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
+            <p class="mb-0">{{ value }}</p>
+            <p class="mb-0">{{ value }}</p>
           </template>
 
           <!-- Actions column -->
diff --git a/src/views/Operations/FactoryReset/FactoryReset.vue b/src/views/Operations/FactoryReset/FactoryReset.vue
index 897348f..40330b1 100644
--- a/src/views/Operations/FactoryReset/FactoryReset.vue
+++ b/src/views/Operations/FactoryReset/FactoryReset.vue
@@ -51,7 +51,7 @@
     </b-form>
 
     <!-- Modals -->
-    <modal-reset :reset-type="resetOption" @okConfirm="onOkConfirm" />
+    <modal-reset :reset-type="resetOption" @ok-confirm="onOkConfirm" />
   </b-container>
 </template>
 
diff --git a/src/views/Operations/Firmware/FirmwareCardsHost.vue b/src/views/Operations/Firmware/FirmwareCardsHost.vue
index b4a8e90..8fd0cac 100644
--- a/src/views/Operations/Firmware/FirmwareCardsHost.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsHost.vue
@@ -67,6 +67,11 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .page-section {
   margin-top: -$spacer * 1.5;
 }
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index ac4b23f..554d1d4 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -73,11 +73,12 @@
 </template>
 
 <script>
-import { requiredIf } from 'vuelidate/lib/validators';
+import { requiredIf } from '@vuelidate/validators';
 
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 import FormFile from '@/components/Global/FormFile';
 import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
@@ -96,6 +97,11 @@
       type: Boolean,
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       loading,
diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index 62dd47a..cc623e4 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -95,7 +95,7 @@
   mounted() {
     this.openTerminal();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.resizeKvmWindow);
     this.closeTerminal();
   },
@@ -173,7 +173,10 @@
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .button-ctrl-alt-delete {
   float: right;
 }
diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue
index fe57548..e56e968 100644
--- a/src/views/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/Operations/RebootBmc/RebootBmc.vue
@@ -11,8 +11,8 @@
                   {{ $t('pageRebootBmc.lastReboot') }}
                 </dt>
                 <dd v-if="lastBmcRebootTime">
-                  {{ lastBmcRebootTime | formatDate }}
-                  {{ lastBmcRebootTime | formatTime }}
+                  {{ lastBmcRebootTime }}
+                  {{ lastBmcRebootTime }}
                 </dd>
                 <dd v-else>--</dd>
               </dl>
@@ -81,4 +81,7 @@
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+</style>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
index ca81385..8b4cd22 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -86,7 +86,7 @@
   mounted() {
     this.openTerminal();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.resizeConsoleWindow);
     this.closeTerminal();
   },
@@ -161,6 +161,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 @import '~xterm/css/xterm.css';
 
 #terminal {
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index 281bbef..4e26ee1 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -44,8 +44,8 @@
                   v-if="lastPowerOperationTime"
                   data-test-id="powerServerOps-text-lastPowerOp"
                 >
-                  {{ lastPowerOperationTime | formatDate }}
-                  {{ lastPowerOperationTime | formatTime }}
+                  {{ lastPowerOperationTime }}
+                  {{ lastPowerOperationTime }}
                 </dd>
                 <dd v-else>--</dd>
               </dl>
diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
index b0bcfb2..61e2050 100644
--- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -70,8 +70,9 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [VuelidateMixin],
@@ -85,6 +86,11 @@
       },
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/Overview/OverviewCard.vue b/src/views/Overview/OverviewCard.vue
index 4fc0a03..aa5697d 100644
--- a/src/views/Overview/OverviewCard.vue
+++ b/src/views/Overview/OverviewCard.vue
@@ -71,6 +71,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 a {
   vertical-align: middle;
   font-size: 14px;
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 73853bb..4d85dbd 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -85,6 +85,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .status-icon {
   vertical-align: text-top;
 }
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index bc579b0..2ab7654 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -5,7 +5,7 @@
         <dl>
           <dt>{{ $t('pageOverview.bmcTime') }}</dt>
           <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
-            {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
+            {{ bmcTime }} {{ bmcTime }}
           </dd>
           <dd v-else>--</dd>
         </dl>
@@ -49,6 +49,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 dd,
 dl {
   margin: 0;
diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue
index 5d84cce..aa32574 100644
--- a/src/views/ProfileSettings/ProfileSettings.vue
+++ b/src/views/ProfileSettings/ProfileSettings.vue
@@ -145,12 +145,13 @@
 <script>
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-import { maxLength, minLength, sameAs } from 'vuelidate/lib/validators';
+import { maxLength, minLength, sameAs } from '@vuelidate/validators';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   name: 'ProfileSettings',
@@ -161,6 +162,11 @@
     LoadingBarMixin,
     VuelidateMixin,
   ],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/ResourceManagement/Power.vue b/src/views/ResourceManagement/Power.vue
index cc0cc99..8a9503f 100644
--- a/src/views/ResourceManagement/Power.vue
+++ b/src/views/ResourceManagement/Power.vue
@@ -87,8 +87,10 @@
 import PageTitle from '@/components/Global/PageTitle';
 import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import { requiredIf, between } from 'vuelidate/lib/validators';
+import { requiredIf, between } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -99,6 +101,11 @@
     this.hideLoader();
     next();
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       loading,
diff --git a/src/views/SecurityAndAccess/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue
index 35e4b81..bceab5d 100644
--- a/src/views/SecurityAndAccess/Certificates/Certificates.vue
+++ b/src/views/SecurityAndAccess/Certificates/Certificates.vue
@@ -63,7 +63,7 @@
           :empty-text="$t('global.table.emptyMessage')"
         >
           <template #cell(validFrom)="{ value }">
-            {{ value | formatDate }}
+            {{ value }}
           </template>
 
           <template #cell(validUntil)="{ value }">
@@ -71,7 +71,7 @@
               v-if="getDaysUntilExpired(value) < 31"
               :status="getIconStatus(value)"
             />
-            {{ value | formatDate }}
+            {{ value }}
           </template>
 
           <template #cell(actions)="{ value, item }">
diff --git a/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js b/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
index a2d7000..8e8b213 100644
--- a/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
+++ b/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
@@ -1,5 +1,7 @@
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
 
+export const COUNTRY_LIST = [];
+/*
 export const COUNTRY_LIST = [
   { name: 'Afghanistan', code: 'AF', label: i18n.t('countries.AF') },
   { name: 'Albania', code: 'AL', label: i18n.t('countries.AL') },
@@ -342,4 +344,4 @@
   { name: 'Zambia', code: 'ZM', label: i18n.t('countries.ZM') },
   { name: 'Zimbabwe', code: 'ZW', label: i18n.t('countries.ZW') },
   { name: 'Åland Islands', code: 'AX', label: i18n.t('countries.AX') },
-];
+];*/
diff --git a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
index 9f60d2b..03ab8f4 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -363,16 +363,22 @@
 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
 import IconCheckmark from '@carbon/icons-vue/es/checkmark/20';
 
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
 
 import { COUNTRY_LIST } from './CsrCountryCodes';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   name: 'ModalGenerateCsr',
   components: { IconAdd, IconCheckmark },
   mixins: [BVToastMixin, VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
index f4db7a2..60170f1 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
@@ -69,8 +69,9 @@
 </template>
 
 <script>
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 import FormFile from '@/components/Global/FormFile';
 
@@ -90,6 +91,11 @@
       },
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
index a5ee475..28d2b1c 100644
--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
@@ -52,12 +52,12 @@
                 <dl>
                   <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
                   <dd v-if="caCertificateExpiration">
-                    {{ caCertificateExpiration | formatDate }}
+                    {{ caCertificateExpiration }}
                   </dd>
                   <dd v-else>--</dd>
                   <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
                   <dd v-if="ldapCertificateExpiration">
-                    {{ ldapCertificateExpiration | formatDate }}
+                    {{ ldapCertificateExpiration }}
                   </dd>
                   <dd v-else>--</dd>
                 </dl>
@@ -232,7 +232,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import { find } from 'lodash';
-import { requiredIf } from 'vuelidate/lib/validators';
+import { requiredIf } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
@@ -257,6 +258,11 @@
     this.hideLoader();
     next();
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
index beacf57..9b50abd 100644
--- a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
+++ b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
@@ -80,8 +80,9 @@
 </template>
 
 <script>
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [VuelidateMixin],
@@ -98,6 +99,11 @@
       },
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/SecurityAndAccess/Policies/Policies.vue b/src/views/SecurityAndAccess/Policies/Policies.vue
index 3ebfee4..fb52175 100644
--- a/src/views/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/SecurityAndAccess/Policies/Policies.vue
@@ -254,6 +254,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .setting-section {
   border-bottom: 1px solid gray('300');
 }
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
index 0f05123..8932eb5 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -123,12 +123,14 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
 import {
   required,
   requiredIf,
   minValue,
   maxValue,
-} from 'vuelidate/lib/validators';
+} from '@vuelidate/validators';
 
 export default {
   mixins: [VuelidateMixin],
@@ -138,6 +140,11 @@
       required: true,
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index 5ffb297..dca9736 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -27,7 +27,6 @@
               v-model="form.manualUnlock"
               data-test-id="userManagement-input-manualUnlock"
               type="hidden"
-              value="false"
             />
             <b-button
               variant="primary"
@@ -232,8 +231,10 @@
   sameAs,
   helpers,
   requiredIf,
-} from 'vuelidate/lib/validators';
+} from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
 import Alert from '@/components/Global/Alert';
 
@@ -250,6 +251,11 @@
       required: true,
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       originalUsername: '',
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index ab31668..9e33a63 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -399,6 +399,9 @@
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .btn.collapsed {
   svg {
     transform: rotate(180deg);
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index a3fec36..00d7b45 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -18,14 +18,14 @@
         <b-col lg="3">
           <dl>
             <dt>{{ $t('pageDateTime.form.date') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
+            <dd v-if="bmcTime">{{ bmcTime }}</dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
         <b-col lg="3">
           <dl>
             <dt>{{ $t('pageDateTime.form.time.label') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
+            <dd v-if="bmcTime">{{ bmcTime }}</dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
@@ -206,9 +206,10 @@
 import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
 import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 import { mapState } from 'vuex';
-import { requiredIf, helpers } from 'vuelidate/lib/validators';
+import { requiredIf, helpers } from '@vuelidate/validators';
 
 const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
 const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
@@ -226,6 +227,11 @@
     this.hideLoader();
     next();
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       locale: this.$store.getters['global/languagePreference'],
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 7f12717..8fe371e 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -44,10 +44,17 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { ipAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { ipAddress, required } from '@vuelidate/validators';
 
 export default {
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue
index f3221ec..1b3bab1 100644
--- a/src/views/Settings/Network/ModalHostname.vue
+++ b/src/views/Settings/Network/ModalHostname.vue
@@ -49,7 +49,9 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { required, helpers } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { required, helpers } from '@vuelidate/validators';
 
 const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
 
@@ -61,6 +63,11 @@
       default: '',
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/Settings/Network/ModalIpv4.vue b/src/views/Settings/Network/ModalIpv4.vue
index dcf4a57..2c3d9e8 100644
--- a/src/views/Settings/Network/ModalIpv4.vue
+++ b/src/views/Settings/Network/ModalIpv4.vue
@@ -90,7 +90,9 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { ipAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { ipAddress, required } from '@vuelidate/validators';
 
 export default {
   mixins: [VuelidateMixin],
@@ -100,6 +102,11 @@
       default: '',
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/Settings/Network/ModalMacAddress.vue b/src/views/Settings/Network/ModalMacAddress.vue
index d563f4c..307eb8d 100644
--- a/src/views/Settings/Network/ModalMacAddress.vue
+++ b/src/views/Settings/Network/ModalMacAddress.vue
@@ -50,7 +50,9 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { macAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { macAddress, required } from '@vuelidate/validators';
 
 export default {
   mixins: [VuelidateMixin],
@@ -60,6 +62,11 @@
       default: '',
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
index 11870a8..dfa4865 100644
--- a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
+++ b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
@@ -25,6 +25,8 @@
 import PageTitle from '@/components/Global/PageTitle';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 
 export default {
@@ -35,6 +37,11 @@
     this.hideLoader();
     next();
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       policyValue: null,
diff --git a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
index 9637652..f52acd7 100644
--- a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
+++ b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
@@ -82,16 +82,17 @@
 </template>
 
 <script>
-import {
-  required,
-  ipAddress,
-  minValue,
-  maxValue,
-} from 'vuelidate/lib/validators';
+import { required, ipAddress, minValue, maxValue } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {