1 files changed, 14 insertions, 0 deletions
diff --git a/src/client/pages/DeckDetailPage.tsx b/src/client/pages/DeckDetailPage.tsx
index c713ab0..9fce7b7 100644
--- a/src/client/pages/DeckDetailPage.tsx
+++ b/src/client/pages/DeckDetailPage.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { Link, useParams } from "wouter";
 import { ApiClientError, apiClient } from "../api";
+import { CreateCardModal } from "../components/CreateCardModal";
 
 interface Card {
 	id: string;
@@ -34,6 +35,7 @@ export function DeckDetailPage() {
 	const [cards, setCards] = useState<Card[]>([]);
 	const [isLoading, setIsLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
 	const fetchDeck = useCallback(async () => {
 		if (!deckId) return;
@@ -158,6 +160,9 @@ export function DeckDetailPage() {
 						}}
 					>
 						<h2 style={{ margin: 0 }}>Cards ({cards.length})</h2>
+						<button type="button" onClick={() => setIsCreateModalOpen(true)}>
+							Add Card
+						</button>
 					</div>
 
 					{cards.length === 0 && (
@@ -241,6 +246,15 @@ export function DeckDetailPage() {
 					)}
 				</main>
 			)}
+
+			{deckId && (
+				<CreateCardModal
+					isOpen={isCreateModalOpen}
+					deckId={deckId}
+					onClose={() => setIsCreateModalOpen(false)}
+					onCardCreated={fetchCards}
+				/>
+			)}
 		</div>
 	);
 }