diff --git a/.pnp.cjs b/.pnp.cjs
index aabd8fb..15febca 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -60,6 +60,7 @@ const RAW_RUNTIME_STATE =
           ["vue", "virtual:f72e9c9c51cc36d8fb68775b655fad0d1ef137be742260300f2801b18b44616a65c3638519313cd53cbd70202a8107f75a4cb183e8c2f73d8c171bfc8a9a030d#npm:3.4.23"],\
           ["vue-diagrams", "npm:1.0.1"],\
           ["vue-router", "virtual:f72e9c9c51cc36d8fb68775b655fad0d1ef137be742260300f2801b18b44616a65c3638519313cd53cbd70202a8107f75a4cb183e8c2f73d8c171bfc8a9a030d#npm:4.3.2"],\
+          ["vuedraggable", "virtual:f72e9c9c51cc36d8fb68775b655fad0d1ef137be742260300f2801b18b44616a65c3638519313cd53cbd70202a8107f75a4cb183e8c2f73d8c171bfc8a9a030d#npm:4.1.0"],\
           ["yaml", "npm:2.5.0"]\
         ],\
         "linkType": "SOFT"\
@@ -14500,6 +14501,7 @@ const RAW_RUNTIME_STATE =
           ["vue", "virtual:f72e9c9c51cc36d8fb68775b655fad0d1ef137be742260300f2801b18b44616a65c3638519313cd53cbd70202a8107f75a4cb183e8c2f73d8c171bfc8a9a030d#npm:3.4.23"],\
           ["vue-diagrams", "npm:1.0.1"],\
           ["vue-router", "virtual:f72e9c9c51cc36d8fb68775b655fad0d1ef137be742260300f2801b18b44616a65c3638519313cd53cbd70202a8107f75a4cb183e8c2f73d8c171bfc8a9a030d#npm:4.3.2"],\
+          ["vuedraggable", "virtual:f72e9c9c51cc36d8fb68775b655fad0d1ef137be742260300f2801b18b44616a65c3638519313cd53cbd70202a8107f75a4cb183e8c2f73d8c171bfc8a9a030d#npm:4.1.0"],\
           ["yaml", "npm:2.5.0"]\
         ],\
         "linkType": "SOFT"\
