diff --git a/frontend/src/app/(dashboard)/dashboard/page.tsx b/frontend/src/app/(dashboard)/dashboard/page.tsx
index 59bbcb05..b29673ff 100644
--- a/frontend/src/app/(dashboard)/dashboard/page.tsx
+++ b/frontend/src/app/(dashboard)/dashboard/page.tsx
@@ -26,6 +26,7 @@ import { config } from '@/lib/config';
 import { cn } from '@/lib/utils';
 import { useInitiateAgentWithInvalidation } from '@/hooks/react-query/dashboard/use-initiate-agent';
 import { ModalProviders } from '@/providers/modal-providers';
+import { useModal } from '@/hooks/use-modal-store';
 
 const PENDING_PROMPT_KEY = 'pendingAgentPrompt';
 
@@ -42,6 +43,7 @@ function DashboardContent() {
   const personalAccount = accounts?.find((account) => account.personal_account);
   const chatInputRef = useRef<ChatInputHandles>(null);
   const initiateAgentMutation = useInitiateAgentWithInvalidation();
+  const { onOpen } = useModal();
 
   const secondaryGradient =
     'bg-gradient-to-r from-blue-500 to-blue-500 bg-clip-text text-transparent';
@@ -96,17 +98,7 @@ function DashboardContent() {
       console.error('Error during submission process:', error);
       if (error instanceof BillingError) {
         console.log('Handling BillingError:', error.detail);
-        handleBillingError({
-          message:
-            error.detail.message ||
-            'Monthly usage limit reached. Please upgrade your plan.',
-          currentUsage: error.detail.currentUsage as number | undefined,
-          limit: error.detail.limit as number | undefined,
-          subscription: error.detail.subscription || {
-            price_id: config.SUBSCRIPTION_TIERS.FREE.priceId,
-            plan_name: 'Free',
-          },
-        });
+        onOpen("paymentRequiredDialog");
       }
     } finally {
       setIsSubmitting(false);
diff --git a/frontend/src/app/(home)/page.tsx b/frontend/src/app/(home)/page.tsx
index 3476d52d..08b6dcac 100644
--- a/frontend/src/app/(home)/page.tsx
+++ b/frontend/src/app/(home)/page.tsx
@@ -8,25 +8,29 @@ import { HeroSection } from '@/components/home/sections/hero-section';
 import { OpenSourceSection } from '@/components/home/sections/open-source-section';
 import { PricingSection } from '@/components/home/sections/pricing-section';
 import { UseCasesSection } from '@/components/home/sections/use-cases-section';
+import { ModalProviders } from '@/providers/modal-providers';
 
 export default function Home() {
   return (
-    <main className="flex flex-col items-center justify-center min-h-screen w-full">
-      <div className="w-full divide-y divide-border">
-        <HeroSection />
-        <UseCasesSection />
-        {/* <CompanyShowcase /> */}
-        {/* <BentoSection /> */}
-        {/* <QuoteSection /> */}
-        {/* <FeatureSection /> */}
-        {/* <GrowthSection /> */}
-        <OpenSourceSection />
-        <PricingSection />
-        {/* <TestimonialSection /> */}
-        {/* <FAQSection /> */}
-        <CTASection />
-        <FooterSection />
-      </div>
-    </main>
+    <>
+      <ModalProviders />
+      <main className="flex flex-col items-center justify-center min-h-screen w-full">
+        <div className="w-full divide-y divide-border">
+          <HeroSection />
+          <UseCasesSection />
+          {/* <CompanyShowcase /> */}
+          {/* <BentoSection /> */}
+          {/* <QuoteSection /> */}
+          {/* <FeatureSection /> */}
+          {/* <GrowthSection /> */}
+          <OpenSourceSection />
+          <PricingSection />
+          {/* <TestimonialSection /> */}
+          {/* <FAQSection /> */}
+          <CTASection />
+          <FooterSection />
+        </div>
+      </main>
+    </>
   );
 }
diff --git a/frontend/src/components/home/sections/hero-section.tsx b/frontend/src/components/home/sections/hero-section.tsx
index 1601979a..1025834b 100644
--- a/frontend/src/components/home/sections/hero-section.tsx
+++ b/frontend/src/components/home/sections/hero-section.tsx
@@ -33,6 +33,7 @@ import { useBillingError } from '@/hooks/useBillingError';
 import { useAccounts } from '@/hooks/use-accounts';
 import { isLocalMode, config } from '@/lib/config';
 import { toast } from 'sonner';
+import { useModal } from '@/hooks/use-modal-store';
 
 // Custom dialog overlay with blur effect
 const BlurredDialogOverlay = () => (
@@ -57,6 +58,7 @@ export function HeroSection() {
     useBillingError();
   const { data: accounts } = useAccounts();
   const personalAccount = accounts?.find((account) => account.personal_account);
+  const { onOpen } = useModal();
 
   // Auth dialog state
   const [authDialogOpen, setAuthDialogOpen] = useState(false);
@@ -142,17 +144,8 @@ export function HeroSection() {
       // Check specifically for BillingError (402)
       if (error instanceof BillingError) {
         console.log('Handling BillingError from hero section:', error.detail);
-        handleBillingError({
-          message:
-            error.detail.message ||
-            'Monthly usage limit reached. Please upgrade your plan.',
-          currentUsage: error.detail.currentUsage as number | undefined,
-          limit: error.detail.limit as number | undefined,
-          subscription: error.detail.subscription || {
-            price_id: config.SUBSCRIPTION_TIERS.FREE.priceId, // Default Free
-            plan_name: 'Free',
-          },
-        });
+        // Open the payment required dialog modal instead of showing the alert
+        onOpen("paymentRequiredDialog");
         // Don't show toast for billing errors
       } else {
         // Handle other errors (e.g., network, other API errors)