diff --git a/dev/demo/kwic.html b/dev/demo/kwic.html
index b7f87d2..a120055 100644
--- a/dev/demo/kwic.html
+++ b/dev/demo/kwic.html
@@ -2,31 +2,66 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="css/kwic.css" />
+    <link rel="stylesheet" href="../css/kwic.css" />
   </head>
   <body>
-    <ol>
-      <li>
-        <div class="left-col">GOE/AAA/444</div>
-        <div class="main-col">
-          <div>
-            <div class="snippet">
-              <div class="flag"></div>
-              <span class="first">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 test problem.</span><mark>Hey</mark><span class="second">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 test problem.</span>
+    <div id="search">
+      <ol>
+        <li class="match">
+          <div class="meta">GOE/AAA/444</div>
+          <div class="meta">Goethe</div>
+          <div class="match-main">
+            <div class="match-wrap">
+              <div class="snippet">
+                <div class="flag"></div>
+                <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 test problem.</span><span class="match">Hey</span><span class="context-right">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 test problem.</span>
+              </div>
+              <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
             </div>
           </div>
-        </div>
-      </li>
-      <li>
-        <div class="left-col">III/AAA/111</div>
-        <div class="main-col">
-          <div>
-            <div class="snippet">
-              <span class="first">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 test problem.</span><mark>Hey</mark><span class="second">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 test problem.</span>
+        </li>
+        <li class="match active">
+          <div class="meta">III/AAA/111</div>
+          <div class="meta">Schiller</div>
+          <div class="match-main">
+            <div class="match-wrap">
+              <div class="snippet">
+                <div class="flag"></div>
+                <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 test problem.</span><span class="match"><mark>Hey</mark></span><span class="context-right">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 test problem.</span>
+              </div>
+              <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
             </div>
           </div>
-        </div>
-      </li>
-    </ol>
+        </li>
+        <li class="match">
+          <div class="meta">III/AAA/111</div>
+          <div class="meta">Schiller</div>
+          <div class="match-main">
+            <div class="match-wrap">
+              <div class="snippet">
+                <span class="context-left">Der</span><mark>alte</mark><span class="context-right">Baum</span>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ol>
+
+      <ol class="align-right">
+        <li class="match">
+          <div class="meta">GOE/AAA/444</div>
+          <div class="meta">Goethe</div>
+          <div class="match-main">
+            <div class="match-wrap">
+              <div class="snippet">
+                <div class="flag"></div>
+                <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 test problem.</span><span class="match">Hey</span><span class="context-right">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 test problem.</span>
+              </div>
+              <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+            </div>
+          </div>
+        </li>
+      </ol>
+
+    </div>
   </body>
 </html>