diff --git a/README.md b/README.md
index 0d6303fe21b68d32b35eba69c0cc3c42c89d3a80..461b1d9e176257043de0495921eb727c170d0973 100644
--- a/README.md
+++ b/README.md
@@ -17,3 +17,11 @@ In order to run the development environment locally:
 Whenever you need to establish an interactive bash session in the running applicaiton container, execute:
 
         ./docker/scripts/docker-bash
+
+## Deploying to production
+
+In order to build the frontend Vue.js application for production execute the following command:
+
+      docker-compose run frontend yarn build
+
+Compiled application files will be located in `frontend/dist/`.
diff --git a/entries/static/entries/js/unification.js b/entries/static/entries/js/unification.js
deleted file mode 100644
index 9dd53ad6cff611cdac66f4a4db47609d163dc3e7..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/unification.js
+++ /dev/null
@@ -1,73 +0,0 @@
-"use strict";
-
-
-function slowal_frames2selecional_preferencies(unified_frame, slowal_frames) {
-    const unified_argument_2_selecional_preferencies = {}
-    for (let i in unified_frame.slowal_frame_mapping) {
-        const slowal_frame_mapping = unified_frame.slowal_frame_mapping[i];
-        let slowal_frame = slowal_frames.find(o => o.id === slowal_frame_mapping.slowal_frame_id);
-        for (let j in slowal_frame_mapping.slowal_frame_argument_mapping) {
-            const slowal_frame_argument_mapping = slowal_frame_mapping.slowal_frame_argument_mapping[j];
-
-            let slowal_frame_argument = slowal_frame.arguments.find(o => o.argument_id === slowal_frame_argument_mapping.slowal_frame_agrument_id);
-            let unified_frame_argument = unified_frame.arguments.find(o => o.id === slowal_frame_argument_mapping.unified_frame_agrument_id);
-
-            const unified_frame_argument_preferences = new Set(unified_frame_argument.preferences.map(preference => preference.str));
-
-            let preferenceEntry = unified_argument_2_selecional_preferencies[slowal_frame_argument_mapping.unified_frame_agrument_id];
-            if(preferenceEntry == null) {
-                preferenceEntry = [];
-                unified_argument_2_selecional_preferencies[slowal_frame_argument_mapping.unified_frame_agrument_id] = preferenceEntry
-            }
-            preferenceEntry.push.apply(preferenceEntry, slowal_frame_argument.preferences.filter(preference => !unified_frame_argument_preferences.has(preference.str)))
-        }
-    }
-    return unified_argument_2_selecional_preferencies;
-}
-
-
-function fulfill_slowal_frames_arguments_with_empty_elems(unified_frame, slowal_frames) {
-    for (let i in unified_frame.slowal_frame_mapping) {
-        const slowal_frame_mapping = unified_frame.slowal_frame_mapping[i];
-        let slowal_frame = slowal_frames.find(o => o.id === slowal_frame_mapping.slowal_frame_id);
-        let new_slowal_frame_arguments = [];
-        for (let j in unified_frame.arguments) {
-            const unified_frame_argument = unified_frame.arguments[j];
-
-            let unified_frame_argument_mapping = slowal_frame_mapping.slowal_frame_argument_mapping.find(o => o.unified_frame_agrument_id === unified_frame_argument.id);
-
-            let slowal_frame_argument = null;
-
-            if(unified_frame_argument_mapping == null) {
-                slowal_frame_argument = {
-                    'str'         : 'Empty',
-                    'id'          : slowal_frame.id+'-_'+(unified_frame_argument.id),
-                    'role'        : 'Empty',
-                    'role_type'   : 'Empty',
-                    'preferences' : [],
-                    'proposed_roles': [],
-                }
-            } else {
-                slowal_frame_argument = slowal_frame.arguments.find(o => o.argument_id === unified_frame_argument_mapping.slowal_frame_agrument_id);
-            }
-
-            new_slowal_frame_arguments.push(slowal_frame_argument)
-        }
-        slowal_frame.arguments = new_slowal_frame_arguments;
-    }
-}
-
-function frames2lexical_units(frames) {
-    const lexical_units = []
-    for (let i in frames) {
-        const frame = frames[i];
-        for (let j in frame.lexical_units) {
-            const lexical_unit = frame.lexical_units[j];
-            lexical_unit.opinion = frame.opinion;
-            lexical_unit.opinion_key = frame.opinion_key;
-            lexical_unit.frame_status = frame.status;
-            lexical_units.push(lexical_unit);
-        }
-    }
-    return lexical_units;
-}
diff --git a/entries/static/entries/js/unification_index.js b/entries/static/entries/js/unification_index.js
deleted file mode 100644
index 03ff2f5df09bf1121f0b8a7d7d991ed5b24bbad8..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/unification_index.js
+++ /dev/null
@@ -1 +0,0 @@
-window.update_entries = function () {}
diff --git a/entries/templates/entries.html b/entries/templates/entries.html
index b7ecd7826c414921a2c3a228477a19ecae2d09fe..c8318d1ee3a60b9c2cd9d39da933ed762473ab61 100644
--- a/entries/templates/entries.html
+++ b/entries/templates/entries.html
@@ -11,7 +11,6 @@
     <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/jquery-impromptu.min.js' %}"></script>
     <script type="module" src="{% static 'entries/js/entries_index.js' %}"></script>
 {% endblock %}
diff --git a/entries/templates/unification.html b/entries/templates/unification.html
index 1f48626e3f3c907249bd095590db6204f863300c..6c757149c1cb09c826fc901e5f7438f400eecc27 100644
--- a/entries/templates/unification.html
+++ b/entries/templates/unification.html
@@ -12,12 +12,10 @@
     <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/jquery-impromptu.min.js' %}"></script>
     <script>
         window.initialUnifiedFrameId = {{ unified_frame_id|default:'null' }};
     </script>
