diff --git a/web/src/components/ChatList.tsx b/web/src/components/ChatList.tsx
index a0b4667..eb21f5b 100644
--- a/web/src/components/ChatList.tsx
+++ b/web/src/components/ChatList.tsx
@@ -171,6 +171,52 @@ export function ChatList() {
   ];
 
   const visibleChats = tab === "archived" ? archivedChats : filteredChats;
+  const pinnedVisibleChats = visibleChats.filter((chat) => chat.pinned);
+  const regularVisibleChats = visibleChats.filter((chat) => !chat.pinned);
+
+  function renderChatRow(chat: (typeof visibleChats)[number]) {
+    return (
+      <button
+        className={`block w-full border-b border-slate-800/60 px-4 py-3 text-left transition ${
+          activeChatId === chat.id ? "bg-sky-500/20" : "hover:bg-slate-800/65"
+        }`}
+        key={chat.id}
+        onClick={() => setActiveChatId(chat.id)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          const safePos = getSafeContextPosition(e.clientX, e.clientY, 176, 56);
+          setCtxChatId(chat.id);
+          setCtxPos(safePos);
+        }}
+      >
+        <div className="flex items-start gap-3">
+          <div className="relative mt-0.5">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-500/30 text-sm font-semibold uppercase text-sky-100">
+              {chat.pinned ? "📌" : (chat.display_title || chat.title || chat.type).slice(0, 1)}
+            </div>
+            {chat.type === "private" && chat.counterpart_is_online ? (
+              <span className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border border-slate-900 bg-emerald-400" />
+            ) : null}
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center justify-between gap-2">
+              <p className="truncate text-sm font-semibold">{chatLabel(chat)}</p>
+              {(chat.unread_count ?? 0) > 0 ? (
+                <span className="inline-flex min-w-5 items-center justify-center rounded-full bg-sky-500 px-1.5 py-0.5 text-[10px] font-semibold text-slate-950">
+                  {chat.unread_count}
+                </span>
+              ) : (
+                <span className="shrink-0 text-[11px] text-slate-400">
+                  {formatChatListTime(chat.last_message_created_at)}
+                </span>
+              )}
+            </div>
+            <p className="truncate text-xs text-slate-400">{chatPreviewLabel(chat)}</p>
+          </div>
+        </div>
+      </button>
+    );
+  }
 
   return (
     <aside className="relative flex h-full w-full flex-col bg-slate-900/60" onClick={() => { setCtxChatId(null); setCtxPos(null); setMenuOpen(false); }}>
@@ -343,47 +389,14 @@ export function ChatList() {
           <p className="px-4 py-3 text-xs text-slate-400">Archive is empty</p>
         ) : null}
 
-        {visibleChats.map((chat) => (
-          <button
-            className={`block w-full border-b border-slate-800/60 px-4 py-3 text-left transition ${
-              activeChatId === chat.id ? "bg-sky-500/20" : "hover:bg-slate-800/65"
-            }`}
-            key={chat.id}
-            onClick={() => setActiveChatId(chat.id)}
-            onContextMenu={(e) => {
-              e.preventDefault();
-              const safePos = getSafeContextPosition(e.clientX, e.clientY, 176, 56);
-              setCtxChatId(chat.id);
-              setCtxPos(safePos);
-            }}
-          >
-            <div className="flex items-start gap-3">
-              <div className="relative mt-0.5">
-                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-500/30 text-sm font-semibold uppercase text-sky-100">
-                  {chat.pinned ? "📌" : (chat.display_title || chat.title || chat.type).slice(0, 1)}
-                </div>
-                {chat.type === "private" && chat.counterpart_is_online ? (
-                  <span className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border border-slate-900 bg-emerald-400" />
-                ) : null}
-              </div>
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center justify-between gap-2">
-                  <p className="truncate text-sm font-semibold">{chatLabel(chat)}</p>
-                  {(chat.unread_count ?? 0) > 0 ? (
-                    <span className="inline-flex min-w-5 items-center justify-center rounded-full bg-sky-500 px-1.5 py-0.5 text-[10px] font-semibold text-slate-950">
-                      {chat.unread_count}
-                    </span>
-                  ) : (
-                    <span className="shrink-0 text-[11px] text-slate-400">
-                      {formatChatListTime(chat.last_message_created_at)}
-                    </span>
-                  )}
-                </div>
-                <p className="truncate text-xs text-slate-400">{chatPreviewLabel(chat)}</p>
-              </div>
-            </div>
-          </button>
-        ))}
+        {pinnedVisibleChats.length > 0 ? (
+          <p className="px-4 py-2 text-[10px] uppercase tracking-wide text-slate-400">Pinned</p>
+        ) : null}
+        {pinnedVisibleChats.map(renderChatRow)}
+        {regularVisibleChats.length > 0 ? (
+          <p className="px-4 py-2 text-[10px] uppercase tracking-wide text-slate-400">Chats</p>
+        ) : null}
+        {regularVisibleChats.map(renderChatRow)}
       </div>
       <NewChatPanel />