diff --git a/src/assets/styles/_motion.scss b/src/assets/styles/_motion.scss
new file mode 100644
index 0000000..55a3eed
--- /dev/null
+++ b/src/assets/styles/_motion.scss
@@ -0,0 +1,14 @@
+$duration--fast-01: 70ms; //Micro-interactions such as button and toggle
+$duration--fast-02: 110ms; //Micro-interactions such as fade
+$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
+$duration--moderate-02: 240ms; //Expansion, system communication, toast
+$duration--slow-01: 400ms; //Large expansion, important system notifications
+$duration--slow-02: 700ms; //Background dimming
+
+// https://www.carbondesignsystem.com/guidelines/motion/basics/#easing
+$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
+$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
+$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
+$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
+$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
+$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 2e36019..aff3752 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,10 +1,14 @@
 $enable-rounded: false;
 $enable-validation-icons: false;
+$responsive-layout-bp: lg;
+$header-height: 56px;
+$navigation-width: 300px;
 
 // Required
 @import "~bootstrap/scss/functions";
 @import "./functions";
 @import "./colors";
+@import "./motion";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
 
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index e155a65..3919176 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -4,8 +4,21 @@
       Skip to content
     </a>
     <header id="page-header">
-      <b-navbar toggleable="lg" variant="dark" type="dark">
+      <b-navbar variant="dark" type="dark">
         <!-- Left aligned nav items -->
+        <b-button
+          class="nav-trigger"
+          aria-hidden="true"
+          title="Open navigation"
+          type="button"
+          variant="link"
+          :aria-expanded="isNavigationOpen"
+          :class="{ 'nav-open': isNavigationOpen }"
+          @click="toggleNavigation"
+        >
+          <icon-close v-if="isNavigationOpen" />
+          <icon-menu v-if="!isNavigationOpen" />
+        </b-button>
         <b-navbar-nav>
           <b-nav-text>BMC System Management</b-nav-text>
         </b-navbar-nav>
@@ -37,11 +50,19 @@
 
 <script>
 import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
+import IconClose from '@carbon/icons-vue/es/close/20';
+import IconMenu from '@carbon/icons-vue/es/menu/20';
 import IconRenew from '@carbon/icons-vue/es/renew/20';
 import StatusIcon from '../Global/StatusIcon';
+
 export default {
   name: 'AppHeader',
-  components: { IconAvatar, IconRenew, StatusIcon },
+  components: { IconAvatar, IconClose, IconMenu, IconRenew, StatusIcon },
+  data() {
+    return {
+      isNavigationOpen: false
+    };
+  },
   computed: {
     hostStatus() {
       return this.$store.getters['global/hostStatus'];
@@ -77,6 +98,12 @@
     this.getHostInfo();
     this.getEvents();
   },
+  mounted() {
+    this.$root.$on(
+      'change:isNavigationOpen',
+      isNavigationOpen => (this.isNavigationOpen = isNavigationOpen)
+    );
+  },
   methods: {
     getHostInfo() {
       this.$store.dispatch('global/getHostStatus');
@@ -89,6 +116,9 @@
     },
     logout() {
       this.$store.dispatch('authentication/logout');
+    },
+    toggleNavigation() {
+      this.$root.$emit('toggle:navigation');
     }
   }
 };
@@ -99,11 +129,11 @@
   position: absolute;
   top: -60px;
   left: 0.5rem;
-  z-index: 10;
-  transition: 150ms cubic-bezier(0.4, 0.14, 1, 1);
+  z-index: $zindex-popover;
+  transition: $duration--moderate-01 $exit-easing--expressive;
   &:focus {
     top: 0.5rem;
-    transition-timing-function: cubic-bezier(0, 0, 0.3, 1);
+    transition-timing-function: $entrance-easing--expressive;
   }
 }
 .navbar-dark {
@@ -113,8 +143,36 @@
   }
 }
 .nav-item {
+  fill: $light;
+}
+
+.navbar {
+  padding: 0;
+  height: $header-height;
+  overflow: hidden;
+}
+
+.navbar-nav {
+  padding: 0 $spacer;
+}
+
+.nav-trigger {
+  fill: $white;
+  width: $header-height;
+  height: $header-height;
+  transition: none;
+
   svg {
-    fill: $light;
+    margin: 0;
+  }
+
+  &:hover {
+    fill: $white;
+    background-color: $gray-900;
+  }
+
+  @include media-breakpoint-up($responsive-layout-bp) {
+    display: none;
   }
 }
 </style>
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 28f4c71..2847e66 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -1,59 +1,78 @@
 <template>
