diff --git a/packages/frontend/src/components/avatar.tsx b/packages/frontend/src/components/avatar.tsx
new file mode 100644
index 0000000..2204534
--- /dev/null
+++ b/packages/frontend/src/components/avatar.tsx
@@ -0,0 +1,10 @@
+import type { UserRecord } from "@issue/shared";
+import { UserRound } from "lucide-react";
+
+export default function Avatar({ user, size }: { user: UserRecord; size?: number }) {
+    return (
+        <div className={`flex items-center justify-center rounded-full border w-${size || 7} h-${size || 7}`}>
+            <UserRound size={size ? size * 2 + 2 : 16} />
+        </div>
+    );
+}
diff --git a/packages/frontend/src/components/small-user-display.tsx b/packages/frontend/src/components/small-user-display.tsx
index de7a75a..5630fe4 100644
--- a/packages/frontend/src/components/small-user-display.tsx
+++ b/packages/frontend/src/components/small-user-display.tsx
@@ -1,13 +1,10 @@
 import type { UserRecord } from "@issue/shared";
-import { UserRound } from "lucide-react";
+import Avatar from "@/components/avatar";
 
 export default function SmallUserDisplay({ user }: { user: UserRecord }) {
     return (
         <div className="flex gap-2 items-center">
-            {user.name}{" "}
-            <div className="flex items-center justify-center rounded-full border w-7 h-7">
-                <UserRound size={15} />
-            </div>
+            {user.name} <Avatar user={user} />
         </div>
     );
 }