diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index 1a1bd5d..75cdc42 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -1,32 +1,218 @@
 <template>
-  <div class="p-2.5 bg-black w-full h-full flex">
-    <div class="text-slate-600 absolute w-full z-0 p-2">
-      <h1 class="relative left-1/3">01010111 01100101 01101100 01100011</h1>
-      <h1 class="relative left-1/4">
-        01101111 01101101 01100101 00100000 01110100 01101111
+  <div class="relative bg-black w-full h-full flex">
+    <div
+      class="text-slate-500 relative flex flex-col blur-[2px] w-1/2 h-full flex-wrap"
+    >
+      <h1 class="relative flex w-fit" style="left: 38%; height: 3%">
+        01111000 00100000 01001111 01100100 01111001 01110011
       </h1>
-      <h1 class="relative left-1/4">
-        00100000 01001100 01101001 01101110 01110101 01111000 00100000
+      <h1 class="relative flex w-fit" style="left: 26%; height: 3%">
+        01110011 01100101 01111001 00100001 01010111 01100101
       </h1>
-      <h1 class="relative left-1/4">
-        01001111 01100100 01111001 01110011 01110011 01100101 01111001
+      <h1 class="relative flex w-fit" style="left: 20%; height: 3%">
+        01101100 01100011 01101111 01101101 01100101 00100000
       </h1>
-      <h1 class="relative left-1/4">
-        00100001 01010111 01100101 01101100 01100011 01101111 01101101 01100101
+      <h1 class="relative flex w-fit" style="left: 15%; height: 3%">
+        01110100 01101111 00100000 01001100 01101001 01101110
       </h1>
-      <h1 class="relative left-1/4">
-        00100000 01110100 01101111 00100000 01001100 01101001 01101110 01110101
+      <h1 class="relative flex w-fit" style="left: 5%; height: 3%">
+        01101101 01100101 00100000 01110100 01101111 01101111
+        <h1 class="relative flex w-fit" style="left: 13%; height: 3%">
+          01101110 01110101 01111000 00100000 01001111 01100100
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 5%; height: 3%">
+          01010111 01100101 01101100 01100011 01111000
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 3%; height: 3%">
+          01101111 01101101 01100101 00100000 01110100
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 13%; height: 3%">
+          00100000 01001100 01101001 01101110 01110101
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 16%; height: 3%">
+          00100000 01001111 01100100 01111001 01110011
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 17%; height: 3%">
+          01110011 01100101 01111001 00100001 01010111
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 12%; height: 3%">
+          01100101 01101100 01100011 01101111 01101101
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 8%; height: 3%">
+          01100101 00100000 01110100 01101111 01010111
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 8%; height: 3%">
+          00100000 01001100 01101001 01101110 01110101
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 9%; height: 3%">
+          01111000 00100000 01001111 01100100 01111001
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 6%; height: 3%">
+          01110011 01110011 01100101 01101100 01101100 01101001
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 5%; height: 3%">
+          01111001 00100001 01010111 01100011 01100101 01101001
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 9%; height: 3%">
+          01100101 01101100 01110101 01111000 01001100
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 7%; height: 3%">
+          00100000 01001111 01100100 01111001 01110011 01110011
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 3%; height: 3%">
+          01100101 01111001 00100001 01010111 01100101
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 6%; height: 3%">
+          01101111 01101101 01010111 01100101 01101100 01100011
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 5%; height: 3%">
+          01101101 01100101 00100000 01110100 01101111 00100000
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 3%; height: 3%">
+          01101110 01110101 01111000 00100000 01001111 01100100
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 6%; height: 3%">
+          01100011 01101111 01101101 01111001 01110011
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 9%; height: 3%">
+          01100101 00100000 01110100 01001100
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 7%; height: 3%">
+          01101111 00100000 01001100 01101111 01101111
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 5%; height: 3%">
+          01101001 01101110 011101010 1111001 01110011
+        </h1>
+        <h1 class="relative flex w-fit" style="left: 6%; height: 3%">
+          01111000 00100000 01001111 00100000
+        </h1>
       </h1>
-      <h1 class="relative left-1/4">
-        01111000 00100000 01001111 01100100 01111001 01110011 01110011 01100101
+      <h1 class="relative flex w-fit" style="left: 4%; height: 3%">
+        01100100 01111001 01110011 01110011
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 3%; height: 3%">
+        01100101 01111001 00100001
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 5%; height: 3%">
+        01100101 01101100 01100011 01101111
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 2%; height: 3%">
+        01101101 01100101 00100000 01110100
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 3%; height: 3%">
+        00100000 01001100 01101001 01101110 01110101
       </h1>
-      <h1 class="relative left-1/4">01111001 00100001</h1>
     </div>
