diff --git a/apps/web/src/components/thread-item.tsx b/apps/web/src/components/thread-item.tsx
index e3ac0f8d..4afd0f4c 100644
--- a/apps/web/src/components/thread-item.tsx
+++ b/apps/web/src/components/thread-item.tsx
@@ -1,5 +1,11 @@
 "use client";
 import { memo } from "react";
+import {
+  formatDistanceToNow,
+  differenceInHours,
+  differenceInMinutes,
+  format,
+} from "date-fns";
 import { GitBranch, ArrowRight, ListTodo } from "lucide-react";
 import { ThreadWithTasks, useThreads } from "@/providers/Thread";
 import { cn } from "@/lib/utils";
@@ -14,6 +20,27 @@ interface ThreadItemProps {
   className?: string;
 }
 
+function formatRelativeDate(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+
+  const minutesAgo = differenceInMinutes(now, date);
+  const hoursAgo = differenceInHours(now, date);
+
+  // Within the last hour - show minutes ago
+  if (minutesAgo < 60) {
+    return `${minutesAgo} min ago`;
+  }
+
+  // Between 1-24 hours ago - show hours ago
+  if (hoursAgo < 24) {
+    return `${hoursAgo} hour${hoursAgo === 1 ? "" : "s"} ago`;
+  }
+
+  // More than 24 hours ago - show month, day format
+  return format(date, "MMM do");
+}
+
 export const ThreadItem = memo(function ThreadItem({
   thread,
   onClick,
@@ -26,10 +53,7 @@ export const ThreadItem = memo(function ThreadItem({
   const isSidebar = variant === "sidebar";
   const isRecentlyUpdated = recentlyUpdatedThreads.has(thread.thread_id);
 
-  const displayDate = new Date(thread.created_at).toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-  });
+  const displayDate = formatRelativeDate(thread.created_at);
 
   return (
     <div