diff --git a/dev/demo/query-creator.html b/dev/demo/query-creator.html
index 35a3b74..3649abd 100644
--- a/dev/demo/query-creator.html
+++ b/dev/demo/query-creator.html
@@ -33,12 +33,20 @@
               <td>ART</td>
               <td>ADJA</td>
               <td>ADJA<br>ADJD</td>
-              <td>NN</td>
+              <td class="matchkeyvalues">
+                <div>case:nom</div>
+                <div>gender:masc<br/>gender:fem</div>
+                <div>number:sg</div>
+              </td>
             </tr>
             <tr tabindex="0">
               <th>opennlp</th>
               <th>p</th>
-              <td>ART</td>
+              <td class="matchkeyvalues">
+                <div>case:nom</div>
+                <div>gender:masc</div>
+                <div>number:sg</div>
+              </td>
               <td>ADJA</td>
               <td></td>
               <td>NN</td>
diff --git a/dev/js/src/match/querycreator.js b/dev/js/src/match/querycreator.js
index fbabed0..179b10c 100644
--- a/dev/js/src/match/querycreator.js
+++ b/dev/js/src/match/querycreator.js
@@ -6,6 +6,10 @@
 define(['util'], function () {
   "use strict";
 
+  /*
+   * TODO:
+   *   Cache foundry and layer information per row.
+   */
   var loc = KorAP.Locale;
   loc.NEW_QUERY = loc.NEW_QUERY || 'New Query';
 
@@ -104,6 +108,10 @@
           if (target.innerText == '')
             return;
 
+          if (target.classList.contains('matchkeyvalues'))
+            return;
+
+
           // Check foundry and layer
           var head    = target.parentNode.getElementsByTagName('th');
           var foundry = head[0].innerText;
@@ -130,6 +138,42 @@
           };
         }
 
+        // The annotation is part of a key-value-pair
+        else if (target.tagName == 'SPAN' || target.tagName == 'DIV') {
+          if (target.innerText == '')
+            return;
+
+          if (target.tagName == 'SPAN') {
+            target = target.parentNode;
+          };
+
+          // Check foundry and layer
+          var parentCell = target.parentNode;
+          var head    = parentCell.parentNode.getElementsByTagName('th');
+          var foundry = head[0].innerText;
+          var layer   = head[1].innerText;
+
+          // Check index position of parent cell
+          var i = -2;
+          var sib = parentCell;
+          while((sib = sib.previousSibling) != null) {
+            if (sib.nodeType === 1)
+              i++;
+          };
+
+          var prefix = foundry + '/' + layer + '=';
+          var annotation = '';
+
+          // Get annotation value from cell
+          var annotation = _getAnnotation(prefix, target);
+
+          if (annotation !== '') {
+
+            // Add term
+            this.toggleInToken(target, i, annotation);
+          }
+        }
+
         // Get orth values
         else if (target.tagName == 'TH') {
 
@@ -150,6 +194,7 @@
           }
 
           // The head refers to the complete row
+          // Mark the complete row!
           else {
 
             // Check foundry and layer
@@ -165,15 +210,37 @@
               if (sib.nodeType !== 1 || sib.tagName === 'TH')
                 continue;
 
-              // Get annotation value from cell
-              var annotation = _getAnnotation(prefix, sib);
+              // Is a key-value-cell
+              if (sib.classList.contains('matchkeyvalues')) {
+                var divs = sib.getElementsByTagName('div');
+                for (var j = 0; j < divs.length; j++) {
+                  var keyvaluepair = divs[j];
 
-              if (annotation !== '') {
+                  // Get annotation value from cell
+                  var annotation = _getAnnotation(prefix, keyvaluepair);
 
-                // Add annotation to string
-                this.addToToken(i, annotation);
-                sib.className = 'chosen';
-              };
+                  if (annotation !== '') {
+
+                    // Add annotation to string
+                    this.addToToken(i, annotation);
+                    keyvaluepair.className = 'chosen';
+                  };
+                };
+              }
+
+              // Normal cell
+              else {
+
+                // Get annotation value from cell
+                var annotation = _getAnnotation(prefix, sib);
+
+                if (annotation !== '') {
+
+                  // Add annotation to string
+                  this.addToToken(i, annotation);
+                  sib.className = 'chosen';
+                };
+              }
 
               i++;
             };
@@ -207,6 +274,7 @@
       this.show();
     },
 
+
     // Remove term from token
     removeFromToken : function (index, term) {
       var token = this._query[index];
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index f5651f3..dab1d83 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -141,8 +141,9 @@
   }
   tr {
     outline: none;
-    > td.chosen,
-    > th.chosen {
+    td.chosen,
+    th.chosen,
+    div.chosen {
       background-color: $light-green !important;
       color: $nearly-white;
       // transition: color 0.1s, background-color 0.15s ease-out;
@@ -212,9 +213,36 @@
     white-space: nowrap;
     vertical-align: top;
     text-align: center;
+    div {
+      background-color: $light-orange; // $nearly-white;
+    }
   }
   tr:nth-child(even) > td {
     background-color: $light-orange;
+    div:nth-child(even) {
+      background-color: $middle-orange;
+    }
+  }
+
+  tr:nth-child(odd) > td > div:nth-child(odd) {
+    background-color: $middle-orange;
+  }
+
+
+  // table for key-value pairs
+  td.matchkeyvalues {
+    padding: 0;
+    > div {
+      @include cell-info;
+      > span {
+        color: $darkest-orange;
+        text-align: right;
+        &::after {
+          content: ":"
+        }
+        padding-right: .5em;
+      }
+    }
   }
 }