diff --git a/app/src/components/GameHeaderComponents.vue b/app/src/components/GameHeaderComponents.vue
deleted file mode 100644
index 7cc0898..0000000
--- a/app/src/components/GameHeaderComponents.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script setup>
-import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useToast } from 'vue-toastification'
-import { logout } from '../utils/auth'
-import { bugReportUrl, surveyUrl } from '../config'
-import { reset } from '../store/session'
-import userProfileStore, {
-  loadUserProfile,
-  resetUserProfile,
-} from '../store/userProfile'
-
-const router = useRouter()
-
-const toast = useToast()
-
-const handleLogout = async () => {
-  try {
-    await logout()
-    resetUserProfile()
-    reset()
-    router.push({ name: 'login' })
-  } catch (err) {
-    // toast.error('Failed to logout')
-    toast.error('登出失敗')
-    console.error(err)
-  }
-}
-
-onMounted(async () => {
-  try {
-    await loadUserProfile()
-  } catch (err) {
-    // toast.error('Failed to load user profile')
-    toast.error('無法讀取使用者資料')
-  }
-})
-</script>
-<template>
-  <!-- <button id="warning" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'triangle-exclamation']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="setting" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'gear']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="fullscreen" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'expand']"
-            class="text-text-primary h-full w-full"
-          />
-        </button> -->
-  <p
-    id="UsernameText"
-    class="text-text inline-block whitespace-nowrap"
-    style="font-size: 2vh"
-  >
-    {{ userProfileStore.username }}
-  </p>
-  <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'file-invoice']"
-      class="text-text-primary h-full w-full"
-    />
-  </a>
-  <RouterLink title="LeaderBoard" to="/leaderboard" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'trophy']"
-      class="text-text-primary h-full w-full"
-    />
-  </RouterLink>
-  <RouterLink title="Map" to="/map" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'map']"
-      class="text-text-primary h-full w-full"
-    />
-  </RouterLink>
-  <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'bug']"
-      class="text-text-primary h-full w-full"
-    />
-  </a>
-  <button title="Sign Out" @click="handleLogout" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'arrow-right-from-bracket']"
-      class="text-text-primary h-full w-full"
-    />
-  </button>
-</template>
diff --git a/app/src/components/HeaderPart.vue b/app/src/components/HeaderPart.vue
deleted file mode 100644
index 13c54cf..0000000
--- a/app/src/components/HeaderPart.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup>
-import { defineProps } from 'vue'
-
-defineProps({
-  title: {
-    type: String,
-    required: false,
-  },
-  headerComponent: {
-    type: Object,
-    required: true,
-  },
-})
-</script>
-<template>
-  <div
-    id="header"
-    class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
-  >
-    <div class="flex flex-row items-center gap-3">
-      <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
-      <button
-        id="GameTitle"
-        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
-        style="font-size: 2vh"
-      >
-        Linux Odyssey
-      </button>
-      <p
-        id="QuestTitle"
-        class="text-text inline-block font-bold whitespace-nowrap"
-        style="font-size: 2vh"
-      >
-        {{ title }}
-      </p>
-    </div>
-    <div class="h-full w-full flex gap-3 items-center justify-end">
-      <component :is="headerComponent" />
-    </div>
-  </div>
-</template>
diff --git a/app/src/components/LandingHeaderComponents.vue b/app/src/components/LandingHeaderComponents.vue
deleted file mode 100644
index 146b209..0000000
--- a/app/src/components/LandingHeaderComponents.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup>
-const scrollToSection = (sectionId) => {
-  const section = document.getElementById(sectionId)
-  if (section) {
-    const container = document.querySelector('.overflow-y-auto') // Replace '.overflow-y-auto' with the appropriate class or selector for your container
-    if (container) {
-      container.scrollTo({
-        top: section.offsetTop - container.offsetTop,
-        behavior: 'smooth', // Add smooth scrolling behavior if desired
-      })
-    }
-  }
-}
-</script>
-<template>
-  <button
-    id="Intro"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
-    @click="scrollToSection('intro')"
-    style="font-size: 2vh"
-  >
-    前言
-  </button>
-  <button
-    id="Feature"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
-    @click="scrollToSection('feature')"
-    style="font-size: 2vh"
-  >
-    特色</button
-  ><button
-    id="Info"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
-    @click="scrollToSection('about')"
-    style="font-size: 2vh"
-  >
-    關於
-  </button>
-
-  <button
-    id="Contact"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
-    @click="scrollToSection('contact')"
-    style="font-size: 2vh"
-  >
-    聯絡我們
-  </button>
-  <RouterLink
-    title="Sign In"
-    id="SignIn"
-    to="/register"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
-    style="font-size: 2vh"
-  >
-    登入
-  </RouterLink>
-  <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'bug']"
-      class="text-text-primary h-full w-full"
-    />
-  </a>
-</template>
diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index 9f63d12..4e84e55 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/app/src/components/header/GameHeaderComponents.vue
@@ -105,3 +105,98 @@ onMounted(async () => {
     <span class="text-text sm:hidden px-2">Sign Out</span>
   </button>
 </template>
+<script setup>
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
+import { logout } from '../utils/auth'
+import { bugReportUrl, surveyUrl } from '../config'
+import { reset } from '../store/session'
+import userProfileStore, {
+  loadUserProfile,
+  resetUserProfile,
+} from '../store/userProfile'
+
+const router = useRouter()
+
+const toast = useToast()
+
+const handleLogout = async () => {
+  try {
+    await logout()
+    resetUserProfile()
+    reset()
+    router.push({ name: 'login' })
+  } catch (err) {
+    // toast.error('Failed to logout')
+    toast.error('登出失敗')
+    console.error(err)
+  }
+}
+
+onMounted(async () => {
+  try {
+    await loadUserProfile()
+  } catch (err) {
+    // toast.error('Failed to load user profile')
+    toast.error('無法讀取使用者資料')
+  }
+})
+</script>
+<template>
+  <!-- <button id="warning" class="flex items-center h-5 w-5">
+          <font-awesome-icon
+            :icon="['fas', 'triangle-exclamation']"
+            class="text-text-primary h-full w-full"
+          />
+        </button>
+        <button id="setting" class="flex items-center h-5 w-5">
+          <font-awesome-icon
+            :icon="['fas', 'gear']"
+            class="text-text-primary h-full w-full"
+          />
+        </button>
+        <button id="fullscreen" class="flex items-center h-5 w-5">
+          <font-awesome-icon
+            :icon="['fas', 'expand']"
+            class="text-text-primary h-full w-full"
+          />
+        </button> -->
+  <p
+    id="UsernameText"
+    class="text-text inline-block whitespace-nowrap"
+    style="font-size: 2vh"
+  >
+    {{ userProfileStore.username }}
+  </p>
+  <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
+    <font-awesome-icon
+      :icon="['fas', 'file-invoice']"
+      class="text-text-primary h-full w-full"
+    />
+  </a>
+  <RouterLink title="LeaderBoard" to="/leaderboard" class="h-5 w-5">
+    <font-awesome-icon
+      :icon="['fas', 'trophy']"
+      class="text-text-primary h-full w-full"
+    />
+  </RouterLink>
+  <RouterLink title="Map" to="/map" class="h-5 w-5">
+    <font-awesome-icon
+      :icon="['fas', 'map']"
+      class="text-text-primary h-full w-full"
+    />
+  </RouterLink>
+  <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
+    <font-awesome-icon
+      :icon="['fas', 'bug']"
+      class="text-text-primary h-full w-full"
+    />
+  </a>
+  <button title="Sign Out" @click="handleLogout" class="h-5 w-5">
+    <font-awesome-icon
+      :icon="['fas', 'arrow-right-from-bracket']"
+      class="text-text-primary h-full w-full"
+    />
+  </button>
+</template>
diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 5648bd8..0630f51 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -59,3 +59,44 @@ const toggleMenu = () => {
     </div>
   </div>
 </template>
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  title: {
+    type: String,
+    required: false,
+  },
+  headerComponent: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+<template>
+  <div
+    id="header"
+    class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
+  >
+    <div class="flex flex-row items-center gap-3">
+      <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
+      <button
+        id="GameTitle"
+        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
+        style="font-size: 2vh"
+      >
+        Linux Odyssey
+      </button>
+      <p
+        id="QuestTitle"
+        class="text-text inline-block font-bold whitespace-nowrap"
+        style="font-size: 2vh"
+      >
+        {{ title }}
+      </p>
+    </div>
+    <div class="h-full w-full flex gap-3 items-center justify-end">
+      <component :is="headerComponent" />
+    </div>
+  </div>
+</template>
diff --git a/app/src/components/header/LandingHeaderComponents.vue b/app/src/components/header/LandingHeaderComponents.vue
index e29002f..9331cc7 100644
--- a/app/src/components/header/LandingHeaderComponents.vue
+++ b/app/src/components/header/LandingHeaderComponents.vue
@@ -60,3 +60,66 @@ const scrollToSection = (sectionId) => {
     <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
   </a>
 </template>
+<script setup>
+const scrollToSection = (sectionId) => {
+  const section = document.getElementById(sectionId)
+  if (section) {
+    const container = document.querySelector('.overflow-y-auto') // Replace '.overflow-y-auto' with the appropriate class or selector for your container
+    if (container) {
+      container.scrollTo({
+        top: section.offsetTop - container.offsetTop,
+        behavior: 'smooth', // Add smooth scrolling behavior if desired
+      })
+    }
+  }
+}
+</script>
+<template>
+  <button
+    id="Intro"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    @click="scrollToSection('intro')"
+    style="font-size: 2vh"
+  >
+    前言
+  </button>
+  <button
+    id="Feature"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    @click="scrollToSection('feature')"
+    style="font-size: 2vh"
+  >
+    特色</button
+  ><button
+    id="Info"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    @click="scrollToSection('about')"
+    style="font-size: 2vh"
+  >
+    關於
+  </button>
+
+  <button
+    id="Contact"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    @click="scrollToSection('contact')"
+    style="font-size: 2vh"
+  >
+    聯絡我們
+  </button>
+  <RouterLink
+    title="Sign In"
+    id="SignIn"
+    to="/register"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    style="font-size: 2vh"
+  >
+    登入
+  </RouterLink>
+  <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
+    <font-awesome-icon
+      :icon="['fas', 'bug']"
+      class="text-text-primary h-full w-full"
+    />
+  </a>
+</template>