diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index b398810b..6baf886a 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -44,6 +44,7 @@ export default {
     '~/plugins/filters.js',
     '~/plugins/vue-youtube.js',
     '~/plugins/vue-shortkey.js',
+    '~/plugins/vue-konva.js',
     '~/plugins/services.ts',
     '~/plugins/color.ts',
     '~/plugins/role.ts'
diff --git a/frontend/package.json b/frontend/package.json
index 8d5e17f9..da3623f5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -46,6 +46,7 @@
     "vue": "^2.6.14",
     "vue-chartjs": "^3.5.1",
     "vue-filepond": "^6.0.3",
+    "vue-image-annotator": "^0.1.17",
     "vue-shortkey": "^3.1.7",
     "vue-template-compiler": "^2.6.14",
     "vue-youtube": "^1.4.0",
diff --git a/frontend/pages/demo/object-detection/index.vue b/frontend/pages/demo/object-detection/index.vue
new file mode 100644
index 00000000..c5f46fb6
--- /dev/null
+++ b/frontend/pages/demo/object-detection/index.vue
@@ -0,0 +1,117 @@
+<template>
+  <v-main>
+    <v-container fluid>
+      <v-row justify="center">
+        <v-col cols="12" md="9">
+          <v-card>
+            <v-bounding-box
+              :rectangles="rectangles"
+              :image-url="imageUrl"
+              :labels="labels"
+              :selected-label="selectedLabel"
+              :scale="scale"
+              @add-rectangle="addRectangle"
+              @update-rectangle="updateRectangle"
+              @delete-rectangle="deleteRectangle"
+              @update-scale="updateScale"
+            />
+          </v-card>
+        </v-col>
+        <v-col cols="12" md="3">
+          <list-metadata :metadata="meta" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+import { VBoundingBox } from 'vue-image-annotator'
+import ListMetadata from '@/components/tasks/metadata/ListMetadata'
+
+export default {
+  components: {
+    ListMetadata,
+    VBoundingBox
+  },
+
+  layout: 'demo',
+
+  data() {
+    return {
+      imageUrl: 'https://www.pakutaso.com/shared/img/thumb/shikun20220402_122123_TP_V.jpg',
+      rectangles: [
+        {
+          id: 'uuid',
+          label: 1,
+          x: 10,
+          y: 10,
+          width: 100,
+          height: 100
+        }
+      ],
+      labels: [
+        {
+          id: 0,
+          name: 'pig',
+          color: '#ff0000'
+        },
+        {
+          id: 1,
+          name: 'cat',
+          color: '#00ff00'
+        },
+        {
+          id: 2,
+          name: 'dog',
+          color: '#0000ff'
+        }
+      ],
+      meta: { wikiPageId: 2 },
+      selectedLabel: undefined,
+      selectedPolygon: undefined,
+      scale: 1
+    }
+  },
+
+  methods: {
+    selectLabel(index) {
+      this.selectedLabel = this.labels[index]
+    },
+
+    resetLabel() {
+      this.selectedLabel = undefined
+    },
+
+    addRectangle(rectangle) {
+      console.log('addRectangle', rectangle)
+      this.rectangles.push(rectangle)
+    },
+
+    updateRectangle(rectangle) {
+      console.log('updateRectangle', rectangle)
+      const index = this.rectangles.findIndex((r) => r.id === rectangle.id)
+      if (index !== -1) {
+        this.$set(this.rectangles, index, rectangle)
+      }
+    },
+
+    deleteRectangle(rectangleId) {
+      console.log('deleteRectangle', rectangleId)
+      this.rectangles = this.rectangles.filter((r) => r.id !== rectangleId)
+    },
+
+    zoomOut() {
+      this.scale -= 0.1
+    },
+
+    zoomIn() {
+      this.scale += 0.1
+    },
+
+    updateScale(scale) {
+      this.scale = scale
+    }
+  }
+}
+</script>
diff --git a/frontend/pages/demo/segmentation/index.vue b/frontend/pages/demo/segmentation/index.vue
new file mode 100644
index 00000000..800fd899
--- /dev/null
+++ b/frontend/pages/demo/segmentation/index.vue
@@ -0,0 +1,120 @@
+<template>
+  <v-main>
+    <v-container fluid>
+      <v-row justify="center">
+        <v-col cols="12" md="9">
+          <v-card>
+            <v-segmentation
+              :image-url="imageUrl"
+              :labels="labels"
+              :polygons="polygons"
+              :selected-label="selectedLabel"
+              :scale="scale"
+              @add-polygon="addPolygon"
+              @delete-polygon="deletePolygon"
+              @select-polygon="selectPolygon"
+              @update-polygon="updatePolygon"
+              @update-scale="updateScale"
+            />
+          </v-card>
+        </v-col>
+        <v-col cols="12" md="3">
+          <list-metadata :metadata="meta" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+import { VSegmentation } from 'vue-image-annotator'
+import ListMetadata from '@/components/tasks/metadata/ListMetadata'
+
+export default {
+  components: {
+    ListMetadata,
+    VSegmentation
+  },
+
+  layout: 'demo',
+
+  data() {
+    return {
+      imageUrl: 'https://www.pakutaso.com/shared/img/thumb/shikun20220402_122123_TP_V.jpg',
+      polygons: [
+        {
+          id: 'uuid',
+          label: 1,
+          points: [372, 249, 284, 366, 450, 371]
+        }
+      ],
+      task: 'bounding box',
+      labels: [
+        {
+          id: 0,
+          name: 'pig',
+          color: '#ff0000'
+        },
+        {
+          id: 1,
+          name: 'cat',
+          color: '#00ff00'
+        },
+        {
+          id: 2,
+          name: 'dog',
+          color: '#0000ff'
+        }
+      ],
+      meta: { wikiPageId: 2 },
+      selectedLabel: undefined,
+      selectedPolygon: undefined,
+      scale: 1
+    }
+  },
+
+  methods: {
+    selectLabel(index) {
+      this.selectedLabel = this.labels[index]
+    },
+
+    resetLabel() {
+      this.selectedLabel = undefined
+    },
+
+    addPolygon(polygon) {
+      this.polygons.push(polygon)
+    },
+
+    deletePolygon(polygonId) {
+      this.polygons = this.polygons.filter((p) => p.id !== polygonId)
+    },
+
+    selectPolygon(id) {
+      console.log('selectPolygon', id)
+      this.selectedPolygon = this.polygons.find((p) => p.id === id)
+    },
+
+    updatePolygon(polygon) {
+      console.log('updatePolygon', polygon)
+      const index = this.polygons.findIndex((p) => p.id === polygon.id)
+      if (index !== -1) {
+        this.$set(this.polygons, index, polygon)
+        this.selectedPolygon = polygon
+      }
+    },
+
+    zoomOut() {
+      this.scale -= 0.1
+    },
+
+    zoomIn() {
+      this.scale += 0.1
+    },
+
+    updateScale(scale) {
+      this.scale = scale
+    }
+  }
+}
+</script>
diff --git a/frontend/plugins/vue-konva.js b/frontend/plugins/vue-konva.js
new file mode 100644
index 00000000..8d0807f1
--- /dev/null
+++ b/frontend/plugins/vue-konva.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import VueKonva from 'vue-konva'
+
+// add any custom shortkey config settings here
+Vue.use(VueKonva)
+
+export default VueKonva
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 4cdb7b22..486240c9 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1322,7 +1322,14 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@flatten-js/interval-tree@^1.0.14":
+"@flatten-js/core@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@flatten-js/core/-/core-1.3.4.tgz#f4ea927cacadf662f70c5ffaa93ca96791d0da40"
+  integrity sha512-VP8VYWMJPZDgNze83iS//sHHkQREtgtZ9VLn9SNX99FN49AIP/QhSeqkpW0/VPyFrUbrmkw8VumYkT09BH5bYg==
+  dependencies:
+    "@flatten-js/interval-tree" "^1.0.15"
+
+"@flatten-js/interval-tree@^1.0.14", "@flatten-js/interval-tree@^1.0.15":
   version "1.0.18"
   resolved "https://registry.yarnpkg.com/@flatten-js/interval-tree/-/interval-tree-1.0.18.tgz#285c6d491e838ed0c60b7a4f143a5d20b7f41947"
   integrity sha512-o72sZErW0Y1C82Cg7nk82ojJ/22EtmKyp5I3eNqgcOKFp/VCzetATYYjJIqOBBaR7FQ/MFj/ZpsmP38mL4TkYA==
@@ -4453,6 +4460,11 @@ core-js@^3.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
   integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==
 
+core-js@^3.8.3:
+  version "3.23.3"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.3.tgz#3b977612b15da6da0c9cc4aec487e8d24f371112"
+  integrity sha512-oAKwkj9xcWNBAvGbT//WiCdOMpb9XQG92/Fe3ABFM/R16BsHgePG00mFOgKf7IsCtfj8tA1kHtf/VwErhriz5Q==
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -7899,6 +7911,11 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
+konva@^8.3.10:
+  version "8.3.10"
+  resolved "https://registry.yarnpkg.com/konva/-/konva-8.3.10.tgz#66e93815878c2d48f1b6076d5a06b18ec4eb3217"
+  integrity sha512-5zOynjWBG9wWgpA634SDH+764eyoISpmHLTOCfQ3GFN8OBVd83Genk6H0R4D3hXV0kEGIFAv7RDcSVDtQpPOMw==
+
 last-call-webpack-plugin@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
@@ -10225,7 +10242,7 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   version "2.2.0-c"
   resolved "https://github.com/nhn/raphael.git#78a6ed3ec269f33b6457b0ec66f8c3d1f2ed70e0"
   dependencies:
-    eve "https://github.com/adobe-webplatform/eve.git#eef80ed"
+    eve "git://github.com/adobe-webplatform/eve.git#eef80ed"
 
 raw-loader@^4.0.2:
   version "4.0.2"
@@ -12056,6 +12073,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 v-annotator@0.1.27:
   version "0.1.27"
   resolved "https://registry.yarnpkg.com/v-annotator/-/v-annotator-0.1.27.tgz#ea66f0a4d3bf0d2db922467bcdeb8996c33d8efc"
@@ -12150,6 +12172,18 @@ vue-i18n@^8.25.0:
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.26.8.tgz#afe936adbf96ff0e9808e04845b8f41cc21c666f"
   integrity sha512-BN2OXolO15AKS95yNF8oOtARibaO6RxyKkAYNV4XpOmL7S4eVZYMIDtyvDv+XGZaiUmBJSH9mdNqzexvGMnK2A==
 
+vue-image-annotator@^0.1.17:
+  version "0.1.20"
+  resolved "https://registry.yarnpkg.com/vue-image-annotator/-/vue-image-annotator-0.1.20.tgz#704674e9d75b3e233a4c0b24f76e0a498495f2d5"
+  integrity sha512-Gs4JzUlfmnuvK0NP5gUPEr39yp7DCj8sbSocNJHLGJK+G7mGnY5xrppvcNIHotiY3Y+BDd9aKPMMyVUVTXl4iQ==
+  dependencies:
+    "@flatten-js/core" "^1.3.4"
+    core-js "^3.8.3"
+    konva "^8.3.10"
+    uuid "^8.3.2"
+    vue "^2.6.11"
+    vue-konva "2"
+
 vue-jest@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-3.0.7.tgz#a6d29758a5cb4d750f5d1242212be39be4296a33"
@@ -12167,6 +12201,11 @@ vue-jest@^3.0.7:
     tsconfig "^7.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-konva@2:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/vue-konva/-/vue-konva-2.1.7.tgz#1d94471e0b6a3d4139e118a22b4c907f4a091f9c"
+  integrity sha512-uKFp1/tGbt9HAcTXukk/PuPtCMfCSmNyU3Feo3Av4XVfcoBgVQA69+H9r2VQMX+Vwphez1qSfGf7ZNstM3nYRw==
+
 vue-loader@^15.9.7:
   version "15.9.8"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.8.tgz#4b0f602afaf66a996be1e534fb9609dc4ab10e61"