diff --git a/.env.example b/.env.example
index e96f2776..bce60a96 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
-VUE_APP_I18N_LOCALE=en
-VUE_APP_I18N_FALLBACK_LOCALE=en
+VUE_APP_I18N_LOCALE=en-US
+VUE_APP_I18N_FALLBACK_LOCALE=en-US
 VUE_APP_CACHE_MAX_AGE=3600
 VUE_APP_BASE_URL=
 VUE_APP_VIEW_SIZE=10
diff --git a/package-lock.json b/package-lock.json
index 16657f24..4b7bc4c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,14 +26,12 @@
         "register-service-worker": "^1.7.1",
         "vue": "^3.2.26",
         "vue-barcode-reader": "^1.0.1",
-        "vue-i18n": "~9.1.6",
         "vue-router": "^4.0.12",
         "vuex": "^4.0.1",
         "vuex-persistedstate": "^4.0.0-beta.3"
       },
       "devDependencies": {
         "@capacitor/cli": "^2.4.7",
-        "@intlify/vue-i18n-loader": "^2.1.0",
         "@types/luxon": "^3.2.0",
         "@typescript-eslint/eslint-plugin": "~5.26.0",
         "@typescript-eslint/parser": "~5.26.0",
@@ -50,8 +48,7 @@
         "cypress": "^8.3.0",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
-        "typescript": "~4.7.4",
-        "vue-cli-plugin-i18n": "^1.0.1"
+        "typescript": "~4.7.4"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -2871,39 +2868,6 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
-    "node_modules/@intlify/bundle-utils": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-0.1.0.tgz",
-      "integrity": "sha512-v0aeQmjNWppSLpPcLh3E1JiQg8bQFY9uD4ZuZssGq2elXsqB3JDH0TZfhO8Y83x1Ejk0qxq5hv015mYS2qzfZQ==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/core": "^9.1.6",
-        "@intlify/message-compiler": "^9.1.6",
-        "@intlify/shared": "^9.1.6",
-        "jsonc-eslint-parser": "^1.0.1",
-        "source-map": "^0.6.1",
-        "yaml-eslint-parser": "^0.3.2"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/@intlify/core": {
-      "version": "9.8.0",
-      "resolved": "https://registry.npmjs.org/@intlify/core/-/core-9.8.0.tgz",
-      "integrity": "sha512-xd+3cxvMuasZh3b+cxsB98ZAC2SPfbSTuK8q0nJg2NfOuAcj62FKBkFG72lsvGz5MzppTlOQuLkacrCvltA8sA==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/core-base": "9.8.0",
-        "@intlify/shared": "9.8.0"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
     "node_modules/@intlify/core-base": {
       "version": "9.8.0",
       "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.8.0.tgz",
@@ -2919,25 +2883,6 @@
         "url": "https://github.com/sponsors/kazupon"
       }
     },
-    "node_modules/@intlify/devtools-if": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.10.tgz",
-      "integrity": "sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ==",
-      "dependencies": {
-        "@intlify/shared": "9.1.10"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/devtools-if/node_modules/@intlify/shared": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
-      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@intlify/message-compiler": {
       "version": "9.8.0",
       "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.8.0.tgz",
@@ -2953,48 +2898,6 @@
         "url": "https://github.com/sponsors/kazupon"
       }
     },
-    "node_modules/@intlify/message-resolver": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.10.tgz",
-      "integrity": "sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/runtime": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.10.tgz",
-      "integrity": "sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA==",
-      "dependencies": {
-        "@intlify/message-compiler": "9.1.10",
-        "@intlify/message-resolver": "9.1.10",
-        "@intlify/shared": "9.1.10"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/runtime/node_modules/@intlify/message-compiler": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.10.tgz",
-      "integrity": "sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==",
-      "dependencies": {
-        "@intlify/message-resolver": "9.1.10",
-        "@intlify/shared": "9.1.10",
-        "source-map": "0.6.1"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/runtime/node_modules/@intlify/shared": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
-      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@intlify/shared": {
       "version": "9.8.0",
       "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.8.0.tgz",
@@ -3006,44 +2909,6 @@
         "url": "https://github.com/sponsors/kazupon"
       }
     },
-    "node_modules/@intlify/vue-devtools": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.10.tgz",
-      "integrity": "sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ==",
-      "dependencies": {
-        "@intlify/message-resolver": "9.1.10",
-        "@intlify/runtime": "9.1.10",
-        "@intlify/shared": "9.1.10"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/vue-devtools/node_modules/@intlify/shared": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
-      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/vue-i18n-loader": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-loader/-/vue-i18n-loader-2.1.2.tgz",
-      "integrity": "sha512-xGqjq9unsm6WFqcM3n8hQHE2f6yKYc8cT14PqNEBmiuR0v3PP0VqZcvKXHs9JL2BRPA8JulNugpZwuF3rob2cQ==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/bundle-utils": "^0.1.0",
-        "@intlify/shared": "^9.1.6",
-        "loader-utils": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/@ionic/core": {
       "version": "6.7.5",
       "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.7.5.tgz",
@@ -6618,16 +6483,6 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
-    "node_modules/colors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -7538,15 +7393,6 @@
         }
       }
     },
-    "node_modules/decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -7848,25 +7694,6 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "dev": true
     },
-    "node_modules/dot-object": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/dot-object/-/dot-object-1.9.0.tgz",
-      "integrity": "sha512-7MPN6y7XhAO4vM4eguj5+5HNKLjJYfkVG1ZR1Aput4Q4TR6SYeSjhpVQ77IzJHoSHffKbDxBC+48aCiiRurDPw==",
-      "dev": true,
-      "dependencies": {
-        "commander": "^2.20.0",
-        "glob": "^7.1.4"
-      },
-      "bin": {
-        "dot-object": "bin/dot-object"
-      }
-    },
-    "node_modules/dot-object/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
     "node_modules/dotenv": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
@@ -8752,15 +8579,6 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
-    "node_modules/esm": {
-      "version": "3.2.25",
-      "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
-      "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/espree": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
@@ -11055,15 +10873,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-valid-glob": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
-      "integrity": "sha512-AhiROmoEFDSsjx8hW+5sGwgKVIORcXnrlAx/R0ZSeaPw70Vw0CqkGBBhHGL58Uox2eXnU1AnvXJl1XlyedO5bA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-weakref": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
@@ -11453,81 +11262,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonc-eslint-parser": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz",
-      "integrity": "sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.4.1",
-        "eslint-utils": "^2.1.0",
-        "eslint-visitor-keys": "^1.3.0",
-        "espree": "^6.0.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/eslint-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
-      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/espree": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-jsx": "^5.2.0",
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/jsonfile": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -14391,12 +14125,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "dev": true
-    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -14857,12 +14585,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "dev": true
-    },
     "node_modules/set-function-length": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
@@ -16436,58 +16158,6 @@
         "@zxing/library": "^0.19.1"
       }
     },
