diff --git a/client/assets/styles/scss/components/aha-guide.scss b/client/assets/styles/scss/components/aha-guide.scss
index 07ca22e6d..65b278110 100644
--- a/client/assets/styles/scss/components/aha-guide.scss
+++ b/client/assets/styles/scss/components/aha-guide.scss
@@ -1,15 +1,58 @@
 .aha-guide {
   color: $gray;
   overflow: hidden;
+  position: relative;
+
+  &.padding-md {
+    @include media(xxs) {
+      padding: 30px 15px;
+    }
+  }
+
+  > .grid-block {
+    overflow: visible;
+  }
 
   // anchor image
+  .spinner-wrapper,
+  .aha-meter {
+    height: $input-md;
+    left: 15px;
+    position: absolute;
+    top: 16px;
+    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
+    width: $input-md;
+
+    &.ng-leave {
+      opacity: 1;
+      transform: scale3d(1,1,1);
+    }
+
+    &.ng-leave-active {
+      opacity: 0;
+      transform: scale3d(.8,.8,1);
+    }
+
+    &.ng-enter {
+      opacity: 0;
+      transform: scale3d(.8,.8,1);
+    }
+
+    &.ng-enter-active {
+      opacity: 1;
+      transform: scale3d(1,1,1);
+    }
+  }
+
+  .spinner-wrapper {
+    overflow: hidden;
+  }
+
   .aha-meter {
     background-image: linear-gradient(90deg, $gray-lightest 50%, transparent 50%, transparent), linear-gradient(0deg, $gray-lightest 50%, $gray-lightest 50%, $gray-lightest);
     border-radius: 50%;
     height: $input-md;
-    margin-right: 15px;
     padding: $input-border;
-    position: relative;
     width: $input-md;
 
     $step: 1; // step of % for created classes
@@ -27,6 +70,16 @@
           background-image: linear-gradient($nextdeg, $green 50%, transparent 50%, transparent), linear-gradient(270deg, $green 50%, $gray-lightest 50%, $gray-lightest);
         }
       }
+
+      &.aha-error.aha-meter-#{$i * $step} {
+        @if $i < $half {
+          $nextdeg: 90deg + ($increment * $i);
+          background-image: linear-gradient(90deg, $gray-lightest 50%, transparent 50%, transparent), linear-gradient($nextdeg, $orange 50%, $gray-lightest 50%, $gray-lightest);
+        } @else {
+          $nextdeg: -90deg + ($increment * ($i - $half));
+          background-image: linear-gradient($nextdeg, $orange 50%, transparent 50%, transparent), linear-gradient(270deg, $orange 50%, $gray-lightest 50%, $gray-lightest);
+        }
+      }
     }
 
     &.aha-meter-100 .iconnables {
@@ -40,6 +93,68 @@
       padding: 6px;
       width: 100%;
     }
+
+    .icons-alert {
+      color: $orange;
+      overflow: visible;
+      padding: 10px 11px 11px;
+    }
+  }
+
+  .aha-text {
+    margin-left: $input-md + 15;
+    min-height: $input-md;
+    overflow: visible;
+    position: relative;
+  }
+
+  .p-slide {
+    position: absolute;
+    top: 18px;
+    transition: opacity .15s ease-in-out, transform .3s ease-in-out;
+
+    &.ng-enter {
+      opacity: 0;
+      transform: translate3d(25%,0,0);
+    }
+
+    &.ng-enter-active {
+      opacity: 1;
+      transform: translate3d(0,0,0);
+    }
+
+    &.ng-leave {
+      opacity: 1;
+      transform: translate3d(0,0,0);
+    }
+
+    &.ng-leave-active {
+      opacity: 0;
+      transform: translate3d(-25%,0,0);
+    }
+
+    &.reverse {
+
+      &.ng-enter {
+        opacity: 0;
+        transform: translate3d(-25%,0,0);
+      }
+
+      &.ng-enter-active {
+        opacity: 1;
+        transform: translate3d(0,0,0);
+      }
+
+      &.ng-leave {
+        opacity: 1;
+        transform: translate3d(0,0,0);
+      }
+
+      &.ng-leave-active {
+        opacity: 0;
+        transform: translate3d(25%,0,0);
+      }
+    }
   }
 
   // menu
@@ -50,9 +165,17 @@
     margin-left: 30px;
     min-width: 30px;
 
+    @include media(xxs) {
+      margin-left: 9px;
+    }
+
     .iconnables {
       height: 100%;
       width: 15px;
     }
   }
 }
+
+.aha-tips > .iconnables {
+  margin-left: 6px;
+}
diff --git a/client/assets/styles/scss/components/aha-modals.scss b/client/assets/styles/scss/components/aha-modals.scss
index e72c8ff40..ff8112165 100644
--- a/client/assets/styles/scss/components/aha-modals.scss
+++ b/client/assets/styles/scss/components/aha-modals.scss
@@ -1,10 +1,8 @@
 .modal-backdrop > .aha-guide {
   animation: fade .15s ease-in-out;
-  background: $gray-lighterest;
-  border: 1px solid $gray-lighter;
-  border-radius: $input-border-radius-lg;
   height: 105px;
   left: 0;
+  margin: 0 auto;
   max-width: calc(100vw - 30px);
   position: absolute;
   right: 0;
@@ -15,6 +13,10 @@
     height: 90px;
   }
 
+  @include media(xxxs) {
+    top: 0;
+  }
+
   &.fixed {
     position: fixed;
     z-index: $z-modal;
@@ -31,8 +33,26 @@
       margin-top: 105px;
     }
   }
+
+  .spinner-wrapper,
+  .aha-meter {
+    top: 24px;
+  }
 }
 
 .modal-dialog > .aha-guide {
   border-bottom: 1px solid $gray-lighter;
+
+  &:only-child {
+    border-bottom: 0;
+  }
+
+  > .grid-block {
+    position: relative;
+  }
+
+  .aha-meter {
+    left: 0;
+    top: 0;
+  }
 }
diff --git a/client/assets/styles/scss/components/aha-popover.scss b/client/assets/styles/scss/components/aha-popover.scss
new file mode 100644
index 000000000..19b8fb652
--- /dev/null
+++ b/client/assets/styles/scss/components/aha-popover.scss
@@ -0,0 +1,27 @@
+.popover.popover-aha {
+  left: 75px;
+  max-width: none;
+  top: 66px;
+  width: 450px;
+
+  @include media(xxs) {
+    left: 15px;
+    right: 15px;
+    top: 60px;
+    width: calc(100vw - 30px);
+
+    &.right {
+      margin-left: 0;
+    }
+  }
+
+  .arrow {
+    @include media(xxs) {
+      display: none;
+    }
+  }
+
+  .popover-content {
+    @extend %padding-sm;
+  }
+}
diff --git a/client/assets/styles/scss/components/aha-sidebar.scss b/client/assets/styles/scss/components/aha-sidebar.scss
index eadd94f28..28dce625b 100644
--- a/client/assets/styles/scss/components/aha-sidebar.scss
+++ b/client/assets/styles/scss/components/aha-sidebar.scss
@@ -12,6 +12,11 @@
   width: 390px;
   z-index: $z-popover;
 
+  @include media(xxxs) {
+    left: 12px;
+    width: auto;
+  }
+
   &.ng-enter {
     transform: translate3d(100%,0,0);
   }
diff --git a/client/assets/styles/scss/components/buttons/buttons-debug.scss b/client/assets/styles/scss/components/buttons/buttons-debug.scss
index 028a78e6c..41d5c2d3a 100755
--- a/client/assets/styles/scss/components/buttons/buttons-debug.scss
+++ b/client/assets/styles/scss/components/buttons/buttons-debug.scss
@@ -11,7 +11,7 @@
 
     // override
     &:last-child {
-      margin-left: -$input-border;
+      margin-left: -1px;
     }
   }
 
