diff --git a/package.json b/package.json
index 323223a3e272b..6f176708be500 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "test:server": "grunt test:server",
     "test:coverage": "grunt test:coverage",
     "test:visualRegression": "grunt test:visualRegression",
+    "checkLicenses": "grunt licenses",
     "build": "grunt build",
     "release": "grunt release",
     "start": "sh ./bin/kibana --dev",
@@ -71,6 +72,7 @@
     "@bigfunger/decompress-zip": "0.2.0-stripfix3",
     "@bigfunger/jsondiffpatch": "0.1.38-webpack",
     "@elastic/datemath": "2.3.0",
+    "@elastic/kibana-ui-framework": "0.0.9",
     "@spalger/filesaver": "1.1.2",
     "@spalger/leaflet-draw": "0.2.3",
     "@spalger/leaflet-heat": "0.1.3",
diff --git a/src/core_plugins/console/public/src/controllers/sense_top_nav_controller.js b/src/core_plugins/console/public/src/controllers/sense_top_nav_controller.js
index c92421e7e3285..00f0092bca629 100644
--- a/src/core_plugins/console/public/src/controllers/sense_top_nav_controller.js
+++ b/src/core_plugins/console/public/src/controllers/sense_top_nav_controller.js
@@ -8,22 +8,26 @@ export function SenseTopNavController(Private) {
     {
       key: 'welcome',
       hideButton: true,
-      template: `<sense-welcome></sense-welcome>`
+      template: `<sense-welcome></sense-welcome>`,
+      testId: 'consoleWelcomeButton',
     },
     {
       key: 'history',
       description: 'History',
-      template: `<sense-history></sense-history>`
+      template: `<sense-history></sense-history>`,
+      testId: 'consoleHistoryButton',
     },
     {
       key: 'settings',
       description: 'Settings',
-      template: `<sense-settings></sense-settings>`
+      template: `<sense-settings></sense-settings>`,
+      testId: 'consoleSettingsButton',
     },
     {
       key: 'help',
       description: 'Help',
-      template: `<sense-help></sense-help>`
+      template: `<sense-help></sense-help>`,
+      testId: 'consoleHelpButton',
     },
   ]);
 
diff --git a/src/core_plugins/console/public/src/directives/help.html b/src/core_plugins/console/public/src/directives/help.html
index 22f31912d14d5..32b84078a107a 100644
--- a/src/core_plugins/console/public/src/directives/help.html
+++ b/src/core_plugins/console/public/src/directives/help.html
@@ -1,36 +1,40 @@
-<h3>Help</h3>
+<div class="localDropdownTitle">Help</div>
 
 <tabset>
   <tab heading="Request format">
-    You can type one or more requests in the white editor. Console understands requests in a compact format:
-    <sense-help-example></sense-help-example>
+    <div class="list-group-item list-group-item--noBorder">
+      You can type one or more requests in the white editor. Console understands requests in a compact format:
+      <sense-help-example></sense-help-example>
+    </div>
   </tab>
   <tab heading="Keyboard tips">
-    <dl class="dl-horizontal">
-      <dt></dt>
-      <dd><strong>General editing</strong></dd>
-      <dt>Ctrl/Cmd + I</dt>
-      <dd>Auto indent current request</dd>
-      <dt>Ctrl + Space</dt>
-      <dd>Open Auto complete (even if not typing)</dd>
-      <dt>Ctrl/Cmd + Enter</dt>
-      <dd>Submit request</dd>
-      <dt>Ctrl/Cmd + Up/Down</dt>
-      <dd>Jump to the previous/next request start or end.</dd>
-      <dt>Ctrl/Cmd + Alt + L</dt>
-      <dd>Collapse/expand current scope.</dd>
-      <dt>Ctrl/Cmd + Option + 0</dt>
-      <dd>Collapse all scopes but the current one. Expand by adding a shift.</dd>
-    </dl>
-    <dl class="dl-horizontal">
-      <dt></dt>
-      <dd><strong>When auto-complete is visible</strong></dd>
-      <dt>Down arrow</dt>
-      <dd>Switch focus to auto-complete menu. Use arrows to further select a term</dd>
-      <dt>Enter/Tab</dt>
-      <dd>Select the currently selected or the top most term in auto-complete menu</dd>
-      <dt>Esc</dt>
-      <dd>Close auto-complete menu</dd>
-    </dl>
+    <div class="list-group-item list-group-item--noBorder">
+      <dl class="dl-horizontal">
+        <dt></dt>
+        <dd><strong>General editing</strong></dd>
+        <dt>Ctrl/Cmd + I</dt>
+        <dd>Auto indent current request</dd>
+        <dt>Ctrl + Space</dt>
+        <dd>Open Auto complete (even if not typing)</dd>
+        <dt>Ctrl/Cmd + Enter</dt>
+        <dd>Submit request</dd>
+        <dt>Ctrl/Cmd + Up/Down</dt>
+        <dd>Jump to the previous/next request start or end.</dd>
+        <dt>Ctrl/Cmd + Alt + L</dt>
+        <dd>Collapse/expand current scope.</dd>
+        <dt>Ctrl/Cmd + Option + 0</dt>
+        <dd>Collapse all scopes but the current one. Expand by adding a shift.</dd>
+      </dl>
+      <dl class="dl-horizontal">
+        <dt></dt>
+        <dd><strong>When auto-complete is visible</strong></dd>
+        <dt>Down arrow</dt>
+        <dd>Switch focus to auto-complete menu. Use arrows to further select a term</dd>
+        <dt>Enter/Tab</dt>
+        <dd>Select the currently selected or the top most term in auto-complete menu</dd>
+        <dt>Esc</dt>
+        <dd>Close auto-complete menu</dd>
+      </dl>
+    </div>
   </tab>
 </tabset>
diff --git a/src/core_plugins/console/public/src/directives/history.html b/src/core_plugins/console/public/src/directives/history.html
index 180612eff1507..06df7134a2dad 100644
--- a/src/core_plugins/console/public/src/directives/history.html
+++ b/src/core_plugins/console/public/src/directives/history.html
@@ -1,4 +1,4 @@
-<h3>History</h3>
+<div class="localDropdownTitle">History</div>
 
 <div class="history-body">
   <ul class="list-group history-reqs">
@@ -11,8 +11,7 @@ <h3>History</h3>
       ng-dblclick="history.restore(req)"
       title="{{ req.description }}"
       class="list-group-item history-req"
-      >
-
+    >
       {{ history.describeReq(req) }}
       <span class="history-req-icon"><i class="fa fa-chevron-right"></i></span>
     </li>
diff --git a/src/core_plugins/console/public/src/directives/settings.html b/src/core_plugins/console/public/src/directives/settings.html
index 6a33904eb0391..8efe0419ddfba 100644
--- a/src/core_plugins/console/public/src/directives/settings.html
+++ b/src/core_plugins/console/public/src/directives/settings.html
@@ -1,22 +1,21 @@
-<h3>Settings</h3>
+<div class="localDropdownTitle">Settings</div>
 
 <form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
   <div class="form-group">
-    <h4>Editor &amp; Output pane settings</h4>
+    <div class="localDropdownHeader">
+      <div class="localDropdownHeader__label">Font Size</div>
+    </div>
 
-    <div class="form-group">
-      <label>Font Size</label>
-      <div>
-        <input
-          input-focus
-          ng-model="settings.vals.fontSize"
-          name="fontSize"
-          type="number"
-          required
-          class="form-control"
-          data-test-subj="setting-font-size-input"
-          >
-      </div>
+    <div>
+      <input
+        input-focus
+        ng-model="settings.vals.fontSize"
+        name="fontSize"
+        type="number"
+        required
+        class="form-control"
+        data-test-subj="setting-font-size-input"
+      >
     </div>
 
     <div class="checkbox">
@@ -28,7 +27,9 @@ <h4>Editor &amp; Output pane settings</h4>
   </div>
 
   <div class="form-group">
-    <h4>Autocomplete</h4>
+    <div class="localDropdownHeader">
+      <div class="localDropdownHeader__label">Autocomplete</div>
+    </div>
 
     <div class="checkbox">
       <label>
diff --git a/src/core_plugins/console/public/src/directives/welcome.html b/src/core_plugins/console/public/src/directives/welcome.html
index 5fbfa43f3c9c3..c21083d31a938 100644
--- a/src/core_plugins/console/public/src/directives/welcome.html
+++ b/src/core_plugins/console/public/src/directives/welcome.html
@@ -1,6 +1,6 @@
-<h3>Welcome to Console</h3>
+<div class="localDropdownTitle">Welcome to Console</div>
 
-<h4>Quick intro to the UI</h4>
+<p><strong>Quick intro to the UI</strong></p>
 
 <p>The Console UI is split into two panes: an editor pane (left) and a response pane (right).
   Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in
@@ -14,8 +14,7 @@ <h4>Quick intro to the UI</h4>
   These suggestions are made based on the request structure <i>as well as</i> your indices and types.
 </p>
 
-
-<h4>A few quick tips, while I have your attention</h4>
+<p><strong>A few quick tips, while I have your attention</strong></p>
 <ul>
   <li>Submit requests to ES using the green triangle button.</li>
   <li>Use the wrench menu for other useful things.</li>
diff --git a/src/core_plugins/kibana/public/dashboard/index.html b/src/core_plugins/kibana/public/dashboard/index.html
index bbcb5812cd063..e1b29a59c5c7b 100644
--- a/src/core_plugins/kibana/public/dashboard/index.html
+++ b/src/core_plugins/kibana/public/dashboard/index.html
@@ -1,43 +1,57 @@
 <dashboard-app class="app-container dashboard-container">
+  <!-- Local nav. -->
   <kbn-top-nav name="dashboard" config="topNavMenu">
-    <div class="kibana-nav-info">
-      <span ng-show="dash.id" class="kibana-nav-info-title">
-        <span ng-bind="::dash.title"></span>
-      </span>
-    </div>
-  </kbn-top-nav>
-
-  <navbar ng-show="chrome.getVisible()" name="dashboard-search">
-    <form name="queryInput"
-      class="fill inline-form"
-      ng-submit="filterResults()"
-      role="form">
-
-      <div class="typeahead" kbn-typeahead="dashboard">
-        <div class="input-group"
-          ng-class="queryInput.$invalid ? 'has-error' : ''">
-
-          <input
-            type="text"
-            placeholder="Filter..."
-            aria-label="Filter input"
-            class="form-control"
-            ng-model="state.query"
-            input-focus
-            kbn-typeahead-input
-            parse-query>
-          <button type="submit" class="btn btn-default" ng-disabled="queryInput.$invalid" aria-label="Filter dashboards">
-            <span aria-hidden="true" class="fa fa-search"></span>
-          </button>
-        </div>
-
-        <kbn-typeahead-items></kbn-typeahead-items>
+    <!-- Transcluded elements. -->
+    <div data-transclude-slots>
+      <!-- Title. -->
+      <div
+        data-transclude-slot="topLeftCorner"
+        class="localTitle"
+      >
+        <span
+          ng-show="dash.id"
+          ng-bind="::dash.title"
+        ></span>
       </div>
 
-    </form>
-    <div class="button-group"></div>
-  </navbar>
+      <!-- Search. -->
+      <form
+        data-transclude-slot="bottomRow"
+        class="fullWidth"
+        ng-show="chrome.getVisible()"
+        role="form"
+        name="queryInput"
+        ng-submit="filterResults()"
+      >
+        <div class="typeahead" kbn-typeahead="dashboard">
+          <div class="localSearch">
+            <input
+              parse-query
+              input-focus
+              kbn-typeahead-input
+              ng-model="state.query"
+              placeholder="Filter..."
+              aria-label="Filter input"
+              type="text"
+              class="localSearchInput"
+              ng-class="{'localSearchInput-isInvalid': queryInput.$invalid}"
+            >
+            <button
+              type="submit"
+              aria-label="Filter Dashboards"
+              class="localSearchButton"
+              ng-disabled="queryInput.$invalid"
+            >
+              <span class="fa fa-search" aria-hidden="true"></span>
+            </button>
+          </div>
+          <kbn-typeahead-items></kbn-typeahead-items>
+        </div>
+      </form>
+    </div>
+  </kbn-top-nav>
 
+  <!-- Filters. -->
   <filter-bar state="state"></filter-bar>
 
   <div ng-show="!state.panels.length" class="text-center start-screen">
