diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx
index 5ae83bd39a..af88c97210 100644
--- a/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx
+++ b/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx
@@ -1,4 +1,3 @@
-import TextField from "@mui/material/TextField";
 import { type FormikTouched, useFormik } from "formik";
 import type { FC } from "react";
 import * as Yup from "yup";
@@ -6,6 +5,7 @@ import type { UpdateUserProfileRequest } from "#/api/typesGenerated";
 import { ErrorAlert } from "#/components/Alert/ErrorAlert";
 import { Button } from "#/components/Button/Button";
 import { Form, FormFields } from "#/components/Form/Form";
+import { FormField } from "#/components/FormField/FormField";
 import { Spinner } from "#/components/Spinner/Spinner";
 import {
 	getFormHelpers,
@@ -53,28 +53,35 @@ export const AccountForm: FC<AccountFormProps> = ({
 					<ErrorAlert error={updateProfileError} />
 				)}
 
-				<TextField disabled fullWidth label="Email" value={email} />
-				<TextField
-					{...getFieldHelpers("username")}
+				<FormField
+					field={getFieldHelpers("email")}
+					label="Email"
+					value={email}
+					disabled
+				/>
+				<FormField
+					field={getFieldHelpers("username")}
 					onChange={onChangeTrimmed(form)}
 					aria-disabled={!editable}
 					autoComplete="username"
 					disabled={!editable}
-					fullWidth
+					className="w-full"
 					label="Username"
 				/>
-				<TextField
-					{...getFieldHelpers("name")}
-					autoComplete="name"
-					fullWidth
-					onBlur={(e) => {
-						e.target.value = e.target.value.trim();
-						form.handleChange(e);
+				<FormField
+					field={{
+						...getFieldHelpers("name"),
+						helperText:
+							'The human-readable name is optional and can be accessed in a template via the "data.coder_workspace_owner.me.full_name" property.',
 					}}
+					autoComplete="name"
+					className="w-full"
 					label="Name"
-					helperText='The human-readable name is optional and can be accessed in a template via the "data.coder_workspace_owner.me.full_name" property.'
+					onBlur={(event) => {
+						event.target.value = event.target.value.trim();
+						form.handleChange(event);
+					}}
 				/>
-
 				<div>
 					<Button disabled={isLoading} type="submit">
 						<Spinner loading={isLoading} />