diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js
index 9305ca7902..d6d72b7c92 100644
--- a/ui/src/alerts/components/AlertsTable.js
+++ b/ui/src/alerts/components/AlertsTable.js
@@ -85,7 +85,7 @@ const AlertsTable = React.createClass({
                   return (
                     <tr key={`${name}-${time}-${host}-${value}`}>
                       <td className="monotype">{name}</td>
-                      <td className="monotype">{level}</td>
+                      <td className={`monotype alert-level-${level.toLowerCase()}`}>{level}</td>
                       <td className="monotype">{(new Date(Number(time)).toISOString())}</td>
                       <td className="monotype">{host}</td>
                       <td className="monotype">{value}</td>
diff --git a/ui/src/kapacitor/components/DataSection.js b/ui/src/kapacitor/components/DataSection.js
index 0962c8efd3..8f7f7b6f31 100644
--- a/ui/src/kapacitor/components/DataSection.js
+++ b/ui/src/kapacitor/components/DataSection.js
@@ -104,8 +104,8 @@ export const DataSection = React.createClass({
       <div className="kapacitor-rule-section">
         <h3 className="rule-section-heading">Select a Time Series</h3>
         <div className="rule-section-body">
-          <div className="query-editor kapacitor-metric-selector">
-            <div className="query-editor__code">
+          <div className="qeditor kapacitor-metric-selector">
+            <div className="qeditor--query-preview">
               <pre className={classNames("", {"rq-mode": query.rawText})}><code>{statement}</code></pre>
             </div>
             {this.renderEditor()}
@@ -131,11 +131,11 @@ export const DataSection = React.createClass({
 
     return (
       <div className="kapacitor-tab-list">
-        <div className="query-editor__tabs">
-          <div onClick={_.wrap(DB_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === DB_TAB})}>Databases</div>
-          <div onClick={_.wrap(MEASUREMENTS_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === MEASUREMENTS_TAB})}>Measurements</div>
-          <div onClick={_.wrap(FIELDS_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === FIELDS_TAB})}>Fields</div>
-          <div onClick={_.wrap(TAGS_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === TAGS_TAB})}>Tags</div>
+        <div className="qeditor--tabs">
+          <div onClick={_.wrap(DB_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === DB_TAB})}>Databases</div>
+          <div onClick={_.wrap(MEASUREMENTS_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === MEASUREMENTS_TAB})}>Measurements</div>
+          <div onClick={_.wrap(FIELDS_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === FIELDS_TAB})}>Fields</div>
+          <div onClick={_.wrap(TAGS_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === TAGS_TAB})}>Tags</div>
         </div>
         {this.renderList()}
       </div>
@@ -180,7 +180,7 @@ export const DataSection = React.createClass({
           />
         );
       default:
-        return <ul className="query-editor__list"></ul>;
+        return <ul className="qeditor--list"></ul>;
     }
   },
 });
diff --git a/ui/src/kapacitor/containers/KapacitorPage.js b/ui/src/kapacitor/containers/KapacitorPage.js
index 569e3b5dd5..7ad3c66c51 100644
--- a/ui/src/kapacitor/containers/KapacitorPage.js
+++ b/ui/src/kapacitor/containers/KapacitorPage.js
@@ -1,6 +1,9 @@
 import React, {PropTypes} from 'react';
 import {getKapacitor, getKapacitorConfigSection, createKapacitor, updateKapacitor, pingKapacitor} from 'shared/apis';
 import AlertOutputs from '../components/AlertOutputs';
