diff --git a/entries/static/entries/js/components/Entries.js b/entries/static/entries/js/components/Entries.js
new file mode 100644
index 0000000000000000000000000000000000000000..c3f846cc19a045c7b6ba67ee04347402c821e0be
--- /dev/null
+++ b/entries/static/entries/js/components/Entries.js
@@ -0,0 +1,65 @@
+import UnificationEntriesList from "./UnificationEntriesList.js";
+import UnificationRightPane from "./UnificationRightPane.js";
+
+export default {
+  data () {
+    return {
+      entryId: null,
+      lexicalUnitId: null,
+      unifiedFrameId: null,
+      isEdit: false,
+      gettext: window.gettext,
+    };
+  },
+  components: {UnificationEntriesList, UnificationRightPane},
+  methods: {
+    lexicalUnitSelected (entryId, lexicalUnitId) {
+      this.entryId = entryId;
+      this.lexicalUnitId = lexicalUnitId;
+      this.isEdit = false;
+    },
+    unifiedFrameSelected (unifiedFrameId) {
+      this.unifiedFrameId = unifiedFrameId;
+      this.isEdit = true;
+    }
+  },
+  mounted () {
+    Split(['#right-pane', '#examples'], {
+      direction: 'vertical',
+      sizes: [75, 25],
+      gutterSize: 4,
+    });
+  },
+  template: `
+    <div id="entries-list" class="col h-100 w-100 px-0">
+      <div id="entries-list-div" class="col p-0 h-100 w-100 overflow-auto">
+        <unification-entries-list @lexical-unit-selected="lexicalUnitSelected" />
+      </div>
+    </div>
+    <div id="entry-display" class="col h-100 p-0">
+      <div class="w-100 h-100">
+        <div id="right-pane" class="col w-100 p-0">
+          <unification-right-pane 
+            :entryId="entryId" 
+            :lexicalUnitId="lexicalUnitId" 
+            :initialUnifiedFrameId="unifiedFrameId"
+            :initialIsEdit="isEdit" />
+        </div>
+        <div class="col w-100 p-0 tab-pane" id="examples">
+            <table id="unmatched-examples" class="table table-sm table-hover">
+            <thead>
+                <tr>
+                    <th scope="col">{{ gettext("Przykład") }}</th>
+                    <th scope="col">{{ gettext("Źródło") }}</th>
+                    <th scope="col">{{ gettext("Opinia") }}</th>
+                </tr>
+            </thead>
+            <tbody id="unmatched-examples-list">
+            </tbody>
+            </table>
+          <p class="mx-1 my-1" id="unmatched-no-examples">{{ gettext("Brak przykładów") }}</p>
+        </div>
+      </div>
+    </div>
+  `
+};
diff --git a/entries/static/entries/js/components/main.js b/entries/static/entries/js/components/Unification.js
similarity index 100%
rename from entries/static/entries/js/components/main.js
rename to entries/static/entries/js/components/Unification.js
diff --git a/entries/static/entries/js/entries_index.js b/entries/static/entries/js/entries_index.js
new file mode 100644
index 0000000000000000000000000000000000000000..69f7aef94b918e0062f63093b143c1a232064887
--- /dev/null
+++ b/entries/static/entries/js/entries_index.js
@@ -0,0 +1,6 @@
+import Entries from './components/Entries.js';
+const { createApp } = Vue;
+
+window.update_entries = function () {}
+
+window.unificationLeftPaneApp = createApp(Entries).mount('#vue-app');
diff --git a/entries/static/entries/js/unification_index.js b/entries/static/entries/js/unification_index.js
index 180572f4c99b1204a32f31afc8bc653b88a08486..78c11b9663ee3ade39ac86430b1ef30856d55d46 100644
--- a/entries/static/entries/js/unification_index.js
+++ b/entries/static/entries/js/unification_index.js
@@ -1,6 +1,6 @@
-import Main from './components/main.js';
+import Unification from './components/Unification.js';
 const { createApp } = Vue;
 
 window.update_entries = function () {}
 
-window.unificationLeftPaneApp = createApp(Main).mount('#vue-app');
+window.unificationLeftPaneApp = createApp(Unification).mount('#vue-app');
diff --git a/entries/templates/entries.html b/entries/templates/entries.html
index 1179c4894db5de3b9b6726ab578ae0708c4f4737..6100d20eb38bdd28ec675ca9fc8cd51d0640f9d7 100644
--- a/entries/templates/entries.html
+++ b/entries/templates/entries.html
@@ -7,9 +7,18 @@
 
 {% block scripts %}
     {{ block.super }}
-    <script src="{% static 'entries/js/entries_list.js' %}"></script>
+    <link rel="stylesheet" type="text/css" href="{% static 'entries/css/unification_frames.css' %}">
+    <script src="{% static 'entries/js/unification_entries_list.js' %}"></script>
+    <script src="{% static 'entries/js/unification_frames_list.js' %}"></script>
+    <script src="{% static 'entries/js/unification_entries_for_frames_list.js' %}"></script>
+    <script src="{% static 'entries/js/unification.js' %}"></script>
+    <script src="{% static 'entries/js/selectional_preference.js' %}"></script>
+    <script src="{% static 'entries/js/jquery-impromptu.min.js' %}"></script>
+    <script src="https://unpkg.com/vue@3"></script>
+    <script type="module" src="{% static 'entries/js/entries_index.js' %}"></script>
 {% endblock %}
 
