Start working on the profile refactoring.

app/(auth)/forgot-password/page.tsx

@@ -1,15 +1,23 @@
-import {PageParams} from "@/types/next";
-import {Metadata} from "next";
-import {ForgotPasswordForm} from "@/components/wrappers/auth/forgot-password/forgot-password-form";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
-export const metadata: Metadata = {
-    title: "Forgot Password",
-};
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ForgotPasswordForm } from "@/components/wrappers/auth/login/forgot-password-form/forgot-password-form";
+
+export default async function RoutePage(props: { searchParams: Promise<{ callbackUrl: string | undefined }> }) {
 
-export default async function RoutePage(props: PageParams<{}>) {
     return (
-        <div className="mx-auto grid w-full gap-6">
-            <ForgotPasswordForm/>
-        </div>
-    )
-}
+        <TooltipProvider>
+            <Card className="w-full">
+                <CardHeader>
+                    <div className="grid gap-2 text-center mb-2">
+                        <h1 className="text-3xl font-bold">Reset password</h1>
+                        <p className="text-balance text-muted-foreground">Enter your email address and we'll send you a link to reset your password.</p>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <ForgotPasswordForm />
+                </CardContent>
+            </Card>
+        </TooltipProvider>
+    );
+}