diff --git a/public/Gruntfile.js b/public/Gruntfile.js
index 059bb37..940d8e7 100644
--- a/public/Gruntfile.js
+++ b/public/Gruntfile.js
@@ -26,7 +26,11 @@
 	  'js/src/menu.js',
 	  'js/src/match.js',
 	  'js/src/hint.js',
-	  'js/src/vc.js'
+	  'js/src/vc.js',
+	  'js/src/api.js',
+	  'js/src/session.js',
+	  'js/src/tutorial.js',
+	  'js/src/util.js'
 	],
 	dest: 'js/build/kalamar.js'
       }
@@ -84,7 +88,7 @@
       },
 */
       css: {
-	files: ['scss/{util,fonts,base,header,searchbar,matchinfo,resultinfo,kwic,menu,hint,pagination,logos,alertify,vc,kalamar}.scss'],
+	files: ['scss/{util,fonts,base,header,searchbar,matchinfo,resultinfo,kwic,menu,hint,pagination,logos,alertify,vc,media,kalamar,tutorial,query,sidebar}.scss'],
 	tasks: ['sass'],
 	options: {
 	  spawn: false
diff --git a/public/img/korap-logo-kalamar.svg b/public/img/korap-logo-kalamar.svg
index e645226..8645212 100644
--- a/public/img/korap-logo-kalamar.svg
+++ b/public/img/korap-logo-kalamar.svg
@@ -1,127 +1,25 @@
 <?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"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   width="296.4375"
-   height="77.365486"
-   id="svg2"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="korap-logo-kalamar.svg">
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1366"
-     inkscape:window-height="718"
-     id="namedview19"
-     showgrid="false"
-     fit-margin-top="1"
-     fit-margin-left="1"
-     fit-margin-right="1"
-     fit-margin-bottom="1"
-     inkscape:zoom="0.9665786"
-     inkscape:cx="18.141401"
-     inkscape:cy="33.630012"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" />
-  <defs
-     id="defs4" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 61.588905,50.398787 c -4.58857,-7.491533 -9.36444,-14.514869 -15.73224,-22.380979 l 10.01994,-10.394513 c 4.40127,-4.49492 8.52163,-6.742388 13.20384,-7.02332 0.65551,-1.6855946 1.03008,-5.1504366 1.03008,-7.3042526 -2.24746,0.187289 -10.67545,0.280933 -14.32757,0.280933 -3.65212,0 -8.2407,-0.09364 -10.5818,-0.280933 0,2.24746 0.18729,5.244081 0.8428,7.3042526 3.37119,0.187288 3.83941,2.809334 -1.96653,8.615272 l -12.64198,12.548332 0,-10.862735 c 0,-8.427975 0.93645,-9.739004 6.08688,-10.300869 0.8428,-2.4347486 0.8428,-4.7758596 0.8428,-7.3042526 -3.74577,0.187289 -11.33096,0.280933 -15.82588,0.280933 -4.49492,0 -13.6720709,-0.09364 -16.7623309,-0.280933 0,2.434749 0.37458,5.431369 0.8428,7.3042526 5.2440809,0.749153 6.0868809,1.872894 6.0868809,10.300869 l 0,28.467856 c 0,8.615264 -0.93645,10.113581 -5.9932309,10.488158 -0.46822,1.779239 -0.93645,5.056792 -0.93645,7.304252 4.4012799,-0.187288 11.2373209,-0.280932 17.6987709,-0.280932 6.46145,0 12.08011,0.09364 14.88944,0.280932 0,-2.434748 -0.28093,-5.618657 -0.74916,-7.304252 -5.05678,-0.374577 -6.18052,-1.872894 -6.18052,-10.488158 l 0,-10.488157 c 7.39789,8.98984 12.73563,18.822507 17.60512,28.842433 4.68221,-0.655509 19.0098,-0.842798 23.692,-0.842798 0.93645,-1.872884 1.12373,-4.213995 1.12373,-7.02332 -4.77585,-0.561865 -8.14705,-2.809335 -12.26739,-9.458071"
-     id="path4255"
-     style="font-size:93.64426422px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:-3.5px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#496000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Vollkorn;-inkscape-font-specification:Vollkorn Bold"
-     inkscape:connector-curvature="0" />
-  <path
-     d="m 100.10567,23.148306 c -14.421205,0 -25.939465,7.304269 -25.939465,23.130134 0,13.203828 8.33436,21.444536 25.09667,21.444536 16.294075,0 26.220385,-8.334354 26.220385,-23.036489 0,-12.454675 -8.14707,-21.538181 -25.37759,-21.538181 m -1.404665,6.742387 c 4.588565,0 8.989845,5.712313 8.989845,17.886055 0,7.116957 -2.43475,12.73562 -6.64874,12.73562 -6.086865,0 -9.083495,-8.147061 -9.083495,-17.79241 0,-7.023313 2.15383,-12.829265 6.74239,-12.829265"
-     id="path4257"
-     style="font-size:93.64426422px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:-3.5px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#496000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Vollkorn;-inkscape-font-specification:Vollkorn Bold"
-     inkscape:connector-curvature="0" />
-  <path
-     d="m 151.07444,47.308526 c 0,-5.150429 3.09026,-10.207224 5.61865,-10.207224 2.5284,0 3.55848,1.872889 3.65213,5.993233 2.62204,0 7.3979,-0.18729 9.92629,-1.31102 -0.37458,-4.588564 0.18729,-11.611893 0.93644,-15.919525 -2.24746,-1.591951 -4.30764,-2.247462 -6.92967,-2.247462 -5.05679,0 -9.45808,3.277553 -12.17376,7.585185 -0.74915,1.217374 -1.87288,4.494927 -2.71568,6.836031 1.12373,-4.588564 1.6856,-6.929677 1.6856,-8.896205 0,-3.277546 -1.12374,-5.056791 -3.18391,-5.993233 -2.99661,1.498307 -10.7691,3.090261 -20.03987,3.090261 -1.03009,1.966528 -1.21738,4.682216 -1.21738,7.02332 6.08687,0.561865 6.64875,2.247468 6.64875,8.334339 l 0,7.772474 c 0,8.615264 -1.21738,10.113581 -6.27417,10.488158 -0.46822,1.779239 -0.65551,3.933062 -0.65551,7.304252 4.30763,-0.187288 12.17376,-0.280932 18.91614,-0.280932 5.89959,0 13.29749,0.09364 16.85597,0.280932 0,-2.341104 -0.0937,-5.24408 -0.8428,-7.304252 -7.86611,-0.561865 -10.20722,-3.371202 -10.20722,-11.4246 l 0,-1.123732"
-     id="path4259"
-     style="font-size:93.64426422px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:-3.5px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#496000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Vollkorn;-inkscape-font-specification:Vollkorn Bold"
-     inkscape:connector-curvature="0" />
-  <path
-     d="m 231.61531,59.856858 c -2.71568,-0.280933 -3.93306,-1.591962 -8.33434,-11.237312 L 202.49195,3.0147904 c -2.90297,0 -4.68222,0 -7.11697,0.561865 L 175.5224,50.398787 c -3.09026,7.210601 -4.49493,8.896206 -7.49154,9.458071 -0.74916,2.341104 -0.93645,4.494927 -0.93645,7.304252 1.87289,-0.187288 5.8996,-0.280932 8.98985,-0.280932 3.09026,0 8.80257,0.09364 10.95638,0.280932 0,-2.996613 -0.28093,-5.337725 -0.74915,-7.304252 -4.0267,-0.655509 -4.68221,-4.494928 -3.55848,-7.210608 l 0.18728,-0.374578 c 7.21061,-0.749153 14.42123,-0.936442 21.25725,-0.936442 l 0.65551,1.404664 c 1.87289,4.213987 1.21737,6.180522 -2.90297,7.116964 -0.46822,1.872883 -0.74915,3.839418 -0.74915,7.304252 3.55847,-0.280932 13.48477,-0.280932 16.48139,-0.280932 2.99661,0 10.95638,0 14.70215,0.280932 0,-2.996613 -0.28094,-5.712301 -0.74916,-7.304252 m -30.05981,-14.608505 -15.91952,0 3.09026,-7.959763 c 1.87288,-4.588564 3.37119,-8.896209 4.58857,-12.922908 1.03008,4.026699 2.62204,8.334344 4.68221,12.922908 l 3.55848,7.959763"
-     id="path4261"
-     style="font-size:93.64426422000001082px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:-3.50000000000000000px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#496000;fill-opacity:1;stroke:#7ca400;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Vollkorn;-inkscape-font-specification:Vollkorn Bold;opacity:1"
-     inkscape:connector-curvature="0" />
-  <path
-     d="m 267.67298,39.25512 c -0.56186,0 -1.31102,0 -2.06017,-0.187289 -0.93644,1.779239 -1.31102,4.026706 -0.8428,6.742387 1.6856,0.655509 3.65213,0.936443 6.46146,0.936443 13.5784,0 22.19369,-10.113593 22.19369,-22.942845 0,-11.050012 -5.43139,-20.4144486 -20.88267,-20.4144486 -8.80256,0 -14.70216,0.187288 -20.32081,0.187288 -5.52501,0 -10.30087,-0.09364 -16.20046,-0.280933 0,2.996614 0.37458,5.431369 0.8428,7.3042526 5.24408,0.749153 6.08688,1.872894 6.08688,10.300869 l 0,28.467856 c 0,8.615264 -1.21738,10.113581 -6.27417,10.488158 -0.46822,1.779239 -0.65551,3.933062 -0.65551,7.304252 4.30764,-0.187288 12.17376,-0.280932 18.91614,-0.280932 5.89959,0 14.23394,0.09364 17.79241,0.280932 0,-2.341104 -0.0936,-5.24408 -0.84279,-7.304252 -7.86611,-0.561865 -10.20723,-3.371202 -10.20723,-11.4246 l 0,-36.989485 c 1.12373,-0.468221 2.43475,-0.65551 4.02671,-0.65551 6.55509,0 9.92629,6.274175 9.92629,14.70215 0,10.207215 -4.02671,13.765707 -7.95977,13.765707"
-     id="path4263"
-     style="font-size:93.64426422000001082px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:-3.50000000000000000px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#496000;fill-opacity:1;stroke:#7ca400;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Vollkorn;-inkscape-font-specification:Vollkorn Bold;opacity:1"
-     inkscape:connector-curvature="0" />
-  <g
-     transform="matrix(0.47473464,0,0,0.47473464,90.028005,-149.04486)"
-     id="g4167"
-     style="fill:#496000;fill-opacity:1">
-    <g
-       id="g4171"
-       style="fill:#496000;fill-opacity:1">
-      <path
-         d="m -41.0625,316.71875 c -9.576308,1.01227 -20.437266,3.97659 -29.25,7.9375 -12.689388,4.5451 -17.191568,11.74018 -24.8125,23.4375 -11.15001,-20.80692 -41.92684,-26.49295 -41.8125,21.8125 19.56928,-37.23779 25.50612,-2.99825 18.56887,0.52807 -6.86631,3.49026 -13.44723,13.16503 -18.87854,20.52748 -4.82783,2.6553 -11.25044,5.91984 -19.19033,14.56945 -12.14063,1.68579 -22.40697,-0.0589 -25.34375,5.0625 -1.92028,4.88459 -0.83547,28.6183 -1.34375,35.5625 -0.55023,7.5173 -4.47505,20.2185 -4.40625,27.78125 0.0449,4.93417 13.37698,-12.52554 26.0625,-13.9375 14.32568,-1.59452 20.40751,-0.6761 31.21875,-1.84375 3.43365,-0.38537 6.60948,-1.10948 8.71875,-3.21875 4.52684,-4.79348 0.17472,-20.54012 -0.29959,-24.04322 8.88011,-4.01684 12.99872,-10.88406 16.73709,-16.70678 3.77753,-0.95969 15.445077,-3.54975 21,-16.34375 7.291276,-0.62721 24.237611,-3.90486 11.375,16.46875 -6.517142,10.32276 3.151699,23.79009 20.8125,23.75 1.965174,-0.004 -17.965788,-13.53523 -1.5,-27.15625 6.115872,-5.05925 1.147006,-24.90772 -1.8125,-28.03125 8.5569,-3.5296 16.780975,-7.81843 24.028066,-11.61639 -5.695239,-3.30642 -12.406435,-4.85672 -18.403066,-4.82111 5.354884,-3.41771 16.921224,-11.53597 20.25,-16.09375 -11.616163,-0.86442 -19.285929,-0.0412 -27.78125,2.8125 9.452491,-6.90785 8.090662,-15.36938 18.71875,-24 -8.87593,1.32852 -13.462677,3.88184 -18.255425,7.21014 6.099195,-6.84313 11.408663,-11.09351 15.599175,-19.64764 z m -12.441804,7.73597 c -11.095923,11.19905 -13.975386,11.23168 -18.558196,17.23278 -6.054124,7.92777 -5.560879,14.47415 -6.5625,18.21875 -1.7769,6.64303 -7.715317,4.85942 -13.0625,15.53125 14.183728,-6.21639 24.683497,-12.45862 46.25,-18.375 -9.461391,8.73077 -24.403941,17.1424 -25.21875,18.25 -2.183992,3.18854 -5.444043,10.06958 -11.15625,15.3125 2.408839,-7.40462 1.715415,-13.1914 0.25,-11.875 -5.549237,4.98497 -4.613076,19.29372 -12.65625,24.78125 -19.7524,13.47626 -22.75335,1.44128 -25.46875,3.53125 -3.95231,3.04198 5.19443,6.03907 8.84375,7.09375 -12.45497,22.57734 -15.33207,-1.01345 -17.5625,0.9375 -2.34427,3.49555 -4.94017,10.31391 1.65625,27.03125 4.79214,12.14474 -5.64918,9.38439 -28.6875,10.03125 -6.33671,0.17792 -7.40723,0.64601 -16.875,3.40625 -3.67924,1.07265 -6.43347,0.3457 -4.09375,-7.375 6.22132,-21.48923 25.63482,-51.11456 47.1875,-51.78125 5.41258,0.0202 -2.85402,-4.43244 -1.15625,-7 1.14364,-1.71649 1.69063,-3.07836 4.875,-6.78125 3.1993,-3.72024 7.1807,-7.23815 10.6875,-8.4375 9.9105,-3.38947 16.179182,-10.5037 20.9375,-17.75 4.758318,-7.2463 9.760842,-14.98099 13.790979,-19.5625 8.399265,-7.13109 17.947719,-11.1466 26.579717,-12.42028 z m -46.383609,29.16486 c -2.130107,3.06203 -4.848197,5.48276 -8.829717,8.99027 -0.70108,-9.35992 -4.24033,-21.15662 -15.27919,-16.24664 6.35844,-8.45156 16.77027,-5.51365 24.108907,7.25637 z m -11.674587,23.91167 c -4.03898,0.1203 -13.63356,6.71296 -11.3125,7.3125 3.448,0.89065 5.85746,-3.06506 6.65625,-2 0.79879,1.06505 -3.98884,6.11989 -2.125,8.25 1.86385,2.13011 10.52138,-10.92425 8.125,-13.1875 -0.29955,-0.28291 -0.76675,-0.39219 -1.34375,-0.375 z m 13.78125,5.6875 c -12.17132,-0.16801 -21.14791,15.22012 -16.3125,23.46875 1.53677,2.62156 3.3125,-3.75 3.3125,-3.75 0,0 3.11795,3.53663 14,-2.375 8.402975,-4.56488 4,-12 4,-12 0,0 4.71202,-2.54027 0.375,-4.25 -1.837848,-0.72451 -3.636241,-1.06975 -5.375,-1.09375 z m 35.75,1.59375 c 2.263242,2.13011 10.208153,17.39173 3.34375,24 -10.703205,10.30384 -6.124144,19.34772 -2.063621,23.07541 0,0 -16.825481,-4.92207 -3.316804,-22.83402 5.115247,-6.78261 -1.725255,-19.11178 -10.487087,-17.76291 4.526484,-3.3283 9.31616,-5.23421 12.523762,-6.47848 z M -96,389.34375 c 3.349039,6.48058 -5.80905,12.7184 -13.5625,10.6875 3.59456,-5.45841 7.17217,-9.62245 13.5625,-10.6875 z m -3.28125,2.28125 c -0.93337,0.009 -2.08278,0.50309 -3.03125,1.40625 -1.51756,1.44506 -2.00642,3.38529 -1.09375,4.34375 0.91267,0.95846 2.88869,0.57006 4.40625,-0.875 1.517557,-1.44506 2.006417,-3.38529 1.09375,-4.34375 -0.34225,-0.35942 -0.814977,-0.5364 -1.375,-0.53125 z"
-         id="path4173"
-         style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#496000;fill-opacity:1;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
-         inkscape:connector-curvature="0" />
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="296.4375" height="77.365486">
+  <defs>
+    <style type="text/css">
+path { stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:4 }
+.logoinit { fill:#fff; stroke:#636f07; stroke-width:4 }
+.logoend { fill:#636f07; fill-opacity:1; stroke:#8e9f0a; stroke-width:2; }
+#karl-fill { fill:#ffffff; }
+#karl { fill:#636f07; stroke:none; }
+#karl-arm { fill:#636f07; stroke:none; }
+#logo-k-fill { fill:#ffffff; stroke:none; }
+    </style>
+  </defs>
+  <path d="m 61.588905,50.398787 c -4.58857,-7.491533 -9.36444,-14.514869 -15.73224,-22.380979 l 10.01994,-10.394513 c 4.40127,-4.49492 8.52163,-6.742388 13.20384,-7.02332 0.65551,-1.6855946 1.03008,-5.1504366 1.03008,-7.3042526 -2.24746,0.187289 -10.67545,0.280933 -14.32757,0.280933 -3.65212,0 -8.2407,-0.09364 -10.5818,-0.280933 0,2.24746 0.18729,5.244081 0.8428,7.3042526 3.37119,0.187288 3.83941,2.809334 -1.96653,8.615272 l -12.64198,12.548332 0,-10.862735 c 0,-8.427975 0.93645,-9.739004 6.08688,-10.300869 0.8428,-2.4347486 0.8428,-4.7758596 0.8428,-7.3042526 -3.74577,0.187289 -11.33096,0.280933 -15.82588,0.280933 -4.49492,0 -13.6720709,-0.09364 -16.7623309,-0.280933 0,2.434749 0.37458,5.431369 0.8428,7.3042526 5.2440809,0.749153 6.0868809,1.872894 6.0868809,10.300869 l 0,28.467856 c 0,8.615264 -0.93645,10.113581 -5.9932309,10.488158 -0.46822,1.779239 -0.93645,5.056792 -0.93645,7.304252 4.4012799,-0.187288 11.2373209,-0.280932 17.6987709,-0.280932 6.46145,0 12.08011,0.09364 14.88944,0.280932 0,-2.434748 -0.28093,-5.618657 -0.74916,-7.304252 -5.05678,-0.374577 -6.18052,-1.872894 -6.18052,-10.488158 l 0,-10.488157 c 7.39789,8.98984 12.73563,18.822507 17.60512,28.842433 4.68221,-0.655509 19.0098,-0.842798 23.692,-0.842798 0.93645,-1.872884 1.12373,-4.213995 1.12373,-7.02332 -4.77585,-0.561865 -8.14705,-2.809335 -12.26739,-9.458071" class="logoinit" />
+  <path d="m 100.10567,23.148306 c -14.421205,0 -25.939465,7.304269 -25.939465,23.130134 0,13.203828 8.33436,21.444536 25.09667,21.444536 16.294075,0 26.220385,-8.334354 26.220385,-23.036489 0,-12.454675 -8.14707,-21.538181 -25.37759,-21.538181 m -1.404665,6.742387 c 4.588565,0 8.989845,5.712313 8.989845,17.886055 0,7.116957 -2.43475,12.73562 -6.64874,12.73562 -6.086865,0 -9.083495,-8.147061 -9.083495,-17.79241 0,-7.023313 2.15383,-12.829265 6.74239,-12.829265" class="logoinit" />
+  <path d="m 151.07444,47.308526 c 0,-5.150429 3.09026,-10.207224 5.61865,-10.207224 2.5284,0 3.55848,1.872889 3.65213,5.993233 2.62204,0 7.3979,-0.18729 9.92629,-1.31102 -0.37458,-4.588564 0.18729,-11.611893 0.93644,-15.919525 -2.24746,-1.591951 -4.30764,-2.247462 -6.92967,-2.247462 -5.05679,0 -9.45808,3.277553 -12.17376,7.585185 -0.74915,1.217374 -1.87288,4.494927 -2.71568,6.836031 1.12373,-4.588564 1.6856,-6.929677 1.6856,-8.896205 0,-3.277546 -1.12374,-5.056791 -3.18391,-5.993233 -2.99661,1.498307 -10.7691,3.090261 -20.03987,3.090261 -1.03009,1.966528 -1.21738,4.682216 -1.21738,7.02332 6.08687,0.561865 6.64875,2.247468 6.64875,8.334339 l 0,7.772474 c 0,8.615264 -1.21738,10.113581 -6.27417,10.488158 -0.46822,1.779239 -0.65551,3.933062 -0.65551,7.304252 4.30763,-0.187288 12.17376,-0.280932 18.91614,-0.280932 5.89959,0 13.29749,0.09364 16.85597,0.280932 0,-2.341104 -0.0937,-5.24408 -0.8428,-7.304252 -7.86611,-0.561865 -10.20722,-3.371202 -10.20722,-11.4246 l 0,-1.123732" class="logoinit" />
+  <path d="m 231.61531,59.856858 c -2.71568,-0.280933 -3.93306,-1.591962 -8.33434,-11.237312 L 202.49195,3.0147904 c -2.90297,0 -4.68222,0 -7.11697,0.561865 L 175.5224,50.398787 c -3.09026,7.210601 -4.49493,8.896206 -7.49154,9.458071 -0.74916,2.341104 -0.93645,4.494927 -0.93645,7.304252 1.87289,-0.187288 5.8996,-0.280932 8.98985,-0.280932 3.09026,0 8.80257,0.09364 10.95638,0.280932 0,-2.996613 -0.28093,-5.337725 -0.74915,-7.304252 -4.0267,-0.655509 -4.68221,-4.494928 -3.55848,-7.210608 l 0.18728,-0.374578 c 7.21061,-0.749153 14.42123,-0.936442 21.25725,-0.936442 l 0.65551,1.404664 c 1.87289,4.213987 1.21737,6.180522 -2.90297,7.116964 -0.46822,1.872883 -0.74915,3.839418 -0.74915,7.304252 3.55847,-0.280932 13.48477,-0.280932 16.48139,-0.280932 2.99661,0 10.95638,0 14.70215,0.280932 0,-2.996613 -0.28094,-5.712301 -0.74916,-7.304252 m -30.05981,-14.608505 -15.91952,0 3.09026,-7.959763 c 1.87288,-4.588564 3.37119,-8.896209 4.58857,-12.922908 1.03008,4.026699 2.62204,8.334344 4.68221,12.922908 l 3.55848,7.959763" class="logoend" />
+  <path d="m 267.67298,39.25512 c -0.56186,0 -1.31102,0 -2.06017,-0.187289 -0.93644,1.779239 -1.31102,4.026706 -0.8428,6.742387 1.6856,0.655509 3.65213,0.936443 6.46146,0.936443 13.5784,0 22.19369,-10.113593 22.19369,-22.942845 0,-11.050012 -5.43139,-20.4144486 -20.88267,-20.4144486 -8.80256,0 -14.70216,0.187288 -20.32081,0.187288 -5.52501,0 -10.30087,-0.09364 -16.20046,-0.280933 0,2.996614 0.37458,5.431369 0.8428,7.3042526 5.24408,0.749153 6.08688,1.872894 6.08688,10.300869 l 0,28.467856 c 0,8.615264 -1.21738,10.113581 -6.27417,10.488158 -0.46822,1.779239 -0.65551,3.933062 -0.65551,7.304252 4.30764,-0.187288 12.17376,-0.280932 18.91614,-0.280932 5.89959,0 14.23394,0.09364 17.79241,0.280932 0,-2.341104 -0.0936,-5.24408 -0.84279,-7.304252 -7.86611,-0.561865 -10.20723,-3.371202 -10.20723,-11.4246 l 0,-36.989485 c 1.12373,-0.468221 2.43475,-0.65551 4.02671,-0.65551 6.55509,0 9.92629,6.274175 9.92629,14.70215 0,10.207215 -4.02671,13.765707 -7.95977,13.765707" class="logoend" />
+  <path d="M 3.7328171,70.987254 C 7.4017351,48.804904 18.700387,40.603291 26.680069,37.639451 c 1.27219,-5.14938 6.598055,-9.4801 9.575111,-11.39108 0.681635,-6.57435 0.11697,-10.26917 -7.428965,-9.07985 4.670973,-11.4318596 9.855482,-5.06313 16.266413,1.25279 C 49.964594,9.8274014 57.899726,5.0156714 67.126661,3.3011214 56.270295,17.557141 53.893683,21.509841 71.759594,19.149581 c -13.161586,10.00294 -9.876435,11.28363 -7.361052,18.67589 3.609629,9.323133 -9.919494,10.306293 -0.699008,20.139683 -11.877419,-4.81211 -7.316097,-6.57437 -4.759364,-15.985363 -1.365082,-4.65767 -4.246008,-3.42634 -9.235539,-3.65072 -2.887718,5.960093 -5.515198,6.463833 -10.536382,8.516663 -2.431784,4.2103 -4.408093,6.88534 -8.77893,8.11858 0,0 1.719864,3.18045 1.33117,10.75998 -8.965548,3.22634 -13.226698,-1.42912 -27.9876719,5.26296 z" id="karl-fill" />
+  <g transform="matrix(0.47473464,0,0,0.47473464,90.028005,-149.04486)">
+    <path d="m -41.0625,316.71875 c -9.576308,1.01227 -20.437266,3.97659 -29.25,7.9375 -12.689388,4.5451 -17.191568,11.74018 -24.8125,23.4375 -11.15001,-20.80692 -41.92684,-26.49295 -41.8125,21.8125 19.56928,-37.23779 25.50612,-2.99825 18.56887,0.52807 -6.86631,3.49026 -13.44723,13.16503 -18.87854,20.52748 -4.82783,2.6553 -11.25044,5.91984 -19.19033,14.56945 -12.14063,1.68579 -22.40697,-0.0589 -25.34375,5.0625 -1.92028,4.88459 -0.83547,28.6183 -1.34375,35.5625 -0.55023,7.5173 -4.47505,20.2185 -4.40625,27.78125 0.0449,4.93417 13.37698,-12.52554 26.0625,-13.9375 14.32568,-1.59452 20.40751,-0.6761 31.21875,-1.84375 3.43365,-0.38537 6.60948,-1.10948 8.71875,-3.21875 4.52684,-4.79348 0.17472,-20.54012 -0.29959,-24.04322 8.88011,-4.01684 12.99872,-10.88406 16.73709,-16.70678 3.77753,-0.95969 15.445077,-3.54975 21,-16.34375 7.291276,-0.62721 21.90219,-3.71024 9.039579,16.66337 -6.517142,10.32276 5.48712,23.59547 23.147921,23.55538 1.965174,-0.004 -17.965788,-13.53523 -1.5,-27.15625 6.115872,-5.05925 1.147006,-24.90772 -1.8125,-28.03125 8.5569,-3.5296 16.780975,-7.81843 24.028066,-11.61639 -5.695239,-3.30642 -12.406435,-4.85672 -18.403066,-4.82111 5.354884,-3.41771 16.921224,-11.53597 20.25,-16.09375 -11.616163,-0.86442 -19.285929,-0.0412 -27.78125,2.8125 9.452491,-6.90785 8.090662,-15.36938 18.71875,-24 -8.87593,1.32852 -13.462677,3.88184 -18.255425,7.21014 6.099195,-6.84313 11.408663,-11.09351 15.599175,-19.64764 z m -12.441804,7.73597 c -11.095923,11.19905 -13.975386,11.23168 -18.558196,17.23278 -6.054124,7.92777 -5.560879,14.47415 -6.5625,18.21875 -1.7769,6.64303 -7.715317,4.85942 -13.0625,15.53125 14.183728,-6.21639 24.683497,-12.45862 46.25,-18.375 -9.461391,8.73077 -24.403941,17.1424 -25.21875,18.25 -2.183992,3.18854 -5.444043,10.06958 -11.15625,15.3125 2.408839,-7.40462 1.715415,-13.1914 0.25,-11.875 -5.549237,4.98497 -4.613076,19.29372 -12.65625,24.78125 -19.7524,13.47626 -22.75335,1.44128 -25.46875,3.53125 -3.95231,3.04198 5.19443,6.03907 8.84375,7.09375 -12.45497,22.57734 -15.33207,-1.01345 -17.5625,0.9375 -2.34427,3.49555 -4.94017,10.31391 1.65625,27.03125 4.79214,12.14474 -5.64918,9.38439 -28.6875,10.03125 -6.33671,0.17792 -7.40723,0.64601 -16.875,3.40625 -3.67924,1.07265 -6.43347,0.3457 -4.09375,-7.375 6.22132,-21.48923 25.63482,-51.11456 47.1875,-51.78125 5.41258,0.0202 -2.85402,-4.43244 -1.15625,-7 1.14364,-1.71649 1.69063,-3.07836 4.875,-6.78125 3.1993,-3.72024 7.1807,-7.23815 10.6875,-8.4375 9.9105,-3.38947 16.179182,-10.5037 20.9375,-17.75 4.758318,-7.2463 9.760842,-14.98099 13.790979,-19.5625 8.399265,-7.13109 17.947719,-11.1466 26.579717,-12.42028 z m -46.383609,29.16486 c -2.130107,3.06203 -4.848197,5.48276 -8.829717,8.99027 -0.70108,-9.35992 -4.24033,-21.15662 -15.27919,-16.24664 6.35844,-8.45156 16.77027,-5.51365 24.108907,7.25637 z m -11.674587,23.91167 c -4.03898,0.1203 -13.63356,6.71296 -11.3125,7.3125 3.448,0.89065 5.85746,-3.06506 6.65625,-2 0.79879,1.06505 -3.98884,6.11989 -2.125,8.25 1.86385,2.13011 10.52138,-10.92425 8.125,-13.1875 -0.29955,-0.28291 -0.76675,-0.39219 -1.34375,-0.375 z m 13.78125,5.6875 c -12.17132,-0.16801 -21.14791,15.22012 -16.3125,23.46875 1.53677,2.62156 3.3125,-3.75 3.3125,-3.75 0,0 3.11795,3.53663 14,-2.375 8.402975,-4.56488 4,-12 4,-12 0,0 4.71202,-2.54027 0.375,-4.25 -1.837848,-0.72451 -3.636241,-1.06975 -5.375,-1.09375 z m 35.75,1.59375 c 2.263242,2.13011 10.208153,17.39173 3.34375,24 -10.703205,10.30384 -6.124144,19.34772 -2.063621,23.07541 0,0 -16.825481,-4.92207 -3.316804,-22.83402 5.115247,-6.78261 -1.725255,-19.11178 -10.487087,-17.76291 4.526484,-3.3283 9.31616,-5.23421 12.523762,-6.47848 z M -96,389.34375 c 3.349039,6.48058 -5.80905,12.7184 -13.5625,10.6875 3.59456,-5.45841 7.17217,-9.62245 13.5625,-10.6875 z m -3.28125,2.28125 c -0.93337,0.009 -2.08278,0.50309 -3.03125,1.40625 -1.51756,1.44506 -2.00642,3.38529 -1.09375,4.34375 0.91267,0.95846 2.88869,0.57006 4.40625,-0.875 1.517557,-1.44506 2.006417,-3.38529 1.09375,-4.34375 -0.34225,-0.35942 -0.814977,-0.5364 -1.375,-0.53125 z" id="karl" />
   </g>
-  <path
-     d="M 3.7328171,70.987254 C 7.4017351,48.804904 18.700387,40.603291 26.680069,37.639451 c 1.27219,-5.14938 6.598055,-9.4801 9.575111,-11.39108 0.681635,-6.57435 0.11697,-10.26917 -7.428965,-9.07985 4.670973,-11.4318596 9.855482,-5.06313 16.266413,1.25279 C 49.964594,9.8274014 57.899726,5.0156714 67.126661,3.3011214 56.270295,17.557141 53.893683,21.509841 71.759594,19.149581 c -13.161586,10.00294 -9.876435,11.28363 -7.361052,18.67589 3.609629,9.323133 -9.919494,10.306293 -0.699008,20.139683 -11.877419,-4.81211 -7.316097,-6.57437 -4.759364,-15.985363 -1.365082,-4.65767 -4.246008,-3.42634 -9.235539,-3.65072 -2.887718,5.960093 -5.515198,6.463833 -10.536382,8.516663 -2.431784,4.2103 -4.408093,6.88534 -8.77893,8.11858 0,0 1.719864,3.18045 1.33117,10.75998 -8.965548,3.22634 -13.226698,-1.42912 -27.9876719,5.26296 z"
-     id="path4177"
-     style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     inkscape:connector-curvature="0" />
-  <g
-     transform="matrix(0.47473464,0,0,0.47473464,90.028005,-149.04486)"
-     id="g4179"
-     style="fill:#496000;fill-opacity:1">
-    <g
-       id="g4183"
-       style="fill:#496000;fill-opacity:1">
-      <path
-         d="m -41.0625,316.71875 c -9.576308,1.01227 -20.437266,3.97659 -29.25,7.9375 -12.689388,4.5451 -17.191568,11.74018 -24.8125,23.4375 -11.15001,-20.80692 -41.92684,-26.49295 -41.8125,21.8125 19.56928,-37.23779 25.50612,-2.99825 18.56887,0.52807 -6.86631,3.49026 -13.44723,13.16503 -18.87854,20.52748 -4.82783,2.6553 -11.25044,5.91984 -19.19033,14.56945 -12.14063,1.68579 -22.40697,-0.0589 -25.34375,5.0625 -1.92028,4.88459 -0.83547,28.6183 -1.34375,35.5625 -0.55023,7.5173 -4.47505,20.2185 -4.40625,27.78125 0.0449,4.93417 13.37698,-12.52554 26.0625,-13.9375 14.32568,-1.59452 20.40751,-0.6761 31.21875,-1.84375 3.43365,-0.38537 6.60948,-1.10948 8.71875,-3.21875 4.52684,-4.79348 0.17472,-20.54012 -0.29959,-24.04322 8.88011,-4.01684 12.99872,-10.88406 16.73709,-16.70678 3.77753,-0.95969 15.445077,-3.54975 21,-16.34375 7.291276,-0.62721 21.90219,-3.71024 9.039579,16.66337 -6.517142,10.32276 5.48712,23.59547 23.147921,23.55538 1.965174,-0.004 -17.965788,-13.53523 -1.5,-27.15625 6.115872,-5.05925 1.147006,-24.90772 -1.8125,-28.03125 8.5569,-3.5296 16.780975,-7.81843 24.028066,-11.61639 -5.695239,-3.30642 -12.406435,-4.85672 -18.403066,-4.82111 5.354884,-3.41771 16.921224,-11.53597 20.25,-16.09375 -11.616163,-0.86442 -19.285929,-0.0412 -27.78125,2.8125 9.452491,-6.90785 8.090662,-15.36938 18.71875,-24 -8.87593,1.32852 -13.462677,3.88184 -18.255425,7.21014 6.099195,-6.84313 11.408663,-11.09351 15.599175,-19.64764 z m -12.441804,7.73597 c -11.095923,11.19905 -13.975386,11.23168 -18.558196,17.23278 -6.054124,7.92777 -5.560879,14.47415 -6.5625,18.21875 -1.7769,6.64303 -7.715317,4.85942 -13.0625,15.53125 14.183728,-6.21639 24.683497,-12.45862 46.25,-18.375 -9.461391,8.73077 -24.403941,17.1424 -25.21875,18.25 -2.183992,3.18854 -5.444043,10.06958 -11.15625,15.3125 2.408839,-7.40462 1.715415,-13.1914 0.25,-11.875 -5.549237,4.98497 -4.613076,19.29372 -12.65625,24.78125 -19.7524,13.47626 -22.75335,1.44128 -25.46875,3.53125 -3.95231,3.04198 5.19443,6.03907 8.84375,7.09375 -12.45497,22.57734 -15.33207,-1.01345 -17.5625,0.9375 -2.34427,3.49555 -4.94017,10.31391 1.65625,27.03125 4.79214,12.14474 -5.64918,9.38439 -28.6875,10.03125 -6.33671,0.17792 -7.40723,0.64601 -16.875,3.40625 -3.67924,1.07265 -6.43347,0.3457 -4.09375,-7.375 6.22132,-21.48923 25.63482,-51.11456 47.1875,-51.78125 5.41258,0.0202 -2.85402,-4.43244 -1.15625,-7 1.14364,-1.71649 1.69063,-3.07836 4.875,-6.78125 3.1993,-3.72024 7.1807,-7.23815 10.6875,-8.4375 9.9105,-3.38947 16.179182,-10.5037 20.9375,-17.75 4.758318,-7.2463 9.760842,-14.98099 13.790979,-19.5625 8.399265,-7.13109 17.947719,-11.1466 26.579717,-12.42028 z m -46.383609,29.16486 c -2.130107,3.06203 -4.848197,5.48276 -8.829717,8.99027 -0.70108,-9.35992 -4.24033,-21.15662 -15.27919,-16.24664 6.35844,-8.45156 16.77027,-5.51365 24.108907,7.25637 z m -11.674587,23.91167 c -4.03898,0.1203 -13.63356,6.71296 -11.3125,7.3125 3.448,0.89065 5.85746,-3.06506 6.65625,-2 0.79879,1.06505 -3.98884,6.11989 -2.125,8.25 1.86385,2.13011 10.52138,-10.92425 8.125,-13.1875 -0.29955,-0.28291 -0.76675,-0.39219 -1.34375,-0.375 z m 13.78125,5.6875 c -12.17132,-0.16801 -21.14791,15.22012 -16.3125,23.46875 1.53677,2.62156 3.3125,-3.75 3.3125,-3.75 0,0 3.11795,3.53663 14,-2.375 8.402975,-4.56488 4,-12 4,-12 0,0 4.71202,-2.54027 0.375,-4.25 -1.837848,-0.72451 -3.636241,-1.06975 -5.375,-1.09375 z m 35.75,1.59375 c 2.263242,2.13011 10.208153,17.39173 3.34375,24 -10.703205,10.30384 -6.124144,19.34772 -2.063621,23.07541 0,0 -16.825481,-4.92207 -3.316804,-22.83402 5.115247,-6.78261 -1.725255,-19.11178 -10.487087,-17.76291 4.526484,-3.3283 9.31616,-5.23421 12.523762,-6.47848 z M -96,389.34375 c 3.349039,6.48058 -5.80905,12.7184 -13.5625,10.6875 3.59456,-5.45841 7.17217,-9.62245 13.5625,-10.6875 z m -3.28125,2.28125 c -0.93337,0.009 -2.08278,0.50309 -3.03125,1.40625 -1.51756,1.44506 -2.00642,3.38529 -1.09375,4.34375 0.91267,0.95846 2.88869,0.57006 4.40625,-0.875 1.517557,-1.44506 2.006417,-3.38529 1.09375,-4.34375 -0.34225,-0.35942 -0.814977,-0.5364 -1.375,-0.53125 z"
-         id="path4185"
-         style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#496000;fill-opacity:1;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
-         inkscape:connector-curvature="0" />
-    </g>
-  </g>
-  <path
-     d="m 59.240185,44.170904 2.34937,3.58182 -1.42503,3.04263 -3.15817,-4.15954 z"
-     id="path4187"
-     style="fill:#496000;fill-opacity:1;stroke:none"
-     inkscape:connector-curvature="0" />
-  <path
-     d="m 67.692239,59.713406 c -5.5302,-5.18002 -9.82994,-12.48058 -13.3685,-17.839648 -2.04943,-3.103798 -7.67551,12.310518 -7.67551,12.310518 l 14.11218,10.14676 z"
-     id="path4189"
-     style="fill:#ffffff;fill-opacity:1;stroke:none"
-     inkscape:connector-curvature="0" />
-  <style
-     id="style3"
-     type="text/css" />
+  <path d="m 59.240185,44.170904 2.34937,3.58182 -1.42503,3.04263 -3.15817,-4.15954 z" id="karl-arm" />
+  <path d="m 67.692239,59.713406 c -5.5302,-5.18002 -9.82994,-12.48058 -13.3685,-17.839648 -2.04943,-3.103798 -7.67551,12.310518 -7.67551,12.310518 l 14.11218,10.14676 z" id="logo-k-fill" />
 </svg>
diff --git a/public/js/demo/about.html b/public/js/demo/about.html
new file mode 100644
index 0000000..8381ae5
--- /dev/null
+++ b/public/js/demo/about.html
@@ -0,0 +1,102 @@
+ <!DOCTYPE html>
+<html>
+  <head>
+    <title>Tutorial demo</title>
+    <link type="text/css" rel="stylesheet" href="../../css/build/kalamar.css" />
+    <script src="../src/session.js"></script>
+    <script src="../src/tutorial.js"></script>
+  </head>
+  <body class="embedded">
+    <div id="sidebar" tabindex="0" class="active">
+      <h2>Tutorial</h2>
+      <nav>
+	<ul>
+	  <li>About ...
+	    <ul>
+	      <li>Kalamar</li>
+	      <li>Koral</li>
+	      <li>Kustvakt</li>
+	      <li>Krill</li>
+	      <!-- <li>Karang</li> -->
+	    </ul>
+	  </li>
+	  <li>Query Languages
+	    <ul>
+	      <li>Cosmas II</li>
+	      <li>Poliqarp</li>
+	      <li>Annis QL</li>
+	      <li>CQL</li>
+	      <li>RegExp</li>
+	    </ul>
+	  </li>
+	  <li>Data
+	    <ul>
+	      <li>Corpora
+		<ul>
+		  <li>DeReKo</li>
+		</ul>
+	      </li>
+	      <li>Annotations
+		<ul>
+		  <li>Connexor</li>
+		  <li>Mate</li>
+		  <li>TreeTagger</li>
+		</ul>
+	      </li>
+	    </ul>
+	  </li>
+	  <li>API
+	    <ul>
+	      <li>KoralQuery</li>
+	      <li>Search API</li>
+	      <li>Match Information API</li>
+	      <li>User API</li>
+	    </ul>
+	  </li>
+	</ul>
+      </nav>
+    </div>
+    <main class="tutorial">
+      <h2>KorAP-Tutorial</h2>
+      <section id="tut-intro">
+	<h3>Frontend Features</h3>
+	<p>This frontend ...</p>
+      </section>
+
+      <section id="tut-examples">
+	<h3>Example Queries</h3>
+	<p><strong>Poliqarp</strong>: Find all occurrences of the lemma &quot;baum&quot; as annotated by the <a href="#">default foundry</a>.</p>
+	<pre class="query tutorial" data-query="[base=Baum]" data-query-language="poliqarp"><code>[base=Baum]</code></pre>
+      </section>
+
+      <section id="tut-caveats">
+	<h3>Caveats</h3>
+	<p>Memcheck is not perfect; it occasionally produces false positives, and there are mechanisms for suppressing these (see Suppressing errors in the Valgrind User Manual). However, it is typically right 99% of the time, so you should be wary of ignoring its error messages. After all, you wouldn’t ignore warning messages produced by a compiler, right?</p>
+	<p>The suppression mechanism is also useful if Memcheck is reporting errors in library code that you cannot change. The default suppression set hides a lot of these, but you may come across more. Memcheck cannot detect every memory error your program has. For example, it can’t detect out-of-range reads or writes to arrays that are allocated statically or on the stack. But it should detect many errors that could crash your program (eg. cause a segmentation fault).</p>
+	<p>Try to make your program so clean that Memcheck reports no errors. Once you achieve this state, it is much easier to see when changes to the program cause Memcheck to report new errors. Experience from several years of Memcheck use shows that it is possible to make even huge programs run Memcheck-clean. For example, large parts of KDE, OpenOffice.org and Firefox are Memcheck-clean, or very close to it.</p>
+      </section>
+      <section id="tut-more-information">
+	<h3>More information</h3>
+	<p>Please consult the Valgrind FAQ and the Valgrind User Manual, which have much more information. Note that the other tools in the Valgrind distribution can be invoked with the <code>--tool</code> option.</p>
+      </section>
+      <section id="tut-overview">
+	<h3>An Overview of Valgrind</h3>
+	  <p>Valgrind is an instrumentation framework for building dynamic analysis tools. It comes with a set of tools each of which performs some kind of debugging, profiling, or similar task that helps you improve your programs. Valgrind’s architecture is modular, so new tools can be created easily and without disturbing the existing structure.</p>
+	  <p>A number of useful tools are supplied as standard.</p>
+	  <ol>
+	    <li><strong>Memcheck</strong> is a memory error detector. It helps you make your programs, particularly those written in C and C++, more correct.</li>
+	    <li><strong>Cachegrind</strong> is a cache and branch-prediction profiler. It helps you make your programs run faster.</li>
+	    <li><strong>Callgrind</strong> is a call-graph generating cache profiler. It has some overlap with Cachegrind, but also gathers some information that Cachegrind does not.</li>
+	    <li><strong>Helgrind</strong> is a thread error detector. It helps you make your multi-threaded programs more correct.</li>
+	    <li><strong>DRD</strong> is also a thread error detector. It is similar to Helgrind but uses different analysis techniques and so may find different problems.</li>
+	    <li><strong>Massif</strong> is a heap profiler. It helps you make your programs use less memory.</li>
+	    <li><strong>DHAT</strong> is a different kind of heap profiler. It helps you understand issues of block lifetimes, block utilisation, and layout inefficiencies.</li>
+	    <li><strong>SGcheck</strong> is an experimental tool that can detect overruns of stack and global arrays. Its functionality is complementary to that of Memcheck: SGcheck finds problems that Memcheck can’t, and vice versa.</li>
+	    <li><strong>BBV</strong> is an experimental SimPoint basic block vector generator. It is useful to people doing computer architecture research and development.</li>
+	  </ol>
+	  <p>There are also a couple of minor tools that aren’t useful to most users: Lackey is an example tool that illustrates some instrumentation basics; and Nulgrind is the minimal Valgrind tool that does no analysis or instrumentation, and is only useful for testing purposes. Valgrind is closely tied to details of the CPU and operating system, and to a lesser extent, the compiler and basic C libraries. Nonetheless, it supports a number of widely-used platforms, listed in full at <a href="http://www.valgrind.org/">valgrind.org</a>.</p>
+	  <p>Valgrind is built via the standard Unix ./configure, make, make install process; full details are given in the README file in the distribution.</p>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/public/js/demo/all.html b/public/js/demo/all.html
index 26337fa..7809da4 100644
--- a/public/js/demo/all.html
+++ b/public/js/demo/all.html
@@ -4,13 +4,19 @@
     <title>CSS demo</title>
     <meta charset="utf-8" />
     <script src="../lib/dagre/dagre.min.js"></script>
-    <script src="../src/util.js"></script>
+    <script src="../src/api.js"></script>
     <script src="../src/hint.js"></script>
     <script src="../src/match.js"></script>
     <script src="../src/menu.js"></script>
     <script src="../src/vc.js"></script>
+    <script src="../src/session.js"></script>
+    <script src="../src/tutorial.js"></script>
+    <script src="../src/util.js"></script>
     <script src="./all.js"></script>
     <link type="text/css" rel="stylesheet" href="../../css/build/kalamar.css" />
+    <script>
+      KorAP.URL = 'http://localhost:3000';
+    </script>
   </head>
   <body>
     <div id="kalamar-bg"></div>
@@ -28,8 +34,9 @@
 	  <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i>
 -->
 	</div>
-	<div id="vc"></div>
-	in Wikipedia
+	<div id="vc-view"></div>
+	in <input type="hidden" id="vc-name" name="vc-name" value="Wikipedia" />
+	<input type="text" name="vc" id="vc" value="corpusID = Wikipedia" />
 	with <span class="select">
 <!-- Change this to js-menu -->
 	  <select name="ql" id="ql-field">
@@ -48,11 +55,16 @@
 	  <label for="q-cutoff-field"><span></span>Glimpse</label>
 
 	  <!-- Todo: open tutorial - like openTutorial() -->
-	  <a href="/about" title="Tutorial" class="tutorial"><span>Tutorial</span></a>
-
+	  <a href="about.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
 	</div>
       </form>
     </header>
+
+    <div id="sidebar" tabindex="0">
+      <h2>Tutorial</h2>
+      <p>Hui</p>
+    </div>
+
     <main>
       <div class="resultinfo">
 	<div id="pagination">
@@ -73,10 +85,10 @@
 	      data-doc-id="WWW"
 	      data-text-id="03313"
 	      data-match-id="p102-103"
-	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
 	      id="WPD-WWW.03313-p102-103">
 	    <div>
-	      <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	      <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><mark><mark class="class-2 level-1">Dies </mark><mark class="class-1 level-0"><mark class="class-2 level-1"><mark class="class-3 level-2">ist</mark> ein</mark> Test</mark></mark><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
 	      <!-- only inject via javascript! -->
 	    </div>
 	    <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
@@ -93,7 +105,7 @@
 	      data-doc-id="FFF"
 	      data-text-id="01460"
 	      data-match-id="p119-120"
-	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
 	      id="WPD-FFF.01460-p119-120">
 	    <div>
 	      <div class="snippet startMore endMore"><span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple </span><span class="match">test</span><span class="context-right"> problem.</span></div>
@@ -111,7 +123,7 @@
 	      data-doc-id="HHH"
 	      data-text-id="06056"
 	      data-match-id="p2564-2565"
-	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
 	      id="WPD-HHH.06056-p2564-2565">
 	    <div>
 	      <div class="snippet startMore endMore"><span class="context-left">HDTV Samples from European (and other) broadcasters and </span><span class="match">test</span><span class="context-right"> transmissions in Europe</span></div>
diff --git a/public/js/demo/all.js b/public/js/demo/all.js
index dc1e051..0a72f73 100644
--- a/public/js/demo/all.js
+++ b/public/js/demo/all.js
@@ -95,6 +95,46 @@
   "</span>" +
   "<span class=\"context-right\"></span>";
 
+var treeSnippet2 =
+  "<span class=\"context-left\"><\/span>"+
+  "<span class=\"match\">"+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">HDTV<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:NPA\">" +
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">Samples<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:ADV\">from<\/span> "+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">European<\/span>"+
+  "<\/span>"+
+  "<\/span> ("+
+  "<span title=\"xip\/c:INS\">"+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">and<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:ADV\">other<\/span>"+
+  "<\/span>) "+
+  "<span title=\"xip\/c:ADV\">broadcasters<\/span> "+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">and<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:VERB\">test<\/span> "+
+  "<span title=\"xip\/c:ADV\">transmissions<\/span> "+
+  "<span title=\"xip\/c:PREP\">in<\/span> "+
+  "<span title=\"xip\/c:NOUN\">Europe<\/span>"+
+  "<\/span>"+
+  "<span class=\"context-right\"><\/span>";
+
 var menuContent = [
     ['cnx/c', 'cnx', 'c'],
     ['mate/c', 'mate', 'c'],
@@ -379,12 +419,12 @@
 
 // Parse and show the table
 // Override getMatchInfo API call
-KorAP.API.getMatchInfo = function(match, callObj) {
+KorAP.API.getMatchInfo = function(match, callObj, cb) {
   if (callObj["spans"] !== undefined && callObj["spans"] === true) {
-    return { "snippet": treeSnippet };
+    cb({ "snippet": treeSnippet2 });
   }
   else {
-    return { "snippet": snippet };
+    cb({ "snippet": snippet });
   }
 };
 
@@ -392,19 +432,19 @@
 /**
  * Do some things at the beginning.
  */
-window.onload = function () {
+document.addEventListener('DOMContentLoaded', function () {
 
   // Decorate actions
-  KorAP.init();
+  var init = KorAP.init();
 
   var menu = KorAP.MatchTreeMenu.create(
     undefined,
     menuContent
   );
 
-  var vc = KorAP.VirtualCollection.render(vcExample);
-  document.getElementById('vc').appendChild(vc.element());
+  // document.getElementById('vc-choose').click();
 
+//  init.tutorial.show();
 
   // Don't hide!!!
   menu.hide = function () {};
@@ -412,4 +452,4 @@
   menu.limit(3);
   menu.show();
   menu.focus();
-};
+});
diff --git a/public/js/demo/matchSort.html b/public/js/demo/matchSort.html
new file mode 100644
index 0000000..860560e
--- /dev/null
+++ b/public/js/demo/matchSort.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Match demo</title>
+    <meta charset="utf-8" />
+    <link type="text/css"
+	  rel="stylesheet"
+	  href="../../css/build/kalamar.css"></link>
+    <style type="text/css"
+	   rel="stylesheet">
+body {
+  background-color: #ffa500;
+}
+    </style>
+  </head>
+  <body>
+    <div id="search">
+      <ol class="align-left">
+	<li data-corpus-id="WPD"
+	    data-doc-id="WWW"
+	    data-text-id="03313"
+	    data-match-id="p102-103"
+	    data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	    id="WPD-WWW.03313-p102-103">
+	  <div>
+	    <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	  </div>
+	  <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	</li>
+	<li data-corpus-id="WPD"
+	    data-doc-id="WWW"
+	    data-text-id="03313"
+	    data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	    id="WPD-WWW.03313-p102-103">
+	  <ol>
+	    <li data-match-id="p102-103">
+	      <div>
+		<div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	      </div>
+	      <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	    </li>
+	    <li data-match-id="p108-109">
+	      <div>
+		<div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	      </div>
+	      <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	    </li>
+	  </ol>
+	  <span class="matchMore">+5</span>
+	</li>
+      </ol>
+    </div>
+
+
+    <p>Sort by</p>
+    <p>click auf ein Item gibt ihm höchste Priorität, Klick auf asc/desc ändert die Sortierung, Klick auf ein aktives Feld deaktiviert. Sortiert wird nur nach Klick auf (okay) if prefix feld</p>
+    <ul class="menu sort">
+      <li class="active">CorpusID (asc|desc)</li>
+      <li class="active">Author (asc|desc)</li>
+      <li>Date</li>
+      <span class="pref right" style="right: 0; left: auto;">Sortieren</span>
+    </ul>
+
+  </body>
+</html>
diff --git a/public/js/demo/session.html b/public/js/demo/session.html
new file mode 100644
index 0000000..59cfe4f
--- /dev/null
+++ b/public/js/demo/session.html
@@ -0,0 +1,44 @@
+ <!DOCTYPE html>
+<html>
+  <head>
+    <title>Cookie demo</title>
+    <script src="../src/session.js"></script>
+    <script>
+
+var cookey;
+
+function add (val) {
+  var list = document.getElementById('number');
+  list.textContent += '-' + val;
+  cookey.set('n', list.textContent);
+};
+
+function removeCookie () {
+  cookey.clear();
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+  cookey = KorAP.Session.create('peter');
+  document.getElementById('number').textContent = cookey.get('n') || '';
+
+  var elements =   document.getElementsByClassName('num');
+  for (var i = 0; i < elements.length; i++) {
+    elements[i].addEventListener(
+      'click',
+      function (e) {
+        add(this.textContent);
+      }
+    );
+  };
+});
+
+    </script>
+  </head>
+  <body>
+    <div id="number"></div>
+    <span class="num">1</span>
+    <span class="num">2</span>
+    <span class="num">3</span>
+    <div onclick="removeCookie()">remove</div>
+  </body>
+</html>
diff --git a/public/js/lib/highlight/highlight.pack.js b/public/js/lib/highlight/highlight.pack.js
new file mode 100644
index 0000000..6c71f03
--- /dev/null
+++ b/public/js/lib/highlight/highlight.pack.js
@@ -0,0 +1 @@
+var hljs=new function(){function k(v){return v.replace(/&/gm,"&amp;").replace(/</gm,"&lt;").replace(/>/gm,"&gt;")}function t(v){return v.nodeName.toLowerCase()}function i(w,x){var v=w&&w.exec(x);return v&&v.index==0}function d(v){return Array.prototype.map.call(v.childNodes,function(w){if(w.nodeType==3){return b.useBR?w.nodeValue.replace(/\n/g,""):w.nodeValue}if(t(w)=="br"){return"\n"}return d(w)}).join("")}function r(w){var v=(w.className+" "+(w.parentNode?w.parentNode.className:"")).split(/\s+/);v=v.map(function(x){return x.replace(/^language-/,"")});return v.filter(function(x){return j(x)||x=="no-highlight"})[0]}function o(x,y){var v={};for(var w in x){v[w]=x[w]}if(y){for(var w in y){v[w]=y[w]}}return v}function u(x){var v=[];(function w(y,z){for(var A=y.firstChild;A;A=A.nextSibling){if(A.nodeType==3){z+=A.nodeValue.length}else{if(t(A)=="br"){z+=1}else{if(A.nodeType==1){v.push({event:"start",offset:z,node:A});z=w(A,z);v.push({event:"stop",offset:z,node:A})}}}}return z})(x,0);return v}function q(w,y,C){var x=0;var F="";var z=[];function B(){if(!w.length||!y.length){return w.length?w:y}if(w[0].offset!=y[0].offset){return(w[0].offset<y[0].offset)?w:y}return y[0].event=="start"?w:y}function A(H){function G(I){return" "+I.nodeName+'="'+k(I.value)+'"'}F+="<"+t(H)+Array.prototype.map.call(H.attributes,G).join("")+">"}function E(G){F+="</"+t(G)+">"}function v(G){(G.event=="start"?A:E)(G.node)}while(w.length||y.length){var D=B();F+=k(C.substr(x,D[0].offset-x));x=D[0].offset;if(D==w){z.reverse().forEach(E);do{v(D.splice(0,1)[0]);D=B()}while(D==w&&D.length&&D[0].offset==x);z.reverse().forEach(A)}else{if(D[0].event=="start"){z.push(D[0].node)}else{z.pop()}v(D.splice(0,1)[0])}}return F+k(C.substr(x))}function m(y){function v(z){return(z&&z.source)||z}function w(A,z){return RegExp(v(A),"m"+(y.cI?"i":"")+(z?"g":""))}function x(D,C){if(D.compiled){return}D.compiled=true;D.k=D.k||D.bK;if(D.k){var z={};function E(G,F){if(y.cI){F=F.toLowerCase()}F.split(" ").forEach(function(H){var I=H.split("|");z[I[0]]=[G,I[1]?Number(I[1]):1]})}if(typeof D.k=="string"){E("keyword",D.k)}else{Object.keys(D.k).forEach(function(F){E(F,D.k[F])})}D.k=z}D.lR=w(D.l||/\b[A-Za-z0-9_]+\b/,true);if(C){if(D.bK){D.b=D.bK.split(" ").join("|")}if(!D.b){D.b=/\B|\b/}D.bR=w(D.b);if(!D.e&&!D.eW){D.e=/\B|\b/}if(D.e){D.eR=w(D.e)}D.tE=v(D.e)||"";if(D.eW&&C.tE){D.tE+=(D.e?"|":"")+C.tE}}if(D.i){D.iR=w(D.i)}if(D.r===undefined){D.r=1}if(!D.c){D.c=[]}var B=[];D.c.forEach(function(F){if(F.v){F.v.forEach(function(G){B.push(o(F,G))})}else{B.push(F=="self"?D:F)}});D.c=B;D.c.forEach(function(F){x(F,D)});if(D.starts){x(D.starts,C)}var A=D.c.map(function(F){return F.bK?"\\.?\\b("+F.b+")\\b\\.?":F.b}).concat([D.tE]).concat([D.i]).map(v).filter(Boolean);D.t=A.length?w(A.join("|"),true):{exec:function(F){return null}};D.continuation={}}x(y)}function c(S,L,J,R){function v(U,V){for(var T=0;T<V.c.length;T++){if(i(V.c[T].bR,U)){return V.c[T]}}}function z(U,T){if(i(U.eR,T)){return U}if(U.eW){return z(U.parent,T)}}function A(T,U){return !J&&i(U.iR,T)}function E(V,T){var U=M.cI?T[0].toLowerCase():T[0];return V.k.hasOwnProperty(U)&&V.k[U]}function w(Z,X,W,V){var T=V?"":b.classPrefix,U='<span class="'+T,Y=W?"":"</span>";U+=Z+'">';return U+X+Y}function N(){var U=k(C);if(!I.k){return U}var T="";var X=0;I.lR.lastIndex=0;var V=I.lR.exec(U);while(V){T+=U.substr(X,V.index-X);var W=E(I,V);if(W){H+=W[1];T+=w(W[0],V[0])}else{T+=V[0]}X=I.lR.lastIndex;V=I.lR.exec(U)}return T+U.substr(X)}function F(){if(I.sL&&!f[I.sL]){return k(C)}var T=I.sL?c(I.sL,C,true,I.continuation.top):g(C);if(I.r>0){H+=T.r}if(I.subLanguageMode=="continuous"){I.continuation.top=T.top}return w(T.language,T.value,false,true)}function Q(){return I.sL!==undefined?F():N()}function P(V,U){var T=V.cN?w(V.cN,"",true):"";if(V.rB){D+=T;C=""}else{if(V.eB){D+=k(U)+T;C=""}else{D+=T;C=U}}I=Object.create(V,{parent:{value:I}})}function G(T,X){C+=T;if(X===undefined){D+=Q();return 0}var V=v(X,I);if(V){D+=Q();P(V,X);return V.rB?0:X.length}var W=z(I,X);if(W){var U=I;if(!(U.rE||U.eE)){C+=X}D+=Q();do{if(I.cN){D+="</span>"}H+=I.r;I=I.parent}while(I!=W.parent);if(U.eE){D+=k(X)}C="";if(W.starts){P(W.starts,"")}return U.rE?0:X.length}if(A(X,I)){throw new Error('Illegal lexeme "'+X+'" for mode "'+(I.cN||"<unnamed>")+'"')}C+=X;return X.length||1}var M=j(S);if(!M){throw new Error('Unknown language: "'+S+'"')}m(M);var I=R||M;var D="";for(var K=I;K!=M;K=K.parent){if(K.cN){D=w(K.cN,D,true)}}var C="";var H=0;try{var B,y,x=0;while(true){I.t.lastIndex=x;B=I.t.exec(L);if(!B){break}y=G(L.substr(x,B.index-x),B[0]);x=B.index+y}G(L.substr(x));for(var K=I;K.parent;K=K.parent){if(K.cN){D+="</span>"}}return{r:H,value:D,language:S,top:I}}catch(O){if(O.message.indexOf("Illegal")!=-1){return{r:0,value:k(L)}}else{throw O}}}function g(y,x){x=x||b.languages||Object.keys(f);var v={r:0,value:k(y)};var w=v;x.forEach(function(z){if(!j(z)){return}var A=c(z,y,false);A.language=z;if(A.r>w.r){w=A}if(A.r>v.r){w=v;v=A}});if(w.language){v.second_best=w}return v}function h(v){if(b.tabReplace){v=v.replace(/^((<[^>]+>|\t)+)/gm,function(w,z,y,x){return z.replace(/\t/g,b.tabReplace)})}if(b.useBR){v=v.replace(/\n/g,"<br>")}return v}function p(z){var y=d(z);var A=r(z);if(A=="no-highlight"){return}var v=A?c(A,y,true):g(y);var w=u(z);if(w.length){var x=document.createElementNS("http://www.w3.org/1999/xhtml","pre");x.innerHTML=v.value;v.value=q(w,u(x),y)}v.value=h(v.value);z.innerHTML=v.value;z.className+=" hljs "+(!A&&v.language||"");z.result={language:v.language,re:v.r};if(v.second_best){z.second_best={language:v.second_best.language,re:v.second_best.r}}}var b={classPrefix:"hljs-",tabReplace:null,useBR:false,languages:undefined};function s(v){b=o(b,v)}function l(){if(l.called){return}l.called=true;var v=document.querySelectorAll("pre code");Array.prototype.forEach.call(v,p)}function a(){addEventListener("DOMContentLoaded",l,false);addEventListener("load",l,false)}var f={};var n={};function e(v,x){var w=f[v]=x(this);if(w.aliases){w.aliases.forEach(function(y){n[y]=v})}}function j(v){return f[v]||f[n[v]]}this.highlight=c;this.highlightAuto=g;this.fixMarkup=h;this.highlightBlock=p;this.configure=s;this.initHighlighting=l;this.initHighlightingOnLoad=a;this.registerLanguage=e;this.getLanguage=j;this.inherit=o;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE]};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE]};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.REGEXP_MODE={cN:"regexp",b:/\//,e:/\/[gim]*/,i:/\n/,c:[this.BE,{b:/\[/,e:/\]/,r:0,c:[this.BE]}]};this.TM={cN:"title",b:this.IR,r:0};this.UTM={cN:"title",b:this.UIR,r:0}}();hljs.registerLanguage("xml",function(a){var c="[A-Za-z0-9\\._:-]+";var d={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"};var b={eW:true,i:/</,r:0,c:[d,{cN:"attribute",b:c,r:0},{b:"=",r:0,c:[{cN:"value",v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s\/>]+/}]}]}]};return{aliases:["html"],cI:true,c:[{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{title:"style"},c:[b],starts:{e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{title:"script"},c:[b],starts:{e:"<\/script>",rE:true,sL:"javascript"}},{b:"<%",e:"%>",sL:"vbscript"},d,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ /><]+",r:0},b]}]}});hljs.registerLanguage("markdown",function(a){return{c:[{cN:"header",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"blockquote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"`.+?`"},{b:"^( {4}|\t)",e:"$",r:0}]},{cN:"horizontal_rule",b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].+?[\\)\\]]",rB:true,c:[{cN:"link_label",b:"\\[",e:"\\]",eB:true,rE:true,r:0},{cN:"link_url",b:"\\]\\(",e:"\\)",eB:true,eE:true},{cN:"link_reference",b:"\\]\\[",e:"\\]",eB:true,eE:true,}],r:10},{b:"^\\[.+\\]:",e:"$",rB:true,c:[{cN:"link_reference",b:"\\[",e:"\\]",eB:true,eE:true},{cN:"link_url",b:"\\s",e:"$"}]}]}});hljs.registerLanguage("css",function(a){var b="[a-zA-Z-][a-zA-Z0-9_-]*";var c={cN:"function",b:b+"\\(",e:"\\)",c:["self",a.NM,a.ASM,a.QSM]};return{cI:true,i:"[=/|']",c:[a.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:true,eE:true,r:0,c:[c,a.ASM,a.QSM,a.NM]}]},{cN:"tag",b:b,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[a.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[c,a.NM,a.QSM,a.ASM,a.CBLCLM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});hljs.registerLanguage("json",function(a){var e={literal:"true false null"};var d=[a.QSM,a.CNM];var c={cN:"value",e:",",eW:true,eE:true,c:d,k:e};var b={b:"{",e:"}",c:[{cN:"attribute",b:'\\s*"',e:'"\\s*:\\s*',eB:true,eE:true,c:[a.BE],i:"\\n",starts:c}],i:"\\S"};var f={b:"\\[",e:"\\]",c:[a.inherit(c,{cN:null})],i:"\\S"};d.splice(d.length,0,b,f);return{c:d,k:e,i:"\\S"}});
\ No newline at end of file
diff --git a/public/js/spec/hintSpec.js b/public/js/spec/hintSpec.js
index 66c831f..bb736ce 100644
--- a/public/js/spec/hintSpec.js
+++ b/public/js/spec/hintSpec.js
@@ -389,7 +389,7 @@
 
   it('should be initializable', function () {
 
-    var menu = KorAP.HintMenu.create("cnx/", list);
+    var menu = KorAP.HintMenu.create(null, "cnx/", list);
     expect(menu.context()).toEqual('cnx/');
     expect(menu.element().nodeName).toEqual('UL');
     expect(menu.element().style.opacity).toEqual("0");
diff --git a/public/js/spec/matchSpec.js b/public/js/spec/matchSpec.js
index 0e638c4..f520557 100644
--- a/public/js/spec/matchSpec.js
+++ b/public/js/spec/matchSpec.js
@@ -140,6 +140,15 @@
 };
 
 
+// Override getMatchInfo API call
+KorAP.API.getMatchInfo = function (x, param, cb) {
+  if (param['spans'] === undefined || param['spans'] === false)
+    cb({ "snippet": snippet });
+  else
+    cb({ "snippet": treeSnippet });
+};
+
+
 describe('KorAP.InfoLayer', function () {
 
   it('should be initializable', function () {
@@ -279,33 +288,52 @@
 
 
 describe('KorAP.MatchInfo', function () {
-  it('should parse into a table', function () {
 
-    var m = KorAP.Match.create(match);
-    var info = m.info();
+  var m = KorAP.Match.create(match);
+  var info = m.info();
+
+  it('should contain a valid info', function () {
     expect(m._info).toEqual(info);
+  });
 
-    expect(info.getTable('base/s')).not.toBeTruthy();
+  var table1, table2;
 
-    // Override getMatchInfo API call
-    KorAP.API.getMatchInfo = function () {
-      return { "snippet": snippet };
-    };
+  // Async preparation
+  it('should fail to load a table async', function (done) {
+    expect(info).toBeTruthy();
 
-    var table = info.getTable();
-    expect(table).toBeTruthy();
+    info.getTable([], function (tablen) {
+      table1 = tablen;
+      done();
+    });
+  });
 
-    expect(table.length()).toBe(3);
+  it('should\'nt be parsable (async)', function () {
+    expect(table1).not.toBeTruthy();
+  });
 
-    expect(table.getToken(0)).toBe("meist");
-    expect(table.getToken(1)).toBe("deutlich");
-    expect(table.getToken(2)).toBe("leistungsfähiger");
+  it('should load a working table async', function(done) {
+    expect(info).toBeTruthy();
+    info.getTable(undefined, function (tablem) {
+      table2 = tablem;
+      done();
+    });
+  });
+  
+  it('should parse into a table (async)', function () {
+    expect(table2).toBeTruthy();
 
-    expect(table.getValue(0, "cnx", "p")[0]).toBe("ADV");
-    expect(table.getValue(0, "cnx", "syn")[0]).toBe("@PREMOD");
+    expect(table2.length()).toBe(3);
 
-    expect(table.getValue(2, "cnx", "l")[0]).toBe("fähig");
-    expect(table.getValue(2, "cnx", "l")[1]).toBe("leistung");
+    expect(table2.getToken(0)).toBe("meist");
+    expect(table2.getToken(1)).toBe("deutlich");
+    expect(table2.getToken(2)).toBe("leistungsfähiger");
+
+    expect(table2.getValue(0, "cnx", "p")[0]).toBe("ADV");
+    expect(table2.getValue(0, "cnx", "syn")[0]).toBe("@PREMOD");
+
+    expect(table2.getValue(2, "cnx", "l")[0]).toBe("fähig");
+    expect(table2.getValue(2, "cnx", "l")[1]).toBe("leistung");
   });
 
 
@@ -352,26 +380,28 @@
     expect(infotable.children[1].classList.contains('addtree')).toBeTruthy();
   });
 
-
-  it('should parse into a tree', function () {
+  var tree;
+  it('should parse into a tree (async) 1', function (done) {
     var info = KorAP.Match.create(match).info();
+    expect(info).toBeTruthy();
+    info.getTree(undefined, undefined, function (treem) {
+      tree = treem;
+      done();
+    });
+  });
 
-    // Override getMatchInfo API call
-    KorAP.API.getMatchInfo = function () {
-      return { "snippet": treeSnippet };
-    };
-
-    var tree = info.getTree();
+  it('should parse into a tree (async) 2', function () {
     expect(tree).toBeTruthy();
     expect(tree.nodes()).toEqual(49);
   });
 
 
+  var info, matchElement;
   it('should parse into a tree view', function () {
-    var matchElement = matchElementFactory();
+    matchElement = matchElementFactory();
     expect(matchElement.tagName).toEqual('LI');
 
-    var info = KorAP.Match.create(matchElement).info();
+    info = KorAP.Match.create(matchElement).info();
     info.toggle();
 
     // Match
@@ -392,14 +422,16 @@
     expect(infotable.classList.contains('matchinfo')).toBeTruthy();
     expect(infotable.children[0].classList.contains('matchtable')).toBeTruthy();
     expect(infotable.children[1].classList.contains('addtree')).toBeTruthy();
+  });
 
-    // Override getMatchInfo API call
-    KorAP.API.getMatchInfo = function () {
-      return { "snippet": treeSnippet };
-    };
+  it('should add a tree view async 1', function (done) {
+    expect(info).toBeTruthy();
+    info.addTree('mate', 'beebop', function () {
+      done();
+    });
+  });
 
-    info.addTree('mate', 'beebop');
-
+  it('should add a tree view async 2', function () {
     // With added tree
     var infotable = matchElement.children[0].children[1];
     expect(infotable.tagName).toEqual('DIV');
@@ -417,21 +449,23 @@
     expect(tree.children[0].children[1].firstChild.nodeValue).toEqual('beebop');
 
     expect(tree.children[1].tagName).toEqual('DIV');
-    
   });
 });
 
 
 describe('KorAP.MatchTable', function () {
-  it('should be rendered', function () {
+
+  var table;
+  it('should be retrieved async', function (done) {
     var info = KorAP.Match.create(match).info();
+    expect(info).toBeTruthy();
+    info.getTable(undefined, function (x) {
+      table = x;
+      done();
+    });
+  });
 
-    // Override getMatchInfo API call
-    KorAP.API.getMatchInfo = function() {
-      return { "snippet": snippet };
-    };
-
-    var table = info.getTable();
+  it('should be rendered async', function () {
     var e = table.element();
 
     expect(e.nodeName).toBe('TABLE');
@@ -472,16 +506,18 @@
 });
 
 describe('KorAP.MatchTree', function () {
-  it('should be rendered', function () {
+  var tree;
+
+  it('should be rendered async 1', function (done) {
     var info = KorAP.Match.create(match).info();
+    expect(info).toBeTruthy();
+    info.getTree(undefined, undefined, function (y) {
+      tree = y;
+      done();
+    });
+  });
 
-    // Override getMatchInfo API call
-    KorAP.API.getMatchInfo = function() {
-      return { "snippet": treeSnippet };
-    };
-
-    var tree = info.getTree();
-
+  it('should be rendered async 2', function () {
     var e = tree.element();
     expect(e.nodeName).toEqual('svg');
     expect(e.getElementsByTagName('g').length).toEqual(48);
diff --git a/public/js/src/api.js b/public/js/src/api.js
new file mode 100644
index 0000000..ed33cc2
--- /dev/null
+++ b/public/js/src/api.js
@@ -0,0 +1,80 @@
+var KorAP = KorAP || {};
+
+(function (KorAP) {
+  "use strict";
+
+  // Default log message
+  KorAP.log = KorAP.log || function (type, msg) {
+    console.log(type + ": " + msg);
+  };
+
+  KorAP.URL = KorAP.URL || 'http://korap.ids-mannheim.de/kalamar';
+
+  // TODO: https://github.com/honza/140medley/blob/master/140medley.js
+  // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
+  // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
+  // r.addEventListener("progress", updateProgress, false);
+  // http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
+  // http://stackoverflow.com/questions/6112744/load-javascript-on-demand
+
+  KorAP.API = {
+    getMatchInfo : function (match, param, cb) {
+      // match is a KorAP.Match object
+
+      var url = KorAP.URL;
+      url += '/corpus';
+      url += '/' + match.corpusID;
+      url += '/' + match.docID + '.' + match.textID; // TODO
+      url += '/' + match.matchID;
+
+      // { spans: true, layer:x, foundry : y}
+      if (param['spans'] == true) {
+	url += '?spans=true';
+	if (param['foundry'] !== undefined)
+	  url += '&foundry=' + param['foundry'];
+	if (param['layer'] !== undefined)
+	  url += '&layer=' + param['layer'];
+      }
+
+      // { spans : false, layer: [Array of KorAP.InfoLayer] }
+      else {
+	// TODO
+	url += '?spans=false';
+      }
+
+      this.getJSON(url, cb);
+    },
+    getJSON : function (url, onload) {
+      var req = new XMLHttpRequest();
+
+      console.log('Request url: ' + url);
+
+      req.open("GET", url, true);
+
+
+      req.setRequestHeader("Accept", "application/json");
+      req.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
+      req.onreadystatechange = function () {
+	/*
+	  States:
+	  0 - unsent (prior to open)
+	  1 - opened (prior to send)
+	  2 - headers received
+	  3 - loading (responseText has partial data)
+	  4 - done
+	 */
+	if (this.readyState == 4) {
+	  if (this.status === 200)
+	    onload(JSON.parse(this.responseText));
+	  else
+	    KorAP.log(this.status, this.statusText);
+	}
+      };
+      req.ontimeout = function () {
+	KorAP.log(0, 'Request Timeout');
+      };
+      req.send();
+    }
+  };
+
+}(this.KorAP));
diff --git a/public/js/src/hint.js b/public/js/src/hint.js
index 8011bee..80631ec 100644
--- a/public/js/src/hint.js
+++ b/public/js/src/hint.js
@@ -52,7 +52,7 @@
 
       // Update position of the mirror
       var that = this;
-      window.resize = function () {
+      window.onresize = function () {
 	that.reposition();
       };
 
@@ -311,6 +311,7 @@
 
       var that = this;
 
+
       // Add event listener for key pressed down
       inputFieldElement.addEventListener(
 	"keypress", function (e) {
diff --git a/public/js/src/match.js b/public/js/src/match.js
index b974031..4e3786b 100644
--- a/public/js/src/match.js
+++ b/public/js/src/match.js
@@ -35,8 +35,10 @@
   KorAP.API = KorAP.API || {};
 
   // TODO: Make this async
-  KorAP.API.getMatchInfo = KorAP.API.getMatchInfo || function () { return {} };
-
+  KorAP.API.getMatchInfo = KorAP.API.getMatchInfo || function () {
+    KorAP.log(0, 'KorAP.API.getMatchInfo() not implemented')
+    return {};
+  };
 
   /**
    * Match object
@@ -302,7 +304,7 @@
     /**
      * Retrieve and parse snippet for table representation
      */
-    getTable : function (tokens) {
+    getTable : function (tokens, cb) {
       var focus = [];
 
       // Get all tokens
@@ -330,51 +332,56 @@
 
       // No tokens chosen
       if (focus.length == 0)
-	return;
+	cb(null);
 
       // Get info (may be cached)
       // TODO: Async
-      var matchResponse = KorAP.API.getMatchInfo(
+      KorAP.API.getMatchInfo(
 	this._match,
-	{ 'spans' : false, 'layer' : focus }
+	{ 'spans' : false, 'layer' : focus },
+
+	// Callback for retrieval
+	function (matchResponse) {
+	  // Get snippet from match info
+	  if (matchResponse["snippet"] !== undefined) {
+	    this._table = KorAP.MatchTable.create(matchResponse["snippet"]);
+	    cb(this._table);
+	  };
+	}.bind(this)
       );
 
-      // Get snippet from match info
-      if (matchResponse["snippet"] !== undefined) {
-	this._table = KorAP.MatchTable.create(matchResponse["snippet"]);
-	return this._table;
-      };
-
+/*
       // Todo: Store the table as a hash of the focus
-
       return null;
+*/
     },
 
 
     /**
      * Retrieve and parse snippet for tree representation
      */
-    getTree : function (foundry, layer) {
+    getTree : function (foundry, layer, cb) {
       var focus = [];
 
-      // TODO: Async
-      var matchResponse = KorAP.API.getMatchInfo(
+      // TODO: Support and cache multiple trees
+
+      KorAP.API.getMatchInfo(
 	this._match, {
 	  'spans' : true,
 	  'foundry' : foundry,
 	  'layer' : layer
-	}
+	},
+	function (matchResponse) {
+	  // Get snippet from match info
+	  if (matchResponse["snippet"] !== undefined) {
+	    // Todo: This should be cached somehow
+	    cb(KorAP.MatchTree.create(matchResponse["snippet"]));
+	  }
+	  else {
+	    cb(null);
+	  };
+	}.bind(this)
       );
-
-      // TODO: Support and cache multiple trees
-
-      // Get snippet from match info
-      if (matchResponse["snippet"] !== undefined) {
-	// Todo: This should be cached somehow
-	return KorAP.MatchTree.create(matchResponse["snippet"]);
-      };
-
-      return null;
     },
 
     /**
@@ -397,13 +404,7 @@
     /**
      * Add a new tree view to the list
      */
-    addTree : function (foundry, layer) {
-      var treeObj = this.getTree(foundry, layer);
-
-      // Something went wrong - probably log!!!
-      if (treeObj === null)
-	return;
-
+    addTree : function (foundry, layer, cb) {
       var matchtree = document.createElement('div');
       matchtree.classList.add('matchtree');
 
@@ -416,7 +417,7 @@
       var tree = matchtree.appendChild(
 	document.createElement('div')
       );
-      tree.appendChild(treeObj.element());
+
       this._element.insertBefore(matchtree, this._element.lastChild);
 
       var close = tree.appendChild(document.createElement('em'));
@@ -427,11 +428,24 @@
 	}
       );
 
-      // Reposition the view to the center
-      // (This may in a future release be a reposition
-      // to move the root into the center or the actual
-      // match)
-      treeObj.center();
+      // Get tree data async
+      this.getTree(foundry, layer, function (treeObj) {
+	// Something went wrong - probably log!!!
+	if (treeObj === null) {
+	  tree.appendChild(document.createTextNode('No data available.'));
+	}
+	else {
+	  tree.appendChild(treeObj.element());
+	  // Reposition the view to the center
+	  // (This may in a future release be a reposition
+	  // to move the root into the center or the actual
+	  // match)
+	  treeObj.center();
+	}
+
+	if (cb !== undefined)
+	  cb(treeObj);
+      });
     },
 
     /**
@@ -449,9 +463,15 @@
       // Append default table
       var matchtable = document.createElement('div');
       matchtable.classList.add('matchtable');
-      matchtable.appendChild(this.getTable().element());
       info.appendChild(matchtable);
 
+      // Create the table asynchronous
+      this.getTable(undefined, function (table) {
+	if (table !== null) {
+	  matchtable.appendChild(table.element());
+	};
+      });
+
       // Get spans
       var spanLayers = this._match.getSpans().sort(
 	function (a, b) {
@@ -917,23 +937,33 @@
 	  var rect = group.appendChild(document.createElementNS(svgXmlns, 'rect'));
 	  rect.setAttributeNS(null, 'x', v.x - v.width / 2);
 	  rect.setAttributeNS(null, 'y', v.y - v.height / 2);
-	  rect.setAttributeNS(null, 'width', v.width);
-	  rect.setAttributeNS(null, 'height', v.height);
 	  rect.setAttributeNS(null, 'rx', 5);
 	  rect.setAttributeNS(null, 'ry', 5);
+	  rect.setAttributeNS(null, 'width', v.width);
+	  rect.setAttributeNS(null, 'height', v.height);
+
+	  if (v.class === 'root' && v.label === undefined) {
+	    rect.setAttributeNS(null, 'width', v.height);
+	    rect.setAttributeNS(null, 'x', v.x - v.height / 2);
+	    rect.setAttributeNS(null, 'class', 'empty');
+	  };
 
 	  // Add label
-	  var text = group.appendChild(document.createElementNS(svgXmlns, 'text'));
-	  text.setAttributeNS(null, 'x', v.x - v.width / 2);
-	  text.setAttributeNS(null, 'y', v.y - v.height / 2);
-	  text.setAttributeNS(
-	    null,
-	    'transform',
-	    'translate(' + v.width/2 + ',' + ((v.height / 2) + 5) + ')'
-	  );
-	  var tspan = document.createElementNS(svgXmlns, 'tspan');
-	  tspan.appendChild(document.createTextNode(v.label));
-	  text.appendChild(tspan);
+	  if (v.label !== undefined) {
+	    var text = group.appendChild(document.createElementNS(svgXmlns, 'text'));
+	    text.setAttributeNS(null, 'x', v.x - v.width / 2);
+	    text.setAttributeNS(null, 'y', v.y - v.height / 2);
+	    text.setAttributeNS(
+	      null,
+	      'transform',
+	      'translate(' + v.width/2 + ',' + ((v.height / 2) + 5) + ')'
+	    );
+
+	    var tspan = document.createElementNS(svgXmlns, 'tspan');
+	    tspan.appendChild(document.createTextNode(v.label));
+	    text.appendChild(tspan);
+	  };
+
 	  canvas.appendChild(group);
 	}
       );
diff --git a/public/js/src/menu.js b/public/js/src/menu.js
index 3267b69..1cf3455 100644
--- a/public/js/src/menu.js
+++ b/public/js/src/menu.js
@@ -154,6 +154,7 @@
       e.style.outline = 0;
       e.setAttribute('tabindex', 0);
       e.classList.add('menu');
+      e.classList.add('roll');
       e.appendChild(this._prefix.element());
 
       // This has to be cleaned up later on
diff --git a/public/js/src/session.js b/public/js/src/session.js
new file mode 100644
index 0000000..a10ce81
--- /dev/null
+++ b/public/js/src/session.js
@@ -0,0 +1,80 @@
+/**
+ * Simple cookie based session library that stores
+ * values in JSON encoded cookies.
+ *
+ * @author Nils Diewald
+ */
+var KorAP = KorAP || {};
+
+(function (KorAP) {
+  "use strict";
+
+  
+  KorAP.Session = {
+
+    /**
+     * Create a new session.
+     * Expects a name or defaults to 'korap'
+     */
+    create : function (name) {
+      var obj = Object.create(KorAP.Session);
+      if (name === undefined)
+	name = 'korap';
+      obj._name = name.toLowerCase();
+      obj._hash = {};
+      obj._parse();
+      return obj;
+    },
+
+    /**
+     * Get a value based on a key.
+     * The value can be complex, as the value is stored as JSON.
+     */
+    get : function (key) {
+      return this._hash[key.toLowerCase()];
+    },
+
+    /**
+     * Set a value based on a key.
+     * The value can be complex, as the value is stored as JSON.
+     */
+    set : function (key, value) {
+      this._hash[key] = value;
+      this._store();
+    },
+
+    /**
+     * Clears the session by removing the cookie
+     */
+    clear : function () {
+      document.cookie = this._name + '=; expires=-1';
+    },
+
+    /* Store cookie */
+    _store : function () {
+      /*
+	var date = new Date();
+	date.setYear(date.getFullYear() + 1);
+      */
+      document.cookie =
+	this._name + '=' + encodeURIComponent(JSON.stringify(this._hash)) + ';';
+    },
+
+    /* Parse cookie */
+    _parse : function () {
+      var c = document.cookie;
+      var part = document.cookie.split(';');
+      for(var i = 0; i < part.length; i++) {
+        var pair = part[i].split('=');
+        var name = pair[0].trim().toLowerCase();
+	if (name === this._name) {
+	  if (pair.length === 1 || pair[1].length === 0)
+	    return;
+          this._hash = JSON.parse(decodeURIComponent(pair[1]));
+	  return;
+	};
+      };
+    }
+  }
+
+}(this.KorAP));
diff --git a/public/js/src/tutorial.js b/public/js/src/tutorial.js
new file mode 100644
index 0000000..03cf903
--- /dev/null
+++ b/public/js/src/tutorial.js
@@ -0,0 +1,133 @@
+/**
+ * Open and close a tutorial page.
+ * The current page is stored and retrieved in a session cookie.
+ */
+// Requires session.js
+var KorAP = KorAP || {};
+
+// Todo: add query mechanism!
+
+(function (KorAP) {
+  "use strict";
+
+  // Localization values
+  var loc   = (KorAP.Locale = KorAP.Locale || {} );
+  loc.CLOSE = loc.CLOSE || 'Close';
+
+  KorAP.Tutorial = {
+
+    /**
+     * Create new tutorial object.
+     * Accepts an element to bind the tutorial window to.
+     */
+    create : function (obj) {
+      return Object.create(KorAP.Tutorial)._init(obj);
+    },
+
+    // Initialize Tutorial object
+    _init : function (obj) {
+      this._session = KorAP.Session.create();
+      this._show = obj;
+      this.start = obj.getAttribute('href');
+      obj.removeAttribute('href');
+      var that = this;
+      obj.onclick = function () {
+	that.show();
+      };
+
+      // Injects a tutorial div to the body
+      var div = document.createElement('div');
+      div.setAttribute('id', 'tutorial');
+      div.style.display = 'none';
+      document.getElementsByTagName('body')[0].appendChild(div);
+      this._iframe = null;
+
+      this._element = div;
+      return this;
+    },
+
+    show : function () {
+      var element = this._element;
+      if (element.style.display === 'block')
+	return;
+
+      if (this._iframe === null) {
+	this._iframe = document.createElement('iframe');
+	this._iframe.setAttribute('src', this.getPage() || this.start);
+
+	var ul = document.createElement('ul');
+	ul.classList.add('action', 'right');
+
+	// Use localization
+	var loc = KorAP.Locale;
+
+	// Add close button
+	var close = document.createElement('li');
+	close.appendChild(document.createElement('span'))
+	  .appendChild(document.createTextNode(loc.CLOSE));
+	close.classList.add('close');
+	close.setAttribute('title', loc.CLOSE);
+	close.onclick = function () {
+	  element.style.display = 'none';
+	};
+
+	// Add open in new window button
+	// Add scroll to top button
+	/*
+	  var info = document.createElement('li');
+	  info.appendChild(document.createElement('span'))
+	  .appendChild(document.createTextNode(loc.SHOWINFO));
+	  info.classList.add('info');
+	  info.setAttribute('title', loc.SHOWINFO);
+	*/
+
+	ul.appendChild(close);
+
+	element.appendChild(ul);
+	element.appendChild(this._iframe);
+      };
+
+      element.style.display = 'block';
+    },
+
+    /**
+     * Close tutorial window.
+     */
+    hide : function () {
+      this._element.display.style = 'none';
+    },
+
+    /**
+     * Set a page to be the current tutorial page.
+     * Expects either a string or an element.
+     */
+    setPage : function (obj) {
+      var page = obj;
+      if (typeof page != 'string') {
+	page = window.location.pathname + window.location.search;
+	for (i = 1; i < 5; i++) {
+	  if (obj.nodeName === 'SECTION') {
+	    if (obj.hasAttribute('id'))
+	      page += '#' + obj.getAttribute('id');
+	    break;
+	  }
+	  else if (obj.nodeName === 'PRE' && obj.hasAttribute('id')) {
+	    page += '#' + obj.getAttribute('id');
+	    break;
+	  }
+	  else {
+	    obj = obj.parentNode;
+	  };
+	};
+      };
+      this._session.set('tutpage', page);
+    },
+
+    /**
+     * Get the current tutorial URL
+     */
+    getPage : function () {
+      this._session.get('tutpage');
+    },
+  }
+}(this.KorAP));
diff --git a/public/js/src/util.js b/public/js/src/util.js
index 3adf5a0..ecaad6f 100644
--- a/public/js/src/util.js
+++ b/public/js/src/util.js
@@ -36,6 +36,7 @@
    * Initialize user interface elements
    */
   KorAP.init = function () {
+    var obj = Object.create(KorAP.init);
 
     /**
      * Add actions to match entries
@@ -81,9 +82,43 @@
     };
 
     /**
-     * Init hint helper
+     * Init vc
      */
-    KorAP.Hint.create();
+    var input = document.getElementById('vc');
+    if (input) {
+      input.style.display = 'none';
+      var vcname = document.createElement('span');
+      vcname.setAttribute('id', 'vc-choose');
+      vcname.appendChild(
+	document.createTextNode(
+	  document.getElementById('vc-name').value
+	)
+      );
+      input.parentNode.insertBefore(vcname, input);
+      
+      vcname.onclick = function () {
+	var vc = KorAP.VirtualCollection.render(vcExample);
+	var view = document.getElementById('vc-view');
+	view.appendChild(vc.element());
+      };
+    };
+
+    /**
+     * Init Tutorial view
+     */
+    obj.tutorial = KorAP.Tutorial.create(
+      document.getElementById('view-tutorial')
+    );
+
+    /**
+     * Init hint helper
+     * has to be final because of
+     * reposition
+     */
+// Todo: Pass an element, so this works with
+// tutorial pages as well!
+    obj.hint = KorAP.Hint.create();
+    return obj;
   };
 
 }(this.KorAP));
diff --git a/public/scss/header.scss b/public/scss/header.scss
index 522be5e..f3f995a 100644
--- a/public/scss/header.scss
+++ b/public/scss/header.scss
@@ -4,6 +4,7 @@
 header {
   position: relative;
   background-color: $light-green;
+//  background-color: $ids-grey-1;
   @include box-sizing-box();
   padding: 8px;
   padding-bottom: 0;
@@ -19,9 +20,8 @@
     padding: 0;
     outline: none;
   }
-  span.select, span.location {
+  span.select, #vc-choose { /* Formally vc.location */
     cursor: pointer;
-    font-weight: bold;
     line-height: 1.8em;
     border: {
       width: 0;
@@ -35,16 +35,20 @@
       border-color: $dark-green;
     }
     &::after {
-      content: "\f0dd";
       pointer-events: none;
       font-family: FontAwesome;
       text-align: center;
       background-color: $light-green;
     }
   }
+  span.select::after {
+    content: "\f0dd";
+  }
+
   form {
+    padding-left: $logo-left-distance;
+    min-height: 2.7em;
     display: block;
-    padding-left: 230px;
     margin: 0px;
     position: relative;
   }
diff --git a/public/scss/kalamar.scss b/public/scss/kalamar.scss
index 1ffb671..582fe9b 100644
--- a/public/scss/kalamar.scss
+++ b/public/scss/kalamar.scss
@@ -13,4 +13,9 @@
 @import "resultinfo"; // Information on results
 @import "matchinfo";  // Match table and tree
 @import "kwic";       // Kwic view information
-@import "vc";       // Kwic view information
+@import "vc";         // Virtual collection builder
+@import "tutorial";   // Embedded and non-embedded tutorial
+@import "query";      // View query
+@import "sidebar";    // Navigation on the left side
+
+@import "media";      // Media queries
diff --git a/public/scss/kwic.scss b/public/scss/kwic.scss
index e768e5a..c55c00a 100644
--- a/public/scss/kwic.scss
+++ b/public/scss/kwic.scss
@@ -106,56 +106,12 @@
     > li {
       ul.action {
 	display: none;
-	> li {
-	  cursor: pointer;
-	  color: white;
-	  text-decoration: none;
-	}
       }
 
-      
       /* active actions */
       &.active, &:target {
 	ul.action {
-	  background-color: $dark-orange;
-	  font-size: 12pt;
-	  color: white;
-	  text: {
-	    shadow: none;
-	    indent: 0;
-	  }
-	  margin: 0;
-	  padding: 0;
-	  z-index: 5;
-
 	  display: block;
-	  list-style: {
-            type: none;
-            position: inline;
-	  }
-	  &.right {
-            position: absolute;
-	    width: $right-match-distance;
-            float: right;
-            text-align: center;
-            padding: 0pt 3pt;
-            height: 100%;
-            right: 0;
-            top: 0;
-	    li {
-	      > span {
-		@include blind;
-	      }
-	      &.close::after {
-		font-family: "FontAwesome";
-		content: "\f00d";
-	      }
-	      &.info::after {
-		font-family: "FontAwesome";
-		content: "\f05a";
-	      }
-	    }
-	  }
 	}
       }
       &:not(.active):not(:target) p.ref {
@@ -176,6 +132,51 @@
   }
 }
 
+ul.action {
+  background-color: $dark-orange;
+  font-size: 12pt;
+  color: white;
+  text: {
+    shadow: none;
+    indent: 0;
+  }
+  margin: 0;
+  padding: 0;
+  z-index: 5;
+  
+  list-style: {
+    type: none;
+    position: inline;
+  }
+  &.right {
+    position: absolute;
+    width: $right-match-distance;
+    float: right;
+    text-align: center;
+    padding: 0pt 3pt;
+    height: 100%;
+    right: 0;
+    top: 0;
+    li {
+      cursor: pointer;
+      color: white;
+      text-decoration: none;
+
+      > span {
+	@include blind;
+      }
+      &.close::after {
+	font-family: "FontAwesome";
+	content: "\f00d";
+      }
+      &.info::after {
+	font-family: "FontAwesome";
+	content: "\f05a";
+      }
+    }
+  }
+}
+
 /*
 ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.left {
   display: inline-block;
@@ -217,6 +218,11 @@
 /**
  * Highlights
  */
+mark {
+  background-color: inherit;
+  color: inherit;
+}
+
 mark > mark,
 em,
 .level-0 {
diff --git a/public/scss/logos.scss b/public/scss/logos.scss
index 0141bf6..715bf71 100644
--- a/public/scss/logos.scss
+++ b/public/scss/logos.scss
@@ -85,13 +85,13 @@
  */
 h1 {
   position: absolute;
-  margin-left:15px;
   margin: 0;
+  margin-left:15px;
   left: 0;
   top: 0;
   width: 7.8em;
   height: 2.4em;
-  z-index: 999;
+  z-index: 7200;
   background: {
     size: 72%;
     image: url('#{$img-path}/korap-logo-kalamar.svg');
diff --git a/public/scss/matchinfo.scss b/public/scss/matchinfo.scss
index d26c6e5..4341f23 100644
--- a/public/scss/matchinfo.scss
+++ b/public/scss/matchinfo.scss
@@ -208,14 +208,19 @@
 /**
  * SVG tree
  */
-
 path.edge {
   stroke: $darker-orange;
   stroke-width: 2px;
   fill: none;
 }
 
-g.middle > rect {
+g.root rect.empty {
+  stroke: $darker-orange;
+  fill: $darker-orange;
+  stroke-width: 2px;
+}
+
+g.middle rect {
   stroke: $darker-orange;
   stroke-width: 2px;
   fill: $middle-orange;
diff --git a/public/scss/media.scss b/public/scss/media.scss
new file mode 100644
index 0000000..cef3fed
--- /dev/null
+++ b/public/scss/media.scss
@@ -0,0 +1,118 @@
+@charset "utf-8";
+@import "util";
+
+$standard-margin: 4px;
+
+@media (orientation: portrait), (max-width: 42.5em) {
+  body, #search ol, header, header input {
+    font-size: 9pt;
+  }
+  header form {
+    padding-left: 0px;
+    padding-top: 33px;
+  }
+  .vc {
+    font-size: 9pt;
+  }
+  h1 {
+    margin-left: 10px;
+    width: 130px;
+    height: 40px;
+    background-size: 100%;
+    background-position: 50% 0;
+    z-index: 300;
+  }
+
+  #searchbar {
+    padding-right: 30px;
+    input {
+      font-size: 9pt;
+    }
+    button[type=submit] {
+      right: 0;
+    }
+  }
+
+  .level-1 {
+    padding-bottom: 2px;
+  }
+
+  .level-2 {
+    padding-bottom: 4px;
+  }
+
+  main {
+    margin-left: $standard-margin;
+    margin-right: $standard-margin;
+  }
+
+  #search ol {
+    > li:target, > li.active {
+      > div > div.snippet {
+	margin: 2px 2em 2px 4px;
+      }
+    }
+    > li:not(:target):not(.active) {
+      padding: 3pt 0 3pt 0;
+    }
+  }
+
+  div.matchinfo {
+    font-size: 9pt;
+  }
+
+  div.matchtable tr > * {
+    padding: 1pt 3pt;
+  }
+
+  div.matchtree {
+    h6 {
+      display: block;
+      float: none;
+    }
+    > div {
+      margin-left: 2px;
+    }
+  }
+
+  div.resultinfo p.found,
+  #pagination > a {
+    font-size: 9pt;
+  }
+
+  #logos {
+    margin-left: 0;
+    margin-right: 0;
+
+    > div {
+      border-top-width: 14px;
+    }
+  }
+
+/*
+
+  #sidebar {
+    padding-top: 22px;
+  }
+  #tutorial {
+    border-radius: 0;
+    border-width: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    padding: 0;
+  }
+  #tutorial iframe {
+    border-radius: 0;
+  }
+  #sidebar:not(.active) > i.fa-bars {
+    font-size: 12pt;
+    width: 10pt;
+    height: 11pt;
+  }
+  pre.query {
+    font-size: 9.5pt;
+  }
+*/
+}
\ No newline at end of file
diff --git a/public/scss/menu.scss b/public/scss/menu.scss
index e8b9f41..2c3f24d 100644
--- a/public/scss/menu.scss
+++ b/public/scss/menu.scss
@@ -56,13 +56,6 @@
 	left-radius: $standard-border-radius;
 	right-radius: $standard-border-radius;
       }
-      &:not(.no-more):before {
-	position: absolute;
-	font-family: "FontAwesome";
-	content: '\f0de';
-	right: .5em;
-	top: .4em;
-      }
     }
     &:last-of-type {
       border-bottom: {
@@ -70,14 +63,6 @@
 	left-radius: $standard-border-radius;
 	right-radius: $standard-border-radius;
       }
-
-      &:not(.no-more):before {
-	position: absolute;
-	font-family: "FontAwesome";
-	content: '\f0dd';
-	right: .5em;
-	bottom: .4em;
-      }
     }
     mark {
       text-decoration: underline;
@@ -114,4 +99,42 @@
   }
 }
 
+/**
+ * Rolling menu
+ */
+ul.menu.roll {
+  > li:first-of-type {
+    &:not(.no-more):before {
+      position: absolute;
+      font-family: "FontAwesome";
+      content: '\f0de';
+      right: .5em;
+      top: .4em;
+    }
+  }
+  > li:last-of-type {
+    &:not(.no-more):before {
+      position: absolute;
+      font-family: "FontAwesome";
+      content: '\f0dd';
+      right: .5em;
+      bottom: .4em;
+    }
+  }
+}
 
+
+/**
+ * Sorting menu
+ */
+ul.menu.sort {
+  position: relative;
+  display: inline-block;
+  > li::before {
+    content: '';
+  }
+  > li.active:hover {
+    @include choose-remove;
+  }
+
+}
\ No newline at end of file
diff --git a/public/scss/query.scss b/public/scss/query.scss
new file mode 100644
index 0000000..4167059
--- /dev/null
+++ b/public/scss/query.scss
@@ -0,0 +1,24 @@
+@import "util";
+@charset "utf-8";
+
+
+pre.query {
+  overflow-x: hidden; 
+  cursor: pointer;
+  padding: .5em;
+  @include choose-item;
+  position:relative;
+  border: {
+    width: 2px;
+    style: solid;
+    radius: $standard-border-radius;
+  }
+  box-shadow: $choose-box-shadow;
+  
+  &:hover {
+    @include choose-hover;
+  }
+  &:active {
+    @include choose-active;
+  }
+}
diff --git a/public/scss/searchbar.scss b/public/scss/searchbar.scss
index 2b54e01..098eacd 100644
--- a/public/scss/searchbar.scss
+++ b/public/scss/searchbar.scss
@@ -8,24 +8,21 @@
  * Input field
  */
 #q-field {
-  @include box-sizing-box();
-  outline: none;
-  font-size: 11pt;
-  border: $border-size solid $nearly-white;
-  padding: 2px;
   width: 100%;
   margin: 0;
   margin-bottom: 3px;
   display: block;
 }
 
-header > form {
-  min-height: 2.7em;
+header input {
+  outline: none;
+  font-size: 11pt;
+  border: $border-size solid $nearly-white;
+  padding: 2px;
 }
 
 #searchbar {
   position: relative;
-  @include box-sizing-box();
   width: 100%;
   padding-right: 60px;
   button[type=submit] {
@@ -99,7 +96,7 @@
       border-color: $nearly-white;
     }
 */
-      &:after {
+      &::after {
 	font-family: "FontAwesome"; 
 	content: '\f096';
       }
diff --git a/public/scss/sidebar.scss b/public/scss/sidebar.scss
new file mode 100644
index 0000000..3920ef5
--- /dev/null
+++ b/public/scss/sidebar.scss
@@ -0,0 +1,135 @@
+@charset "utf-8";
+@import "util";
+
+#sidebar {
+/*
+  box-shadow: 2px 2px 5px darken($dark-green, 15%);
+*/
+//  box-shadow: $choose-box-shadow;
+  outline: none;
+  display: block;
+  background-color: $dark-green;
+  position: fixed;
+  z-index: 7100;
+  color: $nearly-white;
+  width: $logo-left-distance;
+  top: 0;
+  left: 0;
+  height: 100%;
+  padding-top: 80px;
+  transition: all .3s ease-in-out;
+
+  > * {
+    opacity: 1;
+  }
+  &::after {
+    display: block;
+    opacity: 0;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin-right: -30px;
+    background-color: $dark-green;
+    content: '#';
+    font-size: 16pt;
+    width: 16pt;  
+    height: 17pt;
+    padding: 6pt;
+    border-top-right-radius: $standard-border-radius;
+  }
+}
+
+#sidebar:not(:focus):not(.active) {
+  margin-left: -1 * ($logo-left-distance - 15px);
+//  box-shadow: none;
+  &::after {
+    opacity: 1;
+  }
+  > * {
+    opacity: 0;
+    // TODO
+    transition: {
+      property: opacity;
+      duration: .3s;
+    }
+  }
+}
+
+/*
+#sidebar {
+  text-shadow: none;
+  height: 105%;
+  margin-top: -10px;
+  background-color: #496000;
+  left: 0;
+  top: 0;
+  &.active {
+    box-shadow: 2px 2px 5px darken($dark-green, 15%);
+    margin-left: 0px;
+    left: 0;
+    top: 0;
+  }
+  &:not(.active) > i.fa-bars {
+    opacity: 1;
+    cursor: pointer;
+    background-color: #496000;
+    position: fixed;
+    font-size: 16pt;
+    width: 16pt;  
+    height: 17pt;
+    padding: 6pt;
+    bottom: 0;
+    left: 0;
+    border-top-right-radius: 5pt;
+  }
+  h2 {
+    font: {
+      size: 100%;
+      weight: bold;
+    }
+    text-align: center;
+    padding: 0;
+    margin: 0 0 5pt 0;
+  }
+  ul {
+    list-style-type: none;
+    margin: 0;
+    font-size: 10pt;
+    text-indent: 0;
+    padding: 0;
+    li {
+      padding: 4pt 10pt;
+      h3 {
+        font: {
+	  weight: bold;
+	  size: 100%;
+	}	  
+	padding: 0;
+	margin: 0;
+      }
+      &.active {
+	background-color: $light-green;
+//	text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+	text-shadow: none;
+	h3 {
+	  margin-bottom: 2pt;
+	  padding-bottom: 2pt;
+	  border-bottom: 1px solid black;
+	}
+      }
+    }
+  }
+  dl.info {
+    font-size: 9pt;
+    padding: 0 10pt;
+    > dt {
+      font-weight: bold;
+      float: left;
+    }
+    > dd {
+      text-align: right;
+    }
+  }
+}
+*/
\ No newline at end of file
diff --git a/public/scss/tutorial.scss b/public/scss/tutorial.scss
new file mode 100644
index 0000000..74937fc
--- /dev/null
+++ b/public/scss/tutorial.scss
@@ -0,0 +1,107 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 3px;
+
+body.embedded {
+  background-color: $nearly-white;
+}
+
+#tutorial {
+  position: fixed;
+  z-index: 9999;
+  top:    5%;
+  bottom: 5%;
+  left:   2%;
+  right:  2%;
+  padding-right: $right-match-distance;
+  background-color: $nearly-white;
+  ul.action {
+    display: block;
+  }
+  border: {
+    width: $border-size;
+    color: $dark-orange;
+    style: solid;
+    radius: $standard-border-radius;
+  }
+  box-shadow: $choose-box-shadow;
+  iframe {
+    margin: 0;
+    width: 100%;
+    min-height: 100%;
+    border-width: 0;
+    background: {
+      image:url('#{$img-path}/korap-bg-kalamar.svg');
+      repeat: no-repeat;
+      position: center center;
+      size: 20%;
+    }
+  }
+}
+
+main.tutorial {
+  margin-left: $logo-left-distance + 15px;
+}
+
+/*
+#tutorial {
+  iframe {
+    width: 100%;
+    min-height: 100%;
+    border: {
+      width: 0;
+      radius: 10px;
+    }
+    background: {
+      image:url('#{$basepath}/img/korap-bg-kalamar.svg');
+      size: 10%;
+      repeat: no-repeat;
+      position: center center;
+      color: white;
+    }
+  }
+
+  display: block;
+  background-color: $dark-green;
+  border-radius: 15px;
+  &:not(.active) {
+    display: none;
+  }
+  &.active {
+    display: block;
+  }
+  > i,
+  > a > i {
+    font-size: 20pt;
+    color: $dark-green;
+    position: absolute;
+    background-color: rgba(255,255,255,0.5);
+    z-index: 100;
+    top: 10pt;
+    right: 20pt;
+    cursor: pointer;
+  }
+  > a > i {
+    right: 40pt;
+  }
+}
+
+div.test {
+  display: block;
+  border-left: 10px solid $dark-green;
+  margin: 1em;
+  padding-left: 5px;
+  p {
+    color: black;
+    &.fail {
+      font-weight: bold;
+      color: red;
+    }
+    &.pass {
+      font-weight: bold;
+      color: green;
+    }
+  }
+}
+*/
\ No newline at end of file
diff --git a/public/scss/util.scss b/public/scss/util.scss
index 7c3f056..d81b7f9 100644
--- a/public/scss/util.scss
+++ b/public/scss/util.scss
@@ -1,9 +1,23 @@
 /**
+ * Official IDS colors
+ */
+$ids-orange-1: rgb(246, 168,   0);
+$ids-orange-2: rgb(242, 148,   0);
+$ids-grey-1:   rgb(135, 136, 138);
+$ids-grey-2:   rgb(217, 218, 219);
+$ids-blue-1:   rgb(  0, 158, 224); // Pragmatik
+$ids-blue-2:   rgb(188, 228, 247); // Pragmatik
+$ids-green-1:  rgb( 99, 111,   7); // Grammatik
+$ids-green-2:  rgb(227, 232, 163); // Grammatik
+$ids-pink-1:   rgb(193,   0,  43); // Lexik
+$ids-pink-2:   rgb(250, 243, 222); // Lexik
+
+/**
  * Orange Colors
  */
 $light-orange:   #f4eebb; // #ffe56a;
 $middle-orange:  #ffd080;
-$dark-orange:    #ffa500;
+$dark-orange:    $ids-orange-1; // #ffa500;
 $darker-orange:  #ff8000;
 $darkest-orange: darken($dark-orange, 20%);
 // $light-orange-2: #f4eebb;, #ffd080;
@@ -12,9 +26,9 @@
 /**
  * Green Colors
  */
-$dark-green:    #496000;
-$middle-green:  #688704;
-$light-green:   #7ba400;
+$dark-green:    $ids-green-1; // #496000;
+$middle-green:  lighten($ids-green-1, 5%); // $ids-green-1; // #688704;
+$light-green:   lighten($ids-green-1, 10%); // #7ba400;
 
 /**
  * Blue Colors
@@ -27,12 +41,16 @@
 /*
  * Grey
  */
-$light-grey:   #ddd;
+$light-grey:   $ids-grey-2; // #ddd;
 $dark-grey:    #555;
 $middle-grey:  #999;
 // $nearly-white: #f5f5f5;
 $nearly-white: #fff;
 
+$middle-red: #c1002b;
+$light-red: lighten($middle-red, 40%);
+$dark-red: darken($middle-red, 40%);
+
 $dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
 $light-shadow: 1px 1px rgba(255,255,255,0.5);
 
@@ -47,7 +65,7 @@
 $kwic-match-color:  $dark-grey;
 $kwic-match-shadow: $light-shadow;
 
-$kwic-highlight-1:  #c1002b;
+$kwic-highlight-1:  $middle-red;
 $kwic-highlight-2:  $dark-blue;   // #009ee0;
 $kwic-highlight-3:  $dark-orange; // #f29400;
 $kwic-highlight-4:  $light-green;
@@ -57,7 +75,7 @@
 $choose-border: 2px solid $choose-border-color;
 $choose-color:  $dark-grey;
 $choose-blind-color:  $middle-grey;
-$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+$choose-box-shadow: 2px 2px 2px  rgba(0,0,0,0.2);
 $standard-border-radius: 6px;
 
 /**
@@ -71,6 +89,7 @@
  */
 $standard-margin: 30px;
 $right-match-distance: 20px;
+$logo-left-distance: 230px;
 
 @mixin blind {
   position: absolute;
@@ -98,6 +117,13 @@
   border-color: $dark-green;
 }
 
+@mixin choose-remove {
+  color: $nearly-white;
+  text-shadow: none;
+  background-color: $middle-red;
+  border-color: $dark-red;
+}
+
 @mixin color-transition {
   transition: color 0.3s ease 0s;
 }
diff --git a/public/scss/vc.scss b/public/scss/vc.scss
index 4d759ef..1ed7959 100644
--- a/public/scss/vc.scss
+++ b/public/scss/vc.scss
@@ -2,11 +2,11 @@
 @import "util";
 
 $left-padding: 28pt; // 2.8em;
-$border-size: 4px;
+$border-size: 2px;
 
 .vc {
   background-color: $light-green;
-
+  margin-top: 10px;
   .docGroup {
     position: relative;
     display: inline-block;
@@ -15,7 +15,7 @@
     margin-left: $left-padding; // 2.8em
 
     // .6em .5em
-    border-width: 0 $border-size;
+    border-width: 0 (2 * $border-size);
 
     padding: {
       top: 10pt;
@@ -23,10 +23,7 @@
       left: 0pt;
       right: 6pt;
     }
-/*
 
-    background-color: yellow;
-*/
     border: {
       radius: $standard-border-radius * 2;
       style: solid;