diff --git a/apps/web/src/components/chips.tsx b/apps/web/src/components/chips.tsx
index d0402ecf..c9790b2a 100644
--- a/apps/web/src/components/chips.tsx
+++ b/apps/web/src/components/chips.tsx
@@ -46,7 +46,12 @@ export function BaseThreadChip({
         fallback={thread.author?.name}
         src={thread.author?.user?.image ?? undefined}
       />
-      {thread.name}
+      <span className="text-foreground-primary">{thread.name}</span>
+      {thread.shortId != null && (
+        <span className="text-foreground-secondary tabular-nums">
+          #{thread.shortId}
+        </span>
+      )}
     </BaseButton>
   );
 }
@@ -77,7 +82,14 @@ export function ThreadChip({
       />
       <HoverCardContent className="max-w-96 w-full flex flex-col gap-3">
         <div className="flex flex-col gap-1">
-          <div className="font-medium text-sm">{thread.name}</div>
+          <div className="font-medium text-sm flex items-center gap-1.5">
+            <span className="text-foreground-primary">{thread.name}</span>
+            {thread.shortId != null && (
+              <span className="text-foreground-secondary tabular-nums font-normal">
+                #{thread.shortId}
+              </span>
+            )}
+          </div>
           <div className="flex items-center gap-2">
             <Avatar
               variant="user"
diff --git a/apps/web/src/components/threads/related-threads-section.tsx b/apps/web/src/components/threads/related-threads-section.tsx
index 111e6fc5..ca93b2aa 100644
--- a/apps/web/src/components/threads/related-threads-section.tsx
+++ b/apps/web/src/components/threads/related-threads-section.tsx
@@ -44,6 +44,11 @@ const RelatedThreadResult = ({ result }: { result: SimilarThreadResult }) => {
         src={thread.author.user?.image}
       />
       <div className="grow shrink truncate">{thread.name}</div>
+      {thread.shortId != null && (
+        <span className="text-foreground-secondary text-sm tabular-nums">
+          #{thread.shortId}
+        </span>
+      )}
       <div className="flex gap-1 ml-auto">
         <ChevronRightIcon className="size-4" />
       </div>
diff --git a/apps/web/src/routes/app/_workspace/_main/playground/index.tsx b/apps/web/src/routes/app/_workspace/_main/playground/index.tsx
index a6349174..4e477ba3 100644
--- a/apps/web/src/routes/app/_workspace/_main/playground/index.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/playground/index.tsx
@@ -103,7 +103,7 @@ function PlaygroundPage() {
             Threads
           </div>
           <div className="flex-1 overflow-y-auto">
-            {(threads as any[])?.map((thread: { id: string; name: string }) => (
+            {threads?.map((thread) => (
               <button
                 key={thread.id}
                 type="button"
@@ -114,10 +114,17 @@ function PlaygroundPage() {
                     : ""
                 }`}
               >
-                <div className="truncate">{thread.name}</div>
+                <div className="truncate flex items-center gap-1.5">
+                  <span className="truncate">{thread.name}</span>
+                  {thread.shortId != null && (
+                    <span className="text-foreground-secondary tabular-nums font-normal shrink-0">
+                      #{thread.shortId}
+                    </span>
+                  )}
+                </div>
               </button>
             ))}
-            {(!threads || (threads as any[]).length === 0) && (
+            {(threads?.length ?? 0) === 0 && (
               <div className="px-4 py-8 text-sm text-foreground-secondary text-center">
                 No threads found
               </div>
diff --git a/apps/web/src/routes/app/_workspace/_main/search/index.tsx b/apps/web/src/routes/app/_workspace/_main/search/index.tsx
index a48b5abf..7b6fb1b9 100644
--- a/apps/web/src/routes/app/_workspace/_main/search/index.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/search/index.tsx
@@ -67,6 +67,11 @@ const SearchResultItem = ({ messageId }: SearchResultItemProps) => {
           <div className="flex items-center gap-2">
             <Avatar variant="user" size="md" fallback={thread?.author?.name} />
             <div>{thread?.name}</div>
+            {thread?.shortId != null && (
+              <span className="text-foreground-secondary text-sm tabular-nums">
+                #{thread.shortId}
+              </span>
+            )}
           </div>
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-1.5 mr-1">
diff --git a/apps/web/src/routes/app/_workspace/_main/threads/$id/index.tsx b/apps/web/src/routes/app/_workspace/_main/threads/$id/index.tsx
index d873d15d..a0690ab0 100644
--- a/apps/web/src/routes/app/_workspace/_main/threads/$id/index.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/threads/$id/index.tsx
@@ -267,7 +267,14 @@ function RouteComponent() {
                     </BreadcrumbItem>
                     <BreadcrumbSeparator />
                     <BreadcrumbItem>
-                      <BreadcrumbPage>{thread.name}</BreadcrumbPage>
+                      <BreadcrumbPage className="flex items-center gap-1.5">
+                        <span>{thread.name}</span>
+                        {thread.shortId != null && (
+                          <span className="text-foreground-secondary tabular-nums font-normal">
+                            #{thread.shortId}
+                          </span>
+                        )}
+                      </BreadcrumbPage>
                     </BreadcrumbItem>
                   </BreadcrumbList>
                 </Breadcrumb>
diff --git a/apps/web/src/routes/app/_workspace/_main/threads/archive/$id.tsx b/apps/web/src/routes/app/_workspace/_main/threads/archive/$id.tsx
index 6e285702..a5f50cd8 100644
--- a/apps/web/src/routes/app/_workspace/_main/threads/archive/$id.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/threads/archive/$id.tsx
@@ -160,7 +160,14 @@ function RouteComponent() {
                     </BreadcrumbItem>
                     <BreadcrumbSeparator />
                     <BreadcrumbItem>
-                      <BreadcrumbPage>{thread.name}</BreadcrumbPage>
+                      <BreadcrumbPage className="flex items-center gap-1.5">
+                        <span>{thread.name}</span>
+                        {thread.shortId != null && (
+                          <span className="text-foreground-secondary tabular-nums font-normal">
+                            #{thread.shortId}
+                          </span>
+                        )}
+                      </BreadcrumbPage>
                     </BreadcrumbItem>
                   </BreadcrumbList>
                 </Breadcrumb>
diff --git a/apps/web/src/routes/app/_workspace/_main/threads/index.tsx b/apps/web/src/routes/app/_workspace/_main/threads/index.tsx
index e0615298..721e6501 100644
--- a/apps/web/src/routes/app/_workspace/_main/threads/index.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/threads/index.tsx
@@ -347,6 +347,11 @@ export function ThreadsList({ fixedFilters = {}, subTitle }: ThreadsListProps) {
                 >
                   <div className="flex justify-between">
                     <div className="flex items-center gap-2">
+                      {thread?.shortId != null && (
+                        <span className="text-foreground-secondary text-sm tabular-nums">
+                          #{thread.shortId}
+                        </span>
+                      )}
                       <Avatar
                         variant="user"
                         size="md"