diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..6a2a60a
--- /dev/null
+++ b/public/favicon.ico
Binary files differ
diff --git a/public/img/korap-logo-solo.svg b/public/img/korap-logo-solo.svg
new file mode 100644
index 0000000..e74b29a
--- /dev/null
+++ b/public/img/korap-logo-solo.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="292.90839"
+   height="104.8784"
+   transform="scale(.6)"
+   id="svg2">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     d="m 272.6875,2.3470265 c -0.13853,0 -0.26847,0.028 -0.40625,0.031 -0.0633,9e-4 -0.1244,0 -0.1875,0 l -41.53125,0 -40,3e-4 -20,-3e-4 -11.9375,0 -10.84375,0 0,0.062 c -9.55779,0.3611 -17.1875,8.1974995 -17.1875,17.8436995 0,0.2871 0.0179,0.5599 0.0312,0.8438 l -0.0625,0 0,81.250004 40,0 0,-40.000004 20,0 0,40.000004 40,0 0,-40.000004 42.125,0 0.46875,0 0,-0.031 c 9.62803,-0.2482 17.35652,-8.0737 17.40625,-17.7499 1.6e-4,-0.031 0,-0.062 0,-0.094 l 0,-24.2501 c 0,-0.1254 0.003,-0.2502 0,-0.375 -0.19976,-9.7029 -8.12415,-17.5311995 -17.875,-17.5311995 z m -102.125,20.0312995 20,0 0,20 -20,0 z m 60,0 20,0 0,20 -20,0 z"
+     id="path6"
+     style="fill:#496000;fill-opacity:1;stroke:#ffffff;stroke-width:4.69999981;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+  <path
+     d="M 2.625,7.7150265 2.5,102.37833 l 40.0625,0 0,-42.812504 19.9375,42.812504 12,0 28.0625,0 14,0 40,0 0,-40.000004 40,0 0,-2.7188 c -3.6e-4,-0.01 3.8e-4,-0.021 0,-0.031 -0.3416,-9.4668 -8.05179,-17.0523 -17.5625,-17.2187 -5.5e-4,0 5.5e-4,-0.031 0,-0.031 l -0.3125,0 -22.125,0 -40,0 -41.9375,0 0,0.125 -0.0625,-0.125 28,-34.6632995 -39.9375,0 -20.0625,17.5694995 0,-17.5694995 -39.9375,0 z m 91.9375,54.6632995 20,0 0,20 -20,0 z"
+     id="path8"
+     style="fill:#ffffff;fill-opacity:1;stroke:#496000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+</svg>
diff --git a/public/img/loading.gif b/public/img/loading.gif
new file mode 100644
index 0000000..c9aaeda
--- /dev/null
+++ b/public/img/loading.gif
Binary files differ
diff --git a/public/kwic-3.0.css b/public/kwic-3.0.css
index d8c7faf..0aac61e 100644
--- a/public/kwic-3.0.css
+++ b/public/kwic-3.0.css
@@ -1,5 +1,14 @@
 @charset "utf-8";
 
+/*
+  light orange: #f4eebb;
+  dark orange: #ffa500;
+  dark green: #496000;
+  light green: #7ba400;
+
+  Search for: [orth=erstens]
+*/
+
 ol {
   width: auto;
   overflow: hidden;
@@ -34,18 +43,18 @@
   background-color: #ddd;
 }
 
