diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js
index cba376c322..566d60c0f9 100644
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/ui/src/kapacitor/components/KapacitorRule.js
@@ -58,7 +58,7 @@ export const KapacitorRule = React.createClass({
           timeRange={timeRange}
           source={source}
         />
-        <FancyScrollbox className="page-contents">
+        <FancyScrollbox className="page-contents fancy-scroll--kapacitor">
           <div className="container-fluid">
             <div className="row">
               <div className="col-xs-12">
diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js
index d4907b78d1..335fc9e8c0 100644
--- a/ui/src/kapacitor/components/KapacitorRules.js
+++ b/ui/src/kapacitor/components/KapacitorRules.js
@@ -63,7 +63,7 @@ const PageContents = ({children, source}) => (
         </div>
       </div>
     </div>
-    <FancyScrollbox className="page-contents">
+    <FancyScrollbox className="page-contents fancy-scroll--kapacitor">
       <div className="container-fluid">
         <div className="row">
           <div className="col-md-12">
diff --git a/ui/src/style/components/fancy-scrollbars.scss b/ui/src/style/components/fancy-scrollbars.scss
index d65de73a20..565f7364ac 100644
--- a/ui/src/style/components/fancy-scrollbars.scss
+++ b/ui/src/style/components/fancy-scrollbars.scss
@@ -6,6 +6,9 @@
 $scrollbar-track-size: 12px;
 $scrollbar-thumb-size: 6px;
 
+$scrollbar-color-a: $c-pool;
+$scrollbar-color-b: $c-comet;
+
 /* Horizontal Scrollbar Styles */
 .fancy-scroll--track-h {
   padding: ($scrollbar-track-size - $scrollbar-thumb-size) / 2;
@@ -17,7 +20,7 @@ $scrollbar-thumb-size: 6px;
 .fancy-scroll--thumb-h {
   height: $scrollbar-thumb-size !important;
   border-radius: ($scrollbar-thumb-size / 2);
-  @include gradient-h($c-pool,$c-comet);
+  @include gradient-h($scrollbar-color-a,$scrollbar-color-b);
 }
 /* Vertical Scrollbar Styles */
 .fancy-scroll--track-v {
@@ -30,5 +33,14 @@ $scrollbar-thumb-size: 6px;
 .fancy-scroll--thumb-v {
   width: $scrollbar-thumb-size !important;
   border-radius: ($scrollbar-thumb-size / 2);
-  @include gradient-v($c-pool,$c-comet);
+  @include gradient-v($scrollbar-color-a,$scrollbar-color-b);
+}
+
+/* Kapacitor Theme Scrollbars */
+$scrollbar-color-kap-a: $c-rainforest;
+$scrollbar-color-kap-b: $c-pool;
+
+.fancy-scroll--kapacitor {
+  .fancy-scroll--thumb-h { @include gradient-h($scrollbar-color-kap-a,$scrollbar-color-kap-b); }
+  .fancy-scroll--thumb-v { @include gradient-v($scrollbar-color-kap-a,$scrollbar-color-kap-b); }
 }
\ No newline at end of file