diff --git a/autogpt_platform/frontend/src/components/agptui/AgentRunStatusChip.tsx b/autogpt_platform/frontend/src/components/agptui/AgentRunStatusChip.tsx
new file mode 100644
index 000000000000..d2d6c117a3de
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/agptui/AgentRunStatusChip.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Badge } from "@/components/ui/badge";
+
+export type AgentRunStatus =
+  | "success"
+  | "failed"
+  | "queued"
+  | "running"
+  | "stopped"
+  | "draft";
+
+const statusData: Record<
+  AgentRunStatus,
+  { label: string; variant: keyof typeof statusStyles }
+> = {
+  success: { label: "Success", variant: "success" },
+  failed: { label: "Failed", variant: "destructive" },
+  queued: { label: "Queued", variant: "warning" },
+  running: { label: "Running", variant: "info" },
+  stopped: { label: "Stopped", variant: "secondary" },
+  draft: { label: "Draft", variant: "secondary" },
+};
+
+const statusStyles = {
+  success:
+    "bg-green-100 text-green-800 hover:bg-green-100 hover:text-green-800",
+  destructive: "bg-red-100 text-red-800 hover:bg-red-100 hover:text-red-800",
+  warning:
+    "bg-yellow-100 text-yellow-800 hover:bg-yellow-100 hover:text-yellow-800",
+  info: "bg-blue-100 text-blue-800 hover:bg-blue-100 hover:text-blue-800",
+  secondary:
+    "bg-slate-100 text-slate-800 hover:bg-slate-100 hover:text-slate-800",
+};
+
+export function AgentRunStatusChip({
+  status,
+}: {
+  status: AgentRunStatus;
+}): React.ReactElement {
+  return (
+    <Badge
+      variant="secondary"
+      className={`text-xs font-medium ${statusStyles[statusData[status].variant]} rounded-[45px] px-[9px] py-[3px]`}
+    >
+      {statusData[status].label}
+    </Badge>
+  );
+}
diff --git a/autogpt_platform/frontend/src/components/agptui/AgentRunSummaryCard.tsx b/autogpt_platform/frontend/src/components/agptui/AgentRunSummaryCard.tsx
new file mode 100644
index 000000000000..2c23ea287e54
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/agptui/AgentRunSummaryCard.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import moment from "moment";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { MoreVertical } from "lucide-react";
+import { AgentRunStatusChip, AgentRunStatus } from "./AgentRunStatusChip";
+
+export type AgentRunSummaryProps = {
+  agentID: string;
+  agentRunID: string;
+  status: AgentRunStatus;
+  title: string;
+  timestamp: Date;
+};
+
+export function AgentRunSummaryCard({
+  agentID,
+  agentRunID,
+  status,
+  title,
+  timestamp,
+}: AgentRunSummaryProps): React.ReactElement {
+  return (
+    <Card className="rounded-lg border-zinc-300">
+      <CardContent className="relative p-4">
+        <AgentRunStatusChip status={status} />
+
+        <div className="mt-5 flex items-center justify-between">
+          <h3 className="truncate pr-2 text-base font-medium text-neutral-900">
+            {title}
+          </h3>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-5 w-5 p-0">
+                <MoreVertical className="h-5 w-5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem /* TODO: implement */>
+                Pin into a template
+              </DropdownMenuItem>
+              <DropdownMenuItem /* TODO: implement */>Rename</DropdownMenuItem>
+              <DropdownMenuItem /* TODO: implement */>Delete</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <p
+          className="mt-1 text-sm font-normal text-neutral-500"
+          title={moment(timestamp).toString()}
+        >
+          Ran {moment(timestamp).fromNow()}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default AgentRunSummaryCard;