diff --git a/client/src/App.tsx b/client/src/App.tsx
index 5a15f5e..386f2b1 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,5 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 
+import { ForgotPasswordPage } from "@/pages/forgot-password/page";
 import VerifyEmailPage from "@/pages/verify-email/page";
 import PrivateGuard from "@/guards/private-guard";
 import { AppRoutes } from "@/constants/routes";
@@ -20,6 +21,10 @@ function App() {
           <Route path={AppRoutes.SignIn} element={<SignInPage />} />
           <Route path={AppRoutes.VerifyEmail} element={<VerifyEmailPage />} />
         </Route>
+        <Route
+          path={AppRoutes.ForgotPassword}
+          element={<ForgotPasswordPage />}
+        />
       </Routes>
     </main>
   );
diff --git a/client/src/components/or.tsx b/client/src/components/or.tsx
index 8d7a48a..9929b84 100644
--- a/client/src/components/or.tsx
+++ b/client/src/components/or.tsx
@@ -1,6 +1,6 @@
 const Or = () => {
   return (
-    <div className="flex-between gap-x-2 w-full md:w-[400px] px-6 lg:px-0">
+    <div className="flex-between gap-x-2 w-full px-6">
       <span className="h-px w-full flex-1 bg-foreground/40 rounded-full" />
       <p className="text-sm lg:text-lg font-semibold text-foreground/40">Or</p>
       <span className="h-px flex-1 bg-foreground/40 rounded-full" />
diff --git a/client/src/components/switch-auth.tsx b/client/src/components/switch-auth.tsx
index 55fae3a..d11af44 100644
--- a/client/src/components/switch-auth.tsx
+++ b/client/src/components/switch-auth.tsx
@@ -1,15 +1,18 @@
 import { Link } from "react-router-dom";
 
 interface SwitchAuthProps {
-  label: string;
+  label?: string;
   tag: string;
   href: string;
 }
 
 const SwitchAuth = ({ label, tag, href }: SwitchAuthProps) => {
   return (
-    <div className="p-4 w-full md:w-[400px] text-sm lg:text-base rounded-md border border-secondary/50 bg-secondary/15 drop-shadow-2xl flex-center gap-x-2">
-      <p className="font-medium">{label}</p>
+    <div
+      className="p-4 w-full text-sm lg:text-base rounded-md border border-secondary/50 bg-secondary/15 
+      drop-shadow-2xl flex-center gap-x-2"
+    >
+      {label && <p className="font-medium">{label}</p>}
       <Link
         to={href}
         className="font-bold underline-offset-4 hover:underline text-secondary transition-all hover:drop-shadow-secondary-glow"
diff --git a/client/src/constants/keys.ts b/client/src/constants/keys.ts
index cc4fe97..f22fa6f 100644
--- a/client/src/constants/keys.ts
+++ b/client/src/constants/keys.ts
@@ -4,3 +4,4 @@ export const SIGNOUTKEY = "sign-out";
 export const VERIFYEMAILKEY = "verify-email";
 export const RESENDVERIFYKEY = "resend-verify";
 export const VERIFYTOKENKEY = "verify-token";
+export const FORGOTPASSWORDKEY = "forgot-password";
diff --git a/client/src/lib/DTO/forgot-password-dto.ts b/client/src/lib/DTO/forgot-password-dto.ts
new file mode 100644
index 0000000..c4883ee
--- /dev/null
+++ b/client/src/lib/DTO/forgot-password-dto.ts
@@ -0,0 +1,3 @@
+export type ForgotPasswordDTO = {
+  email: string;
+};
diff --git a/client/src/lib/services/auth-service.ts b/client/src/lib/services/auth-service.ts
index dd5fed4..afe5d1d 100644
--- a/client/src/lib/services/auth-service.ts
+++ b/client/src/lib/services/auth-service.ts
@@ -77,9 +77,7 @@ export const AuthService = {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({
-        token: token,
-      }),
+      body: JSON.stringify(token),
     });
 
     const data = await res.json();
@@ -101,9 +99,7 @@ export const AuthService = {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({
-        email: email,
-      }),
+      body: JSON.stringify(email),
     });
 
     const data = await res.json();
@@ -138,4 +134,26 @@ export const AuthService = {
       user: data.user,
     });
   },
