diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 203e60e..a0c32bb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,7 +17,8 @@
         "pinia-plugin-persistedstate": "^1.6.3",
         "tailwind-gradient-mask-image": "^1.0.0",
         "vue": "^3.2.25",
-        "vue-axios": "^3.4.1"
+        "vue-axios": "^3.4.1",
+        "vue-i18n": "^9.2.2"
       },
       "devDependencies": {
         "@types/node": "^17.0.45",
@@ -1672,6 +1673,63 @@
         "vue": "^3"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -5477,6 +5535,23 @@
         "vue": "^3.0.0 || ^2.0.0"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "0.34.17",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.34.17.tgz",
@@ -6922,6 +6997,48 @@
       "integrity": "sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==",
       "requires": {}
     },
+    "@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "requires": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      }
+    },
+    "@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "requires": {
+        "@intlify/shared": "9.2.2"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "requires": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      }
+    },
+    "@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q=="
+    },
+    "@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "requires": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      }
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -9596,6 +9713,17 @@
       "integrity": "sha512-8YZYUOQrBEJktxoQtrM4rr2LfVcDaWfJqv8MqtLlgLlkuBvCYKFSZSo6AXQ4YcCzdgccDqstmuaEh68lcH9xWA==",
       "requires": {}
     },
+    "vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "requires": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      }
+    },
     "vue-tsc": {
       "version": "0.34.17",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.34.17.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6e2672b..5311912 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,8 @@
     "pinia-plugin-persistedstate": "^1.6.3",
     "tailwind-gradient-mask-image": "^1.0.0",
     "vue": "^3.2.25",
-    "vue-axios": "^3.4.1"
+    "vue-axios": "^3.4.1",
+    "vue-i18n": "^9.2.2"
   },
   "devDependencies": {
     "@types/node": "^17.0.45",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 911dfe5..52667da 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -10,6 +10,7 @@ import NotFound from "./routes/NotFound.vue"
 import Footer from "./components/Footer.vue"
 import Navbar from "./components/Navbar.vue"
 import Alerts from "./components/Alerts.vue"
+import {useI18nStore} from "./app/i18n-store"
 
 const routes: { [route: string]: any; } = {
     "/": Home,
@@ -32,8 +33,13 @@ export default defineComponent({
         theme(): string {
             return localStorage.getItem("theme") ?? ""
         },
+        locale(): string {
+            return this.$i18n.locale
+        }
     },
     mounted() {
+        this.$i18n.locale = this.$i18n.availableLocales.find((locale: string) => locale === useI18nStore().locale) ?? "en_US"
+        
         let theme = localStorage.getItem("theme")
         if (theme) {
             document.documentElement.setAttribute("data-theme", theme)
@@ -48,7 +54,7 @@ export default defineComponent({
 
 <template>
     <meta name="theme-color" :key="theme" :content="theme === 'cupcake' ? '#efeae6' : '#242933'">
-    <div class="overflow-x-hidden">
+    <div class="overflow-x-hidden" :key="locale">
         <Navbar class="top-0 fixed z-10" :class="`navbar-${current}`"/>
 
         <div class="min-h-screen flex flex-col justify-between bg-base-200">
diff --git a/frontend/src/app/i18n-store.ts b/frontend/src/app/i18n-store.ts
new file mode 100644
index 0000000..cb76096
--- /dev/null
+++ b/frontend/src/app/i18n-store.ts
@@ -0,0 +1,62 @@
+import {defineStore} from "pinia"
+
+export interface State {
+    locale: String,
+}
+
+const getFirstBrowserLanguage = function () {
+    let nav = window.navigator,
+        browserLanguagePropertyKeys = ["language", "browserLanguage", "systemLanguage", "userLanguage"],
+        i,
+        language
+
+    // support for HTML 5.1 "navigator.languages"
+    if (Array.isArray(nav.languages)) {
+        for (i = 0; i < nav.languages.length; i++) {
+            language = nav.languages[i]
+            if (language && language.length) {
+                return language
+            }
+        }
+    }
+
+    // support for other well known properties in browsers
+    for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
+        language = (nav as any)[browserLanguagePropertyKeys[i]]
+        if (language && language.length) {
+            return language
+        }
+    }
+
+    return null
+}
+
+const defaultLocale = function() {
+    let locale = getFirstBrowserLanguage()
+    if (locale) {
+        locale = (locale as String).toLowerCase()
+        if (locale === "en-gb" || locale === "en-au" || locale === "en-ca" || locale === "en-ie" || locale === "en-nz" || locale === "en-za") {
+            return "en_GB"
+        } else if (locale.startsWith("en")) {
+            return "en_US"
+        } else if (locale === "zh-hk" || locale === "zh-tw") {
+            return "zh_TW"
+        } else if (locale.startsWith("zh")) {
+            return "zh_CN"
+        }
+    }
+    
+    return "en_US"
+}
+
+function newState(): State {
+    return {
+        locale: defaultLocale(),
+    }
+}
+
+export const useI18nStore = defineStore({
+    id: "i18n",
+    state: newState,
+    persist: true,
+})
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 4780a3f..3e5d365 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -2,25 +2,104 @@
     <div class="flex justify-center px-2 py-1 min-h-16 w-full backdrop-blur-md">
         <div class="max-w-[78rem] mx-auto w-full flex justify-between min-h-16">
             <div class="flex overflow-x-auto">
-                <NavbarButton href="/" :bold="true">Linkie</NavbarButton>
-                <NavbarButton href="/dependencies">Dependencies</NavbarButton>
-                <NavbarButton href="/mappings">Mappings</NavbarButton>
+                <NavbarButton href="/" :bold="true"> {{ $t("navbar./") }}</NavbarButton>
+                <NavbarButton href="/dependencies"> {{ $t("navbar./dependencies") }}</NavbarButton>
+                <NavbarButton href="/mappings"> {{ $t("navbar./mappings") }}</NavbarButton>
             </div>
 
-            <NavbarButton @click="setDarkMode(!(($event.target as any)?.checked ?? darkMode()))" :key="componentKey">
-                <svg v-if="darkMode()" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler" width="24" height="24" viewBox="0 0 24 24"
-                     stroke-width="2"
-                     stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                    <path d="M7.962 3.949a8.97 8.97 0 0 1 4.038 -.957v.008h.393a7.478 7.478 0 0 0 -2.07 3.308m-.141 3.84c.186 .823 .514 1.626 .989 2.373a7.49 7.49 0 0 0 4.586 3.268m3.893 -.11c.223 -.067 .444 -.144 .663 -.233a9.088 9.088 0 0 1 -.274 .597m-1.695 2.337a9 9 0 0 1 -12.71 -12.749"></path>
-                    <path d="M3 3l18 18"></path>
-                </svg>
-                <svg v-else xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
-                     stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                    <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
-                </svg>
-            </NavbarButton>
+            <div class="flex">
+                <NavbarButton :hover-dim="false">
+                    <div class="relative">
+                        <div @click="dropdownVisible = !dropdownVisible" class="hover:opacity-70 transition-all">
+                            <svg tabindex="0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                                 stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M4 5h7"></path>
+                                <path d="M7 4c0 4.846 0 7 .5 8"></path>
+                                <path d="M10 8.5c0 2.286 -2 4.5 -3.5 4.5s-2.5 -1.135 -2.5 -2c0 -2 1 -3 3 -3s5 .57 5 2.857c0 1.524 -.667 2.571 -2 3.143"></path>
+                                <path d="M12 20l4 -9l4 9"></path>
+                                <path d="M19.1 18h-6.2"></path>
+                            </svg>
+                        </div>
+
+                        <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95"
+                                    enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
+                                    leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
+                            <div v-if="dropdownVisible"
+                                 class="absolute right-0 z-10 mt-3 w-56 origin-top-right rounded-md bg-base-100 shadow-xl ring-4 ring-black ring-opacity-5">
+                                <div class="py-1">
+                                    <a @click="locale = 'en_US'; $i18n.locale = locale; dropdownVisible = false"
+                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 transition-colors flex gap-2 items-center">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
+                                             viewBox="0 0 36 36">
+                                            <path fill="#B22334"
+                                                  d="M35.445 7C34.752 5.809 33.477 5 32 5H18v2h17.445zM0 25h36v2H0zm18-8h18v2H18zm0-4h18v2H18zM0 21h36v2H0zm4 10h28c1.477 0 2.752-.809 3.445-2H.555c.693 1.191 1.968 2 3.445 2zM18 9h18v2H18z"/>
+                                            <path fill="#EEE"
+                                                  d="M.068 27.679c.017.093.036.186.059.277c.026.101.058.198.092.296c.089.259.197.509.333.743L.555 29h34.89l.002-.004a4.22 4.22 0 0 0 .332-.741a3.75 3.75 0 0 0 .152-.576c.041-.22.069-.446.069-.679H0c0 .233.028.458.068.679zM0 23h36v2H0zm0-4v2h36v-2H18zm18-4h18v2H18zm0-4h18v2H18zM0 9zm.555-2l-.003.005L.555 7zM.128 8.044c.025-.102.06-.199.092-.297a3.78 3.78 0 0 0-.092.297zM18 9h18c0-.233-.028-.459-.069-.68a3.606 3.606 0 0 0-.153-.576A4.21 4.21 0 0 0 35.445 7H18v2z"/>
+                                            <path fill="#3C3B6E" d="M18 5H4a4 4 0 0 0-4 4v10h18V5z"/>
+                                            <path fill="#FFF"
+                                                  d="m2.001 7.726l.618.449l-.236.725L3 8.452l.618.448l-.236-.725L4 7.726h-.764L3 7l-.235.726zm2 2l.618.449l-.236.725l.617-.448l.618.448l-.236-.725L6 9.726h-.764L5 9l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L9 9l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L13 9l-.235.726zm-8 4l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L5 13l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L9 13l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L13 13l-.235.726zm-6-6l.618.449l-.236.725L7 8.452l.618.448l-.236-.725L8 7.726h-.764L7 7l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L11 7l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L15 7l-.235.726zm-12 4l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L3 11l-.235.726zM6.383 12.9L7 12.452l.618.448l-.236-.725l.618-.449h-.764L7 11l-.235.726h-.764l.618.449zm3.618-1.174l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L11 11l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L15 11l-.235.726zm-12 4l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L3 15l-.235.726zM6.383 16.9L7 16.452l.618.448l-.236-.725l.618-.449h-.764L7 15l-.235.726h-.764l.618.449zm3.618-1.174l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L11 15l-.235.726zm4 0l.618.449l-.236.725l.617-.448l.618.448l-.236-.725l.618-.449h-.764L15 15l-.235.726z"/>
+                                        </svg>
+                                        English (US)
+                                    </a>
+                                    <a @click="locale = 'en_GB'; $i18n.locale = locale; dropdownVisible = false"
+                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 transition-colors flex gap-2 items-center">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
+                                             viewBox="0 0 36 36">
+                                            <path fill="#00247D"
+                                                  d="M0 9.059V13h5.628zM4.664 31H13v-5.837zM23 25.164V31h8.335zM0 23v3.941L5.63 23zM31.337 5H23v5.837zM36 26.942V23h-5.631zM36 13V9.059L30.371 13zM13 5H4.664L13 10.837z"/>
+                                            <path fill="#CF1B2B"
+                                                  d="m25.14 23l9.712 6.801a3.977 3.977 0 0 0 .99-1.749L28.627 23H25.14zM13 23h-2.141l-9.711 6.8c.521.53 1.189.909 1.938 1.085L13 23.943V23zm10-10h2.141l9.711-6.8a3.988 3.988 0 0 0-1.937-1.085L23 12.057V13zm-12.141 0L1.148 6.2a3.994 3.994 0 0 0-.991 1.749L7.372 13h3.487z"/>
+                                            <path fill="#EEE"
+                                                  d="M36 21H21v10h2v-5.836L31.335 31H32a3.99 3.99 0 0 0 2.852-1.199L25.14 23h3.487l7.215 5.052c.093-.337.158-.686.158-1.052v-.058L30.369 23H36v-2zM0 21v2h5.63L0 26.941V27c0 1.091.439 2.078 1.148 2.8l9.711-6.8H13v.943l-9.914 6.941c.294.07.598.116.914.116h.664L13 25.163V31h2V21H0zM36 9a3.983 3.983 0 0 0-1.148-2.8L25.141 13H23v-.943l9.915-6.942A4.001 4.001 0 0 0 32 5h-.663L23 10.837V5h-2v10h15v-2h-5.629L36 9.059V9zM13 5v5.837L4.664 5H4a3.985 3.985 0 0 0-2.852 1.2l9.711 6.8H7.372L.157 7.949A3.968 3.968 0 0 0 0 9v.059L5.628 13H0v2h15V5h-2z"/>
+                                            <path fill="#CF1B2B" d="M21 15V5h-6v10H0v6h15v10h6V21h15v-6z"/>
+                                        </svg>
+                                        English (UK)
+                                    </a>
+                                    <a @click="locale = 'zh_CN'; $i18n.locale = locale; dropdownVisible = false"
+                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 transition-colors flex gap-2 items-center">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
+                                             viewBox="0 0 36 36">
+                                            <path fill="#DE2910" d="M36 27a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v18z"/>
+                                            <path fill="#FFDE02"
+                                                  d="m11.136 8.977l.736.356l.589-.566l-.111.81l.72.386l-.804.144l-.144.804l-.386-.72l-.81.111l.566-.589zm4.665 2.941l-.356.735l.566.59l-.809-.112l-.386.721l-.144-.805l-.805-.144l.721-.386l-.112-.809l.59.566zm-.957 3.779l.268.772l.817.017l-.651.493l.237.783l-.671-.467l-.671.467l.236-.783l-.651-.493l.817-.017zm-3.708 3.28l.736.356l.589-.566l-.111.81l.72.386l-.804.144l-.144.804l-.386-.72l-.81.111l.566-.589zM7 10.951l.929 2.671l2.826.058l-2.253 1.708l.819 2.706L7 16.479l-2.321 1.615l.819-2.706l-2.253-1.708l2.826-.058z"/>
+                                        </svg>
+                                        中文 (中国)
+                                    </a>
+                                    <a @click="locale = 'zh_TW'; $i18n.locale = locale; dropdownVisible = false"
+                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 transition-colors flex gap-2 items-center">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
+                                             viewBox="0 0 36 36">
+                                            <path fill="#FE0000" d="M32 5H17v13H0v9a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4z"/>
+                                            <path fill="#000095"
+                                                  d="M17 5H4a4 4 0 0 0-4 4v9h17V5zm-6.063 4.61l2.035-.548l-1.491 1.487a2.881 2.881 0 0 0-.544-.939zm.251 1.89a2.438 2.438 0 1 1-4.876 0a2.438 2.438 0 0 1 4.876 0zm0-4.222l-.548 2.035a2.871 2.871 0 0 0-.939-.544l1.487-1.491zM8.75 6.625l.542 2.034c-.175-.033-.357-.052-.542-.052s-.367.019-.542.052l.542-2.034zm-.951 2.144a2.881 2.881 0 0 0-.939.544l-.548-2.035l1.487 1.491zm-1.236.841a2.871 2.871 0 0 0-.544.939L4.528 9.062l2.035.548zm-.654 1.348a2.854 2.854 0 0 0 0 1.084L3.875 11.5l2.034-.542zm.11 1.492c.121.348.308.666.544.939l-2.035.548l1.491-1.487zm.293 3.272l.548-2.035c.273.236.591.423.939.544l-1.487 1.491zm2.438.653l-.542-2.034a2.854 2.854 0 0 0 1.084 0l-.542 2.034zm.951-2.144c.348-.121.666-.308.939-.544l.548 2.035l-1.487-1.491zm1.236-.841c.237-.273.423-.591.544-.939l1.491 1.487l-2.035-.548zm.654-1.348a2.854 2.854 0 0 0 0-1.084l2.034.542l-2.034.542z"/>
+                                            <path fill="#FFF"
+                                                  d="M9.292 8.659L8.75 6.625l-.542 2.034c.175-.033.357-.052.542-.052s.367.019.542.052zM5.857 11.5c0-.185.018-.367.052-.542l-2.034.542l2.034.542a2.93 2.93 0 0 1-.052-.542zm2.351 2.841l.542 2.034l.542-2.034a2.854 2.854 0 0 1-1.084 0zm3.435-2.841c0 .185-.018.367-.052.542l2.034-.542l-2.034-.542c.033.175.052.357.052.542zm-.455-4.222L9.701 8.769c.348.122.666.308.939.544l.548-2.035zm-.251 6.112l2.035.548l-1.491-1.487a2.881 2.881 0 0 1-.544.939zm-4.625 2.332l1.487-1.491a2.889 2.889 0 0 1-.939-.544l-.548 2.035zm.251-6.112l-2.035-.548l1.491 1.487c.121-.348.307-.665.544-.939zm3.138 4.621l1.487 1.491l-.548-2.035a2.881 2.881 0 0 1-.939.544zM6.019 12.45l-1.491 1.487l2.035-.548a2.86 2.86 0 0 1-.544-.939zm1.78-3.681L6.312 7.278l.548 2.035c.274-.237.591-.423.939-.544zm5.173.293l-2.035.548c.237.273.423.591.544.939l1.491-1.487z"/>
+                                            <circle cx="8.75" cy="11.5" r="2.438" fill="#FFF"/>
+                                        </svg>
+                                        中文 (台灣)
+                                    </a>
+                                </div>
+                            </div>
+                        </transition>
+                    </div>
+                </NavbarButton>
+
+                <NavbarButton @click="setDarkMode(!(($event.target as any)?.checked ?? darkMode()))" :key="componentKey">
+                    <svg v-if="darkMode()" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                         stroke-width="2"
+                         stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <path d="M7.962 3.949a8.97 8.97 0 0 1 4.038 -.957v.008h.393a7.478 7.478 0 0 0 -2.07 3.308m-.141 3.84c.186 .823 .514 1.626 .989 2.373a7.49 7.49 0 0 0 4.586 3.268m3.893 -.11c.223 -.067 .444 -.144 .663 -.233a9.088 9.088 0 0 1 -.274 .597m-1.695 2.337a9 9 0 0 1 -12.71 -12.749"></path>
+                        <path d="M3 3l18 18"></path>
+                    </svg>
+                    <svg v-else xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                         stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
+                    </svg>
+                </NavbarButton>
+            </div>
         </div>
     </div>
 </template>
@@ -28,6 +107,8 @@
 <script lang="ts">
 import {defineComponent} from "vue"
 import NavbarButton from "./NavbarButton.vue"
+import {mapWritableState} from "pinia"
+import {useI18nStore} from "../app/i18n-store"
 
 export default defineComponent({
     name: "Navbar",
@@ -35,8 +116,12 @@ export default defineComponent({
     data() {
         return {
             componentKey: 0,
+            dropdownVisible: false,
         }
     },
+    computed: {
+        ...mapWritableState(useI18nStore, ["locale"]),
+    },
     methods: {
         darkMode(): boolean {
             return localStorage.getItem("theme") === "dark"
diff --git a/frontend/src/components/NavbarButton.vue b/frontend/src/components/NavbarButton.vue
index 933288f..d35b14a 100644
--- a/frontend/src/components/NavbarButton.vue
+++ b/frontend/src/components/NavbarButton.vue
@@ -1,7 +1,8 @@
 <template>
     <a :class="[
-            'px-4 py-3 rounded-lg hover:opacity-70 transition-all normal-case flex items-center',
+            'px-4 py-3 rounded-lg transition-all normal-case flex items-center',
             bold ? 'text-xl font-bold' : 'font-medium',
+            hoverDim ? 'hover:opacity-70' : '',
     ]" :href="href">
         <slot/>
     </a>
@@ -19,6 +20,10 @@ export default defineComponent({
             type: Boolean,
             default: false,
         },
+        hoverDim: {
+            type: Boolean,
+            default: true,
+        },
     },
 })
 </script>
diff --git a/frontend/src/components/dependencies/DependencyFilterBlock.vue b/frontend/src/components/dependencies/DependencyFilterBlock.vue
index 492667e..bdbf49d 100644
--- a/frontend/src/components/dependencies/DependencyFilterBlock.vue
+++ b/frontend/src/components/dependencies/DependencyFilterBlock.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col">
-        <SubHeader :add-padding="false" class="pb-1">Loader</SubHeader>
+        <SubHeader :add-padding="false" class="pb-1"> {{ $t("dependencies.loader") }} </SubHeader>
 
         <div v-for="l in loaders" :class="[
             loader === l ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
@@ -10,26 +10,26 @@
 
         <div v-if="loader === 'forge'">
             <div class="divider mt-0 mb-0"/>
-            <SubHeader :add-padding="false" class="pb-1">Build System</SubHeader>
+            <SubHeader :add-padding="false" class="pb-1"> {{ $t("dependencies.build.system") }} </SubHeader>
 
             <div :class="[
             !forgeGradle ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
             'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral hover:text-white']" @click="forgeGradle = false">
-                Architectury Loom
+                {{ $t("dependencies.build.system.architectury.loom") }}
             </div>
 
             <div :class="[
             forgeGradle ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
             'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral hover:text-white']" @click="forgeGradle = true">
-                ForgeGradle
+                {{ $t("dependencies.build.system.forge.gradle") }}
             </div>
         </div>
 
         <div class="divider mt-0 mb-0"/>
-        <SubHeader :add-padding="false" class="pb-1">Version</SubHeader>
+        <SubHeader :add-padding="false" class="pb-1"> {{ $t("dependencies.version") }} </SubHeader>
         <div class="flex flex-col flex-nowrap justify-center h-full whitespace-nowrap pb-2" v-if="loader === 'fabric'">
             <div>
-                <span class="pr-2">Enable snapshots</span>
+                <span class="pr-2"> {{ $t("dependencies.version.snapshots") }} </span>
                 <input type="checkbox" class="checkbox checkbox-primary h-4" :checked="allowSnapshots" aria-label="Enable Snapshots"
                        @input="allowSnapshots = (($event.target as any)?.checked ?? allowSnapshots)"/>
             </div>
diff --git a/frontend/src/components/mappings/MappingsEntryBlock.vue b/frontend/src/components/mappings/MappingsEntryBlock.vue
index 6b1c8b4..93acb4f 100644
--- a/frontend/src/components/mappings/MappingsEntryBlock.vue
+++ b/frontend/src/components/mappings/MappingsEntryBlock.vue
@@ -14,7 +14,7 @@
                     'badge-primary': entry.type === 'class',
                     'badge-secondary': entry.type === 'field',
                     'badge-accent': entry.type === 'method',
-                    }">{{ entry.type }}
+                    }">{{ $t(`mappings.entry.type.${entry.type}`) }}
                     </div>
                 </div>
                 <div class="cursor-pointer" v-if="namespace?.supportsSource" @click="requestSource()">
@@ -36,31 +36,31 @@
             </ul>
         </div>
         <div class="divider mt-0 mb-0"/>
-        <EntryDetails v-if="entry.type === 'field' && namespace.supportsFieldDescription" title="Type:" :code="false">
+        <EntryDetails v-if="entry.type === 'field' && namespace.supportsFieldDescription" :title="$t('mappings.entry.type')" :code="false">
             <Copyable :copy="fieldType(entry)" strokeWidth="1">{{ fieldType(entry) }}</Copyable>
         </EntryDetails>
-        <EntryDetails v-if="entry.type !== 'class' && namespace.supportsMixin" title="Mixin Target:">
+        <EntryDetails v-if="entry.type !== 'class' && namespace.supportsMixin" :title="$t('mappings.entry.mixin.target')">
             <Copyable :copy="mixinTarget(entry)" strokeWidth="1">{{ mixinTarget(entry) }}</Copyable>
         </EntryDetails>
-        <EntryDetails v-if="namespace.supportsAT" title="AT:">
+        <EntryDetails v-if="namespace.supportsAT" :title="$t('mappings.entry.at')">
             <Copyable :copy="atText(entry)" strokeWidth="1">{{ atText(entry) }}</Copyable>
         </EntryDetails>
-        <EntryDetails v-if="namespace.supportsAW" title="AW:">
+        <EntryDetails v-if="namespace.supportsAW" :title="$t('mappings.entry.aw')">
             <Copyable :copy="awText(entry)" strokeWidth="1">{{ awText(entry) }}</Copyable>
         </EntryDetails>
 
         <div v-if="hasTranslation">
             <div class="divider mt-0 mb-0"/>
-            <EntryDetails v-if="entry.type === 'field' && translatedToNamespace.supportsFieldDescription" title="Type:" :code="false">
+            <EntryDetails v-if="entry.type === 'field' && translatedToNamespace.supportsFieldDescription" :title="$t('mappings.entry.type')" :code="false">
                 <Copyable :copy="fieldType(entry.translatedTo)" strokeWidth="1">{{ fieldType(entry.translatedTo) }}</Copyable>
             </EntryDetails>
-            <EntryDetails v-if="entry.type !== 'class' && translatedToNamespace.supportsMixin" title="Mixin Target:">
+            <EntryDetails v-if="entry.type !== 'class' && translatedToNamespace.supportsMixin" :title="$t('mappings.entry.mixin.target')">
                 <Copyable :copy="mixinTarget(entry.translatedTo)" strokeWidth="1">{{ mixinTarget(entry.translatedTo) }}</Copyable>
             </EntryDetails>
-            <EntryDetails v-if="translatedToNamespace.supportsAT" title="AT:">
+            <EntryDetails v-if="translatedToNamespace.supportsAT" :title="$t('mappings.entry.at')">
                 <Copyable :copy="atText(entry.translatedTo)" strokeWidth="1">{{ atText(entry.translatedTo) }}</Copyable>
             </EntryDetails>
-            <EntryDetails v-if="translatedToNamespace.supportsAW" title="AW:">
+            <EntryDetails v-if="translatedToNamespace.supportsAW" :title="$t('mappings.entry.aw')">
                 <Copyable :copy="awText(entry.translatedTo)" strokeWidth="1">{{ awText(entry.translatedTo) }}</Copyable>
             </EntryDetails>
         </div>
diff --git a/frontend/src/components/mappings/MappingsFilterBlock.vue b/frontend/src/components/mappings/MappingsFilterBlock.vue
index 9489885..bf4fcde 100644
--- a/frontend/src/components/mappings/MappingsFilterBlock.vue
+++ b/frontend/src/components/mappings/MappingsFilterBlock.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col">
-        <SubHeader :add-padding="false" class="pb-1">Namespace</SubHeader>
+        <SubHeader :add-padding="false" class="pb-1"> {{ $t("mappings.namespace") }} </SubHeader>
 
         <div v-for="[group, nses] in Object.entries(namespacesGrouped)" class="pb-1">
             <div v-if="group !== 'Others' || expandNamespaces">
@@ -22,18 +22,18 @@
                 <polyline points="6 9 12 15 18 9"></polyline>
             </svg>
             <span v-if="!expandNamespaces">
-                Show More...
+                {{ $t("mappings.namespace.show.more") }} 
             </span>
             <span v-else>
-                Show Less...
+                {{ $t("mappings.namespace.show.less") }} 
             </span>
         </div>
 
         <div class="divider mt-0 mb-0"/>
-        <SubHeader :add-padding="false" class="pb-1">Version</SubHeader>
+        <SubHeader :add-padding="false" class="pb-1"> {{ $t("mappings.version") }} </SubHeader>
         <div class="flex flex-col flex-nowrap justify-center h-full whitespace-nowrap pb-2">
             <div>
-                <span class="pr-2">Enable snapshots</span>
+                <span class="pr-2"> {{ $t("mappings.version.snapshots") }} </span>
                 <input type="checkbox" class="checkbox checkbox-primary h-4" :checked="allowSnapshots" aria-label="Enable Snapshots"
                        @input="allowSnapshots = ($event.target as any)?.checked ?? allowSnapshots"/>
             </div>
@@ -46,20 +46,20 @@
                     v.hasTranslation ? 'transition-all hover:opacity-100 hover:bg-neutral hover:text-white rounded-md cursor-pointer' : 'cursor-not-allowed line-through',
                     'px-2 py-1']"
                    @click="version = v.hasTranslation ? v.version : version">
-                    {{ v.hasTranslation ? v.version : v.version + " (no translation)" }}
+                    {{ !v.hasTranslation ? $t("mappings.version.no.translation", { version: v.version }) : v.version }}
                 </p>
             </div>
         </div>
 
         <div class="divider mt-0 mb-0"/>
         <div class="mt-2">
-            <SubHeader :add-padding="false" class="pb-2">Translation</SubHeader>
-            <p class="text-sm font-bold">No Translation</p>
+            <SubHeader :add-padding="false" class="pb-2"> {{ $t("mappings.translation") }} </SubHeader>
+            <p class="text-sm font-bold"> {{ $t("mappings.translation.none") }} </p>
             <div :class="[
                 translateAs === undefined ? 'opacity-100 font-bold' : 'opacity-60 hover:font-normal',
                 'cursor-pointer px-2 py-1 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral hover:text-white']"
                  @click="translateAs = undefined">
-                N/A
+                {{ $t("mappings.translation.n/a") }}
             </div>
             <div v-for="[group, nses] in Object.entries(namespacesGrouped)" class="pb-1">
                 <p class="text-sm font-bold">{{ group }}</p>
diff --git a/frontend/src/components/mappings/MappingsSearchBlock.vue b/frontend/src/components/mappings/MappingsSearchBlock.vue
index fc7371f..65017f1 100644
--- a/frontend/src/components/mappings/MappingsSearchBlock.vue
+++ b/frontend/src/components/mappings/MappingsSearchBlock.vue
@@ -2,10 +2,10 @@
     <div class="px-5 pb-6">
         <div class="bg-base-100 shadow-xl rounded-lg overflow-x-auto">
             <div class="flex px-2 pt-2">
-                <span class="flex items-center justify-center ml-2 mr-3 font-bold whitespace-nowrap">Search Type: </span>
-                <MappingsFilterPill :enabled="allowClasses" text="Classes" @click="allowClasses = !allowClasses"/>
-                <MappingsFilterPill :enabled="allowMethods" text="Methods" @click="allowMethods = !allowMethods"/>
-                <MappingsFilterPill :enabled="allowFields" text="Fields" @click="allowFields = !allowFields"/>
+                <span class="flex items-center justify-center ml-2 mr-3 font-bold whitespace-nowrap"> {{ $t("mappings.search.type") }} </span>
+                <MappingsFilterPill :enabled="allowClasses" :text="$t('mappings.search.type.classes')" @click="allowClasses = !allowClasses"/>
+                <MappingsFilterPill :enabled="allowMethods" :text="$t('mappings.search.type.methods')" @click="allowMethods = !allowMethods"/>
+                <MappingsFilterPill :enabled="allowFields" :text="$t('mappings.search.type.fields')" @click="allowFields = !allowFields"/>
                 <div class="border-base-100 border-[0.25rem] border-solid"/>
             </div>
             <div class="flex flex-wrap items-center">
diff --git a/frontend/src/locales/en_GB.json b/frontend/src/locales/en_GB.json
new file mode 100644
index 0000000..7a73a41
--- /dev/null
+++ b/frontend/src/locales/en_GB.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/frontend/src/locales/en_US.json b/frontend/src/locales/en_US.json
new file mode 100644
index 0000000..d58c4c8
--- /dev/null
+++ b/frontend/src/locales/en_US.json
@@ -0,0 +1,54 @@
+{
+    "navbar./": "Linkie",
+    "navbar./dependencies": "Dependencies",
+    "navbar./mappings": "Mappings",
+    "home.welcome": "Welcome to Linkie",
+    "home.quick.access": "Quick Access",
+    "home.dependencies": "Dependencies",
+    "home.mappings": "Mappings",
+    "dependencies.loader": "Loader",
+    "dependencies.build.system": "Build System",
+    "dependencies.build.system.architectury.loom": "Architectury Loom",
+    "dependencies.build.system.forge.gradle": "ForgeGradle",
+    "dependencies.version": "Version",
+    "dependencies.version.snapshots": "Enable snapshots:",
+    "dependencies.maven.repo": "Maven Repository",
+    "dependencies.toc": "Table of Contents",
+    "mappings.namespace": "Namespace",
+    "mappings.namespace.show.more": "Show More...",
+    "mappings.namespace.show.less": "Show Less...",
+    "mappings.version": "Version",
+    "mappings.version.snapshots": "Enable snapshots:",
+    "mappings.version.no.translation": "{version} (no translation)",
+    "mappings.translation": "Translation",
+    "mappings.translation.none": "No Translation",
+    "mappings.translation.n/a": "N/a",
+    "mappings.search.type": "Search Type:",
+    "mappings.search.type.classes": "Classes",
+    "mappings.search.type.methods": "Methods",
+    "mappings.search.type.fields": "Fields",
+    "mappings.searching": "Searching Results",
+    "mappings.searching.subtitle": "Feeling Lucky?",
+    "mappings.searching.none": "No Results",
+    "mappings.searching.none.try": "Try searching something?",
+    "mappings.searching.none.mistake": "Did you make a mistake in your search?",
+    "mappings.entry.type.class": "Class",
+    "mappings.entry.type.method": "Method",
+    "mappings.entry.type.field": "Field",
+    "mappings.entry.type": "Type:",
+    "mappings.entry.mixin.target": "Mixin Target:",
+    "mappings.entry.at": "AT:",
+    "mappings.entry.aw": "AW:",
+    "namespace.yarn": "Yarn",
+    "namespace.mojang": "Mojang",
+    "namespace.mojang_srg": "Mojang (SRG)",
+    "namespace.mojang_hashed": "Mojang (Hashed)",
+    "namespace.mcp": "MCP",
+    "namespace.quilt-mappings": "Quilt Mappings",
+    "namespace.legacy-yarn": "Legacy Yarn",
+    "namespace.yarrn": "Yarrn",
+    "namespace.plasma": "Plasma",
+    "loader.fabric": "Fabric",
+    "loader.forge": "Forge",
+    "loader.quilt": "Quilt"
+}
\ No newline at end of file
diff --git a/frontend/src/locales/zh_CN.json b/frontend/src/locales/zh_CN.json
new file mode 100644
index 0000000..f8acf1b
--- /dev/null
+++ b/frontend/src/locales/zh_CN.json
@@ -0,0 +1,41 @@
+{
+    "navbar./dependencies": "配置",
+    "navbar./mappings": "搜索",
+    "home.welcome": "欢迎使用 Linkie",
+    "home.quick.access": "快速入门",
+    "home.dependencies": "配置",
+    "home.mappings": "搜索",
+    "dependencies.loader": "模块加载器",
+    "dependencies.build.system": "建构系统",
+    "dependencies.build.system.architectury.loom": "Architectury Loom",
+    "dependencies.build.system.forge.gradle": "ForgeGradle",
+    "dependencies.version": "版本",
+    "dependencies.version.snapshots": "使用快照版:",
+    "dependencies.maven.repo": "Maven 文件库",
+    "dependencies.toc": "目录",
+    "mappings.namespace": "反混淆方案",
+    "mappings.namespace.show.more": "显示更多...",
+    "mappings.namespace.show.less": "显示较少...",
+    "mappings.version": "版本",
+    "mappings.version.no.translation": "{version} (没有翻译)",
+    "mappings.version.snapshots": "使用快照版:",
+    "mappings.translation": "翻译",
+    "mappings.translation.none": "禁用翻译",
+    "mappings.translation.n/a": "N/a",
+    "mappings.search.type": "搜索类型:",
+    "mappings.search.type.classes": "类型",
+    "mappings.search.type.methods": "方法",
+    "mappings.search.type.fields": "属性",
+    "mappings.searching": "正在搜索结果",
+    "mappings.searching.subtitle": "好手气？",
+    "mappings.searching.none": "没有结果",
+    "mappings.searching.none.try": "试试搜索什么？",
+    "mappings.searching.none.mistake": "你的搜索词是否正确？",
+    "mappings.entry.type.class": "类型",
+    "mappings.entry.type.method": "方法",
+    "mappings.entry.type.field": "属性",
+    "mappings.entry.type": "类型:",
+    "mappings.entry.mixin.target": "Mixin 目标:",
+    "mappings.entry.at": "AT:",
+    "mappings.entry.aw": "AW:"
+}
\ No newline at end of file
diff --git a/frontend/src/locales/zh_TW.json b/frontend/src/locales/zh_TW.json
new file mode 100644
index 0000000..ba3698c
--- /dev/null
+++ b/frontend/src/locales/zh_TW.json
@@ -0,0 +1,41 @@
+{
+    "navbar./dependencies": "配置",
+    "navbar./mappings": "搜尋",
+    "home.welcome": "歡迎使用 Linkie",
+    "home.quick.access": "快速入門",
+    "home.dependencies": "配置",
+    "home.mappings": "搜尋",
+    "dependencies.loader": "模組載入器",
+    "dependencies.build.system": "建構系統",
+    "dependencies.build.system.architectury.loom": "Architectury Loom",
+    "dependencies.build.system.forge.gradle": "ForgeGradle",
+    "dependencies.version": "版本",
+    "dependencies.version.snapshots": "啟用快照版:",
+    "dependencies.maven.repo": "Maven 檔案庫",
+    "dependencies.toc": "目錄",
+    "mappings.namespace": "反混淆方案",
+    "mappings.namespace.show.more": "顯示更多...",
+    "mappings.namespace.show.less": "顯示較少...",
+    "mappings.version": "版本",
+    "mappings.version.no.translation": "{version} (沒有翻譯)",
+    "mappings.version.snapshots": "啟用快照版:",
+    "mappings.translation": "翻譯",
+    "mappings.translation.none": "禁用翻譯",
+    "mappings.translation.n/a": "N/a",
+    "mappings.search.type": "搜尋類型:",
+    "mappings.search.type.classes": "類型",
+    "mappings.search.type.methods": "方法",
+    "mappings.search.type.fields": "屬性",
+    "mappings.searching": "正在搜尋結果",
+    "mappings.searching.subtitle": "好手氣？",
+    "mappings.searching.none": "沒有結果",
+    "mappings.searching.none.try": "試試搜尋什麽？",
+    "mappings.searching.none.mistake": "你的搜尋詞是否正確？",
+    "mappings.entry.type.class": "類型",
+    "mappings.entry.type.method": "方法",
+    "mappings.entry.type.field": "屬性",
+    "mappings.entry.type": "類型:",
+    "mappings.entry.mixin.target": "Mixin 目標:",
+    "mappings.entry.at": "AT:",
+    "mappings.entry.aw": "AW:"
+}
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index a85b25e..e0524fc 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,20 +1,29 @@
 import {createApp} from "vue"
+import {createI18n} from "vue-i18n"
 import axios from "axios"
 import VueAxios from "vue-axios"
 import App from "./App.vue"
 import "./index.css"
 import "nprogress/nprogress.css"
-import hljs from 'highlight.js/lib/core';
-import groovy from 'highlight.js/lib/languages/groovy';
-import gradle from 'highlight.js/lib/languages/gradle';
-import java from 'highlight.js/lib/languages/java';
-import kotlin from 'highlight.js/lib/languages/kotlin';
-import hljsVuePlugin from "@highlightjs/vue-plugin";
+import hljs from "highlight.js/lib/core"
+import groovy from "highlight.js/lib/languages/groovy"
+import gradle from "highlight.js/lib/languages/gradle"
+import java from "highlight.js/lib/languages/java"
+import kotlin from "highlight.js/lib/languages/kotlin"
+import hljsVuePlugin from "@highlightjs/vue-plugin"
 // @ts-ignore
 import NProgress from "nprogress"
 import {HTTP} from "./app/backend"
 import {createPinia} from "pinia"
 import persistedState from "pinia-plugin-persistedstate"
+// @ts-ignore
+import enUS from "./locales/en_US.json"
+// @ts-ignore
+import enGB from "./locales/en_GB.json"
+// @ts-ignore
+import zhCN from "./locales/zh_CN.json"
+// @ts-ignore
+import zhTW from "./locales/zh_TW.json"
 
 NProgress.configure({
     showSpinner: false,
@@ -40,10 +49,21 @@ HTTP.interceptors.response.use(response => {
     return Promise.reject(error)
 })
 
-hljs.registerLanguage('java', java);
-hljs.registerLanguage('groovy', groovy);
-hljs.registerLanguage('kotlin', kotlin);
-hljs.registerLanguage('gradle', gradle);
+hljs.registerLanguage("java", java)
+hljs.registerLanguage("groovy", groovy)
+hljs.registerLanguage("kotlin", kotlin)
+hljs.registerLanguage("gradle", gradle)
+
+const i18n = createI18n({
+    locale: "en_US",
+    fallbackLocale: "en_US",
+    messages: {
+        "en_US": enUS,
+        "en_GB": enGB,
+        "zh_CN": zhCN,
+        "zh_TW": zhTW,
+    },
+})
 
 let pinia = createPinia()
 
@@ -55,4 +75,6 @@ app.provide("axios", app.config.globalProperties.axios)
 
 app.use(hljsVuePlugin)
 
+app.use(i18n)
+
 app.mount("#app")
diff --git a/frontend/src/routes/Dependencies.vue b/frontend/src/routes/Dependencies.vue
index d0a37ad..f3f42af 100644
--- a/frontend/src/routes/Dependencies.vue
+++ b/frontend/src/routes/Dependencies.vue
@@ -9,7 +9,7 @@
                     </div>
 
                     <div class="p-5 mt-6 card bg-base-100 shadow-xl rounded-lg">
-                        <SubHeader :add-padding="false">Table of Contents</SubHeader>
+                        <SubHeader :add-padding="false"> {{ $t("dependencies.toc") }} </SubHeader>
                         <ol class="list-decimal pl-6 mt-2">
                             <li v-for="entry in dependencyBlocks">
                                 <a :href="'#dep-' + dependencyBlocks.indexOf(entry)">{{ entry[0] }}</a>
@@ -23,7 +23,7 @@
                                      :id="'dep-' + dependencyBlocks.findIndex(entry => entry[0] === blockName)">
                         <div v-if="block.mavens.length > 0">
                             <div v-for="maven in block.mavens">
-                                <SubHeader v-if="block.mavens.indexOf(maven) === 0 && !maven.subtitle">Maven Repository</SubHeader>
+                                <SubHeader v-if="block.mavens.indexOf(maven) === 0 && !maven.subtitle"> {{ $t("dependencies.maven.repo") }} </SubHeader>
 
                                 <CodeBlock :title="maven.subtitle ?? ''">
                                     <Copyable :copy="formatMaven(maven.url)" stroke-width="1">
diff --git a/frontend/src/routes/Home.vue b/frontend/src/routes/Home.vue
index 18b25f0..fc6bf5b 100644
--- a/frontend/src/routes/Home.vue
+++ b/frontend/src/routes/Home.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="flex flex-col">
-        <h1 class="pt-40 pb-28 text-center text-6xl font-bold title-home text-white">Welcome to Linkie</h1>
+        <h1 class="pt-40 pb-28 text-center text-6xl font-bold title-home text-white"> {{ $t("home.welcome") }} </h1>
 
         <div class="max-w-[78rem] mx-auto pl-4 pr-10 flex-1 pt-8">
-            <Header>Quick Access</Header>
+            <Header> {{ $t("home.quick.access") }} </Header>
             <SubHeader class="text-2xl">
                 <a class="flex flex-nowrap gap-2" href="/dependencies">
-                    Dependencies
+                    {{ $t("home.dependencies") }}
                     <div class="flex flex-col">
                         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler flex-1" width="20" height="20" viewBox="0 0 24 24"
                              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -24,7 +24,7 @@
 
             <SubHeader class="text-2xl">
                 <a class="flex flex-nowrap gap-2" href="/mappings">
-                    Mappings
+                    {{ $t("home.mappings") }}
                     <div class="flex flex-col">
                         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler flex-1" width="20" height="20" viewBox="0 0 24 24"
                              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
diff --git a/frontend/src/routes/Mappings.vue b/frontend/src/routes/Mappings.vue
index 87d5004..940a586 100644
--- a/frontend/src/routes/Mappings.vue
+++ b/frontend/src/routes/Mappings.vue
@@ -20,8 +20,8 @@
                         <circle cx="10" cy="10" r="7"></circle>
                         <line x1="21" y1="21" x2="15" y2="15"></line>
                     </svg>
-                    <p class="font-bold">Searching Results</p>
-                    <p>Feeling Lucky?</p>
+                    <p class="font-bold"> {{ $t("mappings.searching") }} </p>
+                    <p> {{ $t("mappings.searching.subtitle") }} </p>
                 </div>
                 <div v-else class="m-10 flex flex-col items-center">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ban m-4" width="24" height="24" viewBox="0 0 24 24"
@@ -30,9 +30,9 @@
                         <circle cx="12" cy="12" r="9"></circle>
                         <line x1="5.7" y1="5.7" x2="18.3" y2="18.3"></line>
                     </svg>
-                    <p class="font-bold">No Results</p>
-                    <p v-if="!infoData.query">Try searching something?</p>
-                    <p v-else>Did you make a mistake in your search?</p>
+                    <p class="font-bold"> {{ $t("mappings.searching.none") }} </p>
+                    <p v-if="!infoData.query"> {{ $t("mappings.searching.none.try") }} </p>
+                    <p v-else> {{ $t("mappings.searching.none.mistake") }} </p>
                 </div>
             </div>
         </div>