diff --git a/examples/demo.css b/examples/demo.css
index 2798012f..d47b1b03 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -1,14 +1,14 @@
 /* https://github.com/theleagueof/league-spartan */
 @font-face {
-    font-family: 'League Spartan';
-    src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot');
-    src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
-         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
-         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'),
-         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
-         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
-    font-weight: bold;
-    font-style: normal;
+  font-family: 'League Spartan';
+  src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot');
+  src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
+  font-weight: bold;
+  font-style: normal;
 }
 
 body {
@@ -72,7 +72,6 @@ h1 {
 }
 
 .details {
-  border-top: 3px solid #444;
   padding-left: 6px;
 }
 
@@ -159,19 +158,19 @@ h1 {
 }
 
 #move-up {
-    position: fixed;
-    bottom: 50px;
-    right: 40px;
-    z-index: 550;
-    display: none;
-    background:transparent;
-    border:none;
+  position: fixed;
+  bottom: 50px;
+  right: 40px;
+  z-index: 550;
+  display: none;
+  background:transparent;
+  border:none;
 }
 
 #move-up i {
-    font-size:60px;
-    opacity:0.7;
-    color:#BABABA;
+  font-size:60px;
+  opacity:0.7;
+  color:#BABABA;
 }
 
 .btn-circle{
@@ -208,7 +207,7 @@ h1 {
 .savesequencemsg{
   display: none;
   text-align: center;
-  }
+}
 
 .notification {
   background-color: #808b96;
@@ -252,7 +251,29 @@ a.name-header{
 }
 
 .step-column{
-    display:flex; 
-    align-content: center;
-    justify-content: center;
+  display:flex; 
+  align-content: center;
+  justify-content: center;
 }
+
+.trash-container button.btn-xs {
+  margin-top: -5px !important;
+}
+
+/*
+.panel-footer .insert-step{
+  margin-left:10px;
+  border-radius:6px;
+  background-color:#fff;
+  border:solid #bababa 1.1px;
+}
+.col-md-4{
+  padding-left: 30px;
+}
+.panel-heading{
+  height:45px;
+}
+.panel-footer{
+  height: 45px;
+}
+*/
diff --git a/examples/index.html b/examples/index.html
index 59ed0364..29bea52e 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -179,14 +179,14 @@
         <div class="panel-body">
           <div style="text-align:center;">
             <h2 style="margin-top:20px">Save</h2>
-              <select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
-                <option>Save as PNG</option>
-                <option>Save as GIF (all steps)</option>
-                <option>Save sequence</option>
-                <option>Save sequence string</option>
-              </select>
-              <button id="saveButton" class="btn btn-primary btn-lg" style="margin-top:20px; margin-bottom:0px;align:center; width:100%;">Save</button>
-              <button class="btn btn-default btn-lg js-view-as-gif" id="gif" style="margin: 0px 35px 0px 35px;width:100%;">Preview GIF</button>
+            <select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
+              <option>Save as PNG</option>
+              <option>Save as GIF (all steps)</option>
+              <option>Save sequence</option>
+              <option>Save sequence string</option>
+            </select>
+            <p><button id="saveButton" class="btn btn-primary btn-lg" style="margin-top:20px; margin-bottom:0px;align:center; width:100%;">Save</button></p>
+            <p><button class="btn btn-default js-view-as-gif" id="gif" style="align:center;">Preview GIF</button></p>
           </div>
         </div>
       </div>
diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
index 0aa81e25..ac12585f 100644
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -26,36 +26,41 @@ function DefaultHtmlStepUi(_sequencer, options) {
     step.ui =
       '\
       <div class="container">\
-    <div class="row step">\
-    <form class="input-form">\
-    <div class="col-md-4 details">\
-    <h3>\
-    <span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
-    '<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
-    '</h3><div class="cal collapse in"><p><i>"'+
-      (step.description || "") +
-      '</i></p></div>\
-    </div>\
-    </form>\
-    <div class="col-md-8 cal collapse in step-column">\
-      <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
-      <div class="step-image">\
-        <a class="cal collapse in"><img alt="" class="img-thumbnail step-thumbnail"/></a>\
-      </div>\
-    </div>\
-    </div>\
-    </div>\
-    </div>';
+        <form class="input-form">\
+          <div class="panel panel-default">\
+            <div class="panel-heading">\
+              <div class="trash-container pull-right"></div>\
+              <h3 class="panel-title">' +  
+                '<span class="toggle">' +step.name + '<span class="caret"></span>\
+              </h3>\
+            </div>\
+            <div class="panel-body cal collapse in">\
+              <div class="row step">\
+                <div class="col-md-4 details">\
+                  <h3>\
+                    <span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
+                      '</h3><div class="cal collapse in"><p><i>'+
+                        (step.description || "") +
+                      '</i></p></div>\
+                </div>\
+              <div class="col-md-8 cal collapse in step-column">\
+                <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
+                  <div class="step-image">\
+                    <a class="cal collapse in"><img class="img-thumbnail step-thumbnail"/></a>\
+                  </div>\
+                </div>\
+              </div>\
+              </div>\
+              <div class="panel-footer cal collapse in"></div>\
+            </div>\
+          </form>\
+        </div>';
 
     var tools =
-    '<div class="cal collapse in"><div class="tools btn-group">\
-    <button confirm="Are you sure?" class="remove btn btn btn-default">\
-      <i class="fa fa-trash"></i>\
-    </button>\
-    <button class="btn  insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >\
-      <i class="fa fa-plus"></i> Add\
-    </button>\
-    </div>\
+    '<div class="trash">\
+      <button confirm="Are you sure?" class="remove btn btn-default btn-xs">\
+        <i class="fa fa-trash"></i>\
+      </button>\
     </div>';
 
     var util = intermediateHtmlStepUi(_sequencer, step);
@@ -125,23 +130,24 @@ function DefaultHtmlStepUi(_sequencer, options) {
                          </div>";
         step.ui.querySelector("div.details").appendChild(div);
       }
-
-      $(step.ui.querySelector("div.details")).append(
-        '<div class="cal collapse in"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
+      $(step.ui.querySelector("div.panel-footer")).append(
+        '<div class="cal collapse in"><button type="submit" class="btn btn-sm btn-default btn-save" disabled = "true" >Apply</button> <small style="padding-top:2px;">Press apply to see changes</small></div>'
       );
-
-      
+      $(step.ui.querySelector("div.panel-footer")).prepend(
+        '<button class="pull-right btn btn-default btn-sm insert-step" >\
+      <i class="fa fa-plus"></i> Insert Module\
+      </button>'
+      );  
     }
 
     if (step.name != "load-image") {
       step.ui
-        .querySelector("div.details")
-        .appendChild(
+        .querySelector("div.trash-container")
+        .prepend(
           parser.parseFromString(tools, "text/html").querySelector("div")
         );
       $(step.ui.querySelectorAll(".remove")).on('click', function() {notify('Step Removed','remove-notification')});  
-      $(step.ui.querySelectorAll(".insert-step")).on('click', function() { util.insertStep(step.ID) });
-
+      $(step.ui.querySelectorAll(".insert-step")).on('click', function() { util.insertStep(step.ID) });    
       // Insert the step's UI in the right place
       if (stepOptions.index == _sequencer.steps.length) {
         stepsEl.appendChild(step.ui);
@@ -319,7 +325,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
   
     $('#'+id).fadeIn(500).delay(200).fadeOut(500);
   }
-
+    
+  
   return {
     getPreview: getPreview,
     onSetup: onSetup,