diff --git a/src/App.css b/src/App.css
index f8c5d99..5bcc793 100644
--- a/src/App.css
+++ b/src/App.css
@@ -853,12 +853,35 @@
 }
 
 .bottom-nav-btn svg {
-    width: 18px;
-    height: 18px;
+    width: 22px;
+    height: 22px;
     flex-shrink: 0;
     stroke-width: 2;
 }
 
+.bottom-nav-avatar {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+    border: 2px solid transparent;
+}
+
+.bottom-nav-avatar-placeholder {
+    background: var(--color-primary, #22c55e);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.6rem;
+    font-weight: 700;
+}
+
+.bottom-nav-btn-active .bottom-nav-avatar {
+    border-color: currentColor;
+}
+
 .bottom-nav-btn span {
     font-size: 0.8125rem;
     font-weight: 600;
@@ -2143,6 +2166,11 @@
         display: inline;
     }
 
+    .bottom-nav-avatar {
+        width: 31px;
+        height: 31px;
+    }
+
     /* Active pill keeps green but full-width */
     .bottom-nav-btn-active {
         padding: 10px 14px;
@@ -2403,6 +2431,10 @@
     color: #fff;
 }
 
+[data-theme="dark"] .bottom-nav-avatar-placeholder {
+    background: #16a34a;
+}
+
 /* -- Write button -- */
 [data-theme="dark"] .journal-write-btn {
     background: #22c55e;
diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx
index 18720e5..c1866bc 100644
--- a/src/components/BottomNav.tsx
+++ b/src/components/BottomNav.tsx
@@ -1,8 +1,12 @@
 import { useNavigate, useLocation } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
 
 export default function BottomNav() {
   const navigate = useNavigate()
   const location = useLocation()
+  const { user, mongoUser } = useAuth()
+  const displayName = mongoUser?.displayName || user?.displayName || 'U'
+  const photoURL = (mongoUser && 'photoURL' in mongoUser) ? (mongoUser.photoURL || null) : (user?.photoURL || null)
 
   const isActive = (path: string) => location.pathname === path
 
@@ -50,11 +54,13 @@ export default function BottomNav() {
         onClick={() => navigate('/settings')}
         aria-label="Settings"
       >
-        {/* Gear icon */}
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-          <circle cx="12" cy="12" r="3" />
-          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
-        </svg>
+        {photoURL ? (
+          <img src={photoURL} alt={displayName} className="bottom-nav-avatar" />
+        ) : (
+          <div className="bottom-nav-avatar bottom-nav-avatar-placeholder">
+            {displayName.charAt(0).toUpperCase()}
+          </div>
+        )}
         <span>Settings</span>
       </button>
     </nav>