diff --git a/app/detail/[...slug]/page.tsx b/app/detail/[...slug]/page.tsx
index 7f77f17..bc54c96 100644
--- a/app/detail/[...slug]/page.tsx
+++ b/app/detail/[...slug]/page.tsx
@@ -14,7 +14,7 @@ import { useI18n } from "@/lib/i18n";
 
 interface DetailData {
   calls: number; prompt_tokens: number; completion_tokens: number;
-  total_tokens: number; quota: number;
+  total_tokens: number; quota: number; display_name?: string;
   models?: { name: string; calls: number; total_tokens: number; quota: number }[];
   users?: { name: string; calls: number; total_tokens: number; quota: number }[];
   channel_name?: string;
@@ -50,7 +50,7 @@ export default function DetailPage() {
 
   useEffect(() => { fetchData(); }, [fetchData]);
 
-  const title = type === "channel" ? (data?.channel_name || decodedId) : decodedId;
+  const title = type === "channel" ? (data?.channel_name || decodedId) : (data?.display_name || decodedId);
   const typeLabel = { user: t("detail.user"), model: t("detail.model"), channel: t("detail.channel") }[type] || type;
   const breakdownItems = data?.models || data?.users || [];
   const breakdownLabel = data?.models ? t("detail.modelDist") : t("detail.userDist");
diff --git a/app/rankings/page.tsx b/app/rankings/page.tsx
index bc9be95..1efb36c 100644
--- a/app/rankings/page.tsx
+++ b/app/rankings/page.tsx
@@ -13,7 +13,7 @@ type Tab = "user" | "model" | "channel";
 type SortKey = "calls" | "prompt_tokens" | "completion_tokens" | "total_tokens";
 
 interface RankItem {
-  rank: number; name: string; id?: number; calls: number;
+  rank: number; name: string; username?: string; id?: number; calls: number;
   prompt_tokens: number; completion_tokens: number; total_tokens: number;
 }
 
@@ -45,7 +45,7 @@ export default function RankingsPage() {
   function detailHref(item: RankItem): string {
     if (tab === "channel") return `/detail/channel/${item.id}`;
     if (tab === "model") return `/detail/model/${encodeURIComponent(item.name)}`;
-    return `/detail/user/${encodeURIComponent(item.name)}`;
+    return `/detail/user/${encodeURIComponent(item.username || item.name)}`;
   }
 
   function handleSort(key: SortKey) {
diff --git a/lib/queries.ts b/lib/queries.ts
index 4075a09..ab13983 100644
--- a/lib/queries.ts
+++ b/lib/queries.ts
@@ -183,6 +183,7 @@ export async function getUserRanking(
   return rows.map((r, i) => ({
     rank: i + 1,
     name: displayNames[r.user_id] || r.username,
+    username: r.username as string,
     id: Number(r.user_id),
     calls: Number(r.calls),
     prompt_tokens: Number(r.prompt),
@@ -308,8 +309,17 @@ export async function getUserDetail(
     params2
   );
 
+  const displayNames = await getDisplayNames();
+  const userRow = await query(
+    "SELECT id FROM users WHERE username = $1 LIMIT 1",
+    [username]
+  );
+  const displayName =
+    userRow.length > 0 ? displayNames[userRow[0].id] || username : username;
+
   const o = overview[0];
   return {
+    display_name: displayName,
     calls: Number(o.calls),
     prompt_tokens: Number(o.prompt),
     completion_tokens: Number(o.completion),