diff --git a/src/components/contentDisplay/feedPost/FeedPost.tsx b/src/components/contentDisplay/feedPost/FeedPost.tsx
index 0d99994b..8aa72262 100644
--- a/src/components/contentDisplay/feedPost/FeedPost.tsx
+++ b/src/components/contentDisplay/feedPost/FeedPost.tsx
@@ -77,7 +77,7 @@ export default function FeedPost(props: Props) {
             }}
             className="z-20 shrink-0 hover:brightness-90"
           >
-            <Avatar profile={author} size="md" />
+            <Avatar src={author.avatar} size="md" />
           </Link>
           <div className={`flex flex-col grow ${isParent && "pb-6"}`}>
             {isParent && !reason && (
diff --git a/src/components/contentDisplay/notification/NotificationItem.tsx b/src/components/contentDisplay/notification/NotificationItem.tsx
index 43d62df7..7a5779fd 100644
--- a/src/components/contentDisplay/notification/NotificationItem.tsx
+++ b/src/components/contentDisplay/notification/NotificationItem.tsx
@@ -59,7 +59,7 @@ export default function NotificationItem(props: Props) {
                       href={`/dashboard/user/${author.handle}`}
                       className="max-w-fit hover:brightness-90"
                     >
-                      <Avatar profile={author} />
+                      <Avatar src={author.avatar} />
                     </Link>
                   ))}
                   {allAuthors.length > MAX_AUTHORS_SHOWN && (
diff --git a/src/components/contentDisplay/profileCard/ProfileCard.tsx b/src/components/contentDisplay/profileCard/ProfileCard.tsx
index 01d10c0c..8c15dadd 100644
--- a/src/components/contentDisplay/profileCard/ProfileCard.tsx
+++ b/src/components/contentDisplay/profileCard/ProfileCard.tsx
@@ -21,7 +21,7 @@ export default function ProfileCard(props: Props) {
       <article className="flex flex-col gap-2">
         <div className="flex flex-wrap justify-between gap-3">
           <div className="flex flex-wrap gap-2 items-start">
-            <Avatar profile={profile} />
+            <Avatar src={profile.avatar} />
             <div className="flex flex-col">
               <h2 className="font-semibold">
                 {profile?.displayName ?? profile.handle}
diff --git a/src/components/contentDisplay/searchPost/SearchPost.tsx b/src/components/contentDisplay/searchPost/SearchPost.tsx
index 345c0afb..28df2d34 100644
--- a/src/components/contentDisplay/searchPost/SearchPost.tsx
+++ b/src/components/contentDisplay/searchPost/SearchPost.tsx
@@ -39,7 +39,7 @@ export default function SearchPost(props: Props) {
           }}
           className="z-20 shrink-0 hover:brightness-90"
         >
-          <Avatar profile={author} size="md" />
+          <Avatar src={author.avatar} size="md" />
         </Link>
         <div className="flex flex-col grow">
           <div className="flex">
diff --git a/src/components/contentDisplay/threadPost/ThreadPost.tsx b/src/components/contentDisplay/threadPost/ThreadPost.tsx
index a0e7a1ee..99684cf1 100644
--- a/src/components/contentDisplay/threadPost/ThreadPost.tsx
+++ b/src/components/contentDisplay/threadPost/ThreadPost.tsx
@@ -66,7 +66,7 @@ export default function ThreadPost(props: Props) {
           }}
           className="z-20 shrink-0 hover:brightness-90"
         >
-          <Avatar profile={author} size="md" />
+          <Avatar src={author.avatar} size="md" />
         </button>
         <div className="flex flex-col grow">
           <div className="flex flex-col">
diff --git a/src/components/dataDisplay/avatar/Avatar.tsx b/src/components/dataDisplay/avatar/Avatar.tsx
index b380fb52..1846c0cb 100644
--- a/src/components/dataDisplay/avatar/Avatar.tsx
+++ b/src/components/dataDisplay/avatar/Avatar.tsx
@@ -1,19 +1,18 @@
 import Image from "next/image";
 import FallbackAvatar from "@/assets/images/fallbackAvatar.png";
 import { getAvatarSize } from "@/lib/utils/image";
-import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 
 interface Props {
   size?: AvatarSize;
-  profile: ProfileViewDetailed | null | undefined;
+  src?: string;
 }
 export default function Avatar(props: Props) {
-  const { size, profile } = props;
+  const { size, src } = props;
   const [width, height] = getAvatarSize(size);
 
   return (
     <Image
-      src={profile?.avatar ?? FallbackAvatar}
+      src={src ?? FallbackAvatar}
       alt="Avatar"
       width={width}
       height={height}
diff --git a/src/components/dataDisplay/postEmbed/RecordEmbed.tsx b/src/components/dataDisplay/postEmbed/RecordEmbed.tsx
index e017e8b2..8d18ee1d 100644
--- a/src/components/dataDisplay/postEmbed/RecordEmbed.tsx
+++ b/src/components/dataDisplay/postEmbed/RecordEmbed.tsx
@@ -49,7 +49,7 @@ export default function RecordEmbed(props: Props) {
           <div className="flex flex-col">
             <div className="flex">
               <span className="flex items-center gap-1">
-                <Avatar profile={record.author} size="xs" />
+                <Avatar src={record.author.avatar} size="xs" />
                 <span className="font-semibold break-all max-w-[90%] shrink-0 line-clamp-1 overflow-ellipsis text-neutral-700">
                   {record.author.displayName ?? record.author.handle}{" "}
                 </span>
diff --git a/src/components/navigational/aside/Aside.tsx b/src/components/navigational/aside/Aside.tsx
index 08d7cdf5..bd984d04 100644
--- a/src/components/navigational/aside/Aside.tsx
+++ b/src/components/navigational/aside/Aside.tsx
@@ -24,7 +24,7 @@ export default async function Aside() {
           href={`/dashboard/user/${profile?.handle}`}
           className="max-w-[7rem] truncate hover:brightness-90"
         >
-          <Avatar profile={profile} />
+          <Avatar src={profile?.avatar} />
         </Link>
       </div>
     </aside>
diff --git a/src/components/navigational/topBar/TopBar.tsx b/src/components/navigational/topBar/TopBar.tsx
index 5db2d5b4..c5d86d19 100644
--- a/src/components/navigational/topBar/TopBar.tsx
+++ b/src/components/navigational/topBar/TopBar.tsx
@@ -30,7 +30,7 @@ export default function TopBar(props: Props) {
         href={`/dashboard/user/${profile?.handle}`}
         className="hover:brightness-90"
       >
-        <Avatar profile={profile} size="sm" />
+        <Avatar src={profile.avatar} size="sm" />
       </Link>
       <Button
         onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
diff --git a/src/containers/settings/settingsContainer/SettingsContainer.tsx b/src/containers/settings/settingsContainer/SettingsContainer.tsx
index a7de36d5..8b690a4c 100644
--- a/src/containers/settings/settingsContainer/SettingsContainer.tsx
+++ b/src/containers/settings/settingsContainer/SettingsContainer.tsx
@@ -33,7 +33,7 @@ export default async function SettingsContainer() {
           <div className="flex flex-col gap-3 p-3 mt-2 w-full rounded-none md:rounded-t-2xl md:rounded-b-2xl border border-x-0 md:border-x">
             <div className="flex flex-wrap gap-3 justify-between items-center ">
               <div className="flex gap-3">
-                <Avatar profile={profile} size="md" />
+                <Avatar src={profile.avatar} size="md" />
                 <div className="flex flex-col">
                   <span className="font-semibold break-all max-w-[90%] shrink-0 line-clamp-1 overflow-ellipsis text-neutral-700">
                     {profile.displayName ?? profile.handle}