diff --git a/dashboard-ui/components/navdrawer/navdrawer.css b/dashboard-ui/components/navdrawer/navdrawer.css
index b4c59282af..7f72f28f5f 100644
--- a/dashboard-ui/components/navdrawer/navdrawer.css
+++ b/dashboard-ui/components/navdrawer/navdrawer.css
@@ -2,20 +2,23 @@
     width: 240px;
     position: fixed;
     top: 0;
-    left: -280px;
     bottom: 0;
     background-color: #FFF;
     will-change: transform;
     contain: layout style;
     display: flex;
-    transition: transform ease-out 60ms;
+    transition: transform ease-out 60ms, left ease-out 300ms;
     z-index: 1099;
 }
 
+    .touch-menu-la.open {
+        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
+    }
+
     .touch-menu-la.transition {
         /*transition: transform 0.3s ease-out;*/
-        transition: -webkit-transform ease-out 280ms;
-        transition: transform ease-out 280ms;
+        transition: -webkit-transform ease-out 280ms, left ease-out 300ms;
+        transition: transform ease-out 280ms, left ease-out 300ms;
         /*transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
         transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/
     }
diff --git a/dashboard-ui/components/navdrawer/navdrawer.js b/dashboard-ui/components/navdrawer/navdrawer.js
index edff9d9937..85eff14acd 100644
--- a/dashboard-ui/components/navdrawer/navdrawer.js
+++ b/dashboard-ui/components/navdrawer/navdrawer.js
@@ -48,11 +48,11 @@
             options.target.style.left = -options.width + 'px';
 
             if (!options.disableEdgeSwipe) {
-                var handle = document.createElement('div');
-                handle.className = "tmla-handle";
-                handle.style.width = options.handleSize + 'px';
-                handle.style.right = -options.handleSize + 'px';
-                options.target.appendChild(handle);
+                //var handle = document.createElement('div');
+                //handle.className = "tmla-handle";
+                //handle.style.width = options.handleSize + 'px';
+                //handle.style.right = -options.handleSize + 'px';
+                //options.target.appendChild(handle);
             }
 
             if (!options.disableMask) {
@@ -71,6 +71,7 @@
         TouchMenuLA.prototype.touchStartMenu = function () {
             menuHammer.on('panstart', function (ev) {
                 options.target.classList.remove('transition');
+                options.target.classList.add('open');
                 velocity = Math.abs(ev.velocity);
             });
             menuHammer.on('panmove', function (ev) {
diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css
index 34c497f692..54c5c85c53 100644
--- a/dashboard-ui/css/librarymenu.css
+++ b/dashboard-ui/css/librarymenu.css
@@ -56,48 +56,6 @@
     vertical-align: middle;
 }
 
-.mainDrawerPanel {
-    position: static !important;
-    width: auto !important;
-    height: auto !important;
-    touch-action: auto !important;
-    overflow: visible;
-}
-
-.mainDrawerPanelPreInit #drawer {
-    display: none !important;
-}
-
-.mainDrawerPanel #drawer {
-    z-index: 1099 !important;
-    position: fixed !important;
-    bottom: 0;
-    height: auto !important;
-    /* Need to reset this because it causes the entire panel to be draggable in safari */
-    box-sizing: initial !important;
-    font-size: 108%;
-}
-
-.mainDrawerPanel[narrow] #main {
-    left: 0 !important;
-    position: static !important;
-    z-index: 1;
-}
-
-.mainDrawerPanel #scrim {
-    /* Give it at least something to make it visible */
-    z-index: 1098;
-    /* It defaults to absolute, not visible after scrolling */
-    position: fixed !important;
-}
-
-.mainDrawer {
-    overflow-y: auto !important;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: hidden;
-    scroll-behavior: smooth;
-}
-
 .drawerContent {
     padding-bottom: 100px;
 }
@@ -189,10 +147,10 @@
     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),1px 5px 1px rgba(0,0,0,.12);
 }
 
-.libraryViewNav.bottom {
-    top: auto !important;
-    bottom: 0;
-}
+    .libraryViewNav.bottom {
+        top: auto !important;
+        bottom: 0;
+    }
 
 
 .libraryViewNav {
@@ -272,20 +230,17 @@
         align-items: center;
     }
 
-.viewMenuBar {
-    /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);*/
-}
-
 .dashboardDocument .viewMenuBar {
-    background-color: #222;
+    background-color: #333;
     height: auto;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
 }
 
     .dashboardDocument .viewMenuBar .primaryIcons {
-        padding: .92em 0;
+        padding: .7em 0;
     }
 