+  forgotPassword: async (email: string) => {
+    const res = await fetch(`${baseURL}${AppRoutes.ForgotPassword}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(email),
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      throw new ErrorResponse({
+        status: res.status,
+        message: data.error,
+      });
+    }
+
+    return new GenericResponse({
+      message: data.message,
+    });
+  },
 };
diff --git a/client/src/pages/forgot-password/_components/forgot-password-form.tsx b/client/src/pages/forgot-password/_components/forgot-password-form.tsx
new file mode 100644
index 0000000..96161fa
--- /dev/null
+++ b/client/src/pages/forgot-password/_components/forgot-password-form.tsx
@@ -0,0 +1,70 @@
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { Mail } from "lucide-react";
+import { FormEvent } from "react";
+import { toast } from "sonner";
+
+import { GenericResponse } from "@/lib/classes/generic-response-class";
+import { ErrorResponse } from "@/lib/classes/error-response-class";
+import { ForgotPasswordDTO } from "@/lib/DTO/forgot-password-dto";
+import { AuthService } from "@/lib/services/auth-service";
+import { ValidateEmail } from "@/lib/utils/validations";
+import { FORGOTPASSWORDKEY } from "@/constants/keys";
+import { Button } from "@/components/text-button";
+import { AppRoutes } from "@/constants/routes";
+import { Input } from "@/components/input";
+
+const ForgotPasswordForm = () => {
+  const navigate = useNavigate();
+
+  const { mutate, isPending } = useMutation({
+    mutationKey: [FORGOTPASSWORDKEY],
+    mutationFn: AuthService.forgotPassword,
+    onSuccess: (res: GenericResponse) => {
+      toast.success(res.message);
+      navigate(AppRoutes.ResetPassword);
+    },
+    onError: (error: ErrorResponse) => toast.error(error.message),
+  });
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.currentTarget);
+
+    const forgotPasswordData = Object.fromEntries(
+      formData.entries()
+    ) as ForgotPasswordDTO;
+
+    mutate(forgotPasswordData.email);
+  };
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="p-4 lg:p-6 w-full md:w-fit rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl space-y-4 lg:space-y-6"
+    >
+      <Input
+        required
+        name="email"
+        label="Email Address"
+        tooltip="Please enter a valid email address. Ensure it includes an '@' symbol and a domain name."
+        placeholder="e.g. john@domain.com"
+        type="email"
+        autoComplete="email"
+        suffixIcon={Mail}
+        validation={ValidateEmail}
+        maxLength={320}
+      />
+
+      <Button
+        label="Send Reset Link"
+        disabled={isPending}
+        loading={isPending}
+        type="submit"
+      />
+    </form>
+  );
+};
+
+export { ForgotPasswordForm };
diff --git a/client/src/pages/forgot-password/page.tsx b/client/src/pages/forgot-password/page.tsx
new file mode 100644
index 0000000..3331887
--- /dev/null
+++ b/client/src/pages/forgot-password/page.tsx
@@ -0,0 +1,27 @@
+import { SwitchAuth } from "@/components/switch-auth";
+import { ForgotPasswordForm } from "./_components/forgot-password-form";
+import { AppRoutes } from "@/constants/routes";
+
+const ForgotPasswordPage = () => {
+  return (
+    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
+      <div className="w-full rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl">
+        <h2 className="text-lg lg:text-2xl font-extrabold text-center uppercase pt-4 pb-2">
+          Forgot Password
+        </h2>
+        <div className="w-full bg-primary/25 p-2.5 flex-center border-t border-primary/50">
+          <p className="text-xs lg:text-base text-center lg:max-w-[324px] text-foreground/60 font-medium">
+            Enter your email address and wait for a reset password link to be
+            sent.
+          </p>
+        </div>
+      </div>
+
+      <ForgotPasswordForm />
+
+      <SwitchAuth href={AppRoutes.Root} tag="Back" />
+    </section>
+  );
+};
+
+export { ForgotPasswordPage };
diff --git a/client/src/pages/sign-in/_components/sign-in-form.tsx b/client/src/pages/sign-in/_components/sign-in-form.tsx
index d31d9c8..d6ed026 100644
--- a/client/src/pages/sign-in/_components/sign-in-form.tsx
+++ b/client/src/pages/sign-in/_components/sign-in-form.tsx
@@ -1,5 +1,5 @@
+import { Link, useNavigate } from "react-router-dom";
 import { useMutation } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
 import { FormEvent } from "react";
 import { toast } from "sonner";
 
@@ -52,10 +52,6 @@ const SignInForm = () => {
       onSubmit={onSubmit}
       className="p-4 lg:p-6 w-full md:w-fit rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl space-y-4 lg:space-y-6"
     >
-      <h2 className="text-lg lg:text-2xl font-extrabold text-center uppercase">
-        Access Your Account
-      </h2>
-
       {SIGNININPUTS.map((s) => (
         <Input
           key={s.label}
@@ -66,6 +62,14 @@ const SignInForm = () => {
         />
       ))}
 
+      <Link
+        to={AppRoutes.ForgotPassword}
+        className="text-sm font-medium hover:underline underline-offset-4 transition-all text-foreground 
+          hover:text-primary px-1.5 inline-block text-end w-full"
+      >
+        Forgot Password?
+      </Link>
+
       <Button
         label="Sign In"
         disabled={isPending}
diff --git a/client/src/pages/sign-in/page.tsx b/client/src/pages/sign-in/page.tsx
index ea3e11c..665be49 100644
--- a/client/src/pages/sign-in/page.tsx
+++ b/client/src/pages/sign-in/page.tsx
@@ -6,7 +6,14 @@ import { SignInForm } from "./_components/sign-in-form";
 
 const SignInPage = () => {
   return (
-    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6">
+    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
+      <h2
+        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
+        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
+      >
+        Access Your Account
+      </h2>
+
       <SignInForm />
 
       <Or />