diff --git a/src/core_plugins/kibana/public/dashboard/index.js b/src/core_plugins/kibana/public/dashboard/index.js
index e928e00c3c16b..ca3d54c4178af 100644
--- a/src/core_plugins/kibana/public/dashboard/index.js
+++ b/src/core_plugins/kibana/public/dashboard/index.js
@@ -119,7 +119,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         template: require('plugins/kibana/dashboard/partials/save_dashboard.html')
       }, {
         key: 'open',
-        description: 'Load Saved Dashboard',
+        description: 'Open Saved Dashboard',
         template: require('plugins/kibana/dashboard/partials/load_dashboard.html')
       }, {
         key: 'share',
diff --git a/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html b/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html
index cf20ab78ab0cc..c3336b111b65b 100644
--- a/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html
+++ b/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html
@@ -1 +1,2 @@
-<saved-object-finder type="dashboards"></saved-object-finder>
\ No newline at end of file
+<div class="localDropdownTitle">Open Dashboard</div>
+<saved-object-finder type="dashboards"></saved-object-finder>
diff --git a/src/core_plugins/kibana/public/dashboard/partials/options.html b/src/core_plugins/kibana/public/dashboard/partials/options.html
index 00216a0d02197..7e69b6ac56468 100644
--- a/src/core_plugins/kibana/public/dashboard/partials/options.html
+++ b/src/core_plugins/kibana/public/dashboard/partials/options.html
@@ -1,10 +1,9 @@
-<form role="form" class="options">
-  <p>
-    <div class="input-group">
-      <label>
-        <input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">
-        Use dark theme
-      </label>
-    </div>
-  </p>
+<form role="form">
+  <div class="localDropdownTitle">Options</div>
+  <div class="input-group">
+    <label>
+      <input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">
+      Use dark theme
+    </label>
+  </div>
 </form>
diff --git a/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html b/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html
index 5d1cd0704064d..ee236c577b78b 100644
--- a/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html
+++ b/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html
@@ -1,14 +1,27 @@
-<div ng-switch on="mode" ng-init="mode = 'visualization'" class="dashboard-panel-picker">
+<div
+  ng-switch="mode"
+  ng-init="mode = 'visualization'"
+>
+  <div class="localDropdownTitle">Add Panels</div>
+
   <ul class="nav nav-tabs">
-    <li ng-class="{active: mode == 'visualization'}"><a ng-click="mode='visualization'" title="Visualizations">Visualizations</a></li>
-    <li ng-class="{active: mode == 'search'}"><a ng-click="mode='search'" title="Searches">Searches</a></li>
+    <li ng-class="{active: mode == 'visualization'}">
+      <a ng-click="mode='visualization'" title="Visualizations">
+        Visualization
+      </a>
+    </li>
+    <li ng-class="{active: mode == 'search'}">
+      <a ng-click="mode='search'" title="Searches">
+        Saved Search
+      </a>
+    </li>
   </ul>
 
-  <div class="list-group-item" ng-switch-when="visualization">
+  <div class="list-group-item list-group-item--noBorder" ng-switch-when="visualization">
     <saved-object-finder title="Choose a visualization" type="visualizations" on-choose="opts.addVis"></saved-object-finder>
   </div>
 
-  <div class="list-group-item" ng-switch-when="search">
+  <div class="list-group-item list-group-item--noBorder" ng-switch-when="search">
     <saved-object-finder title="Choose a search" type="searches" on-choose="opts.addSearch"></saved-object-finder>
   </div>
 </div>
diff --git a/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html b/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html
index 8283355d0a6f4..641aad5c81172 100644
--- a/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html
+++ b/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html
@@ -1,8 +1,16 @@
-<form ng-submit="opts.save()" role="form">
-  <div class="form-group">
-    <label for="dashboardTitle">Save As</label>
-    <input id="dashboardTitle" type="text" ng-model="opts.dashboard.title" class="form-control" placeholder="Dashboard title" input-focus="select">
-  </div>
+<form
+  role="form"
+  ng-submit="opts.save()"
+>
+  <div class="localDropdownTitle">Save Dashboard</div>
+  <input
+    class="localDropdownInput"
+    id="dashboardTitle"
+    type="text"
+    ng-model="opts.dashboard.title"
+    placeholder="Dashboard title"
+    input-focus="select"
+  >
   <div class="form-group">
     <label>
       <input type="checkbox" ng-model="opts.dashboard.timeRestore" ng-checked="opts.dashboard.timeRestore">
diff --git a/src/core_plugins/kibana/public/dashboard/styles/main.less b/src/core_plugins/kibana/public/dashboard/styles/main.less
index a0cccdd1e6ddc..a4b61f1e09ea7 100644
--- a/src/core_plugins/kibana/public/dashboard/styles/main.less
+++ b/src/core_plugins/kibana/public/dashboard/styles/main.less
@@ -152,7 +152,3 @@ dashboard-grid {
     }
   }
 }
-
-.dashboard-panel-picker > .list-group-item {
-  border-top: 0;
-}
diff --git a/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html b/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
index 953e22e4ba561..2e3da87a47828 100644
--- a/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
+++ b/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
@@ -1,15 +1,24 @@
 <div class="dev-tools__app-container app-container">
-  <bread-crumbs class="bread-crumbs--navbar" omit-current-page="true"></bread-crumbs>
   <kbn-top-nav name="devtools" config="kbnDevToolsApp.topNavConfig">
-    <div class="localTabs">
-      <a
-        ng-repeat="item in kbnDevToolsApp.devTools"
-        class="localTab"
-        ng-class="{'localTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
-        kbn-href="{{::item.url}}"
-      >
-        {{::item.display}}
-      </a>
+    <!-- Transcluded elements. -->
+    <div data-transclude-slots>
+      <!-- Breadcrumbs. -->
+      <bread-crumbs
+        data-transclude-slot="topLeftCorner"
+        omit-current-page="true"
+      ></bread-crumbs>
+
+      <!-- Tabs. -->
+      <div data-transclude-slot="bottomRow" class="localTabs">
+        <a
+          ng-repeat="item in kbnDevToolsApp.devTools"
+          class="localTab"
+          ng-class="{'localTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
+          kbn-href="{{::item.url}}"
+        >
+          {{::item.display}}
+        </a>
+      </div>
     </div>
   </kbn-top-nav>
   <div role="main" class="dev-tools__container" ng-transclude></div>
diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html
index 3a89231617bf3..1a60d56b6b641 100644
--- a/src/core_plugins/kibana/public/discover/index.html
+++ b/src/core_plugins/kibana/public/discover/index.html
@@ -1,40 +1,55 @@
 <discover-app class="app-container">
+  <!-- Local nav. -->
   <kbn-top-nav name="discover" config="topNavMenu">
-    <div class="kibana-nav-info">
-      <span ng-show="opts.savedSearch.id" class="kibana-nav-info-title">
-        <span ng-bind="::opts.savedSearch.title"></span>
-        <i aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>
-      </span>
-
-      <strong class="discover-info-hits">{{(hits || 0) | number:0}}</strong>
-      <ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
-    </div>
-  </kbn-top-nav>
-  <navbar name="discover-search">
-    <form role="form" class="fill inline-form" ng-submit="fetch()" name="discoverSearch">
-      <div class="typeahead" kbn-typeahead="discover">
-        <div class="input-group"
-          ng-class="discoverSearch.$invalid ? 'has-error' : ''">
-          <input
-            parse-query
-            input-focus
-            kbn-typeahead-input
-            ng-model="state.query"
-            placeholder="Search..."
-            aria-label="Search input"
-            type="text"
-            class="form-control">
-          <button type="submit"
-            ng-disabled="discoverSearch.$invalid"
-            aria-label="Search">
-            <span aria-hidden="true" class="fa fa-search"></span></button>
+    <!-- Transcluded elements. -->
+    <div data-transclude-slots>
+      <!-- Breadcrumbs. -->
+      <div data-transclude-slot="topLeftCorner" class="localBreadcrumbs">
+        <div class="localBreadcrumb">
+          <span ng-show="opts.savedSearch.id" class="localBreadcrumb__emphasis">
+            <span data-test-subj="discoverCurrentQuery" ng-bind="::opts.savedSearch.title"></span>
+            <i aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>&nbsp;
+          </span>
+          <span data-test-subj="discoverQueryHits" class="localBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
+          <ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
         </div>
-        <kbn-typeahead-items></kbn-typeahead-items>
       </div>
-    </form>
-    <div class="button-group" role="toolbar"></div>
-  </navbar>
 
+      <!-- Search. -->
+      <form
+        data-transclude-slot="bottomRow"
+        class="fullWidth"
+        role="form"
+        name="discoverSearch"
+        ng-submit="fetch()"
+      >
+        <div class="typeahead" kbn-typeahead="discover">
+          <div class="localSearch">
+            <input
+              parse-query
+              input-focus
+              kbn-typeahead-input
+              ng-model="state.query"
+              placeholder="Search..."
+              aria-label="Search input"
+              type="text"
+              class="localSearchInput"
+              ng-class="{'localSearchInput-isInvalid': discoverSearch.$invalid}"
+            >
+            <button
+              type="submit"
+              aria-label="Search"
+              class="localSearchButton"
+              ng-disabled="discoverSearch.$invalid"
+            >
+              <span class="fa fa-search" aria-hidden="true"></span>
+            </button>
+          </div>
+          <kbn-typeahead-items></kbn-typeahead-items>
+        </div>
+      </form>
+    </div>
+  </kbn-top-nav>
 
   <div class="container-fluid" role="main">
     <div class="row">
diff --git a/src/core_plugins/kibana/public/discover/partials/load_search.html b/src/core_plugins/kibana/public/discover/partials/load_search.html
index 2b66911dbafc4..5b5c471aad993 100644
--- a/src/core_plugins/kibana/public/discover/partials/load_search.html
+++ b/src/core_plugins/kibana/public/discover/partials/load_search.html
@@ -1,3 +1,4 @@
-<form role="form" class="container-fluid" ng-submit="fetch()">
+<form role="form" ng-submit="fetch()">
+  <div class="localDropdownTitle">Open Search</div>
   <saved-object-finder type="searches"></saved-object-finder>
 </form>
diff --git a/src/core_plugins/kibana/public/discover/partials/save_search.html b/src/core_plugins/kibana/public/discover/partials/save_search.html
index 6ab2178e1018a..875c47fa66094 100644
--- a/src/core_plugins/kibana/public/discover/partials/save_search.html
+++ b/src/core_plugins/kibana/public/discover/partials/save_search.html
@@ -1,17 +1,16 @@
-<form role="form" class="container-fluid" ng-submit="opts.saveDataSource()">
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-md-12">
-        <div class="form-group">
-          <label for="SaveSearch" class="control-label">Save Search</label>
-          <input id="SaveSearch" ng-model="opts.savedSearch.title" input-focus="select" class="form-control" placeholder="Name this search...">
-        </div>
-        <div class="form-group">
-          <button ng-disabled="!opts.savedSearch.title" data-test-subj="discover-save-search-btn" type="submit" class="btn btn-primary">
-            Save
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+<form
+  role="form"
+  ng-submit="opts.saveDataSource()"
+>
+  <div class="localDropdownTitle">Save Search</div>
+  <input
+    class="localDropdownInput"
+    id="SaveSearch"
+    ng-model="opts.savedSearch.title"
+    input-focus="select"
+    placeholder="Name this search..."
+  >
+  <button ng-disabled="!opts.savedSearch.title" data-test-subj="discover-save-search-btn" type="submit" class="btn btn-primary">
+    Save
+  </button>
 </form>
diff --git a/src/core_plugins/kibana/public/management/app.html b/src/core_plugins/kibana/public/management/app.html
index 4e2e215ba1924..8eab4596e7291 100644
--- a/src/core_plugins/kibana/public/management/app.html
+++ b/src/core_plugins/kibana/public/management/app.html
@@ -1,26 +1,36 @@
 <div class="app-container">
-  <bread-crumbs class="bread-crumbs--navbar" omit-current-page="true"></bread-crumbs>
+  <!-- Local nav. -->
   <kbn-top-nav name="management-subnav" data-test-subj="managementNav">
-    <div class="localTabs">
-      <span ng-if="!sectionName" class="localTab">
-        {{::section.display}}
-      </span>
+    <!-- Transcluded elements. -->
+    <div data-transclude-slots>
+      <!-- Breadcrumbs. -->
+      <bread-crumbs
+        data-transclude-slot="topLeftCorner"
+        omit-current-page="true"
+      ></bread-crumbs>
 
