diff --git a/app/src/App.vue b/app/src/App.vue
index ba85682..bf28a66 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,112 +1,38 @@
 <script setup>
-import { ref } from 'vue'
-
-const data = ref(null)
-const error = ref(null)
-
-fetch('https://odyssey.wancat.cc/api/v1/quests/helloworld')
-  .then((res) => res.json())
-  .then((json) => {
-    data.value = JSON.stringify(json.content)
-  })
-  .catch((err) => {
-    error.value = err
-  })
+// Import components
+import commandlist_part from './components/commandlist-part.vue'
+import header_part from './components/header-part.vue'
+import hint_part from './components/hint-part.vue'
+import quest_part from './components/quest-part.vue'
+import terminal_part from './components/terminal-part.vue'
+import visualization_part from './components/visualization-part.vue'
 </script>
 
 <template>
   <div class="bg-background-primary h-screen">
     <!--header-->
-    <div id="header" class="bg-background-secondary content-center h-[5%] p-1">
-      <div class="inline-block">
-        <button id="stream">
-          <font-awesome-icon
-            :icon="['fas', 'bars-staggered']"
-            class="text-text-primary"
-          />
-        </button>
-        <button id="backward">
-          <font-awesome-icon
-            :icon="['fas', 'arrow-left']"
-            class="text-border"
-          />
-        </button>
-        <button>
-          <p class="text-text-primary inline font-bold">1. Command's Basics</p>
-        </button>
-        <p class="text-text-primary inline font-bold">‧</p>
-        <button>
-          <p class="text-text-primary inline font-bold">
-            1. Try Your First Command
-          </p>
-        </button>
-      </div>
-      <div class="float-right inline-block">
-        <button id="warning">
-          <font-awesome-icon
-            :icon="['fas', 'triangle-exclamation']"
-            class="text-text-primary"
-          />
-        </button>
-        <button id="setting">
-          <font-awesome-icon
-            :icon="['fas', 'gear']"
-            class="text-text-primary"
-          />
-        </button>
-        <button id="fullscreen">
-          <font-awesome-icon
-            :icon="['fas', 'expand']"
-            class="text-text-primary"
-          />
-        </button>
-      </div>
+    <div id="header" class="bg-background-secondary content-center h-[6%] p-1">
+      <header_part />
     </div>
     <!--main-->
-    <div id="main" class="h-[95%] grid grid-cols-3 gap-3 p-3">
+    <div id="main" class="h-[94%] grid grid-cols-3 gap-3 p-3">
       <!--Topic and Command List-->
       <div class="bg-background-secondary inline-block h-full rounded-lg">
-        <section class="h-2/3 m-3">
-          <h1 id="topic" class="text-text">Try Your First Command</h1>
-          <hr class="border-text-line border-2 my-2" />
-          <div>
-            <p class="text-red-500" v-if="error">{{ error.message }}</p>
-            <p class="text-text" v-else-if="data">{{ data }}</p>
-            <p class="text-text" v-else>Loading...</p>
-          </div>
+        <section id="quest" class="h-2/3 m-3">
+          <quest_part />
         </section>
         <hr class="border-text-line border" />
-        <section class="h-1/3">
-          <font-awesome-icon
-            :icon="['fas', 'list']"
-            class="text-text-primary"
-          />
-          <h1 class="inline text-text-primary font-xl">Command Cheatsheets</h1>
-          <div id="cheatsheets">
-            <p class="text-text-secondary">No Available Command</p>
-          </div>
+        <section id="cmdlist" class="h-1/3">
+          <commandlist_part />
         </section>
       </div>
       <!--Terminal and Hint-->
       <div class="bg-background inline-block h-full py-2 rounded-lg">
         <section id="terminal" class="h-3/5">
-          <font-awesome-icon :icon="['fas', 'terminal']" class="text-text" />
-          <button class="text-text h-[5%]">Terminal</button>
-          <div class="bg-background-secondary h-[calc(100%-5%)] p-4">
-            <p class="text-text-primary">
-              zeko@first-command<span class="text-text">:~$</span>
-            </p>
-          </div>
+          <terminal_part />
         </section>
-        <section class="h-2/5">
-          <font-awesome-icon
-            :icon="['far', 'lightbulb']"
-            class="text-yellow-200"
-          />
-          <h1 class="inline text-text font-xl">Hint</h1>
-          <div id="hint">
-            <p class="text-text">Type command in the terminal above.</p>
-          </div>
+        <section id="hint" class="h-2/5">
+          <hint_part />
         </section>
       </div>
       <!--Visualization-->
