diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index e1d09b2bd4f2f..397d3f607fe61 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -62,6 +62,7 @@ html {
   font-size: 16px;
   color: #3F3F3F;
   height: 100%;
+  background-color: #F5F5F5;
   -webkit-font-smoothing: antialiased; }
 
 body {
@@ -347,12 +348,13 @@ table {
   border: solid 1px #0079a5;
   border-radius: 4px;
   color: #0079a5;
-  padding: 0 8px;
+  padding: 0 12px;
   min-width: 112px;
   text-align: center;
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
   whitespace: nowrap;
+  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2);
   /**
    * 1. Apply margin to all but last item in the flex.
    */ }
@@ -481,7 +483,7 @@ table {
             transform: translateY(2px); } }
 
 .kuiCallOut {
-  padding: 16px 24px;
+  padding: 12px 24px;
   border-left: 4px solid #0079a5;
   background-color: #e6f2f6;
   /* 1 */ }
@@ -550,7 +552,8 @@ table {
   display: -ms-flexbox;
   display: flex;
   background: #FFF;
-  border-bottom: 1px solid #D9D9D9; }
+  border-bottom: 1px solid #D9D9D9;
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); }
 
 .kuiHeader__notification {
   display: inline-block;
@@ -623,7 +626,7 @@ table {
 .kuiHeaderLogo {
   position: relative;
   height: 64px;
-  padding: 16px 32px;
+  padding: 16px 24px;
   display: inline-block;
   vertical-align: middle; }
   .kuiHeaderLogo:hover {
@@ -1201,7 +1204,11 @@ table {
             transform: translateY(0); } }
 
 .kuiPage {
-  padding: 32px; }
+  padding: 24px; }
+
+@media only screen and (max-width: 768px) {
+  .kuiPage {
+    padding: 24px 0; } }
 
 .kuiPageBody {
   display: -webkit-box;
@@ -1232,7 +1239,8 @@ table {
   background: #FFF;
   border: 1px solid #D9D9D9;
   border-radius: 4px;
-  width: 100%; }
+  width: 100%;
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); }
 
 .kuiPageContent--verticalCenter {
   -webkit-align-self: center;
@@ -1244,8 +1252,13 @@ table {
   width: auto;
   margin: auto; }
 
+@media only screen and (max-width: 768px) {
+  .kuiPageContent {
+    border-radius: 0;
+    border: none; } }
+
 .kuiPageContentHeader {
-  margin-bottom: 32px;
+  margin-bottom: 24px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1284,15 +1297,14 @@ table {
 
 .kuiPageSidebar {
   width: 192px;
-  margin-right: 32px; }
+  margin-right: 24px; }
 
 @media only screen and (max-width: 768px) {
   .kuiPageSidebar {
-    width: 100%;
-    margin-bottom: 32px; } }
+    width: 100%; } }
 
 .kuiPageHeader {
-  margin-bottom: 32px;
+  margin-bottom: 24px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1317,7 +1329,9 @@ table {
     -webkit-box-direction: normal;
     -webkit-flex-direction: column;
         -ms-flex-direction: column;
-            flex-direction: column; } }
+            flex-direction: column;
+    padding: 0 24px;
+    margin-bottom: 0; } }
 
 .kuiPageHeaderSection + .kuiPageHeaderSection {
   margin-left: 32px; }
@@ -1399,6 +1413,97 @@ table {
     right: 16px;
     left: auto; }
 