diff --git a/client/assets/styles/scss/components/buttons/buttons-group.scss b/client/assets/styles/scss/components/buttons/buttons-group.scss
index 643208e88..2ba8c2b08 100644
--- a/client/assets/styles/scss/components/buttons/buttons-group.scss
+++ b/client/assets/styles/scss/components/buttons/buttons-group.scss
@@ -134,12 +134,12 @@
   > .btn:active {
 
     &:not(:first-child):not(:last-child) {
-      border-radius: $input-border-radius-xxs;
+      border-radius: $input-border-radius;
     }
 
     &:first-child:not(:last-child) {
-      border-bottom-right-radius: $input-border-radius-xxs;
-      border-top-right-radius: $input-border-radius-xxs;
+      border-bottom-right-radius: $input-border-radius;
+      border-top-right-radius: $input-border-radius;
 
       &.btn-xs {
         padding-left: 9px;
@@ -147,8 +147,8 @@
     }
 
     &:last-child:not(:first-child) {
-      border-bottom-left-radius: $input-border-radius-xxs;
-      border-top-left-radius: $input-border-radius-xxs;
+      border-bottom-left-radius: $input-border-radius;
+      border-top-left-radius: $input-border-radius;
 
       &.btn-xs {
         padding-right: 9px;
diff --git a/client/assets/styles/scss/components/buttons/buttons-toolbar.scss b/client/assets/styles/scss/components/buttons/buttons-toolbar.scss
index aa6828795..acdad5221 100644
--- a/client/assets/styles/scss/components/buttons/buttons-toolbar.scss
+++ b/client/assets/styles/scss/components/buttons/buttons-toolbar.scss
@@ -1,20 +1,14 @@
 // buttons
 .btn-toolbar {
-  border: $input-border solid;
+  border: 1px solid;
   flex: 0 0 auto;
-  font-size: 15px;
+  font-family: $sans-serif; // override monospace fonts inside log header
+  font-size: 14px;
   font-weight: $weight-bold;
-  height: 30px;
-  line-height: 30px - ($input-border * 2);
+  height: $input-xs;
+  line-height: $input-xs - 2px;
   padding: 0 9px;
 
-  .build-log-header & {
-    font-family: $sans-serif; // override monospace fonts inside log header
-    font-size: 13px;
-    height: $input-xs;
-    line-height: $input-xs - ($input-border * 2);
-  }
-
   &.purple {
     @extend %toolbar-btn-purple;
   }
diff --git a/client/assets/styles/scss/components/buttons/buttons.scss b/client/assets/styles/scss/components/buttons/buttons.scss
index 45e30a37e..01241d797 100755
--- a/client/assets/styles/scss/components/buttons/buttons.scss
+++ b/client/assets/styles/scss/components/buttons/buttons.scss
@@ -3,7 +3,6 @@
   border: 0;
   border-radius: $input-border-radius;
   cursor: pointer;
-  display: inline-block;
   font-size: 18px;
   font-weight: $weight-normal;
   padding: 0 15px;
@@ -12,6 +11,10 @@
   user-select: none;
   white-space: nowrap;
 
+  &:not(.grid-block) {
+    display: inline-block;
+  }
+
   // for <a> elemnts
   &:hover,
   &:active {
@@ -110,7 +113,6 @@
 // only for inline buttons
 %btn-xxs,
 .btn-xxs {
-  border-radius: $input-border-radius-xxs;
   font-size: 12px;
   height: $input-xxs;
   line-height: $input-line-height-xxs;
@@ -229,6 +231,10 @@
   &.reversed {
     letter-spacing: 0;
   }
+
+  &.btn-xxs {
+    border-width: 1px;
+  }
 }
 
 .blue,
diff --git a/client/assets/styles/scss/components/cards.scss b/client/assets/styles/scss/components/cards.scss
index 7ecfc8e60..400971183 100644
--- a/client/assets/styles/scss/components/cards.scss
+++ b/client/assets/styles/scss/components/cards.scss
@@ -71,10 +71,10 @@
 
     .iconnables {
       cursor: pointer;
-      height: 48px;
-      margin: 0 auto 15px;
+      height: 36px;
+      margin: 0 auto 24px;
       pointer-events: auto;
-      width: 48px;
+      width: 36px;
     }
 
     .h4 {
diff --git a/client/assets/styles/scss/components/help.scss b/client/assets/styles/scss/components/help.scss
index 6166b92ae..a67c9d2e2 100644
--- a/client/assets/styles/scss/components/help.scss
+++ b/client/assets/styles/scss/components/help.scss
@@ -18,8 +18,10 @@
   border: 0;
   color: $gray-light;
   left: 0;
+  overflow: visible;
   padding: 0 12px;
   position: absolute;
+  top: 0;
 
   &:hover {
     color: lighten($blue,10%);
@@ -38,6 +40,7 @@
   max-width: none; // overwrites max-width set in popover.scss
   padding-bottom: 26px;
   position: absolute;
+  top: 0;
   transition: none;
   width: 400px;
   z-index: $z-modal-backdrop; // we want these to stay under modals...since they do not get dismissed on modal open
diff --git a/client/assets/styles/scss/components/new-user-prompt.scss b/client/assets/styles/scss/components/new-user-prompt.scss
deleted file mode 100644
index 2efbb19a3..000000000
--- a/client/assets/styles/scss/components/new-user-prompt.scss
+++ /dev/null
@@ -1,117 +0,0 @@
-// new user
-.new-user-prompt {
-  background: $purple-light-faded;
-  border-bottom: 1px solid $gray-lighter;
-  color: $purple-light;
-  margin: -15px -15px 15px;
-  overflow: visible;
-  padding: 45px 30px 75px;
-  position: relative;
-  transition: all .3s ease-in-out;
-
-  @include media(xxs) {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  // button wrapper
-  > .grid-block {
-    display: table;
-    margin: 0 auto;
-
-    @include media(xxs) {
-      flex-direction: row;
-    }
-
-    @include media(xxxs) {
-      width: 188px;
-    }
-  }
-
-  .btn {
-    width: 60px;
-
-    @include media(xxs) {
-      &:nth-child(-n+2) {
-        margin-bottom: 4px;
-      }
-    }
-
-    @include media(xxxs) {
-      font-size: 16px;
-      height: $input-sm;
-      line-height: $input-line-height-sm;
-      margin-left: 2px;
-      margin-right: 2px;
-      margin-top: 0;
-      width: 90px;
-    }
-
-    + .btn {
-      margin-left: 6px;
-      margin-top: 0;
-
-      @include media(xxxs) {
-        margin-left: 2px;
-      }
-    }
-  }
-
-  // runnabear
-  .img {
-    bottom: -7px;
-    height: auto;
-    left: 0;
-    margin: 0 auto;
-    position: absolute;
-    right: 0;
-    width: 120px;
-  }
-
-  .icons-close {
-    color: $gray-light;
-    cursor: pointer;
-    height: $input-sm;
-    pointer-events: auto; // reset from .iconnables
-    position: absolute;
-    right: 15px;
-    top: 18px;
-    width: $input-sm;
-
-    @include media(xxs) {
-      right: 6px;
-      top: 6px;
-    }
-
-    &:hover {
-      color: $red;
-    }
-
-    &:active {
-      color: $red-dark;
-    }
-  }
-
-  .h1 {
-    font-size: 30px;
-    line-height: 1.2;
-    overflow: hidden;
-
-    @include media(xxs) {
-      font-size: 24px;
-    }
-  }
-
-  .p {
-    margin: 9px auto 15px;
-    max-width: 481px;
-
-    @include media(sm) {
-      max-width: 330px;
-    }
-
-    @include media(xxs) {
-      max-width: 270px;
-    }
-  }
-}
diff --git a/client/assets/styles/scss/forms/forms-inputs.scss b/client/assets/styles/scss/forms/forms-inputs.scss
index 658dfe4f5..747b37d97 100644
--- a/client/assets/styles/scss/forms/forms-inputs.scss
+++ b/client/assets/styles/scss/forms/forms-inputs.scss
@@ -3,12 +3,14 @@ input,
 textarea {
   cursor: text;
 
+  // scss-lint:disable ImportantRule
   &[disabled] {
     background-color: $gray-lighterest;
     border-color: $gray-lighter !important; // override any validation
-    color: $gray-lighter;
+    color: $gray-light !important;
     cursor: not-allowed;
   }
+  // scss-lint:enable ImportantRule
 }
 
 input {
diff --git a/client/assets/styles/scss/forms/forms-table-actions.scss b/client/assets/styles/scss/forms/forms-table-actions.scss
index 25c662046..f5c634c0e 100644
--- a/client/assets/styles/scss/forms/forms-table-actions.scss
+++ b/client/assets/styles/scss/forms/forms-table-actions.scss
@@ -139,12 +139,12 @@
       }
 
       &:first-child {
-        border-radius: $input-border-radius-xxs 0 0 $input-border-radius-xxs;
+        border-radius: $input-border-radius 0 0 $input-border-radius;
         flex: 0 0 90px;
       }
 
       &:last-child {
-        border-radius: 0 $input-border-radius-xxs $input-border-radius-xxs 0;
+        border-radius: 0 $input-border-radius $input-border-radius 0;
         flex: 0 0 90px;
       }
     }
diff --git a/client/assets/styles/scss/forms/forms-table.scss b/client/assets/styles/scss/forms/forms-table.scss
index b560de755..90dd2f2f3 100644
--- a/client/assets/styles/scss/forms/forms-table.scss
+++ b/client/assets/styles/scss/forms/forms-table.scss
@@ -133,7 +133,7 @@
   display: flex;
 
   &:first-child {
-    border-radius: $input-border-radius-xxs $input-border-radius-xxs 0 0;
+    border-radius: $input-border-radius $input-border-radius 0 0;
     padding-top: 3px;
 
     &.tr-addition,
@@ -144,7 +144,7 @@
   }
 
   &:last-child {
-    border-radius: 0 0 $input-border-radius-xxs $input-border-radius-xxs;
+    border-radius: 0 0 $input-border-radius $input-border-radius;
     padding-bottom: 3px;
 
     &.tr-addition,
diff --git a/client/assets/styles/scss/globals/typography.scss b/client/assets/styles/scss/globals/typography.scss
index 12d21183c..976276750 100755
--- a/client/assets/styles/scss/globals/typography.scss
+++ b/client/assets/styles/scss/globals/typography.scss
@@ -103,6 +103,11 @@ h4 {
   word-wrap: normal;
 }
 
+%sans-serif,
+.sans-serif {
+  font-family: $sans-serif;
+}
+
 // links
 a {
   color: currentColor;
@@ -164,6 +169,10 @@ a {
   color: $gray;
 }
 
+.text-gray-light {
+  color: $gray-light;
+}
+
 .text-gray-dark {
   color: $gray-dark;
 }
diff --git a/client/assets/styles/scss/globals/var.scss b/client/assets/styles/scss/globals/var.scss
index beb563950..335ef36e2 100755
--- a/client/assets/styles/scss/globals/var.scss
+++ b/client/assets/styles/scss/globals/var.scss
@@ -174,7 +174,6 @@ $terminal-line-height: 19px;
 $input-border: 2px;
 $input-border-radius: 3px;
 $input-border-radius-lg: 6px;
-$input-border-radius-xxs: 2px;
 
 $input-lg: 54px;
 $input-line-height-lg: $input-lg - ($input-border * 2);
diff --git a/client/assets/styles/scss/index.scss b/client/assets/styles/scss/index.scss
index 9ea59d0b4..2c197ac9e 100755
--- a/client/assets/styles/scss/index.scss
+++ b/client/assets/styles/scss/index.scss
@@ -62,6 +62,7 @@
 @import "components/aha-button";
 @import "components/aha-guide";
 @import "components/aha-modals";
+@import "components/aha-popover";
 @import "components/aha-sidebar";
 @import "components/animated-panel";
 @import "components/badges";
@@ -84,7 +85,6 @@
 
 // components specific
 @import "components/lists-teammates";
-@import "components/new-user-prompt";
 @import "components/notifications-trial";
 
 // external components
@@ -133,6 +133,7 @@
 @import "modals/modals-edit-ace";
 @import "modals/modals-edit-dockerfile";
 @import "modals/modals-error";
+@import "modals/modals-guide";
 @import "modals/modals-integrations";
 @import "modals/modals-invite";
 @import "modals/modals-invite-admin";
diff --git a/client/assets/styles/scss/layout/environment-body.scss b/client/assets/styles/scss/layout/environment-body.scss
index 8db5e3746..51fd60bb4 100644
--- a/client/assets/styles/scss/layout/environment-body.scss
+++ b/client/assets/styles/scss/layout/environment-body.scss
@@ -1,14 +1,23 @@
 // environment body
 .environment-body {
-  flex: 1 1 auto;
+  flex: 1 0 auto;
+
+  // aha guide
+  > .modal-dialog {
+    min-width: 0;
+  }
 }
 
 // card grid
 // max-width on config cards
 .card-grid {
+  flex-wrap: wrap;
+
+  &.padding-top {
+    padding-top: 60px;
+  }
 
   .card {
-    float: left;
     height: 461px;
     margin-bottom: 15px;
     min-width: 0;
@@ -24,7 +33,7 @@
     }
 
     @include media(xxl) {
-      width: calc(20% - 12px);
+      flex: 0 0 calc(20% - 12px);
 
       // on the 6th card + 5 thereafter
       &:nth-child(5n+6) {
@@ -33,7 +42,7 @@
     }
 
     @include media(xl) {
-      width: calc(25% - 12px);
+      flex: 0 0 calc(25% - 12px);
 
       // on the 6th card + 5 thereafter
       &:nth-child(5n+6) {
@@ -47,7 +56,7 @@
     }
 
     @include media(lg) {
-      width: calc(33.333% - 10px);
+      flex: 0 0 calc(33.333% - 11px);
 
       // on the 6th card + 5 thereafter
       &:nth-child(5n+6) {
@@ -66,7 +75,7 @@
     }
 
     @include media(md) {
-      width: calc(50% - 8px);
+      flex: 0 0 calc(50% - 8px);
 
       // on the 6th card + 5 thereafter
       &:nth-child(5n+6) {
@@ -90,7 +99,7 @@
     }
 
     @include media(xs) {
-      width: 100%;
+      flex: 0 0 100%;
 
       &:nth-child(5n+6),
       &:nth-child(4n+5),
diff --git a/client/assets/styles/scss/layout/environment-header.scss b/client/assets/styles/scss/layout/environment-header.scss
index 81d6950f0..ce4f4ed7c 100644
--- a/client/assets/styles/scss/layout/environment-header.scss
+++ b/client/assets/styles/scss/layout/environment-header.scss
@@ -2,10 +2,23 @@
 .environment-header {
   flex: 0 0 auto;
   margin-bottom: 15px;
+  overflow: visible;
+  position: relative;
+
+  + .aha-guide {
+    margin: 0 auto 15px;
+    max-width: 450px;
+
+    .p-slide {
+      font-size: 15px;
+      position: relative;
+      top: 0;
+    }
+  }
 
   .btn-aha {
-    right: 18px;
-    top: 18px;
+    right: 0;
+    top: 3px;
   }
 
   // new server button
@@ -13,6 +26,13 @@
     display: table;
     margin: 0 auto;
 
+    @include media(xxxs) {
+      font-size: 16px;
+      height: $input-sm;
+      line-height: $input-line-height-sm;
+      margin-top: 3px;
+    }
+
     &.scale {
       animation: scale .4s ease;
     }
@@ -24,6 +44,10 @@
       height: 18px;
       margin: 10px 9px 0 0;
       width: 18px;
+
+      @include media(xxxs) {
+        margin-top: 8px;
+      }
     }
   }
 }
diff --git a/client/assets/styles/scss/layout/environment.scss b/client/assets/styles/scss/layout/environment.scss
index 32b0ba604..28f45868b 100644
--- a/client/assets/styles/scss/layout/environment.scss
+++ b/client/assets/styles/scss/layout/environment.scss
@@ -3,4 +3,9 @@
   flex-direction: column;
   min-height: 100%;
   padding: 15px;
+
+  &.empty {
+    background-color: $gray-lightest;
+    background-image: url(/build/images/confetti.png);
+  }
 }
diff --git a/client/assets/styles/scss/layout/layout.scss b/client/assets/styles/scss/layout/layout.scss
index 01466dd3e..b4db3824b 100644
--- a/client/assets/styles/scss/layout/layout.scss
+++ b/client/assets/styles/scss/layout/layout.scss
@@ -50,6 +50,7 @@
     font-weight: $weight-bold;
     height: 72px;
     margin: 6px auto;
+    position: relative;
     text-align: center;
     width: 75px;
 
diff --git a/client/assets/styles/scss/modals/modals-edit.scss b/client/assets/styles/scss/modals/modals-edit.scss
index 756d467d3..a3464b567 100644
--- a/client/assets/styles/scss/modals/modals-edit.scss
+++ b/client/assets/styles/scss/modals/modals-edit.scss
@@ -472,5 +472,5 @@
 // modal-logs
 .modal-logs {
   flex: 1 1 0;
-  min-height: 210px;
+  min-height: 360px;
 }
diff --git a/client/assets/styles/scss/modals/modals-guide.scss b/client/assets/styles/scss/modals/modals-guide.scss
new file mode 100644
index 000000000..1bc1c8491
--- /dev/null
+++ b/client/assets/styles/scss/modals/modals-guide.scss
@@ -0,0 +1,20 @@
+.modal-guide {
+  margin: 0 auto;
+  max-width: 660px;
+
+  .link {
+    display: table;
+    margin: 15px auto;
+  }
+
+  .icons-external {
+    height: 12px;
+    top: 2px;
+  }
+}
+
+.modal-edit .aha-tips {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 360px;
+}
diff --git a/client/assets/styles/scss/modals/modals-mirror-dockerfile.scss b/client/assets/styles/scss/modals/modals-mirror-dockerfile.scss
index 64fbd591c..4fbfd2e0d 100644
--- a/client/assets/styles/scss/modals/modals-mirror-dockerfile.scss
+++ b/client/assets/styles/scss/modals/modals-mirror-dockerfile.scss
@@ -77,6 +77,11 @@
     }
   }
 
+  // label
+  .label-from {
+    margin-top: 15px;
+  }
+
   // path
   .text-left {
     direction: rtl;
diff --git a/client/assets/styles/scss/modals/modals-server-select.scss b/client/assets/styles/scss/modals/modals-server-select.scss
index 969241744..f3b774f6b 100644
--- a/client/assets/styles/scss/modals/modals-server-select.scss
+++ b/client/assets/styles/scss/modals/modals-server-select.scss
@@ -1,6 +1,10 @@
 .modal-servers,
 .modal-servers .animated-panel {
   min-width: 100%; // fix animated panel container
+
+  @include media(xxxs) {
+    max-width: 100%;
+  }
 }
 
 .modal-server-select {
@@ -15,7 +19,7 @@
   }
 
   // header buttons
-  .modal-header {
+  .modal-header.lg {
     align-items: center;
     flex: 0 0 120px;
     overflow: hidden;
diff --git a/client/assets/styles/scss/modals/modals.scss b/client/assets/styles/scss/modals/modals.scss
index 009c3a30c..68f43f6d9 100755
--- a/client/assets/styles/scss/modals/modals.scss
+++ b/client/assets/styles/scss/modals/modals.scss
@@ -472,6 +472,10 @@
     &.text-next {
       padding-right: 6px;
       width: 90px;
+
+      @include media(xxxs) {
+        width: auto;
+      }
     }
 
     &.float-right + .float-right {
diff --git a/client/assets/styles/scss/views/views-toolbar.scss b/client/assets/styles/scss/views/views-toolbar.scss
index b7aba1b37..8276c1150 100644
--- a/client/assets/styles/scss/views/views-toolbar.scss
+++ b/client/assets/styles/scss/views/views-toolbar.scss
@@ -46,7 +46,7 @@
   justify-content: flex-end;
   margin: 12px 12px 0;
   overflow: hidden;
-  padding: 0 6px 0 12px;
+  padding: 0 12px;
 
   .modal-dialog & {
     border-radius: $input-border-radius $input-border-radius 0 0;
@@ -86,13 +86,19 @@
 
   > .iconnables {
     flex: 0 0 auto;
+    height: 18px;
     margin-right: 6px;
 
-    &.icons-hourglass {
-      height: 18px;
+    &.icons-alert {
+      color: $orange;
     }
   }
 
+  .icons-external {
+    height: 12px;
+    top: 2px;
+  }
+
   // path/title
   .p {
     flex: 1 1 auto;
@@ -118,4 +124,23 @@
   .btn + .btn {
     margin-left: 6px;
   }
+
+  // url label
+  .label-url {
+    flex: 0 0 auto;
+    opacity: .5;
+  }
+
+  // web error button
+  .btn-web-state {
+    color: rgba($orange,.75);
+    cursor: default;
+    font-family: $sans-serif;
+    padding: 0;
+
+    .icons-alert {
+      height: 12px;
+      opacity: .9;
+    }
+  }
 }
diff --git a/client/directives/activePanel/toolbar/debugToolbarView.jade b/client/directives/activePanel/toolbar/debugToolbarView.jade
index 0a2076b52..3265038c7 100644
--- a/client/directives/activePanel/toolbar/debugToolbarView.jade
+++ b/client/directives/activePanel/toolbar/debugToolbarView.jade
@@ -1,6 +1,6 @@
 svg.iconnables.float-left.icons-alert
   use(
-    xlink:href = "#icons-alert"
+    xlink:href = "#icons-alert-alt"
   )
 p.p.monospace.text-overflow(
   title = "CMD {{startCommand()}}"
diff --git a/client/directives/activePanel/toolbar/webViewToolbarView.jade b/client/directives/activePanel/toolbar/webViewToolbarView.jade
new file mode 100644
index 000000000..51e0af583
--- /dev/null
+++ b/client/directives/activePanel/toolbar/webViewToolbarView.jade
@@ -0,0 +1,23 @@
+small.small.sans-serif.label-url.hidden-xxxs URL:&#32;
+a.p.monospace.text-overflow(
+  href = "//praful-staging-codenow.runnableapp.com"
+  target = "_blank"
+) praful-staging-codenow.runnableapp.com
+  svg.iconnables.icons-external
+    use(
+      xlink:href = "#icons-link-external"
+    )
+.grid-block.shrink.align-center.btn.btn-xs.btn-web-state(
+  ng-click = "state.error = !state.error"
+)
+  svg.iconnables.icons-alert
+    use(
+      xlink:href = "#icons-alert-alt"
+    )
+  | {{state.error ? 'No exposed ports.' : ''}}
+  | {{!state.error ? 'Bind to all interfaces.' : ''}}
+  | &nbsp;
+  a.link(
+    href = "#"
+    target = "_blank"
+  ) Learn More
diff --git a/client/directives/components/ahaGuide/ahaGuideMenuPopoverView.jade b/client/directives/components/ahaGuide/ahaGuideMenuPopoverView.jade
index be0166a94..324ed00b4 100644
--- a/client/directives/components/ahaGuide/ahaGuideMenuPopoverView.jade
+++ b/client/directives/components/ahaGuide/ahaGuideMenuPopoverView.jade
@@ -1,5 +1,5 @@
 .popover.menu.bottom(
-  ng-class = "{in: active}"
+  ng-class = "{'in': active}"
   ng-style = "popoverStyle.getStyle()"
 )
   .arrow.white
diff --git a/client/directives/components/ahaGuide/ahaGuideView.jade b/client/directives/components/ahaGuide/ahaGuideView.jade
index 8e4a2d806..55c86a34c 100644
--- a/client/directives/components/ahaGuide/ahaGuideView.jade
+++ b/client/directives/components/ahaGuide/ahaGuideView.jade
@@ -6,6 +6,8 @@
 .grid-block.align-center(
   ng-if = "state.showStep === 1"
   ng-include = "'setUpRepositoryGuideView'"
+  ng-mouseenter = "state.showControls = true"
+  ng-mouseleave = "state.showControls = false"
 )
 
 .grid-block.align-center(
diff --git a/client/directives/components/ahaGuide/ahaPopoverView.jade b/client/directives/components/ahaGuide/ahaPopoverView.jade
new file mode 100644
index 000000000..13702aa13
--- /dev/null
+++ b/client/directives/components/ahaGuide/ahaPopoverView.jade
@@ -0,0 +1,8 @@
+.arrow.white
+.popover-content
+  .grid-block.shrink.align-center.justify-center.padding-sm.aha-guide(
+    ng-include = "'ahaGuideView'"
+    ng-init = "state.showStep = 1"
+  )
+.grid-block.justify-right.popover-footer
+  button.grid-block.shrink.btn.btn-sm.green Got It
diff --git a/client/directives/components/ahaGuide/ahaSidebarView.jade b/client/directives/components/ahaGuide/ahaSidebarView.jade
index 8d39837fd..bcd9d216d 100644
--- a/client/directives/components/ahaGuide/ahaSidebarView.jade
+++ b/client/directives/components/ahaGuide/ahaSidebarView.jade
@@ -20,7 +20,7 @@
           ng-if = "$root.featureFlags.aha1 || $root.featureFlags.aha2 || $root.featureFlags.aha3"
           xlink:href = "#icons-check"
         )
-    .grid-block.vertical
+    .grid-block.vertical.aha-text
       p.p.strong Create your Sandbox
       p.small This is the first step to success.
 
@@ -32,8 +32,17 @@
   )
     .grid-block.shrink.aha-meter(
       ng-class = "{\
-        'aha-meter-13': $root.featureFlags.aha1,\
-        'aha-meter-100': $root.featureFlags.aha0\
+        'aha-error': state.showError,\
+        'aha-meter-10': state.showSubStep === 0,\
+        'aha-meter-20': state.showSubStep === 1,\
+        'aha-meter-30': state.showSubStep === 2,\
+        'aha-meter-40': state.showSubStep === 3,\
+        'aha-meter-50': state.showSubStep === 4,\
+        'aha-meter-60': state.showSubStep === 5,\
+        'aha-meter-70': state.showSubStep === 6,\
+        'aha-meter-80': state.showSubStep === 7,\
+        'aha-meter-90': state.showSubStep === 8,\
+        'aha-meter-100': $root.featureFlags.aha2 || $root.featureFlags.aha3\
       }"
     )
       svg.iconnables
@@ -45,7 +54,7 @@
           ng-if = "$root.featureFlags.aha2 || $root.featureFlags.aha3"
           xlink:href = "#icons-check"
         )
-    .grid-block.vertical
+    .grid-block.vertical.aha-text
       p.p.strong Add your First Repository
       p.small Configure your project and get it running!
 
@@ -70,7 +79,7 @@
           ng-if = "$root.featureFlags.aha3"
           xlink:href = "#icons-check"
         )
-    .grid-block.vertical
+    .grid-block.vertical.aha-text
       p.p.strong Add your First Branch
       p.small Your branches will update on every commit you make.
 
@@ -88,6 +97,6 @@
         //- use(
         //-   xlink:href = "#icons-check"
         //- )
-    .grid-block.vertical
+    .grid-block.vertical.aha-text
       p.p.strong Set Up Runnabot
       p.small Receive notifications on pull requests when your container is ready.
diff --git a/client/directives/components/ahaGuide/components/addBranchGuideView.jade b/client/directives/components/ahaGuide/components/addBranchGuideView.jade
index 2b061ce24..6680148e8 100644
--- a/client/directives/components/ahaGuide/components/addBranchGuideView.jade
+++ b/client/directives/components/ahaGuide/components/addBranchGuideView.jade
@@ -13,6 +13,6 @@
       ng-if = "$root.featureFlags.aha3"
       xlink:href = "#icons-check"
     )
-.grid-block.vertical
-  p.p.strong Add your First Branch
+.grid-block.vertical.aha-text
+  p.p.small.text-gray-light Add your First Branch
   p.p You can start adding branches by clicking the + button next to the name of the repository.
diff --git a/client/directives/components/ahaGuide/components/createSandboxGuideView.jade b/client/directives/components/ahaGuide/components/createSandboxGuideView.jade
index 297abb972..dac339141 100644
--- a/client/directives/components/ahaGuide/components/createSandboxGuideView.jade
+++ b/client/directives/components/ahaGuide/components/createSandboxGuideView.jade
@@ -14,8 +14,8 @@
       ng-if = "$root.featureFlags.aha1 || $root.featureFlags.aha2 || $root.featureFlags.aha3"
       xlink:href = "#icons-check"
     )
-.grid-block.vertical
-  p.p.strong Create your Sandbox
+.grid-block.vertical.aha-text
+  p.p.small.text-gray-light Create your Sandbox
   p.p
     {{state.showSubStep === 0 ? 'Choose an organization to create your sandbox for.' : ''}}
     {{state.showSubStep === 1 ? 'Hang tight!' : ''}}
diff --git a/client/directives/components/ahaGuide/components/setUpRepositoryGuideView.jade b/client/directives/components/ahaGuide/components/setUpRepositoryGuideView.jade
index b54c5754b..270e4752d 100644
--- a/client/directives/components/ahaGuide/components/setUpRepositoryGuideView.jade
+++ b/client/directives/components/ahaGuide/components/setUpRepositoryGuideView.jade
@@ -1,20 +1,135 @@
-.grid-block.shrink.aha-meter(
+.grid-block.align-center.shrink.spinner-wrapper.spinner-md.spinner-gray.in.js-animate(
+  ng-if = "state.showVerification"
+  ng-include = "'spinner'"
+)
+
+.grid-block.shrink.aha-meter.js-animate(
   ng-class = "{\
-    'aha-meter-13': $root.featureFlags.aha1,\
+    'aha-error': state.showError,\
+    'aha-meter-10': state.showSubStep === 0,\
+    'aha-meter-20': state.showSubStep === 1,\
+    'aha-meter-30': state.showSubStep === 2,\
+    'aha-meter-40': state.showSubStep === 3,\
+    'aha-meter-50': state.showSubStep === 4,\
+    'aha-meter-60': state.showSubStep === 5,\
+    'aha-meter-70': state.showSubStep === 6,\
+    'aha-meter-80': state.showSubStep === 7,\
+    'aha-meter-90': state.showSubStep === 8,\
     'aha-meter-100': $root.featureFlags.aha2 || $root.featureFlags.aha3\
   }"
+  ng-if = "!state.showVerification"
 )
-  svg.iconnables
+  svg.iconnables(
+    ng-if = "!state.showError"
+  )
     use(
-      ng-if = "$root.featureFlags.aha1 && (!$root.featureFlags.aha2 || !$root.featureFlags.aha3)"
+      ng-if = "$root.featureFlags.aha1 && !$root.featureFlags.aha2 && !$root.featureFlags.aha3 && state.showSubStep != 9"
       xlink:href = "#icons-octicons-repo"
     )
     use(
       ng-if = "$root.featureFlags.aha2 || $root.featureFlags.aha3"
       xlink:href = "#icons-check"
     )
-.grid-block.vertical
-  p.p.strong Add your First Repository
-  p.p
-    | {{state.showSubStep === 0 ? 'Click ‘Add Configuration’ to start adding your repository.' : ''}}
-    | {{state.showSubStep === 1 ? 'Select a repository to set up.' : ''}}
+  svg.iconnables.icons-alert(
+    ng-if = "state.showError"
+  )
+    use(
+      xlink:href = "#icons-alert-alt"
+    )
+
+.grid-block.vertical.aha-text
+  .grid-block(
+    ng-if = "$root.canEditFeatureFlags() && state.showSubStep > 0"
+    ng-show = "state.showControls"
+    style = "position: absolute; right: 0; top: 0;"
+  )
+    a.grid-content.shrink.red.small.link(
+      ng-click = "state.showVerification = !state.showVerification"
+      ng-if = "state.showSubStep === 7"
+    ) Verify
+    a.grid-content.shrink.red.small.link(
+      ng-click = "\
+        state.showError = !state.showError;\
+        state.showErrorType = 'CMD';\
+      "
+      ng-if = "state.showSubStep === 7"
+    ) CMDErr
+    a.grid-content.shrink.red.small.link(
+      ng-click = "\
+        state.showError = !state.showError;\
+        state.showErrorType = 'build';\
+      "
+      ng-if = "state.showSubStep === 7"
+    ) BuildErr
+    a.grid-content.shrink.red.small.link(
+      ng-click = "\
+        $root.featureFlags.aha1 = false;\
+        $root.featureFlags.aha2 = true;\
+      "
+      ng-if = "state.showSubStep === 8"
+    ) NextMile
+    a.grid-content.shrink.red.small.link(
+      ng-click = "state.showSubStep = state.showSubStep - 1"
+      ng-if = "state.showSubStep < 9 && state.showSubStep > 1"
+    ) Prev
+    a.grid-content.shrink.red.small.link(
+      ng-click = "state.showSubStep = state.showSubStep + 1"
+      ng-if = "state.showSubStep < 8"
+    ) Next
+  p.p.small.text-gray-light Add your First Repository
+  p.p(
+    ng-if = "state.showSubStep === 0 && !state.showError && !state.showVerification"
+  ) Add your repository by clicking ‘Add Configuration’.
+  p.p(
+    ng-class = "{'p-slide js-animate': state.showSubStep}"
+    ng-if = "state.showSubStep === 1 && !state.showError && !state.showVerification"
+  ) Select a repository to configure.
+  p.p(
+    ng-class = "{'p-slide js-animate': state.showSubStep}"
+    ng-if = "state.showSubStep === 2 && !state.showError && !state.showVerification"
+  ) How would you like to configure your repo?
+  p.p(
+    ng-class = "{'p-slide js-animate': state.showSubStep}"
+    ng-if = "state.showSubStep === 3 && !state.showError && !state.showVerification"
+  ) Give your configuration a name.
+  p.p(
+    ng-class = "{'p-slide js-animate': state.showSubStep}"
+    ng-if = "state.showSubStep === 4 && !state.showError && !state.showVerification"
+  ) What does your repository run?
+  p.p(
+    ng-class = "{'p-slide js-animate': state.showSubStep}"
+    ng-if = "state.showSubStep === 5 && !state.showError && !state.showVerification"
+  ) Choose commands and packages.
+  p.p(
+    ng-class = "{'p-slide js-animate': state.showSubStep}"
+    ng-if = "state.showSubStep === 6 && !state.showError && !state.showVerification"
+  )
+    | {{!state.fromMirroring ? 'If your app needs additional configuration…' : ''}}
+    | {{state.fromMirroring ? 'We‘ve imported your dockerfile, click ‘Save & Build’ to build it!' : ''}}
+    //- | FROM BLANK DOCKERFILE: When you‘re done editing your dockerfile, click ‘Save & Build’ to build it!
+  p.p(
+    ng-class = "{'p-slide js-animate': state.showSubStep}"
+    ng-if = "state.showSubStep === 7"
+  )
+    | {{!state.showError && !state.showVerification ? 'Now building. Build time varies depending on your configuration.' : ''}}
+    | {{state.showVerification ? 'Verifying Configuration…' : ''}}
+    | {{state.showErrorType === 'build' && state.showError ? 'Your build failed. Inspect your build logs for more information.' : ''}}
+    | {{state.showErrorType === 'CMD' && state.showError ? 'Your container failed to run. Inspect your CMD logs for more information.' : ''}}
+    //- | IF DETENTION ERROR: Your container is running! But it looks like something is misconfigured.
+    span.span(
+     ng-if = "state.showErrorType === 'exitedEarly'"
+    ) Your repository isn‘t running yet! Check the logs to debug any issues. If you‘re stumped,&#32;
+      //- this link should open in intercom with the prefilled message:
+          "I’m having trouble getting my first container up and running."
+      a.link ask our engineers
+      | !
+
+  p.p(
+    ng-class = "{'p-slide js-animate': state.showSubStep}"
+    ng-if = "state.showSubStep === 8 && !state.showError && !state.showVerification"
+  ) Your build is looking good! Check out its URL and click ‘Done’ if it looks good to you.
+
+  //- in the popover
+  p.p(
+    ng-if = "$root.featureFlags.aha2"
+  ) Add more containers if your project requires it. Once you’re done, head to your containers to start adding branches.
diff --git a/client/directives/components/ahaGuide/components/setUpRunnabotGuideView.jade b/client/directives/components/ahaGuide/components/setUpRunnabotGuideView.jade
index d2becb5ea..6d7575e11 100644
--- a/client/directives/components/ahaGuide/components/setUpRunnabotGuideView.jade
+++ b/client/directives/components/ahaGuide/components/setUpRunnabotGuideView.jade
@@ -9,6 +9,6 @@
     //- use(
     //-   xlink:href = "#icons-check"
     //- )
-.grid-block.vertical
-  p.p.strong Set Up Runnabot
+.grid-block.vertical.aha-text
+  p.p.small.text-gray-light Set Up Runnabot
   p.p Set up auto-branching before configuring Runnabot.
diff --git a/client/directives/components/mirrorDockerfile/mirrorDockerfileView.jade b/client/directives/components/mirrorDockerfile/mirrorDockerfileView.jade
index ba0c591dc..d08dc9380 100644
--- a/client/directives/components/mirrorDockerfile/mirrorDockerfileView.jade
+++ b/client/directives/components/mirrorDockerfile/mirrorDockerfileView.jade
@@ -21,14 +21,43 @@
       use(
         xlink:href = "#icons-file-new"
       )
-    .grid-content Create a new configuration
+    .grid-content Configure with Runnable
     //- if there is only one, [check] by default
     input.checkbox(
       name = "dockerfile"
+      ng-disabled = "$root.isLoading[MDC.name + 'SingleRepo']"
+      ng-model = "MDC.state.configurationMethod"
       type = "radio"
       value = "new"
-      ng-model = "MDC.state.configurationMethod"
+    )
+
+    button.btn.btn-xs.btn-icon.btn-add
+      svg.iconnables.icons-check
+        use(
+          xlink:href = "#icons-check"
+        )
+
+small.small.text-gray.padding-xxs.label-from(
+  ng-if = "!$root.isLoading.mirrorDockerfile && MDC.state.repo.dockerfiles.length > 0"
+) Advanced Configuration
+
+.grid-content.shrink.list.list-bordered(
+  ng-if = "$root.featureFlags.blankDockerfile"
+)
+  label.grid-block.list-item(
+    ng-class = "{'active': MDC.state.dockerfile === false}"
+    ng-disabled = "$root.isLoading[MDC.name + 'SingleRepo']"
+  )
+    svg.grid-content.shrink.iconnables.icons-dockerfile
+      use(
+        xlink:href = "#icons-dockerfile"
+      )
+    .grid-content Start with a blank Dockerfile
+    //- if there is only one, [check] by default
+    input.checkbox(
       ng-disabled = "$root.isLoading[MDC.name + 'SingleRepo']"
+      ng-value = "false"
+      type = "radio"
     )
     button.btn.btn-xs.btn-icon.btn-add
       svg.iconnables.icons-check
@@ -48,22 +77,22 @@
   )
     svg.grid-content.shrink.iconnables.icons-dockerfile
       use(
-        xlink:href = "#icons-dockerfile"
+        xlink:href = "#icons-dockerfile-repo"
       )
     .grid-content
       div {{ dockerfile.path }}
       a.small.link(
+        ng-disabled = "$root.isLoading[MDC.name + 'SingleRepo']"
         ng-href = "{{ dockerfile.html_url }}"
         ng-if = "dockerfile.html_url"
         target = "_blank"
-        ng-disabled = "$root.isLoading[MDC.name + 'SingleRepo']"
-      ) View on GitHub
+      ) From your Repository on GitHub
     //- if there is only one, [check] by default
     input.checkbox(
       name = "dockerfile"
+      ng-model = "MDC.state.configurationMethod"
       type = "radio"
       value = "dockerfile"
-      ng-model = "MDC.state.configurationMethod"
     )
     button.btn.btn-xs.btn-icon.btn-add
       svg.iconnables.icons-check
@@ -71,11 +100,11 @@
           xlink:href = "#icons-check"
         )
 
-small.grid-block.shrink.align-center.justify-center.small.text-gray.padding-xxs(
+small.grid-block.shrink.align-center.small.text-gray.padding-xxs(
   ng-click = "viewState.showAddDockerfile = true"
   ng-hide = "MDC.fromTool && $root.isLoading.mirrorDockerfile || viewState.showAddDockerfile"
-) Don’t see your Dockerfile?
-  button.btn.btn-xs.white.btn-add-dockerfile(
+) Don’t see your repo’s Dockerfile?
+  button.btn.btn-xxs.gray.btn-add-dockerfile(
     ng-click = "MDC.addDockerfileModal()"
     type = "button"
   ) Add Dockerfile…
@@ -84,6 +113,6 @@ small.grid-block.shrink.align-center.justify-center.small.text-gray.padding-xxs(
   add-dockerfile
   branch-name = "MDC.branchName"
   full-repo = "MDC.fullRepo"
-  view-state = "viewState"
   ng-if = "viewState.showAddDockerfile"
+  view-state = "viewState"
 )
diff --git a/client/directives/environment/environmentBody/viewCardGrid.jade b/client/directives/environment/environmentBody/viewCardGrid.jade
index 41013a64d..cc1b8a98c 100644
--- a/client/directives/environment/environmentBody/viewCardGrid.jade
+++ b/client/directives/environment/environmentBody/viewCardGrid.jade
@@ -18,13 +18,7 @@
     use(
       xlink:href = "#icons-new-repository-server"
     )
-  h4.h4 Add your first repository container to get started.
-  small.small Need help? Check out our&#32;
-    a.link(
-      href = "https://youtu.be/_uwPKIH990E"
-      target = "_blank"
-    ) Getting Started video
-    | .
+  p.p Add your first repository container to get started.
 
 //- server card
 .card.gray.disabled.load(
diff --git a/client/directives/environment/environmentView.jade b/client/directives/environment/environmentView.jade
index c443232e7..901a66682 100755
--- a/client/directives/environment/environmentView.jade
+++ b/client/directives/environment/environmentView.jade
@@ -37,24 +37,35 @@
     button.btn.btn-xs.green Got it, thanks!
 
 //- environment page
-.grid-block.environment-wrapper
-  .grid-block.vertical.new-user-prompt(
-    ng-if = "$root.featureFlags.newUserPrompt"
-    ng-include = "'newUserPrompt'"
-  )
+.grid-block.environment-wrapper(
+  ng-class = "{'empty': $root.featureFlags.aha && $root.featureFlags.aha1}"
+)
 
   header.grid-block.align-center.environment-header(
     ng-include = "'viewEnvironmentHeader'"
     ng-init = "state.helpButton = {active: false}"
   )
 
-  .environment-body.clearfix
+  .grid-block.shrink.align-center.justify-center.padding-sm.aha-guide(
+    ng-if = "$root.featureFlags.aha1ExitedEarly"
+    ng-include = "'ahaGuideView'"
+    ng-init = "\
+      state.showStep = 1;\
+      state.showSubStep = 7;\
+      state.showError = true;\
+      state.showErrorType = 'exitedEarly';\
+    "
+  )
+
+  .grid-block.environment-body.justify-center.clearfix(
+    ng-class = "{'align-center justify-center': $root.featureFlags.aha1}"
+  )
     .help-container(
       ng-class = "{\
         'fixed': helpUndock,\
         'top': helpUndock\
       }"
-      ng-if = "helpCards.getActiveCard()"
+      ng-if = "helpCards.getActiveCard() && !$root.featureFlags.aha"
     )
       .help(
         ng-if = "helpCards.getActiveCard().targets.newContainer && state.newServerButton.active"
@@ -83,11 +94,29 @@
           ng-bind-html = "helpCards.getActiveCard().helpTop"
         )
 
-    .help-padding.no-touching(
-      ng-bind-html = "helpCards.getActiveCard().helpTop"
-      ng-if = "helpCards.getActiveCard()"
+    .modal-dialog.modal-sm(
+      ng-if = "$root.featureFlags.aha1"
     )
-    .card-grid.clearfix(
+      .grid-block.align-center.aha-guide.padding-md(
+        ng-include = "'ahaGuideView'"
+        ng-init = "\
+          state.showStep = 1;\
+          state.showSubStep = 0;\
+        "
+      )
+      .modal-body.grid-block.vertical.padding-sm
+        .grid-block.shrink.justify-center.align-center.padding-xs.well.gray.aha-tips.fade(
+          ng-if = "$root.featureFlags.aha1"
+        )
+          svg.grid-content.shrink.iconnables
+            use(
+              xlink:href = "#icons-life-preserver"
+            )
+          small.grid-content.small You can see your setup progress by selecting the !? button in the top-right.
+
+    .grid-block.card-grid.clearfix(
+      ng-class = "{'padding-top': helpCards.getActiveCard().helpTop}"
+      ng-if = "!$root.featureFlags.aha1"
       ng-include = "'viewCardGrid'"
     )
 
diff --git a/client/directives/environment/modals/forms/formLogs/viewFormLogs.jade b/client/directives/environment/modals/forms/formLogs/viewFormLogs.jade
index 95f265862..669b5756d 100644
--- a/client/directives/environment/modals/forms/formLogs/viewFormLogs.jade
+++ b/client/directives/environment/modals/forms/formLogs/viewFormLogs.jade
@@ -1,14 +1,19 @@
-//- alert appears during a build failure AND no changes have been made
-.alert.orange(
+.grid-block.shrink.justify-center.align-center.padding-xs.well.gray.aha-tips(
   ng-if = "\
     !$root.isLoading.setupServerModalIsBuilding && \
     !SMC.isDirty() && \
     SMC.instance.status() === 'buildFailed' \
   "
-) Having build problems? Some errors can be resolved by rebuilding the container.
-  button.btn.btn-xxs.orange(
-    ng-click = "SMC.rebuild(true, true)"
-  ) Rebuild Without Cache
+)
+  svg.grid-content.shrink.iconnables
+    use(
+      xlink:href = "#icons-life-preserver"
+    )
+  .grid-content.vertical
+    small.grid-content.small Having build problems? Some errors can be resolved by rebuilding the container.
+    button.btn.btn-xxs.orange(
+      ng-click = "SMC.rebuild(true, true)"
+    ) Rebuild Without Cache
 
 //- tabs
 .btn-group.btn-toggle.btn-toggle-xs(
@@ -23,6 +28,12 @@
     ng-click = "SMC.page = 'run'"
     ng-disabled = "!SMC.instance.containers.models.length"
   ) CMD Logs
+  button.btn.btn-xs.white(
+    ng-class = "{'active': SMC.page === 'terminal'}"
+    ng-click = "SMC.page = 'terminal'"
+    ng-disabled = "!SMC.instance.containers.models.length"
+    ng-if = "$root.featureFlags.configTerminal"
+  ) Terminal
 
 //- logs
 pre.pre.log-wrapper(
@@ -37,18 +48,28 @@ pre.pre.log-wrapper(
       'ace-runnable-dark': !$root.featureFlags.imAfraidOfTheDark,\
       'ace-runnable-light': $root.featureFlags.imAfraidOfTheDark\
     }"
-    ng-if = "SMC.page === 'run'"
+    ng-if = "SMC.page === 'run' && SMC.showDebugCmd"
     ng-include = "'debugToolbarView'"
-    ng-show = "SMC.showDebugCmd"
   )
+
+  //- webview toolbar
+  .views-toolbar(
+    ng-class = "{\
+      'ace-runnable-dark': !$root.featureFlags.imAfraidOfTheDark,\
+      'ace-runnable-light': $root.featureFlags.imAfraidOfTheDark\
+    }"
+    ng-include = "'webViewToolbarView'"
+    ng-if = "SMC.page === 'run' && !SMC.showDebugCmd && $root.featureFlags.webToolbar"
+  )
+
   //- build logs page
   .build-log-wrapper(
     build-logs
-    scroll-glue
     instance = 'SMC.instance'
     ng-if = "SMC.instance"
     ng-show = "SMC.page === 'build'"
     ng-style = "($root.featureFlags.themeToggle || $root.featureFlags.fullScreenToggle) && {'padding-right': '42px'}"
+    scroll-glue
   )
   //- cmd logs page
   .term-js.term-log(
diff --git a/client/directives/environment/modals/forms/guideForm/guideFormView.jade b/client/directives/environment/modals/forms/guideForm/guideFormView.jade
new file mode 100644
index 000000000..229b434da
--- /dev/null
+++ b/client/directives/environment/modals/forms/guideForm/guideFormView.jade
@@ -0,0 +1,8 @@
+p.p.grid-content.shrink.text-center.text-gray.padding-sm You have the basic parts of your application configured! Many applications require additional configuration. Use our tools to configure options specific to your application before building.
+a.grid-content.shrink.link.small.text-gray(
+  href = "#"
+) View Setup Guide
+  svg.iconnables.icons-external
+    use(
+      xlink:href= "#icons-link-external"
+    )
\ No newline at end of file
diff --git a/client/directives/environment/modals/modalSetupServer/pages/newRepositorySelectionView.jade b/client/directives/environment/modals/modalSetupServer/pages/newRepositorySelectionView.jade
index b60a92bfa..ee4896a27 100644
--- a/client/directives/environment/modals/modalSetupServer/pages/newRepositorySelectionView.jade
+++ b/client/directives/environment/modals/modalSetupServer/pages/newRepositorySelectionView.jade
@@ -22,7 +22,7 @@
   )
 
 //- show this if there are no repositories to add
-.grid-block.well.gray.justify-center(
+.grid-block.well.gray.justify-center.padding-md(
   ng-if = "\
     !$root.isLoading.newContainerModalRepos && \
     MC.githubRepos.models.length === 0 \
@@ -30,13 +30,12 @@
 )
   .p.empty
     .h3.strong Uh oh!
-    | We couldn’t find any repositories for this organization.
-    br
-    | If you think you think this is a mistake,&#32;
+    | We couldn’t find any repositories for this organization. If you think you think this is a mistake,&#32;
     a.link(
       intercom-link
-      intro-message = "This thing wont fetch my Github repos."
+      intro-message = "This thing wont fetch my GitHub repos."
     )
+    | .
 
 //- list of repositories (mock up, we already have a template for this)
 ul.list.list-servers(
diff --git a/client/directives/environment/modals/modalSetupServer/setupMirrorServerModalView.jade b/client/directives/environment/modals/modalSetupServer/setupMirrorServerModalView.jade
index f014856d6..039dd2c6e 100644
--- a/client/directives/environment/modals/modalSetupServer/setupMirrorServerModalView.jade
+++ b/client/directives/environment/modals/modalSetupServer/setupMirrorServerModalView.jade
@@ -1,4 +1,13 @@
 .modal-backdrop.in
+  .grid-block.shrink.align-center.justify-center.padding-sm.aha-guide(
+    ng-if = "$root.featureFlags.aha1"
+    ng-include = "'ahaGuideView'"
+    ng-init = "\
+      state.showStep = 1;\
+      state.showSubStep = 6;\
+      state.fromMirroring = true;\
+    "
+  )
   form.modal-dialog.modal-edit(
     name = "SMC.serverForm"
     ng-include = "'serverModalView'"
diff --git a/client/directives/environment/modals/modalSetupServer/setupServerModalView.jade b/client/directives/environment/modals/modalSetupServer/setupServerModalView.jade
index 89cd875ab..d0c532e74 100644
--- a/client/directives/environment/modals/modalSetupServer/setupServerModalView.jade
+++ b/client/directives/environment/modals/modalSetupServer/setupServerModalView.jade
@@ -1,4 +1,12 @@
 .modal-backdrop.in
+  .grid-block.shrink.align-center.justify-center.padding-sm.aha-guide(
+    ng-if = "$root.featureFlags.aha1"
+    ng-include = "'ahaGuideView'"
+    ng-init = "\
+      state.showStep = 1;\
+      state.showSubStep = 4;\
+    "
+  )
   form.modal-dialog.modal-edit(
     name = "SMC.serverForm"
     ng-if = "SMC.state.repo"
diff --git a/client/directives/environment/modals/serverModalView.jade b/client/directives/environment/modals/serverModalView.jade
index 17f144a14..f20080a38 100644
--- a/client/directives/environment/modals/serverModalView.jade
+++ b/client/directives/environment/modals/serverModalView.jade
@@ -28,7 +28,7 @@ header.grid-block.vertical.align-center.modal-header
         use(
           xlink:href = "#icons-repository"
         )
-        .btn-text.grid-content Repository
+      .btn-text.grid-content Repository
     button.btn.btn-radio.grid-block.vertical.js-animate(
       ng-class = "{'active': SMC.selectedTab === 'commands'}"
       ng-click = "SMC.changeTab('commands')"
@@ -144,11 +144,10 @@ section.modal-body(
 section.modal-body(
   ng-if = "!$root.isLoading[SMC.name]"
 )
-  .modal-form.empty(
+  .grid-block.vertical.modal-form.modal-guide(
+    ng-include = "'guideFormView'"
     ng-show = "SMC.selectedTab === 'default'"
   )
-    h3.h3.empty.text-center Your container is ready to build!
-    small.small.empty.text-center You can use the options above to make additional changes to your configuration.
   .modal-form.form-stack(
     data = "SMC.data"
     is-new-container = "!SMC.instance"
diff --git a/client/directives/instances/instance/instanceHeaderView.jade b/client/directives/instances/instance/instanceHeaderView.jade
index a0bd18950..ac64b11b8 100644
--- a/client/directives/instances/instance/instanceHeaderView.jade
+++ b/client/directives/instances/instance/instanceHeaderView.jade
@@ -20,7 +20,7 @@
   //- container title
     - repository in .span
     - branch in .strong
-  .grid-block.justify-center
+  .grid-block.justify-center.align-center
     span.span {{instance.getMasterPodName()}}
     strong.strong(
       ng-if = "instance.getBranchName()"
diff --git a/client/directives/modals/modalNewContainer/newContainerModalView.jade b/client/directives/modals/modalNewContainer/newContainerModalView.jade
index 47bd2a4b0..0b6471925 100644
--- a/client/directives/modals/modalNewContainer/newContainerModalView.jade
+++ b/client/directives/modals/modalNewContainer/newContainerModalView.jade
@@ -1,6 +1,6 @@
 .modal-backdrop.in
   .grid-block.shrink.align-center.justify-center.padding-sm.aha-guide(
-    ng-if = "$root.featureFlags.aha"
+    ng-if = "$root.featureFlags.aha1"
     ng-include = "'ahaGuideView'"
     ng-init = "\
       state.showStep = 1;\
@@ -14,11 +14,13 @@
         name = "containerSelection"
       )
         header.modal-header.grid-block.justify-center(
+          ng-class = "{'lg': !$root.featureFlags.aha1}"
           ng-click = "MC.changeTab('nameContainer')"
         )
           .grid-block.shrink.btn(
             ng-class = "{'active': MC.state.tabName === 'repos'}"
             ng-click = "MC.changeTab('repos')"
+            ng-if = "!$root.featureFlags.aha1"
           )
             svg.iconnables.icons-repository.grid-block.shrink
               use(
@@ -34,6 +36,7 @@
               'disabled': $root.isLoading[MC.name + 'SingleRepo'] \
             }"
             ng-click = "!$root.isLoading[MC.name + 'SingleRepo'] && MC.changeTab('services')"
+            ng-if = "!$root.featureFlags.aha1"
           )
             svg.iconnables.icons-template.grid-block.shrink
               use(
@@ -69,7 +72,9 @@
             use(
               xlink:href = "#icons-arrow-down"
             )
-          h1.modal-heading Choose Configuration
+          h1.modal-heading(
+            ng-if = "!$root.featureFlags.aha1"
+          ) Configuration Method
           svg.iconnables.icons-close(
             ng-click = "MC.close()"
           )
@@ -110,7 +115,9 @@
             use(
               xlink:href = "#icons-arrow-down"
             )
-          h1.modal-heading.text-overflow Container Name
+          h1.modal-heading.text-overflow(
+            ng-if = "!$root.featureFlags.aha1"
+          ) Container Name
           svg.iconnables.icons-close(
             ng-click = "MC.close()"
           )
diff --git a/client/directives/navBar/viewNav.jade b/client/directives/navBar/viewNav.jade
index ca0de5cfa..a8c0503e9 100644
--- a/client/directives/navBar/viewNav.jade
+++ b/client/directives/navBar/viewNav.jade
@@ -4,6 +4,12 @@
   data = "dataApp.data"
 )
 
+//- aha menu
+.popover.right.in.popover-aha(
+  ng-if = "$root.featureFlags.aha2 && !$root.featureFlags.aha1ExitedEarly"
+  ng-include = "'ahaPopoverView'"
+)
+
 a.a(
   ui-sref = "base.config({ userName: CA.activeAccount.oauthName() })"
   ui-sref-active = "active"
@@ -15,7 +21,18 @@ a.a(
   | Configure
 
 a.a.disabled(
-  ng-if = "dataApp.state.includes('base.config') && CA.instancesByPod && !CA.instancesByPod.models.length"
+  ng-if = "$root.featureFlags.aha1ExitedEarly"
+  tooltip = "You don‘t have a running repository yet!"
+  tooltip-options = "{\"class\":\"right\",\"left\":75,\"top\":17}"
+)
+  svg.iconnables.icons-server-dark
+    use(
+      xlink:href = "#icons-server-dark"
+    )
+  | Containers
+
+a.a.disabled(
+  ng-if = "dataApp.state.includes('base.config') && CA.instancesByPod && !CA.instancesByPod.models.length && !$root.featureFlags.aha1ExitedEarly"
   tooltip = "You don’t have any containers yet!"
   tooltip-options = "{\"class\":\"right\",\"left\":75,\"top\":17}"
 )
@@ -26,7 +43,7 @@ a.a.disabled(
   | Containers
 
 a.a(
-  ng-if = "dataApp.state.includes('base.instances') || !CA.instancesByPod || CA.instancesByPod.models.length"
+  ng-if = "(dataApp.state.includes('base.instances') || !CA.instancesByPod || CA.instancesByPod.models.length) && !$root.featureFlags.aha1ExitedEarly"
   ui-sref = "base.instances({ userName: CA.activeAccount.oauthName() })"
   ui-sref-active = "active"
 )
diff --git a/client/services/featureFlagService.js b/client/services/featureFlagService.js
index 89b62ddeb..fbd6d9619 100644
--- a/client/services/featureFlagService.js
+++ b/client/services/featureFlagService.js
@@ -10,6 +10,7 @@ function featureFlags(
     aha: false,
     aha0: false, // step 1: create sandbox
     aha1: false, // step 2: working repo config
+    aha1ExitedEarly: false, // step 2: if the user left the flow before getting a running config
     aha2: false, // step 3: add branch
     aha3: false, // step 4: runnabot
     ahaSidebar: false, // toggle sidebar
@@ -17,12 +18,14 @@ function featureFlags(
     autoIsolation: false,
     autoIsolationSetup: false,
     backup: false,
+    blankDockerfile: false, // allows users to skip the verification flow
     billing: false,
     billingDiscounted: false,
     billingExpired: false,
     billingPlanChangedNotification: false, // if plan changes because of container created
     cardStatus: false,
     connections: false,
+    configTerminal: false, // flag for terminal in config view
     dockerfileMirroringMultiple: false,
     editAnyInstance: false,
     emptyFolder: false, // shows empty folder markup
@@ -56,6 +59,7 @@ function featureFlags(
     trialEnding: false, // shows notification when trial is ending
     undoDelete: false, // undo delete configuration
     webhooks: false,
+    webToolbar: false, // webview toolbar
     whitelistIpFiltering: false
   };
 
diff --git a/client/templates/svg/svgDefs.jade b/client/templates/svg/svgDefs.jade
index 8ec2ac9ae..c26a9f3b8 100755
--- a/client/templates/svg/svgDefs.jade
+++ b/client/templates/svg/svgDefs.jade
@@ -120,6 +120,16 @@ svg(xmlns='http://www.w3.org/2000/svg')
     path(d='M16.423,13.437V12.872a2.47,2.47,0,0,0-4.94,0v0.565a0.891,0.891,0,0,0-.828.887v2.787a0.89,0.89,0,0,0,.889.889h4.816a0.89,0.89,0,0,0,.889-0.889V14.324A0.89,0.89,0,0,0,16.423,13.437Z', transform='translate(-2 -1)', style='fill:#fff')
     path(d='M15.973,14.027L16,10H13c-1.665,0-2,.417-2,2l0,1.05a1.37,1.37,0,0,0-1,1.318V17s6.953-.062,7,0V14Z', transform='translate(-2 -1)', style='fill:#fff')
     path(d='M16.632,14l-0.658.027V12.943A1.986,1.986,0,0,0,12,12.872L12,14H11.368a0.368,0.368,0,0,0-.368.368v2.263a0.368,0.368,0,0,0,.368.368h5.263A0.368,0.368,0,0,0,17,16.632V14.368A0.368,0.368,0,0,0,16.632,14Zm-2.679-2.608a1.482,1.482,0,0,1,1.48,1.48V14H12.474V12.872A1.482,1.482,0,0,1,13.953,11.392Z', transform='translate(-2 -1)', style='fill:#f2ae24')
+  symbol#icons-dockerfile-repo(viewBox='0 0 18 18')
+    path(d='M4.685,16.5A2.242,2.242,0,0,1,2.45,14.251V3.683A2.271,2.271,0,0,1,4.74,1.45H9.813L15.55,7.187v7.131a2.271,2.271,0,0,1-2.29,2.232Z', fill='#fff')
+    path(d='M4.741,1.9H9.627L15.1,7.373v6.941A1.844,1.844,0,0,1,13.254,16.1l-8.568-.048a1.793,1.793,0,0,1-1.786-1.8V3.686A1.843,1.843,0,0,1,4.741,1.9m0-.9A2.734,2.734,0,0,0,2,3.683V14.249a2.693,2.693,0,0,0,2.683,2.7L13.249,17h0.011A2.734,2.734,0,0,0,16,14.317V7L10,1H4.741Z', fill='#b3b3b3')
+    polygon(points='10.45 6.55 10.45 2.086 14.914 6.55 10.45 6.55', fill='#f2f2f2')
+    path(d='M10.9,3.173L13.827,6.1H10.9V3.173M10,1V7h6L10,1h0Z', fill='#b3b3b3')
+    path(d='M14.084,10.347a1.6,1.6,0,0,0-1.214-.113,1.666,1.666,0,0,0-.656-1.058L12.082,9.07l-0.11.127a1.429,1.429,0,0,0-.257,1.007,1.312,1.312,0,0,0,.245.676,1.861,1.861,0,0,1-.353.16,2.294,2.294,0,0,1-.727.122H4.014L4,11.321a3.035,3.035,0,0,0,.242,1.539l0.094,0.191,0.011,0.018a3.317,3.317,0,0,0,3.015,1.558,5.3,5.3,0,0,0,5.27-3.325,1.513,1.513,0,0,0,1.521-.726l0.076-.148Z', fill='#158cb6')
+    polygon(points='10.351 10.093 9.304 10.093 9.304 8 8.049 8 8.049 9.046 5.956 9.046 5.956 10.093 4.909 10.093 4.909 11.163 10.351 11.163 10.351 10.093', fill='#00acd3')
+    rect(width='18', height='18', fill='none')
+    path(d='M15.514,16.694l-1.421-1.421a0.249,0.249,0,0,0-.353,0l-1.405,1.414a0.249,0.249,0,0,1-.426-0.177l0.025-5.188a0.249,0.249,0,0,1,.247-0.248l3.514-.022a0.249,0.249,0,0,1,.251.249l-0.007,5.216A0.249,0.249,0,0,1,15.514,16.694Z', fill='#f25058')
+    path(d='M15.946,11.052l-0.007,5.467a0.249,0.249,0,0,1-.425.176l-1.421-1.421a0.249,0.249,0,0,0-.353,0l-1.405,1.414a0.249,0.249,0,0,1-.426-0.177l0.025-5.188a0.249,0.249,0,0,1,.247-0.248l3.764-.023m0-1H15.94l-3.764.023a1.249,1.249,0,0,0-1.241,1.243l-0.028,5.8a0.849,0.849,0,0,0,.616.81,1,1,0,0,0,1.093-.219l1.182-.712a0.249,0.249,0,0,1,.258,0l1.176,0.714a1,1,0,0,0,1.089.217,0.849,0.849,0,0,0,.618-0.8l0.008-6.067a1,1,0,0,0-1-1h0Zm0,2h0Z', fill='#fff')
   symbol#icons-docs-dark(viewBox='0 0 20 20')
     path(d='M18.5,15H16V1.5A1.50168,1.50168,0,0,0,14.5,0H1.5A1.50168,1.50168,0,0,0,0,1.5v15A3.50393,3.50393,0,0,0,3.5,20h13A3.50393,3.50393,0,0,0,20,16.5,1.50168,1.50168,0,0,0,18.5,15Z', style='fill:#CCADD2')
     path(d='M18.5,16H15V1.5A0.49971,0.49971,0,0,0,14.5,1H1.5a0.49971,0.49971,0,0,0-.5.5v15A2.50294,2.50294,0,0,0,3.5,19h13A2.50294,2.50294,0,0,0,19,16.5,0.49971,0.49971,0,0,0,18.5,16Z', style='fill:#575757')
diff --git a/client/templates/viewInstance.jade b/client/templates/viewInstance.jade
index 84e7057b2..4222e2ec3 100644
--- a/client/templates/viewInstance.jade
+++ b/client/templates/viewInstance.jade
@@ -25,13 +25,11 @@
   .grid-block.align-center.justify-center(
     ng-if = "$root.featureFlags.aha2"
   )
-    .modal-dialog.modal-sm(
-    )
-      .modal-body.grid-block.vertical.padding-sm
-        .grid-block.align-center.aha-guide(
-          ng-include = "'ahaGuideView'"
-          ng-init = "state.showStep = 2"
-        )
+    .modal-dialog.modal-sm
+      .grid-block.align-center.aha-guide.padding-md(
+        ng-include = "'ahaGuideView'"
+        ng-init = "state.showStep = 2"
+      )
 
   .grid-block.vertical(
     ng-if = "!$root.featureFlags.aha2"