diff --git a/dev/demo/all.html b/dev/demo/all.html
index 0019488..ffbad93 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -121,7 +121,7 @@
 	      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="WPD-FFF.01460-p119-120"
 	      tabindex="6">
-	    <div class="meta">Huhu</div>
+	    <div class="meta">WPD/III/78432</div>
       <div class="match-main">
         <div class="match-wrap">
 	        <div class="snippet startMore endMore"><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 </span><span class="match">test</span><span class="context-right"> problem.</span></div>
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 1924f2b..ab72778 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -52,7 +52,7 @@
      */
     toggle : function () {
 
-      var elem = this._match.element().getElementsByClassName('match-wrap')[0];
+      var elem = this._match.element();
 
       if (this.opened == true) {        
 	      elem.removeChild(
diff --git a/dev/scss/main/kwic-new.scss b/dev/scss/main/kwic-new.scss
index 670897a..de6bcf3 100644
--- a/dev/scss/main/kwic-new.scss
+++ b/dev/scss/main/kwic-new.scss
@@ -2,6 +2,7 @@
 @import "../util";
 
 $border-size: 2px;
+$font-size: 10pt;
 
 #search {
   position: relative;
@@ -20,7 +21,7 @@
   margin: 0;
   padding: 0;
   border: 1px solid $kwic-border;
-  font-size: 10pt;
+  font-size: $font-size;
 
   > li {
     display: table-row;
@@ -33,15 +34,22 @@
       overflow-y: visible;
       white-space: nowrap;
       background-color: $light-green;
+      // border-top: 1px solid lighten($light-green, 10%);
+      border: {
+        color: $dark-green;
+        style: solid;
+        width: 1px 0;
+      }
       color: $nearly-white;
       font-size: 80%;
       padding: 0 5pt;
     }
-/*
     &:first-of-type div.meta {
-      background-color: blue;
+      border-top-width: 0;
     }
-*/
+    &:last-of-type div.meta {
+      border-bottom-width: 0;
+    }
   }
 }
 
@@ -56,6 +64,7 @@
 #search {
   div.meta, div.match-main {
     position: relative;
+	  cursor: pointer;
   }
   /*
 	    &:not(.active):not(:target) {
@@ -71,7 +80,6 @@
 	    overflow-x: hidden;
 	    overflow-y: visible;
 	    white-space: normal;
-	    cursor: pointer;
     }
   }
 }
@@ -85,7 +93,9 @@
 	text-overflow: ellipsis;
 	text-indent: 0;
 	text-shadow: $light-shadow;
+  font-size: 0;
   > span, mark {
+    font-size: $font-size;
 	  padding: 5pt 0 6pt 0;
     white-space: no-wrap !important;
     > span {
@@ -94,6 +104,8 @@
   }
   > mark, > span.match {
     font-weight: bold;
+    color: $black;
+    text-shadow: none;
     padding-left: 4pt;
     padding-right: 2pt;
   }
@@ -216,7 +228,7 @@
 	      left: 0; // 5pt margin-top
 	    }
 	    > span {
-        color: black;
+        // color: black;
         line-height: 1.4em;
         width: auto;
         &.context-left {
@@ -250,7 +262,7 @@
   }
   p.ref {
     display: block;
-	  color: white;
+	  color: $nearly-white;
 	  padding: 3pt 10pt 3pt 3pt;
 	  padding-right: $right-match-distance;
 	  margin: 0pt;
@@ -343,7 +355,7 @@
   display: none;
   //  background-color: $dark-orange;
   font-size: 12pt;
-  color: white;
+  color: $nearly-white;
   text: {
     shadow: none;
     indent: 0;
@@ -358,6 +370,7 @@
   }
   &.right {
     position: absolute;
+    z-index: 4;
     width: $right-match-distance;
     float: right;
     text-align: center;
@@ -367,7 +380,7 @@
     top: 0;
     li {
       cursor: pointer;
-      color: white;
+      color: $nearly-white;
       text-decoration: none;
 
       > span {
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 340f12b..f712ae0 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -200,7 +200,6 @@
       // margin-right: -1 * $right-match-distance;
       width: $right-match-distance;
       li {
-        background-color: green;
         cursor: pointer;
         color: $nearly-white;
         text-decoration: none;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index ed737f1..834484b 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -17,6 +17,8 @@
 $ids-pink-1:   rgb(193,   0,  43); // Lexik
 $ids-pink-2:   rgb(250, 243, 222); // Lexik
 
+$black: #333;
+
 /**
  * Orange Colors
  */
diff --git a/templates/match.html.ep b/templates/match.html.ep
index 6e24489..ce89c3d 100644
--- a/templates/match.html.ep
+++ b/templates/match.html.ep
@@ -12,10 +12,11 @@
     data-info="<%== b(encode_json(\%match_data))->decode->xml_escape %>"
     id="<%= $id %>"\
 <% if (current_route eq 'match') { %> class="active"<% } =%>>
-  <div>
-    <div class="flag"></div>
+  <div class="match-main">
+    <div class="match-wrap">
 %# --- Snippet
-    <div class="snippet<%= $match->{startMore} ? ' startMore' : '' %><%= $match->{endMore} ? ' endMore' : '' %>"><%== $match->{snippet} %></div>
+      <div class="snippet<%= $match->{startMore} ? ' startMore' : '' %><%= $match->{endMore} ? ' endMore' : '' %>"><%== $match->{snippet} %></div>
+    </div>
   </div>
 %# -- Reference string
   <p class="ref">\