diff --git a/Gruntfile.js b/Gruntfile.js
index 2bd8bb2..e8623a6 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -141,9 +141,10 @@
     watch: {
       css: {
 	      files: ['dev/scss/{util,base,fonts,kalamar,media,no-js}.scss',
+		            'dev/scss/base/flextable.scss',
 		            'dev/scss/footer/footer.scss',
 		            'dev/scss/sidebar/sidebar.scss',
-		            'dev/scss/header/{header,hint,menu,searchbar,vc,datepicker}.scss',
+		            'dev/scss/header/{header,hint,menu,searchbar,vc,statistics,datepicker}.scss',
 		            'dev/scss/main/{alertify,intro,koralquery,highlight,kwic,logos,tagger,' +
 		            'main,matchinfo,panel,tree,pagination,query,'+
 		            'resultinfo,sidebar,tutorial,plugin,buttongroup}.scss'
diff --git a/dev/demo/alldemo.js b/dev/demo/alldemo.js
index 3b75c80..5a3d3c8 100644
--- a/dev/demo/alldemo.js
+++ b/dev/demo/alldemo.js
@@ -747,6 +747,15 @@
   }
 };
 
+//corpus statistic
+var statistic = {
+  "documents":1,
+  "tokens":222222,
+  "sentences":33333,
+  "paragraphs":444
+};
+
+
 requirejs.config({
   baseUrl: '../js/src',
   paths : {
@@ -782,7 +791,13 @@
   KorAP.API.getTextInfo = function (doc, param, cb) {
     cb(textInfo);
   };
-  
+
+  //get the corpus statistic (demo function)
+  KorAP.API.getCorpStat = function(collQu, cb){
+    return cb(statistic);
+  };
+
+
   /**
    * Do some things at the beginning.
    */
diff --git a/dev/demo/vc.html b/dev/demo/vc.html
index a3e27df..139bb1b 100644
--- a/dev/demo/vc.html
+++ b/dev/demo/vc.html
@@ -26,7 +26,7 @@
     </style>
   </head>
   <body>
-    <div id="vc"></div>
+    <div id="vc-view"></div>
     <div id="menu" class="vc"></div>
 
     <p><a onclick="KorAP.makeVCPersistant()" style="cursor:pointer">make persistant!</a></p>
diff --git a/dev/demo/vcdemo.js b/dev/demo/vcdemo.js
index b1bf843..9bb67e2 100644
--- a/dev/demo/vcdemo.js
+++ b/dev/demo/vcdemo.js
@@ -125,7 +125,7 @@
       ['author', 'text']
     ]).fromJson(json);
 
-    document.getElementById('vc').appendChild(vc.element());
+    document.getElementById('vc-view').appendChild(vc.element());
 
     // show the current JSON serialization
     KorAP.showJSON = function () {
diff --git a/dev/js/spec/statSpec.js b/dev/js/spec/statSpec.js
index e442ee2..32a9e36 100644
--- a/dev/js/spec/statSpec.js
+++ b/dev/js/spec/statSpec.js
@@ -107,7 +107,11 @@
 			expect(descL.children[0].children[0].firstChild.nodeValue).toEqual('documents');
 			expect(descL.children[0].children[1].firstChild.nodeValue).toEqual('12');
 			expect(descL.children[0].children[0].attributes[0].value).toEqual('documents');
-		});
+
+			expect(descL.children[1].children[0].firstChild.nodeValue).toEqual('tokens');
+			expect(descL.children[1].children[1].firstChild.nodeValue).toEqual(new Number(2323).toLocaleString());
+			expect(descL.children[1].children[0].attributes[0].value).toEqual('tokens');
+    });
 		
 		
 		it('should display corpus statistic after creating a corpus statistic view', function(){
diff --git a/dev/js/src/match/meta.js b/dev/js/src/match/meta.js
index a9bf2db..8667953 100644
--- a/dev/js/src/match/meta.js
+++ b/dev/js/src/match/meta.js
@@ -41,6 +41,7 @@
         return;
 
       var metaDL = document.createElement('dl');
+      metaDL.classList.add("flex");
 
       this._element = metaDL;
 
diff --git a/dev/js/src/vc/statistic.js b/dev/js/src/vc/statistic.js
index 95710db..eb626dc 100644
--- a/dev/js/src/vc/statistic.js
+++ b/dev/js/src/vc/statistic.js
@@ -42,6 +42,7 @@
 
       // create HTML Description List Element
       var statDL = document.createElement('dl');
+      statDL.classList.add("flex");
       var statistic = this._statistic;
 
       var keys = Object.keys(statistic);
@@ -52,7 +53,7 @@
         statDT.addT(k);
         statDT.setAttribute('title', k);
         statDD = statSp.addE('dd');
-        statDD.addT(statistic[k]);
+        statDD.addT(statistic[k].toLocaleString());
       }
 
       this._element = statDL;
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 6da7901..902b27c 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,5 +1,6 @@
 @charset "utf-8";
 @import "util";
+@import "base/flextable";
 
 /**
  * Basic global CSS rules for Kalamar
diff --git a/dev/scss/base/flextable.scss b/dev/scss/base/flextable.scss
new file mode 100644
index 0000000..52594c2
--- /dev/null
+++ b/dev/scss/base/flextable.scss
@@ -0,0 +1,69 @@
+/**
+ * This defines flexible table cells
+ * for views.
+ */
+
+dl.flex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  width: auto;
+  padding-bottom: 0;
+
+  > div {
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    width: 100%;
+    border-width: $border-size / 2;
+    border-style: solid;
+    align-items: stretch;
+    > * {
+      @include cell-info;
+    }
+    > dt {
+      text-align: left;
+      width: 12.5em;
+      margin: 0;
+    }
+    > dd {
+      text-align: left;
+      padding: 2px;
+      margin: 0;
+      width: 100%;
+      max-width: none;
+      max-height: 6em;
+      margin-left: $border-size;
+      white-space: normal;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
+}
+
+
+@media (min-width:640px) {
+  dl.flex > div {
+    width: 50%; // 2*
+  }
+}
+
+@media (min-width:800px) {
+  dl.flex > div {
+    width: 33.3333333333333%; // 3*
+  }
+}
+
+@media (min-width:1200px) {
+  dl.flex > div {
+    width: 25%; // 4*
+  }
+}
+
+@media (min-width:1680px) {
+  dl.flex > div {
+    width: 20%; // 5*
+  }
+}
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index b29be0c..2bd0158 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -1,18 +1,19 @@
 @charset "utf-8";
 @import "../util";
-@import "hint";       // Hint specific menu list
-@import "menu";       // Menu list
-@import "searchbar";  // The search bar
-@import "vc";         // Virtual collection builder
-@import "datepicker"; // Datepicker
+@import "hint";          // Hint specific menu list
+@import "menu";          // Menu list
+@import "searchbar";     // The search bar
+@import "vc";            // Virtual corpus builder
+@import "statistics";    // Statistics for VCs
+@import "datepicker";    // Datepicker
 
 header {
   position: relative;
   background-color: $light-green;
 //  @include light-noise;
   @include box-sizing-box();
-  padding: $base-padding;
-  padding-bottom: 0;
+  padding-top: $base-padding;
+  // padding-bottom: 0;
   font-size: 10pt;
   color: $nearly-white;
   // text-shadow: none;
@@ -124,10 +125,6 @@
       content: $fa-logout;
     }
   }
-
-  #vc-view > div {
-    margin: 1.3em 0 .5em 0;
-  }
 }
 
 
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
new file mode 100644
index 0000000..44d8930
--- /dev/null
+++ b/dev/scss/header/statistics.scss
@@ -0,0 +1,83 @@
+@charset "utf-8";
+@import "../util";
+
+/*
+div.view.vcstatistic {
+	position: relative;  
+	display: inline-flex;
+	width: auto;
+}
+*/
+
+div.stattable {
+	display: flex;
+	flex-direction: row;
+}
+/*
+div.stattable ul.action.image {
+  display: block;
+  li {
+    cursor: pointer;
+    color: $nearly-white;
+    text-decoration: none;
+    > span {
+      @include blind;
+    }
+    border-width: 0;
+    // z-index: 8;
+    text-decoration:none;
+    text-align: center;
+    font-style: normal;
+  
+    &.close::after {
+	    font-family: 'FontAwesome';
+	    content: $fa-close;
+    }
+  }
+}
+*/
+
+div.stattable > dl {
+  display: flex;
+  flex-flow: row wrap;
+  //margin-top: 4 * $border-size !important;
+  margin-top:4px;
+  margin-bottom:4px;
+  padding-bottom: 1px;   
+  > div {
+    /*
+    display: flex;
+    margin-right: 5px;
+ 	  margin-left: 5px;
+    > * {
+      @include cell-info;
+    }
+   */
+    border-color: $dark-green;
+    > dt {
+      background-color: $middle-green;
+      /*
+      text-align: right;
+      // padding: 1px;
+     */
+      width: 15em;
+      margin: 0;
+      &:after {
+  		  content: ":";
+  	  }
+    }
+   	> dd {
+   	  /*
+   	  text-align: left;
+      // padding: 1px;
+      margin: 0;
+      width: 100%;
+      max-width: none;
+      max-height: 6em;
+      margin-left: $border-size;
+     */
+      background-color: $lightest-green;
+      color: $dark-grey;
+	  }
+  }
+}
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 668d871..b7b97cd 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -12,6 +12,13 @@
 .vc {
   margin-top: 4pt;
 
+  .docGroup, .doc {
+    // color: $nearly-white;
+    // color: $dark-green;
+    color: $dark-grey;
+    // text-shadow: $light-shadow;
+  }
+  
   /**
    * Rules for all docGroups
    */
@@ -22,7 +29,6 @@
 
     .docGroup { display: block; }
 
-    color: $nearly-white;
     padding: 4pt 2pt 4pt 0pt;
     border: {
       radius: $standard-border-radius * 2;
@@ -33,7 +39,8 @@
 	
     // Whiten on hover 
     &:hover {
-      background-color: rgba(255,255,255,.06);
+      // background-color: rgba(255,255,255,.06);
+      background-color: rgba(255,255,255,.3);
     }
 
     &[data-operation] {
@@ -48,7 +55,8 @@
         text-align: right;
         width: $left-padding;
         margin-left: -1 * ($left-padding + .5em); // -28pt
-        color: $dark-green;
+        // color: $dark-green;
+        color: $dark-orange;
         line-height: 1.5em;
         border-top: $border-size solid transparent;
       }
@@ -65,37 +73,34 @@
         // This will be overruled by JS!
         content: "or";
       }
-     
-     &:after {
-     .button-stat {
-	
 
-
-  > span {
-    cursor: pointer;
-    box-shadow: $choose-box-shadow;
-    font-size: 9pt;
-    line-height: 1.5em;
-    padding: 0 4px;
-    display: inline-block;
-    @include choose-item;
-    border-style: solid;
-    border-width: $border-size 0;
-    &:hover {
-	    @include choose-hover;
-    }
-    &:first-child {
-	    border: {
-	    left-width: $border-size;
-	    right-width: $border-size;
-	  }
-    }
-
-  }
-}
-
-     	
+      /*
+      &:after {
+        .button-stat {
+	        > span {
+            cursor: pointer;
+            box-shadow: $choose-box-shadow;
+            font-size: 9pt;
+            line-height: 1.5em;
+            padding: 0 4px;
+            display: inline-block;
+            @include choose-item;
+            border-style: solid;
+            border-width: $border-size 0;
+            &:hover {
+	            @include choose-hover;
+            }
+            &:first-child {
+	            border: {
+	            left-width: $border-size;
+	            right-width: $border-size;
+	          }
+            }
+            
+          }
+        }
      	}
+     */
     }
 
     // And operation
@@ -191,7 +196,8 @@
   .doc > span {
     cursor: pointer;
     &:hover {
-      color: $dark-green;
+      // color: $dark-green;
+      color: $dark-orange;
     }
   }
 
@@ -314,6 +320,10 @@
   border-radius: $standard-border-radius;
 }
 
