diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index f5d4fcc984..db4caafea8 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -40,17 +40,17 @@ export const RuleMessage = React.createClass({
           />
           <div className="alert-message--formatting">
             <p>Templates:</p>
-            <code data-tip="The ID of the alert">&#123;&#123; .ID &#125;&#125;</code>
-            <code data-tip="Measurement name">&#123;&#123; .Name &#125;&#125;</code>
-            <code data-tip="The name of the task">&#123;&#123; .TaskName &#125;&#125;</code>
-            <code data-tip="Concatenation of all group-by tags of the form <code>&#91;key=value,&#93;+</code>. If no groupBy is performed equal to literal &quot;nil&quot;">&#123;&#123; .Group &#125;&#125;</code>
-            <code data-tip="Map of tags. Use <code>&#123;&#123; index .Tags &quot;key&quot; &#125;&#125;</code> to get a specific tag value">&#123;&#123; .Tags &#125;&#125;</code>
-            <code data-tip="Alert Level, one of: <code>INFO</code><code>WARNING</code><code>CRITICAL</code>">&#123;&#123; .Level &#125;&#125;</code>
-            <code data-tip="Map of fields. Use <code>&#123;&#123; index .Fields &quot;key&quot; &#125;&#125;</code> to get a specific field value">&#123;&#123; .Fields &#125;&#125;</code>
-            <code data-tip="The time of the point that triggered the event">&#123;&#123; .Time &#125;&#125;</code>
+            <code data-tip="The ID of the alert">&#123;&#123;.ID&#125;&#125;</code>
+            <code data-tip="Measurement name">&#123;&#123;.Name&#125;&#125;</code>
+            <code data-tip="The name of the task">&#123;&#123;.TaskName&#125;&#125;</code>
+            <code data-tip="Concatenation of all group-by tags of the form <code>&#91;key=value,&#93;+</code>. If no groupBy is performed equal to literal &quot;nil&quot;">&#123;&#123;.Group&#125;&#125;</code>
+            <code data-tip="Map of tags. Use <code>&#123;&#123; index .Tags &quot;key&quot; &#125;&#125;</code> to get a specific tag value">&#123;&#123;.Tags&#125;&#125;</code>
+            <code data-tip="Alert Level, one of: <code>INFO</code><code>WARNING</code><code>CRITICAL</code>">&#123;&#123;.Level&#125;&#125;</code>
+            <code data-tip="Map of fields. Use <code>&#123;&#123; index .Fields &quot;key&quot; &#125;&#125;</code> to get a specific field value">&#123;&#123;.Fields&#125;&#125;</code>
+            <code data-tip="The time of the point that triggered the event">&#123;&#123;.Time&#125;&#125;</code>
             <ReactTooltip effect="solid" html={true} offset={{top: -4}} class="influx-tooltip kapacitor-tooltip" />
           </div>
-          <div className="rule-section--item bottom alert-message-endpoint">
+          <div className="rule-section--item bottom alert-message--endpoint">
             <p>Send this Alert to:</p>
             <Dropdown className="size-256" selected={rule.alerts[0] || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
           </div>
diff --git a/ui/src/style/enterprise_style/_enterprise-custom.scss b/ui/src/style/enterprise_style/_enterprise-custom.scss
index e7f60f64b7..ceee29eab1 100644
--- a/ui/src/style/enterprise_style/_enterprise-custom.scss
+++ b/ui/src/style/enterprise_style/_enterprise-custom.scss
@@ -66,11 +66,7 @@ body > #react-root {
   position: relative;
   flex-grow: 1;
   overflow: hidden;
-  background: $g18-cloud;
-  background: -moz-linear-gradient(top,  $g18-cloud 0%, $g19-ghost 100%);
-  background: -webkit-linear-gradient(top,  $g18-cloud 0%,$g19-ghost 100%);
-  background: linear-gradient(to bottom,  $g18-cloud 0%,$g19-ghost 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g18-cloud', endColorstr='$g19-ghost',GradientType=0 );
+  @include gradient-v($g18-cloud, $g19-ghost);
 }
 .signup-flow-bg {
   background-image: url(/assets/images/signup-bg.png);
@@ -85,7 +81,9 @@ body > #react-root {
   left: 0;
   width: 100%;
   height: 100%;
-  overflow: scroll;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 /*
@@ -96,7 +94,7 @@ body > #react-root {
   background-color: $g20-white;
   height: $enterprise-page-header-height;
   margin-bottom: 15px;
-  padding: 0 $page-wrapper-padding;
+  padding: 0 ($page-wrapper-padding + $scrollbar-width) 0 $page-wrapper-padding;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/ui/src/style/enterprise_style/hosts.scss b/ui/src/style/enterprise_style/hosts.scss
index e35679dc4f..dd865f2242 100644
--- a/ui/src/style/enterprise_style/hosts.scss
+++ b/ui/src/style/enterprise_style/hosts.scss
@@ -27,6 +27,8 @@
     width: 100%;
     height: calc(100% - #{$enterprise-page-header-height});
     overflow: auto;
+    overflow-x: hidden;
+    overflow-y: scroll;
     @include custom-scrollbar($g2-kevlar,$c-pool);
 
     .container-fluid {
diff --git a/ui/src/style/enterprise_style/kapacitor.scss b/ui/src/style/enterprise_style/kapacitor.scss
index 5d386a738e..fabf3f2beb 100644
--- a/ui/src/style/enterprise_style/kapacitor.scss
+++ b/ui/src/style/enterprise_style/kapacitor.scss
@@ -422,10 +422,11 @@ div.query-editor.kapacitor-metric-selector {
   } 
 }
 .alert-message--formatting {
-  padding: $kap-padding-sm $kap-padding-lg;
+  padding: ($kap-padding-sm - 2px) $kap-padding-lg;
   background-color: $kapacitor-graphic-color;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   border-top: 2px solid $kapacitor-divider-color;
 
   > p {
@@ -442,7 +443,7 @@ div.query-editor.kapacitor-metric-selector {
     border: 0;
     border-radius: 3px;
     display: inline-block;
-    margin-left: 2px;
+    margin: 2px;
     color: $c-pool;
     font-size: ($kapacitor-font-sm - 2px);
     font-weight: 600;
@@ -480,14 +481,15 @@ div.query-editor.kapacitor-metric-selector {
 .kapacitor-values-tabs,
 .value-selector {
   background-color: $kapacitor-graphic-color;
-  padding: ($kap-padding-sm / 2) $kap-padding-lg;
+  padding: ($kap-padding-sm - 2px) $kap-padding-lg;
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  flex-wrap: wrap;
 
   > * {
     display: inline-block;
-    margin: ($kap-padding-sm / 2);
+    margin: 2px;
 
     &:first-child {
       margin-left: 0;
@@ -498,6 +500,8 @@ div.query-editor.kapacitor-metric-selector {
     white-space: nowrap;
     font-weight: 600;
     color: $g15-platinum;
+    margin-left: ($kap-padding-sm / 2);
+    margin-right: ($kap-padding-sm / 2);
   }
   > span {
     color: $kapacitor-accent;
@@ -507,7 +511,7 @@ div.query-editor.kapacitor-metric-selector {
     vertical-align: middle;
     border-radius: 4px;
     background-color: $g5-pepper;
-    margin: ($kap-padding-sm / 2);
+    margin: 2px;
     padding: 0 $kap-padding-sm;
     font-weight: 700;
     font-size: $kapacitor-font-sm;
diff --git a/ui/src/style/modules/_sizes.scss b/ui/src/style/modules/_sizes.scss
index 7bad09d6ed..3ffdf3f832 100644
--- a/ui/src/style/modules/_sizes.scss
+++ b/ui/src/style/modules/_sizes.scss
@@ -28,9 +28,10 @@ $explorer-page-padding: 18px;
 	background: linear-gradient(to right,  $startColor 0%,$endColor 100%);
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
 }
+$scrollbar-width: 16px;
 @mixin custom-scrollbar($trackColor, $handleColor) {
 	&::-webkit-scrollbar {
-		width: 14px;
+		width: $scrollbar-width;
 		border-bottom-right-radius: $radius;
 
 		&-button {
@@ -42,13 +43,13 @@ $explorer-page-padding: 18px;
 		}
 		&-track-piece {
 			background-color: $trackColor;
-			border: 4px solid $trackColor;
-			border-radius: 8px;
+			border: ($scrollbar-width / 4) solid $trackColor;
+			border-radius: ($scrollbar-width / 2);
 		}
 		&-thumb {
 			background-color: $handleColor;
-			border: 4px solid $trackColor;
-			border-radius: 8px;
+			border: ($scrollbar-width / 4) solid $trackColor;
+			border-radius: ($scrollbar-width / 2);
 		}
 		&-corner {
 			background-color: $trackColor;