-{% block left_pane %}{% include "entries_list.html" %}{% endblock %}
-
-{% block right_pane %}{% include "entry_display.html" %}{% endblock %}
+{% block content %}
+    <div id="lexical-unit-notes-template" class="d-none">{% include 'notes.html' %}</div>
+    <div id="vue-app" class="row h-100 m-0 p-0 bg-secondary"></div>
+{% endblock %}
diff --git a/entries/templates/entries_base.html b/entries/templates/entries_base.html
index 25530300ee885a061498d9055c00b7272d443542..da1deaa1b541320a66565b0164d6710ceca55237 100644
--- a/entries/templates/entries_base.html
+++ b/entries/templates/entries_base.html
@@ -80,21 +80,6 @@
 {% endblock %}
 
 {% block content %}
-
-<div class="row h-100 m-0 p-0 bg-secondary">
-    <!-- left panel: list of entries -->
-    <div id="entries-list" class="col h-100 w-100 px-0">
-        <div id="entries-list-div" class="col p-0 h-100 w-100 overflow-auto">
-            {% block left_pane %}{% endblock %}
-        </div>
-    </div>
-    
-    <!-- right panel: entry display (syntax, semantics, examples) -->
-    <div id="entry-display" class="col h-100 p-0">
-        {% block right_pane %}{% endblock %}
-    </div>
-</div>
-
 {% endblock %}
 
 {% block modals %}
diff --git a/entries/templates/entries_list.html b/entries/templates/entries_list.html
deleted file mode 100644
index efd94e29fae9caafe5a16ad0e6a8696d21fdfe53..0000000000000000000000000000000000000000
--- a/entries/templates/entries_list.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% load i18n %}
-
-<table id="entries-table" class="table table-sm table-hover text-dark">
-    <thead>
-        <tr>
-            <th class="p-1">{% trans "Lemat" %}</th>
-            <th class="p-1">Status</th>
-            <th class="p-1">{% trans "Cz. mowy" %}</th>
-        </tr>
-    </thead>
-    <tbody id="entries">
-    </tbody>
-</table>
diff --git a/entries/templates/entry_display.html b/entries/templates/entry_display.html
deleted file mode 100644
index cf620b880ec55094d84ddca819c75a16fe9bd4fa..0000000000000000000000000000000000000000
--- a/entries/templates/entry_display.html
+++ /dev/null
@@ -1,79 +0,0 @@
-{% load i18n %}
-
-<ul class="nav nav-pills nav-justified p-1" id="entryTabs" role="tablist">
-    <li class="nav-item mr-1">
-        <a class="btn btn-sm btn-outline-dark nav-link active" id="semantics-tab" data-toggle="tab" href="#semantics" role="tab" aria-controls="semantics" aria-selected="true">
-            {% trans "Semantyka (ramy + schematy)" %}
-        </a>
-    </li>
-    <li class="nav-item mr-1">
-        <a class="btn btn-sm btn-outline-dark nav-link" id="syntax-tab" data-toggle="tab" href="#syntax" role="tab" aria-controls="syntax" aria-selected="false">
-            {% trans "Składnia (schematy)" %}
-        </a>
-    </li>
-    <li class="nav-item mr-0">
-        <a class="btn btn-sm btn-outline-dark nav-link" id="examples-tab" data-toggle="tab" href="#examples" role="tab" aria-controls="examples" aria-selected="false">
-            {% trans "Przykłady niedopasowane" %}
-        </a>
-    </li>
-</ul>
-
-<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">
-        <div class="row m-0 p-0" id="semantics-top-pane">
-            <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-frames-pane">
-                <div id="semantics-frames"></div>
-            </div>
-            <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
-                <div id="semantics-schemata"></div>
-            </div>
-        </div>
-        <div class="row m-0 p-0 overflow-auto" id="semantics-examples-pane">
-            <table id="semantics-examples" class="table table-sm table-hover">
-                <thead>
-                    <tr>
-                        <th scope="col">{% trans "Przykład" %}<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i></th>
-                        <th scope="col">{% trans "Źródło" %}</th>
-                        <th scope="col">{% trans "Opinia" %}</th>
-                    </tr>
-                </thead>
-                <tbody id="semantics-examples-list">
-                </tbody>
-            </table>
-            <p class="mx-1 my-1"id="semantics-no-examples">{% trans "Brak przykładów" %}</p>
-        </div>
-    </div>
-    <div class="col h-100 w-100 p-0 tab-pane" id="syntax" role="tabpanel" aria-labelledby="syntax-tab">
-        <div class="col w-100 px-1 pt-0 pb-0 overflow-auto" id="syntax-schemata-pane">
-            <div id="syntax-schemata"></div>
-        </div>
-        <div class="col w-100 p-0 overflow-auto" id="syntax-examples-pane">
-            <table id="syntax-examples" class="table table-sm table-hover">
-                <thead>
-                    <tr>
-                        <th scope="col">{% trans "Przykład" %}</th>
-                        <th scope="col">{% trans "Źródło" %}</th>
-                        <th scope="col">{% trans "Opinia" %}</th>
-                    </tr>
-                </thead>
-                <tbody id="syntax-examples-list">
-                </tbody>
-            </table>
-            <p class="mx-1 my-1"id="syntax-no-examples">{% trans "Brak przykładów" %}</p>
-        </div>
-    </div>
-    <div class="col h-100 w-100 p-0 tab-pane" id="examples" role="tabpanel" aria-labelledby="examples-tab">
-        <table id="unmatched-examples" class="table table-sm table-hover">
-            <thead>
-                <tr>
-                    <th scope="col">{% trans "Przykład" %}</th>
-                    <th scope="col">{% trans "Źródło" %}</th>
-                    <th scope="col">{% trans "Opinia" %}</th>
-                </tr>
-            </thead>
-            <tbody id="unmatched-examples-list">
-            </tbody>
-        </table>
-        <p class="mx-1 my-1"id="unmatched-no-examples">{% trans "Brak przykładów" %}</p>
-    </div>
-</div>
diff --git a/entries/templates/unification.html b/entries/templates/unification.html
index 2a73f0a9bf2d7f29122bc19fe5b4d33cbf6d3ff6..349d0b23fca215ee5f08472cf62c5c56a02a7b96 100644
--- a/entries/templates/unification.html
+++ b/entries/templates/unification.html
@@ -18,11 +18,6 @@
     <script type="module" src="{% static 'entries/js/unification_index.js' %}"></script>
 {% endblock %}
 
