diff --git a/frontend/assets/examples/speech_1.mp3 b/frontend/assets/examples/speech_1.mp3
new file mode 100644
index 00000000..e9571fa7
Binary files /dev/null and b/frontend/assets/examples/speech_1.mp3 differ
diff --git a/frontend/components/layout/TheHeader.vue b/frontend/components/layout/TheHeader.vue
index d5c8644d..723cddb5 100644
--- a/frontend/components/layout/TheHeader.vue
+++ b/frontend/components/layout/TheHeader.vue
@@ -115,6 +115,7 @@ export default {
         { title: this.$t('home.demoTranslation'), link: 'translation' },
         { title: this.$t('home.demoTextToSQL'), link: 'text-to-sql' },
         { title: 'Image Classification', link: 'image-classification' },
+        { title: 'Speech to Text', link: 'speech-to-text' },
       ]
     }
   },
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index d09254bb..32f6280b 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -143,6 +143,13 @@ export default {
         loader: 'raw-loader',
         exclude: /(node_modules)/
       })
-    }
+      config.module.rules.push({
+        test: /\.(ogg|mp3|wav|mpe?g)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[path][name].[ext]'
+        }
+      })
+    },
   }
 }
diff --git a/frontend/pages/demo/speech-to-text/index.vue b/frontend/pages/demo/speech-to-text/index.vue
new file mode 100644
index 00000000..db64e44e
--- /dev/null
+++ b/frontend/pages/demo/speech-to-text/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <v-main>
+    <v-container fluid>
+      <v-row justify="center">
+        <v-col cols="12" md="9">
+          <audio
+            controls
+            src="~/assets/examples/speech_1.mp3"
+            class="mt-2 mb-5"
+            style="width:100%;"
+          >
+            Your browser does not support the
+            <code>audio</code> element.
+          </audio>
+          <seq2seq-box
+            :text="currentDoc.text"
+            :annotations="currentDoc.annotations"
+            @delete:annotation="_deleteAnnotation"
+            @update:annotation="_updateAnnotation"
+            @create:annotation="_createAnnotation"
+          />
+        </v-col>
+        <v-col cols="12" md="3">
+          <list-metadata :metadata="currentDoc.meta" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+import ListMetadata from '@/components/tasks/metadata/ListMetadata'
+import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
+
+export default {
+  layout: 'demo',
+
+  components: {
+    Seq2seqBox,
+    ListMetadata
+  },
+
+  data() {
+    return {
+      currentDoc: {
+        id: 8,
+        text: '',
+        annotations: [
+          {
+            id: 17,
+            text: "Hi! Welcome to doccano!",
+            user: 1,
+            document: 8
+          }
+        ],
+        meta: {
+          url: 'https://github.com/doccano'
+        },
+        annotation_approver: null
+      }
+    }
+  },
+
+  methods: {
+    _deleteAnnotation(annotationId) {
+      this.currentDoc.annotations = this.currentDoc.annotations.filter(item => item.id !== annotationId)
+    },
+    _updateAnnotation(annotationId, text) {
+      const index = this.currentDoc.annotations.findIndex(item => item.id === annotationId)
+      this.currentDoc.annotations[index].text = text
+    },
+    _createAnnotation(text) {
+      const payload = {
+        id: Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER)),
+        text
+      }
+      this.currentDoc.annotations.push(payload)
+    }
+  }
+}
+</script>