diff --git a/apps/web/src/components/Handle/Handle.tsx b/apps/web/src/components/Handle/Handle.tsx
index 57e5d3b5..9b345817 100644
--- a/apps/web/src/components/Handle/Handle.tsx
+++ b/apps/web/src/components/Handle/Handle.tsx
@@ -14,7 +14,7 @@ import {
 import Stats from "../Stats";
 import NowPlaying from "./NowPlaying";
 import { followsAtom } from "../../atoms/follows";
-import { IconCheck, IconPlus } from "@tabler/icons-react";
+import { IconCheck, IconPlus, IconUser } from "@tabler/icons-react";
 import { Button } from "baseui/button";
 import SignInModal from "../SignInModal";
 import {
@@ -176,11 +176,18 @@ function Handle(props: HandleProps) {
             <div className="flex flex-row items-start justify-between">
               <div className="flex flex-row items-center">
                 <Link to={link} className="no-underline">
-                  <Avatar
-                    src={profiles[did]?.avatar}
-                    name={profiles[did]?.displayName}
-                    size={"60px"}
-                  />
+                  {!profiles[did]?.avatar.endsWith("/@jpeg") && (
+                    <Avatar
+                      src={profiles[did]?.avatar}
+                      name={profiles[did]?.displayName}
+                      size={"60px"}
+                    />
+                  )}
+                  {profiles[did]?.avatar.endsWith("/@jpeg") && (
+                    <div className="w-[60px] h-[60px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center">
+                      <IconUser size={30} color="#fff" />
+                    </div>
+                  )}
                 </Link>
                 <div className="ml-[16px]">
                   <Link to={link} className="no-underline">
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 97a5328e..ba5265fc 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -92,6 +92,7 @@ body {
   --color-skeleton-background: #f3f3f3;
   --color-skeleton-foreground: #ecebeb;
   --color-genre: #3f03fb;
+  --color-avatar-background: #8d2dffed;
 }
 
 .dark {
@@ -115,6 +116,7 @@ body {
   --color-skeleton-background: #221538;
   --color-skeleton-foreground: #2b1a4c;
   --color-genre: #00f1f3;
+  --color-avatar-background: #8d2dffed;
 }
 
 ::placeholder {
diff --git a/apps/web/src/layouts/Navbar/Navbar.tsx b/apps/web/src/layouts/Navbar/Navbar.tsx
index b7409450..1f5c16db 100644
--- a/apps/web/src/layouts/Navbar/Navbar.tsx
+++ b/apps/web/src/layouts/Navbar/Navbar.tsx
@@ -21,6 +21,7 @@ import { API_URL } from "../../consts";
 import { useProfileStatsByDidQuery } from "../../hooks/useProfile";
 import LogoDark from "../../assets/rocksky-logo-dark.png";
 import LogoLight from "../../assets/rocksky-logo-light.png";
+import { IconUser } from "@tabler/icons-react";
 
 const Container = styled.div`
   position: fixed;
@@ -174,11 +175,18 @@ function Navbar() {
                   <div className="flex flex-col items-center">
                     <div className="mb-[5px]">
                       <Link to="/profile/$did" params={{ did: profile.handle }}>
-                        <Avatar
-                          src={profile.avatar}
-                          name={profile.displayName}
-                          size="80px"
-                        />
+                        {!profile?.avatar?.endsWith("/@jpeg") && (
+                          <Avatar
+                            src={profile.avatar}
+                            name={profile.displayName}
+                            size="80px"
+                          />
+                        )}
+                        {profile?.avatar?.endsWith("/@jpeg") && (
+                          <div className="w-[80px] h-[80px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center">
+                            <IconUser size={40} color="#fff" />
+                          </div>
+                        )}
                       </Link>
                     </div>
 
@@ -339,11 +347,18 @@ function Navbar() {
           )}
         >
           <button className="ml-[15px] border-none bg-transparent cursor-pointer">
-            <Avatar
-              src={profile.avatar}
-              name={profile.displayName}
-              size="scale1200"
-            />
+            {!profile?.avatar?.endsWith("/@jpeg") && (
+              <Avatar
+                src={profile.avatar}
+                name={profile.displayName}
+                size="scale1200"
+              />
+            )}
+            {profile?.avatar?.endsWith("/@jpeg") && (
+              <div className="w-[48px] h-[48px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center">
+                <IconUser size={24} color="#fff" />
+              </div>
+            )}
           </button>
         </StatefulPopover>
       )}
diff --git a/apps/web/src/layouts/Search/Search.tsx b/apps/web/src/layouts/Search/Search.tsx
index 47ffe6af..95fae84b 100644
--- a/apps/web/src/layouts/Search/Search.tsx
+++ b/apps/web/src/layouts/Search/Search.tsx
@@ -13,6 +13,7 @@ import Artist from "../../components/Icons/Artist";
 import Disc from "../../components/Icons/Disc";
 import Track from "../../components/Icons/Track";
 import { useSearchMutation } from "../../hooks/useSearch";
+import { IconUser } from "@tabler/icons-react";
 
 const Link = styled(DefaultLink)`
   color: initial;
@@ -84,12 +85,19 @@ function Search() {
                         {item._federation.indexUid === "users" && (
                           <Link to={`/profile/${item.handle}`} key={item.id}>
                             <div className="flex flex-row mb-[10px]">
-                              <img
-                                key={item.did}
-                                src={item.avatar}
-                                alt={item.displayName}
-                                className="w-[50px] h-[50px] mr-[12px] rounded-full"
-                              />
+                              {!item.avatar?.endsWith("/@jpeg") && (
+                                <img
+                                  key={item.did}
+                                  src={item.avatar}
+                                  alt={item.displayName}
+                                  className="w-[50px] h-[50px] mr-[12px] rounded-full"
+                                />
+                              )}
+                              {item.avatar?.endsWith("/@jpeg") && (
+                                <div className="w-[50px] h-[50px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center mr-[12px]">
+                                  <IconUser size={25} color="#fff" />
+                                </div>
+                              )}
                               <div>
                                 <div className="overflow-hidden">
                                   <div className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--color-text)]">
diff --git a/apps/web/src/pages/home/feed/Feed.tsx b/apps/web/src/pages/home/feed/Feed.tsx
index 1ee9e6d0..1ff01c6a 100644
--- a/apps/web/src/pages/home/feed/Feed.tsx
+++ b/apps/web/src/pages/home/feed/Feed.tsx
@@ -22,6 +22,7 @@ import {
 import FeedGenerators from "./FeedGenerators";
 import { consola } from "consola";
 import { Link } from "@tanstack/react-router";
+import { IconUser } from "@tabler/icons-react";
 
 dayjs.extend(relativeTime);
 
@@ -219,11 +220,18 @@ function Feed() {
 
                       <div className="flex">
                         <div className="mr-[8px]">
-                          <Avatar
-                            src={song.userAvatar}
-                            name={song.userDisplayName}
-                            size={"20px"}
-                          />
+                          {!song.userAvatar.endsWith("/@jpeg") && (
+                            <Avatar
+                              src={song.userAvatar}
+                              name={song.userDisplayName}
+                              size={"20px"}
+                            />
+                          )}
+                          {song.userAvatar.endsWith("/@jpeg") && (
+                            <div className="w-[20px] h-[20px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center">
+                              <IconUser size={10} color="#fff" />
+                            </div>
+                          )}
                         </div>
                         <Handle
                           link={`/profile/${song.user}`}
diff --git a/apps/web/src/pages/home/stories/Stories.tsx b/apps/web/src/pages/home/stories/Stories.tsx
index f0e26703..31165101 100644
--- a/apps/web/src/pages/home/stories/Stories.tsx
+++ b/apps/web/src/pages/home/stories/Stories.tsx
@@ -8,7 +8,11 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import utc from "dayjs/plugin/utc";
 import { useEffect, useState, useRef } from "react";
-import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconUser,
+} from "@tabler/icons-react";
 import { useStoriesQuery } from "../../../hooks/useStories";
 import styles, { getModalStyles } from "./styles";
 import _ from "lodash";
@@ -340,7 +344,14 @@ function Stories() {
                       setIsOpen(true);
                     }}
                   >
-                    <Story src={item.avatar} />
+                    {!item.avatar?.endsWith("/@jpeg") && (
+                      <Story src={item.avatar} />
+                    )}
+                    {item.avatar?.endsWith("/@jpeg") && (
+                      <div className="w-[64px] h-[64px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center mr-[12px]">
+                        <IconUser size={24} color="#fff" />
+                      </div>
+                    )}
                     <StatefulTooltip
                       content={item.handle}
                       returnFocus
@@ -384,7 +395,14 @@ function Stories() {
               </div>
               <div className="flex flex-row items-center">
                 <Link to={`/profile/${currentlyPlaying?.handle}`}>
-                  <Avatar src={currentlyPlaying?.avatar} />
+                  {!currentlyPlaying?.avatar?.endsWith("/@jpeg") && (
+                    <Avatar src={currentlyPlaying?.avatar} />
+                  )}
+                  {currentlyPlaying?.avatar?.endsWith("/@jpeg") && (
+                    <div className="w-[48px] h-[48px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center mr-[12px]">
+                      <IconUser size={24} color="#fff" />
+                    </div>
+                  )}
                 </Link>
                 <Link to={`/profile/${currentlyPlaying?.handle}`}>
                   <div className="text-[#fff] no-underline text-[15px]">
diff --git a/apps/web/src/pages/profile/Profile.tsx b/apps/web/src/pages/profile/Profile.tsx
index e36ee90c..e2dc2dcc 100644
--- a/apps/web/src/pages/profile/Profile.tsx
+++ b/apps/web/src/pages/profile/Profile.tsx
@@ -18,7 +18,7 @@ import LovedTracks from "./lovedtracks";
 import Overview from "./overview";
 import Playlists from "./playlists";
 import { Button } from "baseui/button";
-import { IconPlus, IconCheck } from "@tabler/icons-react";
+import { IconPlus, IconCheck, IconUser } from "@tabler/icons-react";
 import { followsAtom } from "../../atoms/follows";
 import SignInModal from "../../components/SignInModal";
 import {
@@ -231,11 +231,18 @@ function Profile(props: ProfileProps) {
             <Group>
               <ProfileInfo>
                 <div className="mr-[20px]">
-                  <Avatar
-                    name={profiles[did]?.displayName}
-                    src={profiles[did]?.avatar}
-                    size="150px"
-                  />
+                  {!profiles[did]?.avatar?.endsWith("/@jpeg") && (
+                    <Avatar
+                      name={profiles[did]?.displayName}
+                      src={profiles[did]?.avatar}
+                      size="150px"
+                    />
+                  )}
+                  {profiles[did]?.avatar?.endsWith("/@jpeg") && (
+                    <div className="w-[150px] h-[150px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center">
+                      <IconUser size={80} color="#fff" />
+                    </div>
+                  )}
                 </div>
                 <div
                   style={{ marginTop: profiles[did]?.displayName ? 10 : 30 }}