-  <b-nav vertical>
-    <b-nav-item to="/"><icon-overview />Overview</b-nav-item>
+  <div>
+    <div class="nav-container" :class="{ open: isNavigationOpen }">
+      <nav ref="nav">
+        <b-nav vertical>
+          <b-nav-item to="/"><icon-overview />Overview</b-nav-item>
 
-    <li class="nav-item">
-      <b-button v-b-toggle.health-menu variant="link">
-        <icon-health />Health
-        <icon-expand class="icon-expand" />
-      </b-button>
-      <b-collapse id="health-menu" tag="ul" class="nav-item__nav">
-        <b-nav-item href="javascript:void(0)">Event Log</b-nav-item>
-        <b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item>
-        <b-nav-item href="javascript:void(0)">Sensors</b-nav-item>
-      </b-collapse>
-    </li>
+          <li class="nav-item">
+            <b-button v-b-toggle.health-menu variant="link">
+              <icon-health />Health
+              <icon-expand class="icon-expand" />
+            </b-button>
+            <b-collapse id="health-menu" tag="ul" class="nav-item__nav">
+              <b-nav-item href="javascript:void(0)">Event Log</b-nav-item>
+              <b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item>
+              <b-nav-item href="javascript:void(0)">Sensors</b-nav-item>
+            </b-collapse>
+          </li>
 
-    <li class="nav-item">
-      <b-button v-b-toggle.control-menu variant="link">
-        <icon-control />Control
-        <icon-expand class="icon-expand" />
-      </b-button>
-      <b-collapse id="control-menu" tag="ul" class="nav-item__nav">
-        <b-nav-item href="javascript:void(0)">Manage power usage</b-nav-item>
-        <b-nav-item href="javascript:void(0)">Server LED</b-nav-item>
-        <b-nav-item href="javascript:void(0)">
-          Server power operations
-        </b-nav-item>
-      </b-collapse>
-    </li>
+          <li class="nav-item">
+            <b-button v-b-toggle.control-menu variant="link">
+              <icon-control />Control
+              <icon-expand class="icon-expand" />
+            </b-button>
+            <b-collapse id="control-menu" tag="ul" class="nav-item__nav">
+              <b-nav-item href="javascript:void(0)">
+                Manage power usage
+              </b-nav-item>
+              <b-nav-item href="javascript:void(0)">Server LED</b-nav-item>
+              <b-nav-item href="javascript:void(0)">
+                Server power operations
+              </b-nav-item>
+            </b-collapse>
+          </li>
 
-    <li class="nav-item">
-      <b-button v-b-toggle.configuration-menu variant="link">
-        <icon-configuration />Configuration
-        <icon-expand class="icon-expand" />
-      </b-button>
-      <b-collapse id="configuration-menu" tag="ul" class="nav-item__nav">
-        <b-nav-item href="javascript:void(0)">Firmware</b-nav-item>
-        <b-nav-item href="javascript:void(0)">Network settings</b-nav-item>
-        <b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item>
-      </b-collapse>
-    </li>
+          <li class="nav-item">
+            <b-button v-b-toggle.configuration-menu variant="link">
+              <icon-configuration />Configuration
+              <icon-expand class="icon-expand" />
+            </b-button>
+            <b-collapse id="configuration-menu" tag="ul" class="nav-item__nav">
+              <b-nav-item href="javascript:void(0)">Firmware</b-nav-item>
+              <b-nav-item href="javascript:void(0)">
+                Network settings
+              </b-nav-item>
+              <b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item>
+            </b-collapse>
+          </li>
 
