diff --git a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
index cb65ce80317e..1a326db4544d 100644
--- a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
+++ b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
@@ -22,7 +22,6 @@ import UserAvatarEditor from '../../../components/avatar/UserAvatarEditor';
 import { useUpdateAvatar } from '../../../hooks/useUpdateAvatar';
 import { USER_STATUS_TEXT_MAX_LENGTH, BIO_TEXT_MAX_LENGTH } from '../../../lib/constants';
 import type { AccountProfileFormValues } from './getProfileInitialValues';
-import { getProfileInitialValues } from './getProfileInitialValues';
 import { useAccountProfileSettings } from './useAccountProfileSettings';
 
 const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactElement => {
@@ -46,10 +45,8 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 	} = useAccountProfileSettings();
 
 	const {
-		register,
 		control,
 		watch,
-		reset,
 		handleSubmit,
 		formState: { errors },
 	} = useFormContext<AccountProfileFormValues>();
@@ -97,10 +94,10 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 		try {
 			await updateOwnBasicInfo(
 				{
-					...(allowRealNameChange ? { realname: name } : {}),
-					...(allowEmailChange && user ? getUserEmailAddress(user) !== email && { email } : {}),
-					...(canChangeUsername ? { username } : {}),
-					...(allowUserStatusMessageChange ? { statusText } : {}),
+					realname: name,
+					...(user ? getUserEmailAddress(user) !== email && { email } : {}),
+					username,
+					statusText,
 					statusType,
 					nickname,
 					bio,
@@ -110,7 +107,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 
 			await updateAvatar();
 			dispatchToastMessage({ type: 'success', message: t('Profile_saved_successfully') });
-			reset(getProfileInitialValues(user));
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}
@@ -147,16 +143,21 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 							{t('Name')}
 						</Field.Label>
 						<Field.Row>
-							<TextInput
-								{...register('name', {
-									validate: (name) => (requireName && name === '' ? t('error-the-field-is-required', { field: t('Name') }) : true),
-								})}
-								id={nameId}
-								error={errors.name?.message}
-								disabled={!allowRealNameChange}
-								aria-required='true'
-								aria-invalid={errors.username ? 'true' : 'false'}
-								aria-describedby={`${nameId}-error ${nameId}-hint`}
+							<Controller
+								control={control}
+								name='name'
+								rules={{ validate: (name) => (requireName && name === '' ? t('error-the-field-is-required', { field: t('Name') }) : true) }}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										id={nameId}
+										error={errors.name?.message}
+										disabled={!allowRealNameChange}
+										aria-required='true'
+										aria-invalid={errors.username ? 'true' : 'false'}
+										aria-describedby={`${nameId}-error ${nameId}-hint`}
+									/>
+								)}
 							/>
 						</Field.Row>
 						{errors.name && (
@@ -171,17 +172,25 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 							{t('Username')}
 						</Field.Label>
 						<Field.Row>
-							<TextInput
-								{...register('username', {
+							<Controller
+								control={control}
+								name='username'
+								rules={{
 									required: t('error-the-field-is-required', { field: t('Username') }),
 									validate: (username) => validateUsername(username),
-								})}
-								id={usernameId}
-								error={errors.username?.message}
-								addon={<Icon name='at' size='x20' />}
-								aria-required='true'
-								aria-invalid={errors.username ? 'true' : 'false'}
-								aria-describedby={`${usernameId}-error ${usernameId}-hint`}
+								}}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										id={usernameId}
+										disabled={!canChangeUsername}
+										error={errors.username?.message}
+										addon={<Icon name='at' size='x20' />}
+										aria-required='true'
+										aria-invalid={errors.username ? 'true' : 'false'}
+										aria-describedby={`${usernameId}-error ${usernameId}-hint`}
+									/>
+								)}
 							/>
 						</Field.Row>
 						{errors?.username && (
@@ -195,26 +204,31 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 				<Field>
 					<Field.Label htmlFor={statusTextId}>{t('StatusMessage')}</Field.Label>
 					<Field.Row>
-						<TextInput
-							id={statusTextId}
-							{...register('statusText', {
-								maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH) },
-							})}
-							error={errors?.statusText?.message}
-							disabled={!allowUserStatusMessageChange}
-							flexGrow={1}
-							placeholder={t('StatusMessage_Placeholder')}
-							aria-invalid={errors.statusText ? 'true' : 'false'}
-							aria-describedby={`${statusTextId}-error ${statusTextId}-hint`}
-							addon={
-								<Controller
-									control={control}
-									name='statusType'
-									render={({ field: { value, onChange } }) => (
-										<UserStatusMenu margin='neg-x2' onChange={onChange} initialStatus={value as IUser['status']} />
-									)}
+						<Controller
+							control={control}
+							name='statusText'
+							rules={{ maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH) } }}
+							render={({ field }) => (
+								<TextInput
+									{...field}
+									id={statusTextId}
+									error={errors?.statusText?.message}
+									disabled={!allowUserStatusMessageChange}
+									flexGrow={1}
+									placeholder={t('StatusMessage_Placeholder')}
+									aria-invalid={errors.statusText ? 'true' : 'false'}
+									aria-describedby={`${statusTextId}-error ${statusTextId}-hint`}
+									addon={
+										<Controller
+											control={control}
+											name='statusType'
+											render={({ field: { value, onChange } }) => (
+												<UserStatusMenu margin='neg-x2' onChange={onChange} initialStatus={value as IUser['status']} />
+											)}
+										/>
+									}
 								/>
-							}
+							)}
 						/>
 					</Field.Row>
 					{errors?.statusText && (
@@ -227,21 +241,34 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 				<Field>
 					<Field.Label htmlFor={nicknameId}>{t('Nickname')}</Field.Label>
 					<Field.Row>
-						<TextInput id={nicknameId} {...register('nickname')} flexGrow={1} addon={<Icon name='edit' size='x20' alignSelf='center' />} />
+						<Controller
+							control={control}
+							name='nickname'
+							render={({ field }) => (
+								<TextInput {...field} id={nicknameId} flexGrow={1} addon={<Icon name='edit' size='x20' alignSelf='center' />} />
+							)}
+						/>
 					</Field.Row>
 				</Field>
 				<Field>
 					<Field.Label htmlFor={bioId}>{t('Bio')}</Field.Label>
 					<Field.Row>
-						<TextAreaInput
-							id={bioId}
-							{...register('bio', { maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) } })}
-							error={errors.bio?.message}
-							rows={3}
-							flexGrow={1}
-							addon={<Icon name='edit' size='x20' alignSelf='center' />}
-							aria-invalid={errors.statusText ? 'true' : 'false'}
-							aria-describedby={`${bioId}-error`}
+						<Controller
+							control={control}
+							name='bio'
+							rules={{ maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) } }}
+							render={({ field }) => (
+								<TextAreaInput
+									{...field}
+									id={bioId}
+									error={errors.bio?.message}
+									rows={3}
+									flexGrow={1}
+									addon={<Icon name='edit' size='x20' alignSelf='center' />}
+									aria-invalid={errors.statusText ? 'true' : 'false'}
+									aria-describedby={`${bioId}-error`}
+								/>
+							)}
 						/>
 					</Field.Row>
 					{errors?.bio && (
@@ -255,18 +282,23 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 						{t('Email')}
 					</Field.Label>
 					<Field.Row display='flex' flexDirection='row' justifyContent='space-between'>
-						<TextInput
-							id={emailId}
-							{...register('email', {
-								validate: { validateEmail: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')) },
-							})}
-							flexGrow={1}
-							error={errors.email?.message}
-							addon={<Icon name={isUserVerified ? 'circle-check' : 'mail'} size='x20' />}
-							disabled={!allowEmailChange}
-							aria-required='true'
-							aria-invalid={errors.email ? 'true' : 'false'}
-							aria-describedby={`${emailId}-error ${emailId}-hint`}
+						<Controller
+							control={control}
+							name='email'
+							rules={{ validate: { validateEmail: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')) } }}
+							render={({ field }) => (
+								<TextInput
+									{...field}
+									id={emailId}
+									flexGrow={1}
+									error={errors.email?.message}
+									addon={<Icon name={isUserVerified ? 'circle-check' : 'mail'} size='x20' />}
+									disabled={!allowEmailChange}
+									aria-required='true'
+									aria-invalid={errors.email ? 'true' : 'false'}
+									aria-describedby={`${emailId}-error ${emailId}-hint`}
+								/>
+							)}
 						/>
 						{!isUserVerified && (
 							<Button disabled={email !== previousEmail} onClick={handleSendConfirmationEmail} mis={24}>