diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index db70dc1..81bc697 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -11,9 +11,9 @@
  */
 define([
   'match/info',      // rename to anno
-  'match/reference', // rename to meta
+  // 'match/reference', // rename to meta
   'util'
-], function (infoClass, refClass) {
+], function (infoClass) { //, refClass) {
 
   // Localization values
   var loc   = KorAP.Locale;
@@ -209,7 +209,7 @@
         meta.addEventListener(
           'click', function (e) {
             e.halt();
-            that.showMeta(refLine);
+            that.info().addMeta();
           }
         );
       };
@@ -223,7 +223,7 @@
       // Add information, unless it already exists
       info.addEventListener('click', function (e) {
         e.halt();
-        that.info().toggle();
+        that.info().addTable();
       });
 
       ul.appendChild(close);
@@ -233,23 +233,6 @@
     },
 
     
-    /**
-     * Return a list of meta data.
-     */
-    showMeta : function (refLine) {
-      var metaInfo = this._element.getAttribute('data-info');
-
-      // refLine.parentNode
-      
-      if (metaInfo)
-        metaInfo = JSON.parse(metaInfo);
-
-      if (metaInfo) {
-        var metaElem = refClass.create(this).element(metaInfo);
-        this.element().appendChild(metaElem);
-      };
-    },
-
     // Todo: Test toggle
     toggle : function () {
       if (this._element.classList.contains('active'))
@@ -289,6 +272,17 @@
       if (this._info._element !== undefined)
         return this._info;
 
+      /*
+        this.element().appendChild(
+        this._info.element()
+      );
+      */
+      var refLine = this._element.querySelector("p.ref");
+      this._element.insertBefore(
+        this._info.element(),
+        refLine
+      );
+      
       return this._info;
     },
 
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 703e133..a6ccbec 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -5,6 +5,7 @@
   'match/infolayer',
   'match/table',
   'match/tree',
+  'match/reference', // rename to meta
   'match/relations',
   'match/treemenu',
   'match/querycreator',
@@ -12,6 +13,7 @@
 ], function (infoLayerClass,
 	           matchTableClass,
 	           matchTreeClass,
+	           matchRefClass,
              matchRelClass,
 	           matchTreeMenuClass,
              matchQueryCreator) {
@@ -54,6 +56,7 @@
      * Open the information view,
      * if closed, otherwise close.
      */
+    /*
     toggle : function () {
 
       var elem = this._match.element();
@@ -74,6 +77,7 @@
       
       return this.opened;
     },
+    */
 
 
     /**
@@ -134,6 +138,11 @@
       return null;
       */
     },
+
+
+    getMeta : function (metaInfo, cb) {
+      
+    },
     
 
     /**
@@ -271,18 +280,33 @@
           cb(treeObj);
       });
     },
-    
-    /**
-     * Create match information view.
-     */
-    element : function () {
-      
-      if (this._element !== undefined)
-        return this._element;
-      
-      // Create info table
-      var info = document.createElement('div');
-      info.classList.add('matchinfo');
+
+
+    addMeta : function () {
+      var matchmeta = document.createElement('div');
+      // matchRefClass.create();
+
+      // TODO: This is part of the getMeta!
+      var metaInfo = this._match.element().getAttribute('data-info');
+
+      if (metaInfo)
+        metaInfo = JSON.parse(metaInfo);
+
+      // There is metainfo
+      if (metaInfo) {
+
+        // Add metainfo to matchview
+        var metaElem = matchRefClass.create(this._match).element(metaInfo);
+        this.element().appendChild(metaElem);
+
+        console.log(this.element());
+      };
+    },
+
+    // Add table
+    addTable : function () {
+
+      var info = this.element();
 
       // Append default table
       var matchtable = document.createElement('div');
@@ -301,6 +325,13 @@
         this._matchCreator = matchQueryCreator.create(info);
       });
 
+      
+      info.appendChild(this.addTreeMenu());
+    },
+
+
+    addTreeMenu : function () {
+
       // Join spans and relations
       var treeLayers = []
       var spans = this._match.getSpans();
@@ -348,7 +379,7 @@
 
       // Create tree menu
       var treemenu = this.treeMenu(menuList);
-      var span = info.appendChild(document.createElement('p'));
+      var span = document.createElement('p');
       span.classList.add('addtree');
       span.appendChild(document.createTextNode(loc.ADDTREE));
 
@@ -359,10 +390,25 @@
         treemenu.show();
         treemenu.focus();
       });
+
+      return span;
+    },
+
+    /**
+     * Create match information view.
+     */
+    element : function () {
+      
+      if (this._element !== undefined)
+        return this._element;
+      
+      // Create info table
+      var info = document.createElement('div');
+      info.classList.add('matchinfo');
       
       this._element = info;
 
-      return info;
+      return this._element;
     },
 
     
