diff --git a/common/templates/base.html b/common/templates/base.html
index b61041b389bacdefb681013e12e988bf5a6fa902..216fea5020993f34c2b10fd05bf015b44ad4a2ef 100644
--- a/common/templates/base.html
+++ b/common/templates/base.html
@@ -104,11 +104,14 @@
         </a>
     </nav>
     
-    <main class="container-fluid flex-grow-1 overflow-auto m-0 p-0 bg-dark" role="main">
-        <div id="vue-app"></div>
-        {% block content %}{% endblock %}
-    </main>
-    
+    {% if is_vue_app %}
+        <main id="vue-app"></main>
+    {% else %}
+        <main class="container-fluid flex-grow-1 overflow-auto m-0 p-0 bg-dark" role="main">
+            {% block content %}{% endblock %}
+        </main>
+    {% endif %}
+
     <footer class="footer bg-dark text-muted">
         <div class='px-1'>
             Copyright © {% trans "Instytut Podstaw Informatyki PAN" %}, 2021.
diff --git a/entries/static/entries/js/components/Entries.js b/entries/static/entries/js/components/Entries.js
deleted file mode 100644
index 64211efa73ac8f710e7f937a2bfface8f17b8d91..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/components/Entries.js
+++ /dev/null
@@ -1,86 +0,0 @@
-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,
-      unificationEntriesListRefreshKey: 1
-    };
-  },
-  components: {UnificationEntriesList, UnificationRightPane},
-  methods: {
-    lexicalUnitSelected (entryId, lexicalUnitId) {
-      this.entryId = entryId;
-      this.lexicalUnitId = lexicalUnitId;
-      this.isEdit = false;
-    },
-    unifiedFrameSelected (unifiedFrameId) {
-      this.unifiedFrameId = unifiedFrameId;
-      this.isEdit = true;
-    },
-    refreshEntriesList() {
-      this.unificationEntriesListRefreshKey++;
-    }
-  },
-  mounted () {
-    $('#entries-list').length && Split(['#entries-list', '#entry-display'], {
-      sizes: [20, 80],
-      gutterSize: 4,
-      minSize: 10,
-      elementStyle: (dimension, size, gutterSize) => {
-        return {
-          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
-        }
-      },
-    });
-    // Split(['#right-pane', '#examples'], {
-    //   direction: 'vertical',
-    //   sizes: [75, 25],
-    //   gutterSize: 4,
-    //   minSize: 10,
-    // });
-  },
-  template: `
-    <div id="entries-list" class="col h-100 w-100 px-0 overflow-hidden">
-      <div id="entries-list-div" class="col p-0 h-100 w-100 overflow-hidden">
-        <unification-entries-list 
-          :unificationEntriesListRefreshKey="unificationEntriesListRefreshKey" 
-          :initialLexicalUnitId="lexicalUnitId" 
-          :initialEntryId="entryId" 
-          @lexical-unit-selected="lexicalUnitSelected" />
-      </div>
-    </div>
-    <div id="entry-display" class="col h-100 p-0 overflow-hidden">
-      <div class="w-100 h-100">
-        <div id="right-pane" class="col w-100 h-100 p-0">
-          <unification-right-pane 
-            :key="lexicalUnitId"
-            :entryId="entryId" 
-            :lexicalUnitId="lexicalUnitId" 
-            :initialUnifiedFrameId="unifiedFrameId"
-            :initialIsEdit="isEdit" 
-            @refresh-entries-list="refreshEntriesList" />
-        </div>
-<!--        <div class="col w-100 p-0 tab-pane overflow-auto" id="examples">-->
-<!--            <table id="semantics-examples" class="table table-sm table-hover">-->
-<!--                <thead>-->
-<!--                    <tr>-->
-<!--                        <th scope="col">{{ gettext("Przykład") }}<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i></th>-->
-<!--                        <th scope="col">{{ gettext("Źródło") }}</th>-->
-<!--                        <th scope="col">{{ gettext("Opinia") }}</th>-->
-<!--                    </tr>-->
-<!--                </thead>-->
-<!--                <tbody id="semantics-examples-list">-->
-<!--                </tbody>-->
-<!--            </table>-->
-<!--            <p class="mx-1 my-1" id="semantics-no-examples">{{ gettext("Brak przykładów") }}</p>-->
-<!--        </div>-->
-      </div>
-    </div>
-  `
-};
diff --git a/entries/static/entries/js/components/InfoTooltip.js b/entries/static/entries/js/components/InfoTooltip.js
deleted file mode 100644
index 3fa1e9a415277b2cf2b13cfdb7d2f7f27360e25e..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/components/InfoTooltip.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export default {
-  props: {
-    text: String,
-    visibleText: String
-  },
-  data () {
-    return {
-      iconUrl: window.STATIC_URL + 'common/img/info.svg'
-    }
-  },
-  computed: {
-    quotedText () {
-      return this.text.replace(/"/g, '&quot;');
-    }
-  },
-  mounted () {
-    $(this.$refs.tooltip).tooltip();
-  },
-  template: `
-    <span
-      data-toggle="tooltip"
-      data-placement="bottom"
-      data-html="true"
-      :title="quotedText"
-      ref="tooltip"
-    >
-      <img v-if="!visibleText" :src="iconUrl" alt="info" width="14" height="14" />
-      <span v-else>{{visibleText}}</span>
-    </span>
-  `
-}
diff --git a/entries/static/entries/js/components/Spinner.js b/entries/static/entries/js/components/Spinner.js
deleted file mode 100644
index a4ac913a5ac7bf63b5db38266f9846e9839850cf..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/components/Spinner.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
-  data() {
-    return { gettext: window.gettext }
-  },
-  template: `
-    <div class="d-flex justify-content-center wait-spinner">
-      <div class="spinner-border text-primary m-5" style="width: 3rem; height: 3rem;" role="status">
-        <span class="sr-only">{{ gettext('Proszę czekać...') }}</span>
-      </div>
-    </div>
-  `
-}
diff --git a/entries/static/entries/js/components/UnificationComponent.js b/entries/static/entries/js/components/UnificationComponent.js
index 5a808084643df85eab672120fb06b095310a8df1..926b201a20812917d515a4f3ec19680539e114ad 100644
--- a/entries/static/entries/js/components/UnificationComponent.js
+++ b/entries/static/entries/js/components/UnificationComponent.js
@@ -7,7 +7,6 @@ export default {
       entryId: null,
       lexicalUnitId: null,
       unifiedFrameId: null,
-      isEdit: false,
       gettext: window.gettext,
       unificationEntriesListRefreshKey: 1,
     };
