diff --git a/frontend/src/styles/tribe.scss b/frontend/src/styles/tribe.scss
index cd8949292..5ae588ee3 100644
--- a/frontend/src/styles/tribe.scss
+++ b/frontend/src/styles/tribe.scss
@@ -449,7 +449,11 @@
       color: var(--text-color);
       .nameAndIcons {
         display: flex;
-        gap: 0.25rem;
+        gap: 0.25em;
+        align-items: center;
+        .avatar {
+          --size: 0.9em;
+        }
       }
       .icons {
         display: grid;
@@ -741,17 +745,26 @@
     padding-right: 0;
   }
   .player {
+    color: var(--sub-color);
     &.faded {
       opacity: 0.25;
     }
+    .avatarAndName {
+      .avatar {
+        --size: 0.9em;
+      }
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
     .name {
-      color: var(--sub-color);
       text-overflow: ellipsis;
       max-width: 125px;
       overflow: hidden;
     }
     .progress {
       width: 100%;
+      vertical-align: middle;
       .barBg {
         width: 100%;
         height: 0.25rem;
@@ -766,22 +779,27 @@
         }
       }
     }
-    .stats {
+    .acc {
       text-align: right;
-      grid-template-columns: auto auto;
-      color: var(--sub-color);
-      display: flex;
-      justify-content: flex-end;
-      min-width: 90px;
-      .acc {
-        margin-left: 1rem;
-      }
+      width: 4ch;
     }
+    .wpm {
+      text-align: right;
+      width: 3ch;
+    }
+    // .stats {
+    //   text-align: right;
+    //   grid-template-columns: auto auto;
+    //   color: var(--sub-color);
+    //   display: flex;
+    //   justify-content: flex-end;
+    //   min-width: 90px;
+    //   .acc {
+    //     margin-left: 1rem;
+    //   }
+    // }
     &.me {
-      .name,
-      .stats {
-        color: var(--text-color);
-      }
+      color: var(--text-color);
       .progress .bar {
         background: var(--main-color);
       }
diff --git a/frontend/src/ts/tribe/tribe-bars.ts b/frontend/src/ts/tribe/tribe-bars.ts
index d26ea5c1e..cde575d21 100644
--- a/frontend/src/ts/tribe/tribe-bars.ts
+++ b/frontend/src/ts/tribe/tribe-bars.ts
@@ -4,6 +4,7 @@ import * as SlowTimer from "../states/slow-timer";
 import tribeSocket from "./tribe-socket";
 import * as ThemeColors from "../elements/theme-colors";
 import { isConfigInfinite } from "./tribe-config";
+import { getAvatarElement } from "../utils/discord-avatar";
 
 export function init(page: string): void {
   let el: JQuery | undefined;
@@ -15,52 +16,80 @@ export function init(page: string): void {
   }
 
   const room = TribeState.getRoom();
-  if (el) {
-    el.empty();
-  }
 
+  if (!el) return;
   if (!room) return;
 
+  let html = "";
+
   for (const [userId, user] of Object.entries(room.users)) {
     if (userId === tribeSocket.getId()) continue;
     let me = false;
     if (userId === tribeSocket.getId()) me = true;
-    if (user.isTyping && el) {
-      el.append(`
+    if (user.isTyping) {
+      html += `
       <tr class="player ${me ? "me" : ""}" id="${userId}">
-        <td class="name">${user.name}</td>
+        <td class="avatarAndName">
+          <div class="avatar">
+            ${
+              getAvatarElement({
+                discordId: undefined,
+                discordAvatar: undefined,
+              }).innerHTML
+            }
+          </div>
+          <div class="name">
+          ${user.name}
+          </div>
+        </td>
         <td class="progress">
           <div class="barBg">
             <div class="bar" style="width: 0%;"></div>
           </div>
         </td>
-        <td class="stats">
-          <div class="wpm">-</div>
-          <div class="acc">-</div>
+        <td>
+        <div class="wpm">-</div>
+        </td>
+        <td>
+        <div class="acc">-</div>
         </td>
       </tr>
-      `);
+      `;
     }
   }
-  if (el) {
-    const tribeSelf = TribeState.getSelf();
-    if (tribeSelf?.isTyping) {
-      el.append(`
+  const tribeSelf = TribeState.getSelf();
+  if (tribeSelf?.isTyping) {
+    html += `
       <tr class="player me" id="${tribeSelf?.id}">
-        <td class="name">${tribeSelf?.name}</td>
+        <td class="avatarAndName">
+          <div class="avatar">
+            ${
+              getAvatarElement({
+                discordId: undefined,
+                discordAvatar: undefined,
+              }).innerHTML
+            }
+          </div>
+          <div class="name">
+          ${tribeSelf?.name}
+          </div>
+        </td>
         <td class="progress">
           <div class="barBg">
             <div class="bar" style="width: 0%;"></div>
           </div>
         </td>
-        <td class="stats">
-          <div class="wpm">-</div>
-          <div class="acc">-</div>
+        <td>
+        <div class="wpm">-</div>
+        </td>
+        <td>
+        <div class="acc">-</div>
         </td>
       </tr>
-      `);
-    }
+      `;
   }
+
+  el.html(html);
 }
 
 export function show(page: string): void {
diff --git a/frontend/src/ts/tribe/tribe-user-list.ts b/frontend/src/ts/tribe/tribe-user-list.ts
index d3003a3ba..2cf1dd3a2 100644
--- a/frontend/src/ts/tribe/tribe-user-list.ts
+++ b/frontend/src/ts/tribe/tribe-user-list.ts
@@ -2,6 +2,7 @@ import * as TribeState from "./tribe-state";
 import * as TribeUserSettingsPopup from "../popups/tribe-user-settings-popup";
 import tribeSocket from "./tribe-socket";
 import { User } from "./types";
+import { getAvatarElement } from "../utils/discord-avatar";
 
 export function reset(page?: string): void {
   if (page === undefined) {
@@ -29,7 +30,7 @@ export function update(page?: string): void {
     usersArray.push(room.users[userId]);
   }
   const sortedUsers = usersArray.sort(
-    (a, b) => (b?.points ?? 0) - (a?.points ?? 0)
+    (a, b) => (b?.points ?? 0) - (a?.points ?? 0),
   ) as User[];
   sortedUsers.forEach((user) => {
     let icons = "";
@@ -55,12 +56,20 @@ export function update(page?: string): void {
       user.isAfk ? "afk" : ""
     }'>
     <div class="nameAndIcons">
-      <div class='icons'>
-      ${icons}
+      <div class='avatar'>
+      ${
+        getAvatarElement({
+          discordId: undefined,
+          discordAvatar: undefined,
+        }).innerHTML
+      }
       </div>
       <div class='name'>
       ${user.name}
       </div>
+      <div class='icons'>
+      ${icons}
+      </div>
       ${
         TribeState.getSelf()?.isLeader && user.id !== tribeSocket.getId()
           ? `<div class='userSettings' userid='` +
@@ -76,7 +85,7 @@ export function update(page?: string): void {
       $(".pageTribe .lobby .userlist .list").append(appendData);
     } else if (page === "result") {
       $(".pageTest #result #tribeResultBottom .userlist .list").append(
-        appendData
+        appendData,
       );
     }
   });
@@ -88,5 +97,5 @@ $(document).on(
   (e) => {
     const userId = $(e.currentTarget).attr("userid") as string;
     TribeUserSettingsPopup.show(userId);
-  }
+  },
 );