diff --git a/templates/index.html.ep b/templates/index.html.ep
index 2d07674..86ca47a 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -8,9 +8,9 @@
 		<script src = "https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.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"
-integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
-crossorigin="anonymous"></script>
+				src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
+				integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
+				crossorigin="anonymous"></script>
     <script>
      $('#firstable').hide();
 		 $(document).ready(function() {
@@ -23,6 +23,17 @@
 						 }
 				 } );
 
+				 $("input").bind("keydown", function(event) {
+						 // track enter key
+						 var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
+						 if (keycode == 13) { // keycode for enter key
+								 // force the 'Enter Key' to implicitly click the Update button
+								 document.getElementById('SEARCH').click();
+								 return false;
+						 } else  {
+								 return true;
+						 }});
+
 				 $(".selector").tabs({ active: 1 });
 
 				 $('#firsttable').DataTable({
@@ -48,6 +59,44 @@
 				 } );
 		 });
 
+		 $(function(){
+				 $("#dropdownoptions").dialog({
+						 title: "Options",
+						 autoOpen: false,
+						 modal: false,
+						 draggable: false,
+						 height: "auto",
+						 width: "auto",
+						 resizable: false,
+						 buttons: {
+								 "Cancel": function() {
+										 $( this ).dialog( "close" );
+								 },
+								 "Apply": function() {
+										 window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
+								 }
+						 }
+				 });
+		 });
+
+		 $(function(){
+				 $("#SEARCH").click(function() {
+						 window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
+				 });
+		 });
+
+		 $(function(){
+				 $("#showoptions").click(function(){
+						 $("#dropdownoptions").dialog("open");
+						 var target = $(this);
+						 $("#dropdownoptions").dialog("widget").position({
+								 my: 'left bottom',
+								 at: 'left bottom',
+								 of: target
+						 });
+				 });
+		 });
+
 		 $( function() {
 				 $( "#iterations" ).spinner({
 						 spin: function( event, ui ) {
@@ -119,23 +168,23 @@
 	     font-size: 11pt;
      }
 
-.tabs-left-vertical .ui-tabs-nav { 
-    position: absolute; 
-    width: 21em; 
-    transform: translate(-100%,0%) rotate(-90deg); 
-    transform-origin: 100% 0%; 
-} 
-     .
-.tabs-left-vertical .ui-tabs-nav li { 
-    float: right; 
-} 
+		 .tabs-left-vertical .ui-tabs-nav {
+			 position: absolute;
+			 width: 21em;
+			 transform: translate(-100%,0%) rotate(-90deg);
+			 transform-origin: 100% 0%;
+		 }
 
-.tabs-left-vertical .ui-tabs-panel { 
-    padding-left: 3.5em; 
-} 
+		 .tabs-left-vertical .ui-tabs-nav li {
+			 float: right;
+		 }
 
-.tabs-left-vertical .ui-tabs-panel { 
-    height: 20em; 
+		 .tabs-left-vertical .ui-tabs-panel {
+			 padding-left: 3.5em;
+		 }
+
+		 .tabs-left-vertical .ui-tabs-panel {
+			 height: 20em;
      }
 
      .mono {
@@ -218,7 +267,7 @@
 
      #second {
        min-width: 800px;
-//       border: 1px solid #333;
+			 //       border: 1px solid #333;
        overflow: hidden; /* if you don't want #second to wrap below #first */
      }
      #som2 svg {
@@ -272,8 +321,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) + ")";
 						});
      }
      
@@ -283,8 +332,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;
@@ -461,12 +510,14 @@
   <body onload="onload()">
 		<div id="topwrapper">
 			<div id="options"  class="widget">
-				<form>
+				<form id="queryform">
 					<input id="word" type="text" name="word" size="20"  placeholder="Word(s) to be searched" value="<%= $word %>" 
 								 title="When looking for multiple words use spaces as separators to search around the average vector and | as separator to get the neighbours for each word."/> 
-					<input type="submit" value="SEARCH">
-					<fieldset>
-						<legend>Settings</legend>
+					<input id="SEARCH" type="button" value="SEARCH">
+					<input type="button" id="showoptions" name="showoptions" value="Options" />
+				</form>
+				<div id="dropdownoptions" style="display: hidden">
+					<form id="optionsform">
 						<div class="controlgroup-vertical">
 							<label for="cutoff">cut-off</label>
 							<input id="cutoff" type="text" name="cutoff" size="10"  value="<%= $cutoff %>" title="Only consider the most frequent x word forms.">
@@ -490,11 +541,10 @@
 									<option value="2" <%= ($sort==2? "selected":"") %>>whole window</option>
 								</select>
 							% }
-							<span>  </span><input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
-							<br>
+							<input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
 						</div>
-					</fieldset>
-				</form>
+					</form>
+				</div>
 			</div>
 			<div id="tabs">
 				<ul>
@@ -503,68 +553,68 @@
 					<li><a href="#tabs-3">Syntagmatic (collocators)</a></li>
 				</ul>
 				<div id="tabs-1">
