diff --git a/platform/api/src/api/v1/gql/mutations/auth.rs b/platform/api/src/api/v1/gql/mutations/auth.rs
index e5e4c5e3c..50c8fc159 100644
--- a/platform/api/src/api/v1/gql/mutations/auth.rs
+++ b/platform/api/src/api/v1/gql/mutations/auth.rs
@@ -83,12 +83,12 @@ impl AuthMutation {
         .bind(user.id)
         .bind(!user.totp_enabled)
         .bind(expires_at)
-        .fetch_one(&mut *tx)
+        .fetch_one(tx.as_mut())
         .await?;
 
         sqlx::query("UPDATE users SET last_login_at = NOW() WHERE id = $1")
             .bind(user.id)
-            .execute(&mut *tx)
+            .execute(tx.as_mut())
             .await?;
 
         tx.commit().await?;
diff --git a/platform/api/src/api/v1/gql/mutations/user.rs b/platform/api/src/api/v1/gql/mutations/user.rs
index 3c030f157..39e53498b 100644
--- a/platform/api/src/api/v1/gql/mutations/user.rs
+++ b/platform/api/src/api/v1/gql/mutations/user.rs
@@ -3,6 +3,7 @@ use bytes::Bytes;
 use prost::Message;
 
 use crate::api::middleware::auth::AuthError;
+use crate::api::v1::gql::validators::PasswordValidator;
 use crate::{
     api::v1::gql::{
         error::{GqlError, Result, ResultExt},
@@ -148,6 +149,59 @@ impl UserMutation {
         Ok(user.into())
     }
 
+    async fn password<'ctx>(
+        &self,
+        ctx: &Context<'_>,
+        #[graphql(desc = "Current password")] current_password: String,
+        #[graphql(desc = "New password", validator(custom = "PasswordValidator"))]
+        new_password: String,
+    ) -> Result<User> {
+        let global = ctx.get_global();
+        let request_context = ctx.get_req_context();
+
+        let auth = request_context
+            .auth()
+            .await?
+            .ok_or(GqlError::Auth(AuthError::NotLoggedIn))?;
+
+        let user = global
+            .user_by_id_loader
+            .load(auth.session.user_id.0)
+            .await
+            .map_err_gql("failed to fetch user")?
+            .map_err_gql(GqlError::NotFound("user"))?;
+
+        if !user.verify_password(&current_password) {
+            return Err(GqlError::InvalidInput {
+                fields: vec!["password"],
+                message: "wrong password",
+            }
+            .into());
+        }
+
+        let mut tx = global.db.begin().await?;
+
+        let user: database::User =
+            sqlx::query_as("UPDATE users SET password_hash = $1 WHERE id = $2 RETURNING *")
+                .bind(database::User::hash_password(&new_password))
+                .bind(user.id)
+                .fetch_one(tx.as_mut())
+                .await?;
+
+        // Delete all sessions except current
+        sqlx::query("DELETE FROM user_sessions WHERE user_id = $1 AND id != $2")
+            .bind(user.id)
+            .bind(auth.session.id)
+            .execute(tx.as_mut())
+            .await?;
+
+        // TODO: Logout active connections
+
+        tx.commit().await?;
+
+        Ok(user.into())
+    }
+
     /// Follow or unfollow a user.
     async fn follow<'ctx>(
         &self,
diff --git a/platform/website/src/assets/styles/global.scss b/platform/website/src/assets/styles/global.scss
index 2131ecc4d..8b3d03793 100644
--- a/platform/website/src/assets/styles/global.scss
+++ b/platform/website/src/assets/styles/global.scss
@@ -84,11 +84,8 @@ input[type="password"] {
 		border-color: $primaryColor;
 	}
 
-	&:not(:focus) {
-		&.invalid,
-		&:invalid {
-			border-color: $errorColor;
-		}
+	&:not(:focus).invalid {
+		border-color: $errorColor;
 	}
 }
 
diff --git a/platform/website/src/assets/styles/settings.scss b/platform/website/src/assets/styles/settings.scss
index b70867bb8..324172f4e 100644
--- a/platform/website/src/assets/styles/settings.scss
+++ b/platform/website/src/assets/styles/settings.scss
@@ -1,18 +1,5 @@
 @import "./variables.scss";
 
-.message {
-	font-size: 0.9rem;
-	font-weight: 500;
-
-	&.error {
-		color: $errorColor;
-	}
-
-	&.success {
-		color: $successColor;
-	}
-}
-
 .input {
 	margin-top: 0.5rem;
 	background-color: $bgColor2;
@@ -52,7 +39,3 @@
 		gap: 0.5rem;
 	}
 }
-
-input.input.invalid:not(:focus) {
-	border-color: $errorColor;
-}
diff --git a/platform/website/src/components/auth/auth-dialog.svelte b/platform/website/src/components/auth/auth-dialog.svelte
index ae213bb47..925e43af6 100644
--- a/platform/website/src/components/auth/auth-dialog.svelte
+++ b/platform/website/src/components/auth/auth-dialog.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
-	import { onDestroy } from "svelte";
 	import { Turnstile } from "svelte-turnstile";
 	import { AuthDialog, authDialog, session } from "$/store/auth";
-	import LoginField, { newField } from "$/components/auth/field.svelte";
 	import { z } from "zod";
 	import { getContextClient } from "@urql/svelte";
 	import { graphql } from "$gql";
 	import { PUBLIC_CF_TURNSTILE_KEY } from "$env/static/public";
 	import Dialog from "../dialog.svelte";
 	import SolveTwoFaDialog from "./solve-two-fa-dialog.svelte";
+	import { FieldStatusType, type FieldStatus, resetAllFields } from "../form/field.svelte";
+	import Field from "$/components/form/field.svelte";
+	import PasswordField from "../form/password-field.svelte";
+	import { fieldsValid, passwordValidate } from "$/lib/utils";
 
 	const client = getContextClient();
 
@@ -48,262 +50,105 @@
 	let turnstileToken = "";
 	let loggingIn = false;
 
-	let username = newField({
-		id: "username",
-		type: "text",
-		label: "Username",
-		autoComplete: "username",
-		extra: {
-			timeout: undefined as NodeJS.Timeout | undefined,
-		},
-		reload() {
-			username.touched = username.value.length > 0;
-
-			if ($authDialog === AuthDialog.Login) {
-				username.message = "";
-				username.status = "";
-			}
-
-			if (username.touched) {
-				username.update(username.value);
-			}
-		},
-		update(value) {
-			username.value = value;
+	$: $authDialog, resetAllFields();
 
-			// We clear the timeout so that we dont send a request to the server on every character change.
-			clearTimeout(username.extra.timeout);
+	let usernameValue: string;
+	let usernameStatus: FieldStatus;
+	let usernameValidationTimeout: number | NodeJS.Timeout;
+	let rejectValidation: () => void;
+	async function usernameValidate(v: string) {
+		globalMessage = "";
+		if ($authDialog === AuthDialog.Login) {
+			return { type: FieldStatusType.Success };
+		}
 
-			// When we are in login mode, we dont need to validate the username.
-			if ($authDialog !== AuthDialog.Register) {
-				return;
-			}
+		clearTimeout(usernameValidationTimeout);
+		if (rejectValidation) {
+			rejectValidation();
+		}
 
-			const valid = z
-				.string()
-				.min(3, "Minimum of 3 characters")
-				.max(20, "Maximum of 20 characters")
-				.regex(/^[a-zA-Z0-9_]*$/, "Username can only contain letters, numbers, and underscores")
-				.safeParse(username.value);
-			if (!valid.success) {
-				username.status = "error";
-				username.message = valid.error.issues[0].message;
-				return;
-			}
+		const valid = z
+			.string()
+			.min(3, "Minimum of 3 characters")
+			.max(20, "Maximum of 20 characters")
+			.regex(/^[a-zA-Z0-9_]*$/, "Username can only contain letters, numbers, and underscores")
+			.safeParse(v);
+		if (!valid.success) {
+			return { type: FieldStatusType.Error, message: valid.error.issues[0].message };
+		}
 
-			username.message = "Hold on while we check if this username is available...";
-			username.status = "loading";
-
-			// This is known as a debouncer.
-			// We dont want to send a request to the server on every character change.
-			// Instead we wait 200ms after the user stops typing before sending the request.
-			username.extra.timeout = setTimeout(async () => {
-				const result = await client
-					.query(
-						graphql(`
-							query CheckUsername($username: String!) {
-								user {
-									user: byUsername(username: $username) {
-										id
-									}
-								}
+		usernameStatus = {
+			type: FieldStatusType.Loading,
+			message: "Hold on while we check if this username is available...",
+		};
+
+		// Wait 500 milliseconds before checking the username. This prevents spamming the server with requests.
+		await new Promise((resolve, reject) => {
+			rejectValidation = reject;
+			usernameValidationTimeout = setTimeout(resolve, 500);
+		});
+
+		const result = await client
+			.query(
+				graphql(`
+					query CheckUsername($username: String!) {
+						user {
+							user: byUsername(username: $username) {
+								id
 							}
-						`),
-						{ username: username.value },
-						{
-							requestPolicy: "network-only",
-						},
-					)
-					.toPromise();
-
-				if (result.error) {
-					username.status = "error";
-					username.message = "Something went wrong.";
-					return;
-				}
-
-				if (result.data?.user.user?.id) {
-					username.status = "error";
-					username.message = "This username is already taken";
-					return;
-				}
-
-				username.status = "success";
-				username.message = "";
-			}, 200);
-		},
-		valid() {
-			// We cannot refer to the value stored at `username.value` directly here since we are using it to return a value.
-			// This causes typescript to complain that the value is referenced in the value definition.
-			// To get around this we need to unfortunately cast the value to a string so that typescript knows it is a string before the value `username` value is defined.
-			// This is safe since we know that the value is a string.
-			const value = username.value as string;
-			const status = username.status as string;
-
-			if ($authDialog === AuthDialog.Login) {
-				return value.length > 0;
-			}
-
-			return status === "success";
-		},
-		validate(value) {
-			// This is on character change validation (not on submit)
-			return z
-				.string()
-				.regex(/^[a-zA-Z0-9_]*$/, "Username can only contain letters, numbers, and underscores")
-				.safeParse(value).success;
-		},
-	});
-
-	let email = newField({
-		id: "email",
-		type: "email",
-		label: "Email",
-		autoComplete: "email",
-		reload() {
-			email.touched = email.value.length > 0;
-			if (email.touched) {
-				email.update(email.value);
-			}
-		},
-		update(value) {
-			email.value = value;
-
-			if ($authDialog !== AuthDialog.Register) {
-				return;
-			}
-
-			const valid = z.string().email("Please enter a valid email").safeParse(email.value);
-			if (!valid.success) {
-				email.status = "error";
-				email.message = valid.error.issues[0].message;
-				return;
-			}
-
-			email.status = "success";
-			email.message = "";
-		},
-		valid() {
-			const status = email.status as string;
-			return status === "success";
-		},
-	});
-
-	let password = newField({
-		id: "password",
-		type: "password",
-		label: "Password",
-		reload() {
-			password.touched = password.value.length > 0;
-			password.status = "";
-			password.message = "";
-
-			password.autoComplete =
-				$authDialog === AuthDialog.Login ? "current-password" : "new-password";
-
-			password.update(password.value);
-		},
-		update(value) {
-			password.value = value;
-
-			// When we are in login mode, we dont need to validate the password.
-			if ($authDialog !== AuthDialog.Register) {
-				return;
-			}
-
-			// Since the validity of confirm password depends on the password, we need to cause a re-render of the confirm password field.
-			confirmPassword.update(confirmPassword.value);
-
-			const valid = z
-				.string()
-				.min(8, "At least 8 characters")
-				.max(100, "Maximum of 100 characters")
-				.regex(/.*[A-Z].*/, "At least one uppercase character")
-				.regex(/.*[a-z].*/, "At least one lowercase character")
-				.regex(/.*\d.*/, "At least one number")
-				.regex(/.*[`~<>?,./!@#$%^&*()\-_+="'|{}[\];:].*/, "At least one special character")
-				.safeParse(value);
-
-			if (!valid.success) {
-				password.status = "error";
-				password.message = valid.error.issues[0].message;
-				return;
-			}
+						}
+					}
+				`),
+				{ username: v },
+				{
+					requestPolicy: "network-only",
+				},
+			)
+			.toPromise();
 
-			password.status = "success";
-			password.message = "";
-		},
-		valid() {
-			const value = password.value as string;
-			const status = password.status as string;
+		if (result.error) {
+			return { type: FieldStatusType.Error, message: "Something went wrong." };
+		}
 
-			if ($authDialog === AuthDialog.Login) {
-				return value.length > 0;
-			}
+		if (result.data?.user.user?.id) {
+			return { type: FieldStatusType.Error, message: "This username is already taken" };
+		}
 
-			return status === "success";
-		},
-	});
-
-	let confirmPassword = newField({
-		id: "confirmPassword",
-		type: "password",
-		label: "Confirm Password",
-		autoComplete: "new-password",
-		reload() {
-			confirmPassword.touched = confirmPassword.value.length > 0;
-			confirmPassword.status = "";
-			confirmPassword.message = "";
-		},
-		update(value) {
-			confirmPassword.value = value;
-
-			if ($authDialog !== AuthDialog.Register) {
-				return;
-			}
+		return { type: FieldStatusType.Success };
+	}
 
-			if (password.value !== confirmPassword.value) {
-				confirmPassword.status = "error";
-				confirmPassword.message = "Passwords do not match";
-				return;
-			}
+	let emailStatus: FieldStatus;
+	let emailValue: string;
+	async function emailValidate(v: string) {
+		globalMessage = "";
+		const valid = z.string().email("Please enter a valid email").safeParse(v);
+		return valid.success
+			? { type: FieldStatusType.Success }
+			: { type: FieldStatusType.Error, message: valid.error.issues[0].message };
+	}
 
-			if (confirmPassword.value.length === 0) {
-				confirmPassword.status = "";
-				confirmPassword.message = "";
-				return;
-			}
+	let passwordStatus: FieldStatus;
+	let passwordValue: string;
+	async function authPasswordValidate(v: string) {
+		globalMessage = "";
+		return await passwordValidate(v);
+	}
 
-			confirmPassword.status = "success";
-			confirmPassword.message = "";
-		},
-		valid() {
-			const status = confirmPassword.status as string;
+	let confirmPasswordStatus: FieldStatus;
+	async function confirmPasswordValidate(v: string) {
+		globalMessage = "";
+		if (passwordValue !== v) {
+			return { type: FieldStatusType.Error, message: "Passwords do not match" };
+		}
 
-			return status === "success";
-		},
-	});
+		return { type: FieldStatusType.Success };
+	}
 
 	$: formValid =
+		turnstileToken.length > 0 &&
 		($authDialog === AuthDialog.Login
-			? username.valid() && password.valid()
-			: username.valid() && email.valid() && password.valid() && confirmPassword.valid()) &&
-		turnstileToken.length > 0;
-
-	// When the login mode changes we need to reload the fields.
-	// This is because the fields have specific logic for each mode.
-	let unsubscribe = authDialog.subscribe((m) => {
-		if (m === AuthDialog.Closed) {
-			return;
-		}
-
-		username.reload();
-		email.reload();
-		password.reload();
-		confirmPassword.reload();
-	});
-
-	onDestroy(unsubscribe);
+			? fieldsValid([usernameStatus, passwordStatus])
+			: fieldsValid([usernameStatus, emailStatus, passwordStatus, confirmPasswordStatus]));
 
 	function closeDialog() {
 		$authDialog = AuthDialog.Closed;
@@ -332,17 +177,17 @@
 				? {
 						query: loginQuery,
 						variables: {
-							username: username.value,
-							password: password.value,
+							username: usernameValue,
+							password: passwordValue,
 							captchaToken: turnstileToken,
 						},
 				  }
 				: {
 						query: registerQuery,
 						variables: {
-							username: username.value,
-							password: password.value,
-							email: email.value,
+							username: usernameValue,
+							password: passwordValue,
+							email: emailValue,
 							captchaToken: turnstileToken,
 						},
 				  };
@@ -361,14 +206,11 @@
 				globalMessage = `${error.extensions.reason || error.message}`;
 				for (const field of fields) {
 					if (field === "username") {
-						username.status = "error";
-						username.message = "";
+						usernameStatus = { type: FieldStatusType.Error };
 					} else if (field === "password") {
-						password.status = "error";
-						password.message = "";
+						passwordStatus = { type: FieldStatusType.Error };
 					} else if (field === "email") {
-						email.status = "error";
-						email.message = "";
+						emailStatus = { type: FieldStatusType.Error };
 					} else if (field == "captchaToken") {
 						turnstileToken = "";
 					}
@@ -446,15 +288,44 @@
 			</h2>
 		</div>
 		<form on:submit|preventDefault={onSubmit}>
-			<LoginField field={username} />
+			<Field
+				type="text"
+				autocomplete="username"
+				required
+				label="Username"
+				bind:status={usernameStatus}
+				bind:value={usernameValue}
+				validate={usernameValidate}
+			/>
 			{#if $authDialog === AuthDialog.Register}
-				<LoginField field={email} />
+				<Field
+					type="email"
+					autocomplete="email"
+					required
+					label="Email"
+					bind:status={emailStatus}
+					bind:value={emailValue}
+					validate={emailValidate}
+				/>
 			{/if}
-			<LoginField field={password} />
+			<PasswordField
+				autocomplete={$authDialog === AuthDialog.Login ? "current-password" : "new-password"}
+				required
+				label="Password"
+				bind:status={passwordStatus}
+				bind:value={passwordValue}
+				validate={authPasswordValidate}
+			/>
 			{#if $authDialog === AuthDialog.Register}
-				<LoginField field={confirmPassword} />
+				<PasswordField
+					autocomplete="new-password"
+					required
+					label="Confirm Password"
+					bind:status={confirmPasswordStatus}
+					validate={confirmPasswordValidate}
+				/>
 			{/if}
-			{#if globalMessage !== ""}
+			{#if globalMessage}
 				<div class="message-holder" class:error={globalIsError}>
 					<span>{globalMessage}</span>
 				</div>
@@ -527,6 +398,7 @@
 	form {
 		display: flex;
 		flex-direction: column;
+		gap: 1rem;
 	}
 
 	.button-group {
@@ -534,7 +406,6 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		margin-top: 1rem;
 	}
 
 	.button-submit {
diff --git a/platform/website/src/components/auth/field.svelte b/platform/website/src/components/auth/field.svelte
deleted file mode 100644
index 61c42904e..000000000
--- a/platform/website/src/components/auth/field.svelte
+++ /dev/null
@@ -1,344 +0,0 @@
-<script context="module" lang="ts">
-	export type StatusType = "success" | "error" | "warning" | "loading" | "";
-
-	//
-	// Field behavior
-	// 	Inside functions on the fields we cannot use `this` to refer to the field object.
-	// 	This is because the svelte compiler does not know that `this` refers to the field object,
-	//  Thus it does not detect changes to the field object and does not update the UI.
-	//  Even though we actually do mutate the same object, svelte does not detect it.
-	//  You can learn more about how svelte works here: https://svelte.dev/tutorial/updating-arrays-and-objects
-	//
-
-	export interface LoginFieldOptions<T = Record<string, never>> {
-		id?: string;
-		type?: string;
-		label?: string;
-		placeholder?: string;
-		value?: string;
-		message?: string;
-		status?: StatusType;
-		touched?: boolean;
-		extra?: T;
-		required?: boolean;
-		autoComplete?: string;
-		validate?: (this: unknown, value: string) => boolean;
-		valid?: (this: unknown) => boolean;
-		update?: (this: unknown, value: string) => void;
-		reload?: (this: unknown) => void;
-	}
-
-	export interface LoginFieldType<T = Record<string, never>> extends LoginFieldOptions<T> {
-		id: string;
-		type: string;
-		label: string;
-		required: boolean;
-		autoComplete: string;
-		placeholder: string;
-		value: string;
-		message: string;
-		status: StatusType;
-		touched: boolean;
-		extra: T;
-		// Defining `this: unknown` causes typescript to get mad when we use `this` inside the function.
-		// This is because `this` is not actually `unknown` but is the field object. However we should discourage the use of `this` inside the functions,
-		// Since it creates undefined behavior as explained above.
-		validate: (this: unknown, value: string) => boolean;
-		valid: (this: unknown) => boolean;
-		update: (this: unknown, value: string) => void;
-		reload: (this: unknown) => void;
-	}
-
-	export function newField<T = Record<string, never>>(
-		props: LoginFieldOptions<T>,
-	): LoginFieldType<T> {
-		return {
-			id: props.id || "",
-			type: props.type || "text",
-			label: props.label || "",
-			autoComplete: props.autoComplete || "off",
-			required: props.required || false,
-			placeholder: props.placeholder || "",
-			value: props.value || "",
-			message: props.message || "",
-			status: props.status || "",
-			touched: props.touched || false,
-			extra: props.extra || ({} as T),
-			validate: props.validate || (() => true),
-			valid: props.valid || (() => true),
-			// eslint-disable-next-line @typescript-eslint/no-empty-function
-			update: props.update || (() => {}),
-			// eslint-disable-next-line @typescript-eslint/no-empty-function
-			reload: props.reload || (() => {}),
-		};
-	}
-</script>
-
-<script lang="ts">
-	import Fa from "svelte-fa";
-	import {
-		faCircleNotch,
-		faCheck,
-		faTriangleExclamation,
-		faXmark,
-		faEyeSlash,
-		faEye,
-	} from "@fortawesome/free-solid-svg-icons";
-
-	// This is safe becasuse we never access the extra field to which the type is templated.
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let field: LoginFieldType<any>;
-
-	let oldValue = "";
-	let value = field.value;
-	let passwordVisible = false;
-	let inputEl: HTMLInputElement;
-
-	$: {
-		// This branch is true when the user enters data into the field.
-		if (oldValue !== value) {
-			let invalidFirstTouch = false;
-
-			if (!field.validate(value)) {
-				value = oldValue;
-				invalidFirstTouch = !field.touched;
-				field.touched = true;
-			}
-
-			if (value.length > 0) {
-				field.touched = true;
-			}
-
-			if ((field.touched && value !== oldValue) || invalidFirstTouch) {
-				field.update(value);
-				oldValue = value;
-			}
-		} else if (field.value !== value) {
-			// This branch is true when the field is updated from the outside.
-			value = field.value;
-		}
-	}
-
-	// Svelte does not allow 2 way binding on input type, so we have to do it manually.
-	function useType(node: HTMLInputElement) {
-		node.type = field.type === "password" ? (passwordVisible ? "text" : "password") : field.type;
-	}
-
-	// When the user clicks the password visibility toggle, we toggle the password visibility.
-	// Only called when type is password.
-	function togglePasswordVisible() {
-		passwordVisible = !passwordVisible;
-		useType(inputEl);
-	}
-</script>
-
-<div class={"form-group " + (field.touched ? field.status : "")}>
-	<label for={field.id}>{field.label}</label>
-	<!-- This wrapper allows for relative CSS positioning -->
-	<div class="input-group">
-		<input
-			id={field.id}
-			placeholder={field.placeholder}
-			autocomplete={field.autoComplete}
-			required={field.required}
-			bind:value
-			use:useType
-			bind:this={inputEl}
-			aria-invalid={field.touched && field.status === "error"}
-			aria-errormessage="{field.id}-message"
-		/>
-		<!-- This wrapper is absolute and relative to the input field and it makes it easy to do CSS positioning -->
-		<div class="field-inliner">
-			<!-- Only render the password visibility toggle if the type is password -->
-			{#if field.type === "password"}
-				<button
-					class="password-visible"
-					on:click={togglePasswordVisible}
-					tabindex="-1"
-					type="button"
-				>
-					{#if passwordVisible}
-						<Fa icon={faEyeSlash} />
-					{:else}
-						<Fa icon={faEye} />
-					{/if}
-				</button>
-			{/if}
-			<!-- Only render the status icon if the field has been touched, otherwise on first load everything will be of type "error" -->
-			<!-- Touched only happens when the value has been modified once -->
-			{#if field.touched}
-				{#if field.status === "loading"}
-					<div class="input-status">
-						<Fa icon={faCircleNotch} spin />
-					</div>
-				{:else if field.status === "success"}
-					<div class="input-status">
-						<Fa icon={faCheck} />
-					</div>
-				{:else if field.status === "error"}
-					<div class="input-status">
-						<Fa icon={faXmark} />
-					</div>
-				{:else if field.status === "warning"}
-					<div class="input-status">
-						<Fa icon={faTriangleExclamation} />
-					</div>
-				{/if}
-			{/if}
-		</div>
-	</div>
-	<!-- We don't conditionally render here because we want smooth animations, so we just toggle visibility with some "hidden" text -->
-	<span id="{field.id}-message" class="message" class:visible={!!field.message && field.touched}
-		>{field.touched && (field.message || "hidden")}</span
-	>
-</div>
-
-<style lang="scss">
-	@import "../../assets/styles/variables.scss";
-
-	.form-group {
-		font-family: inherit;
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		margin-bottom: 1rem;
-		text-align: left;
-
-		label {
-			margin-bottom: 0.5rem;
-			opacity: 85%;
-		}
-
-		&.success {
-			input {
-				border-color: $successColor !important;
-				background-color: black;
-			}
-
-			.message {
-				color: $successColorDark;
-			}
-
-			.input-status {
-				color: $successColor;
-			}
-		}
-
-		&.error {
-			input {
-				border-color: $errorColor !important;
-				background-color: black;
-			}
-
-			.message {
-				color: $errorColorDark;
-			}
-
-			.input-status {
-				color: $errorColor;
-			}
-		}
-
-		&.warning {
-			input {
-				border-color: $warningColor !important;
-				background-color: black;
-			}
-
-			.message {
-				color: $warningColorDark;
-			}
-
-			.input-status {
-				color: $warningColor;
-			}
-		}
-
-		&.loading {
-			input {
-				border-color: $loadingColor !important;
-				background-color: black;
-			}
-
-			.message {
-				color: $loadingColor;
-			}
-
-			.input-status {
-				color: $loadingColor;
-			}
-		}
-
-		input {
-			font-family: inherit;
-			padding: 0.5rem;
-			border-radius: 0.25rem;
-			outline: 1px solid $borderColor;
-			background-color: $bgColor2;
-			border: 2px solid transparent;
-			box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.15);
-			transition: border-color 0.25s ease-in-out;
-			width: 100%;
-
-			color: $textColor;
-
-			&:hover,
-			&:focus-visible {
-				border-color: $borderColor;
-			}
-
-			&:focus {
-				background-color: black;
-				border-color: $primaryColor;
-				box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-			}
-		}
-
-		.message {
-			margin-top: 0.1rem;
-			font-size: 0.9rem;
-			color: $textColorLight;
-			max-height: 0;
-			overflow: hidden;
-			transition: max-height 0.25s ease;
-			visibility: hidden;
-			&.visible {
-				visibility: visible;
-				max-height: 1rem;
-			}
-		}
-
-		.input-group {
-			position: relative;
-			width: 100%;
-		}
-
-		.field-inliner {
-			position: absolute;
-			right: 0;
-			top: 0;
-			z-index: 1;
-			display: flex;
-			font-size: 1rem;
-			padding: 0 0.5rem;
-		}
-
-		.input-status {
-			font-size: 1.25em;
-			padding: 0.25rem 0;
-			margin-top: 0.1em;
-			margin-left: 0.25rem;
-		}
-
-		.password-visible {
-			background-color: transparent;
-			padding: 0.5rem 0;
-			color: rgba(255, 255, 255, 0.35);
-			border: 0;
-			z-index: 1;
-			font: inherit;
-			margin: 0;
-			width: 1.5rem;
-		}
-	}
-</style>
diff --git a/platform/website/src/components/auth/solve-two-fa-dialog.svelte b/platform/website/src/components/auth/solve-two-fa-dialog.svelte
index 7eb4b9646..fec0e3a6a 100644
--- a/platform/website/src/components/auth/solve-two-fa-dialog.svelte
+++ b/platform/website/src/components/auth/solve-two-fa-dialog.svelte
@@ -1,46 +1,31 @@
 <script lang="ts">
 	import { getContextClient } from "@urql/svelte";
-	import Field, { newField } from "./field.svelte";
 	import { graphql } from "$/gql";
 	import { authDialog, session, AuthDialog } from "$/store/auth";
 	import { z } from "zod";
+	import Field, { FieldStatusType, type FieldStatus } from "../form/field.svelte";
 
 	const client = getContextClient();
 
-	const code = newField({
-		id: "code",
-		type: "text",
-		label: "Code",
-		autoComplete: "one-time-code",
-		update(value) {
-			code.value = value;
+	let codeStatus: FieldStatus;
+	let codeLabel = "Code";
+	let code: string;
+	async function codeValidate(v: string) {
+		const valid = z
+			.string()
+			.regex(/^(\d{6}|[0-9a-fA-F]{8})$/, "Invalid code")
+			.safeParse(v);
 
-			const valid = z
-				.string()
-				.regex(/^(\d{6}|[0-9a-fA-F]{8})$/, "Invalid code")
-				.safeParse(code.value);
-
-			code.label = "Code";
-			if (valid.success) {
-				code.status = "";
-				code.message = "";
-				// If it is a backup code
-				if (/^[0-9a-fA-F]{8}$/.test(code.value)) {
-					code.label = "Backup Code";
-				}
-			} else {
-				code.status = "error";
-				code.message = valid.error.issues[0].message;
-			}
-		},
-		valid() {
-			const status = code.status as string;
-			return status === "success";
-		},
-		validate(value) {
-			return /^[0-9a-fA-F]*$/.test(value);
-		},
-	});
+		codeLabel = "Code";
+		if (!valid.success) {
+			return { type: FieldStatusType.Error, message: valid.error.issues[0].message };
+		}
+		// If it is a backup code
+		if (/^[0-9a-fA-F]{8}$/.test(v)) {
+			codeLabel = "Backup Code";
+		}
+		return { type: FieldStatusType.None };
+	}
 
 	async function onSubmit() {
 		const res = await client
@@ -55,15 +40,14 @@
 						}
 					}
 				`),
-				{ code: code.value },
+				{ code: code },
 				{
 					requestPolicy: "network-only",
 				},
 			)
 			.toPromise();
 		if (res.data) {
-			code.status = "success";
-			code.message = "";
+			codeStatus = { type: FieldStatusType.Success };
 			$session = res.data.auth.resp;
 			$authDialog = AuthDialog.Closed;
 		} else if (res.error) {
@@ -72,8 +56,10 @@
 				res.error.graphQLErrors[0].extensions.fields.includes("code") &&
 				typeof res.error.graphQLErrors[0].extensions.reason === "string"
 			) {
-				code.status = "error";
-				code.message = res.error.graphQLErrors[0].extensions.reason;
+				codeStatus = {
+					type: FieldStatusType.Error,
+					message: res.error.graphQLErrors[0].extensions.reason,
+				};
 			}
 		}
 	}
@@ -85,7 +71,13 @@
 	anymore, please enter a backup code.
 </p>
 <form on:submit|preventDefault={onSubmit}>
-	<Field field={code} />
+	<Field
+		label={codeLabel}
+		autocomplete="one-time-code"
+		bind:value={code}
+		validate={codeValidate}
+		bind:status={codeStatus}
+	/>
 	<div class="button-group">
 		<input class="button-submit" type="submit" value="Submit" />
 	</div>
diff --git a/platform/website/src/components/form/field.svelte b/platform/website/src/components/form/field.svelte
new file mode 100644
index 000000000..07b5e87fd
--- /dev/null
+++ b/platform/website/src/components/form/field.svelte
@@ -0,0 +1,249 @@
+<script context="module" lang="ts">
+	let fieldCounter = 0;
+
+	export enum FieldStatusType {
+		None = "",
+		Success = "success",
+		Error = "error",
+		Warning = "warning",
+		Loading = "loading",
+	}
+
+	export type FieldStatus = { type: FieldStatusType; message?: string };
+
+	let resetFns: { [key: number]: () => void } = {};
+
+	export function resetAllFields() {
+		for (let reset of Object.values(resetFns)) {
+			reset();
+		}
+	}
+</script>
+
+<script lang="ts">
+	import Fa from "svelte-fa";
+	import { faCheck, faTriangleExclamation, faXmark } from "@fortawesome/free-solid-svg-icons";
+	import Spinner from "../spinner.svelte";
+	import { onMount } from "svelte";
+
+	export let type: string = "text";
+	export let label: string | undefined = undefined;
+	export let autocomplete: string | undefined = undefined;
+	export let required: boolean = false;
+	export let disabled: boolean = false;
+	export let placeholder: string | undefined = undefined;
+	export let value: string = "";
+	export let validate: (v: string) => Promise<FieldStatus> = () =>
+		new Promise((resolve) => resolve({ type: FieldStatusType.Success }));
+	export let status: FieldStatus = { type: FieldStatusType.None };
+
+	let initialValue = value;
+	let touched = false;
+
+	let id = fieldCounter++;
+
+	onMount(() => {
+		resetFns[id] = () => {
+			touched = false;
+			value = "";
+			status = { type: FieldStatusType.None };
+		};
+		return () => {
+			delete resetFns[id];
+		};
+	});
+
+	$: if (value !== initialValue) {
+		touched = true;
+	}
+
+	$: if (touched) {
+		status = { type: FieldStatusType.Loading };
+		validate(value)
+			.then((s) => (status = s))
+			.catch((e) => {
+				// Ignore rejected promises with no error
+				if (e) {
+					console.error(e);
+				}
+			});
+	}
+</script>
+
+<div class="field-outer {status.type}">
+	{#if label}
+		<label for="field-{id}">{label}</label>
+	{/if}
+	<div class="field">
+		<!-- https://stackoverflow.com/a/75298645/10772729 -->
+		<input
+			id="field-{id}"
+			{placeholder}
+			{autocomplete}
+			{required}
+			{disabled}
+			bind:value
+			{...{ type }}
+		/>
+		<div class="input-inner">
+			<slot />
+			{#if status.type === FieldStatusType.Loading}
+				<div class="input-status">
+					<Spinner />
+				</div>
+			{:else if status.type === FieldStatusType.Success}
+				<div class="input-status">
+					<Fa icon={faCheck} />
+				</div>
+			{:else if status.type === FieldStatusType.Error}
+				<div class="input-status">
+					<Fa icon={faXmark} />
+				</div>
+			{:else if status.type === FieldStatusType.Warning}
+				<div class="input-status">
+					<Fa icon={faTriangleExclamation} />
+				</div>
+			{/if}
+		</div>
+	</div>
+	<!-- We don't conditionally render here because we want smooth animations, so we just toggle visibility with some "hidden" text -->
+	<span id="field-{id}-message" class="message" class:visible={status.message}
+		>{status.message}</span
+	>
+</div>
+
+<style lang="scss">
+	@import "../../assets/styles/variables.scss";
+
+	.field-outer {
+		display: flex;
+		flex-direction: column;
+		// margin-bottom: 1rem;
+		text-align: left;
+
+		&.success {
+			input {
+				border-color: $successColor !important;
+				background-color: black;
+			}
+
+			.message {
+				color: $successColorDark;
+			}
+
+			.input-status {
+				color: $successColor;
+			}
+		}
+
+		&.error {
+			input {
+				border-color: $errorColor !important;
+				background-color: black;
+			}
+
+			.message {
+				color: $errorColorDark;
+			}
+
+			.input-status {
+				color: $errorColor;
+			}
+		}
+
+		&.warning {
+			input {
+				border-color: $warningColor !important;
+				background-color: black;
+			}
+
+			.message {
+				color: $warningColorDark;
+			}
+
+			.input-status {
+				color: $warningColor;
+			}
+		}
+
+		&.loading {
+			input {
+				border-color: $loadingColor !important;
+				background-color: black;
+			}
+
+			.message {
+				color: $loadingColor;
+			}
+
+			.input-status {
+				color: $loadingColor;
+			}
+		}
+	}
+
+	label {
+		margin-bottom: 0.5rem;
+		color: $textColorLighter;
+	}
+
+	.field {
+		position: relative;
+
+		input {
+			padding: 0.5rem;
+			border-radius: 0.25rem;
+			outline: 1px solid $borderColor;
+			background-color: $bgColor2;
+			border: 2px solid transparent;
+			box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.15);
+			transition: border-color 0.25s ease-in-out;
+			width: 100%;
+
+			color: $textColor;
+
+			&:hover,
+			&:focus-visible {
+				border-color: $borderColor;
+			}
+
+			&:focus {
+				background-color: black;
+				border-color: $primaryColor;
+				box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+			}
+		}
+	}
+
+	.message {
+		margin-top: 0.1rem;
+		font-size: 0.9rem;
+		max-height: 0;
+		color: $textColorLight;
+		overflow: hidden;
+		transition: max-height 0.25s ease;
+		visibility: hidden;
+
+		&.visible {
+			visibility: visible;
+			max-height: 1rem;
+		}
+	}
+
+	.input-status {
+		font-size: 1.25em;
+		padding: 0.25rem 0;
+		margin-top: 0.1em;
+		margin-left: 0.25rem;
+	}
+
+	.input-inner {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		display: flex;
+		font-size: 1rem;
+		padding: 0 0.5rem;
+	}
+</style>
diff --git a/platform/website/src/components/form/password-field.svelte b/platform/website/src/components/form/password-field.svelte
new file mode 100644
index 000000000..6a295f127
--- /dev/null
+++ b/platform/website/src/components/form/password-field.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import Fa from "svelte-fa";
+	import Field, { type FieldStatus } from "./field.svelte";
+	import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+
+	export let label: string;
+	export let autocomplete: string | undefined = undefined;
+	export let required: boolean = false;
+	export let placeholder: string | undefined = undefined;
+	export let value: string = "";
+	export let validate: ((v: string) => Promise<FieldStatus>) | undefined = undefined;
+	export let status: FieldStatus | undefined = undefined;
+
+	let type = "password";
+	$: revealed = type === "text";
+
+	function clickReveal() {
+		if (revealed) {
+			type = "password";
+		} else {
+			type = "text";
+		}
+	}
+</script>
+
+<Field {type} {label} {autocomplete} {required} {placeholder} bind:value {validate} bind:status>
+	<button on:click={clickReveal} class="reveal-button" tabindex="-1" type="button">
+		<Fa icon={revealed ? faEyeSlash : faEye} fw />
+	</button>
+</Field>
+
+<style lang="scss">
+	@import "../../assets/styles/variables.scss";
+
+	.reveal-button {
+		color: $textColorLight;
+	}
+</style>
diff --git a/platform/website/src/components/settings/account/change-password.svelte b/platform/website/src/components/settings/account/change-password.svelte
new file mode 100644
index 000000000..2da249edb
--- /dev/null
+++ b/platform/website/src/components/settings/account/change-password.svelte
@@ -0,0 +1,176 @@
+<script lang="ts">
+	import Dialog from "$/components/dialog.svelte";
+	import { FieldStatusType, type FieldStatus } from "$/components/form/field.svelte";
+	import PasswordField from "$/components/form/password-field.svelte";
+	import Spinner from "$/components/spinner.svelte";
+	import { graphql } from "$/gql";
+	import { fieldsValid, passwordValidate } from "$/lib/utils";
+	import { faEdit } from "@fortawesome/free-solid-svg-icons";
+	import { CombinedError, getContextClient } from "@urql/svelte";
+	import { createEventDispatcher } from "svelte";
+	import Fa from "svelte-fa";
+
+	const dispatch = createEventDispatcher();
+	const client = getContextClient();
+
+	let loading = false;
+
+	let currentPasswordStatus: FieldStatus;
+	let currentPassword: string;
+
+	let newPasswordStatus: FieldStatus;
+	let newPassword: string;
+
+	let confirmPasswordStatus: FieldStatus;
+
+	$: formValid = fieldsValid([currentPasswordStatus, newPasswordStatus, confirmPasswordStatus]);
+
+	async function confirmPasswordValidate(v: string) {
+		if (v !== newPassword) {
+			return { type: FieldStatusType.Error, message: "Passwords do not match" };
+		}
+		return { type: FieldStatusType.Success };
+	}
+
+	function isWrongPassword(err: CombinedError) {
+		return (
+			Array.isArray(err.graphQLErrors[0].extensions.fields) &&
+			err.graphQLErrors[0].extensions.fields.includes("password")
+		);
+	}
+
+	async function changePassword() {
+		if (formValid && currentPassword && newPassword) {
+			loading = true;
+			const res = await client
+				.mutation(
+					graphql(`
+						mutation ChangePassword($currentPassword: String!, $newPassword: String!) {
+							user {
+								password(currentPassword: $currentPassword, newPassword: $newPassword) {
+									id
+								}
+							}
+						}
+					`),
+					{
+						currentPassword,
+						newPassword,
+					},
+					{
+						requestPolicy: "network-only",
+					},
+				)
+				.toPromise();
+			loading = false;
+			if (res.data) {
+				close();
+			} else if (res.error && isWrongPassword(res.error)) {
+				currentPasswordStatus = { type: FieldStatusType.Error, message: "Wrong password" };
+			}
+		}
+	}
+
+	function close() {
+		if (!loading) {
+			dispatch("close");
+		}
+	}
+</script>
+
+<Dialog on:close={close}>
+	<h1 class="heading">
+		<Fa icon={faEdit} />
+		<span>Change Password</span>
+	</h1>
+	<!-- TODO: Replace forget password link -->
+	<p class="text">
+		Please confirm your current password before changing it. <a href="#">Forgot your password?</a>
+	</p>
+	<form id="change-password-form" on:submit|preventDefault={changePassword}>
+		<PasswordField
+			label="Current Password"
+			autocomplete="current-password"
+			required
+			bind:value={currentPassword}
+			bind:status={currentPasswordStatus}
+		/>
+		<PasswordField
+			label="New Password"
+			autocomplete="new-password"
+			required
+			bind:value={newPassword}
+			validate={passwordValidate}
+			bind:status={newPasswordStatus}
+		/>
+		<PasswordField
+			label="Confirm New Password"
+			autocomplete="new-password"
+			required
+			validate={confirmPasswordValidate}
+			bind:status={confirmPasswordStatus}
+		/>
+	</form>
+	<div class="buttons">
+		<button class="button secondary" on:click={close} disabled={loading}>Cancel</button>
+		<button
+			class="button primary submit"
+			type="submit"
+			form="change-password-form"
+			disabled={loading || !formValid}
+		>
+			{#if loading}
+				<Spinner />
+			{/if}
+			Change
+		</button>
+	</div>
+</Dialog>
+
+<style lang="scss">
+	@import "../../../assets/styles/variables.scss";
+
+	.heading {
+		font-size: 1.8rem;
+
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+
+		& > span {
+			font-size: 2rem;
+		}
+	}
+
+	.text {
+		font-weight: 500;
+		color: $textColorLight;
+
+		a {
+			color: $primaryColor;
+			text-decoration: none;
+
+			&:hover,
+			&:focus-visible {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	.buttons {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		justify-content: flex-end;
+
+		& > .button {
+			padding: 0.4rem 0.8rem;
+		}
+	}
+
+	.button.submit {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+</style>
diff --git a/platform/website/src/components/settings/account/disable-2fa.svelte b/platform/website/src/components/settings/account/disable-2fa.svelte
index c58171fd9..2628e08a1 100644
--- a/platform/website/src/components/settings/account/disable-2fa.svelte
+++ b/platform/website/src/components/settings/account/disable-2fa.svelte
@@ -6,12 +6,17 @@
 	import ShieldX from "$/components/icons/settings/shield-x.svelte";
 	import Dialog from "$/components/dialog.svelte";
 	import Spinner from "$/components/spinner.svelte";
+	import { FieldStatusType, type FieldStatus } from "$/components/form/field.svelte";
+	import PasswordField from "$/components/form/password-field.svelte";
+	import { fieldsValid } from "$/lib/utils";
 
 	const dispatch = createEventDispatcher();
 	const client = getContextClient();
 
+	let passwordStatus: FieldStatus;
 	let password: string;
-	let wrongPassword = false;
+
+	$: formValid = fieldsValid([passwordStatus]);
 
 	let loading = false;
 
@@ -23,7 +28,7 @@
 	}
 
 	async function disableTotp() {
-		if (password) {
+		if (formValid) {
 			loading = true;
 			const res = await client
 				.mutation(
@@ -51,7 +56,7 @@
 				$user.totpEnabled = res.data.user.twoFa.resp.totpEnabled;
 				close();
 			} else if (res.error && isWrongPassword(res.error)) {
-				wrongPassword = true;
+				passwordStatus = { type: FieldStatusType.Error, message: "Wrong password" };
 			}
 		}
 	}
@@ -70,19 +75,13 @@
 	</h1>
 	<p class="text">Please confirm your password before disabling 2-Factor-Authentication.</p>
 	<form id="disable-2fa-form" on:submit|preventDefault={disableTotp}>
-		<p>
-			<input
-				class="input"
-				class:invalid={wrongPassword}
-				type="password"
-				placeholder="Password"
-				autocomplete="current-password"
-				bind:value={password}
-			/>
-			{#if wrongPassword}
-				<span class="message error">Wrong password</span>
-			{/if}
-		</p>
+		<PasswordField
+			label="Password"
+			autocomplete="current-password"
+			required
+			bind:value={password}
+			bind:status={passwordStatus}
+		/>
 	</form>
 	<div class="buttons">
 		<button class="button secondary" on:click={close} disabled={loading}>Cancel</button>
@@ -90,7 +89,7 @@
 			class="button primary submit"
 			type="submit"
 			form="disable-2fa-form"
-			disabled={loading || !password}
+			disabled={loading || !formValid}
 		>
 			{#if loading}
 				<Spinner />
@@ -120,19 +119,6 @@
 		color: $textColorLight;
 	}
 
-	.input {
-		width: 100%;
-	}
-
-	.message {
-		font-size: 0.9rem;
-		font-weight: 500;
-
-		&.error {
-			color: $errorColor;
-		}
-	}
-
 	.buttons {
 		display: flex;
 		align-items: center;
diff --git a/platform/website/src/components/settings/account/enable-2fa.svelte b/platform/website/src/components/settings/account/enable-2fa.svelte
index 00380f675..4a843f457 100644
--- a/platform/website/src/components/settings/account/enable-2fa.svelte
+++ b/platform/website/src/components/settings/account/enable-2fa.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Dialog from "$/components/dialog.svelte";
+	import Field, { FieldStatusType, type FieldStatus } from "$/components/form/field.svelte";
 	import ShieldCheck from "$/components/icons/settings/shield-check.svelte";
 	import Spinner from "$/components/spinner.svelte";
 	import { graphql } from "$/gql";
@@ -9,6 +10,7 @@
 	import { CombinedError, getContextClient } from "@urql/svelte";
 	import { createEventDispatcher } from "svelte";
 	import Fa from "svelte-fa";
+	import { z } from "zod";
 
 	const dispatch = createEventDispatcher();
 	const client = getContextClient();
@@ -75,8 +77,7 @@
 	}
 
 	async function enableTotp() {
-		if (!code) {
-			invalidCode = true;
+		if (codeStatus.type !== FieldStatusType.Success) {
 			return;
 		}
 		loading = true;
@@ -106,7 +107,7 @@
 			state = { step: 3 };
 			$user.totpEnabled = res.data.user.twoFa.resp.totpEnabled;
 		} else if (res.error && isWrongCode(res.error)) {
-			invalidCode = true;
+			codeStatus = { type: FieldStatusType.Error, message: "Invalid code" };
 		}
 	}
 
@@ -114,8 +115,22 @@
 
 	let loading = false;
 
+	let codeStatus: FieldStatus;
 	let code: string;
-	let invalidCode = false;
+
+	async function codeValidate(v: string) {
+		const valid = z
+			.string()
+			.length(6, "Code must be 6 digits")
+			.regex(/^\d{6}$/, "Invalid code")
+			.safeParse(v);
+
+		if (!valid.success) {
+			return { type: FieldStatusType.Error, message: valid.error.issues[0].message };
+		}
+
+		return { type: FieldStatusType.Success };
+	}
 </script>
 
 <Dialog on:close={clickClose} width={35}>
@@ -138,21 +153,15 @@
 				<span class="text">
 					Please scan the QR code with your authenticator app and submit the code.
 				</span>
-				<input
-					class="input"
+				<Field
 					type="text"
-					pattern="^\d&lbrace;6&rbrace;$"
-					class:invalid={invalidCode}
-					title="6 digits"
-					minlength="6"
-					maxlength="6"
-					placeholder="Code"
+					label="Code"
 					autocomplete="one-time-code"
+					required
 					bind:value={code}
+					validate={codeValidate}
+					bind:status={codeStatus}
 				/>
-				{#if invalidCode}
-					<span class="message error">Invalid code</span>
-				{/if}
 			</div>
 		</form>
 	{:else if state.step === 3}
@@ -210,27 +219,16 @@
 		color: $textColorLight;
 	}
 
-	.input {
-		width: 100%;
-	}
-
-	.message {
-		font-size: 0.9rem;
-		font-weight: 500;
-
-		&.error {
-			color: $errorColor;
-		}
-	}
-
 	.step-2 {
 		margin: 1rem 0;
 
 		display: flex;
 		gap: 2rem;
 
-		.input {
-			margin-top: 1rem;
+		& > div {
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
 		}
 	}
 
diff --git a/platform/website/src/lib/utils.ts b/platform/website/src/lib/utils.ts
index 1026f5367..6e8357c15 100644
--- a/platform/website/src/lib/utils.ts
+++ b/platform/website/src/lib/utils.ts
@@ -1,3 +1,33 @@
+import { z } from "zod";
+import { FieldStatusType, type FieldStatus } from "$/components/form/field.svelte";
+
+export function fieldsValid(status: (FieldStatus | undefined)[]) {
+	for (let s of status) {
+		if (!s || s.type !== FieldStatusType.Success) {
+			return false;
+		}
+	}
+	return true;
+}
+
+export async function passwordValidate(v: string): Promise<FieldStatus> {
+	const valid = z
+		.string()
+		.min(8, "At least 8 characters")
+		.max(100, "Maximum of 100 characters")
+		.regex(/.*[A-Z].*/, "At least one uppercase character")
+		.regex(/.*[a-z].*/, "At least one lowercase character")
+		.regex(/.*\d.*/, "At least one number")
+		.regex(/.*[`~<>?,./!@#$%^&*()\-_+="'|{}[\];:].*/, "At least one special character")
+		.safeParse(v);
+
+	if (!valid.success) {
+		return { type: FieldStatusType.Error, message: valid.error.issues[0].message };
+	}
+
+	return { type: FieldStatusType.Success };
+}
+
 export function viewersToString(viewers: number, labelled: boolean = false) {
 	const count = formatBigNumber(viewers);
 
diff --git a/platform/website/src/routes/settings/account/+page.svelte b/platform/website/src/routes/settings/account/+page.svelte
index d966c8b3d..de4b38d92 100644
--- a/platform/website/src/routes/settings/account/+page.svelte
+++ b/platform/website/src/routes/settings/account/+page.svelte
@@ -12,6 +12,8 @@
 	import { z } from "zod";
 	import Enable2fa from "$/components/settings/account/enable-2fa.svelte";
 	import Disable2fa from "$/components/settings/account/disable-2fa.svelte";
+	import ChangePassword from "$/components/settings/account/change-password.svelte";
+	import Field from "$/components/form/field.svelte";
 
 	//TODO: Improve detail texts
 
@@ -72,6 +74,7 @@
 
 	enum Dialog {
 		None,
+		ChangePassword,
 		Enable2Fa,
 		Disable2Fa,
 	}
@@ -91,20 +94,20 @@
 			on:reset={() => (email = $user?.email)}
 			showReset={emailChanged}
 		>
-			<div class="input-container">
-				<input
+			<div class="input-container" class:revealed={emailRevealed}>
+				<Field
 					type="email"
-					class="input email"
-					class:revealed={emailRevealed}
-					disabled={!emailRevealed}
 					autocomplete="email"
+					placeholder="Email"
+					disabled={!emailRevealed}
 					bind:value={email}
-				/>
-				{#if !emailRevealed}
-					<button class="reveal-button" on:click={() => (emailRevealed = true)}>
-						<Fa icon={faPen} />
-					</button>
-				{/if}
+				>
+					{#if !emailRevealed}
+						<button class="reveal-button" on:click={() => (emailRevealed = true)}>
+							<Fa icon={faPen} />
+						</button>
+					{/if}
+				</Field>
 			</div>
 			{#if !emailValid}
 				<span class="error message">Invalid email address</span>
@@ -115,7 +118,10 @@
 			{/if}
 		</Section>
 		<Section title="Password" details="Your password is used to log in to your account.">
-			<button class="button primary change-password">
+			<button
+				class="button primary change-password"
+				on:click={() => (showDialog = Dialog.ChangePassword)}
+			>
 				<Fa icon={faPen} />
 				Change Password
 			</button>
@@ -148,7 +154,9 @@
 		</Section>
 		<StatusBar {status} on:save={saveChanges} saveDisabled={!emailValid} />
 	</SectionContainer>
-	{#if showDialog === Dialog.Enable2Fa}
+	{#if showDialog === Dialog.ChangePassword}
+		<ChangePassword on:close={closeDialog} />
+	{:else if showDialog === Dialog.Enable2Fa}
 		<Enable2fa on:close={closeDialog} />
 	{:else if showDialog === Dialog.Disable2Fa}
 		<Disable2fa on:close={closeDialog} />
@@ -158,20 +166,29 @@
 <style lang="scss">
 	@import "../../../assets/styles/settings.scss";
 
-	.input.email:not(.revealed) {
-		color: transparent;
-		pointer-events: none;
-		user-select: none;
-		text-shadow: 5px 0 10px $textColor;
+	.message {
+		font-size: 0.9rem;
+		font-weight: 500;
+
+		&.error {
+			color: $errorColor;
+		}
+
+		&.success {
+			color: $successColor;
+		}
 	}
 
 	.input-container {
 		margin-top: 0.5rem;
-		position: relative;
 
-		& > .input {
-			margin-top: 0;
-			width: 100%;
+		&:not(.revealed) {
+			:global(input) {
+				color: transparent;
+				pointer-events: none;
+				user-select: none;
+				text-shadow: 5px 0 10px $textColor;
+			}
 		}
 	}
 
diff --git a/platform/website/src/routes/settings/profile/+page.svelte b/platform/website/src/routes/settings/profile/+page.svelte
index 4a17197e6..b8153226f 100644
--- a/platform/website/src/routes/settings/profile/+page.svelte
+++ b/platform/website/src/routes/settings/profile/+page.svelte
@@ -9,6 +9,7 @@
 	import Section from "$/components/settings/section.svelte";
 	import StatusBar, { Status } from "$/components/settings/status-bar.svelte";
 	import SectionContainer from "$/components/settings/section-container.svelte";
+	import Field, { FieldStatusType, type FieldStatus } from "$/components/form/field.svelte";
 
 	// TODO: Add invisible turnstile captcha
 	// TODO: Improve details text
@@ -19,8 +20,14 @@
 
 	let status = Status.Unchanged;
 
+	let displayNameStatus: FieldStatus;
 	let displayName = $user?.displayName;
-	$: displayNameValid = displayName?.toLowerCase() === $user?.displayName.toLowerCase();
+	async function displayNameValidate(v: string) {
+		if (v.toLowerCase() !== $user?.displayName.toLowerCase()) {
+			return { type: FieldStatusType.Error, message: "You may only change capatilization" };
+		}
+		return { type: FieldStatusType.Success };
+	}
 
 	let displayColor = $user?.displayColor.color;
 	let displayColorInput: HTMLInputElement;
@@ -155,17 +162,14 @@
 			showReset={displayName !== $user.displayName}
 			on:reset={() => (displayName = $user?.displayName)}
 		>
-			<input
-				class="input display-name"
-				class:invalid={!displayNameValid}
+			<Field
 				type="text"
-				placeholder="Display Name"
 				autocomplete="username"
+				placeholder="Display Name"
 				bind:value={displayName}
+				validate={displayNameValidate}
+				bind:status={displayNameStatus}
 			/>
-			{#if !displayNameValid}
-				<span class="error message">You may only change capatilization</span>
-			{/if}
 		</Section>
 		<Section
 			title="Display Color"
@@ -190,7 +194,11 @@
 				</div>
 			</div>
 		</Section>
-		<StatusBar {status} on:save={saveChanges} saveDisabled={!displayNameValid} />
+		<StatusBar
+			{status}
+			on:save={saveChanges}
+			saveDisabled={displayNameStatus?.type !== FieldStatusType.Success}
+		/>
 	</SectionContainer>
 {/if}
 
@@ -219,10 +227,4 @@
 			max-width: 20rem;
 		}
 	}
-
-	.input.display-name:focus {
-		& + .message {
-			display: none;
-		}
-	}
 </style>
diff --git a/schema.graphql b/schema.graphql
index 5842b2e6c..97aba37fa 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -351,6 +351,16 @@ type UserMutation {
 		"""
 		follow: Boolean!
 	): Boolean!
+	password(
+		"""
+		Current password
+		"""
+		currentPassword: String!
+		"""
+		New password
+		"""
+		newPassword: String!
+	): User!
 	twoFa: TwoFaMutation!
 }