diff --git a/app/src/components/header/LandingHeaderComponents.vue b/app/src/components/header/LandingHeaderComponents.vue
index f933b4c..6efab88 100644
--- a/app/src/components/header/LandingHeaderComponents.vue
+++ b/app/src/components/header/LandingHeaderComponents.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { bugReportUrl } from '../../config'
 
+const { t } = useI18n()
+
 const scrollToSection = (sectionId: string) => {
   const section = document.getElementById(sectionId)
   if (section) {
@@ -21,22 +24,25 @@ const scrollToSection = (sectionId: string) => {
     @click="scrollToSection('intro')"
     style="font-size: 2vh"
   >
-    前言
+    {{ t('nav.intro') }}
   </button>
+
   <button
     id="Feature"
     class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
     @click="scrollToSection('feature')"
     style="font-size: 2vh"
   >
-    特色</button
-  ><button
+    {{ t('nav.features') }}
+  </button>
+
+  <button
     id="Info"
     class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
     @click="scrollToSection('about')"
     style="font-size: 2vh"
   >
-    關於
+    {{ t('nav.about') }}
   </button>
 
   <button
@@ -45,18 +51,27 @@ const scrollToSection = (sectionId: string) => {
     @click="scrollToSection('contact')"
     style="font-size: 2vh"
   >
-    聯絡我們
+    {{ t('nav.contact') }}
   </button>
+
   <RouterLink
-    title="Sign In"
     id="SignIn"
     to="/register"
     class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
     style="font-size: 2vh"
   >
-    登入
+    {{ t('nav.login') }}
   </RouterLink>
-  <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
-    <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
+
+  <a
+    :title="t('nav.reportBug')"
+    :href="bugReportUrl"
+    target="_blank"
+    class="h-5 w-5"
+  >
+    <font-awesome-icon
+      :icon="['fas', 'bug']"
+      class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
+    />
   </a>
 </template>
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 920a106..6c2f4a9 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -3,5 +3,13 @@
     "change": "Change language",
     "traditionalChinese": "繁體中文",
     "english": "English"
+  },
+  "nav": {
+    "intro": "Introduction",
+    "features": "Features",
+    "about": "About",
+    "contact": "Contact",
+    "login": "Sign in",
+    "reportBug": "Report a bug"
   }
 }
diff --git a/app/src/i18n/locales/zh-TW.json b/app/src/i18n/locales/zh-TW.json
index 21f804f..519bbca 100644
--- a/app/src/i18n/locales/zh-TW.json
+++ b/app/src/i18n/locales/zh-TW.json
@@ -3,5 +3,13 @@
     "change": "切換語言",
     "traditionalChinese": "繁體中文",
     "english": "English"
+  },
+  "nav": {
+    "intro": "前言",
+    "features": "特色",
+    "about": "關於",
+    "contact": "聯絡我們",
+    "login": "登入",
+    "reportBug": "回報錯誤"
   }
 }