diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
new file mode 100644
index 0000000..542ef30
--- /dev/null
+++ b/templates/partial/header.html.ep
@@ -0,0 +1,14 @@
+<head>
+  <title><%= title %></title>
+%#= asset 'korap.css'
+%= stylesheet '/style.css'
+%= stylesheet '/hint.css'
+%= stylesheet '/table.css'
+%= stylesheet '/kwic-4.0.css'
+%= stylesheet '/fontawesome/font-awesome.min.css'
+%= stylesheet '/responsive.css', media => '(orientation: portrait) and (max-device-width: 800px)'
+%= javascript '/jquery-2.0.0.min.js'
+%= javascript '/translateTable.js'
+%= javascript '/hint.js'
+  <meta charset="utf-8" />
+</head>
diff --git a/templates/partial/javascript.html.ep b/templates/partial/javascript.html.ep
new file mode 100644
index 0000000..3c44167
--- /dev/null
+++ b/templates/partial/javascript.html.ep
@@ -0,0 +1,88 @@
+%= javascript begin
+
+new Hint({
+  "ref" : "q-field",
+  "qlRef" : "ql-field",
+  "hintSize" : 10,
+  "hints" : {
+    "-foundries" : {
+      "corenlp" : ["corenlp/", "CoreNLP"],
+      "cnx" : ["cnx/", "Connexor"],
+      "opennlp" : ["opennlp/", "OpenNLP"],
+      "xip" : ["xip/", "Xerox"],
+      "tt"  : ["tt/", "TreeTagger"],
+      "mate" : ["mate/", "Mate"]
+    },
+    "corenlp" : {
+      "ne_dewac_175m_600" : ["ne_dewac_175m_600=", "Named Entity"],
+      "ne_hgc_175m_600" : ["ne_hgc_175m_600=", "Named Entity"]
+    },
+    "corenlp/ne_dewac_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
+    "corenlp/ne_hgc_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
+    "cnx" : {
+      "c" : ["c=", "Constituency"],
+      "l" : ["l=", "Lemma"],
+      "m" : ["m=", "Morpho Syntax"],
+      "p" : ["p=", "Part of Speech"],
+      "syn" : ["syn=", "Syntax"]
+    },
+    "cnx/c" : ["np"],
+    "cnx/m" : ["Abbr","CMP","IMP","IND","INF","ORD","PAST","PCP","PERF","PL","PRES","PROG","Prop","SUB","SUP"],
+    "cnx/p" : ["A","ADV","CC","CS","DET","INTERJ","N","NUM","PREP","PRON","V"],
+    "cnx/syn" : ["@ADVL","@AUX","@CC","@MAIN","@NH","@POSTMOD","@PREMARK","@PREMOD"],
+    "opennlp" : {
+      "p" : ["p=", "Part of Speech"]
+    },
+    "opennlp/p" : ["$(","$,","$.","ADJA","ADJD","ADV","APPR","APPRART","ART","CARD","FM","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
+    "xip" : {
+      "c" : ["c=", "Constituency"],
+      "d" : ["d=", "Dependency"],
+      "l" : ["l=", "Lemma"],
+      "p" : ["p=", "Part of Speech"]
+    },
+    "xip/c" : ["ADJ","ADV","AP","CONJ","DET","INFC","INS","ITJ","MC","NEGAT","NOUN","NP","NPA","NUM","POSTP","PP","PREP","PRON","PTCL","PUNCT","SC","SYMBOL","TOP","TRUNC","VERB"],
+    "xip/d" : ["ADJMOD","AUXIL","CONNECT","COORD","DATE","DETERM","EXPL","LOC","MODAL","NEGAT","NMOD","NMOD2","NUMMOD","OBJ","ORG","PERSON","PLINK","PRED","REFLEX","SUBJ","THEMA","TIME","TRUNC","VMAIN","VMOD","VPREF"],
+    "xip/p" : ["ADJ","ADV","CONJ","DET","ITJ","NEGAT","NOUN","NUM","POSTP","PREP","PRON","PTCL","PUNCT","SYMBOL","TRUNC","VERB"],
+    "tt" : {
+      "l" : ["l=", "Lemma"],
+      "p" : ["p=", "Part of Speech"]
+    },
+    "tt/p" : ["$.","ADJA","ADJD","ADV","APPO","APPR","APPRART","APZR","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VMINF","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
+    "mate" : {
+      "d" : ["d=", "Dependency"],
+      "l" : ["l=", "Lemma"],
+      "m" : ["m=", "Morpho Syntax"],
+      "p" : ["p=", "Part of Speech"]
+    },
+    "mate/d" : ["--","AG","AMS","APP","CC","CD","CJ","CM","CP","CVC","DA","DM","EP","JU","MNR","MO","NG","NK","NMC","OA","OC","OG","OP","PAR","PD","PG","PH","PM","PNC","RC","RE","RS","SB","SBP","SVP","UC"],
+    "mate/m" : ["<no-type>","case:*","case:acc","case:dat","case:gen","case:nom","degree:comp","degree:pos","degree:sup","gender:*","gender:fem","gender:masc","gender:neut","mood:imp","mood:ind","mood:subj","number:*","number:pl","number:sg","person:1","person:2","person:3","tense:past","tense:pres"],
+    "mate/p" : ["$(","$,","$.","<root-POS>","ADJA","ADJD","ADV","APPO","APPR","APPRART","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PPOSS","PRELAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"]
+  }}
+);
+
+
+function openTutorial (o) {
+  var tut = $("#tutorial");
+  tut.addClass("active");
+  var iframe = tut.children("iframe");
+  var src = iframe.attr("data-src");
+  iframe.attr("src", src);
+};
+
+function closeTutorial (o) {
+  $("#tutorial").removeClass("active");
+};
+
+function useQuery (o) {
+  var q = o.getAttribute("data-query");
+  var ql = o.getAttribute("data-query-language");
+  $("#ql-field").val(ql);
+  $("#q-field").val(q);
+  closeTutorial();
+};
+
+$("code.query.serial, #sidebar").on("click", function () {
+  $(this).toggleClass('active');
+});
+
+% end