diff --git a/src/app/(auth)/reset-password/page.tsx b/src/app/(auth)/reset-password/page.tsx
index 1b1b9bc..703d4a3 100644
--- a/src/app/(auth)/reset-password/page.tsx
+++ b/src/app/(auth)/reset-password/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, Suspense } from "react";
 import { AUTH } from "@/api/auth/api";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 
-export default function ResetPasswordPage() {
+function ResetPasswordForm() {
 	const searchParams = useSearchParams();
 	const token = searchParams.get("token");
 
@@ -59,10 +59,11 @@ export default function ResetPasswordPage() {
 			if (ok && data) {
 				setSuccess(true);
 			} else {
-				setError(
-					(data?.message as string) ||
-						"Failed to reset password. Please try again."
-				);
+				const errorMessage =
+					data && typeof data === "object" && "message" in data
+						? (data.message as string)
+						: "Failed to reset password. Please try again.";
+				setError(errorMessage);
 			}
 		},
 		[token, password, passwordError]
@@ -228,3 +229,19 @@ export default function ResetPasswordPage() {
 		</div>
 	);
 }
+
+export default function ResetPasswordPage() {
+	return (
+		<Suspense
+			fallback={
+				<div className="min-h-screen flex items-center justify-center p-4">
+					<div className="text-center" style={{ color: "var(--foreground)" }}>
+						Loading...
+					</div>
+				</div>
+			}
+		>
+			<ResetPasswordForm />
+		</Suspense>
+	);
+}