diff --git a/app/src/router.js b/app/src/router.js
index 1d3b420..b42b7cd 100644
--- a/app/src/router.js
+++ b/app/src/router.js
@@ -5,6 +5,7 @@ import RegisterPage from './views/RegisterPage.vue'
 import ChooseUsernamePage from './views/ChooseUsernamePage.vue'
 import QuestMapPage from './views/QuestMapPage.vue'
 import LeaderboardPage from './views/LeaderboardPage.vue'
+import LandingPage from './views/LandingPage.vue'
 import { isLoggedIn } from './utils/auth'
 
 const routes = [
@@ -51,6 +52,7 @@ const routes = [
     name: 'leaderboard',
     component: LeaderboardPage,
   },
+  { path: '/landing', name: 'landing-page', component: LandingPage },
 ]
 
 const router = createRouter({
diff --git a/app/src/views/LandingPage.vue b/app/src/views/LandingPage.vue
new file mode 100644
index 0000000..cef9d0b
--- /dev/null
+++ b/app/src/views/LandingPage.vue
@@ -0,0 +1,20 @@
+<script setup>
+// import { computed, onMounted } from 'vue'
+import { useToast } from 'vue-toastification'
+import GameHeaderPart from '../components/GameHeaderPart.vue'
+import DynamicBackground from '../components/DynamicBackground.vue'
+
+const toast = useToast()
+</script>
+<template>
+  <!-- game header -->
+  <div class="h-[6vh] w-full">
+    <GameHeaderPart :title="sessionStore.quest?.title" />
+  </div>
+  <div class="w-screen h-screen">
+    <DynamicBackground class="w-full h-full" />
+    <div
+      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+    ></div>
+  </div>
+</template>