diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 5ca3eafd38..17028c2952 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -876,13 +876,20 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
 
         ha-md-list-item.user {
-          --md-list-item-leading-icon-size: 40px;
-          --md-list-item-leading-space: 4px;
+          --md-list-item-leading-space: 0;
+          --md-list-item-trailing-space: 0;
         }
 
         ha-user-badge {
           flex-shrink: 0;
-          margin-right: -8px;
+          display: flex;
+          justify-content: center;
+          width: 100%;
+        }
+
+        ha-user-badge::part(picture) {
+          width: 40px;
+          height: 40px;
         }
 
         .spacer {
diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts
index 89c33729e5..ce83c9c965 100644
--- a/src/components/user/ha-user-badge.ts
+++ b/src/components/user/ha-user-badge.ts
@@ -54,6 +54,7 @@ class UserBadge extends LitElement {
           backgroundImage: `url(${this.hass.hassUrl(picture)})`,
         })}
         class="picture"
+        part="picture"
       ></div>`;
     }
     const initials = computeUserInitials(this.user.name);