diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index d67fc98..166c71f 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -9,8 +9,8 @@ api
   .get('/quests/helloworld')
   .then((res) => {
     console.log(res.data)
-    questData.value = res.data.instruction
-    questData.value = '--Quest Information--'
+    questData.value = res.data
+    questData.value.instruction = '--Quest Information--'
   })
   .catch((err) => {
     questErr.value = err
@@ -19,11 +19,12 @@ api
 
 <template>
   <div class="overflow-auto h-full w-full max-h-full">
-    <h1 id="topic" class="text-text">Try Your First Command</h1>
+    <h1 id="topic" class="text-red-500" v-if="questErr">Failed to get quest infomation</h1>
+    <h1 id="topic" class="text-text" v-else>{{ questData.title }}</h1>
     <hr class="border-text-line border-2 my-2" />
     <div>
       <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
-      <p class="text-text" v-else-if="questData" v-html="questData"></p>
+      <p class="text-text" v-else-if="questData">{{ questData.instruction }}</p>
       <p class="text-text" v-else>Loading...</p>
     </div>
   </div>