-.dashboardDocument .withTallToolbar .primaryIcons {
+.dashboardDocument.withTallToolbar .primaryIcons {
     padding-bottom: 0;
 }
 
@@ -308,42 +263,30 @@
         display: flex;
     }
 
-.mainDrawerPanel:not([narrow]) .viewMenuBarTabs {
-    width: auto;
-    padding-left: 272px;
-}
 
-.mainDrawerPanel .viewMenuBarTabs #tabsContent {
-    display: block !important;
-    width: 100%;
-}
+    .viewMenuBarTabs #tabsContent {
+        display: block !important;
+        width: 100%;
+    }
 
-.mainDrawerPanel:not([narrow]) .viewMenuBarTabs paper-tab {
-    width: auto !important;
-}
+    .viewMenuBarTabs #tabsContainer {
+        margin: auto;
+        -ms-flex: none;
+        -webkit-flex: none;
+        flex: none;
+        flex-shrink: 0;
+        flex-grow: 1;
+        touch-action: auto !important;
+    }
 
-.viewMenuBarTabs #tabsContainer {
-    margin: auto;
-    -ms-flex: none;
-    -webkit-flex: none;
-    flex: none;
-    flex-shrink: 0;
-    flex-grow: 1;
-    touch-action: auto !important;
-}
+    .viewMenuBarTabs paper-tabs {
+        overflow: visible !important;
+    }
 
