diff --git a/clients/web/src/components/groups/TaskCard/TaskCard.stories.tsx b/clients/web/src/components/groups/TaskCard/TaskCard.stories.tsx
index bc077989..84ee9e5c 100644
--- a/clients/web/src/components/groups/TaskCard/TaskCard.stories.tsx
+++ b/clients/web/src/components/groups/TaskCard/TaskCard.stories.tsx
@@ -61,7 +61,10 @@ const cancelledTask: Task = {
 };
 
 export const Working: Story = {
-  args: { task: workingTask },
+  args: {
+    task: workingTask,
+    progress: { progress: 650, total: 1000, message: "Processing records..." },
+  },
 };
 
 export const InputRequired: Story = {
diff --git a/clients/web/src/components/groups/TaskCard/TaskCard.tsx b/clients/web/src/components/groups/TaskCard/TaskCard.tsx
index d183dce7..f732de23 100644
--- a/clients/web/src/components/groups/TaskCard/TaskCard.tsx
+++ b/clients/web/src/components/groups/TaskCard/TaskCard.tsx
@@ -8,12 +8,22 @@ import {
   Stack,
   Text,
 } from "@mantine/core";
-import type { Task } from "@modelcontextprotocol/sdk/types.js";
+import type {
+  ProgressNotification,
+  Task,
+} from "@modelcontextprotocol/sdk/types.js";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
+import { ProgressDisplay } from "../../elements/ProgressDisplay/ProgressDisplay";
 import { TaskStatusBadge } from "../../elements/TaskStatusBadge/TaskStatusBadge";
 
+export type TaskProgress = Pick<
+  ProgressNotification["params"],
+  "progress" | "total" | "message"
+>;
+
 export interface TaskCardProps {
   task: Task;
+  progress?: TaskProgress;
   isListExpanded: boolean;
   onCancel: () => void;
 }
@@ -91,7 +101,12 @@ function formatTtl(ttl: number): string {
   return `${ttl}ms`;
 }
 
-export function TaskCard({ task, isListExpanded, onCancel }: TaskCardProps) {
+export function TaskCard({
+  task,
+  progress,
+  isListExpanded,
+  onCancel,
+}: TaskCardProps) {
   const { taskId, status, ttl, createdAt, lastUpdatedAt, statusMessage } = task;
   const [isExpanded, setIsExpanded] = useState(isListExpanded);
   const isActive = status === "working" || status === "input_required";
@@ -146,6 +161,8 @@ export function TaskCard({ task, isListExpanded, onCancel }: TaskCardProps) {
           <StatusMessageText>{statusMessage}</StatusMessageText>
         )}
 
+        {progress && isActive && <ProgressDisplay params={progress} />}
+
         {isExpanded && (
           <Collapse in={isExpanded}>
             <Stack gap="sm">