diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a364d1f..09fe591 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -12,6 +12,7 @@ import Header from "@/components/header";
 import Footer from "@/components/footer";
 import AdminBanner from "@/components/admin/banner";
 import { SessionProvider } from "next-auth/react";
+import { Suspense } from "react";
 
 const lexend = Lexend({
 	subsets: ["latin"],
@@ -92,9 +93,11 @@ export default function RootLayout({
 				)}
 
 				<Providers>
-					<SessionProvider>
-						<Header />
-					</SessionProvider>
+					<Suspense fallback={<div>Loading header...</div>}>
+						<SessionProvider>
+							<Header />
+						</SessionProvider>
+					</Suspense>
 					<AdminBanner />
 					<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">{children}</main>
 					<Footer />