diff --git a/src/plugins/kibana/public/dashboard/index.html b/src/plugins/kibana/public/dashboard/index.html
index 76b80411c463..8b4021ab8053 100644
--- a/src/plugins/kibana/public/dashboard/index.html
+++ b/src/plugins/kibana/public/dashboard/index.html
@@ -52,6 +52,7 @@
         <span>Options</span>
       </button>
     </div>
+    <kbn-global-timepicker></kbn-global-timepicker>
     <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
   </navbar>
   <config config-template="configTemplate" config-object="opts"></config>
diff --git a/src/plugins/kibana/public/discover/index.html b/src/plugins/kibana/public/discover/index.html
index 04dd55c4d2a3..7989535a6ed2 100644
--- a/src/plugins/kibana/public/discover/index.html
+++ b/src/plugins/kibana/public/discover/index.html
@@ -40,6 +40,7 @@
         <span>Share</span>
       </button>
     </div>
+    <kbn-global-timepicker></kbn-global-timepicker>
     <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
   </navbar>
   <config
diff --git a/src/plugins/kibana/public/visualize/editor/editor.html b/src/plugins/kibana/public/visualize/editor/editor.html
index 07db2ae9f5ca..755a702d1804 100644
--- a/src/plugins/kibana/public/visualize/editor/editor.html
+++ b/src/plugins/kibana/public/visualize/editor/editor.html
@@ -47,6 +47,7 @@
         <span>Refresh</span>
       </button>
     </div>
+    <kbn-global-timepicker></kbn-global-timepicker>
     <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
   </navbar>
   <config
diff --git a/src/ui/public/autoload/modules.js b/src/ui/public/autoload/modules.js
index 5919a1460547..32aef92c482e 100644
--- a/src/ui/public/autoload/modules.js
+++ b/src/ui/public/autoload/modules.js
@@ -1,6 +1,5 @@
 import 'angular';
 import 'ui/chrome';
-import 'ui/chrome/context';
 import 'ui/bind';
 import 'ui/bound_to_config_obj';
 import 'ui/config';
diff --git a/src/ui/public/chrome/__tests__/kbn_loading_indicator.js b/src/ui/public/chrome/__tests__/kbn_loading_indicator.js
new file mode 100644
index 000000000000..aad685d19d15
--- /dev/null
+++ b/src/ui/public/chrome/__tests__/kbn_loading_indicator.js
@@ -0,0 +1,36 @@
+import ngMock from 'ng_mock';
+import expect from 'expect.js';
+import uiModules from 'ui/modules';
+import $ from 'jquery';
+
+import '../directives/kbn_loading_indicator';
+
+
+describe('kbnLoadingIndicator', function () {
+  let compile;
+
+  beforeEach(() => {
+    ngMock.module('kibana');
+    ngMock.inject(function ($compile, $rootScope) {
+      compile = function (hasActiveConnections) {
+        $rootScope.chrome = {
+          httpActive: (hasActiveConnections ? [1] : [])
+        };
+        const $el = $('<kbn-loading-indicator></kbn-loading-indicator>');
+        $rootScope.$apply();
+        $compile($el)($rootScope);
+        return $el;
+      };
+    });
+
+  });
+
+  it('injects a loading .spinner into the element', function () {
+    const $el = compile();
+    expect($el.find('.spinner')).to.have.length(1);
+  });
+  it('applies removes ng-hide class when there are connections', function () {
+    const $el  = compile(true);
+    expect($el.find('.spinner.ng-hide')).to.have.length(0);
+  });
+});
diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html
index 465b9525c5fd..a5fb0e84a885 100644
--- a/src/ui/public/chrome/chrome.html
+++ b/src/ui/public/chrome/chrome.html
@@ -1,6 +1,6 @@
 <div class="content" chrome-context >
   <!-- TODO: These config dropdowns shouldn't be hard coded -->
-  <nav class="app-links-wrapper">
+  <nav class="app-links-wrapper" ng-show="chrome.getVisible()">
     <li
       ng-if="!chrome.getBrand('logo')  && !chrome.getBrand('smallLogo')"
       aria-label="{{ chrome.getAppTitle() }} Logo"
@@ -21,28 +21,12 @@
 
     <app-switcher>
     </app-switcher>
-    <div class="bottom-apps hide app-links">
-      <div class="app-link">
-        <a href="http://elastic.co">
-          <div class="app-icon">
-            <i class="fa fa-gear"></i>
-          </div>
-          <div class="app-title">settings</div>
-        </a>
-      </div>
-      <div class="app-link">
-        <a href="http://elastic.co">
-          <div class="app-icon">
-            <i class="fa fa-user"></i>
-          </div>
-          <div class="app-title">Jon Doe</div>
-          <div class="app-title">Logout</div>
-        </a>
-      </div>
+    <div class="bottom-apps">
+      <div class="chrome-actions app-links" kbn-chrome-append-nav-controls></div>
     </div>
   </nav>
 
