diff --git a/app/auth/google/callback/page.tsx b/app/auth/google/callback/page.tsx
index 5a864ce..04abd11 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,22 @@ export default function GoogleCallbackPage() {
     </div>
   );
 }
+
+function GoogleCallbackFallback() {
+  return (
+    <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>
+  );
+}
+
+export default function GoogleCallbackPage() {
+  return (
+    <Suspense fallback={<GoogleCallbackFallback />}>
+      <GoogleCallbackContent />
+    </Suspense>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 5745ec9..33c10ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1433,7 +1433,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,