diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 17de081..1014b05 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,7 +14,8 @@
         "core-js": "^3.8.3",
         "pinia": "^3.0.3",
         "quasar": "^2.16.0",
-        "vue": "^3.2.13"
+        "vue": "^3.2.13",
+        "vue-i18n": "^12.0.0-alpha.3"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -1886,6 +1887,73 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@intlify/core-base": {
+      "version": "12.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-12.0.0-alpha.3.tgz",
+      "integrity": "sha512-LEvBHBUbiOOtIBkp4IIQENVC5Fg2YHsvdXN1+WRIxQ8hzHbHSBiqZ2l68B/yg8sE1a4S7dqhkaAedunShWPH+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "12.0.0-alpha.3",
+        "@intlify/shared": "12.0.0-alpha.3"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "12.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-12.0.0-alpha.3.tgz",
+      "integrity": "sha512-mDDTN3gfYOHhBnpnlby19UHyvMaOnzdlpsIrxUfs44R/vCATfn8pMOkE8PXD2t410xkocEj3FpDcC9XC/0v4Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "12.0.0-alpha.3",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "12.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-12.0.0-alpha.3.tgz",
+      "integrity": "sha512-ryaNYBvxQjyJUmVuBBg+HHUsmGnfxcEUPR0NCeG4/K9N2qtyFE35C80S15IN6iYFE2MGWLN7HfOSyg0MXZIc9w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/vue-i18n-core": {
+      "version": "12.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-core/-/vue-i18n-core-12.0.0-alpha.3.tgz",
+      "integrity": "sha512-YwAfTQILHN+VoK0P/Yv47GbKnEf1lhfbliyVyW3knAL1EmT8m0m3rwffXJnwyQhYw8Jpx85CpL49WkSgyi6d/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "12.0.0-alpha.3",
+        "@intlify/shared": "12.0.0-alpha.3",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@intlify/vue-i18n-core/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -12449,6 +12517,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-i18n": {
+      "version": "12.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-12.0.0-alpha.3.tgz",
+      "integrity": "sha512-+KQgD9LJoHfGCdJh3gaLdVS/Sps1n860+6wsjyeNLWJeEofjdVH7KPjz4rAeBlTAUaIDlIjHoXQY0Lk+8B6S9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "12.0.0-alpha.3",
+        "@intlify/shared": "12.0.0-alpha.3",
+        "@intlify/vue-i18n-core": "12.0.0-alpha.3",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-i18n/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.4.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6859391..ff8bf86 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,8 @@
     "core-js": "^3.8.3",
     "pinia": "^3.0.3",
     "quasar": "^2.16.0",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-i18n": "^12.0.0-alpha.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4f8e7e6..cf4ab6b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,6 +6,7 @@
       </div>
     </q-page-container>
   </q-layout>
+  {{ $t('commands.join') }}
 </template>
 
 <script setup>
diff --git a/frontend/src/locales/en-US/app.json b/frontend/src/locales/en-US/app.json
new file mode 100644
index 0000000..34e65e6
--- /dev/null
+++ b/frontend/src/locales/en-US/app.json
@@ -0,0 +1,3 @@
+{
+    "login-chat": "login-register"
+}
\ No newline at end of file
diff --git a/frontend/src/locales/en-US/commands.json b/frontend/src/locales/en-US/commands.json
new file mode 100644
index 0000000..cd22f6b
--- /dev/null
+++ b/frontend/src/locales/en-US/commands.json
@@ -0,0 +1,3 @@
+{
+    "join": "Join the chat"
+}
\ No newline at end of file
diff --git a/frontend/src/locales/en-US/index.js b/frontend/src/locales/en-US/index.js
new file mode 100644
index 0000000..35c672b
--- /dev/null
+++ b/frontend/src/locales/en-US/index.js
@@ -0,0 +1,7 @@
+import commands from './commands.json'
+import app from './app.json'
+
+export default {
+  commands,
+  app,
+}
\ No newline at end of file
diff --git a/frontend/src/locales/index.js b/frontend/src/locales/index.js
new file mode 100644
index 0000000..e3ed630
--- /dev/null
+++ b/frontend/src/locales/index.js
@@ -0,0 +1,5 @@
+import enUS from './en-US'
+
+export default {
+  'en-US': enUS,
+}
\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.js
index e41a82f..42b6ed8 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,10 +6,12 @@ import './styles/app.css'
 import { createPinia } from 'pinia'
 import './plugins/axios'
 import router from './routes'
+import i18n from './plugins/i18n'
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
+app.use(i18n);
 
 app.use(Quasar, quasarUserOptions).mount('#app')
diff --git a/frontend/src/plugins/i18n.js b/frontend/src/plugins/i18n.js
new file mode 100644
index 0000000..00ff9f6
--- /dev/null
+++ b/frontend/src/plugins/i18n.js
@@ -0,0 +1,10 @@
+import { createI18n } from 'vue-i18n';
+import languages from '../locales';
+
+const i18n = createI18n({
+  locale: 'en-US',
+  fallbackLocale: 'en-US',
+  messages: languages,
+});
+
+export default i18n;
\ No newline at end of file