diff --git a/src/components/pricing/pricing-card.tsx b/src/components/pricing/pricing-card.tsx
index e526b0f..5d02242 100644
--- a/src/components/pricing/pricing-card.tsx
+++ b/src/components/pricing/pricing-card.tsx
@@ -9,6 +9,7 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { useCurrentUser } from '@/hooks/use-current-user';
+import { useMounted } from '@/hooks/use-mounted';
 import { useLocalePathname } from '@/i18n/navigation';
 import { formatPrice } from '@/lib/formatter';
 import { cn } from '@/lib/utils';
@@ -79,6 +80,7 @@ export function PricingCard({
   const price = getPriceForPlan(plan, interval, paymentType);
   const currentUser = useCurrentUser();
   const currentPath = useLocalePathname();
+  const mounted = useMounted();
   // console.log('pricing card, currentPath', currentPath);
 
   // generate formatted price and price label
@@ -152,7 +154,7 @@ export function PricingCard({
 
         {/* show action buttons based on plans */}
         {plan.isFree ? (
-          currentUser ? (
+          mounted && currentUser ? (
             <Button variant="outline" className="mt-4 w-full disabled">
               {t('getStartedForFree')}
             </Button>
@@ -172,7 +174,7 @@ export function PricingCard({
             {t('yourCurrentPlan')}
           </Button>
         ) : isPaidPlan ? (
-          currentUser ? (
+          mounted && currentUser ? (
             <CheckoutButton
               userId={currentUser.id}
               planId={plan.id}
diff --git a/src/hooks/use-credits.ts b/src/hooks/use-credits.ts
index f3837c6..2cfd0ee 100644
--- a/src/hooks/use-credits.ts
+++ b/src/hooks/use-credits.ts
@@ -1,3 +1,4 @@
+import { websiteConfig } from '@/config/website';
 import { authClient } from '@/lib/auth-client';
 import { useCreditsStore } from '@/stores/credits-store';
 import { useCallback, useEffect } from 'react';
@@ -7,8 +8,21 @@ import { useCallback, useEffect } from 'react';
  *
  * This hook provides access to the credits state and methods to manage it.
  * It also automatically fetches credits information when the user changes.
+ * Only works when credits are enabled in the website configuration.
  */
 export function useCredits() {
+  // Return default values if credits are disabled
+  if (!websiteConfig.credits.enableCredits) {
+    return {
+      balance: 0,
+      isLoading: false,
+      error: null,
+      fetchCredits: () => Promise.resolve(),
+      consumeCredits: () => Promise.resolve(false),
+      hasEnoughCredits: () => false,
+    };
+  }
+
   const {
     balance,
     isLoading,
diff --git a/src/providers/credits-provider.tsx b/src/providers/credits-provider.tsx
index 32ec079..5fbed6e 100644
--- a/src/providers/credits-provider.tsx
+++ b/src/providers/credits-provider.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { websiteConfig } from '@/config/website';
 import { authClient } from '@/lib/auth-client';
 import { useCreditsStore } from '@/stores/credits-store';
 import { useEffect } from 'react';
@@ -9,8 +10,14 @@ import { useEffect } from 'react';
  *
  * This component initializes the credits store when the user is authenticated
  * and handles cleanup when the user logs out.
+ * Only renders when credits are enabled in the website configuration.
  */
 export function CreditsProvider({ children }: { children: React.ReactNode }) {
+  // Only initialize credits store if credits are enabled
+  if (!websiteConfig.credits.enableCredits) {
+    return <>{children}</>;
+  }
+
   const { fetchCredits } = useCreditsStore();
   const { data: session } = authClient.useSession();