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>