diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index c32ddbdb1d..857ac8df87 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -12,6 +12,7 @@ import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
+import useAvatarQuery from "@calcom/trpc/react/hooks/useAvatarQuery";
 import type { VerticalTabItemProps } from "@calcom/ui";
 import { Badge, Button, ErrorBoundary, Skeleton, useMeta, VerticalTabItem } from "@calcom/ui";
 import {
@@ -105,14 +106,16 @@ const adminRequiredKeys = ["admin"];
 
 const useTabs = () => {
   const session = useSession();
+  const { data: user } = trpc.viewer.me.useQuery();
+  const { data: avatar } = useAvatarQuery();
 
   const isAdmin = session.data?.user.role === UserPermissionRole.ADMIN;
 
   tabs.map((tab) => {
-    if (tab.name === "my_account") {
-      tab.name = session.data?.user?.name || "my_account";
+    if (tab.href === "/settings/my-account") {
+      tab.name = user?.name || "my_account";
       tab.icon = undefined;
-      tab.avatar = WEBAPP_URL + "/" + session.data?.user?.username + "/avatar.png";
+      tab.avatar = avatar?.avatar || WEBAPP_URL + "/" + session?.data?.user?.username + "/avatar.png";
     }
     return tab;
   });
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 458fea3134..9e85062717 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -24,6 +24,7 @@ import getBrandColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isKeyInObject } from "@calcom/lib/isKeyInObject";
 import { trpc } from "@calcom/trpc/react";
+import useAvatarQuery from "@calcom/trpc/react/hooks/useAvatarQuery";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
 import {
@@ -246,8 +247,9 @@ export default function Shell(props: LayoutProps) {
 
 function UserDropdown({ small }: { small?: boolean }) {
   const { t } = useLocale();
-  const query = useMeQuery();
-  const user = query.data;
+  const { data: user } = useMeQuery();
+  const { data: avatar } = useAvatarQuery();
+
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
@@ -294,7 +296,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                 // eslint-disable-next-line @next/next/no-img-element
                 <img
                   className="rounded-full"
-                  src={WEBAPP_URL + "/" + user.username + "/avatar.png"}
+                  src={avatar?.avatar || WEBAPP_URL + "/" + user.username + "/avatar.png"}
                   alt={user.username || "Nameless User"}
                 />
               }
diff --git a/packages/trpc/react/hooks/useAvatarQuery.ts b/packages/trpc/react/hooks/useAvatarQuery.ts
new file mode 100644
index 0000000000..8cf3a8517a
--- /dev/null
+++ b/packages/trpc/react/hooks/useAvatarQuery.ts
@@ -0,0 +1,13 @@
+import { trpc } from "../trpc";
+
+export function useAvatarQuery() {
+  const avatarQuery = trpc.viewer.avatar.useQuery(undefined, {
+    retry(failureCount) {
+      return failureCount > 3;
+    },
+  });
+
+  return avatarQuery;
+}
+
+export default useAvatarQuery;