diff --git a/surfsense_web/features/artifacts-library/ui/artifact-card.tsx b/surfsense_web/features/artifacts-library/ui/artifact-card.tsx
new file mode 100644
index 000000000..fae7f1ab8
--- /dev/null
+++ b/surfsense_web/features/artifacts-library/ui/artifact-card.tsx
@@ -0,0 +1,43 @@
+import { formatRelativeDate } from "@/lib/format-date";
+import type { LibraryArtifact } from "../model/artifact";
+import { KIND_META } from "./kind-meta";
+
+export function ArtifactCard({
+	artifact,
+	onOpen,
+}: {
+	artifact: LibraryArtifact;
+	onOpen: (artifact: LibraryArtifact) => void;
+}) {
+	const meta = KIND_META[artifact.kind];
+	const Icon = meta.icon;
+
+	const subtitle =
+		artifact.status === "running"
+			? "Generating…"
+			: artifact.status === "error"
+				? "Failed"
+				: meta.label;
+
+	return (
+		<button
+			type="button"
+			onClick={() => onOpen(artifact)}
+			className="group flex w-full items-start gap-3 rounded-xl border bg-card p-3 text-left transition-colors hover:border-primary/40 hover:bg-accent/50"
+		>
+			<span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+				<Icon className="size-4" />
+			</span>
+			<span className="min-w-0 flex-1">
+				<span className="block truncate text-sm font-medium text-foreground">{artifact.title}</span>
+				<span className="mt-0.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+					<span className={artifact.status === "error" ? "text-destructive" : undefined}>
+						{subtitle}
+					</span>
+					<span aria-hidden>·</span>
+					<span>{formatRelativeDate(artifact.createdAt)}</span>
+				</span>
+			</span>
+		</button>
+	);
+}
diff --git a/surfsense_web/features/artifacts-library/ui/kind-meta.ts b/surfsense_web/features/artifacts-library/ui/kind-meta.ts
new file mode 100644
index 000000000..5241f812f
--- /dev/null
+++ b/surfsense_web/features/artifacts-library/ui/kind-meta.ts
@@ -0,0 +1,16 @@
+import { AudioLines, Contact, FileText, ImageIcon, Presentation } from "lucide-react";
+import type { ComponentType } from "react";
+import type { LibraryArtifactKind } from "../model/artifact";
+
+export const KIND_META: Record<
+	LibraryArtifactKind,
+	{ icon: ComponentType<{ className?: string }>; label: string; group: string }
+> = {
+	report: { icon: FileText, label: "Report", group: "Reports" },
+	resume: { icon: Contact, label: "Resume", group: "Resumes" },
+	podcast: { icon: AudioLines, label: "Podcast", group: "Podcasts" },
+	video: { icon: Presentation, label: "Presentation", group: "Presentations" },
+	image: { icon: ImageIcon, label: "Image", group: "Images" },
+};
+
+export const KIND_ORDER: LibraryArtifactKind[] = ["report", "resume", "podcast", "video", "image"];