diff --git a/daily-thought-frontend/src/components/user/UserAvatar.tsx b/daily-thought-frontend/src/components/user/UserAvatar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5abc13866fcd714f49fe67a6352daf5bc4f53ec7
--- /dev/null
+++ b/daily-thought-frontend/src/components/user/UserAvatar.tsx
@@ -0,0 +1,30 @@
+import { UserCircleIcon, UserPlusIcon } from "@heroicons/react/24/outline";
+import { FC, PropsWithChildren } from "react";
+
+type UserAvatarProps = {
+  firstName?: string,
+  lastName?: string,
+  profile?:string,
+  username: string
+}
+
+const UserAvatar:FC<PropsWithChildren<UserAvatarProps>> = ({
+  username,
+  firstName,
+  lastName,
+
+}) => {
+  return (
+    <div className='flex items-center p-1'>
+      <div className="">
+        <UserCircleIcon className='h-12 w-12 rounded-full text-gray-300 flex items-center justify-center' />
+      </div>
+      <div className='text-sm ml-1 text-gray-900 whitespace-nowrap'>
+        {firstName && <div>{`${firstName} ${lastName || null}`}</div>}
+        <p className='text-sm text-gray-500 font-normal'>@{username}</p>
+        </div>
+      </div>
+  )
+}
+
+export default UserAvatar;
\ No newline at end of file