diff --git a/src/pages/account/changeemail.tsx b/src/pages/account/changeemail.tsx
index 8ac5bb4..1d32f83 100644
--- a/src/pages/account/changeemail.tsx
+++ b/src/pages/account/changeemail.tsx
@@ -1,46 +1,72 @@
-import React, { useState } from "react";
-import Panel from "../../components/Panel";
-import FormWrapper, { FormButton, FormField } from "../../components/FormWrapper";
-import { fetchApi, FetchResult } from "../../lib/request";
-import { withSessionSsr } from "../../lib/session";
-import { changeEmailSchema } from "../../schemas/ChangeEmail";
-
-const fields: FormField[] = [
+import React from "react";
+import Panel from "@component/Panel";
+import { withSessionSsr } from "@lib/session";
+import { trpc } from "@util/trpc";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useFormFeedback } from "@hook/useFormFeedback";
+import { Container, VStack, Wrap } from "@chakra-ui/react";
+import TextInput from "@component/TextInput";
+import Button from "@component/Button";
+import { FormField } from "@component/FormField";
+
+const fields = [
 	{
 		type: "email",
 		name: "newEmail",
-		label: { text: "E-mail Address" },
+		label: "E-mail Address",
 	},
 	{
 		type: "password",
 		name: "password",
-		label: { text: "Password" },
+		label: "Password",
 	},
 ];
 
