diff --git a/web_responsive/static/lib/css/drawer.3.2.0.css b/web_responsive/static/lib/css/drawer.3.2.0.css
index 11c372f3..99705b3a 100755
--- a/web_responsive/static/lib/css/drawer.3.2.0.css
+++ b/web_responsive/static/lib/css/drawer.3.2.0.css
@@ -66,6 +66,15 @@
 .drawer-open .drawer-overlay {
   display: block;
 }
+
+/* XXX: local patch waiting for:
+   https://github.com/blivesta/drawer/pull/36
+*/
+.drawer-open {
+  overflow: hidden;
+}
+/* end local patch */
+
 /*!------------------------------------*\
     Top
 \*!------------------------------------*/
diff --git a/web_responsive/static/lib/js/drawer.3.2.0.js b/web_responsive/static/lib/js/drawer.3.2.0.js
index d879a519..3d5e1f2f 100755
--- a/web_responsive/static/lib/js/drawer.3.2.0.js
+++ b/web_responsive/static/lib/js/drawer.3.2.0.js
@@ -121,7 +121,10 @@
       return $this
         .removeClass(__.settings.class.close)
         .addClass(__.settings.class.open)
-        .css({ 'overflow': 'hidden' })
+        // XXX: local patch waiting for:
+        // https://github.com/blivesta/drawer/pull/36
+        //.css({ 'overflow': 'hidden' })
+        // end local patch
         .drawerCallback(function triggerOpenedListeners() {
           __.settings.state = true;
           $this.trigger(__.settings.events.opened);
@@ -136,7 +139,10 @@
       return $this
         .removeClass(__.settings.class.open)
         .addClass(__.settings.class.close)
-        .css({ 'overflow': 'auto' })
+        // XXX: local patch waiting for:
+        // https://github.com/blivesta/drawer/pull/36
+        //.css("overflow", "auto")
+        // end local patch
         .drawerCallback(function triggerClosedListeners() {
           __.settings.state = false;
           $this.trigger(__.settings.events.closed);
diff --git a/web_responsive/static/src/less/app_drawer.less b/web_responsive/static/src/less/app_drawer.less
index 76842bd2..f9b36179 100755
--- a/web_responsive/static/src/less/app_drawer.less
+++ b/web_responsive/static/src/less/app_drawer.less
@@ -11,7 +11,7 @@
     border-radius: @border-radius-base;
     .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
     background-clip: padding-box;
-    z-index: 1000;
+    z-index: 10000;
     
     .o_tooltip {
         z-index: 1051;
@@ -29,7 +29,7 @@
             padding: 4px;
             margin: 14px 0;
             display: none;
-            color: #eee;
+            color: @odoo-list-footer-bg-color;
             background: rgba(37,37,37,0.9);
         }
         &:hover .oe_logo_edit_admin {
@@ -47,6 +47,7 @@
 
     .app-drawer-title {
         float: none;
+        font-weight: bold; // Bold titles for apps in the app-drawer
     }
 
     .app-drawer-panel-title {
diff --git a/web_responsive/static/src/less/main.less b/web_responsive/static/src/less/main.less
index 6e9f693b..0f1c2614 100755
--- a/web_responsive/static/src/less/main.less
+++ b/web_responsive/static/src/less/main.less
@@ -56,3 +56,14 @@ main {
         }
     }
 }
+
+// Remove z-index from CP buttons so it doesn't overlap the menu
+.o_control_panel {
+     .btn-group > .btn.active {
+        z-index: initial;
+    }
+}
+
+.o_chat_window {
+    z-index: 1000;
+}
diff --git a/web_responsive/static/src/less/navbar.less b/web_responsive/static/src/less/navbar.less
index 5313bde6..732e0213 100755
--- a/web_responsive/static/src/less/navbar.less
+++ b/web_responsive/static/src/less/navbar.less
@@ -1,33 +1,178 @@
 /* Copyright 2016 LasLabs Inc.
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 
-.main-nav {
-
-    margin-bottom: 0;
-    min-height: @app-drawer-navbar-height;
-    z-index: 1;
-    border: none;
-    
-    .badge {
-        position: absolute;
-        top: 3px;
-        right: @navbar-padding-horizontal / 2;
-    }
-    
-    ul.nav > li > a {
-        padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal;
-    }
-    
-}
+header {
+    margin: 0;
+    padding: 0;
+
+    > .main-nav {
+        display: block;
+        white-space: nowrap;
+
+        .navbar-systray {
+            white-space: nowrap;
+            @media (max-width: @screen-xs-max) {
+                position: absolute;
+                top: 0;
+                right: 56px;
+            }
+            > .oe_user_menu_placeholder > li > a {
+                > .oe_topbar_avatar {
+                    border-radius: 50%;
+                    margin-top: -8px;
+                    max-height: 36px;
+                    height: 36px;
+                    width: 36px;
+                }
+                .oe_topbar_name {
+                    position: relative;
+                    top: -3px;
+                    @media (max-width: @screen-xs-max) {
+                        display: none;
+                    }
+                }
+                .caret {
+                    position: relative;
+                    top: -3.5px;
+                }
+            }
+            > .oe_systray > li > a {
+                .fa {
+                    position: relative;
+                    top: 3px;
+                    font-size: 16px;
+                }
+                .caret {
+                    position: relative;
+                    top: 0.5px;
+                }
+            }
+        }
+
+        .navbar-right {
+            float: right;
+            > li {
+                float: left;
+            }
+            @media (max-width: @screen-xs-max) {
+                .navbar-nav .open .dropdown-menu {
+                    position: fixed;
+                    top: 46px;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    overflow: auto;
+                    float: left;
+                    background-color: @odoo-view-background-color;
+                    border: 1px solid rgba(0, 0, 0, 0.15);
+                    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+                }
+            }
+        }
+
+        .container-fluid:before, .container-fluid:after, .navbar-collapse:before, .navbar-collapse:after {
+            display: inline;
+        }
+
+        > .container-fluid {
+            margin: 0;
+            padding: 0;
+
+            @media (max-width: @screen-xs-max) {
+                > .navbar-collapse {
+                    margin: 0;
+                    padding: 0;
+                    overflow: auto;
+                    &.collapsing {
+                        overflow: hidden;
+                    }
+                }
+            }
+            > .navbar-header {
+                margin: 0;
+                padding: 0;
+                > .drawer-toggle, .navbar-toggle {
+                    margin: 0;
+                    padding: 0;
+                    border: 1px solid @nav-tabs-active-link-hover-border-color;
+                    > i.fa, div.fa {
+                        padding: 16px 14px 15px;
+                    }
+                }
+            }
 
-.oe_topbar_avatar {
-    margin-top: -@app-drawer-padding-horizontal;
-    height: @app-drawer-navbar-height;
-    border-radius: 50%;
+            .o_sub_menu > .o_sub_menu_content > .oe_secondary_menu {
+                ul.dropdown-menu > li.dropdown-header {
+                    color: @odoo-view-background-color;
+                    text-decoration: none;
+                    background-color: @odoo-main-color-muted;
+                    font-weight: bold;
+                }
+                @media (min-width: @screen-sm-min) {
+                    height: @navbar-height;
+                }
+                margin: 0;
+                padding: 0;
+                > li {
+                    @media (min-width: @screen-sm-min) {
+                        height: @navbar-height;
+                    }
+                    margin: 0;
+                    padding: 0;
+                    &.app-name {
+                        display: block;
+                        padding: 7px 8px;
+                        > .oe_menu_text {
+                            font-size: 20px;
+                        }
+                        @media (min-width: @screen-sm-min) {
+                            padding: 8.5px 12px;
+                        }
+                    }
+                    > a {
+                        margin: 0;
+                        @media (min-width: @screen-sm-min) {
+                            height: @navbar-height;
+                            padding: 14px 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        > .navbar-right.o_menu_systray {
+            display: inline;
+            margin: 0;
+            padding: 0;
+            > ul {
+                margin: 0;
+                padding: 0;
+                > li > a {
+                    margin: 0;
+                    padding: 13px 8px;
+                    height: @navbar-height;
+                }
+            }
+        }
+
+        .badge {
+            position: absolute;
+            top: 3px;
+            right: @navbar-padding-horizontal / 2;
+        }
+
+        ul.nav > li > a {
+            padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal;
+        }
+
+        .o_planner_systray > .progress {
+            margin-top: 15px;
+        }
+    }
 }
 
 a.navbar-collapse.collapse {
-    @media (min-width: @screen-sm) {
+    @media (min-width: @screen-sm-min) {
         padding-bottom: @app-drawer-navbar-padding-vertical;
         padding-top: @app-drawer-navbar-padding-vertical;
     }
@@ -36,11 +181,3 @@ a.navbar-collapse.collapse {
 .dropdown-scrollable {
     overflow-x: hidden;
 }
-
-@media (max-width: @screen-xs-max) {
-    #odooMenuBarNav[aria-expanded="false"] {
-        /* Hack to hide the visibly expanded mobile menu on load. */
-        position: absolute;
-        z-index: -9999;
-    }
-}
diff --git a/web_responsive/static/src/less/variables.less b/web_responsive/static/src/less/variables.less
index 8e16182a..34eda0d4 100755
--- a/web_responsive/static/src/less/variables.less
+++ b/web_responsive/static/src/less/variables.less
@@ -8,6 +8,11 @@
 @app-drawer-title-height:   54px;
 
 // Navbar
+@navbar-height: 46px;
 @app-drawer-navbar-height:  @navbar-height / 2;
 @app-drawer-navbar-padding-vertical: @navbar-padding-vertical / 2;
 @app-drawer-padding-horizontal: @navbar-padding-horizontal / 2;
+
+// Drawer Toggle
+@drawer-toggle-height: @navbar-height;
+@drawer-toggle-width: @navbar-height;
diff --git a/web_responsive/views/web.xml b/web_responsive/views/web.xml
index ed912576..b3f7761c 100644
--- a/web_responsive/views/web.xml
+++ b/web_responsive/views/web.xml
@@ -72,7 +72,7 @@
 
                         </div>
 
-                        <div class="collapse navbar-collapse text-center"
+                        <div class="collapse navbar-collapse"
                              id="odooMenuBarNav"
                              data-parent="#odooMenuBarToggle"
                              aria-expanded="false"
@@ -82,16 +82,12 @@
                                  >
                                 <t t-call="web.menu_secondary" />
                             </div>
-                            <div class="nav navbar-nav navbar-right">
-                                <ul class="nav navbar-nav navbar-right oe_user_menu_placeholder"
-                                    style="display: none;"
-                                    />
-                                <ul class="nav navbar-nav navbar-right oe_systray"
-                                    style="display: none;"
-                                    />
-                            </div>
                         </div>
                     </div>
+                    <div class="nav navbar-nav navbar-right navbar-systray o_menu_systray">
+                        <ul class="nav navbar-nav navbar-right navbar-systray-item oe_user_menu_placeholder"/>
+                        <ul class="nav navbar-nav navbar-right navbar-systray-item oe_systray"/>
+                    </div>
                 </nav>
 
             </header>
@@ -108,11 +104,17 @@
         <xpath expr="//div[@class='o_sub_menu_content']/t" position="replace">
 
             <t t-foreach="menu_data['children']" t-as="menu">
-                <ul class="oe_secondary_menu nav navbar-nav"
-                    t-att-data-menu-parent="menu['id']"
-                    style="display: none;"
-                    >
-                    <t t-call="web.menu_secondary_submenu" />
+                <ul style="display: none"
+                    class="oe_secondary_menu nav navbar-nav"
+                    t-att-data-menu-parent="menu['id']">
+                    <li class="app-name">
+                        <span class="oe_menu_text">
+                            <t t-esc="menu['name']"/>
+                        </span>
+                    </li>
+                    <li>
+                        <t t-call="web.menu_secondary_submenu" />
+                    </li>
                 </ul>
             </t>