diff --git a/web/static/index.html b/web/static/index.html
index 4ef568c..248a9c0 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -133,7 +133,7 @@
         <span class="conn-dot"></span>Docusign
       </button>
       <!-- User avatar -->
-      <div class="avatar" title="Logged in" aria-label="User">M</div>
+      <div class="avatar" id="topbar-avatar" title="User" aria-label="User">?</div>
     </div>
   </header>
 
diff --git a/web/static/js/auth.js b/web/static/js/auth.js
index f992e16..2a4f289 100644
--- a/web/static/js/auth.js
+++ b/web/static/js/auth.js
@@ -2,7 +2,7 @@
 
 import { api } from './api.js';
 import { state, setState } from './state.js';
-import { escHtml } from './utils.js';
+import { escHtml, initials } from './utils.js';
 
 // ── Refresh auth state and update chips ────────────────────────────────────
 
@@ -38,6 +38,20 @@ export function renderAuthChips() {
     state.auth.docusignAccountName || 'Docusign',
     onClickDocusign
   );
+  renderAvatar();
+}
+
+function renderAvatar() {
+  const el = document.getElementById('topbar-avatar');
+  if (!el) return;
+
+  const name = state.auth.docusignLabel && state.auth.docusignLabel !== 'Docusign'
+    ? state.auth.docusignLabel
+    : state.auth.docusignAccountName || '';
+
+  el.textContent = name ? initials(name) : '?';
+  el.title = name || 'User';
+  el.setAttribute('aria-label', name ? `User ${name}` : 'User');
 }
 
 function renderChip(id, connected, label, onClick) {