diff --git a/dev/js/src/buttongroup.js b/dev/js/src/buttongroup.js
index b33c13a..a1dac7b 100644
--- a/dev/js/src/buttongroup.js
+++ b/dev/js/src/buttongroup.js
@@ -31,11 +31,11 @@
      */
     add : function (title, classes, cb) {
       var b = this._element.addE('span');
-      b.addT(title);
       b.setAttribute('title',title);
       if (classes !== undefined) {
         b.classList.add.apply(b.classList, classes);
       };
+      b.addE('span').addT(title);
 
       var that = this;
       b.addEventListener('click', function (e) {
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index b4621d0..76bbf82 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -15,6 +15,7 @@
   'hint',
   'vc',
   'tutorial',
+  'buttongroup',
   'lib/domReady',
   'vc/array',
   'lib/alertify',
@@ -29,6 +30,7 @@
              hintClass,
              vcClass,
              tutClass,
+             buttonGroupClass,
              domReady,
              vcArray,
              alertifyClass,
@@ -181,29 +183,19 @@
     };
 
     var result = d.getElementById('resultinfo');
-    var resultButton = null;
-    var leftButton = null;
+    var resultButton;
     if (result != null) {
 
-      // Add right buttons
-      resultButton = result.addE('div');
-      resultButton.classList.add('result', 'button');
-
-      leftButton =  result.addE('div');
-      leftButton.classList.add('result', 'button', 'left');
+      // Add result button group
+      resultButton = buttonGroupClass.create(['result']);
+      result.appendChild(resultButton.element());
     };
 
     // There is a koralQuery
     if (KorAP.koralQuery !== undefined) {
 
-      if (resultButton !== null) {
+      if (result !== null) {
         var kq;
-        var toggle = d.createElement('a');
-        toggle.setAttribute('title', loc.SHOW_KQ)
-        toggle.classList.add('show-kq', 'button');
-        toggle.addE('span')
-          .addT(loc.SHOW_KQ);
-        resultButton.appendChild(toggle);
 
         var showKQ = function () {
           if (kq === undefined) {
@@ -228,11 +220,8 @@
           };
         };
 
-        if (toggle !== undefined) {
-          
-          // Show koralquery
-          toggle.addEventListener('click', showKQ);
-        };
+        // Add KoralQuery button
+        resultButton.add(loc.SHOW_KQ, ['show-kq','button-icon'], showKQ);
       };
 
       if (KorAP.koralQuery["errors"]) {
@@ -263,41 +252,16 @@
     if (i > 0) {
 
       if (resultButton !== null) {
-
         /**
          * Toggle the alignment (left <=> right)
          */
-        // querySelector('div.button.right');
-        
-        var toggle = d.createElement('a');
-        toggle.setAttribute('title', loc.TOGGLE_ALIGN);
-        // Todo: Reuse old alignment from query
-        var cl = toggle.classList;
-        cl.add('align', 'right', 'button');
-        toggle.addEventListener(
-          'click',
-          function (e) {
-            var ol = d.querySelector('#search > ol');
-            ol.toggleClass("align-left", "align-right");
-            this.toggleClass("left", "right");
-          });
-        toggle.addE('span').addT(loc.TOGGLE_ALIGN);
-        resultButton.appendChild(toggle);
-      };
 
-      // Not ready yet
-      /*
-      if (leftButton !== null) {
-        var metaInfo = d.createElement('a');
-        metaInfo.setAttribute('title', loc.SHOW_META)
-
-        var cl = metaInfo.classList;
-        cl.add('show-meta', 'button');
-        metaInfo.appendChild(d.createElement('span'))
-          .appendChild(d.createTextNode(loc.SHOW_META));
-        leftButton.appendChild(metaInfo);
+        resultButton.add(loc.TOGGLE_ALIGN, ['align','right','button-icon'], function (e) {
+          var ol = d.querySelector('#search > ol');
+          ol.toggleClass("align-left", "align-right");
+          this.toggleClass("left", "right");
+        });
       };
-      */
     };
 
     /**
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index f30287b..628659f 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -1,6 +1,12 @@
 /**
  * Information about a match.
  */
+/*
+ * TODO:
+ *   Create a "views" object, that is the parent of this
+ *   class and supports a simple .add() method to add views
+ *   to an element.
+ */
 define([
   'match/infolayer',
   'match/table',
diff --git a/dev/js/src/match/treemenu.js b/dev/js/src/match/treemenu.js
index 6b8a76a..0010271 100644
--- a/dev/js/src/match/treemenu.js
+++ b/dev/js/src/match/treemenu.js
@@ -46,7 +46,7 @@
       return this._info;
     },
 
-    // Attach menu to
+    // Attach menu to button
     attachTo : function (e) {
 
       // this._attached = e;
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 0688319..6da7901 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,8 +1,6 @@
 @charset "utf-8";
 @import "util";
 
-$border-size: 2px;
-
 /**
  * Basic global CSS rules for Kalamar
  */
@@ -137,35 +135,3 @@
 button + button {
   right: 0;
 }
-
-
-.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;
-	  }
-    }
-  }
-}
\ No newline at end of file
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
new file mode 100644
index 0000000..607f9e3
--- /dev/null
+++ b/dev/scss/main/buttongroup.scss
@@ -0,0 +1,42 @@
+@charset "utf-8";
+@import "../util";
+
+/*
+ * Define the base layout of horizontal button groups
+ */
+.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 {
+        @include blind;
+      }
+    }
+  }
+}
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index 08a6103..63f143b 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -15,12 +15,11 @@
   overflow-x: hidden;
   overflow-y: visible;
   width: auto;
