diff --git a/frontend/src/components/profileAvatarDisplay.jsx b/frontend/src/components/profileAvatarDisplay.jsx
new file mode 100644
index 0000000..cbfdb6f
--- /dev/null
+++ b/frontend/src/components/profileAvatarDisplay.jsx
@@ -0,0 +1,12 @@
+const ProfileAvatarDisplay = ({ firstLetter, onClick }) => {
+  return (
+    <div
+      onClick={onClick}
+      className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold text-lg cursor-pointer"
+    >
+      {firstLetter}
+    </div>
+  );
+};
+
+export default ProfileAvatarDisplay;
diff --git a/frontend/src/components/profileMenu.jsx b/frontend/src/components/profileMenu.jsx
index 555dfea..b69f030 100644
--- a/frontend/src/components/profileMenu.jsx
+++ b/frontend/src/components/profileMenu.jsx
@@ -3,17 +3,16 @@ import { useState } from "react";
 import { Link } from "react-router";
 import { useDispatch} from "react-redux";
 import { logout } from "../slice/authSlice";
+import ProfileAvatarDisplay from "./profileAvatarDisplay";
 const ProfileMenu = ({ firstLetter }) => {
   const [open, setOpen] = useState(false);
   const dispatch = useDispatch();
   return (
     <div className="relative">
-      <div
-        onClick={() => setOpen(!open)}
-        className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold text-lg cursor-pointer"
-      >
-        {firstLetter}
-      </div>
+      <ProfileAvatarDisplay 
+        firstLetter={firstLetter} 
+        onClick={() => setOpen(!open)} 
+      />
 
       {open && (
         <ul className="menu bg-base-200 rounded-box w-56 absolute right-0 mt-3 shadow-lg border border-gray-700 z-50">