diff --git a/app/auth/google/callback/page.tsx b/app/auth/google/callback/page.tsx
index 5a864ce..4df5c97 100644
--- a/app/auth/google/callback/page.tsx
+++ b/app/auth/google/callback/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { apiFetch } from "@/lib/api";
 
-export default function GoogleCallbackPage() {
+function GoogleCallbackContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
@@ -83,3 +83,20 @@ export default function GoogleCallbackPage() {
     </div>
   );
 }
+
+export default function GoogleCallbackPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen flex items-center justify-center bg-background">
+          <div className="glass-panel rounded-2xl p-10 text-center max-w-sm w-full shadow-lg">
+            <div className="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin mx-auto mb-4" />
+            <p className="text-sm text-muted-foreground">Connecting your Google account...</p>
+          </div>
+        </div>
+      }
+    >
+      <GoogleCallbackContent />
+    </Suspense>
+  );
+}