-  border: 1px solid black;
   text-indent: 0;
   list-style-type: none;
   margin: 0;
   padding: 0;
-  border: 1px solid $kwic-border;
+  border: $result-border-size solid $kwic-border;
   font-size: $font-size;
 
   > li {
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 3478a77..40ef483 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,16 +1,17 @@
-@import "highlight";  // JSON highlighting
-@import "kwic";       // Kwic view information
-@import "logos";      // Logo images
-@import "matchinfo";  // Match table
-@import "tree";       // Tree view
-@import "pagination"; // Pagination
-@import "query";      // View query
-@import "resultinfo"; // Information on results
-@import "tutorial";   // Embedded and non-embedded tutorial
-@import "koralquery"; // KoralQuery
-@import "tagger";     // Tagger
-@import "alertify";
-@import "intro";      // Intro page
+@import "highlight";   // JSON highlighting
+@import "kwic";        // Kwic view information
+@import "logos";       // Logo images
+@import "matchinfo";   // Match table
+@import "tree";        // Tree view
+@import "pagination";  // Pagination
+@import "query";       // View query
+@import "resultinfo";  // Information on results
+@import "tutorial";    // Embedded and non-embedded tutorial
+@import "koralquery";  // KoralQuery
+@import "tagger";      // Tagger
+@import "alertify";    // Styling alerts
+@import "intro";       // Intro page
+@import "buttongroup"; // Button groups
 
 main {
   margin: {
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index 5276f0a..0ad4fc1 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -16,73 +16,46 @@
     margin: 0;
     text-align: right;
   }
+}
 
-  div.result {
-    vertical-align: bottom;
-    display: inline-block;
+// Specify result button group layout
+.result.button-group {
+  vertical-align: bottom;
+  display: inline-block;
+  line-height: 1.3em;
+
+  > span {
     line-height: 1.3em;
-    > a {
-      display: inline-block;
-      cursor: pointer;
-      position: relative;
-      > span {
-	      @include blind;
-      }
-      box-shadow: $choose-box-shadow;
-      @include standard-text-padding;
-      // padding-top: 1pt;
-      // padding-bottom: 3pt;
-      
-      @include choose-item;
-      border: {
-	      top-width: $border-size;
-	      bottom-width:  $border-size;
-	      top-style: solid;
-	      bottom-style: solid;
-      }
-      &:hover {
-	      @include choose-hover;
-      }
+    border-width: $result-border-size 0;
+    &:first-child {
+      border-left-width: $result-border-size;
     }
-    > a:last-child {
-      border: {
-	    top-right-radius: $standard-border-radius;
-	    bottom-right-radius: $standard-border-radius;
-	    right-width: $border-size;
-	    right-style: solid;
+    &:last-child {
+      border-right-width: $result-border-size;
     }
-    }
-    > a:first-child {
-      border: {
-	    top-left-radius: $standard-border-radius;
-	    bottom-left-radius: $standard-border-radius;
-	    left-width: $border-size;
-	    left-style: solid;
-    }
-    }
-    > a::after {
-      font-family: 'FontAwesome';
-    }
-    > a.align.left::after {
+  }
+
+  // Define icons for result buttons
+  .button-icon {
+    &.align.left::after {
       content: $fa-left-align;
     }
-    > a.align.right::after {
+    &.align.right::after {
       content: $fa-right-align;
     }
-    > a.show-kq::after {
+    &.show-kq::after {
       content: $fa-code;
     }
-    > a.show-meta::after {
-      content: $fa-metadata;
-    }
   }
 }
 
+
 #resultinfo.found {
   position: relative;
   // z-index: 20;
   margin-bottom: 0px;
-  div.result > a {
+
+  .button-group > span {
     margin-bottom: 0;
     border-bottom-width: 0;
     box-shadow: none;
@@ -91,15 +64,20 @@
     }
     &:last-child {
       border-bottom-right-radius: 0;
-    }
+    }   
   }
+
+  /*
   div.result.left {
     position: absolute;
     left: 0;
     bottom: 0;
   }
+  */
 }
 
+
+
 #total-results {
   color: $total-results;
   font-weight: bold;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index d79f8ee..fcc4206 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -91,7 +91,8 @@
 $item-padding: 3pt 6pt;
 $button-width: 30px;
 $base-padding: 8px;
-
+$border-size: 2px;
+$result-border-size: 1px;
 $total-results: $light-green;
 
 /**