diff --git a/web/src/components/Avatar.tsx b/web/src/components/Avatar.tsx
new file mode 100644
index 0000000..9526206
--- /dev/null
+++ b/web/src/components/Avatar.tsx
@@ -0,0 +1,27 @@
+interface AvatarProps {
+  url?: string;
+  name: string;
+  size?: number;
+}
+
+export default function Avatar({ url, name, size = 24 }: AvatarProps) {
+  const style = { width: size, height: size };
+  if (url) {
+    return (
+      <img
+        src={url}
+        alt=""
+        style={style}
+        className="rounded-full shrink-0 object-cover"
+      />
+    );
+  }
+  return (
+    <div
+      style={style}
+      className="rounded-full shrink-0 bg-neutral-800 text-neutral-500 text-xs flex items-center justify-center uppercase"
+    >
+      {name.charAt(0) || "?"}
+    </div>
+  );
+}
diff --git a/web/src/components/PinnedList.tsx b/web/src/components/PinnedList.tsx
index 9bd0bdf..0f531c2 100644
--- a/web/src/components/PinnedList.tsx
+++ b/web/src/components/PinnedList.tsx
@@ -23,6 +23,8 @@ export default function PinnedList({ pins }: PinnedListProps) {
           to={`/bbs/${entry.handle}`}
           name={entry.name}
           description={entry.handle}
+          avatar={entry.avatar}
+          showAvatar
         />
       ))}
       {shown < pins.length && (
diff --git a/web/src/components/nav/ListLink.tsx b/web/src/components/nav/ListLink.tsx
index 7e5f53a..e000538 100644
--- a/web/src/components/nav/ListLink.tsx
+++ b/web/src/components/nav/ListLink.tsx
@@ -1,23 +1,35 @@
 import { Link } from "react-router-dom";
+import Avatar from "../Avatar";
 
 interface ListLinkProps {
   to: string;
   name: string;
   description?: string;
+  avatar?: string;
+  showAvatar?: boolean;
 }
 
-export default function ListLink({ to, name, description }: ListLinkProps) {
+export default function ListLink({
+  to,
+  name,
+  description,
+  avatar,
+  showAvatar,
+}: ListLinkProps) {
   return (
     <Link
       to={to}
-      className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-800 group"
+      className="flex items-center gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-800 group"
     >
-      <span className="text-neutral-200">{name}</span>
-      {description && (
-        <span className="text-neutral-400 text-xs sm:text-sm">
-          {description}
-        </span>
-      )}
+      {showAvatar && <Avatar url={avatar} name={name} />}
+      <div className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 min-w-0">
+        <span className="text-neutral-200 truncate">{name}</span>
+        {description && (
+          <span className="text-neutral-400 text-xs sm:text-sm truncate">
+            {description}
+          </span>
+        )}
+      </div>
     </Link>
   );
 }