-  <div class="app-wrapper">
+  <div class="app-wrapper" ng-class="{ 'hidden-chrome': !chrome.getVisible() }">
     <div class="app-wrapper-panel">
       <kbn-notifications list="notifList"></kbn-notifications>
       <nav
@@ -80,6 +64,7 @@
         </div>
         <!-- /Full navbar -->
       </nav>
+      <kbn-loading-indicator></kbn-loading-indicator>
       <div class="application" ng-class="'tab-' + chrome.getFirstPathSegment() + ' ' + chrome.getApplicationClasses()" ng-view></div>
     </div>
   </div>
diff --git a/src/ui/public/chrome/context.js b/src/ui/public/chrome/context.js
deleted file mode 100644
index 4328d85243ce..000000000000
--- a/src/ui/public/chrome/context.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import _ from 'lodash';
-import ConfigTemplate from 'ui/config_template';
-import uiModules from 'ui/modules';
-
-uiModules
-.get('kibana')
-// TODO: all of this really belongs in the timepicker
-.directive('chromeContext', function (timefilter, globalState) {
-
-  var listenForUpdates = _.once(function ($scope) {
-    $scope.$listen(timefilter, 'update', function (newVal, oldVal) {
-      globalState.time = _.clone(timefilter.time);
-      globalState.refreshInterval = _.clone(timefilter.refreshInterval);
-      globalState.save();
-    });
-  });
-
-  return {
-    link: function ($scope) {
-      listenForUpdates($scope);
-
-      // chrome is responsible for timepicker ui and state transfer...
-      $scope.timefilter = timefilter;
-      $scope.toggleRefresh = function () {
-        timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
-      };
-    }
-  };
-});
-
diff --git a/src/ui/public/chrome/directives/active_http_spinner.html b/src/ui/public/chrome/directives/active_http_spinner.html
deleted file mode 100644
index eac432ce1ee6..000000000000
--- a/src/ui/public/chrome/directives/active_http_spinner.html
+++ /dev/null
@@ -1 +0,0 @@
-<div class="spinner" ng-show="chrome.httpActive.length"></div>
diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less
index d085c25e0e6e..6965353d0085 100644
--- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less
+++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less
@@ -54,6 +54,7 @@ body { overflow-x: hidden; }
   margin: 0 auto;
   background-color: #fff;
 
+  &.hidden-chrome { left: 0; }
   &-panel {
     .flex-parent(@shrink: 0);
     box-shadow: -4px 0px 3px rgba(0,0,0,0.2);
@@ -84,7 +85,6 @@ body { overflow-x: hidden; }
 
     .app-icon {
       float: left;
-      filter: invert(100%);
       font-weight: bold;
       text-align: center;
       font-size: 1.7em;
@@ -95,6 +95,11 @@ body { overflow-x: hidden; }
       > img {
         height: 18px;
         margin-top: 8px;
+        filter: invert(100%);
+      }
+      > i {
+        color: #fff;
+        line-height: @app-icon-height
       }
     }
 
@@ -128,7 +133,7 @@ body { overflow-x: hidden; }
         text-decoration: none;
       }
       img {
-        filter: invert(100%);
+        filter: none;
       }
     }
 
diff --git a/src/ui/public/chrome/directives/append_nav_controls.js b/src/ui/public/chrome/directives/append_nav_controls.js
index d37b9c6fe0a7..1433ec065442 100644
--- a/src/ui/public/chrome/directives/append_nav_controls.js
+++ b/src/ui/public/chrome/directives/append_nav_controls.js
@@ -2,12 +2,6 @@ import $ from 'jquery';
 
 import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
 import UiModules from 'ui/modules';
