diff --git a/frontend/src/lib/components/HubBar.svelte b/frontend/src/lib/components/HubBar.svelte
index 3b460bb..8a37c37 100644
--- a/frontend/src/lib/components/HubBar.svelte
+++ b/frontend/src/lib/components/HubBar.svelte
@@ -1,8 +1,10 @@
 <script>
-  // Shared editorial top bar for the hub (/home3) and its detail pages (/word, /quote,
-  // /onthisday). Full horizontal nav on wide screens; a hamburger + drop panel on phones
-  // so the bar stays clean. `active` highlights the current section.
+  // Shared editorial top bar for the hub (`/`) + its detail pages (/news, /word, /quote,
+  // /onthisday, /art, /play). Full horizontal nav on wide screens; a hamburger + drop panel
+  // on phones so the bar stays clean. `active` highlights the current section.
   // News now lives at /news (the hub is `/`). `newsHref` stays overridable for safety.
+  import { auth } from '$lib/auth.svelte.js';
+  import Avatar from './Avatar.svelte';
   let { active = '', newsHref = '/news' } = $props();
   let open = $state(false);
 
@@ -38,10 +40,14 @@
       <span class="nav-soon">Entertainment</span>
     </nav>
 
-    <a class="acct" href="/account" aria-label="Your account">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C98A2E" stroke-width="2" aria-hidden="true">
-        <circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" />
-      </svg>
+    <a class="acct" class:hasimg={auth.user?.avatar_url} href="/account" aria-label="Your account">
+      {#if auth.user?.avatar_url}
+        <Avatar user={auth.user} size={32} />
+      {:else}
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C98A2E" stroke-width="2" aria-hidden="true">
+          <circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" />
+        </svg>
+      {/if}
     </a>
 
     <button class="burger" class:open aria-label="Menu" aria-expanded={open} aria-controls="hub-menu"
@@ -86,6 +92,8 @@
     width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #e6c9a0; background: #FCEFD7;
     display: flex; align-items: center; justify-content: center; flex: none;
   }
+  /* when showing the profile picture, let it fill the circle cleanly (no tint ring/peek) */
+  .acct.hasimg { background: none; overflow: hidden; padding: 0; }
   .acct:hover { background: #fbe6c4; }
 
   /* hamburger — phones only */