diff --git a/client/src/components/Endpoints/Icon.tsx b/client/src/components/Endpoints/Icon.tsx
index 53f6590e3..56cba9ee8 100644
--- a/client/src/components/Endpoints/Icon.tsx
+++ b/client/src/components/Endpoints/Icon.tsx
@@ -3,6 +3,7 @@ import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
 import {
   Plugin,
   GPTIcon,
+  UserIcon,
   PaLMIcon,
   CodeyIcon,
   GeminiIcon,
@@ -42,7 +43,16 @@ const Icon: React.FC<IconProps> = (props) => {
         }}
         className={cn('relative flex items-center justify-center', props.className ?? '')}
       >
-        <img className="rounded-sm" src={user?.avatar || avatarSrc} alt="avatar" />
+        {!user?.avatar && !user?.username ? (
+          <div
+            style={{ backgroundColor: 'rgb(121, 137, 255)', width: '24px', height: '24px' }}
+            className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
+          >
+            <UserIcon />
+          </div>
+        ) : (
+          <img className="rounded-sm" src={user?.avatar || avatarSrc} alt="avatar" />
+        )}
       </div>
     );
   } else {
diff --git a/client/src/components/Nav/NavLinks.tsx b/client/src/components/Nav/NavLinks.tsx
index ad324132a..17a196a2e 100644
--- a/client/src/components/Nav/NavLinks.tsx
+++ b/client/src/components/Nav/NavLinks.tsx
@@ -10,6 +10,7 @@ import { useAuthContext } from '~/hooks/AuthContext';
 import useAvatar from '~/hooks/Messages/useAvatar';
 import { ExportModal } from './ExportConversation';
 import { LinkIcon, GearIcon } from '~/components';
+import { UserIcon } from '~/components/svg';
 import { useLocalize } from '~/hooks';
 import Settings from './Settings';
 import NavLink from './NavLink';
@@ -72,7 +73,20 @@ function NavLinks() {
             >
               <div className="-ml-0.9 -mt-0.8 h-8 w-7 flex-shrink-0">
                 <div className="relative flex">
-                  <img className="rounded-full" src={user?.avatar || avatarSrc} alt="" />
+                  {!user?.avatar && !user?.username ? (
+                    <div
+                      style={{
+                        backgroundColor: 'rgb(121, 137, 255)',
+                        width: '28px',
+                        height: '28px',
+                      }}
+                      className="relative flex h-9 w-9 items-center justify-center rounded-full p-1 text-white"
+                    >
+                      <UserIcon />
+                    </div>
+                  ) : (
+                    <img className="rounded-full" src={user?.avatar || avatarSrc} alt="avatar" />
+                  )}
                 </div>
               </div>
               <div