diff --git a/templates/collections.html.ep b/templates/collections.html.ep
new file mode 100644
index 0000000..cab2ea2
--- /dev/null
+++ b/templates/collections.html.ep
@@ -0,0 +1,14 @@
+<h2>Virtual Collections</h2>
+<ul>
+% foreach my $vc (@{info_on 'collection'}) {
+<li class="active" title="<%= $vc->{description} // '' %>"><h3><%= $vc->{name} %></h3>
+% my $stats = $vc->{stats};
+  <dl class="info">
+    <dt>Documents</dt><dd><%= commify $stats->{documents} %></dd>
+    <dt>Paragraphs</dt><dd><%= commify $stats->{paragraphs} %></dd>
+    <dt>Sentences</dt><dd><%= commify $stats->{sentences} %></dd>
+    <dt>Tokens</dt><dd><%= commify $stats->{tokens} %></dd>
+  </dl>
+</li>
+% };
+</ul>
diff --git a/templates/exception.html.ep b/templates/exception.html.ep
new file mode 100644
index 0000000..8d3e656
--- /dev/null
+++ b/templates/exception.html.ep
@@ -0,0 +1 @@
+% notify('error' => '500: Server Error');
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 2ad80bd..97c53b4 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -9,30 +9,34 @@
 <meta charset="utf-8" />
   </head>
   <body>
-%= notifications 'Alertify'
+
+<div id="tutorial" style="display: none">
+  <i onclick="closeTutorial()" class="fa fa-toggle-up"></i>
+  <iframe src="about:blank" data-src="<%= url_for(session('tutorial') // 'tutorial') %>"></iframe>
+</div>
 
 <div id="top">
-%= image '/img/korap-logo.svg', style => 'position: absolute; z-index: 999'
+%#= image '/img/korap-logo.svg', style => 'position: absolute; z-index: 999'
+%= image '/img/korap-logo-solo.svg', style => 'position: absolute; z-index: 999'
 %= form_for url_for() => begin
-%= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']]
+%= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']], id => 'ql-field'
 <br />
-%= search_field 'q'
+%= search_field 'q', id => 'q-field'
 <button type="submit" name="action" value="ok"><i class="fa fa-search"></i></button>
 <button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
 % end
 
-% if (param('q')) {
 <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>
-</div>
 % }
+<button type="button" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
+</div>
 
 </div>
 
 <div id="sidebar" style="padding-top: 90px">
-  <fieldset style="margin: 0 17px;">
-    <legend>Virtual Collections</legend>
-  </fieldset>
+%= include 'collections'
 </div>
 
 <div id="search">
@@ -40,10 +44,46 @@
 </div>
 
 %= javascript begin