-      <a
-        ng-if="sectionName"
-        ng-repeat="item in section.items.inOrder"
-        class="localTab"
-        ng-class="{ 'localTab-isSelected': item.active, 'localTab-disabled': !item.url }"
-        kbn-href="{{::item.url}}"
-        data-test-subj="{{::item.name}}"
-        tooltip="{{::item.tooltip}}"
-        tooltip-placement="bottom"
-        tooltip-popup-delay="400"
-        tooltip-append-to-body="1"
-      >
-        {{::item.display}}
-      </a>
+      <!-- Tabs. -->
+      <div data-transclude-slot="bottomRow" class="localTabs">
+        <span ng-if="!sectionName" class="localTab">
+          {{::section.display}}
+        </span>
+        <a
+          ng-if="sectionName"
+          ng-repeat="item in section.items.inOrder"
+          class="localTab"
+          ng-class="{ 'localTab-isSelected': item.active, 'localTab-disabled': !item.url }"
+          kbn-href="{{::item.url}}"
+          data-test-subj="{{::item.name}}"
+          tooltip="{{::item.tooltip}}"
+          tooltip-placement="bottom"
+          tooltip-popup-delay="400"
+          tooltip-append-to-body="1"
+        >
+          {{::item.display}}
+        </a>
+      </div>
     </div>
   </kbn-top-nav>
+
   <div role="main" class="management-container" ng-transclude></div>
 </div>
diff --git a/src/core_plugins/kibana/public/management/sections/settings/advanced_row.html b/src/core_plugins/kibana/public/management/sections/settings/advanced_row.html
index 9e892d94c63a6..86aa725cc3ad1 100644
--- a/src/core_plugins/kibana/public/management/sections/settings/advanced_row.html
+++ b/src/core_plugins/kibana/public/management/sections/settings/advanced_row.html
@@ -1,4 +1,4 @@
-<tr ng-class="conf.value === undefined ? 'default' : 'custom'" data-test-subj="advancedSetting {{conf.name}}" >
+<tr ng-class="conf.value === undefined ? 'default' : 'custom'">
   <td class="name">
     <b>{{conf.name}}</b>
     <span class="smaller" ng-show="!conf.isCustom && conf.value !== undefined">
@@ -18,7 +18,8 @@
       name="forms.configEdit"
       ng-if="conf.editing"
       ng-submit="save(conf)"
-      role="form">
+      role="form"
+    >
 
       <input
         ng-if="conf.normal"
@@ -26,7 +27,8 @@
         ng-keyup="maybeCancel($event, conf)"
         placeholder="{{conf.value || conf.defVal}}"
         type="text"
-        class="form-control">
+        class="form-control"
+      >
 
         <textarea
           ng-if="conf.markdown"
@@ -35,7 +37,7 @@
           ng-model="conf.unsavedValue"
           ng-keyup="maybeCancel($event, conf)"
           elastic-textarea
-          ></textarea>
+        ></textarea>
 
       <textarea
         ng-if="conf.json"
@@ -45,7 +47,7 @@
         ng-keyup="maybeCancel($event, conf)"
         elastic-textarea
         validate-json
-        ></textarea>
+      ></textarea>
       <small ng-show="forms.configEdit.$error.jsonInput">Invalid JSON syntax</small>
 
       <input
@@ -55,13 +57,15 @@
         ng-keyup="maybeCancel($event, conf)"
         placeholder="{{(conf.value || conf.defVal).join(', ')}}"
         type="text"
-        class="form-control">
+        class="form-control"
+      >
 
       <input
         ng-if="conf.bool"
         ng-model="conf.unsavedValue"
         type="checkbox"
-        class="form-control">
+        class="form-control"
+      >
 
       <select
         ng-if="conf.select"
@@ -69,12 +73,12 @@
         ng-model="conf.unsavedValue"
         ng-options="option as option for option in conf.options"
         class="form-control"
-        data-test-subj="selectInput">
+      >
       </select>
     </form>
 
     <!-- Setting display formats -->
-    <span ng-if="!conf.editing" data-test-subj="currentValue">
+    <span ng-if="!conf.editing" data-test-subj="advancedSetting-{{conf.name}}-currentValue">
       <span ng-if="(conf.normal || conf.json || conf.select)">{{conf.value || conf.defVal}}</span>
       <span ng-if="conf.array">{{(conf.value || conf.defVal).join(', ')}}</span>
       <span ng-if="conf.bool">{{conf.value === undefined ? conf.defVal : conf.value}}</span>
@@ -89,7 +93,8 @@
       class="btn btn-default"
       ng-disabled="conf.tooComplex"
       aria-label="Edit"
-      data-test-subj="editButton">
+      data-test-subj="advancedSetting-{{conf.name}}-editButton"
+    >
       <span class="sr-only">Edit</span>
       <i aria-hidden="true" class="fa fa-pencil"></i>
     </button>
@@ -100,7 +105,8 @@
       class="btn btn-success"
       ng-disabled="conf.loading || conf.tooComplex || forms.configEdit.$invalid"
       aria-label="Save"
-      data-test-subj="saveButton">
+      data-test-subj="advancedSetting-{{conf.name}}-saveButton"
+    >
       <span class="sr-only">Save</span>
       <i aria-hidden="true" ng-if="!conf.loading" class="fa fa-save"></i>
       <i aria-hidden="true" ng-if="conf.loading" class="fa fa-spinner"></i>
@@ -112,7 +118,7 @@
       ng-hide="conf.value === undefined"
       class="btn btn-danger"
       aria-label="Clear"
-      data-test-subj="clearButton">
+    >
       <span class="sr-only">Clear</span>
       <i aria-hidden="true" class="fa fa-trash-o"></i>
     </button>
@@ -122,7 +128,7 @@
       ng-click="cancelEdit(conf)"
       class="btn btn-default"
       aria-label="Cancel edit"
-      data-test-subj="cancelButton">
+    >
       <span class="sr-only">Cancel Edit</span>
       <i aria-hidden="true" class="fa fa-times"></i>
     </button>
