diff --git a/templates/intro.html.ep b/templates/intro.html.ep
deleted file mode 100644
index bcf4117..0000000
--- a/templates/intro.html.ep
+++ /dev/null
@@ -1,5 +0,0 @@
-<div id="intro">
-  <p>This is the alternative KorAP Frontend.</p>
-  <p>The primary goal is to serve as a testbed for the query serialization and for different flavours of user interfaces.</p>
-  <p>Search capabilities are limited to the demo user.</p>
-</div>
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index d605649..36db1fb 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -1,27 +1,20 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title><%= title %></title>
-%= 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'
-<meta charset="utf-8" />
-  </head>
+%= include 'partial/header'
   <body>
 
 % my $search_route = url_for;
 % unless (current_route 'tutorial') {
 <div id="tutorial">
-  % my $tut_page = url_for(session('tutorial') || 'tutorial');
-  <a href="<%= $tut_page %>" target="_blank"><i title="Open in new tab" class="fa fa-external-link-square"></i></a>
-  <i onclick="closeTutorial()" title="close" class="fa fa-toggle-up"></i>
-  <iframe src="about:blank" data-src="<%= $tut_page->query([snippet => 1]) %>"></iframe>
+%   my $tut_page = url_for(session('tutorial') || 'tutorial');
+  <a href="<%= $tut_page %>"
+     target="_blank"><i title="Open in new tab"
+                        class="fa fa-external-link-square"></i></a>
+  <i onclick="closeTutorial()"
+     title="close"
+     class="fa fa-toggle-up"></i>
+  <iframe src="about:blank"
+          data-src="<%= $tut_page->query([embedded => 1]) %>"></iframe>
 </div>
 % }
 % else {
@@ -31,72 +24,10 @@
 <div id="top">
   <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'
-%= javascript begin
-new Hint({
-  "ref" : "q-field",
-  "qlRef" : "ql-field",
-  "hintSize" : 10,
-  "hints" : {
-    "-foundries" : {
-      "corenlp" : ["corenlp/", "CoreNLP"],
-      "cnx" : ["cnx/", "Connexor"],
-      "opennlp" : ["opennlp/", "OpenNLP"],
-      "xip" : ["xip/", "Xerox"],
-      "tt"  : ["tt/", "TreeTagger"],
-      "mate" : ["mate/", "Mate"]
-    },
-    "corenlp" : {
-      "ne_dewac_175m_600" : ["ne_dewac_175m_600=", "Named Entity"],
-      "ne_hgc_175m_600" : ["ne_hgc_175m_600=", "Named Entity"]
-    },
-    "corenlp/ne_dewac_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
-    "corenlp/ne_hgc_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
-    "cnx" : {
-      "c" : ["c=", "Constituency"],
-      "l" : ["l=", "Lemma"],
-      "m" : ["m=", "Morpho Syntax"],
-      "p" : ["p=", "Part of Speech"],
-      "syn" : ["syn=", "Syntax"]
-    },
-    "cnx/m" : ["Abbr","CMP","IMP","IND","INF","ORD","PAST","PCP","PERF","PL","PRES","PROG","Prop","SUB","SUP"],
-    "cnx/p" : ["A","ADV","CC","CS","DET","INTERJ","N","NUM","PREP","PRON","V"],
-    "cnx/syn" : ["@ADVL","@AUX","@CC","@MAIN","@NH","@POSTMOD","@PREMARK","@PREMOD"],
-    "opennlp" : {
-      "p" : ["p=", "Part of Speech"]
-    },
-    "opennlp/p" : ["$(","$,","$.","ADJA","ADJD","ADV","APPR","APPRART","ART","CARD","FM","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
-    "xip" : {
-      "c" : ["c=", "Constituency"],
-      "d" : ["d=", "Dependency"],
-      "l" : ["l=", "Lemma"],
-      "p" : ["p=", "Part of Speech"]
-    },
-    "xip/c" : ["ADJ","ADV","AP","CONJ","DET","INFC","INS","ITJ","MC","NEGAT","NOUN","NP","NPA","NUM","POSTP","PP","PREP","PRON","PTCL","PUNCT","SC","SYMBOL","TOP","TRUNC","VERB"],
-    "xip/d" : ["ADJMOD","AUXIL","CONNECT","COORD","DATE","DETERM","EXPL","LOC","MODAL","NEGAT","NMOD","NMOD2","NUMMOD","OBJ","ORG","PERSON","PLINK","PRED","REFLEX","SUBJ","THEMA","TIME","TRUNC","VMAIN","VMOD","VPREF"],
-    "xip/p" : ["ADJ","ADV","CONJ","DET","ITJ","NEGAT","NOUN","NUM","POSTP","PREP","PRON","PTCL","PUNCT","SYMBOL","TRUNC","VERB"],
-    "tt" : {
-      "l" : ["l=", "Lemma"],
-      "p" : ["p=", "Part of Speech"]
-    },
-    "tt/p" : ["$.","ADJA","ADJD","ADV","APPO","APPR","APPRART","APZR","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VMINF","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
-    "mate" : {
-      "d" : ["d=", "Dependency"],
-      "l" : ["l=", "Lemma"],
-      "m" : ["m=", "Morpho Syntax"],
-      "p" : ["p=", "Part of Speech"]
-    },
-    "mate/d" : ["--","AG","AMS","APP","CC","CD","CJ","CM","CP","CVC","DA","DM","EP","JU","MNR","MO","NG","NK","NMC","OA","OC","OG","OP","PAR","PD","PG","PH","PM","PNC","RC","RE","RS","SB","SBP","SVP","UC"],
-    "mate/m" : ["<no-type>","case:*","case:acc","case:dat","case:gen","case:nom","degree:comp","degree:pos","degree:sup","gender:*","gender:fem","gender:masc","gender:neut","mood:imp","mood:ind","mood:subj","number:*","number:pl","number:sg","person:1","person:2","person:3","tense:past","tense:pres"],
-    "mate/p" : ["$(","$,","$.","<root-POS>","ADJA","ADJD","ADV","APPO","APPR","APPRART","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PPOSS","PRELAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"]
-  }}
-);
-
-% end
 <button type="submit" name="action" value="ok"><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>
@@ -114,81 +45,23 @@
 
 </div>
 
+%= content 'sidebar' => begin
 <div id="sidebar" style="padding-top: 90px">
 %= include 'collections'
-<i class="fa fa-bars"></i>
+  <i class="fa fa-bars"></i>
 </div>
-
-<div id="search">
-%= content
-</div>
-
-%= javascript begin
-
-$("#search > ol > li:not(.active)").on("click", function (e) {
-  $(this).addClass('active');
-  e.stopPropagation();
-});
-
-$("#search > ol > li:not(.active) > ul > li.close").on("click", function (e) {
-  $(this.parentNode.parentNode).removeClass('active');
-  e.stopPropagation();
-});
-
-
-function showTable (o) {
-  var match = o.parentNode.parentNode;
-  var table = $(match).children("div").children("div.tokenInfo").first();
-
-  if (table.hasClass("active")) {
-    table.removeClass("active");
-    return;
-  }
-  else if (table.children("table").length > 0) {
-    table.addClass("active");
-    return;
-  };
-
-  var corpusID = match.getAttribute('data-corpus-id');
-  var docID    = match.getAttribute('data-doc-id');
-  var matchID  = match.getAttribute('data-match-id');
-  var url      = '/corpus/' + corpusID + '/' + docID + '/' + matchID;
-  var snippet;
-
-  jQuery.getJSON(url, function (res) {
-    var snippet = new SnippetTable(res['snippet']);
-    table.addClass("active");
-    table.append(snippet.toTable());
-  });
-};
-
-function openTutorial (o) {
-  var tut = $("#tutorial");
-  tut.addClass("active");
-  var iframe = tut.children("iframe");
-  var src = iframe.attr("data-src");
-  iframe.attr("src", src);
-};
-
-function closeTutorial (o) {
-  $("#tutorial").removeClass("active");
-};
-
-function useQuery (o) {
-  var q = o.getAttribute("data-query");
-  var ql = o.getAttribute("data-query-language");
-  $("#ql-field").val(ql);
-  $("#q-field").val(q);
-  closeTutorial();
-};
-
-$("code.query.serial, #sidebar").on("click", function () {
-  $(this).toggleClass('active');
-});
-
 % end
 
+<main>
+%= content main => begin
+  <p>This is the alternative KorAP Frontend.</p>
+  <p>The primary goal is to serve as a testbed for the query serialization and for different flavours of user interfaces.</p>
+  <p>Search capabilities are limited to the demo user.</p>
+% end
+</main>
 
+%= content 'javascript'
+%= include 'partial/javascript'
 %= notifications 'Alertify'
   </body>
 </html>
diff --git a/templates/layouts/snippet.html.ep b/templates/layouts/snippet.html.ep
index bfe0017..ee3f09a 100644
--- a/templates/layouts/snippet.html.ep
+++ b/templates/layouts/snippet.html.ep
@@ -1,21 +1,20 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title><%= title %></title>
-%= stylesheet '/style.css'
-%= stylesheet '/kwic-4.0.css'
-%= stylesheet '/responsive.css', media => '(orientation: portrait) and (max-device-width: 800px)'
-%= stylesheet '/fontawesome/font-awesome.min.css'
-%= javascript '/jquery-2.0.0.min.js'
-<meta charset="utf-8" />
-  </head>
+%= include 'partial/header'
   <body style="background-color:white">
+<main<% if (stash('embedded')) { %> class="embedded"<% } %>>
+%= content 'main' => begin
+    <p>Welcome to the tutorial</p>
+% end
+</main>
+
 %= notifications 'Alertify'
-%= content
+
 %= javascript begin
 $("li,code,#sidebar").on("click", function () {
   $(this).toggleClass('active');
 });
 % end
+
   </body>
 </html>
diff --git a/templates/match.html.ep b/templates/match.html.ep
new file mode 100644
index 0000000..2ec5a44
--- /dev/null
+++ b/templates/match.html.ep
@@ -0,0 +1,26 @@
+%# ID, title, corpusID, author, pubDate, textClass
+<li data-corpus-id="<%= $match->{corpusID} %>"
+    data-doc-id="<%= $match->{docID} %>"
+    data-match-id="<%= $match->{ID} %>"
+<% if (current_route eq 'match') { %>class="active"<% } %>
+    >
+  <div>
+    <div class="snippet"><%== $match->{snippet} %></div>
+    <div class="tokenInfo"></div>
+  </div>
+  <p>
+    <strong><%= $match->{title} %></strong>
+    <%= $match->{author} ? ' by ' . $match->{author}  : '' %>;
+    published on <%= date_format $match->{pubDate} %>
+    as <%= $match->{docID} %> (<%= $match->{corpusID} %>)
+  </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="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 onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
+%#    <li 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/match_info.html.ep b/templates/match_info.html.ep
new file mode 100644
index 0000000..5fa0ddf
--- /dev/null
+++ b/templates/match_info.html.ep
@@ -0,0 +1,7 @@
+% content main => begin
+<div id="search" class="match">
+  <ol class="left-aligned">
+%= include 'match'
+  </ol>
+</div>
+% end
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
new file mode 100644
index 0000000..542ef30
--- /dev/null
+++ b/templates/partial/header.html.ep
@@ -0,0 +1,14 @@
+<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'
+  <meta charset="utf-8" />
+</head>
diff --git a/templates/partial/javascript.html.ep b/templates/partial/javascript.html.ep
new file mode 100644
index 0000000..3c44167
--- /dev/null
+++ b/templates/partial/javascript.html.ep
@@ -0,0 +1,88 @@
+%= javascript begin
+
+new Hint({
+  "ref" : "q-field",
+  "qlRef" : "ql-field",
+  "hintSize" : 10,
+  "hints" : {
+    "-foundries" : {
+      "corenlp" : ["corenlp/", "CoreNLP"],
+      "cnx" : ["cnx/", "Connexor"],
+      "opennlp" : ["opennlp/", "OpenNLP"],
+      "xip" : ["xip/", "Xerox"],
+      "tt"  : ["tt/", "TreeTagger"],
+      "mate" : ["mate/", "Mate"]
+    },
+    "corenlp" : {
+      "ne_dewac_175m_600" : ["ne_dewac_175m_600=", "Named Entity"],
+      "ne_hgc_175m_600" : ["ne_hgc_175m_600=", "Named Entity"]
+    },
+    "corenlp/ne_dewac_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
+    "corenlp/ne_hgc_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
+    "cnx" : {
+      "c" : ["c=", "Constituency"],
+      "l" : ["l=", "Lemma"],
+      "m" : ["m=", "Morpho Syntax"],
+      "p" : ["p=", "Part of Speech"],
+      "syn" : ["syn=", "Syntax"]
+    },
+    "cnx/c" : ["np"],
+    "cnx/m" : ["Abbr","CMP","IMP","IND","INF","ORD","PAST","PCP","PERF","PL","PRES","PROG","Prop","SUB","SUP"],
+    "cnx/p" : ["A","ADV","CC","CS","DET","INTERJ","N","NUM","PREP","PRON","V"],
+    "cnx/syn" : ["@ADVL","@AUX","@CC","@MAIN","@NH","@POSTMOD","@PREMARK","@PREMOD"],
+    "opennlp" : {
+      "p" : ["p=", "Part of Speech"]
+    },
+    "opennlp/p" : ["$(","$,","$.","ADJA","ADJD","ADV","APPR","APPRART","ART","CARD","FM","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
+    "xip" : {
+      "c" : ["c=", "Constituency"],
+      "d" : ["d=", "Dependency"],
+      "l" : ["l=", "Lemma"],
+      "p" : ["p=", "Part of Speech"]
+    },
+    "xip/c" : ["ADJ","ADV","AP","CONJ","DET","INFC","INS","ITJ","MC","NEGAT","NOUN","NP","NPA","NUM","POSTP","PP","PREP","PRON","PTCL","PUNCT","SC","SYMBOL","TOP","TRUNC","VERB"],
+    "xip/d" : ["ADJMOD","AUXIL","CONNECT","COORD","DATE","DETERM","EXPL","LOC","MODAL","NEGAT","NMOD","NMOD2","NUMMOD","OBJ","ORG","PERSON","PLINK","PRED","REFLEX","SUBJ","THEMA","TIME","TRUNC","VMAIN","VMOD","VPREF"],
+    "xip/p" : ["ADJ","ADV","CONJ","DET","ITJ","NEGAT","NOUN","NUM","POSTP","PREP","PRON","PTCL","PUNCT","SYMBOL","TRUNC","VERB"],
+    "tt" : {
+      "l" : ["l=", "Lemma"],
+      "p" : ["p=", "Part of Speech"]
+    },
+    "tt/p" : ["$.","ADJA","ADJD","ADV","APPO","APPR","APPRART","APZR","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VMINF","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
+    "mate" : {
+      "d" : ["d=", "Dependency"],
+      "l" : ["l=", "Lemma"],
+      "m" : ["m=", "Morpho Syntax"],
+      "p" : ["p=", "Part of Speech"]
+    },
+    "mate/d" : ["--","AG","AMS","APP","CC","CD","CJ","CM","CP","CVC","DA","DM","EP","JU","MNR","MO","NG","NK","NMC","OA","OC","OG","OP","PAR","PD","PG","PH","PM","PNC","RC","RE","RS","SB","SBP","SVP","UC"],
+    "mate/m" : ["<no-type>","case:*","case:acc","case:dat","case:gen","case:nom","degree:comp","degree:pos","degree:sup","gender:*","gender:fem","gender:masc","gender:neut","mood:imp","mood:ind","mood:subj","number:*","number:pl","number:sg","person:1","person:2","person:3","tense:past","tense:pres"],
+    "mate/p" : ["$(","$,","$.","<root-POS>","ADJA","ADJD","ADV","APPO","APPR","APPRART","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PPOSS","PRELAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"]
+  }}
+);
+
+
+function openTutorial (o) {
+  var tut = $("#tutorial");
+  tut.addClass("active");
+  var iframe = tut.children("iframe");
+  var src = iframe.attr("data-src");
+  iframe.attr("src", src);
+};
+
+function closeTutorial (o) {
+  $("#tutorial").removeClass("active");
+};
+
+function useQuery (o) {
+  var q = o.getAttribute("data-query");
+  var ql = o.getAttribute("data-query-language");
+  $("#ql-field").val(ql);
+  $("#q-field").val(q);
+  closeTutorial();
+};
+
+$("code.query.serial, #sidebar").on("click", function () {
+  $(this).toggleClass('active');
+});
+
+% end
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 091fd39..92aadce 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -1,54 +1,44 @@
 % if (param 'q') {
-%= search begin
-
-% unless (param 'snippet') {
+% content 'main' => begin
+%=  search begin
+%     unless (param 'snippet') {
 <div style="clear: both">
-% my $url = url_with->query(['p' => '{page}']);
-% my $pages = (stash('search.totalResults') / (stash('search.itemsPerPage') || 1));
-% $pages = $pages < 0 ? 0 : $pages;
+%       my $url = url_with->query(['p' => '{page}']);
+%       my $pages = (stash('search.totalResults') / (stash('search.itemsPerPage') || 1));
+%       $pages = $pages < 0 ? 0 : $pages;
   <div id="pagination"><%= pagination(stash('search.startPage'), $pages, $url) =%></div>
   <p class="found">Found
     <span id="total-results"><%= commify(stash('search.totalResults')) %> matches</span>
     <% if (stash 'search.bm.hit') { %> in <%= stash 'search.bm.hit' %> (<%= stash 'search.bm.result' %>)<% } %>
   </p>
 </div>
-
 %= include 'query'
-% };
+%     };
 
-
-
+<div id="search">
 <ol class="left-aligned">
-%=  search_hits begin
-%# ID, title, corpusID, author, pubDate, textClass
-  <li data-corpus-id="<%= $_->{corpusID} %>"
-      data-doc-id="<%= korap_doc_id($_) %>"
-      data-match-id="<%= korap_match_id($_) %>">
-    <div>
-      <div class="snippet"><%== $_->{snippet} %></div>
-      <div class="tokenInfo"></div>
-    </div>
-    <p>
-      <strong><%= $_->{title} %></strong>
-      <%= $_->{author} ? ' by ' . $_->{author}  : '' %>;
-      published on <%= date_format $_->{pubDate} %>
-      as <%= $_->{docID} %> (<%= $_->{corpusID} %>)
-    </p>
-    <ul class="action right">
-      <li class="close" title="close"><i class="fa fa-toggle-up"></i></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>
-      <li title="Remember"><i class="fa fa-star-o"></i></li>
--->
-    </ul>
-  </li>
-%   end
+%=    search_hits begin
+%=      include 'match', match => $_
+%     end
 </ol>
+</div>
 
+%   end
 % end
 
-% }
-% else {
-%= include 'intro'
+% content 'javascript' => begin
+%=   javascript begin
+
+$("#search > ol > li:not(.active)").on("click", function (e) {
+  $(this).addClass('active');
+  e.stopPropagation();
+});
+
+$("#search > ol > li:not(.active) > ul > li.close").on("click", function (e) {
+  $(this.parentNode.parentNode).removeClass('active');
+  e.stopPropagation();
+});
+
+%   end
+% end
 % };
diff --git a/templates/tutorial.html.ep b/templates/tutorial.html.ep
index 9caa15b..b7d280e 100644
--- a/templates/tutorial.html.ep
+++ b/templates/tutorial.html.ep
@@ -1,4 +1,4 @@
-<main>
+% content main => begin
 
 %# Store the id of an active section in the session, so the system is able to directly scroll to the relevant section
 %# This should be stored when clicking on a specific query
@@ -25,6 +25,10 @@
 
 %= korap_tut_query cosmas2 => 'der /w5 Baum'
 
+%= korap_tut_query poliqarp => 'contains(<cnx/c=np>,[opennlp/p=KOUS])'
+
+%= 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>
 </section>
 
@@ -79,4 +83,4 @@
   </ul>
 </section>
 
-</main>
+% end