diff --git a/templates/doc/ql/poliqarp-plus.html.ep b/templates/doc/ql/poliqarp-plus.html.ep
index 7d0ede1..51fbd29 100644
--- a/templates/doc/ql/poliqarp-plus.html.ep
+++ b/templates/doc/ql/poliqarp-plus.html.ep
@@ -4,7 +4,7 @@
 
 <p>The following tutorial introduces all features provided by our version of the Poliqarp Query Language and some KorAP specific extensions.</p>
 
-<section id="tut-segments">
+<section id="segments">
   <h3>Simple Segments</h3>
 
   <p>The atomic elements of Poliqarp queries are segments. Most of the time segments represent words and can be simply queried:</p>
@@ -22,7 +22,7 @@
 
   <p>The query above will find all occurrences of <code>laufen</code> irrespective of the capitalization of letters, so <code>wir laufen</code> will be find as well as <code>das Laufen</code> and even <code>&quot;GEH LAUFEN!&quot;</code>.
 
-  <h4 id="tut-regexp">Regular Expressions</h4>
+  <h4 id="regexp">Regular Expressions</h4>
 
   <p>Segments can also be queried using <%= kalamar_tut_link_to 'regular expressions', '/tutorial/regular-expressions' %> - by surrounding the segment with double quotes.</p>
 
@@ -51,7 +51,7 @@
   %= kalamar_tut_query poliqarp => '"l(au|ie)fen"/xi', cutoff => 1
 </section>
 
-<section id="tut-complex">
+<section id="complex">
   <h3>Complex Segments</h3>
 
   <p>Complex segments are expressed in square brackets and contain additional information on the resource of the term under scrutiny by providing key/value pairs, separated by an equal-sign.</p>
@@ -109,7 +109,7 @@
   </blockquote>
 </section>
 
-<section id="tut-spans">
+<section id="spans">
   <h3>Span Segments</h3>
 
   <p>Not all segments are bound to words - some are bound to concepts spanning multiple words, for example noun phrases, sentences, or paragraphs.
@@ -120,7 +120,7 @@
     <p>Otherwise they can be treated in exactly the same way as simple or complex segments.</p>
 </section>
 
-<section id="tut-paradigmatic-operators">
+<section id="paradigmatic-operators">
   <h3>Paradigmatic Operators</h3>
 
   <p>A complex segment can have multiple properties a token has to fulfill. For example to search for all words with the surface form <code>laufe</code> (no matter if capitalized or not) that have the lemma <code>lauf</code> (and not, for example, <code>laufen</code>, which would indicate a verb or a gerund), you can search for:</p>
@@ -145,10 +145,10 @@
   %= kalamar_tut_query poliqarp => '[(base=laufen | base=gehen) & tt/pos=VVFIN]'
 </section>
 
-<section id="tut-syntagmatic-operators">
+<section id="syntagmatic-operators">
   <h3>Syntagmatic Operators</h3>
 
-  <h4 id="tut-syntagmatic-operators-sequence">Sequences</h4>
+  <h4 id="syntagmatic-operators-sequence">Sequences</h4>
 
   <p>Sequences can be used to search for segments in order. For example to search for the word &quot;alte&quot; preceded by &quot;der&quot; and followed by &quot;Mann&quot;, you can simple search for the sequence of simple expressions separated by whitespaces.</p>
 
@@ -184,7 +184,7 @@
 
   %= kalamar_tut_query poliqarp => 'der (junge | alte) Mann'
 
-  <h4 id="tut-syntagmatic-operators-repetitions">Repetition</h4>
+  <h4 id="syntagmatic-operators-repetitions">Repetition</h4>
 
   <p>Repetitions in Poliqarp are realized as in <%= kalamar_tut_link_to 'regular expressions', '/tutorial/regular-expressions' %>, by giving quantifieres in curly brackets.</p>
   <p>To search for a sequence of three occurrences of <code>der</code>, you can formulate your query in any of the following ways - they will have the same results:</p>
@@ -277,7 +277,7 @@
       
 </section>
 
-<section id="tut-class-operators">
+<section id="class-operators">
   <h3>Class Operators</h3>
 
   <p>Classes are used to group sub matches by surrounding curly brackets and a class number <code>{1:...}</code>. Classes can be used to refer to sub matches in a query, similar to captures in regular expressions. In Poliqarp+ classes have multiple purposes, with highlighting being the most intuitive one:</p>