-    "node_modules/vue-cli-plugin-i18n": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz",
-      "integrity": "sha512-sLo6YzudaWgn5dOMvrKixE5bb/onYGxcxm+0YexqoOx0QtR+7hZ/P5WPFBMM9v/2i1ec2YYe2PvKTBel7KE+tA==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.1.0",
-        "deepmerge": "^4.2.0",
-        "dotenv": "^8.2.0",
-        "flat": "^5.0.0",
-        "rimraf": "^3.0.0",
-        "vue": "^2.6.11",
-        "vue-i18n": "^8.17.0",
-        "vue-i18n-extract": "1.0.2"
-      }
-    },
-    "node_modules/vue-cli-plugin-i18n/node_modules/@vue/compiler-sfc": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz",
-      "integrity": "sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.18.4",
-        "postcss": "^8.4.14",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/vue-cli-plugin-i18n/node_modules/dotenv": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
-      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/vue-cli-plugin-i18n/node_modules/vue": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.15.tgz",
-      "integrity": "sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-sfc": "2.7.15",
-        "csstype": "^3.1.0"
-      }
-    },
-    "node_modules/vue-cli-plugin-i18n/node_modules/vue-i18n": {
-      "version": "8.28.2",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.28.2.tgz",
-      "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==",
-      "dev": true
-    },
     "node_modules/vue-component-type-helpers": {
       "version": "1.8.25",
       "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.8.25.tgz",
@@ -16599,361 +16269,6 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
-    "node_modules/vue-i18n": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
-      "integrity": "sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g==",
-      "dependencies": {
-        "@intlify/core-base": "9.1.10",
-        "@intlify/shared": "9.1.10",
-        "@intlify/vue-devtools": "9.1.10",
-        "@vue/devtools-api": "^6.0.0-beta.7"
-      },
-      "engines": {
-        "node": ">= 10"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
-    "node_modules/vue-i18n-extract": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/vue-i18n-extract/-/vue-i18n-extract-1.0.2.tgz",
-      "integrity": "sha512-+zwDKvle4KcfloXZnj5hF01ViKDiFr5RMx5507D7oyDXpSleRpekF5YHgZa/+Ra6Go68//z0Nya58J9tKFsCjw==",
-      "dev": true,
-      "dependencies": {
-        "cli-table3": "^0.5.1",
-        "dot-object": "^1.7.1",
-        "esm": "^3.2.13",
-        "glob": "^7.1.3",
-        "is-valid-glob": "^1.0.0",
-        "yargs": "^13.2.2"
-      },
-      "bin": {
-        "vue-i18n-extract": "dist-node/index.bin.js"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/ansi-regex": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/cli-table3": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.5.1.tgz",
-      "integrity": "sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==",
-      "dev": true,
-      "dependencies": {
-        "object-assign": "^4.1.0",
-        "string-width": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "optionalDependencies": {
-        "colors": "^1.1.2"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/cliui": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^3.1.0",
-        "strip-ansi": "^5.2.0",
-        "wrap-ansi": "^5.1.0"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/cliui/node_modules/ansi-regex": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/cliui/node_modules/string-width": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/cliui/node_modules/strip-ansi": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/emoji-regex": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-      "dev": true
-    },
-    "node_modules/vue-i18n-extract/node_modules/find-up": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/string-width": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-      "dev": true,
-      "dependencies": {
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/wrap-ansi": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.0",
-        "string-width": "^3.0.0",
-        "strip-ansi": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/wrap-ansi/node_modules/string-width": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-      "dev": true
-    },
-    "node_modules/vue-i18n-extract/node_modules/yargs": {
-      "version": "13.3.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
-      "dev": true,
-      "dependencies": {
-        "cliui": "^5.0.0",
-        "find-up": "^3.0.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^3.0.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^13.1.2"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/yargs-parser": {
-      "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
-      "dev": true,
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/yargs/node_modules/ansi-regex": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/yargs/node_modules/string-width": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/yargs/node_modules/strip-ansi": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n/node_modules/@intlify/core-base": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.10.tgz",
-      "integrity": "sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw==",
-      "dependencies": {
-        "@intlify/devtools-if": "9.1.10",
-        "@intlify/message-compiler": "9.1.10",
-        "@intlify/message-resolver": "9.1.10",
-        "@intlify/runtime": "9.1.10",
-        "@intlify/shared": "9.1.10",
-        "@intlify/vue-devtools": "9.1.10"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/vue-i18n/node_modules/@intlify/message-compiler": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.10.tgz",
-      "integrity": "sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==",
-      "dependencies": {
-        "@intlify/message-resolver": "9.1.10",
-        "@intlify/shared": "9.1.10",
-        "source-map": "0.6.1"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/vue-i18n/node_modules/@intlify/shared": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
-      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/vue-loader": {
       "version": "17.3.1",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.3.1.tgz",
@@ -17638,12 +16953,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/which-module": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
-      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
-      "dev": true
-    },
     "node_modules/which-typed-array": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
@@ -18181,26 +17490,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/yaml-eslint-parser": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz",
-      "integrity": "sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.3.0",
-        "lodash": "^4.17.20",
-        "yaml": "^1.10.0"
-      }
-    },
-    "node_modules/yaml-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
diff --git a/package.json b/package.json
index 95aacd69..600993f0 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,7 @@
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint",
-    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@capacitor/android": "^2.4.7",
@@ -30,14 +29,12 @@
     "register-service-worker": "^1.7.1",
     "vue": "^3.2.26",
     "vue-barcode-reader": "^1.0.1",
-    "vue-i18n": "~9.1.6",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.1",
     "vuex-persistedstate": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@capacitor/cli": "^2.4.7",
-    "@intlify/vue-i18n-loader": "^2.1.0",
     "@types/luxon": "^3.2.0",
     "@typescript-eslint/eslint-plugin": "~5.26.0",
     "@typescript-eslint/parser": "~5.26.0",
@@ -54,7 +51,6 @@
     "cypress": "^8.3.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
-    "typescript": "~4.7.4",
-    "vue-cli-plugin-i18n": "^1.0.1"
+    "typescript": "~4.7.4"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index cc5056db..17fefaeb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,6 +17,7 @@ import { mapGetters, useStore } from "vuex";
 import { Settings } from 'luxon';
 import { initialise, resetConfig } from '@/adapter'
 import { useRouter } from 'vue-router';
+import { translate } from "@hotwax/dxp-components"
 
 export default defineComponent({
   name: 'App',
@@ -49,7 +50,7 @@ export default defineComponent({
       if (!this.loader) {
         this.loader = await loadingController
           .create({
-            message: options.message ? this.$t(options.message) : this.$t("Click the backdrop to dismiss."),
+            message: options.message ? translate(options.message) : translate("Click the backdrop to dismiss."),
             translucent: true,
             backdropDismiss: options.backdropDismiss
           });
diff --git a/src/components/ClosePurchaseOrderModal.vue b/src/components/ClosePurchaseOrderModal.vue
index ab61777b..f54fe9b8 100644
--- a/src/components/ClosePurchaseOrderModal.vue
+++ b/src/components/ClosePurchaseOrderModal.vue
@@ -6,16 +6,16 @@
           <ion-icon slot="icon-only" :icon="arrowBackOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Close purchase order items") }}</ion-title>
+      <ion-title>{{ translate("Close purchase order items") }}</ion-title>
       <ion-buttons slot="end" @click="selectAllItems">
-        <ion-button color="primary">{{ $t("Select all") }}</ion-button>
+        <ion-button color="primary">{{ translate("Select all") }}</ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
 
   <ion-content>
     <ion-item lines="none">
-      <ion-list-header>{{ $t("To close the purchase order, select all.") }}</ion-list-header>
+      <ion-list-header>{{ translate("To close the purchase order, select all.") }}</ion-list-header>
     </ion-item>
     <ion-list>
       <ion-item :button="isPOItemStatusPending(item)" v-for="(item, index) in getPOItems()" :key="index" @click="item.isChecked = !item.isChecked">
@@ -66,7 +66,7 @@ import { defineComponent } from 'vue';
 import { mapGetters, useStore } from 'vuex'
 import { OrderService } from "@/services/OrderService";
 import { productHelpers } from '@/utils';
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { ShopifyImg, translate } from '@hotwax/dxp-components';
 import { useRouter } from 'vue-router';
 
 export default defineComponent({
@@ -104,14 +104,14 @@ export default defineComponent({
     },
     async confirmSave() {
       const alert = await alertController.create({
-        header: this.$t('Close purchase order items'),
-        message: this.$t('Are you sure you have received the purchase order for the selected items? Once closed, the shipments for the selected items wont be available for receiving later.', { space: '<br /><br />' }),
+        header: translate('Close purchase order items'),
+        message: translate('Are you sure you have received the purchase order for the selected items? Once closed, the shipments for the selected items wont be available for receiving later.', { space: '<br /><br />' }),
         buttons: [{
-          text: this.$t('Cancel'),
+          text: translate('Cancel'),
           role: 'cancel'
         },
         {
-          text: this.$t('Proceed'),
+          text: translate('Proceed'),
           role: 'proceed',
           handler: async() => {
             await this.updatePOItemStatus()
@@ -186,7 +186,8 @@ export default defineComponent({
       productHelpers,
       router,
       saveOutline,
-      store
+      store,
+      translate
     };
   }
 });
diff --git a/src/components/LocationPopover.vue b/src/components/LocationPopover.vue
index cebae6be..d53cf228 100644
--- a/src/components/LocationPopover.vue
+++ b/src/components/LocationPopover.vue
@@ -1,7 +1,7 @@
 <template>
   <ion-chip outline>
     <ion-icon :icon="locationOutline"/>
-    <ion-select interface="popover" :placeholder="$t('facility location')" :value="item.locationSeqId" @ionChange="setFacilityLocation($event)">
+    <ion-select interface="popover" :placeholder="translate('facility location')" :value="item.locationSeqId" @ionChange="setFacilityLocation($event)">
       <ion-select-option v-for="facilityLocation in (getFacilityLocationsByFacilityId(facilityId) ? getFacilityLocationsByFacilityId(facilityId) : [])" :key="facilityLocation.locationSeqId" :value="facilityLocation.locationSeqId" >{{ facilityLocation.locationPath ? facilityLocation.locationPath : facilityLocation.locationSeqId }}</ion-select-option>
     </ion-select>
   </ion-chip>
@@ -17,6 +17,7 @@ import {
 import { defineComponent } from 'vue';
 import { mapGetters, useStore } from 'vuex';
 import { locationOutline } from 'ionicons/icons'
+import { translate } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'LocationPopover',
@@ -47,7 +48,8 @@ export default defineComponent({
     const store = useStore();
     return {
       locationOutline,
-      store
+      store,
+      translate
     }
   }
 });
diff --git a/src/i18n.ts b/src/i18n.ts
deleted file mode 100644
index c1f714c5..00000000
--- a/src/i18n.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'
-
-/**
- * Load locale messages
- * 
- * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
- * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
- */
-function loadLocaleMessages(): LocaleMessages<VueMessageType> {
-  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
-  const messages: LocaleMessages<VueMessageType> = {}
-  locales.keys().forEach(key => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
-    if (matched && matched.length > 1) {
-      const locale = matched[1]
-      messages[locale] = locales(key)
-    }
-  })
-  return messages
-}
-
-const i18n = createI18n({
-  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
-  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
-  messages: loadLocaleMessages()
-})
-
-// TODO Check if this is needed in updated versions
-// Currently this method is added to be used in ts files
-const translate = (key: string, named?: any) => {
-  if (!key) {
-    return '';
-  }
-  return i18n.global.t(key, named);
-};
-
-export { i18n as default, translate }
\ No newline at end of file
diff --git a/src/locales/index.ts b/src/locales/index.ts
new file mode 100644
index 00000000..75021d4a
--- /dev/null
+++ b/src/locales/index.ts
@@ -0,0 +1,6 @@
+
+import en from "./en.json"
+
+export default {
+  "en-US": en
+};
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index ba7ac2f7..b298924d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,7 +27,6 @@ import '@ionic/vue/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-import i18n from './i18n'
 import store from './store'
 import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
@@ -35,13 +34,13 @@ import permissionActions from '@/authorization/Actions';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
 import { getConfig, initialise } from '@/adapter'
+import localeMessages from './locales';
 
 const app = createApp(App)
   .use(IonicVue, {
     mode: 'md'
   })
   .use(router)
-  .use(i18n)
   .use(store)
   .use(permissionPlugin, {
     rules: permissionRules,
@@ -54,7 +53,8 @@ const app = createApp(App)
     loader,
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
     getConfig,
-    initialise
+    initialise,
+    localeMessages
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
diff --git a/src/router/index.ts b/src/router/index.ts
index c5cb3c29..4087128a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,10 +12,9 @@ import ReturnDetails from '@/views/ReturnDetails.vue'
 
 import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils'
-import { translate } from '@/i18n'
 
 import 'vue-router'
-import { DxpLogin, useAuthStore } from '@hotwax/dxp-components';
+import { DxpLogin, translate, useAuthStore } from '@hotwax/dxp-components';
 import { loader } from '@/user-utils';
 
 // Defining types for the meta values
diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts
index 296cdf9f..5474f691 100644
--- a/src/store/modules/order/actions.ts
+++ b/src/store/modules/order/actions.ts
@@ -4,7 +4,7 @@ import RootState from '@/store/RootState'
 import OrderState from './OrderState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import emitter from "@/event-bus";
 
 
diff --git a/src/store/modules/product/actions.ts b/src/store/modules/product/actions.ts
index 26ac4877..f7dfdd7b 100644
--- a/src/store/modules/product/actions.ts
+++ b/src/store/modules/product/actions.ts
@@ -5,7 +5,7 @@ import ProductState from './ProductState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import emitter from '@/event-bus'
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 
 const actions: ActionTree<ProductState, RootState> = {
   async fetchProducts ({commit, state}, { productIds }) {
diff --git a/src/store/modules/return/actions.ts b/src/store/modules/return/actions.ts
index 32bf9085..0a0df3cf 100644
--- a/src/store/modules/return/actions.ts
+++ b/src/store/modules/return/actions.ts
@@ -4,7 +4,7 @@ import RootState from '@/store/RootState'
 import ReturnState from './ReturnState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
 
 const actions: ActionTree<ReturnState, RootState> = {
diff --git a/src/store/modules/shipment/actions.ts b/src/store/modules/shipment/actions.ts
index 65bb22bc..0bfa860c 100644
--- a/src/store/modules/shipment/actions.ts
+++ b/src/store/modules/shipment/actions.ts
@@ -4,7 +4,7 @@ import RootState from '@/store/RootState'
 import ShipmentState from './ShipmentState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
 
 const actions: ActionTree<ShipmentState, RootState> = {
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index 20c7c36b..974f5b43 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -4,7 +4,6 @@ import RootState from '@/store/RootState'
 import UserState from './UserState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
-import { translate } from '@/i18n'
 import { Settings } from 'luxon';
 import { getUserFacilities, logout, updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
 import {
@@ -13,7 +12,7 @@ import {
   resetPermissions,
   setPermissions
 } from '@/authorization'
-import { useAuthStore } from '@hotwax/dxp-components'
+import { translate, useAuthStore } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
 import store from '@/store'
 
diff --git a/src/user-utils/index.ts b/src/user-utils/index.ts
index 44c37aba..48096522 100644
--- a/src/user-utils/index.ts
+++ b/src/user-utils/index.ts
@@ -1,4 +1,4 @@
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import store from '@/store'
 import { loadingController } from '@ionic/vue'
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index f3a2bc87..d09424a6 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,5 @@
 import { toastController } from '@ionic/vue';
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import { Plugins } from '@capacitor/core';
 import productHelpers from './product'
 import { DateTime } from "luxon";
diff --git a/src/views/AddProductModal.vue b/src/views/AddProductModal.vue
index adb61359..b54c255e 100644
--- a/src/views/AddProductModal.vue
+++ b/src/views/AddProductModal.vue
@@ -6,11 +6,11 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Add a product") }}</ion-title>
+      <ion-title>{{ translate("Add a product") }}</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content>
-    <ion-searchbar @ionFocus="selectSearchBarText($event)" v-model="queryString" :placeholder="$t('Search SKU or product name')" v-on:keyup.enter="queryString = $event.target.value; getProducts()" />
+    <ion-searchbar @ionFocus="selectSearchBarText($event)" v-model="queryString" :placeholder="translate('Search SKU or product name')" v-on:keyup.enter="queryString = $event.target.value; getProducts()" />
     
     <ion-list v-for="product in products" :key="product.productId">
       <ion-item lines="none">
@@ -23,12 +23,12 @@
           <p>{{ product[productIdentificationPref.secondaryId] }}</p>
         </ion-label>
         <ion-icon v-if="isProductAvailableInShipment(product.productId)" color="success" :icon="checkmarkCircle" />
-        <ion-button v-else fill="outline" @click="addtoShipment(product)">{{ $t("Add to Shipment") }}</ion-button>
+        <ion-button v-else fill="outline" @click="addtoShipment(product)">{{ translate("Add to Shipment") }}</ion-button>
       </ion-item>
     </ion-list>
 
     <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" :disabled="!isScrollable">
-      <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')" />
+      <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')" />
     </ion-infinite-scroll>
   </ion-content>
 </template>
@@ -55,9 +55,8 @@ import { defineComponent } from 'vue';
 import { closeOutline, checkmarkCircle } from 'ionicons/icons';
 import { mapGetters } from 'vuex'
 import { useStore } from "@/store";
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { ShopifyImg, translate } from '@hotwax/dxp-components';
 import { showToast } from '@/utils'
-import { translate } from '@/i18n'
 
 export default defineComponent({
   name: "Modal",
@@ -133,6 +132,7 @@ export default defineComponent({
       closeOutline,
       checkmarkCircle,
       store,
+      translate
     };
   },
 });
diff --git a/src/views/AddProductToPOModal.vue b/src/views/AddProductToPOModal.vue
index 4fa4a2e4..57d2f73b 100644
--- a/src/views/AddProductToPOModal.vue
+++ b/src/views/AddProductToPOModal.vue
@@ -6,11 +6,11 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Add a product") }}</ion-title>
+      <ion-title>{{ translate("Add a product") }}</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content>
-    <ion-searchbar @ionFocus="selectSearchBarText($event)" v-model="queryString" :placeholder="$t('Search SKU or product name')" v-on:keyup.enter="queryString = $event.target.value; getProducts()" />
+    <ion-searchbar @ionFocus="selectSearchBarText($event)" v-model="queryString" :placeholder="translate('Search SKU or product name')" v-on:keyup.enter="queryString = $event.target.value; getProducts()" />
     
     <ion-list v-for="product in products" :key="product.productId">
       <ion-item lines="none">
@@ -23,12 +23,12 @@
           <p>{{ product[productIdentificationPref.secondaryId] }}</p>
         </ion-label>
         <ion-icon v-if="isProductAvailableInOrder(product.productId)" color="success" :icon="checkmarkCircle" />
-        <ion-button v-else fill="outline" @click="addtoOrder(product)">{{ $t("Add to Purchase Order") }}</ion-button>
+        <ion-button v-else fill="outline" @click="addtoOrder(product)">{{ translate("Add to Purchase Order") }}</ion-button>
       </ion-item>
     </ion-list>
 
     <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" :disabled="!isScrollable">
-      <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')" />
+      <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')" />
     </ion-infinite-scroll>
   </ion-content>
 </template>
@@ -55,9 +55,8 @@ import { defineComponent } from 'vue';
 import { closeOutline, checkmarkCircle } from 'ionicons/icons';
 import { mapGetters } from 'vuex'
 import { useStore } from "@/store";
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { ShopifyImg, translate } from '@hotwax/dxp-components';
 import { showToast } from '@/utils'
-import { translate } from '@/i18n'
 
 export default defineComponent({
   name: "Modal",
@@ -133,6 +132,7 @@ export default defineComponent({
       closeOutline,
       checkmarkCircle,
       store,
+      translate
     };
   },
 });
diff --git a/src/views/PurchaseOrderDetail.vue b/src/views/PurchaseOrderDetail.vue
index 1f0fa612..6fcc32ab 100644
--- a/src/views/PurchaseOrderDetail.vue
+++ b/src/views/PurchaseOrderDetail.vue
@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-back-button default-href="/purchase-orders" slot="start" />
-        <ion-title> {{$t("Purchase Order Details")}} </ion-title>
+        <ion-title> {{ translate("Purchase Order Details") }} </ion-title>
         <ion-buttons slot="end">
           <ion-button @click="receivingHistory()">
             <ion-icon slot="icon-only" :icon="timeOutline"/>
@@ -20,8 +20,8 @@
         <div class="doc-id">
           <ion-item lines="none">
             <ion-label>
-              <h1>{{ $t("Purchase Order")}}: {{ order.externalOrderId }}</h1>
-              <p>{{ $t("Item count") }}: {{ order.items.length }}</p>
+              <h1>{{ translate("Purchase Order")}}: {{ order.externalOrderId }}</h1>
+              <p>{{ translate("Item count") }}: {{ order.items.length }}</p>
             </ion-label>
           </ion-item>
 
@@ -33,21 +33,21 @@
 
         <div class="scanner">
           <ion-item>
-            <ion-label position="fixed">{{$t("Scan items")}}</ion-label>
-            <ion-input autofocus :placeholder="$t('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()" />
+            <ion-label position="fixed">{{translate("Scan items")}}</ion-label>
+            <ion-input autofocus :placeholder="translate('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()" />
           </ion-item>
           <ion-button expand="block" fill="outline" @click="scan">
             <ion-icon slot="start" :icon="cameraOutline" />
-            {{ $t("Scan") }}
+            {{ translate("Scan") }}
           </ion-button>
         </div>
 
         <ion-item lines="none">
           <ion-label v-if="getPOItems('pending').length > 1" color="medium" class="ion-margin-end">
-            {{ $t("PENDING: ITEMS", { itemsCount: getPOItems('pending').length }) }}
+            {{ translate("PENDING: ITEMS", { itemsCount: getPOItems('pending').length }) }}
           </ion-label>
           <ion-label v-else color="medium" class="ion-margin-end">
-            {{ $t("PENDING: ITEM", { itemsCount: getPOItems('pending').length }) }}
+            {{ translate("PENDING: ITEM", { itemsCount: getPOItems('pending').length }) }}
           </ion-label>
         </ion-item>
 
@@ -71,7 +71,7 @@
 
             <div class="product-count">
               <ion-item>
-                <ion-label position="floating">{{ $t("Qty") }}</ion-label>       
+                <ion-label position="floating">{{ translate("Qty") }}</ion-label>       
                 <ion-input type="number" value="0" min="0" v-model="item.quantityAccepted" />
               </ion-item>
             </div>
@@ -80,7 +80,7 @@
           <div class="action border-top" v-if="item.quantity > 0">
             <div class="receive-all-qty">
               <ion-button @click="receiveAll(item)" slot="start" size="small" fill="outline">
-                {{ $t("Receive All") }}
+                {{ translate("Receive All") }}
               </ion-button>
             </div>
 
@@ -92,22 +92,22 @@
             <div class="po-item-history">
               <ion-chip outline @click="receivingHistory(item.productId)">
                 <ion-icon :icon="checkmarkDone"/>
-                <ion-label> {{ getPOItemAccepted(item.productId) }} {{ $t("received") }} </ion-label>
+                <ion-label> {{ getPOItemAccepted(item.productId) }} {{ translate("received") }} </ion-label>
               </ion-chip>
             </div>
 
             <div class="qty-ordered">
-              <ion-label>{{ item.quantity }} {{ $t("ordered") }}</ion-label>   
+              <ion-label>{{ item.quantity }} {{ translate("ordered") }}</ion-label>   
             </div>         
           </div>
         </ion-card>
 
         <ion-item lines="none">
           <ion-text v-if="getPOItems('completed').length > 1" color="medium" class="ion-margin-end">
-            {{ $t("COMPLETED: ITEMS", { itemsCount: getPOItems('completed').length }) }}
+            {{ translate("COMPLETED: ITEMS", { itemsCount: getPOItems('completed').length }) }}
           </ion-text>
           <ion-text v-else color="medium" class="ion-margin-end">
-            {{ $t("COMPLETED: ITEM", { itemsCount: getPOItems('completed').length }) }}
+            {{ translate("COMPLETED: ITEM", { itemsCount: getPOItems('completed').length }) }}
           </ion-text>
           <ion-button v-if="getPOItems('completed').length" @click="showCompletedItems = !showCompletedItems" fill="clear">
             <ion-icon :icon="showCompletedItems ? eyeOutline : eyeOffOutline"/>
@@ -137,8 +137,8 @@
             
             <div>
               <ion-item lines="none">
-                <ion-badge color="medium" slot="end">{{ item.quantity }} {{ $t("ordered") }}</ion-badge>
-                <ion-badge color="success" class="ion-margin-start" slot="end">{{ getPOItemAccepted(item.productId) }} {{ $t("received") }}</ion-badge>
+                <ion-badge color="medium" slot="end">{{ item.quantity }} {{ translate("ordered") }}</ion-badge>
+                <ion-badge color="success" class="ion-margin-start" slot="end">{{ getPOItemAccepted(item.productId) }} {{ translate("received") }}</ion-badge>
               </ion-item>
             </div>
           </div>
@@ -149,8 +149,8 @@
     <ion-footer>
       <ion-toolbar>
         <ion-item slot="end">
-          <ion-button :disabled="!hasPermission(Actions.APP_SHIPMENT_UPDATE)" fill="outline" class="ion-margin-end" @click="closePO">{{ $t("Receive And Close") }}</ion-button>
-          <ion-button :disabled="!hasPermission(Actions.APP_SHIPMENT_UPDATE) || !isEligibileForCreatingShipment()" @click="savePODetails">{{ $t("Receive") }}</ion-button>
+          <ion-button :disabled="!hasPermission(Actions.APP_SHIPMENT_UPDATE)" fill="outline" class="ion-margin-end" @click="closePO">{{ translate("Receive And Close") }}</ion-button>
+          <ion-button :disabled="!hasPermission(Actions.APP_SHIPMENT_UPDATE) || !isEligibileForCreatingShipment()" @click="savePODetails">{{ translate("Receive") }}</ion-button>
         </ion-item>
       </ion-toolbar>
     </ion-footer>
@@ -184,7 +184,7 @@ import {
 import { defineComponent } from 'vue';
 import { addOutline, cameraOutline, checkmarkDone, copyOutline, eyeOffOutline, eyeOutline, locationOutline, saveOutline, timeOutline } from 'ionicons/icons';
 import ReceivingHistoryModal from '@/views/ReceivingHistoryModal.vue'
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { ShopifyImg, translate } from '@hotwax/dxp-components';
 import { useStore, mapGetters } from 'vuex';
 import { useRouter } from 'vue-router';
 import Scanner from "@/components/Scanner.vue"
@@ -290,14 +290,14 @@ export default defineComponent({
     },
     async savePODetails() {
       const alert = await alertController.create({
-        header: this.$t('Receive inventory'),
-        message: this.$t('Inventory can be received for purchase orders in multiple shipments. Proceeding will receive a new shipment for this purchase order but it will still be available for receiving later', { space: '<br /><br />' }),
+        header: translate('Receive inventory'),
+        message: translate('Inventory can be received for purchase orders in multiple shipments. Proceeding will receive a new shipment for this purchase order but it will still be available for receiving later', { space: '<br /><br />' }),
         buttons: [{
-          text: this.$t('Cancel'),
+          text: translate('Cancel'),
           role: 'cancel'
         },
         {
-          text: this.$t('Proceed'),
+          text: translate('Proceed'),
           role: 'proceed',
           handler: () => {
             this.createShipment();
@@ -361,7 +361,8 @@ export default defineComponent({
       router,
       saveOutline,
       store,
-      timeOutline
+      timeOutline,
+      translate
     };
   },
 });
diff --git a/src/views/PurchaseOrders.vue b/src/views/PurchaseOrders.vue
index bda05fba..bb1b392e 100644
--- a/src/views/PurchaseOrders.vue
+++ b/src/views/PurchaseOrders.vue
@@ -3,30 +3,30 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ $t("Purchase Orders") }}</ion-title>
+        <ion-title>{{ translate("Purchase Orders") }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <main>
-        <ion-searchbar :placeholder="$t('Search purchase orders')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getPurchaseOrders()" />
+        <ion-searchbar :placeholder="translate('Search purchase orders')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getPurchaseOrders()" />
 
         <PurchaseOrderItem v-for="(order, index) in orders" :key="index" :purchaseOrder="order.doclist.docs[0]" />
         
         <div v-if="orders.length" class="load-more-action ion-text-center">
           <ion-button fill="outline" color="dark" @click="loadMoreOrders()">
             <ion-icon :icon="cloudDownloadOutline" slot="start" />
-            {{ $t("Load more purchase order") }}
+            {{ translate("Load more purchase order") }}
           </ion-button>
         </div>
 
         <!-- Empty state -->
         <div class="empty-state" v-if="!orders.length && !fetchingOrders">
-          <p v-if="showErrorMessage">{{ $t("No results found")}}</p>
+          <p v-if="showErrorMessage">{{ translate("No results found")}}</p>
           <img src="../assets/images/empty-state.png" alt="empty state">
-          <p>{{ $t("There are no purchase orders to receive")}}</p>
+          <p>{{ translate("There are no purchase orders to receive")}}</p>
           <ion-button fill="outline" color="dark" @click="refreshPurchaseOrders()">
             <ion-icon :icon="reload" slot="start" />
-            {{ $t("Refresh") }}
+            {{ translate("Refresh") }}
           </ion-button>
         </div>
 
@@ -56,6 +56,7 @@ import { cloudDownloadOutline, reload } from 'ionicons/icons'
 import { defineComponent } from 'vue';
 import { mapGetters, useStore } from 'vuex';
 import PurchaseOrderItem from '@/components/PurchaseOrderItem.vue'
+import { translate } from "@hotwax/dxp-components"
 
 export default defineComponent({
   name: 'PurchaseOrders',
@@ -138,7 +139,8 @@ export default defineComponent({
     return {
       cloudDownloadOutline,
       reload,
-      store
+      store,
+      translate
     }
   }
 });
diff --git a/src/views/ReceivingHistoryModal.vue b/src/views/ReceivingHistoryModal.vue
index 9b872a16..8feb89ee 100644
--- a/src/views/ReceivingHistoryModal.vue
+++ b/src/views/ReceivingHistoryModal.vue
@@ -6,7 +6,7 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("History") }}</ion-title>
+      <ion-title>{{ translate("History") }}</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content>
@@ -17,10 +17,10 @@
         </ion-thumbnail>
         <ion-label>
           {{ item.receiversFullName }}
-          <p>{{ $t("Shipment ID") }}: {{ item.shipmentId }}</p>
+          <p>{{ translate("Shipment ID") }}: {{ item.shipmentId }}</p>
         </ion-label>
         <ion-label>
-          <ion-note>{{ item.quantityAccepted }} {{ $t("received") }} | {{ item.quantityRejected }} {{ $t("rejected") }}</ion-note>
+          <ion-note>{{ item.quantityAccepted }} {{ translate("received") }} | {{ item.quantityRejected }} {{ translate("rejected") }}</ion-note>
           <ion-note>{{ item.datetimeReceived ? getTime(item.datetimeReceived) : "-" }}</ion-note>
         </ion-label>
       </ion-item>
@@ -52,7 +52,7 @@ import {
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { closeOutline } from 'ionicons/icons';
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { ShopifyImg, translate } from '@hotwax/dxp-components';
 import { mapGetters, useStore } from "vuex";
 import { DateTime } from 'luxon';
 
@@ -76,7 +76,7 @@ export default defineComponent({
   data() {
     return {
       items: [],
-      emptyStateMessage: this.$t("No shipments have been received against this purchase order yet", {lineBreak: '<br />'})
+      emptyStateMessage: translate("No shipments have been received against this purchase order yet", {lineBreak: '<br />'})
     }
   },
   props: ["productId"],
@@ -102,7 +102,8 @@ export default defineComponent({
 
     return {
       closeOutline,
-      store
+      store,
+      translate
     };
   },
 });
diff --git a/src/views/ReturnDetails.vue b/src/views/ReturnDetails.vue
index f2afab85..e87c6b4b 100644
--- a/src/views/ReturnDetails.vue
+++ b/src/views/ReturnDetails.vue
@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-back-button default-href="/returns" slot="start"></ion-back-button>
-        <ion-title>{{ $t("Return Details") }}</ion-title>
+        <ion-title>{{ translate("Return Details") }}</ion-title>
       </ion-toolbar>
     </ion-header>
 
@@ -13,7 +13,7 @@
           <ion-item lines="none">
             <h1>{{ current.shopifyOrderName ? current.shopifyOrderName : current.hcOrderId }}</h1>
             <!-- TODO: Fetch Customer name -->
-            <!-- <p>{{ $t("Customer: <customer name>")}}</p> -->
+            <!-- <p>{{ translate("Customer: <customer name>")}}</p> -->
           </ion-item>
 
           <div class="doc-meta">
@@ -25,12 +25,12 @@
   
         <div class="scanner">
           <ion-item>
-            <ion-label>{{ $t("Scan items") }}</ion-label>
-            <ion-input autofocus :placeholder="$t('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()" />
+            <ion-label>{{ translate("Scan items") }}</ion-label>
+            <ion-input autofocus :placeholder="translate('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()" />
           </ion-item>
 
           <ion-button expand="block" fill="outline" @click="scanCode()">
-            <ion-icon slot="start" :icon="barcodeOutline" />{{ $t("Scan") }}
+            <ion-icon slot="start" :icon="barcodeOutline" />{{ translate("Scan") }}
           </ion-button>
         </div>
 
@@ -57,21 +57,21 @@
 
             <div class="product-count">
               <ion-item v-if="isReturnReceivable(current.statusId)">
-                <ion-label position="floating">{{ $t("Qty") }}</ion-label>
+                <ion-label position="floating">{{ translate("Qty") }}</ion-label>
                 <ion-input type="number" min="0" v-model="item.quantityAccepted" />
               </ion-item>
               <ion-item v-if="!isReturnReceivable(current.statusId)" lines="none">
-                <ion-label>{{ item.quantityAccepted }} {{ $t("received") }}</ion-label>
+                <ion-label>{{ item.quantityAccepted }} {{ translate("received") }}</ion-label>
               </ion-item>
             </div>
           </div>
   
           <ion-item lines="none" class="border-top" v-if="item.quantityOrdered > 0">
             <ion-button v-if="isReturnReceivable(current.statusId)" @click="receiveAll(item)" slot="start" fill="outline">
-              {{ $t("Receive All") }}
+              {{ translate("Receive All") }}
             </ion-button>
             <ion-progress-bar :color="getRcvdToOrdrdFraction(item) > 1 ? 'danger' : 'primary'" :value="getRcvdToOrdrdFraction(item)" />
-            <p slot="end">{{ item.quantityOrdered }} {{ $t("returned") }}</p>
+            <p slot="end">{{ item.quantityOrdered }} {{ translate("returned") }}</p>
           </ion-item>
         </ion-card>
       </main>
@@ -112,13 +112,12 @@ import { defineComponent } from 'vue';
 import { checkmarkDone, barcodeOutline, locationOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from "vuex";
 import AddProductModal from '@/views/AddProductModal.vue'
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { ShopifyImg, translate } from '@hotwax/dxp-components';
 import { useRouter } from 'vue-router';
 import Scanner from "@/components/Scanner.vue";
 import ImageModal from '@/components/ImageModal.vue';
 import { hasError } from '@/utils';
 import { showToast, productHelpers } from '@/utils'
-import { translate } from '@/i18n'
 import { Actions, hasPermission } from '@/authorization'
 
 export default defineComponent({
@@ -210,15 +209,15 @@ export default defineComponent({
     
     async completeShipment() {
       const alert = await alertController.create({
-        header: this.$t("Receive Shipment"),
-        message: this.$t("Make sure you have entered all the inventory you received. You cannot edit this information after proceeding.", {space: '<br /><br />'}),
+        header: translate("Receive Shipment"),
+        message: translate("Make sure you have entered all the inventory you received. You cannot edit this information after proceeding.", {space: '<br /><br />'}),
         buttons: [
           {
-            text: this.$t("Cancel"),
+            text: translate("Cancel"),
             role: 'cancel',
           }, 
           {
-            text:this.$t('Proceed'),
+            text:translate('Proceed'),
             handler: () => {
               this.receiveReturn();
             },
@@ -277,7 +276,8 @@ export default defineComponent({
       locationOutline,
       store,
       productHelpers,
-      router
+      router,
+      translate
     };
   },
 });
diff --git a/src/views/Returns.vue b/src/views/Returns.vue
index 2db3eb1d..58ee787b 100644
--- a/src/views/Returns.vue
+++ b/src/views/Returns.vue
@@ -3,30 +3,30 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ $t("Returns") }}</ion-title>
+        <ion-title>{{ translate("Returns") }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <main>
-        <ion-searchbar :placeholder="$t('Scan ASN to start receiving')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getReturns()" />
+        <ion-searchbar :placeholder="translate('Scan ASN to start receiving')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getReturns()" />
   
         <ReturnListItem v-for="returnShipment in returns" :key="returnShipment.shipmentId" :returnShipment="returnShipment" />
 
         <div v-if="returns.length" class="load-more-action ion-text-center">
           <ion-button fill="outline" color="dark" @click="loadMoreReturns()">
             <ion-icon :icon="cloudDownloadOutline" slot="start" />
-            {{ $t("Load more returns") }}
+            {{ translate("Load more returns") }}
           </ion-button>
         </div>
 
         <!-- Empty state -->
         <div class="empty-state" v-if="!returns.length && !fetchingReturns">
-          <p v-if="showErrorMessage">{{ $t("No results found")}}</p>
+          <p v-if="showErrorMessage">{{ translate("No results found")}}</p>
           <img src="../assets/images/empty-state.png" alt="empty state">
-          <p>{{ $t("There are no returns to receive")}}</p>
+          <p>{{ translate("There are no returns to receive")}}</p>
           <ion-button fill="outline" color="dark" @click="refreshReturns()">
             <ion-icon :icon="reload" slot="start" />
-            {{ $t("Refresh") }}
+            {{ translate("Refresh") }}
           </ion-button>
         </div>
 
@@ -56,6 +56,7 @@ import { cloudDownloadOutline, reload } from 'ionicons/icons'
 import { defineComponent } from 'vue'
 import { mapGetters, useStore } from 'vuex'
 import ReturnListItem from '@/components/ReturnListItem.vue'
+import { translate } from "@hotwax/dxp-components"
 
 export default defineComponent({
   name: "Returns",
@@ -148,7 +149,8 @@ export default defineComponent({
     return {
       cloudDownloadOutline,
       reload,
-      store
+      store,
+      translate
     }
   }
 })
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index e4b43618..b4018c98 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ $t("Settings") }}</ion-title>
+        <ion-title>{{ translate("Settings") }}</ion-title>
       </ion-toolbar>
     </ion-header>
     
@@ -22,18 +22,18 @@
               <ion-card-title>{{ userProfile.partyName }}</ion-card-title>
             </ion-card-header>
           </ion-item>
-          <ion-button color="danger" @click="logout()">{{ $t("Logout") }}</ion-button>
+          <ion-button color="danger" @click="logout()">{{ translate("Logout") }}</ion-button>
           <ion-button fill="outline" @click="goToLaunchpad()">
-            {{ $t("Go to Launchpad") }}
+            {{ translate("Go to Launchpad") }}
             <ion-icon slot="end" :icon="openOutline" />
           </ion-button>
           <!-- Commenting this code as we currently do not have reset password functionality -->
-          <!-- <ion-button fill="outline" color="medium">{{ $t("Reset password") }}</ion-button> -->
+          <!-- <ion-button fill="outline" color="medium">{{ translate("Reset password") }}</ion-button> -->
         </ion-card>
       </div>
 
       <div class="section-header">
-        <h1>{{ $t('OMS') }}</h1>
+        <h1>{{ translate('OMS') }}</h1>
       </div>
       <section>
         <OmsInstanceNavigator />
@@ -41,14 +41,14 @@
         <ion-card>
           <ion-card-header>
             <ion-card-title>
-              {{ $t("Facility") }}
+              {{ translate("Facility") }}
             </ion-card-title>
           </ion-card-header>
           <ion-card-content>
-            {{ $t('Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.') }}
+            {{ translate('Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.') }}
           </ion-card-content>
           <ion-item lines="none">
-            <ion-label>{{ $t("Select facility") }}</ion-label>
+            <ion-label>{{ translate("Select facility") }}</ion-label>
             <ion-select interface="popover" :value="currentFacility.facilityId" @ionChange="setFacility($event)">
               <ion-select-option v-for="facility in (userProfile ? userProfile.facilities : [])" :key="facility.facilityId" :value="facility.facilityId" >{{ facility.facilityName }}</ion-select-option>
             </ion-select>
@@ -59,7 +59,7 @@
 
       <div class="section-header">
         <h1>
-          {{ $t('App') }}
+          {{ translate('App') }}
           <p class="overline" >{{ "Version: " + appVersion }}</p>
         </h1>
         <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
@@ -68,40 +68,40 @@
         <ion-card>
           <ion-card-header>
             <ion-card-title>
-              {{ $t('Product Identifier') }}
+              {{ translate('Product Identifier') }}
             </ion-card-title>
           </ion-card-header>
 
           <ion-card-content>
-            {{ $t('Choosing a product identifier allows you to view products with your preferred identifiers.') }}
+            {{ translate('Choosing a product identifier allows you to view products with your preferred identifiers.') }}
           </ion-card-content>
 
           <ion-item>
-            <ion-label>{{ $t("Primary Product Identifier") }}</ion-label>
-            <ion-select :disabled="!hasPermission(Actions.APP_PRODUCT_IDENTIFIER_UPDATE) || !currentEComStore?.productStoreId" interface="popover" :placeholder="$t('primary identifier')" :value="productIdentificationPref.primaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'primaryId')">
+            <ion-label>{{ translate("Primary Product Identifier") }}</ion-label>
+            <ion-select :disabled="!hasPermission(Actions.APP_PRODUCT_IDENTIFIER_UPDATE) || !currentEComStore?.productStoreId" interface="popover" :placeholder="translate('primary identifier')" :value="productIdentificationPref.primaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'primaryId')">
               <ion-select-option v-for="identification in productIdentifications" :key="identification" :value="identification" >{{ identification }}</ion-select-option>
             </ion-select>
           </ion-item>
           <ion-item>
-            <ion-label>{{ $t("Secondary Product Identifier") }}</ion-label>
-            <ion-select :disabled="!hasPermission(Actions.APP_PRODUCT_IDENTIFIER_UPDATE) || !currentEComStore?.productStoreId" interface="popover" :placeholder="$t('secondary identifier')" :value="productIdentificationPref.secondaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'secondaryId')">
+            <ion-label>{{ translate("Secondary Product Identifier") }}</ion-label>
+            <ion-select :disabled="!hasPermission(Actions.APP_PRODUCT_IDENTIFIER_UPDATE) || !currentEComStore?.productStoreId" interface="popover" :placeholder="translate('secondary identifier')" :value="productIdentificationPref.secondaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'secondaryId')">
               <ion-select-option v-for="identification in productIdentifications" :key="identification" :value="identification" >{{ identification }}</ion-select-option>
-              <ion-select-option value="">{{ $t("None") }}</ion-select-option>
+              <ion-select-option value="">{{ translate("None") }}</ion-select-option>
             </ion-select>
           </ion-item>
         </ion-card>
         <ion-card>
           <ion-card-header>
             <ion-card-title>
-              {{ $t('Timezone') }}
+              {{ translate('Timezone') }}
             </ion-card-title>
           </ion-card-header>
           <ion-card-content>
-            {{ $t('The timezone you select is used to ensure automations you schedule are always accurate to the time you select.') }}
+            {{ translate('The timezone you select is used to ensure automations you schedule are always accurate to the time you select.') }}
           </ion-card-content>
           <ion-item lines="none">
             <ion-label> {{ userProfile && userProfile.userTimeZone ? userProfile.userTimeZone : '-' }} </ion-label>
-            <ion-button @click="changeTimeZone()" slot="end" fill="outline" color="dark">{{ $t("Change") }}</ion-button>
+            <ion-button @click="changeTimeZone()" slot="end" fill="outline" color="dark">{{ translate("Change") }}</ion-button>
           </ion-item>
         </ion-card>
       </section>
@@ -119,6 +119,7 @@ import Image from '@/components/Image.vue'
 import { DateTime } from 'luxon';
 import TimeZoneModal from '@/views/TimezoneModal.vue';
 import { Actions, hasPermission } from '@/authorization';
+import { translate } from "@hotwax/dxp-components"
 
 export default defineComponent({
   name: 'Settings',
@@ -183,13 +184,13 @@ export default defineComponent({
     },
     async presentAlert () {
       const alert = await alertController.create({
-        header: this.$t('Logout'),
-        message: this.$t('The products in the upload list will be removed.'),
+        header: translate('Logout'),
+        message: translate('The products in the upload list will be removed.'),
         buttons: [{
-          text: this.$t('Cancel')
+          text: translate('Cancel')
         },
         {
-          text: this.$t('Ok'),
+          text: translate('Ok'),
           handler: () => {
             this.store.dispatch('user/logout', { isUserUnauthorised: false }).then((redirectionUrl) => {
               this.store.dispatch('product/clearUploadProducts');
@@ -247,7 +248,8 @@ export default defineComponent({
       saveOutline,
       storefrontOutline,
       store,
-      router
+      router,
+      translate
     }
   }
 });
diff --git a/src/views/ShipmentDetails.vue b/src/views/ShipmentDetails.vue
index 322cd32a..d7bfc88a 100644
--- a/src/views/ShipmentDetails.vue
+++ b/src/views/ShipmentDetails.vue
@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-back-button default-href="/" slot="start"></ion-back-button>
-        <ion-title>{{ $t("Shipment Details") }}</ion-title>
+        <ion-title>{{ translate("Shipment Details") }}</ion-title>
         <ion-buttons slot="end">
           <ion-button :disabled="!hasPermission(Actions.APP_SHIPMENT_ADMIN)" @click="addProduct"><ion-icon :icon="add"/></ion-button>
         </ion-buttons>
@@ -15,20 +15,20 @@
         <ion-item lines="none">
           <ion-label>
             <p class="overline" v-show="current.externalOrderId">{{ current.externalOrderId }}</p>
-            <h1 v-if="current.externalId">{{ $t("External ID") }}: {{ current.externalId }}</h1>
-            <h1 v-else>{{ $t("Shipment ID") }}: {{ current.shipmentId }}</h1>
+            <h1 v-if="current.externalId">{{ translate("External ID") }}: {{ current.externalId }}</h1>
+            <h1 v-else>{{ translate("Shipment ID") }}: {{ current.shipmentId }}</h1>
           </ion-label>
           <ion-chip v-show="current.trackingIdNumber">{{current.trackingIdNumber}}</ion-chip>
         </ion-item>
 
         <div class="scanner">
           <ion-item>
-            <ion-label>{{ $t("Scan items") }}</ion-label>
-            <ion-input autofocus :placeholder="$t('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()"></ion-input>
+            <ion-label>{{ translate("Scan items") }}</ion-label>
+            <ion-input autofocus :placeholder="translate('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()"></ion-input>
           </ion-item>
 
           <ion-button expand="block" fill="outline" @click="scanCode()">
-            <ion-icon slot="start" :icon="barcodeOutline" />{{ $t("Scan") }}
+            <ion-icon slot="start" :icon="barcodeOutline" />{{ translate("Scan") }}
           </ion-button>
         </div>
 
@@ -52,7 +52,7 @@
 
             <div class="product-count">
               <ion-item>
-                <ion-label position="floating">{{ $t("Qty") }}</ion-label>
+                <ion-label position="floating">{{ translate("Qty") }}</ion-label>
                 <ion-input type="number" min="0" v-model="item.quantityAccepted" />
               </ion-item>
             </div>
@@ -60,7 +60,7 @@
 
           <ion-item lines="none" class="border-top" v-if="item.quantityOrdered > 0">
             <ion-button @click="receiveAll(item)" slot="start" fill="outline">
-              {{ $t("Receive All") }}
+              {{ translate("Receive All") }}
             </ion-button>
 
             <ion-progress-bar :color="getRcvdToOrdrdFraction(item) > 1 ? 'danger' : 'primary'" :value="getRcvdToOrdrdFraction(item)" />
@@ -106,7 +106,7 @@ import { defineComponent } from 'vue';
 import { add, checkmarkDone, barcodeOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from "vuex";
 import AddProductModal from '@/views/AddProductModal.vue'
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { ShopifyImg, translate } from '@hotwax/dxp-components';
 import { useRouter } from 'vue-router';
 import Scanner from "@/components/Scanner.vue";
 import LocationPopover from '@/components/LocationPopover.vue'
@@ -190,15 +190,15 @@ export default defineComponent({
     },
     async completeShipment() {
       const alert = await alertController.create({
-        header: this.$t("Receive Shipment"),
-        message: this.$t("Make sure you have entered all the inventory you received. You cannot edit this information after proceeding.", {space: '<br /><br />'}),
+        header: translate("Receive Shipment"),
+        message: translate("Make sure you have entered all the inventory you received. You cannot edit this information after proceeding.", {space: '<br /><br />'}),
         buttons: [
           {
-            text: this.$t("Cancel"),
+            text: translate("Cancel"),
             role: 'cancel',
           }, 
           {
-            text:this.$t('Proceed'),
+            text:translate('Proceed'),
             handler: () => {
               this.receiveShipment();
             },
@@ -255,7 +255,8 @@ export default defineComponent({
       hasPermission,
       store,
       productHelpers,
-      router
+      router,
+      translate
     };
   },
 });
diff --git a/src/views/Shipments.vue b/src/views/Shipments.vue
index ee18d22d..178f0636 100644
--- a/src/views/Shipments.vue
+++ b/src/views/Shipments.vue
@@ -3,30 +3,30 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ $t("Shipments") }}</ion-title>
+        <ion-title>{{ translate("Shipments") }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <main>
-        <ion-searchbar :placeholder="$t('Scan ASN to start receiving')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getShipments();" />
+        <ion-searchbar :placeholder="translate('Scan ASN to start receiving')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getShipments();" />
 
         <ShipmentListItem v-for="shipment in shipments" :key="shipment.shipmentId" :shipment="shipment"/>
 
         <div v-if="shipments.length" class="load-more-action ion-text-center">
           <ion-button fill="outline" color="dark" @click="loadMoreShipments()">
             <ion-icon :icon="cloudDownloadOutline" slot="start" />
-            {{ $t("Load more shipments") }}
+            {{ translate("Load more shipments") }}
           </ion-button>
         </div>
 
         <!-- Empty state -->
         <div class="empty-state" v-if="!shipments.length && !fetchingShipments">
-          <p v-if="showErrorMessage">{{ $t("No results found")}}</p>
+          <p v-if="showErrorMessage">{{ translate("No results found")}}</p>
           <img src="../assets/images/empty-state.png" alt="empty state">
-          <p>{{ $t("There are no incoming shipments")}}</p>
+          <p>{{ translate("There are no incoming shipments")}}</p>
           <ion-button fill="outline" color="dark" @click="refreshShipments()">
             <ion-icon :icon="reload" slot="start" />
-            {{ $t("Refresh") }}
+            {{ translate("Refresh") }}
           </ion-button>
         </div>
 
@@ -56,6 +56,7 @@ import { cloudDownloadOutline, reload } from 'ionicons/icons'
 import { defineComponent } from 'vue'
 import { mapGetters, useStore } from 'vuex'
 import ShipmentListItem from '@/components/ShipmentListItem.vue'
+import { translate } from "@hotwax/dxp-components"
 
 export default defineComponent({
   name: "Shipments",
@@ -148,7 +149,8 @@ export default defineComponent({
     return {
       cloudDownloadOutline,
       reload,
-      store
+      store,
+      translate
     }
   }
 })
diff --git a/src/views/Shopify.vue b/src/views/Shopify.vue
index 1d322dfc..b512902d 100644
--- a/src/views/Shopify.vue
+++ b/src/views/Shopify.vue
@@ -8,7 +8,7 @@
           <ion-list>
             <Logo />
             <ion-item>
-              <ion-label position="floating"> {{ $t("Shop") }}</ion-label>
+              <ion-label position="floating"> {{ translate("Shop") }}</ion-label>
               <ion-input
                 v-model="shopOrigin"
                 name="shopOrigin"
@@ -20,7 +20,7 @@
           </ion-list>
           <div class="ion-padding">
             <ion-button type="submit" expand="block">
-              {{ $t("Install")  }}
+              {{ translate("Install")  }}
             </ion-button>
           </div>
         </form>
@@ -49,6 +49,8 @@ import { ShopifyService } from "@/services/ShopifyService"
 import { getSessionToken } from "@shopify/app-bridge-utils";
 import { useStore } from 'vuex'
 import Logo from '@/components/Logo.vue'
+import { translate } from "@hotwax/dxp-components"
+
 export default defineComponent({
   name: "Shopify",
   components: {
@@ -145,6 +147,7 @@ export default defineComponent({
       router,
       store,
       showToast,
+      translate
     };
   },
 });
diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue
index c801eb01..0e0bb6ce 100644
--- a/src/views/TimezoneModal.vue
+++ b/src/views/TimezoneModal.vue
@@ -6,17 +6,17 @@
           <ion-icon :icon="close" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Select time zone") }}</ion-title>
+      <ion-title>{{ translate("Select time zone") }}</ion-title>
     </ion-toolbar>
     <ion-toolbar>
-      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search time zones')"  v-model="queryString" @keyup.enter="queryString = $event.target.value; findTimeZone()" @keydown="preventSpecialCharacters($event)" />
+      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="translate('Search time zones')"  v-model="queryString" @keyup.enter="queryString = $event.target.value; findTimeZone()" @keydown="preventSpecialCharacters($event)" />
     </ion-toolbar>
   </ion-header>
 
   <ion-content class="ion-padding">
     <!-- Empty state -->
     <div class="empty-state" v-if="filteredTimeZones.length === 0">
-      <p>{{ $t("No time zone found")}}</p>
+      <p>{{ translate("No time zone found")}}</p>
     </div>
 
     <!-- Timezones -->
@@ -64,6 +64,7 @@ import { useStore } from "@/store";
 import { UserService } from "@/services/UserService";
 import { hasError } from '@/utils'
 import { DateTime } from 'luxon';
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "TimeZoneModal",
@@ -97,16 +98,16 @@ export default defineComponent({
       modalController.dismiss({ dismissed: true });
     },
     async saveAlert() {
-      const message = this.$t("Are you sure you want to change the time zone to?", { timeZoneId: this.timeZoneId });
+      const message = translate("Are you sure you want to change the time zone to?", { timeZoneId: this.timeZoneId });
       const alert = await alertController.create({
-        header: this.$t("Update time zone"),
+        header: translate("Update time zone"),
         message,
         buttons: [
           {
-            text: this.$t("Cancel"),
+            text: translate("Cancel"),
           },
           {
-            text: this.$t("Confirm"),
+            text: translate("Confirm"),
             handler: () => {
               this.setUserTimeZone();
             }
diff --git a/tsconfig.json b/tsconfig.json
index 2f7e34ed..bb8f7dce 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
diff --git a/vue.config.js b/vue.config.js
index d6c807fd..7e26e710 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,18 +1,6 @@
 const path = require('path')
 require("@hotwax/app-version-info")
 module.exports = {
-  pluginOptions: {
-    i18n: {
-      locale: 'en',
-      fallbackLocale: 'en',
-      localeDir: 'locales',
-      enableLegacy: true,
-      runtimeOnly: true,
-      compositionOnly: false,
-      fullInstall: true,
-      enableInSFC: true
-    }
-  },
   configureWebpack: {
     resolve: {
       alias: {