diff --git a/lib/Korap.pm b/lib/Korap.pm
index c5073ef..49922b2 100644
--- a/lib/Korap.pm
+++ b/lib/Korap.pm
@@ -62,12 +62,13 @@
     'korap.js' => (
 #      '/js/d3.v3.min.js',
 #      '/js/dagre-d3.min.js',
-      '/js/jquery-2.0.0.min.js',
+#      '/js/translateTree.js',
+#      '/js/jquery-2.0.0.min.js',
       '/js/tutorialCookie.js',
       '/js/translateTable.js',
-#      '/js/translateTree.js',
       '/js/hint.js',
       '/js/highlight.pack.js',
+      '/js/ajax.js',
       $self->notifications->scripts
     )
   );
@@ -102,7 +103,6 @@
   $collection->to('info#about_collection');
   my $collection_id = $collection->bridge('/:collection_id');
   # stats
-  # $collection_id->;
   $collection_id->search;
 
   # Corpus data
@@ -116,9 +116,9 @@
   # Match data
   my $match = $doc->route('/:match_id');
   $match->route->to('info#about_match')->name('match');
-#  my $match_foundry = $match->route('/:foundry');
-#  $match_foundry->route->to('info#about_match');
-#  $match_foundry->route('/:layer')->to('info#about_match');
+  # my $match_foundry = $match->route('/:foundry');
+  # $match_foundry->route->to('info#about_match');
+  # $match_foundry->route('/:layer')->to('info#about_match');
 
   # Utilities
   # $r->get('/util/query')->to('search#query');
diff --git a/public/js/ajax.js b/public/js/ajax.js
new file mode 100644
index 0000000..2af0bc0
--- /dev/null
+++ b/public/js/ajax.js
@@ -0,0 +1,19 @@
+"use strict";
+
+// 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);
+var Ajax = {
+  getJSON : function (url, onload) {
+    var r = new XMLHttpRequest();
+    r.open('GET', url, true);
+    r.setRequestHeader("Accept", "application/json");
+    r.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
+    r.onreadystatechange = function () {
+      if (this.readyState == 4)
+	onload(JSON.parse(this.responseText));
+    };
+    r.send();
+  }
+};
+
diff --git a/public/js/hint.js b/public/js/hint.js
index 1e5f6ec..5e14283 100644
--- a/public/js/hint.js
+++ b/public/js/hint.js
@@ -5,6 +5,7 @@
  * - limit the view based on prefix matches
  * - highlight matching substrings
  * - http://www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm
+ * - document.removeEventListener("click",arguments.callee,false);
  */
 
 // Don't let events bubble up
