diff --git a/templates/index.html.ep b/templates/index.html.ep
index 44d3f01..bdd14a5 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -131,10 +131,15 @@
            "bPaginate": false,
            "bJQueryUI": true,
            "dom": '<"top">rt<"bottom"flp><"clear">',
+           "initComplete":function(settings, json) {
+             $('td.paradigmator a').on('mousedown', function(e) {
+                 return paradigmatorClick(e, paraResults[0][0].word, this.childNodes["0"].textContent);
+             });
+           },
            "columns": [
              { "data": "rank", type: "allnumeric" },
              { "data": "dist",  render: function ( data, type, row ) {return data.toFixed(3) }},
-             { "data": "word",  render: function ( data, type, row ) {urlprefix.set("word", data); return  '<a href="?' + urlprefix + '">' + data + '</a>' }}
+             { "data": "word",  class: "paradigmator", render: function ( data, type, row ) {urlprefix.set("word", data); return  '<a href="?' + urlprefix + '">' + data + '</a>' }}
            ],
            "columnDefs": [
              { className: "dt-right", "targets": [0,1] },
@@ -211,16 +216,54 @@
            }
          });
 
-         //         var filterQuot = /(^quot?=[A-Z])|(quot$)/g;
-         var filterQuot = /^quot/;
-         classicCollocatorTable = $('#classicoloctable').DataTable({
-           ajax: {
+
+         if($('#sprofiles').length) {
+           similarProfileTable = $('#sprofiles').DataTable({
+             ajax: {
                method: "GET",
-               url: '/derekovecs/getClassicCollocators',
+               url: '/derekovecs/getSimilarProfiles',
                dataType: 'json',
                dataSrc: "",
                timeout: 30000,
                data: { w: paraResults[0][0].rank }
+             },
+             "initComplete":function(settings, json){
+               $('td.paradigmator a').on('mousedown', function(e) {
+                 if (e.which === 2) {
+                   e.preventDefault();
+                   queryKorAPalternatives(paraResults[0][0].word, this.childNodes["0"].textContent);
+                   return false;
+                 }
+               });
+             },
+             "sScrollY": "780px",
+             "bScrollCollapse": true,
+             "bPaginate": false,
+             "bJQueryUI": true,
+             "dom": '<"top">rt<"bottom"flp><"clear">',
+             "columns": [
+               { "data": "v",  render: function ( data, type, row ) {return data.toFixed(3) }},
+               { "data": "w",  sClass: "paradigmator", render: function ( data, type, row ) {urlprefix.set("word", data); return  '<a href="?' + urlprefix + '">' + data + '</a>' } }
+             ],
+             "columnDefs": [
+               { className: "dt-right", "targets": [0] },
+             ],
+             "oLanguage": {
+               "sSearch": "Filter: "
+             },
+             "order": [[ 0, 'desc' ]],
+           });
+         }
+         //         var filterQuot = /(^quot?=[A-Z])|(quot$)/g;
+         var filterQuot = /^quot/;
+         classicCollocatorTable = $('#classicoloctable').DataTable({
+           ajax: {
+             method: "GET",
+             url: '/derekovecs/getClassicCollocators',
+             dataType: 'json',
+             dataSrc: "",
+             timeout: 30000,
+             data: { w: paraResults[0][0].rank }
            },
            "initComplete":function(settings, json){
              $("td.collocator").click(function(){
@@ -435,8 +478,8 @@
             T.Y[i][0] = (d.x - mapWidth/2 - tx)/ss/20;
             T.Y[i][1] = (d.y - mapHeight/2 - ty)/ss/20;
             return "translate(" +
-                                                        (d.x) + "," +
-                                                        (d.y) + ")";
+                                                               (d.x) + "," +
+                                                               (d.y) + ")";
           });
      }
 
@@ -446,8 +489,8 @@
           .data(data.words)
           .attr("transform", function(d, i) {
             return "translate(" +
-                                                         ((Y[i][0]*20*ss + tx) + mapWidth/2) + "," +
-                                                         ((Y[i][1]*20*ss + ty) + mapHeight/2) + ")"; });
+                                                                ((Y[i][0]*20*ss + tx) + mapWidth/2) + "," +
+                                                                ((Y[i][1]*20*ss + ty) + mapHeight/2) + ")"; });
      }
 
      var svg;
@@ -507,6 +550,11 @@
         .attr("font-size", 12)
         .text(function(d) { return d; });
 
+       g.append("svg:title")
+        .text(function(d, i) {
+		      return "distance rank: "+ i +"  "+"\nfrequency rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+	      });
+
        var zoomListener = d3.behavior.zoom()
                             .scaleExtent([0.1, 10])
                             .center([0,0])
@@ -700,14 +748,14 @@
           <li><a href="#tabs-2">Semantics (SOM)</a></li>
           <li><a href="#tabs-3">Syntagmatic (collocators)</a></li>
         </ul>
-        <div id="tabs-1">
+        <div id="tabs-1" style="display: flex;  padding: 5px; flex-flow: row wrap;">
           % if($lists && (@$lists) > 0 && (@$lists)[0]) {
             <div id="wrapper">
-              <div id="first" style="min-width: 320px; margin-bottom: 15px;">
+              <div id="first" style="width: 230px; margin-bottom: 15px;">
                 <table class="display compact nowrap" id="firsttable">
                   <thead>
                     <tr>
-                      <th align="right">#</th><th align="right">cos</th><th align="left">similars</th>
+                      <th align="right">#</th><th align="right">cos</th><th align="left">similars by w2v</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -721,43 +769,59 @@
                   </tbody>
                 </table>
               </div>
-              <script>
-              </script>
-              <div id="second">
+              % if($haveSProfiles) {
+                <div id="sprofilesdiv" style="width: 200px; padding-right: 10px;"> 
+                  <table class="display compact nowrap" id="sprofiles">
+                    <thead>
+                      <tr>
+                        <th align="right">cos</th><th align="left">similars by coll. profile</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td align="right">
+                        </td>
+                        <td></td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              %}
+            <div id="second">
                 <div id="embed">
                 </div>
                 <div id="cost">
                 </div>
               </div>
             </div>
-          % } elsif($word !~ /^\s*$/) {
-          <div id="wrapper">
-            <div id="not-found-dialog" title="Not found">
-              <p>ERROR: "<%= $word %>" not found in vocabluary.</p>
-              <p>If you are sure you have spelled the word as intended, you can try to increase the cutoff parameter in the options menu.</p>
-            </div>
-            <script>
-             $( function() {
-               $( "#not-found-dialog" ).dialog({
-                 autoOpen: true,
-                 modal: true,
-                 draggable: false,
-                 height: "auto",
-                 width: "auto",
-                 resizable: false,
-                 buttons: {
-                   "OK": function() {
-                     $( this ).dialog( "close" );
-                   },
-                   "Apply": function() {
-                     window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
-                   }
-                 }
-               });
-             });
-            </script>
-          </div>
-             % }
+                % } elsif($word !~ /^\s*$/) {
+                <div id="wrapper">
+                  <div id="not-found-dialog" title="Not found">
+                    <p>ERROR: "<%= $word %>" not found in vocabluary.</p>
+                    <p>If you are sure you have spelled the word as intended, you can try to increase the cutoff parameter in the options menu.</p>
+                  </div>
+                  <script>
+                   $( function() {
+                     $( "#not-found-dialog" ).dialog({
+                       autoOpen: true,
+                       modal: true,
+                       draggable: false,
+                       height: "auto",
+                       width: "auto",
+                       resizable: false,
+                       buttons: {
+                         "OK": function() {
+                           $( this ).dialog( "close" );
+                         },
+                         "Apply": function() {
+                           window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
+                         }
+                       }
+                     });
+                   });
+                  </script>
+                </div>
+          % }
         </div>
         <div id="tabs-2" style="display: flex;  padding: 5px; flex-flow: row wrap;">
           <div id="som2" style="width: 800;">
@@ -778,7 +842,7 @@
                     <th title="Sum of activations over the selected colunns normalized by the total activation sum of the selected columns." align="right">Σa/Σw'</th>
                     <th title="Co-norm of the column-normalized activations over the colunns selected by the auto-focus." align="right">⊥(a/c)</th>
                     <th title="Sum of the activations over the whole window normalized by the total window sum (no auto-focus)." align="right">Σa/Σw</th>
-                    <th align="left">collocator</th>
+                    <th align="left">collocator (by w2v)</th>
                   % }
                 </tr>
               </thead>
@@ -813,7 +877,7 @@
                     <th title="nPMI restricted to left neighbour">l-nPMI</th>
                     <th title="nPMI restricted to right neighbour">r-nPMI</th>
                     <th title="raw max frequency of collocation within window">raw</th>
-                    <th>collocator</th>
+                    <th>collocator (by collocation analysis)</th>
                   </tr>
                 % }
               </thead>
@@ -838,10 +902,10 @@
               </tbody>
             </table>
           </div>
-<!--
-          <div style="clear:both" ></div>
-          <div style="float: right; overflow: hidden" id="extra"><button onClick="showCollocatorSOM()"> </button></div>
--->
+          <!--
+               <div style="clear:both" ></div>
+               <div style="float: right; overflow: hidden" id="extra"><button onClick="showCollocatorSOM()"> </button></div>
+          -->
         </div>
       </div>
     </div> <!-- topwrapper  -->