diff --git a/src/app/[locale]/(marketing)/(pages)/about/page.tsx b/src/app/[locale]/(marketing)/(pages)/about/page.tsx
index 5e000fb..3c3d7f6 100644
--- a/src/app/[locale]/(marketing)/(pages)/about/page.tsx
+++ b/src/app/[locale]/(marketing)/(pages)/about/page.tsx
@@ -1,3 +1,4 @@
+import { CreditsTest } from '@/components/dev/credits-test';
 import Container from '@/components/layout/container';
 import { BlurFadeDemo } from '@/components/magicui/example/blur-fade-example';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@@ -101,6 +102,9 @@ export default async function AboutPage() {
 
         {/* image section */}
         {/* <BlurFadeDemo /> */}
+
+        {/* credits test */}
+        {/* <CreditsTest /> */}
       </div>
     </Container>
   );
diff --git a/src/components/dev/credits-test.tsx b/src/components/dev/credits-test.tsx
new file mode 100644
index 0000000..f3bf510
--- /dev/null
+++ b/src/components/dev/credits-test.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { useConsumeCredits, useCreditBalance } from '@/hooks/use-credits';
+import { CoinsIcon } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+export function CreditsTest() {
+  const { data: balance = 0, isLoading } = useCreditBalance();
+  const consumeCreditsMutation = useConsumeCredits();
+  const [loading, setLoading] = useState(false);
+
+  const handleConsume = async () => {
+    setLoading(true);
+    try {
+      await consumeCreditsMutation.mutateAsync({
+        amount: 10,
+        description: 'Test credit consumption',
+      });
+      toast.success('10 credits consumed successfully!');
+    } catch (error) {
+      toast.error('Failed to consume credits');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-4 border rounded-lg space-y-4">
+      <h3 className="text-lg font-semibold">Credits Store Test</h3>
+
+      <div className="space-y-2">
+        <p>
+          <strong>Store Balance:</strong> {balance}
+        </p>
+      </div>
+
+      <div className="flex gap-2">
+        <Button
+          onClick={handleConsume}
+          disabled={loading || consumeCreditsMutation.isPending}
+          size="sm"
+        >
+          <CoinsIcon className="w-4 h-4 mr-2" />
+          Consume 10 Credits
+        </Button>
+      </div>
+
+      {loading && <p className="text-sm text-muted-foreground">Loading...</p>}
+    </div>
+  );
+}