diff --git a/app/app/components/song-card.tsx b/app/app/components/song-card.tsx
new file mode 100644
index 0000000..95bbbcb
--- /dev/null
+++ b/app/app/components/song-card.tsx
@@ -0,0 +1,31 @@
+import { Link } from "react-router";
+import { Badge } from "~/components/ui/badge";
+import { Card, CardContent } from "~/components/ui/card";
+import type { SongSummary } from "~/lib/types";
+
+interface Props {
+  song: SongSummary;
+}
+
+export function SongCard({ song }: Props) {
+  return (
+    <Link to={`/songs/${song.id}`}>
+      <Card className="h-full hover:bg-accent transition-colors cursor-pointer">
+        <CardContent className="p-3 flex flex-col gap-1">
+          <div className="flex flex-wrap gap-1">
+            {song.preview_chords.map((chord) => (
+              <Badge key={chord} variant="secondary" className="text-xs font-mono">
+                {chord}
+              </Badge>
+            ))}
+          </div>
+          <p className="font-semibold text-sm leading-tight mt-1">{song.meta.title}</p>
+          <p className="text-xs text-muted-foreground">{song.meta.artist}</p>
+          {song.meta.original_key && (
+            <p className="text-xs text-muted-foreground">Key: {song.meta.original_key}</p>
+          )}
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}