+// default values for name & url
+const defaultKapacitorName = "My Kapacitor";
+const defaultKapacitorUrl = "http://localhost:9092";
 
 export const KapacitorPage = React.createClass({
   propTypes: {
@@ -109,6 +112,14 @@ export const KapacitorPage = React.createClass({
     this.setState({newUsername: this.kapacitorUser.value});
   },
 
+  handleResetToDefaults(e) {
+    e.preventDefault();
+    this.setState({
+      newURL: defaultKapacitorUrl,
+      newName: defaultKapacitorName,
+    });
+  },
+
   render() {
     const {kapacitor, newName, newURL, newUsername} = this.state;
     // if the fields in state are defined, use them. otherwise use the defaults
@@ -116,6 +127,7 @@ export const KapacitorPage = React.createClass({
     const url = newURL === undefined ? kapacitor && kapacitor.url || '' : newURL;
     const username = newUsername === undefined ? kapacitor && kapacitor.username || '' : newUsername;
 
+
     return (
       <div className="page">
         <div className="page-header">
@@ -145,11 +157,11 @@ export const KapacitorPage = React.createClass({
                       <div>
                         <div className="form-group col-xs-12 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-2">
                           <label htmlFor="connect-string">Connection String</label>
-                          <input ref={(r) => this.kapacitorURL = r} className="form-control" id="connect-string" placeholder="http://localhost:9092" value={url} onChange={this.updateURL}></input>
+                          <input ref={(r) => this.kapacitorURL = r} className="form-control" id="connect-string" placeholder={defaultKapacitorUrl} value={url} onChange={this.updateURL}></input>
                         </div>
                         <div className="form-group col-xs-12 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0">
                           <label htmlFor="name">Name</label>
-                          <input ref={(r) => this.kapacitorName = r} className="form-control" id="name" placeholder="My Kapacitor" value={name} onChange={this.updateName}></input>
+                          <input ref={(r) => this.kapacitorName = r} className="form-control" id="name" placeholder={defaultKapacitorName} value={name} onChange={this.updateName}></input>
                         </div>
                         <div className="form-group col-xs-12 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2">
                           <label htmlFor="username">Username</label>
@@ -161,8 +173,9 @@ export const KapacitorPage = React.createClass({
                         </div>
                       </div>
 
-                      <div className="form-group form-group-submit col-xs-4 col-xs-offset-4">
-                        <button className="btn btn-block btn-success" type="submit">Connect Kapacitor</button>
+                      <div className="form-group form-group-submit col-xs-12 text-center">
+                        <button className="btn btn-info" onClick={this.handleResetToDefaults}>Reset to Default</button>
+                        <button className="btn btn-success" type="submit">Connect Kapacitor</button>
                       </div>
                     </form>
                   </div>
@@ -189,7 +202,9 @@ export const KapacitorPage = React.createClass({
     return (
       <div className="panel panel-minimal">
         <div className="panel-body">
-          <p>Set your Kapacitor connection info to configure alerting endpoints.</p>
+          <h4 className="text-center">Configure Alert Endpoints</h4>
+          <br/>
+          <p className="text-center">Set your Kapacitor connection info to configure alerting endpoints.</p>
         </div>
       </div>
     );
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js
index 937f88566e..293b5157c3 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.js
@@ -129,7 +129,7 @@ export const KapacitorRulesPage = React.createClass({
           <td className="monotype">{rule.trigger}</td>
           <td className="monotype">{rule.message}</td>
           <td className="monotype">{rule.alerts.join(', ')}</td>
-          <td><button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteRule(rule)}>Delete</button></td>
+          <td className="text-right"><button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteRule(rule)}>Delete</button></td>
         </tr>
       );
     });
diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js
index 15bd998a5c..dd347a2d63 100644
--- a/ui/src/sources/containers/ManageSources.js
+++ b/ui/src/sources/containers/ManageSources.js
@@ -95,8 +95,8 @@ export const ManageSources = React.createClass({
                               return (
                                 <tr key={source.id}>
                                   <td>{source.name}{source.default ? <span className="default-source-label">Default</span> : null}</td>
-                                  <td>{source.url}</td>
-                                  <td>{kapacitorName}</td>
+                                  <td className="monotype">{source.url}</td>
+                                  <td>{kapacitorName ? kapacitorName : "--"}</td>
                                   <td className="text-right">
                                     <Link className="btn btn-info btn-xs" to={`${pathname}/${source.id}/edit`}><span className="icon pencil"></span></Link>
                                     <Link className="btn btn-success btn-xs" to={`/sources/${source.id}/hosts`}>Connect</Link>
diff --git a/ui/src/style/chronograf/components/_Header.scss b/ui/src/style/chronograf/components/_Header.scss
index a16325bcd5..f150832f39 100644
--- a/ui/src/style/chronograf/components/_Header.scss
+++ b/ui/src/style/chronograf/components/_Header.scss
@@ -1,3 +1,5 @@
+$sessions-dropdown-width: 227px;
+
 .sessions-dropdown {
   margin: 0 0 0 4px;
 
@@ -5,6 +7,19 @@
     width: 227px;
     border-radius: 3px 0 0 3px;
   }
+  .dropdown-selected {
+    display: inline-block;
+    width: ($sessions-dropdown-width - 28px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  li.dropdown-item > a {
+    width: ($sessions-dropdown-width - 48px); // 48 is width of 2 actions
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 .sessions-dropdown__btn {
   margin: 0 16px 0 0;
@@ -21,6 +36,9 @@
   font-size: 12px;
   border-radius: 3px;
   margin-right: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   > .icon {
     display: inline-block;
diff --git a/ui/src/style/chronograf/components/_Panel.scss b/ui/src/style/chronograf/components/_Panel.scss
index a7fcdb8329..240f97dea8 100644
--- a/ui/src/style/chronograf/components/_Panel.scss
+++ b/ui/src/style/chronograf/components/_Panel.scss
@@ -13,13 +13,12 @@
   // For when an panel item is open
   &.active {
     background-color: $g4-onyx;
-    .panel__header {
-      &-name {
-        color: $g20-white;
+    
+    .panel--name {
+      color: $g20-white;
 
-        .icon {
-          transform: translateY(-50%) rotate(90deg);
-        }
+      .icon {
+        transform: translateY(-50%) rotate(90deg);
       }
     }
   }
diff --git a/ui/src/style/chronograf/components/_PanelBuilder.scss b/ui/src/style/chronograf/components/_PanelBuilder.scss
index 6266a48c82..d71cf7bc7e 100644
--- a/ui/src/style/chronograf/components/_PanelBuilder.scss
+++ b/ui/src/style/chronograf/components/_PanelBuilder.scss
@@ -4,7 +4,10 @@
   background: $g1-raven;
   padding: $explorer-page-padding;
   @include gradient-v($g2-kevlar,$g0-obsidian);
-  @include custom-scrollbar($g2-kevlar,$c-pool);
+
+  &::-webkit-scrollbar { 
+    display: none; 
+  }
 
   > .btn {
     margin-bottom: 6px;
diff --git a/ui/src/style/chronograf/main.scss b/ui/src/style/chronograf/main.scss
index f20658b90a..82cff35b8b 100644
--- a/ui/src/style/chronograf/main.scss
+++ b/ui/src/style/chronograf/main.scss
@@ -6,7 +6,6 @@
 @import 'components/PanelBuilder';
 @import 'components/Panel';
 @import 'components/MultiSelectDropdown';
-@import 'components/GroupByTimeDropdown';
 @import 'components/TagList';
 @import 'components/Resizer';
 @import 'components/Header';
diff --git a/ui/src/style/enterprise_style/alerts.scss b/ui/src/style/enterprise_style/alerts.scss
new file mode 100644
index 0000000000..5d393d635d
--- /dev/null
+++ b/ui/src/style/enterprise_style/alerts.scss
@@ -0,0 +1,9 @@
+.alert-level-critical {
+  color: $c-dreamsicle !important;
+}
+.alert-level-warning {
+  color: #fdcf30 !important;
+}
+.alert-level-ok {
+  color: $c-rainforest !important;
+}
\ No newline at end of file
diff --git a/ui/src/style/enterprise_style/application.scss b/ui/src/style/enterprise_style/application.scss
index 2784be6eb6..7b4020b32d 100644
--- a/ui/src/style/enterprise_style/application.scss
+++ b/ui/src/style/enterprise_style/application.scss
@@ -11,12 +11,14 @@
 @import 'retention-policies';
 @import 'signup';
 @import 'enterprise-custom';
+@import 'groupByTimeDropdown';
 @import 'flash-messages';
 @import 'dygraph-override';
 @import 'auth-page';
 @import 'hosts';
 @import 'kapacitor';
 @import 'influx-tooltips';
+@import 'alerts';
 
 // Because of some issues with sharing styles across multiple webpack bundles,
 // we have to import other scss files here instead of in their corresponding
diff --git a/ui/src/style/chronograf/components/_GroupByTimeDropdown.scss b/ui/src/style/enterprise_style/groupByTimeDropdown.scss
similarity index 100%
rename from ui/src/style/chronograf/components/_GroupByTimeDropdown.scss
rename to ui/src/style/enterprise_style/groupByTimeDropdown.scss
diff --git a/ui/src/style/enterprise_style/kapacitor.scss b/ui/src/style/enterprise_style/kapacitor.scss
index 04a09d6ca7..9009cc45ca 100644
--- a/ui/src/style/enterprise_style/kapacitor.scss
+++ b/ui/src/style/enterprise_style/kapacitor.scss
@@ -158,33 +158,30 @@ $kapacitor-font-sm: 13px;
 
 
 
-div.query-editor.kapacitor-metric-selector {
+div.qeditor.kapacitor-metric-selector {
   border-radius: 0;
   background-color: transparent;
   padding: 0;
 
   // Query sample
-  .query-editor__code pre {
+  .qeditor--query-preview pre {
     font-size: $kapacitor-font-sm;
-    white-space: pre-wrap;
     background-color: $kapacitor-graphic-color;
     color: $kapacitor-accent;
     border-radius: $kap-radius-lg $kap-radius-lg 0 0;
     border: 0;
+    margin: 0;
     padding: $kap-padding-md $kap-padding-lg;
-
-    code {
-      line-height: 1.5em;
-    }
+    @include custom-scrollbar($kapacitor-graphic-color, $kapacitor-accent);
   }
 
   // Tabs
-  .query-editor__tabs {
+  .qeditor--tabs {
     background-color: $kapacitor-graphic-color;
     padding: $kap-padding-sm $kap-padding-lg 0 $kap-padding-lg;
     border-top: 2px solid $kapacitor-divider-color;
   }
-  .query-editor__tab {
+  .qeditor--tab {
     font-size: $kapacitor-font-sm;
     background-color: $g3-castle;
     font-weight: 700;
@@ -223,20 +220,21 @@ div.query-editor.kapacitor-metric-selector {
     background-color: $kapacitor-graphic-color;
     border-radius: 0 0 $kap-radius-lg $kap-radius-lg;
   }
-  .query-editor__list {
+  .qeditor--list {
+    overflow: auto;
     padding-top: $kap-padding-sm;
     background-color: transparent;
     min-height: $metric-selector-height;
-    max-height: $metric-selector-height;
-    height: $metric-selector-height;
+    max-height: ($metric-selector-height * 2);
+    // height: $metric-selector-height;
     border-radius: 0 0 $kap-radius-lg $kap-radius-lg;
     @include custom-scrollbar($kapacitor-graphic-color,$kapacitor-accent);
   }
-  .query-editor__list-header {
+  .qeditor--list-header {
     background-color: transparent;
     padding: $kap-padding-sm $kap-padding-lg 0 $kap-padding-lg;
   }
-  .query-editor__filter,
+  .qeditor--filter,
   .tag-value-list__filter {
     border-radius: 4px;
     padding-left: ($kap-input-height + ($kap-padding-sm / 2));
@@ -265,7 +263,7 @@ div.query-editor.kapacitor-metric-selector {
       top: 50%;
     }
   }
-  .query-editor__list-item {
+  .qeditor--list-item {
     font-size: $kapacitor-font-sm;
     font-weight: 600;
     padding-left: $kap-padding-lg;
@@ -282,12 +280,12 @@ div.query-editor.kapacitor-metric-selector {
       color: $kapacitor-accent;
     }
   }
-  .query-editor__hidden-dropdown {
+  .qeditor--hidden-dropdown {
     .btn.dropdown-toggle {
       width: 260px;
     }
   }
-  .query-editor__list-checkbox__checkbox {
+  .qeditor--list-checkbox__checkbox {
     &:before {
       background-color: $kapacitor-accent;
     }
@@ -302,7 +300,7 @@ div.query-editor.kapacitor-metric-selector {
   .tag-value-list__checkbox:after {
     background-color: $kapacitor-accent;
   }
-  .tag-value-list__item.query-editor__list-item.active {
+  .tag-value-list__item.qeditor--list-item.active {
     background-color: transparent;
   }
   .btn.tag-list__group-by.active {
@@ -339,7 +337,7 @@ div.query-editor.kapacitor-metric-selector {
   }
 
   // Empty State
-  .query-editor__empty {
+  .qeditor--empty {
     background-color: $kapacitor-graphic-color;
     height: $metric-selector-height;
     min-height: $metric-selector-height;
@@ -546,7 +544,7 @@ div.query-editor.kapacitor-metric-selector {
   }
   .dropdown-toggle,
   .dropdown.group-by-time-dropdown .btn.dropdown-toggle,
-  .query-editor__list-checkbox .dropdown .btn.dropdown-toggle {
+  .qeditor--list-checkbox .dropdown .btn.dropdown-toggle {
     width: 100%;
     text-align: left;
     position: relative;