-						% if($lists && (@$lists) > 0 && (@$lists)[0]) {
-							<div id="wrapper">
-								<div id="first" style="width:220px">
-									<table class="display compact nowrap" id="firsttable">
-										<thead>
-											<tr>
-												<th align="right">#</th><th align="right">cos</th><th align="left">paradigmatic</th>
-											</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) {
-															% if(!grep{$_ eq $item->{word}} @words) {
-																%   push @vecs, $item->{vector};
-																%   push @words, $item->{word};
-																%   push @ranks, $item->{rank};
-																%   push @marked, ($marked->{$item->{word}}? 1 : 0);
-															% }
-															<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;
+					% if($lists && (@$lists) > 0 && (@$lists)[0]) {
+						<div id="wrapper">
+							<div id="first" style="width:220px">
+								<table class="display compact nowrap" id="firsttable">
+									<thead>
+										<tr>
+											<th align="right">#</th><th align="right">cos</th><th align="left">paradigmatic</th>
+										</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) {
+														% if(!grep{$_ eq $item->{word}} @words) {
+															%   push @vecs, $item->{vector};
+															%   push @words, $item->{word};
+															%   push @ranks, $item->{rank};
+															%   push @marked, ($marked->{$item->{word}}? 1 : 0);
 														% }
-  													<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 >= 100);
+														<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 >= 100);
+										% }
+					% }
 									</tbody>
 								</table>
 							</div>
-								<script>
-								 % use Mojo::ByteStream 'b';
-								 % my $urlprefix = url_with->query([word=>'']);
-								 $(window).load(function() {
-										 showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
-								 });
-								</script>
+							<script>
+							 % use Mojo::ByteStream 'b';
+							 % my $urlprefix = url_with->query([word=>'']);
+							 $(window).load(function() {
+									 showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
+							 });
+							</script>
             % } else {
 							<div id="wrapper">
 								<p>
@@ -578,7 +628,7 @@
 							<div id="cost">
 							</div>
 						</div>
-					    </div>
+					  </div>
 				</div>
         <div id="tabs-2">
 					<div id="som2" style="width: 800; height: 800px">
@@ -592,49 +642,49 @@
 							<thead>
 								<tr>
 									% if($collocators) {
-									<th>#</th>
-									<th align="right" title="The window around the target word that is considered for summation.">w'</th>
-									<th align="right" title="Raw (max.) activation of the collocator in the output layers.">a</th>
-									<th title="Σp(c<sub><small>@</small></sub>) – Sum of the probability approximations that the combination of the target word and the collocator at the relative position @ come from the training corpus. Single approximations can be distorted because of sub-sampling frequent words and the sum cannot itself be interpreted as probability." align="right">Σp</th>
-									<th align="right">Σp/|w|</th>
-									<th title="c" align="left">collocator</th>
-								% }
-							</tr>
-						</thead>
-						<tbody>
-							% for(my $i=0; $i < 100; $i++) {
-								% my $c = ($collocators? (@$collocators)[$i] : 0);
-								<tr>
-									<td align="right">
-  									<%= $i %>
-									</td>
-									% if($c) {
-										<td align="right">
-											<span class="mono"><%= bitvec2window( $c->{pos} ) %></span>
-										</td>																				
-										<td align="right">
-											<%= sprintf("%.3f", $c->{dist}) %>
-										</td>
-										<td align="right">
-											<%= sprintf("%.3e", $c->{norm}) %>
-										</td>
-										<td align="right">
-											<%= sprintf("%.3e", $c->{sum}) %>
-										</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"/>
+										<th>#</th>
+										<th align="right" title="The window around the target word that is considered for summation.">w'</th>
+										<th align="right" title="Raw (max.) activation of the collocator in the output layers.">a</th>
+										<th title="Σp(c<sub><small>@</small></sub>) – Sum of the probability approximations that the combination of the target word and the collocator at the relative position @ come from the training corpus. Single approximations can be distorted because of sub-sampling frequent words and the sum cannot itself be interpreted as probability." align="right">Σp</th>
+										<th align="right">Σp/|w|</th>
+										<th title="c" align="left">collocator</th>
 									% }
 								</tr>
-							% }
-						</tbody>
-					</table>
-				</div> <!-- - tab2 -->
+							</thead>
+							<tbody>
+								% for(my $i=0; $i < 100; $i++) {
+									% my $c = ($collocators? (@$collocators)[$i] : 0);
+									<tr>
+										<td align="right">
+  										<%= $i %>
+										</td>
+										% if($c) {
+											<td align="right">
+												<span class="mono"><%= bitvec2window( $c->{pos} ) %></span>
+											</td>
+											<td align="right">
+												<%= sprintf("%.3f", $c->{dist}) %>
+											</td>
+											<td align="right">
+												<%= sprintf("%.3e", $c->{norm}) %>
+											</td>
+											<td align="right">
+												<%= sprintf("%.3e", $c->{sum}) %>
+											</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>
+								% }
+							</tbody>
+						</table>
+					</div> <!-- - tab2 -->
 			  </div> <!-- tabs -->
       </div>
 		</div> <!-- topwrapper  -->