From 16e8035299bb5df804a1428e8a22bfa6a0964492 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 6 Feb 2026 21:50:45 +0000
Subject: [PATCH] ui

---
 .../v2/design-elements/BasePage.tsx           |  2 +-
 client/src/Pages/Auth/Login/index.tsx         | 14 +++++++-
 client/src/Pages/Auth/Recovery/index.tsx      | 33 +++++++++++++++++++
 client/src/Routes/index.jsx                   | 12 +++++--
 client/src/locales/en.json                    | 11 +++++++
 5 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 client/src/Pages/Auth/Recovery/index.tsx

diff --git a/client/src/Components/v2/design-elements/BasePage.tsx b/client/src/Components/v2/design-elements/BasePage.tsx
index 65e74b553..ec429d5f6 100644
--- a/client/src/Components/v2/design-elements/BasePage.tsx
+++ b/client/src/Components/v2/design-elements/BasePage.tsx
@@ -247,7 +247,7 @@ export const BaseAuthPage = ({
 				>
 					{title}
 				</Typography>
-				<Typography variant="h1">{subtitle}</Typography>
+				<Typography variant="h2">{subtitle}</Typography>
 			</Stack>
 			<Stack
 				gap={theme.spacing(8)}
diff --git a/client/src/Pages/Auth/Login/index.tsx b/client/src/Pages/Auth/Login/index.tsx
index 1e4b48aaf..8611499d9 100644
--- a/client/src/Pages/Auth/Login/index.tsx
+++ b/client/src/Pages/Auth/Login/index.tsx
@@ -1,4 +1,4 @@
-import { BaseAuthPage } from "@/Components/v2/design-elements";
+import { BaseAuthPage, TextLink } from "@/Components/v2/design-elements";
 import { Button, TextField } from "@/Components/v2/inputs";
 
 import { useTranslation } from "react-i18next";
@@ -76,6 +76,18 @@ const LoginPage = () => {
 			>
 				{t("pages.auth.login.submit")}
 			</Button>
+			<TextLink
+				alignSelf={"center"}
+				text={t("pages.auth.login.links.forgotPassword.text")}
+				linkText={t("pages.auth.login.links.forgotPassword.linkText")}
+				href="/forgot-password"
+			/>
+			<TextLink
+				alignSelf={"center"}
+				text={t("pages.auth.login.links.register.text")}
+				linkText={t("pages.auth.login.links.register.linkText")}
+				href="/register"
+			/>
 		</BaseAuthPage>
 	);
 };
diff --git a/client/src/Pages/Auth/Recovery/index.tsx b/client/src/Pages/Auth/Recovery/index.tsx
new file mode 100644
index 000000000..5df9cb1f4
--- /dev/null
+++ b/client/src/Pages/Auth/Recovery/index.tsx
@@ -0,0 +1,33 @@
+import { Button, TextField } from "@/Components/v2/inputs";
+import { BaseAuthPage, TextLink } from "@/Components/v2/design-elements";
+
+import { useTranslation } from "react-i18next";
+const ForgotPasswordPage = () => {
+	const { t } = useTranslation();
+	return (
+		<BaseAuthPage
+			component="form"
+			title={t("pages.auth.forgotPassword.title")}
+			subtitle={t("pages.auth.forgotPassword.subtitle")}
+		>
+			<TextField
+				fieldLabel={t("pages.auth.common.form.option.email.label")}
+				placeholder={t("pages.auth.common.form.option.email.placeholder")}
+			/>
+			<Button
+				variant="contained"
+				type="submit"
+			>
+				{t("pages.auth.forgotPassword.submit")}
+			</Button>
+			<TextLink
+				alignSelf={"center"}
+				text={t("pages.auth.forgotPassword.links.login.text")}
+				linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+				href={"/login"}
+			/>
+		</BaseAuthPage>
+	);
+};
+
+export default ForgotPasswordPage;
diff --git a/client/src/Routes/index.jsx b/client/src/Routes/index.jsx
index b281b359e..6882fafbf 100644
--- a/client/src/Routes/index.jsx
+++ b/client/src/Routes/index.jsx
@@ -6,10 +6,12 @@ import { useSelector } from "react-redux";
 import { Navigate, Route, Routes as LibRoutes } from "react-router";
 import HomeLayout from "@/Components/v1/Layouts/HomeLayout";
 import NotFound from "../Pages/NotFound/index.jsx";
+
 // Auth
 import AuthLogin from "../Pages/Auth/Login";
 import AuthRegister from "../Pages/Auth/Register/index.jsx";
-import AuthForgotPassword from "../Pages/Auth/ForgotPassword.jsx";
+// import AuthForgotPassword from "../Pages/Auth/ForgotPassword.jsx";
+import AuthForgotPassword from "@/Pages/Auth/Recovery";
 import AuthCheckEmail from "../Pages/Auth/CheckEmail.jsx";
 import AuthSetNewPassword from "../Pages/Auth/SetNewPassword.jsx";
 import AuthNewPasswordConfirmed from "../Pages/Auth/NewPasswordConfirmed.jsx";
@@ -382,7 +384,13 @@ const Routes = () => {
 
 			<Route
 				path="/forgot-password"
-				element={<AuthForgotPassword />}
+				element={
+					<>
+						<ThemeProvider theme={v2theme}>
+							<AuthForgotPassword />
+						</ThemeProvider>
+					</>
+				}
 			/>
 			<Route
 				path="/check-email"
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index 514ac3db4..90fe56997 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -527,6 +527,17 @@
 						"linkText": "Register here"
 					}
 				}
+			},
+			"forgotPassword": {
+				"title": "Forgot your password?",
+				"subtitle": "No worries, we'll send you reset instructions.",
+				"submit": "Request recovery",
+				"links": {
+					"login": {
+						"text": "Go back to",
+						"linkText": "login"
+					}
+				}
 			}
 		},
 		"checks": {