-    <h1 class="text-text-primary text-xl absolute left-2 w-full z-1">
+    <div
+      class="text-slate-500 relative flex flex-col blur-[2px] w-1/2 h-full flex-wrap"
+    >
+      <h1 class="relative flex w-fit" style="left: 7%; height: 3%">
+        01010111 01100101 01101100 01100011 01001100 01101001 00100000
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 14%; height: 3%">
+        01101111 01101101 01100101 00100000 01110100 01101111 01100100
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 18%; height: 3%">
+        00100000 01001100 01101001 01101110 01110101 01111000
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 19%; height: 3%">
+        00100000 01001111 01100100 01111001 01110011 01101111
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 25%; height: 3%">
+        01110011 01100101 01111001 00100001 01010111 01100100
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 24%; height: 3%">
+        01100101 01101100 01100011 01101111 01101101 01110011
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 23%; height: 3%">
+        01100101 00100000 01110100 01101111 00100000 01111001
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 23%; height: 3%">
+        00100000 01001100 01101001 01101110 01110101 01111001 01110011
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 27%; height: 3%">
+        01111000 00100000 01001111 01100100 01111001 01100100
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 29%; height: 3%">
+        01110011 01110011 01100101 01111001 01110011
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 35%; height: 3%">
+        01111001 00100001 01010111 01101110 01110011
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 30%; height: 3%">
+        01100101 01101100 01100011 01100101 01101100
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 20%; height: 3%">
+        01100011 01101111 01101101 01100100 01111001 01110011
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 23%; height: 3%">
+        01100101 00100000 01110100 01101111 01100101 01101001
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 27%; height: 3%">
+        01101111 00100000 01001100 01100101 01101100 01101111
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 28%; height: 3%">
+        01101001 01101110 01110101 01001100 01101001 01001111
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 35%; height: 3%">
+        01111000 00100000 01001111 00100000 01100011
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 32%; height: 3%">
+        01100100 01111001 01110011 01110011 01010111 01100101
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 29%; height: 3%">
+        01100101 01111001 00100001 01010111 01010111 01101100
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 43%; height: 3%">
+        01100101 01101100 01100011 01101111 01001111
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 46%; height: 3%">
+        01101101 01100101 00100000 01110100
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 43%; height: 3%">
+        00100000 01001100 01101001 01101110 01110101
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 45%; height: 3%">
+        01111000 00100000 01001111 01100100 01111001
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 52%; height: 3%">
+        01110011 01100101 01111001 00100001
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 48%; height: 3%">
+        01101100 01100011 01101111 01101101
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 53%; height: 3%">
+        01110100 01101111 00100000 01001100
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 52%; height: 3%">
+        01110101 01111000 00100000 01001111
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 59%; height: 3%">
+        01100101 01111001 00100001
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 50%; height: 3%">
+        01101111 01101101 01010111 01100101
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 51%; height: 3%">
+        01101101 01100101 00100000 01110100
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 50%; height: 3%">
+        01101110 01110101 01111000 00100000
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 52%; height: 3%">
+        01101101 01100101 00100000 01110100
+      </h1>
+      <h1 class="relative flex w-fit" style="left: 43%; height: 3%">
+        01101110 01110101 01111000 00100000 01101111
+      </h1>
+    </div>
+    <h1
+      class="text-text-primary text-xl p-2.5 absolute w-fit z-2 font-mono font-bold flex flax-wrap"
+    >
       Get through your linux journey!
     </h1>
-    <div class="p-2.5 relative w-full h-full z-2">
-      <div ref="chartContainer" class="p-2.5 w-full h-full"></div>
+    <div class="flex flex-wrap absolute w-full h-full z-1">
+      <div ref="chartContainer" class="w-full h-full flex flex-wrap"></div>
     </div>
   </div>
 </template>
@@ -44,7 +230,7 @@ import api from '../utils/api'
 import { NodeImage } from '../img/svg.js'
 
 const marginX = 100
-const marginY = 70
+const marginY = 65
 const chartContainer = ref(null)
 let chartInstance = null
 
@@ -63,6 +249,7 @@ async function getQuests() {
 async function getProgress() {
   try {
     const res = await api.get('/users/me')
+    console.log(res.data.progress)
     return res.data.progress
   } catch (err) {
     console.error(err)
@@ -86,10 +273,10 @@ const genOption = (nodes, edges) => ({
       roam: true,
       label: {
         show: true,
-        fontSize: 20,
+        fontSize: 22,
       },
-      edgeSymbol: ['circle', 'arrow'],
-      edgeSymbolSize: [5, 12],
+      edgeSymbol: ['pin', 'arrow'],
+      edgeSymbolSize: [2, 15],
       edgeLabel: {
         fontSize: 25,
       },
@@ -99,9 +286,21 @@ const genOption = (nodes, edges) => ({
       lineStyle: {
         opacity: 4,
         width: 3,
-        curveness: 0,
+        curveness: 0.08,
+      },
+      itemStyle: {
+        color: (params) => {
+          const {
+            data: { completed },
+          } = params
+          switch (completed) {
+            case true:
+              return '#ADADB5'
+            default:
+              return '#454552'
+          }
+        },
       },
-      itemStyle: { color: '#454552' },
     },
   ],
 })
diff --git a/app/src/views/QuestMapPage.vue b/app/src/views/QuestMapPage.vue
index 31a07f0..63ea9b6 100644
--- a/app/src/views/QuestMapPage.vue
+++ b/app/src/views/QuestMapPage.vue
@@ -1,16 +1,15 @@
 <template>
   <div class="h-[6vh] w-full">
     <GameHeaderPart />
+    <p
+      class="text-text-primary absolute z-1 left-[3vh] top-[1vh] h-fit font-bold inline-block"
+    >
+      Quest Map
+    </p>
   </div>
-  <div class="flex flex-col justify-center items-center h-[94vh]">
+  <div class="flex flex-col justify-center items-center w-full h-[94vh]">
     <QuestMap />
-    <!-- <div id="header" class="p-2 bg-slate-700 w-screen flex h-[6vh]">
-      <h1 class="text-teal-300 text-4xl font-mono font-black skew-y-3">
-        Quest Map
-      </h1> -->
-    <!-- <p>Quest Map Page</p> -->
   </div>
-  <!-- </div> -->
 </template>
 
 <script setup>