-ol > li > span,
-ol > li > span > span {
+ol > li > div.snippet > span,
+ol > li > div.snippet > span > span {
   white-space: no-wrap !important;
 }
 
-ol.free-aligned > li:not(.active) > span.left {
+ol.free-aligned > li:not(.active) > div.snippet > span.left {
   display: inline-block;
   text-align: right;
   width: 50.0046%;
 }
 
-ol.free-aligned > li:not(.active) > span.separator {
+ol.free-aligned > li:not(.active) > div.snippet > span.separator {
   width: 0px;
   height: 1em;
   margin-bottom: -2px;
@@ -56,11 +65,11 @@
   margin-right: 2px;
 }
 
-ol.free-aligned > li > span.right {
+ol.free-aligned > li > div.snippet > span.right {
   text-align: left;
 }
 
-ol.left-aligned > li > span.context-left {
+ol.left-aligned > li > div.snippet > span.context-left {
   display: inline-block;
   text-align: right;
   width: 50.001%;
@@ -70,19 +79,20 @@
   text-align: right;
 }
 
-ol.right-aligned > li:not(.active) > span.context-right {
+ol.right-aligned > li:not(.active) > div.snippet > span.context-right {
   display: inline-block;
   text-align: left;
   width: 49.9915%;
 }
 
-li > span {
+li > div.snippet > span {
   color: #666;
 }
 
 .match {
   font-weight: bold;
-  color: #333;
+  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
+  color: #111;
   padding-left: 4pt;
   padding-right: 2pt;
 }
@@ -113,26 +123,30 @@
 }
 
 /* active view */
-ol li.active {
+ol > li.active {
   text-align: left;
   width: auto;
   cursor: normal;
   white-space: wrap;
   height: auto;
-  padding: 5pt;
-  padding-left: 3em;
-  padding-bottom: 12px;
   border-width: 2px;
   background-color: #f4eebb;
   position: relative;
+  min-height: 68pt;
 }
 
-ol li.active > span {
-  line-height: 1.7em;
+ol > li.active > div.snippet {
+  margin: 5pt 10pt;
+  margin-right: 3em;
+  margin-bottom: 24pt;
+}
+
+ol > li.active > div.snippet > span {
+  line-height: 1.4em;
   width: auto;
 }
 
-ol li.active span.context-left {
+ol > li.active > div.snippet > span.context-left {
   margin-left: 0;
   display: inline;
   overflow: visible;
@@ -140,20 +154,22 @@
   width: auto;
 }
 
-
 /* Korap-Actions: */
 ol > li ul.action {
   display: none;
 }
 
-ol > li ul.action a {
+ol > li ul.action li {
+  cursor: pointer;
   color: white;
   text-decoration: none;
-  text-shadow: none;
 }
 
 ol > li.active ul.action {
   background-color: #ffa500;
+  font-size: 12pt;
+  color: white;
+  text-shadow: none;
   display: block;
   margin: 0;
   padding: 0;
@@ -163,6 +179,7 @@
   list-style-position: inline;
 }
 
+/*
 ol > li.active ul.action.right {
   position: absolute;
   right: 0;
@@ -170,20 +187,34 @@
   height: 1.2em;
 }
 
-ol > li.active ul.action.left {
-  position: absolute;
-  float: left;
-  padding: 0pt 3pt;
-  height: 100%;
-  width: 2em;;
-/*
-  margin: -5pt 2pt 2pt -5pt;
-*/
-  left: 0;
-  top: 0;
-}
-
 ol > li.active ul.action.right li {
   float: left;
   padding-left: 1em;
 }
+*/
+
+ol > li.active ul.action.right {
+  position: absolute;
+  float: right;
+  text-align: center;
+  padding: 0pt 3pt;
+  height: 100%;
+  width: 1.2em;;
+  right: 0;
+  top: 0;
+}
+
+ol > li:not(.active) p {
+  display: none;
+}
+
+ol > li.active p {
+  background-color: #ffa500;
+  color: white;
+  text-shadow: none;
+  padding: 3pt 10pt;
+  margin: 5pt 0pt 0pt 0pt;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index bfbeeb3..dff0bcb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -95,7 +95,7 @@
   color: #c1002b;
 }
 
-code {
+code.query {
   background-color: #f4eebb;
   display: block;
   border-style: solid;
@@ -106,32 +106,27 @@
   text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
   border-width: 2px;
   margin: 0;
+  margin-bottom: 5pt;
   cursor: pointer;
 }
 
-code:not(.active) {
-/*
-  height: 12pt;
-*/
-}
-
-code:not(.active) span {
+code.query.serial:not(.active) span {
   padding: 2pt;
 }
 
-code:not(.active) pre {
-  display: none;
-}
-
-code.active pre {
+code.query pre {
   display: block;
-  padding: 20px;
+  padding: 2px 5px;
+  margin: 0;
 }
 
-code.active span {
+code.query.serial:not(.active) pre {
   display: none;
 }
 
+code.query.serial.active span {
+  display: none;
+}
 
 #sidebar.active {
   margin-left: 0px;
@@ -153,17 +148,113 @@
   top: 0;
 }
 
+#sidebar > * {
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: .3s;
+}
+
+#sidebar.active > * {
+  opacity: 1;
+}
+
+#sidebar h2 {
+  font-size: 100%;
+  font-weight: bold;
+  text-align: center;
+  padding: 0;
+  margin: 0 0 5pt 0;
+}
+
+#sidebar ul {
+  list-style-type: none;
+  margin: 0;
+  font-size: 10pt;
+  text-indent: 0;
+  padding: 0;
+}
+
+#sidebar ul li {
+  padding: 4pt 10pt;
+}
+
+#sidebar ul li h3 {
+  font-weight: bold;
+  font-size: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+#sidebar ul li.active h3 {
+  margin-bottom: 2pt;
+  padding-bottom: 2pt;
+  border-bottom: 1px solid black;
+}
+
+#sidebar ul li.active {
+  background-color: #7ba400;
+  text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+}
+
+dl.info {
+  font-size: 9pt;
+  padding: 0 10pt;
+}
+
+dl.info dt {
+  font-weight: bold;
+  float: left;
+}
+
+dl.info dd {
+  text-align: right;
+}
+
 #search {
   margin-left: 30px;
   margin-right: 15px;
   margin-bottom: 40px;
 }
 
-
+/*
 iframe {
   border-width: 0;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   height: 300px;
   width: 100%;
+}
+*/
+
+#tutorial {
+  position: fixed;
+  z-index: 9999;
+  top: 2%;
+  bottom: 2%;
+  left: 5%;
+  right: 5%;
+  background-color: #496000;
+  border-radius: 15px;
+  padding: 5px;
+}
+
+#tutorial > i {
+  font-size: 20pt;
+  color: #496000;
+  position: absolute;
+  z-index: 100;
+  top: 10pt;
+  right: 20pt;
+  cursor: pointer;
+}
+
+#tutorial iframe {
+  width: 100%;
+  min-height: 100%;
+  border-width: 0;
+  border-radius: 10px;
+  background-image: url('img/loading.gif');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-color: white;
 }
\ No newline at end of file