diff --git a/dev/js/src/match/reference.js b/dev/js/src/match/reference.js
index 9d59af3..9462874 100644
--- a/dev/js/src/match/reference.js
+++ b/dev/js/src/match/reference.js
@@ -22,7 +22,12 @@
   biblEditionStatement
   fileEditionStatement
 */
-define(function () {
+define(['util'], function () {
+
+  // Localization values
+  var loc   = KorAP.Locale;
+  loc.METADATA   = loc.METADATA   || 'Metadata';
+
   return {
 
     /**
@@ -55,9 +60,23 @@
       if (this._element !== undefined)
         return this._element;
       
-      var metaTable = document.createElement('dl');
+      var metaTable = document.createElement('div');
       metaTable.classList.add('metatable');
 
+      var header = metaTable.appendChild(
+        document.createElement('h6')
+      );
+
+      header.appendChild(
+        document.createElement('div')
+      ).appendChild(
+        document.createTextNode(loc.METADATA)
+      );
+
+      var metaDL = metaTable.appendChild(
+        document.createElement('dl')
+      );
+
       this._element = metaTable;
 
       // TODO: Meta fields should be separated
@@ -85,7 +104,7 @@
             document.createTextNode(metaInfo[k])
           );
 
-          metaTable.appendChild(metaL);
+          metaDL.appendChild(metaL);
         };
       };
 
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index e278d2d..f561b93 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -208,7 +208,7 @@
     cursor: default;
   }
   span {
-    display: inline !important;
+    display: inline; // !important;
   }
   ul.action {
     display: block;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 5d699ca..0062131 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -21,7 +21,7 @@
  * first column has to be static.
  */
 @mixin matchinfo-head {
-  border-width: 0px;
+  // border-width: 0px;
   border-top: $border-size solid $darker-orange; // #ff8000;
   width: $left-width / 2;
 }
@@ -34,6 +34,7 @@
   height: auto;
   font-size: 10pt;
   text-align: left;
+
   > p.addtree {
     position: relative;
     @include choose-item;
@@ -250,6 +251,35 @@
   }
 }
 
+
+  /**
+   * Label
+   */
+div.matchtree, div.metatable {
+  h6 {
+    display: inline;
+    font-size: inherit;
+    color: $nearly-white;
+    margin: 0;
+    padding: 0 !important;
+    float: left;
+    > span, > div {
+      @include matchinfo-head;
+      @include cell-info;
+      display: inline-block !important;
+      margin: 0;
+      &:nth-of-type(2) {
+	      margin-left: $border-size;
+      }
+    }
+    > div {
+
+      // Override half width !
+      width: $left-width;
+    }
+  }
+}
+
 /**
   * Tree view
   */
@@ -260,26 +290,6 @@
   padding: 0;
   margin-top: 1pt;
 
-  /**
-   * Label
-   */
-  h6 {
-    display: inline;
-    font-size: inherit;
-    color: $nearly-white;
-    margin: 0;
-    padding: 0 !important;
-    float: left;
-    > span {
-      @include matchinfo-head;
-      @include cell-info;
-      display: inline-block;
-      margin: 0;
-      &:nth-of-type(2) {
-	      margin-left: $border-size;
-      }
-    }
-  }
   > div {
     position: unset;
     z-index: 4;
@@ -326,14 +336,27 @@
   }
 }
 
+div.metatable + div.matchtable {
+  /*
+  padding-top: 5 * $border-size;
+  border-top: $border-size solid $middle-orange;
+  */
+  margin-top: 5 * $border-size;
+}
 
-dl.metatable {
+
+div.metatable > dl {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: stretch;
-  width: 100%;
+  width: auto;
+  padding-bottom: 0;
+  margin-left: $left-distance;
+  margin-right: $right-match-distance;
+  margin-top: $border-size;
+
   > div {
     display: flex;
     flex-direction: row;
@@ -357,6 +380,7 @@
       padding: 2px;
       margin: 0;
       width: 100%;
+      max-width: none;
       margin-left: $border-size;
       // padding-left: 2 * $border-size;
     }
@@ -364,20 +388,28 @@
 }
 
 @media (min-width:640px) {
-  dl.metatable > div {
-    width: 50%;
+  div.metatable > dl {
+    > div {
+      width: 50%; // 2*
+    }
   }
 }
 
 @media (min-width:800px) {
-  dl.metatable > div {
-    width: 33%;
+  div.metatable > dl > div {
+    width: 33%; // 3*
   }
 }
 
 @media (min-width:1200px) {
-  dl.metatable > div {
-    width: 30%;
+  div.metatable > dl > div {
+    width: 25%; // 4*
+  }
+}
+
+@media (min-width:1680px) {
+  div.metatable > dl > div {
+    width: 20%; // 5*
   }
 }
 
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 15888ae..bc985ed 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -91,12 +91,12 @@
     padding: 1pt 3pt;
   }
 
-  div.matchtree {
+  div.matchtree, div.metatable {
     h6 {
       display: block;
       float: none;
     }
-    > div {
+    > div, > dl {
       margin-left: 2px;
     }
   }