diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js
index 448ad35271..7dd597f802 100644
--- a/src/controllers/dashboard/devices/devices.js
+++ b/src/controllers/dashboard/devices/devices.js
@@ -4,7 +4,6 @@ import globalize from '../../../scripts/globalize';
 import imageHelper from '../../../scripts/imagehelper';
 import { formatDistanceToNow } from 'date-fns';
 import { localeWithSuffix } from '../../../scripts/dfnshelper';
-import * as cardBuilder from '../../../components/cardbuilder/cardBuilder.js';
 import '../../../elements/emby-button/emby-button';
 import '../../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../../components/cardbuilder/card.css';
@@ -97,7 +96,7 @@ import confirm from '../../../components/confirm/confirm';
             deviceHtml += '<div class="cardBox visualCardBox">';
             deviceHtml += '<div class="cardScalable">';
             deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
-            deviceHtml += `<a is="emby-linkbutton" href="${canEdit ? '#!/device.html?id=' + device.Id : '#'}" class="cardContent cardImageContainer ${cardBuilder.getDefaultBackgroundClass()}">`;
+            deviceHtml += `<a is="emby-linkbutton" href="${canEdit ? '#!/device.html?id=' + device.Id : '#'}" class="cardContent cardImageContainer">`;
             const iconUrl = imageHelper.getDeviceIcon(device);
 
             if (iconUrl) {
diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js
index 66f9f2e692..7abb0d2313 100644
--- a/src/controllers/dashboard/library.js
+++ b/src/controllers/dashboard/library.js
@@ -277,7 +277,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
         let hasCardImageContainer;
 
         if (imgUrl) {
-            html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer">`;
+            html += `<div class="cardImageContainer editLibrary ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer">`;
             html += `<img src="${imgUrl}" style="width:100%" />`;
             hasCardImageContainer = true;
         } else if (!virtualFolder.showNameWithIcon) {
diff --git a/src/controllers/dashboard/users/userprofilespage.js b/src/controllers/dashboard/users/userprofilespage.js
index 250bbbd535..203a630158 100644
--- a/src/controllers/dashboard/users/userprofilespage.js
+++ b/src/controllers/dashboard/users/userprofilespage.js
@@ -94,7 +94,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
         html += '<div class="cardPadder cardPadder-square"></div>';
-        html += `<a is="emby-linkbutton" class="cardContent ${cardBuilder.getDefaultBackgroundClass()}" href="#!/useredit.html?userId=${user.Id}">`;
+        html += `<a is="emby-linkbutton" class="cardContent ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}" href="#!/useredit.html?userId=${user.Id}">`;
         let imgUrl;
 
         if (user.PrimaryImageTag) {
@@ -114,7 +114,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
         if (imgUrl) {
             html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + "');\">";
         } else {
-            html += '<div class="' + imageClass + ' flex align-items-center justify-content-center">';
+            html += `<div class="${imageClass} ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()} flex align-items-center justify-content-center">`;
             html += '<span class="material-icons cardImageIcon person"></span>';
         }
 
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index 24b3a983eb..ef7e1e5c62 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -13,6 +13,7 @@ import ServerConnections from '../../../components/ServerConnections';
 import toast from '../../../components/toast/toast';
 import dialogHelper from '../../../components/dialogHelper/dialogHelper';
 import baseAlert from '../../../components/alert';
+import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -131,29 +132,6 @@ import baseAlert from '../../../components/alert';
         }
     }
 
-    const metroColors = ['#6FBD45', '#4BB3DD', '#4164A5', '#E12026', '#800080', '#E1B222', '#008040', '#0094FF', '#FF00C7', '#FF870F', '#7F0037'];
-
-    function getRandomMetroColor() {
-        const index = Math.floor(Math.random() * (metroColors.length - 1));
-        return metroColors[index];
-    }
-
-    function getMetroColor(str) {
-        if (str) {
-            const character = String(str.substr(0, 1).charCodeAt());
-            let sum = 0;
-
-            for (let i = 0; i < character.length; i++) {
-                sum += parseInt(character.charAt(i));
-            }
-
-            const index = String(sum).substr(-1);
-            return metroColors[index];
-        }
-
-        return getRandomMetroColor();
-    }
-
     function loadUserList(context, apiClient, users) {
         let html = '';
 
@@ -176,7 +154,7 @@ import baseAlert from '../../../components/alert';
             html += '<div class="' + cardBoxCssClass + '">';
             html += '<div class="cardScalable">';
             html += '<div class="cardPadder cardPadder-square"></div>';
-            html += '<div class="cardContent" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">';
+            html += `<div class="cardContent" style="border-radius:0.2em" data-haspw="${user.HasPassword}" data-username="${user.Name}" data-userid="${user.Id}">`;
             let imgUrl;
 
             if (user.PrimaryImageTag) {
@@ -185,11 +163,12 @@ import baseAlert from '../../../components/alert';
                     tag: user.PrimaryImageTag,
                     type: 'Primary'
                 });
+
                 html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');\"></div>";
             } else {
-                const background = getMetroColor(user.Id);
-                imgUrl = 'assets/img/avatar.png';
-                html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');background-color:" + background + ';"></div>';
+                html += `<div class="cardImage flex align-items-center justify-content-center ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}">`;
+                html += '<span class="material-icons cardImageIcon person"></span>';
+                html += `</div>`;
             }
 
             html += '</div>';
diff --git a/src/controllers/session/selectServer/index.js b/src/controllers/session/selectServer/index.js
index 32674a8062..6c6e4189a5 100644
--- a/src/controllers/session/selectServer/index.js
+++ b/src/controllers/session/selectServer/index.js
@@ -17,6 +17,7 @@ import '../../../elements/emby-button/emby-button';
 import Dashboard from '../../../scripts/clientUtils';
 import ServerConnections from '../../../components/ServerConnections';
 import alert from '../../../components/alert';
+import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -64,7 +65,7 @@ import alert from '../../../components/alert';
             cardContainer += '<div class="cardPadder cardPadder-square">';
             cardContainer += '</div>';
             cardContainer += '<div class="cardContent">';
-            cardContainer += '<div class="cardImageContainer coveredImage" style="background:#0288D1;border-radius:.15em;">';
+            cardContainer += `<div class="cardImageContainer coveredImage ${cardBuilder.getDefaultBackgroundClass()}" style="border-radius:0.2em">`;
             cardContainer += cardImageContainer;
             cardContainer += '</div>';
             cardContainer += '</div>';