diff --git a/templates/index.html.ep b/templates/index.html.ep
index 6fa4210..da66918 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -40,19 +40,6 @@
 			   });
 		   });
 
-			 $('#firsttable').DataTable({
-				 "sScrollY": "780px",
-				 "bScrollCollapse": true,
-				 "bPaginate": false,
-				 "bJQueryUI": true,
-				 "dom": '<"top">rt<"bottom"flp><"clear">',
-				 "aoColumnDefs": [
-					 { "sWidth": "10%", "aTargets": [ -1 ] }
-				 ]
-			 } );
-
-       $( "#first" ).clone().prependTo( "#tabs-2" );
-
        function changeCharColor(txt, heat) {
          var newText = "";
          for (var i=0, l=txt.length; i<l; i++) {
@@ -74,6 +61,56 @@
 			   return changeCharColor(str, heat);
 			 }
 
+			 % use Mojo::ByteStream 'b';
+			 % my $urlprefix = url_with->query([word=>'']);
+			 var paraResults = <%= b(Mojo::JSON::to_json($lists)) %>;
+       var urlprefix =  new URLSearchParams(window.location.search);
+       if (paraResults.length > 0) {
+         var nvecs = [],
+             nwords = [],
+             nranks = [],
+             nmarked = [];
+         for(var i = 0; i < paraResults.length; i++) {
+           nwords = nwords.concat(paraResults[i].map(function(a){return a.word;}));
+           nvecs = nvecs.concat(paraResults[i].map(function(a){return a.vector;}));
+           nranks = nranks.concat(paraResults[i].map(function(a){return a.rank;}));
+           nmarked = nmarked.concat(paraResults[i].map(function(a){return a.marked;}));
+         }
+         showMap({target: " "+urlParams.get('word')+" ", mergedEnd: 0, words: nwords, vecs: nvecs, ranks: nranks, marked: nmarked, urlprefix: "?"+urlprefix} );
+				 var t = $('#firsttable').DataTable({
+           data: paraResults[0],
+					 "sScrollY": "780px",
+					 "bScrollCollapse": true,
+					 "bPaginate": false,
+					 "bJQueryUI": true,
+					 "dom": '<"top">rt<"bottom"flp><"clear">',
+					 "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>' }}
+					 ],
+					 "columnDefs": [
+						 { className: "dt-right", "targets": [0,1] },
+						 { "searchable": false,
+							 "orderable": false,
+							 "targets": 0
+						 },
+						 { "orderSequence": [ "desc" ], "targets": [ 1 ] },
+						 { "orderSequence": [ "asc", "desc" ], "targets": [ 2 ] },
+					 ],
+					 "order": [[ 1, 'desc' ]],
+			   } );
+
+         t.on( 'order.dt search.dt', function () {
+					 t.column(0, {order:'applied'}).nodes().each( function (cell, i) {
+						 cell.innerHTML = i+1;
+					 } );
+				 } ).draw();
+
+         $( "#first" ).clone().prependTo( "#tabs-2" );
+
+       }
+
 			 var collocatorData = <%= b(Mojo::JSON::to_json($collocators)) %>;
        var maxHeat; // = Math.max.apply(Math,collocatorData.map(function(o){return o.cprob;}))
 
@@ -81,7 +118,7 @@
          maxHeat = Math.max.apply(Math,collocatorData.map(function(o){return Math.max.apply(Math,o.heat);}))
 				 var t = $('#secondtable').DataTable({
            data: collocatorData,
-					 "sScrollY": "800px",
+					 "sScrollY": "780px",
 					 "bScrollCollapse": true,
 					 "bPaginate": false,
 					 "bJQueryUI": true,
@@ -457,8 +494,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) + ")";
 					});
      }
 
@@ -468,8 +505,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;
@@ -704,65 +741,17 @@
 										</tr>
 									</thead>
 									<tbody>
-										% my $j=0; my @words; my @vecs; my @ranks; my @marked;
-										% for my $list (@$lists) {
-											% my $i=0; while($list) {
-												% my $item = (@$list)[$i];
-												% my $c = ($collocators? (@$collocators)[$i] : 0);
-												% last if(!$c && !$item);
-												<tr>
-													<td align="right">
-  													<%= ++$i %>.
-													</td>
-													% if($item) {
-														<td align="right">
-  														<%= sprintf("%.3f", $item->{dist}) %>
-														</td>
-														<td>
-															% my $class = ($marked->{$item->{word}}? "marked " : "");
-															% my $r = $item->{rank};
-															% if($r < $mergedEnd) {
-																%   $class .= "merged";
-																%   $r .= " (merged vocab)";
-															% } elsif($mergedEnd!=0 && $r > $mergedEnd) {
-															%   $r -= $mergedEnd;
-													% }
-  												<a class="<%= $class =%>"
-														 title="freq. rank: <%= $r =%>"
-														 href="<%= url_with->query([word => $item->{word}]) =%>">
-														<%= $item->{word} =%>
-													</a>
-														</td>
-											% } else {
-														<td colspan="2"/>
-											% }
-												</tr>
-												% last if($i >= $no_nbs);
-										% }
-					% }
+										<tr>
+											<td align="right">
+											</td>
+											<td align="right">
+											</td>
+											<td></td>
+										</tr>
 									</tbody>
 								</table>
 							</div>
 							<script>
-							 % use Mojo::ByteStream 'b';
-							 % my $urlprefix = url_with->query([word=>'']);
-							 $(window).load(function() {
-								 var result = <%= b(Mojo::JSON::to_json($lists)) %>;
-                 var nvecs = [],
-                     nwords = [],
-                     nranks = [],
-                     nmarked = [];
-                 for(var i = 0; i < result.length; i++) {
-                   nwords = nwords.concat(result[i].map(function(a){return a.word;}));
-                   nvecs = nvecs.concat(result[i].map(function(a){return a.vector;}));
-                   nranks = nranks.concat(result[i].map(function(a){return a.rank;}));
-                   nmarked = nmarked.concat(result[i].map(function(a){return a.marked;}));
-                 }
-                 var urlprefix =  new URLSearchParams(window.location.search);
-                 urlprefix.set("word","");
-                 showMap({target: " "+urlParams.get('word')+" ", mergedEnd: 0, words: nwords, vecs: nvecs, ranks: nranks, marked: nmarked, urlprefix: "?"+urlprefix} );
-                 //								 showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => "?"+$urlprefix})); %>);
-							 });
 							</script>
 						  <div id="second">
 							  <div id="embed">
@@ -771,14 +760,14 @@
 							  </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() {
+          % } 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,
@@ -837,10 +826,9 @@
 									</td>
 									<td align="right">
 									</td>
-									<td align="right">
-									</td>
-									<td align="left">
-									</td>
+<script
+			src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
+												</td>
 								</tr>
 							</tbody>
 						</table>