diff --git a/index.html b/index.html
index 42d5179c..6343cbd6 100644
--- a/index.html
+++ b/index.html
@@ -65,7 +65,7 @@
             <input class="header-search-input search-input mb-0" type="text" placeholder="Find or Search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="1">
             <input type="submit" value="Search" class="is-hidden">
           </form>
-          <button class="button button-link mb-0 header-search-clear search-clear" tabindex="1" disabled>
+          <button class="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled>
             <span class="icon-close"></span>
           </button>
         </div>
@@ -75,7 +75,7 @@
               <input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
               <label for="control-link-edit" class=" mb-0">Edit</label>
             </div>
-            <button class="button control-link-add" tabindex="1">
+            <button class="control-link-add button" tabindex="1">
               <span class="button-text">Add</span>
             </button>
           </div>
@@ -191,7 +191,7 @@
                 <p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
               </div>
               <div class="button-wrap">
-                <button class="button control-header-area-width-match mb-0" type="button">Match Bookmarks Area Width</button>
+                <button class="control-header-area-width-match button mb-0" type="button">Match Bookmarks Area Width</button>
               </div>
               <hr>
               <label class="control-header-area-alignment-horizontal-label">Area Horizontal Alignment</label>
@@ -259,7 +259,7 @@
                   <input id="control-header-greeting-size" class="control-header-greeting-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
                 </div>
                 <div class="button-wrap">
-                  <button class="button control-header-greeting-size-default mb-0" type="button">Defaul greeting size</button>
+                  <button class="control-header-greeting-size-default button mb-0" type="button">Default greeting size</button>
                 </div>
               </div>
             </div>
@@ -290,7 +290,7 @@
                   <input id="control-header-transitional-size" class="control-header-transitional-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
                 </div>
                 <div class="button-wrap">
-                  <button class="button control-header-transitional-size-default mb-0" type="button">Defaul transitional size</button>
+                  <button class="control-header-transitional-size-default button mb-0" type="button">Default transitional size</button>
                 </div>
               </div>
             </div>
@@ -364,7 +364,7 @@
                 <input id="control-header-clock-size" class="control-header-clock-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
               </div>
               <div class="button-wrap">
-                <button class="button control-header-clock-size-default mb-0" type="button">Defaul clock size</button>
+                <button class="control-header-clock-size-default button mb-0" type="button">Default clock size</button>
               </div>
             </div>
           </div>
@@ -499,7 +499,7 @@
                 <input id="control-header-date-size" class="control-header-date-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
               </div>
               <div class="button-wrap">
-                <button class="button control-header-date-size-default mb-0" type="button">Defaul date size</button>
+                <button class="control-header-date-size-default button mb-0" type="button">Default date size</button>
               </div>
             </div>
           </div>
@@ -592,7 +592,7 @@
                   <p class="input-helper small muted">Only the Search box width control will change the Width of the Search box.</p>
                 </div>
                 <div class="button-wrap">
-                  <button class="button control-header-search-size-default mb-0" type="button">Defaul search size</button>
+                  <button class="control-header-search-size-default button mb-0" type="button">Default search size</button>
                 </div>
               </div>
             </div>
@@ -617,7 +617,7 @@
                 <input id="control-header-button-size" class="control-header-button-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
               </div>
               <div class="button-wrap">
-                <button class="button control-header-button-size-default mb-0" type="button">Defaul button size</button>
+                <button class="control-header-button-size-default button mb-0" type="button">Default button size</button>
               </div>
             </div>
           </div>
@@ -708,7 +708,7 @@
                 <p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
               </div>
               <div class="button-wrap">
-                <button class="button control-link-area-width-match mb-0" type="button">Match Header Area Width</button>
+                <button class="control-link-area-width-match button mb-0" type="button">Match Header Area Width</button>
               </div>
               <hr>
               <label class="control-link-area-alignment-horizontal-label">Horizontal Alignment</label>
@@ -743,7 +743,7 @@
                   <input id="control-link-item-size" class="control-link-item-size" type="range" min="20" max="500" value="0" step="10" tabindex="1">
                 </div>
                 <div class="button-wrap">
-                  <button class="button control-link-item-size-default mb-0" type="button">Defaul tile size</button>
+                  <button class="control-link-item-size-default button mb-0" type="button">Default tile size</button>
                 </div>
                 <hr>
                 <div class="input-wrap">
@@ -756,7 +756,7 @@
                     <input id="control-link-item-display-letter-size" class="control-link-item-display-letter-size" type="range" min="1" max="3000" value="0" tabindex="1">
                   </div>
                   <div class="button-wrap">
-                    <button class="button control-link-item-display-letter-size-default mb-0" type="button">Default letter size</button>
+                    <button class="control-link-item-display-letter-size-default button mb-0" type="button">Default letter size</button>
                   </div>
                   <hr>
                   <div class="input-wrap">
@@ -764,7 +764,7 @@
                     <input id="control-link-item-display-icon-size" class="control-link-item-display-icon-size" type="range" min="1" max="3000" value="0" tabindex="1">
                   </div>
                   <div class="button-wrap">
-                    <button class="button control-link-item-display-icon-size-default mb-0" type="button">Default icon size</button>
+                    <button class="control-link-item-display-icon-size-default button mb-0" type="button">Default icon size</button>
                   </div>
                 </div>
                 <hr>
@@ -777,7 +777,7 @@
                       <input id="control-link-item-name-size" class="control-link-item-name-size" type="range" min="1" max="1500" value="0" tabindex="1">
                     </div>
                     <div class="button-wrap">
-                      <button class="button control-link-item-name-size-default mb-0" type="button">Default icon size</button>
+                      <button class="control-link-item-name-size-default button mb-0" type="button">Default icon size</button>
                     </div>
                   </div>
                 </div>
@@ -911,7 +911,7 @@
                 <input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="1">
               </div>
               <div class="button-wrap">
-                <button class="button control-theme-radius-default mb-0" type="button">Defaul radius size</button>
+                <button class="control-theme-radius-default button mb-0" type="button">Default radius size</button>
               </div>
             </div>
           </div>
@@ -946,7 +946,7 @@
                   <label for="control-theme-accent-random-style-saturated">Saturated colours</label>
                 </div>
                 <div class="button-wrap">
-                  <button class="button control-theme-accent-randomise mb-0" type="button">Randomise now</button>
+                  <button class="control-theme-accent-randomise button mb-0" type="button">Randomise now</button>
                 </div>
               </div>
             </div>
diff --git a/js/version.js b/js/version.js
index b32c8d69..dfe4e2f5 100644
--- a/js/version.js
+++ b/js/version.js
@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "3.8.0";
+  var current = "3.8.1";
 
   var compare = function(a, b) {
     var pa = a.split(".");