-    <li class="nav-item">
-      <b-button v-b-toggle.access-control-menu variant="link">
-        <icon-access-control />Access Control
-        <icon-expand class="icon-expand" />
-      </b-button>
-      <b-collapse id="access-control-menu" tag="ul" class="nav-item__nav">
-        <b-nav-item href="javascript:void(0)">LDAP</b-nav-item>
-        <b-nav-item to="/access-control/local-user-management">
-          Local user management
-        </b-nav-item>
-        <b-nav-item href="javascript:void(0)">SSL Certificates</b-nav-item>
-      </b-collapse>
-    </li>
-  </b-nav>
+          <li class="nav-item">
+            <b-button v-b-toggle.access-control-menu variant="link">
+              <icon-access-control />Access Control
+              <icon-expand class="icon-expand" />
+            </b-button>
+            <b-collapse id="access-control-menu" tag="ul" class="nav-item__nav">
+              <b-nav-item href="javascript:void(0)">LDAP</b-nav-item>
+              <b-nav-item to="/access-control/local-user-management">
+                Local user management
+              </b-nav-item>
+              <b-nav-item href="javascript:void(0)">
+                SSL Certificates
+              </b-nav-item>
+            </b-collapse>
+          </li>
+        </b-nav>
+      </nav>
+    </div>
+    <transition name="fade">
+      <div
+        v-if="isNavigationOpen"
+        class="nav-overlay"
+        @click="toggleIsOpen"
+      ></div>
+    </transition>
+  </div>
 </template>
 
 <script>
@@ -73,6 +92,27 @@
     iconConfiguration: IconSettings,
     iconAccessControl: IconPassword,
     iconExpand: IconChevronUp
+  },
+  data() {
+    return {
+      isNavigationOpen: false
+    };
+  },
+  watch: {
+    $route: function() {
+      this.isNavigationOpen = false;
+    },
+    isNavigationOpen: function(isNavigationOpen) {
+      this.$root.$emit('change:isNavigationOpen', isNavigationOpen);
+    }
+  },
+  mounted() {
+    this.$root.$on('toggle:navigation', () => this.toggleIsOpen());
+  },
+  methods: {
+    toggleIsOpen() {
+      this.isNavigationOpen = !this.isNavigationOpen;
+    }
   }
 };
 </script>
@@ -88,7 +128,6 @@
 }
 
 .nav {
-  min-height: 100%;
   padding-top: $spacer;
 }
 
@@ -155,4 +194,55 @@
     background-color: $primary;
   }
 }
+
+.nav-container {
+  position: fixed;
+  width: $navigation-width;
+  top: $header-height;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+  overflow-y: auto;
+  background-color: $gray-200;
+  transform: translateX(-$navigation-width);
+  transition: transform $exit-easing--productive $duration--moderate-02;
+
+  &.open {
+    transform: translateX(0);
+    transition-timing-function: $entrance-easing--productive;
+  }
+
+  @include media-breakpoint-up($responsive-layout-bp) {
+    transition-duration: $duration--fast-01;
+    transform: translateX(0);
+  }
+}
+
+.nav-overlay {
+  position: fixed;
+  top: $header-height;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: $zindex-fixed - 1;
+  background-color: $black;
+  opacity: 0.5;
+
+  &.fade-enter-active {
+    transition: opacity $duration--moderate-02 $entrance-easing--productive;
+  }
+
+  &.fade-leave-active {
+    transition: opacity $duration--fast-02 $exit-easing--productive;
+  }
+
+  &.fade-enter,
+  &.fade-leave-to {
+    opacity: 0;
+  }
+
+  @include media-breakpoint-up($responsive-layout-bp) {
+    display: none;
+  }
+}
 </style>
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index 8efbf7b..8396bd5 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <main id="main-content">
+  <main id="main-content" class="page-container">
     <slot />
   </main>
 </template>