-    <script type="module" src="{% static 'entries/js/unification_index.js' %}"></script>
 {% endblock %}
 
 {% block modals %}
diff --git a/frontend/src/components/unification/Unification/LexicalUnitEdit.vue b/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
index 6db0f6bab5e21eb94f95ca6bc7c1f2bd1778eb1b..c8f7d2196b68aeabe7015b658c126b9008422e2f 100644
--- a/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
+++ b/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
@@ -7,6 +7,7 @@ import SemanticsSchemataComponent from "../shared/frame-components/SemanticsSche
 import MeaningComponent from "../shared/frame-components/MeaningComponent.vue";
 import SelectionalPreference from "./SelectionalPreference.js";
 import UnificationFramePreview from "./UnificationFramePreview.vue";
+import { slowal_frames2selecional_preferencies } from "../shared/utils.js";
 
 let LexicalUnitEdit = {};
 
@@ -70,10 +71,6 @@ Object.assign(LexicalUnitEdit, {
     hasWhiteSpace(s) {
       return /\s/g.test(s);
     },
-    slowal_frame_html(frame) {
-      let ret = frame2dom(frame);
-      return ret.outerHTML;
-    },
     async loadFrame() {
       try {
         const data = {'unified_frame_id': this.unifiedFrameId};
@@ -86,7 +83,7 @@ Object.assign(LexicalUnitEdit, {
           success: function (response) {
 
             this.img_prefix = window.STATIC_URL;
-            this.lexical_units = frames2lexical_units(response.frames);
+            this.lexical_units = this.frames2lexical_units(response.frames);
             this.unified_frame = response.unified_frame;
             this.unified_frame_title = this.unified_frame.title;
             this.unified_frame_arguments = this.unified_frame.arguments;
@@ -99,12 +96,12 @@ Object.assign(LexicalUnitEdit, {
             this.realisation_descriptions = response.realisation_descriptions;
             this.examples = response.examples;
 
-            window.fulfill_slowal_frames_arguments_with_empty_elems(response.unified_frame, response.frames)
+            this.fulfill_slowal_frames_arguments_with_empty_elems(response.unified_frame, response.frames)
             window.update_last_visited(response.last_visited);
             window.clear_info();
 
             this.changeStatusButtonTitleToDefault();
-            if(!this.active_slowal_frame) {
+            if (!this.active_slowal_frame) {
               this.setup_notes_unified_frame();
             }
           }.bind(this),
@@ -117,15 +114,15 @@ Object.assign(LexicalUnitEdit, {
         console.log(error);
       }
     },
-    setup_notes_unified_frame () {
+    setup_notes_unified_frame() {
       setup_notes($('#notes-component'), $('#lexical-unit-notes-template'), this.unified_frame.id, 'unifier.UnifiedFrame', this.setup_notes_unified_frame);
     },
-    setup_notes_slowal_frame () {
-      if(this.active_slowal_frame) {
+    setup_notes_slowal_frame() {
+      if (this.active_slowal_frame) {
         setup_notes($('#notes-component'), $('#lexical-unit-notes-template'), this.active_slowal_frame.id, 'semantics.Frame', this.setup_notes_slowal_frame);
       }
     },
-    setup_notes_slowal_frame_with_title_and_body (title, body) {
+    setup_notes_slowal_frame_with_title_and_body(title, body) {
       this.right_pane_tab = 'notes';
       setup_notes($('#notes-component'), $('#lexical-unit-notes-template'), this.active_slowal_frame.id, 'semantics.Frame', this.setup_notes_slowal_frame, title, body);
     },
@@ -153,19 +150,19 @@ Object.assign(LexicalUnitEdit, {
         show_info(gettext('Kliknij, aby wybrać kolumnę do edycji.'));
       }
     },
-    addSelectivePreference () {
-        if (!this.active_unified_frame_argument) {
-          alert(gettext("Zaznacz argument, do którego chcesz dodać preferencję."));
-        } else {
-          this.selectionalPreference.addSelectivePreference(this.unified_frame, this.active_unified_frame_argument.id, this.frames, function () {
-            this.loadFrame();
-          }.bind(this));
+    addSelectivePreference() {
+      if (!this.active_unified_frame_argument) {
+        alert(gettext("Zaznacz argument, do którego chcesz dodać preferencję."));
+      } else {
+        this.selectionalPreference.addSelectivePreference(this.unified_frame, this.active_unified_frame_argument.id, this.frames, function () {
+          this.loadFrame();
+        }.bind(this));
         //   window.addSelectivePreference(this.unified_frame, this.active_unified_frame_argument.id, this.frames, function () {
         //   this.loadFrame();
         // }.bind(this));
       }
     },
-    removeSelectionalPreference () {
+    removeSelectionalPreference() {
       if (!this.active_unified_frame_argument) {
         alert(gettext("Zaznacz argument, do którego chcesz dodać preferencję."));
       } else {
@@ -532,14 +529,14 @@ Object.assign(LexicalUnitEdit, {
         let hasPreferenceSelected = true;
         for (let i in this.unified_frame_arguments) {
           const argument = this.unified_frame_arguments[i];
-          if(argument.role) {
+          if (argument.role) {
             roleDict[argument.role.str] = argument.role;
           }
-          if(!argument.preferences || argument.preferences.length == 0) {
+          if (!argument.preferences || argument.preferences.length == 0) {
             hasPreferenceSelected = false;
           }
         }
-        if(Object.keys(roleDict).length === this.unified_frame_arguments.length && hasPreferenceSelected) {
+        if (Object.keys(roleDict).length === this.unified_frame_arguments.length && hasPreferenceSelected) {
           //all roles are set, and are uniq
           //TODO: aktywne preferencje w argumencie nie znajdujÄ… siÄ™ w relacji hipo-/hiperonimii.
           const data = {'unified_frame_id': this.unified_frame.id};
@@ -563,7 +560,7 @@ Object.assign(LexicalUnitEdit, {
       }
     },
     change_slowal2unified_frame_argument_mapping(slowal_frame) {
-      if(slowal_frame === this.active_slowal_frame && this.selectedFrameArguments && this.selectedFrameArguments.length == 2) {
+      if (slowal_frame === this.active_slowal_frame && this.selectedFrameArguments && this.selectedFrameArguments.length == 2) {
         const data = {
           'unified_frame_id': this.unified_frame.id,
           'slowal_frame_id': slowal_frame.id,
@@ -595,7 +592,7 @@ Object.assign(LexicalUnitEdit, {
       return (!isSuperLeksykograf && frame.status === 'G') || (isSuperLeksykograf && frame.status === 'S')
     },
     select_slowal_frame_req(to_invoke) {
-      if(this.active_slowal_frame) {
+      if (this.active_slowal_frame) {
         to_invoke();
       } else {
         alert(gettext("Wybierz ramę, dla której chcesz zmienić status."));
@@ -605,10 +602,10 @@ Object.assign(LexicalUnitEdit, {
       this.select_slowal_frame_req(() => {
         let frame = this.active_slowal_frame;
 
-        if(status === 'B') {
+        if (status === 'B') {
           this.setup_notes_slowal_frame_with_title_and_body("Niedopasowana jednostka (identyfikator jednostki)", "Do zatwierdzenia uznanie ramy Walentego jednostek (lista jednostek)" +
               "za niedopasowana do zunifikowanej ramy (identyfikator) przez (Leksykograf).");
-        } else if(status === 'Z') {
+        } else if (status === 'Z') {
           this.setup_notes_slowal_frame_with_title_and_body("Błędna jednostka (identyfikator jednostki)", "Do zatwierdzenia uznanie ramy Walentego jednostek (lista jednostek)" +
               "za niedopasowana do zunifikowanej ramy (identyfikator) przez (Leksykograf).");
         }
@@ -663,7 +660,7 @@ Object.assign(LexicalUnitEdit, {
       const isSuperLeksykograf = this.isSuperLeksykograf();
       this.statusButtonTitle = isSuperLeksykograf ? 'Sprawdź' : 'Gotowe';
     },
-    deselectSlowalFrameSelectedElements () {
+    deselectSlowalFrameSelectedElements() {
       this.subentries.forEach(subentry => {
         subentry.schemata.forEach(s => {
           s.selected = false;
@@ -689,13 +686,13 @@ Object.assign(LexicalUnitEdit, {
       this.deselectSlowalFrameSelectedElements();
       if (this.active_slowal_frame === frame) {
         this.active_slowal_frame = null;
-        if(!this.readOnly) {
+        if (!this.readOnly) {
           this.setup_notes_unified_frame();
           this.changeStatusButtonTitleToDefault();
         }
       } else {
         this.active_slowal_frame = frame;
-        if(!this.readOnly) {
+        if (!this.readOnly) {
           this.setup_notes_slowal_frame()
           if (this.isFrameVerified(frame)) {
             this.statusButtonTitle = 'Przywróć';
@@ -704,7 +701,7 @@ Object.assign(LexicalUnitEdit, {
       }
     },
     isSelectedFrame(frame) {
-      if(this.active_slowal_frame) {
+      if (this.active_slowal_frame) {
         return frame.id === this.active_slowal_frame.id;
       } else {
         return false;
@@ -732,22 +729,24 @@ Object.assign(LexicalUnitEdit, {
             if (v === 1) {
               e.preventDefault();
               let frame_ids = normalizeFormData(f.frames);
-              const data = { 'unified_frame_id' : this.unified_frame.id, 'slowal_frame_ids' : JSON.stringify(frame_ids),
-                'target_unified_frame_id': ''};
+              const data = {
+                'unified_frame_id': this.unified_frame.id, 'slowal_frame_ids': JSON.stringify(frame_ids),
+                'target_unified_frame_id': ''
+              };
               $.ajax({
-                type     : 'post',
-                url      : '/' + lang + '/unifier/extract_frames_to_new_frame/',
-                dataType : 'json',
-                data     : data,
-                timeout  : 60000,
-                success  : function(response) {
+                type: 'post',
+                url: '/' + lang + '/unifier/extract_frames_to_new_frame/',
+                dataType: 'json',
+                data: data,
+                timeout: 60000,
+                success: function (response) {
                   show_info('Ramy zostały wydzielone do nowej ramy zunifikowanej.');
                   this.loadFrame();
                   let newUnifiedFrameId = response.unified_frame_id;
                   this.currentPreviewedUnifiedFrameId = newUnifiedFrameId;
                   $.prompt.close();
                 }.bind(this),
-                error: function(request, errorType, errorMessage) {
+                error: function (request, errorType, errorMessage) {
                   show_error(errorType + ' (' + errorMessage + ')');
                   $.prompt.close();
                 }
@@ -759,7 +758,7 @@ Object.assign(LexicalUnitEdit, {
       $.prompt(extract_frames_to_new_frame_popup);
     },
     extract_frame_to_preview_frame() {
-      if(this.currentPreviewedUnifiedFrameId !== -1 && this.currentPreviewedUnifiedFrameId !== this.unified_frame.id) {
+      if (this.currentPreviewedUnifiedFrameId !== -1 && this.currentPreviewedUnifiedFrameId !== this.unified_frame.id) {
         let target_unified_frame_id = this.currentPreviewedUnifiedFrameId;
         const data = {
           'unified_frame_id': this.unified_frame.id, 'slowal_frame_ids': JSON.stringify([this.active_slowal_frame.id]),
@@ -783,15 +782,15 @@ Object.assign(LexicalUnitEdit, {
         });
       }
     },
-    changePreviewedUnifiedFrameId (unifiedFrameId) {
+    changePreviewedUnifiedFrameId(unifiedFrameId) {
       this.currentPreviewedUnifiedFrameId = unifiedFrameId;
     },
-    swapUnifiedFrames () {
+    swapUnifiedFrames() {
       if (this.currentPreviewedUnifiedFrameId !== -1 && this.unified_frame.id !== this.currentPreviewedUnifiedFrameId) {
         this.$emit("swapFrames", this.currentPreviewedUnifiedFrameId);
       }
     },
-    changeShowVerifiedFrames (val) {
+    changeShowVerifiedFrames(val) {
       this.showVerifiedFrames = val;
       this.hidden_frames = [];
     },
@@ -801,7 +800,7 @@ Object.assign(LexicalUnitEdit, {
     meaningLuSelected(selectedLus) {
       this.selectedLus = selectedLus;
     },
-    insideFrameSelectionChanged (selectedFrameArguments) {
+    insideFrameSelectionChanged(selectedFrameArguments) {
       this.selectedFrameArguments = selectedFrameArguments;
     },
     schemataSelected(schemas) {
@@ -827,15 +826,55 @@ Object.assign(LexicalUnitEdit, {
         }
       });
     },
-    isReadOnlyForSuperLeksykograf () {
+    isReadOnlyForSuperLeksykograf() {
       return (this.isSuperLeksykograf() && this.unified_frame.status === 'O') && this.unified_frame.assignee_username !== window.USER_USERNAME;
     },
-    hideFrame (frame) {
+    hideFrame(frame) {
       this.hidden_frames.push(frame);
     },
-    getSlowalReadyFrameCnt () {
+    getSlowalReadyFrameCnt() {
       const readyFrames = this.frames.filter(frame => frame.status == 'G');
       return readyFrames.length;
+    },
+    frames2lexical_units(frames) {
+      const lexical_units = []
+      for (let i in frames) {
+        const frame = frames[i];
+        for (let j in frame.lexical_units) {
+          const lexical_unit = frame.lexical_units[j];
+          lexical_unit.opinion = frame.opinion;
+          lexical_unit.opinion_key = frame.opinion_key;
+          lexical_unit.frame_status = frame.status;
+          lexical_units.push(lexical_unit);
+        }
+      }
+      return lexical_units;
+    },
+    fulfill_slowal_frames_arguments_with_empty_elems(unified_frame, slowal_frames) {
+      for (let i in unified_frame.slowal_frame_mapping) {
+        const slowal_frame_mapping = unified_frame.slowal_frame_mapping[i];
+        let slowal_frame = slowal_frames.find(o => o.id === slowal_frame_mapping.slowal_frame_id);
+        let new_slowal_frame_arguments = [];
+        for (let j in unified_frame.arguments) {
+          const unified_frame_argument = unified_frame.arguments[j];
+          let unified_frame_argument_mapping = slowal_frame_mapping.slowal_frame_argument_mapping.find(o => o.unified_frame_agrument_id === unified_frame_argument.id);
+          let slowal_frame_argument = null;
+          if (unified_frame_argument_mapping == null) {
+            slowal_frame_argument = {
+              'str': 'Empty',
+              'id': slowal_frame.id + '-_' + (unified_frame_argument.id),
+              'role': 'Empty',
+              'role_type': 'Empty',
+              'preferences': [],
+              'proposed_roles': [],
+            }
+          } else {
+            slowal_frame_argument = slowal_frame.arguments.find(o => o.argument_id === unified_frame_argument_mapping.slowal_frame_agrument_id);
+          }
+          new_slowal_frame_arguments.push(slowal_frame_argument)
+        }
+        slowal_frame.arguments = new_slowal_frame_arguments;
+      }
     }
   },
   mounted() {
diff --git a/frontend/src/components/unification/Unification/SelectionalPreference.js b/frontend/src/components/unification/Unification/SelectionalPreference.js
index f4afa793e13fb85a9a396fc3c7384c96e6fe8ebd..338b66fe46a5c93b137c9262da63712901410110 100644
--- a/frontend/src/components/unification/Unification/SelectionalPreference.js
+++ b/frontend/src/components/unification/Unification/SelectionalPreference.js
@@ -1,369 +1,371 @@
-export default class SelectionalPreference {
-
-    predefined = [];
-    relations = [];
-    synsets = [];
-    change = false;
+import {slowal_frames2selecional_preferencies} from "../shared/utils.js";
 
-    constructor() {
-        this.loadPredefinedSelections();
-        this.loadRelations();
-    }
+export default class SelectionalPreference {
 
-    loadPredefinedSelections() {
-        $.ajax({
-            dataType: "json",
-            url: 'predefined_preferences',
-            success: (data) => {
-                this.predefined = data.predefined;
-            },
-            async: false
-        });
+  predefined = [];
+  relations = [];
+  synsets = [];
+  change = false;
+
+  constructor() {
+    this.loadPredefinedSelections();
+    this.loadRelations();
+  }
+
+  loadPredefinedSelections() {
+    $.ajax({
+      dataType: "json",
+      url: `/${lang}/entries/predefined_preferences/`,
+      success: (data) => {
+        this.predefined = data.predefined;
+      },
+      async: false
+    });
+  }
+
+  loadRelations() {
+    $.ajax({
+      dataType: "json",
+      url: `/${lang}/entries/relations/`,
+      success: (data) => {
+        this.relations = data.relations;
+      },
+      async: false
+    });
+  }
+
+  getSynsets(context, pos) {
+
+    if ((typeof pos) == 'undefined') {
+      pos = '_';
     }
 
-    loadRelations(new_relations) {
-        $.ajax({
-            dataType: "json",
-            url: 'relations',
-            success: (data) => {
-                this.relations = data.relations;
-            },
-            async: false
-        });
+    $.ajax({
+      dataType: "json",
+      url: `/${lang}/entries/synsets/`,
+      data: {base: context, pos: pos},
+      success: function (data) {
+        this.synsets = data.synsets
+      }.bind(this),
+      async: false
+    });
+
+    let display = "";
+
+    let i;
+    for (i = 0; i < this.synsets.length; i++) {
+      display += "<input type = \"radio\" name = \"synset\" value = \"" + this.synsets[i].id + "\"><div>";
+      let j;
+      for (j = 0; j < this.synsets[i].content.length; j++) {
+        const lexical_unit = this.synsets[i].content[j];
+        display += lexical_unit.base + "-" + lexical_unit.sense + ": <i>" + lexical_unit.glossa + "</i><br>";
+      }
+      display += "</div>";
     }
 
-    getSynsets(context, pos) {
-
-        if ((typeof pos) == 'undefined') {
-            pos = '_';
-        }
-
-        $.ajax({
-            dataType: "json",
-            url: 'synsets',
-            data: {base: context, pos: pos},
-            success: function (data) {
-                this.synsets = data.synsets
-            }.bind(this),
-            async: false
-        });
-
-        let display = "";
+    return display;
+  }
 
-        let i;
-        for (i = 0; i < this.synsets.length; i++) {
-            display += "<input type = \"radio\" name = \"synset\" value = \"" + this.synsets[i].id + "\"><div>";
-            let j;
-            for (j = 0; j < this.synsets[i].content.length; j++) {
-                const lexical_unit = this.synsets[i].content[j];
-                display += lexical_unit.base + "-" + lexical_unit.sense + ": <i>" + lexical_unit.glossa + "</i><br>";
-            }
-            display += "</div>";
-        }
+  predefinedSelect() {
+    let display = "";
 
-        return display;
+    let i;
+    for (i = 0; i < this.predefined.length; i++) {
+      display += "<input type = \"checkbox\" name = \"predef\" value = \"" + this.predefined[i].id + "\">" + this.predefined[i].content + "<br>";
     }
 
-    predefinedSelect() {
-        let display = "";
+    return display;
+  }
 
-        let i;
-        for (i = 0; i < this.predefined.length; i++) {
-            display += "<input type = \"checkbox\" name = \"predef\" value = \"" + this.predefined[i].id + "\">" + this.predefined[i].content + "<br>";
-        }
+  relationsSelect() {
+    let display = "<select name = \"rel\">";
 
-        return display;
+    let i;
+    for (i = 0; i < this.relations.length; i++) {
+      display += "<option value = \"" + this.relations[i].id + "\">" + this.relations[i].content + "</option>";
     }
-
-    relationsSelect() {
-        let display = "<select name = \"rel\">";
-
-        let i;
-        for (i = 0; i < this.relations.length; i++) {
-            display += "<option value = \"" + this.relations[i].id + "\">" + this.relations[i].content + "</option>";
-        }
-        display += "</select>"
-        return display;
+    display += "</select>"
+    return display;
+  }
+
+  argumentSelect(frame, complement_id) {
+    let display = "<select name = \"arg\">";
+
+    let i;
+    for (i = 0; i < frame.arguments.length; i++) {
+      var local_complement_id = frame.arguments[i].id;
+      if (local_complement_id && local_complement_id !== complement_id && frame.arguments[i].role) {
+        display += "<option value = \"" + local_complement_id + "\">" + frame.arguments[i].role.str + "</option>";
+      }
     }
 
-    argumentSelect(frame, complement_id) {
-        let display = "<select name = \"arg\">";
+    display += "</select>"
+
+    return display;
+  }
+
+  relationArgument(frame, complement_id) {
+    return this.relationsSelect() + "<br><br>" + this.argumentSelect(frame, complement_id);
+  }
+
+  attachPlWNContextAutocomplete() {
+    $('#plWN_context_selection').autocomplete({
+      select: function (event, ui) {
+      },
+      source: function (req, add) {
+        fetch(`/${lang}/entries/plWN_context_lookup/?` + new URLSearchParams(req))
+          .then(function (response) {
+            return response.json();
+          })
+          .then(function (data) {
+            add(data['result']);
+          });
+      },
+    });
+  }
+
+  addSelectivePreference(unified_frame, unified_frame_active_argument_id, frames, callbackFunction) {
+    if (!unified_frame_active_argument_id) return;
+    this.addSelectivePreferenceBase(unified_frame, frames, unified_frame_active_argument_id, callbackFunction);
+  }
+
+  addSelectivePreferenceBase(unified_frame, frames, complement_id, callbackFunction) {
+    let unified_frame_id = unified_frame.id;
+
+    const submitSynsetSelection = (e, v, m, f) => {
+      if (v == -1) {
+        e.preventDefault();
+        $.prompt.goToState('state2');
+      }
+      if (v == 1) {
+        e.preventDefault();
+        const synset = normalizeFormData(f.synset);
 
         let i;
-        for (i = 0; i < frame.arguments.length; i++) {
-            var local_complement_id = frame.arguments[i].id;
-            if (local_complement_id && local_complement_id !== complement_id && frame.arguments[i].role) {
-                display += "<option value = \"" + local_complement_id + "\">" + frame.arguments[i].role.str + "</option>";
-            }
+        for (i = 0; i < synset.length; i++) {
+          this.saveSynsetPreference(unified_frame_id, complement_id, synset[i])
         }
-
-        display += "</select>"
-
-        return display;
+        $.prompt.goToState('state0');
+      }
     }
 
-    relationArgument(frame, complement_id) {
-        return this.relationsSelect() + "<br><br>" + this.argumentSelect(frame, complement_id);
-    }
-
-    attachPlWNContextAutocomplete() {
-        $('#plWN_context_selection').autocomplete({
-            select: function (event, ui) {
-            },
-            source: function (req, add) {
-                $.getJSON('plWN_context_lookup', req, function (data) {
-                    const suggestions = [];
-                    $.each(data['result'], function (i, val) {
-                        suggestions.push(val);
-                    });
-                    add(suggestions);
-                });
-            },
-        });
-    }
-
-    addSelectivePreference(unified_frame, unified_frame_active_argument_id, frames, callbackFunction) {
-        if (!unified_frame_active_argument_id) return;
-        this.addSelectivePreferenceBase(unified_frame, frames, unified_frame_active_argument_id, callbackFunction);
-    }
-
-    addSelectivePreferenceBase(unified_frame, frames, complement_id, callbackFunction) {
-        let unified_frame_id = unified_frame.id;
-
-        const submitSynsetSelection = (e, v, m, f) => {
-            if (v == -1) {
-                e.preventDefault();
-                $.prompt.goToState('state2');
-            }
-            if (v == 1) {
-                e.preventDefault();
-                const synset = normalizeFormData(f.synset);
-
-                let i;
-                for (i = 0; i < synset.length; i++) {
-                    this.saveSynsetPreference(unified_frame_id, complement_id, synset[i])
-                }
-                $.prompt.goToState('state0');
-            }
+    const existingSelect = function () {
+      let availablePreferencies = slowal_frames2selecional_preferencies(unified_frame, frames)[complement_id];
+      if (!availablePreferencies) {
+        return gettext('Brak preferencji selekcyjnych do wyboru.')
+      }
+      return availablePreferencies.map(preference => {
+        return `<label><input type="checkbox" name="existing" value="${preference.type}:${preference.id}" /> ${preference.str}</label><br />`;
+      }).join("");
+    };
+
+    const select_preference = {
+      state0: {
+        title: 'Typ preferencji selekcyjnej',
+        html: 'Wybierz typ preferencji selekcyjnej',
+        buttons: {Istniejąca: 0, Predefiniowana: 1, Słowosieć: 2, Relacja: 3, Koniec: -1},
+        focus: -1,
+        submit: (e, v, m, f) => {
+          if (v == -1) {
+            e.preventDefault();
+            $.prompt.close();
+
+            callbackFunction();
+          }
+          if (v === 0) {
+            e.preventDefault();
+            $.prompt.goToState('state4');
+          }
+          if (v == 1) {
+            e.preventDefault();
+            $.prompt.goToState('state1');
+          }
+          if (v == 2) {
+            e.preventDefault();
+            $.prompt.goToState('state2');
+          }
+          if (v == 3) {
+            e.preventDefault();
+            $.prompt.goToState('state3');
+          }
         }
-
-        const existingSelect = function () {
-            let availablePreferencies = slowal_frames2selecional_preferencies(unified_frame, frames)[complement_id];
-            if (!availablePreferencies) {
-                return gettext('Brak preferencji selekcyjnych do wyboru.')
+      },
+      state1: {
+        title: 'Wybierz preferencjÄ™ selekcyjnÄ…',
+        html: this.predefinedSelect(),
+        buttons: {Anuluj: -1, Zatwierdź: 1},
+        focus: 1,
+        submit: (e, v, m, f) => {
+
+          if (v == -1) {
+            e.preventDefault();
+            $.prompt.goToState('state0');
+          }
+          if (v == 1) {
+            e.preventDefault();
+            const predef = normalizeFormData(f.predef);
+
+            let i;
+            for (i = 0; i < predef.length; i++) {
+              this.savePredefinedPreference(unified_frame_id, complement_id, predef[i])
             }
-            return availablePreferencies.map(preference => {
-                return `<label><input type="checkbox" name="existing" value="${preference.type}:${preference.id}" /> ${preference.str}</label><br />`;
-            }).join("");
-        };
-
-        const select_preference = {
-            state0: {
-                title: 'Typ preferencji selekcyjnej',
-                html: 'Wybierz typ preferencji selekcyjnej',
-                buttons: {Istniejąca: 0, Predefiniowana: 1, Słowosieć: 2, Relacja: 3, Koniec: -1},
-                focus: -1,
-                submit: (e, v, m, f) => {
-                    if (v == -1) {
-                        e.preventDefault();
-                        $.prompt.close();
-
-                        callbackFunction();
-                    }
-                    if (v === 0) {
-                        e.preventDefault();
-                        $.prompt.goToState('state4');
-                    }
-                    if (v == 1) {
-                        e.preventDefault();
-                        $.prompt.goToState('state1');
-                    }
-                    if (v == 2) {
-                        e.preventDefault();
-                        $.prompt.goToState('state2');
-                    }
-                    if (v == 3) {
-                        e.preventDefault();
-                        $.prompt.goToState('state3');
-                    }
-                }
-            },
-            state1: {
-                title: 'Wybierz preferencjÄ™ selekcyjnÄ…',
-                html: this.predefinedSelect(),
-                buttons: {Anuluj: -1, Zatwierdź: 1},
-                focus: 1,
-                submit: (e, v, m, f) => {
-
-                    if (v == -1) {
-                        e.preventDefault();
-                        $.prompt.goToState('state0');
-                    }
-                    if (v == 1) {
-                        e.preventDefault();
-                        const predef = normalizeFormData(f.predef);
-
-                        let i;
-                        for (i = 0; i < predef.length; i++) {
-                            this.savePredefinedPreference(unified_frame_id, complement_id, predef[i])
-                        }
-                        $.prompt.goToState('state0');
-                    }
-                }
-            },
-            state2: {
-                title: 'Wybierz preferencjÄ™ selekcyjnÄ…',
-                html: "<input id=\"plWN_context_selection\" type=\"text\" name=\"context\">",
-                buttons: {Anuluj: -1, Wyszukaj: 1},
-                focus: 1,
-                submit: (e, v, m, f) => {
-                    if (v == -1) {
-                        e.preventDefault();
-                        $.prompt.goToState('state0');
-                    }
-                    if (v == 1) {
-                        e.preventDefault();
-                        $.prompt.removeState('state21');
-                        $.prompt.addState('state21', {
-                            title: 'Znaczenia',
-                            html: this.getSynsets(f.context),
-                            buttons: {Anuluj: -1, Zatwierdź: 1},
-                            focus: 1,
-                            submit: submitSynsetSelection
-                        }, 'state2');
-                        $.prompt.goToState('state21');
-                    }
-                }
-            },
-            state3: {
-                title: 'Wybierz relacjÄ™ i argument',
-                html: this.relationArgument(unified_frame, complement_id),
-                buttons: {Anuluj: -1, Zatwierdź: 1},
-                focus: 1,
-                submit: (e, v, m, f) => {
-                    if (v == -1) {
-                        e.preventDefault();
-                        $.prompt.goToState('state0');
-                    }
-                    if (v == 1) {
-                        e.preventDefault();
-
-                        const rel = normalizeFormData(f.rel);
-                        const args = normalizeFormData(f.arg);
-
-                        let i, j;
-                        for (i = 0; i < rel.length; i++) {
-                            for (j = 0; j < args.length; j++) {
-                                this.saveRelationalSelectionalPreference(unified_frame_id, complement_id, args[j], rel[i])
-                            }
-                        }
-
-                        $.prompt.goToState('state0');
-                    }
-                }
-            },
-            state4: {
-                title: 'Wybierz z istniejÄ…cych',
-                html: existingSelect(),
-                buttons: {Anuluj: -1, Zatwierdź: 1},
-                focus: 1,
-                submit: (e, v, m, f) => {
-                    if (v == -1) {
-                        e.preventDefault();
-                        $.prompt.goToState('state0');
-                    }
-                    if (v == 1) {
-                        e.preventDefault();
-                        normalizeFormData(f.existing).map(choice => {
-                            let [type, id] = choice.split(':');
-                            switch (type) {
-                                case 'meanings.Synset':
-                                    this.saveSynsetPreference(unified_frame_id, complement_id, id);
-                                    break;
-                                case 'semantics.PredefinedSelectionalPreference':
-                                    this.savePredefinedPreference(unified_frame_id, complement_id, id);
-                                    break;
-                                case 'semantics.RelationalSelectionalPreference':
-                                    this.saveRelationalSelectionalPreference(unified_frame_id, complement_id, null, null);  // TODO
-                                    break;
-                            }
-                        });
-                        $.prompt.goToState('state0');
-                    }
-                }
-            },
-        };
-        if (this.change == true) {
-            this.alertSemantics();
-        } else {
-            $.prompt(select_preference);
-            this.attachPlWNContextAutocomplete();
+            $.prompt.goToState('state0');
+          }
         }
-
-    }
-
-    saveSynsetPreference(frame_id, complement_id, synset_preference_id) {
-        const data = {
-            'frame_id': frame_id,
-            'complement_id': complement_id,
-            'synset_preference_id': synset_preference_id
-        };
-        $.ajax({
-            type: 'post',
-            url: '/' + lang + '/unifier/save_synset_preference/',
-            dataType: 'json',
-            data: data,
-            timeout: 60000,
-            success: function (response) {
-                show_info('Preferencja zosała zapisana');
-            },
-            error: function (request, errorType, errorMessage) {
-                show_error(errorType + ' (' + errorMessage + ')');
+      },
+      state2: {
+        title: 'Wybierz preferencjÄ™ selekcyjnÄ…',
+        html: "<input id=\"plWN_context_selection\" type=\"text\" name=\"context\">",
+        buttons: {Anuluj: -1, Wyszukaj: 1},
+        focus: 1,
+        submit: (e, v, m, f) => {
+          if (v == -1) {
+            e.preventDefault();
+            $.prompt.goToState('state0');
+          }
+          if (v == 1) {
+            e.preventDefault();
+            $.prompt.removeState('state21');
+            $.prompt.addState('state21', {
+              title: 'Znaczenia',
+              html: this.getSynsets(f.context),
+              buttons: {Anuluj: -1, Zatwierdź: 1},
+              focus: 1,
+              submit: submitSynsetSelection
+            }, 'state2');
+            $.prompt.goToState('state21');
+          }
+        }
+      },
+      state3: {
+        title: 'Wybierz relacjÄ™ i argument',
+        html: this.relationArgument(unified_frame, complement_id),
+        buttons: {Anuluj: -1, Zatwierdź: 1},
+        focus: 1,
+        submit: (e, v, m, f) => {
+          if (v == -1) {
+            e.preventDefault();
+            $.prompt.goToState('state0');
+          }
+          if (v == 1) {
+            e.preventDefault();
+
+            const rel = normalizeFormData(f.rel);
+            const args = normalizeFormData(f.arg);
+
+            let i, j;
+            for (i = 0; i < rel.length; i++) {
+              for (j = 0; j < args.length; j++) {
+                this.saveRelationalSelectionalPreference(unified_frame_id, complement_id, args[j], rel[i])
+              }
             }
-        });
-    }
 
-    savePredefinedPreference(frame_id, complement_id, predefined_preference_id) {
-        const data = {
-            'frame_id': frame_id,
-            'complement_id': complement_id,
-            'predefined_preference_id': predefined_preference_id
-        };
-        $.ajax({
-            type: 'post',
-            url: '/' + lang + '/unifier/save_predefined_preference/',
-            dataType: 'json',
-            data: data,
-            timeout: 60000,
-            success: function (response) {
-                show_info('Preferencja zosała zapisana');
-            },
-            error: function (request, errorType, errorMessage) {
-                show_error(errorType + ' (' + errorMessage + ')');
-            }
-        });
+            $.prompt.goToState('state0');
+          }
+        }
+      },
+      state4: {
+        title: 'Wybierz z istniejÄ…cych',
+        html: existingSelect(),
+        buttons: {Anuluj: -1, Zatwierdź: 1},
+        focus: 1,
+        submit: (e, v, m, f) => {
+          if (v == -1) {
+            e.preventDefault();
+            $.prompt.goToState('state0');
+          }
+          if (v == 1) {
+            e.preventDefault();
+            normalizeFormData(f.existing).map(choice => {
+              let [type, id] = choice.split(':');
+              switch (type) {
+                case 'meanings.Synset':
+                  this.saveSynsetPreference(unified_frame_id, complement_id, id);
+                  break;
+                case 'semantics.PredefinedSelectionalPreference':
+                  this.savePredefinedPreference(unified_frame_id, complement_id, id);
+                  break;
+                case 'semantics.RelationalSelectionalPreference':
+                  this.saveRelationalSelectionalPreference(unified_frame_id, complement_id, null, null);  // TODO
+                  break;
+              }
+            });
+            $.prompt.goToState('state0');
+          }
+        }
+      },
+    };
+    if (this.change == true) {
+      this.alertSemantics();
+    } else {
+      $.prompt(select_preference);
+      this.attachPlWNContextAutocomplete();
     }
 
-    saveRelationalSelectionalPreference(frame_id, complement_id_from, complement_id_to, relation_id) {
-        const data = {
-            'frame_id': frame_id,
-            'complement_id_from': complement_id_from,
-            'complement_id_to': complement_id_to,
-            'relation_id': relation_id
-        };
-        $.ajax({
-            type: 'post',
-            url: '/' + lang + '/unifier/save_relational_selectional_preference/',
-            dataType: 'json',
-            data: data,
-            timeout: 60000,
-            success: function (response) {
-                show_info('Preferencja zosała zapisana');
-            },
-            error: function (request, errorType, errorMessage) {
-                show_error(errorType + ' (' + errorMessage + ')');
-            }
-        });
-    }
+  }
+
+  saveSynsetPreference(frame_id, complement_id, synset_preference_id) {
+    const data = {
+      'frame_id': frame_id,
+      'complement_id': complement_id,
+      'synset_preference_id': synset_preference_id
+    };
+    $.ajax({
+      type: 'post',
+      url: '/' + lang + '/unifier/save_synset_preference/',
+      dataType: 'json',
+      data: data,
+      timeout: 60000,
+      success: function (response) {
+        show_info('Preferencja zosała zapisana');
+      },
+      error: function (request, errorType, errorMessage) {
+        show_error(errorType + ' (' + errorMessage + ')');
+      }
+    });
+  }
+
+  savePredefinedPreference(frame_id, complement_id, predefined_preference_id) {
+    const data = {
+      'frame_id': frame_id,
+      'complement_id': complement_id,
+      'predefined_preference_id': predefined_preference_id
+    };
+    $.ajax({
+      type: 'post',
+      url: '/' + lang + '/unifier/save_predefined_preference/',
+      dataType: 'json',
+      data: data,
+      timeout: 60000,
+      success: function (response) {
+        show_info('Preferencja zosała zapisana');
+      },
+      error: function (request, errorType, errorMessage) {
+        show_error(errorType + ' (' + errorMessage + ')');
+      }
+    });
+  }
+
+  saveRelationalSelectionalPreference(frame_id, complement_id_from, complement_id_to, relation_id) {
+    const data = {
+      'frame_id': frame_id,
+      'complement_id_from': complement_id_from,
+      'complement_id_to': complement_id_to,
+      'relation_id': relation_id
+    };
+    $.ajax({
+      type: 'post',
+      url: '/' + lang + '/unifier/save_relational_selectional_preference/',
+      dataType: 'json',
+      data: data,
+      timeout: 60000,
+      success: function (response) {
+        show_info('Preferencja zosała zapisana');
+      },
+      error: function (request, errorType, errorMessage) {
+        show_error(errorType + ' (' + errorMessage + ')');
+      }
+    });
+  }
 
 }
diff --git a/frontend/src/components/unification/shared/utils.js b/frontend/src/components/unification/shared/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..cee844c3ec334ff89259f0e05494cc5638353cf0
--- /dev/null
+++ b/frontend/src/components/unification/shared/utils.js
@@ -0,0 +1,27 @@
+function slowal_frames2selecional_preferencies(unified_frame, slowal_frames) {
+  const unified_argument_2_selecional_preferencies = {}
+  for (let i in unified_frame.slowal_frame_mapping) {
+    const slowal_frame_mapping = unified_frame.slowal_frame_mapping[i];
+    let slowal_frame = slowal_frames.find(o => o.id === slowal_frame_mapping.slowal_frame_id);
+    for (let j in slowal_frame_mapping.slowal_frame_argument_mapping) {
+      const slowal_frame_argument_mapping = slowal_frame_mapping.slowal_frame_argument_mapping[j];
+
+      let slowal_frame_argument = slowal_frame.arguments.find(o => o.argument_id === slowal_frame_argument_mapping.slowal_frame_agrument_id);
+      let unified_frame_argument = unified_frame.arguments.find(o => o.id === slowal_frame_argument_mapping.unified_frame_agrument_id);
+
+      const unified_frame_argument_preferences = new Set(unified_frame_argument.preferences.map(preference => preference.str));
+
+      let preferenceEntry = unified_argument_2_selecional_preferencies[slowal_frame_argument_mapping.unified_frame_agrument_id];
+      if (preferenceEntry == null) {
+        preferenceEntry = [];
+        unified_argument_2_selecional_preferencies[slowal_frame_argument_mapping.unified_frame_agrument_id] = preferenceEntry
+      }
+      preferenceEntry.push.apply(preferenceEntry, slowal_frame_argument.preferences.filter(preference => !unified_frame_argument_preferences.has(preference.str)))
+    }
+  }
+  return unified_argument_2_selecional_preferencies;
+}
+
+export {
+  slowal_frames2selecional_preferencies
+};