@@ -761,15 +762,16 @@
 };
 
 function chooseHint (e) {
+/*
   var element = e.target;
   while (element.nodeName == "STRONG" || element.nodeName == "SPAN") {
     element = element.parentNode;
   };
-
   if (element === undefined || element.nodeName != "LI")
     return;
+*/
 
-  var action = element.getAttribute('data-action');
+  var action = this.getAttribute('data-action');
   hint.insertText(action);
   var menu = hint.menu();
   menu.hide();
diff --git a/public/js/translateTable.js b/public/js/translateTable.js
index 31be939..de3e075 100644
--- a/public/js/translateTable.js
+++ b/public/js/translateTable.js
@@ -193,29 +193,28 @@
 
 function showTable (o) {
   var match = o.parentNode.parentNode;
-  var table = $(match).children("div").children("div.tokenInfo").first();
+  var table = match.getElementsByClassName("tokenInfo")[0];
 
-console.log(table);
-
-  if (table.hasClass("active")) {
-    table.removeClass("active");
+  if (table.classList.contains("active")) {
+    table.classList.remove("active");
     return;
   }
-  else if (table.children("table").length > 0) {
-    table.addClass("active");
+  else if (table.getElementsByTagName("table").length > 0) {
+    table.classList.add("active");
     return;
   };
 
+
   var corpusID = match.getAttribute('data-corpus-id');
   var docID    = match.getAttribute('data-doc-id');
   var matchID  = match.getAttribute('data-match-id');
   var url      = '/corpus/' + corpusID + '/' + docID + '/' + matchID;
   var snippet;
 
-  jQuery.getJSON(url, function (res) {
+  Ajax.getJSON(url, function (res) {
     var snippet = new SnippetTable(res['snippet']);
-    table.addClass("active");
-    table.append(snippet.toTable());
+    table.classList.add("active");
+    table.appendChild(snippet.toTable());
   });
 };
 
diff --git a/public/sass/kwic-4.0.scss b/public/sass/kwic-4.0.scss
index ee4c3af..a126526 100644
--- a/public/sass/kwic-4.0.scss
+++ b/public/sass/kwic-4.0.scss
@@ -66,13 +66,13 @@
   }
 }
 
-ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.left {
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.left {
   display: inline-block;
   text-align: right;
   width: 50.046%;
 }
 
-ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.separator {
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.separator {
   width: 0px;
   height: 1em;
   margin-bottom: -2px;
@@ -83,17 +83,17 @@
   margin-right: 2px;
 }
 
-ol.free-aligned > li > div > div.snippet > span.right {
+ol.align-free > li > div > div.snippet > span.right {
   text-align: left;
 }
 
-ol.left-aligned > li > div > div.snippet > span.context-left {
+ol.align-left > li > div > div.snippet > span.context-left {
   display: inline-block;
   text-align: right;
   width: 50.01%;
 }
 
-ol.right-aligned {
+ol.align-right {
   text-align: right;
   > li:not(.active):not(:target) > div > div.snippet > span.context-right {
     display: inline-block;
diff --git a/templates/api-communication.html.ep b/templates/api-communication.html.ep
index 2daaa37..341a2da 100644
--- a/templates/api-communication.html.ep
+++ b/templates/api-communication.html.ep
@@ -1,7 +1,7 @@
 % use JSON::XS;
 
 % if (stash('test_port') && stash('search.apirequest')) {
-<pre class="query api">
+<pre class="query api" onclick="this.classList.toggle('active')">
   <span>API Response for </span>
   <span style="font-size: 70%"><%= stash('search.apirequest') %></span>
   <code>
@@ -10,8 +10,5 @@
 </pre>
 %= javascript begin
 hljs.initHighlightingOnLoad();
-$("pre.query.api").on("click", function () {
-  $(this).toggleClass('active');
-});
 % end
 % };
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 0f55866..160b8e9 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -3,7 +3,7 @@
 %= include 'partial/header'
   <body>
 
-%# Background-image
+%# -- Background crab
 % if (!param('q') && current_route eq 'index') {
 <div id="crab-bg"></div>
 % };
@@ -12,14 +12,6 @@
 % my $search_route;
 % unless (current_route 'tutorial') {
 <div id="tutorial">
-%#   my $tut_page = url_for(session('tutorial') || 'tutorial');
-%#  <a href="<%= $tut_page %>"
-%#     target="_blank"><i title="Open in new tab"
-%#                        class="fa fa-external-link-square"></i></a>
-%#
-%#  <a href="javascript:window.open(getTutorialPage())"
-%#     target="_blank"><i title="Open in new tab"
-%#                        class="fa fa-external-link-square"></i></a>
 %= javascript begin
 document.write('<a href="' + getTutorialPage().replace(/\?embedded=1/, '') + '" ');
 document.write('target="_blank"><i title="Open in new tab" ');
@@ -29,7 +21,6 @@
      title="close"
      class="fa fa-toggle-up"></i>
   <iframe src="about:blank"></iframe>
-%#          data-src="<%= $tut_page->query([embedded => 1]) %>"></iframe>
 </div>
 %   if (current_route eq 'match') {
 %     $search_route = url_for('search_corpus');
@@ -71,28 +62,39 @@
   </div>
 
 <div id="button-right">
+%#
+%# -- The cutoff checkbox
 % unless (param('q')) { param(cutoff => 1) };
 %= check_box cutoff => 1, id => 'q-cutoff-field'
 <label for="q-cutoff-field"><span></span>Quick</label>
+%#
+%# -- The tutorial button
 % unless (current_route 'tutorial') {
-<button type="button" title="Tutorial" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
+<button type="button" title="Tutorial" onclick="openTutorial()">\
+<i class="fa fa-graduation-cap"></i>\
+</button>
 % };
-% if (param('q')) {
-<button type="button" title="Alignment" onclick="$('#search > ol').toggleClass('left-aligned right-aligned'); $(this).children('i').toggleClass('fa-align-right fa-align-left')"><i class="fa fa-align-right"></i></button>
+%#
+%# -- The Alignment button
+% if (param('q') && (stash('search.totalResults') // 0) != 0) {
+<button type="button" title="Alignment" onclick="toggleAlignment(this)">\
+<i class="fa fa-align-right"></i>\
+</button>
 % }
 </div>
-
+%#
 % end
-
 </div>
 
+
 %= content 'sidebar' => begin
 <div id="sidebar">
-%= include 'collections'
+  %= include 'collections'
   <i class="fa fa-bars"></i>
 </div>
 % end
 
+
 <main>
 %= content main => begin
   <p>This is the alternative KorAP Frontend.</p>
diff --git a/templates/partial/javascript.html.ep b/templates/partial/javascript.html.ep
index 3aa8eda..0ec515b 100644
--- a/templates/partial/javascript.html.ep
+++ b/templates/partial/javascript.html.ep
@@ -3,36 +3,60 @@
 // Create new hint
 var hint = Object.create(Hint).init();
 
+// Add toggleClass method similar to jquery
+HTMLElement.prototype.toggleClass = function (c1, c2) {
+  var cl = this.classList;
+  if (cl.contains(c1)) {
+    cl.add(c2);
+    cl.remove(c1);
+  }
+  else {
+    cl.remove(c2);
+    cl.add(c1);
+  };
+};
+
 function openTutorial (o) {
-  var tut = $("#tutorial");
-  tut.addClass("active");
-  var iframe = tut.children("iframe");
-  iframe.attr("src", getTutorialPage());
+  var tut = document.getElementById("tutorial");
+  tut.classList.add("active")
+  var iframe = tut.getElementsByTagName("iframe")[0];
+  iframe.setAttribute("src", getTutorialPage());
 };
 
 function closeTutorial (o) {
-  $("#tutorial").removeClass("active");
+  document.getElementById("tutorial").classList.remove("active");
 };
 
 function useQuery (o) {
   var q = o.getAttribute("data-query");
   var ql = o.getAttribute("data-query-language");
   var qc = o.getAttribute("data-query-cutoff");
-  if (qc !== 0 && qc !== "0" && qc !== "off" && qc !== null)
-    $("#q-cutoff-field").prop('checked', true);
+  if (qc !== 0 && qc !== "0" && qc !== "off" && qc !== null) {
+    document.getElementById("q-cutoff-field").checked = true;
+  };
 
-  $("#ql-field").val(ql);
-  $("#q-field").val(q);
+  var qlf = document.getElementById("ql-field").options;
+  for (i in qlf)
+    if (qlf[i].value == ql) qlf[i].selected = true;
 
+  document.getElementById("q-field").value = q;
   closeTutorial();
 };
 
-$("#sidebar").on("click", function () {
-  $(this).toggleClass('active');
-});
+document.getElementById("sidebar").addEventListener("click",function(){
+  this.classList.toggle("active");
+},false);
 
-$("span.location").on("click", function () {
-  $("#sidebar").toggleClass('active');
-});
+%# document.getElementById("top")
+%#         .querySelectorAll("span.location")
+%#         .addEventListener("click",function() {
+%#   document.getElementById("sidebar").classList.toggle("active");
+%# }, false);
+
+function toggleAlignment (o) {
+  var ol = document.querySelector("#search > ol");
+  ol.toggleClass("align-left", "align-right");
+  o.firstChild.toggleClass("fa-align-right", "fa-align-left");
+}; 
 
 % end
diff --git a/templates/query.html.ep b/templates/query.html.ep
index c1d3153..9c077b8 100644
--- a/templates/query.html.ep
+++ b/templates/query.html.ep
@@ -7,7 +7,7 @@
 %     $action = ' active" style="cursor: default';
 %   };
 %   state $json = JSON::XS->new->allow_blessed->pretty->canonical(1);
-<pre class="query serial<%== $action // '' %>">
+<pre class="query serial<%== $action // '' %>" <% unless ($action) { %>onclick="this.classList.toggle('active')"<% } %>>
   <span>JSON-LD Serialization for <%= param 'q' %> (<%= param 'ql' %>)</span>
   <code>
 %# Workaround to keep true, false, and null intact
@@ -16,10 +16,5 @@
 </pre>
 %= javascript begin
 hljs.initHighlightingOnLoad();
-%   unless ($action) {
-$("pre.query.serial").on("click", function () {
-  $(this).toggleClass('active');
-});
-%   };
 % end
 % };
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 3fe6302..4d5c2c3 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -24,7 +24,7 @@
 
 % if (stash('search.totalResults') != 0 && scalar @{stash('search.hits')}) {
 <div id="search">
-<ol class="left-aligned">
+<ol class="align-left">
 %=    search_hits begin
 %=      include 'match', match => $_
 %     end
@@ -37,15 +37,21 @@
 % content 'javascript' => begin
 %=   javascript begin
 
-$("#search > ol > li:not(.active)").on("click", function (e) {
-  $(this).addClass('active');
+var openLi = function (e) {
+  this.classList.add("active");
   e.stopPropagation();
-});
+};
 
-$("#search > ol > li:not(.active) > ul > li.close").on("click", function (e) {
-  $(this.parentNode.parentNode).removeClass('active');
+var closeLi = function (e) {
+  this.parentNode.parentNode.classList.remove("active");
   e.stopPropagation();
-});
+};
+
+var inactiveLi = document.querySelectorAll("#search > ol > li:not(.active)");
+for (var i = 0; i < inactiveLi.length; i++) {
+  inactiveLi[i].addEventListener("click", openLi, false);
+  inactiveLi[i].getElementsByClassName("close")[0].addEventListener("click", closeLi, false);
+};
 
 %   end
 % end
diff --git a/templates/tutorial/index.html.ep b/templates/tutorial/index.html.ep
index 26476ae..19fcb4e 100644
--- a/templates/tutorial/index.html.ep
+++ b/templates/tutorial/index.html.ep
@@ -1,3 +1,5 @@
+%# https://letsencrypt.org/howitworks/
+
 % content main => begin
 
 %# Store the id of an active section in the session, so the system is able to directly scroll to the relevant section
@@ -17,7 +19,7 @@
 <p>Links to Blog, FAQ, About, Contact ...</p>
 <ul>
   <li>Introduction to KorAP</li>
-  <li>How to use Poliqarp+ QL?</li>
+  <li>How to use Annis QL?</li>
   <li>How to use Cosmas-II QL?</li>
   <li>How to use CQL?</li>
   <li>API</li>