diff --git a/src/components/ProfileCard/index.tsx b/src/components/ProfileCard/index.tsx
index 01eabb5f..1390212f 100644
--- a/src/components/ProfileCard/index.tsx
+++ b/src/components/ProfileCard/index.tsx
@@ -1,27 +1,17 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { useFetchProfile } from '@/hooks'
-import { generateImageByPubkey } from '@/lib/pubkey'
-import { useMemo } from 'react'
 import FollowButton from '../FollowButton'
 import Nip05 from '../Nip05'
 import ProfileAbout from '../ProfileAbout'
+import { SimpleUserAvatar } from '../UserAvatar'
 
 export default function ProfileCard({ pubkey }: { pubkey: string }) {
   const { profile } = useFetchProfile(pubkey)
-  const defaultImage = useMemo(() => generateImageByPubkey(pubkey), [pubkey])
-
-  if (!profile) return null
-  const { avatar = '', username, nip05, about } = profile
+  const { username, nip05, about } = profile || {}
 
   return (
     <div className="w-full flex flex-col gap-2">
       <div className="flex space-x-2 w-full items-start justify-between">
-        <Avatar className="w-12 h-12">
-          <AvatarImage className="object-cover object-center" src={avatar} />
-          <AvatarFallback>
-            <img src={defaultImage} alt={pubkey} />
-          </AvatarFallback>
-        </Avatar>
+        <SimpleUserAvatar userId={pubkey} className="w-12 h-12" />
         <FollowButton pubkey={pubkey} />
       </div>
       <div>