diff --git a/templates/match.html.ep b/templates/match.html.ep
index 43f172d..8693511 100644
--- a/templates/match.html.ep
+++ b/templates/match.html.ep
@@ -1,38 +1,23 @@
-%# ID, title, corpusID, author, pubDate, textClass
 % my $match = stash('match') || {}; 
-<li data-corpus-id="<%= $match->{corpusID} %>" \
-data-doc-id="<%= $match->{docID} %>" \
-data-match-id="<%= $match->{ID} %>" \
-id="<%= $match->{corpusID} %>-<%= $match->{docID} %>-<%= $match->{ID} %>"\
-<% if (current_route eq 'match') { %> class="active"<% } =%>
->
-%#
-%# -- Match information (snippet, morph table, tree information etc.)
+% my $id = $match->{corpusID} . '-' . $match->{docID} . '-' . $match->{ID};
+<li data-corpus-id="<%= $match->{corpusID} %>"
+    data-doc-id="<%= $match->{docID} %>"
+    data-text-id="hmmm"
+    data-match-id="<%= $match->{ID} %>"
+    %# TODO: This needs to be retrieved per match 
+    data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
+    id="<%= $id %>"\
+<% if (current_route eq 'match') { %> class="active"<% } =%>>
   <div>
+%# --- Snippet
     <div class="snippet<%= $match->{startMore} ? ' startMore' : '' %><%= $match->{endMore} ? ' endMore' : '' %>"><%== $match->{snippet} %></div>
-    <div class="tokenInfo"></div>
-%#    <div class="treeInfo"></div>
   </div>
-%#
 %# -- Reference string
-  <p>\
-% if ($match->{title}) {
-<strong><%= $match->{title} %></strong>\
-% };
-<%= $match->{author} ? ' by ' . $match->{author}  : '' %><% if ($match->{title} || $match->{author}) { %>;<% } =%>
- published on <%= date_format $match->{pubDate} %>\
- as <%= $match->{docID} %> (<%= $match->{corpusID} %>)\
+  <p class="ref">\
+<% if ($match->{title}) { %><strong><%= $match->{title} %></strong><% }; %>\
+<%= $match->{author} ? ' ' . loc('by') . ' ' . $match->{author}  : '' %>\
+<% if ($match->{title} || $match->{author}) { %>;<% } =%> \
+<%= loc('pubOn') %> <%= $match->{pubDate} %> \
+(<%= $id %>)\
 </p>
-%#
-%# -- Action buttons
-  <ul class="action right">
-% if (current_route ne 'match') {
-    <li class="close" title="Close"><a href="#"><i class="fa fa-toggle-up"></i></a></li>
-%#  <li class="open" title="Open in new tab"><%= link_to 'match', { corpus_id => $match->{corpusID}, doc_id => $match->{docID}, match_id => $match->{ID} }, target => '_blank', begin %><i class="fa fa-external-link-square"></i><% end %></li>
-    <li class="open" title="Open in new tab"><a href="#<%= $match->{corpusID} %>-<%= $match->{docID} %>-<%= $match->{ID} %>" target="_blank"><i class="fa fa-external-link-square"></i></a></li>
-% };
-    <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
-%#    <li onclick="showTree(this, 'xip', 'c')" title="Tree Visualizations"><i class="fa fa-sitemap"></i></li>
-%#    <li title="Remember"><i class="fa fa-star-o"></i></li>
-  </ul>
 </li>
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 02e660e..2bd2c12 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -1,34 +1,41 @@
 <header>
-  <a href="/" class="logo" title="<%= title %>"><h1><span><%= title %></span></h1></a>
+  <a href="/"
+     class="logo"
+     title="<%= title %>"><h1><span><%= title %></span></h1></a>
+<!--
   <div class="button top">
-    <a href="#" class="login" title="<%= loc 'login' %>"><span><%= loc 'login' %></span></a>
+    <a href="#"
+       class="login"
+       title="<%= loc 'login' %>"><span><%= loc 'login' %></span></a>
   </div>
-  <form autocomplete="off" action="/kalamar">
+-->
+  <form autocomplete="off" action="<%= url_for 'index' %>">
     <div id="searchbar">
