diff --git a/Gruntfile.js b/Gruntfile.js
index d9efddf..1518cff 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -127,7 +127,7 @@
 		            'dev/scss/sidebar/sidebar.scss',
 		            'dev/scss/header/{header,hint,menu,searchbar,vc,datepicker}.scss',
 		            'dev/scss/main/{alertify,intro,koralquery,highlight,kwic,logos,tagger,' +
-		            'main,matchinfo,tree,pagination,query,'+
+		            'main,matchinfo,panel,tree,pagination,query,'+
 		            'resultinfo,sidebar,tutorial,buttongroup}.scss'
 	             ],
 	      tasks: ['sass'],
diff --git a/dev/demo/buttongroup.html b/dev/demo/buttongroup.html
index 9a26ed1..73050b5 100644
--- a/dev/demo/buttongroup.html
+++ b/dev/demo/buttongroup.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Hint demo</title>
+    <title>Panel and ButtonGroup demo</title>
     <meta charset="utf-8" />
     <script src="../js/lib/require.js" async="async"></script>
     <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
   </head>
   <body>
-    <nav id="mainButton" style="position: absolute; top: 300px"></nav>
+    <nav id="mainButton" style="position: absolute; width: 100%; top: 150px"></nav>
   </body>
   <script>
 requirejs.config({
@@ -18,17 +18,21 @@
 });
 
 
