diff --git a/src/pages/Balance.tsx b/src/pages/Balance.tsx
index 3f434c3..d22e5fe 100644
--- a/src/pages/Balance.tsx
+++ b/src/pages/Balance.tsx
@@ -94,9 +94,13 @@ export default function Balance() {
     queryFn: balanceApi.getPaymentMethods,
   });
 
+  // Deferred: only fetch saved cards after payment methods loaded to avoid extra request on first render.
+  // The recurrent_enabled flag is cached for 5 min to prevent refetching on every Balance visit.
   const { data: savedCardsData } = useQuery({
     queryKey: ['saved-cards'],
     queryFn: balanceApi.getSavedCards,
+    enabled: !!paymentMethods,
+    staleTime: 5 * 60 * 1000,
   });
 
   const normalizeType = (type: string) => type?.toUpperCase?.() ?? type;
diff --git a/src/pages/TopUpAmount.tsx b/src/pages/TopUpAmount.tsx
index 2f07318..4f3ac73 100644
--- a/src/pages/TopUpAmount.tsx
+++ b/src/pages/TopUpAmount.tsx
@@ -469,8 +469,7 @@ export default function TopUpAmount() {
       {/* Error message */}
       {error && (
         <motion.div
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
+          variants={staggerItem}
           className="flex items-center gap-2 rounded-xl border border-error-500/20 bg-error-500/10 p-3"
         >
           <svg
@@ -493,8 +492,7 @@ export default function TopUpAmount() {
       {/* Payment link display - shown when URL is received */}
       {paymentUrl && (
         <motion.div
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
+          variants={staggerItem}
           className="space-y-3 rounded-2xl border border-success-500/20 bg-success-500/10 p-4"
         >
           <div className="flex items-center gap-2 text-success-400">