diff --git a/app/src/components/HintPart.vue b/app/src/components/HintPart.vue
index 0fe119e..4548a42 100644
--- a/app/src/components/HintPart.vue
+++ b/app/src/components/HintPart.vue
@@ -1,9 +1,52 @@
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import sessionManager from '../utils/session'
+
+const current = ref(1)
+const left = () => {
+  if (current.value > 1) {
+    current.value -= 1
+  }
+}
+const right = () => {
+  if (current.value < sessionManager.hints.value.length) {
+    current.value += 1
+  }
+}
+</script>
 
 <template>
-  <font-awesome-icon :icon="['far', 'lightbulb']" class="text-yellow-200 p-1" />
-  <h1 class="inline text-text font-xl">Hint</h1>
-  <div id="hint">
-    <p class="text-text">--Hint--</p>
+  <div class="flex flex-wrap">
+    <font-awesome-icon
+      :icon="['far', 'lightbulb']"
+      class="text-yellow-200 p-2"
+    />
+    <h1 class="inline text-text font-xl w-7/12 p-2 m-1">Hint</h1>
+    <button class="p-2 m-1 w-1/7" id="Lbutton" @click="left">
+      <font-awesome-icon
+        :icon="['fas', 'arrow-right']"
+        style="color: #deddda"
+        rotation="180"
+      />
+    </button>
+    <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current }}</p>
+    <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
+    <p class="inline text-text font-xl w-1/14 p-2 m-1">
+      {{ sessionManager.hints.value.length }}
+    </p>
+    <button class="p-2 m-1 w-1/7" id="Rbutton" @click="right">
+      <font-awesome-icon
+        :icon="['fas', 'arrow-right']"
+        style="color: #deddda"
+      />
+    </button>
+  </div>
+  <div id="hint" class="bg-background flex flex-wrap">
+    <div class="bg-background h-full rounded-lg p-8 m-1">
+      <p class="inline text-text font-xl font-xl">
+        {{ sessionManager.hints.value[current - 1] }}
+      </p>
+      <br />
+    </div>
   </div>
 </template>
diff --git a/app/src/main.js b/app/src/main.js
index d5067e7..207f7e9 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,11 +1,61 @@
 import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
 import './style.css'
+
+/* import the fontawesome core */
+import { library } from '@fortawesome/fontawesome-svg-core'
+
 /* import font awesome icon component */
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import './library'
+
+/* import specific icons */
+import {
+  faBars,
+  faArrowLeft,
+  faList,
+  faGear,
+  faTriangleExclamation,
+  faExpand,
+  faTerminal,
+  faArrowRotateLeft,
+  faArrowRight,
+} from '@fortawesome/free-solid-svg-icons'
+
+import {
+  faLightbulb,
+  faCircleQuestion,
+  faCircleRight,
+} from '@fortawesome/free-regular-svg-icons'
 
 import App from './App.vue'
-import router from './router'
+import GamePage from './views/GamePage.vue'
+import AuthPage from './views/AuthPage.vue'
+
+/* add icons to the library */
+library.add(
+  faBars,
+  faArrowLeft,
+  faTriangleExclamation,
+  faGear,
+  faExpand,
+  faList,
+  faLightbulb,
+  faCircleQuestion,
+  faArrowRotateLeft,
+  faCircleRight,
+  faTerminal,
+  faArrowRight
+)
+
+const routes = [
+  { path: '/', name: 'Home', component: AuthPage },
+  { path: '/game', name: 'Game', component: GamePage },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
 
 const app = createApp(App)
 
diff --git a/app/src/utils/session.js b/app/src/utils/session.js
index 1bf5a21..3f12a77 100644
--- a/app/src/utils/session.js
+++ b/app/src/utils/session.js
@@ -6,6 +6,7 @@ class SessionManager {
   constructor(questId) {
     this.questId = questId
     this.session = ref(null)
+    this.hints = ref([])
     this.graph = ref(
       new FileGraph({
         path: '/',
@@ -24,6 +25,7 @@ class SessionManager {
     console.log('Update session:', session)
     this.session.value = session
     this.graph.value = new FileGraph(session.graph)
+    this.hints.value = session.hints
   }
 
   handleGraphUpdate(event) {
@@ -35,6 +37,11 @@ class SessionManager {
     }
   }
 
+  handleHintUpdate(event) {
+    console.log(event)
+    this.hints.value.push(...event)
+  }
+
   setTasks(tasks) {
     this.session.value.tasks = tasks
   }
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 27f152d..207ced4 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -21,6 +21,9 @@ onMounted(async () => {
   socket.on('graph', (event) => {
     sessionManager.handleGraphUpdate(event)
   })
+  socket.on('hints', (event) => {
+    sessionManager.handleHintUpdate(event)
+  })
   socket.on('tasks', (tasks) => {
     sessionManager.setTasks(tasks)
   })
diff --git a/packages/client/index.js b/packages/client/index.js
index e03f9ca..a732579 100644
--- a/packages/client/index.js
+++ b/packages/client/index.js
@@ -91,6 +91,10 @@ async function connect(sessionId, cookie) {
     debug('receive graph:', data)
   })
 
+  socket.on('hints', (data) => {
+    debug('receive hints:', data)
+  })
+
   socket.on('tasks', (data) => {
     debug('receive tasks:', data)
   })