-require(['buttongroup'], function (btnClass) {
-  btns = btnClass.create();
-  btns.add('Meta',['meta'], function () {
+require(['buttongroup', 'panel','view'], function (btnClass, panelClass, viewClass) {
+  var panel = panelClass.create();
+  var actions = panel.actions;
+  actions.add('Meta',['meta'], function () {
     console.log(this.button.classList.contains('meta'));
+    view = viewClass.create();
+    panel.add(view);
   });
-  var list = btns.addList('More', ['list']);
+  var list = actions.addList('More', ['list']);
   list.readItems([
     ['cool', 'cool', function (e, action) { console.log('really' + this.action()) }],
     ['very cool', 'veryCool', function (e, action) { console.log('very cool') }]
   ]);
-  document.getElementById('mainButton').appendChild(btns.element());
+
+  document.getElementById('mainButton').appendChild(panel.element());
 });
 
 
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index 59d2e83..3576867 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -184,6 +184,9 @@
       
       var that = this;
 
+      // TODO:
+      //   Introduce panel object here!
+      
       // Add meta button
       var refLine = element.querySelector("p.ref");
 
@@ -274,6 +277,9 @@
      */
     info : function () {
 
+      // TODO:
+      //   Rename info() to panel()
+
       // Create match info
       if (this._info === undefined)
         this._info = infoClass.create(this);
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 628659f..655535f 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -3,7 +3,7 @@
  */
 /*
  * TODO:
- *   Create a "views" object, that is the parent of this
+ *   Create a "panel" object, that is the parent of this
  *   class and supports a simple .add() method to add views
  *   to an element.
  */
@@ -60,34 +60,6 @@
 
 
     /**
-     * Open the information view,
-     * if closed, otherwise close.
-     */
-    /*
-    toggle : function () {
-
-      var elem = this._match.element();
-
-      if (this.opened == true) {        
-        elem.removeChild(
-          this.element()
-        );
-        this.opened = false;
-      }
-      else {
-        // Append element to match
-        elem.appendChild(
-          this.element()
-        );
-        this.opened = true;
-      };
-      
-      return this.opened;
-    },
-    */
-
-
-    /**
      * Retrieve and parse snippet for table
      * representation
      */
@@ -419,6 +391,9 @@
     },
 
     // Add action button
+    // TODO:
+    //   These are view-buttons that should be added to
+    //   the view and not to the panel!
     _addButton : function (buttonType, element, cb) {
       // TODO: Unless existent
       var actions = document.createElement('ul');
diff --git a/dev/js/src/panel.js b/dev/js/src/panel.js
new file mode 100644
index 0000000..5aa96ad
--- /dev/null
+++ b/dev/js/src/panel.js
@@ -0,0 +1,95 @@
+/**
+ * Create a panel for a certain aspect of the system, like
+ * the result, a match, or the VC.
+ */
+define(['buttongroup', 'util'], function (buttonGroupClass) {
+
+  return {
+
+    // TODO:
+    //   Support classes
+    create : function () {
+      return Object.create(this)._init();
+    },
+
+    _init : function () {
+      // ...
+      this.views = [];
+
+      
+      /**
+       * Main action buttons for the panel,
+       * may be at the bottom (for matches)
+       * or as tabs (for the result).
+       */
+      this.actions = buttonGroupClass.create(['action', 'panel']);
+      return this;
+    },
+
+    /**
+     * The element of the panel
+     */
+    element : function () {
+      if (this._element)
+        return this._element;
+
+      // Create panel element
+      var e = document.createElement('div');
+      e.classList.add('panel');
+
+      e.appendChild(this.actions.element());
+
+      this._element = e;
+      return e;
+    },
+
+
+    /**
+     * Add a view to the panel
+     */
+    add : function (view) {
+
+      // Add view to views list
+      this.views.push(view);
+
+      // Append element to panel element
+
+      this.element().appendChild(
+        view.element()
+      );
+
+      view.panel = this;
+    },
+
+    /**
+     * Delete a closed view from panel
+     */
+    delView : function (view) {
+      for (i in this.views) {
+        if (this.views[i] === view) {
+          this.views[i] = undefined;
+        }
+      }
+    },
+
+    /**
+     * Elements before the action buttons
+     */
+    beforeActions : function (element) {
+      if (arguments.length > 0)
+        this._beforeActions = element;
+
+      return this._beforeActions;
+    },
+
+    /**
+     * Element after the action buttons
+     */
+    afterActions : function (element) {
+      if (arguments.length > 0)
+        this._afterActions = element;
+
+      return this._afterActions;
+    }
+  }
+});
diff --git a/dev/js/src/view.js b/dev/js/src/view.js
new file mode 100644
index 0000000..2eb5dd0
--- /dev/null
+++ b/dev/js/src/view.js
@@ -0,0 +1,55 @@
+/**
+ * Create a view that can be added to a panel,
+ * like a tree view or the metadata view.
+ */
+
+define(['buttongroup', 'util'], function (buttonGroupClass) {
+
+  return {
+
+    // TODO:
+    //   Support classes
+    create : function () {
+      return Object.create(this)._init();
+    },
+
+    _init : function () {
+      // ..
+      this.panel = undefined;
+
+      // The buttonclass is bind to the view
+      this.actions = buttonGroupClass.create(['action', 'view']).bind(this);
+      this.actions.add('close', ['button-icon','close'], function (e) {
+        this.close();
+      });
+
+      return this;
+    },
+
+    /**
+     * Element of the view
+     */
+    element : function () {
+      if (this._element)
+        return this._element;
+
+      // Create panel element
+      var e = document.createElement('div');
+      e.classList.add('view');
+
+      e.appendChild(this.actions.element());
+
+      this._element = e;
+      return e;
+    },
+
+    /**
+     * Close the view.
+     */
+    close : function () {
+      var e = this.element();
+      e.parentNode.removeChild(e);
+      this.panel.delView(this);
+    }
+  };
+});
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
index dea337d..acd3094 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/main/buttongroup.scss
@@ -7,31 +7,6 @@
 .button-group {
   > 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;
-	      top-left-radius: $standard-border-radius;
-	      bottom-left-radius: $standard-border-radius;
-	    }
-    }
-    &:last-child {
-	    border: {
-	      right-width: $border-size;
-	      top-right-radius: $standard-border-radius;
-	      bottom-right-radius: $standard-border-radius;
-	    }
-    }
     &.button-icon {
       font-family: 'FontAwesome';
       > span {
@@ -41,6 +16,34 @@
   }
 }
 
+.button-group:not(.view) > span {
+  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;
+	    top-left-radius: $standard-border-radius;
+	    bottom-left-radius: $standard-border-radius;
+	  }
+  }
+  &:last-child {
+	  border: {
+	    right-width: $border-size;
+	    top-right-radius: $standard-border-radius;
+	    bottom-right-radius: $standard-border-radius;
+    }
+  }
+}
+ 
 ul.button-group-list {
   border-top-right-radius: 8px;
   z-index: 150;
@@ -54,3 +57,31 @@
 	  border-top-right-radius: 5px;
   }
 }
+
+
+.button-group.view {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 20;
+  margin: 0;
+  padding: 0;
+  width: $right-match-distance;
+  > span {
+    border-width: 0;
+    text-decoration:none;
+    text-align: center;
+    font-style: normal;
+    
+    &.download::after {
+	    font-family: 'FontAwesome';
+	    content: $fa-download;
+    }
+    
+    &.close::after {
+	    font-family: 'FontAwesome';
+	    content: $fa-close;
+    }
+  }
+}
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 40ef483..cfb3791 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -12,6 +12,7 @@
 @import "alertify";    // Styling alerts
 @import "intro";       // Intro page
 @import "buttongroup"; // Button groups
+@import "panel";       // Base panel system
 
 main {
   margin: {
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index f2ed006..334ac74 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -235,6 +235,8 @@
   }
 }
 
+// TODO:
+//   Probably obsolete now, as it will become part of the panel system
 div.matchinfo ul.action.image {
   display: block;
   position: absolute;
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
new file mode 100644
index 0000000..25d541b
--- /dev/null
+++ b/dev/scss/main/panel.scss
@@ -0,0 +1,26 @@
+@charset "utf-8";
+@import "../util";
+
+div.panel {
+  position: relative;
+  width: 100%;
+  display: block;
+  padding-top: $border-size;
+  background-color: $dark-orange;
+  border: {
+    style: solid;
+    color: $dark-orange;
+    width: 0;
+  }
+}
+
+div.view {
+  position: relative;
+  display: block;
+  min-height: 40px;
+  background-color: $middle-green;
+  width: 100%;
+  .button-group {
+    color: white;
+  }
+}