-const buttons: FormButton[] = [
-	{ type: "submit", btnColorType: "primary", value: "Submit" },
-	{ href: "/account", value: "Back" },
-];
+const schema = z.object({
+	newEmail: z.string().email({ message: "Invalid email address" }),
+	password: z.string().min(6, { message: "Password must be at least 6 characters long" }),
+});
 
 export default function ChangeEmail() {
-	const [response, setResponse] = useState<FetchResult | undefined>(undefined);
+	const {
+		register,
+		handleSubmit,
+		reset,
+		formState: { errors, isValid, isSubmitting },
+	} = useForm<z.infer<typeof schema>>({
+		resolver: zodResolver(schema),
+	});
+	const { handleResponse, showResponse } = useFormFeedback();
+	const changeEmail = trpc.account.changeEmail.useMutation();
 
-	const onSubmit = async (values: any, { resetForm }: any) => {
-		const response = await fetchApi("POST", "/api/account/changeemail", {
-			data: {
-				email: values.newEmail,
-				password: values.password,
-			},
+	const onSubmit: SubmitHandler<z.infer<typeof schema>> = async ({ newEmail, password }) => {
+		handleResponse(async () => {
+			await changeEmail.mutateAsync({ newEmail, password });
+			showResponse("Email changed.", "success");
 		});
 
-		setResponse(response);
-		resetForm();
+		reset();
 	};
 
 	return (
 		<Panel header="Change Email">
-			<FormWrapper validationSchema={changeEmailSchema} onSubmit={onSubmit} fields={fields} buttons={buttons} response={response} />
+			<form onSubmit={handleSubmit(onSubmit)}>
+				<Container alignContent={"center"} padding={2}>
+					<VStack spacing={5}>
+						{fields.map((field) => (
+							<FormField key={field.name} error={(errors as any)[field.name]?.message} name={field.name} label={field.label}>
+								<TextInput type={field.type} {...register(field.name as any)} />
+							</FormField>
+						))}
+						<Wrap spacing={2} padding="10px">
+							<Button isLoading={isSubmitting} isActive={!isValid} loadingText="Submitting" type="submit" value="Submit" btnColorType="primary" />
+							<Button value="Back" btnColorType="danger" href="/account" />
+						</Wrap>
+					</VStack>
+				</Container>
+			</form>
 		</Panel>
 	);
 }
diff --git a/src/pages/account/changepassword.tsx b/src/pages/account/changepassword.tsx
index 71fb110..1432a89 100644
--- a/src/pages/account/changepassword.tsx
+++ b/src/pages/account/changepassword.tsx
@@ -1,48 +1,69 @@
-import React, { useState } from "react";
-import Panel from "../../components/Panel";
-import FormWrapper, { FormButton, FormField } from "../../components/FormWrapper";
-import { fetchApi, FetchResult } from "../../lib/request";
-import { withSessionSsr } from "../../lib/session";
-import { changePasswordSchema } from "../../schemas/ChangePassword";
-import { Text } from "@chakra-ui/react";
+import React from "react";
+import Panel from "@component/Panel";
+import { withSessionSsr } from "@lib/session";
+import { trpc } from "@util/trpc";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { z } from "zod";
+import { Text, Container, VStack, Wrap } from "@chakra-ui/react";
+import TextInput from "@component/TextInput";
+import Button from "@component/Button";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FormField } from "@component/FormField";
+import { useFormFeedback } from "@hook/useFormFeedback";
 
-const fields: FormField[] = [
+const fields = [
 	{
 		type: "password",
 		name: "newPassword",
 		placeholder: "6 to 30 characters",
-		label: { text: "New Password" },
+		label: "New Password",
 	},
 	{
 		type: "password",
 		name: "repeatNewPassword",
-		label: { text: "Repeat New Password" },
+		label: "Repeat New Password",
 	},
 	{
 		type: "password",
 		name: "password",
-		label: { text: "Password" },
+		label: "Password",
 	},
 ];
 
-const buttons: FormButton[] = [
-	{ type: "submit", btnColorType: "primary", value: "Submit" },
-	{ href: "/account", btnColorType: "danger", value: "Back" },
-];
+const schema = z
+	.object({
+		newPassword: z.string().min(6, { message: "Password must be at least 6 characters long" }),
+		repeatNewPassword: z.string().min(6, { message: "Password must be at least 6 characters long" }),
+		password: z.string().min(6, { message: "Password must be at least 6 characters long" }),
+	})
+	.refine((data) => data.newPassword === data.repeatNewPassword, {
+		message: "New passwords don't match",
+		path: ["repeatNewPassword"],
+	});
 
 export default function ChangePassword() {
-	const [response, setResponse] = useState<FetchResult | undefined>(undefined);
+	const {
+		register,
+		handleSubmit,
+		reset,
+		formState: { errors, isValid, isSubmitting },
+	} = useForm<z.infer<typeof schema>>({
+		resolver: zodResolver(schema),
+	});
+	const { handleResponse, showResponse } = useFormFeedback();
+	const changePassword = trpc.account.changePassword.useMutation();
 
-	const onSubmit = async (values: any, { resetForm }: any) => {
-		const response = await fetchApi("POST", "/api/account/changepassword", {
-			data: {
-				newPassword: values.newPassword,
-				password: values.password,
-			},
+	const onSubmit: SubmitHandler<z.infer<typeof schema>> = async ({ newPassword, password }) => {
+		handleResponse(async () => {
+			await changePassword.mutateAsync({
+				newPassword,
+				password,
+			});
+
+			showResponse("Password changed.", "success");
 		});
 
-		setResponse(response);
-		resetForm();
+		reset();
 	};
 
 	return (
@@ -51,7 +72,21 @@ export default function ChangePassword() {
 				Please enter your current password and a new password. For your security, please enter the new password twice.
 			</Text>
 
-			<FormWrapper validationSchema={changePasswordSchema} onSubmit={onSubmit} fields={fields} buttons={buttons} response={response} />
+			<form onSubmit={handleSubmit(onSubmit)}>
+				<Container alignContent={"center"} padding={2}>
+					<VStack spacing={5}>
+						{fields.map((field) => (
+							<FormField key={field.name} error={(errors as any)[field.name]?.message} name={field.name} label={field.label}>
+								<TextInput type={field.type} {...register(field.name as any)} />
+							</FormField>
+						))}
+						<Wrap spacing={2} padding="10px">
+							<Button isLoading={isSubmitting} isActive={!isValid} loadingText="Submitting" type="submit" value="Submit" btnColorType="primary" />
+							<Button value="Back" btnColorType="danger" href="/account" />
+						</Wrap>
+					</VStack>
+				</Container>
+			</form>
 		</Panel>
 	);
 }
diff --git a/src/pages/api/account/[id].ts b/src/pages/api/account/[id].ts
deleted file mode 100644
index 4361f4f..0000000
--- a/src/pages/api/account/[id].ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { NextApiRequest, NextApiResponse } from "next";
-import apiHandler from "../../../middleware/apiHandler";
-import * as accountService from "../../../services/accountService";
-
-//TODO: accept query parameters to pull only required data
-
-const get = async (req: NextApiRequest, res: NextApiResponse) => {
-	const { id } = req.query;
-
-	if (!id) {
-		return res.json({
-			success: false,
-			message: "Missing account id query parameter",
-		});
-	}
-
-	const account = await accountService.getAccountById(+id);
-	if (!account) {
-		return res.json({ success: false, message: "Account not found" });
-	}
-
-	res.status(200).json({ success: true, args: { account } });
-};
-
-export default apiHandler({
-	get,
-});
diff --git a/src/pages/api/account/changepassword.ts b/src/pages/api/account/changepassword.ts
deleted file mode 100644
index 0b38a64..0000000
--- a/src/pages/api/account/changepassword.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { withSessionRoute } from "../../../lib/session";
-import { sha1Encrypt } from "../../../lib/crypt";
-import { NextApiRequest, NextApiResponse } from "next";
-import prisma from "../../../prisma";
-import apiHandler from "../../../middleware/apiHandler";
-import { changePasswordSchema } from "../../../schemas/ChangePassword";
-import { validate } from "../../../middleware/validation";
-
-const post = withSessionRoute(
-	async (req: NextApiRequest, res: NextApiResponse) => {
-		const { user } = req.session;
-		if (!user) {
-			return res.status(403).json({ message: "Unauthorised." });
-		}
-
-		const { newPassword, password } = req.body;
-
-		if (newPassword === password) {
-			return res.status(400).json({
-				success: false,
-				message: "Current password can't be the same as new password.",
-			});
-		}
-
-		const result = await prisma.accounts.updateMany({
-			where: {
-				id: user.id,
-				password: await sha1Encrypt(password),
-			},
-			data: { password: await sha1Encrypt(newPassword) },
-		});
-
-		if (result.count === 0) {
-			return res.status(400).json({
-				success: false,
-				message: "Current password doesn't match.",
-			});
-		}
-
-		res.json({ success: true, message: "Succesfully changed password." });
-	}
-);
-
-export default apiHandler({
-	post: validate(changePasswordSchema, post),
-});
diff --git a/src/server/routers/account.ts b/src/server/routers/account.ts
index 7324a3b..2e467fb 100644
--- a/src/server/routers/account.ts
+++ b/src/server/routers/account.ts
@@ -154,4 +154,66 @@ export const accountRouter = router({
 
 			return player;
 		}),
+	changePassword: authProcedure
+		.input(
+			z.object({
+				newPassword: z.string(),
+				password: z.string(),
+			}),
+		)
+		.mutation(async ({ input, ctx }) => {
+			const { newPassword, password } = input;
+			const { session } = ctx;
+
+			const account = await prisma.accounts.findFirst({
+				where: {
+					id: session.user!.id,
+					password: await sha1Encrypt(password),
+				},
+			});
+
+			if (!account) {
+				throw new TRPCError({ code: "BAD_REQUEST", message: "Password doesn't match." });
+			}
+
+			await prisma.accounts.update({
+				where: {
+					id: account.id,
+				},
+				data: {
+					password: await sha1Encrypt(newPassword),
+				},
+			});
+		}),
+	changeEmail: authProcedure
+		.input(
+			z.object({
+				newEmail: z.string().email(),
+				password: z.string(),
+			}),
+		)
+		.mutation(async ({ input, ctx }) => {
+			const { newEmail, password } = input;
+			const { session } = ctx;
+
+			const account = await prisma.accounts.findFirst({
+				where: {
+					id: session.user!.id,
+					password: await sha1Encrypt(password),
+				},
+			});
+
+			if (!account) {
+				throw new TRPCError({ code: "BAD_REQUEST", message: "Password doesn't match." });
+			}
+
+			await prisma.accounts.update({
+				where: {
+					id: account.id,
+				},
+				data: {
+					email: newEmail,
+				},
+			});
+		}),
 });