diff --git a/frontend/pages/projects/_id/speech-to-text/index.vue b/frontend/pages/projects/_id/speech-to-text/index.vue
new file mode 100644
index 00000000..d1c91ac3
--- /dev/null
+++ b/frontend/pages/projects/_id/speech-to-text/index.vue
@@ -0,0 +1,163 @@
+<template>
+  <layout-text v-if="item.id">
+    <template v-slot:header>
+      <toolbar-laptop
+        :doc-id="item.id"
+        :enable-auto-labeling.sync="enableAutoLabeling"
+        :guideline-text="project.guideline"
+        :is-reviewd="item.isApproved"
+        :show-approve-button="project.permitApprove"
+        :total="items.count"
+        class="d-none d-sm-block"
+        @click:clear-label="clear"
+        @click:review="approve"
+      />
+      <toolbar-mobile
+        :total="items.count"
+        class="d-flex d-sm-none"
+      />
+    </template>
+    <template v-slot:content>
+      <audio
+        controls
+        :src="item.url"
+        class="mt-2 mb-5"
+        style="width:100%;"
+      >
+        Your browser does not support the
+        <code>audio</code> element.
+      </audio>
+      <seq2seq-box
+        :text="item.text"
+        :annotations="annotations"
+        @delete:annotation="remove"
+        @update:annotation="update"
+        @create:annotation="add"
+      />
+    </template>
+    <template v-slot:sidebar>
+      <list-metadata :metadata="item.meta" />
+    </template>
+  </layout-text>
+</template>
+
+<script>
+import _ from 'lodash'
+import LayoutText from '@/components/tasks/layout/LayoutText'
+import ListMetadata from '@/components/tasks/metadata/ListMetadata'
+import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
+import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
+import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
+
+export default {
+  layout: 'workspace',
+
+  components: {
+    LayoutText,
+    ListMetadata,
+    Seq2seqBox,
+    ToolbarLaptop,
+    ToolbarMobile
+  },
+
+  async fetch() {
+    this.items = await this.$services.example.fetchOne(
+      this.projectId,
+      this.$route.query.page,
+      this.$route.query.q,
+      this.$route.query.isChecked,
+      this.project.filterOption
+    )
+    const item = this.items.items[0]
+    if (this.enableAutoLabeling) {
+      await this.autoLabel(item.id)
+    }
+    await this.list(item.id)
+  },
+
+  data() {
+    return {
+      annotations: [],
+      items: [],
+      project: {},
+      enableAutoLabeling: false
+    }
+  },
+
+  computed: {
+    projectId() {
+      return this.$route.params.id
+    },
+    item() {
+      if (_.isEmpty(this.items) || this.items.items.length === 0) {
+        return {}
+      } else {
+        return this.items.items[0]
+      }
+    }
+  },
+
+  watch: {
+    '$route.query': '$fetch',
+    enableAutoLabeling(val) {
+      if (val) {
+        this.list(this.item.id)
+      }
+    }
+  },
+
+  async created() {
+    this.project = await this.$services.project.findById(this.projectId)
+  },
+
+  methods: {
+    async list(itemId) {
+      this.annotations = await this.$services.seq2seq.list(this.projectId, itemId)
+    },
+
+    async remove(id) {
+      await this.$services.seq2seq.delete(this.projectId, this.item.id, id)
+      await this.list(this.item.id)
+    },
+
+    async add(text) {
+      await this.$services.seq2seq.create(this.projectId, this.item.id, text)
+      await this.list(this.item.id)
+    },
+
+    async update(annotationId, text) {
+      await this.$services.seq2seq.changeText(this.projectId, this.item.id, annotationId, text)
+      await this.list(this.item.id)
+    },
+
+    async clear() {
+      await this.$services.seq2seq.clear(this.projectId, this.item.id)
+      await this.list(this.item.id)
+    },
+
+    async autoLabel(itemId) {
+      try {
+        await this.$services.seq2seq.autoLabel(this.projectId, itemId)
+      } catch (e) {
+        console.log(e.response.data.detail)
+      }
+    },
+
+    async approve() {
+      const approved = !this.item.isApproved
+      await this.$services.example.approve(this.projectId, this.item.id, approved)
+      await this.$fetch()
+    }
+  },
+
+  validate({ params, query }) {
+    return /^\d+$/.test(params.id) && /^\d+$/.test(query.page)
+  }
+}
+</script>
+
+<style scoped>
+.text-pre-wrap {
+  white-space: pre-wrap !important;
+}
+</style>