diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index cbf9f3e..5c0d41e 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -8,7 +8,7 @@
     <b-form-group label-for="language" :label="$t('pageLogin.language')">
       <b-form-select
         id="language"
-        v-model="$i18n.locale"
+        v-model="userLocale"
         :options="languages"
         data-test-id="login-select-language"
       ></b-form-select>
@@ -67,8 +67,8 @@
 import { required } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import { useVuelidate } from '@vuelidate/core';
-
-import i18n from '@/i18n';
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import Alert from '@/components/Global/Alert';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
 
@@ -77,12 +77,20 @@
   components: { Alert, InputPasswordToggle },
   mixins: [VuelidateMixin],
   setup() {
+    const { locale } = useI18n();
+    const userLocale = ref(locale.value);
+    watch(userLocale, (newLocale) => {
+      locale.value = newLocale;
+      localStorage.setItem('storedLanguage', newLocale);
+    });
     return {
+      userLocale,
       v$: useVuelidate(),
     };
   },
   data() {
     return {
+      $t: useI18n().t,
       userInfo: {
         username: null,
         password: null,
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 5060306..7aa5b1f 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -278,6 +278,8 @@
 import SearchFilterMixin, {
   searchFilter,
 } from '@/components/Mixins/SearchFilterMixin';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
 
 export default {
   components: {
@@ -315,6 +317,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       isBusy: true,
       fields: [
         {
@@ -328,31 +331,31 @@
         },
         {
           key: 'id',
-          label: this.$t('pageEventLogs.table.id'),
+          label: i18n.global.t('pageEventLogs.table.id'),
           sortable: true,
         },
         {
           key: 'severity',
-          label: this.$t('pageEventLogs.table.severity'),
+          label: i18n.global.t('pageEventLogs.table.severity'),
           sortable: true,
           tdClass: 'text-nowrap',
         },
         {
           key: 'date',
-          label: this.$t('pageEventLogs.table.date'),
+          label: i18n.global.t('pageEventLogs.table.date'),
           sortable: true,
           tdClass: 'text-nowrap',
         },
         {
           key: 'description',
-          label: this.$t('pageEventLogs.table.description'),
+          label: i18n.global.t('pageEventLogs.table.description'),
           tdClass: 'text-break',
         },
         process.env.VUE_APP_EVENT_LOGS_TOGGLE_BUTTON_DISABLED === 'true'
           ? {}
           : {
               key: 'status',
-              label: this.$t('pageEventLogs.table.status'),
+              label: i18n.global.t('pageEventLogs.table.status'),
             },
         {
           key: 'actions',
@@ -366,19 +369,19 @@
           ? [
               {
                 key: 'severity',
-                label: this.$t('pageEventLogs.table.severity'),
+                label: i18n.global.t('pageEventLogs.table.severity'),
                 values: ['OK', 'Warning', 'Critical'],
               },
             ]
           : [
               {
                 key: 'severity',
-                label: this.$t('pageEventLogs.table.severity'),
+                label: i18n.global.t('pageEventLogs.table.severity'),
                 values: ['OK', 'Warning', 'Critical'],
               },
               {
                 key: 'filterByStatus',
-                label: this.$t('pageEventLogs.table.status'),
+                label: i18n.global.t('pageEventLogs.table.status'),
                 values: ['Resolved', 'Unresolved'],
               },
             ],
@@ -390,7 +393,7 @@
           : [
               {
                 value: 'delete',
-                label: this.$t('global.action.delete'),
+                label: i18n.global.t('global.action.delete'),
               },
             ],
       currentPage: currentPage,
@@ -426,17 +429,17 @@
             ? [
                 {
                   value: 'export',
-                  title: this.$t('global.action.export'),
+                  title: i18n.global.t('global.action.export'),
                 },
               ]
             : [
                 {
                   value: 'export',
-                  title: this.$t('global.action.export'),
+                  title: i18n.global.t('global.action.export'),
                 },
                 {
                   value: 'delete',
-                  title: this.$t('global.action.delete'),
+                  title: i18n.global.t('global.action.delete'),
                 },
               ],
         };
@@ -494,11 +497,11 @@
     },
     deleteAllLogs() {
       this.$bvModal
-        .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), {
-          title: this.$t('pageEventLogs.modal.deleteAllTitle'),
-          okTitle: this.$t('global.action.delete'),
+        .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteAllMessage'), {
+          title: i18n.global.t('pageEventLogs.modal.deleteAllTitle'),
+          okTitle: i18n.global.t('global.action.delete'),
           okVariant: 'danger',
-          cancelTitle: this.$t('global.action.cancel'),
+          cancelTitle: i18n.global.t('global.action.cancel'),
           autoFocusButton: 'cancel',
         })
         .then((deleteConfirmed) => {
@@ -544,8 +547,8 @@
         this.$bvModal
           .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
             title: this.$tc('pageEventLogs.modal.deleteTitle'),
-            okTitle: this.$t('global.action.delete'),
-            cancelTitle: this.$t('global.action.cancel'),
+            okTitle: i18n.global.t('global.action.delete'),
+            cancelTitle: i18n.global.t('global.action.cancel'),
             autoFocusButton: 'ok',
           })
           .then((deleteConfirmed) => {
@@ -567,8 +570,8 @@
                 'pageEventLogs.modal.deleteTitle',
                 this.selectedRows.length,
               ),
-              okTitle: this.$t('global.action.delete'),
-              cancelTitle: this.$t('global.action.cancel'),
+              okTitle: i18n.global.t('global.action.delete'),
+              cancelTitle: i18n.global.t('global.action.cancel'),
               autoFocusButton: 'ok',
             },
           )
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index d999be4..2bf4205 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -37,6 +37,7 @@
 import OverviewServer from './OverviewServer';
 import PageSection from '@/components/Global/PageSection';
 import PageTitle from '@/components/Global/PageTitle';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'Overview',
@@ -55,6 +56,7 @@
   mixins: [LoadingBarMixin],
   data() {
     return {
+      $t: useI18n().t,
       showDumps: process.env.VUE_APP_ENV_NAME === 'ibm',
     };
   },
diff --git a/src/views/Overview/OverviewCard.vue b/src/views/Overview/OverviewCard.vue
index aa5697d..342bf98 100644
--- a/src/views/Overview/OverviewCard.vue
+++ b/src/views/Overview/OverviewCard.vue
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import { useI18n } from 'vue-i18n';
 export default {
   name: 'OverviewCard',
   props: {
@@ -56,6 +57,11 @@
       default: '/',
     },
   },
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     dataForExport() {
       return JSON.stringify(this.data);
diff --git a/src/views/Overview/OverviewDumps.vue b/src/views/Overview/OverviewDumps.vue
index 6db5d28..ba7d7e2 100644
--- a/src/views/Overview/OverviewDumps.vue
+++ b/src/views/Overview/OverviewDumps.vue
@@ -21,6 +21,7 @@
 <script>
 import OverviewCard from './OverviewCard';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'Dumps',
@@ -28,6 +29,11 @@
     OverviewCard,
   },
   mixins: [DataFormatterMixin],
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     dumps() {
       return this.$store.getters['dumps/allDumps'];
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 4d85dbd..0056af4 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -34,11 +34,17 @@
 import OverviewCard from './OverviewCard';
 import StatusIcon from '@/components/Global/StatusIcon';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'Events',
   components: { OverviewCard, StatusIcon },
   mixins: [DataFormatterMixin],
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     eventLogData() {
       return this.$store.getters['eventLog/allEvents'];
diff --git a/src/views/Overview/OverviewFirmware.vue b/src/views/Overview/OverviewFirmware.vue
index c2c7f4a..0be920f 100644
--- a/src/views/Overview/OverviewFirmware.vue
+++ b/src/views/Overview/OverviewFirmware.vue
@@ -26,6 +26,7 @@
 import OverviewCard from './OverviewCard';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import { mapState } from 'vuex';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'Firmware',
@@ -33,6 +34,11 @@
     OverviewCard,
   },
   mixins: [DataFormatterMixin],
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     ...mapState({
       server: (state) => state.system.systems[0],
diff --git a/src/views/Overview/OverviewInventory.vue b/src/views/Overview/OverviewInventory.vue
index 1da5685..4d923e1 100644
--- a/src/views/Overview/OverviewInventory.vue
+++ b/src/views/Overview/OverviewInventory.vue
@@ -30,6 +30,7 @@
 <script>
 import OverviewCard from './OverviewCard';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'Inventory',
@@ -37,6 +38,11 @@
     OverviewCard,
   },
   mixins: [BVToastMixin],
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     systems() {
       let systemData = this.$store.getters['system/systems'][0];
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index f25c7e0..c2a7693 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -50,6 +50,7 @@
 <script>
 import OverviewCard from './OverviewCard';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'Network',
@@ -57,6 +58,11 @@
     OverviewCard,
   },
   mixins: [DataFormatterMixin],
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     network() {
       return this.$store.getters['network/globalNetworkSettings'][0];
diff --git a/src/views/Overview/OverviewPower.vue b/src/views/Overview/OverviewPower.vue
index 0d84c76..74a737e 100644
--- a/src/views/Overview/OverviewPower.vue
+++ b/src/views/Overview/OverviewPower.vue
@@ -26,6 +26,7 @@
 import OverviewCard from './OverviewCard';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import { mapGetters } from 'vuex';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'Power',
@@ -33,6 +34,11 @@
     OverviewCard,
   },
   mixins: [DataFormatterMixin],
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     ...mapGetters({
       powerCapValue: 'powerControl/powerCapValue',
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 2ab7654..ef9ab12 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -28,6 +28,7 @@
 <script>
 import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'QuickLinks',
@@ -35,6 +36,11 @@
     IconArrowRight: ArrowRight16,
   },
   mixins: [BVToastMixin],
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     bmcTime() {
       return this.$store.getters['global/bmcTime'];
diff --git a/src/views/Overview/OverviewServer.vue b/src/views/Overview/OverviewServer.vue
index 8fc16d1..fe0e41d 100644
--- a/src/views/Overview/OverviewServer.vue
+++ b/src/views/Overview/OverviewServer.vue
@@ -26,6 +26,7 @@
 import OverviewCard from './OverviewCard';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import { mapState } from 'vuex';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'Server',
@@ -33,6 +34,11 @@
     OverviewCard,
   },
   mixins: [DataFormatterMixin],
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     ...mapState({
       server: (state) => state.system.systems[0],