diff --git a/frontend/pages/demo/translation/index.vue b/frontend/pages/demo/translation/index.vue
new file mode 100644
index 00000000..91b820d8
--- /dev/null
+++ b/frontend/pages/demo/translation/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <v-content>
+    <v-container fluid>
+      <v-row justify="center">
+        <v-col cols="12" md="9">
+          <v-card
+            class="title mb-5"
+          >
+            <v-card-text>
+              {{ currentDoc.text }}
+            </v-card-text>
+          </v-card>
+          <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">
+          <metadata-box :metadata="JSON.parse(currentDoc.meta)" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-content>
+</template>
+
+<script>
+import Seq2seqBox from '~/components/organisms/Seq2seqBox'
+import MetadataBox from '@/components/organisms/MetadataBox'
+
+export default {
+  layout: 'annotation',
+
+  components: {
+    Seq2seqBox,
+    MetadataBox
+  },
+
+  data() {
+    return {
+      currentDoc: {
+        id: 8,
+        text: 'If it had not been for his help, I would have failed.',
+        annotations: [
+          {
+            id: 17,
+            text: "S'il ne m'avait pas aidé, j'aurais échoué.",
+            user: 1,
+            document: 8
+          },
+          {
+            id: 18,
+            text: "S'il ne m'avait pas aidée, j'aurais échoué.",
+            user: 1,
+            document: 8
+          }
+        ],
+        meta: '{"wikiPageId":2}',
+        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>