-.viewMenuBarTabs paper-tabs {
-    overflow: visible !important;
-}
-
-.viewMenuBarTabs .paperTabLink {
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-}
-
-.mainDrawerPanel:not([narrow]) .viewMenuBarTabs .tab-content {
-    display: block !important;
-}
+    .viewMenuBarTabs .paperTabLink {
+        padding-left: 1.5em;
+        padding-right: 1.5em;
+    }
 
 .viewMenuBar paper-icon-button.paper-tabs {
     display: none !important;
@@ -458,18 +401,17 @@ body:not(.dashboardDocument) .btnNotifications {
     display: none !important;
 }
 
-.darkDrawerPanel #drawer {
+.darkDrawer {
     background-color: #1D1D20 !important;
     /*background-color: rgba(40,40,40,.8) !important;
     -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);*/
-    box-shadow: none !important;
 }
 
-.darkDrawerPanel .sidebarLinkIcon {
-    color: #bbb !important;
-    margin-left: 1.6em;
-}
+    .darkDrawer .sidebarLinkIcon {
+        color: #bbb !important;
+        margin-left: 1.6em;
+    }
 
 i.sidebarLinkIcon {
     font-size: 24px;
@@ -477,76 +419,114 @@ i.sidebarLinkIcon {
     width: 24px;
 }
 
-.darkDrawerPanel i.sidebarLinkIcon {
+.darkDrawer i.sidebarLinkIcon {
     margin-left: 1em;
 }
 
-.darkDrawerPanel .sidebarLinkText, .darkDrawerPanel .sidebarLink {
+.darkDrawer .sidebarLinkText, .darkDrawer .sidebarLink {
     color: #fff !important;
     font-weight: normal !important;
 }
 
-.darkDrawerPanel .sidebarHeader {
+.darkDrawer .sidebarHeader {
     color: #bbb !important;
 }
 
-.darkDrawerPanel .sidebarDivider {
+.darkDrawer .sidebarDivider {
     background: #282828 !important;
 }
 
-.darkDrawerPanel .sidebarLink:hover {
+.darkDrawer .sidebarLink:hover {
     background: #252528;
 }
 
-.darkDrawerPanel .sidebarLink.selectedSidebarLink, .darkDrawerPanel .selectedMediaFolder {
+.darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
     background: #252528 !important;
-    color: #52B54B!important;
+    color: #52B54B !important;
 }
 
-.darkDrawerPanel .headerAppsButton {
+body:not(.dashboardDocument) .headerAppsButton {
     display: none;
 }
 
-.adminDrawerPanel #drawer {
+.adminDrawer {
     background: #fff !important;
-    box-shadow: none !important;
 }
 
-.adminDrawerPanel:not([narrow]) #drawer {
-    z-index: 998 !important;
-    top: 65px !important;
+.dashboardDocument .mainDrawerPanelContent {
+    transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 }
 
-.adminDrawerPanel:not([narrow]) .mainDrawerButton {
-    display: none !important;
+@media all and (min-width: 640px) {
+
+    .mainDrawerPanel .viewMenuBarTabs {
+        width: auto;
+        padding-left: 272px;
+    }
+
+        .mainDrawerPanel .viewMenuBarTabs paper-tab {
+            width: auto !important;
+        }
+
+        .mainDrawerPanel .viewMenuBarTabs .tab-content {
+            display: block !important;
+        }
+
+    .dashboardDocument .mainDrawer {
+        z-index: 998 !important;
+        top: 65px !important;
+        left: 0 !important;
+    }
+
+    .dashboardDocument .mainDrawerButton {
+        display: none !important;
+    }
+
+    .dashboardDocument .libraryMenuButtonText {
+        font-size: 150%;
+        margin-left: 1em;
+    }
+
+    .dashboardDocument .mainDrawerPanelContent {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 270px;
+    }
 }
 
-.adminDrawerPanel .sidebarLink {
+.adminDrawer .sidebarLink {
     color: #333 !important;
     font-weight: 400 !important;
     padding: .7em 0 .7em 1.5em;
 }
 
-.adminDrawerPanel .sidebarHeader {
+.adminDrawer .sidebarHeader {
     color: #666 !important;
     font-weight: 500 !important;
 }
 
-.adminDrawerPanel .sidebarLinkIcon {
+.adminDrawer .sidebarLinkIcon {
     color: #666;
     margin-right: 1em;
 }
 
-.adminDrawerPanel .sidebarLink:hover {
+.adminDrawer .sidebarLink:hover {
     color: #00897B !important;
 }
 
-.adminDrawerPanel .sidebarLink.selectedSidebarLink {
+.adminDrawer .sidebarLink.selectedSidebarLink {
     background: #52B54B !important;
     color: #fff !important;
 }
 
-    .adminDrawerPanel .sidebarLink.selectedSidebarLink .sidebarLinkIcon {
+    .adminDrawer .sidebarLink.selectedSidebarLink .sidebarLinkIcon {
         color: #fff !important;
     }
 
@@ -557,7 +537,7 @@ i.sidebarLinkIcon {
     display: block;
 }
 
-.adminDrawerPanel:not([narrow]) .adminDrawerLogo {
+.dashboardDocument.mainDrawerOpen .adminDrawerLogo {
     display: none;
 }
 
@@ -565,21 +545,11 @@ i.sidebarLinkIcon {
     height: 30px;
 }
 
-.adminDrawerPanel #drawer #expandIcon {
-    color: #000;
-}
+@media all and (max-width: 640px) {
 
-.adminDrawerPanel #drawer emby-collapsible > .style-scope {
-    margin: .7em 0;
-}
-
-.adminDrawerPanel:not([narrow]) .libraryMenuButtonText {
-    font-size: 150%;
-    margin-left: 1em;
-}
-
-.adminDrawerPanel[narrow] .headerAppsButton {
-    display: none;
+    .dashboardDocument .headerAppsButton {
+        display: none;
+    }
 }
 
 .title-separator {
diff --git a/dashboard-ui/index.html b/dashboard-ui/index.html
index ff86c7e2d5..e9ff3c5c24 100644
--- a/dashboard-ui/index.html
+++ b/dashboard-ui/index.html
@@ -6,15 +6,13 @@
 <body>
     <div class="backdropContainer"></div>
 
-    <div class="skinContainer">
-        <paper-drawer-panel class="mainDrawerPanel mainDrawerPanelPreInit">
-            <div class="mainDrawer" drawer></div>
-            <div class="mainDrawerPanelContent" main>
-                <div class="pageBackground"></div>
-                <div class="skinHeader"></div>
-                <div class="mainAnimatedPages skinBody"></div>
-            </div>
-        </paper-drawer-panel>
+    <div class="skinContainer mainDrawerPanel">
+        <div class="mainDrawer hide"><div class="scrollContainer"></div></div>
+        <div class="mainDrawerPanelContent">
+            <div class="pageBackground"></div>
+            <div class="skinHeader"></div>
+            <div class="mainAnimatedPages skinBody"></div>
+        </div>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index b00066ddd6..9a9f90db08 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -1,6 +1,8 @@
-define(['imageLoader', 'layoutManager', 'viewManager'], function (imageLoader, layoutManager, viewManager) {
+define(['imageLoader', 'layoutManager', 'viewManager', 'navdrawer', 'paper-icon-button-light', 'material-icons'], function (imageLoader, layoutManager, viewManager, navdrawer) {
 
-    var mainDrawerPanel = document.querySelector('.mainDrawerPanel');
+    var navDrawerElement = document.querySelector('.mainDrawer');
+    var navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
+    var navDrawerInstance;
 
     function renderHeader() {
 
@@ -278,17 +280,16 @@
 
     function toggleMainDrawer() {
 
-        if (mainDrawerPanel.selected == 'drawer') {
-            closeMainDrawer(mainDrawerPanel);
+        if (navDrawerInstance.isVisible) {
+            closeMainDrawer();
         } else {
-            openMainDrawer(mainDrawerPanel);
+            openMainDrawer();
         }
     }
 
-    function openMainDrawer(drawerPanel) {
+    function openMainDrawer() {
 
-        drawerPanel = drawerPanel || document.querySelector('.mainDrawerPanel');
-        drawerPanel.openDrawer();
+        navDrawerInstance.open();
         lastOpenTime = new Date().getTime();
     }
 
@@ -298,16 +299,13 @@
             document.body.classList.add('bodyWithPopupOpen');
         }
     }
-    function closeMainDrawer(drawerPanel) {
+    function closeMainDrawer() {
 
-        drawerPanel = drawerPanel || document.querySelector('.mainDrawerPanel');
-        drawerPanel.closeDrawer();
+        navDrawerInstance.close();
     }
     function onMainDrawerSelect(e) {
 
-        var drawer = e.target;
-
-        if (drawer.selected != 'drawer') {
+        if (!navDrawerInstance.isVisible) {
             document.body.classList.remove('bodyWithPopupOpen');
         } else {
             onMainDrawerOpened();
@@ -373,23 +371,17 @@
 
         html += '</div>';
 
-        var drawer = mainDrawerPanel.querySelector('.mainDrawer');
+        navDrawerScrollContainer.innerHTML = html;
 
-        drawer.innerHTML = html;
-
-        var lnkManageServer = drawer.querySelector('.lnkManageServer');
+        var lnkManageServer = navDrawerScrollContainer.querySelector('.lnkManageServer');
         if (lnkManageServer) {
             lnkManageServer.addEventListener('click', onManageServerClicked);
         }
-
-        require(['imageLoader'], function (imageLoader) {
-            imageLoader.fillImages(mainDrawerPanel.getElementsByClassName('lazy'));
-        });
     }
 
     function refreshDashboardInfoInDrawer(page, user) {
 
-        if (!mainDrawerPanel.querySelector('.adminDrawerLogo')) {
+        if (!navDrawerScrollContainer.querySelector('.adminDrawerLogo')) {
             createDashboardMenu(page);
         } else {
             updateDashboardMenuSelectedItem();
@@ -411,7 +403,7 @@
 
     function updateDashboardMenuSelectedItem() {
 
-        var links = mainDrawerPanel.querySelectorAll('.sidebarLink');
+        var links = navDrawerScrollContainer.querySelectorAll('.sidebarLink');
 
         for (var i = 0, length = links.length; i < length; i++) {
             var link = links[i];
@@ -453,7 +445,7 @@
 
         html = html.split('href=').join('onclick="return LibraryMenu.onLinkClicked(event, this);" href=');
 
-        mainDrawerPanel.querySelector('.mainDrawer').innerHTML = html;
+        navDrawerScrollContainer.innerHTML = html;
 
         updateDashboardMenuSelectedItem();
     }
@@ -698,7 +690,7 @@
             if (!type) {
                 if (LibraryMenu.tabType) {
 
-                    mainDrawerPanel.classList.remove('withTallToolbar');
+                    document.body.classList.remove('withTallToolbar');
                     viewMenuBarTabs = document.querySelector('.viewMenuBarTabs');
                     viewMenuBarTabs.innerHTML = '';
                     viewMenuBarTabs.classList.add('hide');
@@ -724,7 +716,7 @@
                         return '<paper-tab link><a class="clearLink paperTabLink" href="' + t.href + '"><div>' + t.name + '</div></a></paper-tab>';
 
                     }).join('') + '</paper-tabs>';
-                    mainDrawerPanel.classList.add('withTallToolbar');
+                    document.body.classList.add('withTallToolbar');
                     LibraryMenu.tabType = type;
                 });
                 return;
@@ -958,14 +950,14 @@
 
         if (isDashboardPage) {
             refreshDashboardInfoInDrawer(page);
-            mainDrawerPanel.forceNarrow = false;
+            //mainDrawerPanel.forceNarrow = false;
         } else {
 
-            if (mainDrawerPanel.classList.contains('adminDrawerPanel')) {
+            if (navDrawerElement.classList.contains('adminDrawer')) {
                 refreshLibraryDrawer();
             }
 
-            mainDrawerPanel.forceNarrow = true;
+            //mainDrawerPanel.forceNarrow = true;
         }
 
         setDrawerClass(page);
@@ -1085,11 +1077,11 @@
         }
 
         if (admin) {
-            mainDrawerPanel.classList.add('adminDrawerPanel');
-            mainDrawerPanel.classList.remove('darkDrawerPanel');
+            navDrawerElement.classList.add('adminDrawer');
+            navDrawerElement.classList.remove('darkDrawer');
         } else {
-            mainDrawerPanel.classList.add('darkDrawerPanel');
-            mainDrawerPanel.classList.remove('adminDrawerPanel');
+            navDrawerElement.classList.add('darkDrawer');
+            navDrawerElement.classList.remove('adminDrawer');
         }
     }
 
@@ -1105,20 +1097,34 @@
         });
     }
 
-    mainDrawerPanel.addEventListener('iron-select', onMainDrawerSelect);
-    var headerCreated;
-    var userRequiresUpdateAfterHeader;
+    function getNavDrawerOptions() {
 
-    require(['paper-icon-button-light', 'material-icons'], function () {
-        renderHeader();
-        headerCreated = true;
+        var drawerWidth = screen.availWidth - 50;
+        // At least 240
+        drawerWidth = Math.max(drawerWidth, 240);
+        // But not exceeding 270
+        drawerWidth = Math.min(drawerWidth, 270);
 
-        var user = userRequiresUpdateAfterHeader;
-        if (user) {
-            updateUserInHeader(user);
+        var disableEdgeSwipe = false;
+
+        if (browserInfo.safari) {
+            disableEdgeSwipe = true;
         }
-        userRequiresUpdateAfterHeader = null;
-    });
+
+        // Default is 600px
+        //drawer.responsiveWidth = '640px';
+
+        return {
+            target: navDrawerElement,
+            onChange: onMainDrawerSelect,
+            width: drawerWidth,
+            disableEdgeSwipe: disableEdgeSwipe
+        };
+    }
+
+    navDrawerInstance = new navdrawer(getNavDrawerOptions());
+    navDrawerElement.classList.remove('hide');
+    renderHeader();
 
     Events.on(ConnectionManager, 'apiclientcreated', function (e, apiClient) {
         initializeApiClient(apiClient);
@@ -1128,12 +1134,7 @@
         setDrawerClass();
         ConnectionManager.user(ConnectionManager.getApiClient(user.ServerId)).then(function (user) {
             refreshLibraryDrawer(user);
-
-            if (headerCreated) {
-                updateUserInHeader(user);
-            } else {
-                userRequiresUpdateAfterHeader = user;
-            }
+            updateUserInHeader(user);
         });
     });
 
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index bc75207c36..3c6c7afd8e 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -2212,8 +2212,6 @@ var AppInfo = {};
 
         deps.push('scripts/mediacontroller');
 
-        deps.push('paper-drawer-panel');
-
         require(deps, function (events) {
 
             window.Events = events;
@@ -2232,25 +2230,6 @@ var AppInfo = {};
 
     function initAfterDependencies() {
 
-        var drawer = document.querySelector('.mainDrawerPanel');
-        drawer.classList.remove('mainDrawerPanelPreInit');
-        drawer.forceNarrow = true;
-
-        var drawerWidth = screen.availWidth - 50;
-        // At least 240
-        drawerWidth = Math.max(drawerWidth, 240);
-        // But not exceeding 270
-        drawerWidth = Math.min(drawerWidth, 270);
-
-        drawer.drawerWidth = drawerWidth + "px";
-
-        if (browserInfo.safari) {
-            drawer.disableEdgeSwipe = true;
-        }
-
-        // Default is 600px
-        drawer.responsiveWidth = '640px';
-
         var deps = [];
         deps.push('scripts/extensions');
 
@@ -3381,4 +3360,5 @@ window.addEventListener("beforeunload", function () {
             apiClient.closeWebSocket();
         }
     }
-});
\ No newline at end of file
+});
+