-$("li,code,#sidebar").on("click", function () {
+
+$("ol > li:not(.active)").on("click", function () {
+  $(this).addClass('active');
+});
+
+function closeSnippet (o) {
+  $(o.parentNode.parentNode).removeClass('active');
+};
+
+function openTutorial (o) {
+  var tut = $("#tutorial");
+  tut.slideDown();
+  var iframe = tut.children("iframe");
+  var src = iframe.attr("data-src");
+  iframe.attr("src", src);
+};
+
+function closeTutorial (o) {
+  $("#tutorial").slideUp();
+};
+
+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();
+};
+
+/*
+function requestInfo
+*/
+
+$("code.query.serial,#sidebar").on("click", function () {
   $(this).toggleClass('active');
 });
+
+
 % end
 
+%= notifications 'Alertify'
   </body>
 </html>
diff --git a/templates/layouts/snippet.html.ep b/templates/layouts/snippet.html.ep
new file mode 100644
index 0000000..1c3ef1c
--- /dev/null
+++ b/templates/layouts/snippet.html.ep
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= title %></title>
+%= stylesheet '/style.css'
+%= stylesheet '/kwic-3.0.css'
+%= stylesheet '/fontawesome/font-awesome.min.css'
+%= javascript '/jquery-2.0.0.min.js'
+<meta charset="utf-8" />
+  </head>
+  <body style="background-color:white">
+%= notifications 'Alertify'
+%= content
+%= javascript begin
+$("li,code,#sidebar").on("click", function () {
+  $(this).toggleClass('active');
+});
+% end
+  </body>
+</html>
diff --git a/templates/query.html.ep b/templates/query.html.ep
index 5d09324..6ef646f 100644
--- a/templates/query.html.ep
+++ b/templates/query.html.ep
@@ -1,8 +1,8 @@
 % use JSON::XS;
 
 % if (stash('search.query')) {
-<code><span>JSON-LD Query for <%= param 'q' %> (<%= param 'ql' %>)</span><pre>
-%  my $json = JSON::XS->new->pretty;
+<code class="query serial<% if (param('action') eq 'inspect') { %> active<% } %>"><span>JSON-LD Query for <%= param 'q' %> (<%= param 'ql' %>)</span><pre>
+%  my $json = JSON::XS->new->allow_blessed->pretty;
 %= $json->encode(stash('search.query'))
 </pre></span></code>
 % }
diff --git a/templates/search.html.ep b/templates/search.html.ep
index b8df8d3..8ed571b 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -1,17 +1,18 @@
-% layout 'default', title 'KorAP';
-
-
+% if (param 'q') {
 %= search begin
+
+% unless (param 'snippet') {
 <div style="clear: both">
-<p class="found"><span class="pagination">
+  <p class="found">
+    <span class="pagination">
 % my $url = url_with->query(['p' => '{page}']);
 % my $pages = (stash('search.totalResults') / (stash('search.itemsPerPage') || 1));
 % $pages = $pages < 0 ? 0 : $pages;
-</span>
+    </span>
 
-<div id="pagination">
+    <div id="pagination">
 %= pagination(stash('search.startPage'), $pages, $url)
-</div>
+    </div>
 
 %#= l('Found <span id="total-results">[_1]</span> [quant,_1,match]')
 %#= l('in [_1])
@@ -19,17 +20,32 @@
 % if (stash 'search.bm.hit') {
  in <%= stash 'search.bm.hit' %> (<%= stash 'search.bm.result' %>)
 % }
-</p>
+  </p>
 </div>
 
 %= include 'query'
+% };
 
 <ol class="left-aligned">
 %=  search_hits begin
   <li>
 %# ID, title, corpusID, author, pubDate, textClass
-<%== $_->{snippet} %>
+    <div class="snippet"><%== $_->{snippet} %></div>
+    <p><strong><%= $_->{title} %></strong><%= $_->{author} ? ' by ' . $_->{author}  : '' %>; published on <%= date_format $_->{pubDate} %> as <%= $_->{docID} %> (<%= $_->{corpusID} %>)</p>
+%#    as <%= $_->{ID} %>
+%#  textClass docID
+% foreach (grep { m!/morpho$! } split(/\s+/, $_->{foundries})) {
+%#  <%= $_ %>
+% };
+
+    <ul class="action right">
+      <li onmouseup="closeSnippet(this)" title="close"><i class="fa fa-toggle-up"></i></li>
+      <li 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
 </ol>
 % end
+% }
diff --git a/templates/tutorial.html.ep b/templates/tutorial.html.ep
new file mode 100644
index 0000000..0c938d1
--- /dev/null
+++ b/templates/tutorial.html.ep
@@ -0,0 +1,27 @@
+<div style="padding: 20pt">
+
+<p>Links to Blog, FAQ, About, Contact ...</p>
+
+<h1>KorAP-Tutorial</h1>
+
+<ul>
+  <li>Introduction to KorAP</li>
+  <li>How to use Poliqarp+ QL?</li>
+  <li>How to use Cosmas-II QL?</li>
+  <li>How to use CQL?</li>
+</ul>
+
+<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 query below:</p>
+
+%= korap_tut_query poliqarp => '[base=baum]'
+
+<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
+
+%= korap_tut_query cosmas2 => 'der /w5 Baum'
+
+<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
+
+<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
+
+</div>