diff --git a/src/app/auth/import.tsx b/src/app/auth/import.tsx
index d105deda..7a995d3a 100644
--- a/src/app/auth/import.tsx
+++ b/src/app/auth/import.tsx
@@ -145,6 +145,7 @@ export function ImportAccountScreen() {
               </label>
               <div className="flex w-full flex-col gap-2">
                 <input
+                  readOnly={!!pubkey}
                   name="npub"
                   type="text"
                   value={npub}
@@ -172,15 +173,14 @@ export function ImportAccountScreen() {
                     >
                       Continue with nsecBunker
                     </button>
-                    <div>
-                      <p className="mb-0.5 text-sm font-semibold">Note:</p>
-                      <p className="text-sm text-neutral-600 dark:text-neutral-400">
-                        If you&apos;re using nsecbunker token, keep in mind it only can
-                        redeem one-time, you need to login again in the next launch
-                      </p>
-                    </div>
                   </div>
                 ) : null}
+                {npub.indexOf('#') > -1 ? (
+                  <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                    You&apos;re using nsecbunker token, keep in mind it only can redeem
+                    one-time, you need to login again in the next launch
+                  </p>
+                ) : null}
               </div>
             </div>
           </div>
diff --git a/src/app/chats/components/chatListItem.tsx b/src/app/chats/components/chatListItem.tsx
index 99f1707d..68d827a9 100644
--- a/src/app/chats/components/chatListItem.tsx
+++ b/src/app/chats/components/chatListItem.tsx
@@ -12,14 +12,14 @@ import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
 
 export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEvent }) {
-  const { status, user } = useProfile(event.pubkey);
+  const { isLoading, user } = useProfile(event.pubkey);
   const decryptedContent = useDecryptMessage(event);
 
   const createdAt = formatCreatedAt(event.created_at, true);
   const svgURI =
     'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(event.pubkey, 90, 50));
 
-  if (status === 'pending') {
+  if (isLoading) {
     return (
       <div className="flex items-center gap-2.5 rounded-md px-3">
         <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-400 dark:bg-neutral-600" />
diff --git a/src/app/explore/components/groupTitle.tsx b/src/app/explore/components/groupTitle.tsx
index 1d9c1ca6..14828d7f 100644
--- a/src/app/explore/components/groupTitle.tsx
+++ b/src/app/explore/components/groupTitle.tsx
@@ -3,9 +3,9 @@ import { memo } from 'react';
 import { useProfile } from '@utils/hooks/useProfile';
 
 export const GroupTitle = memo(function GroupTitle({ pubkey }: { pubkey: string }) {
-  const { status, user } = useProfile(pubkey);
+  const { isLoading, user } = useProfile(pubkey);
 
-  if (status === 'pending') {
+  if (isLoading) {
     return <div className="h-3 w-24 animate-pulse rounded bg-white/10" />;
   }
 
diff --git a/src/app/explore/components/userWithDrawer.tsx b/src/app/explore/components/userWithDrawer.tsx
index 9feb6035..f498b70b 100644
--- a/src/app/explore/components/userWithDrawer.tsx
+++ b/src/app/explore/components/userWithDrawer.tsx
@@ -23,7 +23,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
 }) {
   const { db } = useStorage();
   const { ndk } = useNDK();
-  const { status, user } = useProfile(pubkey);
+  const { isLoading, user } = useProfile(pubkey);
 
   const [followed, setFollowed] = useState(false);
 
@@ -82,7 +82,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
       <Dialog.Portal>
         <Dialog.Content className="fixed right-0 top-0 z-50 flex h-full w-[400px] animate-slideRightAndFade items-center justify-center px-4 pb-4 pt-16 transition-all">
           <div className="h-full w-full overflow-y-auto rounded-lg border border-neutral-300 bg-neutral-200 py-3 dark:border-neutral-700 dark:bg-neutral-800">
-            {status === 'pending' ? (
+            {isLoading ? (
               <div>
                 <p>Loading...</p>
               </div>
diff --git a/src/app/new/components/mentionPopupItem.tsx b/src/app/new/components/mentionPopupItem.tsx
index d4e8f95d..f91fe830 100644
--- a/src/app/new/components/mentionPopupItem.tsx
+++ b/src/app/new/components/mentionPopupItem.tsx
@@ -1,10 +1,18 @@
+import * as Avatar from '@radix-ui/react-avatar';
+import { minidenticon } from 'minidenticons';
+import { useMemo } from 'react';
+
 import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
 
 export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: string }) {
-  const { status, user } = useProfile(pubkey, embed);
+  const { isLoading, user } = useProfile(pubkey, embed);
+  const svgURI = useMemo(
+    () => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50)),
+    [pubkey]
+  );
 
-  if (status === 'pending') {
+  if (isLoading) {
     return (
       <div className="flex items-center gap-2.5 px-2">
         <div className="relative h-8 w-8 shrink-0 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
@@ -18,14 +26,25 @@ export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: st
 
   return (
     <div className="flex h-11 items-center justify-start gap-2.5 px-2 hover:bg-neutral-200 dark:bg-neutral-800">
-      <img
-        src={user.picture || user.image}
-        alt={pubkey}
-        className="shirnk-0 h-8 w-8 rounded-md object-cover"
-      />
+      <Avatar.Root className="shirnk-0 h-8 w-8">
+        <Avatar.Image
+          src={user?.picture || user?.image}
+          alt={pubkey}
+          loading="lazy"
+          decoding="async"
+          className="h-8 w-8 rounded-md object-cover"
+        />
+        <Avatar.Fallback delayMs={300}>
+          <img
+            src={svgURI}
+            alt={pubkey}
+            className="h-8 w-8 rounded-md bg-black dark:bg-white"
+          />
+        </Avatar.Fallback>
+      </Avatar.Root>
       <div className="flex flex-col items-start gap-px">
         <h5 className="max-w-[10rem] truncate text-sm font-medium leading-none text-neutral-900 dark:text-neutral-100">
-          {user.display_name || user.displayName || user.name}
+          {user?.display_name || user?.displayName || user?.name}
         </h5>
         <span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
           {displayNpub(pubkey, 16)}
diff --git a/src/app/settings/components/profileCard.tsx b/src/app/settings/components/profileCard.tsx
index 8b409198..f8c8429c 100644
--- a/src/app/settings/components/profileCard.tsx
+++ b/src/app/settings/components/profileCard.tsx
@@ -11,7 +11,7 @@ import { displayNpub } from '@utils/shortenKey';
 
 export function ProfileCard() {
   const { db } = useStorage();
-  const { status, user } = useProfile(db.account.pubkey);
+  const { isLoading, user } = useProfile(db.account.pubkey);
 
   const svgURI =
     'data:image/svg+xml;utf8,' +
@@ -19,7 +19,7 @@ export function ProfileCard() {
 
   return (
     <div className="mb-4 h-56 w-full rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
-      {status === 'pending' ? (
+      {isLoading ? (
         <div className="flex h-full w-full items-center justify-center">
           <LoaderIcon className="h-4 w-4 animate-spin" />
         </div>
diff --git a/src/app/users/components/profile.tsx b/src/app/users/components/profile.tsx
index 0e357482..07629ed6 100644
--- a/src/app/users/components/profile.tsx
+++ b/src/app/users/components/profile.tsx
@@ -114,7 +114,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
           <div className="flex flex-col items-center gap-1">
             <div className="inline-flex flex-col items-center">
               <h5 className="text-center text-xl font-semibold text-neutral-900 dark:text-neutral-100">
-                {user.name || user.display_name || user.displayName || 'No name'}
+                {user?.name || user?.display_name || user?.displayName || 'No name'}
               </h5>
               {user?.nip05 ? (
                 <NIP05
diff --git a/src/shared/notes/actions/zap.tsx b/src/shared/notes/actions/zap.tsx
index 9f7fbaac..6c45abc3 100644
--- a/src/shared/notes/actions/zap.tsx
+++ b/src/shared/notes/actions/zap.tsx
@@ -17,6 +17,7 @@ import { CancelIcon, ZapIcon } from '@shared/icons';
 import { useProfile } from '@utils/hooks/useProfile';
 import { sendNativeNotification } from '@utils/notification';
 import { compactNumber } from '@utils/number';
+import { displayNpub } from '@utils/shortenKey';
 
 export function NoteZap({ event }: { event: NDKEvent }) {
   const nwc = useRef(null);
@@ -119,7 +120,8 @@ export function NoteZap({ event }: { event: NDKEvent }) {
             <div className="inline-flex w-full shrink-0 items-center justify-between px-5 py-3">
               <div className="w-6" />
               <Dialog.Title className="text-center font-semibold">
-                Send tip to {user?.name || user?.display_name || user?.displayName}
+                Send tip to{' '}
+                {user?.name || user?.displayName || displayNpub(event.pubkey, 16)}
               </Dialog.Title>
               <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-neutral-100 dark:bg-neutral-900">
                 <CancelIcon className="h-4 w-4" />
diff --git a/src/shared/notes/mentions/user.tsx b/src/shared/notes/mentions/user.tsx
index 338c349b..cc1df7d9 100644
--- a/src/shared/notes/mentions/user.tsx
+++ b/src/shared/notes/mentions/user.tsx
@@ -20,12 +20,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
       }
       className="break-words text-blue-500 hover:text-blue-600"
     >
-      {'@' +
-        (user?.name ||
-          user?.display_name ||
-          user?.displayName ||
-          user?.username ||
-          'unknown')}
+      {'@' + (user?.name || user?.displayName || user?.username || 'unknown')}
     </button>
   );
 });
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index b2498a18..d348cf3c 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -40,20 +40,33 @@ export const User = memo(function User({
   embedProfile?: string;
   subtext?: string;
 }) {
-  const { isFetching, user } = useProfile(pubkey, embedProfile);
+  const { isLoading, user } = useProfile(pubkey, embedProfile);
 
-  const createdAt = useMemo(() => formatCreatedAt(time, variant === 'chat'), [pubkey]);
-  const svgURI = useMemo(
+  const createdAt = useMemo(() => formatCreatedAt(time, variant === 'chat'), [time]);
+  const fallbackName = useMemo(() => displayNpub(pubkey, 16), [pubkey]);
+  const fallbackAvatar = useMemo(
     () => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50)),
     [pubkey]
   );
 
   if (variant === 'mention') {
-    if (isFetching) {
+    if (isLoading) {
       return (
         <div className="flex items-center gap-2">
-          <div className="h-6 w-6 shrink-0 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
-          <div className="h-3.5 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          <Avatar.Root className="shrink-0">
+            <Avatar.Image
+              src={fallbackAvatar}
+              alt={pubkey}
+              className="h-6 w-6 rounded-md bg-black dark:bg-white"
+            />
+          </Avatar.Root>
+          <div className="flex flex-1 items-baseline gap-2">
+            <h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
+              {fallbackName}
+            </h5>
+            <span className="text-neutral-600 dark:text-neutral-400">·</span>
+            <span className="text-neutral-600 dark:text-neutral-400">{createdAt}</span>
+          </div>
         </div>
       );
     }
@@ -70,7 +83,7 @@ export const User = memo(function User({
           />
           <Avatar.Fallback delayMs={300}>
             <img
-              src={svgURI}
+              src={fallbackAvatar}
               alt={pubkey}
               className="h-6 w-6 rounded-md bg-black dark:bg-white"
             />
@@ -78,10 +91,7 @@ export const User = memo(function User({
         </Avatar.Root>
         <div className="flex flex-1 items-baseline gap-2">
           <h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
-            {user?.name ||
-              user?.display_name ||
-              user?.displayName ||
-              displayNpub(pubkey, 16)}
+            {user?.name || user?.display_name || user?.displayName || fallbackName}
           </h5>
           <span className="text-neutral-600 dark:text-neutral-400">·</span>
           <span className="text-neutral-600 dark:text-neutral-400">{createdAt}</span>
@@ -91,11 +101,19 @@ export const User = memo(function User({
   }
 
   if (variant === 'notify') {
-    if (isFetching) {
+    if (isLoading) {
       return (
         <div className="flex items-center gap-2">
-          <div className="h-8 w-8 shrink-0 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
-          <div className="h-3.5 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          <Avatar.Root className="h-8 w-8 shrink-0">
+            <Avatar.Image
+              src={fallbackAvatar}
+              alt={pubkey}
+              className="h-8 w-8 rounded-md bg-black dark:bg-white"
+            />
+          </Avatar.Root>
+          <h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
+            {fallbackName}
+          </h5>
         </div>
       );
     }
@@ -112,24 +130,21 @@ export const User = memo(function User({
           />
           <Avatar.Fallback delayMs={300}>
             <img
-              src={svgURI}
+              src={fallbackAvatar}
               alt={pubkey}
               className="h-8 w-8 rounded-md bg-black dark:bg-white"
             />
           </Avatar.Fallback>
         </Avatar.Root>
         <h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
-          {user?.name ||
-            user?.display_name ||
-            user?.displayName ||
-            displayNpub(pubkey, 16)}
+          {user?.name || user?.display_name || user?.displayName || fallbackName}
         </h5>
       </div>
     );
   }
 
   if (variant === 'large') {
-    if (isFetching) {
+    if (isLoading) {
       return (
         <div className="flex items-center gap-2.5">
           <div className="h-14 w-14 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
@@ -153,7 +168,7 @@ export const User = memo(function User({
           />
           <Avatar.Fallback delayMs={300}>
             <img
-              src={svgURI}
+              src={fallbackAvatar}
               alt={pubkey}
               className="h-11 w-11 rounded-lg bg-black dark:bg-white"
             />
@@ -172,7 +187,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'simple') {
-    if (isFetching) {
+    if (isLoading) {
       return (
         <div className="flex items-center gap-2.5">
           <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
@@ -196,7 +211,7 @@ export const User = memo(function User({
           />
           <Avatar.Fallback delayMs={300}>
             <img
-              src={svgURI}
+              src={fallbackAvatar}
               alt={pubkey}
               className="h-10 w-10 rounded-lg bg-black dark:bg-white"
             />
@@ -207,7 +222,7 @@ export const User = memo(function User({
             {user?.name || user?.display_name || user?.displayName}
           </h3>
           <p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/70">
-            {user?.nip05 || user?.username || displayNpub(pubkey, 16)}
+            {user?.nip05 || user?.username || fallbackName}
           </p>
         </div>
       </div>
@@ -215,7 +230,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'avatar') {
-    if (isFetching) {
+    if (isLoading) {
       return (
         <div className="h-12 w-12 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
       );
@@ -232,7 +247,7 @@ export const User = memo(function User({
         />
         <Avatar.Fallback delayMs={300}>
           <img
-            src={svgURI}
+            src={fallbackAvatar}
             alt={pubkey}
             className="h-12 w-12 rounded-lg bg-black dark:bg-white"
           />
@@ -242,7 +257,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'miniavatar') {
-    if (isFetching) {
+    if (isLoading) {
       return (
         <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
       );
@@ -259,7 +274,7 @@ export const User = memo(function User({
         />
         <Avatar.Fallback delayMs={300}>
           <img
-            src={svgURI}
+            src={fallbackAvatar}
             alt={pubkey}
             className="h-10 w-10 rounded-lg bg-black dark:bg-white"
           />
@@ -269,9 +284,23 @@ export const User = memo(function User({
   }
 
   if (variant === 'childnote') {
-    if (isFetching) {
+    if (isLoading) {
       return (
-        <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
+        <>
+          <Avatar.Root className="h-10 w-10 shrink-0">
+            <Avatar.Image
+              src={fallbackAvatar}
+              alt={pubkey}
+              className="h-10 w-10 rounded-lg bg-black object-cover dark:bg-white"
+            />
+          </Avatar.Root>
+          <div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
+            <div className="w-full max-w-[10rem] truncate">{fallbackName} </div>
+            <div className="font-normal text-neutral-700 dark:text-neutral-300">
+              {subtext}:
+            </div>
+          </div>
+        </>
       );
     }
 
@@ -287,7 +316,7 @@ export const User = memo(function User({
           />
           <Avatar.Fallback delayMs={300}>
             <img
-              src={svgURI}
+              src={fallbackAvatar}
               alt={pubkey}
               className="h-10 w-10 rounded-lg bg-black dark:bg-white"
             />
@@ -295,10 +324,7 @@ export const User = memo(function User({
         </Avatar.Root>
         <div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
           <div className="w-full max-w-[10rem] truncate">
-            {user?.display_name ||
-              user?.name ||
-              user?.displayName ||
-              displayNpub(pubkey, 16)}{' '}
+            {user?.display_name || user?.name || user?.displayName || fallbackName}{' '}
           </div>
           <div className="font-normal text-neutral-700 dark:text-neutral-300">
             {subtext}:
@@ -309,7 +335,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'stacked') {
-    if (isFetching) {
+    if (isLoading) {
       return (
         <div className="inline-block h-8 w-8 animate-pulse rounded-full bg-neutral-300 ring-1 ring-neutral-200 dark:bg-neutral-700 dark:ring-neutral-800" />
       );
@@ -326,7 +352,7 @@ export const User = memo(function User({
         />
         <Avatar.Fallback delayMs={300}>
           <img
-            src={svgURI}
+            src={fallbackAvatar}
             alt={pubkey}
             className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-neutral-200 dark:bg-white dark:ring-neutral-800"
           />
@@ -336,7 +362,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'ministacked') {
-    if (isFetching) {
+    if (isLoading) {
       return (
         <div className="inline-block h-6 w-6 animate-pulse rounded-full bg-neutral-300 ring-1 ring-white dark:ring-black" />
       );
@@ -353,7 +379,7 @@ export const User = memo(function User({
         />
         <Avatar.Fallback delayMs={300}>
           <img
-            src={svgURI}
+            src={fallbackAvatar}
             alt={pubkey}
             className="inline-block h-6 w-6 rounded-full bg-black ring-1 ring-white dark:bg-white dark:ring-black"
           />
@@ -363,7 +389,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'repost') {
-    if (isFetching) {
+    if (isLoading) {
       return (
         <div className="flex gap-3">
           <div className="inline-flex h-10 w-10 items-center justify-center">
@@ -393,7 +419,7 @@ export const User = memo(function User({
             />
             <Avatar.Fallback delayMs={300}>
               <img
-                src={svgURI}
+                src={fallbackAvatar}
                 alt={pubkey}
                 className="h-6 w-6 rounded bg-black dark:bg-white"
               />
@@ -401,10 +427,7 @@ export const User = memo(function User({
           </Avatar.Root>
           <div className="inline-flex items-baseline gap-1">
             <h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100/80">
-              {user?.name ||
-                user?.display_name ||
-                user?.displayName ||
-                displayNpub(pubkey, 16)}
+              {user?.name || user?.display_name || user?.displayName || fallbackName}
             </h5>
             <span className="text-blue-500">reposted</span>
           </div>
@@ -414,13 +437,13 @@ export const User = memo(function User({
   }
 
   if (variant === 'thread') {
-    if (isFetching) {
+    if (isLoading) {
       return (
-        <div className="flex items-center gap-3">
+        <div className="flex h-16 items-center gap-3 px-3">
           <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
-          <div className="flex flex-1 flex-col">
+          <div className="flex flex-1 flex-col gap-1">
             <div className="h-4 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
-            <div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+            <div className="h-3 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
           </div>
         </div>
       );
@@ -438,7 +461,7 @@ export const User = memo(function User({
           />
           <Avatar.Fallback delayMs={300}>
             <img
-              src={svgURI}
+              src={fallbackAvatar}
               alt={pubkey}
               className="h-10 w-10 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
             />
@@ -451,19 +474,27 @@ export const User = memo(function User({
           <div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
             <span>{createdAt}</span>
             <span>·</span>
-            <span>{displayNpub(pubkey, 16)}</span>
+            <span>{fallbackName}</span>
           </div>
         </div>
       </div>
     );
   }
 
-  if (isFetching) {
+  if (isLoading) {
     return (
       <div className="flex items-center gap-3 px-3">
-        <div className="h-9 w-9 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
+        <Avatar.Root className="h-9 w-9 shrink-0">
+          <Avatar.Image
+            src={fallbackAvatar}
+            alt={pubkey}
+            className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
+          />
+        </Avatar.Root>
         <div className="h-6 flex-1">
-          <div className="h-4 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          <div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
+            {fallbackName}
+          </div>
         </div>
       </div>
     );
@@ -483,7 +514,7 @@ export const User = memo(function User({
             />
             <Avatar.Fallback delayMs={300}>
               <img
-                src={svgURI}
+                src={fallbackAvatar}
                 alt={pubkey}
                 className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
               />
@@ -492,10 +523,7 @@ export const User = memo(function User({
         </HoverCard.Trigger>
         <div className="flex h-6 flex-1 items-start gap-2">
           <div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
-            {user?.name ||
-              user?.display_name ||
-              user?.displayName ||
-              displayNpub(pubkey, 16)}
+            {user?.name || user?.display_name || user?.displayName || fallbackName}
           </div>
           <div className="ml-auto inline-flex items-center gap-3">
             <div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
@@ -519,7 +547,7 @@ export const User = memo(function User({
               />
               <Avatar.Fallback delayMs={300}>
                 <img
-                  src={svgURI}
+                  src={fallbackAvatar}
                   alt={pubkey}
                   className="h-10 w-10 rounded-lg bg-black dark:bg-white"
                 />
@@ -541,7 +569,7 @@ export const User = memo(function User({
                   />
                 ) : (
                   <span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-300">
-                    {displayNpub(pubkey, 16)}
+                    {fallbackName}
                   </span>
                 )}
               </div>
diff --git a/src/utils/hooks/useProfile.ts b/src/utils/hooks/useProfile.ts
index ef7a17b6..d7ebf9ad 100644
--- a/src/utils/hooks/useProfile.ts
+++ b/src/utils/hooks/useProfile.ts
@@ -7,7 +7,7 @@ import { useNDK } from '@libs/ndk/provider';
 export function useProfile(pubkey: string, embed?: string) {
   const { ndk } = useNDK();
   const {
-    isFetching,
+    isLoading,
     isError,
     data: user,
   } = useQuery({
@@ -31,12 +31,6 @@ export function useProfile(pubkey: string, embed?: string) {
 
         const user = ndk.getUser({ pubkey: hexstring });
         const profile = await user.fetchProfile();
-
-        if (!profile)
-          throw new Error(
-            `Cannot get metadata for ${pubkey}, will be retry after 10 seconds`
-          );
-
         return profile;
       } catch (e) {
         console.error(e);
@@ -50,5 +44,5 @@ export function useProfile(pubkey: string, embed?: string) {
     retry: 2,
   });
 
-  return { isFetching, isError, user };
+  return { isLoading, isError, user };
 }