diff --git a/src/app/[locale]/(main)/order/[id]/confirmed/page.tsx b/src/app/[locale]/(main)/order/[id]/confirmed/page.tsx
index f6d8ad38..0a88a0d1 100644
--- a/src/app/[locale]/(main)/order/[id]/confirmed/page.tsx
+++ b/src/app/[locale]/(main)/order/[id]/confirmed/page.tsx
@@ -8,7 +8,7 @@ type Props = {
 }
 export const metadata: Metadata = {
   title: "Order Confirmed",
-  description: "You purchase was successful",
+  description: "Your purchase was successful",
 }
 
 export default async function OrderConfirmedPage(props: Props) {
diff --git a/src/app/[locale]/(main)/user/forgot-password/page.tsx b/src/app/[locale]/(main)/user/forgot-password/page.tsx
new file mode 100644
index 00000000..8f587156
--- /dev/null
+++ b/src/app/[locale]/(main)/user/forgot-password/page.tsx
@@ -0,0 +1,16 @@
+import { ForgotPasswordForm } from "@/components/molecules/ForgotPasswordForm/ForgotPasswordForm"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Forgot password",
+  description: "Create a new password",
+}
+
+export default function ForgotPasswordPage() {
+
+  return (
+    <main className="container">
+      <ForgotPasswordForm />
+    </main>
+  )
+}
diff --git a/src/components/cells/LabeledInput/LabeledInput.tsx b/src/components/cells/LabeledInput/LabeledInput.tsx
index d8be642d..cd524825 100644
--- a/src/components/cells/LabeledInput/LabeledInput.tsx
+++ b/src/components/cells/LabeledInput/LabeledInput.tsx
@@ -16,7 +16,7 @@ export const LabeledInput = ({
 }: LabeledInputProps) => (
   <label className={cn("label-sm block", className)}>
     <p className={cn(error && "text-negative")}>{label}</p>
-    <Input className={cn(error && "border-negative")} {...props} />
+    <Input error={!!error} {...props} />
     {error && <p className="label-sm text-negative">{error.message}</p>}
   </label>
 )
diff --git a/src/components/molecules/ForgotPasswordForm/ForgotPasswordForm.tsx b/src/components/molecules/ForgotPasswordForm/ForgotPasswordForm.tsx
new file mode 100644
index 00000000..75e1e1f4
--- /dev/null
+++ b/src/components/molecules/ForgotPasswordForm/ForgotPasswordForm.tsx
@@ -0,0 +1,90 @@
+"use client"
+import {
+  FieldError,
+  FormProvider,
+  useForm,
+  useFormContext,
+} from "react-hook-form"
+import { Button } from "@/components/atoms"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { LabeledInput } from "@/components/cells"
+import { forgotPasswordSchema, ForgotPasswordFormData } from "./schema"
+import { sendResetPasswordEmail } from "@/lib/data/customer"
+import { toast } from "@/lib/helpers/toast"
+import Link from "next/link"
+
+export const ForgotPasswordForm = () => {
+  const methods = useForm<ForgotPasswordFormData>({
+    resolver: zodResolver(forgotPasswordSchema),
+    defaultValues: {
+      email: "",
+    },
+  })
+
+  return (
+    <FormProvider {...methods}>
+      <Form />
+    </FormProvider>
+  )
+}
+
+const Form = () => {
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useFormContext<ForgotPasswordFormData>()
+
+  const submit = async (data: ForgotPasswordFormData) => {
+    if (!data.email) return
+
+    const result = await sendResetPasswordEmail(data.email)
+
+    if (!result.success) {
+      toast.error({ title: result.error || "An error occurred. Please try again." })
+      return
+    }
+
+    reset({ email: "" })
+
+    toast.success({
+      title: `A password reset has been requested for ${data.email}. Check your inbox and spam folder. Remember, the link is only active for one hour.`,
+    })
+  }
+
+  return (
+    <div className="max-w-xl w-full mx-auto mt-6 space-y-4 rounded-sm border p-4">
+      <h1 className="heading-md uppercase my-0 mb-2 text-primary">Forgot your password?</h1>
+      <p className="text-md">
+        Enter the email you used to sign up and we’ll send you a password reset
+        email.
+      </p>
+      <form onSubmit={handleSubmit(submit)}>
+        <div className="space-y-4">
+          <LabeledInput
+            label="E-mail"
+            placeholder="Your e-mail address"
+            error={errors.email as FieldError}
+            {...register("email")}
+          />
+        </div>
+
+        <div className="space-y-4 mt-8">
+          <Button className="w-full uppercase" disabled={isSubmitting}>
+            Reset Password
+          </Button>
+
+          <Link href="/user" className="flex">
+            <Button
+              variant="tonal"
+              className="w-full flex justify-center uppercase"
+            >
+              Back to log in
+            </Button>
+          </Link>
+        </div>
+      </form>
+    </div>
+  )
+}
diff --git a/src/components/molecules/ForgotPasswordForm/schema.ts b/src/components/molecules/ForgotPasswordForm/schema.ts
new file mode 100644
index 00000000..144057ce
--- /dev/null
+++ b/src/components/molecules/ForgotPasswordForm/schema.ts
@@ -0,0 +1,7 @@
+import { z } from "zod"
+
+export const forgotPasswordSchema = z.object({
+  email: z.string().nonempty("Please enter email").email("Please enter a valid email"),
+})
+
+export type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>
diff --git a/src/components/molecules/LoginForm/LoginForm.tsx b/src/components/molecules/LoginForm/LoginForm.tsx
index f0b47b51..1f730ba1 100644
--- a/src/components/molecules/LoginForm/LoginForm.tsx
+++ b/src/components/molecules/LoginForm/LoginForm.tsx
@@ -8,12 +8,13 @@ import {
 } from "react-hook-form"
 import { Button } from "@/components/atoms"
 import { zodResolver } from "@hookform/resolvers/zod"