-      <input placeholder="<%= loc 'searchplaceholder' %>" name="q" id="q-field" autofocus="autofocus" type="search" />
+      %= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => loc('searchplaceholder')
       <button type="submit" title="<%= loc 'go' %>"><span><%= loc 'go' %></span></button>
     </div>
+    <!-- Search in the following virtual collection -->
+    <!--
     <div id="vc-view"></div>
     <%= loc 'in' %> <input type="hidden" id="vc-name" name="vc-name" value="Wikipedia" />
     <input type="text" name="vc" id="vc" value="corpusID = Wikipedia" />
-    <%= loc 'with' %> <span class="select">
-      <select name="ql" id="ql-field">
-	<option value="poliqarp">Poliqarp</option>
-	<option value="cosmas2">Cosmas II</option>
-	<option value="annis">Annis</option>
-	<option value="cql">CQL v1.2</option>
-      </select>
+    -->
+    <%= loc 'with' %>
+    <span class="select">
+      %= select_field 'ql', [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2'], ['Annis' => 'annis'], ['CQL v1.2' => 'cql']], id => 'ql-field'
     </span>
     <div class="button right">
       % param(cutoff => 1) unless param 'q';
       %= check_box cutoff => 1, id => 'q-cutoff-field', class => 'checkbox'
       <label for="q-cutoff-field"><span></span><%= loc('glimpse') %></label>
+<!--
       % unless (current_route 'tutorial') {
       <a href="/doc/faq"
 	 title="<%= loc 'faq' %>"
 	 class="question"
 	 id="view-faq"><span><%= loc 'faq' %></span></a>
       % };
+-->
       <a href="/doc"
 	 title="<%= loc 'tutorial' %>"
 	 class="tutorial"
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 242a8d9..fbe3895 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -1,55 +1,27 @@
-% if (param 'q') {
-% content 'main' => begin
-%     unless (param 'snippet') {
-<div style="clear: both">
-%       my $url = url_with->query(['p' => '{page}']);
-%       my $pages = search->total_pages;
-  <div id="pagination"><%= pagination(search->start_page, $pages, $url) =%></div>
-  <p class="found">Found
+% layout 'main';
+
+<div class="resultinfo">
+%#  <div id="pagination"><%= pagination(search->start_page, $pages, $url) =%></div>
+
 % my $found = search->total_results;
-% if ($found == -1) {
-%   $found = 'unknown amount of';
-% } elsif (search->time_exceeded) {
-%   $found = 'more than ' . $found;
-% }; 
-    <span id="total-results"><%= $found %> matches</span>
-    <% if (search->benchmark) { %> in <%= search->benchmark %><% } %>
-  </p>
+% if ($found != -1) {
+%   my $found_text = $found;
+%   if (search->time_exceeded) {
+%     $found_text = '> ' . $found;
+%   };
+  <p class="found"><span id="total-results"><%= $found_text %></span> <%= loc('matchCount', found => $found) %></p>
+% } else {
+  <p></p>
+% };
+%#   <% if (search->benchmark) { %> in <%= search->benchmark %><% } %>
 </div>
-%= include 'query'
-%= include 'api-communication'
-%     };
 
 % if (search->total_results != 0 && search->results->size) {
 <div id="search">
-<ol class="align-left">
-%=    search_results begin
-%=      include 'match', match => $_
-%     end
-</ol>
-</div>
-% };
-% end
-
-% content 'javascript' => begin
-%=   javascript begin
-
-var openLi = function (e) {
-  this.classList.add("active");
-  e.stopPropagation();
-};
-
-var closeLi = function (e) {
-  this.parentNode.parentNode.classList.remove("active");
-  e.stopPropagation();
-};
-
-var inactiveLi = document.querySelectorAll("#search > ol > li:not(.active)");
-for (var i = 0; i < inactiveLi.length; i++) {
-  inactiveLi[i].addEventListener("click", openLi, false);
-  inactiveLi[i].getElementsByClassName("close")[0].addEventListener("click", closeLi, false);
-};
-
+  <ol class="align-left">
+%=  search_results begin
+%=    include 'match', match => $_
 %   end
-% end
-% };
+  </ol>
+</div>
+% }