3 files changed, 20 insertions, 8 deletions
diff --git a/src/client/pages/DeckDetailPage.test.tsx b/src/client/pages/DeckDetailPage.test.tsx
index 402ecd4..b138a0b 100644
--- a/src/client/pages/DeckDetailPage.test.tsx
+++ b/src/client/pages/DeckDetailPage.test.tsx
@@ -70,6 +70,7 @@ const mockDeck = {
 	name: "Japanese Vocabulary",
 	description: "Common Japanese words",
 	newCardsPerDay: 20,
+	dueCardCount: 0,
 	createdAt: "2024-01-01T00:00:00Z",
 	updatedAt: "2024-01-01T00:00:00Z",
 };
diff --git a/src/client/pages/HomePage.test.tsx b/src/client/pages/HomePage.test.tsx
index 4921e22..8946fcf 100644
--- a/src/client/pages/HomePage.test.tsx
+++ b/src/client/pages/HomePage.test.tsx
@@ -84,6 +84,7 @@ const mockDecks = [
 		name: "Japanese Vocabulary",
 		description: "Common Japanese words",
 		newCardsPerDay: 20,
+		dueCardCount: 5,
 		createdAt: "2024-01-01T00:00:00Z",
 		updatedAt: "2024-01-01T00:00:00Z",
 	},
@@ -92,6 +93,7 @@ const mockDecks = [
 		name: "Spanish Verbs",
 		description: null,
 		newCardsPerDay: 10,
+		dueCardCount: 0,
 		createdAt: "2024-01-02T00:00:00Z",
 		updatedAt: "2024-01-02T00:00:00Z",
 	},
@@ -239,6 +241,7 @@ describe("HomePage", () => {
 			name: "No Description Deck",
 			description: null,
 			newCardsPerDay: 20,
+			dueCardCount: 0,
 			createdAt: "2024-01-01T00:00:00Z",
 			updatedAt: "2024-01-01T00:00:00Z",
 		};
@@ -312,6 +315,7 @@ describe("HomePage", () => {
 				name: "New Deck",
 				description: "A new deck",
 				newCardsPerDay: 20,
+				dueCardCount: 0,
 				createdAt: "2024-01-03T00:00:00Z",
 				updatedAt: "2024-01-03T00:00:00Z",
 			};
diff --git a/src/client/pages/HomePage.tsx b/src/client/pages/HomePage.tsx
index e0e9e9e..ad6ece4 100644
--- a/src/client/pages/HomePage.tsx
+++ b/src/client/pages/HomePage.tsx
@@ -57,14 +57,21 @@ function DeckList({
 				>
 					<div className="flex items-start justify-between gap-4">
 						<div className="flex-1 min-w-0">
-							<Link
-								href={`/decks/${deck.id}`}
-								className="block group-hover:text-primary transition-colors"
-							>
-								<h3 className="font-display text-lg font-medium text-slate truncate">
-									{deck.name}
-								</h3>
-							</Link>
+							<div className="flex items-center gap-3">
+								<Link
+									href={`/decks/${deck.id}`}
+									className="block group-hover:text-primary transition-colors flex-1 min-w-0"
+								>
+									<h3 className="font-display text-lg font-medium text-slate truncate">
+										{deck.name}
+									</h3>
+								</Link>
+								{deck.dueCardCount > 0 && (
+									<span className="shrink-0 inline-flex items-center justify-center min-w-[1.5rem] h-6 px-2 bg-primary text-white text-sm font-medium rounded-full">
+										{deck.dueCardCount}
+									</span>
+								)}
+							</div>
 							{deck.description && (
 								<p className="text-muted text-sm mt-1 line-clamp-2">
 									{deck.description}