diff --git a/frontend/components/organisms/TheHeader.vue b/frontend/components/organisms/TheHeader.vue
index cbbba0d7..2a465014 100644
--- a/frontend/components/organisms/TheHeader.vue
+++ b/frontend/components/organisms/TheHeader.vue
@@ -10,6 +10,26 @@
       doccano
     </v-toolbar-title>
     <div class="flex-grow-1" />
+    <v-menu offset-y>
+      <template v-slot:activator="{ on }">
+        <v-btn
+          text
+          v-on="on"
+        >
+          Demo
+          <v-icon>mdi-menu-down</v-icon>
+        </v-btn>
+      </template>
+      <v-list>
+        <v-list-item
+          v-for="(item, index) in items"
+          :key="index"
+          @click="$router.push('/demo/' + item.link)"
+        >
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
     <v-btn
       outlined
       href="auth"
@@ -19,6 +39,20 @@
   </v-app-bar>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      items: [
+        { title: 'Named Entity Recognition', link: 'named-entity-recognition' },
+        { title: 'Sentiment Analysis', link: 'sentiment-analysis' },
+        { title: 'Translation', link: 'translation' }
+      ]
+    }
+  }
+}
+</script>
+
 <style scoped>
 .top{
   text-decoration: none;