@@ -16103,6 +16105,15 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["sortablejs", [\
+      ["npm:1.14.0", {\
+        "packageLocation": "../../../../../.yarn/berry/cache/sortablejs-npm-1.14.0-77f80432c4-10c0.zip/node_modules/sortablejs/",\
+        "packageDependencies": [\
+          ["sortablejs", "npm:1.14.0"]\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["source-map", [\
       ["npm:0.6.1", {\
         "packageLocation": "../../../../../.yarn/berry/cache/source-map-npm-0.6.1-1a3621db16-10c0.zip/node_modules/source-map/",\
@@ -17803,6 +17814,29 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["vuedraggable", [\
+      ["npm:4.1.0", {\
+        "packageLocation": "../../../../../.yarn/berry/cache/vuedraggable-npm-4.1.0-785593d488-10c0.zip/node_modules/vuedraggable/",\
+        "packageDependencies": [\
+          ["vuedraggable", "npm:4.1.0"]\
+        ],\
+        "linkType": "SOFT"\
+      }],\
+      ["virtual:f72e9c9c51cc36d8fb68775b655fad0d1ef137be742260300f2801b18b44616a65c3638519313cd53cbd70202a8107f75a4cb183e8c2f73d8c171bfc8a9a030d#npm:4.1.0", {\
+        "packageLocation": "./.yarn/__virtual__/vuedraggable-virtual-dbe82562bd/6/.yarn/berry/cache/vuedraggable-npm-4.1.0-785593d488-10c0.zip/node_modules/vuedraggable/",\
+        "packageDependencies": [\
+          ["vuedraggable", "virtual:f72e9c9c51cc36d8fb68775b655fad0d1ef137be742260300f2801b18b44616a65c3638519313cd53cbd70202a8107f75a4cb183e8c2f73d8c171bfc8a9a030d#npm:4.1.0"],\
+          ["@types/vue", null],\
+          ["sortablejs", "npm:1.14.0"],\
+          ["vue", "virtual:f72e9c9c51cc36d8fb68775b655fad0d1ef137be742260300f2801b18b44616a65c3638519313cd53cbd70202a8107f75a4cb183e8c2f73d8c171bfc8a9a030d#npm:3.4.23"]\
+        ],\
+        "packagePeers": [\
+          "@types/vue",\
+          "vue"\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["w3c-keyname", [\
       ["npm:2.2.8", {\
         "packageLocation": "../../../../../.yarn/berry/cache/w3c-keyname-npm-2.2.8-66d7d5317a-10c0.zip/node_modules/w3c-keyname/",\
diff --git a/package.json b/package.json
index 20b62a2..fa161e1 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "vue": "^3.4.21",
     "vue-diagrams": "^1.0.1",
     "vue-router": "^4.3.0",
+    "vuedraggable": "^4.1.0",
     "yaml": "^2.5.0"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 5494d45..07344dc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,6 +35,7 @@ import 'splitpanes/dist/splitpanes.css'
             <li class="nav-item"><RouterLink class="nav-link" active-class="active" to="/edit">Edit</RouterLink></li>
             <li class="nav-item"><RouterLink class="nav-link" active-class="active" to="/form">Form</RouterLink></li>
             <li class="nav-item"><RouterLink class="nav-link" active-class="active" to="/add">Add</RouterLink></li>
+            <li class="nav-item"><RouterLink class="nav-link" active-class="active" to="/kanban">Kanban</RouterLink></li>
             <li class="nav-item"><RouterLink class="nav-link" active-class="active" to="/source">Source</RouterLink></li>
 
           </ul>
diff --git a/src/router/index.js b/src/router/index.js
index 9dc71ea..9758878 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -46,6 +46,11 @@ const router = createRouter({
       name: 'InputForm',
       component: () => import('../views/InputForm.vue')
     },
+    {
+      path: '/kanban',
+      name: 'Kanban',
+      component: () => import('../views/Kanban.vue')
+    },
     {
       path: '/source',
       name: 'Source',
diff --git a/src/views/Kanban.vue b/src/views/Kanban.vue
new file mode 100644
index 0000000..1cf0ec1
--- /dev/null
+++ b/src/views/Kanban.vue
@@ -0,0 +1,113 @@
+<script setup>
+import PropertyList from '../components/PropertyList.vue'
+</script>
+
+<template>
+  <div>
+    <strong>Kanban with property {{ property_iri }}</strong>
+
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-auto">
+          <PropertyList :property_iri="property_iri" :selectProperty="(property) => {property_iri = property}" />
+        </div>
+
+        <div class="col container" v-if="property_iri">
+          <div class="row">
+
+            <div class="col mx-2 px-2 py-3 bg-light border rounded" v-for="(value, name, index) in dataModel">
+              <h5>{{ name }}</h5>
+              <draggable class="draggable-list" :list="value" item-key="key" group="prop_kanban">
+                <template #item="{ element }">
+                  <div class="list-group-item">
+                    <div class="bg-white mt-3 p-2 border rounded">{{element.resource.value}}</div>
+                  </div>
+                 </template>
+              </draggable>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dedent from 'dedent-js'
+import { mapState } from 'pinia'
+import { useSelectionStore } from '../stores/selection'
+import { useRdfStore } from '../stores/rdf'
+import { cloneDeep } from 'lodash';
+import draggable from "vuedraggable"
+import { quadStreamToString, quadStreamToStore, stringToStore } from '../helpers/rdf-parse'
+import { diff_n3 } from '../helpers/n3-compare'
+import rdf from '@rdfjs/data-model'
+
+let idGlobal = 8;
+
+export default {
+  name: 'Kanban',
+  components: {
+    draggable,
+  },
+  setup () {
+    const store = useRdfStore();
+    return { store }
+  },
+  mounted () {
+  },
+  watch: {
+    property_iri (value) {
+      console.log("property_iri changed: " + value);
+      this.getResource()
+    }
+  },
+  data () {
+    return {
+      originalDataModel: {},
+      dataModel: {},
+      property_iri: "",
+    }
+  },
+  methods: {
+    async getResource () {
+      console.log('get resource')
+      const result = await useRdfStore().sendQuery(dedent(`
+        select distinct ?resource ?value {
+          ?resource <${ this.property_iri }> ?value
+        }
+      `))
+      if (result.resultType === 'bindings') {
+        const bindingsStream = await result.execute()
+        this.originalDataModel = {}
+        for await (const bindings of bindingsStream) {
+          if (this.originalDataModel[bindings.get("value").value] == undefined) {
+            this.originalDataModel[bindings.get("value").value] = []
+            console.log(`create array for ${ bindings.get("value").value }`);
+          }
+          this.originalDataModel[bindings.get("value").value].push({"resource": bindings.get("resource"), "value": bindings.get("value").value, "key": bindings.get("resource").value})
+        }
+        this.dataModel = cloneDeep(this.originalDataModel)
+
+        console.log(this.originalDataModel)
+        console.log(this.dataModel)
+      }
+    },
+  }
+}
+
+</script>
+
+<style scoped>
+.col {
+  overflow: auto;
+}
+.draggable-list {
+  min-height: 10vh;
+}
+.draggable-list > div {
+  cursor: pointer;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index b5b7303..8881e1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12569,6 +12569,7 @@ __metadata:
     vue: "npm:^3.4.21"
     vue-diagrams: "npm:^1.0.1"
     vue-router: "npm:^4.3.0"
+    vuedraggable: "npm:^4.1.0"
     yaml: "npm:^2.5.0"
   languageName: unknown
   linkType: soft
@@ -14059,6 +14060,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sortablejs@npm:1.14.0":
+  version: 1.14.0
+  resolution: "sortablejs@npm:1.14.0"
+  checksum: 10c0/b792790286d54af5ebb083300d0cb3f96f5cf840e85f4953aa2074a69c1671a3d6a73f8d5fcc948b27c0573575ff98ec32346f7dcfe6230d517d7a81ea7ad314
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:^1.2.0":
   version: 1.2.0
   resolution: "source-map-js@npm:1.2.0"
@@ -15495,6 +15503,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vuedraggable@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "vuedraggable@npm:4.1.0"
+  dependencies:
+    sortablejs: "npm:1.14.0"
+  peerDependencies:
+    vue: ^3.0.1
+  checksum: 10c0/e5121ca53081e63f6a3e1dc4c3c02ae86fd6b896ccf37d9a0f88abb993fd9da3a1b54635541854a2a85b65e30dae00e545a2c208708e7df73424bd64c2e59cbc
+  languageName: node
+  linkType: hard
+
 "w3c-keyname@npm:^2.2.4":
   version: 2.2.8
   resolution: "w3c-keyname@npm:2.2.8"