diff --git a/src/assets/css/site.css b/src/assets/css/site.css
index 1a8873ba97..f6326f4c9e 100644
--- a/src/assets/css/site.css
+++ b/src/assets/css/site.css
@@ -129,3 +129,7 @@ div[data-role=page] {
 .hide-scroll {
     overflow-y: hidden;
 }
+
+.w-100 {
+    width: 100%;
+}
diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js
index 640cb26c2e..db468fd6f4 100644
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@@ -1,4 +1,4 @@
-define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layoutManager', 'browser', 'globalize', 'cardStyle', 'emby-checkbox'], function (appHost, appSettings, dom, connectionManager, loading, layoutManager, browser, globalize) {
+define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layoutManager', 'libraryMenu', 'browser', 'globalize', 'cardStyle', 'emby-checkbox'], function (appHost, appSettings, dom, connectionManager, loading, layoutManager, libraryMenu, browser, globalize) {
     'use strict';
 
     var enableFocusTransform = !browser.slow && !browser.edge;
@@ -186,6 +186,7 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
         });
         view.addEventListener('viewshow', function (e) {
             loading.show();
+            libraryMenu.setTransparentMenu(true);
 
             if (!appHost.supports('multiserver')) {
                 view.querySelector('.btnSelectServer').classList.add('hide');
@@ -207,5 +208,8 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
                 view.querySelector('.disclaimer').textContent = options.LoginDisclaimer || '';
             });
         });
+        view.addEventListener('viewhide', function (e) {
+            libraryMenu.setTransparentMenu(false);
+        });
     };
 });
diff --git a/src/controllers/auth/selectserver.js b/src/controllers/auth/selectserver.js
index ba88313484..20c014ce0d 100644
--- a/src/controllers/auth/selectserver.js
+++ b/src/controllers/auth/selectserver.js
@@ -1,4 +1,4 @@
-define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focusManager', 'connectionManager', 'globalize', 'actionsheet', 'dom', 'browser', 'material-icons', 'flexStyles', 'emby-scroller', 'emby-itemscontainer', 'cardStyle', 'emby-button'], function (loading, appRouter, layoutManager, appSettings, appHost, focusManager, connectionManager, globalize, actionSheet, dom, browser) {
+define(['loading', 'appRouter', 'layoutManager', 'libraryMenu', 'appSettings', 'apphost', 'focusManager', 'connectionManager', 'globalize', 'actionsheet', 'dom', 'browser', 'material-icons', 'flexStyles', 'emby-scroller', 'emby-itemscontainer', 'cardStyle', 'emby-button'], function (loading, appRouter, layoutManager, libraryMenu, appSettings, appHost, focusManager, connectionManager, globalize, actionSheet, dom, browser) {
     'use strict';
 
     var enableFocusTransform = !browser.slow && !browser.edge;
@@ -183,6 +183,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
         view.addEventListener('viewshow', function (e) {
             var isRestored = e.detail.isRestored;
             appRouter.setTitle(null);
+            libraryMenu.setTransparentMenu(true);
 
             if (!isRestored) {
                 loadServers();
diff --git a/src/login.html b/src/login.html
index 8e48901c11..fd52b4bf58 100644
--- a/src/login.html
+++ b/src/login.html
@@ -1,7 +1,9 @@
-<div id="loginPage" data-role="page" class="page standalonePage" data-backbutton="false">
+<div id="loginPage" data-role="page" class="page standalonePage flex flex-direction-column align-items-center justify-content-center" data-backbutton="false">
     <div class="padded-left padded-right padded-bottom-page">
-        <form class="manualLoginForm hide" style="margin: 0 auto;">
-            <h1 style="margin-top:1em;text-align: left;">${HeaderPleaseSignIn}</h1>
+        <form class="manualLoginForm hide">
+            <div class="padded-left padded-right flex align-items-center justify-content-center">
+                <h1 class="sectionTitle">${HeaderPleaseSignIn}</h1>
+            </div>
             <div style="height:0; overflow: hidden;">
                 <input type="text" name="fakeusernameremembered" tabindex="-1" />
                 <input type="password" name="fakepasswordremembered" tabindex="-1" />
@@ -29,8 +31,6 @@
                     <span>${ButtonCancel}</span>
                 </button>
             </div>
-            <br/>
-            <br/>
         </form>
 
         <div class="visualLoginForm" style="text-align: center;">
diff --git a/src/selectserver.html b/src/selectserver.html
index 2c84525174..3318a6b80e 100644
--- a/src/selectserver.html
+++ b/src/selectserver.html
@@ -1,10 +1,10 @@
-<div id="selectServerPage" data-role="page" class="page noSecondaryNavPage standalonePage pageContainer fullWidth vertical flex flex-direction-column">
-    <div class="verticalSection flex-shrink-zero flex flex-direction-column" style="margin: 2em 0 1em;">
-        <div class="padded-left padded-right flex align-items-center justify-content-center" style="margin-bottom:2em;">
+<div id="selectServerPage" data-role="page" class="page noSecondaryNavPage standalonePage pageContainer fullWidthContent vertical flex flex-direction-column align-items-center justify-content-center">
+    <div class="verticalSection flex-shrink-zero w-100 flex flex-direction-column">
+        <div class="padded-left padded-right flex align-items-center justify-content-center">
             <h1 class="sectionTitle sectionTitle-cards">${HeaderSelectServer}</h1>
         </div>
         <div class="padded-top padded-bottom-focusscale flex-grow flex" data-horizontal="true" data-centerfocus="card">
-            <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x padded-left padded-right servers flex-grow" style="display: block; text-align: center;" data-hovermenu="false" data-multiselect="false"></div>
+            <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x servers flex-grow" style="display: block; text-align: center;" data-hovermenu="false" data-multiselect="false"></div>
         </div>
     </div>
     <div class="padded-top padded-left padded-right flex flex-shrink-zero justify-content-center verticalSection flex-wrap-wrap" style="margin-left:auto;margin-right:auto;">