diff --git a/horizon/static/framework/widgets/action-list/action-list.scss b/horizon/static/framework/widgets/action-list/action-list.scss
index 5b3fcc487d..c65e28d35a 100644
--- a/horizon/static/framework/widgets/action-list/action-list.scss
+++ b/horizon/static/framework/widgets/action-list/action-list.scss
@@ -6,7 +6,7 @@ action-list.btn-group {
   .dropdown-menu > li {
 
      &.disabled {
-      opacity: 0.65;
+      color: $dropdown-link-disabled-color;
      }
 
      > a.text-danger {
@@ -16,50 +16,17 @@ action-list.btn-group {
 
   notifications {
     bottom: -0.5em;
-    font-size: 1.1em;
     opacity: 1;
     position: absolute;
     right: -0.35em;
     z-index: 3;
-
-    & + .btn:last-child:not(:first-child):not(.dropdown-toggle),
-    & + .btn:not(:last-child):not(:first-child):not(.dropdown-toggle),
-    & + .btn.single-button:not(:first-child),
-    & + .btn.split-button:not(:first-child):not(:last-child) {
-      border-top-left-radius: 4px;
-      border-bottom-left-radius: 4px;
-    }
-  }
-
-  &.btn-group-sm {
-    notifications {
-      & + .btn:last-child:not(:first-child):not(.dropdown-toggle),
-      & + .btn:not(:last-child):not(:first-child):not(.dropdown-toggle),
-      & + .btn.single-button:not(:first-child),
-      & + .btn.split-button:not(:first-child):not(:last-child) {
-        border-top-left-radius: 3px;
-        border-bottom-left-radius: 3px;
-      }
-    }
-  }
-
-  &.btn-group-lg {
-    notifications {
-      & + .btn:last-child:not(:first-child):not(.dropdown-toggle),
-      & + .btn:not(:last-child):not(:first-child):not(.dropdown-toggle),
-      & + .btn.single-button:not(:first-child),
-      & + .btn.split-button:not(:first-child):not(:last-child) {
-        border-top-left-radius: 6px;
-        border-bottom-left-radius: 6px;
-      }
-    }
   }
 
   .invalid {
-    color: $invalid-color;
+    color: $brand-warning;
   }
 
   & + .popover a {
     cursor: pointer;
   }
-}
\ No newline at end of file
+}
diff --git a/horizon/static/framework/widgets/charts/chart-tooltip.scss b/horizon/static/framework/widgets/charts/chart-tooltip.scss
index dc9c7f0799..a8330f7cb3 100644
--- a/horizon/static/framework/widgets/charts/chart-tooltip.scss
+++ b/horizon/static/framework/widgets/charts/chart-tooltip.scss
@@ -1,44 +1,40 @@
 .chart-tooltip {
-  background-color: $tooltip-bg-color;
-  border: $tooltip-border;
-  @include box-shadow($tooltip-box-shadow);
+  background-color: $tooltip-bg;
   display: none;
   padding: $tooltip-padding;
   position: absolute;
   white-space: nowrap;
-  z-index: 12000;
+  z-index: $zindex-popover;
 
   &.tooltip-enabled {
     display: inline-block;
   }
 
   .tooltip-key {
-    color: $tooltip-key-color;
-    font-weight: $tooltip-key-weight;
-    padding: $tooltip-key-padding;
+    color: $tooltip-color;
   }
 
   .tooltip-value {
-    color: $tooltip-value-color;
+    color: $tooltip-color;
   }
 
   span.fa {
-    background-color: inherit;
     fill: none;
+
     &.usage {
-      color: $chart-quota-usage-color;
+      color: $brand-primary;
     }
 
     &.added {
-      color: $chart-quota-added-color;
+      color: lighten($brand-primary, 20%);
     }
 
     &.remaining {
-      color: $chart-quota-remaining-color;
+      color: $gray-lighter;
     }
 
     &.danger {
-      color: $chart-quota-danger-color;
+      color: $brand-danger;
     }
   }
 }
@@ -48,8 +44,8 @@
   .chart-tooltip {
     span.fa {
       &.added {
-        color: $chart-quota-danger-color;
+        color: $brand-danger;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/horizon/static/framework/widgets/charts/charts.module.js b/horizon/static/framework/widgets/charts/charts.module.js
index c91daf886c..6b1fada174 100644
--- a/horizon/static/framework/widgets/charts/charts.module.js
+++ b/horizon/static/framework/widgets/charts/charts.module.js
@@ -59,7 +59,7 @@
    */
   .constant('horizon.framework.widgets.charts.donutChartSettings', {
     innerRadius: 24,
-    outerRadius: 30,
+    outerRadius: 36,
     titleClass: 'pie-chart-title-medium',
     showTitle: true,
     showLabel: true,
diff --git a/horizon/static/framework/widgets/charts/pie-chart.html b/horizon/static/framework/widgets/charts/pie-chart.html
index b47be287cc..747d7364c8 100644
--- a/horizon/static/framework/widgets/charts/pie-chart.html
+++ b/horizon/static/framework/widgets/charts/pie-chart.html
@@ -1,8 +1,7 @@
-<div class="pie-chart" ng-class="{ 'danger': chartData.overMax }">
+<div class="pie-chart text-center" ng-class="{ 'danger': chartData.overMax }">
   <chart-tooltip tooltip-data="model.tooltipData"></chart-tooltip>
 
-  <div ng-if="::model.settings.showTitle && chartData.title"
-       class="pie-chart-title {$ ::model.settings.titleClass $}">
+  <div class="pie-chart-title" ng-if="::model.settings.showTitle && chartData.title">
     {$ ::chartData.title $} ({$ model.total ? model.total + ' ' : '' $}{$ model.totalLabel $})
   </div>
 
@@ -28,4 +27,4 @@
       <div>{$ slice.label $}</div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/horizon/static/framework/widgets/charts/pie-chart.scss b/horizon/static/framework/widgets/charts/pie-chart.scss
index e88c8f9a7f..cf502fb78d 100644
--- a/horizon/static/framework/widgets/charts/pie-chart.scss
+++ b/horizon/static/framework/widgets/charts/pie-chart.scss
@@ -1,65 +1,44 @@
 .pie-chart {
   display: inline-block;
-  position: relative;
-  margin-left: 10px;
 
   .svg-pie-chart {
-    float: left;
+    margin: $padding-small-horizontal 0;
 
     .slice {
       cursor: pointer;
 
       &.usage {
-        fill: $chart-quota-usage-color;
+        fill: $brand-primary;
       }
 
       &.added {
-        fill: $chart-quota-added-color;
+        fill: lighten($brand-primary, 20%);
       }
 
       &.remaining {
-        fill: $chart-quota-remaining-color;
+        fill: $gray-lighter;
       }
     }
   }
 
-  .pie-chart-title {
-    color: $chart-title-font-color;
-    font-weight: $chart-title-weight;
-    padding: $chart-title-padding;
-  }
-
-  .pie-chart-title-medium {
-    font-size: $chart-title-font-size;
-  }
-
-  .pie-chart-title-large {
-    font-size: $chart-title-font-size-large;
-  }
-
   .pie-chart-label {
-    font-size: 1.2em;
+    font-size: $font-size-large;
     text-anchor: middle;
 
     text {
-      font-size: $chart-label-font-size;
-      fill: $chart-label-color;
+      font-size: $font-size-large;
+      fill: $text-color;
     }
   }
 
   .pie-chart-legend {
-    float: left;
-    font-size: $chart-legend-font-size;
-    line-height: 1em;
-    padding: $chart-legend-padding;
-    display: table;
+    text-align: left;
 
     .slice-legend {
-      padding: $chart-slice-legend-padding;
       display: table-row;
 
       & > :last-child {
-        padding-left: 5px;
+        padding-left: $padding-xs-horizontal;
       }
 
       div {
@@ -69,41 +48,40 @@
       .slice-key {
         color: transparent;
         display: inline-block;
-        height: 1.1em;
-        line-height: 1.1em;
+        height: 1em;
         position: relative;
         top: 0.12em;
-        width: 0.45em;
-        margin-right: 3px;
+        width: 0.7em;
+        margin-right: $padding-xs-horizontal;
 
         &.usage {
-          background-color: $chart-quota-usage-color;
+          background-color: $brand-primary;
         }
 
         &.added {
-          background-color: $chart-quota-added-color;
+          background-color: lighten($brand-primary, 20%);
         }
 
         &.remaining {
-          background-color: $chart-quota-remaining-color;
+          background-color: $gray-lighter;
         }
       }
 
       .chartless {
-        font-size: x-large;
+        font-size: $font-size-large;
         text-align: right;
-        padding-top: 10px;
+        padding-top: $padding-large-vertical;
         font-weight: bold;
         &.usage {
-          color: $chart-quota-usage-color;
+          color: $brand-primary;
         }
 
         &.added {
-          color: $chart-quota-added-color;
+          color: lighten($brand-primary, 20%);
         }
 
         &.remaining {
-          color: $chart-quota-remaining-color;
+          color: $gray-lighter;
         }
       }
     }
@@ -117,7 +95,7 @@
       &.added,
       &.usage,
       &.remaining {
-        fill: $chart-quota-danger-color;
+        fill: $brand-danger;
       }
     }
   }
@@ -132,7 +110,7 @@
     .slice-legend {
       .slice-key {
         &.added {
-          background-color: $chart-quota-danger-color;
+          background-color: $brand-danger;
         }
       }
     }
diff --git a/horizon/static/framework/widgets/help-panel/help-panel.directive.spec.js b/horizon/static/framework/widgets/help-panel/help-panel.directive.spec.js
index fe8182142c..47ae15e5a0 100644
--- a/horizon/static/framework/widgets/help-panel/help-panel.directive.spec.js
+++ b/horizon/static/framework/widgets/help-panel/help-panel.directive.spec.js
@@ -35,21 +35,21 @@
     });
 
     it('should be closed by default', function () {
-      expect(element[0].querySelector('.help-panel').className).toBe('help-panel');
+      expect(element[0].querySelector('#help-panel').className).toBe('collapse width');
     });
 
-    it('should add "open" to class name if $scope.openHelp is true', function () {
+    it('should add "in" to class name if $scope.openHelp is true', function () {
       $scope.openHelp = true;
       $scope.$apply();
-      expect(element[0].querySelector('.help-panel').className).toBe('help-panel open');
+      expect(element[0].querySelector('#help-panel').className).toBe('collapse width in');
     });
 
-    it('should remove "open" from class name if $scope.openHelp is false', function () {
+    it('should remove "in" from class name if $scope.openHelp is false', function () {
       $scope.openHelp = true;
       $scope.$apply();
       $scope.openHelp = false;
       $scope.$apply();
-      expect(element[0].querySelector('.help-panel').className).toBe('help-panel');
+      expect(element[0].querySelector('#help-panel').className).toBe('collapse width');
     });
   });
 
diff --git a/horizon/static/framework/widgets/help-panel/help-panel.html b/horizon/static/framework/widgets/help-panel/help-panel.html
index 011fe59fd8..1aaa38c132 100644
--- a/horizon/static/framework/widgets/help-panel/help-panel.html
+++ b/horizon/static/framework/widgets/help-panel/help-panel.html
@@ -1,5 +1,9 @@
-<div class="help-panel" ng-class="{'open': openHelp}">
-  <button class="open" ng-click="openHelp=true"><span class="fa fa-question-circle"></span></button>
-  <button class="close" ng-click="openHelp=false"><span class="fa fa-times-circle"></span></button>
-  <div class="content" ng-transclude></div>
+<button class="btn btn-default help-toggle collapsed" data-target="#help-panel"
+        data-toggle="collapse" role="button" aria-expanded="false" 
+        aria-controls="help-panel">
+  <span class="fa"></span>
+</button>
+
+<div id="help-panel" class="collapse width" ng-class="{'in': openHelp}">
+  <div class="well" ng-transclude></div>
 </div>
diff --git a/horizon/static/framework/widgets/help-panel/help-panel.scss b/horizon/static/framework/widgets/help-panel/help-panel.scss
deleted file mode 100644
index 995b15f0d9..0000000000
--- a/horizon/static/framework/widgets/help-panel/help-panel.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-.help-panel {
-  position: absolute;
-  width: $helpPanelWidthDefault;
-  right: -$helpPanelWidthDefault;
-  top: 0;
-  bottom: 0;
-  color: $helpPanelColor;
-  background: $helpPanelBg;
-  @include transition(right linear 0.1s);
-  z-index: 10;
-
-  .content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 10px 20px;
-    overflow-y: auto;
-
-    h1 {
-      font-size: 20px;
-      line-height: 1.8;
-      margin: 0;
-    }
-
-    li {
-      list-style-position: inside;
-    }
-
-    p {
-      line-height: 1.4;
-      margin: 1em 0;
-    }
-  }
-
-  &.open {
-    right: 0;
-    border: 1px solid $helpPanelBorderColor;
-    border-right: none;
-    margin-top: -1px;
-    margin-bottom: -1px;
-
-    & > button.open {
-      display: none;
-    }
-
-    & > button.close {
-      display: block;
-      opacity: 1;       // override bootstrap
-      font-size: 14px;  // override bootstrap
-    }
-  }
-
-  & > button {
-    position: absolute;
-    top: 0;
-    left: -$helpPanelBtnSize;
-    width: $helpPanelBtnSize;
-    height: $helpPanelBtnSize;
-    line-height: $helpPanelBtnSize;
-    padding: 0;
-    border: none;
-    text-align: center;
-    vertical-align: middle;
-    background: $helpPanelBtnBg;
-    border: 1px solid $helpPanelBorderColor;
-    border-right: none;
-    margin-top: -1px;
-
-
-    // button icon
-    & > * {
-      display: inline-block;
-      vertical-align: middle;
-      background: $helpPanelBtnIconBg;
-      color: $helpPanelBtnIconColor;
-      font-size: $helpPanelBtnIconSize;
-    }
-
-    &.close {
-      display: none;
-    }
-  }
-}
diff --git a/horizon/static/framework/widgets/load-edit/load-edit.html b/horizon/static/framework/widgets/load-edit/load-edit.html
index 345b6fbf15..822a33c3b9 100644
--- a/horizon/static/framework/widgets/load-edit/load-edit.html
+++ b/horizon/static/framework/widgets/load-edit/load-edit.html
@@ -1,35 +1,31 @@
-<div class="form-group customization-script">
-  <label>
+<div class="form-group" ng-class="{ 'has-error': scriptLength >= config.MAX_SCRIPT_SIZE }">
+  <label for="customization-script" class="control-label">
     <span translate>Customization Script</span>
-    <span class="script-modified"
-          ng-show="scriptModified"
+    <span ng-show="scriptModified"
           translate>
       (Modified)</span>
   </label>
-  <span class="size-indicator pull-right clearfix"
-        ng-class="{warning: scriptLength >= config.MAX_SCRIPT_SIZE}">
-    <span class="invalid fa fa-exclamation-triangle"
-          popover="{$ ::config.label.scriptSizeHoverWarningMsg $}"
-          popover-placement="top"
-          popover-append-to-body="true"
-          popover-trigger="hover">
-    </span>
-    <span translate>Script size</span>
-    {$ (scriptLength || 0) | number $}
-    <span translate>bytes</span>
-    <span translate>(Max: 16Kb)</span>
+  <span class="pull-right" ng-class="{ 'text-danger': scriptLength >= config.MAX_SCRIPT_SIZE }">
+    <span translate>Script size:</span>
+    {$ (scriptLength || 0) | bytes $}
+    <span translate>of</span>
+    {$ config.MAX_SCRIPT_SIZE | bytes $}
   </span>
   <textarea class="form-control"
+            rows="8"
+            id="customization-script"
             name="customization-script"
             ng-maxlength="config.MAX_SCRIPT_SIZE"
             ng-model="textContent">
   </textarea>
-</div>
-
-<div class="form-group script-file" ng-show="config.fileApiSupported">
-  <span class="file-input btn btn-primary btn-file">
-    <span class="fa fa-upload"></span>
-    <span translate>Load script from a file</span>
-    <input type="file">
+  <span class="help-block"
+        ng-show="scriptLength >= config.MAX_SCRIPT_SIZE"
+        translate>
+    The script is larger than the maximum size
   </span>
 </div>
+
+<div class="form-group" ng-show="config.fileApiSupported">
+    <label for="load-script" translate>Load script from a file</label>
+    <input id="load-script" type="file">
+</div>
diff --git a/horizon/static/framework/widgets/metadata/tree/tree.scss b/horizon/static/framework/widgets/metadata/tree/tree.scss
index 8bb87403d6..2e0372952c 100644
--- a/horizon/static/framework/widgets/metadata/tree/tree.scss
+++ b/horizon/static/framework/widgets/metadata/tree/tree.scss
@@ -6,28 +6,11 @@
     overflow: auto;
   }
 
-  /* Header */
-
-  .panel-heading {
-    .v-align {
-      display: table;
-      min-height: 2.5em;
-    }
-
-    .v-align > * {
-      display: table-cell;
-      vertical-align: middle;
-    }
-  }
-
   /* Item lists */
 
   :not(.active) {
     &.dark-stripe {
-      background-color: $table-bg-odd;
-    }
-    &.light-stripe {
-      background-color: white;
+      background-color: $table-bg-accent;
     }
   }
 
@@ -37,15 +20,15 @@
     }
 
     &.level-1>* {
-      padding-left: 15px;
+      padding-left: $padding-large-horizontal;
     }
 
     &.level-2>* {
-      padding-left: 30px;
+      padding-left: $padding-large-horizontal * 2;
     }
 
     .leaf {
-      padding-left: 10px;
+      padding-left: $padding-small-horizontal;
     }
   }
 
@@ -66,7 +49,6 @@
       color: $text-color;
 
       .panel-heading {
-        padding: 4px;
 
         &>* {
           display: table;
@@ -79,17 +61,8 @@
         }
       }
 
-      .panel-body {
-        padding: 3px 5px 5px;
-      }
-
-      .panel-footer {
-        padding: 4px;
-      }
-
       .values .label {
         display: inline-block;
-        text-transform: uppercase;
       }
 
       .name {
diff --git a/horizon/static/framework/widgets/modal/wizard-modal.service.js b/horizon/static/framework/widgets/modal/wizard-modal.service.js
index 1f1e450081..2a78287bbe 100644
--- a/horizon/static/framework/widgets/modal/wizard-modal.service.js
+++ b/horizon/static/framework/widgets/modal/wizard-modal.service.js
@@ -62,6 +62,7 @@
     function modal(params) {
       if (params && params.scope && params.workflow && params.submit) {
         var options = {
+          size: 'lg',
           controller: 'WizardModalController as modalCtrl',
           scope: params.scope,
           template: '<wizard></wizard>',
diff --git a/horizon/static/framework/widgets/table/table.scss b/horizon/static/framework/widgets/table/table.scss
index 7e20968d76..926046690d 100644
--- a/horizon/static/framework/widgets/table/table.scss
+++ b/horizon/static/framework/widgets/table/table.scss
@@ -64,11 +64,11 @@ $em-per-priority: floor($table-col-avg-width / $font-size-base) * 3;
 
   tbody tr {
     &.lr-drop-target-before td {
-      border-top: $reorder-border !important;
+      border-top: $reorder-border;
     }
 
     &.lr-drop-target-after td {
-      border-bottom: $reorder-border !important;
+      border-bottom: $reorder-border;
     }
 
   }
@@ -81,10 +81,9 @@ $em-per-priority: floor($table-col-avg-width / $font-size-base) * 3;
     cursor: pointer;
 
     &:after {
-      color: #d4d4d4;
-      content: '\f0dc';
+      content: $fa-var-sort;
       font-family: 'FontAwesome';
-      margin-left: 0.5em;
+      margin-left: $padding-small-vertical;
       opacity: 0;
     }
 
@@ -94,21 +93,16 @@ $em-per-priority: floor($table-col-avg-width / $font-size-base) * 3;
   }
 
   .st-sort-ascent:after {
-    color: #000000;
-    content: '\f0dd';
-    font-family: 'FontAwesome';
-    margin-left: 0.5em;
+    content: $fa-var-sort-asc;
     opacity: 1;
   }
 
   .st-sort-descent:after {
-    color: #000000;
-    content: '\f0de';
-    font-family: 'FontAwesome';
-    margin-left: 0.5em;
+    content: $fa-var-sort-desc;
     opacity: 1;
   }
 
+
   &.table-detail {
     border-spacing: 0;
 
diff --git a/horizon/static/framework/widgets/transfer-table/transfer-table.html b/horizon/static/framework/widgets/transfer-table/transfer-table.html
index e9fce34b33..3380daf2bf 100644
--- a/horizon/static/framework/widgets/transfer-table/transfer-table.html
+++ b/horizon/static/framework/widgets/transfer-table/transfer-table.html
@@ -2,7 +2,7 @@
   <!-- Allocation -->
   <div class="transfer-section">
     <!-- Allocated section heading -->
-    <h5 class="transfer-heading">
+    <span class="transfer-heading">
       <span title="{$ ::trCtrl.helpText.sectionToggleText $}" class="fa"
         ng-if="::(trCtrl.limits.maxAllocation !== 1)"
         ng-class="trCtrl.views.allocated ? 'fa-chevron-down' : 'fa-chevron-right'"
@@ -14,9 +14,9 @@
       <span class="pull-right help-text" ng-if="::trCtrl.helpText.allocHelpText">
         {$ ::trCtrl.helpText.allocHelpText $}
       </span>
-    </h5>
+    </span>
     <!-- Help text when allocated section collapsed -->
-    <div class="collapsed-help" ng-hide="trCtrl.views.allocated">
+    <div class="text-muted" ng-hide="trCtrl.views.allocated">
       {$ ::trCtrl.helpText.allocHiddenText $}
     </div>
     <div class="transfer-allocated" ng-show="trCtrl.views.allocated">
@@ -27,7 +27,7 @@
   <!-- Available -->
   <div class="transfer-section">
     <!-- Available section heading -->
-    <h5 class="transfer-heading">
+    <span class="transfer-heading">
       <span class="fa" title="{$ ::trCtrl.helpText.sectionToggleText $}"
         ng-class="trCtrl.views.available ? 'fa-chevron-down' : 'fa-chevron-right'"
         ng-click="trCtrl.toggleView('available')"></span>
@@ -36,13 +36,13 @@
       <span class="pull-right help-text" ng-if="::trCtrl.helpText.availHelpText">
         {$ ::trCtrl.helpText.availHelpText $}
       </span>
-    </h5>
+    </span>
     <!-- Help text when available section collapsed -->
-    <div class="collapsed-help" ng-hide="trCtrl.views.available">
+    <div class="text-muted" ng-hide="trCtrl.views.available">
       {$ ::trCtrl.helpText.availHiddenText $}
     </div>
     <div class="transfer-available" ng-show="trCtrl.views.available">
       <!-- Available table transcluded here -->
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/horizon/static/framework/widgets/transfer-table/transfer-table.scss b/horizon/static/framework/widgets/transfer-table/transfer-table.scss
deleted file mode 100644
index 2f1e2bb9d5..0000000000
--- a/horizon/static/framework/widgets/transfer-table/transfer-table.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.transfer-table {
-
-  .collapsed-help {
-    color: $transfer-help-text-color;
-    font-style: italic;
-    font-weight: 400;
-    margin-bottom: 3em;
-  }
-
-  .fa[title] {
-    cursor: pointer;
-    width: 20px;
-  }
-
-  .transfer-heading {
-    border-bottom: $transfer-header-bottom-border;
-    font-size: 1.2em;
-    margin-top: 1em;
-    padding-bottom: 0.5em;
-
-    .badge-info {
-      background-color: $badge-info-color;
-    }
-
-    .help-text {
-      font-size: 0.9em;
-      font-weight: 400;
-    }
-  }
-
-  .transfer-available, .transfer-allocated {
-    margin-bottom: 3em;
-
-    table {
-      .action-col {
-        min-width: $transfer-btn-width;
-        width: $transfer-btn-width;
-
-        .btn {
-          border-color: $transfer-btn-border-color;
-          padding: 2px 7px;
-
-          &.disabled {
-            border-color: $transfer-disabled-btn-border-color;
-            color: $transfer-disabled-btn-color;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/horizon/static/framework/widgets/widgets.scss b/horizon/static/framework/widgets/widgets.scss
index 4f6a9e193e..df20801ebd 100644
--- a/horizon/static/framework/widgets/widgets.scss
+++ b/horizon/static/framework/widgets/widgets.scss
@@ -1,8 +1,5 @@
 @import "headers/headers";
-@import "help-panel/help-panel";
-@import "wizard/wizard";
 @import "table/table";
-@import "transfer-table/transfer-table";
 @import "charts/chart-tooltip";
 @import "charts/pie-chart";
 @import "action-list/action-list";
diff --git a/horizon/static/framework/widgets/wizard/wizard.html b/horizon/static/framework/widgets/wizard/wizard.html
index 34f8a586c3..7e1f7dfb14 100644
--- a/horizon/static/framework/widgets/wizard/wizard.html
+++ b/horizon/static/framework/widgets/wizard/wizard.html
@@ -1,67 +1,89 @@
 <div class="ng-wizard" ng-form="wizardForm">
-  <div class="title" ng-bind="::workflow.title"></div>
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="cancel()" aria-hidden="true" aria-label="Close">
+      <span aria-hidden="true" class="fa fa-close"></span>
+    </button>
+    <span class="h4 modal-title" ng-bind="::workflow.title"></span>
+  </div>
 
-  <div class="nav">
-    <button class="btn nav-item"
-      ng-class="{'current': currentIndex===$index}"
-      ng-click="switchTo($index)"
-      ng-repeat="step in steps"
-      ng-show="viewModel.ready">
-      <span ng-bind="::step.title"></span>
-      <span class="status-indicator fa fa-lg fa-warning"
-        ng-show="wizardForm[steps[$index].formName].$invalid"></span>
+  <div class="modal-body">
+    <div class="row">
+      <div class="col-xs-12 col-sm-3">
+        <button type="button" data-toggle="collapse"
+                data-target="#wizard-side-nav" aria-expanded="false"
+                class="navbar-toggle btn btn-default collapsed wizard-nav-toggle">
+          <span translate class="sr-only">Toggle navigation</span>
+          <span class="fa fa-bars"></span>
+          <span>Toggle navigation</span>
+        </button>
+
+        <div class="collapse navbar-collapse wizard-nav" id="wizard-side-nav">
+          <ul class="nav nav-pills nav-stacked">
+            <li role="presentation"
+                class="nav-item"
+                ng-class="{'active': currentIndex===$index}"
+                ng-click="switchTo($index)"
+                ng-repeat="step in steps"
+                ng-show="viewModel.ready">
+              <a href="#">
+                <span ng-bind="::step.title"></span>
+                <span class="hz-icon-required fa fa-asterisk"
+                    ng-show="wizardForm[steps[$index].formName].$invalid"
+                    aria-hidden="true"></span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-sm-9">
+        <div class="step"
+          ng-repeat="step in steps"
+          ng-show="currentIndex===$index">
+          <ng-include
+            ng-form="{$ step.formName $}"
+            src="step.templateUrl">
+          </ng-include>
+        </div>
+      </div>
+
+      <help-panel>
+        <ng-include src="step.helpUrl"
+                    ng-repeat="step in steps"
+                    ng-show="currentIndex===$index"></ng-include>
+      </help-panel>
+
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <button type="button" class="btn btn-default pull-left"
+      ng-click="cancel()">
+      <span ng-class="::viewModel.btnIcon.cancel||'fa fa-close'"></span>
+      <span ng-bind="::viewModel.btnText.cancel"></span>
+    </button>
+
+    <button type="button" class="btn btn-default back"
+      ng-click="switchTo(currentIndex - 1)"
+      ng-disabled="currentIndex===0">
+      <span ng-class="::viewModel.btnIcon.back||'fa fa-angle-left'"></span>
+      <span ng-bind="::viewModel.btnText.back"></span>
+    </button>
+
+    <button type="button" class="btn btn-default next"
+      ng-click="switchTo(currentIndex + 1)"
+      ng-disabled="currentIndex===steps.length - 1">
+      <span ng-bind="::viewModel.btnText.next"></span>
+      <span ng-class="::viewModel.btnIcon.next||'fa fa-angle-right'"></span>
+    </button>
+
+    <button type="button" class="btn btn-primary finish"
+      ng-click="viewModel.onClickFinishBtn()"
+      ng-disabled="wizardForm.$invalid||viewModel.isSubmitting">
+      <span ng-class="::viewModel.btnIcon.finish||'fa fa-check'"></span>
+      <span ng-bind="::viewModel.btnText.finish"></span>
     </button>
   </div>
 
-  <div class="step"
-    ng-repeat="step in steps"
-    ng-show="currentIndex===$index">
-    <ng-include
-      ng-form="{$ step.formName $}"
-      src="step.templateUrl">
-    </ng-include>
-  </div>
-
-  <div class="toolbar">
-    <div class="secondary-btn-grp">
-      <button class="cancel btn btn-sm btn-default"
-        ng-click="cancel()">
-        <span ng-class="::viewModel.btnIcon.cancel||'fa fa-close'"></span>
-        <span ng-bind="::viewModel.btnText.cancel"></span>
-      </button>
-    </div>
-
-    <div class="primary-btn-grp">
-      <button class="back btn btn-sm btn-default"
-        ng-click="switchTo(currentIndex - 1)"
-        ng-hide="currentIndex===0">
-        <span ng-class="::viewModel.btnIcon.back||'fa fa-chevron-left'"></span>
-        <span ng-bind="::viewModel.btnText.back"></span>
-      </button>
-
-      <button class="next btn btn-sm btn-primary"
-        ng-click="switchTo(currentIndex + 1)"
-        ng-hide="currentIndex===steps.length - 1">
-        <span ng-bind="::viewModel.btnText.next"></span>
-        <span ng-class="::viewModel.btnIcon.next||'fa fa-chevron-right'"></span>
-      </button>
-
-      <span class="separator"></span>
-
-      <button class="finish btn btn-sm btn-success"
-        ng-click="viewModel.onClickFinishBtn()"
-        ng-disabled="wizardForm.$invalid||viewModel.isSubmitting">
-        <span ng-class="::viewModel.btnIcon.finish||'fa fa-check'"></span>
-        <span ng-bind="::viewModel.btnText.finish"></span>
-      </button>
-    </div>
-  </div>
-
   <div class="error-message" ng-show="viewModel.hasError" ng-bind="viewModel.errorMessage"></div>
-
-  <help-panel>
-    <ng-include src="step.helpUrl"
-      ng-repeat="step in steps"
-      ng-show="currentIndex===$index"></ng-include>
-  </help-panel>
 </div>
diff --git a/horizon/static/framework/widgets/wizard/wizard.scss b/horizon/static/framework/widgets/wizard/wizard.scss
deleted file mode 100644
index 516e6ac05e..0000000000
--- a/horizon/static/framework/widgets/wizard/wizard.scss
+++ /dev/null
@@ -1,352 +0,0 @@
-.ng-wizard {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  font-weight: normal;
-
-  .title {
-    height: $wizardTitleBarHeight;
-    line-height: $wizardTitleBarHeight - 6px;
-    vertical-align: bottom;
-    padding: 6px $WizardSidePadding 0 $WizardSidePadding;
-    color: #555;
-    border-bottom: 1px solid #ddd;
-    font-size: 22px;
-    font-weight: normal;
-  }
-
-  .fa.invalid {
-    color: $invalid-color;
-    cursor: pointer;
-  }
-
-  & > .nav {
-    display: inline-block;
-    top: 40px;
-    left: 0px;
-    bottom: 40px;
-    width: $wizardNavWidth;
-    padding: 10px 10px 10px $WizardSidePadding;
-
-    .nav-item {
-      position: relative;
-      display: block;
-      height: $WizardNavItemHeight;
-      width: $WizardNavItemWidth;
-      text-align: left;
-      padding-left: 10px;
-      background: transparent;
-      border: none;
-      border-bottom: 1px solid $WizardNavItemBdColor;
-      margin-top: -1px;
-      color: $WizardNavItemColor;
-      font-size: 12px;
-      border-radius: 0;
-
-      &::after {
-        content: " ";
-        position: absolute;
-        top: 0;
-        right: -10px;
-        display: block;
-        height: inherit;
-        width: 0;
-        border-left: none;
-        border-top: $WizardNavItemHeight/2 solid transparent;
-        border-bottom: $WizardNavItemHeight/2 solid transparent;
-      }
-
-      &[disabled] {
-        color: #444;
-        background: transparent;
-      }
-
-      &.current {
-        width: $WizardNavItemWidth;
-        background: $WizardNavItemBgColor;
-        color: $WizardButtonColorHiLight;
-        border-color: $WizardNextBtnBgColor;
-
-        &::after {
-          border-left: $WizardNavItemBgColor 10px solid;
-        }
-
-        &:focus {
-          outline: none;
-        }
-
-        .status-indicator {
-          color: inherit;
-        }
-      }
-
-      .status-indicator {
-        position: absolute;
-        right: 0;
-        top: 18px;
-        width: $WizardStatusIndicatorSize;
-        height: $WizardStatusIndicatorSize;
-        color: orange;
-      }
-    }
-  }
-
-  .step {
-    position: absolute;
-    top: $wizardTitleBarHeight;
-    left: $wizardNavWidth;
-    right: 0;
-    bottom: $wizardToolBarHeight;
-    color: #888;
-
-    h1 {
-      position: absolute;
-      top: 0;
-      height: 45px;
-      left: 10px;
-      right: 65px;
-      margin: 0;
-      padding-top: 20px;
-    }
-
-    h2.section-title {
-      margin-bottom: 5px;
-      padding-bottom: 5px;
-    }
-
-    h1, h2.section-title {
-      font-size: 18px;
-      font-weight: normal;
-      color: #555;
-      border-bottom: 1px solid #ddd;
-    }
-
-    .content {
-      position: absolute;
-      top: 45px;
-      left: 10px;
-      right: 0;
-      bottom: 0;
-      padding: 5px 65px 24px 0;
-      overflow: auto;
-
-      .subtitle {
-        margin-bottom: 30px;
-      }
-
-      label {
-        font-weight: normal;
-        color: #555;
-      }
-    }
-  }
-
-  .toolbar {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: $wizardToolBarHeight;
-    line-height: $wizardToolBarHeight;
-    vertical-align: middle;
-    background: $WizardToolbarBgColor;
-    border-top: 1px solid $WizardBtnBdColor;
-
-    .secondary-btn-grp {
-      position: absolute;
-      left: $WizardSidePadding;
-    }
-
-    .primary-btn-grp {
-      position: absolute;
-      right: $WizardSidePadding;
-    }
-
-    .secondary-btn-grp button {
-      margin-right: $WizardBtnGap - 3px; // white space character takes 3px
-    }
-
-    .primary-btn-grp button {
-      margin-left: $WizardBtnGap - 3px; // white space character takes 3px
-    }
-
-    .btn-wrap {
-      display: inline-block;
-    }
-
-    .btn-wrap.finish {
-      padding-left: 15px;
-      margin-left: 20px;
-      border-left: 2px solid #ddd;
-    }
-
-    .separator {
-      display: inline-block;
-      width: 0;
-      margin-left: 20px;
-      margin-right: 15px;
-      border-left: 1px solid $WizardToolbarVerticalSeparatorBdColor;
-      height: $wizardToolBarHeight;
-      vertical-align: top;
-    }
-
-    button {
-      height: $WizardToolbarBtnHeight;
-      line-height: $WizardToolbarBtnHeight - 2px;
-      vertical-align: baseline;
-      padding: 0 25px 2px 25px;
-      font-size: 14px;
-      color: $WizardBtnTextColor;
-      border: 1px solid $WizardBtnBdColor;
-      background: $WizardBtnBgColor;
-
-      &[disabled] {
-        color: #ccc;
-        border-color: #ddd;
-        background: #fff;
-      }
-
-      &.next {
-        color: $WizardButtonColorHiLight;
-        border-color: $WizardNextBtnBdColor;
-        background: $WizardNextBtnBgColor;
-
-        &[disabled] {
-          color: $WizardButtonColorHiLight;
-          border-color: $WizardFinishBtnDisabledBdColor;
-          background: $WizardFinishBtnDisabledBgColor;
-        }
-      }
-
-      &.finish {
-        color: $WizardButtonColorHiLight;
-        border-color: $WizardFinishBtnBdColor;
-        background: $WizardFinishBtnBgColor;
-
-        &[disabled] {
-          color: $WizardButtonColorHiLight;
-          border-color: $WizardFinishBtnDisabledBdColor;
-          background: $WizardFinishBtnDisabledBgColor;
-        }
-      }
-    }
-  }
-
-  .help-panel {
-    top: $wizardTitleBarHeight;
-    bottom: $wizardToolBarHeight;
-  }
-
-  .error-message {
-    display: none !important;
-  }
-}
-
-.modal-dialog-wizard {
-
-  .modal-dialog {
-    position: relative;
-    margin: 0 auto;
-    height: $wizardHeight;
-    width: $wizardWidth;
-
-    // $wizardMaxHeight is the max height of the modal content without
-    // padding, so need to add the padding here.
-    max-height: $wizardMaxHeight + $wizardTopPadding + $wizardBottomPadding;
-
-    // $wizardMaxWidth is the max width of the modal content without
-    // padding, so need to add the padding here.
-    max-width: $wizardMaxWidth + $wizardLeftPadding + $wizardRightPadding;
-
-    // $wizardMinHeight is the min height of the modal content without
-    // padding, so need to add the padding here.
-    min-height: $wizardMinHeight + $wizardTopPadding + $wizardBottomPadding;
-
-    // $wizardMinWidth is the min with of the modal content without
-    // padding, so need to add the padding here.
-    min-width: $wizardMinWidth + $wizardLeftPadding + $wizardRightPadding;
-    overflow-x: auto;
-
-    .modal-content {
-      position: absolute;
-      top: $wizardTopPadding;
-      left: $wizardLeftPadding;
-      right: $wizardRightPadding;
-      bottom: $wizardBottomPadding;
-      border-radius: 0;
-
-      @media (max-width: 1000px) {
-        left: 0;
-        right: 0;
-      }
-
-      @media (max-height: 600px) {
-        top: 0;
-        bottom: 0;
-      }
-    }
-  }
-}
-/* workaround for odd Bootstrap checkbox vertical alignment */
-.checkbox {
-  input[type="checkbox"] {
-    margin-top: 3px;
-  }
-}
-
-.form-control {
-  @include input-placeholder {
-    font-weight: normal;
-    color: $placeholder-text-color;
-  }
-}
-
-.form-group .required label:after {
-  content: " *";
-  color: red;
-}
-
-.btn-toggle {
-  color: #333;
-  background-color: #fff;
-  border-color: #adadad;
-
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: #ebebeb;
-  }
-
-  &.active {
-    background-color: #0077b3;
-    border-color: #006699;
-    color: #fff !important;
-  }
-
-  &.disabled.active,
-  &[disabled].active {
-    background-color: rgba(0, 119, 179, 0.65);
-    border-color: rgba(0, 102, 153, 0.65);
-    color: #fff;
-  }
-
-  &.disabled,
-  &.disabled:hover,
-  &.disabled:focus,
-  &.disabled:active,
-  &[disabled]:hover,
-  &[disabled]:focus,
-  &[disabled]:active,
-  fieldset[disabled] &:hover,
-  fieldset[disabled] &:focus,
-  fieldset[disabled] &:active,
-  fieldset[disabled] &.active {
-    background-color: #fafafa;
-    border-color: #ccc;
-    color: #999;
-  }
-}
diff --git a/horizon/static/framework/widgets/wizard/wizard.spec.js b/horizon/static/framework/widgets/wizard/wizard.spec.js
index 79b945af08..e04485c306 100644
--- a/horizon/static/framework/widgets/wizard/wizard.spec.js
+++ b/horizon/static/framework/widgets/wizard/wizard.spec.js
@@ -46,7 +46,7 @@
     it('should have empty title by default', function () {
       $scope.workflow = {};
       $scope.$apply();
-      expect(element[0].querySelector('.title').textContent).toBe('');
+      expect(element[0].querySelector('.h4').textContent).toBe('');
     });
 
     it('should have title if it is specified by workflow', function () {
@@ -54,14 +54,14 @@
       $scope.workflow = {};
       $scope.workflow.title = titleText;
       $scope.$apply();
-      expect(element[0].querySelector('.title').textContent).toBe(titleText);
+      expect(element[0].querySelector('.h4').textContent).toBe(titleText);
     });
 
     it('should contain one help-panel', function () {
       $scope.workflow = {};
       $scope.workflow.title = "doesn't matter";
       $scope.$apply();
-      expect(element[0].querySelectorAll('help-panel').length).toBe(1);
+      expect(element[0].querySelectorAll('#help-panel').length).toBe(1);
     });
 
     it('should have no steps if no steps defined', function () {
@@ -102,9 +102,9 @@
       expect(angular.element(element).find('.step').eq(0).hasClass('ng-hide')).toBe(false);
       expect(angular.element(element).find('.step').eq(1).hasClass('ng-hide')).toBe(true);
       expect(angular.element(element).find('.step').eq(2).hasClass('ng-hide')).toBe(true);
-      expect(angular.element(element).find('.nav-item').eq(0).hasClass('current')).toBe(true);
-      expect(angular.element(element).find('.nav-item').eq(1).hasClass('current')).toBe(false);
-      expect(angular.element(element).find('.nav-item').eq(2).hasClass('current')).toBe(false);
+      expect(angular.element(element).find('.nav-item').eq(0).hasClass('active')).toBe(true);
+      expect(angular.element(element).find('.nav-item').eq(1).hasClass('active')).toBe(false);
+      expect(angular.element(element).find('.nav-item').eq(2).hasClass('active')).toBe(false);
 
       $scope.switchTo(1);
       $scope.$apply();
@@ -112,9 +112,9 @@
       expect(angular.element(element).find('.step').eq(0).hasClass('ng-hide')).toBe(true);
       expect(angular.element(element).find('.step').eq(1).hasClass('ng-hide')).toBe(false);
       expect(angular.element(element).find('.step').eq(2).hasClass('ng-hide')).toBe(true);
-      expect(angular.element(element).find('.nav-item').eq(0).hasClass('current')).toBe(false);
-      expect(angular.element(element).find('.nav-item').eq(1).hasClass('current')).toBe(true);
-      expect(angular.element(element).find('.nav-item').eq(2).hasClass('current')).toBe(false);
+      expect(angular.element(element).find('.nav-item').eq(0).hasClass('active')).toBe(false);
+      expect(angular.element(element).find('.nav-item').eq(1).hasClass('active')).toBe(true);
+      expect(angular.element(element).find('.nav-item').eq(2).hasClass('active')).toBe(false);
 
       $scope.switchTo(2);
       $scope.$apply();
@@ -122,18 +122,18 @@
       expect(angular.element(element).find('.step').eq(0).hasClass('ng-hide')).toBe(true);
       expect(angular.element(element).find('.step').eq(1).hasClass('ng-hide')).toBe(true);
       expect(angular.element(element).find('.step').eq(2).hasClass('ng-hide')).toBe(false);
-      expect(angular.element(element).find('.nav-item').eq(0).hasClass('current')).toBe(false);
-      expect(angular.element(element).find('.nav-item').eq(1).hasClass('current')).toBe(false);
-      expect(angular.element(element).find('.nav-item').eq(2).hasClass('current')).toBe(true);
+      expect(angular.element(element).find('.nav-item').eq(0).hasClass('active')).toBe(false);
+      expect(angular.element(element).find('.nav-item').eq(1).hasClass('active')).toBe(false);
+      expect(angular.element(element).find('.nav-item').eq(2).hasClass('active')).toBe(true);
     });
 
-    it('should not show back button in step 1/3', function () {
+    it('should disable back button in step 1/3', function () {
       $scope.workflow = {
         steps: [{}, {}, {}]
       };
       $scope.$apply();
-      expect(angular.element(element).find('button.back').hasClass('ng-hide')).toBe(true);
-      expect(angular.element(element).find('button.next').hasClass('ng-hide')).toBe(false);
+      expect(element[0].querySelector('button.back').hasAttribute('disabled')).toBe(true);
+      expect(element[0].querySelector('button.next').hasAttribute('disabled')).toBe(false);
     });
 
     it('should show both back and next button in step 2/3', function () {
@@ -143,19 +143,19 @@
       $scope.$apply();
       $scope.switchTo(1);
       $scope.$apply();
-      expect(angular.element(element).find('button.back').hasClass('ng-hide')).toBe(false);
-      expect(angular.element(element).find('button.next').hasClass('ng-hide')).toBe(false);
+      expect(element[0].querySelector('button.back').hasAttribute('disabled')).toBe(false);
+      expect(element[0].querySelector('button.next').hasAttribute('disabled')).toBe(false);
     });
 
-    it('should not show next button in step 3/3', function () {
+    it('should disable next button in step 3/3', function () {
       $scope.workflow = {
         steps: [{}, {}, {}]
       };
       $scope.$apply();
       $scope.switchTo(2);
       $scope.$apply();
-      expect(angular.element(element).find('button.back').hasClass('ng-hide')).toBe(false);
-      expect(angular.element(element).find('button.next').hasClass('ng-hide')).toBe(true);
+      expect(element[0].querySelector('button.back').hasAttribute('disabled')).toBe(false);
+      expect(element[0].querySelector('button.next').hasAttribute('disabled')).toBe(true);
     });
 
     it('should have finish button disabled if wizardForm is invalid', function () {
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/project.scss b/openstack_dashboard/dashboards/project/static/dashboard/project/project.scss
deleted file mode 100644
index 65a4bcf5b0..0000000000
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/project.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "workflow/workflow";
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.help.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.help.html
index dda37f953a..18fa0dde52 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.help.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.help.html
@@ -1,5 +1,4 @@
 <div>
-  <h1 translate>Configuration Help</h1>
   <p translate>Custom scripts are attached to instances to perform specific actions when the instance is launched. For example, if you are unable to install <samp>cloud-init</samp> inside a guest operating system, you can use a custom script to get a public key and add it to the user account.</p>
   <p translate>Type your script directly into the Customization Script field. If your browser supports the HTML5 File API, you may choose to load your script from a file. The size of your script should not exceed 16 Kb.</p>
   <p translate>An advanced option available when launching an instance is disk partitioning. There are two disk partition options. Selecting <b>Automatic</b> resizes the disk and sets it to a single partition. Selecting <b>Manual</b> allows you to create multiple partitions on the disk.</p>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.html
index 1dc55b5163..a40b0729b3 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.html
@@ -1,36 +1,35 @@
 <div ng-controller="LaunchInstanceConfigurationController as config">
-  <h1 translate>Configuration</h1>
+  <p translate>
+    You can customize your instance after it has launched using the options available here.
+    "Customization Script" is analogous to "User Data" in other systems.
+  </p>
 
-  <div class="content">
-    <div class="subtitle"></div>
+  <load-edit config="config"
+             user-input="model.newInstanceSpec"
+             key="user_data">
+  </load-edit>
 
-    <load-edit config="config"
-               user-input="model.newInstanceSpec"
-               key="user_data">
-    </load-edit>
-
-    <div hz-if-nova-extensions='["DiskConfig"]'>
-      <div class="form-group disk-partition">
-        <label for="launch-instance-disk-partition" translate>
-          Disk Partition
-        </label>
-        <select class="form-control"
-                id="launch-instance-disk-partition"
-                ng-model="model.newInstanceSpec.disk_config"
-                ng-options="option.value as option.text for option in config.diskConfigOptions">
-        </select>
-      </div>
+  <div hz-if-nova-extensions='["DiskConfig"]'>
+    <div class="form-group">
+      <label for="disk-partition" translate>
+        Disk Partition
+      </label>
+      <select class="form-control"
+              id="disk-partition"
+              ng-model="model.newInstanceSpec.disk_config"
+              ng-options="option.value as option.text for option in config.diskConfigOptions">
+      </select>
     </div>
+  </div>
 
-    <div hz-if-nova-extensions='["ConfigDrive"]'>
-      <div class="checkbox customization-script-source">
-        <label>
-          <input type="checkbox"
-                 ng-model="model.newInstanceSpec.config_drive">
-          <span translate>Configuration Drive</span>
-        </label>
-      </div>
+  <div hz-if-nova-extensions='["ConfigDrive"]'>
+    <div class="checkbox">
+      <label for="config-drive" translate>
+        <input type="checkbox"
+               id="config-drive"
+               ng-model="model.newInstanceSpec.config_drive">
+        Configuration Drive
+      </label>
     </div>
-
   </div>
 </div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.scss b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.scss
deleted file mode 100644
index 25c68c9de5..0000000000
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-[ng-controller="LaunchInstanceConfigurationController as config"] {
-
-  select {
-    width: 250px;
-  }
-
-  textarea {
-    width: 100%;
-    height: 20em;
-    font-family: $font-family-monospace;
-  }
-
-  .btn-file {
-    position: relative;
-    overflow: hidden;
-
-    input[type=file] {
-      position: absolute;
-      top: 0;
-      right: 0;
-      min-width: 100%;
-      min-height: 100%;
-      font-size: 100px;
-      text-align: right;
-      filter: alpha(opacity=0);
-      opacity: 0;
-      outline: none;
-      background: white;
-      cursor: inherit;
-      display: block;
-    }
-  }
-
-  .script-modified {
-    font-width: normal;
-    font-style: italic;
-    color: #888;
-  }
-
-  .fa.invalid {
-    display: none;
-  }
-
-  .size-indicator.warning {
-    color: $WizardValidationErrorColor;
-    border: none;
-    padding: 0;
-    margin: 0;
-    border: none;
-
-    .fa.invalid {
-      display: inline;
-      color: $invalid-color;
-      cursor: pointer;
-    }
-  }
-
-  .script-file:after,
-  .disk-partition:after {
-    content: ' ';
-    display: block;
-    clear: both;
-    margin-bottom: 2.5em;
-  }
-}
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.help.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.help.html
index 22e3dcaaf4..d40a23d70b 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.help.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.help.html
@@ -1,5 +1,3 @@
-<h1 translate>Instance Details Help</h1>
-
 <p translate>An instance name is required and used to help you uniquely identify your instance in the dashboard.</p>
 
 <p translate>If you select an availability zone and plan to use the 'boot from volume' option in the Source step, make sure that the availability zone you select for the instance is the same availability zone where your bootable volume resides.</p>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.html
index d6d1798ae3..3a36337941 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.html
@@ -1,71 +1,50 @@
 <div ng-controller="LaunchInstanceDetailsController as ctrl">
-  <h1 translate>Instance Details</h1>
+  <p translate>Please provide the initial hostname for the instance, the availability zone where it will be deployed, and the instance count.
+    Increase the Count to create multiple instances with the same settings.</p>
 
-  <!--content-->
-  <div class="content">
-    <div translate class="subtitle">Please provide the initial hostname for the instance, the availability zone where it will be deployed, and the instance count.
-      Increase the Count to create multiple instances with the same settings.</div>
+  <div class="row">
+    <div class="col-xs-12 col-sm-8">
+      <div class="form-group required"
+         ng-class="{ 'has-error': launchInstanceDetailsForm.name.$invalid && launchInstanceDetailsForm.name.$dirty }">
+        <label translate for="name" class="control-label">
+          Instance Name
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input id="name" name="name" type="text" class="form-control"
+               ng-model="model.newInstanceSpec.name" ng-required="true">
 
-    <!--selected-source form-->
-    <div class="selected-source clearfix">
-      <div class="row">
-        <div class="col-xs-12 col-sm-8">
-          <div class="row form-group">
-            <div class="col-sm-12 col-md-5">
-              <div class="form-field required instance-name"
-                ng-class="{ 'has-error': launchInstanceDetailsForm['instance-name'].$invalid && launchInstanceDetailsForm['instance-name'].$dirty }">
-                <label translate class="on-top">Instance Name</label>
-                <span class="fa fa-exclamation-triangle invalid"
-                    ng-show="launchInstanceDetailsForm['instance-name'].$invalid && launchInstanceDetailsForm.$dirty"
-                    popover="{$ ctrl.instanceNameError $}"
-                    popover-placement="top" popover-append-to-body="true"
-                    popover-trigger="hover"></span>
-                <input name="instance-name" type="text" class="form-control input-sm"
-                       ng-model="model.newInstanceSpec.name" ng-required="true">
-              </div>
-            </div>
+          <span class="help-block"
+                ng-show="launchInstanceDetailsForm.name.$invalid && launchInstanceDetailsForm.name.$dirty">
+            {$ ctrl.instanceNameError $}
+          </span>
+      </div>
 
-            <div class="col-sm-12 col-md-5">
-              <div class="form-field availability-zone">
-                <label translate class="on-top">Availability Zone</label>
-                <select class="form-control input-sm"
-                        ng-options="zone for zone in model.availabilityZones"
-                        ng-model="model.newInstanceSpec.availability_zone">
-                </select>
-              </div>
-            </div>
+      <div class="form-group">
+        <label class="control-label" translate for="availability-zone">Availability Zone</label>
+        <select class="form-control" id="availability-zone"
+                ng-options="zone for zone in model.availabilityZones"
+                ng-model="model.newInstanceSpec.availability_zone">
+        </select>
+      </div>
 
-            <div class="col-sm-6 col-md-2">
-              <div class="form-field instance_count"
-                ng-class="{ 'has-error': launchInstanceDetailsForm['instance-count'].$invalid }">
-                <label translate class="on-top">Count</label>
-                <span class="fa fa-exclamation-triangle invalid"
-                    ng-show="launchInstanceDetailsForm['instance-count'].$invalid"
-                    popover="{$ launchInstanceDetailsForm['instance-count'].$error.validateNumberMax ? ctrl.instanceCountMaxError : ctrl.instanceCountError $}"
-                    popover-placement="top" popover-append-to-body="true"
-                    popover-trigger="hover"></span>
-                <input name="instance-count" type="number" class="form-control input-sm"
-                       ng-model="model.newInstanceSpec.instance_count"
-                       ng-required="true" ng-pattern="/^[0-9]+$/"
-                       validate-number-min="1"
-                       validate-number-max="{$ ctrl.maxInstanceCount $}">
-              </div>
-            </div>
-          </div>
-
-        </div>
-
-        <!--instance chart-->
-        <div class="col-xs-12 col-sm-4">
-          <div class="chart">
-            <pie-chart chart-data="ctrl.instanceStats"
-                       chart-settings="ctrl.chartSettings"></pie-chart>
-          </div>
-        </div>
-        <!--end instance chart-->
+      <div class="form-group" ng-class="{ 'has-error': launchInstanceDetailsForm.count.$invalid }">
+        <label class="control-label" for="instance-count" translate>
+          Count
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input id="count" name="count" type="number" class="form-control" min="1"
+               ng-model="model.newInstanceSpec.instance_count"
+               ng-required="true" ng-pattern="/^[0-9]+$/"
+               validate-number-min="1"
+               validate-number-max="{$ ctrl.maxInstanceCount $}">
+        <span class="help-block" ng-show="launchInstanceDetailsForm.count.$invalid">
+          {$ launchInstanceDetailsForm['instance-count'].$error.validateNumberMax ? ctrl.instanceCountMaxError : ctrl.instanceCountError $}
+        </span>
       </div>
     </div>
-    <!--end selected-source form-->
+
+    <div class="col-xs-12 col-sm-4">
+      <pie-chart chart-data="ctrl.instanceStats" chart-settings="ctrl.chartSettings"></pie-chart>
+    </div>
   </div>
-  <!-- end content -->
 </div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.help.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.help.html
index 5cf36fac13..9ac0ded2f9 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.help.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.help.html
@@ -1,9 +1,8 @@
 <div>
-  <h1 translate>Flavor Help</h1>
   <p translate>The flavor you select for an instance determines the amount of compute, storage and memory resources that will be carved out for the instance.
   </p>
   <p translate>The flavor you select must have enough resources allocated to support the type of instance you are trying to create. Flavors that do not provide enough resources for your instance are identified on the <b>Available</b> table with a yellow warning icon.
   </p>
   <p translate>Administrators are responsible for creating and managing flavors. A custom flavor can be created for you or for a specific project where it is shared with the users assigned to that project. If you need a custom flavor, contact your administrator.
   </p>
-</div>
\ No newline at end of file
+</div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.html
index ee6e7829d2..b230e883a1 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.html
@@ -13,28 +13,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <div ng-controller="LaunchInstanceFlavorController as selectFlavorCtrl">
-  <h1 translate>Flavor</h1>
-  <div class="content">
-    <div class="subtitle" translate>Flavors manage the sizing for the compute, memory and storage capacity of the instance.</div>
-    <transfer-table
-        tr-model="selectFlavorCtrl.transferTableModel"
-        limits="selectFlavorCtrl.allocationLimits">
-      <allocated ng-model="selectFlavorCtrl.allocatedFlavorFacades.length"
-        validate-number-min="1" name="allocated-flavor">
-        <select-flavor-table
-            items="selectFlavorCtrl.allocatedFlavorFacades"
-            displayed-items="selectFlavorCtrl.displayedAllocatedFlavorFacades"
-            metadata-defs="selectFlavorCtrl.metadataDefs">
-        </select-flavor-table>
-      </allocated>
-      <available>
-        <select-flavor-table
-            is-available-table="true"
-            items="selectFlavorCtrl.availableFlavorFacades"
-            displayed-items="selectFlavorCtrl.displayedAvailableFlavorFacades"
-            metadata-defs="selectFlavorCtrl.metadataDefs">
-        </select-flavor-table>
-      </available>
-    </transfer-table>
-  </div>
+  <p translate>
+    Flavors manage the sizing for the compute, memory and storage capacity of the instance.
+  </p>
+  <transfer-table
+      tr-model="selectFlavorCtrl.transferTableModel"
+      limits="selectFlavorCtrl.allocationLimits">
+    <allocated ng-model="selectFlavorCtrl.allocatedFlavorFacades.length"
+      validate-number-min="1" name="allocated-flavor">
+      <select-flavor-table
+          items="selectFlavorCtrl.allocatedFlavorFacades"
+          displayed-items="selectFlavorCtrl.displayedAllocatedFlavorFacades"
+          metadata-defs="selectFlavorCtrl.metadataDefs">
+      </select-flavor-table>
+    </allocated>
+    <available>
+      <select-flavor-table
+          is-available-table="true"
+          items="selectFlavorCtrl.availableFlavorFacades"
+          displayed-items="selectFlavorCtrl.displayedAvailableFlavorFacades"
+          metadata-defs="selectFlavorCtrl.metadataDefs">
+      </select-flavor-table>
+    </available>
+  </transfer-table>
 </div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.scss b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/select-flavor-table.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/select-flavor-table.html
index e5df126133..80008d9262 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/select-flavor-table.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/select-flavor-table.html
@@ -32,7 +32,7 @@ limitations under the License.
     <th st-sort="totalDisk" class="rsp-p1" translate>Total Disk</th>
     <th st-sort="rootDisk" class="rsp-p2" translate>Root Disk</th>
     <th st-sort="ephemeralDisk" class="rsp-p2" translate>Ephemeral Disk</th>
-    <th st-sort="isPublic" class="rsp-p2" translate>Public</th>
+    <th st-sort="isPublic" class="rsp-p1" translate>Public</th>
     <th></th>
   </tr>
   </thead>
@@ -77,7 +77,7 @@ limitations under the License.
       {$ ::item.rootDisk | gb $}
     </td>
     <td class="rsp-p2">{$ ::item.ephemeralDisk | gb $}</td>
-    <td class="rsp-p2">{$ ::item.isPublic | yesno $}</td>
+    <td class="rsp-p1">{$ ::item.isPublic | yesno $}</td>
     <td class="action-col">
       <action-list button-tooltip="item.disabledMessage"
           bt-model="tooltipModel"
@@ -99,15 +99,22 @@ limitations under the License.
   <tr ng-repeat-end class="detail-row" ng-if="showItemFunc(item)">
     <td></td>
     <td colspan="7" class="detail">
-      <h5 translate>Impact on your quota</h5>
-      <pie-chart chart-data="item.instancesChartData"
-                 chart-settings="chartSettings"></pie-chart>
-      <pie-chart chart-data="item.vcpusChartData"
-                 chart-settings="chartSettings"></pie-chart>
-      <pie-chart chart-data="item.ramChartData"
-                 chart-settings="chartSettings"></pie-chart>
+      <span class="h5" translate>Impact on your quota</span>
+      <div class="row">
+        <div class="col-xs-4">
+          <pie-chart chart-data="item.instancesChartData"
+                     chart-settings="chartSettings"></pie-chart>
+        </div>
+        <div class="col-xs-4">
+          <pie-chart chart-data="item.vcpusChartData"
+                     chart-settings="chartSettings"></pie-chart>
+        </div>
+        <div class="col-xs-4">
+          <pie-chart chart-data="item.ramChartData"
+                     chart-settings="chartSettings"></pie-chart>
+        </div>
+      </div>
       <div ng-if="metadataDefs.flavor">
-        <hr>
         <div class="row" ng-if="item.extras">
           <div class="col-sm-12">
             <metadata-display
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/create-keypair.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/create-keypair.html
index 0a141aca3b..9239bd0d25 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/create-keypair.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/create-keypair.html
@@ -1,52 +1,45 @@
-<div class="ng-wizard no-navigation" ng-form="wizardForm">
-  <div class="download-iframes" style="display: none;"></div>
-  <div class="title" translate>Launch Instance</div>
+<div class="ng-wizard" ng-form="wizardForm">
 
-  <div class="step">
-    <h1 translate>Create Key Pair</h1>
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="ctrl.cancel()" aria-hidden="true" aria-label="Close">
+      <span aria-hidden="true" class="fa fa-close"></span>
+    </button>
+    <span class="h4 modal-title">Create Key Pair</span>
+  </div>
 
-    <div class="content">
-      <div class="subtitle" translate>
-        Key Pairs are how you login to your instance after it is launched.
-        Choose a key pair name you will recognize.
-        Names may only include alphanumeric characters, spaces, or dashes.
-      </div>
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4 required">
-            <label translate>Key Pair Name</label>
-            <span class="fa fa-exclamation-triangle invalid"
-                  ng-show="ctrl.doesKeypairExist(ctrl.keypair) || wizardForm.$invalid"
-                  popover="{$ ctrl.keypairExistsError $}"
-                  popover-placement="top" popover-append-to-body="true"
-                  popover-trigger="hover"></span>
-            </div>
-        </div>
-        <div class="form-field required row">
-          <div class="col-md-4" ng-class="{'has-error': ctrl.doesKeypairExist()}">
-            <input class="form-control" name="name"
-                   ng-model="ctrl.keypair"
-                   ng-required="true" 
-                   ng-pattern="/^[A-Za-z0-9 -]+$/"
-                   placeholder="{$ 'Required' | translate $}">
-          </div>
-        </div>
-      </div>
+  <div class="modal-body">
+    <p translate>
+      Key Pairs are how you login to your instance after it is launched.
+      Choose a key pair name you will recognize.
+      Names may only include alphanumeric characters, spaces, or dashes.
+    </p>
+
+    <div class="form-group" ng-class="{'has-error': (ctrl.doesKeypairExist() || wizardForm.$invalid) && wizardForm.$dirty }">
+      <label class="control-label" for="keypair-name" translate>
+        Key Pair Name
+        <span class="hz-icon-required fa fa-asterisk"></span>
+      </label>
+      <input class="form-control" name="name"
+             id="keypair-name"
+             ng-model="ctrl.keypair"
+             ng-required="true"
+             ng-pattern="/^[A-Za-z0-9 -]+$/">
+      <span class="help-block"
+            ng-show="(ctrl.doesKeypairExist() || wizardForm.$invalid) && wizardForm.$dirty">
+        {$ ctrl.keypairExistsError $}
+      </span>
     </div>
   </div>
 
-  <div class="toolbar">
-    <div class="secondary-btn-grp">
-      <button class="cancel btn btn-sm btn-default" ng-click="ctrl.cancel()">
-        <span class="fa fa-close"></span>
-        <translate>Cancel</translate>
-      </button>
-    </div>
-    <div class="primary-btn-grp">
-      <button class="finish btn btn-sm btn-success"
-              ng-click="ctrl.submit()" ng-disabled="wizardForm.$invalid || ctrl.doesKeypairExist()">
-        <translate>Create Keypair</translate>
-      </button>
-    </div>
+  <div class="modal-footer">
+    <button class="btn btn-default pull-left" ng-click="ctrl.cancel()">
+      <span class="fa fa-close"></span>
+      <translate>Cancel</translate>
+    </button>
+
+    <button class="btn btn-primary"
+            ng-click="ctrl.submit()" ng-disabled="wizardForm.$invalid || ctrl.doesKeypairExist()">
+      <translate>Create Keypair</translate>
+    </button>
   </div>
 </div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/import-keypair.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/import-keypair.html
index 2c9a7b9228..fa6ae051a7 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/import-keypair.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/import-keypair.html
@@ -1,50 +1,55 @@
-<div class="ng-wizard no-navigation" ng-form="wizardForm">
-  <div class="title" translate>Launch Instance</div>
+<div class="ng-wizard" ng-form="wizardForm">
 
-  <div class="step">
-    <h1 translate>Import Key Pair</h1>
-    <div class="content">
-      <div class="subtitle" translate>
-        Key Pairs are how you login to your instance after it is launched.
-        Choose a key pair name you will recognize and paste your SSH public key into the
-        space provided.
-      </div>
-
-      <div class="form-group">
-        <div class="form-field required name">
-          <label translate>Key Pair Name</label>
-          <input class="form-control" name="name"
-                 ng-model="ctrl.model.name"
-                 ng-required="true" placeholder="{$ 'Required' | translate $}"/>
-        </div>
-        <div class="form-field required key">
-          <label translate>Public Key</label>
-          <textarea class="form-control" name="key" rows="15"
-                    ng-model="ctrl.model.public_key"
-                    ng-required="true" placeholder="{$ 'Required' | translate $}">
-          </textarea>
-        </div>
-      </div>
-    </div>
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="ctrl.cancel()" aria-hidden="true" aria-label="Close">
+      <span aria-hidden="true" class="fa fa-close"></span>
+    </button>
+    <span class="h4 modal-title">Import Key Pair</span>
   </div>
 
-  <div class="toolbar">
-    <div class="secondary-btn-grp">
-      <button class="cancel btn btn-sm btn-default" ng-click="ctrl.cancel()">
-        <span class="fa fa-close"></span>
-        <translate>Cancel</translate>
-      </button>
+  <div class="modal-body">
+    <help-panel>
+      <ng-include src="ctrl.path + 'keypair.help.html'"></ng-include>
+    </help-panel>
+
+    <p translate>
+      Key Pairs are how you login to your instance after it is launched.
+      Choose a key pair name you will recognize and paste your SSH public key into the
+      space provided.
+    </p>
+
+    <div class="form-group">
+      <label for="keypair-name"translate>
+        Key Pair Name
+        <span class="hz-icon-required fa fa-asterisk"></span> 
+      </label>
+      <input class="form-control" name="name" id="keypair-name"
+             ng-model="ctrl.model.name"
+             ng-required="true"/>
     </div>
-    <div class="primary-btn-grp">
-      <button class="finish btn btn-sm btn-success"
-              ng-click="ctrl.submit()" ng-disabled="wizardForm.$invalid">
-        <span class="fa fa-upload"></span>
-        <translate>Import Key Pair</translate>
-      </button>
+
+    <div class="form-group">
+      <label for="public-key" translate>
+        Public Key
+        <span class="hz-icon-required fa fa-asterisk"></span> 
+      </label>
+      <textarea class="form-control" id="public-key" name="key" rows="15"
+                  ng-model="ctrl.model.public_key"
+                  ng-required="true">
+      </textarea>
     </div>
+
   </div>
 
-  <help-panel>
-    <ng-include src="ctrl.path + 'keypair.help.html'"></ng-include>
-  </help-panel>
+  <div class="modal-footer">
+    <button class="btn btn-default pull-left" ng-click="ctrl.cancel()">
+      <span class="fa fa-close"></span>
+      <translate>Cancel</translate>
+    </button>
+    <button class="btn btn-primary"
+            ng-click="ctrl.submit()" ng-disabled="wizardForm.$invalid">
+      <span class="fa fa-upload"></span>
+      <translate>Import Key Pair</translate>
+    </button>
+  </div>
 </div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.help.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.help.html
index 21d1296207..bdc5d874d3 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.help.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.help.html
@@ -1,4 +1,3 @@
-<h1 translate>Key Pair Help</h1>
 <p translate>
   There are two ways to generate a key pair. From a Linux system,
   generate the key pair with the <samp>ssh-keygen</samp> command:
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.html
index 4feb0bbe35..ddf09080fb 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.html
@@ -1,147 +1,134 @@
 <div ng-controller="LaunchInstanceKeypairController as ctrl">
-  <h1 translate>Key Pair</h1>
+  <p translate>
+    A key pair allows you to SSH into your newly created instance.
+    You may select an existing key pair, import a key pair, or generate a new key pair.
+  </p>
 
-  <div class="content">
+  <div ng-if="ctrl.isKeypairCreated" class="alert alert-info" role="alert">
+    <p translate>A key pair named '{$ctrl.createdKeypair.name$}' was successfully created. This key pair should automatically download.</p>
+    <p translate>If not, you can manually dowload this keypair at the following link:</p>
+    <a class="btn btn-default" role="button" href="{$ ctrl.createdKeypair.regenerateUrl $}">
+      <span class="fa fa-download"></span>
+      {$ctrl.createdKeypair.name$}
+    </a>
+    <p translate>
+      Note: you will not be able to download this later.
+    </p>
+  </div>
 
-    <div class="subtitle" translate>
-      A key pair allows you to SSH into your newly created instance.
-      You may select an existing key pair, import a key pair, or generate a new key pair.
-    </div>
-    
-    <div ng-if="ctrl.isKeypairCreated" class="alert alert-info">
-      <div translate>A key pair named '{$ctrl.createdKeypair.name$}' was successfully created. This key pair should automatically download.</div>
-      <div>
-        <translate>If not, you can manually dowload this keypair at the following link:<translate>
-        <a href="{$ ctrl.createdKeypair.regenerateUrl $}">
-          <span class="fa fa-download"></span>
-          {$ctrl.createdKeypair.name$}
-        </a>
-      </div>
-      <div translate>
-        Note: you will not be able to download this later.
-      </div>
-    </div>
+  <button type="button" class="btn btn-default"
+          ng-click="ctrl.createKeyPair()">
+    <span class="fa fa-plus"></span>
+    <translate>Create Key Pair</translate>
+  </button>
+  <button type="button" class="btn btn-default"
+          ng-click="ctrl.importKeyPair()">
+    <span class="fa fa-upload"></span>
+    <translate>Import Key Pair</translate>
+  </button>
 
-    <div class="row form-group">
-      <div class="col-sm-12 form-inline">
-        <button type="button" class="btn btn-sm btn-primary pull-right"
-                ng-click="ctrl.createKeyPair()">
-          <span class="fa fa-fw fa-plus"></span>
-          <translate>Create Key Pair</translate>
-        </button>
-        <button type="button" class="btn btn-sm btn-primary pull-right"
-                ng-click="ctrl.importKeyPair()">
-          <span class="fa fa-fw fa-upload"></span>
-          <translate>Import Key Pair</translate>
-        </button>
-      </div>
-    </div>
+  <transfer-table tr-model="ctrl.tableData"
+                  limits="ctrl.tableLimits">
 
-    <transfer-table tr-model="ctrl.tableData"
-                    limits="ctrl.tableLimits">
+    <!-- Key Pairs Allocated-->
+    <allocated>
+      <table st-table="ctrl.tableData.displayedAllocated"
+             st-safe-src="ctrl.tableData.allocated" hz-table
+             class="table table-striped table-rsp table-detail">
+        <thead>
+          <tr>
+            <th class="expander"></th>
+            <th class="rsp-p1" translate>Name</th>
+            <th class="rsp-p2" translate>Fingerprint</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+        <tr ng-if="ctrl.tableData.allocated.length === 0">
+          <td colspan="8">
+            <div class="no-rows-help" translate>
+              Select a key pair from the available key pairs below.
+            </div>
+          </td>
+        </tr>
+        <tr ng-repeat-start="row in ctrl.tableData.displayedAllocated track by row.id">
+          <td class="expander">
+            <span class="fa fa-chevron-right" hz-expand-detail
+                  title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
+          </td>
+          <td class="rsp-p1">{$ row.name $}</td>
+          <td class="rsp-p2">{$ row.fingerprint $}</td>
+          <td class="action-col">
+            <action-list>
+              <action action-classes="'btn btn-sm btn-default'"
+                      callback="trCtrl.deallocate" item="row">
+                <span class="fa fa-minus"></span>
+              </action>
+            </action-list>
+          </td>
+        </tr>
+        <tr ng-repeat-end class="detail-row">
+          <td></td>
+          <td class="detail" colspan="3">
+            <dl class="dl-horizontal" ng-include="ctrl.tableDetails">
+            </dl>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </allocated>
 
-      <!-- Key Pairs Allocated-->
-      <allocated>
-        <table st-table="ctrl.tableData.displayedAllocated"
-               st-safe-src="ctrl.tableData.allocated" hz-table
-               class="table table-striped table-rsp table-detail">
-          <thead>
-            <tr>
-              <th class="expander"></th>
-              <th class="rsp-p1" translate>Name</th>
-              <th class="rsp-p2" translate>Fingerprint</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-          <tr ng-if="ctrl.tableData.allocated.length === 0">
+    <!-- Key Pairs Available -->
+    <available>
+      <table st-table="ctrl.tableData.displayedAvailable"
+             st-safe-src="ctrl.tableData.available"
+             hz-table class="table table-striped table-rsp table-detail">
+        <thead>
+          <tr>
+            <th class="search-header" colspan="7">
+              <hz-search-bar icon-classes="fa-search"></hz-search-bar>
+            </th>
+          </tr>
+          <tr>
+            <th class="expander"></th>
+            <th st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
+            <th st-sort="fingerprint" class="rsp-p1" translate>Fingerprint</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-if="trCtrl.numAvailable() === 0">
             <td colspan="8">
-              <div class="no-rows-help" translate>
-                Select a key pair from the available key pairs below.
+              <div class="no-rows-help">
+                {$ ::trCtrl.helpText.noneAvailText $}
               </div>
             </td>
           </tr>
-          <tr ng-repeat-start="row in ctrl.tableData.displayedAllocated track by row.id">
+          <tr ng-repeat-start="row in ctrl.tableData.displayedAvailable track by row.id"
+              ng-if="!trCtrl.allocatedIds[row.id]">
             <td class="expander">
               <span class="fa fa-chevron-right" hz-expand-detail
                     title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
             </td>
-            <td class="rsp-p1">{$ row.name $}</td>
-            <td class="rsp-p2">{$ row.fingerprint $}</td>
+            <td class="rsp-p1">{$ row.name$}</td>
+            <td class="rsp-p1">{$ row.fingerprint $}</td>
             <td class="action-col">
               <action-list>
                 <action action-classes="'btn btn-sm btn-default'"
-                        callback="trCtrl.deallocate" item="row">
-                  <span class="fa fa-minus"></span>
+                        callback="trCtrl.allocate" item="row">
+                  <span class="fa fa-plus"></span>
                 </action>
               </action-list>
             </td>
           </tr>
-          <tr ng-repeat-end class="detail-row">
+          <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
             <td></td>
-            <td class="detail" colspan="3">
-              <dl class="dl-horizontal" ng-include="ctrl.tableDetails">
-              </dl>
+            <td class="detail" colspan="3" ng-include="ctrl.tableDetails">
             </td>
           </tr>
-          </tbody>
-        </table>
-      </allocated>
+        </tbody>
+      </table>
+    </available>
 
-      <!-- Key Pairs Available -->
-      <available>
-        <table st-table="ctrl.tableData.displayedAvailable"
-               st-safe-src="ctrl.tableData.available"
-               hz-table class="table table-striped table-rsp table-detail">
-          <thead>
-            <tr>
-              <th class="search-header" colspan="7">
-                <hz-search-bar group-classes="input-group-sm" icon-classes="fa-search">
-                </hz-search-bar>
-              </th>
-            </tr>
-            <tr>
-              <th class="expander"></th>
-              <th st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
-              <th st-sort="fingerprint" class="rsp-p1" translate>Fingerprint</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr ng-if="trCtrl.numAvailable() === 0">
-              <td colspan="8">
-                <div class="no-rows-help">
-                  {$ ::trCtrl.helpText.noneAvailText $}
-                </div>
-              </td>
-            </tr>
-            <tr ng-repeat-start="row in ctrl.tableData.displayedAvailable track by row.id"
-                ng-if="!trCtrl.allocatedIds[row.id]">
-              <td class="expander">
-                <span class="fa fa-chevron-right" hz-expand-detail
-                      title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
-              </td>
-              <td class="rsp-p1">{$ row.name$}</td>
-              <td class="rsp-p1">{$ row.fingerprint $}</td>
-              <td class="action-col">
-                <action-list>
-                  <action action-classes="'btn btn-sm btn-default'"
-                          callback="trCtrl.allocate" item="row">
-                    <span class="fa fa-plus"></span>
-                  </action>
-                </action-list>
-              </td>
-            </tr>
-            <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
-              <td></td>
-              <td class="detail" colspan="3" ng-include="ctrl.tableDetails">
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </available>
-
-    </transfer-table> <!-- End Key Pairs Table -->
-
-  </div> <!-- End Content -->
+  </transfer-table> <!-- End Key Pairs Table -->
 </div> <!-- End Controller -->
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.scss b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.scss
deleted file mode 100644
index c35607c4cf..0000000000
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-[ng-controller="LaunchInstanceKeypairCtrl as ctrl"] {
-
-  dl.key-pair-details {
-
-    dt {
-      width: 15%;
-    }
-    dd {
-      width: 85%;
-      margin-left: 15%;
-      padding-right: 25px;
-
-      pre {
-        background: none;
-      }
-    }
-  }
-
-  textarea {
-    font-family: $font-family-monospace;
-  }
-}
-
-.no-navigation {
-
-  .step {
-    left: 25px;
-  }
-
-  .form-field {
-    margin-bottom: 1em;
-  }
-}
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance-workflow.service.js b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance-workflow.service.js
index 79194662bb..1b0717e149 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance-workflow.service.js
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance-workflow.service.js
@@ -93,7 +93,7 @@
       },
 
       btnIcon: {
-        finish: 'fa fa-cloud-download'
+        finish: 'fa fa-cloud-upload'
       }
     });
   }
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance.module.js b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance.module.js
index af2811c9ad..e6dea8e38e 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance.module.js
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance.module.js
@@ -21,9 +21,9 @@
     .config(config)
     .constant('horizon.dashboard.project.workflow.launch-instance.modal-spec', {
       backdrop: 'static',
+      size: 'lg',
       controller: 'ModalContainerController',
-      template: '<wizard ng-controller="LaunchInstanceWizardController"></wizard>',
-      windowClass: 'modal-dialog-wizard'
+      template: '<wizard class="wizard" ng-controller="LaunchInstanceWizardController"></wizard>'
     })
 
     /**
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance.scss b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance.scss
deleted file mode 100644
index c1179ad5aa..0000000000
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "source/source";
-@import "flavor/flavor";
-@import "network/network";
-@import "keypair/keypair";
-@import "security-groups/security-groups";
-@import "configuration/configuration";
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.help.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.help.html
index 91a093d9ba..93bf4914f6 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.help.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.help.html
@@ -1,5 +1,4 @@
 <div>
-  <h1 translate>Metadata Help</h1>
   <p translate>
     You can add arbitrary metadata to your instance so that you can more easily identify it among other running instances. Metadata is a collection of key-value pairs associated with an instance. The maximum length for each metadata key and value is 255 characters.
   </p>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.html
index 8033e4749d..f13f8174d6 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.html
@@ -1,14 +1,13 @@
-<div>
-  <h1 translate>Metadata</h1>
-  <div class="content">
-    <metadata-tree
-      ng-if="model.metadataDefs.instance && model.novaLimits"
-      available="::model.metadataDefs.instance"
-      existing="{}"
-      max-key-length="255"
-      max-value-length="255"
-      max-item-count="::model.novaLimits.maxServerMeta"
-      model="::model.metadataTree">
-    </metadata-tree>
-  </div>
-</div>
+<p translate>
+  This step allows you to add Metadata items to your instance.
+</p>
+
+<metadata-tree
+  ng-if="model.metadataDefs.instance && model.novaLimits"
+  available="::model.metadataDefs.instance"
+  existing="{}"
+  max-key-length="255"
+  max-value-length="255"
+  max-item-count="::model.novaLimits.maxServerMeta"
+  model="::model.metadataTree">
+</metadata-tree>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.spec.js b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.spec.js
index ff88b38976..5c005e9cd9 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.spec.js
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.spec.js
@@ -28,7 +28,7 @@
         var $compile = $injector.get('$compile');
         var $templateCache = $injector.get('$templateCache');
         var basePath = $injector.get('horizon.dashboard.project.workflow.launch-instance.basePath');
-        var markup = $templateCache.get(basePath + 'metadata/metadata.html');
+        var markup = '<div>' + $templateCache.get(basePath + 'metadata/metadata.html') + '</div>';
         model = {
           metadataDefs: { instance: false },
           novaLimits: false
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.help.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.help.html
index 207c6bfcb7..1d4f7af8fe 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.help.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.help.html
@@ -1,5 +1,4 @@
 <div>
-  <h1 translate>Network Help</h1>
   <p translate>
     Provider networks are created by administrators.
     These networks map to an existing physical network in the data center.
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html
index bd06aea0a5..dde60f2e7f 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html
@@ -1,9 +1,7 @@
 <div ng-controller="LaunchInstanceNetworkController as ctrl">
-  <h1 translate>Networks</h1>
-  <div class="content">
-    <div class="subtitle" translate>
-      Networks provide the communication channels for instances in the cloud.
-    </div>
+  <p translate>
+    Networks provide the communication channels for instances in the cloud.
+  </p>
 
   <div class="form-group" ng-if="model.arePortProfilesSupported">
     <label class="control-label required" for="profile" translate>Profile</label>
@@ -105,7 +103,6 @@
             </th>
           </tr>
           <tr>
-            <th class="reorder"></th>
             <th class="expander"></th>
             <th st-sort="name" st-sort-default class="rsp-p1" translate>Network</th>
             <th class="rsp-p2" translate>Subnets Associated</th>
@@ -117,14 +114,13 @@
         </thead>
         <tbody>
           <tr ng-if="trCtrl.numAvailable() === 0">
-            <td colspan="8">
+            <td colspan="7">
               <div class="no-rows-help" translate>
                 No available items
               </div>
             </td>
           </tr>
           <tr ng-repeat-start="row in ctrl.tableDataMulti.displayedAvailable track by row.id" ng-if="!trCtrl.allocatedIds[row.id]">
-            <td class="reorder"></td>
             <td class="expander">
               <span class="fa fa-chevron-right" hz-expand-detail
                 title="{$ 'Click to see more details'|translate $}"></span>
@@ -151,7 +147,7 @@
             </td>
           </tr>
           <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
-            <td colspan="2"></td>
+            <td></td>
             <td colspan="7" class="detail">
               <dl class="dl-horizontal">
                 <dt translate>ID</dt>
@@ -182,6 +178,4 @@
       </table>
     </available>
   </transfer-table>
-
-  </div>
 </div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.scss b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-group-details.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-group-details.html
index 3d0a8bc197..75b1c1de01 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-group-details.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-group-details.html
@@ -9,12 +9,14 @@
       <th st-sort="remote_ip_prefix" translate>Remote</th>
     </tr>
   </thead>
-  <tr ng-repeat="d in row.security_group_rules">
-    <td>{$ d.direction | noValue $}</td>
-    <td>{$ d.ethertype | noValue $}</td>
-    <td>{$ d.protocol | noValue $}</td>
-    <td>{$ d.port_range_min | noValue $}</td>
-    <td>{$ d.port_range_max | noValue $}</td>
-    <td>{$ d.remote_ip_prefix | noValue $}</td>
-  </tr>
+  <tbody>
+    <tr ng-repeat="d in row.security_group_rules">
+      <td>{$ d.direction | noValue $}</td>
+      <td>{$ d.ethertype | noValue $}</td>
+      <td>{$ d.protocol | noValue $}</td>
+      <td>{$ d.port_range_min | noValue $}</td>
+      <td>{$ d.port_range_max | noValue $}</td>
+      <td>{$ d.remote_ip_prefix | noValue $}</td>
+    </tr>
+  </tbody>
 </table>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.help.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.help.html
index 5617aca7fa..6e3ff971c6 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.help.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.help.html
@@ -1,5 +1,4 @@
 <div>
-  <h1 translate>Security Groups Help</h1>
   <p translate>Security groups define a set of IP filter rules that determine how network traffic flows to and from an instance. Users can add additional rules to an existing security group to further define the access options for an instance. To create additional rules, go to the <b>Compute | Access & Security</b> view, then find the security group and click <b>Manage Rules</b>.</p>
   <p translate>Security groups are project-specific and cannot be shared across projects.</p>
   <p translate>If a security group is not associated with an instance before it is launched, then you will have very limited access to the instance after it is deployed. You will only be able to access the instance from a VNC console.</p>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.html
index c516318500..34ce7accd9 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.html
@@ -1,114 +1,108 @@
 <div ng-controller="LaunchInstanceSecurityGroupsController as ctrl">
-  <h1 translate>Security Groups</h1>
+  <p translate>Select the security groups to launch the instance in.</p>
 
-  <div class="content">
-    <div class="subtitle" translate>Select the security groups.</div>
+  <transfer-table tr-model="ctrl.tableData"
+                  help-text="ctrl.tableHelp"
+                  limits="ctrl.tableLimits">
 
-      <transfer-table tr-model="ctrl.tableData"
-                      help-text="ctrl.tableHelp"
-                      limits="ctrl.tableLimits">
+    <!-- Security Groups Allocated -->
+    <allocated>
+      <table st-table="ctrl.tableData.displayedAllocated"
+             st-safe-src="ctrl.tableData.allocated" hz-table
+             class="table table-striped table-rsp table-detail">
+        <thead>
+        <tr>
+          <th class="expander"></th>
+          <th st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
+          <th st-sort="description" class="rsp-p2" translate>Description</th>
+          <th></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr ng-if="ctrl.tableData.allocated.length === 0">
+          <td colspan="8">
+            <div class="no-rows-help">
+              {$ ::trCtrl.helpText.noneAllocText $}
+            </div>
+          </td>
+        </tr>
+        <tr ng-repeat-start="row in ctrl.tableData.displayedAllocated track by row.id">
+          <td class="expander">
+              <span class="fa fa-chevron-right" hz-expand-detail
+                    title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
+          </td>
+          <td class="rsp-p1">{$ row.name $}</td>
+          <td class="rsp-p2">{$ row.description $}</td>
+          <td class="action-col">
+            <action-list>
+              <action action-classes="'btn btn-sm btn-default'"
+                      callback="trCtrl.deallocate" item="row">
+                <span class="fa fa-minus"></span>
+              </action>
+            </action-list>
+          </td>
+        </tr>
+        <tr ng-repeat-end class="detail-row">
+          <td></td>
+            <td class="detail" colspan="3" ng-include="ctrl.tableDetails">
+            </td>
+        </tr>
+        </tbody>
+      </table>
+    </allocated>
 
-        <!-- Security Groups Allocated -->
-        <allocated>
-          <table st-table="ctrl.tableData.displayedAllocated"
-                 st-safe-src="ctrl.tableData.allocated" hz-table
-                 class="table table-striped table-rsp table-detail">
-            <thead>
-            <tr>
-              <th class="expander"></th>
-              <th st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
-              <th st-sort="description" class="rsp-p2" translate>Description</th>
-              <th></th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr ng-if="ctrl.tableData.allocated.length === 0">
-              <td colspan="8">
-                <div class="no-rows-help">
-                  {$ ::trCtrl.helpText.noneAllocText $}
-                </div>
-              </td>
-            </tr>
-            <tr ng-repeat-start="row in ctrl.tableData.displayedAllocated track by row.id">
-              <td class="expander">
-                  <span class="fa fa-chevron-right" hz-expand-detail
-                        title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
-              </td>
-              <td class="rsp-p1">{$ row.name $}</td>
-              <td class="rsp-p2">{$ row.description $}</td>
-              <td class="action-col">
-                <action-list>
-                  <action action-classes="'btn btn-sm btn-default'"
-                          callback="trCtrl.deallocate" item="row">
-                    <span class="fa fa-minus"></span>
-                  </action>
-                </action-list>
-              </td>
-            </tr>
-            <tr ng-repeat-end class="detail-row">
-              <td></td>
-                <td class="detail" colspan="3" ng-include="ctrl.tableDetails">
-                </td>
-            </tr>
-            </tbody>
-          </table>
-        </allocated>
+    <!-- Security Groups Available -->
+    <available>
+      <table st-table="ctrl.tableData.displayedAvailable"
+             st-safe-src="ctrl.tableData.available"
+             hz-table class="table table-striped table-rsp table-detail">
+        <thead>
+        <tr>
+          <th class="search-header" colspan="7">
+            <hz-search-bar icon-classes="fa-search"></hz-search-bar>
+          </th>
+        </tr>
+        <tr>
+          <th class="expander"></th>
+          <th st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
+          <th st-sort="description" class="rsp-p1" translate>Description</th>
+          <th></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr ng-if="trCtrl.numAvailable() === 0">
+          <td colspan="8">
+            <div class="no-rows-help">
+              {$ ::trCtrl.helpText.noneAvailText $}
+            </div>
+          </td>
+        </tr>
+        <tr ng-repeat-start="row in ctrl.tableData.displayedAvailable track by row.id"
+            ng-if="!trCtrl.allocatedIds[row.id]">
+          <td class="expander">
+              <span class="fa fa-chevron-right" hz-expand-detail
+                    title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
+          </td>
+          <td class="rsp-p1">{$ row.name$}</td>
+          <td class="rsp-p1">{$ row.description $}</td>
+          <td class="action-col">
+            <action-list>
+              <action action-classes="'btn btn-sm btn-default'"
+                                      callback="trCtrl.allocate" item="row">
+                <span class="fa fa-plus"></span>
+              </action>
+            </action-list>
+          </td>
+        </tr>
+        <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
+          <td></td>
+          <td class="detail" colspan="3" ng-include="ctrl.tableDetails">
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </available>
 
-        <!-- Security Groups Available -->
-        <available>
-          <table st-table="ctrl.tableData.displayedAvailable"
-                 st-safe-src="ctrl.tableData.available"
-                 hz-table class="table table-striped table-rsp table-detail">
-            <thead>
-            <tr>
-              <th class="search-header" colspan="7">
-                <hz-search-bar group-classes="input-group-sm"
-                            icon-classes="fa-search">
-                </hz-search-bar>
-              </th>
-            </tr>
-            <tr>
-              <th class="expander"></th>
-              <th st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
-              <th st-sort="description" class="rsp-p1" translate>Description</th>
-              <th></th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr ng-if="trCtrl.numAvailable() === 0">
-              <td colspan="8">
-                <div class="no-rows-help">
-                  {$ ::trCtrl.helpText.noneAvailText $}
-                </div>
-              </td>
-            </tr>
-            <tr ng-repeat-start="row in ctrl.tableData.displayedAvailable track by row.id"
-                ng-if="!trCtrl.allocatedIds[row.id]">
-              <td class="expander">
-                  <span class="fa fa-chevron-right" hz-expand-detail
-                        title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
-              </td>
-              <td class="rsp-p1">{$ row.name$}</td>
-              <td class="rsp-p1">{$ row.description $}</td>
-              <td class="action-col">
-                <action-list>
-                  <action action-classes="'btn btn-sm btn-default'"
-                                          callback="trCtrl.allocate" item="row">
-                    <span class="fa fa-plus"></span>
-                  </action>
-                </action-list>
-              </td>
-            </tr>
-            <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
-              <td></td>
-              <td class="detail" colspan="3" ng-include="ctrl.tableDetails">
-              </td>
-            </tr>
-            </tbody>
-          </table>
-        </available>
+  </transfer-table> <!-- End Security Groups Transfer Table -->
 
-      </transfer-table> <!-- End Security Groups Transfer Table -->
-
-  </div> <!-- End Content -->
 </div> <!-- End Controller -->
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.scss b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.scss
deleted file mode 100644
index 9fa0e84fda..0000000000
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-[ng-controller="LaunchInstanceSecurityGroupsController as ctrl"] {
-  .table-rsp.security-group-details {
-    background: none;
-
-    td {
-      background: none !important;
-      padding: 15px !important;
-    }
-
-  }
-}
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.help.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.help.html
index d024fa30f6..60de5c80fa 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.help.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.help.html
@@ -1,7 +1,4 @@
 <div>
-
-  <h1 translate>Instance Source Help</h1>
-
   <p translate>If you want to create an instance that uses ephemeral storage, meaning the instance data is lost when the instance is deleted, then choose one of the following boot sources:</p>
   <p translate><li><b>Image</b>: This option uses an image to boot the instance.</li></p>
   <p translate><li><b>Instance Snapshot</b>: This option uses an instance snapshot to boot the instance.</li></p>
@@ -9,5 +6,4 @@
   <p translate><li><b>Image (with Create New Volume checked)</b>: This options uses an image to boot the instance, and creates a new volume to persist instance data. You can specify volume size and whether to delete the volume on deletion of the instance.</li></p>
   <p translate><li><b>Volume</b>: This option uses a volume that already exists. It does not create a new volume. You can choose to delete the volume on deletion of the instance. <em>Note: when selecting Volume, you can only launch one instance.</em></li></p>
   <p translate><li><b>Volume Snapshot</b>: This option uses a volume snapshot to boot the instance, and creates a new volume to persist instance data. You can choose to delete the volume on deletion of the instance.</li></p>
-
 </div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.html
index 349647542c..2f3ff4b0f6 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.html
@@ -1,124 +1,105 @@
 <div ng-controller="LaunchInstanceSourceController as ctrl">
-  <!--content-->
-  <h1 translate>Instance Source</h1>
-  <div class="content">
-    <div translate class="subtitle">Instance source is the template used to create an instance. You can use a snapshot of an existing instance, an image, or a volume (if enabled).
-      You can also choose to use persistent storage by creating a new volume.</div>
+    <p translate>
+      Instance source is the template used to create an instance. You can use a snapshot of an existing instance, an image, or a volume (if enabled).
+      You can also choose to use persistent storage by creating a new volume.
+    </p>
 
-    <!--instance-source form-->
-    <div class="instance-source clearfix">
-      <div class="form-horizontal">
-        <div class="row">
-          <div class="col-xs-12 col-sm-3">
-            <div class="form-field image"
-              ng-class="{ 'has-error': launchInstanceSourceForm['boot-source-type'].$invalid }">
-              <label translate class="on-top">Select Boot Source</label>
-              <span class="fa fa-exclamation-triangle invalid"
-                    ng-show="launchInstanceSourceForm['boot-source-type'].$invalid"
-                    popover="{$ ctrl.bootSourceTypeError $}"
-                    popover-placement="top" popover-append-to-body="true"
-                    popover-trigger="hover"></span>
-              <select name="boot-source-type" class="form-control input-sm"
-                      ng-options="src.label for src in ctrl.bootSourcesOptions track by src.type"
-                      ng-change="ctrl.updateBootSourceSelection(model.newInstanceSpec.source_type.type)"
-                      ng-model="model.newInstanceSpec.source_type">
-              </select>
+    <div class="row">
+      <div class="col-xs-6">
+        <div class="form-group" ng-class="{ 'has-error': launchInstanceSourceForm.boot-source-type.$invalid }">
+          <label for="boot-source-type" class="control-label" translate>Select Boot Source</label>
+          <select name="boot-source-type" class="form-control" id="boot-source-type"
+                  ng-options="src.label for src in ctrl.bootSourcesOptions track by src.type"
+                  ng-change="ctrl.updateBootSourceSelection(model.newInstanceSpec.source_type.type)"
+                  ng-model="model.newInstanceSpec.source_type">
+          </select>
+          <span class="help-block" ng-show="launchInstanceSourceForm.boot-source-type.$invalid">
+            {$ ctrl.bootSourceTypeError $}
+          </span>
+        </div>
+      </div>
+
+      <div ng-if="model.newInstanceSpec.source_type.type === 'image' &&
+                  model.allowCreateVolumeFromImage">
+        <div class="col-xs-6">
+          <div class="form-group">
+            <label for="vol-create" translate>Create New Volume</label><br/>
+            <div class="btn-group">
+              <label class="btn btn-default" id="vol-create"
+                     ng-repeat="option in ctrl.toggleButtonOptions"
+                     ng-model="model.newInstanceSpec.vol_create"
+                     btn-radio="option.value">{$ ::option.label $}</label>
             </div>
           </div>
+        </div>
+      </div>
 
-          <!-- start image select options -->
-          <div class="col-xs-12 col-sm-9"
-               ng-if="model.newInstanceSpec.source_type.type === 'image' &&
-                      model.allowCreateVolumeFromImage">
-
-            <div class="col-xs-12 col-sm-3">
-              <div class="form-group create-volume">
-                <label translate class="on-top">Create New Volume</label>
-                <div class="form-field">
-                  <div class="btn-group">
-                    <label class="btn btn-toggle"
-                      ng-repeat="option in ctrl.toggleButtonOptions"
-                      ng-model="model.newInstanceSpec.vol_create"
-                      btn-radio="option.value">{$ ::option.label $}</label>
-                  </div>
-                </div>
-              </div>
+      <div ng-if="model.newInstanceSpec.source_type.type == 'volume' || model.newInstanceSpec.source_type.type == 'volume_snapshot'">
+        <div class="col-xs-6">
+          <div class="form-group">
+            <label translate>Delete Volume on Instance Delete</label><br/>
+            <div class="btn-group">
+              <label class="btn btn-default"
+                     ng-repeat="option in ctrl.toggleButtonOptions"
+                     ng-model="model.newInstanceSpec.vol_delete_on_instance_delete"
+                     btn-radio="option.value">{$ ::option.label $}</label>
             </div>
-
-            <div hz-if-settings='["OPENSTACK_HYPERVISOR_FEATURES.can_set_mount_point"]'
-              ng-if="model.newInstanceSpec.vol_create === true">
-              <div class="col-xs-12 col-sm-3">
-                <div class="form-field">
-                  <label translate>Device Name</label>
-                  <input class="form-control input-sm"
-                         ng-model="model.newInstanceSpec.vol_device_name"
-                         type="text">
-                </div>
-              </div>
-            </div>
-
-            <div class="col-xs-12 col-sm-2 volume-size-wrapper" ng-if="model.newInstanceSpec.vol_create == true">
-              <div class="form-field volume-size"
-                ng-class="{ 'has-error': launchInstanceSourceForm['volume-size'].$invalid }">
-                <label translate class="on-top">Size (GB)</label>
-                <span class="fa fa-exclamation-triangle invalid"
-                    ng-show="launchInstanceSourceForm['volume-size'].$invalid"
-                    popover="{$ launchInstanceSourceForm['volume-size'].$error.validateNumberMin ? ctrl.minVolumeSizeError :
-                    ctrl.volumeSizeError $}"
-                    popover-placement="top" popover-append-to-body="true"
-                    popover-trigger="hover"></span>
-                <input name="volume-size" type="number"
-                       class="form-control input-sm volume-size"
-                       ng-model="model.newInstanceSpec.vol_size"
-                       ng-pattern="/^[0-9]+$/" ng-required="true"
-                       validate-number-min="{$ ctrl.minVolumeSize $}">
-              </div>
-            </div>
-
-            <div class="col-xs-12 col-sm-4" ng-if="model.newInstanceSpec.vol_create == true">
-              <div class="form-group delete-volume">
-                <label translate class="on-top">Delete Volume on Instance Delete</label>
-                <div class="form-field">
-                  <div class="btn-group">
-                    <label class="btn btn-toggle"
-                      ng-repeat="option in ctrl.toggleButtonOptions"
-                      ng-model="model.newInstanceSpec.vol_delete_on_instance_delete"
-                      btn-radio="option.value">{$ ::option.label $}</label>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div><!-- end image select options -->
-
-          <!-- start volume select options -->
-          <div class="col-xs-12 col-sm-9"
-               ng-if="model.newInstanceSpec.source_type.type == 'volume' || model.newInstanceSpec.source_type.type == 'volume_snapshot'">
-            <div class="col-xs-12 col-sm-6">
-
-              <div class="form-group delete-volume">
-                <label translate class="on-top">Delete Volume on Instance Delete</label>
-                <div class="form-field">
-                  <div class="btn-group">
-                    <label class="btn btn-toggle"
-                      ng-repeat="option in ctrl.toggleButtonOptions"
-                      ng-model="model.newInstanceSpec.vol_delete_on_instance_delete"
-                      btn-radio="option.value">{$ ::option.label $}</label>
-                  </div>
-                </div>
-              </div>
-
-            </div>
-          </div><!-- end volume select options -->
-
+          </div>
         </div>
       </div>
     </div>
-    <!--end instance-source form-->
+
+    <div class="row">
+      <div class="col-xs-6">
+        <div ng-if="model.newInstanceSpec.vol_create == true">
+          <div class="form-group" ng-class="{ 'has-error': launchInstanceSourceForm['volume-size'].$invalid }">
+            <label for="volume-size" class="control-label" translate>
+              Volume Size (GB)
+              <span class="hz-icon-required fa fa-asterisk"></span>
+            </label>
+            <input name="volume-size"
+                   min="0"
+                   id="volume-size"
+                   type="number"
+                   class="form-control"
+                   ng-model="model.newInstanceSpec.vol_size"
+                   ng-pattern="/^[0-9]+$/"
+                   ng-required="true"
+                   validate-number-min="{$ ctrl.minVolumeSize $}">
+              <span class="help-block" ng-show="launchInstanceSourceForm['volume-size'].$invalid">
+                {$ launchInstanceSourceForm['volume-size'].$error.validateNumberMin ? ctrl.minVolumeSizeError : ctrl.volumeSizeError $}
+              </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-xs-6">
+        <div ng-if="model.newInstanceSpec.vol_create == true">
+          <div class="form-group">
+            <label translate class="control-label">Delete Volume on Instance Delete</label><br/>
+            <div class="btn-group">
+              <label class="btn btn-default"
+                     ng-repeat="option in ctrl.toggleButtonOptions"
+                     ng-model="model.newInstanceSpec.vol_delete_on_instance_delete"
+                     btn-radio="option.value">{$ ::option.label $}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div hz-if-settings='["OPENSTACK_HYPERVISOR_FEATURES.can_set_mount_point"]'
+      ng-if="model.newInstanceSpec.vol_create === true">
+          <label translate>Device Name</label>
+          <input class="form-control"
+                 ng-model="model.newInstanceSpec.vol_device_name"
+                 type="text">
+    </div>
 
     <transfer-table help-text="ctrl.helpText"
                     tr-model="ctrl.tableData">
       <allocated validate-number-min="1" ng-model="ctrl.tableData.allocated.length">
-        <table class="table table-striped table-rsp table-detail"
+        <table class="table table-striped table-rsp table-detail modern"
                hz-table
                st-safe-src="ctrl.tableData.allocated"
                st-table="ctrl.tableData.displayAllocated">
@@ -216,7 +197,7 @@
         <table st-table="ctrl.tableData.displayedAvailable"
                st-safe-src="ctrl.tableData.available"
                hz-table
-               class="table table-striped table-rsp table-detail">
+               class="table table-striped table-rsp table-detail modern">
 
           <!-- transfer table, available table head -->
           <thead>
@@ -327,5 +308,3 @@
     </transfer-table>
 
   </div>
-  <!-- end content -->
-</div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.scss b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.scss
deleted file mode 100644
index 19dd254cfe..0000000000
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-[ng-controller="LaunchInstanceSourceController"] {
-
-  td.hi-light {
-    color: #0084d1;
-  }
-
-  th.number,
-  td.number {
-    text-align: right;
-    padding-right: 30px;
-  }
-
-  .selected-source {
-    background: #eee;
-    padding: 12px 18px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-
-    .chart {
-      width: 99%;
-      margin-bottom: 0;
-      padding: 0 10px 10px 10px;
-
-      @media (min-width: 768px) {
-        border-left: 1px solid #ccc;
-        padding-left: 20px;
-      }
-    }
-  }
-
-  .instance-source {
-    margin-top: 18px;
-    margin-bottom: 40px;
-
-    .image select {
-      width: 99%;
-    }
-
-    .volume-size input[type="number"]{
-      width: 90%;
-    }
-
-  }
-}
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/workflow.scss b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/workflow.scss
deleted file mode 100644
index af14a091f2..0000000000
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/workflow.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "launch-instance/launch-instance";
diff --git a/openstack_dashboard/enabled/_1000_project.py b/openstack_dashboard/enabled/_1000_project.py
index 5a0c9b1461..4b66091bb0 100644
--- a/openstack_dashboard/enabled/_1000_project.py
+++ b/openstack_dashboard/enabled/_1000_project.py
@@ -30,7 +30,3 @@ AUTO_DISCOVER_STATIC_FILES = True
 ADD_JS_FILES = []
 
 ADD_JS_SPEC_FILES = []
-
-ADD_SCSS_FILES = [
-    'dashboard/project/project.scss'
-]
diff --git a/openstack_dashboard/static/dashboard/scss/_debt.scss b/openstack_dashboard/static/dashboard/scss/_debt.scss
index 6a4bad1190..7f682fd29b 100644
--- a/openstack_dashboard/static/dashboard/scss/_debt.scss
+++ b/openstack_dashboard/static/dashboard/scss/_debt.scss
@@ -46,11 +46,6 @@ dt {
   top: 0 !important;
 }
 
-// Note (hurgleburgler) Whatever is using these styles should be using alerts
-.has-error .help-block, .dynamic-error {
-  padding: 10px;
-}
-
 .dynamic-error {
   background: $body-bg;
   border: 1px solid $border-color;
@@ -266,4 +261,4 @@ td .btn-group {
 .tooltip {
   z-index: 12000;
   word-wrap: break-word;
-}
\ No newline at end of file
+}
diff --git a/openstack_dashboard/static/dashboard/scss/_util.scss b/openstack_dashboard/static/dashboard/scss/_util.scss
index a76d141fa9..47ab8da63d 100644
--- a/openstack_dashboard/static/dashboard/scss/_util.scss
+++ b/openstack_dashboard/static/dashboard/scss/_util.scss
@@ -1,4 +1,5 @@
 /* Some utility classes useful everywhere */
+@import "/bootstrap/scss/bootstrap/mixins/vendor-prefixes";
 
 .row .horizontal-center,
 .horizontal-center {
@@ -58,3 +59,10 @@ input::-ms-clear, input::-ms-reveal {
   text-overflow: ellipsis;
   display: block;
 }
+
+// Add functionality for a horizontal Bootstrap toggle element
+.collapsing.width {
+  @include transition-property(width, visibility);
+  width: 0;
+  height: auto;
+}
diff --git a/openstack_dashboard/static/dashboard/scss/_variables.scss b/openstack_dashboard/static/dashboard/scss/_variables.scss
index 83d8611026..0dceb6a55d 100644
--- a/openstack_dashboard/static/dashboard/scss/_variables.scss
+++ b/openstack_dashboard/static/dashboard/scss/_variables.scss
@@ -143,7 +143,6 @@ $tooltip-key-weight: 600 !default;
 $tooltip-padding: 0.3em 0.8em !default;
 
 /* Transfer Tables */
-$badge-info-color: #0084d1 !default;
 $invalid-color: #f0ad4e !default;
 $transfer-btn-width: 3em !default;
 $transfer-help-text-color: #999999 !default;
diff --git a/openstack_dashboard/static/dashboard/scss/components/_help_panel.scss b/openstack_dashboard/static/dashboard/scss/components/_help_panel.scss
new file mode 100644
index 0000000000..04c4602a34
--- /dev/null
+++ b/openstack_dashboard/static/dashboard/scss/components/_help_panel.scss
@@ -0,0 +1,40 @@
+$help-panel-width: 400px;
+
+.help-toggle,
+.wizard-help,
+#help-panel {
+  position: absolute;
+  top: $padding-xs-horizontal;
+  right: 0;
+  z-index: 2; // TODO(robcresswell) untangle the need for this sorcery
+}
+
+#help-panel > div {
+  width: $help-panel-width;
+}
+
+// Controls the size of the "?" icon on the right of the wizards
+.help-toggle {
+  @extend .btn-xs;
+  font-size: $font-size-h3;
+
+  .fa {
+    @extend .fa-question-circle;
+  }
+
+  &:not(.collapsed) {
+    z-index: 3;
+
+    &,
+    &:hover,
+    &:active,
+    &:focus {
+      @extend .close;
+      margin: $padding-xs-horizontal;
+    }
+
+    .fa {
+      @extend .fa-times;
+    }
+  }
+}
diff --git a/openstack_dashboard/static/dashboard/scss/components/_icons.scss b/openstack_dashboard/static/dashboard/scss/components/_icons.scss
new file mode 100644
index 0000000000..4f14e6fd37
--- /dev/null
+++ b/openstack_dashboard/static/dashboard/scss/components/_icons.scss
@@ -0,0 +1,10 @@
+.hz-icon-required {
+  font-size: 50%;
+  vertical-align: top;
+  color: $brand-primary;
+}
+
+// Make sure the color is correct on selected workflow steps
+.active > a > .hz-icon-required {
+  color: $component-active-color;
+}
diff --git a/openstack_dashboard/static/dashboard/scss/components/_transfer_tables.scss b/openstack_dashboard/static/dashboard/scss/components/_transfer_tables.scss
new file mode 100644
index 0000000000..a677cd91fc
--- /dev/null
+++ b/openstack_dashboard/static/dashboard/scss/components/_transfer_tables.scss
@@ -0,0 +1,18 @@
+.transfer-table {
+  .fa[title] {
+    cursor: pointer;
+  }
+
+  .transfer-heading{
+    @extend h5;
+    font-size: $font-size-h5;
+  }
+
+  .transfer-section {
+    margin-top: $padding-large-vertical;
+  }
+
+  .magic-search-bar, .basic-search-bar {
+    margin: $padding-small-vertical 0;
+  }
+}
diff --git a/openstack_dashboard/static/dashboard/scss/components/_wizard.scss b/openstack_dashboard/static/dashboard/scss/components/_wizard.scss
new file mode 100644
index 0000000000..dca41c394d
--- /dev/null
+++ b/openstack_dashboard/static/dashboard/scss/components/_wizard.scss
@@ -0,0 +1,11 @@
+// Reapply border colour and prevent float right
+.wizard-nav-toggle {
+  border-color: $btn-default-border;
+  float: none;
+  margin-bottom: $padding-small-vertical;
+}
+
+// Prevent extra padding on the side nav
+.wizard-nav {
+  padding: 0;
+}
diff --git a/openstack_dashboard/static/dashboard/scss/components/_workflow.scss b/openstack_dashboard/static/dashboard/scss/components/_workflow.scss
index f003753948..27515d11a2 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_workflow.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_workflow.scss
@@ -85,11 +85,5 @@
       color: $workflow-color-label-error;
     }
   }
-
-  .hz-icon-required {
-    font-size: 50%;
-    vertical-align: top;
-    color: $brand-primary;
-  }
 }
 
diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss
index d36a0a8c55..99e7333bf2 100644
--- a/openstack_dashboard/static/dashboard/scss/horizon.scss
+++ b/openstack_dashboard/static/dashboard/scss/horizon.scss
@@ -19,6 +19,8 @@
 @import "components/charts";
 @import "components/datepicker";
 @import "components/forms";
+@import "components/help_panel";
+@import "components/icons";
 @import "components/inline_edit";
 @import "components/login";
 @import "components/membership";
@@ -35,6 +37,8 @@
 @import "components/sidebar";
 @import "components/table_actions";
 @import "components/tables";
+@import "components/transfer_tables";
+@import "components/wizard";
 @import "components/workflow";
 
 // Framework
diff --git a/openstack_dashboard/themes/default/bootstrap/_variables.scss b/openstack_dashboard/themes/default/bootstrap/_variables.scss
index 406cfc92b5..43df247c7c 100644
--- a/openstack_dashboard/themes/default/bootstrap/_variables.scss
+++ b/openstack_dashboard/themes/default/bootstrap/_variables.scss
@@ -405,8 +405,8 @@ $navbar-inverse-toggle-border-color:        #333 !default;
 //##
 
 //=== Shared nav styles
-$nav-link-padding:                          0.5em 1.2em !default;
-$nav-link-hover-bg:                         #dbdcdf !default;
+$nav-link-padding:                          0.8em 1.2em !default;
+$nav-link-hover-bg:                         $gray-lighter !default;
 
 $nav-disabled-link-color:                   $gray-light !default;
 $nav-disabled-link-hover-color:             $gray-light !default;
@@ -426,9 +426,9 @@ $nav-tabs-justified-link-border-color:            #ddd !default;
 $nav-tabs-justified-active-link-border-color:     $body-bg !default;
 
 //== Pills
-$nav-pills-border-radius:                   0 !default;
-$nav-pills-active-link-hover-bg:            #e3e4e6 !default;
-$nav-pills-active-link-hover-color:         $gray !default;
+$nav-pills-border-radius:                   $border-radius-base !default;
+$nav-pills-active-link-hover-bg:            $component-active-bg !default;
+$nav-pills-active-link-hover-color:         $component-active-color !default;
 
 
 //== Pagination
@@ -598,7 +598,7 @@ $modal-header-border-color:   #e5e5e5 !default;
 //** Modal footer border color
 $modal-footer-border-color:   $modal-header-border-color !default;
 
-$modal-lg:                    900px !default;
+$modal-lg:                    960px !default;
 $modal-md:                    732px !default;
 $modal-sm:                    300px !default;
 
diff --git a/openstack_dashboard/themes/default/bootstrap/components/_navs.scss b/openstack_dashboard/themes/default/bootstrap/components/_navs.scss
index 0b10c2498c..adda3fba5f 100644
--- a/openstack_dashboard/themes/default/bootstrap/components/_navs.scss
+++ b/openstack_dashboard/themes/default/bootstrap/components/_navs.scss
@@ -2,27 +2,6 @@
   a {
     color: $gray;
   }
-
-  & > li {
-    & > a {
-      border-top: 1px solid $gray-light;
-      border-bottom: 1px solid $gray-light;
-      border-radius: 0;
-      font-weight: bold;
-    }
-  }
-
-  & > li + li {
-    margin-top: 0;
-
-    & > a {
-      border-top: none;
-    }
-  }
-
-  & > li > .in {
-    border-bottom: 1px solid $gray-light;
-  }
 }
 
 .nav-tabs {
diff --git a/openstack_dashboard/themes/default/horizon/components/_sidebar.scss b/openstack_dashboard/themes/default/horizon/components/_sidebar.scss
index d15759f9ff..32c254ce7f 100644
--- a/openstack_dashboard/themes/default/horizon/components/_sidebar.scss
+++ b/openstack_dashboard/themes/default/horizon/components/_sidebar.scss
@@ -4,7 +4,6 @@
 $sidebar-active-color: $brand-primary !default;
 $sidebar-box-shadow:  -3px 2px 6px -2px $gray-light inset, -1px 0 0 0 $gray-light inset !default;
 
-
 #sidebar {
   background-color: $sidebar-background-color;
   @include box-shadow($sidebar-box-shadow);
@@ -20,6 +19,31 @@ $sidebar-box-shadow:  -3px 2px 6px -2px $gray-light inset, -1px 0 0 0 $gray-ligh
     border-bottom: $padding-base-vertical/2 solid $gray-light;
   }
 
+  // Overrides specific to the navigation sidebar
+  .nav-pills.nav-stacked {
+    & > li {
+      & > a {
+        border-top: 1px solid $gray-light;
+        border-bottom: 1px solid $gray-light;
+        border-radius: 0;
+        color: $gray;
+        font-weight: bold;
+      }
+    }
+
+    & > li + li {
+      margin-top: 0;
+
+      & > a {
+        border-top: none;
+      }
+    }
+
+    & > li > .in {
+      border-bottom: 1px solid $gray-light;
+    }
+  }
+
   .panel {
     background-color: transparent;
   }
@@ -33,7 +57,6 @@ $sidebar-box-shadow:  -3px 2px 6px -2px $gray-light inset, -1px 0 0 0 $gray-ligh
   .openstack-panel {
     & > a {
       color: $gray;
-      padding: $padding-large-vertical $padding-large-horizontal;
     }
 
     &.active > a {
@@ -56,7 +79,7 @@ $sidebar-box-shadow:  -3px 2px 6px -2px $gray-light inset, -1px 0 0 0 $gray-ligh
   .openstack-dashboard > a:hover,
   .openstack-dashboard > a:focus,
   li > a {
-    background-color: $nav-pills-active-link-hover-bg;
+    background-color: #e3e4e6;
   }
 
   li > a {
diff --git a/openstack_dashboard/themes/material/static/horizon/_icons.scss b/openstack_dashboard/themes/material/static/horizon/_icons.scss
index 237e4d2eaf..67442c16c0 100644
--- a/openstack_dashboard/themes/material/static/horizon/_icons.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_icons.scss
@@ -13,7 +13,10 @@ $mdi-font-path: $static_url + "/horizon/lib/mdi/fonts";
 
 $icon-swap: (
   asterisk: 'star',
+  angle-right: 'arrow-right',
+  angle-left: 'arrow-left',
   ban: 'block-helper',
+  bars: 'menu',
   caret-down: 'menu-down',
   check: 'check',
   chevron-down: 'chevron-down',
@@ -75,4 +78,4 @@ $icon-swap: (
   .fa-caret-down {
     @include vertical-center();
   }
-}
\ No newline at end of file
+}