diff --git a/apps/meteor/client/lib/getDirtyFields.ts b/apps/meteor/client/lib/getDirtyFields.ts
new file mode 100644
index 000000000000..ede3197a23d5
--- /dev/null
+++ b/apps/meteor/client/lib/getDirtyFields.ts
@@ -0,0 +1,27 @@
+import type { FieldValues } from 'react-hook-form';
+
+/**
+ * Helper function to get dirty fields from react-hook-form
+ * @param allFields all fields object
+ * @param dirtyFields dirty fields object
+ * @returns all dirty fields object
+ */
+export const getDirtyFields = <T extends FieldValues>(
+	allFields: T,
+	dirtyFields: Partial<Record<keyof T, boolean | boolean[]>>,
+): Partial<T> => {
+	const dirtyFieldsObjValue = Object.keys(dirtyFields).reduce((acc, currentField) => {
+		const isDirty = Array.isArray(dirtyFields[currentField])
+			? (dirtyFields[currentField] as boolean[]).some((value) => value === true)
+			: dirtyFields[currentField] === true;
+		if (isDirty) {
+			return {
+				...acc,
+				[currentField]: allFields[currentField],
+			};
+		}
+		return acc;
+	}, {} as Partial<T>);
+
+	return dirtyFieldsObjValue;
+};
diff --git a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx b/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx
index ec747a913075..e3b18cabe759 100644
--- a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx
+++ b/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx
@@ -1,9 +1,13 @@
 import { ButtonGroup, Button, Box, Accordion } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { MutableRefObject, ReactElement } from 'react';
-import React, { useState, useCallback, useRef } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 
 import Page from '../../../components/Page';
+import { getDirtyFields } from '../../../lib/getDirtyFields';
 import PreferencesGlobalSection from './PreferencesGlobalSection';
 import PreferencesHighlightsSection from './PreferencesHighlightsSection';
 import PreferencesLocalizationSection from './PreferencesLocalizationSection';
@@ -12,142 +16,86 @@ import PreferencesMyDataSection from './PreferencesMyDataSection';
 import PreferencesNotificationsSection from './PreferencesNotificationsSection';
 import PreferencesSoundSection from './PreferencesSoundSection';
 import PreferencesUserPresenceSection from './PreferencesUserPresenceSection';
-
-type CurrentData = {
-	enableNewMessageTemplate: boolean;
-	language: string;
-	newRoomNotification: string;
-	newMessageNotification: string;
-	clockMode: number;
-	useEmojis: boolean;
-	convertAsciiEmoji: boolean;
-	saveMobileBandwidth: boolean;
-	collapseMediaByDefault: boolean;
-	autoImageLoad: boolean;
-	emailNotificationMode: string;
-	unreadAlert: boolean;
-	notificationsSoundVolume: number;
-	desktopNotifications: string;
-	pushNotifications: string;
-	enableAutoAway: boolean;
-	highlights: string;
-	hideUsernames: boolean;
-	hideRoles: boolean;
-	displayAvatars: boolean;
-	hideFlexTab: boolean;
-	sendOnEnter: string;
-	idleTimeLimit: number;
-	sidebarShowFavorites: boolean;
-	sidebarShowUnread: boolean;
-	sidebarSortby: string;
-	sidebarViewMode: string;
-	sidebarDisplayAvatar: boolean;
-	sidebarGroupByType: boolean;
-	muteFocusedConversations: boolean;
-	receiveLoginDetectionEmail: boolean;
-	dontAskAgainList: [action: string, label: string][];
-	notifyCalendarEvents: boolean;
-	enableMobileRinging: boolean;
-};
-
-export type FormSectionProps = {
-	onChange: any;
-	commitRef: MutableRefObject<Record<string, () => void>>;
-};
-
-type FormatedData = { data: Omit<Partial<CurrentData>, 'dontAskAgainList' | 'highlights'> };
+import type { AccountPreferencesData } from './useAccountPreferencesValues';
+import { useAccountPreferencesValues } from './useAccountPreferencesValues';
 
 const AccountPreferencesPage = (): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
-
-	const [hasAnyChange, setHasAnyChange] = useState(false);
-
-	const saveData = useRef<Partial<CurrentData>>({});
-	const commitRef = useRef({});
-
 	const dataDownloadEnabled = useSetting('UserData_EnableDownload');
