diff --git a/src/app/(user)/billing/page.tsx b/src/app/(user)/billing/page.tsx
index becba49..9ab80d2 100644
--- a/src/app/(user)/billing/page.tsx
+++ b/src/app/(user)/billing/page.tsx
@@ -6,6 +6,7 @@ import { dbGetUserPurchasedCourses } from "@/server/controllers/dbController";
 import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { Suspense } from "react";
 
 export const dynamic = "force-dynamic";
 
@@ -20,7 +21,9 @@ export default async function Billing() {
 
     return (
         <PageWrapper>
-            <Maintenance area="user" />
+            <Suspense>
+                <Maintenance area="user" />
+            </Suspense>
             <div className="py-10">
                 <h1 className="text-xl font-bold py-6 text-center">Billing</h1>
                 {purchasedCourses && purchasedCourses.length > 0 ? (
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5cf8840..ba4cdba 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,6 +6,7 @@ import InfoCard from "@/components/InfoCard";
 import { PolyRhythmicSpiral } from "@/components/animations/PolyRhythmicSpiral";
 import Link from "next/link";
 import { Maintenance } from "@/components/Maintenance";
+import { Suspense } from "react";
 
 export default async function Home() {
     return (
@@ -13,7 +14,9 @@ export default async function Home() {
             <Hero />
             <PageWrapper>
                 <OpeningDescription />
-                <Maintenance area="global" />
+                <Suspense>
+                    <Maintenance area="global" />
+                </Suspense>
                 <MainInfoCard />
                 <InfoCards />
                 <Community />