diff --git a/templates/index.html.ep b/templates/index.html.ep
index 9e78ea6..cdca76b 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -7,6 +7,7 @@
     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 		<script src = "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
 		<script src = "https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.js"></script>
+		<script src = "https://cdn.datatables.net/plug-ins/1.10.16/sorting/scientific.js"></script>
 		<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
     <script
 			src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
@@ -48,32 +49,54 @@
 						 ]
 				 } );
 
-         var t = $('#secondtable').DataTable({
-						 "sScrollY": "800px",
-						 "bScrollCollapse": true,
-						 "bPaginate": false,
-						 "bJQueryUI": true,
-						 "dom": '<"top">rt<"bottom"flp><"clear">',
-						 "columnDefs": [
-								 { "searchable": false,
-									 "orderable": false,
-									 "targets": 0
-								 }, 
-								 { "orderSequence": [ "desc" ], "targets": [ 2, 3, 4, 5, 6 ] },
-								 { "orderSequence": [ "asc", "desc" ], "targets": [ 1, 7 ] },
-						 ],
-						 "order": [[ 4, 'desc' ]],
-				 } );
-				 t.on( 'order.dt search.dt', function () {
-						 t.column(0, {order:'applied'}).nodes().each( function (cell, i) {
-								 cell.innerHTML = i+1;
+				 function bitvec2window(n) {
+						 var str = n.toString(2).padStart(10, "0")
+												.replace(/^([0-9]{5})/, '$1x')
+												.replace(/0/g, '·')
+												.replace(/1/g, '+');
+						 return str;
+				 }
+
+				 var collocatorData = <%= b(Mojo::JSON::to_json($collocators)) %>; 
+				 
+				 if (collocatorData != null) {
+						 var t = $('#secondtable').DataTable({
+								 data: collocatorData,
+								 "sScrollY": "800px",
+								 "bScrollCollapse": true,
+								 "bPaginate": false,
+								 "bJQueryUI": true,
+								 "dom": '<"top">rt<"bottom"flp><"clear">',
+								 "columns": [
+										 { "data": "rank", type: "allnumeric" },
+										 { "data": "pos", width: "7%", sClass: "dt-center mono compact", render: function ( data, type, row ) {return bitvec2window(data) }},
+										 { "data": "max",  render: function ( data, type, row ) {return data.toFixed(3) }},
+										 { "data": "conorm", render: function ( data, type, row ) {return data.toFixed(3) }},
+										 { "data": "prob", type: "scientific", render: function ( data, type, row ) {return data.toExponential(3) }  },
+										 { "data": "cprob", type: "scientific", render: function ( data, type, row ) {return data.toExponential(3) }  },
+										 { "data": "overall", type: "scientific", render: function ( data, type, row ) {return data.toExponential(3) } },
+										 { "data": "word",  sClass: "collocator" }
+								 ],
+								 "columnDefs": [
+										 { className: "dt-right", "targets": [0,2,3,4,5,6] },
+										 { className: "dt-center", "targets": [ 1] },
+										 { "searchable": false,
+											 "orderable": false,
+											 "targets": 0
+										 }, 
+										 { "type": "scientific", targets: [2,3,4,5,6] },
+										 { "orderSequence": [ "desc" ], "targets": [ 2, 3, 4, 5, 6 ] },
+										 { "orderSequence": [ "asc", "desc" ], "targets": [ 1, 7 ] },
+								 ],
+								 "order": [[ 4, 'desc' ]],
 						 } );
-				 } ).draw();
-
+						 t.on( 'order.dt search.dt', function () {
+								 t.column(0, {order:'applied'}).nodes().each( function (cell, i) {
+										 cell.innerHTML = i+1;
+								 } );
+						 } ).draw();
+				 }
 		 });
-
-
-
 		 $(function(){
 				 $("#dropdownoptions").dialog({
 						 title: "Options",
@@ -101,6 +124,12 @@
 		 });
 
 		 $(function(){
+				 $("td.collocator").click(function(){
+						 queryKorAPCII(this.textContent + " /w5 <%= $word %>");
+				 });
+		 });
+     
+		 $(function(){
 				 $("#showoptions").click(function(){
 						 $("#dropdownoptions").dialog("open");
 						 var target = $(this);
@@ -733,7 +762,7 @@
 								<tr>
 									% if($collocators) {
 										<th>#</th>
-										<th align="right" title="The columns (c) around the target are considered for summation are marked with *.">w'</th>
+										<th align="center" title="The columns (c) around the target are considered for summation are marked with *.">w'</th>
 										<th align="right" title="Raw (max.) activation of the collocator in the output layers.">max(a)</th>
 										<th title="Co-normalized raw activation sum of the collocator in the selected columns." align="right">⊥Σa</th>
 										<th title="Sum of activations over the selected colunns normalized by the total activation sum of the selected columns." align="right">Σa/Σc</th>
@@ -744,42 +773,24 @@
 								</tr>
 							</thead>
 							<tbody>
-								% for(my $i=0; $i < (@$collocators); $i++) {
-									% my $c = ($collocators? (@$collocators)[$i] : 0);
-									<tr>
+								<tr>
+									<td align="right">
+									</td>
 										<td align="right">
-  										<%= $i %>
 										</td>
-										% if($c) {
-											<td align="right">
-												<span class="mono"><%= bitvec2window( $c->{pos} ) %></span>
-											</td>
-											<td align="right">
-												<%= sprintf("%.3f", $c->{max}) %>
-											</td>
-											<td align="right">
-												<%= sprintf("%.3e", $c->{conorm}) %>
-											</td>
-											<td align="right">
-												<%= sprintf("%.3e", $c->{prob}) %>
-											</td>
-											<td align="right">
-												<%= sprintf("%.3e", $c->{cprob}) %>
-											</td>
-											<td align="right">
-												<%= sprintf("%.3e", $c->{overall}) %>
-											</td>
-											<td align="left">
-												<a onclick="<%= sprintf("queryKorAPCII('%s /w5 %s')", $c->{word}, $word) =%>"
-													 title="freq. rank: <%= $c->{rank} =%>">
-													<%= $c->{word} %>
-												</a>
-											</td>
-										% } else {
-											<td colspan="5"/>
-										% }
-									</tr>
-								% }
+										<td align="right">
+										</td>
+										<td align="right">
+										</td>
+										<td align="right">
+										</td>
+										<td align="right">
+										</td>
+									  <td align="right">
+										</td>
+										<td align="left">
+										</td>
+								</tr>
 							</tbody>
 						</table>
 					</div> <!-- - tab2 -->