-{% block left_pane %}<div id="unification-left-pane"></div>{% endblock %}
-
-{% block right_pane %}{% include "unification_lexical_unit_display.html" %}{% endblock %}
-
-
 {% block content %}
     <div id="lexical-unit-notes-template" class="d-none">{% include 'notes.html' %}</div>
     <div id="vue-app" class="row h-100 m-0 p-0 bg-secondary"></div>
diff --git a/entries/templates/unification_lexical_unit_display.html b/entries/templates/unification_lexical_unit_display.html
deleted file mode 100644
index 96beac9dcdc2197deeb0052f38537723294d5ae1..0000000000000000000000000000000000000000
--- a/entries/templates/unification_lexical_unit_display.html
+++ /dev/null
@@ -1,56 +0,0 @@
-{% load i18n static %}
-
-
-<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">
-        <div id="semantics-top-pane" class="overflow-auto"></div>
-
-        <div class="row m-0 p-0 overflow-auto" id="semantics-examples-pane">
-            <table id="semantics-examples" class="table table-sm table-hover">
-                <thead>
-                <tr>
-                    <th scope="col">{% trans "Przykład" %}<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i></th>
-                    <th scope="col">{% trans "Źródło" %}</th>
-                    <th scope="col">{% trans "Opinia" %}</th>
-                </tr>
-                </thead>
-                <tbody id="semantics-examples-list">
-                </tbody>
-            </table>
-            <p class="mx-1 my-1"id="semantics-no-examples">{% trans "Brak przykładów" %}</p>
-        </div>
-    </div>
-    <div class="col h-100 w-100 p-0 tab-pane" id="syntax" role="tabpanel" aria-labelledby="syntax-tab">
-        <div class="col w-100 px-1 pt-0 pb-0 overflow-auto" id="syntax-schemata-pane">
-            <div id="syntax-schemata"></div>
-        </div>
-        <div class="col w-100 p-0 overflow-auto" id="syntax-examples-pane">
-            <table id="syntax-examples" class="table table-sm table-hover">
-                <thead>
-                <tr>
-                    <th scope="col">{% trans "Przykład" %}</th>
-                    <th scope="col">{% trans "Źródło" %}</th>
-                    <th scope="col">{% trans "Opinia" %}</th>
-                </tr>
-                </thead>
-                <tbody id="syntax-examples-list">
-                </tbody>
-            </table>
-            <p class="mx-1 my-1"id="syntax-no-examples">{% trans "Brak przykładów" %}</p>
-        </div>
-    </div>
-    <div class="col h-100 w-100 p-0 tab-pane" id="examples" role="tabpanel" aria-labelledby="examples-tab">
-        <table id="unmatched-examples" class="table table-sm table-hover">
-            <thead>
-            <tr>
-                <th scope="col">{% trans "Przykład" %}</th>
-                <th scope="col">{% trans "Źródło" %}</th>
-                <th scope="col">{% trans "Opinia" %}</th>
-            </tr>
-            </thead>
-            <tbody id="unmatched-examples-list">
-            </tbody>
-        </table>
-        <p class="mx-1 my-1"id="unmatched-no-examples">{% trans "Brak przykładów" %}</p>
-    </div>
-</div>