diff --git a/src/core_plugins/kibana/public/management/styles/main.less b/src/core_plugins/kibana/public/management/styles/main.less
index b8ed9701cfa17..c122e935239d7 100644
--- a/src/core_plugins/kibana/public/management/styles/main.less
+++ b/src/core_plugins/kibana/public/management/styles/main.less
@@ -32,10 +32,6 @@ li.kbn-management-tab:first-letter {
 }
 
 kbn-management-app {
-  bread-crumbs ul {
-    height: 36px;
-  }
-
   li.current-page {
     font-size: 1.5em;
     margin: 0 10px;
diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html
index c43967427a8b4..f0547cbe8e87a 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.html
@@ -1,78 +1,74 @@
 <visualize-app class="app-container vis-editor vis-type-{{ vis.type.name }}">
-
+  <!-- Local nav. -->
   <kbn-top-nav name="visualize" config="topNavMenu">
-    <div class="vis-editor-info">
-      <span ng-show="savedVis.id" class="vis-editor-info-title">
-        <span ng-bind="::savedVis.title"></span>
-      </span>
-    </div>
-  </kbn-top-nav>
-  <navbar ng-if="chrome.getVisible()" name="visualize-search">
-    <div class="fill bitty-modal-container">
-      <div ng-if="vis.type.requiresSearch && $state.linked && !unlinking"
-        ng-dblclick="unlink()"
-        tooltip="Double click to unlink this visualization from the saved search"
-        class="bitty-modal visualize-linked">
-        <i aria-hidden="true" class="fa fa-link"></i>
-        &nbsp;
-        This visualization is linked to a saved search:
-        <b>{{ savedVis.savedSearch.title }}</b>
-      </div>
-
+    <!-- Transcluded elements. -->
+    <div data-transclude-slots>
+      <!-- Title. -->
       <div
-        ng-if="vis.type.requiresSearch && unlinking"
-        ng-click="clearUnlinking()"
-        class="bitty-modal">
-        <i aria-hidden="true" class="fa fa-chain-broken"></i> Unlinked!
+        data-transclude-slot="topLeftCorner"
+        class="localTitle"
+      >
+        <span
+          ng-show="savedVis.id"
+          ng-bind="::savedVis.title"
+        ></span>
       </div>
 
-      <form ng-if="vis.type.requiresSearch && $state.linked" class="inline-form fill" name="queryInput">
-        <div class="typeahead">
-          <div class="input-group">
-            <input
-              disabled
-              type="text"
-              class="form-control">
-
-            <button
-              class="btn btn-default" type="submit"
-              ng-disabled="true" aria-label="Search">
-              <span aria-hidden="true" class="fa fa-search"></span>
-            </button>
-          </div>
+      <!-- Search. -->
+      <div
+        data-transclude-slot="bottomRow"
+        ng-show="chrome.getVisible()"
+        class="fullWidth"
+      >
+        <!-- Block searching if the Visualization is linked to a Saved Search. -->
+        <div ng-if="vis.type.requiresSearch && $state.linked">
+          Linked to Saved Search &ldquo;{{ savedVis.savedSearch.title }}&rdquo;
+          &nbsp;
+          <a
+            href=""
+            ng-dblclick="unlink()"
+            tooltip="Double click to unlink from Saved Search"
+          >
+            <i aria-hidden="true" class="fa fa-chain-broken"></i>
+          </a>
         </div>
-      </form>
-
-      <form
-        ng-if="vis.type.requiresSearch && !$state.linked"
-        ng-submit="fetch()"
-        class="inline-form fill"
-        name="queryInput">
-        <div class="typeahead" kbn-typeahead="visualize">
-          <div class="input-group"
-            ng-class="queryInput.$invalid ? 'has-error' : ''">
-            <input
-              ng-model="state.query"
-              parse-query
-              input-focus
-              kbn-typeahead-input
-              placeholder="Search..."
-              type="text"
-              class="form-control">
 
-            <button
-              class="btn btn-default" type="submit"
-              ng-disabled="queryInput.$invalid" aria-label="Search">
-              <span aria-hidden="true" class="fa fa-search"></span>
-            </button>
+        <!-- Allow searching if there is no linked Saved Searc. -->
+        <form
+          ng-if="vis.type.requiresSearch && !$state.linked"
+          name="queryInput"
+          ng-submit="fetch()"
+          class="fullWidth"
+        >
+          <div class="typeahead" kbn-typeahead="visualize">
+            <div class="localSearch">
+              <input
+                ng-model="state.query"
+                parse-query
+                input-focus
+                kbn-typeahead-input
+                placeholder="Search..."
+                type="text"
+                class="localSearchInput"
+                ng-class="{'localSearchInput-isInvalid': queryInput.$invalid}"
+              >
+              <button
+                type="submit"
+                aria-label="Search"
+                class="localSearchButton"
+                ng-disabled="queryInput.$invalid"
+              >
+                <span aria-hidden="true" class="fa fa-search"></span>
+              </button>
+            </div>
+            <kbn-typeahead-items></kbn-typeahead-items>
           </div>
-          <kbn-typeahead-items></kbn-typeahead-items>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
-    <div class="button-group"></div>
-  </navbar>
+  </kbn-top-nav>
 
+  <!-- Filters. -->
   <filter-bar state="state"></filter-bar>
 
   <div class="vis-editor-content">
diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.js b/src/core_plugins/kibana/public/visualize/editor/editor.js
index 422550b3cca0f..ea8bd1bbee123 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.js
@@ -110,9 +110,9 @@ function VisEditor($scope, $route, timefilter, AppState, $location, kbnUrl, $tim
     template: require('plugins/kibana/visualize/editor/panels/save.html'),
     description: 'Save Visualization'
   }, {
-    key: 'load',
+    key: 'open',
     template: require('plugins/kibana/visualize/editor/panels/load.html'),
-    description: 'Load Saved Visualization',
+    description: 'Open Saved Visualization',
   }, {
     key: 'share',
     template: require('plugins/kibana/visualize/editor/panels/share.html'),
@@ -309,13 +309,12 @@ function VisEditor($scope, $route, timefilter, AppState, $location, kbnUrl, $tim
   $scope.unlink = function () {
     if (!$state.linked) return;
 
+    notify.info(`Unlinked Visualization "${savedVis.title}" from Saved Search "${savedVis.savedSearch.title}"`);
+
     $state.linked = false;
     const parent = searchSource.getParent(true);
     const parentsParent = parent.getParent(true);
 
-    // display unlinking for 2 seconds, unless it is double clicked
-    $scope.unlinking = $timeout($scope.clearUnlinking, 2000);
-
     delete savedVis.savedSearchId;
     parent.set('filter', _.union(searchSource.getOwn('filter'), parent.getOwn('filter')));
 
@@ -332,13 +331,6 @@ function VisEditor($scope, $route, timefilter, AppState, $location, kbnUrl, $tim
     searchSource.inherits(parentsParent);
   };
 
-  $scope.clearUnlinking = function () {
-    if ($scope.unlinking) {
-      $timeout.cancel($scope.unlinking);
-      $scope.unlinking = null;
-    }
-  };
-
   function transferVisState(fromVis, toVis, stage) {
     return function () {
 
diff --git a/src/core_plugins/kibana/public/visualize/editor/panels/load.html b/src/core_plugins/kibana/public/visualize/editor/panels/load.html
index 14108487dc9b9..edb5860fb9145 100644
--- a/src/core_plugins/kibana/public/visualize/editor/panels/load.html
+++ b/src/core_plugins/kibana/public/visualize/editor/panels/load.html
@@ -1 +1,2 @@
+<div class="localDropdownTitle">Open Visualization</div>
 <saved-object-finder type="visualizations"></saved-object-finder>
diff --git a/src/core_plugins/kibana/public/visualize/editor/panels/save.html b/src/core_plugins/kibana/public/visualize/editor/panels/save.html
index e0c6471ee09fa..f3a38f5c273bd 100644
--- a/src/core_plugins/kibana/public/visualize/editor/panels/save.html
+++ b/src/core_plugins/kibana/public/visualize/editor/panels/save.html
@@ -1,7 +1,21 @@
-<form role="form" ng-submit="opts.doSave()">
-  <div class="form-group">
-    <label for="visTitle">Title</label>
-    <input class="form-control" input-focus="select" type="text" name="visTitle" ng-model="opts.savedVis.title" required>
-  </div>
-  <button type="submit" class="btn btn-primary">Save</button>
+<form
+  role="form"
+  ng-submit="opts.doSave()"
+>
+  <div class="localDropdownTitle">Save Visualization</div>
+  <input
+    class="localDropdownInput"
+    input-focus="select"
+    type="text"
+    name="visTitle"
+    ng-model="opts.savedVis.title"
+    required
+  >
+  <button
+    data-test-subj="saveVisualizationButton"
+    type="submit"
+    class="btn btn-primary"
+  >
+    Save
+  </button>
 </form>
diff --git a/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less b/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
index 8162ecb260004..a5b4da6db1abf 100644
--- a/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
+++ b/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
@@ -17,38 +17,6 @@
     line-height: 1.3;
   }
 
-  navbar {
-    .bitty-modal-container {
-      position: relative;
-
-      .bitty-modal {
-        position: absolute;
-        cursor: pointer;
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-        z-index: 10;
-        background: fadeout(@vis-editor-navbar-modal-bg, 10%);
-        color: @vis-editor-navbar-modal-color;
-        text-align: center;
-        padding-top: 6px;
-
-        // Don't overflow container
-        padding-left: 20px;
-        padding-right: 20px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        user-select: none;
-      }
-
-      a {
-        color: @vis-editor-navbar-modal-link-color;
-      }
-    }
-  }
-
   .collapsible-sidebar {
     .flex-parent(0, 0, auto);
     margin-right: 10px;
@@ -80,17 +48,6 @@
   }
 }
 
-  .vis-editor-info {
-    line-height: 30px;
-    padding: 0px 10px;
-    border-bottom-left-radius: @border-radius-base;
-  }
-
-    .vis-editor-info-title {
-      font-weight: bold;
-      margin-right: 10px;
-    }
-
   .vis-editor-content {
     .flex-parent();
     z-index: 0;
diff --git a/src/core_plugins/kibana/public/visualize/styles/main.less b/src/core_plugins/kibana/public/visualize/styles/main.less
index 0435b366a2b56..e14b6d8d5e010 100644
--- a/src/core_plugins/kibana/public/visualize/styles/main.less
+++ b/src/core_plugins/kibana/public/visualize/styles/main.less
@@ -2,11 +2,12 @@
 @import (reference) "~ui/styles/bootstrap/list-group";
 @import (reference) "~ui/styles/list-group-menu";
 
+/**
+ * 1. Push down the breadcrumbs a bit.
+ */
 .vis-wizard {
-  margin-right: 0;
-  margin-left: 0;
-  padding-left: 0;
-  padding-right: 0;
+  margin: 0;
+  padding: 12px 0 0; // 1
 }
 
   .wizard-sub-title {
diff --git a/src/core_plugins/timelion/public/app.less b/src/core_plugins/timelion/public/app.less
index 1441d5b1d3444..81cff905a01ad 100644
--- a/src/core_plugins/timelion/public/app.less
+++ b/src/core_plugins/timelion/public/app.less
@@ -20,10 +20,6 @@
 
   &-container {
     margin: 20px;
-
-    &-fixed {
-      margin: 25px;
-    }
   }
 
   &-container-drawer {
@@ -88,111 +84,87 @@
   }
 }
 
-
-navbar.timelion-navbar {
-
-  &-fixed {
-    border-top: 5px solid @navbar-default-bg;
-    top: 0;
-    left: @as-closed-width;
-    right: 0px;
-    position: fixed;
-  }
-
-  input, select {
-    height: 34px;
-  }
-
-  .form-control:focus {
-    border-color: @gray-lighter;
-  }
-}
-
-.timelion-nav-wrapper {
-  z-index: 20;
-}
-
-.timelion-scroll-class {
-
-}
-
 .chart-container.running {
   opacity: 0.50;
 }
 
-select.timelion-interval {
+.timelion-interval {
   width: 70px !important;
+  height: auto;
   -webkit-appearance: none;
   -moz-appearance: none;
-  background-position: right 50%;
-  background-repeat: no-repeat;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
   padding: .5em;
   padding-right: 1.5em;
-  border-left: 0px;
-  height: auto;
+  line-height: 1;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 0;
   border-radius: 0;
+  text-align: center;
 
-  &-other {
-    width: 10px !important;
+  &:focus {
+    border-color: #ecf0f1;
   }
 }
 
+.timelion-interval--select {
+  background-position: right 50%;
+  background-repeat: no-repeat;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
+}
+
+.timelion-interval-other {
+  width: 10px !important;
+}
+
 timelion-interval {
   display: flex;
 }
 
-input.timelion-interval {
-  border-radius: 0;
-  height: auto;
-  width: 40px !important;
-  padding: .5em;
-  border-right: 0px;
-  border-left: 0px;
-  text-align: center;
+.timelionFunctionsDropdown {
+  height: 310px;
+  overflow-y: auto;
 }
 
-div.doc-container {
-  &-functions {
-    height: 310px;
-    overflow-y: auto;
-    background-color: @body-bg;
-    position: relative;
-    padding: 0px;
-
-    h3 {
-      margin-top: 0px;
-    }
+.timelionFunctionsTable {
+  background-color: white;
+}
 
-    tr.function:hover {
-      background-color: @gray-lighter;
-    }
+.timelionFunctionsTableRow {
+  &:hover {
+    background-color: #f9f9f9;
   }
+}
+
+/**
+ * 1. Override bootstrap .table styles.
+ */
+.timelionFunctionDetailsTable {
+  background-color: #f9f9f9 !important; // 1
+}
+
+.doc-container-content {
+  padding: 0 20px 20px 20px;
+  height: 310px;
+  overflow-y: auto;
+  background-color: @body-bg;
+  position: relative;
+}
+
+.doc-container-buttons {
+  position: relative;
+  text-align: center;
+  background-color: @body-bg;
+  height: 40px;
 
-  &-content {
-    padding: 0 20px 20px 20px;
-    height: 310px;
-    overflow-y: auto;
-    background-color: @body-bg;
-    position: relative;
+  .btn-doc-prev {
+    position: absolute;
+    left: 20px;
   }
 
-  &-buttons {
-    text-align: center;
-    background-color: @body-bg;
-    height: 40px;
-
-    .btn-doc {
-      &-prev {
-        position: absolute;
-        left: 20px;
-      }
-
-      &-next {
-        position: absolute;
-        right: 20px;
-      }
-    }
+  .btn-doc-next {
+    position: absolute;
+    right: 20px;
   }
 }
 
@@ -247,3 +219,10 @@ div.doc-container {
   margin-right: 5px;
   font-weight: bold;
 }
+
+/**
+ * 1. Needs to be relative to contain absolutely-positioned typeahead suggestions.
+ */
+.timelionLocalSearch {
+  position: relative; /* 1 */
+}
diff --git a/src/core_plugins/timelion/public/directives/interval/interval.html b/src/core_plugins/timelion/public/directives/interval/interval.html
index 52b358bf07802..557f84dd41417 100644
--- a/src/core_plugins/timelion/public/directives/interval/interval.html
+++ b/src/core_plugins/timelion/public/directives/interval/interval.html
@@ -2,7 +2,7 @@
   class="form-control timelion-interval"
   ng-model="otherInterval">
 
-<select class="form-control timelion-interval"
+<select class="form-control timelion-interval timelion-interval--select"
   ng-options="i for i in intervalOptions"
   ng-class="{'timelion-interval-other': interval == 'other'}"
   ng-model="interval"></select>
diff --git a/src/core_plugins/timelion/public/index.html b/src/core_plugins/timelion/public/index.html
index f5781cd40fa9d..63417287a48f5 100644
--- a/src/core_plugins/timelion/public/index.html
+++ b/src/core_plugins/timelion/public/index.html
@@ -1,65 +1,73 @@
-<div class="timelion app-container" ng-controller="timelion" fixed-element-root>
-
+<div class="timelion app-container" ng-controller="timelion">
+  <!-- Local nav. -->
   <kbn-top-nav name="timelion" config="topNavMenu">
-    <div class="kibana-nav-info ng-scope">
-      <span class="kibana-nav-info-title">
-        <span ng-show="opts.savedSheet.id">
-          {{opts.savedSheet.title}}
-          <i class="fa fa-bolt" ng-click="showStats = !showStats"></i>
+    <!-- Transcluded elements. -->
+    <div data-transclude-slots>
+      <div data-transclude-slot="topLeftCorner" class="kibana-nav-info">
+        <span class="kibana-nav-info-title">
+          <span ng-show="opts.savedSheet.id">
+            {{opts.savedSheet.title}}
+            <i class="fa fa-bolt" ng-click="showStats = !showStats"></i>
+          </span>
+          <small class="timelion-stats" ng-show="showStats">
+            Query Time {{stats.queryTime - stats.invokeTime}}ms /
+            Processing Time {{stats.sheetTime - stats.queryTime}}ms
+          </small>
         </span>
-        <small class="timelion-stats" ng-show="showStats">
-          Query Time {{stats.queryTime - stats.invokeTime}}ms /
-          Processing Time {{stats.sheetTime - stats.queryTime}}ms
-        </small>
-      </span>
-    </div>
-  </kbn-top-nav>
-
-  <navbar class="timelion-navbar" fixed-element="timelion-navbar-fixed">
-    <form role="form" class="fill inline-form" ng-submit="search()" name="discoverSearch">
-      <div class="input-group">
-        <input input-focus
-          ng-model="state.sheet[state.selected]"
-          timelion-expression="{{state.sheet[state.selected]}}"
-          placeholder="Expression ..."
-          aria-label="Expression input"
-          type="text"
-          class="form-control timelion-expression">
+      </div>
 
-        <timelion-interval model="state.interval"></timelion-interval>
+      <!-- Search. -->
+      <form
+        data-transclude-slot="bottomRow"
+        class="fullWidth"
+        role="form"
+        ng-submit="search()"
+      >
+        <div class="localSearch timelionLocalSearch">
+          <input
+            input-focus
+            ng-model="state.sheet[state.selected]"
+            timelion-expression="{{state.sheet[state.selected]}}"
+            placeholder="Expression..."
+            aria-label="Expression input"
+            type="text"
+            class="localSearchInput timelion-expression"
+          >
 
-        <button aria-label="Search" type="submit">
-          <span class="fa fa-play"></span>
-        </button>
+          <timelion-interval model="state.interval"></timelion-interval>
 
-      </div>
-    </form>
-  </navbar>
+          <button
+            type="submit"
+            aria-label="Search"
+            class="localSearchButton"
+          >
+            <span class="fa fa-play"></span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </kbn-top-nav>
 
-  <div class="timelion-container" fixed-element-body="timelion-container-fixed">
+  <div class="timelion-container">
     <div class="timelion-container-sheet">
       <div class="timelion-container-sheet-margin">
+        <timelion-fullscreen
+          ng-show="transient.fullscreen"
+          transient="transient"
+          state="state"
+          series="sheet[state.selected]"
+          expression="state.sheet[state.selected]"
+          on-search="search"
+        ></timelion-fullscreen>
 
-          <timelion-fullscreen
-            ng-show="transient.fullscreen"
-            transient="transient"
-            state="state"
-            series="sheet[state.selected]"
-            expression="state.sheet[state.selected]"
-            on-search="search"
-          >
-          </timelion-fullscreen>
-
-          <timelion-cells
-            ng-show="!transient.fullscreen"
-            transient="transient"
-            state="state"
-            sheet="sheet"
-            on-search="search"
-            on-select="setActiveCell"
-          >
-          </timelion-cells>
-
+        <timelion-cells
+          ng-show="!transient.fullscreen"
+          transient="transient"
+          state="state"
+          sheet="sheet"
+          on-search="search"
+          on-select="setActiveCell"
+        ></timelion-cells>
         </div>
       </div>
     </div>
diff --git a/src/core_plugins/timelion/public/partials/docs/tutorial.html b/src/core_plugins/timelion/public/partials/docs/tutorial.html
index 4cd5eb074eed1..2dcab21efe564 100644
--- a/src/core_plugins/timelion/public/partials/docs/tutorial.html
+++ b/src/core_plugins/timelion/public/partials/docs/tutorial.html
@@ -145,25 +145,27 @@ <h2>Data: Transform <small>insert beat boxing</small></h2>
   </div>
 </div>
 
-<div ng-show="section === 'functions'" class="doc-container-functions">
-  <h3>
+<div ng-show="section === 'functions'" class="localDropdown timelionFunctionsDropdown">
+  <div class="localDropdownTitle">
     Function reference
-    <small>
-      Click a function for details and arguments or <a ng-click="section = 'tutorial'">return to the tutorial.</a>
-    </small>
-  </h3>
-  <table class="table table-condensed table-striped table-bordered">
-    <tr class="function"
+  </div>
+  <div class="localDropdownHelpText">
+    Click a function for details and arguments or <a ng-click="section = 'tutorial'">return to the tutorial.</a>
+  </div>
+  <table class="table table-condensed table-bordered timelionFunctionsTable">
+    <tr class="timelionFunctionsTableRow"
       ng-repeat-start="function in functions.list"
       ng-class="{active: functions.details === function.name}"
       ng-click="functions.details = (functions.details === function.name ? null : function.name)">
       <td><strong>.{{function.name}}()</strong></td>
       <td>{{function.help}}</td>
     </tr>
+
+    <!-- Function details -->
     <tr ng-if="functions.details === function.name" ng-repeat-end>
       <td colspan=2>
         <div class="suggestion-details" >
-          <table class="table table-striped table-condensed table-bordered"
+          <table class="table table-condensed table-bordered timelionFunctionDetailsTable"
             ng-show="function.args.length > (function.chainable ? 1: 0)">
           <thead>
             <th>Argument Name</th>
diff --git a/src/core_plugins/timelion/public/partials/load_sheet.html b/src/core_plugins/timelion/public/partials/load_sheet.html
index d78eeaa0b550d..e7b6f68594045 100644
--- a/src/core_plugins/timelion/public/partials/load_sheet.html
+++ b/src/core_plugins/timelion/public/partials/load_sheet.html
@@ -1,3 +1,4 @@
-<form role="form" class="container-fluid" ng-submit="fetch()">
+<form role="form" ng-submit="fetch()">
+  <div class="localDropdownTitle">Open Sheet</div>
   <saved-object-finder type="timelion-sheet" use-local-management="true"></saved-object-finder>
 </form>
diff --git a/src/core_plugins/timelion/public/partials/save_sheet.html b/src/core_plugins/timelion/public/partials/save_sheet.html
index 82fd933e07110..e3f9beb0895ed 100644
--- a/src/core_plugins/timelion/public/partials/save_sheet.html
+++ b/src/core_plugins/timelion/public/partials/save_sheet.html
@@ -1,58 +1,52 @@
-  <div class="container-fluid">
+<div class="list-group">
+  <a class="list-group-item" ng-click="section = 'sheet'">
+    <h4 class="list-group-item-heading">Save entire Timelion sheet</h4>
+    <p  class="list-group-item-text">
+      You want this option if you mostly use Timelion expressions from within the Timelion app and don't need to
+      add Timelion charts to Kibana dashboards. You may also want this if you make use of references to other
+      panels.
+    </p>
+  </a>
 
-    <div class="row">
-
-      <div class="list-group">
-        <a class="list-group-item" ng-click="section = 'sheet'">
-          <h4 class="list-group-item-heading">Save entire Timelion sheet</h4>
-          <p  class="list-group-item-text">
-            You want this option if you mostly use Timelion expressions from within the Timelion app and don't need to
-            add Timelion charts to Kibana dashboards. You may also want this if you make use of references to other
-            panels.
-          </p>
-        </a>
-
-        <div class="list-group-item" ng-show="section == 'sheet'">
-          <form role="form" class="container-fluid" ng-submit="opts.saveSheet()">
-            <div class="form-group">
-              <label for="savedSheet" class="control-label">Save sheet as</label>
-              <input id="savedSheet" ng-model="opts.savedSheet.title" input-focus="select" class="form-control" placeholder="Name this sheet...">
-            </div>
-            <div class="form-group">
-              <button ng-disabled="!opts.savedSheet.title" type="submit" class="btn btn-primary">
-                Save
-              </button>
-            </div>
-          </form>
-        </div>
-
-        <a class="list-group-item" ng-click="section = 'expression'">
-          <h4 class="list-group-item-heading">Save current expression as Kibana dashboard panel</h4>
-          <p class="list-group-item-text">
-            Need to add a chart to a Kibana dashboard? We can do that! This option will save your currently selected
-            expression as a panel that can be added to Kibana dashboards as you would add anything else. Note, if you
-            use references to other panels you will need to remove the refences by copying the referenced expression
-            directly into the expression you are saving. Click a chart to select a different expression to save.
-          </p>
-        </a>
+  <div class="list-group-item" ng-show="section == 'sheet'">
+    <form role="form" class="container-fluid" ng-submit="opts.saveSheet()">
+      <div class="form-group">
+        <label for="savedSheet" class="control-label">Save sheet as</label>
+        <input id="savedSheet" ng-model="opts.savedSheet.title" input-focus="select" class="form-control" placeholder="Name this sheet...">
+      </div>
+      <div class="form-group">
+        <button ng-disabled="!opts.savedSheet.title" type="submit" class="btn btn-primary">
+          Save
+        </button>
+      </div>
+    </form>
+  </div>
 
-        <div class="list-group-item" ng-show="section == 'expression'">
-          <form role="form" class="container-fluid" ng-submit="opts.saveExpression(panelTitle)">
-            <div class="form-group">
-              <label class="control-label">Currently selected expression</label>
-              <code>{{opts.state.sheet[opts.state.selected]}}</code>
-            </div>
-            <div class="form-group">
-              <label for="savedExpression" class="control-label">Save expression as</label>
-              <input id="savedExpression" ng-model="panelTitle" input-focus="select" class="form-control" placeholder="Name this panel">
-            </div>
-            <div class="form-group">
-              <button ng-disabled="!panelTitle" type="submit" class="btn btn-primary">
-                Save
-              </button>
-            </div>
-          </form>
-        </div>
-    </div>
+  <a class="list-group-item" ng-click="section = 'expression'">
+    <h4 class="list-group-item-heading">Save current expression as Kibana dashboard panel</h4>
+    <p class="list-group-item-text">
+      Need to add a chart to a Kibana dashboard? We can do that! This option will save your currently selected
+      expression as a panel that can be added to Kibana dashboards as you would add anything else. Note, if you
+      use references to other panels you will need to remove the refences by copying the referenced expression
+      directly into the expression you are saving. Click a chart to select a different expression to save.
+    </p>
+  </a>
 
+  <div class="list-group-item" ng-show="section == 'expression'">
+    <form role="form" class="container-fluid" ng-submit="opts.saveExpression(panelTitle)">
+      <div class="form-group">
+        <label class="control-label">Currently selected expression</label>
+        <code>{{opts.state.sheet[opts.state.selected]}}</code>
+      </div>
+      <div class="form-group">
+        <label for="savedExpression" class="control-label">Save expression as</label>
+        <input id="savedExpression" ng-model="panelTitle" input-focus="select" class="form-control" placeholder="Name this panel">
+      </div>
+      <div class="form-group">
+        <button ng-disabled="!panelTitle" type="submit" class="btn btn-primary">
+          Save
+        </button>
+      </div>
+    </form>
   </div>
+</div>
diff --git a/src/core_plugins/timelion/public/partials/sheet_options.html b/src/core_plugins/timelion/public/partials/sheet_options.html
index 81b40c57ac563..00bb995806d77 100644
--- a/src/core_plugins/timelion/public/partials/sheet_options.html
+++ b/src/core_plugins/timelion/public/partials/sheet_options.html
@@ -1,4 +1,6 @@
-<form role="form" class="container-fluid">
+<form role="form">
+  <div class="localDropdownTitle">Sheet options</div>
+  <div>
     <div class="form-group col-md-6">
       <label>Columns <small>Column count must divide evenly into 12</small></label>
       <select class="form-control"
@@ -15,4 +17,5 @@
         ng-model="opts.state.rows">
       </select>
     </div>
+  </div>
 </form>
diff --git a/src/ui/public/directives/bread_crumbs.js b/src/ui/public/directives/bread_crumbs.js
index b5a590a60b308..df0f9a7c5c390 100644
--- a/src/ui/public/directives/bread_crumbs.js
+++ b/src/ui/public/directives/bread_crumbs.js
@@ -12,10 +12,11 @@ module.directive('breadCrumbs', function () {
     },
     template: breadCrumbsTemplate,
     controller: function ($scope) {
-      $scope.crumbs = chrome.getBreadcrumbs();
+      // Capitalize the first letter of each bread crumb.
+      $scope.breadcrumbs = chrome.getBreadcrumbs().map(breadcrumb => _.startCase(breadcrumb));
 
       if ($scope.omitCurrentPage === true) {
-        $scope.crumbs.pop();
+        $scope.breadcrumbs.pop();
       }
     }
   };
diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.html b/src/ui/public/kbn_top_nav/kbn_top_nav.html
index 08c128014f18c..5ec6577c825d6 100644
--- a/src/ui/public/kbn_top_nav/kbn_top_nav.html
+++ b/src/ui/public/kbn_top_nav/kbn_top_nav.html
@@ -1,27 +1,52 @@
-<navbar ng-show="kbnTopNav.isVisible()" class="kibana-nav-options" data-test-subj="top-nav">
-  <div ng-transclude></div>
-  <div class="button-group kibana-nav-actions" role="toolbar">
-    <button
-      ng-repeat="menuItem in kbnTopNav.menuItems"
-      aria-label="{{::menuItem.description}}"
-      aria-haspopup="{{!menuItem.hasFunction}}"
-      aria-expanded="{{kbnTopNav.isCurrent(menuItem.key)}}"
-      ng-class="{active: kbnTopNav.isCurrent(menuItem.key), 'is-kbn-top-nav-button-disabled': menuItem.disableButton()}"
-      ng-click="kbnTopNav.handleClick(menuItem)"
-      ng-bind="menuItem.label"
-      tooltip="{{menuItem.tooltip()}}"
-      tooltip-placement="bottom"
-      tooltip-popup-delay="400"
-      tooltip-append-to-body="1"
-      data-test-subj="menu-item-{{menuItem.key}}"
-    >
-    </button>
+<div
+  class="localNav"
+  ng-show="kbnTopNav.isVisible()"
+  data-test-subj="top-nav"
+>
+  <!-- Top row -->
+  <div class="localNavRow">
+    <!-- Top left corner slot, e.g. breadcrumbs, title. -->
+    <div
+      class="localNavRow__section"
+      data-transclude-slot="topLeftCorner"
+    ></div>
+
+    <!-- Right-side: menu -->
+    <div class="localNavRow__section">
+      <div class="localMenu">
+        <div
+          class="localMenuItem"
+          ng-repeat="menuItem in kbnTopNav.menuItems"
+          aria-label="{{::menuItem.description}}"
+          aria-haspopup="{{!menuItem.hasFunction}}"
+          aria-expanded="{{kbnTopNav.isCurrent(menuItem.key)}}"
+          ng-class="{'localMenuItem-isSelected': kbnTopNav.isCurrent(menuItem.key), 'localMenuItem-isDisabled': menuItem.disableButton()}"
+          ng-click="kbnTopNav.handleClick(menuItem)"
+          ng-bind="menuItem.label"
+          tooltip="{{menuItem.tooltip()}}"
+          tooltip-placement="bottom"
+          tooltip-popup-delay="400"
+          tooltip-append-to-body="1"
+          data-test-subj="{{menuItem.testId}}"
+        ></div>
+
+        <!-- Time-picker "menu item" -->
+        <kbn-global-timepicker></kbn-global-timepicker>
+      </div>
+    </div>
   </div>
-  <kbn-global-timepicker></kbn-global-timepicker>
-</navbar>
-<div class="config" ng-show="kbnTopNav.rendered">
-  <div id="template_wrapper" class="container-fluid"></div>
-  <div class="config-close remove" ng-click="kbnTopNav.close()">
-    <i class="fa fa-chevron-circle-up"></i>
+
+  <!-- Dropdown content, e.g. time-picker. -->
+  <div
+    class="localDropdown"
+    id="template_wrapper"
+    ng-show="kbnTopNav.rendered"
+  >
+    <!-- Content gets dynamically inserted here. -->
+  </div>
+
+  <div class="localNavRow localNavRow--secondary">
+    <!-- Bottom row slot, e.g. tabs. -->
+    <div data-transclude-slot="bottomRow"></div>
   </div>
 </div>
diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.js b/src/ui/public/kbn_top_nav/kbn_top_nav.js
index 57a52f7bfdd7b..f96511919c0e9 100644
--- a/src/ui/public/kbn_top_nav/kbn_top_nav.js
+++ b/src/ui/public/kbn_top_nav/kbn_top_nav.js
@@ -1,13 +1,3 @@
-import _ from 'lodash';
-import 'ui/watch_multi';
-import 'ui/directives/input_focus';
-import uiModules from 'ui/modules';
-import template from './kbn_top_nav.html';
-import KbnTopNavControllerProvider from './kbn_top_nav_controller';
-import RegistryNavbarExtensionsProvider from 'ui/registry/navbar_extensions';
-
-const module = uiModules.get('kibana');
-
 /**
  * kbnTopNav directive
  *
@@ -41,6 +31,18 @@ const module = uiModules.get('kibana');
  *
  * Programatic control of the navbar can be acheived one of two ways
  */
+
+import _ from 'lodash';
+import angular from 'angular';
+import 'ui/watch_multi';
+import 'ui/directives/input_focus';
+import uiModules from 'ui/modules';
+import template from './kbn_top_nav.html';
+import KbnTopNavControllerProvider from './kbn_top_nav_controller';
+import RegistryNavbarExtensionsProvider from 'ui/registry/navbar_extensions';
+
+const module = uiModules.get('kibana');
+
 module.directive('kbnTopNav', function (Private) {
   const KbnTopNavController = Private(KbnTopNavControllerProvider);
   const navbarExtensions = Private(RegistryNavbarExtensionsProvider);
@@ -55,7 +57,7 @@ module.directive('kbnTopNav', function (Private) {
     template,
 
     // TODO: The kbnTopNav currently requires that it share a scope with
-    // it's parent directive. This allows it to export the kbnTopNav controller
+    // its parent directive. This allows it to export the kbnTopNav controller
     // and allows the config templates to use values from the parent scope.
     //
     // Moving this to an isolate scope will require modifying the config
@@ -63,9 +65,38 @@ module.directive('kbnTopNav', function (Private) {
     // parent controllers can be imported/required rather than simply referenced
     // directly in the template.
     //
+    // TODO: Our fake multi-slot transclusion solution also depends on an inherited
+    // scope. Moving this to an isolate scope will cause this to break.
+    //
     // scope: {}
 
-    controller($scope, $attrs, $element) {
+    controller($scope, $attrs, $element, $transclude) {
+      // This is a semi-hacky solution to missing slot-transclusion support in Angular 1.4.7
+      // (it was added as a core feature in 1.5). Borrowed from http://stackoverflow.com/a/22080765.
+      $scope.transcludes = {};
+
+      // Extract transcluded elements for use in the link function.
+      $transclude(clone => {
+        // We expect the transcluded elements to be wrapped in a single div.
+        const transcludedContentContainer = _.find(clone, item => {
+          if (item.attributes) {
+            return _.find(item.attributes, attr => {
+              return attr.name.indexOf('data-transclude-slots') !== -1;
+            });
+          }
+        });
+
+        if (!transcludedContentContainer) {
+          return;
+        };
+
+        const transcludedContent = transcludedContentContainer.children;
+        _.forEach(transcludedContent, transcludedItem => {
+          const transclusionSlot = transcludedItem.getAttribute('data-transclude-slot');
+          $scope.transcludes[transclusionSlot] = transcludedItem;
+        });
+      });
+
       const extensions = getNavbarExtensions($attrs.name);
       let controls = _.get($scope, $attrs.config, []);
       if (controls instanceof KbnTopNavController) {
@@ -78,6 +109,20 @@ module.directive('kbnTopNav', function (Private) {
       $scope.kbnTopNav._link($scope, $element);
 
       return $scope.kbnTopNav;
+    },
+
+    link(scope, element) {
+      // These are the slots where transcluded elements can go.
+      const transclusionSlotNames = ['topLeftCorner', 'bottomRow'];
+
+      // Transclude elements into specified "slots" in the top nav.
+      transclusionSlotNames.forEach(name => {
+        const transcludedItem = scope.transcludes[name];
+        if (transcludedItem) {
+          const transclusionSlot = document.querySelector(`[data-transclude-slot="${name}"]`);
+          angular.element(transclusionSlot).replaceWith(transcludedItem);
+        }
+      });
     }
   };
 });
diff --git a/src/ui/public/partials/bread_crumbs.html b/src/ui/public/partials/bread_crumbs.html
index b13b30b272b36..8b585b20b9376 100644
--- a/src/ui/public/partials/bread_crumbs.html
+++ b/src/ui/public/partials/bread_crumbs.html
@@ -1,6 +1,5 @@
-<ul>
-  <li ng-repeat="crumb in crumbs">
-    <span>{{crumb}}</span>
-    <span ng-hide="$last"> / </span>
-  </li>
-</ul>
+<div class="localBreadcrumbs">
+  <div class="localBreadcrumb" ng-repeat="breadcrumb in breadcrumbs">
+    {{breadcrumb}}
+  </div>
+</div>
diff --git a/src/ui/public/share/index.js b/src/ui/public/share/index.js
index 8ce7696231a8c..d2cd780182755 100644
--- a/src/ui/public/share/index.js
+++ b/src/ui/public/share/index.js
@@ -1,2 +1 @@
-import './styles/index.less';
 import './directives/share';
diff --git a/src/ui/public/share/styles/index.less b/src/ui/public/share/styles/index.less
deleted file mode 100644
index 99b50607d8bc1..0000000000000
--- a/src/ui/public/share/styles/index.less
+++ /dev/null
@@ -1,79 +0,0 @@
-.share-dropdown {
-  display: flex;
-  padding: 5px 15px;
-}
-
-.share-panel {
-  flex: 1 1 0%;
-}
-
-.share-panel--left {
-  margin-right: 30px;
-}
-
-.share-panel--right {
-  margin-left: 30px;
-}
-
-  .share-panel__title {
-    margin-bottom: 12px;
-    padding-bottom: 4px;
-    font-size: 18px;
-    color: #000000;
-  }
-
-.share-panel-section {
-  margin-bottom: 16px;
-}
-
-.share-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 6px;
-}
-
-  .share-panel-header__label {
-    font-size: 14px;
-    font-weight: 700;
-    color: #000000;
-  }
-
-  .share-panel-header__actions {
-    display: flex;
-  }
-
-  .share-panel-header__action {
-    font-size: 12px;
-
-    & + & {
-      margin-left: 10px;
-    }
-  }
-
-.share-panel-input {
-  width: 100%;
-  padding: 4px 10px;
-  margin-bottom: 6px;
-  border: 0;
-  border-radius: 4px;
-}
-
-.share-panel-form-note {
-  font-size: 14px;
-  color: #5A5A5A;
-}
-
-.share-panel-help-text {
-  margin-bottom: 16px;
-  font-size: 14px;
-  color: #2D2D2D;
-}
-
-.share-panel-warning {
-  margin-bottom: 16px;
-  padding: 6px 10px;
-  font-size: 14px;
-  color: #2D2D2D;
-  background-color: #e4e4e4;
-}
diff --git a/src/ui/public/share/views/share.html b/src/ui/public/share/views/share.html
index 21de40163f9ef..f43efa2d511a0 100644
--- a/src/ui/public/share/views/share.html
+++ b/src/ui/public/share/views/share.html
@@ -1,34 +1,34 @@
-<div class="share-dropdown">
+<div class="localDropdownPanels">
   <!-- Left panel -->
-  <div class="share-panel share-panel--left">
+  <div class="localDropdownPanel localDropdownPanel--left">
     <!-- Title -->
     <div
       data-test-subj="shareUiTitle"
-      class="share-panel__title"
+      class="localDropdownTitle"
     >
       Share saved {{share.objectType}}
     </div>
 
     <!-- Help text -->
-    <div ng-if="share.urls.original" class="share-panel-help-text">
+    <div ng-if="share.urls.original" class="localDropdownHelpText">
       You can share this URL with people to let them load the most recent saved version of this {{share.objectType}}.
     </div>
 
-    <div ng-if="!share.urls.original" class="share-panel-warning">
+    <div ng-if="!share.urls.original" class="localDropdownWarning">
       Please save this {{share.objectType}} to enable this sharing option.
     </div>
 
     <div ng-if="share.urls.original">
       <!-- iframe -->
-      <div class="share-panel-section" ng-if="share.allowEmbed">
+      <div class="localDropdownSection" ng-if="share.allowEmbed">
         <!-- Header -->
-        <div class="share-panel-header">
-          <div class="share-panel-header__label">
+        <div class="localDropdownHeader">
+          <div class="localDropdownHeader__label">
             Embedded iframe
           </div>
-          <div class="share-panel-header__actions">
+          <div class="localDropdownHeader__actions">
             <a
-              class="share-panel-header__action"
+              class="localDropdownHeader__action"
               ng-click="share.copyToClipboard('#originalIframeUrl')"
             >
               Copy
@@ -39,28 +39,28 @@
         <!-- Input -->
         <input
           id="originalIframeUrl"
-          class="share-panel-input"
+          class="localDropdownInput"
           type="text"
           readonly
           value="{{share.makeIframeTag(share.urls.original)}}"
         />
 
         <!-- Notes -->
-        <div class="share-panel-form-note">
+        <div class="localDropdownFormNote">
           Add to your HTML source. Note that all clients must be able to access Kibana.
         </div>
       </div>
 
       <!-- Link -->
-      <div class="share-panel-section">
+      <div class="localDropdownSection">
         <!-- Header -->
-        <div class="share-panel-header">
-          <div class="share-panel-header__label">
+        <div class="localDropdownHeader">
+          <div class="localDropdownHeader__label">
             Link
           </div>
-          <div class="share-panel-header__actions">
+          <div class="localDropdownHeader__actions">
             <a
-              class="share-panel-header__action"
+              class="localDropdownHeader__action"
               ng-click="share.copyToClipboard('#originalUrl')"
             >
               Copy
@@ -71,7 +71,7 @@
         <!-- Input -->
         <input
           id="originalUrl"
-          class="share-panel-input"
+          class="localDropdownInput"
           type="text"
           readonly
           value="{{share.urls.original}}"
@@ -81,27 +81,27 @@
   </div>
 
   <!-- Right panel -->
-  <div class="share-panel share-panel--right">
+  <div class="localDropdownPanel localDropdownPanel--right">
     <!-- Title -->
-    <div class="share-panel__title">
+    <div class="localDropdownTitle">
       Share Snapshot
     </div>
 
     <!-- Help text -->
-    <div class="share-panel-help-text">
+    <div class="localDropdownHelpText">
       Snapshot URLs encode the current state of the {{share.objectType}} in the URL itself. Edits to the saved {{share.objectType}} won't be visible via this URL.
     </div>
 
     <!-- iframe -->
-    <div class="share-panel-section" ng-if="share.allowEmbed">
+    <div class="localDropdownSection" ng-if="share.allowEmbed">
       <!-- Header -->
-      <div class="share-panel-header">
-        <div class="share-panel-header__label">
+      <div class="localDropdownHeader">
+        <div class="localDropdownHeader__label">
           Embedded iframe
         </div>
-        <div class="share-panel-header__actions">
+        <div class="localDropdownHeader__actions">
           <a
-            class="share-panel-header__action"
+            class="localDropdownHeader__action"
             ng-if="!share.urlFlags.shortSnapshotIframe"
             ng-click="share.toggleShortSnapshotIframeUrl()"
           >
@@ -109,7 +109,7 @@
           </a>
 
           <a
-            class="share-panel-header__action"
+            class="localDropdownHeader__action"
             ng-if="share.urlFlags.shortSnapshotIframe"
             ng-click="share.toggleShortSnapshotIframeUrl()"
           >
@@ -117,7 +117,7 @@
           </a>
 
           <a
-            class="share-panel-header__action"
+            class="localDropdownHeader__action"
             ng-click="share.copyToClipboard('#snapshotIframeUrl')"
           >
             Copy
@@ -128,29 +128,29 @@
       <!-- Input -->
       <input
         id="snapshotIframeUrl"
-        class="share-panel-input"
+        class="localDropdownInput"
         type="text"
         readonly
         value="{{share.urlFlags.shortSnapshotIframe ? share.makeIframeTag(share.urls.shortSnapshotIframe) : share.makeIframeTag(share.urls.snapshot)}}"
       />
 
       <!-- Notes -->
-      <div class="share-panel-form-note">
+      <div class="localDropdownFormNote">
         Add to your HTML source. Note that all clients must be able to access Kibana.
       </div>
     </div>
 
     <!-- Link -->
-    <div class="share-panel-section">
+    <div class="localDropdownSection">
       <!-- Header -->
-      <div class="share-panel-header">
-        <div class="share-panel-header__label">
+      <div class="localDropdownHeader">
+        <div class="localDropdownHeader__label">
           Link
         </div>
-        <div class="share-panel-header__actions">
+        <div class="localDropdownHeader__actions">
           <a
             data-test-subj="sharedSnapshotShortUrlButton"
-            class="share-panel-header__action"
+            class="localDropdownHeader__action"
             ng-if="!share.urlFlags.shortSnapshot"
             ng-click="share.toggleShortSnapshotUrl()"
           >
@@ -158,7 +158,7 @@
           </a>
 
           <a
-            class="share-panel-header__action"
+            class="localDropdownHeader__action"
             ng-if="share.urlFlags.shortSnapshot"
             ng-click="share.toggleShortSnapshotUrl()"
           >
@@ -167,7 +167,7 @@
 
           <a
             data-test-subj="sharedSnapshotCopyButton"
-            class="share-panel-header__action"
+            class="localDropdownHeader__action"
             ng-click="share.copyToClipboard('#snapshotUrl')"
           >
             Copy
@@ -179,14 +179,14 @@
       <input
         data-test-subj="sharedSnapshotUrl"
         id="snapshotUrl"
-        class="share-panel-input"
+        class="localDropdownInput"
         type="text"
         readonly
         value="{{share.urlFlags.shortSnapshot ? share.urls.shortSnapshot : share.urls.snapshot}}"
       />
 
       <!-- Notes -->
-      <div class="share-panel-form-note">
+      <div class="localDropdownFormNote">
         We recommend sharing shortened snapshot URLs for maximum compatibility. Internet Explorer has URL length restrictions, and some wiki and markup parsers don't do well with the full-length version of the snapshot URL, but the short URL should work great.
       </div>
     </div>
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index c14af77d75497..d638e4c31d7d9 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -3,6 +3,9 @@
 @import (reference) "./variables";
 @import (reference) "~ui/styles/bootstrap/bootstrap";
 
+// Kibana UI Framework
+@import (less) "~@elastic/kibana-ui-framework/dist/framework.css";
+
 html,
 body {
   .flex-parent();
@@ -157,16 +160,6 @@ a {
       .button-group > :last-child {
         border-radius: 0;
       }
-
-      button.is-kbn-top-nav-button-disabled {
-        opacity: 0.5;
-        cursor: default;
-
-        &:active {
-          color: @kibanaGray2;
-          background-color: transparent;
-        }
-      }
     }
 
     .kibana-nav-info {
@@ -303,38 +296,6 @@ table {
   }
 }
 
-//== breadCrumbsTemplate
-bread-crumbs {
-  display: block;
-
-  &.bread-crumbs--navbar {
-    background-color: @navbar-default-bg;
-  }
-
-  ul {
-    margin: 0;
-    padding: 8px 10px;
-    list-style-type: none;
-    text-transform: capitalize;
-
-    >li {
-      display: inline;
-      >span {
-        color: @kibanaGray2;
-      }
-      >span:hover {
-        color: @kibanaGray1;
-      }
-    }
-
-    >li:last-child {
-      >span {
-        color: @kibanaGray1;
-      }
-    }
-  }
-}
-
 //== SavedObjectFinder
 saved-object-finder,
 paginated-selectable-list {
@@ -670,4 +631,24 @@ fieldset {
   font-size: 14px;
 }
 
+/**
+ * Utility class.
+ * TODO: Move to UI Framework.
+ */
+.fullWidth {
+  width: 100%;
+}
+
+/**
+ * TODO: This is a generic pattern that should be replaced by specific components, e.g. inputGroup.
+ */
+.flexGroup {
+  display: flex;
+  width: 100%;
+}
+
+  .flexGroup__filler {
+    flex: 1 1 auto;
+  }
+
 @import "~dragula/dist/dragula.css";
diff --git a/src/ui/public/styles/bootstrap/list-group.less b/src/ui/public/styles/bootstrap/list-group.less
index 216b91230ab6f..5224f285c8128 100644
--- a/src/ui/public/styles/bootstrap/list-group.less
+++ b/src/ui/public/styles/bootstrap/list-group.less
@@ -37,6 +37,9 @@
   }
 }
 
+.list-group-item--noBorder {
+  border-top: 0;
+}
 
 // Interactive list items
 //
diff --git a/src/ui/public/styles/local_tabs.less b/src/ui/public/styles/local_tabs.less
deleted file mode 100644
index ff449935bff1c..0000000000000
--- a/src/ui/public/styles/local_tabs.less
+++ /dev/null
@@ -1,33 +0,0 @@
-@import (reference) "./variables.less";
-
-.localTabs {
-  display: flex;
-  align-items: center;
-}
-
-  .localTab {
-    flex: 0 0 auto;
-    padding: 5px 0 6px;
-    font-size: 18px;
-    line-height: 20px;
-    color: @kibanaGray2;
-    border-bottom: 2px solid transparent;
-    background-color: transparent;
-    text-decoration: none;
-
-    &.localTab-disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-
-    &:only-child,
-    &:hover,
-    &.localTab-isSelected {
-      color: @kibanaGray1;
-      border-bottom-color: @kibanaGray1;
-    }
-  }
-
-  .localTab + .localTab {
-    margin-left: 20px;
-  }
diff --git a/src/ui/public/timepicker/__tests__/toggle.js b/src/ui/public/timepicker/__tests__/toggle.js
index 6c328cdc00530..efb2c9ec0eccd 100644
--- a/src/ui/public/timepicker/__tests__/toggle.js
+++ b/src/ui/public/timepicker/__tests__/toggle.js
@@ -18,6 +18,6 @@ describe('kbnGlobalTimepicker', function () {
   });
   it('injects the timepicker into the DOM', () => {
     const $el = compile();
-    expect($el.find('button[ng-click]')).to.have.length(3);
+    expect($el.attr('data-test-subj')).to.be('globalTimepicker');
   });
 });
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html
index ae4e9c27ba713..3e280b3b2c743 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.html
+++ b/src/ui/public/timepicker/kbn_global_timepicker.html
@@ -1,32 +1,38 @@
-<ul ng-show="timefilter.enabled" class="nav navbar-nav navbar-right navbar-timepicker">
-  <li>
-    <button
-      ng-click="toggleRefresh()"
-      ng-show="timefilter.refreshInterval.value > 0">
-      <i class="fa" ng-class="timefilter.refreshInterval.pause ? 'fa-play' : 'fa-pause'"></i>
-    </button>
-  </li>
+<div ng-show="timefilter.enabled" class="localMenu" data-test-subj="globalTimepicker">
+  <div
+    class="localMenuItem"
+    ng-click="toggleRefresh()"
+    ng-show="timefilter.refreshInterval.value > 0"
+  >
+    <i class="fa" ng-class="timefilter.refreshInterval.pause ? 'fa-play' : 'fa-pause'"></i>
+  </div>
 
-  <li
-    ng-show="timefilter.refreshInterval.value > 0 || kbnTopNav.isCurrent('interval') || kbnTopNav.isCurrent('filter')">
+  <div
+    class="localMenuItem navbar-timepicker-auto-refresh-desc"
+    ng-class="{'localMenuItem-isSelected': kbnTopNav.isCurrent('interval') }"
+    ng-show="timefilter.refreshInterval.value > 0 || kbnTopNav.isCurrent('interval') || kbnTopNav.isCurrent('filter')"
+    ng-click="kbnTopNav.toggle('interval')"
+  >
+    <span ng-show="timefilter.refreshInterval.value === 0">
+      <i class="fa fa-repeat"></i> Auto-refresh
+    </span>
+    <span ng-show="timefilter.refreshInterval.value > 0">
+      {{timefilter.refreshInterval.display}}
+    </span>
+  </div>
 
-    <button ng-click="kbnTopNav.toggle('interval')"
-    ng-class="{active: kbnTopNav.isCurrent('interval') }"
-    class="navbar-timepicker-auto-refresh-desc">
-      <span ng-show="timefilter.refreshInterval.value === 0"><i class="fa fa-repeat"></i> Auto-refresh</span>
-      <span ng-show="timefilter.refreshInterval.value > 0">{{timefilter.refreshInterval.display}}</span>
-    </button>
-
-  </li>
-
-  <li>
-    <button ng-class="{active: kbnTopNav.isCurrent('filter')}"
-      ng-click="kbnTopNav.toggle('filter')"
-      aria-haspopup="true"
-      aria-expanded="false"
-      class="navbar-timepicker-time-desc">
-      <i aria-hidden="true" class="fa fa-clock-o"></i>
-      <pretty-duration from="timefilter.time.from" to="timefilter.time.to"></pretty-duration>
-    </button>
-  </li>
-</ul>
+  <div
+    data-test-subj="globalTimepickerButton"
+    class="localMenuItem navbar-timepicker-time-desc"
+    ng-class="{'localMenuItem-isSelected': kbnTopNav.isCurrent('filter')}"
+    ng-click="kbnTopNav.toggle('filter')"
+    aria-haspopup="true"
+    aria-expanded="false"
+  >
+    <i aria-hidden="true" class="fa fa-clock-o"></i>
+    <pretty-duration
+      from="timefilter.time.from" to="timefilter.time.to"
+      data-test-subj="globalTimepickerRange"
+    ></pretty-duration>
+  </div>
+</div>
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js
index b4323d26dbccc..0656f3258e20d 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.js
+++ b/src/ui/public/timepicker/kbn_global_timepicker.js
@@ -18,6 +18,7 @@ UiModules
 
   return {
     template: toggleHtml,
+    replace: true,
     link: ($scope, $el, attrs) => {
       listenForUpdates($rootScope);
 
diff --git a/src/ui/public/timepicker/timepicker.html b/src/ui/public/timepicker/timepicker.html
index 62d7ae367fd86..35e24d94f6b11 100644
--- a/src/ui/public/timepicker/timepicker.html
+++ b/src/ui/public/timepicker/timepicker.html
@@ -23,7 +23,7 @@
 
     <!-- Filters -->
     <div ng-show="activeTab === 'filter'" role="tabpanel" class="tab-pane active">
-      <br>
+      <div class="localDropdownTitle">Time Range</div>
       <div class="row">
         <div class="col-md-2">
           <ul class="nav nav-pills nav-stacked kbn-timepicker-modes">
@@ -160,7 +160,7 @@
 
     <!-- Refresh Intervals -->
     <div ng-show="activeTab === 'interval'" role="tabpanel" class="tab-pane active">
-      <br>
+      <div class="localDropdownTitle">Refresh Interval</div>
       <div ng-repeat="list in refreshLists" class="kbn-refresh-section">
         <ul class="list-unstyled">
           <li ng-repeat="inter in list">
diff --git a/test/support/page_objects/console_page.js b/test/support/page_objects/console_page.js
index 1537e36bb58c1..4bea0fff6b633 100644
--- a/test/support/page_objects/console_page.js
+++ b/test/support/page_objects/console_page.js
@@ -17,7 +17,7 @@ export default class ConsolePage {
   }
 
   async getRequestEditor() {
-    return await PageObjects.common.findTestSubject('console request-editor');
+    return await PageObjects.common.findTestSubject('request-editor');
   }
 
   async getRequest() {
@@ -26,22 +26,22 @@ export default class ConsolePage {
   }
 
   async getResponse() {
-    const responseEditor = await PageObjects.common.findTestSubject('console response-editor');
+    const responseEditor = await PageObjects.common.findTestSubject('response-editor');
     return await getVisibleTextFromAceEditor(responseEditor);
   }
 
   async clickPlay() {
-    const sendRequestButton = await PageObjects.common.findTestSubject('console send-request-button');
+    const sendRequestButton = await PageObjects.common.findTestSubject('send-request-button');
     await sendRequestButton.click();
   }
 
   async collapseHelp() {
-    const closeButton = await PageObjects.common.findTestSubject('console help-close-button');
+    const closeButton = await PageObjects.common.findTestSubject('help-close-button');
     await closeButton.click();
   }
 
   async openSettings() {
-    const settingsButton = await PageObjects.common.findTestSubject('console top-nav menu-item-settings');
+    const settingsButton = await PageObjects.common.findTestSubject('consoleSettingsButton');
     await settingsButton.click();
   }
 
@@ -50,13 +50,13 @@ export default class ConsolePage {
 
     // while the settings form opens/loads this may fail, so retry for a while
     await PageObjects.common.try(async () => {
-      const fontSizeInput = await PageObjects.common.findTestSubject('console setting-font-size-input');
+      const fontSizeInput = await PageObjects.common.findTestSubject('setting-font-size-input');
       await fontSizeInput.clearValue();
       await fontSizeInput.click();
       await fontSizeInput.type(String(newSize));
     });
 
-    const saveButton = await PageObjects.common.findTestSubject('console settings-save-button');
+    const saveButton = await PageObjects.common.findTestSubject('settings-save-button');
     await saveButton.click();
   }
 
diff --git a/test/support/page_objects/dashboard_page.js b/test/support/page_objects/dashboard_page.js
index 3b15bec5b955f..4b5be98a99afe 100644
--- a/test/support/page_objects/dashboard_page.js
+++ b/test/support/page_objects/dashboard_page.js
@@ -14,13 +14,13 @@ export default class DashboardPage {
 
   clickNewDashboard() {
     return this.findTimeout
-    .findByCssSelector('button.ng-scope[aria-label="New Dashboard"]')
+    .findByCssSelector('[aria-label="New Dashboard"]')
     .click();
   }
 
   clickAddVisualization() {
     return this.findTimeout
-    .findByCssSelector('button.ng-scope[aria-label="Add a panel to the dashboard"]')
+    .findByCssSelector('[aria-label="Add a panel to the dashboard"]')
     .click();
   }
 
@@ -71,7 +71,7 @@ export default class DashboardPage {
 
   saveDashboard(dashName) {
     return this.findTimeout
-    .findByCssSelector('button.ng-scope[aria-label="Save Dashboard"]')
+    .findByCssSelector('[aria-label="Save Dashboard"]')
     .click()
     .then(() => {
       return PageObjects.header.getSpinnerDone();
@@ -126,7 +126,7 @@ export default class DashboardPage {
   loadSavedDashboard(dashName) {
     var self = this;
     return this.findTimeout
-    .findByCssSelector('button.ng-scope[aria-label="Load Saved Dashboard"]')
+    .findByCssSelector('[aria-label="Open Saved Dashboard"]')
     .click()
     .then(function filterDashboard() {
       PageObjects.common.debug('Load Saved Dashboard button clicked');
diff --git a/test/support/page_objects/discover_page.js b/test/support/page_objects/discover_page.js
index 0728a1b8ee341..f7b7cdd7579b9 100644
--- a/test/support/page_objects/discover_page.js
+++ b/test/support/page_objects/discover_page.js
@@ -23,8 +23,7 @@ export default class DiscoverPage {
   }
 
   getTimespanText() {
-    return this.findTimeout
-    .findByCssSelector('.kibana-nav-options .navbar-timepicker-time-desc pretty-duration')
+    return PageObjects.common.findTestSubject('globalTimepickerRange')
     .getVisibleText();
   }
 
@@ -59,25 +58,24 @@ export default class DiscoverPage {
 
   clickNewSearchButton() {
     return this.findTimeout
-    .findByCssSelector('button[aria-label="New Search"]')
+    .findByCssSelector('[aria-label="New Search"]')
     .click();
   }
 
   clickSaveSearchButton() {
     return this.findTimeout
-    .findByCssSelector('button[aria-label="Save Search"]')
+    .findByCssSelector('[aria-label="Save Search"]')
     .click();
   }
 
   clickLoadSavedSearchButton() {
     return this.findTimeout
-    .findDisplayedByCssSelector('button[aria-label="Load Saved Search"]')
+    .findDisplayedByCssSelector('[aria-label="Load Saved Search"]')
     .click();
   }
 
   getCurrentQueryName() {
-    return this.findTimeout
-      .findByCssSelector('span.kibana-nav-info-title span')
+    return PageObjects.common.findTestSubject('discoverCurrentQuery')
       .getVisibleText();
   }
 
@@ -143,8 +141,7 @@ export default class DiscoverPage {
   getHitCount() {
     return PageObjects.header.getSpinnerDone()
     .then(() => {
-      return this.findTimeout
-      .findByCssSelector('strong.discover-info-hits')
+      return PageObjects.common.findTestSubject('discoverQueryHits')
       .getVisibleText();
     });
   }
@@ -196,31 +193,27 @@ export default class DiscoverPage {
 
   clickShare() {
     return this.findTimeout
-    .findByCssSelector('button[aria-label="Share Search"]')
+    .findByCssSelector('[aria-label="Share Search"]')
     .click();
   }
 
   clickShortenUrl() {
-    return this.findTimeout
-    .findByCssSelector('[data-test-subj="sharedSnapshotShortUrlButton"]')
+    return PageObjects.common.findTestSubject('sharedSnapshotShortUrlButton')
     .click();
   }
 
   clickCopyToClipboard() {
-    return this.findTimeout
-    .findByCssSelector('[data-test-subj="sharedSnapshotCopyButton"]')
+    return PageObjects.common.findTestSubject('sharedSnapshotCopyButton')
     .click();
   }
 
   getShareCaption() {
-    return this.findTimeout
-    .findByCssSelector('[data-test-subj="shareUiTitle"]')
+    return PageObjects.common.findTestSubject('shareUiTitle')
     .getVisibleText();
   }
 
   getSharedUrl() {
-    return this.findTimeout
-    .findByCssSelector('[data-test-subj="sharedSnapshotUrl"]')
+    return PageObjects.common.findTestSubject('sharedSnapshotUrl')
     .getProperty('value');
   }
 
diff --git a/test/support/page_objects/header_page.js b/test/support/page_objects/header_page.js
index 9312895531a62..d847ebe503ba1 100644
--- a/test/support/page_objects/header_page.js
+++ b/test/support/page_objects/header_page.js
@@ -42,8 +42,8 @@ export default class HeaderPage {
   }
 
   clickTimepicker() {
-    return this.remote.setFindTimeout(defaultFindTimeout)
-    .findDisplayedByClassName('navbar-timepicker-time-desc').click();
+    return PageObjects.common.findTestSubject('globalTimepickerButton')
+    .click();
   }
 
   isTimepickerOpen() {
@@ -104,16 +104,10 @@ export default class HeaderPage {
       return this.getSpinnerDone();
     })
     .then(() => {
-      return this.collapseTimepicker();
+      return this.clickTimepicker();
     });
   }
 
-  collapseTimepicker() {
-    return this.remote.setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('.fa.fa-chevron-circle-up')
-    .click();
-  }
-
   getToastMessage() {
     return this.remote.setFindTimeout(defaultFindTimeout)
     .findDisplayedByCssSelector('kbn-truncated.toast-message.ng-isolate-scope')
diff --git a/test/support/page_objects/settings_page.js b/test/support/page_objects/settings_page.js
index 76302d405e02f..1d22b7ad5b7ad 100644
--- a/test/support/page_objects/settings_page.js
+++ b/test/support/page_objects/settings_page.js
@@ -32,14 +32,14 @@ export default class SettingsPage {
 
   getAdvancedSettings(propertyName) {
     PageObjects.common.debug('in setAdvancedSettings');
-    return PageObjects.common.findTestSubject('advancedSetting&' + propertyName + ' currentValue')
+    return PageObjects.common.findTestSubject('advancedSetting-' + propertyName + '-currentValue')
     .getVisibleText();
   }
 
   setAdvancedSettings(propertyName, propertyValue) {
     var self = this;
 
-    return PageObjects.common.findTestSubject('advancedSetting&' + propertyName + ' editButton')
+    return PageObjects.common.findTestSubject('advancedSetting-' + propertyName + '-editButton')
     .click()
     .then(() => {
       return PageObjects.header.getSpinnerDone();
@@ -56,7 +56,7 @@ export default class SettingsPage {
       return PageObjects.header.getSpinnerDone();
     })
     .then(function setAdvancedSettingsClickSaveButton() {
-      return PageObjects.common.findTestSubject('advancedSetting&' + propertyName + ' saveButton')
+      return PageObjects.common.findTestSubject('advancedSetting-' + propertyName + '-saveButton')
       .click();
     })
     .then(() => {
@@ -67,7 +67,7 @@ export default class SettingsPage {
   getAdvancedSettings(propertyName) {
     var self = this;
     PageObjects.common.debug('in setAdvancedSettings');
-    return PageObjects.common.findTestSubject('advancedSetting&' + propertyName + ' currentValue')
+    return PageObjects.common.findTestSubject('advancedSetting-' + propertyName + '-currentValue')
     .getVisibleText();
   }
 
diff --git a/test/support/page_objects/visualize_page.js b/test/support/page_objects/visualize_page.js
index fbffee157d5ff..d6305c6371567 100644
--- a/test/support/page_objects/visualize_page.js
+++ b/test/support/page_objects/visualize_page.js
@@ -296,7 +296,7 @@ export default class VisualizePage {
   clickNewVisualization() {
     return this.remote
     .setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('button[aria-label="New Visualization"]')
+    .findByCssSelector('[aria-label="New Visualization"]')
     .click();
   }
 
@@ -304,7 +304,7 @@ export default class VisualizePage {
   saveVisualization(vizName) {
     return this.remote
     .setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('button[aria-label="Save Visualization"]')
+    .findByCssSelector('[aria-label="Save Visualization"]')
     .click()
     .then(() => {
       return PageObjects.common.sleep(1000);
@@ -319,9 +319,7 @@ export default class VisualizePage {
     //   // click save button
     .then(() => {
       PageObjects.common.debug('click submit button');
-      return this.remote
-      .setFindTimeout(defaultFindTimeout)
-      .findByCssSelector('.config button[type="submit"]')
+      return PageObjects.common.findTestSubject('saveVisualizationButton')
       .click();
     })
     .then(function () {
@@ -343,7 +341,7 @@ export default class VisualizePage {
   clickLoadSavedVisButton() {
     return this.remote
       .setFindTimeout(defaultFindTimeout)
-      .findDisplayedByCssSelector('button[aria-label="Load Saved Visualization"]')
+      .findDisplayedByCssSelector('[aria-label="Open Saved Visualization"]')
       .click();
   }