diff --git a/src/element/ProfileImage.js b/src/element/ProfileImage.js
index 4688af1..6ad6000 100644
--- a/src/element/ProfileImage.js
+++ b/src/element/ProfileImage.js
@@ -2,6 +2,7 @@ import "./ProfileImage.css";
 import { useNavigate } from "react-router-dom";
 import useProfile from "../feed/ProfileFeed";
 import Nostrich from "../nostrich.jpg";
+import { useMemo } from "react";
 
 export default function ProfileImage(props) {
     const pubkey = props.pubkey;
@@ -10,11 +11,20 @@ export default function ProfileImage(props) {
     const user = useProfile(pubkey);
 
     const hasImage = (user?.picture?.length ?? 0) > 0;
+    const name = useMemo(() => {
+        let name = pubkey.substring(0, 8);
+        if (user?.display_name?.length > 0) {
+            name = user.display_name;
+        } else if (user?.name?.length > 0) {
+            name = user.name;
+        }
+        return name;
+    }, [user]);
     return (
         <div className="pfp">
             <img src={hasImage ? user.picture : Nostrich} onClick={() => navigate(`/p/${pubkey}`)} />
             <div>
-                {user?.name ?? pubkey.substring(0, 8)}
+                {name}
                 {subHeader ? <div>{subHeader}</div> : null}
             </div>
         </div>