diff --git a/src/components/settings/credits/credit-packages.tsx b/src/components/settings/credits/credit-packages.tsx
index e78454c..81f365a 100644
--- a/src/components/settings/credits/credit-packages.tsx
+++ b/src/components/settings/credits/credit-packages.tsx
@@ -12,7 +12,6 @@ import { getCreditPackages } from '@/config/credits-config';
 import { websiteConfig } from '@/config/website';
 import { useCurrentUser } from '@/hooks/use-current-user';
 import { useCurrentPlan } from '@/hooks/use-payment';
-import { authClient } from '@/lib/auth-client';
 import { formatPrice } from '@/lib/formatter';
 import { cn } from '@/lib/utils';
 import { CircleCheckBigIcon, CoinsIcon } from 'lucide-react';
@@ -32,8 +31,9 @@ export function CreditPackages() {
 
   // Get current user and payment info
   const currentUser = useCurrentUser();
-  const { data: session } = authClient.useSession();
-  const { data: paymentData } = useCurrentPlan(session?.user?.id);
+  const { data: paymentData, isLoading: isLoadingPayment } = useCurrentPlan(
+    currentUser?.id
+  );
   const currentPlan = paymentData?.currentPlan;
 
   // Get credit packages with translations - must be called here to maintain hook order
@@ -41,6 +41,11 @@ export function CreditPackages() {
     (pkg) => !pkg.disabled && pkg.price.priceId
   );
 
+  // Don't render anything while loading to prevent flash
+  if (isLoadingPayment) {
+    return null;
+  }
+
   // Check if user is on free plan and enablePackagesForFreePlan is false
   const isFreePlan = currentPlan?.isFree === true;