+header #vc-view > div {
+  margin: 1.3em 0 .5em 0;
+}
+
 
 #vc-choose > span.rewritten {
   &::after {
@@ -330,64 +340,31 @@
   }
 }
 
-div.stattable{  
-	display: flex;
-	flex-direction: row;
-	}
-
-div.stattable ul.action.image {
-  display: block;
-  li {
-    cursor: pointer;
-    color: $nearly-white;
-    text-decoration: none;
-    > span {
-      @include blind;
-    }
-    border-width: 0;
-    // z-index: 8;
-    text-decoration:none;
-    text-align: center;
-    font-style: normal;
-  
-    &.close::after {
-	    font-family: 'FontAwesome';
-	    content: $fa-close;
-    }
+div#vc-view > div.vc {
+  border: 2px solid $dark-green;
+  background-color: $nearly-white;
+  > div:first-child {
+    margin: 1.3em;
   }
 }
 
-
-div.stattable  > dl {
-  display: flex;
-  flex-flow: row wrap;
+div.panel.vcinfo {
+  padding: 3pt 0pt 3pt 3pt;
   background-color: $dark-green;
-  //margin-top: 4 * $border-size !important;
-  margin-top:4px;
-  margin-bottom:4px;
-  padding-bottom: 1px;   
-  	> div {
-    display: flex;
-    margin-right: 5px;
- 	margin-left: 5px;
-     > dt {
-      text-align: right;
-      padding: 1px;
-      margin: 0;
-      &:after {
-  		content: ":";
-  	}
+  /*
+  div.button-group {
+    display: inline-block;
+    margin-right: .5em;
+    > span {
+      position: relative;
+      box-shadow: none;
     }
-   	> dd {   	
-   	  text-align: left;
-      padding: 1px;
-      margin: 0;
-      width: 100%;
-      max-width: none;
-      max-height: 6em;
-      margin-left: $border-size;
-	}
   }
+*/
 }
 
-
+/*
+.button-group.vcstatistic{
+	position:relative;
+	}
+*/
\ No newline at end of file
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
index f98f723..6a1ad38 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/main/buttongroup.scss
@@ -84,11 +84,6 @@
 }
 
 
-.button-group.vcstatistic{
-	position:relative;
-	}
-
-
 ul.menu.button-group-list {
   border-top-right-radius: 8px;
   font-size: 10pt;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 6bce8b8..0d257a3 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -5,15 +5,6 @@
 $border-size: 2px;
 $left-distance: $left-width + ($border-size * 2);
 
-@mixin cell-info {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 25em;
-  overflow: hidden;
-  padding: 1px 6px;
-  margin: 0px;
-}
-
 /**
  * Table view
  *
@@ -251,77 +242,22 @@
 
 // Metatable
 div.metatable > dl {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: stretch;
-  width: auto;
-  padding-bottom: 0;
   margin-right: $right-match-distance;
   margin-top: $border-size;
 
   > div {
-    display: flex;
-    flex-direction: row;
-    text-align: center;
-    width: 100%;
-    border: ($border-size / 2) solid $dark-orange;
-    align-items: stretch;
-    > * {
-      @include cell-info;
-    }
+    border-color: $dark-orange;
     > dt {
-      text-align: left;
       background: $darker-orange;
       color: $nearly-white;
       width: 12.5em;
-      margin: 0;
     }
     > dd {
-      text-align: left;
       background-color: $light-orange;
-      padding: 2px;
-      margin: 0;
-      width: 100%;
-      max-width: none;
-      max-height: 6em;
-      margin-left: $border-size;
-      white-space: normal;
-      overflow-y: auto;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
     }
   }
 }
 
-@media (min-width:640px) {
-  div.metatable > dl {
-    > div {
-      width: 50%; // 2*
-    }
-  }
-}
-
-@media (min-width:800px) {
-  div.metatable > dl > div {
-    width: 33.3333333333333%; // 3*
-  }
-}
-
-@media (min-width:1200px) {
-  div.metatable > dl > div {
-    width: 25%; // 4*
-  }
-}
-
-@media (min-width:1680px) {
-  div.metatable > dl > div {
-    width: 20%; // 5*
-  }
-}
-
-
 div.loading {
   background-color: transparent !important;
   height: 16px !important;
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
index fef814f..55d0c9c 100644
--- a/dev/scss/main/panel.scss
+++ b/dev/scss/main/panel.scss
@@ -12,16 +12,3 @@
   display: block;
   width: 100%;
 }
-
-
-div.result.panel .view {
-  border: 1px solid $kwic-border;
-  background-color: $dark-orange;
-}
-
-div.view.vcstatistic{
-	  position: relative;  
-	  display: inline-flex;
-	  width: auto;
-	}
-
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index f53de78..d1c7f86 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -17,6 +17,11 @@
   }
 }
 
+div.result.panel .view {
+  border: 1px solid $kwic-border;
+  background-color: $dark-orange;
+}
+
 // Specify result button group layout
 .result.button-group.button-panel {
   width: auto;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 16cea3e..aa13a3c 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -34,9 +34,10 @@
  * Green Colors
  */
 $dark-green:     $ids-green-1; // #496000;
-$middle-green:   lighten($ids-green-1, 5%); // $ids-green-1; // #688704;
+// $middle-green:   lighten($ids-green-1, 5%);
+$middle-green:   lighten($ids-green-1, 9%);
 $light-green:    lighten($ids-green-1, 13%); // #7ba400;
-$lightest-green: lighten($ids-green-1, 26%);
+$lightest-green: #d8e38c; // lighten($ids-green-1, 26%);
 
 /**
  * Blue Colors
@@ -169,6 +170,15 @@
   border-color: $dark-red;
 }
 
+@mixin cell-info {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 25em;
+  overflow: hidden;
+  padding: 1px 6px;
+  margin: 0px;
+}
+
 /**
  * Mixin for basic color transition
  */