diff --git a/public/hint.css b/public/hint.css
index 6b1bc50..34ff9d9 100644
--- a/public/hint.css
+++ b/public/hint.css
@@ -2,6 +2,8 @@
   position: absolute;
   height: 0px;
   margin-top: 1px;
+  white-space:nowrap;
+  overflow: show;
 }
 
 #searchMirror > span {
diff --git a/public/hint.js b/public/hint.js
index b79dcd5..a6beda6 100644
--- a/public/hint.js
+++ b/public/hint.js
@@ -224,6 +224,7 @@
 
   // Initialize style
   init();
+  window.onresize = init;
   search.addEventListener("keyup",   changed,  false);
   search.addEventListener("keydown", select,   false);
   qlField.addEventListener('change', qlSelect, false);
diff --git a/public/kwic-4.0.css b/public/kwic-4.0.css
index 84a32aa..bad538c 100644
--- a/public/kwic-4.0.css
+++ b/public/kwic-4.0.css
@@ -34,7 +34,7 @@
   overflow: hidden;
   white-space: no-wrap;
   cursor: pointer;
-  padding: 10px 0;
+  padding: 5pt 0 6pt 0;
   text-indent: 0;
 }
 
diff --git a/public/responsive.css b/public/responsive.css
index 80ba826..65096d3 100644
--- a/public/responsive.css
+++ b/public/responsive.css
@@ -17,6 +17,7 @@
   top: 0;
   border-width: 0;
   padding: 0;
+  font-size: 9pt;
 }
 
 #tutorial > iframe {
@@ -68,8 +69,18 @@
   display: none;
 }
 
-#pagination {
-  width: 100%;
-  right: auto;
-  margin: 0 auto;
+#search > ol > li {
+  font-size: 9pt;
+}
+
+#search > ol > li:not(.active) {
+  padding: 4pt 0 5pt 0;
+}
+
+#search > ol > li.active {
+  padding: 0 0 0 0;
+}
+
+code.query.serial {
+  font-size: 10pt;
 }
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 31cbf45..925dae2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -166,10 +166,27 @@
   transition-duration: .3s;
 }
 
+#sidebar:not(.active) > i.fa-bars {
+  opacity: 1;
+  background-color: #496000;
+  position: fixed;
+  font-size: 12pt;
+  width: 11pt;  
+  height: 12pt;
+  padding: 4pt;
+  bottom: 0;
+  left: 0;
+  border-top-right-radius: 5pt;
+}
+
 #sidebar.active > * {
   opacity: 1;
 }
 
+#sidebar.active > i.fa-bars {
+  opacity: 0;
+}
+
 #sidebar h2 {
   font-size: 100%;
   font-weight: bold;
@@ -230,14 +247,23 @@
 
 #tutorial {
   position: fixed;
+  display: block;
   z-index: 9999;
+  background-color: #496000;
+  border-radius: 15px;
+  padding: 5px;
   top: 2%;
   bottom: 2%;
   left: 5%;
   right: 5%;
-  background-color: #496000;
-  border-radius: 15px;
-  padding: 5px;
+}
+
+#tutorial:not(.active) {
+  display: none;
+}
+
+#tutorial.active {
+  display: block;
 }
 
 #tutorial > i,
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index a483390..8dfb04c 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -15,18 +15,24 @@
   </head>
   <body>
 
+% my $search_route = url_for;
 % unless (current_route 'tutorial') {
-<div id="tutorial" style="display: none">
+<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>
 </div>
+% }
+% else {
+%   $search_route = url_for('index');
 % };
 
 <div id="top">
   <a href="<%= url_for 'index' %>"><h1><span>KorAP- Korpusanalyseplattform der nächsten Generation</span></h1></a>
-%= form_for url_for() => begin
+
+
+%= 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'
@@ -108,6 +114,7 @@
 
 <div id="sidebar" style="padding-top: 90px">
 %= include 'collections'
+<i class="fa fa-bars"></i>
 </div>
 
 <div id="search">
@@ -155,14 +162,14 @@
 
 function openTutorial (o) {
   var tut = $("#tutorial");
-  tut.slideDown();
+  tut.addClass("active");
   var iframe = tut.children("iframe");
   var src = iframe.attr("data-src");
   iframe.attr("src", src);
 };
 
 function closeTutorial (o) {
-  $("#tutorial").slideUp();
+  $("#tutorial").removeClass("active");
 };
 
 function useQuery (o) {
diff --git a/templates/layouts/snippet.html.ep b/templates/layouts/snippet.html.ep
index 1c3ef1c..77c50ba 100644
--- a/templates/layouts/snippet.html.ep
+++ b/templates/layouts/snippet.html.ep
@@ -3,7 +3,8 @@
   <head>
     <title><%= title %></title>
 %= stylesheet '/style.css'
-%= stylesheet '/kwic-3.0.css'
+%= stylesheet '/kwic-4.0.css'
+%= stylesheet '/responsive.css'
 %= stylesheet '/fontawesome/font-awesome.min.css'
 %= javascript '/jquery-2.0.0.min.js'
 <meta charset="utf-8" />