diff --git a/app/frontend/src/assets/scss/style.scss b/app/frontend/src/assets/scss/style.scss
index 37e64430f..ce7071a95 100755
--- a/app/frontend/src/assets/scss/style.scss
+++ b/app/frontend/src/assets/scss/style.scss
@@ -556,4 +556,19 @@ a,
 
 .v-data-table, .v-data-table-server, .v-table {
   font-size: 16px !important;
+}
+
+.v-select .v-field__input {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.v-select .v-list-item--density-default {
+  min-height: 38px !important;
+}
+
+.vselect .v-label {
+  opacity: 1 !important;
 }
\ No newline at end of file
diff --git a/app/frontend/src/components/admin/AddOwner.vue b/app/frontend/src/components/admin/AddOwner.vue
index 816d2ce52..9ef72925e 100644
--- a/app/frontend/src/components/admin/AddOwner.vue
+++ b/app/frontend/src/components/admin/AddOwner.vue
@@ -1,9 +1,9 @@
 <script>
-import { mapActions, mapState } from 'pinia';
+import { mapActions } from 'pinia';
 import { version as uuidVersion, validate as uuidValidate } from 'uuid';
+import { useI18n } from 'vue-i18n';
 
 import { useAdminStore } from '~/store/admin';
-import { useFormStore } from '~/store/form';
 import { FormRoleCodes } from '~/utils/constants';
 
 export default {
@@ -13,6 +13,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   data() {
     return {
       userGuid: '',
@@ -27,7 +32,6 @@ export default {
   },
   methods: {
     ...mapActions(useAdminStore, ['addFormUser', 'readRoles']),
-    ...mapState(useFormStore, ['lang']),
     async addOwner() {
       if (this.$refs.addUserForm.validate()) {
         await this.addFormUser({
@@ -43,7 +47,7 @@ export default {
 
 <template>
   <v-form ref="addUserForm" v-model="valid">
-    <p :lang="lang">
+    <p :lang="locale">
       {{ $t('trans.addOwner.infoA') }}
     </p>
     <v-row class="mt-4">
@@ -54,7 +58,7 @@ export default {
           :rules="userGuidRules"
           :hint="$t('trans.addOwner.hint')"
           persistent-hint
-          :lang="lang"
+          :lang="locale"
         />
       </v-col>
       <v-col cols="3" md="2">
@@ -64,7 +68,7 @@ export default {
           :title="$t('trans.addOwner.addowner')"
           @click="addOwner"
         >
-          <span :lang="lang">{{ $t('trans.addOwner.addowner') }}</span>
+          <span :lang="locale">{{ $t('trans.addOwner.addowner') }}</span>
         </v-btn>
       </v-col>
     </v-row>
diff --git a/app/frontend/src/components/admin/AdminFormsTable.vue b/app/frontend/src/components/admin/AdminFormsTable.vue
index 66713a7a7..a9a2bcb59 100644
--- a/app/frontend/src/components/admin/AdminFormsTable.vue
+++ b/app/frontend/src/components/admin/AdminFormsTable.vue
@@ -1,11 +1,16 @@
 <script>
 import { mapActions, mapState } from 'pinia';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
 
 import { useAdminStore } from '~/store/admin';
 import { useFormStore } from '~/store/form';
 
 export default {
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       showDeleted: false,
@@ -15,7 +20,7 @@ export default {
   },
   computed: {
     ...mapState(useAdminStore, ['formList']),
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
     calcHeaders() {
       return this.headers.filter(
         (x) => x.key !== 'updatedAt' || this.showDeleted
@@ -24,22 +29,22 @@ export default {
     headers() {
       return [
         {
-          title: i18n.t('trans.adminFormsTable.formTitle'),
+          title: this.$t('trans.adminFormsTable.formTitle'),
           align: 'start',
           key: 'name',
         },
         {
-          title: i18n.t('trans.adminFormsTable.created'),
+          title: this.$t('trans.adminFormsTable.created'),
           align: 'start',
           key: 'createdAt',
         },
         {
-          title: i18n.t('trans.adminFormsTable.deleted'),
+          title: this.$t('trans.adminFormsTable.deleted'),
           align: 'start',
           key: 'updatedAt',
         },
         {
-          title: i18n.t('trans.adminFormsTable.actions'),
+          title: this.$t('trans.adminFormsTable.actions'),
           align: 'end',
           key: 'actions',
           filterable: false,
@@ -76,11 +81,11 @@ export default {
           class="pl-3"
           data-test="checkbox-show-deleted"
           :class="isRTL ? 'float-right' : 'float-left'"
-          :label="$t('trans.adminFormsTable.showDeletedForms')"
+          :label="t('trans.adminFormsTable.showDeletedForms')"
         >
           <template #label>
-            <span :class="{ 'mr-2': isRTL }" :lang="lang">
-              {{ $t('trans.adminFormsTable.showDeletedForms') }}
+            <span :class="{ 'mr-2': isRTL }" :lang="locale">
+              {{ t('trans.adminFormsTable.showDeletedForms') }}
             </span>
           </template>
         </v-checkbox>
@@ -96,8 +101,8 @@ export default {
             v-model="search"
             density="compact"
             variant="underlined"
-            :lang="lang"
-            :label="$t('trans.adminFormsTable.search')"
+            :lang="locale"
+            :label="t('trans.adminFormsTable.search')"
             append-inner-icon="mdi-magnify"
             single-line
             hide-details
@@ -117,9 +122,9 @@ export default {
       :items="formList"
       :search="search"
       :loading="loading"
-      :lang="lang"
-      :loading-text="$t('trans.adminFormsTable.loadingText')"
-      :no-data-text="$t('trans.adminFormsTable.noDataText')"
+      :lang="locale"
+      :loading-text="t('trans.adminFormsTable.loadingText')"
+      :no-data-text="t('trans.adminFormsTable.noDataText')"
     >
       <template #item.createdAt="{ item }">
         {{ $filters.formatDateLong(item.createdAt) }} -
@@ -138,8 +143,8 @@ export default {
             :title="$t('trans.adminFormsTable.admin')"
           >
             <v-icon class="mr-1" icon="mdi:mdi-wrench"></v-icon>
-            <span class="d-none d-sm-flex" :lang="lang">{{
-              $t('trans.adminFormsTable.admin')
+            <span class="d-none d-sm-flex" :lang="locale">{{
+              t('trans.adminFormsTable.admin')
             }}</span>
           </v-btn>
         </router-link>
@@ -158,8 +163,8 @@ export default {
             :title="$t('trans.adminFormsTable.launch')"
           >
             <v-icon class="mr-1" icon="mdi:mdi-note-plus"></v-icon>
-            <span class="d-none d-sm-flex" :lang="lang">{{
-              $t('trans.adminFormsTable.launch')
+            <span class="d-none d-sm-flex" :lang="locale">{{
+              t('trans.adminFormsTable.launch')
             }}</span>
           </v-btn>
         </router-link>
diff --git a/app/frontend/src/components/admin/AdminPage.vue b/app/frontend/src/components/admin/AdminPage.vue
index 72e723e22..a2713710c 100644
--- a/app/frontend/src/components/admin/AdminPage.vue
+++ b/app/frontend/src/components/admin/AdminPage.vue
@@ -1,5 +1,7 @@
 <script>
 import { mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import AdminFormsTable from '~/components/admin/AdminFormsTable.vue';
 import AdminUsersTable from '~/components/admin/AdminUsersTable.vue';
 import AdminAPIsTable from '~/components/admin/AdminAPIsTable.vue';
@@ -19,6 +21,11 @@ export default {
     Developer,
     FormComponentsProactiveHelp,
   },
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   data() {
     return {
       tab: null,
@@ -26,7 +33,7 @@ export default {
   },
   computed: {
     ...mapState(useAppStore, ['config']),
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
     adminDashboardUrl() {
       return this.config.adminDashboardUrl;
     },
@@ -41,16 +48,20 @@ export default {
 
 <template>
   <v-tabs v-model="tab" :class="{ 'dir-rtl': isRTL }">
-    <v-tab value="forms" :lang="lang">{{ $t('trans.adminPage.forms') }}</v-tab>
-    <v-tab value="users" :lang="lang">{{ $t('trans.adminPage.users') }}</v-tab>
-    <v-tab value="apis" :lang="lang">{{ $t('trans.adminPage.apis') }}</v-tab>
-    <v-tab value="developer" :lang="lang">{{
+    <v-tab value="forms" :lang="locale">{{
+      $t('trans.adminPage.forms')
+    }}</v-tab>
+    <v-tab value="users" :lang="locale">{{
+      $t('trans.adminPage.users')
+    }}</v-tab>
+    <v-tab value="apis" :lang="locale">{{ $t('trans.adminPage.apis') }}</v-tab>
+    <v-tab value="developer" :lang="locale">{{
       $t('trans.adminPage.developer')
     }}</v-tab>
-    <v-tab value="infoLinks" :lang="lang">{{
+    <v-tab value="infoLinks" :lang="locale">{{
       $t('trans.adminPage.infoLinks')
     }}</v-tab>
-    <v-tab v-if="adminDashboardUrl" value="dashboard" :lang="lang">{{
+    <v-tab v-if="adminDashboardUrl" value="dashboard" :lang="locale">{{
       $t('trans.adminPage.metrics')
     }}</v-tab>
   </v-tabs>
diff --git a/app/frontend/src/components/admin/AdminUsersTable.vue b/app/frontend/src/components/admin/AdminUsersTable.vue
index 3e6c49408..e8a71782f 100644
--- a/app/frontend/src/components/admin/AdminUsersTable.vue
+++ b/app/frontend/src/components/admin/AdminUsersTable.vue
@@ -1,12 +1,16 @@
 <script>
 import { mapActions, mapState } from 'pinia';
-
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
 
 import { useAdminStore } from '~/store/admin';
 import { useFormStore } from '~/store/form';
 
 export default {
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       loading: true,
@@ -15,26 +19,26 @@ export default {
   },
   computed: {
     ...mapState(useAdminStore, ['userList']),
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
     headers() {
       return [
         {
-          title: i18n.t('trans.adminUsersTable.fullName'),
+          title: this.$t('trans.adminUsersTable.fullName'),
           align: 'start',
           key: 'fullName',
         },
         {
-          title: i18n.t('trans.adminUsersTable.userID'),
+          title: this.$t('trans.adminUsersTable.userID'),
           align: 'start',
           key: 'username',
         },
         {
-          title: i18n.t('trans.adminUsersTable.created'),
+          title: this.$t('trans.adminUsersTable.created'),
           align: 'start',
           key: 'created',
         },
         {
-          title: i18n.t('trans.adminUsersTable.actions'),
+          title: this.$t('trans.adminUsersTable.actions'),
           align: 'end',
           key: 'actions',
           filterable: false,
@@ -73,7 +77,7 @@ export default {
             hide-details
             class="pb-5"
             :class="{ 'dir-rtl': isRTL, label: isRTL }"
-            :lang="lang"
+            :lang="locale"
           />
         </div>
       </v-col>
@@ -89,7 +93,7 @@ export default {
       :search="search"
       :loading="loading"
       :loading-text="$t('trans.adminUsersTable.loadingText')"
-      :lang="lang"
+      :lang="locale"
     >
       <template #item.created="{ item }">
         {{ $filters.formatDate(item.createdAt) }}
@@ -103,7 +107,7 @@ export default {
             :title="$t('trans.adminUsersTable.admin')"
           >
             <v-icon class="mr-1" icon="mdi:mdi-wrench"></v-icon>
-            <span class="d-none d-sm-flex" :lang="lang">{{
+            <span class="d-none d-sm-flex" :lang="locale">{{
               $t('trans.adminUsersTable.admin')
             }}</span>
           </v-btn>
diff --git a/app/frontend/src/components/admin/AdminVersions.vue b/app/frontend/src/components/admin/AdminVersions.vue
index 2b8e474bb..c94cd248a 100644
--- a/app/frontend/src/components/admin/AdminVersions.vue
+++ b/app/frontend/src/components/admin/AdminVersions.vue
@@ -1,13 +1,17 @@
 <script>
 import { mapActions, mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
-import { i18n } from '~/internationalization';
 import adminService from '~/services/adminService';
 import { useAdminStore } from '~/store/admin';
-import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
 
 export default {
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       formSchema: {
@@ -19,31 +23,30 @@ export default {
   },
   computed: {
     ...mapState(useAdminStore, ['form']),
-    ...mapState(useFormStore, ['lang']),
     headers() {
       return [
         {
-          title: i18n.t('trans.adminVersions.versions'),
+          title: this.$t('trans.adminVersions.versions'),
           align: 'start',
           key: 'version',
         },
         {
-          title: i18n.t('trans.adminVersions.status'),
+          title: this.$t('trans.adminVersions.status'),
           align: 'start',
           key: 'status',
         },
         {
-          title: i18n.t('trans.adminVersions.created'),
+          title: this.$t('trans.adminVersions.created'),
           align: 'start',
           key: 'createdAt',
         },
         {
-          title: i18n.t('trans.adminVersions.lastUpdated'),
+          title: this.$t('trans.adminVersions.lastUpdated'),
           align: 'start',
           key: 'updatedAt',
         },
         {
-          title: i18n.t('trans.adminVersions.actions'),
+          title: this.$t('trans.adminVersions.actions'),
           align: 'end',
           key: 'action',
           filterable: false,
@@ -86,7 +89,7 @@ export default {
         this.formSchema = { ...this.formSchema, ...res.data.schema };
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.adminVersions.notificationMsg'),
+          text: this.$t('trans.adminVersions.notificationMsg'),
         });
       }
     },
@@ -100,11 +103,11 @@ export default {
     hover
     :headers="headers"
     :items="versionList"
-    :lang="lang"
+    :lang="locale"
   >
     <!-- Version  -->
     <template #item.version="{ item }">
-      <span :lang="lang">
+      <span :lang="locale">
         {{
           $t('trans.adminVersions.version', {
             versionNo: item.version,
@@ -115,7 +118,7 @@ export default {
 
     <!-- Status  -->
     <template #item.status="{ item }">
-      <label :lang="lang">{{
+      <label :lang="locale">{{
         item.published
           ? $t('trans.adminVersions.published')
           : $t('trans.adminVersions.unpublished')
@@ -149,7 +152,7 @@ export default {
               <v-icon icon="mdi:mdi-download"></v-icon>
             </v-btn>
           </template>
-          <span :lang="lang"
+          <span :lang="locale"
             >{{ $t('trans.adminVersions.exportDesign') }}
           </span>
         </v-tooltip>
diff --git a/app/frontend/src/components/admin/AdministerForm.vue b/app/frontend/src/components/admin/AdministerForm.vue
index 26652c1f0..e61dafccb 100644
--- a/app/frontend/src/components/admin/AdministerForm.vue
+++ b/app/frontend/src/components/admin/AdministerForm.vue
@@ -1,12 +1,12 @@
 <script>
 import { mapActions, mapState } from 'pinia';
 import VueJsonPretty from 'vue-json-pretty';
+import { useI18n } from 'vue-i18n';
 
 import AddOwner from '~/components/admin/AddOwner.vue';
 import AdminVersions from '~/components/admin/AdminVersions.vue';
 import BaseDialog from '~/components/base/BaseDialog.vue';
 import { useAdminStore } from '~/store/admin';
-import { useFormStore } from '~/store/form';
 
 export default {
   components: {
@@ -21,6 +21,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   data() {
     return {
       formDetails: {},
@@ -32,7 +37,6 @@ export default {
   },
   computed: {
     ...mapState(useAdminStore, ['form', 'roles', 'apiKey']),
-    ...mapState(useFormStore, ['lang']),
   },
   async mounted() {
     await Promise.all([
@@ -75,7 +79,7 @@ export default {
     <h3>{{ form.name }}</h3>
     <p>{{ form.description }}</p>
 
-    <div v-if="form.active === false" class="text-red mb-6" :lang="lang">
+    <div v-if="form.active === false" class="text-red mb-6" :lang="locale">
       ({{ $t('trans.administerForm.deleted') }})
       <v-btn
         color="primary"
@@ -86,7 +90,7 @@ export default {
         @click="showRestoreDialog = true"
       >
         <v-icon class="mr-1" icon="mdi:mdi-wrench"></v-icon>
-        <span class="d-none d-sm-flex" :lang="lang">{{
+        <span class="d-none d-sm-flex" :lang="locale">{{
           $t('trans.administerForm.restoreForm')
         }}</span>
       </v-btn>
@@ -95,13 +99,13 @@ export default {
     <v-container>
       <v-row no-gutters>
         <v-col md="6">
-          <h4 :lang="lang">
+          <h4 :lang="locale">
             {{ $t('trans.administerForm.formDetails') }}
           </h4>
           <vue-json-pretty :data="formDetails" />
 
           <div v-if="apiKey" class="mt-6">
-            <h4 :lang="lang">
+            <h4 :lang="locale">
               {{ $t('trans.administerForm.apiKeyDetails') }}
             </h4>
             <vue-json-pretty :data="apiKey" />
@@ -112,14 +116,14 @@ export default {
               :title="$t('trans.administerForm.deleteApiKey')"
               @click="showDeleteDialog = true"
             >
-              <span :lang="lang">{{
+              <span :lang="locale">{{
                 $t('trans.administerForm.deleteApiKey')
               }}</span>
             </v-btn>
           </div>
         </v-col>
         <v-col md="6">
-          <h4 :lang="lang">
+          <h4 :lang="locale">
             {{ $t('trans.administerForm.formUsers') }}
           </h4>
           <vue-json-pretty :data="roles" />
@@ -128,14 +132,14 @@ export default {
     </v-container>
 
     <div v-if="form.active" class="mt-12">
-      <h4 :lang="lang">
+      <h4 :lang="locale">
         {{ $t('trans.administerForm.formVersions') }}
       </h4>
       <AdminVersions />
     </div>
 
     <div v-if="form.active" class="mt-12">
-      <h4 :lang="lang">{{ $t('trans.administerForm.assignANewOwner') }}</h4>
+      <h4 :lang="locale">{{ $t('trans.administerForm.assignANewOwner') }}</h4>
       <AddOwner :form-id="form.id" />
     </div>
 
@@ -146,7 +150,7 @@ export default {
       @continue-dialog="restore"
     >
       <template #title
-        ><span :lang="lang">{{
+        ><span :lang="locale">{{
           $t('trans.administerForm.confirmRestore')
         }}</span></template
       >
@@ -156,19 +160,19 @@ export default {
             indeterminate
             color="primary"
             :size="100"
-            :lang="lang"
+            :lang="locale"
           >
             {{ $t('trans.administerForm.restoring') }}
           </v-progress-circular>
         </div>
-        <div v-else :lang="lang">
+        <div v-else :lang="locale">
           {{ $t('trans.administerForm.restore') }}
           <strong>{{ form.name }}</strong>
           {{ $t('trans.administerForm.toActiveState') }}?
         </div>
       </template>
       <template #button-text-continue>
-        <span :lang="lang">{{ $t('trans.administerForm.restore') }}</span>
+        <span :lang="locale">{{ $t('trans.administerForm.restore') }}</span>
       </template>
     </BaseDialog>
 
@@ -180,17 +184,17 @@ export default {
       @continue-dialog="deleteKey"
     >
       <template #title
-        ><span :lang="lang">{{
+        ><span :lang="locale">{{
           $t('trans.administerForm.confirmDeletion')
         }}</span></template
       >
       <template #text
-        ><span :lang="lang">{{
+        ><span :lang="locale">{{
           $t('trans.administerForm.confirmDeletionMsg')
         }}</span>
       </template>
       <template #button-text-continue
-        ><span :lang="lang">{{ $t('trans.administerForm.delete') }}</span>
+        ><span :lang="locale">{{ $t('trans.administerForm.delete') }}</span>
       </template>
     </BaseDialog>
   </v-skeleton-loader>
diff --git a/app/frontend/src/components/admin/AdministerUser.vue b/app/frontend/src/components/admin/AdministerUser.vue
index cd47ebf15..84797e988 100644
--- a/app/frontend/src/components/admin/AdministerUser.vue
+++ b/app/frontend/src/components/admin/AdministerUser.vue
@@ -1,9 +1,9 @@
 <script>
 import { mapActions, mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 import { useAppStore } from '~/store/app';
 import { useAdminStore } from '~/store/admin';
-import { useFormStore } from '~/store/form';
 
 export default {
   props: {
@@ -12,10 +12,14 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   computed: {
     ...mapState(useAppStore, ['config']),
     ...mapState(useAdminStore, ['user']),
-    ...mapState(useFormStore, ['lang']),
   },
   async mounted() {
     await this.readUser(this.userId);
@@ -29,7 +33,7 @@ export default {
 <template>
   <div>
     <h3>{{ user.fullName }}</h3>
-    <h4 :lang="lang">{{ $t('trans.administerUser.userDetails') }}</h4>
+    <h4 :lang="locale">{{ $t('trans.administerUser.userDetails') }}</h4>
     <pre>{{ user }}</pre>
   </div>
 </template>
diff --git a/app/frontend/src/components/admin/Developer.vue b/app/frontend/src/components/admin/Developer.vue
index 4431df42b..dca2dbf7f 100644
--- a/app/frontend/src/components/admin/Developer.vue
+++ b/app/frontend/src/components/admin/Developer.vue
@@ -1,12 +1,11 @@
 <script>
 import { mapActions, mapState } from 'pinia';
 import VueJsonPretty from 'vue-json-pretty';
+import { useI18n } from 'vue-i18n';
 
 import BaseCopyToClipboard from '~/components/base/BaseCopyToClipboard.vue';
-import { i18n } from '~/internationalization';
 import { rbacService } from '~/services';
 import { useAuthStore } from '~/store/auth';
-import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
 
 export default {
@@ -14,6 +13,11 @@ export default {
     BaseCopyToClipboard,
     VueJsonPretty,
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       apiRes: '',
@@ -21,7 +25,6 @@ export default {
   },
   computed: {
     ...mapState(useAuthStore, ['fullName', 'token', 'tokenParsed', 'userName']),
-    ...mapState(useFormStore, ['lang']),
   },
   created() {
     this.getUser();
@@ -34,9 +37,9 @@ export default {
         this.apiRes = user.data;
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.developer.notificationMsg'),
+          text: this.$t('trans.developer.notificationMsg'),
           consoleError:
-            i18n.t('trans.developer.notificationConsErr') +
+            this.$t('trans.developer.notificationConsErr') +
             `: ${error.message}`,
         });
       }
@@ -52,15 +55,15 @@ export default {
       <v-col cols="6">
         <h3>Keycloak</h3>
         <br />
-        <h4 :lang="lang">{{ $t('trans.developer.user') }}</h4>
-        <strong :lang="lang">{{ $t('trans.developer.name') }}:</strong>
+        <h4 :lang="locale">{{ $t('trans.developer.user') }}</h4>
+        <strong :lang="locale">{{ $t('trans.developer.name') }}:</strong>
         {{ fullName }}
         <br />
-        <strong :lang="lang">{{ $t('trans.developer.userName') }}:</strong>
+        <strong :lang="locale">{{ $t('trans.developer.userName') }}:</strong>
         {{ userName }}
         <br />
         <br />
-        <h4 :lang="lang">
+        <h4 :lang="locale">
           {{ $t('trans.developer.JWTContents') }}
           <BaseCopyToClipboard
             :text-to-copy="JSON.stringify(tokenParsed)"
@@ -69,26 +72,26 @@ export default {
           />
         </h4>
         <vue-json-pretty :data="tokenParsed" />
-        <h4 :lang="lang">
+        <h4 :lang="locale">
           {{ $t('trans.developer.JWTToken') }}
           <BaseCopyToClipboard
             :text-to-copy="token"
             :snack-bar-text="$t('trans.developer.JWTTokenSBTxt')"
             :tooltip-text="$t('trans.developer.JWTTokenTTTxt')"
-            :lang="lang"
+            :lang="locale"
           />
         </h4>
         <div style="word-break: break-all">{{ token }}</div>
       </v-col>
       <v-col cols="5" offset="1">
-        <h3 :lang="lang">{{ $t('trans.developer.chefsAPI') }}</h3>
+        <h3 :lang="locale">{{ $t('trans.developer.chefsAPI') }}</h3>
         <br />
         <h4>
           <BaseCopyToClipboard
             :text-to-copy="JSON.stringify(apiRes)"
             :snack-bar-text="$t('trans.developer.RBACSBTxt')"
             :tooltip-text="$t('trans.developer.RBACTTTxt')"
-            :lang="lang"
+            :lang="locale"
           />
         </h4>
         <vue-json-pretty :data="apiRes" />
diff --git a/app/frontend/src/components/base/BaseAuthButton.vue b/app/frontend/src/components/base/BaseAuthButton.vue
index 1d6df0630..d98ece682 100755
--- a/app/frontend/src/components/base/BaseAuthButton.vue
+++ b/app/frontend/src/components/base/BaseAuthButton.vue
@@ -2,13 +2,15 @@
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { useAuthStore } from '~/store/auth';
-import { useFormStore } from '~/store/form';
+
+const { locale } = useI18n({ useScope: 'global' });
 
 const authStore = useAuthStore();
 
 const { authenticated, ready } = storeToRefs(authStore);
-const { lang } = storeToRefs(useFormStore());
 
 const hasLogin = computed(() => useRoute()?.meta?.hasLogin);
 </script>
@@ -23,17 +25,24 @@ const hasLogin = computed(() => useRoute()?.meta?.hasLogin);
       :title="$t('trans.baseAuthButton.logout')"
       @click="authStore.logout"
     >
-      <span :lang="lang">{{ $t('trans.baseAuthButton.logout') }}</span>
+      <span :lang="locale">{{ $t('trans.baseAuthButton.logout') }}</span>
     </v-btn>
     <v-btn
       v-else-if="hasLogin"
       id="loginButton"
       color="white"
+      density="default"
       variant="outlined"
       :title="$t('trans.baseAuthButton.login')"
       @click="authStore.login"
     >
-      <span :lang="lang">{{ $t('trans.baseAuthButton.login') }}</span>
+      <span :lang="locale">{{ $t('trans.baseAuthButton.login') }}</span>
     </v-btn>
   </div>
 </template>
+
+<style scoped>
+.v-btn {
+  height: 40px;
+}
+</style>
diff --git a/app/frontend/src/components/base/BaseCopyToClipboard.vue b/app/frontend/src/components/base/BaseCopyToClipboard.vue
index 18da9e022..d47bf47e3 100644
--- a/app/frontend/src/components/base/BaseCopyToClipboard.vue
+++ b/app/frontend/src/components/base/BaseCopyToClipboard.vue
@@ -1,8 +1,11 @@
 <script setup>
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
+
 import { useNotificationStore } from '~/store/notification';
 import { NotificationTypes } from '~/utils/constants';
 
+const { t } = useI18n({ useScope: 'global' });
+
 const properties = defineProps({
   buttonText: {
     type: String,
@@ -18,21 +21,24 @@ const properties = defineProps({
   },
   snackBarText: {
     type: String,
-    default: i18n.t('trans.baseCopyToClipboard.linkToClipboard'),
+    default: undefined,
   },
   tooltipText: {
     type: String,
-    default: i18n.t('trans.baseCopyToClipboard.copyToClipboard'),
+    default: undefined,
   },
 });
 
 const emit = defineEmits(['copied']);
 
+const snackBarText =
+  properties.snackBarText || t('trans.baseCopyToClipboard.linkToClipboard');
+
 function onCopy() {
   emit('copied');
   const notificationStore = useNotificationStore();
   notificationStore.addNotification({
-    text: properties.snackBarText,
+    text: snackBarText,
     ...NotificationTypes.INFO,
   });
 }
@@ -40,7 +46,7 @@ function onCopy() {
 function onError(e) {
   const notificationStore = useNotificationStore();
   notificationStore.addNotification({
-    text: i18n.t('trans.baseCopyToClipboard.errCopyToClipboard'),
+    text: t('trans.baseCopyToClipboard.errCopyToClipboard'),
     consoleError: e,
   });
 }
@@ -65,7 +71,11 @@ function onError(e) {
           <span v-if="buttonText">{{ buttonText }}</span>
         </v-btn>
       </template>
-      <span>{{ tooltipText }}</span>
+      <span>{{
+        tooltipText
+          ? tooltipText
+          : t('trans.baseCopyToClipboard.copyToClipboard')
+      }}</span>
     </v-tooltip>
   </span>
 </template>
diff --git a/app/frontend/src/components/base/BaseDialog.vue b/app/frontend/src/components/base/BaseDialog.vue
index 4432c30ba..2e649ef58 100755
--- a/app/frontend/src/components/base/BaseDialog.vue
+++ b/app/frontend/src/components/base/BaseDialog.vue
@@ -1,8 +1,12 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { useFormStore } from '~/store/form';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 defineProps({
   modelValue: {
     default: false,
@@ -34,7 +38,7 @@ const emit = defineEmits([
   'custom-dialog',
 ]);
 
-const { isRTL, lang } = storeToRefs(useFormStore());
+const { isRTL } = storeToRefs(useFormStore());
 
 const RTL = computed(() => (isRTL.value ? 'ml-5' : 'mr-5'));
 
@@ -85,7 +89,7 @@ defineExpose({ RTL });
               <v-icon size="medium">default-icon</v-icon>
             </slot>
           </div>
-          <div class="dialog-text" :lang="lang">
+          <div class="dialog-text" :lang="locale">
             <slot name="text">{{ $t('trans.baseDialog.defaultText') }}</slot>
           </div>
         </v-card-text>
@@ -100,7 +104,7 @@ defineExpose({ RTL });
             @click="closeDialog"
           >
             <slot name="button-text">
-              <span :lang="lang">{{ $t('trans.baseDialog.ok') }}</span>
+              <span :lang="locale">{{ $t('trans.baseDialog.ok') }}</span>
             </slot>
           </v-btn>
         </div>
@@ -114,7 +118,7 @@ defineExpose({ RTL });
             @click="continueDialog"
           >
             <slot name="button-text-continue">
-              <span :lang="lang">{{ $t('trans.baseDialog.continue') }}</span>
+              <span :lang="locale">{{ $t('trans.baseDialog.continue') }}</span>
             </slot>
           </v-btn>
           <v-btn
@@ -126,7 +130,7 @@ defineExpose({ RTL });
             @click="closeDialog"
           >
             <slot name="button-text-cancel">
-              <span :lang="lang">{{ $t('trans.baseDialog.cancel') }}</span>
+              <span :lang="locale">{{ $t('trans.baseDialog.cancel') }}</span>
             </slot>
           </v-btn>
         </div>
@@ -140,7 +144,7 @@ defineExpose({ RTL });
             @click="continueDialog"
           >
             <slot name="button-text-continue">
-              <span :lang="lang">{{ $t('trans.baseDialog.continue') }}</span>
+              <span :lang="locale">{{ $t('trans.baseDialog.continue') }}</span>
             </slot>
           </v-btn>
           <v-btn
@@ -151,7 +155,7 @@ defineExpose({ RTL });
             @click="deleteDialog"
           >
             <slot name="button-text-delete">
-              <span :lang="lang">{{ $t('trans.baseDialog.cancel') }}</span>
+              <span :lang="locale">{{ $t('trans.baseDialog.cancel') }}</span>
             </slot>
           </v-btn>
         </div>
@@ -164,7 +168,7 @@ defineExpose({ RTL });
             @click="continueDialog"
           >
             <slot name="button-text-continue">
-              <span :lang="lang">{{ $t('trans.baseDialog.continue') }}</span>
+              <span :lang="locale">{{ $t('trans.baseDialog.continue') }}</span>
             </slot>
           </v-btn>
           <v-btn
@@ -177,7 +181,7 @@ defineExpose({ RTL });
             @click="customDialog"
           >
             <slot name="button-text-custom">
-              <span :lang="lang">{{ $t('trans.baseDialog.custom') }}</span>
+              <span :lang="locale">{{ $t('trans.baseDialog.custom') }}</span>
             </slot>
           </v-btn>
           <v-btn
@@ -187,7 +191,7 @@ defineExpose({ RTL });
             @click="closeDialog"
           >
             <slot name="button-text-cancel">
-              <span :lang="lang">{{ $t('trans.baseDialog.cancel') }}</span>
+              <span :lang="locale">{{ $t('trans.baseDialog.cancel') }}</span>
             </slot>
           </v-btn>
         </div>
diff --git a/app/frontend/src/components/base/BaseFilter.vue b/app/frontend/src/components/base/BaseFilter.vue
index a689d1dbb..ed6519895 100644
--- a/app/frontend/src/components/base/BaseFilter.vue
+++ b/app/frontend/src/components/base/BaseFilter.vue
@@ -1,30 +1,21 @@
 <script setup>
-import { i18n } from '~/internationalization';
 import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { useFormStore } from '~/store/form';
-import { ref } from 'vue';
-import { computed, onMounted } from 'vue';
+
+const { t, locale } = useI18n({ useScope: 'global' });
 
 const properties = defineProps({
   inputHeaders: {
     type: Array,
-    default: () => [
-      {
-        title: i18n.t('trans.baseFilter.columnName'),
-        align: 'start',
-        sortable: true,
-        key: 'title',
-      },
-    ],
+    default: undefined,
   },
   // The data you will be filtering with
   inputData: {
     type: Array,
-    default: () => [
-      { title: i18n.t('trans.baseFilter.exampleText'), key: 'exampleText1' },
-      { title: i18n.t('trans.baseFilter.exampleText2'), key: 'exampleText2' },
-    ],
+    default: undefined,
   },
   resetData: {
     type: Array,
@@ -45,20 +36,36 @@ const properties = defineProps({
   },
   inputFilterPlaceholder: {
     type: String,
-    default: i18n.t('trans.baseFilter.exampleText2'),
+    default: undefined,
   },
   inputSaveButtonText: {
     type: String,
-    default: i18n.t('trans.baseFilter.filter'),
+    default: undefined,
   },
 });
 
 const emit = defineEmits(['saving-filter-data', 'cancel-filter-data']);
 
-const selectedData = ref([]);
+const headers = properties.inputHeaders || [
+  {
+    title: t('trans.baseFilter.columnName'),
+    align: 'start',
+    sortable: true,
+    key: 'title',
+  },
+];
+const inputData = properties.inputData || [
+  { title: t('trans.baseFilter.exampleText'), key: 'exampleText1' },
+  { title: t('trans.baseFilter.exampleText2'), key: 'exampleText2' },
+];
 const inputFilter = ref('');
+const inputFilterPlaceholder =
+  properties.inputFilterPlaceholder || t('trans.baseFilter.exampleText2');
+const inputSaveButtonText =
+  properties.inputFilterPlaceholder || t('trans.baseFilter.filter');
+const selectedData = ref([]);
 
-const { isRTL, lang } = storeToRefs(useFormStore());
+const { isRTL } = storeToRefs(useFormStore());
 
 const RTL = computed(() => (isRTL.value ? 'ml-3' : 'mr-3'));
 
@@ -107,7 +114,7 @@ defineExpose({ selectedData, inputFilter });
           density="compact"
           class="mt-3"
           :class="{ label: isRTL }"
-          :lang="lang"
+          :lang="locale"
         >
         </v-text-field>
         <v-tooltip location="bottom">
@@ -128,7 +135,7 @@ defineExpose({ selectedData, inputFilter });
               />
             </v-btn>
           </template>
-          <span :lang="lang">{{ $t('trans.baseFilter.resetColumns') }}</span>
+          <span :lang="locale">{{ $t('trans.baseFilter.resetColumns') }}</span>
         </v-tooltip>
       </div>
       <v-data-table
@@ -138,20 +145,20 @@ defineExpose({ selectedData, inputFilter });
         show-select
         hide-default-footer
         height="300px"
-        :headers="inputHeaders"
+        :headers="headers"
         :items="inputData"
         items-per-page="-1"
         :item-value="inputItemKey"
         :search="inputFilter"
         class="bg-grey-lighten-5 mb-3"
         disable-pagination
-        :lang="lang"
+        :lang="locale"
       >
       </v-data-table>
       <v-btn
         data-test="save-btn"
         class="bg-primary mt-3"
-        :lang="lang"
+        :lang="locale"
         :title="inputSaveButtonText"
         @click="savingFilterData"
       >
@@ -162,7 +169,7 @@ defineExpose({ selectedData, inputFilter });
         class="mt-3 text-primary"
         :class="RTL"
         variant="outlined"
-        :lang="lang"
+        :lang="locale"
         :title="$t('trans.baseFilter.cancel')"
         @click="cancelFilterData"
         >{{ $t('trans.baseFilter.cancel') }}</v-btn
diff --git a/app/frontend/src/components/base/BaseInternationalization.vue b/app/frontend/src/components/base/BaseInternationalization.vue
index cc955ecea..266f6494c 100644
--- a/app/frontend/src/components/base/BaseInternationalization.vue
+++ b/app/frontend/src/components/base/BaseInternationalization.vue
@@ -1,10 +1,13 @@
 <script setup>
+import { computed } from 'vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useFormStore } from '~/store/form';
 import { useLocale } from 'vuetify';
 
-const language = ref('English');
+import { useFormStore } from '~/store/form';
+
+const { locale } = useI18n({ useScope: 'global' });
+
 const items = ref([
   { title: 'English', keyword: 'en' },
   { title: 'عربى (Arabic)', keyword: 'ar' },
@@ -26,61 +29,45 @@ const items = ref([
   { title: '繁體中文 (Traditional Chinese)', keyword: 'zhTW' },
 ]);
 
-const { locale } = useI18n({ useScope: 'global' });
 const { current } = useLocale();
 
 function languageSelected(lang) {
-  language.value = lang.title;
-  locale.value = lang.keyword;
-  current.value =
-    lang.keyword == 'zh'
-      ? 'zhHans'
-      : lang.keyword == 'zhTW'
-      ? 'zhHant'
-      : lang.keyword;
+  current.value = lang == 'zh' ? 'zhHans' : lang == 'zhTW' ? 'zhHant' : lang;
   useFormStore().$patch({
-    lang: lang.keyword,
-    isRTL: lang.keyword === 'ar' || lang.keyword === 'fa' ? true : false,
+    isRTL: lang === 'ar' || lang === 'fa' ? true : false,
   });
 }
+
+const SELECTED_LANGUAGE_TITLE = computed(
+  () => items.value.find((language) => language.keyword === locale.value).title
+);
 </script>
 
 <template>
   <div class="text-center">
-    <v-menu>
-      <template #activator="{ props }">
-        <v-btn
-          variant="outlined"
-          color="white"
+    <v-select
+      v-model="$i18n.locale"
+      class="ml-3"
+      :items="$i18n.availableLocales"
+      prepend-inner-icon="mdi:mdi-web"
+      variant="outlined"
+      density="compact"
+      hide-details
+      :title="SELECTED_LANGUAGE_TITLE"
+      @update:model-value="languageSelected"
+    >
+      <template #selection="{ props, item }">
+        <v-list-item
           v-bind="props"
-          class="ml-3"
-          :title="language"
-        >
-          <v-icon class="mr-1" icon="mdi:mdi-web" />
-          {{ language }}
-          <v-icon class="ml-3" icon="mdi:mdi-menu-down" />
-        </v-btn>
+          :title="items.find((language) => language.keyword === item.raw).title"
+        ></v-list-item>
       </template>
-      <v-list data-test="loc-list">
+      <template #item="{ props, item }">
         <v-list-item
-          v-for="loc in items"
-          :key="loc.keyword"
-          @click="languageSelected(loc)"
-        >
-          <v-list-item-title>{{ loc.title }}</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-menu>
+          v-bind="props"
+          :title="items.find((language) => language.keyword === item.raw).title"
+        ></v-list-item>
+      </template>
+    </v-select>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.select {
-  margin: 0px !important;
-  margin-left: 8px !important;
-  padding: 0px !important;
-  height: 30px !important;
-
-  float: right !important;
-}
-</style>
diff --git a/app/frontend/src/components/base/BaseNotificationBar.vue b/app/frontend/src/components/base/BaseNotificationBar.vue
index b480de8c3..f99128713 100644
--- a/app/frontend/src/components/base/BaseNotificationBar.vue
+++ b/app/frontend/src/components/base/BaseNotificationBar.vue
@@ -1,12 +1,13 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { onBeforeUnmount } from 'vue';
-import { onBeforeMount } from 'vue';
+import { onBeforeMount, onBeforeUnmount } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import { i18n } from '~/internationalization';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
 
+const { t } = useI18n({ useScope: 'global' });
+
 const properties = defineProps({
   notification: {
     type: Object,
@@ -31,14 +32,14 @@ if (properties.notification.consoleError) {
     if (properties.notification.consoleError.options) {
       // eslint-disable-next-line no-console
       console.error(
-        i18n.t(
+        t(
           properties.notification.consoleError.text,
           properties.notification.consoleError.options
         )
       );
     } else {
       // eslint-disable-next-line no-console
-      console.error(i18n.t(properties.notification.consoleError.text));
+      console.error(t(properties.notification.consoleError.text));
     }
   }
 }
@@ -50,7 +51,7 @@ onBeforeMount(() => {
       typeof properties.notification.consoleError === 'string' ||
         properties.notification.consoleError instanceof String
         ? properties.notification.consoleError
-        : i18n.t(
+        : t(
             properties.notification.consoleError.text,
             properties.notification.consoleError.options
           )
diff --git a/app/frontend/src/components/base/BaseSecure.vue b/app/frontend/src/components/base/BaseSecure.vue
index 46b8d40d6..0caaa2f74 100755
--- a/app/frontend/src/components/base/BaseSecure.vue
+++ b/app/frontend/src/components/base/BaseSecure.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import { useAuthStore } from '~/store/auth';
-import { useFormStore } from '~/store/form';
 import { useIdpStore } from '~/store/identityProviders';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 defineProps({
   admin: {
     type: Boolean,
@@ -20,17 +23,15 @@ const idpStore = useIdpStore();
 
 const { authenticated, identityProvider, isAdmin, ready } =
   storeToRefs(authStore);
-
-const { lang } = storeToRefs(useFormStore());
 </script>
 
 <template>
   <div v-if="authenticated">
     <div v-if="admin && !isAdmin" class="text-center">
-      <h1 class="my-8" :lang="lang">
+      <h1 class="my-8" :lang="locale">
         {{ $t('trans.baseSecure.401UnAuthorized') }}
       </h1>
-      <p :lang="lang">
+      <p :lang="locale">
         {{ $t('trans.baseSecure.401UnAuthorizedErrMsg') }}
       </p>
     </div>
@@ -41,10 +42,10 @@ const { lang } = storeToRefs(useFormStore());
       "
       class="text-center"
     >
-      <h1 class="my-8" :lang="lang">
+      <h1 class="my-8" :lang="locale">
         {{ $t('trans.baseSecure.403Forbidden') }}
       </h1>
-      <p :lang="lang">
+      <p :lang="locale">
         {{
           $t('trans.baseSecure.403ErrorMsg', {
             idp: permission,
@@ -55,7 +56,7 @@ const { lang } = storeToRefs(useFormStore());
     <slot v-else />
   </div>
   <div v-else class="text-center">
-    <h1 class="my-8" :lang="lang">
+    <h1 class="my-8" :lang="locale">
       {{ $t('trans.baseSecure.loginInfo') }}
     </h1>
     <v-btn
@@ -67,7 +68,7 @@ const { lang } = storeToRefs(useFormStore());
       :title="$t('trans.baseSecure.login')"
       @click="authStore.login"
     >
-      <span :lang="lang">{{ $t('trans.baseSecure.login') }}</span>
+      <span :lang="locale">{{ $t('trans.baseSecure.login') }}</span>
     </v-btn>
   </div>
 </template>
diff --git a/app/frontend/src/components/bcgov/BCGovAlertBanner.vue b/app/frontend/src/components/bcgov/BCGovAlertBanner.vue
index 915db412f..469e7b4ff 100644
--- a/app/frontend/src/components/bcgov/BCGovAlertBanner.vue
+++ b/app/frontend/src/components/bcgov/BCGovAlertBanner.vue
@@ -1,10 +1,12 @@
 <script setup>
 import { computed } from 'vue';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
 
 import { useNotificationStore } from '~/store/notification';
 import { NotificationTypes } from '~/utils/constants';
 
+const { t } = useI18n({ useScope: 'global' });
+
 const properties = defineProps({
   id: {
     type: Number,
@@ -44,7 +46,7 @@ const notificationType = computed(() => {
 });
 
 const TEXT = computed(() => {
-  const msg = properties.translate ? i18n.t(properties.text) : properties.text;
+  const msg = properties.translate ? t(properties.text) : properties.text;
   return msg.replace(/(<([^>]+)>)/gi, '');
 });
 
diff --git a/app/frontend/src/components/bcgov/BCGovFooter.vue b/app/frontend/src/components/bcgov/BCGovFooter.vue
old mode 100755
new mode 100644
index 1d2b72a17..a4f4e29b2
--- a/app/frontend/src/components/bcgov/BCGovFooter.vue
+++ b/app/frontend/src/components/bcgov/BCGovFooter.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
-import { useFormStore } from '~/store/form';
+const { locale } = useI18n({ useScope: 'global' });
 
 defineProps({
   formSubmitMode: {
@@ -9,8 +9,6 @@ defineProps({
     default: false,
   },
 });
-
-const { lang } = storeToRefs(useFormStore());
 </script>
 
 <template>
@@ -29,7 +27,7 @@ const { lang } = storeToRefs(useFormStore());
         href="https://www.gov.bc.ca/"
         :title="$t('trans.bCGovFooter.home')"
       >
-        <span :lang="lang">{{ $t('trans.bCGovFooter.home') }}</span>
+        <span :lang="locale">{{ $t('trans.bCGovFooter.home') }}</span>
       </v-btn>
       <v-btn
         id="footer-about"
@@ -37,7 +35,7 @@ const { lang } = storeToRefs(useFormStore());
         href="https://www2.gov.bc.ca/gov/content/about-gov-bc-ca"
         :title="$t('trans.bCGovFooter.about')"
       >
-        <span :lang="lang">{{ $t('trans.bCGovFooter.about') }}</span>
+        <span :lang="locale">{{ $t('trans.bCGovFooter.about') }}</span>
       </v-btn>
       <v-btn
         id="footer-disclaimer"
@@ -45,7 +43,7 @@ const { lang } = storeToRefs(useFormStore());
         href="http://gov.bc.ca/disclaimer"
         :title="$t('trans.bCGovFooter.disclaimer')"
       >
-        <span :lang="lang">{{ $t('trans.bCGovFooter.disclaimer') }}</span>
+        <span :lang="locale">{{ $t('trans.bCGovFooter.disclaimer') }}</span>
       </v-btn>
       <v-btn
         id="footer-privacy"
@@ -61,7 +59,7 @@ const { lang } = storeToRefs(useFormStore());
         href="http://gov.bc.ca/webaccessibility"
         :title="$t('trans.bCGovFooter.accessibility')"
       >
-        <span :lang="lang">{{ $t('trans.bCGovFooter.accessibility') }}</span>
+        <span :lang="locale">{{ $t('trans.bCGovFooter.accessibility') }}</span>
       </v-btn>
       <v-btn
         id="footer-copyright"
@@ -69,7 +67,7 @@ const { lang } = storeToRefs(useFormStore());
         href="http://gov.bc.ca/copyright"
         :title="$t('trans.bCGovFooter.copyRight')"
       >
-        <span :lang="lang">{{ $t('trans.bCGovFooter.copyRight') }}</span>
+        <span :lang="locale">{{ $t('trans.bCGovFooter.copyRight') }}</span>
       </v-btn>
       <v-btn
         id="footer-contact"
@@ -77,7 +75,7 @@ const { lang } = storeToRefs(useFormStore());
         href="https://www2.gov.bc.ca/gov/content/home/contact-us"
         :title="$t('trans.bCGovFooter.contactUs')"
       >
-        <span :lang="lang">{{ $t('trans.bCGovFooter.contactUs') }}</span>
+        <span :lang="locale">{{ $t('trans.bCGovFooter.contactUs') }}</span>
       </v-btn>
     </v-row>
   </v-footer>
diff --git a/app/frontend/src/components/bcgov/BCGovNavBar.vue b/app/frontend/src/components/bcgov/BCGovNavBar.vue
index b07a1de7a..e9e1d7e89 100755
--- a/app/frontend/src/components/bcgov/BCGovNavBar.vue
+++ b/app/frontend/src/components/bcgov/BCGovNavBar.vue
@@ -1,10 +1,13 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { useAuthStore } from '~/store/auth';
-import { useFormStore } from '~/store/form';
 import { useIdpStore } from '~/store/identityProviders';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 defineProps({
   formSubmitMode: {
     type: Boolean,
@@ -17,7 +20,6 @@ const idpStore = useIdpStore();
 const { authenticated, isAdmin, identityProvider } = storeToRefs(
   useAuthStore()
 );
-const { lang } = storeToRefs(useFormStore());
 
 const hasPrivileges = computed(() => {
   return idpStore.isPrimary(identityProvider?.value?.code);
@@ -35,7 +37,7 @@ const hasPrivileges = computed(() => {
           <router-link
             data-cy="aboutLinks"
             :to="{ name: 'About' }"
-            :lang="lang"
+            :lang="locale"
             >{{ $t('trans.bCGovNavBar.about') }}</router-link
           >
         </li>
@@ -43,7 +45,7 @@ const hasPrivileges = computed(() => {
           <router-link
             data-cy="userFormsLinks"
             :to="{ name: 'UserForms' }"
-            :lang="lang"
+            :lang="locale"
             >{{ $t('trans.bCGovNavBar.myForms') }}</router-link
           >
         </li>
@@ -51,7 +53,7 @@ const hasPrivileges = computed(() => {
           <router-link
             data-cy="createNewForm"
             :to="{ name: 'FormCreate' }"
-            :lang="lang"
+            :lang="locale"
             >{{ $t('trans.bCGovNavBar.createNewForm') }}</router-link
           >
         </li>
@@ -60,7 +62,7 @@ const hasPrivileges = computed(() => {
             data-cy="help"
             href="https://github.com/bcgov/common-hosted-form-service/wiki"
             target="_blank"
-            :hreflang="lang"
+            :lang="locale"
             >{{ $t('trans.bCGovNavBar.help') }}</a
           >
         </li>
@@ -69,7 +71,7 @@ const hasPrivileges = computed(() => {
             data-cy="feedback"
             href="https://chefs-fider.apps.silver.devops.gov.bc.ca/"
             target="_blank"
-            :hreflang="lang"
+            :lang="locale"
             >{{ $t('trans.bCGovNavBar.feedback') }}</a
           >
         </li>
@@ -77,7 +79,7 @@ const hasPrivileges = computed(() => {
           <router-link :to="{ name: 'User' }">User (TBD)</router-link>
         </li> -->
         <li v-if="isAdmin">
-          <router-link data-cy="admin" :to="{ name: 'Admin' }" :lang="lang">{{
+          <router-link data-cy="admin" :to="{ name: 'Admin' }" :lang="locale">{{
             $t('trans.bCGovNavBar.admin')
           }}</router-link>
         </li>
diff --git a/app/frontend/src/components/designer/FloatButton.vue b/app/frontend/src/components/designer/FloatButton.vue
index 58ef2ac5d..e59d81cd5 100644
--- a/app/frontend/src/components/designer/FloatButton.vue
+++ b/app/frontend/src/components/designer/FloatButton.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapState } from 'pinia';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
 
 import { useFormStore } from '~/store/form';
 
@@ -70,6 +70,11 @@ export default {
     },
   },
   emits: ['undo', 'redo', 'save'],
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       fabItemsDirection: 'column-reverse',
@@ -79,7 +84,7 @@ export default {
       fabItemsIconsSize: 31,
 
       //base fab item variable start
-      baseFABItemName: i18n.t('trans.floatButton.collapse'),
+      baseFABItemName: this.$t('trans.floatButton.collapse'),
       baseIconName: 'mdi:mdi-close',
       baseIconColor: '#ffffff', //end
 
@@ -89,13 +94,13 @@ export default {
       disabledInvertedFabItemsColor: '#707070C1',
       disabledFabItemsColor: '#707070C1', // end
 
-      savedMsg: i18n.t('trans.floatButton.save'),
+      savedMsg: this.$t('trans.floatButton.save'),
       scrollIconName: 'mdi:mdi-arrow-down',
-      scrollName: i18n.t('trans.floatButton.bottom'),
+      scrollName: this.$t('trans.floatButton.bottom'),
     };
   },
   computed: {
-    ...mapState(useFormStore, ['lang', 'isRTL']),
+    ...mapState(useFormStore, ['isRTL']),
     computedStyles() {
       let baseStyles = {
         display: 'flex',
@@ -134,38 +139,19 @@ export default {
     savedStatus(value) {
       switch (value) {
         case 'Saved':
-          this.savedMsg = i18n.t('trans.floatButton.saved');
+          this.savedMsg = this.$t('trans.floatButton.saved');
           break;
         case 'Save':
-          this.savedMsg = i18n.t('trans.floatButton.save');
+          this.savedMsg = this.$t('trans.floatButton.save');
           break;
         case 'Saving':
-          this.savedMsg = i18n.t('trans.floatButton.saving');
+          this.savedMsg = this.$t('trans.floatButton.saving');
           break;
         case 'Not Saved':
-          this.savedMsg = i18n.t('trans.floatButton.notSaved');
+          this.savedMsg = this.$t('trans.floatButton.notSaved');
           break;
       }
     },
-    lang() {
-      this.scrollName = i18n.t('trans.floatButton.bottom');
-
-      if (this.isFABActionsOpen) {
-        this.baseFABItemName = i18n.t('trans.floatButton.actions');
-      } else {
-        this.baseFABItemName = i18n.t('trans.floatButton.collapse');
-      }
-
-      if (this.savedStatus === 'Saved') {
-        this.savedMsg = i18n.t('trans.floatButton.saved');
-      } else if (this.savedStatus === 'Save') {
-        this.savedMsg = i18n.t('trans.floatButton.save');
-      } else if (this.savedStatus === 'Saving') {
-        this.savedMsg = i18n.t('trans.floatButton.saving');
-      } else if (this.savedStatus === 'Not Saved') {
-        this.savedMsg = i18n.t('trans.floatButton.notSaved');
-      }
-    },
   },
   created() {
     window.addEventListener('scroll', this.handleScroll);
@@ -186,11 +172,11 @@ export default {
       if (this.isFABActionsOpen) {
         this.baseIconName = 'mdi:mdi-menu';
         this.isFABActionsOpen = false;
-        this.baseFABItemName = i18n.t('trans.floatButton.actions');
+        this.baseFABItemName = this.$t('trans.floatButton.actions');
       } else {
         this.baseIconName = 'mdi:mdi-close';
         this.isFABActionsOpen = true;
-        this.baseFABItemName = i18n.t('trans.floatButton.collapse');
+        this.baseFABItemName = this.$t('trans.floatButton.collapse');
       }
     },
 
@@ -280,13 +266,13 @@ export default {
     handleScroll() {
       if (window.scrollY === 0) {
         this.scrollIconName = 'mdi:mdi-arrow-down';
-        this.scrollName = i18n.t('trans.floatButton.bottom');
+        this.scrollName = this.$t('trans.floatButton.bottom');
       } else if (
         window.pageYOffset + window.innerHeight >=
         document.documentElement.scrollHeight - 50
       ) {
         this.scrollIconName = 'mdi:mdi-arrow-up';
-        this.scrollName = i18n.t('trans.floatButton.top');
+        this.scrollName = this.$t('trans.floatButton.top');
       }
     },
 
@@ -295,12 +281,12 @@ export default {
       if (window.scrollY === 0) {
         this.bottomScroll();
       } else if (
-        this.scrollName === i18n.t('trans.floatButton.bottom') &&
+        this.scrollName === this.$t('trans.floatButton.bottom') &&
         window.scrollY > 0
       ) {
         this.bottomScroll();
       } else if (
-        this.scrollName === i18n.t('trans.floatButton.top') &&
+        this.scrollName === this.$t('trans.floatButton.top') &&
         window.scrollY > 0
       ) {
         this.topScroll();
@@ -311,7 +297,7 @@ export default {
     topScroll() {
       window.scrollTo(0, 0);
       this.scrollIconName = 'mdi:mdi-arrow-down';
-      this.scrollName = i18n.t('trans.floatButton.bottom');
+      this.scrollName = this.$t('trans.floatButton.bottom');
     },
     bottomScroll() {
       window.scrollTo({
@@ -320,7 +306,7 @@ export default {
         behavior: 'smooth',
       });
       this.scrollIconName = 'mdi:mdi-arrow-up';
-      this.scrollName = i18n.t('trans.floatButton.top');
+      this.scrollName = this.$t('trans.floatButton.top');
     },
   },
 };
@@ -328,8 +314,8 @@ export default {
 
 <template>
   <div :class="{ 'dir-rtl': isRTL }" :style="computedStyles">
-    <div class="fabAction" :lang="lang" @click="onOpenFABActionItems">
-      <div class="text" :lang="lang" v-text="baseFABItemName" />
+    <div class="fabAction" :lang="locale" @click="onOpenFABActionItems">
+      <div class="text" :lang="locale" v-text="baseFABItemName" />
       <v-btn
         class="fabItemsInverColor"
         :size="fabItemsSize"
@@ -365,7 +351,7 @@ export default {
         >
           <div
             class="text"
-            :lang="lang"
+            :lang="locale"
             v-text="$t('trans.floatButton.publish')"
           />
           <v-btn
@@ -406,7 +392,7 @@ export default {
         >
           <div
             class="text"
-            :lang="lang"
+            :lang="locale"
             v-text="$t('trans.floatButton.manage')"
           />
           <v-btn
@@ -438,7 +424,11 @@ export default {
         data-cy="redoButton"
         :class="{ 'disabled-router': !redoEnabled }"
       >
-        <div class="text" :lang="lang" v-text="$t('trans.floatButton.redo')" />
+        <div
+          class="text"
+          :lang="locale"
+          v-text="$t('trans.floatButton.redo')"
+        />
         <v-btn
           class="fabItems"
           :size="fabItemsSize"
@@ -459,7 +449,11 @@ export default {
         data-cy="undoButton"
         :class="{ 'disabled-router': !undoEnabled }"
       >
-        <div class="text" :lang="lang" v-text="$t('trans.floatButton.undo')" />
+        <div
+          class="text"
+          :lang="locale"
+          v-text="$t('trans.floatButton.undo')"
+        />
         <v-btn
           class="fabItems"
           :size="fabItemsSize"
@@ -482,7 +476,7 @@ export default {
       >
         <div
           class="text"
-          :lang="lang"
+          :lang="locale"
           v-text="$t('trans.floatButton.preview')"
         />
         <v-btn
@@ -504,7 +498,7 @@ export default {
         data-cy="saveButton"
         :class="{ 'disabled-router': isFormSaved && !canSave }"
       >
-        <div class="text" :lang="lang">{{ savedMsg }}</div>
+        <div class="text" :lang="locale">{{ savedMsg }}</div>
         <v-btn
           class="fabItems"
           :size="fabItemsSize"
@@ -531,7 +525,7 @@ export default {
         </v-btn>
       </div>
       <div class="fabAction">
-        <div :lang="lang">{{ scrollName }}</div>
+        <div :lang="locale">{{ scrollName }}</div>
 
         <v-btn
           class="fabItems"
@@ -549,7 +543,7 @@ export default {
       </div>
     </div>
     <div v-if="!isFABActionsOpen" class="fabAction">
-      <div :lang="lang">{{ scrollName }}</div>
+      <div :lang="locale">{{ scrollName }}</div>
       <v-btn
         class="fabItems"
         :size="fabItemsSize"
diff --git a/app/frontend/src/components/designer/FormDesigner.vue b/app/frontend/src/components/designer/FormDesigner.vue
index 1ca6747a5..7abbab56c 100644
--- a/app/frontend/src/components/designer/FormDesigner.vue
+++ b/app/frontend/src/components/designer/FormDesigner.vue
@@ -2,11 +2,11 @@
 import { FormBuilder } from '@formio/vue';
 import { compare, applyPatch, deepClone } from 'fast-json-patch';
 import { mapActions, mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 import BaseInfoCard from '~/components/base/BaseInfoCard.vue';
 import FloatButton from '~/components/designer/FloatButton.vue';
 import ProactiveHelpPreviewDialog from '~/components/infolinks/ProactiveHelpPreviewDialog.vue';
-import { i18n } from '~/internationalization';
 import formioIl8next from '~/internationalization/trans/formio/formio.json';
 import templateExtensions from '~/plugins/templateExtensions';
 import { formService } from '~/services';
@@ -50,6 +50,11 @@ export default {
       default: null,
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       canSave: false,
@@ -85,7 +90,6 @@ export default {
       'builder',
       'form',
       'isRTL',
-      'lang',
       'userLabels',
     ]),
     ...mapState(useAuthStore, ['tokenParsed', 'user']),
@@ -268,8 +272,8 @@ export default {
       } catch (error) {
         const notificationStore = useNotificationStore();
         notificationStore.addNotification({
-          text: i18n.t('trans.formDesigner.formLoadErrMsg'),
-          consoleError: i18n.t('trans.formDesigner.formLoadConsoleErrMsg', {
+          text: this.$t('trans.formDesigner.formLoadErrMsg'),
+          consoleError: this.$t('trans.formDesigner.formLoadConsoleErrMsg', {
             formId: this.formId,
             versionId: this.versionId,
             draftId: this.draftId,
@@ -298,8 +302,8 @@ export default {
       } catch (error) {
         const notificationStore = useNotificationStore();
         notificationStore.addNotification({
-          text: i18n.t('trans.formDesigner.formSchemaImportErrMsg'),
-          consoleError: i18n.t(
+          text: this.$t('trans.formDesigner.formSchemaImportErrMsg'),
+          consoleError: this.$t(
             'trans.formDesigner.formSchemaImportConsoleErrMsg',
             {
               error: error,
@@ -448,7 +452,7 @@ export default {
           modified?.components?.map((comp) => {
             if (comp.key === 'form') {
               const notificationStore = useNotificationStore();
-              const msg = i18n.t('trans.formDesigner.fieldnameError', {
+              const msg = this.$t('trans.formDesigner.fieldnameError', {
                 label: comp.label,
               });
               notificationStore.addNotification({
@@ -604,8 +608,8 @@ export default {
         this.savedStatus = 'Not Saved';
         this.isFormSaved = false;
         notificationStore.addNotification({
-          text: i18n.t('trans.formDesigner.formDesignSaveErrMsg'),
-          consoleError: i18n.t(
+          text: this.$t('trans.formDesigner.formDesignSaveErrMsg'),
+          consoleError: this.$t(
             'trans.formDesigner.formSchemaImportConsoleErrMsg',
             {
               formId: this.formId,
@@ -710,10 +714,10 @@ export default {
       class="mt-6 d-flex flex-md-row justify-space-between flex-sm-column-reverse flex-xs-column-reverse gapRow"
     >
       <!-- page title -->
-      <div :lang="lang">
+      <div :lang="locale">
         <h1>{{ $t('trans.formDesigner.formDesign') }}</h1>
         <h3 v-if="form.name">{{ form.name }}</h3>
-        <em :lang="lang"
+        <em :lang="locale"
           >{{ $t('trans.formDesigner.version') }} : {{ displayVersion }}</em
         >
       </div>
@@ -733,7 +737,9 @@ export default {
               <v-icon icon="mdi:mdi-download"></v-icon>
             </v-btn>
           </template>
-          <span :lang="lang">{{ $t('trans.formDesigner.exportDesign') }}</span>
+          <span :lang="locale">{{
+            $t('trans.formDesigner.exportDesign')
+          }}</span>
         </v-tooltip>
         <v-tooltip location="bottom">
           <template #activator="{ props }">
@@ -756,12 +762,14 @@ export default {
               />
             </v-btn>
           </template>
-          <span :lang="lang">{{ $t('trans.formDesigner.importDesign') }}</span>
+          <span :lang="locale">{{
+            $t('trans.formDesigner.importDesign')
+          }}</span>
         </v-tooltip>
       </div>
     </div>
     <BaseInfoCard class="my-6" :class="{ 'dir-rtl': isRTL }">
-      <h4 class="text-primary" :lang="lang">
+      <h4 class="text-primary" :lang="locale">
         <v-icon
           :class="isRTL ? 'ml-1' : 'mr-1'"
           color="primary"
@@ -771,12 +779,12 @@ export default {
       </h4>
       <p
         class="my-0"
-        :lang="lang"
+        :lang="locale"
         v-html="$t('trans.formDesigner.formDesignInfoA')"
       ></p>
       <p
         class="my-0"
-        :lang="lang"
+        :lang="locale"
         v-html="$t('trans.formDesigner.formDesignInfoB')"
       ></p>
     </BaseInfoCard>
diff --git a/app/frontend/src/components/designer/FormDisclaimer.vue b/app/frontend/src/components/designer/FormDisclaimer.vue
index 5d2430319..7863a8c3f 100644
--- a/app/frontend/src/components/designer/FormDisclaimer.vue
+++ b/app/frontend/src/components/designer/FormDisclaimer.vue
@@ -1,35 +1,42 @@
 <script>
 import { mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import { useFormStore } from '~/store/form';
 
 export default {
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
   },
 };
 </script>
 
 <template>
   <div>
-    <h3 class="mb-5" :lang="lang">
+    <h3 class="mb-5" :lang="locale">
       {{ $t('trans.formDisclaimer.disclaimerAndStatement') }}
     </h3>
     <ul :class="isRTL ? 'mr-6' : null">
-      <li :lang="lang">
+      <li :lang="locale">
         {{ $t('trans.formDisclaimer.privacyLaw') }}
       </li>
-      <li :lang="lang">
+      <li :lang="locale">
         {{ $t('trans.formDisclaimer.disclosure') }}
       </li>
-      <li :lang="lang">
+      <li :lang="locale">
         {{ $t('trans.formDisclaimer.consent') }}
       </li>
-      <li :lang="lang">
+      <li :lang="locale">
         {{ $t('trans.formDisclaimer.formIntention') }}
         <a
           href="https://www2.gov.bc.ca/gov/content/governments/services-for-government/information-management-technology/privacy/resources/privacy-officers"
           target="_blank"
-          :hreflang="lang"
+          :lang="locale"
         >
           {{ $t('trans.formDisclaimer.privacyOfficer') }}
           <v-icon
diff --git a/app/frontend/src/components/designer/FormProfile.vue b/app/frontend/src/components/designer/FormProfile.vue
index dd527af3d..7b6267dff 100644
--- a/app/frontend/src/components/designer/FormProfile.vue
+++ b/app/frontend/src/components/designer/FormProfile.vue
@@ -1,4 +1,7 @@
 <script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import FormDeploymentProfile from '~/components/designer/profile/FormDeploymentProfile.vue';
 import FormMinistryProfile from '~/components/designer/profile/FormMinistryProfile.vue';
 import FormLabelProfile from '~/components/designer/profile/FormLabelProfile.vue';
@@ -6,20 +9,20 @@ import FormAPIProfile from '~/components/designer/profile/FormAPIProfile.vue';
 import FormUseCaseProfile from '~/components/designer/profile/FormUseCaseProfile.vue';
 import { useFormStore } from '~/store/form';
 import BasePanel from '~/components/base/BasePanel.vue';
-import { computed } from 'vue';
+
+const { locale } = useI18n({ useScope: 'global' });
 
 const formStore = useFormStore();
 const isRTL = computed(() => formStore.isRTL);
-const lang = computed(() => formStore.lang);
 </script>
 
 <template>
   <BasePanel class="my-6">
     <template #title>
-      <span :lang="lang">{{ $t('trans.create.formProfile') }}</span>
+      <span :lang="locale">{{ $t('trans.create.formProfile') }}</span>
     </template>
     <v-container class="px-0" :class="{ 'dir-rtl': isRTL }">
-      <div class="mb-6 ml-1 font-weight-bold" :lang="lang">
+      <div class="mb-6 ml-1 font-weight-bold" :lang="locale">
         {{ $t('trans.formProfile.message') }}
       </div>
       <v-row>
diff --git a/app/frontend/src/components/designer/FormViewer.vue b/app/frontend/src/components/designer/FormViewer.vue
index e6f048afa..2595711a3 100644
--- a/app/frontend/src/components/designer/FormViewer.vue
+++ b/app/frontend/src/components/designer/FormViewer.vue
@@ -1,12 +1,12 @@
 <script>
+import { Form } from '@formio/vue';
 import _ from 'lodash';
 import { mapActions, mapState } from 'pinia';
-import { Form } from '@formio/vue';
+import { useI18n } from 'vue-i18n';
 
 import BaseDialog from '~/components/base/BaseDialog.vue';
 import FormViewerActions from '~/components/designer/FormViewerActions.vue';
 import FormViewerMultiUpload from '~/components/designer/FormViewerMultiUpload.vue';
-import { i18n } from '~/internationalization';
 import templateExtensions from '~/plugins/templateExtensions';
 import { formService, rbacService } from '~/services';
 import { useAppStore } from '~/store/app';
@@ -65,6 +65,11 @@ export default {
     },
   },
   emits: ['submission-updated'],
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       allowSubmitterToUploadFile: false,
@@ -116,10 +121,10 @@ export default {
       'tokenParsed',
       'user',
     ]),
-    ...mapState(useFormStore, ['lang', 'isRTL']),
+    ...mapState(useFormStore, ['isRTL']),
 
     formScheduleExpireMessage() {
-      return i18n.t('trans.formViewer.formScheduleExpireMessage');
+      return this.$t('trans.formViewer.formScheduleExpireMessage');
     },
     NOTIFICATIONS_TYPES() {
       return NotificationTypes;
@@ -301,8 +306,8 @@ export default {
         }
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.formViewer.getUsersSubmissionsErrMsg'),
-          consoleError: i18n.t(
+          text: this.$t('trans.formViewer.getUsersSubmissionsErrMsg'),
+          consoleError: this.$t(
             'trans.formViewer.getUsersSubmissionsConsoleErrMsg',
             { submissionId: this.submissionId, error: error }
           ),
@@ -337,7 +342,7 @@ export default {
           response = await formService.readVersion(this.formId, this.versionId);
           if (!response.data || !response.data.schema) {
             throw new Error(
-              i18n.t('trans.formViewer.readVersionErrMsg', {
+              this.$t('trans.formViewer.readVersionErrMsg', {
                 versionId: this.versionId,
               })
             );
@@ -350,7 +355,7 @@ export default {
           response = await formService.readDraft(this.formId, this.draftId);
           if (!response.data || !response.data.schema) {
             throw new Error(
-              i18n.t('trans.formViewer.readDraftErrMsg', {
+              this.$t('trans.formViewer.readDraftErrMsg', {
                 draftId: this.draftId,
               })
             );
@@ -368,7 +373,7 @@ export default {
             this.$router.push({
               name: 'Alert',
               query: {
-                text: i18n.t('trans.formViewer.alertRouteMsg'),
+                text: this.$t('trans.formViewer.alertRouteMsg'),
                 type: 'info',
               },
             });
@@ -393,11 +398,14 @@ export default {
           this.isLateSubmissionAllowed = false;
           this.formScheduleExpireMessage = error.message;
           this.addNotification({
-            text: i18n.t('trans.formViewer.fecthingFormErrMsg'),
-            consoleError: i18n.t('trans.formViewer.fecthingFormConsoleErrMsg', {
-              versionId: this.versionId,
-              error: error,
-            }),
+            text: this.$t('trans.formViewer.fecthingFormErrMsg'),
+            consoleError: this.$t(
+              'trans.formViewer.fecthingFormConsoleErrMsg',
+              {
+                versionId: this.versionId,
+                error: error,
+              }
+            ),
           });
         }
       }
@@ -455,7 +463,7 @@ export default {
         if ([200, 201].includes(response.status)) {
           // all is good, flag no errors and carry on...
           // store our submission result...
-          this.sbdMessage.message = i18n.t(
+          this.sbdMessage.message = this.$t(
             'trans.formViewer.multiDraftUploadSuccess'
           );
           this.sbdMessage.error = false;
@@ -468,7 +476,7 @@ export default {
             ...NotificationTypes.SUCCESS,
           });
         } else {
-          this.sbdMessage.message = i18n.t(
+          this.sbdMessage.message = this.$t(
             'trans.formViewer.failedResSubmissn',
             {
               status: response.status,
@@ -478,14 +486,14 @@ export default {
           this.sbdMessage.upload_state = 10;
           this.block = false;
           this.sbdMessage.response = [
-            { error_message: i18n.t('trans.formViewer.errSubmittingForm') },
+            { error_message: this.$t('trans.formViewer.errSubmittingForm') },
           ];
           this.sbdMessage.file_name =
             'error_report_' + this.form.name + '_' + Date.now();
           this.saving = false;
-          i18n.t('trans.formViewer.errSubmittingForm');
+          this.$t('trans.formViewer.errSubmittingForm');
           throw new Error(
-            i18n.t('trans.formViewer.failedResSubmissn', {
+            this.$t('trans.formViewer.failedResSubmissn', {
               status: response.status,
             })
           );
@@ -496,7 +504,7 @@ export default {
         this.setFinalError(error);
         this.addNotification({
           text: this.sbdMessage.message,
-          consoleError: i18n.t('trans.formViewer.errorSavingFile', {
+          consoleError: this.$t('trans.formViewer.errorSavingFile', {
             fileName: this.json_csv.file_name,
             error: error,
           }),
@@ -508,7 +516,7 @@ export default {
         if (error.response.data != undefined) {
           this.sbdMessage.message =
             error.response.data.title == undefined
-              ? i18n.t('trans.formViewer.errSubmittingForm')
+              ? this.$t('trans.formViewer.errSubmittingForm')
               : error.response.data.title;
           this.sbdMessage.error = true;
           this.sbdMessage.upload_state = 10;
@@ -516,30 +524,32 @@ export default {
             error.response.data.reports == undefined
               ? [
                   {
-                    error_message: i18n.t('trans.formViewer.errSubmittingForm'),
+                    error_message: this.$t(
+                      'trans.formViewer.errSubmittingForm'
+                    ),
                   },
                 ]
               : await this.formatResponse(error.response.data.reports);
           this.sbdMessage.file_name =
             'error_report_' + this.form.name + '_' + Date.now();
         } else {
-          this.sbdMessage.message = i18n.t(
+          this.sbdMessage.message = this.$t(
             'trans.formViewer.errSubmittingForm'
           );
           this.sbdMessage.error = true;
           this.sbdMessage.upload_state = 10;
           this.sbdMessage.response = [
-            { error_message: i18n.t('trans.formViewer.errSubmittingForm') },
+            { error_message: this.$t('trans.formViewer.errSubmittingForm') },
           ];
           this.sbdMessage.file_name =
             'error_report_' + this.form.name + '_' + Date.now();
         }
       } catch (error_2) {
-        this.sbdMessage.message = i18n.t('trans.formViewer.errSubmittingForm');
+        this.sbdMessage.message = this.$t('trans.formViewer.errSubmittingForm');
         this.sbdMessage.error = true;
         this.sbdMessage.upload_state = 10;
         this.sbdMessage.response = [
-          { error_message: i18n.t('trans.formViewer.errSubmittingForm') },
+          { error_message: this.$t('trans.formViewer.errSubmittingForm') },
         ];
         this.sbdMessage.file_name =
           'error_report_' + this.form.name + '_' + Date.now();
@@ -809,8 +819,8 @@ export default {
         this.saveDraftDialog = false;
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.formViewer.savingDraftErrMsg'),
-          consoleError: i18n.t('trans.formViewer.fecthingFormConsoleErrMsg', {
+          text: this.$t('trans.formViewer.savingDraftErrMsg'),
+          consoleError: this.$t('trans.formViewer.fecthingFormConsoleErrMsg', {
             submissionId: this.submissionId,
             error: error,
           }),
@@ -857,7 +867,7 @@ export default {
     // else onSubmitError
     onSubmitButton(event) {
       if (this.preview) {
-        alert(i18n.t('trans.formViewer.submissionsPreviewAlert'));
+        alert(this.$t('trans.formViewer.submissionsPreviewAlert'));
         return;
       }
       // this is our first event in the submission chain.
@@ -908,7 +918,7 @@ export default {
     // eslint-disable-next-line no-unused-vars
     async onSubmit(sub) {
       if (this.preview) {
-        alert(i18n.t('trans.formViewer.submissionsPreviewAlert'));
+        alert(this.$t('trans.formViewer.submissionsPreviewAlert'));
         this.confirmSubmit = false;
         return;
       }
@@ -921,7 +931,7 @@ export default {
       if (errors) {
         this.addNotification({
           text: errors,
-          consoleError: i18n.t('trans.formViewer.submissionsSubmitErrMsg', {
+          consoleError: this.$t('trans.formViewer.submissionsSubmitErrMsg', {
             errors: errors,
           }),
         });
@@ -950,14 +960,14 @@ export default {
           );
         } else {
           throw new Error(
-            i18n.t('trans.formViewer.sendSubmissionErrMsg', {
+            this.$t('trans.formViewer.sendSubmissionErrMsg', {
               status: response.status,
             })
           );
         }
       } catch (error) {
         console.error(error); // eslint-disable-line no-console
-        errMsg = i18n.t('trans.formViewer.errMsg');
+        errMsg = this.$t('trans.formViewer.errMsg');
       } finally {
         this.confirmSubmit = false;
       }
@@ -983,7 +993,9 @@ export default {
     },
     // Custom Event triggered from buttons with Action type "Event"
     onCustomEvent(event) {
-      alert(i18n.t('trans.formViewer.customEventAlert', { event: event.type }));
+      alert(
+        this.$t('trans.formViewer.customEventAlert', { event: event.type })
+      );
     },
     switchView() {
       if (!this.bulkFile) {
@@ -1050,8 +1062,8 @@ export default {
         this.showSubmitConfirmDialog = false;
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.formViewer.submittingDraftErrMsg'),
-          consoleError: i18n.t('trans.formViewer.submittingDraftConsErrMsg', {
+          text: this.$t('trans.formViewer.submittingDraftErrMsg'),
+          consoleError: this.$t('trans.formViewer.submittingDraftConsErrMsg', {
             submissionId: this.submissionId,
             error: error,
           }),
@@ -1084,7 +1096,7 @@ export default {
           prominent
           type="error"
           :class="{ 'dir-rtl': isRTL }"
-          :lang="lang"
+          :lang="locale"
         >
         </v-alert>
 
@@ -1096,7 +1108,7 @@ export default {
               :title="$t('trans.formViewer.createLateSubmission')"
               @click="isFormScheduleExpired = false"
             >
-              <span :lang="lang">{{
+              <span :lang="locale">{{
                 $t('trans.formViewer.createLateSubmission')
               }}</span>
             </v-btn>
@@ -1145,10 +1157,10 @@ export default {
             "
           >
             <div v-if="saving" :class="{ 'mr-2': isRTL }">
-              <v-progress-linear indeterminate :lang="lang" />
+              <v-progress-linear indeterminate :lang="locale" />
               {{ $t('trans.formViewer.saving') }}
             </div>
-            <div v-else :class="{ 'mr-2': isRTL }" :lang="lang">
+            <div v-else :class="{ 'mr-2': isRTL }" :lang="locale">
               {{ $t('trans.formViewer.draftSaved') }}
             </div>
           </v-alert>
@@ -1163,17 +1175,17 @@ export default {
             @continue-dialog="continueSubmit"
           >
             <template #title>
-              <span :lang="lang">{{
+              <span :lang="locale">{{
                 $t('trans.formViewer.pleaseConfirm')
               }}</span></template
             >
             <template #text
-              ><span :lang="lang">{{
+              ><span :lang="locale">{{
                 $t('trans.formViewer.submitFormWarningMsg')
               }}</span></template
             >
             <template #button-text-continue>
-              <span :lang="lang">{{ $t('trans.formViewer.submit') }}</span>
+              <span :lang="locale">{{ $t('trans.formViewer.submit') }}</span>
             </template>
           </BaseDialog>
 
@@ -1191,7 +1203,7 @@ export default {
                 color="blue-grey-lighten-4"
                 height="5"
               ></v-progress-linear>
-              <span :class="{ 'mr-2': isRTL }" :lang="lang">
+              <span :class="{ 'mr-2': isRTL }" :lang="locale">
                 {{ $t('trans.formViewer.formLoading') }}
               </span>
             </div>
@@ -1218,7 +1230,7 @@ export default {
             :form="formSchema"
             :submission="submission"
             :options="viewerOptions"
-            :language="lang"
+            :language="locale"
             @submit="onSubmit"
             @submitDone="onSubmitDone"
             @submitButton="onSubmitButton"
@@ -1230,7 +1242,7 @@ export default {
             v-if="version"
             :class="{ 'text-left': isRTL }"
             class="mt-3"
-            :lang="lang"
+            :lang="locale"
           >
             {{ $t('trans.formViewer.version', { version: version }) }}
           </p>
@@ -1246,20 +1258,20 @@ export default {
         @continue-dialog="yes"
       >
         <template #title
-          ><span :lang="lang">
+          ><span :lang="locale">
             {{ $t('trans.formViewer.pleaseConfirm') }}</span
           ></template
         >
         <template #text
-          ><span :lang="lang">
+          ><span :lang="locale">
             {{ $t('trans.formViewer.wantToSaveDraft') }}</span
           ></template
         >
         <template #button-text-continue>
-          <span :lang="lang"> {{ $t('trans.formViewer.yes') }}</span>
+          <span :lang="locale"> {{ $t('trans.formViewer.yes') }}</span>
         </template>
         <template #button-text-delete>
-          <span :lang="lang"> {{ $t('trans.formViewer.no') }}</span>
+          <span :lang="locale"> {{ $t('trans.formViewer.no') }}</span>
         </template>
       </BaseDialog>
     </v-container>
diff --git a/app/frontend/src/components/designer/FormViewerActions.vue b/app/frontend/src/components/designer/FormViewerActions.vue
index 4caeea56b..157893406 100644
--- a/app/frontend/src/components/designer/FormViewerActions.vue
+++ b/app/frontend/src/components/designer/FormViewerActions.vue
@@ -1,5 +1,7 @@
 <script>
 import { mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import ManageSubmissionUsers from '~/components/forms/submission/ManageSubmissionUsers.vue';
 import PrintOptions from '~/components/forms/PrintOptions.vue';
 import { FormPermissions } from '~/utils/constants';
@@ -58,13 +60,18 @@ export default {
     },
   },
   emits: ['save-draft', 'switchView', 'showdoYouWantToSaveTheDraftModal'],
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   data() {
     return {
       isWideLayout: false,
     };
   },
   computed: {
-    ...mapState(useFormStore, ['lang', 'isRTL']),
+    ...mapState(useFormStore, ['isRTL']),
     canSaveDraft() {
       return !this.readOnly;
     },
@@ -100,7 +107,7 @@ export default {
         :title="$t('trans.formViewerActions.viewMyDraftOrSubmissions')"
         @click="$emit('showdoYouWantToSaveTheDraftModal')"
       >
-        <span :lang="lang">{{
+        <span :lang="locale">{{
           $t('trans.formViewerActions.viewMyDraftOrSubmissions')
         }}</span>
       </v-btn>
@@ -125,7 +132,7 @@ export default {
               <v-icon icon="mdi:mdi-repeat"></v-icon>
             </v-btn>
           </template>
-          <span :lang="lang">{{
+          <span :lang="locale">{{
             bulkFile
               ? $t('trans.formViewerActions.switchSingleSubmssn')
               : $t('trans.formViewerActions.switchMultiSubmssn')
@@ -176,7 +183,7 @@ export default {
               <v-icon icon="mdi:mdi-content-save"></v-icon>
             </v-btn>
           </template>
-          <span :lang="lang">{{
+          <span :lang="locale">{{
             $t('trans.formViewerActions.saveAsADraft')
           }}</span>
         </v-tooltip>
@@ -203,7 +210,7 @@ export default {
                 :title="$t('trans.formViewerActions.editThisDraft')"
               />
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.formViewerActions.editThisDraft')
             }}</span>
           </v-tooltip>
diff --git a/app/frontend/src/components/designer/FormViewerMultiUpload.vue b/app/frontend/src/components/designer/FormViewerMultiUpload.vue
index 924cc576a..f603386c2 100644
--- a/app/frontend/src/components/designer/FormViewerMultiUpload.vue
+++ b/app/frontend/src/components/designer/FormViewerMultiUpload.vue
@@ -1,10 +1,10 @@
 <script>
+import { Formio, Utils } from '@formio/vue';
 import _ from 'lodash';
 import { mapActions, mapState } from 'pinia';
-import { Formio, Utils } from '@formio/vue';
+import { useI18n } from 'vue-i18n';
 
 import BaseInfoCard from '~/components/base/BaseInfoCard.vue';
-import { i18n } from '~/internationalization';
 import { useAppStore } from '~/store/app';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
@@ -51,6 +51,11 @@ export default {
     },
   },
   emits: ['reset-message', 'save-bulk-data', 'set-error', 'toggleBlock'],
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       file: undefined,
@@ -68,7 +73,7 @@ export default {
   },
   computed: {
     ...mapState(useAppStore, ['config']),
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
 
     txt_colour() {
       if (!this.response.error) return 'success-text';
@@ -96,7 +101,7 @@ export default {
     ...mapActions(useNotificationStore, ['addNotification']),
     download(filename, data) {
       if (
-        window.confirm(i18n.t('trans.formViewerMultiUpload.confirmDownload'))
+        window.confirm(this.$t('trans.formViewerMultiUpload.confirmDownload'))
       ) {
         const blob = new Blob([JSON.stringify(data)], {
           type: 'application/json',
@@ -116,8 +121,8 @@ export default {
 
       if (this.file != undefined) {
         this.addNotification({
-          text: i18n.t('trans.formViewerMultiUpload.uploadMultipleFileErr'),
-          consoleError: i18n.t(
+          text: this.$t('trans.formViewerMultiUpload.uploadMultipleFileErr'),
+          consoleError: this.$t(
             'trans.formViewerMultiUpload.uploadMultipleFileErr'
           ),
         });
@@ -130,8 +135,8 @@ export default {
 
         if (files.length > 1) {
           this.addNotification({
-            text: i18n.t('trans.formViewerMultiUpload.dragMultipleFileErr'),
-            consoleError: i18n.t(
+            text: this.$t('trans.formViewerMultiUpload.dragMultipleFileErr'),
+            consoleError: this.$t(
               'trans.formViewerMultiUpload.dragMultipleFileErr'
             ),
           });
@@ -140,15 +145,15 @@ export default {
 
         if (files[0]['type'] != 'application/json') {
           this.addNotification({
-            text: i18n.t('trans.formViewerMultiUpload.fileFormatErr'),
-            consoleError: i18n.t('trans.formViewerMultiUpload.fileFormatErr'),
+            text: this.$t('trans.formViewerMultiUpload.fileFormatErr'),
+            consoleError: this.$t('trans.formViewerMultiUpload.fileFormatErr'),
           });
           return;
         }
         if (files[0].size > this.config.uploads.fileMaxSizeBytes) {
           this.addNotification({
-            text: i18n.t('trans.formViewerMultiUpload.fileSizeErr'),
-            consoleError: i18n.t('trans.formViewerMultiUpload.fileSizeErr'),
+            text: this.$t('trans.formViewerMultiUpload.fileSizeErr'),
+            consoleError: this.$t('trans.formViewerMultiUpload.fileSizeErr'),
           });
           return;
         }
@@ -156,9 +161,9 @@ export default {
         this.parseFile();
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.formViewerMultiUpload.dragMultipleFileErr'),
+          text: this.$t('trans.formViewerMultiUpload.dragMultipleFileErr'),
           consoleError:
-            i18n.t('trans.formViewerMultiUpload.dragMultipleFileErr') +
+            this.$t('trans.formViewerMultiUpload.dragMultipleFileErr') +
             `${error}`,
         });
         return;
@@ -186,7 +191,7 @@ export default {
       } catch (e) {
         this.resetUpload();
         this.addNotification({
-          text: i18n.t('trans.formViewerMultiUpload.parseJsonErr'),
+          text: this.$t('trans.formViewerMultiUpload.parseJsonErr'),
           consoleError: e,
         });
       }
@@ -230,8 +235,8 @@ export default {
         if (!Array.isArray(this.Json)) {
           this.resetUpload();
           this.addNotification({
-            text: i18n.t('trans.formViewerMultiUpload.jsonObjNotArray'),
-            consoleError: i18n.t(
+            text: this.$t('trans.formViewerMultiUpload.jsonObjNotArray'),
+            consoleError: this.$t(
               'trans.formViewerMultiUpload.jsonObjNotArrayConsErr'
             ),
           });
@@ -240,8 +245,8 @@ export default {
         if (this.Json.length == 0) {
           this.resetUpload();
           this.addNotification({
-            text: i18n.t('trans.formViewerMultiUpload.jsonArrayEmpty'),
-            consoleError: i18n.t('trans.formViewerMultiUpload.fileIsEmpty'),
+            text: this.$t('trans.formViewerMultiUpload.jsonArrayEmpty'),
+            consoleError: this.$t('trans.formViewerMultiUpload.fileIsEmpty'),
           });
           return;
         }
@@ -318,10 +323,10 @@ export default {
         this.resetUpload();
         this.$emit('set-error', {
           error: true,
-          text: i18n.t('trans.formViewerMultiUpload.errorWhileValidate'),
+          text: this.$t('trans.formViewerMultiUpload.errorWhileValidate'),
         });
         this.addNotification({
-          text: i18n.t('trans.formViewerMultiUpload.errorWhileValidate'),
+          text: this.$t('trans.formViewerMultiUpload.errorWhileValidate'),
           consoleError: error,
         });
         return;
@@ -464,7 +469,7 @@ export default {
       } else {
         this.$emit('toggleBlock', false);
         this.$emit('set-error', {
-          text: i18n.t('trans.formViewerMultiUpload.errAfterValidate'),
+          text: this.$t('trans.formViewerMultiUpload.errAfterValidate'),
           error: true,
           upload_state: 10,
           response: {
@@ -497,7 +502,7 @@ export default {
   <div class="file-upload" :class="{ 'dir-rtl': isRTL }">
     <v-container fluid class="file-upload">
       <BaseInfoCard v-if="jsonCsv.data" class="mb-4">
-        <h4 class="text-primary" :lang="lang">
+        <h4 class="text-primary" :lang="locale">
           <v-icon
             :class="isRTL ? 'ml-1' : 'mr-1'"
             color="primary"
@@ -505,11 +510,11 @@ export default {
           ></v-icon
           >{{ $t('trans.formViewerMultiUpload.important') }}!
         </h4>
-        <p class="my-2" :lang="lang">
+        <p class="my-2" :lang="locale">
           {{ $t('trans.formViewerMultiUpload.uploadSucessMsg') }}
           <span class="link">
             <a
-              :hreflang="lang"
+              :lang="locale"
               @click="
                 download(
                   jsonCsv.file_name,
@@ -539,10 +544,10 @@ export default {
         @dragover.prevent
       >
         <v-icon class="mr-1" color="#003366" icon="mdi:mdi-upload" />
-        <h1 :lang="lang">
+        <h1 :lang="locale">
           {{ $t('trans.formViewerMultiUpload.jsonFileUpload') }}
         </h1>
-        <p :lang="lang">{{ $t('trans.formViewerMultiUpload.dragNDrop') }}</p>
+        <p :lang="locale">{{ $t('trans.formViewerMultiUpload.dragNDrop') }}</p>
 
         <v-file-input
           ref="fileRef"
@@ -551,7 +556,7 @@ export default {
           name="file"
           :label="$t('trans.formViewerMultiUpload.chooseAFile')"
           show-size
-          :lang="lang"
+          :lang="locale"
           @change="addFile($event, 1)"
         >
         </v-file-input>
@@ -603,13 +608,13 @@ export default {
             <p
               v-if="response.error && response.response.length > 0"
               style="text-align: justify; line-height: 1.2"
-              :lang="lang"
+              :lang="locale"
             >
               {{ $t('trans.formViewerMultiUpload.downloadDraftSubmns') }}
               <br />
               <span class="link">
                 <a
-                  :hreflang="lang"
+                  :lang="locale"
                   @click="
                     download(
                       response.file_name,
@@ -644,7 +649,7 @@ export default {
                 :title="$t('trans.formViewerMultiUpload.uploadNewFile')"
                 @click="resetUpload"
               >
-                <span :lang="lang">{{
+                <span :lang="locale">{{
                   $t('trans.formViewerMultiUpload.uploadNewFile')
                 }}</span>
               </v-btn>
diff --git a/app/frontend/src/components/designer/FormsTable.vue b/app/frontend/src/components/designer/FormsTable.vue
index 744f051a8..6bf7aecb3 100644
--- a/app/frontend/src/components/designer/FormsTable.vue
+++ b/app/frontend/src/components/designer/FormsTable.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapActions, mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
-import { i18n } from '~/internationalization';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
 import { useIdpStore } from '~/store/identityProviders';
@@ -12,6 +12,11 @@ export default {
   components: {
     BaseDialog,
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       formId: null,
@@ -23,19 +28,19 @@ export default {
     };
   },
   computed: {
-    ...mapState(useFormStore, ['formList', 'isRTL', 'lang']),
+    ...mapState(useFormStore, ['formList', 'isRTL']),
     ...mapState(useAuthStore, ['user']),
     ...mapState(useIdpStore, ['isPrimary']),
     headers() {
       return [
         {
-          title: i18n.t('trans.formsTable.formTitle'),
+          title: this.$t('trans.formsTable.formTitle'),
           align: 'start',
           key: 'name',
           width: '1%',
         },
         {
-          title: i18n.t('trans.formsTable.action'),
+          title: this.$t('trans.formsTable.action'),
           align: 'end',
           key: 'actions',
           filterable: false,
@@ -78,7 +83,7 @@ export default {
     >
       <!-- page title -->
       <div>
-        <h1 :lang="lang">{{ $t('trans.formsTable.myForms') }}</h1>
+        <h1 :lang="locale">{{ $t('trans.formsTable.myForms') }}</h1>
       </div>
       <!-- buttons -->
       <div v-if="canCreateForm">
@@ -102,7 +107,7 @@ export default {
               </v-btn>
             </router-link>
           </template>
-          <span :lang="lang">{{ $t('trans.formsTable.createNewForm') }}</span>
+          <span :lang="locale">{{ $t('trans.formsTable.createNewForm') }}</span>
         </v-tooltip>
       </div>
     </div>
@@ -121,7 +126,7 @@ export default {
             :label="$t('trans.formsTable.search')"
             class="pb-5"
             :class="{ label: isRTL }"
-            :lang="lang"
+            :lang="locale"
           />
         </div>
       </v-col>
@@ -138,7 +143,7 @@ export default {
     :loading="loading"
     :loading-text="$t('trans.formsTable.loadingText')"
     :search="search"
-    :lang="lang"
+    :lang="locale"
     :sort-by="sortBy"
   >
     <template #item.name="{ item }">
@@ -154,7 +159,7 @@ export default {
           <template #activator="{ props }">
             <span v-bind="props">{{ item.name }}</span>
           </template>
-          <span :lang="lang">
+          <span :lang="locale">
             {{ $t('trans.formsTable.viewForm') }}
             <v-icon icon="mdi:mdi-open-in-new"></v-icon>
           </span>
@@ -183,7 +188,7 @@ export default {
           :title="$t('trans.formsTable.manage')"
         >
           <v-icon :class="isRTL ? 'ml-1' : 'mr-1'" icon="mdi:mdi-cog"></v-icon>
-          <span class="d-none d-sm-flex" :lang="lang">{{
+          <span class="d-none d-sm-flex" :lang="locale">{{
             $t('trans.formsTable.manage')
           }}</span>
         </v-btn>
@@ -203,7 +208,7 @@ export default {
             :class="isRTL ? 'ml-1' : 'mr-1'"
             icon="mdi:mdi-list-box-outline"
           ></v-icon>
-          <span class="d-none d-sm-flex" :lang="lang">{{
+          <span class="d-none d-sm-flex" :lang="locale">{{
             $t('trans.formsTable.submissions')
           }}</span>
         </v-btn>
@@ -217,7 +222,7 @@ export default {
     @close-dialog="showDescriptionDialog = false"
   >
     <template #title>
-      <span class="pl-5" :lang="lang">{{
+      <span class="pl-5" :lang="locale">{{
         $t('trans.formsTable.Description')
       }}</span>
     </template>
diff --git a/app/frontend/src/components/designer/profile/FormAPIProfile.vue b/app/frontend/src/components/designer/profile/FormAPIProfile.vue
index 7fc4276dd..b5200ff25 100644
--- a/app/frontend/src/components/designer/profile/FormAPIProfile.vue
+++ b/app/frontend/src/components/designer/profile/FormAPIProfile.vue
@@ -1,19 +1,19 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { useFormStore } from '~/store/form';
-import { i18n } from '~/internationalization';
+
+const { t, locale } = useI18n({ useScope: 'global' });
 
 const formStore = useFormStore();
-const apiRules = ref([
-  (v) => v != null || i18n.t('trans.formProfile.selectAPIErr'),
-]);
+const apiRules = ref([(v) => v != null || t('trans.formProfile.selectAPIErr')]);
 const form = computed(() => formStore.form);
-const lang = computed(() => formStore.lang);
 const isRTL = computed(() => formStore.isRTL);
 </script>
 
 <template>
-  <div class="ml-1 mb-4" :lang="lang">
+  <div class="ml-1 mb-4" :lang="locale">
     <span v-if="form.apiIntegration == null" class="text-danger"
       ><strong>*</strong></span
     >
@@ -31,7 +31,7 @@ const isRTL = computed(() => formStore.isRTL);
       data-test="api-true"
     >
       <template #label>
-        <span :class="{ 'mr-2': isRTL }" :lang="lang">
+        <span :class="{ 'mr-2': isRTL }" :lang="locale">
           {{ $t('trans.formProfile.Y') }}
         </span>
       </template></v-radio
@@ -43,7 +43,7 @@ const isRTL = computed(() => formStore.isRTL);
       data-test="api-false"
     >
       <template #label>
-        <span :class="{ 'mr-2': isRTL }" :lang="lang">
+        <span :class="{ 'mr-2': isRTL }" :lang="locale">
           {{ $t('trans.formProfile.N') }}
         </span>
       </template></v-radio
diff --git a/app/frontend/src/components/designer/profile/FormDeploymentProfile.vue b/app/frontend/src/components/designer/profile/FormDeploymentProfile.vue
index cc8213b99..a5952f6dc 100644
--- a/app/frontend/src/components/designer/profile/FormDeploymentProfile.vue
+++ b/app/frontend/src/components/designer/profile/FormDeploymentProfile.vue
@@ -1,24 +1,26 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { useFormStore } from '~/store/form';
-import { i18n } from '~/internationalization';
 import { FormProfileValues } from '~/utils/constants';
 
+const { t, locale } = useI18n({ useScope: 'global' });
+
 const formStore = useFormStore();
 const form = computed(() => formStore.form);
-const lang = computed(() => formStore.lang);
 const isRTL = computed(() => formStore.isRTL);
 const FORM_PROFILE = computed(() => FormProfileValues);
 
 const deploymentRules = ref([
   (v) => {
-    return !!v || i18n.t('trans.formProfile.selectDeploymentErr');
+    return !!v || t('trans.formProfile.selectDeploymentErr');
   },
 ]);
 </script>
 
 <template>
-  <div class="ml-1 mb-2" :lang="lang">
+  <div class="ml-1 mb-2" :lang="locale">
     <span v-if="!form.deploymentLevel" class="text-danger"
       ><strong>*</strong></span
     >
@@ -36,7 +38,7 @@ const deploymentRules = ref([
       :value="FORM_PROFILE.DEVELOPMENT"
       data-test="deployment-development"
       ><template #label>
-        <span :class="{ 'mr-2': isRTL }" :lang="lang">
+        <span :class="{ 'mr-2': isRTL }" :lang="locale">
           {{ $t('trans.formProfile.development') }}
         </span>
       </template></v-radio
@@ -48,7 +50,7 @@ const deploymentRules = ref([
       data-test="deployment-test"
     >
       <template #label>
-        <span :class="{ 'mr-2': isRTL }" :lang="lang">
+        <span :class="{ 'mr-2': isRTL }" :lang="locale">
           {{ $t('trans.formProfile.test') }}
         </span>
       </template>
@@ -60,7 +62,7 @@ const deploymentRules = ref([
       data-test="deployment-prod"
     >
       <template #label>
-        <span :class="{ 'mr-2': isRTL }" :lang="lang">
+        <span :class="{ 'mr-2': isRTL }" :lang="locale">
           {{ $t('trans.formProfile.production') }}
         </span>
       </template>
diff --git a/app/frontend/src/components/designer/profile/FormLabelProfile.vue b/app/frontend/src/components/designer/profile/FormLabelProfile.vue
index 5c8514c55..630b11a43 100644
--- a/app/frontend/src/components/designer/profile/FormLabelProfile.vue
+++ b/app/frontend/src/components/designer/profile/FormLabelProfile.vue
@@ -1,16 +1,18 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
+
 import { useFormStore } from '~/store/form';
 import userService from '~/services/userService';
 import { useNotificationStore } from '~/store/notification';
 
+const { t, locale } = useI18n({ useScope: 'global' });
+
 const formStore = useFormStore();
 const notificationStore = useNotificationStore();
 const loading = ref(true);
 
 const form = computed(() => formStore.form);
-const lang = computed(() => formStore.lang);
 const isRTL = computed(() => formStore.isRTL);
 
 /* c8 ignore start */
@@ -18,7 +20,7 @@ const labelRules = ref([
   (v) =>
     !v ||
     !v.some((str) => str.length > 25) ||
-    i18n.t('trans.formProfile.labelSizeErr'),
+    t('trans.formProfile.labelSizeErr'),
 ]);
 /* c8 ignore stop */
 
@@ -29,8 +31,8 @@ onMounted(async () => {
     formStore.userLabels = result.data;
   } catch (error) {
     notificationStore.addNotification({
-      text: i18n.t('trans.formProfile.getLabelErr'),
-      consoleError: i18n.t('trans.formProfile.getLabelConsErr') + `${error}`,
+      text: t('trans.formProfile.getLabelErr'),
+      consoleError: t('trans.formProfile.getLabelConsErr') + `${error}`,
     });
   } finally {
     loading.value = false;
@@ -66,7 +68,7 @@ onMounted(async () => {
           />
         </template>
         <span>
-          <span :lang="lang">{{ $t('trans.formProfile.labelPrompt') }}</span>
+          <span :lang="locale">{{ $t('trans.formProfile.labelPrompt') }}</span>
         </span>
       </v-tooltip>
     </div>
diff --git a/app/frontend/src/components/designer/profile/FormMinistryProfile.vue b/app/frontend/src/components/designer/profile/FormMinistryProfile.vue
index 1f7e79772..fd6c7543c 100644
--- a/app/frontend/src/components/designer/profile/FormMinistryProfile.vue
+++ b/app/frontend/src/components/designer/profile/FormMinistryProfile.vue
@@ -1,31 +1,33 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { useFormStore } from '~/store/form';
 import { Ministries } from '~/utils/constants';
-import { i18n } from '~/internationalization';
+
+const { t, locale } = useI18n({ useScope: 'global' });
 
 const formStore = useFormStore();
 
 const ministryRules = ref([
   (v) => {
-    return !!v || i18n.t('trans.formProfile.selectMinistryErr');
+    return !!v || t('trans.formProfile.selectMinistryErr');
   },
 ]);
 
 const form = computed(() => formStore.form);
-const lang = computed(() => formStore.lang);
 const isRTL = computed(() => formStore.isRTL);
 
 const MinistryList = computed(() => {
   return Ministries.map((ministry) => ({
     id: ministry.id,
-    text: i18n.t(`trans.ministries.${ministry.id}`),
+    text: t(`trans.ministries.${ministry.id}`),
   }));
 });
 </script>
 
 <template>
-  <div class="ml-1 mb-4" :lang="lang">
+  <div class="ml-1 mb-4" :lang="locale">
     <span v-if="!form.ministry" class="text-danger"><strong>*</strong></span>
     {{ $t('trans.formProfile.ministryPrompt') }}
   </div>
diff --git a/app/frontend/src/components/designer/profile/FormUseCaseProfile.vue b/app/frontend/src/components/designer/profile/FormUseCaseProfile.vue
index 052b419f6..1301fa400 100644
--- a/app/frontend/src/components/designer/profile/FormUseCaseProfile.vue
+++ b/app/frontend/src/components/designer/profile/FormUseCaseProfile.vue
@@ -1,31 +1,33 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { useFormStore } from '~/store/form';
 import { FormProfileValues } from '~/utils/constants';
-import { i18n } from '~/internationalization';
+
+const { t, locale } = useI18n({ useScope: 'global' });
 
 const formStore = useFormStore();
 
 const useCaseRules = ref([
   (v) => {
-    return !!v || i18n.t('trans.formProfile.selectUseCaseErr');
+    return !!v || t('trans.formProfile.selectUseCaseErr');
   },
 ]);
 
 const form = computed(() => formStore.form);
-const lang = computed(() => formStore.lang);
 const isRTL = computed(() => formStore.isRTL);
 
 const useCase = computed(() => {
   return FormProfileValues.USE_CASE.map((useCase) => ({
     id: useCase.id,
-    text: i18n.t(`trans.formProfile.${useCase.id}`),
+    text: t(`trans.formProfile.${useCase.id}`),
   }));
 });
 </script>
 
 <template>
-  <div class="ml-1 mb-4" :lang="lang">
+  <div class="ml-1 mb-4" :lang="locale">
     <span v-if="!form.useCase" class="text-danger"><strong>*</strong></span>
     {{ $t('trans.formProfile.useCasePrompt') }}
     <v-tooltip location="bottom">
@@ -39,7 +41,7 @@ const useCase = computed(() => {
         />
       </template>
       <span>
-        <span :lang="lang">{{ $t('trans.formProfile.useCaseToolTip') }}</span>
+        <span :lang="locale">{{ $t('trans.formProfile.useCaseToolTip') }}</span>
       </span>
     </v-tooltip>
   </div>
diff --git a/app/frontend/src/components/designer/settings/FormAccessSettings.vue b/app/frontend/src/components/designer/settings/FormAccessSettings.vue
index be0953a18..c81600eb7 100644
--- a/app/frontend/src/components/designer/settings/FormAccessSettings.vue
+++ b/app/frontend/src/components/designer/settings/FormAccessSettings.vue
@@ -1,11 +1,13 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { computed, onBeforeMount, nextTick, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { IdentityMode } from '~/utils/constants';
 import { useFormStore } from '~/store/form';
 import { useIdpStore } from '~/store/identityProviders';
-import { i18n } from '~/internationalization';
+
+const { t, locale } = useI18n({ useScope: 'global' });
 
 /* c8 ignore start */
 const loginRequiredRules = ref([
@@ -13,7 +15,7 @@ const loginRequiredRules = ref([
     return (
       v !== 'login' ||
       form.value.idps.length > 0 ||
-      i18n.t('trans.formSettings.selectLoginType')
+      t('trans.formSettings.selectLoginType')
     );
   },
 ]);
@@ -23,7 +25,7 @@ const idpType = ref(null);
 
 const idpStore = useIdpStore();
 
-const { form, isRTL, lang } = storeToRefs(useFormStore());
+const { form, isRTL } = storeToRefs(useFormStore());
 const { loginButtons } = storeToRefs(idpStore);
 
 const ID_MODE = computed(() => IdentityMode);
@@ -69,7 +71,7 @@ defineExpose({ idpType, userTypeChanged, updateLoginType });
 <template>
   <BasePanel class="fill-height">
     <template #title
-      ><span :lang="lang">{{
+      ><span :lang="locale">{{
         $t('trans.formSettings.formAccess')
       }}</span></template
     >
@@ -87,7 +89,7 @@ defineExpose({ idpType, userTypeChanged, updateLoginType });
         :value="ID_MODE.PUBLIC"
       >
         <template #label>
-          <span :class="{ 'mr-2': isRTL }" :lang="lang">
+          <span :class="{ 'mr-2': isRTL }" :lang="locale">
             {{ $t('trans.formSettings.public') }}
           </span>
         </template>
@@ -98,11 +100,11 @@ defineExpose({ idpType, userTypeChanged, updateLoginType });
           class="mr-4 mb-3"
           :class="{ 'dir-rtl': isRTL }"
         >
-          <h4 class="text-primary" :lang="lang">
+          <h4 class="text-primary" :lang="locale">
             <v-icon color="primary" icon="mdi:mdi-information" />
             {{ $t('trans.formSettings.important') }}!
           </h4>
-          <p class="mt-2 mb-0" :lang="lang">
+          <p class="mt-2 mb-0" :lang="locale">
             {{ $t('trans.formSettings.info') }}
             <a href="https://engage.gov.bc.ca/govtogetherbc/" target="_blank">
               govTogetherBC.
@@ -113,7 +115,7 @@ defineExpose({ idpType, userTypeChanged, updateLoginType });
       </v-expand-transition>
       <v-radio class="mb-4" :value="ID_MODE.LOGIN">
         <template #label>
-          <span :class="{ 'mr-2': isRTL }" :lang="lang">
+          <span :class="{ 'mr-2': isRTL }" :lang="locale">
             {{ $t('trans.formSettings.loginRequired') }}
           </span>
         </template>
@@ -142,21 +144,21 @@ defineExpose({ idpType, userTypeChanged, updateLoginType });
                 class="mr-4"
                 :class="{ 'dir-rtl': isRTL }"
               >
-                <h4 class="text-primary" :lang="lang">
+                <h4 class="text-primary" :lang="locale">
                   <v-icon color="primary" icon="mdi:mdi-information" />
                   {{ $t('trans.formSettings.important') }}!
                 </h4>
-                <p class="my-2" :lang="lang">
+                <p class="my-2" :lang="locale">
                   {{ $t('trans.formSettings.idimNotifyA') }} (<a
                     href="mailto:IDIM.Consulting@gov.bc.ca"
                     >IDIM.Consulting@gov.bc.ca</a
                   >) {{ $t('trans.formSettings.idimNotifyB') }}
                 </p>
-                <p class="mt-2 mb-0" :lang="lang">
+                <p class="mt-2 mb-0" :lang="locale">
                   {{ $t('trans.formSettings.referenceGuideA') }}
                   <a
                     href="https://github.com/bcgov/common-hosted-form-service/wiki/Accessing-forms#Notify-the-idim-team-if-you-are-using-bceid"
-                    :hreflang="lang"
+                    :lang="locale"
                     >{{ $t('trans.formSettings.referenceGuideB') }}</a
                   >
                   {{ $t('trans.formSettings.referenceGuideC') }}.
@@ -168,7 +170,7 @@ defineExpose({ idpType, userTypeChanged, updateLoginType });
       </v-expand-transition>
       <v-radio :value="ID_MODE.TEAM">
         <template #label>
-          <span :class="{ 'mr-2': isRTL }" :lang="lang">
+          <span :class="{ 'mr-2': isRTL }" :lang="locale">
             {{ $t('trans.formSettings.specificTeamMembers') }}
           </span>
         </template>
diff --git a/app/frontend/src/components/designer/settings/FormFunctionalitySettings.vue b/app/frontend/src/components/designer/settings/FormFunctionalitySettings.vue
index 86df7fd23..c9dae0ea3 100644
--- a/app/frontend/src/components/designer/settings/FormFunctionalitySettings.vue
+++ b/app/frontend/src/components/designer/settings/FormFunctionalitySettings.vue
@@ -2,11 +2,15 @@
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
 import { useIdpStore } from '~/store/identityProviders';
 import { IdentityMode } from '~/utils/constants';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 const githubLinkBulkUpload = ref(
   'https://github.com/bcgov/common-hosted-form-service/wiki/Allow-multiple-draft-upload'
 );
@@ -28,7 +32,7 @@ const formStore = useFormStore();
 const idpStore = useIdpStore();
 
 const { identityProvider } = storeToRefs(authStore);
-const { form, isRTL, lang } = storeToRefs(formStore);
+const { form, isRTL } = storeToRefs(formStore);
 
 const ID_MODE = computed(() => IdentityMode);
 const primaryIdpUser = computed(() =>
@@ -59,7 +63,7 @@ defineExpose({
 <template>
   <BasePanel class="fill-height">
     <template #title
-      ><span :lang="lang">{{
+      ><span :lang="locale">{{
         $t('trans.formSettings.formFunctionality')
       }}</span></template
     >
@@ -74,7 +78,7 @@ defineExpose({
       <template #label>
         <span
           :class="{ 'mr-2': isRTL }"
-          :lang="lang"
+          :lang="locale"
           v-html="$t('trans.formSettings.canSaveAndEditDraftLabel')"
         ></span>
       </template>
@@ -89,7 +93,7 @@ defineExpose({
       <template #label>
         <span
           :class="{ 'mr-2': isRTL }"
-          :lang="lang"
+          :lang="locale"
           v-html="$t('trans.formSettings.canUpdateStatusAsReviewer')"
         ></span>
       </template>
@@ -106,7 +110,7 @@ defineExpose({
       <template #label>
         <div :class="{ 'mr-2': isRTL }">
           <span
-            :lang="lang"
+            :lang="locale"
             v-html="$t('trans.formSettings.allowMultiDraft')"
           />
           <v-tooltip location="bottom" close-delay="2500">
@@ -119,13 +123,13 @@ defineExpose({
                 icon="mdi:mdi-flask"
               />
             </template>
-            <span :lang="lang"
+            <span :lang="locale"
               >{{ $t('trans.formSettings.experimental') }}
               <a
                 :href="githubLinkBulkUpload"
                 class="preview_info_link_field_white"
                 :target="'_blank'"
-                :hreflang="lang"
+                :lang="locale"
               >
                 {{ $t('trans.formSettings.learnMore') }}
                 <v-icon
@@ -146,7 +150,7 @@ defineExpose({
       class="my-0"
     >
       <template #label>
-        <span :class="{ 'mr-2': isRTL }" :lang="lang"
+        <span :class="{ 'mr-2': isRTL }" :lang="locale"
           >{{ $t('trans.formSettings.formSubmissinScheduleMsg') }}
         </span>
       </template>
@@ -161,7 +165,7 @@ defineExpose({
     >
       <template #label>
         <div :class="{ 'mr-2': isRTL }">
-          <span :lang="lang">{{
+          <span :lang="locale">{{
             $t('trans.formSettings.formSubmissionsSchedule')
           }}</span>
           <v-tooltip location="bottom" close-delay="2500">
@@ -174,13 +178,13 @@ defineExpose({
                 icon="mdi:mdi-flask"
               ></v-icon>
             </template>
-            <span :lang="lang"
+            <span :lang="locale"
               >{{ $t('trans.formSettings.experimental') }}
               <a
                 :href="githubLinkScheduleAndReminderFeature"
                 class="preview_info_link_field_white"
                 :target="'_blank'"
-                :hreflang="lang"
+                :lang="locale"
               >
                 {{ $t('trans.formSettings.learnMore') }}
                 <v-icon
@@ -203,7 +207,7 @@ defineExpose({
         <div :class="{ 'mr-2': isRTL }">
           <span
             style="max-width: 80%"
-            :lang="lang"
+            :lang="locale"
             v-html="$t('trans.formSettings.submitterCanCopyExistingSubmissn')"
           />
           <v-tooltip location="bottom" close-delay="2500">
@@ -216,13 +220,13 @@ defineExpose({
                 icon="mdi:mdi-flask"
               ></v-icon>
             </template>
-            <span :lang="lang"
+            <span :lang="locale"
               >{{ $t('trans.formSettings.experimental') }}
               <a
                 :href="githubLinkCopyFromExistingFeature"
                 class="preview_info_link_field_white"
                 :target="'_blank'"
-                :hreflang="lang"
+                :lang="locale"
               >
                 {{ $t('trans.formSettings.learnMore') }}
                 <v-icon
@@ -244,7 +248,7 @@ defineExpose({
         <div :class="{ 'mr-2': isRTL }">
           <span
             style="max-width: 80%"
-            :lang="lang"
+            :lang="locale"
             v-html="$t('trans.formSettings.allowEventSubscription')"
           />
           <v-tooltip location="bottom" close-delay="2500">
@@ -257,13 +261,13 @@ defineExpose({
                 icon="mdi:mdi-flask"
               ></v-icon>
             </template>
-            <span :lang="lang"
+            <span :lang="locale"
               >{{ $t('trans.formSettings.experimental') }}
               <a
                 :href="githubLinkEventSubscriptionFeature"
                 class="preview_info_link_field_white"
                 :target="'_blank'"
-                :hreflang="lang"
+                :lang="locale"
               >
                 {{ $t('trans.formSettings.learnMore') }}
                 <v-icon
@@ -284,7 +288,7 @@ defineExpose({
         <div :class="{ 'mr-2': isRTL }">
           <span
             style="max-width: 80%"
-            :lang="lang"
+            :lang="locale"
             v-html="$t('trans.formSettings.wideFormLayout')"
           />
           <v-tooltip location="bottom" close-delay="2500">
@@ -297,13 +301,13 @@ defineExpose({
                 icon="mdi:mdi-flask"
               ></v-icon>
             </template>
-            <span :lang="lang"
+            <span :lang="locale"
               >{{ $t('trans.formSettings.experimental') }}
               <a
                 :href="githubLinkWideFormLayout"
                 class="preview_info_link_field_white"
                 :target="'_blank'"
-                :hreflang="lang"
+                :lang="locale"
               >
                 {{ $t('trans.formSettings.learnMore') }}
                 <v-icon
diff --git a/app/frontend/src/components/designer/settings/FormGeneralSettings.vue b/app/frontend/src/components/designer/settings/FormGeneralSettings.vue
index 48af0a9af..83c01c813 100644
--- a/app/frontend/src/components/designer/settings/FormGeneralSettings.vue
+++ b/app/frontend/src/components/designer/settings/FormGeneralSettings.vue
@@ -2,9 +2,10 @@
 import { storeToRefs } from 'pinia';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import { useFormStore } from '~/store/form';
 
-const { t } = useI18n({ useScope: 'global' });
+const { t, locale } = useI18n({ useScope: 'global' });
 
 /* c8 ignore start */
 const nameRules = ref([
@@ -21,13 +22,13 @@ const descriptionRules = ref([
 ]);
 /* c8 ignore stop */
 
-const { form, lang } = storeToRefs(useFormStore());
+const { form } = storeToRefs(useFormStore());
 </script>
 
 <template>
   <BasePanel class="fill-height">
     <template #title
-      ><span :lang="lang">{{
+      ><span :lang="locale">{{
         $t('trans.formSettings.formTitle')
       }}</span></template
     >
@@ -39,7 +40,7 @@ const { form, lang } = storeToRefs(useFormStore());
       :label="$t('trans.formSettings.formTitle')"
       data-test="text-name"
       :rules="nameRules"
-      :lang="lang"
+      :lang="locale"
     />
 
     <v-text-field
@@ -50,7 +51,7 @@ const { form, lang } = storeToRefs(useFormStore());
       :label="$t('trans.formSettings.formDescription')"
       data-test="text-description"
       :rules="descriptionRules"
-      :lang="lang"
+      :lang="locale"
     />
   </BasePanel>
 </template>
diff --git a/app/frontend/src/components/designer/settings/FormScheduleSettings.vue b/app/frontend/src/components/designer/settings/FormScheduleSettings.vue
index 8e6f09f34..fdd26f825 100644
--- a/app/frontend/src/components/designer/settings/FormScheduleSettings.vue
+++ b/app/frontend/src/components/designer/settings/FormScheduleSettings.vue
@@ -1,10 +1,9 @@
 <script setup>
 import moment from 'moment';
 import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import { i18n } from '~/internationalization';
 import { useFormStore } from '~/store/form';
 import { ScheduleType } from '~/utils/constants';
 import {
@@ -12,74 +11,72 @@ import {
   isDateValidForMailNotification,
 } from '~/utils/transformUtils';
 
+const { t, locale } = useI18n({ useScope: 'global' });
+
 const enableReminderDraw = ref(true);
 const githubLinkScheduleAndReminderFeature = ref(
   'https://github.com/bcgov/common-hosted-form-service/wiki/Schedule-and-Reminder-notification'
 );
 /* c8 ignore start */
-const intervalType = ref([
-  (v) => !!v || i18n.t('trans.formSettings.fieldRequired'),
-]);
+const intervalType = ref([(v) => !!v || t('trans.formSettings.fieldRequired')]);
 const scheduleOpenDate = ref([
-  (v) => !!v || i18n.t('trans.formSettings.fieldRequired'),
+  (v) => !!v || t('trans.formSettings.fieldRequired'),
   (v) =>
     (v &&
       new RegExp(
         /^(19|20)\d\d[- /.](0[1-9]|1[012])[-](0[1-9]|[12][0-9]|3[01])/g
       ).test(v)) ||
-    i18n.t('trans.formSettings.correctDateFormat'),
+    t('trans.formSettings.correctDateFormat'),
 ]);
 const scheduleCloseDate = ref([
-  (v) => !!v || i18n.t('trans.formSettings.fieldRequired'),
+  (v) => !!v || t('trans.formSettings.fieldRequired'),
   (v) =>
     (v &&
       new RegExp(
         /^(19|20)\d\d[- /.](0[1-9]|1[012])[-](0[1-9]|[12][0-9]|3[01])/g
       ).test(v)) ||
-    i18n.t('trans.formSettings.correctDateFormat'),
+    t('trans.formSettings.correctDateFormat'),
   (v) =>
     moment(v).isAfter(form.value.schedule.openSubmissionDateTime, 'day') ||
-    i18n.t('trans.formSettings.dateDiffMsg'),
+    t('trans.formSettings.dateDiffMsg'),
 ]);
 const roundNumber = ref([
-  (v) => !!v || i18n.t('trans.formSettings.fieldRequired'),
+  (v) => !!v || t('trans.formSettings.fieldRequired'),
   (v) =>
     (v && new RegExp(/^[1-9]\d{0,5}(?:\.\d{1,2})?$/g).test(v)) ||
-    i18n.t('trans.formSettings.valueMustBeNumber'),
+    t('trans.formSettings.valueMustBeNumber'),
 ]);
 const repeatTerm = ref([
-  (v) => !!v || i18n.t('trans.formSettings.fieldRequired'),
+  (v) => !!v || t('trans.formSettings.fieldRequired'),
   (v) =>
     (v && new RegExp(/^[1-9]\d{0,5}(?:\.\d{1,2})?$/g).test(v)) ||
-    i18n.t('trans.formSettings.valueMustBeNumber'),
+    t('trans.formSettings.valueMustBeNumber'),
 ]);
 const scheduleTypedRules = ref([
-  (v) => !!v || i18n.t('trans.formSettings.selectAnOptions'),
+  (v) => !!v || t('trans.formSettings.selectAnOptions'),
 ]);
 const repeatIntervalType = ref([
-  (v) => !!v || i18n.t('trans.formSettings.fieldRequired'),
+  (v) => !!v || t('trans.formSettings.fieldRequired'),
   (v) =>
     AVAILABLE_PERIOD_OPTIONS.value.includes(v) ||
-    i18n.t('trans.formSettings.validInterval'),
-]);
-const closeMessage = ref([
-  (v) => !!v || i18n.t('trans.formSettings.fieldRequired'),
+    t('trans.formSettings.validInterval'),
 ]);
+const closeMessage = ref([(v) => !!v || t('trans.formSettings.fieldRequired')]);
 const repeatUntilDate = ref([
-  (v) => !!v || i18n.t('trans.formSettings.fieldRequired'),
+  (v) => !!v || t('trans.formSettings.fieldRequired'),
   (v) =>
     (v &&
       new RegExp(
         /^(19|20)\d\d[- /.](0[1-9]|1[012])[-](0[1-9]|[12][0-9]|3[01])/g
       ).test(v)) ||
-    i18n.t('trans.formSettings.correctDateFormat'),
+    t('trans.formSettings.correctDateFormat'),
   (v) =>
     moment(v).isAfter(form.value.schedule.openSubmissionDateTime, 'day') ||
-    i18n.t('trans.formSettings.dateGrtOpenSubmissnDate'),
+    t('trans.formSettings.dateGrtOpenSubmissnDate'),
 ]);
 /* c8 ignore stop */
 
-const { form, isRTL, lang } = storeToRefs(useFormStore());
+const { form, isRTL } = storeToRefs(useFormStore());
 
 const AVAILABLE_DATES = computed(() => {
   return getSubmissionPeriodDates(
@@ -246,7 +243,7 @@ defineExpose({
 <template>
   <BasePanel class="fill-height">
     <template #title
-      ><span :lang="lang">
+      ><span :lang="locale">
         {{ $t('trans.formSettings.formScheduleSettings') }}</span
       ></template
     >
@@ -260,7 +257,7 @@ defineExpose({
           density="compact"
           variant="outlined"
           :rules="scheduleOpenDate"
-          :lang="lang"
+          :lang="locale"
           @change="openDateTypeChanged"
         >
           <template v-if="isRTL" #prepend-inner>
@@ -273,7 +270,7 @@ defineExpose({
       </v-col>
 
       <v-col cols="12" md="12" class="p-0">
-        <p class="font-weight-black" :lang="lang">
+        <p class="font-weight-black" :lang="locale">
           {{ $t('trans.formSettings.submissionsDeadline') }}
         </p>
         <v-expand-transition>
@@ -290,7 +287,7 @@ defineExpose({
                 :value="SCHEDULE_TYPE.MANUAL"
               >
                 <template #label>
-                  <span :class="{ 'mr-2': isRTL }" :lang="lang"
+                  <span :class="{ 'mr-2': isRTL }" :lang="locale"
                     >{{ $t('trans.formSettings.keepSubmissnOpenTilUnplished') }}
                   </span>
                 </template>
@@ -301,7 +298,7 @@ defineExpose({
                 :value="SCHEDULE_TYPE.CLOSINGDATE"
               >
                 <template #label>
-                  <span :class="{ 'mr-2': isRTL }" :lang="lang"
+                  <span :class="{ 'mr-2': isRTL }" :lang="locale"
                     >{{ $t('trans.formSettings.submissionsClosingDate') }}
                   </span>
                 </template>
@@ -312,7 +309,7 @@ defineExpose({
                 :value="SCHEDULE_TYPE.PERIOD"
               >
                 <template #label>
-                  <span :class="{ 'mr-2': isRTL }" :lang="lang"
+                  <span :class="{ 'mr-2': isRTL }" :lang="locale"
                     >{{ $t('trans.formSettings.submissionPeriod') }}
                   </span>
                 </template>
@@ -362,7 +359,7 @@ defineExpose({
           variant="outlined"
           class="m-0 p-0"
           :class="{ 'dir-rtl': isRTL }"
-          :lang="lang"
+          :lang="locale"
           :rules="roundNumber"
         ></v-text-field>
       </v-col>
@@ -382,7 +379,7 @@ defineExpose({
           variant="outlined"
           class="mr-2 pl-2"
           :rules="intervalType"
-          :lang="lang"
+          :lang="locale"
         ></v-select>
       </v-col>
     </v-row>
@@ -398,7 +395,7 @@ defineExpose({
     >
       <template #label>
         <div :class="{ 'mr-2': isRTL }">
-          <span :lang="lang">
+          <span :lang="locale">
             {{ $t('trans.formSettings.allowLateSubmissions') }}
           </span>
           <v-tooltip location="bottom">
@@ -412,7 +409,7 @@ defineExpose({
               >
               </v-icon>
             </template>
-            <span :lang="lang">
+            <span :lang="locale">
               {{ $t('trans.formSettings.allowLateSubmissionsInfoTip') }}
             </span>
           </v-tooltip>
@@ -441,7 +438,7 @@ defineExpose({
             variant="outlined"
             class="m-0 p-0"
             :class="{ 'dir-rtl': isRTL }"
-            :lang="lang"
+            :lang="locale"
             :rules="roundNumber"
           >
           </v-text-field>
@@ -456,7 +453,7 @@ defineExpose({
             variant="outlined"
             class="mr-1 pl-2"
             :rules="intervalType"
-            :lang="lang"
+            :lang="locale"
           ></v-select>
         </v-col>
       </v-row>
@@ -469,7 +466,7 @@ defineExpose({
       @update:modelValue="repeatSubmissionChanged"
     >
       <template #label>
-        <span :class="{ 'mr-2': isRTL }" :lang="lang">
+        <span :class="{ 'mr-2': isRTL }" :lang="locale">
           {{ $t('trans.formSettings.repeatPeriod') }}
         </span>
       </template>
@@ -492,7 +489,7 @@ defineExpose({
             variant="outlined"
             class="m-0 p-0"
             :class="{ 'dir-rtl': isRTL, label: isRTL }"
-            :lang="lang"
+            :lang="locale"
             :rules="repeatTerm"
           ></v-text-field>
         </v-col>
@@ -507,7 +504,7 @@ defineExpose({
             variant="outlined"
             class="mr-2 pl-2"
             :rules="repeatIntervalType"
-            :lang="lang"
+            :lang="locale"
           ></v-select>
         </v-col>
 
@@ -522,7 +519,7 @@ defineExpose({
             variant="outlined"
             :rules="repeatUntilDate"
             :class="{ 'dir-rtl': isRTL, label: isRTL }"
-            :lang="lang"
+            :lang="locale"
           ></v-text-field>
         </v-col>
       </v-row>
@@ -544,7 +541,7 @@ defineExpose({
       class="p-0 m-0"
     >
       <v-col class="p-0 m-0" cols="12" md="12">
-        <p class="font-weight-black m-0" :lang="lang">
+        <p class="font-weight-black m-0" :lang="locale">
           {{ $t('trans.formSettings.summary') }}
         </p>
       </v-col>
@@ -558,7 +555,7 @@ defineExpose({
         cols="12"
         md="12"
       >
-        <span :lang="lang">
+        <span :lang="locale">
           {{ $t('trans.formSettings.submissionsOpenDateRange') }}
           <b>{{ form.schedule.openSubmissionDateTime }}</b>
           {{ $t('trans.formSettings.to') }}
@@ -580,7 +577,7 @@ defineExpose({
           </b>
         </span>
 
-        <span :lang="lang">{{
+        <span :lang="locale">{{
           form.schedule.allowLateSubmissions.enabled &&
           form.schedule.allowLateSubmissions.forNext.intervalType &&
           form.schedule.allowLateSubmissions.forNext.term
@@ -601,7 +598,7 @@ defineExpose({
             form.schedule.repeatSubmission.everyIntervalType &&
             AVAILABLE_DATES[1]
           "
-          :lang="lang"
+          :lang="locale"
           >{{ $t('trans.formSettings.scheduleRepetition') }}
           <b>{{ form.schedule.repeatSubmission.everyTerm }} </b>
           <b>{{ form.schedule.repeatSubmission.everyIntervalType }}</b>
@@ -618,18 +615,18 @@ defineExpose({
                 icon="mdi:mdi-help-circle-outline"
               ></v-icon>
             </template>
-            <span :lang="lang">
+            <span :lang="locale">
               <!-- MORE FUTURE OCCURENCES -->
               {{ $t('trans.formSettings.datesOfSubmissnInfo') }}
               <ul>
                 <li
                   v-for="date in AVAILABLE_DATES"
                   :key="date.startDate + Math.random()"
-                  :lang="lang"
+                  :lang="locale"
                 >
                   {{ $t('trans.formSettings.formOpenInterval') }}
                   {{ date.startDate.split(' ')[0] }}
-                  <span v-if="form.schedule.enabled" :lang="lang">
+                  <span v-if="form.schedule.enabled" :lang="locale">
                     {{ $t('trans.formSettings.to') }}
                     {{ date.closeDate.split(' ')[0] }}
                     <span
@@ -637,7 +634,7 @@ defineExpose({
                         form.schedule.allowLateSubmissions.enabled &&
                         date.closeDate !== date.graceDate
                       "
-                      :lang="lang"
+                      :lang="locale"
                       >{{ $t('trans.formSettings.allowDateSubmissionDate') }}
                       {{ date.graceDate.split(' ')[0] }}</span
                     ></span
@@ -677,7 +674,7 @@ defineExpose({
         >
           <template #label>
             <div>
-              <span :class="{ 'mr-2': isRTL }" :lang="lang">
+              <span :class="{ 'mr-2': isRTL }" :lang="locale">
                 {{ $t('trans.formSettings.customClosingMessage') }}
               </span>
               <v-tooltip location="bottom">
@@ -690,7 +687,7 @@ defineExpose({
                     icon="mdi:mdi-help-circle-outline"
                   ></v-icon>
                 </template>
-                <span :lang="lang">
+                <span :lang="locale">
                   {{ $t('trans.formSettings.customClosingMessageToolTip') }}
                 </span>
               </v-tooltip>
@@ -704,7 +701,7 @@ defineExpose({
           <v-row class="mb-0 mt-0">
             <v-col class="mb-0 mt-0 pb-0 pt-0">
               <template #title
-                ><span :lang="lang">
+                ><span :lang="locale">
                   {{ $t('trans.formSettings.closingMessage') }}</span
                 ></template
               >
@@ -718,7 +715,7 @@ defineExpose({
                 data-test="text-name"
                 :rules="closeMessage"
                 :class="{ 'dir-rtl': isRTL, label: isRTL }"
-                :lang="lang"
+                :lang="locale"
               />
             </v-col>
           </v-row>
@@ -739,14 +736,14 @@ defineExpose({
           <v-row class="mb-0 mt-0">
             <v-col class="mb-0 mt-0 pb-0 pt-0">
               <template #title
-                ><span :lang="lang">{{
+                ><span :lang="locale">{{
                   $t('trans.formSettings.sendReminderEmail')
                 }}</span></template
               >
               <v-checkbox v-model="form.reminder_enabled" class="my-0 m-0 p-0">
                 <template #label>
                   <div :class="{ 'mr-2': isRTL }">
-                    <span :lang="lang">
+                    <span :lang="locale">
                       {{ $t('trans.formSettings.sendReminderEmail') }}
                     </span>
                     <v-tooltip close-delay="2500" location="bottom">
@@ -759,7 +756,7 @@ defineExpose({
                           :class="{ 'mr-2': isRTL }"
                         ></v-icon>
                       </template>
-                      <span :lang="lang">
+                      <span :lang="locale">
                         {{
                           $t('trans.formSettings.autoReminderNotificatnToolTip')
                         }}
@@ -767,7 +764,7 @@ defineExpose({
                           :href="githubLinkScheduleAndReminderFeature"
                           class="preview_info_link_field_white"
                           :target="'_blank'"
-                          :hreflang="lang"
+                          :lang="locale"
                         >
                           {{ $t('trans.formSettings.learnMore') }}
                           <v-icon
diff --git a/app/frontend/src/components/designer/settings/FormSubmissionSettings.vue b/app/frontend/src/components/designer/settings/FormSubmissionSettings.vue
index 5a4bc077b..e15d72da2 100644
--- a/app/frontend/src/components/designer/settings/FormSubmissionSettings.vue
+++ b/app/frontend/src/components/designer/settings/FormSubmissionSettings.vue
@@ -1,23 +1,25 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import { i18n } from '~/internationalization';
 import { useFormStore } from '~/store/form';
 import { Regex } from '~/utils/constants';
 
-const { form, isRTL, lang } = storeToRefs(useFormStore());
+const { t, locale } = useI18n({ useScope: 'global' });
+
+const { form, isRTL } = storeToRefs(useFormStore());
 
 /* c8 ignore start */
 const emailArrayRules = ref([
   (v) =>
     !form.value.sendSubmissionReceivedEmail ||
     v.length > 0 ||
-    i18n.t('trans.formSettings.atLeastOneEmailReq'),
+    t('trans.formSettings.atLeastOneEmailReq'),
   (v) =>
     !form.value.sendSubmissionReceivedEmail ||
     v.every((item) => new RegExp(Regex.EMAIL).test(item)) ||
-    i18n.t('trans.formSettings.validEmailRequired'),
+    t('trans.formSettings.validEmailRequired'),
 ]);
 /* c8 ignore stop */
 </script>
@@ -25,7 +27,7 @@ const emailArrayRules = ref([
 <template>
   <BasePanel class="fill-height">
     <template #title
-      ><span :lang="lang">
+      ><span :lang="locale">
         {{ $t('trans.formSettings.afterSubmission') }}
       </span></template
     >
@@ -38,7 +40,7 @@ const emailArrayRules = ref([
     >
       <template #label>
         <div :class="{ 'mr-2': isRTL }">
-          <span :lang="lang">
+          <span :lang="locale">
             {{ $t('trans.formSettings.submissionConfirmation') }}</span
           >
           <v-tooltip location="bottom">
@@ -53,14 +55,14 @@ const emailArrayRules = ref([
             </template>
             <span>
               <span
-                :lang="lang"
+                :lang="locale"
                 v-html="$t('trans.formSettings.submissionConfirmationToolTip')"
               />
               <ul>
-                <li :lang="lang">
+                <li :lang="locale">
                   {{ $t('trans.formSettings.theConfirmationID') }}
                 </li>
-                <li :lang="lang">
+                <li :lang="locale">
                   {{ $t('trans.formSettings.infoB') }}
                 </li>
               </ul>
@@ -78,7 +80,7 @@ const emailArrayRules = ref([
     >
       <template #label>
         <div :class="{ 'mr-2': isRTL }">
-          <span :lang="lang">
+          <span :lang="locale">
             {{ $t('trans.formSettings.emailNotificatnToTeam') }}</span
           >
           <v-tooltip location="bottom">
@@ -91,7 +93,7 @@ const emailArrayRules = ref([
                 icon="mdi:mdi-help-circle-outline"
               />
             </template>
-            <span :lang="lang">
+            <span :lang="locale">
               {{ $t('trans.formSettings.emailNotificatnToTeamToolTip') }}
             </span>
           </v-tooltip>
@@ -115,13 +117,13 @@ const emailArrayRules = ref([
       closable-chips
       :delimiters="[' ', ',']"
       append-icon=""
-      :lang="lang"
+      :lang="locale"
     >
       <template #no-data>
         <v-list-item>
           <v-list-item-title>
             <span
-              :lang="lang"
+              :lang="locale"
               v-html="$t('trans.formSettings.pressToAddMultiEmail')"
             />
           </v-list-item-title>
diff --git a/app/frontend/src/components/forms/ExportSubmissions.vue b/app/frontend/src/components/forms/ExportSubmissions.vue
index 01f565f8e..870a25cb8 100644
--- a/app/frontend/src/components/forms/ExportSubmissions.vue
+++ b/app/frontend/src/components/forms/ExportSubmissions.vue
@@ -1,8 +1,8 @@
 <script>
 import moment from 'moment';
 import { mapActions, mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
-import { i18n } from '~/internationalization';
 import formService from '~/services/formService.js';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
@@ -16,6 +16,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       csvFormats: 'multiRowEmptySpacesCSVExport',
@@ -64,7 +69,6 @@ export default {
       'form',
       'formFields',
       'isRTL',
-      'lang',
       'permissions',
       'submissionList',
       'userFormPreferences',
@@ -82,7 +86,7 @@ export default {
     headers() {
       return [
         {
-          title: i18n.t('trans.exportSubmissions.selectAllFields'),
+          title: this.$t('trans.exportSubmissions.selectAllFields'),
           align: this.isRTL ? 'end' : ' start',
           sortable: true,
           key: 'name',
@@ -172,8 +176,8 @@ export default {
           emailExport = true;
           this.addNotification({
             ...NotificationTypes.SUCCESS,
-            title: i18n.t('trans.exportSubmissions.exportInProgress'),
-            text: i18n.t('trans.exportSubmissions.emailSentMsg', {
+            title: this.$t('trans.exportSubmissions.exportInProgress'),
+            text: this.$t('trans.exportSubmissions.emailSentMsg', {
               email: this.email,
             }),
             timeout: 20,
@@ -213,7 +217,7 @@ export default {
           a.click();
           document.body.removeChild(a);
         } else if (response && !response.data && !emailExport) {
-          throw new Error(i18n.t('trans.exportSubmissions.noResponseDataErr'));
+          throw new Error(this.$t('trans.exportSubmissions.noResponseDataErr'));
         }
       } catch (error) {
         const data = error?.response?.data
@@ -222,9 +226,9 @@ export default {
         this.addNotification({
           text: data?.detail
             ? data.detail
-            : i18n.t('trans.exportSubmissions.apiCallErrorMsg'),
+            : this.$t('trans.exportSubmissions.apiCallErrorMsg'),
           consoleError:
-            i18n.t('trans.exportSubmissions.apiCallConsErrorMsg') +
+            this.$t('trans.exportSubmissions.apiCallConsErrorMsg') +
             `${this.form.id}: ${error}`,
         });
       }
@@ -262,7 +266,7 @@ export default {
       <v-col>
         <v-row>
           <v-col cols="11">
-            <h1 :lang="lang">
+            <h1 :lang="locale">
               {{ $t('trans.exportSubmissions.exportSubmissionsToFile') }}
             </h1>
             <h3>{{ formId ? form.name : '' }}</h3>
@@ -285,7 +289,7 @@ export default {
                     </v-btn>
                   </router-link>
                 </template>
-                <span :lang="lang">{{
+                <span :lang="locale">{{
                   $t('trans.exportSubmissions.viewSubmissions')
                 }}</span>
               </v-tooltip>
@@ -294,7 +298,7 @@ export default {
         </v-row>
         <v-row>
           <v-col>
-            <span class="subTitleObjectStyle" :lang="lang">
+            <span class="subTitleObjectStyle" :lang="locale">
               {{ $t('trans.exportSubmissions.fileType') }}
             </span>
             <v-radio-group v-model="exportFormat" hide-details="auto">
@@ -303,7 +307,7 @@ export default {
                   <span
                     :class="{ 'mr-1': isRTL }"
                     class="radioboxLabelStyle"
-                    :lang="lang"
+                    :lang="locale"
                     >{{ $t('trans.exportSubmissions.json') }}</span
                   >
                 </template>
@@ -313,7 +317,7 @@ export default {
                   <span
                     :class="{ 'mr-1': isRTL }"
                     class="radioboxLabelStyle"
-                    :lang="lang"
+                    :lang="locale"
                     >{{ $t('trans.exportSubmissions.csv') }}</span
                   >
                 </template>
@@ -323,10 +327,10 @@ export default {
         </v-row>
         <v-row v-if="exportFormat === 'csv'" class="mt-5">
           <v-col>
-            <div class="subTitleObjectStyle" :lang="lang">
+            <div class="subTitleObjectStyle" :lang="locale">
               {{ $t('trans.exportSubmissions.formVersion') }}
             </div>
-            <div v-if="VERSION_REQUIRED" class="text-red mt-3" :lang="lang">
+            <div v-if="VERSION_REQUIRED" class="text-red mt-3" :lang="locale">
               {{ $t('trans.exportSubmissions.versionIsRequired') }}
             </div>
             <v-select
@@ -342,7 +346,7 @@ export default {
         </v-row>
         <v-row v-if="exportFormat === 'csv' && !FORM_UNPUBLISHED" class="mt-0">
           <v-col>
-            <p class="subTitleObjectStyle" :lang="lang">
+            <p class="subTitleObjectStyle" :lang="locale">
               {{ $t('trans.exportSubmissions.dataFields') }}
             </p>
             <v-row v-if="exportFormat === 'csv'">
@@ -353,7 +357,7 @@ export default {
                       <span
                         v-if="formFields.length === 0"
                         :class="{ 'mr-1': isRTL }"
-                        :lang="lang"
+                        :lang="locale"
                       >
                         This form version has no submissions to export.
                       </span>
@@ -371,12 +375,12 @@ export default {
                           class="mt-3 submissions-table"
                           single-line
                           :class="{ 'dir-rtl': isRTL, label: isRTL }"
-                          :lang="lang"
+                          :lang="locale"
                         />
                         <span
                           class="subTitleObjectStyle"
                           style="font-size: 14px !important"
-                          :lang="lang"
+                          :lang="locale"
                         >
                           {{ selectedFormFields.length }}
                           {{ $t('trans.exportSubmissions.of') }}
@@ -412,7 +416,7 @@ export default {
         </v-row>
         <v-row class="mt-4">
           <v-col>
-            <span class="subTitleObjectStyle" :lang="lang">
+            <span class="subTitleObjectStyle" :lang="locale">
               {{ $t('trans.exportSubmissions.submissionDate') }}
             </span>
             <v-radio-group v-model="dateRange" hide-details="auto">
@@ -421,7 +425,7 @@ export default {
                   <span
                     :class="{ 'mr-1': isRTL }"
                     class="radioboxLabelStyle"
-                    :lang="lang"
+                    :lang="locale"
                     >{{ $t('trans.exportSubmissions.all') }}</span
                   >
                 </template>
@@ -431,7 +435,7 @@ export default {
                   <span
                     :class="{ 'mr-1': isRTL }"
                     class="radioboxLabelStyle"
-                    :lang="lang"
+                    :lang="locale"
                     >{{ $t('trans.exportSubmissions.SelectdateRange') }}</span
                   >
                 </template>
@@ -453,10 +457,10 @@ export default {
                     variant="outlined"
                     :rules="startDateRules"
                     :class="{ 'dir-rtl': isRTL }"
-                    :lang="lang"
+                    :lang="locale"
                   >
                     <template #label>
-                      <span :lang="lang">{{
+                      <span :lang="locale">{{
                         $t('trans.exportSubmissions.from')
                       }}</span>
                     </template>
@@ -472,10 +476,10 @@ export default {
                     variant="outlined"
                     :rules="endDateRules"
                     :class="{ 'dir-rtl': isRTL }"
-                    :lang="lang"
+                    :lang="locale"
                   >
                     <template #label>
-                      <span :lang="lang">{{
+                      <span :lang="locale">{{
                         $t('trans.exportSubmissions.to')
                       }}</span>
                     </template>
@@ -495,7 +499,7 @@ export default {
           class="mt-0 pt-0"
         >
           <v-col>
-            <span class="subTitleObjectStyle mr-1" :lang="lang">
+            <span class="subTitleObjectStyle mr-1" :lang="locale">
               {{ $t('trans.exportSubmissions.CSVFormat') }}
             </span>
 
@@ -510,7 +514,7 @@ export default {
                     :class="{ 'mr-1': isRTL }"
                     class="radioboxLabelStyle"
                     style="display: flex; align-content: flex-start"
-                    :lang="lang"
+                    :lang="locale"
                   >
                     {{ $t('trans.exportSubmissions.multiRowPerSubmissionA') }}
                   </span>
@@ -525,7 +529,7 @@ export default {
                   <span
                     :class="{ 'mr-1': isRTL }"
                     class="radioboxLabelStyle"
-                    :lang="lang"
+                    :lang="locale"
                   >
                     {{ $t('trans.exportSubmissions.multiRowPerSubmissionB') }}
                   </span>
@@ -540,7 +544,7 @@ export default {
                   <span
                     :class="{ 'mr-1': isRTL }"
                     class="radioboxLabelStyle"
-                    :lang="lang"
+                    :lang="locale"
                     >{{ $t('trans.exportSubmissions.singleRowPerSubmission') }}
                   </span>
                 </template>
@@ -551,7 +555,7 @@ export default {
                     :class="{ 'mr-1': isRTL }"
                     class="radioboxLabelStyle"
                     style="display: flex; align-content: flex-start"
-                    :lang="lang"
+                    :lang="locale"
                   >
                     {{ $t('trans.exportSubmissions.unformatted') }}
                   </span>
@@ -566,7 +570,7 @@ export default {
             <span
               :class="{ 'mr-1': isRTL }"
               class="mt-7 fileLabelStyle"
-              :lang="lang"
+              :lang="locale"
             >
               <strong
                 >{{ $t('trans.exportSubmissions.fileNameAndType') }}:</strong
@@ -594,7 +598,7 @@ export default {
           :title="$t('trans.exportSubmissions.export')"
           @click="callExport"
         >
-          <span :lang="lang">{{ $t('trans.exportSubmissions.export') }}</span>
+          <span :lang="locale">{{ $t('trans.exportSubmissions.export') }}</span>
         </v-btn>
       </v-col>
     </v-row>
diff --git a/app/frontend/src/components/forms/FormSubmission.vue b/app/frontend/src/components/forms/FormSubmission.vue
index bd48f2c88..082239620 100644
--- a/app/frontend/src/components/forms/FormSubmission.vue
+++ b/app/frontend/src/components/forms/FormSubmission.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapActions, mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 import AuditHistory from '~/components/forms/submission/AuditHistory.vue';
 import DeleteSubmission from '~/components/forms/submission/DeleteSubmission.vue';
@@ -28,6 +29,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   data() {
     return {
       isDraft: true,
@@ -43,7 +49,6 @@ export default {
       'formSubmission',
       'permissions',
       'isRTL',
-      'lang',
     ]),
     NOTIFICATIONS_TYPES() {
       return NotificationTypes;
@@ -105,7 +110,7 @@ export default {
         <!-- page title -->
         <div>
           <h1>{{ form.name }}</h1>
-          <p :lang="lang">
+          <p :lang="locale">
             <strong>{{ $t('trans.formSubmission.submitted') }}</strong>
             {{ $filters.formatDateLong(formSubmission.createdAt) }}
             <br />
@@ -165,7 +170,7 @@ export default {
                   />
                 </router-link>
               </template>
-              <span :lang="lang"
+              <span :lang="locale"
                 >{{ $t('trans.formSubmission.viewAllSubmissions') }}
               </span>
             </v-tooltip>
@@ -216,7 +221,7 @@ export default {
               { 'dir-rtl': isRTL },
             ]"
             :icon="NOTIFICATIONS_TYPES.INFO.icon"
-            :lang="lang"
+            :lang="locale"
             >{{ $t('trans.formSubmission.alertInfo') }}</v-alert
           >
         </transition>
@@ -224,7 +229,7 @@ export default {
           <div :class="{ 'dir-rtl': isRTL }">
             <v-row no-gutters>
               <v-col cols="10">
-                <h2 class="review-heading" :lang="lang">
+                <h2 class="review-heading" :lang="locale">
                   {{ $t('trans.formSubmission.submission') }}
                 </h2>
               </v-col>
@@ -254,7 +259,7 @@ export default {
                         @click="toggleSubmissionEdit(true)"
                       />
                     </template>
-                    <span :lang="lang">{{
+                    <span :lang="locale">{{
                       $t('trans.formSubmission.editThisSubmission')
                     }}</span>
                   </v-tooltip>
@@ -266,7 +271,7 @@ export default {
                   :title="$t('trans.formSubmission.cancel')"
                   @click="toggleSubmissionEdit(false)"
                 >
-                  <span :lang="lang">{{
+                  <span :lang="locale">{{
                     $t('trans.formSubmission.cancel')
                   }}</span>
                 </v-btn>
diff --git a/app/frontend/src/components/forms/PrintOptions.vue b/app/frontend/src/components/forms/PrintOptions.vue
index d35c9a741..1c01bc333 100644
--- a/app/frontend/src/components/forms/PrintOptions.vue
+++ b/app/frontend/src/components/forms/PrintOptions.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapState, mapActions } from 'pinia';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
+
 import { formService, utilsService } from '~/services';
 import { NotificationTypes } from '~/utils/constants';
 
@@ -22,6 +23,11 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       dialog: false,
@@ -48,7 +54,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang', 'form', 'getInitialForm']),
+    ...mapState(useFormStore, ['isRTL', 'form', 'getInitialForm']),
     files() {
       return this.templateForm.files;
     },
@@ -57,7 +63,8 @@ export default {
     },
     validationRules() {
       return [
-        this.isValidFile || i18n.t('trans.documentTemplate.invalidFileMessage'),
+        this.isValidFile ||
+          this.$t('trans.documentTemplate.invalidFileMessage'),
       ];
     },
   },
@@ -228,13 +235,13 @@ export default {
         // Generate Temporary Download Link
         this.createDownload(blob, filename);
         this.addNotification({
-          text: i18n.t('trans.printOptions.docGrnSucess'),
+          text: this.$t('trans.printOptions.docGrnSucess'),
           ...NotificationTypes.SUCCESS,
         });
       } catch (e) {
         this.addNotification({
-          text: i18n.t('trans.printOptions.failedDocGenErrMsg'),
-          consoleError: i18n.t('trans.printOptions.failedDocGenErrMsg', {
+          text: this.$t('trans.printOptions.failedDocGenErrMsg'),
+          consoleError: this.$t('trans.printOptions.failedDocGenErrMsg', {
             error: e.message,
           }),
         });
@@ -286,8 +293,8 @@ export default {
         }
       } catch (e) {
         this.addNotification({
-          text: i18n.t('trans.documentTemplate.fetchError'),
-          consoleError: i18n.t('trans.documentTemplate.fetchError', {
+          text: this.$t('trans.documentTemplate.fetchError'),
+          consoleError: this.$t('trans.documentTemplate.fetchError', {
             error: e.message,
           }),
         });
@@ -326,7 +333,7 @@ export default {
           @click="dialog = true"
         />
       </template>
-      <span :lang="lang">{{ $t('trans.printOptions.print') }}</span>
+      <span :lang="locale">{{ $t('trans.printOptions.print') }}</span>
     </v-tooltip>
 
     <v-dialog
@@ -335,7 +342,7 @@ export default {
       content-class="export-submissions-dlg"
     >
       <v-card :class="{ 'dir-rtl': isRTL }">
-        <v-card-title class="text-h5 pb-0 mt-2" :lang="lang">{{
+        <v-card-title class="text-h5 pb-0 mt-2" :lang="locale">{{
           $t('trans.printOptions.printOptions')
         }}</v-card-title>
         <v-card-text>
@@ -361,7 +368,7 @@ export default {
                   :title="$t('trans.printOptions.browserPrint')"
                   @click="printBrowser"
                 >
-                  <span :lang="lang">{{
+                  <span :lang="locale">{{
                     $t('trans.printOptions.browserPrint')
                   }}</span>
                 </v-btn>
@@ -372,7 +379,7 @@ export default {
                   :title="$t('trans.formSubmission.cancel')"
                   @click="dialog = false"
                 >
-                  <span :lang="lang">{{
+                  <span :lang="locale">{{
                     $t('trans.formSubmission.cancel')
                   }}</span>
                 </v-btn>
@@ -381,7 +388,7 @@ export default {
                   href="https://developer.gov.bc.ca/docs/default/component/chefs-techdocs/Capabilities/Functionalities/Printing-from-a-browser/"
                   target="_blank"
                   class="more-info-link"
-                  :lang="lang"
+                  :lang="locale"
                 >
                   <v-icon size="small" class="mx-1">mdi-help-circle</v-icon>
                   {{ $t('trans.printOptions.moreInfo') }}
@@ -442,7 +449,7 @@ export default {
                   mandatory
                   show-size
                   prepend-icon="false"
-                  :lang="lang"
+                  :lang="locale"
                   :rules="validationRules"
                   :disabled="selectedOption !== 'upload'"
                   @update:model-value="validateFileExtension($event)"
@@ -467,7 +474,7 @@ export default {
                           :start="$vuetify.display.smAndUp"
                           icon="mdi:mdi-content-save"
                         />
-                        <span :lang="lang">{{
+                        <span :lang="locale">{{
                           $t('trans.printOptions.templatePrint')
                         }}</span>
                       </v-btn>
@@ -478,7 +485,7 @@ export default {
                         :title="$t('trans.formSubmission.cancel')"
                         @click="dialog = false"
                       >
-                        <span :lang="lang">{{
+                        <span :lang="locale">{{
                           $t('trans.formSubmission.cancel')
                         }}</span>
                       </v-btn>
@@ -487,7 +494,7 @@ export default {
                         href="https://developer.gov.bc.ca/docs/default/component/chefs-techdocs/Capabilities/Functionalities/CDOGS-Template-Upload/"
                         target="_blank"
                         class="more-info-link"
-                        :lang="lang"
+                        :lang="locale"
                         :title="$t('trans.printOptions.moreInfo')"
                       >
                         <v-icon size="small" class="mx-1"
@@ -497,7 +504,7 @@ export default {
                       </a>
                     </div>
                   </template>
-                  <span :lang="lang">{{
+                  <span :lang="locale">{{
                     $t('trans.printOptions.submitButtonTxt')
                   }}</span>
                 </v-tooltip>
diff --git a/app/frontend/src/components/forms/RequestReceipt.vue b/app/frontend/src/components/forms/RequestReceipt.vue
index 58f9a7542..b8c3a25ea 100644
--- a/app/frontend/src/components/forms/RequestReceipt.vue
+++ b/app/frontend/src/components/forms/RequestReceipt.vue
@@ -1,7 +1,8 @@
 <script>
 import { mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import BaseDialog from '~/components/base/BaseDialog.vue';
-import { i18n } from '~/internationalization';
 import { formService } from '~/services';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
@@ -25,6 +26,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       emailRules: [(v) => !!v || 'E-mail is required'],
@@ -34,7 +40,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
   },
   mounted() {
     this.resetDialog();
@@ -53,13 +59,13 @@ export default {
             to: this.to,
           });
           notificationStore.addNotification({
-            text: i18n.t('trans.requestReceipt.emailSent', { to: this.to }),
+            text: this.$t('trans.requestReceipt.emailSent', { to: this.to }),
             ...NotificationTypes.SUCCESS,
           });
         } catch (error) {
           notificationStore.addNotification({
-            text: i18n.t('trans.requestReceipt.sendingEmailErrMsg'),
-            consoleError: i18n.t(
+            text: this.$t('trans.requestReceipt.sendingEmailErrMsg'),
+            consoleError: this.$t(
               'trans.requestReceipt.sendingEmailConsErrMsg',
               {
                 to: this.to,
@@ -90,7 +96,7 @@ export default {
       @click="displayDialog"
     >
       <v-icon icon="mdi:mdi-email"></v-icon>
-      <span :lang="lang">{{ $t('trans.requestReceipt.emailReceipt') }}</span>
+      <span :lang="locale">{{ $t('trans.requestReceipt.emailReceipt') }}</span>
     </v-btn>
 
     <BaseDialog
@@ -110,7 +116,7 @@ export default {
             :label="$t('trans.requestReceipt.sendToEmailAddress')"
             :rules="emailRules"
             data-test="text-form-to"
-            :lang="lang"
+            :lang="locale"
           >
             <template #prepend>
               <v-icon
@@ -130,7 +136,7 @@ export default {
               { title: $t('trans.requestReceipt.high'), value: 'high' },
             ]"
             :label="$t('trans.requestReceipt.emailPriority')"
-            :lang="lang"
+            :lang="locale"
           >
             <template #prepend>
               <v-icon />
@@ -139,7 +145,7 @@ export default {
         </v-form>
       </template>
       <template #button-text-continue>
-        <span :lang="lang">{{ $t('trans.requestReceipt.send') }}</span>
+        <span :lang="locale">{{ $t('trans.requestReceipt.send') }}</span>
       </template>
     </BaseDialog>
   </div>
diff --git a/app/frontend/src/components/forms/SubmissionsTable.vue b/app/frontend/src/components/forms/SubmissionsTable.vue
index 99f99938b..64ba3e9a8 100644
--- a/app/frontend/src/components/forms/SubmissionsTable.vue
+++ b/app/frontend/src/components/forms/SubmissionsTable.vue
@@ -3,9 +3,10 @@ import _ from 'lodash';
 import moment from 'moment';
 import { mapActions, mapState } from 'pinia';
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import BaseDialog from '~/components/base/BaseDialog.vue';
 import BaseFilter from '~/components/base/BaseFilter.vue';
-import { i18n } from '~/internationalization';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
 import { checkFormManage, checkSubmissionView } from '~/utils/permissionUtils';
@@ -21,6 +22,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       // Show only items for the current logged in user
@@ -70,7 +76,6 @@ export default {
       'form',
       'formFields',
       'isRTL',
-      'lang',
       'permissions',
       'roles',
       'submissionList',
@@ -79,16 +84,16 @@ export default {
     ]),
     ...mapState(useAuthStore, ['user']),
     multiDeleteMessage() {
-      return i18n.t('trans.submissionsTable.multiDelWarning');
+      return this.$t('trans.submissionsTable.multiDelWarning');
     },
     singleDeleteMessage() {
-      return i18n.t('trans.submissionsTable.singleDelWarning');
+      return this.$t('trans.submissionsTable.singleDelWarning');
     },
     multiRestoreMessage() {
-      return i18n.t('trans.submissionsTable.multiRestoreWarning');
+      return this.$t('trans.submissionsTable.multiRestoreWarning');
     },
     singleRestoreMessage() {
-      return i18n.t('trans.submissionsTable.singleRestoreWarning');
+      return this.$t('trans.submissionsTable.singleRestoreWarning');
     },
     showStatus() {
       return this.form && this.form.enableStatusUpdates;
@@ -559,7 +564,7 @@ export default {
     >
       <!-- page title -->
       <div>
-        <h1 :lang="lang">{{ $t('trans.formsTable.submissions') }}</h1>
+        <h1 :lang="locale">{{ $t('trans.formsTable.submissions') }}</h1>
         <h3>{{ formId ? form.name : 'All Forms' }}</h3>
       </div>
       <!-- buttons -->
@@ -578,7 +583,7 @@ export default {
                 @click="onShowColumnDialog"
               />
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.submissionsTable.selectColumns')
             }}</span>
           </v-tooltip>
@@ -597,7 +602,7 @@ export default {
                 />
               </router-link>
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.submissionsTable.manageForm')
             }}</span>
           </v-tooltip>
@@ -617,7 +622,7 @@ export default {
                 />
               </router-link>
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.submissionsTable.submissionsToFiles')
             }}</span>
           </v-tooltip>
@@ -635,7 +640,7 @@ export default {
           @click="refreshSubmissions"
         >
           <template #label>
-            <span :class="{ 'mr-2': isRTL }" :lang="lang">
+            <span :class="{ 'mr-2': isRTL }" :lang="locale">
               {{ $t('trans.submissionsTable.showDeletedSubmissions') }}
             </span>
           </template>
@@ -649,7 +654,7 @@ export default {
           @click="refreshSubmissions"
         >
           <template #label>
-            <span :class="{ 'mr-2': isRTL }" :lang="lang">
+            <span :class="{ 'mr-2': isRTL }" :lang="locale">
               {{ $t('trans.submissionsTable.showMySubmissions') }}
             </span>
           </template>
@@ -668,7 +673,7 @@ export default {
             hide-details
             class="pb-5"
             :class="{ label: isRTL }"
-            :lang="lang"
+            :lang="locale"
             @update:modelValue="handleSearch"
           ></v-text-field>
         </div>
@@ -694,7 +699,7 @@ export default {
           ? $t('trans.submissionsTable.noMatchingRecordText')
           : $t('trans.submissionsTable.noDataText')
       "
-      :lang="lang"
+      :lang="locale"
       return-object
       @update:options="updateTableOptions"
     >
@@ -712,7 +717,7 @@ export default {
               <template #activator="{ props }">
                 <v-icon color="white" dark v-bind="props" />
               </template>
-              <span :lang="lang">{{
+              <span :lang="locale">{{
                 $t('trans.submissionsTable.delSelectedSubmissions')
               }}</span>
             </v-tooltip>
@@ -738,7 +743,7 @@ export default {
                   size="24"
                 />
               </template>
-              <span :lang="lang">{{
+              <span :lang="locale">{{
                 $t('trans.submissionsTable.resSelectedSubmissions')
               }}</span>
             </v-tooltip>
@@ -753,7 +758,7 @@ export default {
         {{ item.status }}
       </template>
       <template #item.lateEntry="{ item }">
-        <span :lang="lang">
+        <span :lang="locale">
           {{
             item.lateEntry === true
               ? $t('trans.submissionsTable.yes')
@@ -783,7 +788,7 @@ export default {
               </v-btn>
             </router-link>
           </template>
-          <span :lang="lang">{{
+          <span :lang="locale">{{
             $t('trans.submissionsTable.viewSubmission')
           }}</span>
         </v-tooltip>
@@ -807,7 +812,7 @@ export default {
                 <v-icon icon="mdi:mdi-minus" color="white"></v-icon>
               </v-btn>
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.submissionsTable.deleteSubmission')
             }}</span>
           </v-tooltip>
@@ -829,7 +834,9 @@ export default {
                 <v-icon color="green" icon="mdi:mdi-delete-restore" size="24" />
               </v-btn>
             </template>
-            <span :lang="lang">{{ $t('trans.submissionsTable.restore') }}</span>
+            <span :lang="locale">{{
+              $t('trans.submissionsTable.restore')
+            }}</span>
           </v-tooltip>
         </span>
       </template>
@@ -848,7 +855,7 @@ export default {
         {{ singleSubmissionDelete ? singleDeleteMessage : multiDeleteMessage }}
       </template>
       <template #button-text-continue>
-        <span :lang="lang">{{ $t('trans.submissionsTable.delete') }}</span>
+        <span :lang="locale">{{ $t('trans.submissionsTable.delete') }}</span>
       </template>
     </BaseDialog>
     <BaseDialog
@@ -858,7 +865,7 @@ export default {
       @continue-dialog="restoreSub"
     >
       <template #title
-        ><span :lang="lang">
+        ><span :lang="locale">
           {{ $t('trans.submissionsTable.confirmRestoration') }}</span
         ></template
       >
@@ -868,7 +875,7 @@ export default {
         }}
       </template>
       <template #button-text-continue>
-        <span :lang="lang">{{ $t('trans.submissionsTable.restore') }}</span>
+        <span :lang="locale">{{ $t('trans.submissionsTable.restore') }}</span>
       </template>
     </BaseDialog>
 
@@ -885,7 +892,7 @@ export default {
         @cancel-filter-data="showColumnsDialog = false"
       >
         <template #filter-title
-          ><span :lang="lang">
+          ><span :lang="locale">
             {{ $t('trans.submissionsTable.searchTitle') }}
           </span></template
         >
diff --git a/app/frontend/src/components/forms/manage/AddTeamMember.vue b/app/frontend/src/components/forms/manage/AddTeamMember.vue
index 66c79de9a..6ac20e37a 100644
--- a/app/frontend/src/components/forms/manage/AddTeamMember.vue
+++ b/app/frontend/src/components/forms/manage/AddTeamMember.vue
@@ -1,16 +1,15 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { onBeforeUnmount } from 'vue';
-import { watch } from 'vue';
-import { computed } from 'vue';
-import { ref } from 'vue';
-import { i18n } from '~/internationalization';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import userService from '~/services/userService';
 import { useFormStore } from '~/store/form';
 import { useIdpStore } from '~/store/identityProviders';
 import { Regex } from '~/utils/constants';
 
+const { t, locale } = useI18n({ useScope: 'global' });
+
 defineProps({
   disabled: {
     type: Boolean,
@@ -33,7 +32,7 @@ const selectedRoles = ref([]);
 const showError = ref(false);
 const entries = ref([]);
 
-const { isRTL, lang } = storeToRefs(useFormStore());
+const { isRTL } = storeToRefs(useFormStore());
 const { loginButtons, primaryIdp } = storeToRefs(idpStore);
 
 const FORM_ROLES = computed(() => {
@@ -43,8 +42,8 @@ const FORM_ROLES = computed(() => {
 
 const autocompleteLabel = computed(() => {
   return idpStore.isPrimary(selectedIdp.value)
-    ? i18n.t('trans.addTeamMember.enterUsername')
-    : i18n.t('trans.addTeamMember.enterExactUsername');
+    ? t('trans.addTeamMember.enterUsername')
+    : t('trans.addTeamMember.enterExactUsername');
 });
 
 watch(selectedIdp, (newIdp, oldIdp) => {
@@ -131,10 +130,10 @@ async function searchUsers(input) {
     let teamMembershipConfig = idpStore.teamMembershipSearch(selectedIdp.value);
     if (teamMembershipConfig) {
       if (input.length < teamMembershipConfig.text.minLength)
-        throw new Error(i18n.t(teamMembershipConfig.text.message));
+        throw new Error(t(teamMembershipConfig.text.message));
       if (input.includes('@')) {
         if (!new RegExp(Regex.EMAIL).test(input))
-          throw new Error(i18n.t(teamMembershipConfig.email.message));
+          throw new Error(t(teamMembershipConfig.email.message));
         else params.email = input;
       } else {
         params.username = input;
@@ -148,7 +147,7 @@ async function searchUsers(input) {
     entries.value = [];
     /* eslint-disable no-console */
     console.error(
-      i18n.t('trans.manageSubmissionUsers.getUsersErrMsg', {
+      t('trans.manageSubmissionUsers.getUsersErrMsg', {
         error: error,
       })
     );
@@ -229,7 +228,7 @@ defineExpose({
                 <div
                   class="px-2"
                   :class="{ 'text-right': isRTL }"
-                  :lang="lang"
+                  :lang="locale"
                   v-html="$t('trans.addTeamMember.cantFindChefsUsers')"
                 ></div>
               </template>
@@ -288,7 +287,7 @@ defineExpose({
               :title="$t('trans.addTeamMember.add')"
               @click="save"
             >
-              <span :lang="lang">{{ $t('trans.addTeamMember.add') }}</span>
+              <span :lang="locale">{{ $t('trans.addTeamMember.add') }}</span>
             </v-btn>
             <v-btn
               variant="outlined"
@@ -299,13 +298,13 @@ defineExpose({
                 showError = false;
               "
             >
-              <span :lang="lang">{{ $t('trans.addTeamMember.cancel') }}</span>
+              <span :lang="locale">{{ $t('trans.addTeamMember.cancel') }}</span>
             </v-btn>
           </v-col>
         </v-row>
         <v-row v-if="showError" class="px-4 my-0 py-0">
           <v-col class="text-left">
-            <span class="text-red" :lang="lang">{{
+            <span class="text-red" :lang="locale">{{
               $t('trans.addTeamMember.mustSelectAUser')
             }}</span>
           </v-col>
@@ -328,7 +327,7 @@ defineExpose({
             <v-icon icon="mdi:mdi-account-plus"></v-icon>
           </v-btn>
         </template>
-        <span :lang="lang">{{ $t('trans.addTeamMember.addNewMember') }}</span>
+        <span :lang="locale">{{ $t('trans.addTeamMember.addNewMember') }}</span>
       </v-tooltip>
     </span>
   </span>
diff --git a/app/frontend/src/components/forms/manage/ApiKey.vue b/app/frontend/src/components/forms/manage/ApiKey.vue
index 8523304be..fc3e00297 100644
--- a/app/frontend/src/components/forms/manage/ApiKey.vue
+++ b/app/frontend/src/components/forms/manage/ApiKey.vue
@@ -1,11 +1,13 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { useFormStore } from '~/store/form';
 import { FormPermissions } from '~/utils/constants';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 const loading = ref(false);
 const showConfirmationDialog = ref(false);
 const showDeleteDialog = ref(false);
@@ -14,7 +16,7 @@ const filesApiAccess = ref(false);
 
 const formStore = useFormStore();
 
-const { apiKey, form, permissions, isRTL, lang } = storeToRefs(formStore);
+const { apiKey, form, permissions, isRTL } = storeToRefs(formStore);
 
 const canDeleteKey = computed(() => {
   return (
@@ -84,20 +86,20 @@ defineExpose({
   <div :class="{ 'dir-rtl': isRTL }">
     <div v-if="!canGenerateKey" class="mt-3 mb-6">
       <v-icon class="mr-1" color="primary" icon="mdi:mdi-information"></v-icon>
-      <span :lang="lang" v-html="$t('trans.apiKey.formOwnerKeyAcess')"></span>
+      <span :lang="locale" v-html="$t('trans.apiKey.formOwnerKeyAcess')"></span>
     </div>
-    <h3 class="mt-3" :lang="lang">
+    <h3 class="mt-3" :lang="locale">
       {{ $t('trans.apiKey.disclaimer') }}
     </h3>
     <ul :class="isRTL ? 'mr-6' : null">
-      <li :lang="lang">{{ $t('trans.apiKey.infoA') }}</li>
-      <li :lang="lang">
+      <li :lang="locale">{{ $t('trans.apiKey.infoA') }}</li>
+      <li :lang="locale">
         {{ $t('trans.apiKey.infoB') }}
       </li>
-      <li :lang="lang">
+      <li :lang="locale">
         {{ $t('trans.apiKey.infoC') }}
       </li>
-      <li :lang="lang">
+      <li :lang="locale">
         {{ $t('trans.apiKey.infoD') }}
       </li>
     </ul>
@@ -117,7 +119,7 @@ defineExpose({
             data-test="canGenerateAPIKey"
             @click="showConfirmationDialog = true"
           >
-            <span :lang="lang"
+            <span :lang="locale"
               >{{
                 apiKey
                   ? $t('trans.apiKey.regenerate')
@@ -137,7 +139,7 @@ defineExpose({
             readonly
             :type="showSecret ? 'text' : 'password'"
             :model-value="secret"
-            :lang="lang"
+            :lang="locale"
           />
         </v-col>
         <v-col cols="12" sm="3">
@@ -159,7 +161,7 @@ defineExpose({
                 @click="showSecret = !showSecret"
               />
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               showSecret
                 ? $t('trans.apiKey.hideSecret')
                 : $t('trans.apiKey.showSecret')
@@ -173,7 +175,7 @@ defineExpose({
             :text-to-copy="secret"
             :snack-bar-text="$t('trans.apiKey.sCTC')"
             :tooltip-text="$t('trans.apiKey.cSTC')"
-            :lang="lang"
+            :lang="locale"
           />
 
           <v-tooltip location="bottom">
@@ -190,7 +192,7 @@ defineExpose({
                 @click="showDeleteDialog = true"
               />
             </template>
-            <span :lang="lang">{{ $t('trans.apiKey.deleteKey') }}</span>
+            <span :lang="locale">{{ $t('trans.apiKey.deleteKey') }}</span>
           </v-tooltip>
         </v-col>
       </v-row>
@@ -204,24 +206,24 @@ defineExpose({
       @continue-dialog="createKey"
     >
       <template #title
-        ><span :lang="lang">
+        ><span :lang="locale">
           {{ $t('trans.apiKey.confirmKeyGen') }}
         </span></template
       >
       <template #text>
         <span
           v-if="!apiKey"
-          :lang="lang"
+          :lang="locale"
           v-html="$t('trans.apiKey.createAPIKey')"
         />
         <span
           v-else
-          :lang="lang"
+          :lang="locale"
           v-html="$t('trans.apiKey.regenerateAPIKey')"
         />
       </template>
       <template #button-text-continue>
-        <span :lang="lang"
+        <span :lang="locale"
           >{{
             apiKey ? $t('trans.apiKey.regenerate') : $t('trans.apiKey.generate')
           }}
@@ -238,15 +240,17 @@ defineExpose({
       @continue-dialog="deleteKey"
     >
       <template #title
-        ><span :lang="lang"
+        ><span :lang="locale"
           >{{ $t('trans.apiKey.confirmDeletion') }}
         </span></template
       >
       <template #text
-        ><span :lang="lang">{{ $t('trans.apiKey.deleteMsg') }}</span></template
+        ><span :lang="locale">{{
+          $t('trans.apiKey.deleteMsg')
+        }}</span></template
       >
       <template #button-text-continue>
-        <span :lang="lang">{{ $t('trans.apiKey.delete') }}</span>
+        <span :lang="locale">{{ $t('trans.apiKey.delete') }}</span>
       </template>
     </BaseDialog>
   </div>
diff --git a/app/frontend/src/components/forms/manage/DocumentTemplate.vue b/app/frontend/src/components/forms/manage/DocumentTemplate.vue
index 146904ff4..fa1f8d21a 100644
--- a/app/frontend/src/components/forms/manage/DocumentTemplate.vue
+++ b/app/frontend/src/components/forms/manage/DocumentTemplate.vue
@@ -1,19 +1,19 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import {
   fetchDocumentTemplates,
   getDocumentTemplate,
-  /* getMimeType, */
   readFile,
 } from '~/composables/documentTemplate';
 import { useFormStore } from '~/store/form';
 import { formService } from '~/services';
-import { i18n } from '~/internationalization';
 import { useNotificationStore } from '~/store/notification';
 import { NotificationTypes } from '~/utils/constants';
-import { onMounted } from 'vue';
+
+const { t, locale } = useI18n({ useScope: 'global' });
 
 let cdogsTemplate = ref(null);
 const documentTemplates = ref([]);
@@ -35,10 +35,10 @@ const validFileExtensions = ['txt', 'docx', 'html', 'odt', 'pptx', 'xlsx'];
 
 const notificationStore = useNotificationStore();
 
-const { form, isRTL, lang } = storeToRefs(useFormStore());
+const { form, isRTL } = storeToRefs(useFormStore());
 
 const validationRules = computed(() => [
-  isValidFile.value || i18n.t('trans.documentTemplate.invalidFileMessage'),
+  isValidFile.value || t('trans.documentTemplate.invalidFileMessage'),
 ]);
 
 onMounted(async () => {
@@ -69,8 +69,8 @@ async function fetchTemplates() {
     }
   } catch (e) {
     notificationStore.addNotification({
-      text: i18n.t('trans.documentTemplate.fetchError'),
-      consoleError: i18n.t('trans.documentTemplate.fetchError', {
+      text: t('trans.documentTemplate.fetchError'),
+      consoleError: t('trans.documentTemplate.fetchError', {
         error: e.message,
       }),
     });
@@ -116,13 +116,13 @@ async function handleFileUpload() {
       fileInput.value.reset();
     }
     notificationStore.addNotification({
-      text: i18n.t('trans.documentTemplate.uploadSuccess'),
+      text: t('trans.documentTemplate.uploadSuccess'),
       ...NotificationTypes.SUCCESS,
     });
   } catch (e) {
     notificationStore.addNotification({
-      text: i18n.t('trans.documentTemplate.uploadError'),
-      consoleError: i18n.t('trans.documentTemplate.uploadError', {
+      text: t('trans.documentTemplate.uploadError'),
+      consoleError: t('trans.documentTemplate.uploadError', {
         error: e.message,
       }),
     });
@@ -137,13 +137,13 @@ async function handleDelete(item) {
     await formService.documentTemplateDelete(form.value.id, item.templateId);
     await fetchTemplates();
     notificationStore.addNotification({
-      text: i18n.t('trans.documentTemplate.deleteSuccess'),
+      text: t('trans.documentTemplate.deleteSuccess'),
       ...NotificationTypes.SUCCESS,
     });
   } catch (e) {
     notificationStore.addNotification({
-      text: i18n.t('trans.documentTemplate.deleteError'),
-      consoleError: i18n.t('trans.documentTemplate.deleteError', {
+      text: t('trans.documentTemplate.deleteError'),
+      consoleError: t('trans.documentTemplate.deleteError', {
         error: e.message,
       }),
     });
@@ -177,8 +177,8 @@ async function handleFileAction(item, action) {
     }
   } catch (e) {
     notificationStore.addNotification({
-      text: i18n.t('trans.documentTemplate.fetchError'),
-      consoleError: i18n.t('trans.documentTemplate.fetchError', {
+      text: t('trans.documentTemplate.fetchError'),
+      consoleError: t('trans.documentTemplate.fetchError', {
         error: e.message,
       }),
     });
@@ -220,7 +220,7 @@ defineExpose({
               :href="techdocsLinkTemplateUpload"
               class="preview_info_link_field_white"
               target="_blank"
-              :hreflang="lang"
+              :lang="locale"
             >
               {{ $t('trans.formSettings.learnMore') }}
               <v-icon icon="mdi:mdi-arrow-top-right-bold-box-outline"></v-icon>
@@ -255,7 +255,7 @@ defineExpose({
               {{ item.filename }}
             </a>
           </template>
-          <span :lang="lang">
+          <span :lang="locale">
             {{ $t('trans.manageVersions.clickToPreview') }}
             <v-icon icon="mdi:mdi-open-in-new"></v-icon>
           </span>
@@ -310,7 +310,7 @@ defineExpose({
       counter
       :clearable="true"
       show-size
-      :lang="lang"
+      :lang="locale"
       prepend-icon="false"
       :disabled="documentTemplates.length >= 1"
       :rules="validationRules"
@@ -328,7 +328,7 @@ defineExpose({
       :title="$t('trans.documentTemplate.upload')"
       @click="handleFileUpload"
     >
-      <span :lang="lang">{{ $t('trans.documentTemplate.upload') }}</span>
+      <span :lang="locale">{{ $t('trans.documentTemplate.upload') }}</span>
     </v-btn>
   </div>
 </template>
diff --git a/app/frontend/src/components/forms/manage/EmailManagement.vue b/app/frontend/src/components/forms/manage/EmailManagement.vue
index 224c9cb0f..1f0d200a3 100644
--- a/app/frontend/src/components/forms/manage/EmailManagement.vue
+++ b/app/frontend/src/components/forms/manage/EmailManagement.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 import EmailTemplate from '~/components/forms/manage/EmailTemplate.vue';
 import { useFormStore } from '~/store/form';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 const properties = defineProps({
   formId: {
     required: true,
@@ -12,7 +15,7 @@ const properties = defineProps({
 });
 
 const formStore = useFormStore();
-const { form, isRTL, lang } = storeToRefs(formStore);
+const { form, isRTL } = storeToRefs(formStore);
 
 Promise.all([
   formStore.fetchEmailTemplates(properties.formId),
@@ -26,7 +29,7 @@ Promise.all([
       class="d-flex flex-md-row justify-space-between flex-sm-column-reverse flex-xs-column-reverse"
     >
       <div>
-        <h1 class="mr-auto" :lang="lang">
+        <h1 class="mr-auto" :lang="locale">
           {{ $t('trans.emailManagement.emailManagement')
           }}<v-icon
             color="primary"
@@ -57,7 +60,9 @@ Promise.all([
               </v-btn>
             </router-link>
           </template>
-          <span :lang="lang">{{ $t('trans.emailManagement.manageForm') }}</span>
+          <span :lang="locale">{{
+            $t('trans.emailManagement.manageForm')
+          }}</span>
         </v-tooltip>
       </div>
     </div>
diff --git a/app/frontend/src/components/forms/manage/EmailTemplate.vue b/app/frontend/src/components/forms/manage/EmailTemplate.vue
index e294a9c7d..12449fb9c 100644
--- a/app/frontend/src/components/forms/manage/EmailTemplate.vue
+++ b/app/frontend/src/components/forms/manage/EmailTemplate.vue
@@ -6,7 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
 
-const { t } = useI18n({ useScope: 'global' });
+const { t, locale } = useI18n({ useScope: 'global' });
 
 const properties = defineProps({
   title: {
@@ -35,7 +35,7 @@ const titleRules = ref([
 
 const formStore = useFormStore();
 
-const { emailTemplates, lang } = storeToRefs(formStore);
+const { emailTemplates } = storeToRefs(formStore);
 
 const emailTemplate = computed(() =>
   emailTemplates.value.find((t) => t.type === properties.type)
@@ -65,7 +65,7 @@ defineExpose({ saveEmailTemplate });
 
 <template>
   <v-container>
-    <h1 :lang="lang">{{ title }}</h1>
+    <h1 :lang="locale">{{ title }}</h1>
     <v-form ref="emailTemplateForm" lazy-validation>
       <v-text-field
         v-if="emailTemplates.length > 0"
@@ -75,7 +75,7 @@ defineExpose({ saveEmailTemplate });
         variant="outlined"
         solid
         :label="$t('trans.emailTemplate.subject')"
-        :lang="lang"
+        :lang="locale"
         :rules="subjectRules"
         @update:model-value="formChanged = true"
       />
@@ -87,7 +87,7 @@ defineExpose({ saveEmailTemplate });
         variant="outlined"
         solid
         :label="$t('trans.emailTemplate.title')"
-        :lang="lang"
+        :lang="locale"
         :rules="titleRules"
         @update:model-value="formChanged = true"
       />
@@ -99,7 +99,7 @@ defineExpose({ saveEmailTemplate });
         variant="outlined"
         solid
         :label="$t('trans.emailTemplate.body')"
-        :lang="lang"
+        :lang="locale"
         :rules="bodyRules"
         @update:model-value="formChanged = true"
       />
@@ -110,7 +110,7 @@ defineExpose({ saveEmailTemplate });
         :title="$t('trans.emailTemplate.save')"
         @click="saveEmailTemplate"
       >
-        <span :lang="lang">{{ $t('trans.emailTemplate.save') }}</span>
+        <span :lang="locale">{{ $t('trans.emailTemplate.save') }}</span>
       </v-btn>
     </v-form>
   </v-container>
diff --git a/app/frontend/src/components/forms/manage/ManageForm.vue b/app/frontend/src/components/forms/manage/ManageForm.vue
index b4a105e69..e6d454edd 100644
--- a/app/frontend/src/components/forms/manage/ManageForm.vue
+++ b/app/frontend/src/components/forms/manage/ManageForm.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import ApiKey from '~/components/forms/manage/ApiKey.vue';
 import DocumentTemplate from '~/components/forms/manage/DocumentTemplate.vue';
@@ -13,6 +14,8 @@ import { useNotificationStore } from '~/store/notification';
 import { FormPermissions, NotificationTypes } from '~/utils/constants';
 import FormProfile from '~/components/designer/FormProfile.vue';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 const apiKeyPanel = ref(1);
 const cdogsPanel = ref(1);
 const externalAPIsPanel = ref(1);
@@ -26,7 +29,7 @@ const versionsPanel = ref(0);
 const formStore = useFormStore();
 const notificationStore = useNotificationStore();
 
-const { apiKey, drafts, form, permissions, isRTL, lang, subscriptionData } =
+const { apiKey, drafts, form, permissions, isRTL, subscriptionData } =
   storeToRefs(formStore);
 
 const canEditForm = computed(() =>
@@ -142,11 +145,11 @@ defineExpose({
         <v-expansion-panel-title>
           <div
             class="header"
-            :lang="lang"
+            :lang="locale"
             data-test="canExpandFormSettingsPanel"
           >
             <strong>{{ $t('trans.manageForm.formSettings') }}</strong>
-            <span :lang="lang">
+            <span :lang="locale">
               <small>
                 {{ $t('trans.manageForm.created') }}:
                 {{ $filters.formatDate(form.createdAt) }} ({{ form.createdBy }})
@@ -188,7 +191,7 @@ defineExpose({
               data-test="canEditForm"
               @click="updateSettings"
             >
-              <span :lang="lang">{{ $t('trans.manageForm.update') }}</span>
+              <span :lang="locale">{{ $t('trans.manageForm.update') }}</span>
             </v-btn>
             <v-btn
               variant="outlined"
@@ -196,7 +199,7 @@ defineExpose({
               data-test="canCancelEdit"
               @click="cancelSettingsEdit"
             >
-              <span :lang="lang">{{ $t('trans.manageForm.cancel') }}</span>
+              <span :lang="locale">{{ $t('trans.manageForm.cancel') }}</span>
             </v-btn>
           </div>
         </v-expansion-panel-text>
@@ -211,9 +214,9 @@ defineExpose({
     >
       <v-expansion-panel flat>
         <v-expansion-panel-title>
-          <div class="header" :lang="lang">
+          <div class="header" :lang="locale">
             <strong>{{ $t('trans.manageForm.eventSubscription') }}</strong>
-            <span v-if="subscriptionData" :lang="lang">
+            <span v-if="subscriptionData" :lang="locale">
               <small v-if="subscriptionData.updatedBy">
                 {{ $t('trans.manageForm.updated') }}:
                 {{ $filters.formatDate(subscriptionData.updatedAt) }} ({{
@@ -245,11 +248,11 @@ defineExpose({
         <v-expansion-panel-title>
           <div
             class="header"
-            :lang="lang"
+            :lang="locale"
             data-test="canExpandApiKeySettingsPanel"
           >
             <strong>{{ $t('trans.manageForm.apiKey') }}</strong>
-            <span v-if="apiKey" :lang="lang">
+            <span v-if="apiKey" :lang="locale">
               <small v-if="apiKey.updatedBy">
                 {{ $t('trans.manageForm.updated') }}:
                 {{ $filters.formatDate(apiKey.updatedAt) }} ({{
@@ -279,7 +282,7 @@ defineExpose({
     >
       <v-expansion-panel flat>
         <v-expansion-panel-title>
-          <div class="header" :lang="lang" data-test="canExpandCDOGSPanel">
+          <div class="header" :lang="locale" data-test="canExpandCDOGSPanel">
             <strong>{{ $t('trans.manageForm.cdogsTemplate') }}</strong>
           </div>
         </v-expansion-panel-title>
@@ -297,7 +300,7 @@ defineExpose({
     >
       <v-expansion-panel flat>
         <v-expansion-panel-title>
-          <div class="header" :lang="lang">
+          <div class="header" :lang="locale">
             <strong>{{ $t('trans.manageForm.externalAPIs') }}</strong>
           </div>
         </v-expansion-panel-title>
@@ -313,19 +316,19 @@ defineExpose({
         <v-expansion-panel-title>
           <div
             class="header"
-            :lang="lang"
+            :lang="locale"
             data-test="canExpandFormDesignHistoryPanel"
           >
             <strong style="flex: 1">{{
               $t('trans.manageForm.formDesignHistory')
             }}</strong>
             <div>
-              <span :lang="lang">
+              <span :lang="locale">
                 <strong>{{ $t('trans.manageForm.totalVersions') }}:</strong>
                 {{ combinedVersionAndDraftCount }}
               </span>
             </div>
-            <span class="ml-12 mr-2" :lang="lang">
+            <span class="ml-12 mr-2" :lang="locale">
               <strong>{{ $t('trans.manageForm.status') }}:</strong>
               {{ versionState }}
             </span>
diff --git a/app/frontend/src/components/forms/manage/ManageFormActions.vue b/app/frontend/src/components/forms/manage/ManageFormActions.vue
index 2208ecb52..2140d03fc 100644
--- a/app/frontend/src/components/forms/manage/ManageFormActions.vue
+++ b/app/frontend/src/components/forms/manage/ManageFormActions.vue
@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
 import BaseDialog from '~/components/base/BaseDialog.vue';
 import ShareForm from '~/components/forms/manage/ShareForm.vue';
@@ -9,11 +10,13 @@ import { useFormStore } from '~/store/form';
 
 import { FormPermissions } from '~/utils/constants';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 const showDeleteDialog = ref(false);
 
 const formStore = useFormStore();
 
-const { form, permissions, isRTL, lang } = storeToRefs(formStore);
+const { form, permissions, isRTL } = storeToRefs(formStore);
 
 const router = useRouter();
 
@@ -82,7 +85,7 @@ defineExpose({
             />
           </router-link>
         </template>
-        <span :lang="lang">{{
+        <span :lang="locale">{{
           $t('trans.manageFormActions.viewSubmissions')
         }}</span>
       </v-tooltip>
@@ -104,7 +107,7 @@ defineExpose({
             />
           </router-link>
         </template>
-        <span :lang="lang">{{
+        <span :lang="locale">{{
           $t('trans.manageFormActions.teamManagement')
         }}</span>
       </v-tooltip>
@@ -126,7 +129,7 @@ defineExpose({
             />
           </router-link>
         </template>
-        <span :lang="lang">
+        <span :lang="locale">
           {{ $t('trans.manageFormActions.emailManagement') }}
           <v-icon icon="mdi:mdi-flask" size="small" />
         </span>
@@ -149,7 +152,7 @@ defineExpose({
           />
         </template>
         <span
-          ><span :lang="lang">{{
+          ><span :lang="locale">{{
             $t('trans.manageFormActions.deleteForm')
           }}</span></span
         >
@@ -162,19 +165,19 @@ defineExpose({
         @continue-dialog="deleteForm"
       >
         <template #title
-          ><span :lang="lang">
+          ><span :lang="locale">
             {{ $t('trans.manageFormActions.confirmDeletion') }}
           </span></template
         >
         <template #text>
-          <span :lang="lang"
+          <span :lang="locale"
             >{{ $t('trans.manageFormActions.deleteMessageA') }}
             <strong>{{ form.name }}</strong
             >? {{ $t('trans.manageFormActions.deleteMessageB') }}
           </span>
         </template>
         <template #button-text-continue>
-          <span :lang="lang">{{
+          <span :lang="locale">{{
             $t('trans.manageFormActions.deleteForm')
           }}</span>
         </template>
diff --git a/app/frontend/src/components/forms/manage/ManageLayout.vue b/app/frontend/src/components/forms/manage/ManageLayout.vue
index 7c15314cd..63fabee11 100644
--- a/app/frontend/src/components/forms/manage/ManageLayout.vue
+++ b/app/frontend/src/components/forms/manage/ManageLayout.vue
@@ -1,13 +1,15 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { onMounted } from 'vue';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import ManageForm from '~/components/forms/manage/ManageForm.vue';
 import ManageFormActions from '~/components/forms/manage/ManageFormActions.vue';
 import { useFormStore } from '~/store/form';
 import { FormPermissions } from '~/utils/constants';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 const properties = defineProps({
   f: {
     type: String,
@@ -17,7 +19,7 @@ const properties = defineProps({
 
 const loading = ref(true);
 
-const { form, permissions, isRTL, lang } = storeToRefs(useFormStore());
+const { form, permissions, isRTL } = storeToRefs(useFormStore());
 
 onMounted(async () => {
   loading.value = true;
@@ -43,7 +45,7 @@ onMounted(async () => {
     >
       <!-- page title -->
       <div>
-        <h1 :lang="lang">{{ $t('trans.manageLayout.manageForm') }}</h1>
+        <h1 :lang="locale">{{ $t('trans.manageLayout.manageForm') }}</h1>
         <h3>{{ form.name }}</h3>
       </div>
       <!-- buttons -->
diff --git a/app/frontend/src/components/forms/manage/ManageVersions.vue b/app/frontend/src/components/forms/manage/ManageVersions.vue
index bd1bac20c..bd4cd6325 100644
--- a/app/frontend/src/components/forms/manage/ManageVersions.vue
+++ b/app/frontend/src/components/forms/manage/ManageVersions.vue
@@ -13,7 +13,7 @@ import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
 import { FormPermissions } from '~/utils/constants';
 
-const { t } = useI18n({ useScope: 'global' });
+const { t, locale } = useI18n({ useScope: 'global' });
 
 const router = useRouter();
 
@@ -23,7 +23,7 @@ const draftId = inject('draftId');
 const formStore = useFormStore();
 const notificationStore = useNotificationStore();
 
-const { drafts, form, permissions, isRTL, lang } = storeToRefs(formStore);
+const { drafts, form, permissions, isRTL } = storeToRefs(formStore);
 
 const headers = ref([
   {
@@ -234,7 +234,7 @@ defineExpose({
 <template>
   <div :class="{ 'dir-rtl': isRTL }">
     <BaseInfoCard class="my-4">
-      <h4 class="text-primary" :lang="lang">
+      <h4 class="text-primary" :lang="locale">
         <v-icon
           :class="isRTL ? 'ml-1' : 'mr-1'"
           color="primary"
@@ -242,10 +242,10 @@ defineExpose({
         ></v-icon
         >{{ $t('trans.manageVersions.important') }}!
       </h4>
-      <p :lang="lang">{{ $t('trans.manageVersions.infoA') }}</p>
+      <p :lang="locale">{{ $t('trans.manageVersions.infoA') }}</p>
     </BaseInfoCard>
 
-    <div class="mt-8 mb-5" :lang="lang">
+    <div class="mt-8 mb-5" :lang="locale">
       <v-icon
         :class="isRTL ? 'ml-1' : 'mr-1'"
         color="primary"
@@ -281,20 +281,20 @@ defineExpose({
         >
           <v-tooltip location="bottom">
             <template #activator="{ props }">
-              <span v-bind="props" :lang="lang">
+              <span v-bind="props" :lang="locale">
                 {{ $t('trans.manageVersions.version') }} {{ item.version }}
                 <v-chip
                   v-if="item.isDraft"
                   color="secondary"
                   class="mb-5 px-1"
                   x-small
-                  :lang="lang"
+                  :lang="locale"
                 >
                   {{ $t('trans.manageVersions.draft') }}
                 </v-chip>
               </span>
             </template>
-            <span :lang="lang">
+            <span :lang="locale">
               {{ $t('trans.manageVersions.clickToPreview') }}
               <v-icon icon="mdi:mdi-open-in-new"></v-icon>
             </span>
@@ -315,7 +315,7 @@ defineExpose({
           "
         >
           <template #label>
-            <span :class="{ 'mr-2': isRTL }" :lang="lang">
+            <span :class="{ 'mr-2': isRTL }" :lang="locale">
               {{
                 item.published
                   ? $t('trans.manageVersions.published')
@@ -359,7 +359,7 @@ defineExpose({
                 </v-btn>
               </router-link>
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.manageVersions.editVersion')
             }}</span>
           </v-tooltip>
@@ -381,7 +381,7 @@ defineExpose({
                 <v-icon icon="mdi:mdi-download"></v-icon>
               </v-btn>
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.manageVersions.exportDesign')
             }}</span>
           </v-tooltip>
@@ -411,10 +411,10 @@ defineExpose({
                 </v-btn>
               </span>
             </template>
-            <span v-if="hasDraft" :lang="lang">
+            <span v-if="hasDraft" :lang="locale">
               {{ $t('trans.manageVersions.infoC') }}
             </span>
-            <span v-else :lang="lang">
+            <span v-else :lang="locale">
               {{
                 $t('trans.manageVersions.useVersionInfo', {
                   version: item.version,
@@ -442,7 +442,7 @@ defineExpose({
                 </v-btn>
               </span>
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.manageVersions.deleteVersion')
             }}</span>
           </v-tooltip>
@@ -456,12 +456,12 @@ defineExpose({
       @close-dialog="showHasDraftsDialog = false"
     >
       <template #title
-        ><span :lang="lang">{{
+        ><span :lang="locale">{{
           $t('trans.manageVersions.draftAlreadyExists')
         }}</span></template
       >
       <template #text>
-        <span :lang="lang">
+        <span :lang="locale">
           {{ $t('trans.manageVersions.infoD') }}
         </span>
       </template>
@@ -474,24 +474,24 @@ defineExpose({
       @close-dialog="cancelPublish"
     >
       <template #title>
-        <span v-if="publishOpts.publishing" :lang="lang">
+        <span v-if="publishOpts.publishing" :lang="locale">
           {{ $t('trans.manageVersions.publishVersion') }}
           {{ publishOpts.version }}
         </span>
-        <span v-else :lang="lang">
+        <span v-else :lang="locale">
           {{ $t('trans.manageVersions.unpublishVersion') }}
           {{ publishOpts.version }}</span
         >
       </template>
       <template #text>
-        <span v-if="publishOpts.publishing" :lang="lang">
+        <span v-if="publishOpts.publishing" :lang="locale">
           {{
             $t('trans.manageVersions.useVersionInfo', {
               version: publishOpts.version,
             })
           }}
         </span>
-        <span v-else :lang="lang">
+        <span v-else :lang="locale">
           {{ $t('trans.manageVersions.infoE') }}
         </span>
       </template>
@@ -504,17 +504,17 @@ defineExpose({
       @continue-dialog="deleteCurrentDraft"
     >
       <template #title
-        ><span :lang="lang">{{
+        ><span :lang="locale">{{
           $t('trans.manageVersions.confirmDeletion')
         }}</span>
       </template>
       <template #text
-        ><span :lang="lang">{{
+        ><span :lang="locale">{{
           $t('trans.manageVersions.infoF')
         }}</span></template
       >
       <template #button-text-continue>
-        <span :lang="lang">{{ $t('trans.manageVersions.delete') }}</span>
+        <span :lang="locale">{{ $t('trans.manageVersions.delete') }}</span>
       </template>
     </BaseDialog>
   </div>
diff --git a/app/frontend/src/components/forms/manage/ShareForm.vue b/app/frontend/src/components/forms/manage/ShareForm.vue
index d51396158..952a07603 100644
--- a/app/frontend/src/components/forms/manage/ShareForm.vue
+++ b/app/frontend/src/components/forms/manage/ShareForm.vue
@@ -3,11 +3,14 @@ import { storeToRefs } from 'pinia';
 import QrcodeVue from 'qrcode.vue';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
 import BaseCopyToClipboard from '~/components/base/BaseCopyToClipboard.vue';
 import { NotificationTypes } from '~/utils/constants';
 import { useFormStore } from '~/store/form';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 const router = useRouter();
 
 const properties = defineProps({
@@ -25,7 +28,7 @@ const dialog = ref(false);
 const qrLevel = ref('M');
 const qrSize = ref(900);
 
-const { isRTL, lang } = storeToRefs(useFormStore());
+const { isRTL } = storeToRefs(useFormStore());
 
 const formLink = computed(() => {
   const url = router.resolve({
@@ -62,17 +65,17 @@ defineExpose({ dialog, formLink, downloadQr });
           @click="dialog = true"
         />
       </template>
-      <span :lang="lang">{{ $t('trans.shareForm.shareForm') }}</span>
+      <span :lang="locale">{{ $t('trans.shareForm.shareForm') }}</span>
     </v-tooltip>
 
     <v-dialog v-model="dialog" width="900" data-cy="shareFormDialog">
       <v-card>
-        <v-card-title class="text-h5 pb-0" :lang="lang">{{
+        <v-card-title class="text-h5 pb-0" :lang="locale">{{
           $t('trans.shareForm.shareLink')
         }}</v-card-title>
         <v-card-text>
           <hr />
-          <p class="mb-5" :class="{ 'dir-rtl': isRTL }" :lang="lang">
+          <p class="mb-5" :class="{ 'dir-rtl': isRTL }" :lang="locale">
             {{ $t('trans.shareForm.copyQRCode') }}
           </p>
           <v-alert
@@ -80,7 +83,7 @@ defineExpose({ dialog, formLink, downloadQr });
             :class="[NOTIFICATIONS_TYPES.WARNING.class, { 'dir-rtl': isRTL }]"
             :icon="NOTIFICATIONS_TYPES.WARNING.icon"
             :text="$t('trans.shareForm.warningMessage')"
-            :lang="lang"
+            :lang="locale"
           ></v-alert>
           <v-text-field
             readonly
@@ -99,7 +102,7 @@ defineExpose({ dialog, formLink, downloadQr });
                 class="mt-n1 mx-2"
                 :text-to-copy="formLink"
                 :tooltip-text="$t('trans.shareForm.copyURLToClipboard')"
-                :lang="lang"
+                :lang="locale"
               />
               <v-tooltip location="bottom">
                 <template #activator="{ props }">
@@ -117,7 +120,7 @@ defineExpose({ dialog, formLink, downloadQr });
                     :title="$t('trans.shareForm.openThisForm')"
                   />
                 </template>
-                <span :class="{ 'dir-rtl': isRTL }" :lang="lang">{{
+                <span :class="{ 'dir-rtl': isRTL }" :lang="locale">{{
                   $t('trans.shareForm.openThisForm')
                 }}</span>
               </v-tooltip>
@@ -164,7 +167,7 @@ defineExpose({ dialog, formLink, downloadQr });
             :title="$t('trans.shareForm.close')"
             @click="dialog = false"
           >
-            <span :lang="lang">{{ $t('trans.shareForm.close') }}</span>
+            <span :lang="locale">{{ $t('trans.shareForm.close') }}</span>
           </v-btn>
         </v-card-actions>
       </v-card>
diff --git a/app/frontend/src/components/forms/manage/Subscription.vue b/app/frontend/src/components/forms/manage/Subscription.vue
index 8aabeed02..a68888670 100644
--- a/app/frontend/src/components/forms/manage/Subscription.vue
+++ b/app/frontend/src/components/forms/manage/Subscription.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
 
-const { t } = useI18n({ useScope: 'global' });
+const { t, locale } = useI18n({ useScope: 'global' });
 
 const showSecret = ref(false);
 const subscriptionForm = ref(null);
@@ -28,7 +28,7 @@ const endpointTokenRules = ref([
 const formStore = useFormStore();
 const notificationStore = useNotificationStore();
 
-const { form, lang, subscriptionData } = storeToRefs(formStore);
+const { form, subscriptionData } = storeToRefs(formStore);
 
 async function updateSettings() {
   try {
@@ -66,7 +66,7 @@ defineExpose({ showHideKey, showSecret, updateSettings });
 <template>
   <v-container class="px-0">
     <template #title>
-      <span :lang="lang">
+      <span :lang="locale">
         {{ $t('trans.formSettings.eventSubscription') }}
       </span>
     </template>
@@ -80,7 +80,7 @@ defineExpose({ showHideKey, showSecret, updateSettings });
           <v-text-field
             v-model="subscriptionData.endpointUrl"
             :label="$t('trans.subscribeEvent.endpointUrl')"
-            :lang="lang"
+            :lang="locale"
             :placeholder="$t('trans.subscribeEvent.urlPlaceholder')"
             density="compact"
             flat
@@ -93,7 +93,7 @@ defineExpose({ showHideKey, showSecret, updateSettings });
           <v-text-field
             v-model="subscriptionData.key"
             :label="$t('trans.subscribeEvent.key')"
-            :lang="lang"
+            :lang="locale"
             density="compact"
             flat
             solid
@@ -104,7 +104,7 @@ defineExpose({ showHideKey, showSecret, updateSettings });
           <v-text-field
             v-model="subscriptionData.endpointToken"
             :label="$t('trans.subscribeEvent.endpointToken')"
-            :lang="lang"
+            :lang="locale"
             density="compact"
             flat
             solid
@@ -134,10 +134,10 @@ defineExpose({ showHideKey, showSecret, updateSettings });
                 @click="showHideKey"
               />
             </template>
-            <span v-if="showSecret" :lang="lang">
+            <span v-if="showSecret" :lang="locale">
               {{ $t('trans.subscribeEvent.hideSecret') }}
             </span>
-            <span v-else :lang="lang">{{
+            <span v-else :lang="locale">{{
               $t('trans.subscribeEvent.showSecret')
             }}</span>
           </v-tooltip>
@@ -151,7 +151,7 @@ defineExpose({ showHideKey, showSecret, updateSettings });
             :title="$t('trans.subscribeEvent.save')"
             @click="updateSettings"
           >
-            <span :lang="lang">{{ $t('trans.subscribeEvent.save') }}</span>
+            <span :lang="locale">{{ $t('trans.subscribeEvent.save') }}</span>
           </v-btn>
         </v-col>
       </v-row>
diff --git a/app/frontend/src/components/forms/manage/TeamManagement.vue b/app/frontend/src/components/forms/manage/TeamManagement.vue
index f466087a1..335e9b1a4 100644
--- a/app/frontend/src/components/forms/manage/TeamManagement.vue
+++ b/app/frontend/src/components/forms/manage/TeamManagement.vue
@@ -16,7 +16,7 @@ import {
   IdentityMode,
 } from '~/utils/constants';
 
-const { t } = useI18n({ useScope: 'global' });
+const { t, locale } = useI18n({ useScope: 'global' });
 
 const properties = defineProps({
   formId: {
@@ -47,7 +47,7 @@ const formStore = useFormStore();
 const idpStore = useIdpStore();
 const notificationStore = useNotificationStore();
 
-const { form, permissions, isRTL, lang } = storeToRefs(formStore);
+const { form, permissions, isRTL } = storeToRefs(formStore);
 
 const canManageTeam = computed(() =>
   permissions.value.includes(FormPermissions.TEAM_UPDATE)
@@ -402,7 +402,7 @@ defineExpose({
       class="mt-6 d-flex flex-md-row justify-space-between flex-sm-column-reverse flex-xs-column-reverse gapRow"
     >
       <div>
-        <h1 class="mr-auto" :lang="lang">
+        <h1 class="mr-auto" :lang="locale">
           {{ $t('trans.teamManagement.teamManagement') }}
         </h1>
         <h3>{{ form.name }}</h3>
@@ -430,7 +430,7 @@ defineExpose({
                 <v-icon icon="mdi:mdi-view-column"></v-icon>
               </v-btn>
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.teamManagement.selectColumns')
             }}</span>
           </v-tooltip>
@@ -450,7 +450,7 @@ defineExpose({
                 </v-btn>
               </router-link>
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.teamManagement.manageForm')
             }}</span>
           </v-tooltip>
@@ -471,7 +471,7 @@ defineExpose({
           :label="$t('trans.teamManagement.search')"
           single-line
           :class="{ label: isRTL }"
-          :lang="lang"
+          :lang="locale"
         />
       </v-col>
     </v-row>
@@ -494,7 +494,7 @@ defineExpose({
       "
       :search="search"
       dense
-      :lang="lang"
+      :lang="locale"
     >
       <!-- custom header markup - add tooltip to heading that are roles -->
       <template #header.form_designer="{ column }">
@@ -570,7 +570,7 @@ defineExpose({
               ></v-icon>
             </v-btn>
           </template>
-          <span :lang="lang">{{
+          <span :lang="locale">{{
             $t('trans.teamManagement.removeSelectedUsers')
           }}</span>
         </v-tooltip>
@@ -660,7 +660,7 @@ defineExpose({
               ></v-icon>
             </v-btn>
           </template>
-          <span :lang="lang">{{
+          <span :lang="locale">{{
             $t('trans.teamManagement.removeThisUser')
           }}</span>
         </v-tooltip>
@@ -674,7 +674,7 @@ defineExpose({
       @continue-dialog="removeUser"
     >
       <template #title
-        ><span :lang="lang">
+        ><span :lang="locale">
           {{ $t('trans.teamManagement.confirmRemoval') }}</span
         ></template
       >
@@ -682,7 +682,7 @@ defineExpose({
         {{ DeleteMessage }}
       </template>
       <template #button-text-continue>
-        <span :lang="lang">{{ $t('trans.teamManagement.remove') }}</span>
+        <span :lang="locale">{{ $t('trans.teamManagement.remove') }}</span>
       </template>
     </BaseDialog>
 
@@ -700,7 +700,7 @@ defineExpose({
         @cancel-filter-data="showColumnsDialog = false"
       >
         <template #filter-title
-          ><span :lang="lang">
+          ><span :lang="locale">
             {{ $t('trans.teamManagement.teamMebersTitle') }}</span
           ></template
         >
diff --git a/app/frontend/src/components/forms/submission/AuditHistory.vue b/app/frontend/src/components/forms/submission/AuditHistory.vue
index b8b326a09..d64cf6112 100644
--- a/app/frontend/src/components/forms/submission/AuditHistory.vue
+++ b/app/frontend/src/components/forms/submission/AuditHistory.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapActions, mapState } from 'pinia';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
+
 import formService from '~/services/formService.js';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
@@ -12,6 +13,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       dialog: false,
@@ -20,14 +26,14 @@ export default {
     };
   },
   computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
     headers() {
       return [
         {
-          title: i18n.t('trans.auditHistory.userName'),
+          title: this.$t('trans.auditHistory.userName'),
           key: 'updatedByUsername',
         },
-        { title: i18n.t('trans.auditHistory.date'), key: 'actionTimestamp' },
+        { title: this.$t('trans.auditHistory.date'), key: 'actionTimestamp' },
       ];
     },
   },
@@ -43,9 +49,9 @@ export default {
         this.history = response.data;
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.auditHistory.errorMsg'),
+          text: this.$t('trans.auditHistory.errorMsg'),
           consoleError:
-            i18n.t('trans.auditHistory.consoleErrMsg') +
+            this.$t('trans.auditHistory.consoleErrMsg') +
             `${this.submissionId}: ${error}`,
         });
       } finally {
@@ -71,7 +77,7 @@ export default {
           @click="loadHistory"
         />
       </template>
-      <span :class="{ 'dir-rtl': isRTL }" :lang="lang">{{
+      <span :class="{ 'dir-rtl': isRTL }" :lang="locale">{{
         $t('trans.auditHistory.viewEditHistory')
       }}</span>
     </v-tooltip>
@@ -81,12 +87,12 @@ export default {
         <v-card-title
           class="text-h5 pb-0"
           :class="{ 'dir-rtl': isRTL }"
-          :lang="lang"
+          :lang="locale"
           >{{ $t('trans.auditHistory.editHistory') }}</v-card-title
         >
         <v-card-text>
           <hr />
-          <p :class="{ 'dir-rtl': isRTL }" :lang="lang">
+          <p :class="{ 'dir-rtl': isRTL }" :lang="locale">
             {{ $t('trans.auditHistory.auditLogMsg') }}
           </p>
 
@@ -98,7 +104,7 @@ export default {
             :loading-text="$t('trans.auditHistory.loadingText')"
             item-key="id"
             class="status-table"
-            :lang="lang"
+            :lang="locale"
           >
             <template #[`item.actionTimestamp`]="{ item }">
               {{ $filters.formatDateLong(item.actionTimestamp) }}
@@ -114,7 +120,7 @@ export default {
             :title="$t('trans.auditHistory.close')"
             @click="dialog = false"
           >
-            <span :lang="lang">{{ $t('trans.auditHistory.close') }}</span>
+            <span :lang="locale">{{ $t('trans.auditHistory.close') }}</span>
           </v-btn>
         </v-card-actions>
       </v-card>
diff --git a/app/frontend/src/components/forms/submission/DeleteSubmission.vue b/app/frontend/src/components/forms/submission/DeleteSubmission.vue
index 7489b03a0..328256de1 100644
--- a/app/frontend/src/components/forms/submission/DeleteSubmission.vue
+++ b/app/frontend/src/components/forms/submission/DeleteSubmission.vue
@@ -1,5 +1,7 @@
 <script>
 import { mapActions, mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import BaseDialog from '~/components/base/BaseDialog.vue';
 import { useFormStore } from '~/store/form';
 
@@ -22,13 +24,18 @@ export default {
     },
   },
   emits: ['deleted'],
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   data() {
     return {
       showDeleteDialog: false,
     };
   },
   computed: {
-    ...mapState(useFormStore, ['form', 'lang', 'isRTL']),
+    ...mapState(useFormStore, ['form', 'isRTL']),
   },
   methods: {
     ...mapActions(useFormStore, ['deleteSubmission']),
@@ -61,7 +68,7 @@ export default {
           @click="showDeleteDialog = true"
         />
       </template>
-      <span :lang="lang"
+      <span :lang="locale"
         >{{ $t('trans.deleteSubmission.deleteThis') }}
         {{
           isDraft
@@ -78,12 +85,12 @@ export default {
       @continue-dialog="delSub"
     >
       <template #title>
-        <span :lang="lang">{{
+        <span :lang="locale">{{
           $t('trans.deleteSubmission.confirmDeletion')
         }}</span></template
       >
       <template #text>
-        <span :lang="lang">
+        <span :lang="locale">
           {{ $t('trans.deleteSubmission.deleteWarning') }}
           {{
             isDraft
@@ -93,7 +100,7 @@ export default {
         >
       </template>
       <template #button-text-continue>
-        <span :lang="lang">{{ $t('trans.deleteSubmission.delete') }}</span>
+        <span :lang="locale">{{ $t('trans.deleteSubmission.delete') }}</span>
       </template>
     </BaseDialog>
   </span>
diff --git a/app/frontend/src/components/forms/submission/ManageSubmissionUsers.vue b/app/frontend/src/components/forms/submission/ManageSubmissionUsers.vue
index a82e775fe..3e08a3dda 100644
--- a/app/frontend/src/components/forms/submission/ManageSubmissionUsers.vue
+++ b/app/frontend/src/components/forms/submission/ManageSubmissionUsers.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapState, mapActions } from 'pinia';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
 
 import BaseDialog from '~/components/base/BaseDialog.vue';
 import { rbacService, userService } from '~/services';
@@ -23,6 +23,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       dialog: false,
@@ -39,12 +44,12 @@ export default {
     };
   },
   computed: {
-    ...mapState(useFormStore, ['form', 'isRTL', 'lang']),
+    ...mapState(useFormStore, ['form', 'isRTL']),
     ...mapState(useIdpStore, ['loginButtons', 'primaryIdp']),
     autocompleteLabel() {
       return this.isPrimary(this.selectedIdp)
-        ? i18n.t('trans.manageSubmissionUsers.requiredFiled')
-        : i18n.t('trans.manageSubmissionUsers.exactEmailOrUsername');
+        ? this.$t('trans.manageSubmissionUsers.requiredFiled')
+        : this.$t('trans.manageSubmissionUsers.exactEmailOrUsername');
     },
   },
   watch: {
@@ -64,10 +69,10 @@ export default {
         let teamMembershipConfig = this.teamMembershipSearch(this.selectedIdp);
         if (teamMembershipConfig) {
           if (input.length < teamMembershipConfig.text.minLength)
-            throw new Error(i18n.t(teamMembershipConfig.text.message));
+            throw new Error(this.$t(teamMembershipConfig.text.message));
           if (input.includes('@')) {
             if (!new RegExp(Regex.EMAIL).test(input))
-              throw new Error(i18n.t(teamMembershipConfig.email.message));
+              throw new Error(this.$t(teamMembershipConfig.email.message));
             else params.email = input;
           } else {
             params.username = input;
@@ -81,7 +86,7 @@ export default {
         // this.userSearchResults = [];
         /* eslint-disable no-console */
         console.error(
-          i18n.t('trans.manageSubmissionUsers.getUsersErrMsg', {
+          this.$t('trans.manageSubmissionUsers.getUsersErrMsg', {
             error: error,
           })
         ); // eslint-disable-line no-console
@@ -108,7 +113,7 @@ export default {
         if (this.userTableList.some((u) => u.id === id)) {
           this.addNotification({
             ...NotificationTypes.WARNING,
-            text: i18n.t('trans.manageSubmissionUsers.remove', {
+            text: this.$t('trans.manageSubmissionUsers.remove', {
               username: this.userSearchSelection.username,
             }),
           });
@@ -150,8 +155,8 @@ export default {
         }
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.manageSubmissionUsers.getSubmissionUsersErr'),
-          consoleError: i18n.t(
+          text: this.$t('trans.manageSubmissionUsers.getSubmissionUsersErr'),
+          consoleError: this.$t(
             'trans.manageSubmissionUsers.getSubmissionUsersConsoleErr',
             { submissionId: this.submissionId, error: error }
           ),
@@ -181,20 +186,23 @@ export default {
           this.addNotification({
             ...NotificationTypes.SUCCESS,
             text: permissions.length
-              ? i18n.t('trans.manageSubmissionUsers.sentInviteEmailTo') +
+              ? this.$t('trans.manageSubmissionUsers.sentInviteEmailTo') +
                 `${selectedEmail}`
-              : i18n.t('trans.manageSubmissionUsers.sentUninvitedEmailTo') +
+              : this.$t('trans.manageSubmissionUsers.sentUninvitedEmailTo') +
                 `${selectedEmail}`,
           });
         }
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.manageSubmissionUsers.updateUserErrMsg'),
-          consoleError: i18n.t('trans.manageSubmissionUsers.updateUserErrMsg', {
-            submissionId: this.submissionId,
-            userId: userId,
-            error: error,
-          }),
+          text: this.$t('trans.manageSubmissionUsers.updateUserErrMsg'),
+          consoleError: this.$t(
+            'trans.manageSubmissionUsers.updateUserErrMsg',
+            {
+              submissionId: this.submissionId,
+              userId: userId,
+              error: error,
+            }
+          ),
         });
       } finally {
         this.isLoadingTable = false;
@@ -238,13 +246,13 @@ export default {
           <v-icon icon="mdi:mdi-account-multiple"></v-icon>
         </v-btn>
       </template>
-      <span :lang="lang">{{
+      <span :lang="locale">{{
         $t('trans.manageSubmissionUsers.manageTeamMembers')
       }}</span>
     </v-tooltip>
     <v-dialog v-model="dialog" width="600">
       <v-card :class="{ 'dir-rtl': isRTL }">
-        <v-card-title class="text-h5 pb-0" :lang="lang">
+        <v-card-title class="text-h5 pb-0" :lang="locale">
           {{ $t('trans.manageSubmissionUsers.manageTeamMembers') }}
         </v-card-title>
         <v-card-subtitle>
@@ -283,7 +291,7 @@ export default {
                   <template #no-data>
                     <div
                       class="px-2"
-                      :lang="lang"
+                      :lang="locale"
                       v-html="
                         $t('trans.manageSubmissionUsers.userNotFoundErrMsg')
                       "
@@ -313,17 +321,17 @@ export default {
                 :title="$t('trans.manageSubmissionUsers.add')"
                 @click="addUser"
               >
-                <span :lang="lang"
+                <span :lang="locale"
                   >{{ $t('trans.manageSubmissionUsers.add') }}
                 </span>
               </v-btn>
             </v-col>
           </v-row>
-          <div v-else :lang="lang">
+          <div v-else :lang="locale">
             {{ $t('trans.manageSubmissionUsers.draftFormInvite') }}
           </div>
 
-          <p class="mt-5" :lang="lang">
+          <p class="mt-5" :lang="locale">
             <strong
               >{{
                 $t('trans.manageSubmissionUsers.submissionTeamMembers')
@@ -339,19 +347,28 @@ export default {
             <v-table dense>
               <thead>
                 <tr>
-                  <th :class="isRTL ? 'text-right' : 'text-left'" :lang="lang">
+                  <th
+                    :class="isRTL ? 'text-right' : 'text-left'"
+                    :lang="locale"
+                  >
                     {{ $t('trans.manageSubmissionUsers.name') }}
                   </th>
-                  <th :class="isRTL ? 'text-right' : 'text-left'" :lang="lang">
+                  <th
+                    :class="isRTL ? 'text-right' : 'text-left'"
+                    :lang="locale"
+                  >
                     {{ $t('trans.manageSubmissionUsers.username') }}
                   </th>
-                  <th :class="isRTL ? 'text-right' : 'text-left'" :lang="lang">
+                  <th
+                    :class="isRTL ? 'text-right' : 'text-left'"
+                    :lang="locale"
+                  >
                     {{ $t('trans.manageSubmissionUsers.email') }}
                   </th>
                   <th
                     v-if="isDraft"
                     :class="isRTL ? 'text-right' : 'text-left'"
-                    :lang="lang"
+                    :lang="locale"
                   >
                     {{ $t('trans.manageSubmissionUsers.actions') }}
                   </th>
@@ -388,7 +405,7 @@ export default {
             :title="$t('trans.manageSubmissionUsers.close')"
             @click="dialog = false"
           >
-            <span :lang="lang">
+            <span :lang="locale">
               {{ $t('trans.manageSubmissionUsers.close') }}</span
             >
           </v-btn>
@@ -409,14 +426,14 @@ export default {
           ><span>Remove {{ userToDelete.username }}</span></template
         >
         <template #text>
-          <span :lang="lang">
+          <span :lang="locale">
             {{ $t('trans.manageSubmissionUsers.removeUserWarningMsg1') }}
             <strong>{{ userToDelete.username }}</strong
             >? {{ $t('trans.manageSubmissionUsers.removeUserWarningMsg2') }}
           </span>
         </template>
         <template #button-text-continue>
-          <span :lang="lang">{{
+          <span :lang="locale">{{
             $t('trans.manageSubmissionUsers.remove')
           }}</span>
         </template>
diff --git a/app/frontend/src/components/forms/submission/MySubmissionsActions.vue b/app/frontend/src/components/forms/submission/MySubmissionsActions.vue
index 7284def30..43a7bd776 100644
--- a/app/frontend/src/components/forms/submission/MySubmissionsActions.vue
+++ b/app/frontend/src/components/forms/submission/MySubmissionsActions.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 import DeleteSubmission from '~/components/forms/submission/DeleteSubmission.vue';
 import { useFormStore } from '~/store/form';
@@ -20,8 +21,13 @@ export default {
     },
   },
   emits: ['draft-deleted'],
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   computed: {
-    ...mapState(useFormStore, ['form', 'isRTL', 'lang']),
+    ...mapState(useFormStore, ['form', 'isRTL']),
     isCopyFromExistingSubmissionEnabled() {
       return this.form && this.form.enableCopyExistingSubmission;
     },
@@ -71,7 +77,7 @@ export default {
             :title="$t('trans.mySubmissionsActions.viewThisSubmission')"
           />
         </template>
-        <span :lang="lang">{{
+        <span :lang="locale">{{
           $t('trans.mySubmissionsActions.viewThisSubmission')
         }}</span>
       </v-tooltip>
@@ -105,7 +111,7 @@ export default {
               :title="$t('trans.mySubmissionsActions.copyThisSubmission')"
             />
           </template>
-          <span :lang="lang">{{
+          <span :lang="locale">{{
             $t('trans.mySubmissionsActions.copyThisSubmission')
           }}</span>
         </v-tooltip>
@@ -137,7 +143,7 @@ export default {
               :title="$t('trans.mySubmissionsActions.editThisDraft')"
             />
           </template>
-          <span :lang="lang">{{
+          <span :lang="locale">{{
             $t('trans.mySubmissionsActions.editThisDraft')
           }}</span>
         </v-tooltip>
diff --git a/app/frontend/src/components/forms/submission/MySubmissionsTable.vue b/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
index 63b76e357..dd477bf10 100644
--- a/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
+++ b/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapActions, mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
-import { i18n } from '~/internationalization';
 import BaseFilter from '~/components/base/BaseFilter.vue';
 import MySubmissionsActions from '~/components/forms/submission/MySubmissionsActions.vue';
 import { useFormStore } from '~/store/form';
@@ -17,6 +17,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       filterData: [],
@@ -42,7 +47,6 @@ export default {
       'formFields',
       'submissionList',
       'isRTL',
-      'lang',
       'totalSubmissions',
     ]),
 
@@ -52,41 +56,41 @@ export default {
     BASE_HEADERS() {
       let headers = [
         {
-          title: i18n.t('trans.mySubmissionsTable.confirmationId'),
+          title: this.$t('trans.mySubmissionsTable.confirmationId'),
           align: 'start',
           key: 'confirmationId',
           sortable: true,
         },
         {
-          title: i18n.t('trans.mySubmissionsTable.createdBy'),
+          title: this.$t('trans.mySubmissionsTable.createdBy'),
           key: 'createdBy',
           sortable: true,
         },
         {
-          title: i18n.t('trans.mySubmissionsTable.statusUpdatedBy'),
+          title: this.$t('trans.mySubmissionsTable.statusUpdatedBy'),
           key: 'username',
           sortable: true,
         },
         {
-          title: i18n.t('trans.mySubmissionsTable.status'),
+          title: this.$t('trans.mySubmissionsTable.status'),
           key: 'status',
           sortable: true,
         },
         {
-          title: i18n.t('trans.mySubmissionsTable.submissionDate'),
+          title: this.$t('trans.mySubmissionsTable.submissionDate'),
           key: 'submittedDate',
           sortable: true,
         },
       ];
       if (this.showDraftLastEdited || !this.formId) {
         headers.splice(headers.length - 1, 0, {
-          title: i18n.t('trans.mySubmissionsTable.draftUpdatedBy'),
+          title: this.$t('trans.mySubmissionsTable.draftUpdatedBy'),
           align: 'start',
           key: 'updatedBy',
           sortable: true,
         });
         headers.splice(headers.length - 1, 0, {
-          title: i18n.t('trans.mySubmissionsTable.draftLastEdited'),
+          title: this.$t('trans.mySubmissionsTable.draftLastEdited'),
           align: 'start',
           key: 'lastEdited',
           sortable: true,
@@ -305,7 +309,7 @@ export default {
       >
         <!-- page title -->
         <div>
-          <h1 :lang="lang">
+          <h1 :lang="locale">
             {{ $t('trans.mySubmissionsTable.previousSubmissions') }}
           </h1>
           <h3>{{ formId ? form.name : 'All Forms' }}</h3>
@@ -325,7 +329,7 @@ export default {
                 @click="onShowColumnDialog"
               />
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.mySubmissionsTable.selectColumns')
             }}</span>
           </v-tooltip>
@@ -348,7 +352,7 @@ export default {
                 />
               </router-link>
             </template>
-            <span :lang="lang">{{
+            <span :lang="locale">{{
               $t('trans.mySubmissionsTable.createNewSubmission')
             }}</span>
           </v-tooltip>
@@ -371,7 +375,7 @@ export default {
         hide-details
         class="pb-5"
         :class="{ label: isRTL }"
-        :lang="lang"
+        :lang="locale"
       />
     </div>
 
@@ -390,7 +394,7 @@ export default {
           ? $t('trans.mySubmissionsTable.noMatchingRecordText')
           : $t('trans.mySubmissionsTable.noDataText')
       "
-      :lang="lang"
+      :lang="locale"
     >
       <template #item.lastEdited="{ item }">
         {{ $filters.formatDateLong(item.lastEdited) }}
@@ -425,7 +429,7 @@ export default {
         @cancel-filter-data="showColumnsDialog = false"
       >
         <template #filter-title
-          ><span :lang="lang">{{
+          ><span :lang="locale">{{
             $t('trans.mySubmissionsTable.filterTitle')
           }}</span></template
         >
diff --git a/app/frontend/src/components/forms/submission/NotesPanel.vue b/app/frontend/src/components/forms/submission/NotesPanel.vue
index 4540ab7a5..cef7311af 100644
--- a/app/frontend/src/components/forms/submission/NotesPanel.vue
+++ b/app/frontend/src/components/forms/submission/NotesPanel.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapState, mapActions } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
-import { i18n } from '~/internationalization';
 import { formService, rbacService } from '~/services';
 
 import { useFormStore } from '~/store/form';
@@ -14,6 +14,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       loading: true,
@@ -26,7 +31,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
   },
   mounted() {
     this.getNotes();
@@ -42,15 +47,15 @@ export default {
         };
         const response = await formService.addNote(this.submissionId, body);
         if (!response.data) {
-          throw new Error(i18n.t('trans.notesPanel.noResponseErr'));
+          throw new Error(this.$t('trans.notesPanel.noResponseErr'));
         }
         this.showNoteField = false;
         this.newNote = '';
         this.getNotes();
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.notesPanel.errorMesg'),
-          consoleError: i18n.t('trans.notesPanel.consoleErrMsg') + `${error}`,
+          text: this.$t('trans.notesPanel.errorMesg'),
+          consoleError: this.$t('trans.notesPanel.consoleErrMsg') + `${error}`,
         });
       }
     },
@@ -64,9 +69,9 @@ export default {
         this.notes = response.data;
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.notesPanel.errorMesg'),
+          text: this.$t('trans.notesPanel.errorMesg'),
           consoleError:
-            i18n.t('trans.notesPanel.fetchConsoleErrMsg') +
+            this.$t('trans.notesPanel.fetchConsoleErrMsg') +
             `${this.submissionId}: ${error}`,
         });
       } finally {
@@ -89,7 +94,7 @@ export default {
       @click="showNotesContent = !showNotesContent"
     >
       <div cols="12" sm="6">
-        <h2 class="note-heading" :lang="lang">
+        <h2 class="note-heading" :lang="locale">
           {{ $t('trans.notesPanel.notes') }}
           <v-icon>{{
             showNotesContent
@@ -103,7 +108,7 @@ export default {
 
       <div :class="[{ 'text-left': isRTL }, 'd-flex', 'align-items-center']">
         <!-- Text for number of notes -->
-        <span class="notes-text" :lang="lang">
+        <span class="notes-text" :lang="locale">
           <strong>{{ $t('trans.notesPanel.totalNotes') }}</strong>
           {{ notes.length }}
         </span>
@@ -123,7 +128,7 @@ export default {
               <v-icon icon="mdi:mdi-plus"></v-icon>
             </v-btn>
           </template>
-          <span :lang="lang">{{ $t('trans.notesPanel.addNewNote') }}</span>
+          <span :lang="locale">{{ $t('trans.notesPanel.addNewNote') }}</span>
         </v-tooltip>
       </div>
     </div>
@@ -139,7 +144,7 @@ export default {
           variant="outlined"
           data-test="canAddNotes"
           solid
-          :lang="lang"
+          :lang="locale"
         />
         <v-row>
           <v-col>
@@ -151,7 +156,7 @@ export default {
               data-test="canCancelNote"
               @click="showNoteField = false"
             >
-              <span :lang="lang">{{ $t('trans.notesPanel.cancel') }}</span>
+              <span :lang="locale">{{ $t('trans.notesPanel.cancel') }}</span>
             </v-btn>
             <v-btn
               class="wide-button"
@@ -161,7 +166,7 @@ export default {
               :title="$t('trans.notesPanel.addNote')"
               @click="addNote"
             >
-              <span :lang="lang">{{ $t('trans.notesPanel.addNote') }}</span>
+              <span :lang="locale">{{ $t('trans.notesPanel.addNote') }}</span>
             </v-btn>
           </v-col>
         </v-row>
diff --git a/app/frontend/src/components/forms/submission/StatusPanel.vue b/app/frontend/src/components/forms/submission/StatusPanel.vue
index 867492fd9..bc5b1aa9b 100644
--- a/app/frontend/src/components/forms/submission/StatusPanel.vue
+++ b/app/frontend/src/components/forms/submission/StatusPanel.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapState } from 'pinia';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
 
 import StatusTable from '~/components/forms/submission/StatusTable.vue';
 import { formService, rbacService } from '~/services';
@@ -24,6 +24,11 @@ export default {
     },
   },
   emits: ['draft-enabled', 'note-updated'],
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       assignee: null,
@@ -51,7 +56,6 @@ export default {
       'formSubmission',
       'submissionUsers',
       'isRTL',
-      'lang',
     ]),
     // State Machine
     showActionDate() {
@@ -90,16 +94,16 @@ export default {
       let actionStatus = '';
       switch (action) {
         case 'ASSIGN':
-          actionStatus = i18n.t('trans.statusPanel.assign');
+          actionStatus = this.$t('trans.statusPanel.assign');
           break;
         case 'COMPLETE':
-          actionStatus = i18n.t('trans.statusPanel.complete');
+          actionStatus = this.$t('trans.statusPanel.complete');
           break;
         case 'REVISE':
-          actionStatus = i18n.t('trans.statusPanel.revise');
+          actionStatus = this.$t('trans.statusPanel.revise');
           break;
         case 'UPDATE':
-          actionStatus = i18n.t('trans.statusPanel.update');
+          actionStatus = this.$t('trans.statusPanel.update');
           break;
         default:
         // code block
@@ -135,9 +139,9 @@ export default {
           }
         } catch (error) {
           this.addNotification({
-            text: i18n.t('trans.statusPanel.fetchSubmissionUsersErr'),
+            text: this.$t('trans.statusPanel.fetchSubmissionUsersErr'),
             consoleError:
-              i18n.t('trans.statusPanel.fetchSubmissionUsersConsErr') +
+              this.$t('trans.statusPanel.fetchSubmissionUsersConsErr') +
               `${this.submissionId}: ${error}`,
           });
         }
@@ -182,7 +186,7 @@ export default {
 
         this.statusHistory = statuses.data;
         if (!this.statusHistory.length || !this.statusHistory[0]) {
-          throw new Error(i18n.t('trans.statusPanel.noStatusesFound'));
+          throw new Error(this.$t('trans.statusPanel.noStatusesFound'));
         } else {
           // Statuses are returned in date precedence, the 0th item in the array is the current status
           this.currentStatus = this.statusHistory[0];
@@ -191,7 +195,7 @@ export default {
           const scRes = await formService.getStatusCodes(this.formId);
           const statusCodes = scRes.data;
           if (!statusCodes.length) {
-            throw new Error(i18n.t('trans.statusPanel.statusCodesErr'));
+            throw new Error(this.$t('trans.statusPanel.statusCodesErr'));
           }
           // For the CURRENT status, add the code details (display name, next codes etc)
           this.currentStatus.statusCodeDetail = statusCodes.find(
@@ -204,9 +208,9 @@ export default {
         }
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.statusPanel.notifyErrorCode'),
+          text: this.$t('trans.statusPanel.notifyErrorCode'),
           consoleError:
-            i18n.t('trans.statusPanel.notifyConsoleErrorCode') +
+            this.$t('trans.statusPanel.notifyConsoleErrorCode') +
             `${error.message}`,
         });
       } finally {
@@ -228,7 +232,7 @@ export default {
       try {
         if (this.$refs.statusPanelForm.validate()) {
           if (!this.statusToSet) {
-            throw new Error(i18n.t('trans.statusPanel.status'));
+            throw new Error(this.$t('trans.statusPanel.status'));
           }
 
           const statusBody = {
@@ -248,7 +252,7 @@ export default {
           );
           if (!statusResponse.data) {
             throw new Error(
-              i18n.t('trans.statusPanel.updtSubmissionsStatusErr')
+              this.$t('trans.statusPanel.updtSubmissionsStatusErr')
             );
           }
 
@@ -277,7 +281,9 @@ export default {
               noteBody
             );
             if (!response.data) {
-              throw new Error(i18n.t('trans.statusPanel.addNoteNoReponserErr'));
+              throw new Error(
+                this.$t('trans.statusPanel.addNoteNoReponserErr')
+              );
             }
             // Update the parent if the note was updated
             this.$emit('note-updated');
@@ -287,8 +293,8 @@ export default {
         }
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.statusPanel.addNoteErrMsg'),
-          consoleError: i18n.t('trans.statusPanel.addNoteConsoleErrMsg', {
+          text: this.$t('trans.statusPanel.addNoteErrMsg'),
+          consoleError: this.$t('trans.statusPanel.addNoteConsoleErrMsg', {
             error: error,
           }),
         });
@@ -305,7 +311,7 @@ export default {
       data-test="showStatusPanel"
       @click="showStatusContent = !showStatusContent"
     >
-      <h2 class="status-heading" :class="{ 'dir-rtl': isRTL }" :lang="lang">
+      <h2 class="status-heading" :class="{ 'dir-rtl': isRTL }" :lang="locale">
         {{ $t('trans.formSubmission.status') }}
         <v-icon>{{
           showStatusContent
@@ -316,7 +322,7 @@ export default {
         }}</v-icon>
       </h2>
       <!-- Show <p> here for screens greater than 959px  -->
-      <p class="hide-on-narrow" :lang="lang">
+      <p class="hide-on-narrow" :lang="locale">
         <span :class="isRTL ? 'status-details-rtl' : 'status-details'">
           <strong>{{ $t('trans.statusPanel.currentStatus') }}</strong>
           {{ currentStatus.code }}
@@ -337,7 +343,7 @@ export default {
     >
       <div v-if="showStatusContent" class="d-flex flex-column flex-1-1-100">
         <!-- Show <p> here for screens less than 960px  -->
-        <p class="hide-on-wide" :lang="lang">
+        <p class="hide-on-wide" :lang="locale">
           <strong>{{ $t('trans.statusPanel.currentStatus') }}</strong>
           {{ currentStatus.code }}
           <br />
@@ -353,7 +359,7 @@ export default {
           lazy-validation
           style="width: inherit"
         >
-          <label :lang="lang">{{
+          <label :lang="locale">{{
             $t('trans.statusPanel.assignOrUpdateStatus')
           }}</label>
           <v-select
@@ -381,7 +387,7 @@ export default {
                     ></v-icon>
                   </template>
                   <span
-                    :lang="lang"
+                    :lang="locale"
                     v-html="
                       $t('trans.statusPanel.assignSubmissnToFormReviewer')
                     "
@@ -405,7 +411,7 @@ export default {
                 :rules="[
                   (v) => !!v || $t('trans.statusPanel.assigneeIsRequired'),
                 ]"
-                :lang="lang"
+                :lang="locale"
               >
                 <!-- selected user -->
                 <template #chip="{ props, item }">
@@ -434,7 +440,7 @@ export default {
                   @click="assignToCurrentUser"
                 >
                   <v-icon class="mr-1" icon="mdi:mdi-account"></v-icon>
-                  <span :lang="lang">{{
+                  <span :lang="locale">{{
                     $t('trans.statusPanel.assignToMe')
                   }}</span>
                 </v-btn>
@@ -447,7 +453,7 @@ export default {
                 variant="outlined"
                 density="compact"
                 :class="{ 'dir-rtl': isRTL }"
-                :lang="lang"
+                :lang="locale"
                 data-test="showRecipientEmail"
               />
             </div>
@@ -456,11 +462,11 @@ export default {
               <v-checkbox
                 v-model="addComment"
                 :label="$t('trans.statusPanel.attachCommentToEmail')"
-                :lang="lang"
+                :lang="locale"
                 data-test="canAttachCommentToEmail"
               />
               <div v-if="addComment">
-                <label :lang="lang">{{
+                <label :lang="locale">{{
                   $t('trans.statusPanel.emailComment')
                 }}</label>
                 <v-textarea
@@ -494,7 +500,7 @@ export default {
                     :title="$t('trans.statusPanel.viewHistory')"
                     data-test="viewHistoryButton"
                   >
-                    <span :lang="lang">{{
+                    <span :lang="locale">{{
                       $t('trans.statusPanel.viewHistory')
                     }}</span>
                   </v-btn>
@@ -514,7 +520,7 @@ export default {
                   <v-card-title
                     class="text-h5 pb-0"
                     :class="{ 'dir-rtl': isRTL }"
-                    :lang="lang"
+                    :lang="locale"
                     >{{ $t('trans.statusPanel.statusHistory') }}</v-card-title
                   >
 
@@ -533,7 +539,7 @@ export default {
                       data-test="canCloseStatusPanel"
                       @click="historyDialog = false"
                     >
-                      <span :lang="lang">{{
+                      <span :lang="locale">{{
                         $t('trans.statusPanel.close')
                       }}</span>
                     </v-btn>
diff --git a/app/frontend/src/components/forms/submission/StatusTable.vue b/app/frontend/src/components/forms/submission/StatusTable.vue
index 80d7ac52c..9df9d3b81 100644
--- a/app/frontend/src/components/forms/submission/StatusTable.vue
+++ b/app/frontend/src/components/forms/submission/StatusTable.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapState, mapActions } from 'pinia';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
 
 import { formService } from '~/services';
 import { useFormStore } from '~/store/form';
@@ -13,6 +13,11 @@ export default {
       type: String,
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       loading: true,
@@ -20,17 +25,17 @@ export default {
     };
   },
   computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
     headers() {
       return [
-        { title: i18n.t('trans.statusTable.status'), key: 'code' },
+        { title: this.$t('trans.statusTable.status'), key: 'code' },
         {
-          title: i18n.t('trans.statusTable.dateStatusChanged'),
+          title: this.$t('trans.statusTable.dateStatusChanged'),
           align: 'start',
           key: 'createdAt',
         },
-        { title: i18n.t('trans.statusTable.assignee'), key: 'user' },
-        { title: i18n.t('trans.statusTable.updatedBy'), key: 'createdBy' },
+        { title: this.$t('trans.statusTable.assignee'), key: 'user' },
+        { title: this.$t('trans.statusTable.updatedBy'), key: 'createdBy' },
       ];
     },
   },
@@ -48,9 +53,10 @@ export default {
         this.statuses = response.data;
       } catch (error) {
         this.addNotification({
-          text: i18n.t('trans.statusTable.getSubmissionStatusErr'),
+          text: this.$t('trans.statusTable.getSubmissionStatusErr'),
           consoleError:
-            i18n.t('trans.statusTable.getSubmissionStatusConsErr') + `${error}`,
+            this.$t('trans.statusTable.getSubmissionStatusConsErr') +
+            `${error}`,
         });
       } finally {
         this.loading = false;
@@ -72,7 +78,7 @@ export default {
       :loading-text="$t('trans.statusTable.loadingText')"
       item-key="statusId"
       class="status-table"
-      :lang="lang"
+      :lang="locale"
     >
       <template #item.createdAt="{ item }">
         <span>{{ $filters.formatDate(item.createdAt) }}</span>
diff --git a/app/frontend/src/components/infolinks/GeneralLayout.vue b/app/frontend/src/components/infolinks/GeneralLayout.vue
index f7320636c..10284a5f4 100644
--- a/app/frontend/src/components/infolinks/GeneralLayout.vue
+++ b/app/frontend/src/components/infolinks/GeneralLayout.vue
@@ -1,9 +1,9 @@
 <script>
 import { mapActions, mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 import ProactiveHelpDialog from '~/components/infolinks/ProactiveHelpDialog.vue';
 import ProactiveHelpPreviewDialog from '~/components/infolinks/ProactiveHelpPreviewDialog.vue';
-import { i18n } from '~/internationalization';
 import { useFormStore } from '~/store/form';
 import { useAdminStore } from '~/store/admin';
 
@@ -26,6 +26,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       component: {},
@@ -38,18 +43,18 @@ export default {
     };
   },
   computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
     ...mapState(useAdminStore, ['fcProactiveHelpImageUrl']),
     headers() {
       return [
         {
-          title: i18n.t('trans.generalLayout.formTitle'),
+          title: this.$t('trans.generalLayout.formTitle'),
           align: 'start',
           key: 'componentName',
           width: '1%',
         },
         {
-          title: i18n.t('trans.generalLayout.actions'),
+          title: this.$t('trans.generalLayout.actions'),
           align: 'end',
           key: 'actions',
           filterable: false,
@@ -141,7 +146,7 @@ export default {
       :items="layoutList"
       :loading="loading"
       :loading-text="$t('trans.generalLayout.loadingText')"
-      :lang="lang"
+      :lang="locale"
     >
       <template #item.componentName="{ item }">
         <div>
@@ -165,7 +170,7 @@ export default {
               <span
                 class="d-none d-sm-flex"
                 style="font-size: 16px"
-                :lang="lang"
+                :lang="locale"
                 >{{ $t('trans.generalLayout.edit') }}</span
               >
             </v-btn>
@@ -184,7 +189,7 @@ export default {
               <span
                 class="d-none d-sm-flex"
                 style="font-size: 16px"
-                :lang="lang"
+                :lang="locale"
                 >{{ $t('trans.generalLayout.preview') }}</span
               >
             </v-btn>
@@ -213,7 +218,7 @@ export default {
               <span
                 style="width: 120px !important; font-size: 16px"
                 class="d-none d-sm-flex"
-                :lang="lang"
+                :lang="locale"
                 >{{
                   publish[index]
                     ? $t('trans.generalLayout.published')
diff --git a/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue b/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue
index 60f7f1815..99b54a85b 100644
--- a/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue
+++ b/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapState, mapActions } from 'pinia';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
+
 import { useAdminStore } from '~/store/admin';
 import { useFormStore } from '~/store/form';
 
@@ -12,6 +13,11 @@ export default {
     groupName: { type: String, required: true },
   },
   emits: ['close-dialog'],
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       componentId: this?.component?.id ? this.component.id : undefined,
@@ -42,14 +48,14 @@ export default {
             !value ||
             !value.length ||
             value[0].size < 500000 ||
-            i18n.t('trans.proactiveHelpDialog.largeImgTxt')
+            this.$t('trans.proactiveHelpDialog.largeImgTxt')
           );
         },
       ],
     };
   },
   computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
   },
   watch: {
     showDialog(value) {
@@ -134,7 +140,7 @@ export default {
         <v-container>
           <v-row>
             <v-col>
-              <span class="text-h5" style="font-weight: bold" :lang="lang">{{
+              <span class="text-h5" style="font-weight: bold" :lang="locale">{{
                 $t('trans.proactiveHelpDialog.componentInfoLink')
               }}</span>
             </v-col>
@@ -145,7 +151,7 @@ export default {
                 style="margin: 0px; padding: 0px"
                 class="text-red"
                 :v-text="$t('trans.proactiveHelpDialog.learnMoreLinkTxt')"
-                :lang="lang"
+                :lang="locale"
               />
             </v-col>
           </v-row>
@@ -155,7 +161,7 @@ export default {
                 style="margin: 0px; padding: 0px"
                 class="text-red"
                 :v-text="$t('trans.proactiveHelpDialog.largeImgTxt')"
-                :lang="lang"
+                :lang="locale"
               />
             </v-col>
           </v-row>
@@ -163,7 +169,7 @@ export default {
           <v-row class="mt-5" no-gutters>
             <span
               class="text-decoration-underline mr-2 blackColorWrapper"
-              :lang="lang"
+              :lang="locale"
             >
               {{ $t('trans.proactiveHelpDialog.componentName') }}
             </span>
@@ -174,7 +180,7 @@ export default {
               <div class="d-flex flex-row align-center">
                 <p
                   class="mr-2 mt-2 text-decoration-underline blueColorWrapper"
-                  :lang="lang"
+                  :lang="locale"
                 >
                   {{ $t('trans.proactiveHelpDialog.learnMoreLink') }}
                 </p>
@@ -195,7 +201,7 @@ export default {
                 </v-col>
                 <v-checkbox v-model="isLinkEnabled" class="checkbox_data_cy">
                   <template #label>
-                    <span class="v-label" :lang="lang">{{
+                    <span class="v-label" :lang="locale">{{
                       !isLinkEnabled
                         ? $t('trans.proactiveHelpDialog.clickToEnableLink')
                         : $t('trans.proactiveHelpDialog.clickToDisableLink')
@@ -214,7 +220,7 @@ export default {
               class="mb-2 blackColorWrapper"
               :class="{ 'dir-rtl': isRTL }"
             >
-              <span :lang="lang">
+              <span :lang="locale">
                 {{ $t('trans.proactiveHelpDialog.description') }}</span
               >
             </v-col>
@@ -256,7 +262,7 @@ export default {
                         : $t('trans.proactiveHelpDialog.imageUpload')
                     "
                     class="file_upload_data-cy"
-                    :lang="lang"
+                    :lang="locale"
                     @update:model-value="selectImage"
                   ></v-file-input>
                 </v-col>
@@ -270,7 +276,7 @@ export default {
                   <v-btn
                     class="mr-4 saveButtonWrapper"
                     data-cy="more_help_info_link_save_button"
-                    :lang="lang"
+                    :lang="locale"
                     :title="$t('trans.proactiveHelpDialog.save')"
                     @click="submit"
                   >
@@ -279,7 +285,7 @@ export default {
                   <v-btn
                     class="cancelButtonWrapper"
                     data-cy="more_help_info_link_cancel_button"
-                    :lang="lang"
+                    :lang="locale"
                     :title="$t('trans.proactiveHelpDialog.cancel')"
                     @click="onCloseDialog"
                   >
diff --git a/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue b/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue
index 08c423ddc..dc66afe6d 100644
--- a/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue
+++ b/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue
@@ -1,5 +1,7 @@
 <script>
 import { mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import { useFormStore } from '~/store/form';
 
 export default {
@@ -9,13 +11,18 @@ export default {
     fcProactiveHelpImageUrl: undefined,
   },
   emits: ['close-dialog'],
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   data() {
     return {
       dialog: this.showDialog,
     };
   },
   computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
   },
   watch: {
     showDialog(value) {
@@ -89,7 +96,7 @@ export default {
                   disabledLink: component && component.moreHelpInfoLink === '',
                 }"
               >
-                <div class="mr-1 cursor" :lang="lang">
+                <div class="mr-1 cursor" :lang="locale">
                   {{ $t('trans.proactiveHelpPreviewDialog.learnMore') }}
                   <v-icon icon="mdi:mdi-arrow-top-right-bold-box" /></div
               ></a>
diff --git a/app/frontend/src/internationalization/trans/chefs/ar/ar.json b/app/frontend/src/internationalization/trans/chefs/ar/ar.json
index 925151a5e..c0c85a886 100644
--- a/app/frontend/src/internationalization/trans/chefs/ar/ar.json
+++ b/app/frontend/src/internationalization/trans/chefs/ar/ar.json
@@ -1,4 +1,5 @@
 {
+  "open": "يفتح",
   "date": {
     "date": "yyyy-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/de/de.json b/app/frontend/src/internationalization/trans/chefs/de/de.json
index e16590356..1562ea8a9 100644
--- a/app/frontend/src/internationalization/trans/chefs/de/de.json
+++ b/app/frontend/src/internationalization/trans/chefs/de/de.json
@@ -1,4 +1,5 @@
 {
+  "open": "Offen",
   "date": {
     "date": "jjjj-mm-tt"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/en/en.json b/app/frontend/src/internationalization/trans/chefs/en/en.json
index a9dccfe1e..dc8efe274 100644
--- a/app/frontend/src/internationalization/trans/chefs/en/en.json
+++ b/app/frontend/src/internationalization/trans/chefs/en/en.json
@@ -1,4 +1,5 @@
 {
+  "open": "Open",
   "date": {
     "date": "yyyy-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/es/es.json b/app/frontend/src/internationalization/trans/chefs/es/es.json
index a52f14881..2d5d8bbff 100644
--- a/app/frontend/src/internationalization/trans/chefs/es/es.json
+++ b/app/frontend/src/internationalization/trans/chefs/es/es.json
@@ -1,4 +1,5 @@
 {
+  "open": "Abierto",
   "date": {
     "date": "aaaa-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/fa/fa.json b/app/frontend/src/internationalization/trans/chefs/fa/fa.json
index 7b7bd149f..b31755e88 100644
--- a/app/frontend/src/internationalization/trans/chefs/fa/fa.json
+++ b/app/frontend/src/internationalization/trans/chefs/fa/fa.json
@@ -1,4 +1,5 @@
 {
+  "open": "باز کن",
   "date": {
     "date": "yyyy-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/fr/fr.json b/app/frontend/src/internationalization/trans/chefs/fr/fr.json
index ae20b3f8a..5693bbd64 100644
--- a/app/frontend/src/internationalization/trans/chefs/fr/fr.json
+++ b/app/frontend/src/internationalization/trans/chefs/fr/fr.json
@@ -1,4 +1,5 @@
 {
+  "open": "Ouvrir",
   "date": {
     "date": "aaaa-mm-jj"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/hi/hi.json b/app/frontend/src/internationalization/trans/chefs/hi/hi.json
index 6e6ac0f98..953e53e23 100644
--- a/app/frontend/src/internationalization/trans/chefs/hi/hi.json
+++ b/app/frontend/src/internationalization/trans/chefs/hi/hi.json
@@ -1,4 +1,5 @@
 {
+  "open": "खुला",
   "date": {
     "date": "yyyy-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/it/it.json b/app/frontend/src/internationalization/trans/chefs/it/it.json
index 0de4b1206..8e7320c4e 100644
--- a/app/frontend/src/internationalization/trans/chefs/it/it.json
+++ b/app/frontend/src/internationalization/trans/chefs/it/it.json
@@ -1,4 +1,5 @@
 {
+  "open": "Aprire",
   "date": {
     "date": "aaaa-mm-gg"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/ja/ja.json b/app/frontend/src/internationalization/trans/chefs/ja/ja.json
index 565df047a..4ed001333 100644
--- a/app/frontend/src/internationalization/trans/chefs/ja/ja.json
+++ b/app/frontend/src/internationalization/trans/chefs/ja/ja.json
@@ -1,4 +1,5 @@
 {
+  "open": "開ける",
   "date": {
     "date": "yyyy-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/ko/ko.json b/app/frontend/src/internationalization/trans/chefs/ko/ko.json
index a4532db38..bc8f9fe3e 100644
--- a/app/frontend/src/internationalization/trans/chefs/ko/ko.json
+++ b/app/frontend/src/internationalization/trans/chefs/ko/ko.json
@@ -1,4 +1,5 @@
 {
+  "open": "열려 있는",
   "date": {
     "date": "yyyy-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/pa/pa.json b/app/frontend/src/internationalization/trans/chefs/pa/pa.json
index eba62de18..bf68bb416 100644
--- a/app/frontend/src/internationalization/trans/chefs/pa/pa.json
+++ b/app/frontend/src/internationalization/trans/chefs/pa/pa.json
@@ -1,4 +1,5 @@
 {
+  "open": "ਖੁੱਲਾ",
   "date": {
     "date": "yyyy-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/pt/pt.json b/app/frontend/src/internationalization/trans/chefs/pt/pt.json
index a7e83f7ff..ec9ed5a75 100644
--- a/app/frontend/src/internationalization/trans/chefs/pt/pt.json
+++ b/app/frontend/src/internationalization/trans/chefs/pt/pt.json
@@ -1,4 +1,5 @@
 {
+  "open": "Abrir",
   "date": {
     "date": "aaaa-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/ru/ru.json b/app/frontend/src/internationalization/trans/chefs/ru/ru.json
index 98f76a57e..f584cc74f 100644
--- a/app/frontend/src/internationalization/trans/chefs/ru/ru.json
+++ b/app/frontend/src/internationalization/trans/chefs/ru/ru.json
@@ -1,4 +1,5 @@
 {
+  "open": "открыть",
   "date": {
     "date": "гггг-мм-дд"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/tl/tl.json b/app/frontend/src/internationalization/trans/chefs/tl/tl.json
index afecd18e3..f6fe50241 100644
--- a/app/frontend/src/internationalization/trans/chefs/tl/tl.json
+++ b/app/frontend/src/internationalization/trans/chefs/tl/tl.json
@@ -1,4 +1,5 @@
 {
+  "open": "Bukas",
   "date": {
     "date": "yyyy-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/uk/uk.json b/app/frontend/src/internationalization/trans/chefs/uk/uk.json
index 0341e70d1..b27db03c1 100644
--- a/app/frontend/src/internationalization/trans/chefs/uk/uk.json
+++ b/app/frontend/src/internationalization/trans/chefs/uk/uk.json
@@ -1,4 +1,5 @@
 {
+  "open": "ВІДЧИНЕНО",
   "date": {
     "date": "рррр-мм-дд"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/vi/vi.json b/app/frontend/src/internationalization/trans/chefs/vi/vi.json
index a8c64e5ea..ebd4edd8f 100644
--- a/app/frontend/src/internationalization/trans/chefs/vi/vi.json
+++ b/app/frontend/src/internationalization/trans/chefs/vi/vi.json
@@ -1,4 +1,5 @@
 {
+  "open": "mở",
   "date": {
     "date": "yyyy-mm-dd"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/zh/zh.json b/app/frontend/src/internationalization/trans/chefs/zh/zh.json
index 5e917a3a7..e1ca464bc 100644
--- a/app/frontend/src/internationalization/trans/chefs/zh/zh.json
+++ b/app/frontend/src/internationalization/trans/chefs/zh/zh.json
@@ -1,4 +1,5 @@
 {
+  "open": "打开",
   "date": {
     "date": "年-月-日"
   },
diff --git a/app/frontend/src/internationalization/trans/chefs/zhTW/zh-TW.json b/app/frontend/src/internationalization/trans/chefs/zhTW/zh-TW.json
index 1df310f5c..e85716ed4 100644
--- a/app/frontend/src/internationalization/trans/chefs/zhTW/zh-TW.json
+++ b/app/frontend/src/internationalization/trans/chefs/zhTW/zh-TW.json
@@ -1,4 +1,5 @@
 {
+  "open": "打開",
   "date": {
     "date": "年-月-日"
   },
diff --git a/app/frontend/src/store/form.js b/app/frontend/src/store/form.js
index 26113c91b..a30cb6b6f 100644
--- a/app/frontend/src/store/form.js
+++ b/app/frontend/src/store/form.js
@@ -108,7 +108,6 @@ export const useFormStore = defineStore('form', {
     },
     formList: [],
     imageList: new Map(),
-    lang: 'en',
     isRTL: false,
     permissions: [],
     roles: [],
@@ -827,14 +826,6 @@ export const useFormStore = defineStore('form', {
       if (!this.form || this.form.isDirty === isDirty) return; // don't do anything if not changing the val (or if form is blank for some reason)
       this.form.isDirty = isDirty;
     },
-    async setMultiLanguage(lang) {
-      this.lang = lang;
-      if (lang === 'ar' || lang === 'fa') {
-        this.isRTL = true;
-      } else {
-        this.isRTL = false;
-      }
-    },
     async downloadFile(fileId) {
       try {
         this.downloadedFile = {};
diff --git a/app/frontend/src/views/About.vue b/app/frontend/src/views/About.vue
index 51a6852ed..b0ef3e7b3 100644
--- a/app/frontend/src/views/About.vue
+++ b/app/frontend/src/views/About.vue
@@ -1,14 +1,18 @@
 <script setup>
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
-import { computed } from 'vue';
-import { storeToRefs } from 'pinia';
+
+const { locale } = useI18n({ useScope: 'global' });
 
 const authStore = useAuthStore();
 const formStore = useFormStore();
 
 const { authenticated } = storeToRefs(authStore);
-const { isRTL, lang } = storeToRefs(formStore);
+const { isRTL } = storeToRefs(formStore);
 
 const howToVideoUrl = computed(() => import.meta.env.VITE_HOWTOURL);
 const chefsTourVideoUrl = computed(() => import.meta.env.VITE_CHEFSTOURURL);
@@ -19,10 +23,10 @@ const chefsTourVideoUrl = computed(() => import.meta.env.VITE_CHEFSTOURURL);
     <v-sheet class="help-highlight pa-5 text-center">
       <v-row justify="center">
         <v-col lg="8">
-          <h1 class="my-5 d-block" :locale="lang">
+          <h1 class="my-5 d-block" :lang="locale">
             {{ $t('trans.homePage.title') }}
           </h1>
-          <p :locale="lang">{{ $t('trans.homePage.subTitle') }}<br /></p>
+          <p :lang="locale">{{ $t('trans.homePage.subTitle') }}<br /></p>
 
           <v-btn
             :to="{ name: 'FormCreate' }"
@@ -35,15 +39,15 @@ const chefsTourVideoUrl = computed(() => import.meta.env.VITE_CHEFSTOURURL);
                 : $t('trans.homePage.createFormLabel')
             "
           >
-            <span v-if="!authenticated" :locale="lang">{{
+            <span v-if="!authenticated" :lang="locale">{{
               $t('trans.homePage.loginToStart')
             }}</span>
-            <span v-else :locale="lang">{{
+            <span v-else :lang="locale">{{
               $t('trans.homePage.createFormLabel')
             }}</span>
           </v-btn>
 
-          <h2 id="video" class="pt-5" :locale="lang">
+          <h2 id="video" class="pt-5" :lang="locale">
             {{ $t('trans.homePage.takeATourOfChefs') }}
           </h2>
           <div class="video-wrapper">
@@ -63,12 +67,12 @@ const chefsTourVideoUrl = computed(() => import.meta.env.VITE_CHEFSTOURURL);
 
     <v-row justify="center" class="example-text">
       <v-col cols="12" lg="4">
-        <h2 :lang="lang">
+        <h2 :lang="locale">
           {{ $t('trans.homePage.chefsHowToTitle') }}
         </h2>
-        <p :lang="lang">
+        <p :lang="locale">
           {{ $t('trans.homePage.chefsHowToSub') }}
-          <a :href="howToVideoUrl" target="_blank" :hreflang="lang"
+          <a :href="howToVideoUrl" target="_blank" :lang="locale"
             >{{ $t('trans.homePage.getStarted') }}!</a
           >
         </p>
@@ -78,17 +82,17 @@ const chefsTourVideoUrl = computed(() => import.meta.env.VITE_CHEFSTOURURL);
           alt="Drag and Drop demo"
           src="https://raw.githubusercontent.com/wiki/bcgov/common-hosted-form-service/images/quickstart.png"
           width="600px"
-          :lang="lang"
+          :lang="locale"
         />
       </v-col>
     </v-row>
 
     <v-row justify="center" class="example-text">
       <v-col cols="12" lg="4">
-        <h2 :lang="lang">
+        <h2 :lang="locale">
           {{ $t('trans.homePage.createCustomFormTitle') }}
         </h2>
-        <p :lang="lang">
+        <p :lang="locale">
           {{ $t('trans.homePage.createCustomFormSub1') }}
         </p>
       </v-col>
@@ -97,20 +101,20 @@ const chefsTourVideoUrl = computed(() => import.meta.env.VITE_CHEFSTOURURL);
           alt="Drag and Drop demo"
           src="https://raw.githubusercontent.com/wiki/bcgov/common-hosted-form-service/images/drag_drop.png"
           width="600px"
-          :lang="lang"
+          :lang="locale"
         />
       </v-col>
     </v-row>
 
     <v-row justify="center" class="example-text">
       <v-col cols="12" lg="4">
-        <h2 :lang="lang">
+        <h2 :lang="locale">
           {{ $t('trans.homePage.manageAccessTitle') }}
         </h2>
-        <p :lang="lang">
+        <p :lang="locale">
           {{ $t('trans.homePage.manageAccessSub1') }}
         </p>
-        <p :lang="lang">
+        <p :lang="locale">
           {{ $t('trans.homePage.manageAccessSub2') }}
         </p>
       </v-col>
@@ -119,7 +123,7 @@ const chefsTourVideoUrl = computed(() => import.meta.env.VITE_CHEFSTOURURL);
           alt="Export demo"
           src="https://raw.githubusercontent.com/wiki/bcgov/common-hosted-form-service/images/team-management.png"
           width="600px"
-          :lang="lang"
+          :lang="locale"
         />
       </v-col>
     </v-row>
@@ -127,10 +131,10 @@ const chefsTourVideoUrl = computed(() => import.meta.env.VITE_CHEFSTOURURL);
     <v-sheet class="help-highlight pa-5 text-center">
       <v-row justify="center">
         <v-col lg="8">
-          <h3 class="mb-5" :lang="lang">
+          <h3 class="mb-5" :lang="locale">
             {{ $t('trans.homePage.getStartedToChefs') }}
           </h3>
-          <p :lang="lang">
+          <p :lang="locale">
             {{ $t('trans.homePage.createOnlineTitle') }}
           </p>
           <v-btn
@@ -143,10 +147,10 @@ const chefsTourVideoUrl = computed(() => import.meta.env.VITE_CHEFSTOURURL);
                 : $t('trans.homePage.createFormLabel')
             "
           >
-            <span v-if="!authenticated" :lang="lang">{{
+            <span v-if="!authenticated" :lang="locale">{{
               $t('trans.homePage.logInToGetStarted')
             }}</span>
-            <span v-else :lang="lang">{{
+            <span v-else :lang="locale">{{
               $t('trans.homePage.createFormLabel')
             }}</span>
           </v-btn>
diff --git a/app/frontend/src/views/Error.vue b/app/frontend/src/views/Error.vue
index d88766d11..2e307ab5d 100644
--- a/app/frontend/src/views/Error.vue
+++ b/app/frontend/src/views/Error.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
+
 import { useAuthStore } from '~/store/auth';
-import { useFormStore } from '~/store/form';
+
+const { t, locale } = useI18n({ useScope: 'global' });
 
 const properties = defineProps({
   text: {
@@ -17,19 +19,17 @@ const properties = defineProps({
 });
 
 const authStore = useAuthStore();
-const formStore = useFormStore();
 
 const { authenticated, ready } = storeToRefs(authStore);
-const { lang } = storeToRefs(formStore);
 
 const TEXT = computed(() => {
   let text = properties.text;
   try {
     text = JSON.parse(text);
-    text = i18n.t(text.text, text.options);
+    text = t(text.text, text.options);
   } catch {
     // Can't parse JSON so it's probably already a locale
-    text = properties.translate ? i18n.t(text) : text;
+    text = properties.translate ? t(text) : text;
   }
   return text;
 });
@@ -46,7 +46,7 @@ const TEXT = computed(() => {
         :title="$t('trans.error.logout')"
         @click="authStore.logout"
       >
-        <span :lang="lang">{{ $t('trans.error.logout') }}</span>
+        <span :lang="locale">{{ $t('trans.error.logout') }}</span>
       </v-btn>
     </div>
   </v-container>
diff --git a/app/frontend/src/views/Login.vue b/app/frontend/src/views/Login.vue
index b98916123..9ab52d0d3 100644
--- a/app/frontend/src/views/Login.vue
+++ b/app/frontend/src/views/Login.vue
@@ -1,10 +1,12 @@
 <script setup>
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 import { useAuthStore } from '~/store/auth';
-import { useFormStore } from '~/store/form';
 import { useIdpStore } from '~/store/identityProviders';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 defineProps({
   idpHint: {
     type: Array,
@@ -13,18 +15,16 @@ defineProps({
 });
 
 const authStore = useAuthStore();
-const formStore = useFormStore();
 const idpStore = useIdpStore();
 
 const { authenticated, ready } = storeToRefs(authStore);
-const { lang } = storeToRefs(formStore);
 const { loginButtons } = storeToRefs(idpStore);
 </script>
 
 <template>
   <v-container class="text-center">
     <div v-if="ready && !authenticated">
-      <h1 class="my-6" :lang="lang">
+      <h1 class="my-6" :lang="locale">
         {{ $t('trans.login.authenticateWith') }}
       </h1>
       <v-row v-for="button in loginButtons" :key="button.code" justify="center">
@@ -43,7 +43,7 @@ const { loginButtons } = storeToRefs(idpStore);
       </v-row>
     </div>
     <div v-else-if="ready && authenticated">
-      <h1 class="my-6" :lang="lang">
+      <h1 class="my-6" :lang="locale">
         {{ $t('trans.login.alreadyLoggedIn') }}
       </h1>
       <router-link :to="{ name: 'About' }">
@@ -51,11 +51,11 @@ const { loginButtons } = storeToRefs(idpStore);
           class="ma-2"
           color="primary"
           size="large"
-          :lang="lang"
+          :lang="locale"
           :title="$t('trans.login.about')"
         >
           <v-icon start icon="mdi-home"></v-icon>
-          <span :lang="lang">{{ $t('trans.login.about') }}</span>
+          <span :lang="locale">{{ $t('trans.login.about') }}</span>
         </v-btn>
       </router-link>
     </div>
diff --git a/app/frontend/src/views/NotFound.vue b/app/frontend/src/views/NotFound.vue
index 71859ae6b..27657d13c 100755
--- a/app/frontend/src/views/NotFound.vue
+++ b/app/frontend/src/views/NotFound.vue
@@ -1,18 +1,16 @@
 <script setup>
-import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
-import { useFormStore } from '~/store/form';
-
-const { lang } = storeToRefs(useFormStore());
+const { locale } = useI18n({ useScope: 'global' });
 </script>
 
 <template>
   <v-container class="text-center">
-    <h1 class="my-6" :lang="lang">{{ $t('trans.notFound.pageNotFound') }}</h1>
+    <h1 class="my-6" :lang="locale">{{ $t('trans.notFound.pageNotFound') }}</h1>
     <router-link :to="{ name: 'About' }">
       <v-btn color="primary" size="large" :title="$t('trans.notFound.about')">
         <v-icon start icon="mdi-home"></v-icon>
-        <span :lang="lang">{{ $t('trans.notFound.about') }}</span>
+        <span :lang="locale">{{ $t('trans.notFound.about') }}</span>
       </v-btn>
     </router-link>
   </v-container>
diff --git a/app/frontend/src/views/admin/Form.vue b/app/frontend/src/views/admin/Form.vue
index b9c60248d..4fc5bf101 100644
--- a/app/frontend/src/views/admin/Form.vue
+++ b/app/frontend/src/views/admin/Form.vue
@@ -1,8 +1,12 @@
 <script setup>
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import AdministerForm from '~/components/admin/AdministerForm.vue';
 import { useFormStore } from '~/store/form';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 defineProps({
   f: {
     type: String,
@@ -10,12 +14,12 @@ defineProps({
   },
 });
 
-const { isRTL, lang } = storeToRefs(useFormStore());
+const { isRTL } = storeToRefs(useFormStore());
 </script>
 
 <template>
   <v-container>
-    <h1 class="mt-6" :lang="lang" :class="{ 'dir-rtl': isRTL }">
+    <h1 class="mt-6" :lang="locale" :class="{ 'dir-rtl': isRTL }">
       {{ $t('trans.admin.form.administerForm') }}
     </h1>
 
diff --git a/app/frontend/src/views/admin/Root.vue b/app/frontend/src/views/admin/Root.vue
index c5f722812..1430d5c64 100644
--- a/app/frontend/src/views/admin/Root.vue
+++ b/app/frontend/src/views/admin/Root.vue
@@ -1,14 +1,18 @@
 <script setup>
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import AdminPage from '~/components/admin/AdminPage.vue';
 import { useFormStore } from '~/store/form';
 
-const { isRTL, lang } = storeToRefs(useFormStore());
+const { locale } = useI18n({ useScope: 'global' });
+
+const { isRTL } = storeToRefs(useFormStore());
 </script>
 
 <template>
   <v-container>
-    <h1 class="mt-6" :class="{ 'dir-rtl': isRTL }" :lang="lang">
+    <h1 class="mt-6" :class="{ 'dir-rtl': isRTL }" :lang="locale">
       {{ $t('trans.admin.root.admin') }}
     </h1>
 
diff --git a/app/frontend/src/views/admin/User.vue b/app/frontend/src/views/admin/User.vue
index 39fbe9401..a48f2c16b 100644
--- a/app/frontend/src/views/admin/User.vue
+++ b/app/frontend/src/views/admin/User.vue
@@ -1,8 +1,12 @@
 <script setup>
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import AdministerUser from '~/components/admin/AdministerUser.vue';
 import { useFormStore } from '~/store/form';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 defineProps({
   u: {
     type: String,
@@ -10,12 +14,12 @@ defineProps({
   },
 });
 
-const { isRTL, lang } = storeToRefs(useFormStore());
+const { isRTL } = storeToRefs(useFormStore());
 </script>
 
 <template>
   <v-container>
-    <h1 class="mt-6" :class="{ 'dir-rtl': isRTL }" :lang="lang">
+    <h1 class="mt-6" :class="{ 'dir-rtl': isRTL }" :lang="locale">
       {{ $t('trans.admin.user.administerUser') }}
     </h1>
 
diff --git a/app/frontend/src/views/file/Download.vue b/app/frontend/src/views/file/Download.vue
index 8a710a1a3..f12664346 100644
--- a/app/frontend/src/views/file/Download.vue
+++ b/app/frontend/src/views/file/Download.vue
@@ -1,11 +1,14 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { computed, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { useFormStore } from '~/store/form';
 import { getDisposition } from '~/utils/transformUtils';
 import { AppPermissions } from '~/utils/constants';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 const properties = defineProps({
   id: {
     type: String,
@@ -15,7 +18,7 @@ const properties = defineProps({
 
 const formStore = useFormStore();
 
-const { downloadedFile, lang } = storeToRefs(formStore);
+const { downloadedFile } = storeToRefs(formStore);
 let downloadTimeout = null;
 
 // Set the downloadedFile to a null value on creation
@@ -66,24 +69,24 @@ onUnmounted(() => {
 <template>
   <BaseSecure :permission="APP_PERMS.VIEWS_FILE_DOWNLOAD">
     <v-container fluid class="center_vertical_content">
-      <h1 :lang="lang">{{ $t('trans.download.chefsDataExport') }}</h1>
+      <h1 :lang="locale">{{ $t('trans.download.chefsDataExport') }}</h1>
       <v-progress-circular
         v-if="!isFileDownloaded"
         :size="50"
         color="primary"
         indeterminate
       ></v-progress-circular>
-      <div v-if="!isFileDownloaded" :lang="lang">
+      <div v-if="!isFileDownloaded" :lang="locale">
         {{ $t('trans.download.preparingForDownloading') }}
       </div>
       <div
         v-if="isFileDownloaded"
         class="mt-5 center_vertical_content"
-        :lang="lang"
+        :lang="locale"
       >
         <v-icon class="mb-2" size="90" icon="mdi:mdi-file-download" /><br />
         If your file does not automatically download
-        <a href="#" :hreflang="lang" @click="getFile(id)">{{
+        <a href="#" :lang="locale" @click="getFile(id)">{{
           $t('trans.download.downloadInfoB')
         }}</a>
       </div>
diff --git a/app/frontend/src/views/form/Create.vue b/app/frontend/src/views/form/Create.vue
index 82c73ef84..bc94be225 100644
--- a/app/frontend/src/views/form/Create.vue
+++ b/app/frontend/src/views/form/Create.vue
@@ -2,26 +2,28 @@
 import { storeToRefs } from 'pinia';
 import { onBeforeRouteLeave } from 'vue-router';
 import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import FormDesigner from '~/components/designer/FormDesigner.vue';
 import FormDisclaimer from '~/components/designer/FormDisclaimer.vue';
 import FormSettings from '~/components/designer/FormSettings.vue';
 import FormProfile from '~/components/designer/FormProfile.vue';
-import { i18n } from '~/internationalization';
 import { useFormStore } from '~/store/form';
 import { AppPermissions, IdentityMode } from '~/utils/constants';
 
+const { t, locale } = useI18n({ useScope: 'global' });
+
 const formDesigner = ref(null);
 const settingsForm = ref(null);
 const settingsFormValid = ref(false);
 const step = ref(0);
 const stepper = ref(null);
 const disclaimerCheckbox = ref(false);
-const disclaimerRules = [(v) => !!v || i18n.t('trans.create.agreementErrMsg')];
+const disclaimerRules = [(v) => !!v || t('trans.create.agreementErrMsg')];
 
 const formStore = useFormStore();
 
-const { form, isRTL, lang } = storeToRefs(formStore);
+const { form, isRTL } = storeToRefs(formStore);
 const APP_PERMS = computed(() => AppPermissions);
 
 watch(form, () => {
@@ -31,7 +33,7 @@ watch(form, () => {
 
 onBeforeRouteLeave((_to, _from, next) => {
   form.value.isDirty
-    ? next(window.confirm(i18n.t('trans.create.confirmPageNav')))
+    ? next(window.confirm(t('trans.create.confirmPageNav')))
     : next();
 });
 
@@ -71,7 +73,7 @@ formStore.resetForm();
       <v-stepper-window>
         <v-stepper-window-item value="1">
           <v-form ref="settingsForm" v-model="settingsFormValid">
-            <h1 :lang="lang">
+            <h1 :lang="locale">
               {{ $t('trans.create.formSettings') }}
             </h1>
             <FormSettings />
@@ -80,7 +82,7 @@ formStore.resetForm();
 
             <BasePanel class="my-6">
               <template #title
-                ><span :lang="lang">{{
+                ><span :lang="locale">{{
                   $t('trans.create.disclaimer')
                 }}</span></template
               >
@@ -92,7 +94,7 @@ formStore.resetForm();
                 required="true"
               >
                 <template #label>
-                  <span :class="{ 'mr-2': isRTL }" :lang="lang">{{
+                  <span :class="{ 'mr-2': isRTL }" :lang="locale">{{
                     $t('trans.create.disclaimerStmt')
                   }}</span>
                 </template>
@@ -117,7 +119,7 @@ formStore.resetForm();
             :title="$t('trans.create.back')"
             @click="stepper.prev()"
           >
-            <span :lang="lang">{{ $t('trans.create.back') }}</span>
+            <span :lang="locale">{{ $t('trans.create.back') }}</span>
           </v-btn>
         </v-stepper-window-item>
       </v-stepper-window>
diff --git a/app/frontend/src/views/form/Preview.vue b/app/frontend/src/views/form/Preview.vue
index cf22add9b..124c50ef4 100644
--- a/app/frontend/src/views/form/Preview.vue
+++ b/app/frontend/src/views/form/Preview.vue
@@ -1,12 +1,16 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import BaseSecure from '~/components/base/BaseSecure.vue';
 import FormViewer from '~/components/designer/FormViewer.vue';
 
 import { useFormStore } from '~/store/form';
 import { AppPermissions } from '~/utils/constants';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 defineProps({
   d: {
     type: String,
@@ -22,7 +26,7 @@ defineProps({
   },
 });
 
-const { isRTL, lang } = storeToRefs(useFormStore());
+const { isRTL } = storeToRefs(useFormStore());
 
 const APP_PERMS = computed(() => AppPermissions);
 </script>
@@ -31,7 +35,7 @@ const APP_PERMS = computed(() => AppPermissions);
   <BaseSecure :permission="APP_PERMS.VIEWS_FORM_PREVIEW">
     <h1
       :class="{ 'dir-rtl': isRTL }"
-      :lang="lang"
+      :lang="locale"
       style="text-align: left !important"
     >
       {{ $t('trans.preview.preview') }}
@@ -44,7 +48,7 @@ const APP_PERMS = computed(() => AppPermissions);
             icon="mdi:mdi-help-circle-outline"
           />
         </template>
-        <span :lang="lang">
+        <span :lang="locale">
           {{ $t('trans.preview.previewToolTip') }}
         </span>
       </v-tooltip>
diff --git a/app/frontend/src/views/form/PublishForm.vue b/app/frontend/src/views/form/PublishForm.vue
index c6448bd9c..12444f485 100644
--- a/app/frontend/src/views/form/PublishForm.vue
+++ b/app/frontend/src/views/form/PublishForm.vue
@@ -1,12 +1,15 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { computed, onBeforeMount, provide, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import ManageForm from '~/components/forms/manage/ManageForm.vue';
 import ManageFormActions from '~/components/forms/manage/ManageFormActions.vue';
 import { AppPermissions, FormPermissions } from '~/utils/constants';
 import { useFormStore } from '~/store/form';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 const properties = defineProps({
   f: {
     type: String,
@@ -29,7 +32,7 @@ const loading = ref(true);
 const showManageForm = ref(false);
 
 const formStore = useFormStore();
-const { permissions, form, lang } = storeToRefs(formStore);
+const { permissions, form } = storeToRefs(formStore);
 
 const APP_PERMS = computed(() => AppPermissions);
 
@@ -80,7 +83,7 @@ onBeforeMount(async () => {
           >
             <!-- page title -->
             <div>
-              <h1 :lang="lang">{{ $t('trans.manageLayout.manageForm') }}</h1>
+              <h1 :lang="locale">{{ $t('trans.manageLayout.manageForm') }}</h1>
               <h3>{{ form.name }}</h3>
             </div>
             <div>
diff --git a/app/frontend/src/views/form/Success.vue b/app/frontend/src/views/form/Success.vue
index 2fcaec62f..5c3e7940c 100644
--- a/app/frontend/src/views/form/Success.vue
+++ b/app/frontend/src/views/form/Success.vue
@@ -1,11 +1,14 @@
 <script setup>
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 import FormViewer from '~/components/designer/FormViewer.vue';
 import RequestReceipt from '~/components/forms/RequestReceipt.vue';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
 
+const { locale } = useI18n({ useScope: 'global' });
+
 defineProps({
   s: {
     type: String,
@@ -14,7 +17,7 @@ defineProps({
 });
 
 const { email } = storeToRefs(useAuthStore());
-const { form, isRTL, lang } = storeToRefs(useFormStore());
+const { form, isRTL } = storeToRefs(useFormStore());
 </script>
 
 <template>
@@ -22,7 +25,7 @@ const { form, isRTL, lang } = storeToRefs(useFormStore());
     <FormViewer :submission-id="s" :read-only="true" display-title>
       <template #alert>
         <div class="mb-5" :class="{ 'dir-rtl': isRTL }">
-          <h1 class="mb-5" :lang="lang">
+          <h1 class="mb-5" :lang="locale">
             <v-icon
               size="large"
               color="success"
@@ -32,10 +35,10 @@ const { form, isRTL, lang } = storeToRefs(useFormStore());
           </h1>
           <div v-if="form.showSubmissionConfirmation">
             <h3>
-              <span class="d-print-none" :lang="lang">
+              <span class="d-print-none" :lang="locale">
                 {{ $t('trans.sucess.keepRecord') }}{{ ' ' }}
               </span>
-              <span :lang="lang">
+              <span :lang="locale">
                 {{ $t('trans.sucess.confirmationId') }}:
                 <mark>{{ s.substring(0, 8).toUpperCase() }}</mark>
               </span>
diff --git a/app/frontend/src/views/user/History.vue b/app/frontend/src/views/user/History.vue
index f1a91d680..e541b288a 100644
--- a/app/frontend/src/views/user/History.vue
+++ b/app/frontend/src/views/user/History.vue
@@ -1,13 +1,12 @@
 <script setup>
-import { storeToRefs } from 'pinia';
-import { useFormStore } from '~/store/form';
+import { useI18n } from 'vue-i18n';
 
-const { lang } = storeToRefs(useFormStore);
+const { locale } = useI18n({ useScope: 'global' });
 </script>
 
 <template>
   <BaseSecure>
-    <h1 class="my-6 text-center" :lang="lang">
+    <h1 class="my-6 text-center" :lang="locale">
       {{ $t('trans.history.submissnHistory') }}
     </h1>
   </BaseSecure>
diff --git a/app/frontend/src/views/user/Root.vue b/app/frontend/src/views/user/Root.vue
index 03dc04ad5..a52b512ef 100644
--- a/app/frontend/src/views/user/Root.vue
+++ b/app/frontend/src/views/user/Root.vue
@@ -1,8 +1,7 @@
 <script setup>
-import { storeToRefs } from 'pinia';
-import { useFormStore } from '~/store/form';
+import { useI18n } from 'vue-i18n';
 
-const { lang } = storeToRefs(useFormStore());
+const { locale } = useI18n({ useScope: 'global' });
 </script>
 
 <template>
@@ -14,7 +13,8 @@ const { lang } = storeToRefs(useFormStore());
         data-test="my-forms-btn"
         :title="$t('trans.user.root.myForms')"
       >
-        <span :lang="lang">{{ $t('trans.user.root.myForms') }}</span>
+        <span :lang="locale">{{ $t('trans.user.root.myForms') }}</span>
+        <span :lang="locale">{{ $t('trans.user.root.myForms') }}</span>
       </v-btn>
     </router-link>
     <router-link :to="{ name: 'UserHistory' }">
@@ -24,10 +24,10 @@ const { lang } = storeToRefs(useFormStore());
         data-test="history-btn"
         :title="$t('trans.user.root.history')"
       >
-        <span :lang="lang">{{ $t('trans.user.root.history') }}</span>
+        <span :lang="locale">{{ $t('trans.user.root.history') }}</span>
       </v-btn>
     </router-link>
-    <h1 class="text-center" :lang="lang">
+    <h1 class="text-center" :lang="locale">
       {{ $t('trans.user.root.user') }}
     </h1>
   </BaseSecure>
diff --git a/app/frontend/tests/unit/components/base/BaseInternationalization.spec.js b/app/frontend/tests/unit/components/base/BaseInternationalization.spec.js
index e9439da0e..378fe02fd 100644
--- a/app/frontend/tests/unit/components/base/BaseInternationalization.spec.js
+++ b/app/frontend/tests/unit/components/base/BaseInternationalization.spec.js
@@ -8,84 +8,48 @@ import { useFormStore } from '~/store/form';
 describe('BaseInternationalization.vue', () => {
   const pinia = createPinia();
   setActivePinia(pinia);
-  const formStore = useFormStore();
+  const formStore = useFormStore(pinia);
 
   beforeEach(() => {
-    formStore.lang = 'en';
+    formStore.$reset();
+
+    formStore.isRTL = false;
   });
 
   it('renders', async () => {
     const wrapper = mount(BaseInternationalization, {
       global: {
-        stubs: {
-          VDialog: {
-            name: 'VMenu',
-            template: '<div class="v-menu-stub"><slot /></div>',
-          },
-        },
+        plugins: [pinia],
       },
     });
 
     await flushPromises();
 
     // Default language
-    expect(wrapper.text()).toContain('English');
+    expect(wrapper.html()).toContain('v-select');
   });
 
-  it('changes language', async () => {
+  it('changes language should update the form stores isRTL', async () => {
     const wrapper = mount(BaseInternationalization, {
       global: {
-        stubs: {
-          VDialog: {
-            name: 'VMenu',
-            template: '<div class="v-menu-stub"><slot /></div>',
-          },
-        },
+        plugins: [pinia],
       },
     });
 
     await flushPromises();
 
-    // Default language
-    expect(wrapper.text()).toContain('English');
-
-    expect(formStore.lang).toBe('en');
-
-    wrapper.vm.languageSelected({
-      title: '简体中文 (Simplified Chinese)',
-      keyword: 'zh',
-    });
-
-    expect(formStore.lang).toBe('zh');
-
-    wrapper.vm.languageSelected({
-      title: '繁體中文 (Traditional Chinese)',
-      keyword: 'zhTW',
-    });
+    wrapper.vm.languageSelected('zh');
 
-    expect(formStore.lang).toBe('zhTW');
+    expect(formStore.isRTL).toBeFalsy();
 
-    wrapper.vm.languageSelected({
-      title: '繁體中文 (Traditional Chinese)',
-      keyword: 'zhTW',
-    });
+    wrapper.vm.languageSelected('zhTW');
 
-    expect(formStore.lang).toBe('zhTW');
+    wrapper.vm.languageSelected('zhTW');
 
-    wrapper.vm.languageSelected({
-      title: 'UNKNOWN',
-      keyword: 'zhCUSTOM',
-    });
+    wrapper.vm.languageSelected('zhCUSTOM');
 
-    expect(formStore.lang).toBe('zhCUSTOM');
-    expect(formStore.isRTL).toBeFalsy();
-
-    wrapper.vm.languageSelected({
-      title: 'عربى (Arabic)',
-      keyword: 'ar',
-    });
+    wrapper.vm.languageSelected('ar');
 
-    expect(formStore.lang).toBe('ar');
     expect(formStore.isRTL).toBeTruthy();
   });
 });
diff --git a/app/frontend/tests/unit/components/designer/profile/FormUseCaseProfile.spec.js b/app/frontend/tests/unit/components/designer/profile/FormUseCaseProfile.spec.js
index 208206f0c..7faa37120 100644
--- a/app/frontend/tests/unit/components/designer/profile/FormUseCaseProfile.spec.js
+++ b/app/frontend/tests/unit/components/designer/profile/FormUseCaseProfile.spec.js
@@ -1,9 +1,10 @@
 import FormUseCaseProfile from '~/components/designer/profile/FormUseCaseProfile.vue';
 import { useFormStore } from '~/store/form';
+import { FormProfileValues } from '~/utils/constants';
+
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { mount } from '@vue/test-utils';
-import { FormProfileValues } from '~/utils/constants';
 
 describe('FormUseCaseProfile.vue', () => {
   const pinia = createTestingPinia();
@@ -35,6 +36,7 @@ describe('FormUseCaseProfile.vue', () => {
     const select = wrapper.findComponent('[data-test="case-select"]');
 
     const items = select.componentVM.items;
+    console.log(items);
     expect(items).toEqual(FormProfileValues.USE_CASE);
   });
 });
diff --git a/app/frontend/tests/unit/components/designer/settings/FormFunctionalitySettings.spec.js b/app/frontend/tests/unit/components/designer/settings/FormFunctionalitySettings.spec.js
index 3efafb4d5..4981b3489 100644
--- a/app/frontend/tests/unit/components/designer/settings/FormFunctionalitySettings.spec.js
+++ b/app/frontend/tests/unit/components/designer/settings/FormFunctionalitySettings.spec.js
@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing';
-import { flushPromises, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { setActivePinia } from 'pinia';
 import { beforeEach, describe, expect, it } from 'vitest';
 import { ref } from 'vue';
diff --git a/app/frontend/tests/unit/i18n.config.js b/app/frontend/tests/unit/i18n.config.js
index 52e572e42..56f0c1f92 100644
--- a/app/frontend/tests/unit/i18n.config.js
+++ b/app/frontend/tests/unit/i18n.config.js
@@ -4,6 +4,26 @@ import { ref } from 'vue';
 
 const i18n = vi.fn(() => {});
 const translate = vi.fn(() => {});
+const locales = [
+  'ar',
+  'de',
+  'en',
+  'es',
+  'fa',
+  'fr',
+  'hi',
+  'it',
+  'ja',
+  'ko',
+  'pa',
+  'pt',
+  'ru',
+  'tl',
+  'uk',
+  'vi',
+  'zh',
+  'zhTW',
+];
 
 translate.mockImplementation((key, options = {}) => {
   return {
@@ -14,7 +34,7 @@ translate.mockImplementation((key, options = {}) => {
 
 i18n.mockImplementation(() => {
   return {
-    locale: 'en',
+    locale: ref('en'),
     t: translate,
   };
 });
@@ -26,6 +46,7 @@ vi.mock('vue-i18n', () => {
         global: {
           t: (key, _options = {}) => key,
         },
+        locale: ref('en'),
       };
     },
     useI18n: () => ({
@@ -38,8 +59,9 @@ vi.mock('vue-i18n', () => {
 config.global.mocks = {
   $i18n: () => ({
     locale: 'en',
+    availableLocales: locales,
   }),
-  $t: (tKey) => tKey,
+  $t: (key, _options = {}) => key,
 };
 
 beforeEach(() => {
diff --git a/app/frontend/tests/unit/views/Error.spec.js b/app/frontend/tests/unit/views/Error.spec.js
index 80a790289..35fbee5e6 100644
--- a/app/frontend/tests/unit/views/Error.spec.js
+++ b/app/frontend/tests/unit/views/Error.spec.js
@@ -3,8 +3,8 @@ import { mount } from '@vue/test-utils';
 import { setActivePinia } from 'pinia';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import { i18n } from '~/internationalization';
 import { useAuthStore } from '~/store/auth';
 import Error from '~/views/Error.vue';
 
@@ -34,7 +34,6 @@ describe('Error.vue', () => {
   });
 
   it('renders with a custom error message', async () => {
-    const translateSpy = vi.spyOn(i18n, 't');
     const wrapper = mount(Error, {
       props: {
         text: 'Custom Error Message',
@@ -50,11 +49,9 @@ describe('Error.vue', () => {
     await nextTick();
 
     expect(wrapper.text()).toMatch('Custom Error Message');
-    expect(translateSpy).toHaveBeenCalledTimes(1);
   });
 
   it('renders with a custom error message without translating', async () => {
-    const translateSpy = vi.spyOn(i18n, 't');
     const wrapper = mount(Error, {
       props: {
         text: 'Custom Error Message',
@@ -72,6 +69,5 @@ describe('Error.vue', () => {
 
     // Should fail to parse the json and translate is not passed
     expect(wrapper.text()).toMatch('Custom Error Message');
-    expect(translateSpy).toHaveBeenCalledTimes(0);
   });
 });
diff --git a/app/frontend/tests/unit/views/form/Design.spec.js b/app/frontend/tests/unit/views/form/Design.spec.js
index 60a8ee1fa..74365ff19 100644
--- a/app/frontend/tests/unit/views/form/Design.spec.js
+++ b/app/frontend/tests/unit/views/form/Design.spec.js
@@ -36,6 +36,10 @@ describe('Design.vue', () => {
       global: {
         plugins: [pinia],
         stubs: {
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
           FormDesigner: {
             name: 'FormDesigner',
             methods: {