@@ -114,7 +40,7 @@ fetch('https://odyssey.wancat.cc/api/v1/quests/helloworld')
         <div class="bg-border rounded-xl h-[90%] px-3 py-6">
           <div class="bg-background rounded-xl h-full px-1 py-6">
             <section id="visualization" class="bg-background-primary h-full">
-              <p class="text-text">visualization</p>
+              <visualization_part />
             </section>
           </div>
         </div>
diff --git a/app/src/components/commandlist-part.vue b/app/src/components/commandlist-part.vue
new file mode 100644
index 0000000..6cb8796
--- /dev/null
+++ b/app/src/components/commandlist-part.vue
@@ -0,0 +1,9 @@
+<script setup></script>
+
+<template>
+  <font-awesome-icon :icon="['fas', 'list']" class="text-text-primary p-1" />
+  <h1 class="inline text-text-primary font-xl">Command Cheatsheets</h1>
+  <div id="cheatsheets">
+    <p class="text-text-secondary">--Command List--</p>
+  </div>
+</template>
diff --git a/app/src/components/header-part.vue b/app/src/components/header-part.vue
new file mode 100644
index 0000000..c8095d8
--- /dev/null
+++ b/app/src/components/header-part.vue
@@ -0,0 +1,38 @@
+<script setup></script>
+
+<template>
+  <div class="inline-block">
+    <button id="stream" class="p-1">
+      <font-awesome-icon
+        :icon="['fas', 'bars-staggered']"
+        class="text-text-primary"
+      />
+    </button>
+    <button id="backward" class="p-1">
+      <font-awesome-icon :icon="['fas', 'arrow-left']" class="text-border" />
+    </button>
+    <button>
+      <p class="text-text-primary inline font-bold p-1">1. Command's Basics</p>
+    </button>
+    <p class="text-text-primary inline font-bold p-1">‧</p>
+    <button>
+      <p class="text-text-primary inline font-bold p-1">
+        1. Try Your First Command
+      </p>
+    </button>
+  </div>
+  <div class="float-right inline-block">
+    <button id="warning" class="p-1">
+      <font-awesome-icon
+        :icon="['fas', 'triangle-exclamation']"
+        class="text-text-primary"
+      />
+    </button>
+    <button id="setting" class="p-1">
+      <font-awesome-icon :icon="['fas', 'gear']" class="text-text-primary" />
+    </button>
+    <button id="fullscreen" class="p-1">
+      <font-awesome-icon :icon="['fas', 'expand']" class="text-text-primary" />
+    </button>
+  </div>
+</template>
diff --git a/app/src/components/hint-part.vue b/app/src/components/hint-part.vue
new file mode 100644
index 0000000..0fe119e
--- /dev/null
+++ b/app/src/components/hint-part.vue
@@ -0,0 +1,9 @@
+<script setup></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>
+</template>
diff --git a/app/src/components/quest-part.vue b/app/src/components/quest-part.vue
new file mode 100644
index 0000000..1066749
--- /dev/null
+++ b/app/src/components/quest-part.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue'
+
+const questData = ref(null)
+const questErr = ref(null)
+
+fetch('https://odyssey.wancat.cc/api/v1/quests/helloworld')
+  .then((res) => res.json())
+  .then((json) => {
+    questData.value = JSON.stringify(json.content)
+  })
+  .catch((err) => {
+    questErr.value = err
+  })
+</script>
+
+<template>
+  <h1 id="topic" class="text-text">Try Your First Command</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">--Quest Information--</p>
+    <!--
+    <p class="text-text" v-else-if="quest" v-html="questData"></p>
+    -->
+    <p class="text-text" v-else>Loading...</p>
+  </div>
+</template>
diff --git a/app/src/components/terminal-part.vue b/app/src/components/terminal-part.vue
new file mode 100644
index 0000000..9ee24ee
--- /dev/null
+++ b/app/src/components/terminal-part.vue
@@ -0,0 +1,11 @@
+<script setup></script>
+
+<template>
+  <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
+  <button class="text-text h-[5%]">Terminal</button>
+  <div class="bg-background-secondary h-[calc(100%-5%)] p-4">
+    <p class="text-text-primary">
+      zeko@first-command<span class="text-text">:~$</span>
+    </p>
+  </div>
+</template>
diff --git a/app/src/components/visualization-part.vue b/app/src/components/visualization-part.vue
new file mode 100644
index 0000000..9301816
--- /dev/null
+++ b/app/src/components/visualization-part.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <p class="text-text">--Visualization--</p>
+</template>