@@ -17,10 +16,8 @@ export default {
     lexicalUnitSelected (entryId, lexicalUnitId) {
       this.entryId = entryId;
       this.lexicalUnitId = lexicalUnitId;
-      this.isEdit = false;
     },
     unifiedFrameSelected (unifiedFrameId, entryId, lexicalUnitId) {
-      this.isEdit = true;
       this.unifiedFrameId = unifiedFrameId;
       this.entryId = entryId;
       this.lexicalUnitId = lexicalUnitId;
@@ -68,7 +65,6 @@ export default {
           :entryId="entryId" 
           :lexicalUnitId="lexicalUnitId" 
           :initialUnifiedFrameId="unifiedFrameId"
-          :initialIsEdit="isEdit"
           @refresh-entries-list="refreshEntriesList"
         />
     </div>
diff --git a/entries/static/entries/js/components/UnificationEntriesList.js b/entries/static/entries/js/components/UnificationEntriesList.js
deleted file mode 100644
index 5bec7892450fd2a2ddb67da7a9a1bb5e292c4dc3..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/components/UnificationEntriesList.js
+++ /dev/null
@@ -1,48 +0,0 @@
-export default {
-  props: {
-    initialLexicalUnitId: Number,
-    initialEntryId: Number,
-    unificationEntriesListRefreshKey: Number,
-  },
-  watch: {
-    unificationEntriesListRefreshKey() {
-      // TODO: reload data and click in selected row
-      // this.datatableObject.ajax.reload();
-      setup_entries_list({
-        table: this.$refs.table,
-        lexicalUnitSelected: (entryId, lexicalUnitId) => { this.$emit('lexicalUnitSelected', entryId, lexicalUnitId); },
-        selectEntryId: this.initialEntryId,
-        secondarySelectEntryId: this.initialLexicalUnitId,
-      });
-    }
-  },
-  data () {
-    return {
-      gettext: window.gettext,
-      canViewAssignment: has_permission("users.view_assignment"),
-    }
-  },
-  emits: ['lexicalUnitSelected'],
-  mounted () {
-    setup_entries_list({
-      table: this.$refs.table,
-      lexicalUnitSelected: (entryId, lexicalUnitId) => { this.$emit('lexicalUnitSelected', entryId, lexicalUnitId); },
-      selectEntryId: this.initialEntryId
-    });
-  },
-  template: `
-    <table ref="table" class="table table-sm text-dark">
-      <thead>
-        <tr>
-          <th class="p-1">{{ gettext('Lemat') }}</th>
-          <th class="p-1">{{ gettext('Część mowy') }}</th>
-          <th class="p-1">{{ gettext('Do pobrania') }}</th>
-          <th v-if="canViewAssignment" class="p-1">{{ gettext('Semantyk') }}</th>
-          <th v-else class="p-1">{{ gettext('Moje (w opracowaniu)') }}</th>
-        </tr>
-      </thead>
-      <tbody id="entries">
-      </tbody>
-    </table>
-  `
-};
diff --git a/entries/static/entries/js/components/UnificationRightPane.js b/entries/static/entries/js/components/UnificationRightPane.js
index 9f99ede3508ff8323a9239c4948ff3388e1306a3..4bb097ed22f518fe442dc4e0d1aa5b2f71528dec 100644
--- a/entries/static/entries/js/components/UnificationRightPane.js
+++ b/entries/static/entries/js/components/UnificationRightPane.js
@@ -7,7 +7,6 @@ export default {
     entryId: Number,
     lexicalUnitId: Number,
     initialUnifiedFrameId: Number,
-    initialIsEdit: false,
   },
   emits: ['refreshEntriesList'],
   data () {
@@ -16,7 +15,6 @@ export default {
   methods: {
     getInitialData () {
       return {
-        isEdit: this.initialIsEdit,
         key: this.lexicalUnitId,
         entryIdLocal: this.entryId,
         unifiedFrameId: this.initialUnifiedFrameId,
@@ -24,7 +22,6 @@ export default {
       };
     },
     goToDisplay () {
-      this.isEdit = false;
       this.unifiedFrameId = null;
     },
     refresh () {
@@ -41,9 +38,6 @@ export default {
     }
   },
   watch: {
-    initialIsEdit () {
-      Object.assign(this, this.getInitialData());
-    },
     lexicalUnitId () {
       Object.assign(this, this.getInitialData());
     },
@@ -52,18 +46,10 @@ export default {
     }
   },
   template: `
-    <div v-if="key || unifiedFrameId" :key="(key, entryIdLocal, unifiedFrameId, isEdit)" class="row h-100 m-0 p-0 overflow-auto" id="semantics-top-pane">
-      <lexical-unit-display
-        v-if="key && !isEdit"
-        :key="key"
-        :entryId="entryIdLocal"
-        :lexicalUnitId="key"
-        @refresh="refresh"
-        @refresh-entries-list="refreshEntriesList"
-      />
+    <div v-if="key || unifiedFrameId" :key="(key, entryIdLocal, unifiedFrameId)" class="row h-100 m-0 p-0 overflow-auto" id="semantics-top-pane">
       <lexical-unit-edit
         ref="lexicalUnitEdit"
-        v-if="unifiedFrameId && isEdit"
+        v-if="unifiedFrameId"
         :key="unifiedFrameId"
         :readOnly="false"
         :unifiedFrameId="unifiedFrameId"
diff --git a/entries/static/entries/js/components/frame-components/ExamplesComponent.js b/entries/static/entries/js/components/frame-components/ExamplesComponent.js
deleted file mode 100644
index 81ff812bcc524d306a81605638949cd65e3c3c02..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/components/frame-components/ExamplesComponent.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import InfoTooltip from "../InfoTooltip.js";
-
-export default {
-    props: {
-        examples: Object,
-        frame: Object,
-        frame_arguments: Object,
-        frame_arguments_or_type: null,
-        schemas: Object,
-        lus: Object,
-    },
-    components: {InfoTooltip},
-    data() {
-        return {
-            img_prefix: String
-        }
-    },
-    emits: ['exampleSelected'],
-    methods: {
-        getExamples () {
-            let ret = this.examples;
-            if(this.schemas && this.schemas.length > 0) {
-                // ograniczone do schematu
-                ret = ret.filter(e => this.schemas.every(a => e.schema_ids.includes(parseInt(a.id))));
-            }
-            if(this.frame_arguments && this.frame_arguments.length > 0) {
-                // ograniczone do argumentu ramy
-                if(this.frame_arguments_or_type) {
-                    ret = ret.filter(e => this.frame_arguments.some(a => e.argument_ids.includes(a.id)));
-                } else {
-                    ret = ret.filter(e => this.frame_arguments.every(a => e.argument_ids.includes(a.id)));
-                }
-            }
-            if(this.frame) {
-                ret = ret.filter(e => e.frame_ids.includes(this.frame.id));
-            }
-            if(this.lus && this.lus.length > 0) {
-                ret = ret.filter(e => this.lus.every(lu => e.lu_ids.includes(lu.id)));
-            }
-            return ret;
-        },
-        getSchemaStr(schema) {
-            return schema.positions.map(e => e.phrases.map(p => p.str).join(",")).join('|');
-        },
-        selectExample(example) {
-            example.selected = !example.selected;
-            this.$emit('exampleSelected', this.examples.filter(example => example.selected));
-        }
-    },
-    mounted () {
-        this.img_prefix = window.STATIC_URL;
-    },
-    template: `
-    <table id="semantics-examples" v-if="getExamples().length > 0" class="table table-sm table-hover" style="">
-        <thead>
-        <tr>
-            <th scope="col">Przykład
-                <i v-if="frame_arguments" v-for="frame_argument in frame_arguments">
-                    <span class="example-role"> {{' '}}
-                        <span :class="frame_argument.role">{{frame_argument.role}}</span>
-                    </span>
-                </i>
-                <i v-if="lus" v-for="lu in lus">{{' ' + lu.str}}</i>
-                <i v-if="schemas" v-for="schema in schemas">{{' '+getSchemaStr(schema)}}</i>
-            </th>
-            <th scope="col">Źródło</th>
-            <th scope="col">Opinia</th>
-        </tr>
-        </thead>
-        <tbody id="semantics-examples-list">
-            <template v-for="example in getExamples()">
-                <tr class="example"
-                    @mouseenter="example.hover=true"
-                    @mouseleave="example.hover=false"
-                    @click.stop="selectExample(example)"
-                    :class="example.selected ? 'active table-primary' : example.hover ? 'bg-highlight' : ''" 
-                >
-                    <td class="py-1">
-                        {{example.sentence}}
-                        <info-tooltip v-if="example.note" :text="example.note" />
-                    </td>
-                    <td class="py-1">{{example.source}}</td>
-                    <td class="py-1">{{example.opinion}}</td>
-                </tr>
-            </template>
-        </tbody>
-    </table>
-    <p v-else class="mx-1 my-1" id="semantics-no-examples" style="display: none;">Brak przykładów</p>
-  `
-}
-
-
diff --git a/entries/static/entries/js/components/frame-components/SemanticsSchemataComponent.js b/entries/static/entries/js/components/frame-components/SemanticsSchemataComponent.js
deleted file mode 100644
index 9f1d160d3841e8c830221e0024d32c0a89bf1501..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/components/frame-components/SemanticsSchemataComponent.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import InfoTooltip from "../InfoTooltip.js";
-
-export default {
-    props: {
-        subentries: Object,
-        frame: Object,
-        alternations: Object,
-        realisation_phrases: Object,
-        realisation_descriptions: Object,
-        selectedExamples: Object
-    },
-    components: {InfoTooltip},
-    emits: ['schemataSelected'],
-    data() {
-        return {
-            img_prefix: String
-        }
-    },
-    methods: {
-        getFunctions(position) {
-            const props_spans = [];
-            if (position.func.str !== '') {
-                props_spans.push({str: position.func.str, tooltip: position.func.desc});
-            }
-            if (position.control.str !== '') {
-                props_spans.push({str: position.control.str, tooltip: position.control.desc});
-            }
-            if (position.p_control.str !== '') {
-                props_spans.push({str: position.p_control.str, tooltip: position.p_control.desc});
-            }
-            return props_spans;
-        },
-        getSchemataPositionCnt(schema) {
-            return schema.positions.length;
-        },
-        getRealisationDescriptions(schema) {
-            const alternationDescList = [];
-            if(this.alternations) {
-                const curr_alternations = this.alternations[this.frame.id][schema.id];
-                const curr_realisation_descriptions = this.realisation_descriptions[this.frame.id][schema.id];
-                for (let i in curr_alternations) {
-                    alternationDescList.push(curr_realisation_descriptions[i]);
-                }
-            }
-            return '<i>' + alternationDescList + '</i>';
-        },
-        getPhraseCss(schema, position) {
-            const styles = [];
-            if(this.alternations) {
-                const argumentIdSet = new Set();
-
-                const curr_alternations = this.alternations[this.frame.id][schema.id];
-                for (let i in curr_alternations) {
-                    const alternation = curr_alternations[i]
-
-                    for (let arg_id in alternation){
-                        const phrase_ids = alternation[arg_id];
-                        phrase_ids.forEach(phrase_id => {
-                            if (phrase_id.startsWith(position.id)) {
-                                argumentIdSet.add(arg_id);
-                            }
-                        });
-                    }
-                }
-
-                argumentIdSet.forEach(argumentId => {
-                    const argument = this.frame.arguments.find(arg => argumentId.endsWith(arg.argument_id));
-                    const role = argument.role;
-                    styles.push(role);
-                });
-
-            }
-            const selectedExampleFrameArguments = this.selectedExamples && this.selectedExamples.length > 0 ? new Set(this.selectedExamples.map(e => e.positions).flat()) : null;
-
-            if(selectedExampleFrameArguments != null) {
-                styles.push(selectedExampleFrameArguments.has(position.id) ? 'example-yes' : 'example-no');
-            }
-            return styles;
-        },
-        getPositionPhrases(schema, position) {
-            const phrases = [];
-            if(this.alternations) {
-                const curr_alternations = this.alternations[this.frame.id][schema.id];
-                for (let i in curr_alternations) {
-                    const alternation = curr_alternations[i]
-
-                    for (let arg_id in alternation){
-                        const phrase_ids = alternation[arg_id];
-                        phrase_ids.forEach(phrase_id => {
-                            if (phrase_id.startsWith(position.id)) {
-                                phrases.push(this.realisation_phrases[arg_id][i][phrase_id]);
-                            }
-                        });
-                    }
-                }
-            }
-            return phrases;
-        },
-        selectSchema(schema) {
-            schema.selected = !schema.selected;
-            const selected = [];
-            this.subentries.forEach(subentry => {
-                subentry.schemata.forEach(s => {
-                    if(s.selected) {
-                        selected.push(s);
-                    }
-                });
-            });
-            this.$emit('schemataSelected', selected);
-        }
-    },
-    mounted () {
-        this.img_prefix = window.STATIC_URL;
-    },
-    template: `
-    <div>
-      <template v-for="subentry in subentries">
-        <div class="subentry">
-          <div class="mb-1 sticky-top"><h5 class="bg-dark text-light p-1">{{subentry.str}}</h5></div>
-          <template v-for="schema in subentry.schemata">
-            <div class="schema mb-3" 
-                v-if="alternations[this.frame.id][schema.id]"
-                @mouseenter="schema.hover=true"
-                @mouseleave="schema.hover=false"
-                @click="selectSchema(schema)"
-                :class="(schema.selected ? 'active' : schema.hover ? 'bg-highlight' : '')"
-            >
-              <table class="table m-0 table-borderless border border-secondary text-dark">
-                  <tbody>
-                      <tr class="opinion-row">
-                          <th scope="row" class="py-2 px-1 text-secondary" style="width: 3em;">Opinia</th>
-                          <td class="opinion-cell py-2 px-1" :colspan="getSchemataPositionCnt(schema)"><img
-                                  :src="img_prefix + 'entries/img/' + schema.opinion_key + '.svg'" width="12"
-                                  height="12" :alt="schema.opinion"> {{schema.opinion}}
-                          </td>
-                      </tr>
-                      
-                      <tr>
-                          <th scope="row" class="py-2 px-1 text-secondary">Funkcja</th>
-                          
-                          <td class="position py-2 px-1 border-top border-left border-secondary"
-                            v-for="position in schema.positions">
-                            <div v-for="f in getFunctions(position)" class="phrase px-1 py-2">
-                                <info-tooltip :text="f.tooltip" :visibleText="f.str"/>
-                            </div>
-                          </td>
-                          
-                      </tr>
-                      
-                      <tr class="realisation-description">
-                          <td class="px-1 py-2" :colspan="getSchemataPositionCnt(schema)" v-html="getRealisationDescriptions(schema)"></td>
-                      </tr>
-                      <tr class="phrase-types alt-0">
-                          <th scope="row" class="py-0 px-1 text-secondary">Typy fraz</th>
-                          <td v-for="position in schema.positions" class="px-0 py-0 border-top border-left border-secondary">
-                              <div v-for="phrase in position.phrases" class="phrase px-1 py-2"
-                                      :class="getPhraseCss(schema, position)">
-                                      <info-tooltip :text="phrase.desc" :visibleText="phrase.str"/>
-                              </div>
-                              <div v-for="phrase in getPositionPhrases(schema, position)" class="realisation-phrase px-1 py-2"><i>{{phrase}}</i></div>
-                          </td>
-                      </tr>
-                  </tbody>
-              </table>
-          </div>
-          </template>
-      </div>
-      </template>
-  </div>
-  `
-}
-
-
diff --git a/entries/templates/entries.html b/entries/templates/entries.html
index 8c164780711889ef776566e510df5131af86c683..b7ecd7826c414921a2c3a228477a19ecae2d09fe 100644
--- a/entries/templates/entries.html
+++ b/entries/templates/entries.html
@@ -16,6 +16,7 @@
     <script type="module" src="{% static 'entries/js/entries_index.js' %}"></script>
 {% endblock %}
 
-{% block content %}
+{% block modals %}
+    {{ block.super }}
     <div id="lexical-unit-notes-template" class="d-none">{% include 'notes.html' %}</div>
 {% endblock %}
diff --git a/entries/templates/unification.html b/entries/templates/unification.html
index 91abfafe2745bd5bb6275d93e3dd65de76502506..1f48626e3f3c907249bd095590db6204f863300c 100644
--- a/entries/templates/unification.html
+++ b/entries/templates/unification.html
@@ -20,6 +20,7 @@
     <script type="module" src="{% static 'entries/js/unification_index.js' %}"></script>
 {% endblock %}
 
-{% block content %}
+{% block modals %}
+    {{ block.super }}
     <div id="lexical-unit-notes-template" class="d-none">{% include 'notes.html' %}</div>
 {% endblock %}
diff --git a/entries/views.py b/entries/views.py
index 947632ab4f60006f32437d853d88d0a2290eead1..075096de395fa27c66541a5d3f9ce30e9783c9a4 100644
--- a/entries/views.py
+++ b/entries/views.py
@@ -67,6 +67,7 @@ def entries(request):
         request,
         'entries.html',
         {
+            'is_vue_app': True,
             'entries_form' : EntryForm(),
             'frames_form' : FrameFormFactory.get_form(as_subform=False),
             'schemata_form' : SchemaFormFactory.get_form(as_subform=False)
@@ -79,6 +80,7 @@ def unification(request):
         request,
         'unification.html',
         {
+            'is_vue_app': True,
             'unified_frame_id': request.GET.get("unified_frame_id"),
             'entries_form' : EntryForm(),
             'frames_form': FrameFormFactory.get_form(as_subform=False),
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e5f945f81c74dd1ae38da8a05b91179cc89c4a19..4cbe12a114a7e7b03fa973823e298f9234baec9e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,5 @@
 <template>
-    <div class="row m-0 p-0 h-100" v-if="this.$route.name !== '404'">
-      <div class="container bg-light">
-        <RouterView />
-      </div>
-    </div>
+  <div class="row h-100 bg-light" v-if="this.$route.name !== '404'">
+    <RouterView />
+  </div>
 </template>
diff --git a/frontend/src/components/Entries.vue b/frontend/src/components/Entries.vue
deleted file mode 100644
index 3dc2db658d0f8fc56025d6710484f6cbf9e3b496..0000000000000000000000000000000000000000
--- a/frontend/src/components/Entries.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  Entries
-</template>
diff --git a/frontend/src/components/shared/InfoTooltip.vue b/frontend/src/components/shared/InfoTooltip.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f16137649d74d8ae6d909fdf7bda77f8e93af098
--- /dev/null
+++ b/frontend/src/components/shared/InfoTooltip.vue
@@ -0,0 +1,34 @@
+<script>
+  export default {
+    props: {
+      text: String,
+      visibleText: String
+    },
+    data () {
+      return {
+        iconUrl: window.STATIC_URL + 'common/img/info.svg'
+      }
+    },
+    computed: {
+      quotedText () {
+        return this.text.replace(/"/g, '&quot;');
+      }
+    },
+    mounted () {
+      $(this.$refs.tooltip).tooltip();
+    },
+  }
+</script>
+
+<template>
+  <span
+    data-toggle="tooltip"
+    data-placement="bottom"
+    data-html="true"
+    :title="quotedText"
+    ref="tooltip"
+  >
+    <img v-if="!visibleText" :src="iconUrl" alt="info" width="14" height="14" />
+    <span v-else>{{visibleText}}</span>
+  </span>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/unification/Entries/Entries.vue b/frontend/src/components/unification/Entries/Entries.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fde7135e908da3dc675a26fe10c071ad13732bfc
--- /dev/null
+++ b/frontend/src/components/unification/Entries/Entries.vue
@@ -0,0 +1,76 @@
+<script>
+import EntriesList from "./EntriesList.vue";
+import LexicalUnitDisplay from "../shared/LexicalUnitDisplay.vue";
+
+export default {
+  data () {
+    return {
+      entryId: null,
+      lexicalUnitId: null,
+      unifiedFrameId: null,
+      isEdit: false,
+      gettext: window.gettext,
+      key: null,
+      unificationEntriesListRefreshKey: 1
+    };
+  },
+  components: {EntriesList, LexicalUnitDisplay},
+  methods: {
+    lexicalUnitSelected (entryId, lexicalUnitId) {
+      this.entryId = entryId;
+      this.lexicalUnitId = lexicalUnitId;
+      this.key = lexicalUnitId;
+      this.isEdit = false;
+    },
+    unifiedFrameSelected (unifiedFrameId) {
+      this.unifiedFrameId = unifiedFrameId;
+      this.isEdit = true;
+    },
+    refreshEntriesList() {
+      this.unificationEntriesListRefreshKey++;
+    },
+    refresh () {
+      this.key = null;
+      setTimeout(() => { this.key = this.lexicalUnitId; }, 0);
+    },
+  },
+  mounted () {
+    $('#entries-list').length && Split(['#entries-list', '#entry-display'], {
+      sizes: [20, 80],
+      gutterSize: 4,
+      minSize: 10,
+      elementStyle: (dimension, size, gutterSize) => {
+        return {
+          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+        }
+      },
+    });
+  },
+};
+</script>
+
+<template>
+  <div id="entries-list" class="col h-100 w-100 pr-0 overflow-hidden">
+    <div id="entries-list-div" class="h-100 w-100 overflow-hidden">
+      <entries-list 
+        :unificationEntriesListRefreshKey="unificationEntriesListRefreshKey" 
+        :initialLexicalUnitId="lexicalUnitId" 
+        :initialEntryId="entryId" 
+        @lexical-unit-selected="lexicalUnitSelected" />
+    </div>
+  </div>
+  <div id="entry-display" class="col h-100 p-0 overflow-hidden">
+    <div class="w-100 h-100">
+      <div id="right-pane" class="col w-100 h-100 p-0">
+        <lexical-unit-display
+          v-if="lexicalUnitId"
+          :key="key"
+          :entryId="entryId"
+          :lexicalUnitId="lexicalUnitId"
+          @refresh="refresh"
+          @refresh-entries-list="refreshEntriesList"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/unification/Entries/EntriesList.vue b/frontend/src/components/unification/Entries/EntriesList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..41d3175194ed9632185fdc9cc207e52b7fa32acb
--- /dev/null
+++ b/frontend/src/components/unification/Entries/EntriesList.vue
@@ -0,0 +1,51 @@
+<script>
+  export default {
+    props: {
+        initialLexicalUnitId: Number,
+        initialEntryId: Number,
+        unificationEntriesListRefreshKey: Number,
+    },
+    watch: {
+      unificationEntriesListRefreshKey() {
+        // TODO: reload data and click in selected row
+        // this.datatableObject.ajax.reload();
+        setup_entries_list({
+            table: this.$refs.table,
+            lexicalUnitSelected: (entryId, lexicalUnitId) => { this.$emit('lexicalUnitSelected', entryId, lexicalUnitId); },
+            selectEntryId: this.initialEntryId,
+            secondarySelectEntryId: this.initialLexicalUnitId,
+        });
+      }
+    },
+    data () {
+      return {
+        gettext: window.gettext,
+        canViewAssignment: has_permission("users.view_assignment"),
+      }
+    },
+    emits: ['lexicalUnitSelected'],
+    mounted () {
+      setup_entries_list({
+        table: this.$refs.table,
+        lexicalUnitSelected: (entryId, lexicalUnitId) => { this.$emit('lexicalUnitSelected', entryId, lexicalUnitId); },
+        selectEntryId: this.initialEntryId
+      });
+    },
+  };
+</script>
+
+<template>
+  <table ref="table" class="table table-sm text-dark">
+    <thead>
+      <tr>
+        <th class="p-1">{{ gettext('Lemat') }}</th>
+        <th class="p-1">{{ gettext('Część mowy') }}</th>
+        <th class="p-1">{{ gettext('Do pobrania') }}</th>
+        <th v-if="canViewAssignment" class="p-1">{{ gettext('Semantyk') }}</th>
+        <th v-else class="p-1">{{ gettext('Moje (w opracowaniu)') }}</th>
+      </tr>
+    </thead>
+    <tbody id="entries">
+    </tbody>
+  </table>
+</template>
diff --git a/frontend/src/components/Unification.vue b/frontend/src/components/unification/Unification/Unification.vue
similarity index 100%
rename from frontend/src/components/Unification.vue
rename to frontend/src/components/unification/Unification/Unification.vue
diff --git a/entries/static/entries/js/components/LexicalUnitDisplay.js b/frontend/src/components/unification/shared/LexicalUnitDisplay.vue
similarity index 98%
rename from entries/static/entries/js/components/LexicalUnitDisplay.js
rename to frontend/src/components/unification/shared/LexicalUnitDisplay.vue
index d4d5244665f9e649fcac216ef6831e4b8d96b527..1fcd3094dd1ea1ecc30fc838d004abd157d34b36 100644
--- a/entries/static/entries/js/components/LexicalUnitDisplay.js
+++ b/frontend/src/components/unification/shared/LexicalUnitDisplay.vue
@@ -1,9 +1,9 @@
-import Spinner from './Spinner.js';
-import SemanticsSchemataComponent from "./frame-components/SemanticsSchemataComponent.js";
-import ExamplesComponent from "./frame-components/ExamplesComponent.js";
-import SlowalFrameComponent from "./frame-components/SlowalFrameComponent.js";
-import MeaningComponent from "./frame-components/MeaningComponent.js";
-
+<script>
+import Spinner from '/src/components/shared/Spinner.vue';
+import SemanticsSchemataComponent from "./frame-components/SemanticsSchemataComponent.vue";
+import ExamplesComponent from "./frame-components/ExamplesComponent.vue";
+import SlowalFrameComponent from "./frame-components/SlowalFrameComponent.vue";
+import MeaningComponent from "./frame-components/MeaningComponent.vue";
 
 export default {
   components: { Spinner, SemanticsSchemataComponent, ExamplesComponent, SlowalFrameComponent, MeaningComponent },
@@ -184,7 +184,10 @@ export default {
     });
     this.setup();
   },
-  template: `
+};
+</script>
+
+<template>
     <div class="col p-0 h-100 overflow-hidden">
       <div id="main-frames-pane" class="row">
         <div class="col h-100 pl-3 pr-1 pt-0 pb-2 overflow-auto" id="semantics-frames-pane">
@@ -286,5 +289,4 @@ export default {
         </div>
       </div>
     </div>
-  `
-}
+</template>
diff --git a/frontend/src/components/unification/shared/frame-components/ExamplesComponent.vue b/frontend/src/components/unification/shared/frame-components/ExamplesComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6e9b4ea1ec4e5cf550564c6d16f83741c4f167cd
--- /dev/null
+++ b/frontend/src/components/unification/shared/frame-components/ExamplesComponent.vue
@@ -0,0 +1,90 @@
+<script>
+import InfoTooltip from "/src/components/shared/InfoTooltip.vue";
+
+export default {
+  props: {
+    examples: Object,
+    frame: Object,
+    frame_arguments: Object,
+    frame_arguments_or_type: null,
+    schemas: Object,
+    lus: Object,
+  },
+  components: { InfoTooltip },
+  data() {
+    return {
+      img_prefix: String
+    }
+  },
+  emits: ['exampleSelected'],
+  methods: {
+    getExamples() {
+      let ret = this.examples;
+      if (this.schemas && this.schemas.length > 0) {
+        // ograniczone do schematu
+        ret = ret.filter(e => this.schemas.every(a => e.schema_ids.includes(parseInt(a.id))));
+      }
+      if (this.frame_arguments && this.frame_arguments.length > 0) {
+        // ograniczone do argumentu ramy
+        if (this.frame_arguments_or_type) {
+          ret = ret.filter(e => this.frame_arguments.some(a => e.argument_ids.includes(a.id)));
+        } else {
+          ret = ret.filter(e => this.frame_arguments.every(a => e.argument_ids.includes(a.id)));
+        }
+      }
+      if (this.frame) {
+        ret = ret.filter(e => e.frame_ids.includes(this.frame.id));
+      }
+      if (this.lus && this.lus.length > 0) {
+        ret = ret.filter(e => this.lus.every(lu => e.lu_ids.includes(lu.id)));
+      }
+      return ret;
+    },
+    getSchemaStr(schema) {
+      return schema.positions.map(e => e.phrases.map(p => p.str).join(",")).join('|');
+    },
+    selectExample(example) {
+      example.selected = !example.selected;
+      this.$emit('exampleSelected', this.examples.filter(example => example.selected));
+    }
+  },
+  mounted() {
+    this.img_prefix = window.STATIC_URL;
+  },
+}
+</script>
+
+<template>
+  <table id="semantics-examples" v-if="getExamples().length > 0" class="table table-sm table-hover" style="">
+    <thead>
+      <tr>
+        <th scope="col">Przykład
+          <i v-if="frame_arguments" v-for="frame_argument in frame_arguments">
+            <span class="example-role"> {{ ' ' }}
+              <span :class="frame_argument.role">{{ frame_argument.role }}</span>
+            </span>
+          </i>
+          <i v-if="lus" v-for="lu in lus">{{ ' ' + lu.str }}</i>
+          <i v-if="schemas" v-for="schema in schemas">{{ ' ' + getSchemaStr(schema) }}</i>
+        </th>
+        <th scope="col">Źródło</th>
+        <th scope="col">Opinia</th>
+      </tr>
+    </thead>
+    <tbody id="semantics-examples-list">
+      <template v-for="example in getExamples()">
+        <tr class="example" @mouseenter="example.hover = true" @mouseleave="example.hover = false"
+          @click.stop="selectExample(example)"
+          :class="example.selected ? 'active table-primary' : example.hover ? 'bg-highlight' : ''">
+          <td class="py-1">
+            {{ example.sentence }}
+            <info-tooltip v-if="example.note" :text="example.note" />
+          </td>
+          <td class="py-1">{{ example.source }}</td>
+          <td class="py-1">{{ example.opinion }}</td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+  <p v-else class="mx-1 my-1" id="semantics-no-examples" style="display: none;">Brak przykładów</p>
+</template>
\ No newline at end of file
diff --git a/entries/static/entries/js/components/frame-components/MeaningComponent.js b/frontend/src/components/unification/shared/frame-components/MeaningComponent.vue
similarity index 84%
rename from entries/static/entries/js/components/frame-components/MeaningComponent.js
rename to frontend/src/components/unification/shared/frame-components/MeaningComponent.vue
index d497ec18e0fef485cd0b5174434eea6762305579..0576d023cf163864af59f8cbe4b0962419ae05f3 100644
--- a/entries/static/entries/js/components/frame-components/MeaningComponent.js
+++ b/frontend/src/components/unification/shared/frame-components/MeaningComponent.vue
@@ -1,4 +1,5 @@
-import InfoTooltip from "../InfoTooltip.js";
+<script>
+import InfoTooltip from "/src/components/shared/InfoTooltip.vue";
 
 export default {
   props: {
@@ -6,14 +7,14 @@ export default {
     selectedExamples: Object
   },
   emits: ['meaningLuSelected'],
-  data () {
+  data() {
     return {
       iconUrl: window.STATIC_URL + 'common/img/ext-link.svg'
     }
   },
   components: {InfoTooltip},
   methods: {
-    getTooltipStr (lu) {
+    getTooltipStr(lu) {
       const tooltip = [];
       if (lu.definition) {
         tooltip.push(lu.definition);
@@ -31,20 +32,22 @@ export default {
       this.$emit('meaningLuSelected', this.lexicalUnits.filter(lexicalUnit => lexicalUnit.selected));
     }
   },
-  template: `
+};
+</script>
+
+<template>
     <p class="mb-1">
         <template v-for="lexicalUnit in lexicalUnits">
             <span
                 @mouseenter="lexicalUnit.hover=true"
                 @mouseleave="lexicalUnit.hover=false"
                 @click.stop="select(lexicalUnit)"
-                :class="lexicalUnit.selected ? 'entry-meaning active' : lexicalUnit.hover ? 'entry-meaning active' : ''" 
-                class="lexical-unit entry-meaning" style="padding-left: 4px; padding-right: 4px;">{{lexicalUnit.str}}</span> 
+                :class="lexicalUnit.selected ? 'entry-meaning active' : lexicalUnit.hover ? 'entry-meaning active' : ''"
+                class="lexical-unit entry-meaning" style="padding-left: 4px; padding-right: 4px;">{{lexicalUnit.str}}</span>
             <info-tooltip v-if="getTooltipStr(lexicalUnit)" :text="getTooltipStr(lexicalUnit)"/>
             <a v-if="lexicalUnit.url" class="lu-plwn" style="padding-left: 4px;" :href="lexicalUnit.url" target="_blank">
                 <img :src="iconUrl" alt="external link" height="14">
             </a>
         </template>
     </p>
-  `
-}
+</template>
diff --git a/frontend/src/components/unification/shared/frame-components/SemanticsSchemataComponent.vue b/frontend/src/components/unification/shared/frame-components/SemanticsSchemataComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce3604aafa0603f899bb618a450a3cb062b9e614
--- /dev/null
+++ b/frontend/src/components/unification/shared/frame-components/SemanticsSchemataComponent.vue
@@ -0,0 +1,174 @@
+<script>
+import InfoTooltip from "/src/components/shared/InfoTooltip.vue";
+
+export default {
+  props: {
+    subentries: Object,
+    frame: Object,
+    alternations: Object,
+    realisation_phrases: Object,
+    realisation_descriptions: Object,
+    selectedExamples: Object
+  },
+  components: {InfoTooltip},
+  emits: ['schemataSelected'],
+  data() {
+    return {
+      img_prefix: String
+    }
+  },
+  methods: {
+    getFunctions(position) {
+      const props_spans = [];
+      if (position.func.str !== '') {
+        props_spans.push({str: position.func.str, tooltip: position.func.desc});
+      }
+      if (position.control.str !== '') {
+        props_spans.push({str: position.control.str, tooltip: position.control.desc});
+      }
+      if (position.p_control.str !== '') {
+        props_spans.push({str: position.p_control.str, tooltip: position.p_control.desc});
+      }
+      return props_spans;
+    },
+    getSchemataPositionCnt(schema) {
+      return schema.positions.length;
+    },
+    getRealisationDescriptions(schema) {
+      const alternationDescList = [];
+      if (this.alternations) {
+        const curr_alternations = this.alternations[this.frame.id][schema.id];
+        const curr_realisation_descriptions = this.realisation_descriptions[this.frame.id][schema.id];
+        for (let i in curr_alternations) {
+          alternationDescList.push(curr_realisation_descriptions[i]);
+        }
+      }
+      return '<i>' + alternationDescList + '</i>';
+    },
+    getPhraseCss(schema, position) {
+      const styles = [];
+      if (this.alternations) {
+        const argumentIdSet = new Set();
+
+        const curr_alternations = this.alternations[this.frame.id][schema.id];
+        for (let i in curr_alternations) {
+          const alternation = curr_alternations[i]
+
+          for (let arg_id in alternation) {
+            const phrase_ids = alternation[arg_id];
+            phrase_ids.forEach(phrase_id => {
+              if (phrase_id.startsWith(position.id)) {
+                argumentIdSet.add(arg_id);
+              }
+            });
+          }
+        }
+
+        argumentIdSet.forEach(argumentId => {
+          const argument = this.frame.arguments.find(arg => argumentId.endsWith(arg.argument_id));
+          const role = argument.role;
+          styles.push(role);
+        });
+
+      }
+      const selectedExampleFrameArguments = this.selectedExamples && this.selectedExamples.length > 0 ? new Set(this.selectedExamples.map(e => e.positions).flat()) : null;
+
+      if (selectedExampleFrameArguments != null) {
+        styles.push(selectedExampleFrameArguments.has(position.id) ? 'example-yes' : 'example-no');
+      }
+      return styles;
+    },
+    getPositionPhrases(schema, position) {
+      const phrases = [];
+      if (this.alternations) {
+        const curr_alternations = this.alternations[this.frame.id][schema.id];
+        for (let i in curr_alternations) {
+          const alternation = curr_alternations[i]
+
+          for (let arg_id in alternation) {
+            const phrase_ids = alternation[arg_id];
+            phrase_ids.forEach(phrase_id => {
+              if (phrase_id.startsWith(position.id)) {
+                phrases.push(this.realisation_phrases[arg_id][i][phrase_id]);
+              }
+            });
+          }
+        }
+      }
+      return phrases;
+    },
+    selectSchema(schema) {
+      schema.selected = !schema.selected;
+      const selected = [];
+      this.subentries.forEach(subentry => {
+        subentry.schemata.forEach(s => {
+          if (s.selected) {
+            selected.push(s);
+          }
+        });
+      });
+      this.$emit('schemataSelected', selected);
+    }
+  },
+  mounted() {
+    this.img_prefix = window.STATIC_URL;
+  },
+};
+</script>
+
+<template>
+    <div>
+      <template v-for="subentry in subentries">
+        <div class="subentry">
+          <div class="mb-1 sticky-top"><h5 class="bg-dark text-light p-1">{{subentry.str}}</h5></div>
+          <template v-for="schema in subentry.schemata">
+            <div class="schema mb-3" 
+                v-if="alternations[this.frame.id][schema.id]"
+                @mouseenter="schema.hover=true"
+                @mouseleave="schema.hover=false"
+                @click="selectSchema(schema)"
+                :class="(schema.selected ? 'active' : schema.hover ? 'bg-highlight' : '')"
+            >
+              <table class="table m-0 table-borderless border border-secondary text-dark">
+                  <tbody>
+                      <tr class="opinion-row">
+                          <th scope="row" class="py-2 px-1 text-secondary" style="width: 3em;">Opinia</th>
+                          <td class="opinion-cell py-2 px-1" :colspan="getSchemataPositionCnt(schema)"><img
+                                  :src="img_prefix + 'entries/img/' + schema.opinion_key + '.svg'" width="12"
+                                  height="12" :alt="schema.opinion"> {{schema.opinion}}
+                          </td>
+                      </tr>
+                      
+                      <tr>
+                          <th scope="row" class="py-2 px-1 text-secondary">Funkcja</th>
+                          
+                          <td class="position py-2 px-1 border-top border-left border-secondary"
+                            v-for="position in schema.positions">
+                            <div v-for="f in getFunctions(position)" class="phrase px-1 py-2">
+                                <info-tooltip :text="f.tooltip" :visibleText="f.str"/>
+                            </div>
+                          </td>
+                          
+                      </tr>
+                      
+                      <tr class="realisation-description">
+                          <td class="px-1 py-2" :colspan="getSchemataPositionCnt(schema)" v-html="getRealisationDescriptions(schema)"></td>
+                      </tr>
+                      <tr class="phrase-types alt-0">
+                          <th scope="row" class="py-0 px-1 text-secondary">Typy fraz</th>
+                          <td v-for="position in schema.positions" class="px-0 py-0 border-top border-left border-secondary">
+                              <div v-for="phrase in position.phrases" class="phrase px-1 py-2"
+                                      :class="getPhraseCss(schema, position)">
+                                      <info-tooltip :text="phrase.desc" :visibleText="phrase.str"/>
+                              </div>
+                              <div v-for="phrase in getPositionPhrases(schema, position)" class="realisation-phrase px-1 py-2"><i>{{phrase}}</i></div>
+                          </td>
+                      </tr>
+                  </tbody>
+              </table>
+          </div>
+          </template>
+      </div>
+      </template>
+    </div>
+</template>
diff --git a/entries/static/entries/js/components/frame-components/SlowalFrameComponent.js b/frontend/src/components/unification/shared/frame-components/SlowalFrameComponent.vue
similarity index 60%
rename from entries/static/entries/js/components/frame-components/SlowalFrameComponent.js
rename to frontend/src/components/unification/shared/frame-components/SlowalFrameComponent.vue
index f7fec2a7420604ef9d85479e6ce01fa8b9164dce..12a62831f13702a151b9709ae32bed7b59e9f354 100644
--- a/entries/static/entries/js/components/frame-components/SlowalFrameComponent.js
+++ b/frontend/src/components/unification/shared/frame-components/SlowalFrameComponent.vue
@@ -1,43 +1,47 @@
-import InfoTooltip from "../InfoTooltip.js";
+<script>
+import InfoTooltip from "/src/components/shared/InfoTooltip.vue";
 
 export default {
-    props: {
-        frame: Object,
-        selectedExamples: Object
+  props: {
+    frame: Object,
+    selectedExamples: Object
+  },
+  components: {InfoTooltip},
+  emits: ['frameSelectionChanged'],
+  data() {
+    return {
+      img_prefix: String,
+    }
+  },
+  methods: {
+    getTitleHTML() {
+      const ret = window.lexical_units2dom(this.frame.lexical_units);
+      return ret;
     },
-    components: {InfoTooltip},
-    emits: ['frameSelectionChanged'],
-    data() {
-        return {
-            img_prefix: String,
-        }
+    getOpinionHTML() {
+      return window.make_opinion_row(this.frame, this.frame.arguments.length, 3).outerHTML;
     },
-    methods: {
-        getTitleHTML() {
-            const ret = window.lexical_units2dom(this.frame.lexical_units);
-            return ret;
-        },
-        getOpinionHTML() {
-            return window.make_opinion_row(this.frame, this.frame.arguments.length, 3).outerHTML;
-        },
-        getArguments() {
-            return this.frame.arguments;
-        },
-        selectArgument(argument) {
-            argument.selected = !argument.selected;
-            const selectedArguments = this.frame.arguments.filter(argument => argument.selected)
-            this.$emit('frameSelectionChanged', selectedArguments);
-        },
-        computeArgumentCSS(argument) {
-            const selectedExampleFrameArguments = this.selectedExamples && this.selectedExamples.length > 0 ? new Set(this.selectedExamples.map(e => e.argument_ids).flat()) : null;
-            return argument.role + ' ' + (argument.selected ? 'active' : argument.hover ? 'bg-highlight' : '')
-            + (selectedExampleFrameArguments != null ? selectedExampleFrameArguments.has(argument.id) ? 'example-yes' : 'example-no' : '');
-        }
+    getArguments() {
+      return this.frame.arguments;
     },
-    mounted () {
-        this.img_prefix = window.STATIC_URL;
+    selectArgument(argument) {
+      argument.selected = !argument.selected;
+      const selectedArguments = this.frame.arguments.filter(argument => argument.selected)
+      this.$emit('frameSelectionChanged', selectedArguments);
     },
-    template: `
+    computeArgumentCSS(argument) {
+      const selectedExampleFrameArguments = this.selectedExamples && this.selectedExamples.length > 0 ? new Set(this.selectedExamples.map(e => e.argument_ids).flat()) : null;
+      return argument.role + ' ' + (argument.selected ? 'active' : argument.hover ? 'bg-highlight' : '')
+          + (selectedExampleFrameArguments != null ? selectedExampleFrameArguments.has(argument.id) ? 'example-yes' : 'example-no' : '');
+    }
+  },
+  mounted() {
+    this.img_prefix = window.STATIC_URL;
+  },
+};
+</script>
+
+<template>
         <table class="table m-0 table-borderless border border-secondary text-dark">
             <tbody>
                 <tr class="opinion-row" v-html="getOpinionHTML()">
@@ -77,7 +81,4 @@ export default {
                 </tr>
             </tbody>
         </table>
-  `
-}
-
-
+</template>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index eb8f249b7a1f075cf3f98c3d0ae663d8144af065..309a1cbddbf44f7c4f33072a9279bab2e5f0154e 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,8 +3,8 @@ import './style.css'
 import App from './App.vue'
 import { createRouter, createWebHistory } from "vue-router";
 
-import Entries from "./components/Entries.vue";
-import Unification from "./components/Unification.vue";
+import Entries from "./components/unification/Entries/Entries.vue";
+import Unification from "./components/unification/Unification/Unification.vue";
 
 const router = createRouter({
   history: createWebHistory(),
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 5ab96ec10304479c1e992056f7af78d487fab5c7..2c0cdf08f68fc0441cf964e57ad702a951325775 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -5,6 +5,11 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '/src': resolve(__dirname, './src'),
+    },
+  },
   base: '/static/',
   server: {
     host: '0.0.0.0',
diff --git a/phrase_expansions/management/commands/import_expansions.py b/phrase_expansions/management/commands/import_expansions.py
index ebf2c08fbd24a55da7b5dbe4b5a11f7cd3a447c2..85b3ca7cdf7430a2c1b4c072aaec2a9ec53a8117 100644
--- a/phrase_expansions/management/commands/import_expansions.py
+++ b/phrase_expansions/management/commands/import_expansions.py
@@ -38,8 +38,8 @@ def import_expansions():
     
     expansions = parser.getContentHandler()._expansions
     
-    for cls in (ExpansionOpinion, PhraseExpansion, ExpansionPosition, ExpansionPhrase, ExpansionPhraseDescription):
-        cls.objects.all().delete()
+    # for cls in (ExpansionOpinion, PhraseExpansion, ExpansionPosition, ExpansionPhrase, ExpansionPhraseDescription):
+        # cls.objects.all().delete()
     
     opinions = [(50, u'col'), (40, u'dat'), (20, u'unc'), (10, u'cer'),]
     for pri, short in opinions:
diff --git a/syntax/management/commands/import_tei.py b/syntax/management/commands/import_tei.py
index 0f78622ae773bd7864a4b6c196514ae3c3ea6103..e936e5d538f7ff23613928a4b4fbad37b7732119 100644
--- a/syntax/management/commands/import_tei.py
+++ b/syntax/management/commands/import_tei.py
@@ -36,7 +36,7 @@ def import_tei():
     #xml_file = os.path.join(BASE_DIR, 'data', 'walenty', 'walenty_20200926_smaller.xml')
     xml_file = os.path.join(BASE_DIR, 'data', 'walenty', 'walenty_20210913_smaller.xml')
     # xml_file = os.path.join(BASE_DIR, 'data', 'walenty', 'walenty_20210913_smallest.xml')
-    # xml_file = os.path.join(BASE_DIR, 'data', 'walenty', 'walenty_20210913.xml')
+    xml_file = os.path.join(BASE_DIR, 'data', 'walenty', 'walenty_20210913.xml')
 
 
     xml_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), xml_file)