-
-	const onChange = useCallback(
-		<K extends keyof CurrentData, I extends CurrentData[K], V extends CurrentData[K]>({
-			initialValue,
-			value,
-			key,
-		}: {
-			initialValue: I;
-			value: V;
-			key: K;
-		}) => {
-			const { current } = saveData;
-			if (current) {
-				if (JSON.stringify(initialValue) !== JSON.stringify(value)) {
-					current[key] = value;
-				} else {
-					delete current[key];
-				}
-			}
-
-			const anyChange = !!Object.values(current).length;
-			if (anyChange !== hasAnyChange) {
-				setHasAnyChange(anyChange);
-			}
+	const preferencesValues = useAccountPreferencesValues();
+
+	const methods = useForm({ defaultValues: preferencesValues });
+	const {
+		handleSubmit,
+		reset,
+		watch,
+		formState: { isDirty, dirtyFields },
+	} = methods;
+
+	const currentData = watch();
+
+	const setPreferencesEndpoint = useEndpoint('POST', '/v1/users.setPreferences');
+	const setPreferencesAction = useMutation({
+		mutationFn: setPreferencesEndpoint,
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Preferences_saved') });
 		},
-		[hasAnyChange],
-	);
-
-	const saveFn = useEndpoint('POST', '/v1/users.setPreferences');
-
-	const handleSave = useCallback(async () => {
-		try {
-			const { current: data } = saveData;
-			if (data?.highlights || data?.highlights === '') {
-				Object.assign(data, {
-					highlights: data.highlights
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSettled: () => reset(currentData),
+	});
+
+	const handleSaveData = async (formData: AccountPreferencesData) => {
+		const { highlights, dontAskAgainList, ...data } = getDirtyFields(formData, dirtyFields);
+		if (highlights || highlights === '') {
+			Object.assign(data, {
+				highlights:
+					typeof highlights === 'string' &&
+					highlights
 						.split(/,|\n/)
 						.map((val) => val.trim())
 						.filter(Boolean),
-				});
-			}
+			});
+		}
 
-			if (data?.dontAskAgainList) {
-				const list =
-					Array.isArray(data.dontAskAgainList) && data.dontAskAgainList.length > 0
-						? data.dontAskAgainList.map(([action, label]) => ({ action, label }))
-						: [];
-				Object.assign(data, { dontAskAgainList: list });
-			}
+		if (dontAskAgainList) {
+			const list =
+				Array.isArray(dontAskAgainList) && dontAskAgainList.length > 0
+					? dontAskAgainList.map(([action, label]) => ({ action, label }))
+					: [];
+			Object.assign(data, { dontAskAgainList: list });
+		}
 
-			await saveFn({ data } as FormatedData);
-			saveData.current = {};
-			setHasAnyChange(false);
-			Object.values(commitRef.current).forEach((fn) => (fn as () => void)());
+		setPreferencesAction.mutateAsync({ data });
+	};
 
-			dispatchToastMessage({ type: 'success', message: t('Preferences_saved') });
-		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
-		}
-	}, [dispatchToastMessage, saveFn, t]);
+	const preferencesFormId = useUniqueId();
 
 	return (
 		<Page>
 			<Page.Header title={t('Preferences')} />
 			<Page.ScrollableContentWithShadow>
-				<Box maxWidth='x600' w='full' alignSelf='center'>
-					<Accordion>
-						<PreferencesLocalizationSection commitRef={commitRef} onChange={onChange} defaultExpanded />
-						<PreferencesGlobalSection commitRef={commitRef} onChange={onChange} />
-						<PreferencesUserPresenceSection commitRef={commitRef} onChange={onChange} />
-						<PreferencesNotificationsSection commitRef={commitRef} onChange={onChange} />
-						<PreferencesMessagesSection commitRef={commitRef} onChange={onChange} />
-						<PreferencesHighlightsSection commitRef={commitRef} onChange={onChange} />
-						<PreferencesSoundSection commitRef={commitRef} onChange={onChange} />
-						{dataDownloadEnabled && <PreferencesMyDataSection onChange={onChange} />}
-					</Accordion>
-				</Box>
+				<FormProvider {...methods}>
+					<Box id={preferencesFormId} is='form' maxWidth='x600' w='full' alignSelf='center' onSubmit={handleSubmit(handleSaveData)}>
+						<Accordion>
+							<PreferencesLocalizationSection />
+							<PreferencesGlobalSection />
+							<PreferencesUserPresenceSection />
+							<PreferencesNotificationsSection />
+							<PreferencesMessagesSection />
+							<PreferencesHighlightsSection />
+							<PreferencesSoundSection />
+							{dataDownloadEnabled && <PreferencesMyDataSection />}
+						</Accordion>
+					</Box>
+				</FormProvider>
 			</Page.ScrollableContentWithShadow>
-			<Page.Footer isDirty={hasAnyChange}>
+			<Page.Footer isDirty={isDirty}>
 				<ButtonGroup>
-					<Button primary disabled={!hasAnyChange} onClick={handleSave}>
+					<Button onClick={() => reset(preferencesValues)}>{t('Cancel')}</Button>
+					<Button form={preferencesFormId} primary type='submit'>
 						{t('Save_changes')}
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
index 7c2410deb9fb..4e616072d185 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
@@ -1,50 +1,31 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Accordion, Field, FieldGroup, MultiSelect } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useUserPreference, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
-import React, { useMemo } from 'react';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 
-import { useForm } from '../../../hooks/useForm';
-import type { FormSectionProps } from './AccountPreferencesPage';
-
-const PreferencesGlobalSection = ({ onChange, commitRef, ...props }: FormSectionProps): ReactElement => {
+const PreferencesGlobalSection = () => {
 	const t = useTranslation();
 
-	const userDontAskAgainList = useUserPreference<{ action: string; label: string }[]>('dontAskAgainList');
-
-	const options = useMemo(
-		() => (userDontAskAgainList || []).map(({ action, label }) => [action, label]) as SelectOption[],
-		[userDontAskAgainList],
-	);
-
-	const selectedOptions = options.map(([action]) => action);
-
-	const { values, handlers, commit } = useForm(
-		{
-			dontAskAgainList: selectedOptions,
-		},
-		onChange,
-	);
-
-	const { dontAskAgainList } = values as {
-		dontAskAgainList: string[];
-	};
-
-	const { handleDontAskAgainList } = handlers;
+	const userDontAskAgainList = useUserPreference<{ action: string; label: string }[]>('dontAskAgainList') || [];
+	const options: SelectOption[] = userDontAskAgainList.map(({ action, label }) => [action, label]);
 
-	commitRef.current.global = commit;
+	const { control } = useFormContext();
+	const dontAskAgainListId = useUniqueId();
 
 	return (
-		<Accordion.Item title={t('Global')} {...props}>
+		<Accordion.Item title={t('Global')}>
 			<FieldGroup>
 				<Field>
-					<Field.Label>{t('Dont_ask_me_again_list')}</Field.Label>
+					<Field.Label htmlFor={dontAskAgainListId}>{t('Dont_ask_me_again_list')}</Field.Label>
 					<Field.Row>
-						<MultiSelect
-							placeholder={t('Nothing_found')}
-							value={(dontAskAgainList.length > 0 && dontAskAgainList) || undefined}
-							onChange={handleDontAskAgainList}
-							options={options}
+						<Controller
+							name='dontAskAgainList'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<MultiSelect id={dontAskAgainListId} placeholder={t('Nothing_found')} value={value} onChange={onChange} options={options} />
+							)}
 						/>
 					</Field.Row>
 				</Field>
diff --git a/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
index 9179446df4d7..8c05a92bad47 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
@@ -1,31 +1,22 @@
 import { Accordion, Field, FieldGroup, TextAreaInput } from '@rocket.chat/fuselage';
-import { useUserPreference, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
+import { useFormContext } from 'react-hook-form';
 
-import { useForm } from '../../../hooks/useForm';
-import type { FormSectionProps } from './AccountPreferencesPage';
-
-const PreferencesHighlightsSection = ({ onChange, commitRef, ...props }: FormSectionProps): ReactElement => {
+const PreferencesHighlightsSection = () => {
 	const t = useTranslation();
+	const { register } = useFormContext();
 
-	const userHighlights = useUserPreference<string[]>('highlights')?.join(',\n') ?? '';
-
-	const { values, handlers, commit } = useForm({ highlights: userHighlights }, onChange);
-
-	const { highlights } = values as { highlights: string };
-
-	const { handleHighlights } = handlers;
-
-	commitRef.current.highlights = commit;
+	const highlightsId = useUniqueId();
 
 	return (
-		<Accordion.Item title={t('Highlights')} {...props}>
+		<Accordion.Item title={t('Highlights')}>
 			<FieldGroup>
 				<Field>
-					<Field.Label>{t('Highlights_List')}</Field.Label>
+					<Field.Label htmlFor={highlightsId}>{t('Highlights_List')}</Field.Label>
 					<Field.Row>
-						<TextAreaInput rows={4} value={highlights} onChange={handleHighlights} />
+						<TextAreaInput id={highlightsId} {...register('highlights')} rows={4} />
 					</Field.Row>
 					<Field.Hint>{t('Highlights_How_To')}</Field.Hint>
 				</Field>
diff --git a/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
index c48ffdc0e95a..2faaa9da89c2 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
@@ -1,45 +1,37 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Accordion, Field, Select, FieldGroup } from '@rocket.chat/fuselage';
-import { useUserPreference, useLanguages, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
-import React, { useEffect, useMemo } from 'react';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useLanguages, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useMemo } from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
 
-import { useForm } from '../../../hooks/useForm';
-import type { FormSectionProps } from './AccountPreferencesPage';
-
-const PreferencesLocalizationSection = ({
-	onChange,
-	commitRef,
-	...props
-}: { defaultExpanded?: boolean } & FormSectionProps): ReactElement => {
+const PreferencesLocalizationSection = () => {
 	const t = useTranslation();
-	const userLanguage = useUserPreference('language') || '';
 	const languages = useLanguages();
 
+	const { control } = useFormContext();
+
 	const languageOptions = useMemo(() => {
 		const mapOptions: SelectOption[] = languages.map(({ key, name }) => [key, name]);
 		mapOptions.sort(([a], [b]) => a.localeCompare(b));
 		return mapOptions;
 	}, [languages]);
 
-	const { values, handlers, commit } = useForm({ language: userLanguage }, onChange);
-
-	const { language } = values as { language: string };
-	const { handleLanguage } = handlers;
-
-	useEffect(() => {
-		if (commitRef) {
-			commitRef.current.localization = commit;
-		}
-	}, [commit, commitRef]);
+	const languageId = useUniqueId();
 
 	return (
-		<Accordion.Item title={t('Localization')} {...props}>
+		<Accordion.Item title={t('Localization')} defaultExpanded>
 			<FieldGroup>
 				<Field>
-					<Field.Label>{t('Language')}</Field.Label>
+					<Field.Label htmlFor={languageId}>{t('Language')}</Field.Label>
 					<Field.Row>
-						<Select value={language} onChange={handleLanguage} options={languageOptions} />
+						<Controller
+							control={control}
+							name='language'
+							render={({ field: { value, onChange } }) => (
+								<Select id={languageId} value={value} onChange={onChange} options={languageOptions} />
+							)}
+						/>
 					</Field.Row>
 				</Field>
 			</FieldGroup>
diff --git a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
index 76aef16dfcd5..e5157d517967 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
@@ -1,86 +1,14 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Accordion, Field, Select, FieldGroup, ToggleSwitch, Box } from '@rocket.chat/fuselage';
-import { useUserPreference, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 
-import { useForm } from '../../../hooks/useForm';
-import type { FormSectionProps } from './AccountPreferencesPage';
-
-type Values = {
-	unreadAlert: boolean;
-	showThreadsInMainChannel: boolean;
-	alsoSendThreadToChannel: 'default' | 'always' | 'never';
-	useEmojis: boolean;
-	convertAsciiEmoji: boolean;
-	autoImageLoad: boolean;
-	saveMobileBandwidth: boolean;
-	collapseMediaByDefault: boolean;
-	hideUsernames: boolean;
-	hideRoles: boolean;
-	hideFlexTab: boolean;
-	displayAvatars: boolean;
-	clockMode: 0 | 1 | 2;
-	sendOnEnter: 'normal' | 'alternative' | 'desktop';
-};
-
-const PreferencesMessagesSection = ({ onChange, commitRef, ...props }: FormSectionProps): ReactElement => {
+const PreferencesMessagesSection = () => {
 	const t = useTranslation();
-
-	const showRoles = useSetting('UI_DisplayRoles');
-
-	const settings = {
-		unreadAlert: useUserPreference('unreadAlert'),
-		showThreadsInMainChannel: useUserPreference('showThreadsInMainChannel'),
-		alsoSendThreadToChannel: useUserPreference('alsoSendThreadToChannel'),
-		useEmojis: useUserPreference('useEmojis'),
-		convertAsciiEmoji: useUserPreference('convertAsciiEmoji'),
-		autoImageLoad: useUserPreference('autoImageLoad'),
-		saveMobileBandwidth: useUserPreference('saveMobileBandwidth'),
-		collapseMediaByDefault: useUserPreference('collapseMediaByDefault'),
-		hideUsernames: useUserPreference('hideUsernames'),
-		hideRoles: useUserPreference('hideRoles'),
-		hideFlexTab: useUserPreference('hideFlexTab'),
-		clockMode: useUserPreference('clockMode') ?? 0,
-		sendOnEnter: useUserPreference('sendOnEnter'),
-		displayAvatars: useUserPreference('displayAvatars'),
-	};
-
-	const { values, handlers, commit } = useForm(settings, onChange);
-
-	const {
-		unreadAlert,
-		showThreadsInMainChannel,
-		alsoSendThreadToChannel,
-		useEmojis,
-		convertAsciiEmoji,
-		autoImageLoad,
-		saveMobileBandwidth,
-		collapseMediaByDefault,
-		hideUsernames,
-		hideRoles,
-		hideFlexTab,
-		displayAvatars,
-		clockMode,
-		sendOnEnter,
-	} = values as Values;
-
-	const {
-		handleUnreadAlert,
-		handleShowThreadsInMainChannel,
-		handleAlsoSendThreadToChannel,
-		handleUseEmojis,
-		handleConvertAsciiEmoji,
-		handleAutoImageLoad,
-		handleSaveMobileBandwidth,
-		handleCollapseMediaByDefault,
-		handleHideUsernames,
-		handleHideRoles,
-		handleHideFlexTab,
-		handleDisplayAvatars,
-		handleClockMode,
-		handleSendOnEnter,
-	} = handlers;
+	const displayRolesEnabled = useSetting('UI_DisplayRoles');
+	const { control } = useFormContext();
 
 	const alsoSendThreadMessageToChannelOptions = useMemo(
 		(): SelectOption[] => [
@@ -109,175 +37,235 @@ const PreferencesMessagesSection = ({ onChange, commitRef, ...props }: FormSecti
 		[t],
 	);
 
-	commitRef.current.messages = commit;
+	const unreadAlertId = useUniqueId();
+	const showThreadsInMainChannelId = useUniqueId();
+	const alsoSendThreadToChannelId = useUniqueId();
+	const clockModeId = useUniqueId();
+	const useEmojisId = useUniqueId();
+	const convertAsciiEmojiId = useUniqueId();
+	const autoImageLoadId = useUniqueId();
+	const saveMobileBandwidthId = useUniqueId();
+	const collapseMediaByDefaultId = useUniqueId();
+	const hideUsernamesId = useUniqueId();
+	const hideRolesId = useUniqueId();
+	const hideFlexTabId = useUniqueId();
+	const displayAvatarsId = useUniqueId();
+	const sendOnEnterId = useUniqueId();
 
 	return (
-		<Accordion.Item title={t('Messages')} {...props}>
+		<Accordion.Item title={t('Messages')}>
 			<FieldGroup>
-				{useMemo(
-					() => (
-						<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-							<Field.Label>{t('Unread_Tray_Icon_Alert')}</Field.Label>
-							<Field.Row>
-								<ToggleSwitch checked={unreadAlert} onChange={handleUnreadAlert} />
-							</Field.Row>
-						</Field>
-					),
-					[handleUnreadAlert, t, unreadAlert],
-				)}
-				{useMemo(
-					() => (
-						<Field>
-							<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-								<Field.Label>{t('Always_show_thread_replies_in_main_channel')}</Field.Label>
-								<Field.Row>
-									<ToggleSwitch checked={showThreadsInMainChannel} onChange={handleShowThreadsInMainChannel} />
-								</Field.Row>
-							</Box>
-							<Field.Hint>{t('Accounts_Default_User_Preferences_showThreadsInMainChannel_Description')}</Field.Hint>
-						</Field>
-					),
-					[handleShowThreadsInMainChannel, showThreadsInMainChannel, t],
-				)}
-				{useMemo(
-					() => (
-						<Field>
-							<Field.Label>{t('Also_send_thread_message_to_channel_behavior')}</Field.Label>
-							<Field.Row>
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={unreadAlertId}>{t('Unread_Tray_Icon_Alert')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='unreadAlert'
+								control={control}
+								render={({ field: { value, onChange, ref } }) => (
+									<ToggleSwitch id={unreadAlertId} ref={ref} checked={value} onChange={onChange} />
+								)}
+							/>
+						</Field.Row>
+					</Box>
+				</Field>
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={showThreadsInMainChannelId}>{t('Always_show_thread_replies_in_main_channel')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='showThreadsInMainChannel'
+								control={control}
+								render={({ field: { value, onChange, ref } }) => (
+									<ToggleSwitch
+										aria-describedby={`${showThreadsInMainChannelId}-hint`}
+										id={showThreadsInMainChannelId}
+										ref={ref}
+										checked={value}
+										onChange={onChange}
+									/>
+								)}
+							/>
+						</Field.Row>
+					</Box>
+					<Field.Hint id={`${showThreadsInMainChannelId}-hint`}>
+						{t('Accounts_Default_User_Preferences_showThreadsInMainChannel_Description')}
+					</Field.Hint>
+				</Field>
+				<Field>
+					<Field.Label htmlFor={alsoSendThreadToChannelId}>{t('Also_send_thread_message_to_channel_behavior')}</Field.Label>
+					<Field.Row>
+						<Controller
+							name='alsoSendThreadToChannel'
+							control={control}
+							render={({ field: { value, onChange } }) => (
 								<Select
-									value={alsoSendThreadToChannel}
-									onChange={handleAlsoSendThreadToChannel}
+									id={alsoSendThreadToChannelId}
+									aria-describedby={`${alsoSendThreadToChannelId}-hint`}
+									value={value}
+									onChange={onChange}
 									options={alsoSendThreadMessageToChannelOptions}
 								/>
-							</Field.Row>
-							<Field.Hint>{t('Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description')}</Field.Hint>
-						</Field>
-					),
-					[alsoSendThreadToChannel, handleAlsoSendThreadToChannel, t, alsoSendThreadMessageToChannelOptions],
-				)}
-				{useMemo(
-					() => (
-						<Field>
-							<Field.Label>{t('Message_TimeFormat')}</Field.Label>
-							<Field.Row>
-								<Select value={clockMode.toString()} onChange={handleClockMode} options={timeFormatOptions} />
-							</Field.Row>
-						</Field>
-					),
-					[clockMode, handleClockMode, t, timeFormatOptions],
-				)}
-				{useMemo(
-					() => (
-						<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-							<Field.Label>{t('Use_Emojis')}</Field.Label>
-							<Field.Row>
-								<ToggleSwitch checked={useEmojis} onChange={handleUseEmojis} />
-							</Field.Row>
-						</Field>
-					),
-					[handleUseEmojis, t, useEmojis],
-				)}
-				{useMemo(
-					() => (
-						<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-							<Field.Label>{t('Convert_Ascii_Emojis')}</Field.Label>
-							<Field.Row>
-								<ToggleSwitch checked={convertAsciiEmoji} onChange={handleConvertAsciiEmoji} />
-							</Field.Row>
-						</Field>
-					),
-					[convertAsciiEmoji, handleConvertAsciiEmoji, t],
-				)}
-				{useMemo(
-					() => (
-						<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-							<Field.Label>{t('Auto_Load_Images')}</Field.Label>
-							<Field.Row>
-								<ToggleSwitch checked={autoImageLoad} onChange={handleAutoImageLoad} />
-							</Field.Row>
-						</Field>
-					),
-					[autoImageLoad, handleAutoImageLoad, t],
-				)}
-				{useMemo(
-					() => (
-						<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-							<Field.Label>{t('Save_Mobile_Bandwidth')}</Field.Label>
-							<Field.Row>
-								<ToggleSwitch checked={saveMobileBandwidth} onChange={handleSaveMobileBandwidth} />
-							</Field.Row>
-						</Field>
-					),
-					[handleSaveMobileBandwidth, saveMobileBandwidth, t],
-				)}
-				{useMemo(
-					() => (
-						<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-							<Field.Label>{t('Collapse_Embedded_Media_By_Default')}</Field.Label>
-							<Field.Row>
-								<ToggleSwitch checked={collapseMediaByDefault} onChange={handleCollapseMediaByDefault} />
-							</Field.Row>
-						</Field>
-					),
-					[collapseMediaByDefault, handleCollapseMediaByDefault, t],
-				)}
-				{useMemo(
-					() => (
-						<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-							<Field.Label>{t('Hide_usernames')}</Field.Label>
+							)}
+						/>
+					</Field.Row>
+					<Field.Hint id={`${alsoSendThreadToChannelId}-hint`}>
+						{t('Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description')}
+					</Field.Hint>
+				</Field>
+				<Field>
+					<Field.Label htmlFor={clockModeId}>{t('Message_TimeFormat')}</Field.Label>
+					<Field.Row>
+						<Controller
+							name='clockMode'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<Select id={clockModeId} value={`${value}`} onChange={onChange} options={timeFormatOptions} />
+							)}
+						/>
+					</Field.Row>
+				</Field>
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={useEmojisId}>{t('Use_Emojis')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='useEmojis'
+								control={control}
+								render={({ field: { value, onChange, ref } }) => (
+									<ToggleSwitch id={useEmojisId} ref={ref} checked={value} onChange={onChange} />
+								)}
+							/>
+						</Field.Row>
+					</Box>
+				</Field>
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={convertAsciiEmojiId}>{t('Convert_Ascii_Emojis')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='convertAsciiEmoji'
+								control={control}
+								render={({ field: { value, onChange, ref } }) => (
+									<ToggleSwitch id={convertAsciiEmojiId} ref={ref} checked={value} onChange={onChange} />
+								)}
+							/>
+						</Field.Row>
+					</Box>
+				</Field>
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={autoImageLoadId}>{t('Auto_Load_Images')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='autoImageLoad'
+								control={control}
+								render={({ field: { value, onChange, ref } }) => (
+									<ToggleSwitch id={autoImageLoadId} ref={ref} checked={value} onChange={onChange} />
+								)}
+							/>
+						</Field.Row>
+					</Box>
+				</Field>
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={saveMobileBandwidthId}>{t('Save_Mobile_Bandwidth')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='saveMobileBandwidth'
+								control={control}
+								render={({ field: { value, onChange, ref } }) => (
+									<ToggleSwitch id={saveMobileBandwidthId} ref={ref} checked={value} onChange={onChange} />
+								)}
+							/>
+						</Field.Row>
+					</Box>
+				</Field>
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={collapseMediaByDefaultId}>{t('Collapse_Embedded_Media_By_Default')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='collapseMediaByDefault'
+								control={control}
+								render={({ field: { value, onChange, ref } }) => (
+									<ToggleSwitch id={collapseMediaByDefaultId} ref={ref} checked={value} onChange={onChange} />
+								)}
+							/>
+						</Field.Row>
+					</Box>
+				</Field>
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={hideUsernamesId}>{t('Hide_usernames')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='hideUsernames'
+								control={control}
+								render={({ field: { value, onChange, ref } }) => (
+									<ToggleSwitch id={hideUsernamesId} ref={ref} checked={value} onChange={onChange} />
+								)}
+							/>
+						</Field.Row>
+					</Box>
+				</Field>
+				{displayRolesEnabled && (
+					<Field>
+						<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+							<Field.Label htmlFor={hideRolesId}>{t('Hide_roles')}</Field.Label>
 							<Field.Row>
-								<ToggleSwitch checked={hideUsernames} onChange={handleHideUsernames} />
-							</Field.Row>
-						</Field>
-					),
-					[handleHideUsernames, hideUsernames, t],
-				)}
-				{useMemo(
-					() =>
-						showRoles && (
-							<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-								<Field.Label>{t('Hide_roles')}</Field.Label>
-								<Field.Row>
-									<ToggleSwitch checked={hideRoles} onChange={handleHideRoles} />
-								</Field.Row>
-							</Field>
-						),
-					[handleHideRoles, hideRoles, showRoles, t],
-				)}
-				{useMemo(
-					() => (
-						<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-							<Field.Label>{t('Hide_flextab')}</Field.Label>
-							<Field.Row>
-								<ToggleSwitch checked={hideFlexTab} onChange={handleHideFlexTab} />
-							</Field.Row>
-						</Field>
-					),
-					[handleHideFlexTab, hideFlexTab, t],
-				)}
-				{useMemo(
-					() => (
-						<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-							<Field.Label>{t('Display_avatars')}</Field.Label>
-							<Field.Row>
-								<ToggleSwitch checked={displayAvatars} onChange={handleDisplayAvatars} />
-							</Field.Row>
-						</Field>
-					),
-					[handleDisplayAvatars, displayAvatars, t],
-				)}
-				{useMemo(
-					() => (
-						<Field>
-							<Field.Label>{t('Enter_Behaviour')}</Field.Label>
-							<Field.Row>
-								<Select value={sendOnEnter} onChange={handleSendOnEnter} options={sendOnEnterOptions} />
+								<Controller
+									name='hideRoles'
+									control={control}
+									render={({ field: { value, onChange, ref } }) => (
+										<ToggleSwitch id={hideRolesId} ref={ref} checked={value} onChange={onChange} />
+									)}
+								/>
 							</Field.Row>
-							<Field.Hint>{t('Enter_Behaviour_Description')}</Field.Hint>
-						</Field>
-					),
-					[handleSendOnEnter, sendOnEnter, sendOnEnterOptions, t],
+						</Box>
+					</Field>
 				)}
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={hideFlexTabId}>{t('Hide_flextab')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='hideFlexTab'
+								control={control}
+								render={({ field: { value, onChange, ref } }) => (
+									<ToggleSwitch id={hideFlexTabId} ref={ref} checked={value} onChange={onChange} />
+								)}
+							/>
+						</Field.Row>
+					</Box>
+				</Field>
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={displayAvatarsId}>{t('Display_avatars')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='displayAvatars'
+								control={control}
+								render={({ field: { value, onChange, ref } }) => (
+									<ToggleSwitch id={displayAvatarsId} ref={ref} checked={value} onChange={onChange} />
+								)}
+							/>
+						</Field.Row>
+					</Box>
+				</Field>
+				<Field>
+					<Field.Label htmlFor={sendOnEnterId}>{t('Enter_Behaviour')}</Field.Label>
+					<Field.Row>
+						<Controller
+							name='sendOnEnter'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<Select id={sendOnEnterId} value={value} onChange={onChange} options={sendOnEnterOptions} />
+							)}
+						/>
+					</Field.Row>
+					<Field.Hint>{t('Enter_Behaviour_Description')}</Field.Hint>
+				</Field>
 			</FieldGroup>
 		</Accordion.Item>
 	);
diff --git a/apps/meteor/client/views/account/preferences/PreferencesMyDataSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesMyDataSection.tsx
index 67a1084a4950..0775b07cec3e 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesMyDataSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesMyDataSection.tsx
@@ -1,20 +1,15 @@
 import { Accordion, Field, FieldGroup, ButtonGroup, Button, Box } from '@rocket.chat/fuselage';
 import { useSetModal, useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import React, { useCallback } from 'react';
 
 import MyDataModal from './MyDataModal';
 
-const PreferencesMyDataSection = ({ ...props }): ReactElement => {
+const PreferencesMyDataSection = () => {
 	const t = useTranslation();
-
 	const setModal = useSetModal();
-
-	const requestDataDownload = useMethod('requestDataDownload');
-
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	const closeModal = useCallback(() => setModal(null), [setModal]);
+	const requestDataDownload = useMethod('requestDataDownload');
 
 	const downloadData = useCallback(
 		async (fullExport) => {
@@ -28,7 +23,7 @@ const PreferencesMyDataSection = ({ ...props }): ReactElement => {
 						<MyDataModal
 							title={t('UserDataDownload_Requested')}
 							text={<Box dangerouslySetInnerHTML={{ __html: text }} />}
-							onCancel={closeModal}
+							onCancel={() => setModal(null)}
 						/>,
 					);
 					return;
@@ -46,7 +41,7 @@ const PreferencesMyDataSection = ({ ...props }): ReactElement => {
 							<MyDataModal
 								title={t('UserDataDownload_Requested')}
 								text={<Box dangerouslySetInnerHTML={{ __html: text }} />}
-								onCancel={closeModal}
+								onCancel={() => setModal(null)}
 							/>,
 						);
 
@@ -60,26 +55,26 @@ const PreferencesMyDataSection = ({ ...props }): ReactElement => {
 						<MyDataModal
 							title={t('UserDataDownload_Requested')}
 							text={<Box dangerouslySetInnerHTML={{ __html: text }} />}
-							onCancel={closeModal}
+							onCancel={() => setModal(null)}
 						/>,
 					);
 
 					return;
 				}
 
-				setModal(<MyDataModal title={t('UserDataDownload_Requested')} onCancel={closeModal} />);
+				setModal(<MyDataModal title={t('UserDataDownload_Requested')} onCancel={() => setModal(null)} />);
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });
 			}
 		},
-		[closeModal, dispatchToastMessage, requestDataDownload, setModal, t],
+		[dispatchToastMessage, requestDataDownload, setModal, t],
 	);
 
 	const handleClickDownload = useCallback(() => downloadData(false), [downloadData]);
 	const handleClickExport = useCallback(() => downloadData(true), [downloadData]);
 
 	return (
-		<Accordion.Item title={t('My Data')} {...props}>
+		<Accordion.Item title={t('My Data')}>
 			<FieldGroup>
 				<Field>
 					<Field.Row>
diff --git a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
index 634c5f555343..e0a6017e7efe 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
@@ -1,13 +1,12 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Accordion, Field, Select, FieldGroup, ToggleSwitch, Button, Box } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useUserPreference, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 
 import { KonchatNotification } from '../../../../app/ui/client/lib/KonchatNotification';
-import { useForm } from '../../../hooks/useForm';
-import type { FormSectionProps } from './AccountPreferencesPage';
 
 const notificationOptionsLabelMap = {
 	all: 'All_messages',
@@ -20,19 +19,12 @@ const emailNotificationOptionsLabelMap = {
 	nothing: 'Email_Notification_Mode_Disabled',
 };
 
-const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: FormSectionProps): ReactElement => {
+// TODO: Test Notification Button not working
+const PreferencesNotificationsSection = () => {
 	const t = useTranslation();
 
 	const [notificationsPermission, setNotificationsPermission] = useState<NotificationPermission>();
 
-	const userDesktopNotificationRequireInteraction = useUserPreference('desktopNotificationRequireInteraction');
-	const userDesktopNotifications = useUserPreference('desktopNotifications');
-	const userMobileNotifications = useUserPreference('pushNotifications');
-	const userEmailNotificationMode = useUserPreference('emailNotificationMode') as keyof typeof emailNotificationOptionsLabelMap;
-	const userReceiveLoginDetectionEmail = useUserPreference('receiveLoginDetectionEmail');
-	const userNotifyCalendarEvents = useUserPreference('notifyCalendarEvents');
-	const userEnableMobileRinging = useUserPreference('enableMobileRinging');
-
 	const defaultDesktopNotifications = useSetting(
 		'Accounts_Default_User_Preferences_desktopNotifications',
 	) as keyof typeof notificationOptionsLabelMap;
@@ -47,51 +39,10 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 	const showCalendarPreference = useSetting('Outlook_Calendar_Enabled');
 	const showMobileRinging = useSetting('VideoConf_Mobile_Ringing');
 
-	const { values, handlers, commit } = useForm(
-		{
-			desktopNotificationRequireInteraction: userDesktopNotificationRequireInteraction,
-			desktopNotifications: userDesktopNotifications,
-			pushNotifications: userMobileNotifications,
-			emailNotificationMode: userEmailNotificationMode,
-			receiveLoginDetectionEmail: userReceiveLoginDetectionEmail,
-			notifyCalendarEvents: userNotifyCalendarEvents,
-			enableMobileRinging: userEnableMobileRinging,
-		},
-		onChange,
-	);
-
-	const {
-		desktopNotificationRequireInteraction,
-		desktopNotifications,
-		pushNotifications,
-		emailNotificationMode,
-		receiveLoginDetectionEmail,
-		notifyCalendarEvents,
-		enableMobileRinging,
-	} = values as {
-		desktopNotificationRequireInteraction: boolean;
-		desktopNotifications: string;
-		pushNotifications: string;
-		emailNotificationMode: string;
-		receiveLoginDetectionEmail: boolean;
-		notifyCalendarEvents: boolean;
-		enableMobileRinging: boolean;
-	};
-
-	const {
-		handleDesktopNotificationRequireInteraction,
-		handleDesktopNotifications,
-		handlePushNotifications,
-		handleEmailNotificationMode,
-		handleReceiveLoginDetectionEmail,
-		handleNotifyCalendarEvents,
-		handleEnableMobileRinging,
-	} = handlers;
+	const userEmailNotificationMode = useUserPreference('emailNotificationMode') as keyof typeof emailNotificationOptionsLabelMap;
 
 	useEffect(() => setNotificationsPermission(window.Notification && Notification.permission), []);
 
-	commitRef.current.notifications = commit;
-
 	const onSendNotification = useCallback(() => {
 		KonchatNotification.notify({
 			payload: { sender: { _id: 'rocket.cat', username: 'rocket.cat' } },
@@ -127,8 +78,18 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 		return options;
 	}, [t, userEmailNotificationMode]);
 
+	const { control } = useFormContext();
+
+	const notificationRequireId = useUniqueId();
+	const desktopNotificationsId = useUniqueId();
+	const pushNotificationsId = useUniqueId();
+	const emailNotificationModeId = useUniqueId();
+	const receiveLoginDetectionEmailId = useUniqueId();
+	const notifyCalendarEventsId = useUniqueId();
+	const enableMobileRingingId = useUniqueId();
+
 	return (
-		<Accordion.Item title={t('Notifications')} {...props}>
+		<Accordion.Item title={t('Notifications')}>
 			<FieldGroup>
 				<Field>
 					<Field.Label>{t('Desktop_Notifications')}</Field.Label>
@@ -152,70 +113,123 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 				</Field>
 				<Field>
 					<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
-						<Field.Label>{t('Notification_RequireInteraction')}</Field.Label>
+						<Field.Label htmlFor={notificationRequireId}>{t('Notification_RequireInteraction')}</Field.Label>
 						<Field.Row>
-							<ToggleSwitch checked={desktopNotificationRequireInteraction} onChange={handleDesktopNotificationRequireInteraction} />
+							<Controller
+								name='desktopNotificationRequireInteraction'
+								control={control}
+								render={({ field: { ref, value, onChange } }) => (
+									<ToggleSwitch
+										aria-describedby={`${notificationRequireId}-hint`}
+										id={notificationRequireId}
+										ref={ref}
+										checked={value}
+										onChange={onChange}
+									/>
+								)}
+							/>
 						</Field.Row>
 					</Box>
-					<Field.Hint>{t('Only_works_with_chrome_version_greater_50')}</Field.Hint>
+					<Field.Hint id={`${notificationRequireId}-hint`}>{t('Only_works_with_chrome_version_greater_50')}</Field.Hint>
 				</Field>
 				<Field>
-					<Field.Label>{t('Notification_Desktop_Default_For')}</Field.Label>
+					<Field.Label htmlFor={desktopNotificationsId}>{t('Notification_Desktop_Default_For')}</Field.Label>
 					<Field.Row>
-						<Select value={desktopNotifications} onChange={handleDesktopNotifications} options={desktopNotificationOptions} />
+						<Controller
+							name='desktopNotifications'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<Select id={desktopNotificationsId} value={value} onChange={onChange} options={desktopNotificationOptions} />
+							)}
+						/>
 					</Field.Row>
 				</Field>
 				<Field>
-					<Field.Label>{t('Notification_Push_Default_For')}</Field.Label>
+					<Field.Label htmlFor={pushNotificationsId}>{t('Notification_Push_Default_For')}</Field.Label>
 					<Field.Row>
-						<Select value={pushNotifications} onChange={handlePushNotifications} options={mobileNotificationOptions} />
+						<Controller
+							name='pushNotifications'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<Select id={pushNotificationsId} value={value} onChange={onChange} options={mobileNotificationOptions} />
+							)}
+						/>
 					</Field.Row>
 				</Field>
 				<Field>
-					<Field.Label>{t('Email_Notification_Mode')}</Field.Label>
+					<Field.Label htmlFor={emailNotificationModeId}>{t('Email_Notification_Mode')}</Field.Label>
 					<Field.Row>
-						<Select
-							disabled={!canChangeEmailNotification}
-							value={emailNotificationMode}
-							onChange={handleEmailNotificationMode}
-							options={emailNotificationOptions}
+						<Controller
+							name='emailNotificationMode'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<Select
+									aria-describedby={`${emailNotificationModeId}-hint`}
+									id={emailNotificationModeId}
+									disabled={!canChangeEmailNotification}
+									value={value}
+									onChange={onChange}
+									options={emailNotificationOptions}
+								/>
+							)}
 						/>
 					</Field.Row>
-					<Field.Hint>
+					<Field.Hint id={`${emailNotificationModeId}-hint`}>
 						{canChangeEmailNotification && t('You_need_to_verifiy_your_email_address_to_get_notications')}
 						{!canChangeEmailNotification && t('Email_Notifications_Change_Disabled')}
 					</Field.Hint>
 				</Field>
-
 				{showNewLoginEmailPreference && (
 					<Field>
 						<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
-							<Field.Label>{t('Receive_Login_Detection_Emails')}</Field.Label>
+							<Field.Label htmlFor={receiveLoginDetectionEmailId}>{t('Receive_Login_Detection_Emails')}</Field.Label>
 							<Field.Row>
-								<ToggleSwitch checked={receiveLoginDetectionEmail} onChange={handleReceiveLoginDetectionEmail} />
+								<Controller
+									name='receiveLoginDetectionEmail'
+									control={control}
+									render={({ field: { ref, value, onChange } }) => (
+										<ToggleSwitch
+											aria-describedby={`${receiveLoginDetectionEmailId}-hint`}
+											id={receiveLoginDetectionEmailId}
+											ref={ref}
+											checked={value}
+											onChange={onChange}
+										/>
+									)}
+								/>
 							</Field.Row>
 						</Box>
-						<Field.Hint>{t('Receive_Login_Detection_Emails_Description')}</Field.Hint>
+						<Field.Hint id={`${receiveLoginDetectionEmailId}-hint`}>{t('Receive_Login_Detection_Emails_Description')}</Field.Hint>
 					</Field>
 				)}
-
 				{showCalendarPreference && (
 					<Field>
 						<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
-							<Field.Label>{t('Notify_Calendar_Events')}</Field.Label>
+							<Field.Label htmlFor={notifyCalendarEventsId}>{t('Notify_Calendar_Events')}</Field.Label>
 							<Field.Row>
-								<ToggleSwitch checked={notifyCalendarEvents} onChange={handleNotifyCalendarEvents} />
+								<Controller
+									name='notifyCalendarEvents'
+									control={control}
+									render={({ field: { ref, value, onChange } }) => (
+										<ToggleSwitch id={notifyCalendarEventsId} ref={ref} checked={value} onChange={onChange} />
+									)}
+								/>
 							</Field.Row>
 						</Box>
 					</Field>
 				)}
-
 				{showMobileRinging && (
 					<Field>
 						<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
-							<Field.Label>{t('VideoConf_Mobile_Ringing')}</Field.Label>
+							<Field.Label htmlFor={enableMobileRingingId}>{t('VideoConf_Mobile_Ringing')}</Field.Label>
 							<Field.Row>
-								<ToggleSwitch checked={enableMobileRinging} onChange={handleEnableMobileRinging} />
+								<Controller
+									name='enableMobileRinging'
+									control={control}
+									render={({ field: { ref, value, onChange } }) => (
+										<ToggleSwitch id={enableMobileRingingId} ref={ref} checked={value} onChange={onChange} />
+									)}
+								/>
 							</Field.Row>
 						</Box>
 					</Field>
diff --git a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
index c31b4887cf8d..ac6a802b1e1d 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
@@ -1,124 +1,107 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Accordion, Field, Select, FieldGroup, ToggleSwitch, Tooltip, Box } from '@rocket.chat/fuselage';
-import { useUserPreference, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
-import React, { useMemo, useCallback } from 'react';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useTranslation, useCustomSound } from '@rocket.chat/ui-contexts';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 
-import { CustomSounds } from '../../../../app/custom-sounds/client';
-import { useForm } from '../../../hooks/useForm';
-import type { FormSectionProps } from './AccountPreferencesPage';
-
-type Values = {
-	newRoomNotification: string;
-	newMessageNotification: string;
-	muteFocusedConversations: boolean;
-	notificationsSoundVolume: number;
-};
-const useCustomSoundsOptions = (): SelectOption[] => useMemo(() => CustomSounds?.getList?.().map(({ _id, name }) => [_id, name]), []);
-
-const PreferencesSoundSection = ({ onChange, commitRef, ...props }: FormSectionProps): ReactElement => {
+const PreferencesSoundSection = () => {
 	const t = useTranslation();
 
-	const soundsList = useCustomSoundsOptions();
-
-	const settings = {
-		newRoomNotification: useUserPreference('newRoomNotification'),
-		newMessageNotification: useUserPreference('newMessageNotification'),
-		muteFocusedConversations: useUserPreference('muteFocusedConversations'),
-		notificationsSoundVolume: useUserPreference('notificationsSoundVolume'),
-	};
+	const customSound = useCustomSound();
+	const soundsList: SelectOption[] = customSound?.getList()?.map((value) => [value._id, value.name]) || [];
+	const { control, watch } = useFormContext();
+	const { newMessageNotification, notificationsSoundVolume } = watch();
 
-	const { values, handlers, commit } = useForm(settings, onChange);
-
-	const { newRoomNotification, newMessageNotification, muteFocusedConversations, notificationsSoundVolume } = values as Values;
-
-	const { handleNewRoomNotification, handleNewMessageNotification, handleMuteFocusedConversations, handleNotificationsSoundVolume } =
-		handlers;
-
-	const onChangeNewRoomNotification = useCallback(
-		(value) => {
-			handleNewRoomNotification(value);
-			CustomSounds.play(value, { volume: notificationsSoundVolume / 100 });
-		},
-		[handleNewRoomNotification, notificationsSoundVolume],
-	);
-
-	const onChangeNewMessageNotification = useCallback(
-		(value) => {
-			handleNewMessageNotification(value);
-			CustomSounds.play(value, { volume: notificationsSoundVolume / 100 });
-		},
-		[handleNewMessageNotification, notificationsSoundVolume],
-	);
-
-	const onChangeNotificationsSoundVolume = useCallback(
-		(e) => {
-			CustomSounds.play(newMessageNotification, { volume: e.currentTarget.value / 100 });
-			handleNotificationsSoundVolume(Math.max(0, Math.min(Number(e.currentTarget.value), 100)));
-		},
-		[handleNotificationsSoundVolume, newMessageNotification],
-	);
-
-	commitRef.current.sound = commit;
+	const newRoomNotificationId = useUniqueId();
+	const newMessageNotificationId = useUniqueId();
+	const muteFocusedConversationsId = useUniqueId();
+	const notificationsSoundVolumeId = useUniqueId();
 
 	return (
-		<Accordion.Item title={t('Sound')} {...props}>
+		<Accordion.Item title={t('Sound')}>
 			<FieldGroup>
-				{useMemo(
-					() => (
-						<Field>
-							<Field.Label>{t('New_Room_Notification')}</Field.Label>
-							<Field.Row>
-								<Select value={newRoomNotification} onChange={onChangeNewRoomNotification} options={soundsList} />
-							</Field.Row>
-						</Field>
-					),
-					[onChangeNewRoomNotification, newRoomNotification, soundsList, t],
-				)}
-				{useMemo(
-					() => (
-						<Field>
-							<Field.Label>{t('New_Message_Notification')}</Field.Label>
-							<Field.Row>
-								<Select value={newMessageNotification} onChange={onChangeNewMessageNotification} options={soundsList} />
-							</Field.Row>
-						</Field>
-					),
-					[onChangeNewMessageNotification, newMessageNotification, soundsList, t],
-				)}
-				{useMemo(
-					() => (
-						<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-							<Field.Label>{t('Mute_Focused_Conversations')}</Field.Label>
-							<Field.Row>
-								<ToggleSwitch checked={muteFocusedConversations} onChange={handleMuteFocusedConversations} />
-							</Field.Row>
-						</Field>
-					),
-					[handleMuteFocusedConversations, muteFocusedConversations, t],
-				)}
-				{useMemo(
-					() => (
-						<Field>
-							<Field.Label>{t('Notifications_Sound_Volume')}</Field.Label>
-							<Field.Row>
+				<Field>
+					<Field.Label htmlFor={newRoomNotificationId}>{t('New_Room_Notification')}</Field.Label>
+					<Field.Row>
+						<Controller
+							name='newRoomNotification'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<Select
+									id={newRoomNotificationId}
+									value={value}
+									onChange={(value) => {
+										onChange(value);
+										customSound.play(value, { volume: notificationsSoundVolume / 100 });
+									}}
+									options={soundsList}
+								/>
+							)}
+						/>
+					</Field.Row>
+				</Field>
+				<Field>
+					<Field.Label htmlFor={newMessageNotificationId}>{t('New_Message_Notification')}</Field.Label>
+					<Field.Row>
+						<Controller
+							name='newMessageNotification'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<Select
+									id={newMessageNotificationId}
+									value={value}
+									onChange={(value) => {
+										onChange(value);
+										customSound.play(value, { volume: notificationsSoundVolume / 100 });
+									}}
+									options={soundsList}
+								/>
+							)}
+						/>
+					</Field.Row>
+				</Field>
+				<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+					<Field.Label htmlFor={muteFocusedConversationsId}>{t('Mute_Focused_Conversations')}</Field.Label>
+					<Field.Row>
+						<Controller
+							name='muteFocusedConversations'
+							control={control}
+							render={({ field: { ref, value, onChange } }) => (
+								<ToggleSwitch id={muteFocusedConversationsId} ref={ref} checked={value} onChange={onChange} />
+							)}
+						/>
+					</Field.Row>
+				</Field>
+				<Field>
+					<Field.Label htmlFor={notificationsSoundVolumeId}>{t('Notifications_Sound_Volume')}</Field.Label>
+					<Field.Row>
+						<Controller
+							name='notificationsSoundVolume'
+							control={control}
+							render={({ field: { onChange, value, ref } }) => (
 								<Box
+									id={notificationsSoundVolumeId}
+									ref={ref}
 									is='input'
 									flexGrow={1}
 									type='range'
-									value={notificationsSoundVolume}
-									onChange={onChangeNotificationsSoundVolume}
 									min='0'
 									max='100'
+									value={value}
+									onChange={(e: ChangeEvent<HTMLInputElement>) => {
+										customSound.play(newMessageNotification, { volume: notificationsSoundVolume / 100 });
+										onChange(Math.max(0, Math.min(Number(e.currentTarget.value), 100)));
+									}}
 								/>
-								<Tooltip placement='right' mis={8}>
-									{notificationsSoundVolume}
-								</Tooltip>
-							</Field.Row>
-						</Field>
-					),
-					[notificationsSoundVolume, onChangeNotificationsSoundVolume, t],
-				)}
+							)}
+						/>
+						<Tooltip placement='right' mis={8}>
+							{notificationsSoundVolume}
+						</Tooltip>
+					</Field.Row>
+				</Field>
 			</FieldGroup>
 		</Accordion.Item>
 	);
diff --git a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
index a3c73519bb70..3a075c50f7d7 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
@@ -1,45 +1,37 @@
-import { Accordion, Field, NumberInput, FieldGroup, ToggleSwitch } from '@rocket.chat/fuselage';
-import { useUserPreference, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
-import React, { useCallback } from 'react';
+import { Accordion, Field, NumberInput, FieldGroup, ToggleSwitch, Box } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 
-import { useForm } from '../../../hooks/useForm';
-import type { FormSectionProps } from './AccountPreferencesPage';
-
-const PreferencesUserPresenceSection = ({ onChange, commitRef, ...props }: FormSectionProps): ReactElement => {
+const PreferencesUserPresenceSection = () => {
 	const t = useTranslation();
-	const userEnableAutoAway = useUserPreference('enableAutoAway');
-	const userIdleTimeLimit = useUserPreference('idleTimeLimit');
-
-	const { values, handlers, commit } = useForm(
-		{
-			enableAutoAway: userEnableAutoAway,
-			idleTimeLimit: userIdleTimeLimit,
-		},
-		onChange,
-	);
-
-	const { enableAutoAway, idleTimeLimit } = values as { enableAutoAway: boolean; idleTimeLimit: string | number | string[] };
-
-	const { handleEnableAutoAway, handleIdleTimeLimit } = handlers;
+	const { register, control } = useFormContext();
 
-	commitRef.current.userPreference = commit;
-
-	const onChangeIdleTimeLimit = useCallback((e) => handleIdleTimeLimit(Number(e.currentTarget.value)), [handleIdleTimeLimit]);
+	const enableAutoAwayId = useUniqueId();
+	const idleTimeLimit = useUniqueId();
 
 	return (
-		<Accordion.Item title={t('User_Presence')} {...props}>
+		<Accordion.Item title={t('User_Presence')}>
 			<FieldGroup>
-				<Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-					<Field.Label>{t('Enable_Auto_Away')}</Field.Label>
-					<Field.Row>
-						<ToggleSwitch checked={enableAutoAway} onChange={handleEnableAutoAway} />
-					</Field.Row>
+				<Field>
+					<Box display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
+						<Field.Label htmlFor={enableAutoAwayId}>{t('Enable_Auto_Away')}</Field.Label>
+						<Field.Row>
+							<Controller
+								name='enableAutoAway'
+								control={control}
+								render={({ field: { ref, value, onChange } }) => (
+									<ToggleSwitch ref={ref} id={enableAutoAwayId} checked={value} onChange={onChange} />
+								)}
+							/>
+						</Field.Row>
+					</Box>
 				</Field>
 				<Field>
-					<Field.Label>{t('Idle_Time_Limit')}</Field.Label>
+					<Field.Label htmlFor={idleTimeLimit}>{t('Idle_Time_Limit')}</Field.Label>
 					<Field.Row>
-						<NumberInput value={idleTimeLimit} onChange={onChangeIdleTimeLimit} />
+						<NumberInput id={idleTimeLimit} {...register('idleTimeLimit')} />
 					</Field.Row>
 				</Field>
 			</FieldGroup>
diff --git a/apps/meteor/client/views/account/preferences/useAccountPreferencesValues.ts b/apps/meteor/client/views/account/preferences/useAccountPreferencesValues.ts
new file mode 100644
index 000000000000..a849558c3f86
--- /dev/null
+++ b/apps/meteor/client/views/account/preferences/useAccountPreferencesValues.ts
@@ -0,0 +1,113 @@
+import { useUserPreference } from '@rocket.chat/ui-contexts';
+
+export type AccountPreferencesData = {
+	language?: string;
+	dontAskAgainList?: string[];
+	enableAutoAway?: boolean;
+	idleTimeLimit?: number;
+	desktopNotificationRequireInteraction?: boolean;
+	desktopNotifications?: string;
+	pushNotifications?: string;
+	emailNotificationMode?: string;
+	receiveLoginDetectionEmail?: boolean;
+	notifyCalendarEvents?: boolean;
+	enableMobileRinging?: boolean;
+	unreadAlert?: boolean;
+	showThreadsInMainChannel?: boolean;
+	alsoSendThreadToChannel?: 'default' | 'always' | 'never';
+	useEmojis?: boolean;
+	convertAsciiEmoji?: boolean;
+	autoImageLoad?: boolean;
+	saveMobileBandwidth?: boolean;
+	collapseMediaByDefault?: boolean;
+	hideUsernames?: boolean;
+	hideRoles?: boolean;
+	hideFlexTab?: boolean;
+	clockMode?: 0 | 1 | 2;
+	sendOnEnter?: 'normal' | 'alternative' | 'desktop';
+	highlights?: string;
+	newRoomNotification?: string;
+	newMessageNotification?: string;
+	muteFocusedConversations?: boolean;
+
+	enableNewMessageTemplate?: boolean;
+	displayAvatars?: boolean;
+	sidebarShowFavorites?: boolean;
+	sidebarShowUnread?: boolean;
+	sidebarSortby?: string;
+	sidebarViewMode?: string;
+	sidebarDisplayAvatar?: boolean;
+	sidebarGroupByType?: boolean;
+	notificationsSoundVolume?: number;
+};
+
+export const useAccountPreferencesValues = (): AccountPreferencesData => {
+	const language = useUserPreference<string>('language');
+	const userDontAskAgainList = useUserPreference<{ action: string; label: string }[]>('dontAskAgainList') || [];
+	const dontAskAgainList = userDontAskAgainList.map(({ action }) => action);
+	const enableAutoAway = useUserPreference<boolean>('enableAutoAway');
+	const idleTimeLimit = useUserPreference<number>('idleTimeLimit');
+
+	const desktopNotificationRequireInteraction = useUserPreference<boolean>('desktopNotificationRequireInteraction');
+	const desktopNotifications = useUserPreference<string>('desktopNotifications');
+	const pushNotifications = useUserPreference<string>('pushNotifications');
+	const emailNotificationMode = useUserPreference<string>('emailNotificationMode');
+	const receiveLoginDetectionEmail = useUserPreference<boolean>('receiveLoginDetectionEmail');
+	const notifyCalendarEvents = useUserPreference<boolean>('notifyCalendarEvents');
+	const enableMobileRinging = useUserPreference<boolean>('enableMobileRinging');
+
+	const unreadAlert = useUserPreference<boolean>('unreadAlert');
+	const showThreadsInMainChannel = useUserPreference<boolean>('showThreadsInMainChannel');
+	const alsoSendThreadToChannel = useUserPreference<'default' | 'always' | 'never'>('alsoSendThreadToChannel');
+	const useEmojis = useUserPreference<boolean>('useEmojis');
+	const convertAsciiEmoji = useUserPreference<boolean>('convertAsciiEmoji');
+	const autoImageLoad = useUserPreference<boolean>('autoImageLoad');
+	const saveMobileBandwidth = useUserPreference<boolean>('saveMobileBandwidth');
+	const collapseMediaByDefault = useUserPreference<boolean>('collapseMediaByDefault');
+	const hideUsernames = useUserPreference<boolean>('hideUsernames');
+	const hideRoles = useUserPreference<boolean>('hideRoles');
+	const hideFlexTab = useUserPreference<boolean>('hideFlexTab');
+	const clockMode = useUserPreference<0 | 1 | 2>('clockMode') ?? 0;
+	const sendOnEnter = useUserPreference<'normal' | 'alternative' | 'desktop'>('sendOnEnter');
+	const displayAvatars = useUserPreference<boolean>('displayAvatars');
+
+	const highlights = useUserPreference<string[]>('highlights')?.join(',\n') ?? '';
+
+	const newRoomNotification = useUserPreference<string>('newRoomNotification');
+	const newMessageNotification = useUserPreference<string>('newMessageNotification');
+	const muteFocusedConversations = useUserPreference<boolean>('muteFocusedConversations');
+	const notificationsSoundVolume = useUserPreference<number>('notificationsSoundVolume');
+
+	return {
+		language,
+		dontAskAgainList,
+		enableAutoAway,
+		idleTimeLimit,
+		desktopNotificationRequireInteraction,
+		desktopNotifications,
+		pushNotifications,
+		emailNotificationMode,
+		receiveLoginDetectionEmail,
+		notifyCalendarEvents,
+		enableMobileRinging,
+		unreadAlert,
+		showThreadsInMainChannel,
+		alsoSendThreadToChannel,
+		useEmojis,
+		convertAsciiEmoji,
+		autoImageLoad,
+		saveMobileBandwidth,
+		collapseMediaByDefault,
+		hideUsernames,
+		hideRoles,
+		hideFlexTab,
+		clockMode,
+		sendOnEnter,
+		displayAvatars,
+		highlights,
+		newRoomNotification,
+		newMessageNotification,
+		muteFocusedConversations,
+		notificationsSoundVolume,
+	};
+};