diff --git a/Gruntfile.js b/Gruntfile.js
index 3cf82bb..d949a90 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -90,6 +90,15 @@
 	    dest: 'public/',
 	    nonull:true,
 	    timestamp:true
+	  },
+	  // Needs to overwrite the prepared svg as it corrupts the embedded js
+	  {
+	    expand: true,
+	    cwd: 'dev/img/',
+	    src: 'korap-overview.svg',
+	    dest: 'public/img/',
+	    nonull:true,
+	    timestamp:true
 	  }
 	]
       }
@@ -123,6 +132,6 @@
   grunt.registerTask('css', ['sass']);
   grunt.registerTask(
     'default',
-    ['copy', 'requirejs', 'imagemin', 'sass']
+    ['requirejs', 'imagemin', 'copy', 'sass']
   );
 };
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 85d4d2e..ff21908 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -47,7 +47,7 @@
 
 	  <!-- Todo: open tutorial - like openTutorial() -->
 	  <a href="doc/faq" class="question"><span>Question</span></a>
-	  <a href="about.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
+	  <a href="tutorial.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
 	</div>
       </form>
     </header>
diff --git a/dev/demo/tutorial.html b/dev/demo/tutorial.html
index c7aea38..7c4a87f 100644
--- a/dev/demo/tutorial.html
+++ b/dev/demo/tutorial.html
@@ -3,7 +3,7 @@
   <head>
     <title>Tutorial demo</title>
     <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
-    <script data-main="all.js" src="../js/lib/require.js" async="async"></script>
+    <script data-main="alldemo.js" src="../js/lib/require.js" async="async"></script>
   </head>
   <body class="embedded">
     <aside tabindex="0" class="active">
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index cd0adfc..cd99df1 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -108,11 +108,21 @@
     /**
      * Init Tutorial view
      */
-    obj.tutorial = tutClass.create(
-      document.getElementById('view-tutorial')
-    );
+    if (document.getElementById('view-tutorial')) {
+      window.tutorial = tutClass.create(
+	document.getElementById('view-tutorial')
+      );
+      obj.tutorial = window.tutorial;
+    }
 
-  
+    // Tutorial is in parent
+    else if (window.parent) {
+      obj.tutorial = window.parent.tutorial;
+    };
+
+    // Initialize queries for document
+    obj.tutorial.initQueries(document);
+
     /**
      * Init hint helper
      * has to be final because of
diff --git a/dev/js/src/tutorial.js b/dev/js/src/tutorial.js
index 4f00ee1..cacbe21 100644
--- a/dev/js/src/tutorial.js
+++ b/dev/js/src/tutorial.js
@@ -27,25 +27,64 @@
     _init : function (obj) {
 
       this._session = sessionClass.create();
-      this._show = obj;
-      this.start = obj.getAttribute('href');
-      obj.removeAttribute('href');
-      var that = this;
-      obj.onclick = function () {
-	that.show();
+
+      if (obj) {
+	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;
+
+	// Some fields
+	this._ql     = document.getElementById("ql-field");
+	this._q      = document.getElementById("q-field")
+	this._cutoff = document.getElementById("q-cutoff-field");
       };
 
-      // 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;
     },
 
+    useQuery : function (e) {
+      var q  = e.getAttribute("data-query");
+      var ql = e.getAttribute("data-query-language");
+      var qc = e.getAttribute("data-query-cutoff");
+      if (qc !== 0 && qc !== "0" && qc !== "off" && qc !== null) {
+	this._cutoff.checked = true;
+      };
+
+      var qlf = this._ql.options;
+      for (var i in qlf) {
+	if (qlf[i].value == ql) {
+	  qlf[i].selected = true;
+	};
+      };
+
+      this._q.value = q;
+      this.setPage(e);
+      this.hide();
+    },
+
+    initQueries : function (d) {
+      var qs = d.querySelectorAll('pre.query.tutorial');
+      var that = this;
+      for (var i = 0; i < qs.length; i++) {
+	qs[i].onclick = function (e) {
+	  that.useQuery(this,e);
+	};
+      };
+    },
+
+
     show : function () {
       var element = this._element;
       if (element.style.display === 'block')
@@ -94,7 +133,7 @@
      * Close tutorial window.
      */
     hide : function () {
-      this._element.display.style = 'none';
+      this._element.style.display = 'none';
     },
 
     /**
@@ -105,7 +144,7 @@
       var page = obj;
       if (typeof page != 'string') {
 	page = window.location.pathname + window.location.search;
-	for (i = 1; i < 5; i++) {
+	for (var i = 1; i < 5; i++) {
 	  if (obj.nodeName === 'SECTION') {
 	    if (obj.hasAttribute('id'))
 	      page += '#' + obj.getAttribute('id');
@@ -128,6 +167,7 @@
      */
     getPage : function () {
       this._session.get('tutpage');
-    },
+    }
   };
 });
