diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index 6459b5ca60..483e1ecf9d 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -52,6 +52,11 @@ body.modal-open {
 }
 
 
+
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    border-color: @b7grey;
+}
+
 /* Helper Classes */
 .pad-right-sm { padding-right: 10px; }
 .pad-left-md { padding-left: 30px; }
@@ -134,8 +139,7 @@ a:focus {
 
 /* Make buttons appear to be disabled, but allow mouse events */
 .btn-disabled {
-   opacity: 0.35;
-   filter: alpha(opacity=65);
+   opacity: 1 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
 }
@@ -2101,13 +2105,17 @@ tr td button i {
 }
 
 .form-control + .select2 .select2-selection {
-    border-color: @d7grey !important;
-    background-color: #fcfcfc !important;
+    border-color: @b7grey !important;
+    background-color: @default-bg !important;
     color: @default-data-txt !important;
     transition: border-color 0.3s !important;
     box-shadow: none !important;
 }
 
+.form-control + .select2-container--disabled .select2-selection {
+  background-color: @egrey !important;
+}
+
 .form-control:active, .form-control:focus {
     box-shadow: none;
     border-color: @default-link;
@@ -2142,10 +2150,8 @@ tr td button i {
 /* Overwrite select2 base styles for single/multiple selects so that match up with other form elements.  Also overwrite disabled styles. */
 .select2-container--disabled,.select2-container--disabled  .select2-selection--single,.select2-container--disabled .select2-selection--multiple {
     cursor: not-allowed !important;
-}
-
-.select2-container--disabled {
-    opacity: .35;
+    opacity: 100 !important;
+    background: @egrey !important;
 }
 
 .select2-container--default .select2-selection--single {
@@ -2198,7 +2204,7 @@ a:hover {
 }
 
 .nv-axis text {
-   fill: @db-graph-axis-label !important; //rgb(169, 178, 189);
+   fill: @db-graph-axis-label !important;
    font-family: 'Open Sans' !important;
 }
 
@@ -2280,12 +2286,12 @@ html input[disabled] {
 
 .CodeMirror--disabled .CodeMirror.cm-s-default,
 .CodeMirror--disabled .CodeMirror-line {
-    background-color: #f6f6f6;
+    background-color: @default-no-items-bord;
 }
 
 .CodeMirror--disabled .CodeMirror-gutter.CodeMirror-lint-markers,
 .CodeMirror--disabled .CodeMirror-gutter.CodeMirror-linenumbers {
-    background-color: #ebebeb;
+    background-color: @default-list-header-bg;
     color: @b7grey;
 }
 
@@ -2297,3 +2303,30 @@ html input[disabled] {
     display: none;
 }
 
+.btn-default.disabled,.btn-default[disabled],fieldset[disabled] .btn-default,.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled:active,.btn-default[disabled]:active,fieldset[disabled] .btn-default:active,.btn-default.disabled.active,.btn-default[disabled].active,fieldset[disabled] .btn-default.active {
+    border-color: @field-border;
+}
+
+.btn-default {
+  background: @default-bg;
+  border-color: @b7grey !important;
+  color: @default-interface-txt;
+}
+
+.select2-container--disabled .select2-selection,
+.select2-container--disabled .select2-arrow {
+    background: @egrey !important;
+}
+
+.btn.disabled,.btn[disabled],fieldset[disabled] .bt {
+    opacity: 1;
+}
+
+.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled {
+    opacity: 1;
+    background: @egrey !important;
+}
+
+input[disabled].ui-spinner-input {
+  background-color: @egrey !important;
+}
diff --git a/awx/ui/client/legacy-styles/codemirror.less b/awx/ui/client/legacy-styles/codemirror.less
index d6de9ffacf..8ef6586f6a 100644
--- a/awx/ui/client/legacy-styles/codemirror.less
+++ b/awx/ui/client/legacy-styles/codemirror.less
@@ -5,15 +5,17 @@
  *
  */
 
+ @import "./client/src/shared/branding/colors.default.less";
+
 .CodeMirror {
     height: auto;
     overflow-x: scroll;
     overflow-y: hidden;
-    border: 1px solid #ccc;
+    border: 1px solid @cgrey;
 }
 
 .CodeMirror-activeline-background {
-    background-color: #f7f7f7;
+    background-color: @f7grey;
 }
 
 /* Make sure code editor dialog is always at top of stack */
@@ -24,3 +26,16 @@
 .CodeMirror-lint-tooltip {
     z-index: 2060;
 }
+
+.CodeMirror {
+    border-color: @b7grey !important;
+}
+
+.CodeMirror-gutters {
+    border-color: @d7grey !important;
+    background-color: @default-secondary-bg !important;
+}
+
+.CodeMirror-lineNumber {
+    color: @default-icon !important;
+}
diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less
index 5ce29fbe1c..4b448d5285 100644
--- a/awx/ui/client/legacy-styles/forms.less
+++ b/awx/ui/client/legacy-styles/forms.less
@@ -114,7 +114,7 @@
     color: @btn-txt;
     background-color: @btn-bg;
     font-size: 12px;
-    border: 1px solid @btn-bord;
+    border: 1px solid @b7grey;
     height: 30px;
     border-radius: 5px;
     margin-right: 20px;
@@ -253,7 +253,7 @@
     width:100%!important;
 }
 
-.Form-textInput{
+.Form-textInput {
     height: 30px;
     background-color: @field-secondary-bg;
     border-radius: 5px;
@@ -337,6 +337,10 @@
     height: 28px!important;
 }
 
+.select2-container--disabled .select2-selection__arrow {
+    background: @egrey !important;
+}
+
 .select2-results__option{
     color: @field-label !important;
     height: 30px!important;
@@ -419,17 +423,20 @@
     align-items: center;
     justify-content: center;
     border:1px solid @field-border;
+    border-right: 0px;
 }
 
 .Form-lookupButton:hover {
     cursor: pointer;
     background-color: @field-lookup-btn-hov-bg;
     border: 1px solid @field-border;
-    color: @field-lookup-btn-icon;
+    color: @default-interface-txt;
 }
 
+.Form-lookupButton:active,
 .Form-lookupButton:focus {
     border: 1px solid @field-border;
+    border-right: 0px;
 }
 
 .CodeMirror{
@@ -581,12 +588,12 @@ input[type='radio']:checked:before {
     color: @submit-button-text;
 }
 
-.Form-cancelButton{
+.Form-cancelButton {
     background-color: @default-bg;
     color: @btn-txt;
     text-transform: uppercase;
     border-radius: 5px;
-    border: 1px solid @btn-bord;
+    border: 1px solid @field-border;
     transition: background-color 0.2s;
     padding-left:15px;
     padding-right: 15px;
@@ -675,3 +682,16 @@ input[type='radio']:checked:before {
 .alert-info--noTextTransform {
     text-transform: none;
 }
+
+.CodeMirror {
+    border-color: @b7grey !important;
+}
+
+.CodeMirror-gutters {
+    border-color: @d7grey !important;
+    background: @default-secondary-bg !important;
+}
+
+.CodeMirror-lineNumber {
+    color: @default-icon !important;
+}
diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less
index e27e66c41b..20a5bb7a4a 100644
--- a/awx/ui/client/legacy-styles/lists.less
+++ b/awx/ui/client/legacy-styles/lists.less
@@ -282,7 +282,7 @@ table, tbody {
     width: 100%;
     height: 200px;
     border-radius: 5px;
-    border: 1px solid @list-no-items-bord;
+    border: 1px solid @d7grey;
     background-color: @default-no-items-bord;
     color: @list-no-items-txt;
     text-transform: uppercase;
@@ -469,5 +469,3 @@ table, tbody {
         width: 100%;
     }
 }
-
-
diff --git a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
index 91a0cf68af..109cf41727 100644
--- a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
+++ b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
@@ -90,7 +90,7 @@
     padding-right: 10px;
     padding-left: 10px;
     height: 20px;
-    border: 1px solid @db-graph-per-dd-bord;
+    border: 1px solid @b7grey;
     border-radius: 5px;
     transition: background-color 0.2s;
 }
diff --git a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.partial.html b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.partial.html
index 7a818c704d..1a2281b89a 100644
--- a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.partial.html
+++ b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.partial.html
@@ -12,7 +12,7 @@
                     data-target="#"
                     href="/page.html"
                     class="DashboardGraphs-filterDropdownText">
-                        <translate>Past Month</translate> <i class="fa fa-chevron-down DashboardGraphs-filterIcon"></i>
+                        <translate>Past Month</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
                     </a>
                     <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
                         DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="period-dropdown">
@@ -34,7 +34,7 @@
 
                         <a id="type-dropdown" role="button" data-toggle="dropdown" data-target="#" class="DashboardGraphs-filterDropdownText"
                         href="/page.html">
-                            <translate>All</translate> <i class="fa fa-chevron-down DashboardGraphs-filterIcon"></i>
+                            <translate>All</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
                         </a>
 
                     <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
@@ -63,7 +63,7 @@
                     href="/page.html"
                     class="DashboardGraphs-filterDropdownText">
                         <translate>All</translate>
-                        <i class="fa fa-chevron-down
+                        <i class="fa fa-angle-down
                             DashboardGraphs-filterIcon">
                         </i>
                     </a>
diff --git a/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js b/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js
index 5fcf38d9db..1d8b1c980c 100644
--- a/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js
+++ b/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js
@@ -124,7 +124,7 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, graphDataSe
                         period = this.getAttribute("id");
                         $('#period-dropdown')
                             .replaceWith("<a id=\"period-dropdown\" class=\"DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--period\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+
-                        "<i class=\"fa fa-chevron-down DashboardGraphs-filterIcon\"></i>\n");
+                        "<i class=\"fa fa-angle-down DashboardGraphs-filterIcon\"></i>\n");
                         scope.$parent.isFailed = true;
                         scope.$parent.isSuccessful = true;
                         recreateGraph(period, job_type);
@@ -134,7 +134,7 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, graphDataSe
                     $('.m').on("click", function(){
                         job_type = this.getAttribute("id");
                         $('#type-dropdown').replaceWith("<a id=\"type-dropdown\" class=\"DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--jobType\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+
-                        "<i class=\"fa fa-chevron-down DashboardGraphs-filterIcon\"></i>\n");
+                        "<i class=\"fa fa-angle-down DashboardGraphs-filterIcon\"></i>\n");
                         scope.$parent.isFailed = true;
                         scope.$parent.isSuccessful = true;
                         recreateGraph(period, job_type);
@@ -143,7 +143,7 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, graphDataSe
                     $('.o').on('click', function() {
                         var job_status = this.getAttribute('id');
                         $('#status-dropdown').replaceWith("<a id=\"status-dropdown\" class=\"DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownText--status\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+
-                        "<i class=\"fa fa-chevron-down DashboardGraphs-filterIcon\"></i>\n");
+                        "<i class=\"fa fa-angle-down DashboardGraphs-filterIcon\"></i>\n");
                         scope.$broadcast("jobStatusChange", job_status);
                     });
 
diff --git a/awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.block.less b/awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.block.less
index 15697e8e03..2be2cb4e8d 100644
--- a/awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.block.less
+++ b/awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.block.less
@@ -13,7 +13,6 @@
 .JobResultsStdOut-toolbar {
     flex: initial;
     display: flex;
-    border: 1px solid @default-list-header-bg;
     border-bottom: 0px;
     border-radius: 5px;
     border-bottom-left-radius: 0px;
@@ -37,6 +36,7 @@
     padding-top: 10px;
     border-top-left-radius: 5px;
     z-index: 1;
+    border-right: 1px solid @d7grey;
 }
 
 .JobResultsStdOut-expandAllButton {
@@ -48,6 +48,7 @@
     background-color: @default-bg;
     font-size: 12px;
     cursor: pointer;
+    color: #848992;
 }
 
 .JobResultsStdOut-expandAllButton:hover .JobResultsStdOut-expandAllIcon,
@@ -61,7 +62,8 @@
     display: flex;
     justify-content: flex-end;
     padding-right: 10px;
-    background-color: @default-no-items-bord;
+    background-color: @default-secondary-bg;
+    border-top-right-radius: 5px;
 }
 
 .JobResultsStdOut-followButton {
@@ -74,20 +76,15 @@
     margin-top: 10px;
     font-size: 12px;
     background-color: @default-icon;
-    color: @default-border;
+    color: @default-bg;
 }
 
 .JobResultsStdOut-followIcon {
-    color: @default-border;
+    color: @default-bg;
 }
 
 .JobResultsStdOut-followButton:hover {
-    background-color: @default-icon-hov;
-}
-
-.JobResultsStdOut-followButton:hover .JobResultsStdOut-followIcon,
-.JobResultsStdOut-followIcon:hover {
-    color: @default-interface-txt;
+    background-color: @default-data-txt;
 }
 
 .JobResultsStdOut-followButton.is-engaged {
@@ -111,13 +108,14 @@
 .JobResultsStdOut-stdoutContainer {
     flex: 1;
     position: relative;
-    background-color: #F6F6F6;
+    background-color: @default-secondary-bg;
     overflow-y: scroll;
     overflow-x: hidden;
 }
 
 .JobResultsStdOut-numberColumnPreload {
     background-color: @default-list-header-bg;
+    border-right: 1px solid @d7grey;
     position: absolute;
     height: 100%;
     width: 70px;
@@ -150,7 +148,6 @@
     padding-right: 10px;
     padding-top: 2px;
     padding-bottom: 2px;
-    color: @b7grey;
     width: 75px;
     flex: initial;
     user-select: none;
@@ -158,6 +155,8 @@
     -webkit-user-select: none;
     -ms-user-select: none;
     z-index: 1;
+    border-right: 1px solid @d7grey;
+    color: @default-icon;
 }
 
 .JobResultsStdOut-stdoutColumn {
@@ -170,6 +169,7 @@
     white-space: pre-wrap;
     word-break: break-word;
     width:100%;
+    background-color: @default-secondary-bg;
 }
 
 .JobResultsStdOut-stdoutColumn--tooMany {
@@ -183,16 +183,20 @@
 }
 
 .JobResultsStdOut-aLineOfStdOut:hover,
-.JobResultsStdOut-aLineOfStdOut:hover .JobResultsStdOut-lineNumberColumn {
+.JobResultsStdOut-aLineOfStdOut:hover .JobResultsStdOut-lineNumberColumn,
+.JobResultsStdOut-aLineOfStdOut:hover .JobResultsStdOut-stdoutColumn {
     background-color: @default-bg;
 }
 
+.JobResultsStdOut-aLineOfStdOut:hover .JobResultsStdOut-lineNumberColumn {
+    border-right: 1px solid @default-bg;
+}
+
 .JobResultsStdOut-footer {
     height: 10px;
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
-    background-color: @default-no-items-bord;
-    border: 1px solid @default-list-header-bg;
+    background-color: @default-secondary-bg;
     border-top: 0px;
     border-radius: 5px;
     border-top-left-radius: 0px;
@@ -203,24 +207,27 @@
     background-color: @default-list-header-bg;
     width: 70px;
     height: 100%;
+    border-right: 1px solid @d7grey;
 }
 
 .JobResultsStdOut-followAnchor {
     height: 20px;
     width: 100%;
     border-left: 70px solid @default-list-header-bg;
+    background-color: @default-secondary-bg;
 }
 
 .JobResultsStdOut-toTop {
     margin-right: 20px;
-    color: #D7D7D7;
+    color: @default-icon;
     cursor: pointer;
     text-align: right;
     font-family: monaco;
+    border-left: 1px solid @d7grey;
 }
 
 .JobResultsStdOut-toTop:hover {
-    color: @default-interface-txt;
+    color: @default-data-txt;
 }
 
 .JobResultsStdOut-cappedLine {
diff --git a/awx/ui/client/src/job-results/job-results.block.less b/awx/ui/client/src/job-results/job-results.block.less
index e13afcfee3..63a53c413c 100644
--- a/awx/ui/client/src/job-results/job-results.block.less
+++ b/awx/ui/client/src/job-results/job-results.block.less
@@ -200,7 +200,9 @@ job-results-standard-out {
     flex: 1;
     flex-basis: auto;
     height: ~"calc(100% - 800px)";
-    display: flex
+    display: flex;
+    border: 1px solid @d7grey;
+    border-radius: 5px;
 }
 @media screen and (max-width: @breakpoint-md) {
   job-results-standard-out {
@@ -212,17 +214,3 @@ job-results-standard-out {
     margin-left: 10px;
     color: @default-icon;
 }
-
-.JobResults .CodeMirror-lines {
-    cursor: not-allowed;
-}
-
-.JobResults-downloadTooLarge {
-    display: flex;
-}
-
-.JobResults-downloadTooLarge--icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
diff --git a/awx/ui/client/src/job-results/job-results.partial.html b/awx/ui/client/src/job-results/job-results.partial.html
index fa032c1d68..90700c8a68 100644
--- a/awx/ui/client/src/job-results/job-results.partial.html
+++ b/awx/ui/client/src/job-results/job-results.partial.html
@@ -379,8 +379,9 @@
                             rows="6"
                             ng-model="variables"
                             name="variables"
-                            class="JobResults-extraVars"
-                            id="pre-formatted-variables">
+                            class="form-control Form-textArea Form-textAreaLabel Form-formGroup--fullWidth"
+                            id="pre-formatted-variables"
+                            disabled="disabled">
                         </textarea>
                     </div>
 
diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less
index b0232da0f5..b6216f524e 100644
--- a/awx/ui/client/src/shared/branding/colors.default.less
+++ b/awx/ui/client/src/shared/branding/colors.default.less
@@ -3,8 +3,9 @@
 @default-data-txt:      #161B1F;
 @default-icon:          #848992;
 @default-icon-hov:      #D7D7D7; // also selected button
-@default-border:        #E8E8E8;
-@d7grey:                #D7D7D7; // used for random things, like the close button on top-right corner of panes
+@default-border:        @default-icon-hov;
+@d7grey:                @default-icon-hov; // used for random things, like the close button on top-right corner of panes
+@default-succ-disabled: @default-icon-hov;  // no different than other disableds...remove sometime
 @default-bg:            #FFFFFF; // also selected btn txt
 @default-secondary-bg:  #FCFCFC; // page/input field bg, just adds depth
 @default-tertiary-bg:   #FAFAFA; // hover bg, alt-list
@@ -12,7 +13,6 @@
 @default-err-hov:       #C9302C;
 @default-succ:          #5CB85C;
 @default-succ-hov:      #449D44;
-@default-succ-disabled: #D7D7D7; // no different than other disableds...remove sometime
 @default-link:          #337AB7;
 @default-link-hov:      #286090;
 @default-list-header-bg:#EBEBEB;
@@ -20,6 +20,9 @@
 @default-stdout-txt:    #707070;
 @default-dark:          #000000;
 @b7grey:                #B7B7B7;
+@egrey:                 #EEEEEE;
+@cgrey:                 #CCCCCC;
+@f7grey:                #F7F7F7;
 
 
 @default-warning:     #F0AD4E;
@@ -113,7 +116,7 @@
 @field-input-text:      @default-data-txt;
 @field-bg:              @default-secondary-bg;
 @field-secondary-bg:    @default-secondary-bg;
-@field-border:          @d7grey;
+@field-border:          @b7grey;
 @field-border-sel:      @default-link;
 @field-dropdown-icon:   @default-icon;
 @field-button-bg:       @default-bg;
diff --git a/awx/ui/client/src/shared/smart-search/smart-search.block.less b/awx/ui/client/src/shared/smart-search/smart-search.block.less
index d39fe3bfe4..8feb72ed77 100644
--- a/awx/ui/client/src/shared/smart-search/smart-search.block.less
+++ b/awx/ui/client/src/shared/smart-search/smart-search.block.less
@@ -37,7 +37,7 @@
 .SmartSearch-searchTermContainer {
     flex: initial;
     width: 100%;
-    border: 1px solid @d7grey;
+    border: 1px solid @b7grey;
     border-radius: 4px;
     display: flex;
     background-color: @default-bg;
@@ -71,7 +71,7 @@
     flex: initial;
     margin-left: auto;
     padding: 8px 10px;
-    border-left: 1px solid @d7grey;
+    border-left: 1px solid @b7grey;
     background-color: @default-bg;
     cursor: pointer;
     border-top-right-radius: 5px;
@@ -166,7 +166,7 @@
     background-color: @default-bg;
     border-radius: 5px;
     color: @default-interface-txt;
-    border: 1px solid @d7grey;
+    border: 1px solid @b7grey;
     cursor: pointer;
     width: 70px;
     height: 34px;
@@ -195,7 +195,7 @@
     padding: 15px;
     margin-bottom: 20px;
     border-radius: 4px;
-    border: 1px solid @login-notice-border;
+    border: 1px solid @d7grey;
     background-color: @login-notice-bg;
     color: @login-notice-text;
     position: relative;
diff --git a/awx/ui/client/src/standard-out/standard-out.block.less b/awx/ui/client/src/standard-out/standard-out.block.less
index cf055f47bb..684677dee8 100644
--- a/awx/ui/client/src/standard-out/standard-out.block.less
+++ b/awx/ui/client/src/standard-out/standard-out.block.less
@@ -120,6 +120,9 @@ standard-out-log {
 
 .StandardOut-preContainer {
     height: 100%;
+    border: 1px solid @d7grey;
+    background: @default-secondary-bg;
+    color: @default-interface-txt;
 }
 
 .StandardOut-panelHeaderText {
diff --git a/awx/ui/client/src/templates/survey-maker/survey-maker.block.less b/awx/ui/client/src/templates/survey-maker/survey-maker.block.less
index a3c66ebb3f..325c67518e 100644
--- a/awx/ui/client/src/templates/survey-maker/survey-maker.block.less
+++ b/awx/ui/client/src/templates/survey-maker/survey-maker.block.less
@@ -172,6 +172,7 @@
     .dndPlaceholder {
         display: block;
         background-color: @default-tertiary-bg;
+        border: 1px solid @d7grey;
         padding: 10px 15px;
         min-height: 42px;
         margin-bottom: 20px;
diff --git a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
index b12adf5d26..12310a4f9e 100644
--- a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
+++ b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
@@ -67,7 +67,11 @@
 }
 
 .WorkflowChart-svg {
-    background-color: @default-no-items-bord;
+    background-color: @default-secondary-bg;
+    border: 1px solid @d7grey;
+    border-top: 0px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
 }
 .WorkflowChart-nodeTypeCircle {
     fill: @default-icon;
diff --git a/awx/ui/client/src/templates/workflows/workflow-controls/workflow-controls.block.less b/awx/ui/client/src/templates/workflows/workflow-controls/workflow-controls.block.less
index 08fa7e9e57..87d9fbb8f6 100644
--- a/awx/ui/client/src/templates/workflows/workflow-controls/workflow-controls.block.less
+++ b/awx/ui/client/src/templates/workflows/workflow-controls/workflow-controls.block.less
@@ -60,6 +60,8 @@
 }
 .WorkflowControls-zoomSlider {
     width: 150px;
+    padding-left: 10px;
+    padding-right: 10px;
 }
 .WorkflowControls-zoomPercentage {
     text-align: center;
@@ -67,3 +69,15 @@
     height: 24px;
     line-height: 24px;
 }
+
+.ui-slider-handle.ui-state-default.ui-corner-all {
+    border-radius: 50%;
+    border-color: @default-icon;
+    background: @default-icon;
+}
+
+.ui-slider-handle.ui-state-default.ui-corner-all:hover,
+.ui-slider-handle.ui-state-default.ui-corner-all:active {
+    border-color: @default-link-hov;
+    background: @default-link-hov;
+}
diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
index b22997622f..0506c07a47 100644
--- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
+++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
@@ -36,7 +36,8 @@
 }
 .WorkflowMaker-contentHolder {
     display: flex;
-    border: 1px solid @default-list-header-bg;
+    border: 1px solid @d7grey;
+    border-radius: 5px;
     height: ~"calc(100% - 85px)";
 }
 .WorkflowMaker-contentLeft {
@@ -46,7 +47,7 @@
 }
 .WorkflowMaker-contentRight {
     flex: 0 0 400px;
-    border-left: 1px solid @default-list-header-bg;
+    border-left: 1px solid @d7grey;
     padding: 20px;
     height: 100%;
     overflow-y: scroll;
@@ -81,7 +82,7 @@
     color: @btn-txt;
     text-transform: uppercase;
     border-radius: 5px;
-    border: 1px solid @btn-bord;
+    border: 1px solid @b7grey;
     transition: background-color 0.2s;
     padding-left:15px;
     padding-right: 15px;
@@ -149,6 +150,7 @@
     height: 40px;
     line-height: 40px;
     color: @default-interface-txt;
+    border-bottom: 1px solid @d7grey;
 }
 .WorkflowLegend-maker--left {
     flex: 1 0 auto;
@@ -192,8 +194,10 @@
     height: 40px;
     line-height: 40px;
     padding-left: 20px;
-    border: 1px solid @default-no-items-bord;
     margin-top:10px;
+    border: 1px solid @d7grey;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
 }
 .WorkflowLegend-legendItem {
     display: flex;
@@ -217,7 +221,7 @@
     color: @default-icon;
     vertical-align: middle;
     font-size: 1.2em;
-    margin-left: 10px;
+    margin-left: 15px;
 }
 .Key-menuIcon:hover,
 .WorkflowMaker-manualControlsIcon:hover {
@@ -235,17 +239,22 @@
     width: 293px;
     background-color: @default-bg;
     display: flex;
-    border: 1px solid @default-list-header-bg;
+    border: 1px solid @d7grey;
+    border-top: 0px;
+    border-bottom-left-radius: 5px;
+    margin-left: -1px;
+    border-right: 0;
 }
 .WorkflowLegend-manualControls {
     position: absolute;
-    left: -245px;
+    left: -239px;
     top: 38px;
     height: 60px;
     width: 290px;
     background-color: @default-bg;
     display: flex;
-    border: 1px solid @default-list-header-bg;
+    border: 1px solid @d7grey;
+    border-bottom-left-radius: 5px;
 }
 .WorkflowMaker-formTab {
     margin-right: 10px;
diff --git a/awx/ui/client/src/workflow-results/workflow-results.block.less b/awx/ui/client/src/workflow-results/workflow-results.block.less
index dacc21fad7..5d8e2b9e93 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.block.less
+++ b/awx/ui/client/src/workflow-results/workflow-results.block.less
@@ -145,7 +145,3 @@
     margin-left: 10px;
     color: @default-icon;
 }
-
-.WorkflowResults .CodeMirror-lines {
-    cursor: not-allowed;
-}
diff --git a/awx/ui/client/src/workflow-results/workflow-results.partial.html b/awx/ui/client/src/workflow-results/workflow-results.partial.html
index 414920d340..64c0700f54 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.partial.html
+++ b/awx/ui/client/src/workflow-results/workflow-results.partial.html
@@ -160,8 +160,9 @@
                             rows="6"
                             ng-model="variables"
                             name="variables"
-                            class="WorkflowResults-extraVars"
-                            id="pre-formatted-variables">
+                            class="form-control Form-textArea Form-textAreaLabel Form-formGroup--fullWidth"
+                            id="pre-formatted-variables"
+                            disabled="disabled">
                         </textarea>
                     </div>