@@ -12,12 +12,14 @@
 
 <style lang="scss" scoped>
 main {
+  width: 100%;
+  height: 100%;
   padding-top: $spacer * 1.5;
   padding-bottom: $spacer * 3;
-  padding-left: $spacer * 2;
+  padding-left: $spacer;
   padding-right: $spacer;
-  background-color: $gray-100;
-  height: 100%;
-  min-height: calc(100vh - 60px /*header height*/);
+  @include media-breakpoint-up($responsive-layout-bp) {
+    padding-left: $spacer * 2;
+  }
 }
 </style>
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 33faa38..8edc338 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -1,18 +1,10 @@
 <template>
-  <div>
-    <app-header ref="focusTarget" @refresh="refresh" />
-    <b-container fluid class="page-container">
-      <b-row no-gutters>
-        <b-col tag="nav" cols="12" md="3" lg="2">
-          <app-navigation />
-        </b-col>
-        <b-col cols="12" md="9" lg="10">
-          <page-container>
-            <router-view ref="routerView" :key="routerKey" />
-          </page-container>
-        </b-col>
-      </b-row>
-    </b-container>
+  <div class="app-container">
+    <app-header ref="focusTarget" class="app-header" @refresh="refresh" />
+    <app-navigation class="app-navigation" />
+    <page-container class="app-content">
+      <router-view ref="routerView" :key="routerKey" />
+    </page-container>
   </div>
 </template>
 
@@ -62,10 +54,35 @@
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  margin-right: 0;
-  margin-left: 0;
-  padding-right: 0;
-  padding-left: 0;
+.app-container {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: auto;
+  grid-template-areas:
+    'header'
+    'content';
+
+  @include media-breakpoint-up($responsive-layout-bp) {
+    grid-template-columns: $navigation-width 1fr;
+    grid-template-areas:
+      'header header'
+      'navigation content';
+  }
+}
+
+.app-header {
+  grid-area: header;
+  position: sticky;
+  top: 0;
+  z-index: $zindex-fixed + 1;
+}
+
+.app-navigation {
+  grid-area: navigation;
+}
+
+.app-content {
+  grid-area: content;
+  background-color: $white;
 }
 </style>
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index e71387d..a5ba7ba 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -1,8 +1,8 @@
 <template>
-  <b-container class="ml-0">
+  <b-container fluid>
     <page-title />
     <b-row>
-      <b-col lg="10" class="text-right">
+      <b-col xl="9" class="text-right">
         <b-button variant="link" @click="initModalSettings">
           Account policy settings
           <icon-settings />
@@ -14,7 +14,7 @@
       </b-col>
     </b-row>
     <b-row>
-      <b-col lg="10">
+      <b-col xl="9">
         <b-table show-empty :fields="fields" :items="tableItems">
           <template v-slot:cell(actions)="data">
             <b-button
@@ -40,7 +40,7 @@
       </b-col>
     </b-row>
     <b-row>
-      <b-col lg="8">
+      <b-col xl="8">
         <b-button v-b-toggle.collapse-role-table variant="link" class="mt-3">
           View privilege role descriptions
           <icon-chevron />
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 0921cb9..3f52d81 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -84,7 +84,7 @@
 }
 
 .quicklinks {
-  background: $white;
+  background: $gray-200;
   display: grid;
   grid-gap: 1rem;
   padding: 1rem;
@@ -98,7 +98,7 @@
   }
 }
 
-@include media-breakpoint-up(lg) {
+@include media-breakpoint-up(xl) {
   .quicklinks {
     grid-template-columns: repeat(4, 1fr);
   }