diff --git a/app/src/components/GameHeaderComponents.vue b/app/src/components/GameHeaderComponents.vue
new file mode 100644
index 0000000..7cc0898
--- /dev/null
+++ b/app/src/components/GameHeaderComponents.vue
@@ -0,0 +1,95 @@
+<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
new file mode 100644
index 0000000..13c54cf
--- /dev/null
+++ b/app/src/components/HeaderPart.vue
@@ -0,0 +1,41 @@
+<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
new file mode 100644
index 0000000..146b209
--- /dev/null
+++ b/app/src/components/LandingHeaderComponents.vue
@@ -0,0 +1,63 @@
+<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>