+
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 1d3d26a..ca1029e 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -37,7 +37,7 @@
     color: $dark-orange;
     text-decoration: none;
     &:hover {
-      color: $light-green; // $darkest-orange;
+      color: $darkest-orange;
       @include color-transition;
     }
     &:active, &:visited {
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index e63283a..8b4e0a5 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -105,6 +105,10 @@
       content: $fa-login;
     }
   }
+
+  #vc-view > div {
+    margin: 1.3em 0 .5em 0;
+  }
 }
 
 
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 883f003..6411d87 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -97,13 +97,13 @@
 */
       &::after {
 	font-family: "FontAwesome"; 
-	content: '\f096';
+	content: $fa-check;
       }
     }
   }
   &:checked + label span { 
     &:after {
-      content:"\f046";
+      content: $fa-checked;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index d6650a4..12071db 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -249,3 +249,17 @@
     }
   }
 }
+
+
+#vc-choose {
+  &::after {
+    content: $fa-down;
+    padding: {
+      left: 2pt;
+      right: 4pt;
+    }
+  }
+  &.active::after {
+    content: $fa-up;
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index f0e10de..8b91f22 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -181,4 +181,6 @@
 $fa-tutorial:    "\f19d";
 $fa-left-align:  "\f036";
 $fa-right-align: "\f038";
-$fa-question:    "\f128"; // "\f059";
\ No newline at end of file
+$fa-question:    "\f128"; // "\f059";
+$fa-checked:     "\f046";
+$fa-check:       "\f096";
\ No newline at end of file
diff --git a/kalamar.conf b/kalamar.conf
index 92c2c5b..22ce0dd 100644
--- a/kalamar.conf
+++ b/kalamar.conf
@@ -48,10 +48,13 @@
 	searchplaceholder => 'Finde ...',
 	go => 'Suche!',
 	in => 'in',
+	by => 'von',
 	with => 'mit',
 	glimpse => 'Stichprobe',
 	faq => 'Häufige Fragen',
 	tutorial => 'Einführung',
+	pubOn => 'veröffentlicht am',
+	matchCount => 'Treffer',
 	korap => {
 	  -short => 'KorAP',
 	  long => 'KorAP - Korpusanalyseplattform der nächsten Generation',
@@ -64,7 +67,10 @@
 	go => 'Go!',
 	searchplaceholder => 'Find ...',
 	in => 'in',
+	by => 'by',
 	with => 'with',
+	pubOn => 'published on',
+	matchCount => '<%= num($found, "match", "matches") %>',
 	glimpse => 'Sample',
 	faq => 'F.A.Q.',
 	tutorial => 'Tutorial',
diff --git a/lib/Kalamar.pm b/lib/Kalamar.pm
index abd4d5e..f465802 100644
--- a/lib/Kalamar.pm
+++ b/lib/Kalamar.pm
@@ -13,37 +13,42 @@
   my $pkg = b($self->home . '/package.json')->slurp;
   $Kalamar::VERSION = decode_json($pkg)->{version};
 
-  # Load documentation navigation
-  my $navi = b($self->home . '/templates/doc/_nav.json')->slurp;
-
   # Add additional plugin path
   push(@{$self->plugins->namespaces}, __PACKAGE__ . '::Plugin');
 
+  # Set secrets for signed cookies
+  $self->secrets([
+    b($self->home . '/kalamar.secret')->slurp->split("\n")
+  ]);
+
   # Load plugins
-  foreach (qw/Config
-	      Localize
-	      Notifications
-	      DocNavi
-	      KalamarTagHelpers/) {
+  foreach (
+    'Config',                 # Configuration framework
+    'Localize',               # Localization framework
+    'Notifications',          # Client notifications
+    'Search',                 # Abstract Search framework
+    'CHI',                    # Global caching mechanism
+    'TagHelpers::Pagination', # Pagination widget
+    'DocNavi',                # Navigation for documentation
+    'KalamarHelpers',         # Specific Helpers for Kalamar
+    'KalamarTagHelpers'       # Specific Taghelpers for Kalamar
+  ) {
     $self->plugin($_);
   };
 
-  $self->config(navi => decode_json($navi));
-
+  # Configure mail exception
   $self->plugin('MailException' => $self->config('MailException'));
 
+  # Configure documentation navigation
+  my $navi = b($self->home . '/templates/doc/_nav.json')->slurp;
+  $self->config(navi => decode_json($navi));
+
   # Establish routes
   my $r = $self->routes;
 
-  $r->get('/')->to(
-    cb => sub {
-      return shift->render(template => 'intro');
-    });
-
   # Base query page
   $r->get('/')->to('search#query')->name('index');
 
-
   # Documentation
   $r->get('/doc')->to('documentation#page', page => 'korap');
   $r->get('/doc/:page')->to('documentation#page', scope => undef);
@@ -63,10 +68,6 @@
 #    title => 'KorAP - Corpus Analysis Platform'
 #  );
 
-  # Set secret for signed cookies
-  $self->secrets([
-    b($self->home . '/kalamar.secret')->slurp->split("\n")
-  ]);
 
   $self->hook(
     before_dispatch => sub {
@@ -77,22 +78,11 @@
       };
     }) if $self->mode eq 'production';
 
-  $self->hook(before_dispatch => sub {
-      my $c = shift;
-      my $h = $c->res->headers;
-      $h->header( 'Access-Control-Allow-Origin' => '*' );
-      $h->header( 'Access-Control-Allow-Methods' => 'GET, PUT, POST, DELETE, OPTIONS' );
-      $h->header( 'Access-Control-Max-Age' => 3600 );
-      $h->header( 'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With' );
-    });
 
 
   # Load plugins
-  foreach (qw/CHI
-	      TagHelpers::Pagination
+  foreach (qw/
 	      Number::Commify
-	      Search
-	      KalamarHelpers
 	      /) {
     $self->plugin($_);
   };
diff --git a/lib/Kalamar/Controller/Search.pm b/lib/Kalamar/Controller/Search.pm
index 25954d4..4e18e28 100644
--- a/lib/Kalamar/Controller/Search.pm
+++ b/lib/Kalamar/Controller/Search.pm
@@ -1,8 +1,8 @@
 package Kalamar::Controller::Search;
 use Mojo::Base 'Mojolicious::Controller';
 
-# Add X-Forwarded-For to user agent call everywhere
 
+# Query the KorAP backends and render a template
 sub query {
   my $c = shift;
 
@@ -10,18 +10,8 @@
 
   # No query
   unless ($query) {
-    return $c->render(template => 'index');
-  }
-};
-
-
-1;
-
-
-__END__
-
-# Query the KorAP backends and render a template
-sub query {
+    return $c->render(template => 'intro');
+  };
 
   # Base parameters for remote access
   my %param = (
@@ -29,6 +19,7 @@
     query => $query,
   );
 
+  # May be not relevant
   my $inspect = (scalar $c->param('action') // '') eq 'inspect' ? 1 : 0;
 
   # Just check the serialization non-blocking
@@ -41,32 +32,52 @@
     return;
   };
 
+  # Choose the snippet based on the parameter
   my $template = scalar $c->param('snippet') ? 'snippet' : 'search';
 
   # Search non-blocking
   $c->delay(
     sub {
       my $delay = shift;
+
+      # Search with a callback (async)
       $c->search(
-	cutoff => scalar $c->param('cutoff'),
-	count => scalar $c->param('count'),
+	cutoff     => scalar $c->param('cutoff'),
+	count      => scalar $c->param('count'),
 	start_page => scalar $c->param('p'),
-	cb => $delay->begin,
+	cb         => $delay->begin,
 	%param
       ) if $query;
 
+      # Search resource (async)
       $c->search->resource(
 	type => 'collection',
 	$delay->begin
       );
     },
+
+    # Collected search
     sub {
+
+
+
+      # Render to the template
       return $c->render(template => $template);
     }
   );
 };
 
 
+1;
+
+
+__END__
+
+
+
+
+
+
 # Get informations about a match
 sub match_info {
   my $c = shift;
@@ -121,3 +132,14 @@
 
 
 __END__
+
+
+# Todo: Add X-Forwarded-For to user agent call everywhere
+  $self->hook(before_dispatch => sub {
+      my $c = shift;
+      my $h = $c->res->headers;
+      $h->header( 'Access-Control-Allow-Origin' => '*' );
+      $h->header( 'Access-Control-Allow-Methods' => 'GET, PUT, POST, DELETE, OPTIONS' );
+      $h->header( 'Access-Control-Max-Age' => 3600 );
+      $h->header( 'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With' );
+    });
diff --git a/lib/Kalamar/Plugin/KalamarHelpers.pm b/lib/Kalamar/Plugin/KalamarHelpers.pm
index 08ff41f..d514ceb 100644
--- a/lib/Kalamar/Plugin/KalamarHelpers.pm
+++ b/lib/Kalamar/Plugin/KalamarHelpers.pm
@@ -1,22 +1,29 @@
 package Kalamar::Plugin::KalamarHelpers;
 use Mojo::Base 'Mojolicious::Plugin';
 
+
+# Helpers for Kalamar
 sub register {
   my ($plugin, $mojo) = @_;
 
+  # Check for test port
   $mojo->helper(
     kalamar_test_port => sub {
       my $c = shift;
+
+      # Test port is defined in the stash
       if (defined $c->stash('kalamar.test_port')) {
 	return $c->stash('kalamar.test_port');
       };
 
+      # Check the port
       if ($c->req->url->to_abs->port == 6666 ||
 	    $c->app->mode =~ m/^development|test$/) {
 	$c->stash('kalamar.test_port' => 1);
 	return 1;
       };
 
+      # No test port
       $c->stash('kalamar.test_port' => 0);
       return 0;
     });
diff --git a/lib/Kalamar/Plugin/KalamarTagHelpers.pm b/lib/Kalamar/Plugin/KalamarTagHelpers.pm
index 7a51d7b..d039604 100644
--- a/lib/Kalamar/Plugin/KalamarTagHelpers.pm
+++ b/lib/Kalamar/Plugin/KalamarTagHelpers.pm
@@ -8,15 +8,21 @@
 sub register {
   my ($plugin, $mojo) = @_;
 
-
+  # Embed the korap architecture image
   $mojo->helper(
     korap_overview => sub {
       my $c = shift;
       my $scope = shift;
-      my $base = $c->stash('doc_base') ? '?' . $c->stash('doc_base') : '';
+
+      my $url = $c->url_with('/img/korap-overview.svg');
+
+      # If there is a different base - append this as a base
+      $url->query([base => $c->stash('doc_base') // '/']);
+
+      $url->fragment($scope);
 
       return $c->tag('object',
-	data => $c->url_for('/img/korap-overview.svg' . $base . '#' . $scope),
+	data => $url,
 	type => 'image/svg+xml',
 	alt  => $c->loc('korap_overview'),
 	id   => 'overview'
@@ -26,6 +32,78 @@
 
 
 
+  $mojo->helper(
+    doc_link_to => sub {
+      my $c = shift;
+      my $title = shift;
+      my $page = pop;
+      my $scope = shift;
+      return $c->link_to($title, $c->url_with('doc', scope => $scope, page => $page));
+    }
+  );
+
+  $mojo->helper(
+    doc_uc => sub {
+      return shift->tag('p', 'Under Construction!')
+    }
+  );
+
+
+  # Create helper for queries in the tutorial
+  $mojo->helper(
+    kalamar_tut_query => sub {
+      my ($c, $ql, $q, %param) = @_;
+
+      # Escape query for html embedding
+      $q = xml_escape $q;
+
+      # Return tag
+      b('<pre class="query tutorial" ' .
+	  qq!data-query="$q" data-query-cutoff="! .
+	    ($param{cutoff} ? 1 : 0) .
+	      '"' .
+		qq! data-query-language="$ql">! .
+		  '<code>' . $q . '</code>' .
+		    '</pre>'
+		);
+    }
+  );
+
+
+  # Create links in the tutorial that make sure the current position is preserved,
+  # in case the tutorial was opened embedded
+  $mojo->helper(
+    kalamar_tut_link_to => sub {
+      my $c = shift;
+      my $title = shift;
+      my $link = shift;
+      my $host = $c->req->headers->header('X-Forwarded-Host');
+      my $url = $c->url_for($link);
+
+      # Link is part of the embedded tutorial
+      if ($c->param('embedded')) {
+	$url->query({ embedded => 1 });
+	return $c->link_to(
+	  $title,
+	  $url,
+	  onclick => qq!setTutorialPage("$url")!
+	);
+      };
+
+      # Build link
+      return $c->link_to($title, $url);
+    }
+  );
+};
+
+1;
+
+
+__END__
+
+
+
+
   # Create helper for queries in the tutorial
   $mojo->helper(
     kalamar_tut_query => sub {
@@ -155,48 +233,3 @@
 		    '</code></pre>' . $msg);
     }
   );
-
-  $mojo->helper(
-    doc_link_to => sub {
-      my $c = shift;
-      my $title = shift;
-      my $page = pop;
-      my $scope = shift;
-      return $c->link_to($title, $c->url_with('doc', scope => $scope, page => $page));
-    }
-  );
-
-  $mojo->helper(
-    doc_uc => sub {
-      return shift->tag('p', 'Under Construction!')
-    }
-  );
-
-
-  # Create links in the tutorial that make sure the current position is preserved,
-  # in case the tutorial was opened embedded
-  $mojo->helper(
-    kalamar_tut_link_to => sub {
-      my $c = shift;
-      my $title = shift;
-      my $link = shift;
-      my $host = $c->req->headers->header('X-Forwarded-Host');
-      my $url = $c->url_for($link);
-
-      # Link is part of the embedded tutorial
-      if ($c->param('embedded')) {
-	$url->query({ embedded => 1 });
-	return $c->link_to(
-	  $title,
-	  $url,
-	  onclick => qq!setTutorialPage("$url")!
-	);
-      };
-
-      # Build link
-      return $c->link_to($title, $url);
-    }
-  );
-};
-
-1;
diff --git a/templates/doc/ql/poliqarp-plus.html.ep b/templates/doc/ql/poliqarp-plus.html.ep
index 7d0ede1..51fbd29 100644
--- a/templates/doc/ql/poliqarp-plus.html.ep
+++ b/templates/doc/ql/poliqarp-plus.html.ep
@@ -4,7 +4,7 @@
 
 <p>The following tutorial introduces all features provided by our version of the Poliqarp Query Language and some KorAP specific extensions.</p>
 
-<section id="tut-segments">
+<section id="segments">
   <h3>Simple Segments</h3>
 
   <p>The atomic elements of Poliqarp queries are segments. Most of the time segments represent words and can be simply queried:</p>
@@ -22,7 +22,7 @@
 
   <p>The query above will find all occurrences of <code>laufen</code> irrespective of the capitalization of letters, so <code>wir laufen</code> will be find as well as <code>das Laufen</code> and even <code>&quot;GEH LAUFEN!&quot;</code>.
 
-  <h4 id="tut-regexp">Regular Expressions</h4>
+  <h4 id="regexp">Regular Expressions</h4>
 
   <p>Segments can also be queried using <%= kalamar_tut_link_to 'regular expressions', '/tutorial/regular-expressions' %> - by surrounding the segment with double quotes.</p>
 
@@ -51,7 +51,7 @@
   %= kalamar_tut_query poliqarp => '"l(au|ie)fen"/xi', cutoff => 1
 </section>
 
-<section id="tut-complex">
+<section id="complex">
   <h3>Complex Segments</h3>
 
   <p>Complex segments are expressed in square brackets and contain additional information on the resource of the term under scrutiny by providing key/value pairs, separated by an equal-sign.</p>
@@ -109,7 +109,7 @@
   </blockquote>
 </section>
 
-<section id="tut-spans">
+<section id="spans">
   <h3>Span Segments</h3>
 
   <p>Not all segments are bound to words - some are bound to concepts spanning multiple words, for example noun phrases, sentences, or paragraphs.
@@ -120,7 +120,7 @@
     <p>Otherwise they can be treated in exactly the same way as simple or complex segments.</p>
 </section>
 
-<section id="tut-paradigmatic-operators">
+<section id="paradigmatic-operators">
   <h3>Paradigmatic Operators</h3>
 
   <p>A complex segment can have multiple properties a token has to fulfill. For example to search for all words with the surface form <code>laufe</code> (no matter if capitalized or not) that have the lemma <code>lauf</code> (and not, for example, <code>laufen</code>, which would indicate a verb or a gerund), you can search for:</p>
@@ -145,10 +145,10 @@
   %= kalamar_tut_query poliqarp => '[(base=laufen | base=gehen) & tt/pos=VVFIN]'
 </section>
 
-<section id="tut-syntagmatic-operators">
+<section id="syntagmatic-operators">
   <h3>Syntagmatic Operators</h3>
 
-  <h4 id="tut-syntagmatic-operators-sequence">Sequences</h4>
+  <h4 id="syntagmatic-operators-sequence">Sequences</h4>
 
   <p>Sequences can be used to search for segments in order. For example to search for the word &quot;alte&quot; preceded by &quot;der&quot; and followed by &quot;Mann&quot;, you can simple search for the sequence of simple expressions separated by whitespaces.</p>
 
@@ -184,7 +184,7 @@
 
   %= kalamar_tut_query poliqarp => 'der (junge | alte) Mann'
 
-  <h4 id="tut-syntagmatic-operators-repetitions">Repetition</h4>
+  <h4 id="syntagmatic-operators-repetitions">Repetition</h4>
 
   <p>Repetitions in Poliqarp are realized as in <%= kalamar_tut_link_to 'regular expressions', '/tutorial/regular-expressions' %>, by giving quantifieres in curly brackets.</p>
   <p>To search for a sequence of three occurrences of <code>der</code>, you can formulate your query in any of the following ways - they will have the same results:</p>
@@ -277,7 +277,7 @@
       
 </section>
 
-<section id="tut-class-operators">
+<section id="class-operators">
   <h3>Class Operators</h3>
 
   <p>Classes are used to group sub matches by surrounding curly brackets and a class number <code>{1:...}</code>. Classes can be used to refer to sub matches in a query, similar to captures in regular expressions. In Poliqarp+ classes have multiple purposes, with highlighting being the most intuitive one:</p>
diff --git a/templates/match.html.ep b/templates/match.html.ep
index 43f172d..8693511 100644
--- a/templates/match.html.ep
+++ b/templates/match.html.ep
@@ -1,38 +1,23 @@
-%# ID, title, corpusID, author, pubDate, textClass
 % my $match = stash('match') || {}; 
-<li data-corpus-id="<%= $match->{corpusID} %>" \
-data-doc-id="<%= $match->{docID} %>" \
-data-match-id="<%= $match->{ID} %>" \
-id="<%= $match->{corpusID} %>-<%= $match->{docID} %>-<%= $match->{ID} %>"\
-<% if (current_route eq 'match') { %> class="active"<% } =%>
->
-%#
-%# -- Match information (snippet, morph table, tree information etc.)
+% my $id = $match->{corpusID} . '-' . $match->{docID} . '-' . $match->{ID};
+<li data-corpus-id="<%= $match->{corpusID} %>"
+    data-doc-id="<%= $match->{docID} %>"
+    data-text-id="hmmm"
+    data-match-id="<%= $match->{ID} %>"
+    %# TODO: This needs to be retrieved per match 
+    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="<%= $id %>"\
+<% if (current_route eq 'match') { %> class="active"<% } =%>>
   <div>
+%# --- Snippet
     <div class="snippet<%= $match->{startMore} ? ' startMore' : '' %><%= $match->{endMore} ? ' endMore' : '' %>"><%== $match->{snippet} %></div>
-    <div class="tokenInfo"></div>
-%#    <div class="treeInfo"></div>
   </div>
-%#
 %# -- Reference string
-  <p>\
-% if ($match->{title}) {
-<strong><%= $match->{title} %></strong>\
-% };
-<%= $match->{author} ? ' by ' . $match->{author}  : '' %><% if ($match->{title} || $match->{author}) { %>;<% } =%>
- published on <%= date_format $match->{pubDate} %>\
- as <%= $match->{docID} %> (<%= $match->{corpusID} %>)\
+  <p class="ref">\
+<% if ($match->{title}) { %><strong><%= $match->{title} %></strong><% }; %>\
+<%= $match->{author} ? ' ' . loc('by') . ' ' . $match->{author}  : '' %>\
+<% if ($match->{title} || $match->{author}) { %>;<% } =%> \
+<%= loc('pubOn') %> <%= $match->{pubDate} %> \
+(<%= $id %>)\
 </p>
-%#
-%# -- Action buttons
-  <ul class="action right">
-% if (current_route ne 'match') {
-    <li class="close" title="Close"><a href="#"><i class="fa fa-toggle-up"></i></a></li>
-%#  <li class="open" title="Open in new tab"><%= link_to 'match', { corpus_id => $match->{corpusID}, doc_id => $match->{docID}, match_id => $match->{ID} }, target => '_blank', begin %><i class="fa fa-external-link-square"></i><% end %></li>
-    <li class="open" title="Open in new tab"><a href="#<%= $match->{corpusID} %>-<%= $match->{docID} %>-<%= $match->{ID} %>" target="_blank"><i class="fa fa-external-link-square"></i></a></li>
-% };
-    <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
-%#    <li onclick="showTree(this, 'xip', 'c')" title="Tree Visualizations"><i class="fa fa-sitemap"></i></li>
-%#    <li title="Remember"><i class="fa fa-star-o"></i></li>
-  </ul>
 </li>
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 02e660e..2bd2c12 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -1,34 +1,41 @@
 <header>
-  <a href="/" class="logo" title="<%= title %>"><h1><span><%= title %></span></h1></a>
+  <a href="/"
+     class="logo"
+     title="<%= title %>"><h1><span><%= title %></span></h1></a>
+<!--
   <div class="button top">
-    <a href="#" class="login" title="<%= loc 'login' %>"><span><%= loc 'login' %></span></a>
+    <a href="#"
+       class="login"
+       title="<%= loc 'login' %>"><span><%= loc 'login' %></span></a>
   </div>
-  <form autocomplete="off" action="/kalamar">
+-->
+  <form autocomplete="off" action="<%= url_for 'index' %>">
     <div id="searchbar">
-      <input placeholder="<%= loc 'searchplaceholder' %>" name="q" id="q-field" autofocus="autofocus" type="search" />
+      %= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => loc('searchplaceholder')
       <button type="submit" title="<%= loc 'go' %>"><span><%= loc 'go' %></span></button>
     </div>
+    <!-- Search in the following virtual collection -->
+    <!--
     <div id="vc-view"></div>
     <%= loc 'in' %> <input type="hidden" id="vc-name" name="vc-name" value="Wikipedia" />
     <input type="text" name="vc" id="vc" value="corpusID = Wikipedia" />
-    <%= loc 'with' %> <span class="select">
-      <select name="ql" id="ql-field">
-	<option value="poliqarp">Poliqarp</option>
-	<option value="cosmas2">Cosmas II</option>
-	<option value="annis">Annis</option>
-	<option value="cql">CQL v1.2</option>
-      </select>
+    -->
+    <%= loc 'with' %>
+    <span class="select">
+      %= select_field 'ql', [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2'], ['Annis' => 'annis'], ['CQL v1.2' => 'cql']], id => 'ql-field'
     </span>
     <div class="button right">
       % param(cutoff => 1) unless param 'q';
       %= check_box cutoff => 1, id => 'q-cutoff-field', class => 'checkbox'
       <label for="q-cutoff-field"><span></span><%= loc('glimpse') %></label>
+<!--
       % unless (current_route 'tutorial') {
       <a href="/doc/faq"
 	 title="<%= loc 'faq' %>"
 	 class="question"
 	 id="view-faq"><span><%= loc 'faq' %></span></a>
       % };
+-->
       <a href="/doc"
 	 title="<%= loc 'tutorial' %>"
 	 class="tutorial"
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 242a8d9..fbe3895 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -1,55 +1,27 @@
-% if (param 'q') {
-% content 'main' => begin
-%     unless (param 'snippet') {
-<div style="clear: both">
-%       my $url = url_with->query(['p' => '{page}']);
-%       my $pages = search->total_pages;
-  <div id="pagination"><%= pagination(search->start_page, $pages, $url) =%></div>
-  <p class="found">Found
+% layout 'main';
+
+<div class="resultinfo">
+%#  <div id="pagination"><%= pagination(search->start_page, $pages, $url) =%></div>
+
 % my $found = search->total_results;
-% if ($found == -1) {
-%   $found = 'unknown amount of';
-% } elsif (search->time_exceeded) {
-%   $found = 'more than ' . $found;
-% }; 
-    <span id="total-results"><%= $found %> matches</span>
-    <% if (search->benchmark) { %> in <%= search->benchmark %><% } %>
-  </p>
+% if ($found != -1) {
+%   my $found_text = $found;
+%   if (search->time_exceeded) {
+%     $found_text = '> ' . $found;
+%   };
+  <p class="found"><span id="total-results"><%= $found_text %></span> <%= loc('matchCount', found => $found) %></p>
+% } else {
+  <p></p>
+% };
+%#   <% if (search->benchmark) { %> in <%= search->benchmark %><% } %>
 </div>
-%= include 'query'
-%= include 'api-communication'
-%     };
 
 % if (search->total_results != 0 && search->results->size) {
 <div id="search">
-<ol class="align-left">
-%=    search_results begin
-%=      include 'match', match => $_
-%     end
-</ol>
-</div>
-% };
-% end
-
-% content 'javascript' => begin
-%=   javascript begin
-
-var openLi = function (e) {
-  this.classList.add("active");
-  e.stopPropagation();
-};
-
-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);
-};
-
+  <ol class="align-left">
+%=  search_results begin
+%=    include 'match', match => $_
 %   end
-% end
-% };
+  </ol>
+</div>
+% }