+.kuiSideNav__mobileToggle {
+  display: none;
+  border-bottom: 1px solid #D9D9D9;
+  padding: 16px 24px;
+  width: 100%;
+  text-align: left;
+  /**
+   * 1. This toggle also works with KUI link, but we need the outline
+   *    that comes with the focus state.
+   */ }
+  .kuiSideNav__mobileToggle:focus {
+    outline: none; }
+
+.kuiSideNav__mobileIcon {
+  fill: #0079a5; }
+
+.kuiSideNav__mobileWrap {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
+.kuiSideNav__mobileTitle {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  color: #0079a5; }
+
+@media only screen and (max-width: 768px) {
+  /**
+   * 1. Animation doesn't work against height. Need max-height instead.
+   *    We set a value larger than what is needed to fake "auto".
+   */
+  .kuiSideNav.kuiSideNav-isOpenMobile .kuiSideNav__content {
+    visibility: visible;
+    opacity: 1;
+    margin: 24px;
+    max-height: 5000px;
+    /* 1 */
+    transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
+  .kuiSideNav__mobileToggle {
+    display: block; }
+  .kuiSideNav__content {
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+    margin: 0 24px; } }
+
+.kuiSideNavItem {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 18px;
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 4px 8px;
+  color: #666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid #D9D9D9;
+  border-color: transparent; }
+  .kuiSideNavItem.kuiSideNavItem-isSelected {
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+    color: #00A69B;
+    border-left: 2px solid #D9D9D9;
+    border-left-color: #00A69B;
+    background-color: #FFF; }
+  .kuiSideNavItem:hover {
+    text-decoration: underline; }
+  .kuiSideNavItem:focus {
+    background-color: #e6f2f6; }
+  .kuiSideNavItem:focus:not(.kuiSideNavItem-isSelected) {
+    border: solid 1px #c1dfe9; }
+
+.kuiSideNavTitle {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 24px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  margin-top: 16px;
+  /**
+   * 1. Only want the first title to have margin. Since buttons exist in nav
+   *    we need to use first of type.
+   */ }
+  .kuiSideNavTitle:first-of-type {
+    margin-top: 0;
+    /* 1 */ }
+
 /**
  * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed.
  */
diff --git a/ui_framework/doc_site/src/components/guide/_guide.scss b/ui_framework/doc_site/src/components/guide/_guide.scss
index 27ec58059c2c2..77a7065e51dee 100644
--- a/ui_framework/doc_site/src/components/guide/_guide.scss
+++ b/ui_framework/doc_site/src/components/guide/_guide.scss
@@ -4,8 +4,6 @@ html {
 
 .guideBody {
   height: 100%;
-  background-color: #000000;
-  min-width: $guideMinWidth;
 }
 
 /**
@@ -22,7 +20,6 @@ html {
   flex-direction: column;
   flex: 1 1 auto;
   padding-top: $guideNavHeight;
-  background-color: $guideBaseBackgroundColor;
   transition:
     padding-top $guideChromeTransition,
     padding-right $guideCodeViewerTransition,
diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
index 4891e589aae46..c2f5ead97aaf3 100644
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@@ -36,6 +36,9 @@ import LoadingExample
 import PopoverExample
   from '../../views/popover/popover_example';
 
+import SideNavExample
+  from '../../views/side_nav/side_nav_example';
+
 import TableExample
   from '../../views/table/table_example';
 
@@ -90,6 +93,10 @@ const components = [{
   name: 'Popover',
   component: PopoverExample,
   hasReact: true,
+}, {
+  name: 'SideNav',
+  component: SideNavExample,
+  hasReact: true,
 }, {
   name: 'Table',
   component: TableExample,
diff --git a/ui_framework/doc_site/src/views/kibana/kibana.js b/ui_framework/doc_site/src/views/kibana/kibana.js
index 9d40b042bf07f..7c91a8d89f275 100644
--- a/ui_framework/doc_site/src/views/kibana/kibana.js
+++ b/ui_framework/doc_site/src/views/kibana/kibana.js
@@ -3,6 +3,7 @@ import React, {
 } from 'react';
 
 import {
+  KuiButton,
   KuiHeader,
   KuiHeaderBreadcrumb,
   KuiHeaderBreadcrumbCollapsed,
@@ -24,6 +25,9 @@ import {
   KuiPageHeaderSection,
   KuiPageSidebar,
   KuiPopover,
+  KuiSideNav,
+  KuiSideNavItem,
+  KuiSideNavTitle,
   KuiTitle,
 } from '../../../../components';
 
@@ -289,30 +293,49 @@ export default class extends Component {
         <KuiPageHeader>
           <KuiPageHeaderSection>
             <KuiTitle size="large">
-              <h1>Page title</h1>
+              <h1>Management</h1>
             </KuiTitle>
           </KuiPageHeaderSection>
-          <KuiPageHeaderSection>
-            Page abilities
-          </KuiPageHeaderSection>
         </KuiPageHeader>
         <KuiPageBody>
           <KuiPageSidebar>
-            Sidebar nav
+            <KuiSideNav>
+              <KuiSideNavTitle>Elasticsearch</KuiSideNavTitle>
+              <KuiSideNavItem>Data sources</KuiSideNavItem>
+              <KuiSideNavItem>Users</KuiSideNavItem>
+              <KuiSideNavItem>Roles</KuiSideNavItem>
+              <KuiSideNavItem isSelected>Watches</KuiSideNavItem>
+              <KuiSideNavItem>Extremely long item is long</KuiSideNavItem>
+
+              <KuiSideNavTitle>Kibana</KuiSideNavTitle>
+              <KuiSideNavItem>Index Patterns</KuiSideNavItem>
+              <KuiSideNavItem>Saved Objects</KuiSideNavItem>
+              <KuiSideNavItem>Reporting</KuiSideNavItem>
+
+              <KuiSideNavTitle>Logstash</KuiSideNavTitle>
+              <KuiSideNavItem>Pipeline Viewer</KuiSideNavItem>
+            </KuiSideNav>
           </KuiPageSidebar>
           <KuiPageContent>
             <KuiPageContentHeader>
               <KuiPageContentHeaderSection>
                 <KuiTitle>
-                  <h2>Content title</h2>
+                  <h2>Watches</h2>
                 </KuiTitle>
               </KuiPageContentHeaderSection>
               <KuiPageContentHeaderSection>
-                Content abilities
+                <KuiButton
+                  fill
+                  icon = "arrowDown"
+                  onClick={() => window.alert('Button clicked')}
+                  iconReverse
+                >
+                  Create new watch
+                </KuiButton>
               </KuiPageContentHeaderSection>
             </KuiPageContentHeader>
             <KuiPageContentBody>
-              Content body
+              asdf
             </KuiPageContentBody>
           </KuiPageContent>
         </KuiPageBody>
diff --git a/ui_framework/doc_site/src/views/side_nav/side_nav.js b/ui_framework/doc_site/src/views/side_nav/side_nav.js
new file mode 100644
index 0000000000000..ab2f5038933c5
--- /dev/null
+++ b/ui_framework/doc_site/src/views/side_nav/side_nav.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  KuiSideNav,
+  KuiSideNavItem,
+  KuiSideNavTitle,
+} from '../../../../components';
+
+export default () => (
+  <KuiSideNav>
+    <KuiSideNavTitle>Elasticsearch</KuiSideNavTitle>
+    <KuiSideNavItem>Data sources</KuiSideNavItem>
+    <KuiSideNavItem>Users</KuiSideNavItem>
+    <KuiSideNavItem>Roles</KuiSideNavItem>
+    <KuiSideNavItem isSelected>Watches</KuiSideNavItem>
+    <KuiSideNavItem>Extremely long item is long</KuiSideNavItem>
+
+    <KuiSideNavTitle>Kibana</KuiSideNavTitle>
+    <KuiSideNavItem>Index Patterns</KuiSideNavItem>
+    <KuiSideNavItem>Saved Objects</KuiSideNavItem>
+    <KuiSideNavItem>Reporting</KuiSideNavItem>
+
+    <KuiSideNavTitle>Logstash</KuiSideNavTitle>
+    <KuiSideNavItem>Pipeline Viewer</KuiSideNavItem>
+  </KuiSideNav>
+);
diff --git a/ui_framework/doc_site/src/views/side_nav/side_nav_example.js b/ui_framework/doc_site/src/views/side_nav/side_nav_example.js
new file mode 100644
index 0000000000000..447cb6509795f
--- /dev/null
+++ b/ui_framework/doc_site/src/views/side_nav/side_nav_example.js
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+import SideNav from './side_nav';
+const sideNavSource = require('!!raw!./side_nav');
+const sideNavHtml = renderToHtml(SideNav);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="SideNav"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: sideNavSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: sideNavHtml,
+      }]}
+    >
+      <GuideText>
+        The sidenav is a responsive menu system that usually sits on the left side of a page layout.
+        It will exapand to the width of its container.
+      </GuideText>
+
+      <GuideDemo>
+        <SideNav />
+      </GuideDemo>
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/src/components/button/_button.scss b/ui_framework/src/components/button/_button.scss
index 4eff8b618dac0..859519bfbc8c6 100644
--- a/ui_framework/src/components/button/_button.scss
+++ b/ui_framework/src/components/button/_button.scss
@@ -8,12 +8,13 @@
   border: solid 1px $kuiColorPrimary;
   border-radius: $kuiBorderRadius;
   color: $kuiColorPrimary;
-  padding: 0 $kuiSizeS;
+  padding: 0 ($kuiSize - $kuiSizeXS);
   min-width: $kuiSize * 7;
   text-align: center;
   font-family: $kuiFontFamily;
   transition: all $kuiAnimSpeedNormal $kuiAnimSlightBounce;
   whitespace: nowrap;
+  @include kuiBottomShadowMedium;
 
   &.kuiButton--small {
     height: $kuiSizeXL;
diff --git a/ui_framework/src/components/header/_header.scss b/ui_framework/src/components/header/_header.scss
index 79859dfdb1f11..f845ce16e6d9f 100644
--- a/ui_framework/src/components/header/_header.scss
+++ b/ui_framework/src/components/header/_header.scss
@@ -4,6 +4,7 @@
   display: flex;
   background: $kuiHeaderBackgroundColor;
   border-bottom: $kuiBorderThin;
+  @include kuiBottomShadowSmall;
 }
 
   .kuiHeader__notification {
diff --git a/ui_framework/src/components/header/_header_logo.scss b/ui_framework/src/components/header/_header_logo.scss
index eebefb81c3ac8..f4a52a831b126 100644
--- a/ui_framework/src/components/header/_header_logo.scss
+++ b/ui_framework/src/components/header/_header_logo.scss
@@ -3,7 +3,7 @@
 
   position: relative;
   height: $kuiHeaderChildSize;
-  padding: $kuiSize $kuiSizeXL;
+  padding: $kuiSize $kuiSizeL;
   display: inline-block;
   vertical-align: middle;
 }
diff --git a/ui_framework/src/components/icon/_icon.scss b/ui_framework/src/components/icon/_icon.scss
index a3c3cd1a85988..87749f040d62a 100644
--- a/ui_framework/src/components/icon/_icon.scss
+++ b/ui_framework/src/components/icon/_icon.scss
@@ -13,7 +13,7 @@
 }
 
 .kuiIcon--medium {
-  @include size($kuiSizeM);
+  @include size($kuiSize);
 }
 
 .kuiIcon--large {
diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js
index 28f5a53fbfc1d..882c60675fec6 100644
--- a/ui_framework/src/components/index.js
+++ b/ui_framework/src/components/index.js
@@ -90,6 +90,12 @@ export {
   KuiTabs,
 } from './tabs';
 
+export {
+  KuiSideNav,
+  KuiSideNavItem,
+  KuiSideNavTitle,
+} from './side_nav';
+
 export {
   KuiTitle,
   KuiText,
diff --git a/ui_framework/src/components/index.scss b/ui_framework/src/components/index.scss
index e9ea0209a918d..802ebbf7c984f 100644
--- a/ui_framework/src/components/index.scss
+++ b/ui_framework/src/components/index.scss
@@ -12,6 +12,7 @@
 @import 'modal/index';
 @import 'page/index';
 @import 'popover/index';
+@import 'side_nav/index';
 @import 'table/index';
 @import 'tabs/index';
 @import 'typography/index';
diff --git a/ui_framework/src/components/loading/_loading_kibana.scss b/ui_framework/src/components/loading/_loading_kibana.scss
index ab601fc1f7f6c..02acb1c4be05f 100644
--- a/ui_framework/src/components/loading/_loading_kibana.scss
+++ b/ui_framework/src/components/loading/_loading_kibana.scss
@@ -59,7 +59,7 @@
   &:before,
   &:after {
     height: $kuiSizeS;
-    bottom: -($kuiSize - $kuiSizeXS);
+    bottom: -$kuiSizeM;
   }
   .kuiLoadingKibana__icon {
     animation: 1s kuiLoadingKibanaBounceXLarge $kuiAnimSlightResistance infinite;
@@ -74,7 +74,7 @@
 
 @keyframes kuiLoadingKibanaBounceLarge {
   50% {
-    transform: translateY(-($kuiSize - $kuiSizeXS));
+    transform: translateY(-$kuiSizeM);
   }
 }
 
diff --git a/ui_framework/src/components/page/_page.scss b/ui_framework/src/components/page/_page.scss
index 3cf6817e89040..3bac0decab7f8 100644
--- a/ui_framework/src/components/page/_page.scss
+++ b/ui_framework/src/components/page/_page.scss
@@ -1,3 +1,9 @@
 .kuiPage {
-  padding: $kuiSizeXL;
+  padding: $kuiSizeL;
+}
+
+@include screenXSmall {
+  .kuiPage {
+    padding: $kuiSizeL 0;
+  }
 }
diff --git a/ui_framework/src/components/page/page_content/_page_content.scss b/ui_framework/src/components/page/page_content/_page_content.scss
index f1af5e0ac13ed..7ab2067490f6e 100644
--- a/ui_framework/src/components/page/page_content/_page_content.scss
+++ b/ui_framework/src/components/page/page_content/_page_content.scss
@@ -4,6 +4,7 @@
   border: $kuiBorderThin;
   border-radius: $kuiBorderRadius;
   width: 100%;
+  @include kuiBottomShadowSmall;
 }
 
 .kuiPageContent--verticalCenter {
@@ -14,3 +15,10 @@
   width: auto;
   margin: auto;
 }
+
+@include screenXSmall {
+  .kuiPageContent {
+    border-radius: 0;
+    border: none;
+  }
+}
diff --git a/ui_framework/src/components/page/page_content/_page_content_header.scss b/ui_framework/src/components/page/page_content/_page_content_header.scss
index f3353ac87005b..0672586beadc0 100644
--- a/ui_framework/src/components/page/page_content/_page_content_header.scss
+++ b/ui_framework/src/components/page/page_content/_page_content_header.scss
@@ -1,5 +1,5 @@
 .kuiPageContentHeader {
-  margin-bottom: $kuiSizeXL;
+  margin-bottom: $kuiSizeL;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
diff --git a/ui_framework/src/components/page/page_header/_page_header.scss b/ui_framework/src/components/page/page_header/_page_header.scss
index cc5d41ebf2c4c..80772254f976a 100644
--- a/ui_framework/src/components/page/page_header/_page_header.scss
+++ b/ui_framework/src/components/page/page_header/_page_header.scss
@@ -1,5 +1,5 @@
 .kuiPageHeader {
-  margin-bottom: $kuiSizeXL;
+  margin-bottom: $kuiSizeL;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -9,6 +9,7 @@
 @include screenXSmall {
   .kuiPageHeader {
     flex-direction: column;
+    padding: 0 $kuiSizeL;
+    margin-bottom: 0;
   }
-
 }
diff --git a/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss b/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss
index 70cc8b1b4e6bd..a85be72458967 100644
--- a/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss
+++ b/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss
@@ -1,12 +1,11 @@
 .kuiPageSidebar {
   width: $kuiSize * 12;
-  margin-right: $kuiSizeXL;
+  margin-right: $kuiSizeL;
 }
 
 @include screenXSmall {
   .kuiPageSidebar {
     width: 100%;
-    margin-bottom: $kuiSizeXL;
   }
 }
 
diff --git a/ui_framework/src/components/side_nav/_index.scss b/ui_framework/src/components/side_nav/_index.scss
new file mode 100644
index 0000000000000..86323c26b3903
--- /dev/null
+++ b/ui_framework/src/components/side_nav/_index.scss
@@ -0,0 +1,3 @@
+@import 'side_nav';
+@import 'side_nav_item';
+@import 'side_nav_title';
diff --git a/ui_framework/src/components/side_nav/_side_nav.scss b/ui_framework/src/components/side_nav/_side_nav.scss
new file mode 100644
index 0000000000000..40e8255c76c6a
--- /dev/null
+++ b/ui_framework/src/components/side_nav/_side_nav.scss
@@ -0,0 +1,55 @@
+// These mobile children are hidden in everything but mobile view.
+.kuiSideNav__mobileToggle {
+  display: none;
+  border-bottom: $kuiBorderThin;
+  padding: $kuiSize $kuiSizeL;
+  width: 100%;
+  text-align: left;
+
+  /**
+   * 1. This toggle also works with KUI link, but we need the outline
+   *    that comes with the focus state.
+   */
+  &:focus {
+    outline: none;
+  }
+}
+
+.kuiSideNav__mobileIcon {
+  fill: $kuiColorPrimary;
+}
+
+.kuiSideNav__mobileWrap {
+  display: flex;
+}
+
+.kuiSideNav__mobileTitle {
+  flex-grow: 1;
+  color: $kuiColorPrimary;
+}
+
+@include screenXSmall {
+  /**
+   * 1. Animation doesn't work against height. Need max-height instead.
+   *    We set a value larger than what is needed to fake "auto".
+   */
+  .kuiSideNav.kuiSideNav-isOpenMobile .kuiSideNav__content {
+    visibility: visible;
+    opacity: 1;
+    margin: $kuiSizeL;
+    max-height: 5000px; /* 1 */
+    transition: all $kuiAnimSpeedNormal $kuiAnimSlightResistance;
+  }
+
+  .kuiSideNav__mobileToggle {
+    display: block;
+  }
+
+  .kuiSideNav__content {
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+    margin: 0 $kuiSizeL;
+
+  }
+}
diff --git a/ui_framework/src/components/side_nav/_side_nav_item.scss b/ui_framework/src/components/side_nav/_side_nav_item.scss
new file mode 100644
index 0000000000000..ff0c48a5fd012
--- /dev/null
+++ b/ui_framework/src/components/side_nav/_side_nav_item.scss
@@ -0,0 +1,33 @@
+.kuiSideNavItem {
+  @include kuiFontSizeS;
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: $kuiSizeXS $kuiSizeS;
+  color: $kuiColorDarkShade;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: $kuiBorderThin;
+  border-color: transparent;
+
+  &.kuiSideNavItem-isSelected {
+    @include kuiBottomShadowSmall;
+    color: $kuiColorSecondary;
+    border-left: $kuiBorderThick;
+    border-left-color: $kuiColorSecondary;
+    background-color: $kuiColorEmptyShade;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus {
+    background-color: $kuiFocusBackgroundColor;
+  }
+
+  &:focus:not(.kuiSideNavItem-isSelected) {
+    border: solid 1px darken($kuiFocusBackgroundColor, 10%);
+  }
+}
diff --git a/ui_framework/src/components/side_nav/_side_nav_title.scss b/ui_framework/src/components/side_nav/_side_nav_title.scss
new file mode 100644
index 0000000000000..450e5a9c6d058
--- /dev/null
+++ b/ui_framework/src/components/side_nav/_side_nav_title.scss
@@ -0,0 +1,14 @@
+.kuiSideNavTitle {
+  @include kuiFontSize;
+  font-weight: $kuiFontWeightMedium;
+  margin-bottom: $kuiSizeS;
+  margin-top: $kuiSize;
+
+  /**
+   * 1. Only want the first title to have margin. Since buttons exist in nav
+   *    we need to use first of type.
+   */
+  &:first-of-type {
+    margin-top: 0; /* 1 */
+  }
+}
diff --git a/ui_framework/src/components/side_nav/index.js b/ui_framework/src/components/side_nav/index.js
new file mode 100644
index 0000000000000..84e62eda4b73e
--- /dev/null
+++ b/ui_framework/src/components/side_nav/index.js
@@ -0,0 +1,3 @@
+export { KuiSideNav } from './side_nav';
+export { KuiSideNavItem } from './side_nav_item';
+export { KuiSideNavTitle } from './side_nav_title';
diff --git a/ui_framework/src/components/side_nav/side_nav.js b/ui_framework/src/components/side_nav/side_nav.js
new file mode 100644
index 0000000000000..ed55543170aec
--- /dev/null
+++ b/ui_framework/src/components/side_nav/side_nav.js
@@ -0,0 +1,47 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+import { KuiIcon } from '../../components';
+
+export const KuiSideNav = ({ children, isOpenMobile, className, ...rest }) => {
+  const classes = classNames(
+    'kuiSideNav',
+    className,
+    {
+      'kuiSideNav-isOpenMobile': isOpenMobile,
+    },
+  );
+
+  return (
+    <nav
+      className={classes}
+      {...rest}
+    >
+      {/* Hidden from view, except in mobile */}
+      <button className="kuiSideNav__mobileToggle kuiLink">
+        <span className="kuiSideNav__mobileWrap">
+          <span className="kuiSideNav__mobileTitle">Navigate within management</span>
+          <span>
+            <KuiIcon
+              className="kuiSideNav__mobileIcon"
+              type="apps"
+              size="medium"
+            />
+          </span>
+        </span>
+      </button>
+
+      {/* Hidden from view in mobile, but toggled from the button above */}
+      <div className="kuiSideNav__content">{children}</div>
+    </nav>
+  );
+};
+
+KuiSideNav.propTypes = {
+  isOpenMobile: PropTypes.string,
+};
+
+KuiSideNav.defaultProps = {
+  isOpenMobile: false,
+};
diff --git a/ui_framework/src/components/side_nav/side_nav.test.js b/ui_framework/src/components/side_nav/side_nav.test.js
new file mode 100644
index 0000000000000..6e9b89a6807a7
--- /dev/null
+++ b/ui_framework/src/components/side_nav/side_nav.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiSideNav } from './side_nav';
+
+describe('KuiSideNav', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiSideNav { ...requiredProps } />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/ui_framework/src/components/side_nav/side_nav_item.js b/ui_framework/src/components/side_nav/side_nav_item.js
new file mode 100644
index 0000000000000..97ee8821d13d0
--- /dev/null
+++ b/ui_framework/src/components/side_nav/side_nav_item.js
@@ -0,0 +1,27 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiSideNavItem = ({ children, isSelected, className, ...rest }) => {
+  const classes = classNames(
+    'kuiSideNavItem',
+    className,
+    {
+      'kuiSideNavItem-isSelected' : isSelected,
+    }
+  );
+
+  return (
+    <button
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+KuiSideNavItem.propTypes = {
+  isSelected: PropTypes.string,
+};
diff --git a/ui_framework/src/components/side_nav/side_nav_item.test.js b/ui_framework/src/components/side_nav/side_nav_item.test.js
new file mode 100644
index 0000000000000..68e87a0096347
--- /dev/null
+++ b/ui_framework/src/components/side_nav/side_nav_item.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiSideNavItem } from './side_nav_item';
+
+describe('KuiSideNavItem', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiSideNavItem { ...requiredProps } />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/ui_framework/src/components/side_nav/side_nav_title.js b/ui_framework/src/components/side_nav/side_nav_title.js
new file mode 100644
index 0000000000000..3829d95f16143
--- /dev/null
+++ b/ui_framework/src/components/side_nav/side_nav_title.js
@@ -0,0 +1,26 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+import {
+  KuiTitle,
+} from '../../components';
+
+export const KuiSideNavTitle = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiSideNavTitle', className);
+
+  return (
+    <div
+      className={classes}
+      {...rest}
+    >
+      <KuiTitle size="small">
+        <span>{children}</span>
+      </KuiTitle>
+    </div>
+  );
+};
+
+KuiSideNavTitle.propTypes = {
+};
diff --git a/ui_framework/src/components/side_nav/side_nav_title.test.js b/ui_framework/src/components/side_nav/side_nav_title.test.js
new file mode 100644
index 0000000000000..bf89b44bc8fc4
--- /dev/null
+++ b/ui_framework/src/components/side_nav/side_nav_title.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiSideNavTitle } from './side_nav_title';
+
+describe('KuiSideNavTitle', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiSideNavTitle { ...requiredProps } />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/ui_framework/src/components/table/_index.scss b/ui_framework/src/components/table/_index.scss
index 30f3ccd117a7e..e2e02bd7b4164 100644
--- a/ui_framework/src/components/table/_index.scss
+++ b/ui_framework/src/components/table/_index.scss
@@ -1,4 +1,4 @@
-$kuiTableCellPadding: $kuiSizeM - $kuiSizeXS;
+$kuiTableCellPadding: $kuiSizeM;
 $kuiTableCellPaddingCompressed: $kuiSizeS;
 
 /**
diff --git a/ui_framework/src/components/tabs/_tabs.scss b/ui_framework/src/components/tabs/_tabs.scss
index 4397fb37cf3fa..fb7fd86d209ab 100644
--- a/ui_framework/src/components/tabs/_tabs.scss
+++ b/ui_framework/src/components/tabs/_tabs.scss
@@ -8,7 +8,7 @@
 
   position: relative;
   cursor: pointer;
-  padding: ($kuiSize - $kuiSizeXS) $kuiSize;
+  padding: $kuiSizeM $kuiSize;
   color: $kuiColorDarkShade;
   background-color: $kuiColorEmptyShade;
   transition: all $kuiAnimSpeedNormal $kuiAnimSlightResistance;
diff --git a/ui_framework/src/global_styling/mixins/_shadow.scss b/ui_framework/src/global_styling/mixins/_shadow.scss
index 72aba7aa3b3f4..5cda34546b4a7 100644
--- a/ui_framework/src/global_styling/mixins/_shadow.scss
+++ b/ui_framework/src/global_styling/mixins/_shadow.scss
@@ -1,3 +1,11 @@
 @mixin kuiBottomShadow {
   box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
 }
+
+@mixin kuiBottomShadowSmall {
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+}
+
+@mixin kuiBottomShadowMedium {
+  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2);
+}
diff --git a/ui_framework/src/global_styling/reset/_reset.scss b/ui_framework/src/global_styling/reset/_reset.scss
index 50dbafa4c7950..9d284721e6de1 100644
--- a/ui_framework/src/global_styling/reset/_reset.scss
+++ b/ui_framework/src/global_styling/reset/_reset.scss
@@ -54,6 +54,7 @@ html {
   font-size: $kuiFontSize;
   color: $kuiTextColor;
   height: 100%;
+  background-color: $kuiColorLightestShade;
   -webkit-font-smoothing: antialiased;
 }
 
diff --git a/ui_framework/src/global_styling/variables/_size.scss b/ui_framework/src/global_styling/variables/_size.scss
index 13a248f33ebf5..e05e6b4dc031d 100644
--- a/ui_framework/src/global_styling/variables/_size.scss
+++ b/ui_framework/src/global_styling/variables/_size.scss
@@ -1,8 +1,8 @@
 $kuiSize:     16px;
 
-$kuiSizeXS:   $kuiSize / 4;
-$kuiSizeS:    $kuiSize / 2;
-$kuiSizeM:    $kuiSize;
+$kuiSizeXS:   $kuiSize * .25;
+$kuiSizeS:    $kuiSize * .5;
+$kuiSizeM:    $kuiSize * .75;
 $kuiSizeL:    $kuiSize * 1.5;
 $kuiSizeXL:   $kuiSize * 2;
 $kuiSizeXXL:  $kuiSize * 2.5;