diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
index 52ae2ce813..f84db0ca28 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
@@ -29,6 +29,10 @@
     flex-wrap: wrap;
 }
 
+    .vertical-wrap.centered {
+        justify-content: center;
+    }
+
     .vertical-wrap .card {
         contain: strict;
     }
diff --git a/dashboard-ui/login.html b/dashboard-ui/login.html
index c9c2bf3821..21472fe2ef 100644
--- a/dashboard-ui/login.html
+++ b/dashboard-ui/login.html
@@ -35,7 +35,7 @@
             <h1>${HeaderPleaseSignIn}</h1>
             <p>${VisualLoginFormHelp}</p>
             <br />
-            <div id="divUsers" class="itemsContainer"></div>
+            <div id="divUsers" class="itemsContainer vertical-wrap centered"></div>
 
             <br />
 
diff --git a/dashboard-ui/scripts/loginpage.js b/dashboard-ui/scripts/loginpage.js
index 5751860c44..10da01b330 100644
--- a/dashboard-ui/scripts/loginpage.js
+++ b/dashboard-ui/scripts/loginpage.js
@@ -1,4 +1,4 @@
-define(['libraryBrowser'], function (libraryBrowser) {
+define(['libraryBrowser', 'cardStyle'], function (libraryBrowser) {
 
     function getApiClient() {
 
@@ -104,7 +104,7 @@
         for (var i = 0, length = users.length; i < length; i++) {
             var user = users[i];
 
-            html += '<div class="card squareCard bottomPaddedCard"><div class="cardBox visualCardBox">';
+            html += '<div class="card squareCard bottomPaddedCard scalableCard"><div class="cardBox visualCardBox">';
 
             html += '<div class="cardScalable">';