diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 36db1fb..492acdf 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -3,7 +3,8 @@
 %= include 'partial/header'
   <body>
 
-% my $search_route = url_for;
+% my $location;
+% my $search_route;
 % unless (current_route 'tutorial') {
 <div id="tutorial">
 %   my $tut_page = url_for(session('tutorial') || 'tutorial');
@@ -16,6 +17,22 @@
   <iframe src="about:blank"
           data-src="<%= $tut_page->query([embedded => 1]) %>"></iframe>
 </div>
+%   if (current_route eq 'match') {
+%     $search_route = url_for('search_corpus');
+%     $location = 'in corpus <span class="location">' . stash('corpus_id') . '</span>';
+%   }
+%   else {
+%     $search_route = url_for;
+%     if (stash('doc_id')) {
+%       $location = ' in document <span class="location">' . stash('corpus_id') . '/' . stash('doc_id') . '</span>';
+%     }
+%     elsif (stash('corpus_id')) {
+%       $location = ' in corpus <span class="location">' . stash('corpus_id') . '</span>';
+%     }
+%     elsif (stash('collection_id')) {
+%       $location = ' in collection <span class="location">' . stash('collection_id') . '</span>';
+%     };
+%   }
 % }
 % else {
 %   $search_route = url_for('index');
@@ -25,28 +42,35 @@
   <a href="<%= url_for 'index' %>"><h1><span>KorAP- Korpusanalyseplattform der nächsten Generation</span></h1></a>
 
 %= form_for $search_route => begin
-%= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']], id => 'ql-field'
-<br />
-%= search_field 'q', id => 'q-field', autofocus => 'autofocus'
-<button type="submit" name="action" value="ok"><i class="fa fa-search"></i></button>
+  <div id="searchbar">
+%= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => 'Find ...'
+    <button type="submit"><i class="fa fa-search"></i></button>
 %   if (stash('test_port')) {
-<button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
+    <button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
 %   };
-% end
+  </div>
+  <% if ($location) { %><%== $location %><% } %>
+  with
+  <div class="select">
+    %= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']], id => 'ql-field'
+  </div>
+
 
 <div id="button-right">
-% if (param('q')) {
-<button type="button" onclick="$('#search > ol').toggleClass('left-aligned right-aligned'); $(this).children('i').toggleClass('fa-align-right fa-align-left')"><i class="fa fa-align-right"></i></button>
-% }
 % unless (current_route 'tutorial') {
-<button type="button" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
+<button type="button" title="Tutorial" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
 % };
+% if (param('q')) {
+<button type="button" title="Alignment" onclick="$('#search > ol').toggleClass('left-aligned right-aligned'); $(this).children('i').toggleClass('fa-align-right fa-align-left')"><i class="fa fa-align-right"></i></button>
+% }
 </div>
 
+% end
+
 </div>
 
 %= content 'sidebar' => begin
-<div id="sidebar" style="padding-top: 90px">
+<div id="sidebar">
 %= include 'collections'
   <i class="fa fa-bars"></i>
 </div>
diff --git a/templates/match.html.ep b/templates/match.html.ep
index 2ec5a44..d85eeee 100644
--- a/templates/match.html.ep
+++ b/templates/match.html.ep
@@ -2,6 +2,7 @@
 <li data-corpus-id="<%= $match->{corpusID} %>"
     data-doc-id="<%= $match->{docID} %>"
     data-match-id="<%= $match->{ID} %>"
+    id="<%= $match->{ID} %>"
 <% if (current_route eq 'match') { %>class="active"<% } %>
     >
   <div>
@@ -16,8 +17,10 @@
   </p>
   <ul class="action right">
 % if (current_route ne 'match') {
-    <li class="close" title="Close"><i class="fa fa-toggle-up"></i></li>
+    <li class="close" title="Close"><a href="#"><i class="fa fa-toggle-up"></a></i></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->{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 title="Tree Visualizations"><i class="fa fa-sitemap"></i></li>
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 542ef30..850e77b 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -1,14 +1,7 @@
 <head>
   <title><%= title %></title>
-%#= asset 'korap.css'
-%= stylesheet '/style.css'
-%= stylesheet '/hint.css'
-%= stylesheet '/table.css'
-%= stylesheet '/kwic-4.0.css'
-%= stylesheet '/fontawesome/font-awesome.min.css'
-%= stylesheet '/responsive.css', media => '(orientation: portrait) and (max-device-width: 800px)'
-%= javascript '/jquery-2.0.0.min.js'
-%= javascript '/translateTable.js'
-%= javascript '/hint.js'
+%= asset 'korap.css'
+%= asset 'korap.js'
   <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width;initial-scale=1.0;" />
 </head>
diff --git a/templates/partial/javascript.html.ep b/templates/partial/javascript.html.ep
index 3c44167..81c7519 100644
--- a/templates/partial/javascript.html.ep
+++ b/templates/partial/javascript.html.ep
@@ -81,8 +81,12 @@
   closeTutorial();
 };
 
-$("code.query.serial, #sidebar").on("click", function () {
+$("#sidebar").on("click", function () {
   $(this).toggleClass('active');
 });
 
+$("span.location").on("click", function () {
+  $("#sidebar").toggleClass('active');
+});
+
 % end
diff --git a/templates/query.html.ep b/templates/query.html.ep
index c6c17d5..0eebd0c 100644
--- a/templates/query.html.ep
+++ b/templates/query.html.ep
@@ -1,11 +1,23 @@
 % use JSON::XS;
 
 % if (stash('search.query') && stash('test_port')) {
-%   state $json = JSON::XS->new->allow_blessed->pretty;
-<code class="query serial<% if (param('action') eq 'inspect') { %> active<% } %>">
+%   my $action;
+%   if (param('action') && param('action') eq 'inspect') {
+%     $action = ' active" style="cursor: default';
+%   };
+%   state $json = JSON::XS->new->allow_blessed->pretty->canonical(1);
+<pre class="query serial<%== $action // '' %>">
   <span>JSON-LD Serialization for <%= param 'q' %> (<%= param 'ql' %>)</span>
-  <pre>
+  <code>
 <%= $json->encode(stash('search.query')) =%>
-  </pre>
-</code>
+  </code>
+</pre>
+%= javascript begin
+hljs.initHighlightingOnLoad();
+%   unless ($action) {
+$("pre.query.serial").on("click", function () {
+  $(this).toggleClass('active');
+});
+%   };
+% end
 % };
diff --git a/templates/query_info.html.ep b/templates/query_info.html.ep
index c9a5167..02710ce 100644
--- a/templates/query_info.html.ep
+++ b/templates/query_info.html.ep
@@ -1,3 +1,4 @@
 % content main => begin
+<p class="found">&nbsp;</p>
 %= include 'query'
 % end
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 92aadce..0cc4a90 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -15,6 +15,7 @@
 %= include 'query'
 %     };
 
+% unless (stash('search.totalResults') == 0) {
 <div id="search">
 <ol class="left-aligned">
 %=    search_hits begin
@@ -22,6 +23,7 @@
 %     end
 </ol>
 </div>
+% };
 
 %   end
 % end
diff --git a/templates/tutorial.html.ep b/templates/tutorial.html.ep
index b7d280e..c2f7c8a 100644
--- a/templates/tutorial.html.ep
+++ b/templates/tutorial.html.ep
@@ -13,26 +13,33 @@
   <li>How to use Poliqarp+ QL?</li>
   <li>How to use Cosmas-II QL?</li>
   <li>How to use CQL?</li>
+  <li>API</li>
+  <li>Search</li>
 </ul>
 -->
 
-<section id="intro">
-<h3>Introduction</h3>
-<p>This is a Tutorial to KorAP. It may be maintained separately (as a Wiki?) and
-has some nice features - like embedded example queries - just click on the queries below:</p>
+<section name="intro">
+<h3>Example Queries</h3>
+%# <p>This is a Tutorial to KorAP. It may be maintained separately (as a Wiki?) and has some nice features - like embedded example queries - just click on the queries below:</p>
 
+<p><strong>Poliqarp</strong>: Find all occurrences of the lemma &quot;baum&quot; as annotated by the default foundry.</p>
 %= korap_tut_query poliqarp => '[base=baum]'
 
+<p><strong>Cosmas-II</strong>: Find all occurrences of the words &quot;der&quot; and &quot;Baum&quot;, in case they are in a maximum distance of 5 tokens. The order is not relevant.</p>
 %= korap_tut_query cosmas2 => 'der /w5 Baum'
 
-%= korap_tut_query poliqarp => 'contains(<cnx/c=np>,[opennlp/p=KOUS])'
 
+<p><strong>Poliqarp+</strong>: Find all nominal phrases as annotated using Connexor, that contain an adverb as annotated by OpenNLP.</p>
+%= korap_tut_query poliqarp => 'contains(<cnx/c=np>,[opennlp/p=ADV])'
+
+<p><strong>Poliqarp+</strong>: Find all sentences as annotated by the base foundry that start with a sequence of one token in present tense as annotated by Connexor and the lemma &quot;der&quot; annotated by the default foundry. Highlight both terms of the sequence.</p>
 %= korap_tut_query poliqarp => 'startswith(<s>, {1:[cnx/m=PRES]}{2:[base=der]})'
 
-<p>And here is a short cheat sheet for foundries and layers</p>
+
+%# <p>And here is a short cheat sheet for foundries and layers</p>
 </section>
 
-<section id="cheatsheet">
+<section name="cheatsheet">
   <h3>Cheatsheet</h3>
   <ul>
     <li><strong>base</strong>
diff --git a/templates/tutorial/foundries.html.ep b/templates/tutorial/foundries.html.ep
new file mode 100644
index 0000000..8e2b5cc
--- /dev/null
+++ b/templates/tutorial/foundries.html.ep
@@ -0,0 +1 @@
+default foundries
diff --git a/templates/tutorial/poliqarp-plus.html.ep b/templates/tutorial/poliqarp-plus.html.ep
new file mode 100644
index 0000000..e310769
--- /dev/null
+++ b/templates/tutorial/poliqarp-plus.html.ep
@@ -0,0 +1,152 @@
+% content main => begin
+
+<h2>KorAP-Tutorial: Poliqarp+</h2>
+
+<section name="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>
+%# footnote: In the polish national corpus, Poliqarp can join multiple segments when identifying a single word.
+
+%= korap_tut_query poliqarp => 'Baum'
+
+<p>Sequences of simple segments are expressed using a space delimiter:</p>
+
+%= korap_tut_query poliqarp => 'der Baum'
+
+<p>Simple segments always refer to the surface form of a word. To search for surface forms without case sensitivity, you can use the <code>/i</code> flag.</p>
+
+%= korap_tut_query poliqarp => 'laufen/i'
+
+<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>.
+</section>
+
+<section name="regexp">
+  <h3>Regular Expressions</h3>
+
+<p>Segments can also be queried using <%= link_to 'tut-regex', 'regular expressions' %> - by surrounding the segment with double quotes.</p>
+
+%= korap_tut_query poliqarp => '"l(au|ie)fen"'
+
+<p>Regular expression segments will always match the whole segment, meaning the above query will find words starting with <code>l</code> and ending with <code>n</code>. To support subqueries, you can use the <code>/x</code> flag.
+
+%= korap_tut_query poliqarp => '"l(au|ie)fen"/x', cutoff => 1
+
+<p>The <code>/x</code> will search for all segments that contain a sequence of characters the regular expression matches. That means the above query is equivalent to:</p>
+
+%= korap_tut_query poliqarp => '.*?"l(au|ie)fen.*?"', cutoff => 1
+
+<p>The <code>/x</code> flag can also be used in conjuntion with strict expressions to search for substrings:</p>
+
+%= korap_tut_query poliqarp => 'trenn/xi', cutoff => 1
+
+<p>The above query will find all occurrences of segments including the string <code>trenn</code> case insensitive, like &quot;Trennung&quot;, &quot;unzertrennlich&quot;, or &quot;Wettrennen&quot;.</p>
+
+<blockquote>
+  <p>These kinds of queries are extremely slow!</p>
+</blockquote>
+
+<p>You can again apply the <code>/i</code> flag to search case insensitive.</p>
+
+%= korap_tut_query poliqarp => '"l(au|ie)fen"/xi', cutoff => 1
+
+</section>
+
+<section name="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 prividing key/value pairs, separated by a <code>=</code> symbol.</p>
+
+<p>The KorAP implementation of Poliqarp provides three special segment keys: <code>orth</code> for surface forms, <code>base</code> for lemmata, and <code>pos</code> for Part-of-Speech. The following complex query finds all surface forms of <code>Baum</code>.</p>
+
+%# There are more special keys in Poliqarp, but KorAP doesn't provide them.
+
+%= korap_tut_query poliqarp => '[orth=Baum]'
+
+<p>The query is thus equivalent to:</p>
+
+%= korap_tut_query poliqarp => 'Baum'
+
+<p>Complex segments expect simple expressions as a values, meaning that the following expression is valid as well:</p>
+
+%= korap_tut_query poliqarp => '[orth="l(au|ie)fen"/xi]', cutoff => 1
+
+<p>Another special key is <code>base</code>, refering to the lemma annotation of the <%= link_to 'tut-foundries', 'default foundry' %>. The following query finds all occurrences of segments annotated as the lemma <code>Baum</code> by the default foundry.</p>
+
+%= korap_tut_query poliqarp => '[base=Baum]'
+
+<p>The third special key is <code>pos</code>, refering to the part-of-speech annotation of the <%= link_to 'tut-foundries', 'default foundry' %>. The following query finds all attributive adjectives:</p>
+
+%= korap_tut_query poliqarp => '[pos=ADJA]'
+
+<p>Complex segments requesting further token annotations can have keys following the <code>foundry/layer</code> notation. For example to find all occurrences of <span style="color: red">plural words in the mate foundry, you can search using the following query:</span></p>
+
+%= korap_tut_query poliqarp => '[mate/m=number:pl]'
+
+</section>
+
+<section name="spans">
+<h3>Span Segments</h3>
+
+%= korap_tut_query poliqarp => '<s>'
+
+</section>
+
+<section name="paradigmatic-operators">
+<h3>Paradigmatic Operators</h3>
+%= korap_tut_query poliqarp => '[orth=bäume & base=bäumen]'
+
+%= korap_tut_query poliqarp => '[orth=bäume & base!=bäumen]'
+
+<p>The following query is equivalent</p>
+
+%= korap_tut_query poliqarp => '[orth=bäume & !base=bäumen]'
+
+%= korap_tut_query poliqarp => '[base=laufen | base=gehen]'
+
+%= korap_tut_query poliqarp => '[(base=laufen | base=gehen) & tt/pos=VVFIN]'
+
+%= korap_tut_query poliqarp => '[]'
+
+</section>
+
+<section name="syntagmatic-operators">
+<h3>Syntagmatic Operators</h3>
+
+<h4>Sequences</h4>
+
+<h4>Repetition</h4>
+%= korap_tut_query poliqarp => '[base=der][][base=Baum]'
+
+%= korap_tut_query poliqarp => '[base=der][]{2}[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][]{2,3}[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][]{2,}[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][]{,3}[base=Baum]'
+
+%= korap_tut_query poliqarp => '[base=der][tt/pos=ADJA]?[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][tt/pos=ADJA]*[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][tt/pos=ADJA]+[base=Baum]'
+
+<h4>Alternation</h4>
+
+<h4>Position Operators</h4>
+
+contains()
+startsWith()
+endsWith()
+
+<blockquote>
+  The KorAP implementation of Poliqarp also support the postfix <code>within</code> operator, that works similar to the <code>contains()</code>, but is not nestable.
+</blockquote>
+
+<h4>Class Operators</h4>
+
+{}
+focus()
+
+
+
+
+</section>
+
+% end
diff --git a/templates/tutorial/regular-expressions.html.ep b/templates/tutorial/regular-expressions.html.ep
new file mode 100644
index 0000000..1cce875
--- /dev/null
+++ b/templates/tutorial/regular-expressions.html.ep
@@ -0,0 +1,10 @@
+% contain main => begin
+<h2>KorAP-Tutorial: Regular Expressions</h2>
+
+The support for regular expressions in KorAP may be backend dependend. Below you can find the description for the respective backends.</p>
+
+<section name="lucene">
+<h3>Lucene</h3>
+</section>
+
+% end