diff --git a/.gitignore b/.gitignore
index 90568fade82ab3c7552514c6f170ef486c7e39b4..6c83e0251885ecfd7f2960f1bd14e44d239cd276 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@
 /.datastore/
 /.idea/
 /import.log
+.DS_Store
diff --git a/entries/static/entries/js/components/LexicalUnitDisplay.js b/entries/static/entries/js/components/LexicalUnitDisplay.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd27685d646977cb1e5acd54ffaf129e69b9d312
--- /dev/null
+++ b/entries/static/entries/js/components/LexicalUnitDisplay.js
@@ -0,0 +1,15 @@
+export default {
+  props: {
+    lexicalUnitId: Number
+  },
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    clicked () {
+      this.count++;
+      addSelectivePreference();
+    }
+  },
+  template: `<div @click="clicked">display {{ lexicalUnitId }} is {{ count }}</div> <div @click="$emit('goToEdit')">idź do edycji</div>`
+}
diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/entries/static/entries/js/components/LexicalUnitEdit.js
new file mode 100644
index 0000000000000000000000000000000000000000..a90fd682a9aed520ce8e668c09b6afec7be792a8
--- /dev/null
+++ b/entries/static/entries/js/components/LexicalUnitEdit.js
@@ -0,0 +1,15 @@
+export default {
+  props: {
+    lexicalUnitId: Number
+  },
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    clicked () {
+      this.count++;
+      addSelectivePreference();
+    }
+  },
+  template: `<div @click="clicked">edit {{ lexicalUnitId }} is {{ count }}</div>`
+}
diff --git a/entries/static/entries/js/components/main.js b/entries/static/entries/js/components/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..4f2d4ddb92a43d36e49b0286b43ed60fcfe455a5
--- /dev/null
+++ b/entries/static/entries/js/components/main.js
@@ -0,0 +1,43 @@
+import LexicalUnitDisplay from './LexicalUnitDisplay.js';
+import LexicalUnitEdit from './LexicalUnitEdit.js';
+
+export default {
+  props: {
+    lexicalUnitId: Number
+  },
+  data () {
+    return this.getInitialData();
+  },
+  methods: {
+    getInitialData () {
+      return { isEdit: false }
+    },
+    goToEdit () {
+      this.isEdit = true;
+    }
+  },
+  computed: {
+    leftPaneComponent () {
+      if (!this.lexicalUnitId) return null;
+      if (this.isEdit) return LexicalUnitEdit;
+      return LexicalUnitDisplay;
+    },
+    leftPaneComponentProps () {
+      return {
+        lexicalUnitId: this.lexicalUnitId
+      };
+    }
+  },
+  watch: {
+    lexicalUnitId () {
+      const freshData = this.getInitialData();
+      Object.keys(freshData).map(key => {
+        this[key] = freshData[key];
+      });
+    }
+  },
+  template: `
+    <div @click="isEdit = !isEdit">kliknij mnie, jestem LU {{ this.lexicalUnitId }}</div>
+    <component :is="leftPaneComponent" v-bind="leftPaneComponentProps" @go-to-edit="goToEdit" />
+  `
+}
diff --git a/entries/static/entries/js/unification.js b/entries/static/entries/js/unification.js
index 85d53ff4b72c1aa92a77a95bd630cf7cdbd395e8..e9e03851679e29ad3548e34c56a63068fdbadd1f 100644
--- a/entries/static/entries/js/unification.js
+++ b/entries/static/entries/js/unification.js
@@ -447,4 +447,3 @@ function extract_frames_to_new_frame(unified_frame_id, slowal_frame_ids, new_uni
         }
     });
 }
-
diff --git a/entries/static/entries/js/unification_entries_list.js b/entries/static/entries/js/unification_entries_list.js
index 4f2fd5b1806865541a24935eb4f92b6619ee709c..dd8b00b95c4b044681f9600447f2c39297d942be 100644
--- a/entries/static/entries/js/unification_entries_list.js
+++ b/entries/static/entries/js/unification_entries_list.js
@@ -51,6 +51,7 @@ function setup_lexical_units_table(drilldown, lexical_units, can_see_assignees)
             </tr>
         `).click(function () {
             $(this).addClass('table-primary').siblings().removeClass("table-primary");
+            window.unificationApp.$.props.lexicalUnitId = lexical_unit.pk;
             get_lexical_unit(lexical_unit.pk, $(drilldown.data("row")).data("entry"));
         });
     }
diff --git a/entries/static/entries/js/unification_index.js b/entries/static/entries/js/unification_index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ac4cd9f63c36bbfb77cb811addfc7dced7424c6c
--- /dev/null
+++ b/entries/static/entries/js/unification_index.js
@@ -0,0 +1,4 @@
+  import Main from './components/main.js';
+  const { createApp } = Vue;
+
+window.unificationApp = createApp(Main).mount('#app');
diff --git a/entries/templates/unification_lexical_unit_display.html b/entries/templates/unification_lexical_unit_display.html
index 1668b5264a07dcc0715424a3eab416cddb5b3e85..275b7c4980dbba231149d23423fe735d1bb1fe7e 100644
--- a/entries/templates/unification_lexical_unit_display.html
+++ b/entries/templates/unification_lexical_unit_display.html
@@ -1,4 +1,8 @@
-{% load i18n %}
+{% load i18n static %}
+
+<script src="https://unpkg.com/vue@3"></script>
+<div id="app"></div>
+<script type="module" src="{% static 'entries/js/unification_index.js' %}"></script>
 
 <div class="tab-content h-100 w-100 p-0" id="entryTabsContent">
     <div class="col h-100 w-100 p-0 tab-pane show active" id="semantics" role="tabpanel" aria-labelledby="semantics-tab">