diff --git a/build/css/main.css b/build/css/main.css
index 1d29458c..cb08d536 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -237,8 +237,9 @@ th {
     page-break-after: avoid; }
   .navbar {
     display: none; }
-  .btn > .caret,
-  .dropup > .btn > .caret {
+  .btn > .caret, .progress-button > .caret,
+  .dropup > .btn > .caret,
+  .dropup > .progress-button > .caret {
     border-top-color: #000 !important; }
   .label {
     border: 1px solid #000; }
@@ -256,7 +257,7 @@ th {
   src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot");
   src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
 
-.glyphicon {
+.glyphicon, .tick {
   position: relative;
   top: 1px;
   display: inline-block;
@@ -322,10 +323,10 @@ th {
 .glyphicon-th-list:before {
   content: "\e012"; }
 
-.glyphicon-ok:before {
+.glyphicon-ok:before, .tick--success:before {
   content: "\e013"; }
 
-.glyphicon-remove:before {
+.glyphicon-remove:before, .tick--error:before {
   content: "\e014"; }
 
 .glyphicon-zoom-in:before {
@@ -2373,46 +2374,54 @@ input[type="search"] {
   input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control,
   .input-group-sm > input[type="date"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="date"].btn,
+  .input-group-sm > .input-group-btn > input[type="date"].progress-button,
   .input-group-sm input[type="date"],
   input[type="time"].input-sm,
   .input-group-sm > input[type="time"].form-control,
   .input-group-sm > input[type="time"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="time"].btn,
+  .input-group-sm > .input-group-btn > input[type="time"].progress-button,
   .input-group-sm
   input[type="time"],
   input[type="datetime-local"].input-sm,
   .input-group-sm > input[type="datetime-local"].form-control,
   .input-group-sm > input[type="datetime-local"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="datetime-local"].btn,
+  .input-group-sm > .input-group-btn > input[type="datetime-local"].progress-button,
   .input-group-sm
   input[type="datetime-local"],
   input[type="month"].input-sm,
   .input-group-sm > input[type="month"].form-control,
   .input-group-sm > input[type="month"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="month"].btn,
+  .input-group-sm > .input-group-btn > input[type="month"].progress-button,
   .input-group-sm
   input[type="month"] {
     line-height: 30px; }
   input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control,
   .input-group-lg > input[type="date"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="date"].btn,
+  .input-group-lg > .input-group-btn > input[type="date"].progress-button,
   .input-group-lg input[type="date"],
   input[type="time"].input-lg,
   .input-group-lg > input[type="time"].form-control,
   .input-group-lg > input[type="time"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="time"].btn,
+  .input-group-lg > .input-group-btn > input[type="time"].progress-button,
   .input-group-lg
   input[type="time"],
   input[type="datetime-local"].input-lg,
   .input-group-lg > input[type="datetime-local"].form-control,
   .input-group-lg > input[type="datetime-local"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="datetime-local"].btn,
+  .input-group-lg > .input-group-btn > input[type="datetime-local"].progress-button,
   .input-group-lg
   input[type="datetime-local"],
   input[type="month"].input-lg,
   .input-group-lg > input[type="month"].form-control,
   .input-group-lg > input[type="month"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="month"].btn,
+  .input-group-lg > .input-group-btn > input[type="month"].progress-button,
   .input-group-lg
   input[type="month"] {
     line-height: 45px; } }
@@ -2490,15 +2499,18 @@ fieldset[disabled]
   min-height: 31px; }
   .form-control-static.input-lg, .input-group-lg > .form-control-static.form-control,
   .input-group-lg > .form-control-static.input-group-addon,
-  .input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
+  .input-group-lg > .input-group-btn > .form-control-static.btn,
+  .input-group-lg > .input-group-btn > .form-control-static.progress-button, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
   .input-group-sm > .form-control-static.input-group-addon,
-  .input-group-sm > .input-group-btn > .form-control-static.btn {
+  .input-group-sm > .input-group-btn > .form-control-static.btn,
+  .input-group-sm > .input-group-btn > .form-control-static.progress-button {
     padding-left: 0;
     padding-right: 0; }
 
 .input-sm, .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
-.input-group-sm > .input-group-btn > .btn {
+.input-group-sm > .input-group-btn > .btn,
+.input-group-sm > .input-group-btn > .progress-button {
   height: 30px;
   padding: 5px 10px;
   font-size: 12px;
@@ -2507,17 +2519,20 @@ fieldset[disabled]
 
 select.input-sm, .input-group-sm > select.form-control,
 .input-group-sm > select.input-group-addon,
-.input-group-sm > .input-group-btn > select.btn {
+.input-group-sm > .input-group-btn > select.btn,
+.input-group-sm > .input-group-btn > select.progress-button {
   height: 30px;
   line-height: 30px; }
 
 textarea.input-sm, .input-group-sm > textarea.form-control,
 .input-group-sm > textarea.input-group-addon,
 .input-group-sm > .input-group-btn > textarea.btn,
+.input-group-sm > .input-group-btn > textarea.progress-button,
 select[multiple].input-sm,
 .input-group-sm > select[multiple].form-control,
 .input-group-sm > select[multiple].input-group-addon,
-.input-group-sm > .input-group-btn > select[multiple].btn {
+.input-group-sm > .input-group-btn > select[multiple].btn,
+.input-group-sm > .input-group-btn > select[multiple].progress-button {
   height: auto; }
 
 .form-group-sm .form-control {
@@ -2544,7 +2559,8 @@ select[multiple].input-sm,
 
 .input-lg, .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
-.input-group-lg > .input-group-btn > .btn {
+.input-group-lg > .input-group-btn > .btn,
+.input-group-lg > .input-group-btn > .progress-button {
   height: 45px;
   padding: 10px 16px;
   font-size: 17px;
@@ -2553,17 +2569,20 @@ select[multiple].input-sm,
 
 select.input-lg, .input-group-lg > select.form-control,
 .input-group-lg > select.input-group-addon,
-.input-group-lg > .input-group-btn > select.btn {
+.input-group-lg > .input-group-btn > select.btn,
+.input-group-lg > .input-group-btn > select.progress-button {
   height: 45px;
   line-height: 45px; }
 
 textarea.input-lg, .input-group-lg > textarea.form-control,
 .input-group-lg > textarea.input-group-addon,
 .input-group-lg > .input-group-btn > textarea.btn,
+.input-group-lg > .input-group-btn > textarea.progress-button,
 select[multiple].input-lg,
 .input-group-lg > select[multiple].form-control,
 .input-group-lg > select[multiple].input-group-addon,
-.input-group-lg > .input-group-btn > select[multiple].btn {
+.input-group-lg > .input-group-btn > select[multiple].btn,
+.input-group-lg > .input-group-btn > select[multiple].progress-button {
   height: auto; }
 
 .form-group-lg .form-control {
@@ -2608,6 +2627,7 @@ select[multiple].input-lg,
 .input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback,
 .input-group-lg > .input-group-addon + .form-control-feedback,
 .input-group-lg > .input-group-btn > .btn + .form-control-feedback,
+.input-group-lg > .input-group-btn > .progress-button + .form-control-feedback,
 .input-group-lg + .form-control-feedback,
 .form-group-lg .form-control + .form-control-feedback {
   width: 45px;
@@ -2617,6 +2637,7 @@ select[multiple].input-lg,
 .input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback,
 .input-group-sm > .input-group-addon + .form-control-feedback,
 .input-group-sm > .input-group-btn > .btn + .form-control-feedback,
+.input-group-sm > .input-group-btn > .progress-button + .form-control-feedback,
 .input-group-sm + .form-control-feedback,
 .form-group-sm .form-control + .form-control-feedback {
   width: 30px;
@@ -2801,7 +2822,7 @@ select[multiple].input-lg,
     padding-top: 6px;
     font-size: 12px; } }
 
-.btn {
+.btn, .progress-button {
   display: inline-block;
   margin-bottom: 0;
   font-weight: normal;
@@ -2820,28 +2841,30 @@ select[multiple].input-lg,
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none; }
-  .btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
+  .btn:focus, .progress-button:focus, .btn.focus, .focus.progress-button, .btn:active:focus, .progress-button:active:focus, .btn:active.focus, .progress-button:active.focus, .btn.active:focus, .active.progress-button:focus, .btn.active.focus, .active.focus.progress-button {
     outline: thin dotted;
     outline: 5px auto -webkit-focus-ring-color;
     outline-offset: -2px; }
-  .btn:hover, .btn:focus, .btn.focus {
+  .btn:hover, .progress-button:hover, .btn:focus, .progress-button:focus, .btn.focus, .focus.progress-button {
     color: #333;
     text-decoration: none; }
-  .btn:active, .btn.active {
+  .btn:active, .progress-button:active, .btn.active, .active.progress-button {
     outline: 0;
     background-image: none;
     -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
-  .btn.disabled, .btn[disabled],
-  fieldset[disabled] .btn {
+  .btn.disabled, .disabled.progress-button, .btn[disabled], [disabled].progress-button,
+  fieldset[disabled] .btn,
+  fieldset[disabled] .progress-button {
     cursor: initial;
     opacity: 0.65;
     filter: alpha(opacity=65);
     -webkit-box-shadow: none;
     box-shadow: none; }
 
-a.btn.disabled,
-fieldset[disabled] a.btn {
+a.btn.disabled, a.disabled.progress-button,
+fieldset[disabled] a.btn,
+fieldset[disabled] a.progress-button {
   pointer-events: none; }
 
 .btn-default {
@@ -2881,40 +2904,48 @@ fieldset[disabled] a.btn {
     color: #fff;
     background-color: #333; }
 
-.btn-primary {
+.btn-primary, .progress-button--primary {
   color: #fff;
   background-color: #5793db;
   border-color: #4286d7; }
-  .btn-primary:focus, .btn-primary.focus {
+  .btn-primary:focus, .progress-button--primary:focus, .btn-primary.focus, .focus.progress-button--primary {
     color: #fff;
     background-color: #2d78d2;
     border-color: #1b487e; }
-  .btn-primary:hover {
+  .btn-primary:hover, .progress-button--primary:hover {
     color: #fff;
     background-color: #2d78d2;
     border-color: #2767b5; }
-  .btn-primary:active, .btn-primary.active,
-  .open > .btn-primary.dropdown-toggle {
+  .btn-primary:active, .progress-button--primary:active, .btn-primary.active, .active.progress-button--primary,
+  .open > .btn-primary.dropdown-toggle,
+  .open > .dropdown-toggle.progress-button--primary {
     color: #fff;
     background-color: #2d78d2;
     border-color: #2767b5; }
-    .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus,
+    .btn-primary:active:hover, .progress-button--primary:active:hover, .btn-primary:active:focus, .progress-button--primary:active:focus, .btn-primary:active.focus, .progress-button--primary:active.focus, .btn-primary.active:hover, .active.progress-button--primary:hover, .btn-primary.active:focus, .active.progress-button--primary:focus, .btn-primary.active.focus, .active.focus.progress-button--primary,
     .open > .btn-primary.dropdown-toggle:hover,
+    .open > .dropdown-toggle.progress-button--primary:hover,
     .open > .btn-primary.dropdown-toggle:focus,
-    .open > .btn-primary.dropdown-toggle.focus {
+    .open > .dropdown-toggle.progress-button--primary:focus,
+    .open > .btn-primary.dropdown-toggle.focus,
+    .open > .dropdown-toggle.focus.progress-button--primary {
       color: #fff;
       background-color: #2767b5;
       border-color: #1b487e; }
-  .btn-primary:active, .btn-primary.active,
-  .open > .btn-primary.dropdown-toggle {
+  .btn-primary:active, .progress-button--primary:active, .btn-primary.active, .active.progress-button--primary,
+  .open > .btn-primary.dropdown-toggle,
+  .open > .dropdown-toggle.progress-button--primary {
     background-image: none; }
-  .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,
+  .btn-primary.disabled:hover, .disabled.progress-button--primary:hover, .btn-primary.disabled:focus, .disabled.progress-button--primary:focus, .btn-primary.disabled.focus, .disabled.focus.progress-button--primary, .btn-primary[disabled]:hover, [disabled].progress-button--primary:hover, .btn-primary[disabled]:focus, [disabled].progress-button--primary:focus, .btn-primary[disabled].focus, [disabled].focus.progress-button--primary,
   fieldset[disabled] .btn-primary:hover,
+  fieldset[disabled] .progress-button--primary:hover,
   fieldset[disabled] .btn-primary:focus,
-  fieldset[disabled] .btn-primary.focus {
+  fieldset[disabled] .progress-button--primary:focus,
+  fieldset[disabled] .btn-primary.focus,
+  fieldset[disabled] .focus.progress-button--primary {
     background-color: #5793db;
     border-color: #4286d7; }
-  .btn-primary .badge {
+  .btn-primary .badge, .progress-button--primary .badge {
     color: #5793db;
     background-color: #fff; }
 
@@ -3087,19 +3118,19 @@ fieldset[disabled] a.btn {
     color: #ddd;
     text-decoration: none; }
 
-.btn-lg, .btn-group-lg > .btn {
+.btn-lg, .btn-group-lg > .btn, .btn-group-lg > .progress-button {
   padding: 10px 16px;
   font-size: 17px;
   line-height: 1.33333;
   border-radius: 6px; }
 
-.btn-sm, .btn-group-sm > .btn {
+.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .progress-button {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px; }
 
-.btn-xs, .btn-group-xs > .btn {
+.btn-xs, .btn-group-xs > .btn, .btn-group-xs > .progress-button {
   padding: 1px 5px;
   font-size: 12px;
   line-height: 1.5;
@@ -3283,20 +3314,27 @@ tbody.collapse.in {
   position: relative;
   display: inline-block;
   vertical-align: middle; }
-  .btn-group > .btn,
-  .btn-group-vertical > .btn {
+  .btn-group > .btn, .btn-group > .progress-button,
+  .btn-group-vertical > .btn,
+  .btn-group-vertical > .progress-button {
     position: relative;
     float: left; }
-    .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
+    .btn-group > .btn:hover, .btn-group > .progress-button:hover, .btn-group > .btn:focus, .btn-group > .progress-button:focus, .btn-group > .btn:active, .btn-group > .progress-button:active, .btn-group > .btn.active, .btn-group > .active.progress-button,
     .btn-group-vertical > .btn:hover,
+    .btn-group-vertical > .progress-button:hover,
     .btn-group-vertical > .btn:focus,
+    .btn-group-vertical > .progress-button:focus,
     .btn-group-vertical > .btn:active,
-    .btn-group-vertical > .btn.active {
+    .btn-group-vertical > .progress-button:active,
+    .btn-group-vertical > .btn.active,
+    .btn-group-vertical > .active.progress-button {
       z-index: 2; }
 
-.btn-group .btn + .btn,
+.btn-group .btn + .btn, .btn-group .progress-button + .btn, .btn-group .btn + .progress-button, .btn-group .progress-button + .progress-button,
 .btn-group .btn + .btn-group,
+.btn-group .progress-button + .btn-group,
 .btn-group .btn-group + .btn,
+.btn-group .btn-group + .progress-button,
 .btn-group .btn-group + .btn-group {
   margin-left: -1px; }
 
@@ -3307,25 +3345,25 @@ tbody.collapse.in {
     display: table; }
   .btn-toolbar:after {
     clear: both; }
-  .btn-toolbar .btn,
+  .btn-toolbar .btn, .btn-toolbar .progress-button,
   .btn-toolbar .btn-group,
   .btn-toolbar .input-group {
     float: left; }
-  .btn-toolbar > .btn,
+  .btn-toolbar > .btn, .btn-toolbar > .progress-button,
   .btn-toolbar > .btn-group,
   .btn-toolbar > .input-group {
     margin-left: 5px; }
 
-.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
   border-radius: 0; }
 
-.btn-group > .btn:first-child {
+.btn-group > .btn:first-child, .btn-group > .progress-button:first-child {
   margin-left: 0; }
-  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:first-child:not(:last-child):not(.dropdown-toggle) {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0; }
 
-.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .btn:last-child:not(:first-child), .btn-group > .progress-button:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
@@ -3333,15 +3371,15 @@ tbody.collapse.in {
 .btn-group > .btn-group {
   float: left; }
 
-.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group > .btn-group:not(:first-child):not(:last-child) > .progress-button {
   border-radius: 0; }
 
-.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
+.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
 .btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0; }
 
-.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
+.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3349,11 +3387,11 @@ tbody.collapse.in {
 .btn-group.open .dropdown-toggle {
   outline: 0; }
 
-.btn-group > .btn + .dropdown-toggle {
+.btn-group > .btn + .dropdown-toggle, .btn-group > .progress-button + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px; }
 
-.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle, .btn-group-lg.btn-group > .progress-button + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px; }
 
@@ -3364,19 +3402,20 @@ tbody.collapse.in {
     -webkit-box-shadow: none;
     box-shadow: none; }
 
-.btn .caret {
+.btn .caret, .progress-button .caret {
   margin-left: 0; }
 
-.btn-lg .caret, .btn-group-lg > .btn .caret {
+.btn-lg .caret, .btn-group-lg > .btn .caret, .btn-group-lg > .progress-button .caret {
   border-width: 5px 5px 0;
   border-bottom-width: 0; }
 
-.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret {
+.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret, .dropup .btn-group-lg > .progress-button .caret {
   border-width: 0 5px 5px; }
 
-.btn-group-vertical > .btn,
+.btn-group-vertical > .btn, .btn-group-vertical > .progress-button,
 .btn-group-vertical > .btn-group,
-.btn-group-vertical > .btn-group > .btn {
+.btn-group-vertical > .btn-group > .btn,
+.btn-group-vertical > .btn-group > .progress-button {
   display: block;
   float: none;
   width: 100%;
@@ -3389,40 +3428,42 @@ tbody.collapse.in {
 .btn-group-vertical > .btn-group:after {
   clear: both; }
 
-.btn-group-vertical > .btn-group > .btn {
+.btn-group-vertical > .btn-group > .btn, .btn-group-vertical > .btn-group > .progress-button {
   float: none; }
 
-.btn-group-vertical > .btn + .btn,
+.btn-group-vertical > .btn + .btn, .btn-group-vertical > .progress-button + .btn, .btn-group-vertical > .btn + .progress-button, .btn-group-vertical > .progress-button + .progress-button,
 .btn-group-vertical > .btn + .btn-group,
+.btn-group-vertical > .progress-button + .btn-group,
 .btn-group-vertical > .btn-group + .btn,
+.btn-group-vertical > .btn-group + .progress-button,
 .btn-group-vertical > .btn-group + .btn-group {
   margin-top: -1px;
   margin-left: 0; }
 
-.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
+.btn-group-vertical > .btn:not(:first-child):not(:last-child), .btn-group-vertical > .progress-button:not(:first-child):not(:last-child) {
   border-radius: 0; }
 
-.btn-group-vertical > .btn:first-child:not(:last-child) {
+.btn-group-vertical > .btn:first-child:not(:last-child), .btn-group-vertical > .progress-button:first-child:not(:last-child) {
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0; }
 
-.btn-group-vertical > .btn:last-child:not(:first-child) {
+.btn-group-vertical > .btn:last-child:not(:first-child), .btn-group-vertical > .progress-button:last-child:not(:first-child) {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px; }
 
-.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .progress-button {
   border-radius: 0; }
 
-.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
+.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
 .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0; }
 
-.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
+.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group-vertical > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
   border-top-right-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3431,20 +3472,23 @@ tbody.collapse.in {
   width: 100%;
   table-layout: fixed;
   border-collapse: separate; }
-  .btn-group-justified > .btn,
+  .btn-group-justified > .btn, .btn-group-justified > .progress-button,
   .btn-group-justified > .btn-group {
     float: none;
     display: table-cell;
     width: 1%; }
-  .btn-group-justified > .btn-group .btn {
+  .btn-group-justified > .btn-group .btn, .btn-group-justified > .btn-group .progress-button {
     width: 100%; }
   .btn-group-justified > .btn-group .dropdown-menu {
     left: auto; }
 
-[data-toggle="buttons"] > .btn input[type="radio"],
+[data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .progress-button input[type="radio"],
 [data-toggle="buttons"] > .btn input[type="checkbox"],
+[data-toggle="buttons"] > .progress-button input[type="checkbox"],
 [data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
-[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
+[data-toggle="buttons"] > .btn-group > .progress-button input[type="radio"],
+[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"],
+[data-toggle="buttons"] > .btn-group > .progress-button input[type="checkbox"] {
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none; }
@@ -3493,13 +3537,15 @@ tbody.collapse.in {
   border-radius: 4px; }
   .input-group-addon.input-sm,
   .input-group-sm > .input-group-addon,
-  .input-group-sm > .input-group-btn > .input-group-addon.btn {
+  .input-group-sm > .input-group-btn > .input-group-addon.btn,
+  .input-group-sm > .input-group-btn > .input-group-addon.progress-button {
     padding: 5px 10px;
     font-size: 12px;
     border-radius: 3px; }
   .input-group-addon.input-lg,
   .input-group-lg > .input-group-addon,
-  .input-group-lg > .input-group-btn > .input-group-addon.btn {
+  .input-group-lg > .input-group-btn > .input-group-addon.btn,
+  .input-group-lg > .input-group-btn > .input-group-addon.progress-button {
     padding: 10px 16px;
     font-size: 17px;
     border-radius: 6px; }
@@ -3510,10 +3556,14 @@ tbody.collapse.in {
 .input-group .form-control:first-child,
 .input-group-addon:first-child,
 .input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .progress-button,
 .input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:first-child > .btn-group > .progress-button,
 .input-group-btn:first-child > .dropdown-toggle,
 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
-.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+.input-group-btn:last-child > .progress-button:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
+.input-group-btn:last-child > .btn-group:not(:last-child) > .progress-button {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0; }
 
@@ -3523,10 +3573,14 @@ tbody.collapse.in {
 .input-group .form-control:last-child,
 .input-group-addon:last-child,
 .input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .progress-button,
 .input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:last-child > .btn-group > .progress-button,
 .input-group-btn:last-child > .dropdown-toggle,
 .input-group-btn:first-child > .btn:not(:first-child),
-.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+.input-group-btn:first-child > .progress-button:not(:first-child),
+.input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
+.input-group-btn:first-child > .btn-group:not(:first-child) > .progress-button {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3537,16 +3591,16 @@ tbody.collapse.in {
   position: relative;
   font-size: 0;
   white-space: nowrap; }
-  .input-group-btn > .btn {
+  .input-group-btn > .btn, .input-group-btn > .progress-button {
     position: relative; }
-    .input-group-btn > .btn + .btn {
+    .input-group-btn > .btn + .btn, .input-group-btn > .progress-button + .btn, .input-group-btn > .btn + .progress-button, .input-group-btn > .progress-button + .progress-button {
       margin-left: -1px; }
-    .input-group-btn > .btn:hover, .input-group-btn > .btn:focus, .input-group-btn > .btn:active {
+    .input-group-btn > .btn:hover, .input-group-btn > .progress-button:hover, .input-group-btn > .btn:focus, .input-group-btn > .progress-button:focus, .input-group-btn > .btn:active, .input-group-btn > .progress-button:active {
       z-index: 2; }
-  .input-group-btn:first-child > .btn,
+  .input-group-btn:first-child > .btn, .input-group-btn:first-child > .progress-button,
   .input-group-btn:first-child > .btn-group {
     margin-right: -1px; }
-  .input-group-btn:last-child > .btn,
+  .input-group-btn:last-child > .btn, .input-group-btn:last-child > .progress-button,
   .input-group-btn:last-child > .btn-group {
     z-index: 2;
     margin-left: -1px; }
@@ -3925,10 +3979,10 @@ tbody.collapse.in {
 .navbar-btn {
   margin-top: 9px;
   margin-bottom: 9px; }
-  .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn {
+  .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn, .btn-group-sm > .navbar-btn.progress-button {
     margin-top: 10px;
     margin-bottom: 10px; }
-  .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn {
+  .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn, .btn-group-xs > .navbar-btn.progress-button {
     margin-top: 14px;
     margin-bottom: 14px; }
 
@@ -4221,7 +4275,7 @@ tbody.collapse.in {
   border-radius: .25em; }
   .label:empty {
     display: none; }
-  .btn .label {
+  .btn .label, .progress-button .label {
     position: relative;
     top: -1px; }
 
@@ -4275,11 +4329,12 @@ a.label:hover, a.label:focus {
   border-radius: 10px; }
   .badge:empty {
     display: none; }
-  .btn .badge {
+  .btn .badge, .progress-button .badge {
     position: relative;
     top: -1px; }
-  .btn-xs .badge, .btn-group-xs > .btn .badge,
-  .btn-group-xs > .btn .badge {
+  .btn-xs .badge, .btn-group-xs > .btn .badge, .btn-group-xs > .progress-button .badge,
+  .btn-group-xs > .btn .badge,
+  .btn-group-xs > .progress-button .badge {
     top: 0;
     padding: 1px 5px; }
   .list-group-item.active > .badge,
@@ -5169,10 +5224,10 @@ button.close {
     display: table; }
   .modal-footer:after {
     clear: both; }
-  .modal-footer .btn + .btn {
+  .modal-footer .btn + .btn, .modal-footer .progress-button + .btn, .modal-footer .btn + .progress-button, .modal-footer .progress-button + .progress-button {
     margin-left: 5px;
     margin-bottom: 0; }
-  .modal-footer .btn-group .btn + .btn {
+  .modal-footer .btn-group .btn + .btn, .modal-footer .btn-group .progress-button + .btn, .modal-footer .btn-group .btn + .progress-button, .modal-footer .btn-group .progress-button + .progress-button {
     margin-left: -1px; }
   .modal-footer .btn-block + .btn-block {
     margin-left: 0; }
@@ -5594,7 +5649,7 @@ button.close {
   color: #fff;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
-  .carousel-caption .btn {
+  .carousel-caption .btn, .carousel-caption .progress-button {
     text-shadow: none; }
 
 @media screen and (min-width: 768px) {
@@ -5832,6 +5887,31 @@ button.close {
   .hidden-print {
     display: none !important; } }
 
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+html {
+  background-color: #535760; }
+
+.checkbox input[type="checkbox"] {
+  position: initial;
+  margin-right: 2px; }
+
+.checkbox input[type="checkbox"]:not(:checked) + * {
+  color: #ddd; }
+
 /*
  * Copyright 2016 Resin.io
  *
@@ -5854,6 +5934,9 @@ button.close {
   margin-top: 15px;
   margin-bottom: 15px; }
 
+.space-top-medium {
+  margin-top: 15px; }
+
 .space-vertical-large {
   margin-top: 30px;
   margin-bottom: 30px; }
@@ -5864,37 +5947,170 @@ button.close {
 .space-right-tiny {
   margin-right: 5px; }
 
-html {
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.badge {
+  border: 2px solid;
+  border-radius: 50%;
+  padding: 7px 10px;
+  position: relative;
+  z-index: 10;
+  letter-spacing: 0;
   background-color: #535760; }
 
-hero-badge .badge {
-  background-color: #535760; }
-
-hero-badge[disabled] .badge {
+.badge[disabled] {
   background-color: #5c5e5c;
   color: #787c7f; }
 
-hero-icon[disabled] hero-caption {
-  color: #787c7f; }
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.caption {
+  font-weight: bold;
+  font-size: 11px;
+  margin-bottom: 0;
+  text-transform: uppercase; }
 
-hero-button .btn {
-  min-width: 170px; }
-  hero-button .btn[disabled] {
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+button.btn, button.progress-button {
+  padding: 10px;
+  padding-top: 11px;
+  border-radius: 2px;
+  border: none;
+  letter-spacing: 0.5px;
+  outline: none;
+  position: relative; }
+  button.btn[disabled], button[disabled].progress-button {
     background-color: #313339;
     color: #787c7f;
     pointer-events: none; }
-    hero-button .btn[disabled]:hover {
+    button.btn[disabled]:hover, button[disabled].progress-button:hover {
       background-color: #36383e; }
 
-hero-progress-button .bar {
-  background: #6ca1e0; }
+.btn:not(.btn-link), .progress-button:not(.btn-link) {
+  min-width: 170px; }
 
-hero-progress-button[percentage="100"][active="false"] .bar {
+.btn > .glyphicon, .progress-button > .glyphicon, .btn > .tick, .progress-button > .tick {
+  top: 2px;
+  margin-right: 2px; }
+
+/*
+ * Remove blue/orange outline
+ * !important is needed here for some reason
+ * despite the rule having top precedence.
+ */
+button.btn:focus, button.progress-button:focus {
+  outline: none !important; }
+
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.tick {
+  display: inline-block;
+  border-radius: 50%;
+  padding: 5px;
+  font-size: 18px; }
+
+.tick--success {
+  background-color: #5fb835; }
+
+.tick--error {
+  background-color: #d9534f; }
+
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.progress-button[percentage="100"][active="false"] .progress-button__bar {
   background-color: #5cb85c; }
 
-hero-progress-button[percentage="100"][active="true"] .bar {
+.progress-button[percentage="100"][active="true"] .progress-button__bar {
   background-color: #f0ad4e; }
 
+.progress-button[active="true"] {
+  pointer-events: none; }
+
+.progress-button--primary .progress-button__bar {
+  background: #6ca1e0; }
+
+.progress-button__content {
+  position: relative;
+  z-index: 10;
+  transition: transform 0.3s; }
+
+.progress-button__bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 100%;
+  transition: width 0.3s, opacity 0.3s; }
+
+hero-icon[disabled] .caption {
+  color: #787c7f; }
+
 hero-icon[disabled] path {
   fill: #787c7f; }
 
@@ -5949,9 +6165,6 @@ body {
   margin-top: 10px;
   margin-bottom: -40px;
   color: #85898c;
-  font-size: 12px; }
-
-.tiny {
   font-size: 10px; }
 
 .separator-xs {
@@ -5964,23 +6177,13 @@ body {
   margin: 0 auto 15px;
   max-width: 165px; }
 
-.checkbox input[type="checkbox"] {
-  position: initial;
-  margin-right: 2px; }
-
-.checkbox input[type="checkbox"]:not(:checked) + * {
-  color: #ddd; }
-
 .wrapper {
   height: 100%;
   margin: 20px 60px; }
 
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0; }
-
 .section-header {
   padding: 5px 8px;
   font-size: 15px; }
-  .section-header > .btn {
+  .section-header > .btn, .section-header > .progress-button {
     padding-left: 3px;
     padding-right: 3px; }
diff --git a/lib/browser/app.js b/lib/browser/app.js
index 7adb6a04..9d8c5ab0 100644
--- a/lib/browser/app.js
+++ b/lib/browser/app.js
@@ -38,6 +38,7 @@ require('./browser/modules/notifier');
 require('./browser/modules/analytics');
 require('./browser/controllers/finish');
 require('./browser/controllers/navigation');
+require('./browser/components/progress-button');
 
 const app = angular.module('Etcher', [
   'ui.router',
@@ -54,7 +55,10 @@ const app = angular.module('Etcher', [
 
   // Controllers
   'Etcher.controllers.finish',
-  'Etcher.controllers.navigation'
+  'Etcher.controllers.navigation',
+
+  // Components
+  'Etcher.Components.ProgressButton'
 ]);
 
 app.config(function($stateProvider, $urlRouterProvider) {
diff --git a/lib/browser/components/progress-button.js b/lib/browser/components/progress-button.js
new file mode 100644
index 00000000..a7ee4920
--- /dev/null
+++ b/lib/browser/components/progress-button.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+/**
+ * @module Etcher.Components.ProgressButton
+ */
+
+const angular = require('angular');
+const ProgressButton = angular.module('Etcher.Components.ProgressButton', []);
+
+ProgressButton.directive('progressButton', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: {
+      percentage: '='
+    },
+    template: [
+      '<button class="progress-button progress-button--primary">',
+        '<span class="progress-button__content" ng-transclude></span>',
+        '<span class="progress-button__bar" ng-style="{ width: percentage + \'%\' }"></span>',
+      '</button>'
+    ].join('\n')
+  };
+});
diff --git a/lib/components/hero-badge.html b/lib/components/hero-badge.html
deleted file mode 100644
index 017a68fb..00000000
--- a/lib/components/hero-badge.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<dom-module id="hero-badge">
-  <template>
-    <style is="custom-style">
-      :host ::content .badge {
-        border: 2px solid;
-        border-radius: 50%;
-        padding: 7px 10px;
-        position: relative;
-        z-index: 10;
-        letter-spacing: 0;
-      }
-    </style>
-
-    <span class="badge">
-      <content></content>
-    </span>
-  </template>
-
-  <script>
-    Polymer({ is: 'hero-badge' });
-  </script>
-</dom-module>
diff --git a/lib/components/hero-button.html b/lib/components/hero-button.html
deleted file mode 100644
index dfe1a4c1..00000000
--- a/lib/components/hero-button.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<dom-module id="hero-button">
-  <template>
-    <style>
-      :host ::content button.btn {
-        padding: 10px;
-        padding-top: 11px;
-
-        border-radius: 2px;
-        border: none;
-
-        letter-spacing: 0.5px;
-        outline: none;
-
-        position: relative;
-      }
-
-      :host ::content .glyphicon {
-        top: 2px;
-        margin-right: 2px;
-      }
-
-      /*
-       * Remove blue/orange outline
-       * !important is needed here for some reason
-       * despite the rule having top precedence.
-       */
-      :host ::content button.btn:focus {
-        outline: none !important;
-      }
-    </style>
-
-    <button type="button" class="btn" disabled="{{disabled}}">
-      <content></content>
-    </button>
-  </template>
-
-  <script>
-    Polymer({
-      is: 'hero-button',
-      properties: {
-        disabled: {
-          type: String
-        },
-        type: {
-          type: String,
-          value: 'primary'
-        }
-      },
-      ready: function() {
-        'use strict';
-
-        this.querySelector('.btn').className += ` btn-${this.type}`;
-      }
-    });
-  </script>
-</dom-module>
diff --git a/lib/components/hero-caption.html b/lib/components/hero-caption.html
deleted file mode 100644
index 082f259c..00000000
--- a/lib/components/hero-caption.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<dom-module id="hero-caption">
-  <template>
-    <style>
-      :host ::content strong {
-        font-size: 11px;
-      }
-    </style>
-    <div>
-      <strong>
-        <content></content>
-      </strong>
-    </div>
-  </template>
-
-  <script>
-    Polymer({ is: 'hero-caption' });
-  </script>
-</dom-module>
diff --git a/lib/components/hero-icon.html b/lib/components/hero-icon.html
index 49a7fd61..25437cc6 100644
--- a/lib/components/hero-icon.html
+++ b/lib/components/hero-icon.html
@@ -1,10 +1,10 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="hero-caption.html">
 
 <dom-module id="hero-icon">
   <template>
     <style>
-      :host ::content div {
+      :host ::content .caption {
+        display: block;
         margin-top: 10px;
       }
 
@@ -15,7 +15,7 @@
     <div class="icon"></div>
 
     <template is="dom-if" if="{{label}}">
-      <hero-caption>{{label}}</hero-caption>
+      <span class="caption">{{label}}</span>
     </template>
   </template>
 
diff --git a/lib/components/hero-progress-button.html b/lib/components/hero-progress-button.html
deleted file mode 100644
index 89d78ea8..00000000
--- a/lib/components/hero-progress-button.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="hero-button.html">
-
-<!-- From http://tympanus.net/Development/ProgressButtonStyles/ -->
-<dom-module id="hero-progress-button">
-  <template>
-    <style>
-      :host[active="true"] {
-        pointer-events: none;
-      }
-
-      :host ::content .text {
-        position: relative;
-        z-index: 10;
-        transition: transform 0.3s;
-      }
-
-      :host ::content .bar {
-        position: absolute;
-        left: 0;
-        top: 0;
-
-        width: 0;
-        height: 100%;
-
-        transition: width 0.3s, opacity 0.3s;
-      }
-    </style>
-
-    <hero-button disabled="{{disabled}}">
-      <span class="text">
-        <content></content>
-      </span>
-      <span class="bar"></span>
-    </hero-button>
-  </template>
-
-  <script>
-    Polymer({
-      is: 'hero-progress-button',
-      properties: {
-        active: {
-          type: Boolean
-        },
-        disabled: {
-          type: String
-        },
-        percentage: {
-          type: Number,
-          value: 0,
-          notify: true
-        }
-      },
-      setProgress: function(percentage) {
-        'use strict';
-
-        let bar = this.querySelector('.bar');
-        bar.style.width = percentage + '%';
-      },
-      ready: function() {
-        'use strict';
-
-        this.setProgress(this.percentage);
-        this.addEventListener('percentage-changed', function(event) {
-          this.setProgress(event.detail.value);
-        }.bind(this));
-      }
-    });
-  </script>
-</dom-module>
diff --git a/lib/components/hero-tick.html b/lib/components/hero-tick.html
deleted file mode 100644
index 99a58eb3..00000000
--- a/lib/components/hero-tick.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<dom-module id="hero-tick">
-  <template>
-    <style>
-      :host ::content .glyphicon {
-        display: inline-block;
-        border-radius: 50%;
-        padding: 5px;
-        font-size: 18px;
-      }
-
-      :host ::content .glyphicon-ok {
-        background-color: rgb(95, 184, 53);
-      }
-
-      :host ::content .glyphicon-remove {
-        background-color: #d9534f;
-      }
-    </style>
-
-    <span class="glyphicon"></span>
-  </template>
-
-  <script>
-    Polymer({
-      is: 'hero-tick',
-      properties: {
-        type: {
-          type: String
-        }
-      },
-      ready: function() {
-        'use strict';
-
-        let glyphicon = this.querySelector('.glyphicon');
-
-        if (this.type === 'success') {
-          glyphicon.className += ' glyphicon-ok';
-        } else if (this.type === 'error') {
-          glyphicon.className += ' glyphicon-remove';
-        } else {
-          throw new Error(`Unknown hero-tick type: ${this.state}`);
-        }
-      }
-    });
-  </script>
-</dom-module>
diff --git a/lib/css/desktop.css b/lib/css/desktop.css
index f04cf18b..268ec0c3 100644
--- a/lib/css/desktop.css
+++ b/lib/css/desktop.css
@@ -52,3 +52,8 @@ input:focus,
 button:focus {
   outline: none !important;
 }
+
+/* Titles don't have margins on desktop apps */
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
diff --git a/lib/index.html b/lib/index.html
index d3f9c971..ee903519 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -7,12 +7,7 @@
     <link rel="stylesheet" type="text/css" href="css/desktop.css">
     <link rel="stylesheet" type="text/css" href="css/angular.css">
 
-    <link rel="import" href="components/hero-badge.html">
-    <link rel="import" href="components/hero-caption.html">
     <link rel="import" href="components/hero-icon.html">
-    <link rel="import" href="components/hero-button.html">
-    <link rel="import" href="components/hero-progress-button.html">
-    <link rel="import" href="components/hero-tick.html">
 
     <script>
       window._trackJs = {
@@ -50,7 +45,7 @@
 
       <div class="col-xs">
         <div class="box text-right">
-          <hero-caption><span ng-click="navigation.open('https://github.com/resin-io/etcher')">AN OPEN SOURCE PROJECT</span> BY <span ng-click="navigation.open('https://resin.io')">RESIN.IO</span></hero-caption>
+          <p class="caption"><span ng-click="navigation.open('https://github.com/resin-io/etcher')">AN OPEN SOURCE PROJECT</span> BY <span ng-click="navigation.open('https://resin.io')">RESIN.IO</span></p>
         </div>
       </div>
     </footer>
diff --git a/lib/partials/main.html b/lib/partials/main.html
index 716f0324..40d0b9ea 100644
--- a/lib/partials/main.html
+++ b/lib/partials/main.html
@@ -2,12 +2,12 @@
   <div class="col-xs">
     <div class="box text-center">
       <hero-icon path="images/image.svg" label="SELECT IMAGE"></hero-icon>
-      <hero-badge class="block space-vertical-medium">1</hero-badge>
+      <span class="badge space-top-medium">1</span>
 
       <div class="space-vertical-large">
         <div ng-hide="app.selection.hasImage()">
-          <hero-button ng-click="app.selectImage()">Select image</hero-button>
-          <p class="step-footer tiny">*supported files: .img, .iso, .zip</p>
+          <button class="btn btn-primary" ng-click="app.selectImage()">Select image</button>
+          <p class="step-footer">*supported files: .img, .iso, .zip</p>
         </div>
         <div ng-show="app.selection.hasImage()">
           <span ng-bind="app.selection.getImage() | basename" ng-click="app.reselectImage()"></span>
@@ -22,15 +22,17 @@
       <div class="step-border-right" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"></div>
 
       <hero-icon path="images/drive.svg" ng-disabled="!app.selection.hasImage()" label="SELECT DRIVE"></hero-icon>
-      <hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage()">2</hero-badge>
+
+      <span class="badge space-top-medium" ng-disabled="!app.selection.hasImage()">2</span>
 
       <div class="space-vertical-large">
         <div ng-hide="app.selection.hasDrive()">
 
           <div ng-show="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
             <div class="btn-group" uib-dropdown>
-              <hero-button ng-disabled="!app.selection.hasImage()"
-                uib-dropdown-toggle>Select drive</hero-button>
+              <button class="btn btn-primary"
+                ng-disabled="!app.selection.hasImage()"
+                uib-dropdown-toggle>Select drive</button>
 
               <ul class="dropdown-menu">
                 <li ng-repeat="drive in app.scanner.drives">
@@ -41,7 +43,7 @@
           </div>
 
           <div ng-hide="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
-            <hero-button type="danger">Connect a drive</hero-button>
+            <button class="btn btn-danger">Connect a drive</button>
           </div>
 
         </div>
@@ -53,10 +55,10 @@
   <div class="col-xs">
     <div class="box text-center">
       <hero-icon path="images/burn.svg" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()" label="BURN IMAGE"></hero-icon>
-      <hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</hero-badge>
+      <span class="badge space-top-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</span>
 
       <div class="space-vertical-large">
-        <hero-progress-button percentage="{{ app.writer.state.progress }}" ng-attr-active="{{ app.writer.isBurning() }}"
+        <progress-button percentage="app.writer.state.progress" ng-attr-active="{{ app.writer.isBurning() }}"
           ng-click="app.burn(app.selection.getImage(), app.selection.getDrive())"
           ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">
             <span ng-show="app.writer.state.progress == 100 && app.writer.isBurning()">Finishing...</span>
@@ -64,7 +66,7 @@
             <span ng-show="app.writer.state.progress == 0 && app.writer.isBurning() && !app.writer.state.speed">Starting...</span>
             <span ng-show="app.writer.state.speed && app.writer.state.progress != 100"
               ng-bind="app.writer.state.progress + '% '"></span>
-        </hero-progress-button>
+        </progress-button>
 
         <p class="step-footer" ng-bind="app.writer.state.speed.toFixed(2) + ' MB/s'" ng-show="app.writer.state.speed && app.writer.state.progress != 100"></p>
       </div>
diff --git a/lib/partials/success.html b/lib/partials/success.html
index f543d3d4..e3a4cc6d 100644
--- a/lib/partials/success.html
+++ b/lib/partials/success.html
@@ -1,7 +1,7 @@
 <div class="row around-xs">
   <div class="col-xs">
     <div class="box text-center">
-      <h3><hero-tick type="success" class="space-right-tiny"></hero-tick> Burn Complete!</h3>
+      <h3><span class="tick tick--success" class="space-right-tiny"></span> Burn Complete!</h3>
       <p class="soft"
         ng-controller="SettingsController as settings"
         ng-show="settings.storage.unmountOnSuccess">Safely ejected and ready for use</p>
@@ -11,9 +11,9 @@
           <div class="box">
             <p class="soft button-label">Would you like to burn the same image?</p>
 
-            <hero-button ng-click="finish.restart({ preserveImage: true })">
+            <button class="btn btn-primary" ng-click="finish.restart({ preserveImage: true })">
               Use <b>same</b> image
-            </hero-button>
+            </button>
           </div>
         </div>
 
@@ -23,9 +23,9 @@
           <div class="box">
             <p class="soft button-label">Would you like to burn a new image?</p>
 
-            <hero-button ng-click="finish.restart()">
+            <button class="btn btn-primary" ng-click="finish.restart()">
               Use <b>new</b> image
-            </hero-button>
+            </button>
           </div>
         </div>
       </div>
diff --git a/lib/scss/components/_badge.scss b/lib/scss/components/_badge.scss
new file mode 100644
index 00000000..722e62c2
--- /dev/null
+++ b/lib/scss/components/_badge.scss
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.badge {
+  border: 2px solid;
+  border-radius: 50%;
+  padding: 7px 10px;
+  position: relative;
+  z-index: 10;
+  letter-spacing: 0;
+  background-color: $body-bg;
+}
+
+.badge[disabled] {
+  background-color: #5c5e5c;
+  color: $color-disabled;
+}
diff --git a/lib/scss/components/_button.scss b/lib/scss/components/_button.scss
new file mode 100644
index 00000000..865a8dad
--- /dev/null
+++ b/lib/scss/components/_button.scss
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+button.btn {
+  padding: 10px;
+  padding-top: 11px;
+
+  border-radius: 2px;
+  border: none;
+
+  letter-spacing: 0.5px;
+  outline: none;
+
+  position: relative;
+
+  &[disabled] {
+    background-color: $btn-disabled;
+    color: $color-disabled;
+    pointer-events: none;
+
+    &:hover {
+      background-color: lighten($btn-disabled, 2);
+    }
+  }
+}
+
+.btn:not(.btn-link) {
+  min-width: $btn-min-width;
+}
+
+.btn > .glyphicon {
+  top: 2px;
+  margin-right: 2px;
+}
+
+/*
+ * Remove blue/orange outline
+ * !important is needed here for some reason
+ * despite the rule having top precedence.
+ */
+button.btn:focus {
+  outline: none !important;
+}
diff --git a/lib/scss/components/_caption.scss b/lib/scss/components/_caption.scss
new file mode 100644
index 00000000..8f52144d
--- /dev/null
+++ b/lib/scss/components/_caption.scss
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.caption {
+  font-weight: bold;
+  font-size: 11px;
+  margin-bottom: 0;
+  text-transform: uppercase;
+}
diff --git a/lib/scss/components/_progress-button.scss b/lib/scss/components/_progress-button.scss
new file mode 100644
index 00000000..167963aa
--- /dev/null
+++ b/lib/scss/components/_progress-button.scss
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// From http://tympanus.net/Development/ProgressButtonStyles/
+
+.progress-button {
+  @extend .btn;
+}
+
+.progress-button[percentage="100"][active="false"] .progress-button__bar {
+  background-color: $brand-success;
+}
+
+.progress-button[percentage="100"][active="true"] .progress-button__bar {
+  background-color: $brand-warning;
+}
+
+.progress-button[active="true"] {
+  pointer-events: none;
+}
+
+.progress-button--primary {
+  @extend .btn-primary;
+
+  .progress-button__bar {
+    background: lighten($brand-primary, 5);
+  }
+}
+
+.progress-button__content {
+  position: relative;
+  z-index: 10;
+  transition: transform 0.3s;
+}
+
+.progress-button__bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  width: 0;
+  height: 100%;
+
+  transition: width 0.3s, opacity 0.3s;
+}
diff --git a/lib/scss/components/_tick.scss b/lib/scss/components/_tick.scss
new file mode 100644
index 00000000..9c2c2639
--- /dev/null
+++ b/lib/scss/components/_tick.scss
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.tick {
+  @extend .glyphicon;
+
+  display: inline-block;
+  border-radius: 50%;
+  padding: 5px;
+  font-size: 18px;
+}
+
+.tick--success {
+  @extend .glyphicon-ok;
+
+  background-color: rgb(95, 184, 53);
+}
+
+.tick--error {
+  @extend .glyphicon-remove;
+
+  background-color: #d9534f;
+}
diff --git a/lib/scss/main.scss b/lib/scss/main.scss
index 22057a52..6fad10a7 100644
--- a/lib/scss/main.scss
+++ b/lib/scss/main.scss
@@ -23,60 +23,24 @@ $font-size-base: 13px;
 $cursor-disabled: initial;
 $color-disabled: rgb(120, 124, 127);
 $btn-disabled: rgb(49, 51, 57);
-$badge-disabled: rgb(92, 94, 92);
-$btn-padding: 10px;
 $btn-min-width: 170px;
 $link-color: $gray-light;
 $link-hover-decoration: none;
 
 @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
 
+@import "./modules/bootstrap";
 @import "./modules/space";
+@import "./components/badge";
+@import "./components/caption";
+@import "./components/button";
+@import "./components/tick";
+@import "./components/progress-button";
 
-// Prevent white flash when running application
-html {
-  background-color: $body-bg;
-}
-
-hero-badge .badge {
-  background-color: $body-bg;
-}
-
-hero-badge[disabled] .badge {
-  background-color: $badge-disabled;
+hero-icon[disabled] .caption {
   color: $color-disabled;
 }
 
-hero-icon[disabled] hero-caption {
-  color: $color-disabled;
-}
-
-hero-button .btn {
-  min-width: $btn-min-width;
-
-  &[disabled] {
-    background-color: $btn-disabled;
-    color: $color-disabled;
-    pointer-events: none;
-
-    &:hover {
-      background-color: lighten($btn-disabled, 2);
-    }
-  }
-}
-
-hero-progress-button .bar {
-  background: lighten($brand-primary, 5);
-}
-
-hero-progress-button[percentage="100"][active="false"] .bar {
-  background-color: $brand-success;
-}
-
-hero-progress-button[percentage="100"][active="true"] .bar {
-  background-color: $brand-warning;
-}
-
 hero-icon[disabled]  path {
   fill: $color-disabled;
 }
@@ -153,10 +117,6 @@ body {
   margin-top: 10px;
   margin-bottom: -40px;
   color: lighten($color-disabled, 5%);
-  font-size: 12px;
-}
-
-.tiny {
   font-size: 10px;
 }
 
@@ -174,25 +134,11 @@ body {
   max-width: $btn-min-width - 5px;
 }
 
-// Fix slighly checkbox vertical alignment issue
-.checkbox input[type="checkbox"] {
-  position: initial;
-  margin-right: 2px;
-}
-
-.checkbox input[type="checkbox"]:not(:checked) + * {
-  color: $gray-light;
-}
-
 .wrapper {
   height: 100%;
   margin: 20px 60px;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-}
-
 .section-header {
   @extend .text-right;
   padding: 5px 8px;
diff --git a/lib/scss/modules/_bootstrap.scss b/lib/scss/modules/_bootstrap.scss
new file mode 100644
index 00000000..d78ae8fe
--- /dev/null
+++ b/lib/scss/modules/_bootstrap.scss
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// This file is meant to hold Bootstrap modifications
+// that don't qualify as separate UI components.
+
+// Prevent white flash when running application
+html {
+  background-color: $body-bg;
+}
+
+// Fix slighly checkbox vertical alignment issue
+.checkbox input[type="checkbox"] {
+  position: initial;
+  margin-right: 2px;
+}
+
+.checkbox input[type="checkbox"]:not(:checked) + * {
+  color: $gray-light;
+}
diff --git a/lib/scss/modules/_space.scss b/lib/scss/modules/_space.scss
index edd426c7..64f67a04 100644
--- a/lib/scss/modules/_space.scss
+++ b/lib/scss/modules/_space.scss
@@ -27,6 +27,10 @@ $spacing-tiny: 5px;
   margin-bottom: $spacing-medium;
 }
 
+.space-top-medium {
+  margin-top: $spacing-medium;
+}
+
 .space-vertical-large {
   margin-top: $spacing-large;
   margin-bottom: $spacing-large;