diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index bd22ae97..e4b20b85 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -343,9 +343,15 @@ html[data-bs-theme="dark"] .app-input::-webkit-calendar-picker-indicator {
 }
 
 .app-avatar-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-subtle));
   background: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-secondary));
   color: var(--accent-primary-strong);
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
 }
 
 .app-counter {
diff --git a/frontend/src/app/messages/page.tsx b/frontend/src/app/messages/page.tsx
index 476d0010..69bf43e6 100644
--- a/frontend/src/app/messages/page.tsx
+++ b/frontend/src/app/messages/page.tsx
@@ -520,7 +520,7 @@ export default function MessagesPage() {
                 >
                   <div className="flex items-start gap-3">
                     <div className="relative h-10 w-10">
-                      <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-sky-400 text-xs font-semibold text-white">
+                      <div className="app-avatar-fallback flex h-10 w-10 items-center justify-center overflow-hidden rounded-full text-xs font-semibold">
                         {chatAvatar ? (
                           <Image
                             src={resolveMediaUrl(chatAvatar)}
diff --git a/frontend/src/components/AppShell.tsx b/frontend/src/components/AppShell.tsx
index 3cbba862..06f37d43 100644
--- a/frontend/src/components/AppShell.tsx
+++ b/frontend/src/components/AppShell.tsx
@@ -178,7 +178,7 @@ function Header({ onOpenLeftNav, onOpenCalendar }: HeaderProps) {
             <NotificationCenter />
             <div className="ml-1 relative h-10 w-10" id="user-menu-root">
               <div
-                className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-sky-400 text-sm font-semibold text-white hover:bg-sky-500 cursor-pointer"
+                className="app-avatar-fallback flex h-10 w-10 cursor-pointer items-center justify-center overflow-hidden rounded-full text-sm font-semibold hover:bg-[var(--accent-soft-strong)]"
                 title={userName}
                 onClick={() => setUserMenuOpen((v) => !v)}
               >
diff --git a/frontend/src/components/layout/MobileDrawers.tsx b/frontend/src/components/layout/MobileDrawers.tsx
index b99ab6ef..8e99fcfd 100644
--- a/frontend/src/components/layout/MobileDrawers.tsx
+++ b/frontend/src/components/layout/MobileDrawers.tsx
@@ -58,7 +58,7 @@ export function MobileLeftDrawer({ isOpen, onClose, children }: LeftNavDrawerPro
             onClick={() => setIsProfileExpanded(!isProfileExpanded)}
             className="flex w-full items-center gap-3 p-4 transition-colors hover:bg-[var(--accent-soft)]"
           >
-            <div className="h-12 w-12 overflow-hidden rounded-full bg-sky-400 text-sm font-semibold text-white flex items-center justify-center flex-shrink-0">
+            <div className="app-avatar-fallback flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full text-sm font-semibold">
               {user?.avatar ? (
                 <img src={user.avatar} alt={userName} className="h-full w-full object-cover" />
               ) : (
diff --git a/frontend/src/components/messages/ChatMessageItem.tsx b/frontend/src/components/messages/ChatMessageItem.tsx
index 189e5752..c9ed19e8 100644
--- a/frontend/src/components/messages/ChatMessageItem.tsx
+++ b/frontend/src/components/messages/ChatMessageItem.tsx
@@ -147,7 +147,7 @@ export default function ChatMessageItem({
       <div className={`flex ${isMine ? "justify-end" : "justify-start"}`}>
         {!isMine ? (
           <div className="relative mr-2 mt-1 h-8 w-8 shrink-0">
-            <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-sky-400 text-[10px] font-semibold text-white">
+            <div className="app-avatar-fallback flex h-8 w-8 items-center justify-center overflow-hidden rounded-full text-[10px] font-semibold">
               {message.avatar || message.author?.avatar ? (
                 <Image
                   src={resolveMediaUrl(message.avatar || message.author?.avatar || "")}