-import LocalizedClientLink from "@/components/molecules/LocalizedLink/LocalizedLink"
 import { LabeledInput } from "@/components/cells"
 import { loginFormSchema, LoginFormData } from "./schema"
 import { useState } from "react"
 import { login } from "@/lib/data/customer"
 import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { toast } from "@/lib/helpers/toast"
 
 export const LoginForm = () => {
   const methods = useForm<LoginFormData>({
@@ -32,7 +33,7 @@ export const LoginForm = () => {
 }
 
 const Form = () => {
-  const [error, setError] = useState("")
+  const [isAuthError, setIsAuthError] = useState(false);
   const {
     handleSubmit,
     register,
@@ -47,45 +48,78 @@ const Form = () => {
 
     const res = await login(formData)
     if (res) {
-      setError(res)
+      // Temporary solution. API returns 200 code in case of auth error. To change when API is updated.
+      const isCredentialsError = 
+        res.toLowerCase().includes("invalid email or password") ||
+        res.toLowerCase().includes("unauthorized") ||
+        res.toLowerCase().includes("incorrect") ||
+        res.toLowerCase().includes("credentials");
+      
+      setIsAuthError(isCredentialsError);
+      toast.error({ title: res || "An error occurred. Please try again." })
       return
     }
-    setError("")
+    setIsAuthError(false);
     router.push("/user")
   }
 
+  const clearApiError = () => {
+    isAuthError && setIsAuthError(false);
+  }
+
   return (
     <main className="container">
-      <h1 className="heading-xl text-center uppercase my-6">
-        Log in to your account
-      </h1>
-      <form onSubmit={handleSubmit(submit)}>
-        <div className="w-96 max-w-full mx-auto space-y-4">
-          <LabeledInput
-            label="E-mail"
-            placeholder="Your e-mail address"
-            error={errors.email as FieldError}
-            {...register("email")}
-          />
-          <LabeledInput
-            label="Password"
-            placeholder="Your password"
-            type="password"
-            error={errors.password as FieldError}
-            {...register("password")}
-          />
-          {error && <p className="label-md text-negative">{error}</p>}
-          <Button className="w-full" disabled={isSubmitting}>
-            Log in
-          </Button>
-          <p className="text-center label-md">
-            Don&apos;t have an account yet?{" "}
-            <LocalizedClientLink href="/user/register" className="underline">
-              Sign up!
-            </LocalizedClientLink>
-          </p>
+      <div className="max-w-xl w-full mx-auto mt-6 space-y-4">
+        <div className="rounded-sm border p-4">
+          <h1 className="heading-md uppercase mb-8 text-primary">Log in</h1>
+          <form onSubmit={handleSubmit(submit)}>
+            <div className="space-y-4">
+              <LabeledInput
+                label="E-mail"
+                placeholder="Your e-mail address"
+                error={(errors.email as FieldError) || (isAuthError ? { message: '' } as FieldError : undefined)}
+                {...register("email", {
+                  onChange: clearApiError
+                })}
+              />
+              <LabeledInput
+                label="Password"
+                placeholder="Your password"
+                type="password"
+                error={(errors.password as FieldError) || (isAuthError ? { message: '' } as FieldError : undefined)}
+                {...register("password", {
+                  onChange: clearApiError
+                })}
+              />
+            </div>
+
+            <Link
+              href="/user/forgot-password"
+              className="block text-right label-md uppercase text-action-on-secondary mt-4"
+            >
+              Forgot your password?
+            </Link>
+
+            <Button className="w-full uppercase mt-8" disabled={isSubmitting}>
+              Log in
+            </Button>
+          </form>
         </div>
-      </form>
+
+        <div className="rounded-sm border p-4">
+          <h2 className="heading-md uppercase mb-4 text-primary">
+            Don&apos;t have an account yet?
+          </h2>
+          <Link href="/user/register">
+            <Button
+              variant="tonal"
+              className="w-full flex justify-center mt-8 uppercase"
+            >
+              Create account
+            </Button>
+          </Link>
+        </div>
+      </div>
     </main>
   )
-}
+}
\ No newline at end of file
diff --git a/src/components/molecules/LoginForm/schema.ts b/src/components/molecules/LoginForm/schema.ts
index e5f56675..4de5c439 100644
--- a/src/components/molecules/LoginForm/schema.ts
+++ b/src/components/molecules/LoginForm/schema.ts
@@ -1,7 +1,7 @@
 import { z } from "zod"
 
 export const loginFormSchema = z.object({
-  email: z.string().nonempty("Please enter email").email("Invalid email"),
+  email: z.string().nonempty("Please enter email").email("Please enter a valid email"),
   password: z.string().nonempty("Please enter password"),
 })
 
diff --git a/src/components/molecules/ProfilePasswordForm/ProfilePasswordForm.tsx b/src/components/molecules/ProfilePasswordForm/ProfilePasswordForm.tsx
index 3a702a1a..c1382d50 100644
--- a/src/components/molecules/ProfilePasswordForm/ProfilePasswordForm.tsx
+++ b/src/components/molecules/ProfilePasswordForm/ProfilePasswordForm.tsx
@@ -1,9 +1,8 @@
 "use client"
 
-import { Button, Card } from "@/components/atoms"
+import { Button } from "@/components/atoms"
 import { LabeledInput } from "@/components/cells"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { CheckCircle } from "@medusajs/icons"
 import {
   FieldError,
   FieldValues,
@@ -13,7 +12,7 @@ import {
   UseFormReturn,
 } from "react-hook-form"
 import { ProfilePasswordFormData, profilePasswordSchema } from "./schema"
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import { updateCustomerPassword } from "@/lib/data/customer"
 import { Heading, toast } from "@medusajs/ui"
 import LocalizedClientLink from "../LocalizedLink/LocalizedLink"
diff --git a/src/components/molecules/RegisterForm/RegisterForm.tsx b/src/components/molecules/RegisterForm/RegisterForm.tsx
index 2f456118..a8498425 100644
--- a/src/components/molecules/RegisterForm/RegisterForm.tsx
+++ b/src/components/molecules/RegisterForm/RegisterForm.tsx
@@ -129,19 +129,17 @@ const Form = () => {
         </form>
       </Container>
       <Container className="border max-w-xl mx-auto mt-8 p-4">
-        <h1 className="heading-md text-primary uppercase mb-8">
+        <h2 className="heading-md text-primary uppercase mb-8">
           Already have an account?
-        </h1>
-        <p className="text-center label-md">
-          <Link href="/user">
-            <Button
-              variant="tonal"
-              className="w-full flex justify-center mt-8 uppercase"
-            >
-              Log in
-            </Button>
-          </Link>
-        </p>
+        </h2>
+        <Link href="/user">
+          <Button
+            variant="tonal"
+            className="w-full flex justify-center mt-8 uppercase"
+          >
+            Log in
+          </Button>
+        </Link>
       </Container>
     </main>
   )
diff --git a/src/lib/helpers/toast.ts b/src/lib/helpers/toast.tsx
similarity index 56%
rename from src/lib/helpers/toast.ts
rename to src/lib/helpers/toast.tsx
index 3c1c5bee..b23490c3 100644
--- a/src/lib/helpers/toast.ts
+++ b/src/lib/helpers/toast.tsx
@@ -1,3 +1,4 @@
+import { DoneIcon, ErrorIcon } from "@/icons";
 import { toast as sonnerToast } from "sonner"
 
 export const toast = {
@@ -15,14 +16,25 @@ export const toast = {
     title: string
   }) => {
     sonnerToast.success(title, {
-      className: "bg-green-100 text-green-900",
       description,
+      duration: 10000,
+      icon: <DoneIcon color="rgb(20, 83, 45)"/>,
+      classNames: {
+        icon: "self-start pt-2",
+        toast: "items-start gap-3",
+        title: "text-md text-primary",
+      },
     })
   },
   error: ({ description, title }: { description?: string; title: string }) => {
     sonnerToast.error(title, {
-      className: "bg-red-100 text-red-900",
       description,
+      icon: <ErrorIcon color="rgb(155, 34, 25)" />,
+      classNames: {
+        icon: "self-start pt-2",
+        toast: "items-start gap-3",
+        title: "text-md text-primary"
+      }
     })
   },
 }