diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index 56504c00f453c9fdb0cd5a0471d2f6a19ca04ee7..57ce178264e0408285827c34b9d7e50a050ff3ba 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -64,7 +64,19 @@
   <div class="card">
     <div class="card-content">
       <span class="card-title">Query Results</span>
-      <div id="query-results"></div>
+      <div>
+        <table class="highlight">
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Left context</th>
+              <th>Match</th>
+              <th>Right Context</th>
+            </tr>
+          </thead>
+          <tbody id="query-results"></tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -115,56 +127,54 @@
     M.toast({html: 'Query has been sent!'});
   });
 
-  socket.on('corpus_analysis', function(results) {
-    if (results === null) {
+  socket.on('corpus_analysis', function(matches) {
+    if (matches === null) {
       M.toast({html: 'Query has no results!'});
     } else {
-      console.log(results);
-      html_txt = '<table class="highlight"> <thead><tr><th>Title</th><th>Left context</th><th>Match</th><th>Right Context</th></tr></thead>';
-      for (let [key, hit] of Object.entries(results)) {
-        resultInfo(hit, "word");
-        var left_context = hit['left_context_cpos']
-        var match = hit['match_cpos']
-        var right_context = hit['right_context_cpos']
-        var l_text = getResultInfos(left_context, 'word')
-        var m_text = getResultInfos(match, 'word')
-        var r_text = getResultInfos(right_context, 'word')
-        var match_source = getResultInfos(match, 'text_title', 1)
-        html_txt += '<tr> <td>' + match_source + '</td><td>' + l_text + '</td><td>' + m_text + '</td><td>' + r_text + '</td></tr>';
-        l_text = '';
-        m_text = '';
+      console.log(matches);
+      let htmlString = "";
+      for (let match of Object.values(matches)) {
+        niceMatch = matchInfo(match);
+        htmlString += `<tr><td>${niceMatch["text_title"]}</td><td>${niceMatch["left"]}</td><td>${niceMatch["match"]}</td><td>${niceMatch["right"]}</td></tr>`;
       }
-      html_txt += '</table>';
-      queryResultsElement.innerHTML = html_txt;
+      queryResultsElement.innerHTML = htmlString;
     }
   });
 
-  function resultInfo(result) {
-    left = "";
-
-    for (let entry of result['left_context_cpos']) {
-      let foo = Object.values(entry)[0]
-      left += foo["simple_pos"] === "PUNCT" ? foo["word"] : " " + foo["word"];
+  function matchInfo(match) {
+    var niceMatch = {"left": "", "match": "", "right": ""};
+    var tmp = Object.values(Object.values(match["match_cpos"])[0])[0];
+    niceMatch["text_author"] = tmp["text_author"][1];
+    niceMatch["text_title"] = tmp["text_title"][1];
+    niceMatch["publishing_year"] = tmp["text_publishing_year"][1];
+    for (let token of Object.values(match['left_context_cpos'])) {
+      tmp = Object.values(token)[0];
+      if (tmp["simple_pos"] != "PUNCT") {niceMatch["left"] += " ";}
+      niceMatch["left"] += '<span class="token">'
+                            + '<span class="word">' + tmp["word"] + '</span>'
+                            + '<span class="pos">' + tmp["pos"] + '</span>'
+                            + '<span class="lemma">' + tmp["lemma"] + '</span>'
+                          + '</span>';
     }
-
-    console.log("Diese andere Info:");
-    console.log(left);
-  }
-
-  function getResultInfos(matchObject, info_key, slice) {
-    var infos = [];
-    for (let token of Object.values(matchObject)) {
-        for (let key in token) {
-          infos.push(token[key][info_key]);
-        }
+    for (let token of Object.values(match['match_cpos'])) {
+      tmp = Object.values(token)[0];
+      if (tmp["simple_pos"] != "PUNCT") {niceMatch["match"] += " ";}
+      niceMatch["match"] += '<span class="token" data-cpos="">'
+                            + '<span class="word">' + tmp["word"] + '</span>'
+                            + '<span class="pos">' + tmp["pos"] + '</span>'
+                            + '<span class="lemma">' + tmp["lemma"] + '</span>'
+                          + '</span>';
     }
-    if (slice) {
-      console.log(infos);
-      var infos = infos[slice];
-      return infos;
-    } else {
-      return infos;
+    for (let token of Object.values(match['right_context_cpos'])) {
+      tmp = Object.values(token)[0];
+      if (tmp["simple_pos"] != "PUNCT") {niceMatch["right"] += " ";}
+      niceMatch["right"] += '<span class="token">'
+                            + '<span class="word">' + tmp["word"] + '</span>'
+                            + '<span class="pos">' + tmp["pos"] + '</span>'
+                            + '<span class="lemma">' + tmp["lemma"] + '</span>'
+                          + '</span>';
     }
+    return niceMatch
   }
 </script>
 {% endblock %}