diff --git a/app/login/page.tsx b/app/login/page.tsx
index 331f251..f8bc4a1 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -18,6 +18,8 @@ export default function Login() {
 	const [signingUp, setSigningUp] = useState(false)
 	const [signupSuccess, setSignupSuccess] = useState(false)
 	const [showEmailForm, setShowEmailForm] = useState(false)
+	const [resettingPassword, setResettingPassword] = useState(false)
+	const [passwordResetSuccess, setPasswordResetSuccess] = useState(false)
 	const router = useRouter()
 
 	useEffect(() => {
@@ -211,11 +213,47 @@ export default function Login() {
 	const handleBackClick = () => {
 		setError(null)
 		setShowEmailForm(false)
+		setPasswordResetSuccess(false)
 	}
 
 	const handleContinueEmailClick = () => {
 		setError(null)
 		setShowEmailForm(true)
+		setPasswordResetSuccess(false)
+	}
+
+	const handleForgotPassword = async (e: React.MouseEvent<HTMLButtonElement>) => {
+		e.preventDefault()
+		setError(null)
+
+		if (!email.trim()) {
+			setError("Please enter your email")
+			return
+		}
+
+		try {
+			setResettingPassword(true)
+
+			// Preserve `redirect` so after password reset + sign in we land back where the user started.
+			const searchParams = new URLSearchParams(window.location.search)
+			const redirectParam = searchParams.get("redirect")
+
+			const redirectTo = redirectParam
+				? `${window.location.origin}/reset-password?redirect=${encodeURIComponent(redirectParam)}`
+				: `${window.location.origin}/reset-password`
+
+			const { error: resetError } = await supabaseClient.auth.resetPasswordForEmail(email, {
+				redirectTo
+			})
+
+			if (resetError) throw resetError
+
+			setPasswordResetSuccess(true)
+		} catch (err: any) {
+			setError(err?.message || "Failed to send password reset email")
+		} finally {
+			setResettingPassword(false)
+		}
 	}
 
 	return (
@@ -240,67 +278,92 @@ export default function Login() {
 							{error && <ErrorMessage>{error}</ErrorMessage>}
 
 							{showEmailForm ? (
-								<EmailForm
-									onSubmit={(e) => {
-										e.preventDefault()
-										handleEmailSignIn(e)
-									}}
-								>
-									<InputGroup>
-										<TextInput
-											type="email"
-											variant="secondary"
-											size="default"
-											value={email}
-											onChange={(e) => setEmail(e.target.value)}
-											placeholder="Email"
-											required
-											disabled={signingIn || signingUp}
-										/>
-									</InputGroup>
-									<InputGroup>
-										<TextInput
-											type="password"
-											variant="secondary"
-											size="default"
-											value={password}
-											onChange={(e) => setPassword(e.target.value)}
-											placeholder="Password"
-											required
-											minLength={6}
-											disabled={signingIn || signingUp}
+								passwordResetSuccess ? (
+									<SuccessContainer>
+										<SuccessMessage
+											title="Check your email"
+											message="We've sent you a password reset link. Follow the instructions to choose a new password."
 										/>
-										<PasswordHelpText>Password must be at least 6 characters</PasswordHelpText>
-									</InputGroup>
-									<ButtonWrapper>
-										<Button
-											type="submit"
-											size="default"
-											variant="primary"
-											disabled={signingIn || signingUp || !email || !password}
-										>
-											{signingIn ? "Signing in..." : "Sign In"}
-										</Button>
-										<Button
-											type="button"
-											size="default"
-											variant="secondary"
-											disabled={signingIn || signingUp || !email || !password}
-											onClick={(e) => {
-												if (e) {
-													e.preventDefault()
-													e.stopPropagation()
+										<BackButton type="button" onClick={handleBackClick}>
+											← Back to sign in options
+										</BackButton>
+									</SuccessContainer>
+								) : (
+									<EmailForm
+										onSubmit={(e) => {
+											e.preventDefault()
+											handleEmailSignIn(e)
+										}}
+									>
+										<InputGroup>
+											<TextInput
+												type="email"
+												variant="secondary"
+												size="default"
+												value={email}
+												onChange={(e) => setEmail(e.target.value)}
+												placeholder="Email"
+												required
+												disabled={signingIn || signingUp || resettingPassword}
+											/>
+										</InputGroup>
+										<InputGroup>
+											<TextInput
+												type="password"
+												variant="secondary"
+												size="default"
+												value={password}
+												onChange={(e) => setPassword(e.target.value)}
+												placeholder="Password"
+												required
+												minLength={6}
+												disabled={signingIn || signingUp || resettingPassword}
+											/>
+											<PasswordHelpText>Password must be at least 6 characters</PasswordHelpText>
+										</InputGroup>
+										<ButtonWrapper>
+											<Button
+												type="submit"
+												size="default"
+												variant="primary"
+												disabled={
+													signingIn || signingUp || resettingPassword || !email || !password
+												}
+											>
+												{signingIn ? "Signing in..." : "Sign In"}
+											</Button>
+											<Button
+												type="button"
+												size="default"
+												variant="secondary"
+												disabled={
+													signingIn || signingUp || resettingPassword || !email || !password
 												}
-												handleEmailSignUp(e!)
-											}}
+												onClick={(e) => {
+													if (e) {
+														e.preventDefault()
+														e.stopPropagation()
+													}
+													handleEmailSignUp(e!)
+												}}
+											>
+												{signingUp ? "Signing up..." : "Sign Up"}
+											</Button>
+										</ButtonWrapper>
+
+										<ForgotPasswordButton
+											type="button"
+											onClick={handleForgotPassword}
+											disabled={resettingPassword || signingIn || signingUp || !email}
 										>
-											{signingUp ? "Signing up..." : "Sign Up"}
-										</Button>
-									</ButtonWrapper>
-									<BackButton type="button" onClick={handleBackClick}>
-										← Back to sign in options
-									</BackButton>
-								</EmailForm>
+											Forgot password?
+										</ForgotPasswordButton>
+
+										<BackButton type="button" onClick={handleBackClick}>
+											← Back to sign in options
+										</BackButton>
+									</EmailForm>
+								)
 							) : (
 								<ButtonContainer>
 									<Button onClick={handleLogin("google")} size="default" variant="primary">
@@ -431,3 +494,25 @@ const BackButton = styled.button`
 		color: rgba(255, 255, 255, 0.9);
 	}
 `
+
+const ForgotPasswordButton = styled.button`
+	background: none;
+	border: none;
+	color: rgba(255, 255, 255, 0.6);
+	cursor: pointer;
+	padding: 0;
+	margin-top: -0.5rem;
+	font-size: 0.875rem;
+	transition: color 0.2s ease;
+	font-family: inherit;
+	text-align: right;
+
+	&:hover:not(:disabled) {
+		color: rgba(255, 255, 255, 0.9);
+	}
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+`
diff --git a/app/reset-password/page.tsx b/app/reset-password/page.tsx
new file mode 100644
index 0000000..92164b6
--- /dev/null
+++ b/app/reset-password/page.tsx
@@ -0,0 +1,211 @@
+"use client"
+import styled from "styled-components"
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { supabaseClient } from "../../lib/supabaseClient"
+import { PotionBackground } from "../components/PotionBackground"
+import { Button } from "../components/Button"
+import { PageContainer } from "../components/PageContainer"
+import { TextInput } from "../components/TextInput"
+import { SuccessMessage } from "../components/SuccessMessage"
+
+export default function ResetPasswordPage() {
+	const [loading, setLoading] = useState(true)
+	const [saving, setSaving] = useState(false)
+	const [success, setSuccess] = useState(false)
+	const [error, setError] = useState<string | null>(null)
+	const [password, setPassword] = useState("")
+	const [confirmPassword, setConfirmPassword] = useState("")
+	const router = useRouter()
+
+	useEffect(() => {
+		const checkRecoverySession = async () => {
+			const {
+				data: { session }
+			} = await supabaseClient.auth.getSession()
+
+			if (!session?.user) {
+				setError("Password reset link is invalid or has expired. Please request a new one.")
+			}
+
+			setLoading(false)
+		}
+
+		checkRecoverySession()
+	}, [])
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault()
+		setError(null)
+
+		if (!password || !confirmPassword) {
+			setError("Please fill in both password fields.")
+			return
+		}
+
+		if (password !== confirmPassword) {
+			setError("Passwords do not match.")
+			return
+		}
+
+		try {
+			setSaving(true)
+			const { error: updateError } = await supabaseClient.auth.updateUser({ password })
+			if (updateError) throw updateError
+			setSuccess(true)
+		} catch (err: any) {
+			setError(err?.message || "Failed to update password.")
+		} finally {
+			setSaving(false)
+		}
+	}
+
+	const handleBackToLogin = async () => {
+		// Recovery + updateUser leaves a valid session; /login auto-redirects if a session exists.
+		await supabaseClient.auth.signOut()
+		const searchParams = new URLSearchParams(window.location.search)
+		const redirectParam = searchParams.get("redirect")
+		const loginUrl = redirectParam
+			? `/login?redirect=${encodeURIComponent(redirectParam)}`
+			: "/login"
+		router.push(loginUrl)
+	}
+
+	if (loading) {
+		return (
+			<>
+				<BackgroundContainer>
+					<PotionBackground />
+				</BackgroundContainer>
+				<Container>
+					<PageContainer alignItems="center">
+						<Title>Reset Password</Title>
+						<Subtitle>Loading...</Subtitle>
+					</PageContainer>
+				</Container>
+			</>
+		)
+	}
+
+	return (
+		<>
+			<BackgroundContainer>
+				<PotionBackground />
+			</BackgroundContainer>
+			<Container>
+				<PageContainer alignItems="center">
+					<Title>Reset Password</Title>
+					<Subtitle>Choose a new password for your account</Subtitle>
+
+					{error && <ErrorMessage>{error}</ErrorMessage>}
+
+					{success ? (
+						<SuccessContainer>
+							<SuccessMessage
+								title="Password updated"
+								message="Your password has been reset. You can now sign in with your new password."
+							/>
+							<Button type="button" variant="primary" size="default" onClick={handleBackToLogin}>
+								Go to Sign In
+							</Button>
+						</SuccessContainer>
+					) : (
+						<Form onSubmit={handleSubmit}>
+							<InputGroup>
+								<TextInput
+									type="password"
+									variant="secondary"
+									size="default"
+									value={password}
+									onChange={(e) => setPassword(e.target.value)}
+									placeholder="New password"
+									required
+									minLength={6}
+									disabled={saving}
+								/>
+							</InputGroup>
+							<InputGroup>
+								<TextInput
+									type="password"
+									variant="secondary"
+									size="default"
+									value={confirmPassword}
+									onChange={(e) => setConfirmPassword(e.target.value)}
+									placeholder="Confirm new password"
+									required
+									minLength={6}
+									disabled={saving}
+								/>
+							</InputGroup>
+							<Button type="submit" size="default" variant="primary" disabled={saving}>
+								{saving ? "Updating..." : "Update Password"}
+							</Button>
+						</Form>
+					)}
+				</PageContainer>
+			</Container>
+		</>
+	)
+}
+
+const BackgroundContainer = styled.section`
+	background-color: #0a0a0a;
+	position: fixed;
+	height: 100vh;
+	width: 100vw;
+	top: 0;
+	left: 0;
+	z-index: -1;
+`
+
+const Container = styled.main`
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+`
+
+const Title = styled.h1`
+	font-size: 2rem;
+	font-weight: 700;
+	color: white;
+	margin: 0;
+`
+
+const Subtitle = styled.p`
+	color: rgba(255, 255, 255, 0.7);
+	margin: -1rem 0 0 0;
+	text-align: center;
+`
+
+const Form = styled.form`
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	width: 100%;
+`
+
+const InputGroup = styled.div`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: 0.5rem;
+`
+
+const ErrorMessage = styled.div`
+	color: #ff6b6b;
+	background-color: rgba(255, 107, 107, 0.1);
+	padding: 0.75rem;
+	border-radius: 0.5rem;
+	font-size: 0.875rem;
+	text-align: center;
+	width: 100%;
+`
+
+const SuccessContainer = styled.div`
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	width: 100%;
+`
diff --git a/supabase/config.toml b/supabase/config.toml
index 1a0ac13..8f870e0 100644
--- a/supabase/config.toml
+++ b/supabase/config.toml
@@ -123,11 +123,18 @@ enabled = true
 site_url = "https://devx.network"
 # A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
 additional_redirect_urls = [
+	"http://localhost:3000",
+	"http://localhost:3000/login",
+	"http://localhost:3000/reset-password",
+	"http://127.0.0.1:3000",
+	"http://127.0.0.1:3000/login",
+	"http://127.0.0.1:3000/reset-password",
 	"https://127.0.0.1:3000",
 	"http://192.168.1.93:3000",
 	"https://192.168.1.93:3000",
 	"https://devx.network",
-	"https://devx.network/login"
+	"https://devx.network/login",
+	"https://devx.network/reset-password"
 ]
 # How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
 jwt_expiry = 3600
@@ -206,6 +213,10 @@ otp_expiry = 3600
 # subject = "You have been invited"
 # content_path = "./supabase/templates/invite.html"
 
+[auth.email.template.recovery]
+subject = "Reset Your Password"
+content_path = "./email-templates/reset-password-email.html"
+
 # Uncomment to customize notification email template
 # [auth.email.notification.password_changed]
 # enabled = true