-import spinnerHtml from './active_http_spinner.html';
-
-const spinner = {
-  name: 'active http requests',
-  template: spinnerHtml
-};
 
 export default function (chrome, internals) {
 
@@ -19,7 +13,7 @@ export default function (chrome, internals) {
         const parts = [$element.html()];
         const controls = Private(chromeNavControlsRegistry);
 
-        for (const control of [spinner, ...controls.inOrder]) {
+        for (const control of controls.inOrder) {
           parts.unshift(
             `<!-- nav control ${control.name} -->`,
             control.template
diff --git a/src/ui/public/chrome/directives/index.js b/src/ui/public/chrome/directives/index.js
index 530646292d38..2523fae1a602 100644
--- a/src/ui/public/chrome/directives/index.js
+++ b/src/ui/public/chrome/directives/index.js
@@ -3,6 +3,7 @@ import 'ui/directives/config';
 import './app_switcher';
 import kbnChromeProv from './kbn_chrome';
 import kbnChromeNavControlsProv from './append_nav_controls';
+import './kbn_loading_indicator';
 
 export default function (chrome, internals) {
   kbnChromeProv(chrome, internals);
diff --git a/src/ui/public/chrome/directives/kbn_loading_indicator.js b/src/ui/public/chrome/directives/kbn_loading_indicator.js
new file mode 100644
index 000000000000..1f5967c8b89f
--- /dev/null
+++ b/src/ui/public/chrome/directives/kbn_loading_indicator.js
@@ -0,0 +1,13 @@
+import UiModules from 'ui/modules';
+import angular from 'angular';
+
+const spinnerTemplate = '<div class="spinner" ng-show="chrome.httpActive.length"></div>';
+
+UiModules
+.get('ui/kibana')
+.directive('kbnLoadingIndicator', function ($compile) {
+  return {
+    restrict: 'E',
+    template: spinnerTemplate,
+  };
+});
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index 4a97d0d8d407..d2a55ff2b34f 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -146,6 +146,7 @@ a {
 
     .kibana-nav-actions {
       margin-left: auto;
+      line-height: 20px;
 
       .button-group > :last-child {
         border-radius: 0;
diff --git a/src/ui/public/styles/spinner.less b/src/ui/public/styles/spinner.less
index 514a2c5e2496..cc8d7470a36e 100644
--- a/src/ui/public/styles/spinner.less
+++ b/src/ui/public/styles/spinner.less
@@ -17,6 +17,7 @@
   right: 0;
   height: 2px;
   position: absolute;
+  z-index: 10;
   visibility: visible;
   display: block;
   animation: move 2s linear infinite;
diff --git a/src/ui/public/timepicker/__tests__/toggle.js b/src/ui/public/timepicker/__tests__/toggle.js
new file mode 100644
index 000000000000..6c328cdc0053
--- /dev/null
+++ b/src/ui/public/timepicker/__tests__/toggle.js
@@ -0,0 +1,23 @@
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import uiModules from 'ui/modules';
+import $ from 'jquery';
+
+describe('kbnGlobalTimepicker', function () {
+  let compile;
+  beforeEach(() => {
+    ngMock.module('kibana');
+    ngMock.inject(($compile, $rootScope) => {
+      compile = () => {
+        const $el = $('<kbn-global-timepicker></kbn-global-timepicker>');
+        $rootScope.$apply();
+        $compile($el)($rootScope);
+        return $el;
+      };
+    });
+  });
+  it('injects the timepicker into the DOM', () => {
+    const $el = compile();
+    expect($el.find('button[ng-click]')).to.have.length(3);
+  });
+});
diff --git a/src/ui/public/timepicker/toggle.html b/src/ui/public/timepicker/kbn_global_timepicker.html
similarity index 100%
rename from src/ui/public/timepicker/toggle.html
rename to src/ui/public/timepicker/kbn_global_timepicker.html
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js
new file mode 100644
index 000000000000..33ff002ea1d1
--- /dev/null
+++ b/src/ui/public/timepicker/kbn_global_timepicker.js
@@ -0,0 +1,29 @@
+import UiModules from 'ui/modules';
+import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
+import { once, clone } from 'lodash';
+
+import toggleHtml from './kbn_global_timepicker.html';
+
+UiModules
+.get('kibana')
+.directive('kbnGlobalTimepicker', (timefilter, globalState, $rootScope) => {
+  const listenForUpdates = once($scope => {
+    $scope.$listen(timefilter, 'update', (newVal, oldVal) => {
+      globalState.time = clone(timefilter.time);
+      globalState.refreshInterval = clone(timefilter.refreshInterval);
+      globalState.save();
+    });
+  });
+
+  return {
+    template: toggleHtml,
+    link: ($scope, $el, attrs) => {
+      listenForUpdates($rootScope);
+
+      $rootScope.timefilter = timefilter;
+      $rootScope.toggleRefresh = () => {
+        timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
+      };
+    },
+  };
+});
diff --git a/src/ui/public/timepicker/timepicker.js b/src/ui/public/timepicker/timepicker.js
index 6acde3837e6d..ea5e9c174ffd 100644
--- a/src/ui/public/timepicker/timepicker.js
+++ b/src/ui/public/timepicker/timepicker.js
@@ -8,7 +8,7 @@ import 'ui/directives/inequality';
 import 'ui/timepicker/quick_ranges';
 import 'ui/timepicker/refresh_intervals';
 import 'ui/timepicker/time_units';
-import 'ui/timepicker/toggle';
+import 'ui/timepicker/kbn_global_timepicker';
 import uiModules from 'ui/modules';
 var module = uiModules.get('ui/timepicker');
 var notify = new Notifier({
diff --git a/src/ui/public/timepicker/toggle.js b/src/ui/public/timepicker/toggle.js
deleted file mode 100644
index 2b9bf03fdc6b..000000000000
--- a/src/ui/public/timepicker/toggle.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import UiModules from 'ui/modules';
-import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
-
-import toggleHtml from './toggle.html';
-
-// TODO: the chrome-context directive is currently responsible for several variables
-// on scope used by this template. We need to get rid of that directive and move that
-// logic here
-
-chromeNavControlsRegistry.register(function () {
-  return {
-    name: 'timepicker toggle',
-    order: 100,
-    template: toggleHtml
-  };
-});