diff --git a/frontend/src/lib/components/payments/CardSelection.svelte b/frontend/src/lib/components/payments/CardSelection.svelte
index 3f6a9b5..3b44591 100644
--- a/frontend/src/lib/components/payments/CardSelection.svelte
+++ b/frontend/src/lib/components/payments/CardSelection.svelte
@@ -36,6 +36,17 @@
 	// When no saved cards exist the form shows by default.
 	let showNewCardForm = $state(false);
 
+	// Auto-select the default saved card when cards first load. Guarded by
+	// !showNewCardForm so the "Use a new card" click (selectedCardId = '') is
+	// NOT immediately overridden back to the default card — which would
+	// silently charge the wrong card on submit.
+	$effect(() => {
+		if (cards.length > 0 && !selectedCardId && !showNewCardForm) {
+			const defaultCard = cards.find((c) => c.is_default) ?? cards[0];
+			selectedCardId = defaultCard.id;
+		}
+	});
+
 	// Blur-based validation state (matches the pattern used across all card flows)
 	let cardNumberTouched = $state(false);
 	let cardExpiryTouched = $state(false);
diff --git a/frontend/src/lib/components/payments/UserPaymentModal.svelte b/frontend/src/lib/components/payments/UserPaymentModal.svelte
index 93e63e5..79eeb80 100644
--- a/frontend/src/lib/components/payments/UserPaymentModal.svelte
+++ b/frontend/src/lib/components/payments/UserPaymentModal.svelte
@@ -46,14 +46,6 @@
 	let stamps = $state(0);
 	let useLoyalty = $state(false);
 
-	// Auto-select first saved card when methods load
-	$effect(() => {
-		if (paymentMethods.length > 0 && !selectedCardId) {
-			const defaultCard = paymentMethods.find((m) => m.is_default) ?? paymentMethods[0];
-			selectedCardId = defaultCard.id;
-		}
-	});
-
 	// New card form fields (bound into CardSelection)
 	let newCardNumber = $state('');
 	let newCardExpiry = $state('');