From 674dfd66a8a6a566232f56db094f823319051993 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Fri, 9 Jan 2026 22:18:46 +0530
Subject: [PATCH 01/15] feat: apply font size scaling feature across all
 components

- Apply scaleFontSize to all Text components throughout the application
- Update Directory pages (DirectoryItem, DirectoryOptions)
- Update Reactions components (Reactions, ReactionsList, AllTab)
- Update ListPicker components across multiple views
- Update RoomInfoView components (ItemLabel, RoomInfoTag, Direct, Livechat)
- Update various view components (JoinCode, LoadMore, AuthLoadingView, etc.)
- Fix TypeScript errors by using object spread for style props
- Ensure all user-facing text respects font size preference setting
---
 .../index.tsx                                 | 14 ++--
 .../ActionSheet/BottomSheetContent.tsx        |  4 +-
 app/containers/ActionSheet/Item.tsx           |  6 +-
 app/containers/ActionSheet/styles.ts          |  5 --
 app/containers/AppVersion.tsx                 |  7 +-
 app/containers/BackgroundContainer/index.tsx  |  5 +-
 app/containers/Button/index.tsx               | 12 ++-
 app/containers/CallHeader.tsx                 |  8 +-
 app/containers/ChangePasswordRequired.tsx     | 10 +--
 app/containers/Chip/index.tsx                 |  5 +-
 app/containers/CollapsibleText/index.tsx      | 12 +--
 app/containers/DirectoryItem/index.tsx        |  7 +-
 .../HeaderButton/HeaderButtonItem.tsx         | 16 ++--
 .../Header/components/HeaderTitle/index.tsx   | 10 ++-
 .../Header/components/HeaderTitle/styles.ts   |  4 -
 .../InAppNotification/NotifierComponent.tsx   | 10 +--
 app/containers/List/ListHeader.tsx            |  5 +-
 app/containers/List/ListInfo.tsx              |  6 +-
 app/containers/List/ListItem.tsx              |  8 +-
 app/containers/MessageActions/Header.tsx      |  5 +-
 .../components/ComposerInput.tsx              |  8 +-
 .../components/EmojiSearchbar.tsx             |  7 +-
 .../components/Quotes/Quote.tsx               | 14 ++--
 .../components/RecordAudio/Duration.tsx       |  4 +-
 .../components/RecordAudio/RecordAudio.tsx    |  5 +-
 .../components/SendThreadToChannel.tsx        |  5 +-
 app/containers/MessageSeparator.tsx           | 11 +--
 app/containers/OrSeparator.tsx                |  5 +-
 app/containers/ReactionsList/AllTab.tsx       |  8 +-
 app/containers/ReactionsList/UsersList.tsx    |  6 +-
 app/containers/ReactionsList/index.tsx        |  6 +-
 app/containers/RoomItem/LastMessage.tsx       |  5 +-
 app/containers/RoomItem/RoomItem.stories.tsx  |  3 +-
 app/containers/RoomItem/RoomItem.tsx          | 20 ++---
 app/containers/RoomItem/Tag.tsx               |  4 +-
 app/containers/RoomItem/Title.tsx             | 19 +++--
 app/containers/RoomItem/UpdatedAt.tsx         |  5 +-
 app/containers/RoomItem/Wrapper.tsx           |  7 +-
 app/containers/RoomItem/styles.ts             | 36 ++++++---
 app/containers/SearchHeader.tsx               |  5 +-
 app/containers/TextInput/FormTextInput.tsx    | 19 ++---
 app/containers/ThreadDetails.tsx              |  7 +-
 app/containers/Toast.tsx                      |  5 +-
 app/containers/UnreadBadge/index.tsx          |  6 +-
 app/containers/UserGeneratedContentRules.tsx  | 10 +--
 app/containers/UserItem.tsx                   |  5 +-
 .../markdown/components/Heading.tsx           | 15 +++-
 .../markdown/components/InlineCode.tsx        |  6 +-
 .../markdown/components/Paragraph.tsx         |  4 +-
 app/containers/markdown/components/Plain.tsx  |  4 +-
 .../markdown/components/Preview.tsx           | 25 +++++--
 .../markdown/components/code/CodeLine.tsx     |  4 +-
 .../markdown/components/inline/Link.tsx       |  4 +-
 .../components/mentions/AtMention.tsx         |  9 ++-
 .../markdown/components/mentions/Hashtag.tsx  |  7 +-
 app/containers/markdown/styles.ts             |  1 +
 .../Attachments/CollapsibleQuote/index.tsx    | 10 +--
 .../message/Components/Attachments/Reply.tsx  | 13 ++--
 .../message/Components/Attachments/Video.tsx  |  7 +-
 app/containers/message/Message.stories.tsx    |  3 +-
 app/containers/message/Reactions.tsx          |  6 +-
 app/containers/message/Time.tsx               |  4 +-
 app/containers/message/Urls.tsx               |  8 +-
 app/containers/message/User.tsx               | 12 +--
 app/i18n/locales/en.json                      |  6 ++
 app/lib/constants/keys.ts                     |  1 +
 .../useResponsiveLayout.tsx                   | 54 ++++++++++++--
 .../components/ListPicker.tsx                 |  6 +-
 app/views/AuthLoadingView.tsx                 |  4 +-
 .../DepartmentFilter/DepartmentItemFilter.tsx |  4 +-
 .../RoomSettings/SwitchItem.tsx               |  6 +-
 app/views/DirectoryView/Options.tsx           |  6 +-
 .../DiscussionsView/DiscussionDetails.tsx     |  6 +-
 app/views/ForgotPasswordView.tsx              |  6 +-
 app/views/LoginView/UserForm.tsx              | 10 ++-
 .../MediaAutoDownloadView/ListPicker.tsx      |  6 +-
 .../ServersHistoryItem.stories.tsx            |  3 +-
 .../NotificationPreferencesView/index.tsx     |  4 +-
 app/views/PickerView.tsx                      |  4 +-
 .../DeleteAccountActionSheetContent/index.tsx | 12 ++-
 app/views/RegisterView/index.tsx              |  6 +-
 app/views/RoomInfoView/Direct.tsx             |  4 +-
 app/views/RoomInfoView/Livechat.tsx           |  4 +-
 .../RoomInfoView/components/ItemLabel.tsx     |  4 +-
 .../RoomInfoView/components/RoomInfoTag.tsx   |  4 +-
 .../components/RoomInfoViewTitle.tsx          | 10 ++-
 app/views/RoomView/JoinCode.tsx               |  4 +-
 app/views/RoomView/LoadMore/index.tsx         |  4 +-
 app/views/RoomsListView/components/Header.tsx |  6 +-
 app/views/SelectedUsersView/Header.tsx        |  4 +-
 app/views/SendEmailConfirmationView.tsx       |  2 +-
 app/views/SetUsernameView.tsx                 |  8 +-
 .../ListPicker.tsx                            |  4 +-
 .../UserPreferencesView/FontSizePicker.tsx    | 73 +++++++++++++++++++
 app/views/UserPreferencesView/ListPicker.tsx  |  4 +-
 app/views/UserPreferencesView/index.tsx       | 10 +++
 96 files changed, 545 insertions(+), 280 deletions(-)
 create mode 100644 app/views/UserPreferencesView/FontSizePicker.tsx

diff --git a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
index d4315d2b375..111e831fae8 100644
--- a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
+++ b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
@@ -9,12 +9,11 @@ import sharedStyles from '../../../views/Styles';
 import Button from '../../Button';
 import { FormTextInput } from '../../TextInput/FormTextInput';
 import { useActionSheet } from '../Provider';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	subtitleText: {
-		...sharedStyles.textRegular,
-		fontSize: 16,
-		lineHeight: 24
+		...sharedStyles.textRegular
 	},
 	buttonSeparator: {
 		marginRight: 12
@@ -24,9 +23,7 @@ const styles = StyleSheet.create({
 		paddingTop: 16
 	},
 	titleContainerText: {
-		...sharedStyles.textBold,
-		fontSize: 16,
-		lineHeight: 24
+		...sharedStyles.textBold
 	},
 	titleContainer: {
 		paddingRight: 80,
@@ -106,6 +103,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 	autoComplete?: TextInputProps['autoComplete'];
 }): React.ReactElement => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const [inputValues, setInputValues] = useState(inputs.map(() => ''));
 	const inputRefs = useRef(inputs.map(() => React.createRef()));
 
@@ -170,9 +168,9 @@ const ActionSheetContentWithInputAndSubmit = ({
 			<>
 				<View accessible accessibilityLabel={title} style={styles.titleContainer}>
 					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
-					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 12 : 0 }]}>{title}</Text>
+					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 12 : 0, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{title}</Text>
 				</View>
-				{description ? <Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</Text> : null}
+				{description ? <Text style={[styles.subtitleText, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{description}</Text> : null}
 				{customText}
 			</>
 			{showInput ? renderInputs() : null}
diff --git a/app/containers/ActionSheet/BottomSheetContent.tsx b/app/containers/ActionSheet/BottomSheetContent.tsx
index 267c4b7a20d..61a27a1ad4a 100644
--- a/app/containers/ActionSheet/BottomSheetContent.tsx
+++ b/app/containers/ActionSheet/BottomSheetContent.tsx
@@ -10,6 +10,7 @@ import { type TActionSheetOptionsItem } from './Provider';
 import styles from './styles';
 import * as List from '../List';
 import Touch from '../Touch';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IBottomSheetContentProps {
 	hasCancel?: boolean;
@@ -25,6 +26,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 	const { colors } = useTheme();
 	const { bottom } = useSafeAreaInsets();
 	const { fontScale } = useWindowDimensions();
+	const { scaleFontSize } = useResponsiveLayout();
 	const height = 48 * fontScale;
 
 	const renderFooter = () =>
@@ -33,7 +35,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 				onPress={hide}
 				style={[styles.button, { backgroundColor: colors.surfaceHover, height }]}
 				accessibilityLabel={I18n.t('Cancel')}>
-				<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
+				<Text style={[styles.text, { color: colors.fontDefault, fontSize: scaleFontSize(16) }]}>{I18n.t('Cancel')}</Text>
 			</Touch>
 		) : null;
 
diff --git a/app/containers/ActionSheet/Item.tsx b/app/containers/ActionSheet/Item.tsx
index 0716b430eea..859eff6a1c9 100644
--- a/app/containers/ActionSheet/Item.tsx
+++ b/app/containers/ActionSheet/Item.tsx
@@ -9,6 +9,7 @@ import { type TActionSheetOptionsItem } from './Provider';
 import styles from './styles';
 import { LISTENER } from '../Toast';
 import Touch from '../Touch';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export interface IActionSheetItem {
 	item: TActionSheetOptionsItem;
@@ -21,6 +22,7 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 	const enabled = item?.enabled ?? true;
 	const { colors } = useTheme();
 	const { fontScale } = useWindowDimensions();
+	const { scaleFontSize } = useResponsiveLayout();
 	const onPress = () => {
 		if (enabled) {
 			hide();
@@ -51,13 +53,13 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 				testID={item.testID}>
 				{item.icon ? <CustomIcon name={item.icon} size={24} color={color} /> : null}
 				<View style={styles.titleContainer}>
-					<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
+					<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(22) }]}>
 						{item.title}
 					</Text>
 					{item?.subtitle ? (
 						<Text
 							numberOfLines={1}
-							style={[styles.subtitle, { color: colors.fontSecondaryInfo, marginLeft: item.icon ? 16 : 0 }]}>
+							style={[styles.subtitle, { color: colors.fontSecondaryInfo, marginLeft: item.icon ? 16 : 0, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(20) }]}>
 							{item.subtitle}
 						</Text>
 					) : null}
diff --git a/app/containers/ActionSheet/styles.ts b/app/containers/ActionSheet/styles.ts
index ad9d40831e3..17aa78e5101 100644
--- a/app/containers/ActionSheet/styles.ts
+++ b/app/containers/ActionSheet/styles.ts
@@ -20,13 +20,9 @@ export default StyleSheet.create({
 		flex: 1
 	},
 	title: {
-		fontSize: 16,
-		lineHeight: 22,
 		...sharedStyles.textMedium
 	},
 	subtitle: {
-		fontSize: 14,
-		lineHeight: 20,
 		...sharedStyles.textRegular
 	},
 	handle: {
@@ -55,7 +51,6 @@ export default StyleSheet.create({
 		marginBottom: 12
 	},
 	text: {
-		fontSize: 16,
 		...sharedStyles.textMedium,
 		...sharedStyles.textAlignCenter
 	},
diff --git a/app/containers/AppVersion.tsx b/app/containers/AppVersion.tsx
index db80bd3f0ee..778e20c3ab6 100644
--- a/app/containers/AppVersion.tsx
+++ b/app/containers/AppVersion.tsx
@@ -5,6 +5,7 @@ import sharedStyles from '../views/Styles';
 import { getReadableVersion } from '../lib/methods/helpers';
 import I18n from '../i18n';
 import { useTheme } from '../theme';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -12,8 +13,7 @@ const styles = StyleSheet.create({
 		justifyContent: 'flex-end'
 	},
 	text: {
-		...sharedStyles.textRegular,
-		fontSize: 13
+		...sharedStyles.textRegular
 	},
 	bold: {
 		...sharedStyles.textSemibold
@@ -22,9 +22,10 @@ const styles = StyleSheet.create({
 
 const AppVersion = React.memo(() => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>
+			<Text style={[styles.text, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(13) }]}>
 				{I18n.t('Version_no', { version: '' })}
 				<Text style={styles.bold}>{getReadableVersion}</Text>
 			</Text>
diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx
index bd91f7deb15..b7febafae96 100644
--- a/app/containers/BackgroundContainer/index.tsx
+++ b/app/containers/BackgroundContainer/index.tsx
@@ -4,6 +4,7 @@ import { ActivityIndicator, ImageBackground, StyleSheet, Text, View } from 'reac
 import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants/colors';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export interface IBackgroundContainer {
 	text?: string;
@@ -24,7 +25,6 @@ const styles = StyleSheet.create({
 		top: 60,
 		left: 0,
 		right: 0,
-		fontSize: 16,
 		paddingHorizontal: 24,
 		...sharedStyles.textRegular,
 		...sharedStyles.textAlignCenter
@@ -33,10 +33,11 @@ const styles = StyleSheet.create({
 
 const BackgroundContainer = ({ text, loading }: IBackgroundContainer): React.ReactElement => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
 		<View style={styles.container}>
 			<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-			{text && !loading ? <Text style={[styles.text, { color: themes[theme].fontHint }]}>{text}</Text> : null}
+			{text && !loading ? <Text style={[styles.text, { color: themes[theme].fontHint, fontSize: scaleFontSize(16) }]}>{text}</Text> : null}
 			{/* @ts-ignore */}
 			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].fontHint} /> : null}
 		</View>
diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index 1fe25724e81..d7d0d719385 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -5,6 +5,7 @@ import Touchable, { type PlatformTouchableProps } from 'react-native-platform-to
 import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 // @ts-ignore
 interface IButtonProps extends PlatformTouchableProps {
@@ -40,9 +41,7 @@ const styles = StyleSheet.create({
 		...sharedStyles.textAlignCenter
 	},
 	smallText: {
-		...sharedStyles.textBold,
-		fontSize: 12,
-		lineHeight: 18
+		...sharedStyles.textBold
 	},
 	disabled: {
 		opacity: 0.3
@@ -64,6 +63,7 @@ const Button: React.FC<IButtonProps> = ({
 	...otherProps
 }) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const isPrimary = type === 'primary';
 	const isDisabled = disabled || loading;
 
@@ -82,7 +82,11 @@ const Button: React.FC<IButtonProps> = ({
 	];
 
 	const textStyle = [
-		{ color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, fontSize },
+		{ 
+			color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, 
+			fontSize: small ? scaleFontSize(12) : scaleFontSize(fontSize),
+			lineHeight: small ? scaleFontSize(18) : undefined
+		},
 		small ? styles.smallText : styles.text,
 		styleText
 	];
diff --git a/app/containers/CallHeader.tsx b/app/containers/CallHeader.tsx
index 64f937fa00e..f313d8ca63d 100644
--- a/app/containers/CallHeader.tsx
+++ b/app/containers/CallHeader.tsx
@@ -12,6 +12,7 @@ import AvatarContainer from './Avatar';
 import StatusContainer from './Status';
 import DotsLoader from './DotsLoader';
 import I18n from '../i18n';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 type TCallHeader = {
 	mic: boolean;
@@ -28,6 +29,7 @@ type TCallHeader = {
 export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name, direct }: TCallHeader): React.ReactElement => {
 	const style = useStyle();
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const calling = useAppSelector(state => state.videoConf.calling);
 
 	const handleColors = (enabled: boolean) => {
@@ -44,7 +46,7 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 			<View>
 				<View style={style.actionSheetHeader}>
 					<View style={style.rowContainer}>
-						<Text style={style.actionSheetHeaderTitle}>{title}</Text>
+						<Text style={[style.actionSheetHeaderTitle, { fontSize: scaleFontSize(14) }]}>{title}</Text>
 						{calling && direct ? <DotsLoader /> : null}
 					</View>
 					<View style={style.actionSheetHeaderButtons}>
@@ -73,7 +75,7 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 				<View style={style.actionSheetUsernameContainer}>
 					<AvatarContainer text={avatar} size={36} />
 					{direct ? <StatusContainer size={16} id={uid} style={style.statusContainerMargin} /> : null}
-					<Text style={{ ...style.actionSheetUsername, marginLeft: !direct ? 8 : 0 }} numberOfLines={1}>
+					<Text style={{ ...style.actionSheetUsername, marginLeft: !direct ? 8 : 0, fontSize: scaleFontSize(16) }} numberOfLines={1}>
 						{name}
 					</Text>
 				</View>
@@ -87,7 +89,6 @@ function useStyle() {
 	const style = StyleSheet.create({
 		actionSheetHeader: { flexDirection: 'row', alignItems: 'center' },
 		actionSheetHeaderTitle: {
-			fontSize: 14,
 			...sharedStyles.textBold,
 			color: colors.fontDefault
 		},
@@ -103,7 +104,6 @@ function useStyle() {
 		},
 		actionSheetUsernameContainer: { flexDirection: 'row', paddingTop: 8, alignItems: 'center' },
 		actionSheetUsername: {
-			fontSize: 16,
 			...sharedStyles.textBold,
 			color: colors.fontDefault,
 			flexShrink: 1
diff --git a/app/containers/ChangePasswordRequired.tsx b/app/containers/ChangePasswordRequired.tsx
index 540c0dfbd2b..31e6a1bbf35 100644
--- a/app/containers/ChangePasswordRequired.tsx
+++ b/app/containers/ChangePasswordRequired.tsx
@@ -9,6 +9,7 @@ import { useTheme } from '../theme';
 import sharedStyles from '../views/Styles';
 import Button from './Button';
 import { CustomIcon } from './CustomIcon';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IChangePasswordRequired {
 	navigation: Omit<NavigationProp<any>, 'getState'> & {
@@ -18,6 +19,7 @@ interface IChangePasswordRequired {
 
 export const ChangePasswordRequired = ({ navigation }: IChangePasswordRequired) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const dispatch = useDispatch();
 
 	const handleChangePassword = () => {
@@ -29,8 +31,8 @@ export const ChangePasswordRequired = ({ navigation }: IChangePasswordRequired)
 			<View style={styles.iconContainer}>
 				<CustomIcon name='info' size={36} color={colors.statusFontWarning} />
 			</View>
-			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('You_need_to_change_your_password')}</Text>
-			<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('To_continue_using_RocketChat')}</Text>
+			<Text style={[styles.title, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(20), lineHeight: scaleFontSize(30) }]}>{I18n.t('You_need_to_change_your_password')}</Text>
+			<Text style={[styles.description, { color: colors.fontDefault, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{I18n.t('To_continue_using_RocketChat')}</Text>
 			<Button
 				testID='change-password-required-button'
 				title={I18n.t('Change_password')}
@@ -59,14 +61,10 @@ const styles = StyleSheet.create({
 		padding: 24
 	},
 	title: {
-		fontSize: 20,
-		lineHeight: 30,
 		marginBottom: 24,
 		...sharedStyles.textBold
 	},
 	description: {
-		fontSize: 16,
-		lineHeight: 24,
 		marginBottom: 24,
 		...sharedStyles.textRegular
 	}
diff --git a/app/containers/Chip/index.tsx b/app/containers/Chip/index.tsx
index b45d61e94ae..cc693da858d 100644
--- a/app/containers/Chip/index.tsx
+++ b/app/containers/Chip/index.tsx
@@ -5,6 +5,7 @@ import { useTheme } from '../../theme';
 import { CustomIcon } from '../CustomIcon';
 import sharedStyles from '../../views/Styles';
 import Avatar from '../Avatar';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	pressable: {
@@ -27,7 +28,6 @@ const styles = StyleSheet.create({
 		maxWidth: 110
 	},
 	name: {
-		fontSize: 16,
 		...sharedStyles.textMedium
 	}
 });
@@ -43,6 +43,7 @@ export interface IChip {
 
 const Chip = ({ avatar, text, onPress, testID, style, fullWidth }: IChip) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	return (
 		<Pressable
@@ -63,7 +64,7 @@ const Chip = ({ avatar, text, onPress, testID, style, fullWidth }: IChip) => {
 			<View style={styles.container}>
 				{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
 				<View style={[styles.textContainer, fullWidth && { maxWidth: undefined }]}>
-					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
+					<Text style={[styles.name, { color: colors.fontDefault, fontSize: scaleFontSize(16) }]} numberOfLines={1}>
 						{text}
 					</Text>
 				</View>
diff --git a/app/containers/CollapsibleText/index.tsx b/app/containers/CollapsibleText/index.tsx
index 085728b61cc..e018b316e74 100644
--- a/app/containers/CollapsibleText/index.tsx
+++ b/app/containers/CollapsibleText/index.tsx
@@ -5,6 +5,7 @@ import sharedStyles from '../../views/Styles';
 import { useTheme } from '../../theme';
 import I18n from '../../i18n';
 import usePreviewFormatText from '../../lib/hooks/usePreviewFormatText';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface ICollapsibleText {
 	msg?: string;
@@ -14,12 +15,10 @@ interface ICollapsibleText {
 
 const styles = StyleSheet.create({
 	text: {
-		fontSize: 16,
 		...sharedStyles.textRegular,
 		textAlignVertical: 'center'
 	},
 	textInfo: {
-		fontSize: 14,
 		...sharedStyles.textRegular
 	}
 });
@@ -29,6 +28,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	const [showTruncated, setShowTruncated] = useState(true);
 
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const formattedText = usePreviewFormatText(msg ?? '');
 
 	if (!msg) {
@@ -40,10 +40,10 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	if (truncatedText && showTruncated) {
 		return (
 			<Text testID={`collapsible-text-truncated-${m}`}>
-				<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.fontDefault }, ...style]}>
+				<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.fontDefault, fontSize: scaleFontSize(16) }, ...style]}>
 					{`${truncatedText}... `}
 				</Text>
-				<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.fontHint }]}>
+				<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.fontHint, fontSize: scaleFontSize(14) }]}>
 					{I18n.t('Show_more')}
 				</Text>
 			</Text>
@@ -53,7 +53,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	return (
 		<Text
 			accessibilityLabel={m}
-			style={[styles.text, { color: colors.fontDefault, height: !showTruncated ? undefined : 0 }, ...style]}
+			style={[styles.text, { color: colors.fontDefault, fontSize: scaleFontSize(16), height: !showTruncated ? undefined : 0 }, ...style]}
 			testID={`collapsible-text-${m}`}
 			onTextLayout={event => {
 				const { lines } = event.nativeEvent;
@@ -74,7 +74,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 				<Text
 					testID='collapsible-text-show-less'
 					onPress={() => setShowTruncated(true)}
-					style={[styles.textInfo, { color: colors.fontHint }]}>
+					style={[styles.textInfo, { color: colors.fontHint, fontSize: scaleFontSize(14) }]}>
 					{` ${I18n.t('Show_less')}`}
 				</Text>
 			) : null}
diff --git a/app/containers/DirectoryItem/index.tsx b/app/containers/DirectoryItem/index.tsx
index 7c4c3fcad77..3ddaae61d69 100644
--- a/app/containers/DirectoryItem/index.tsx
+++ b/app/containers/DirectoryItem/index.tsx
@@ -29,10 +29,11 @@ interface IDirectoryItem {
 }
 
 const DirectoryItemLabel = React.memo(({ text, color }: IDirectoryItemLabel) => {
+	const { scaleFontSize } = useResponsiveLayout();
 	if (!text) {
 		return null;
 	}
-	return <Text style={[styles.directoryItemLabel, { color }]}>{text}</Text>;
+	return <Text style={[styles.directoryItemLabel, { color, fontSize: scaleFontSize(14) }]}>{text}</Text>;
 });
 
 const DirectoryItem = ({
@@ -48,7 +49,7 @@ const DirectoryItem = ({
 	teamMain
 }: IDirectoryItem): React.ReactElement => {
 	const { colors } = useTheme();
-	const { fontScale } = useResponsiveLayout();
+	const { fontScale, scaleFontSize } = useResponsiveLayout();
 	const height = ROW_HEIGHT * fontScale;
 
 	return (
@@ -59,7 +60,7 @@ const DirectoryItem = ({
 					<View style={styles.directoryItemTextContainer}>
 						<View style={styles.directoryItemTextTitle}>
 							{type !== 'd' ? <RoomTypeIcon type={type} teamMain={teamMain} /> : null}
-							<Text style={[styles.directoryItemName, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
+							<Text style={[styles.directoryItemName, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(17) }]} numberOfLines={1}>
 								{title}
 							</Text>
 						</View>
diff --git a/app/containers/Header/components/HeaderButton/HeaderButtonItem.tsx b/app/containers/Header/components/HeaderButton/HeaderButtonItem.tsx
index 8cea082cdb4..4f640582e5d 100644
--- a/app/containers/Header/components/HeaderButton/HeaderButtonItem.tsx
+++ b/app/containers/Header/components/HeaderButton/HeaderButtonItem.tsx
@@ -5,6 +5,7 @@ import { BorderlessButton } from 'react-native-gesture-handler';
 import { CustomIcon, type TIconsName } from '../../../CustomIcon';
 import { useTheme } from '../../../../theme';
 import sharedStyles from '../../../../views/Styles';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export interface IHeaderButtonItem {
 	title?: string;
@@ -29,14 +30,6 @@ const styles = StyleSheet.create({
 		padding: 6
 	},
 	title: {
-		...Platform.select({
-			android: {
-				fontSize: 14
-			},
-			default: {
-				fontSize: 17
-			}
-		}),
 		...sharedStyles.textRegular
 	}
 });
@@ -56,6 +49,11 @@ const Item = memo(
 		'use memo';
 
 		const { colors } = useTheme();
+		const { scaleFontSize } = useResponsiveLayout();
+		const fontSize = Platform.select({
+			android: scaleFontSize(14),
+			default: scaleFontSize(17)
+		});
 		return (
 			<BorderlessButton onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} enabled={!disabled} style={styles.container}>
 				<View
@@ -67,7 +65,7 @@ const Item = memo(
 					{iconName ? (
 						<CustomIcon name={iconName} size={24} color={color} {...props} />
 					) : (
-						<Text style={[styles.title, { color: color || colors.fontDefault }]} {...props}>
+						<Text style={[styles.title, { color: color || colors.fontDefault, fontSize }]} {...props}>
 							{title}
 						</Text>
 					)}
diff --git a/app/containers/Header/components/HeaderTitle/index.tsx b/app/containers/Header/components/HeaderTitle/index.tsx
index 4db84115905..0775f9c282d 100644
--- a/app/containers/Header/components/HeaderTitle/index.tsx
+++ b/app/containers/Header/components/HeaderTitle/index.tsx
@@ -4,6 +4,7 @@ import { Text, View } from 'react-native';
 import { isAndroid } from '../../../../lib/methods/helpers';
 import { useTheme } from '../../../../theme';
 import { styles } from './styles';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IHeaderTitle {
 	headerTitle?: string | ((props: { children: string; tintColor?: string }) => ReactNode);
@@ -13,6 +14,7 @@ const HeaderTitle = memo(({ headerTitle }: IHeaderTitle) => {
 	'use memo';
 
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	if (!headerTitle) {
 		return null;
 	}
@@ -24,7 +26,9 @@ const HeaderTitle = memo(({ headerTitle }: IHeaderTitle) => {
 					numberOfLines={1}
 					style={{
 						...styles.androidTitle,
-						color: colors.fontTitlesLabels
+						color: colors.fontTitlesLabels,
+						fontSize: scaleFontSize(18),
+						lineHeight: scaleFontSize(24)
 					}}>
 					{headerTitle}
 				</Text>
@@ -36,7 +40,9 @@ const HeaderTitle = memo(({ headerTitle }: IHeaderTitle) => {
 					numberOfLines={1}
 					style={{
 						...styles.title,
-						color: colors.fontTitlesLabels
+						color: colors.fontTitlesLabels,
+						fontSize: scaleFontSize(18),
+						lineHeight: scaleFontSize(24)
 					}}>
 					{headerTitle}
 				</Text>
diff --git a/app/containers/Header/components/HeaderTitle/styles.ts b/app/containers/Header/components/HeaderTitle/styles.ts
index dd09abc8801..3e4cd1786e4 100644
--- a/app/containers/Header/components/HeaderTitle/styles.ts
+++ b/app/containers/Header/components/HeaderTitle/styles.ts
@@ -10,16 +10,12 @@ export const styles = StyleSheet.create({
 	},
 	title: {
 		...sharedStyles.textBold,
-		fontSize: 18,
 		flex: 1,
-		lineHeight: 24,
 		paddingVertical: 6
 	},
 	androidTitle: {
 		...sharedStyles.textBold,
-		fontSize: 18,
 		flex: 1,
-		lineHeight: 24,
 		paddingVertical: 10
 	}
 });
diff --git a/app/containers/InAppNotification/NotifierComponent.tsx b/app/containers/InAppNotification/NotifierComponent.tsx
index 0924d94856a..acd0e9f6d59 100644
--- a/app/containers/InAppNotification/NotifierComponent.tsx
+++ b/app/containers/InAppNotification/NotifierComponent.tsx
@@ -53,13 +53,9 @@ const styles = StyleSheet.create({
 		marginRight: 10
 	},
 	roomName: {
-		fontSize: 17,
-		lineHeight: 20,
 		...sharedStyles.textMedium
 	},
 	message: {
-		fontSize: 14,
-		lineHeight: 17,
 		...sharedStyles.textRegular
 	},
 	close: {
@@ -73,7 +69,7 @@ const styles = StyleSheet.create({
 
 const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifierComponent) => {
 	const { theme } = useTheme();
-	const { rowHeight } = useResponsiveLayout();
+	const { rowHeight, scaleFontSize } = useResponsiveLayout();
 	const insets = useSafeAreaInsets();
 	const { text, payload } = notification;
 	const { type, rid } = payload;
@@ -118,10 +114,10 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				<>
 					<Avatar text={avatar} size={AVATAR_SIZE} type={type} rid={rid} style={styles.avatar} />
 					<View style={styles.inner}>
-						<Text style={[styles.roomName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
+						<Text style={[styles.roomName, { color: themes[theme].fontTitlesLabels, fontSize: scaleFontSize(17), lineHeight: scaleFontSize(20) }]} numberOfLines={1}>
 							{title}
 						</Text>
-						<Text style={[styles.message, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
+						<Text style={[styles.message, { color: themes[theme].fontTitlesLabels, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(17) }]} numberOfLines={1}>
 							{text}
 						</Text>
 					</View>
diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx
index 4c86e43ba20..baf9f8afec0 100644
--- a/app/containers/List/ListHeader.tsx
+++ b/app/containers/List/ListHeader.tsx
@@ -6,6 +6,7 @@ import { themes } from '../../lib/constants/colors';
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
 import { PADDING_HORIZONTAL } from './constants';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -13,7 +14,6 @@ const styles = StyleSheet.create({
 		paddingHorizontal: PADDING_HORIZONTAL
 	},
 	title: {
-		fontSize: 16,
 		...sharedStyles.textRegular
 	}
 });
@@ -28,10 +28,11 @@ const ListHeader = React.memo(({ title, translateTitle = true, numberOfLines }:
 	'use memo';
 
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	return (
 		<View style={styles.container}>
-			<Text accessibilityRole='header' style={[styles.title, { color: themes[theme].fontHint }]} numberOfLines={numberOfLines}>
+			<Text accessibilityRole='header' style={[styles.title, { color: themes[theme].fontHint, fontSize: scaleFontSize(16) }]} numberOfLines={numberOfLines}>
 				{translateTitle ? I18n.t(title) : title}
 			</Text>
 		</View>
diff --git a/app/containers/List/ListInfo.tsx b/app/containers/List/ListInfo.tsx
index f593b628069..43af4ec3e6f 100644
--- a/app/containers/List/ListInfo.tsx
+++ b/app/containers/List/ListInfo.tsx
@@ -6,6 +6,7 @@ import { themes } from '../../lib/constants/colors';
 import { useTheme } from '../../theme';
 import { PADDING_HORIZONTAL } from './constants';
 import I18n from '../../i18n';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -13,8 +14,6 @@ const styles = StyleSheet.create({
 		paddingHorizontal: PADDING_HORIZONTAL
 	},
 	text: {
-		fontSize: 14,
-		lineHeight: 20,
 		...sharedStyles.textRegular
 	}
 });
@@ -28,9 +27,10 @@ const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
 	'use memo';
 
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.text, { color: themes[theme].fontHint }]}>{translateInfo ? I18n.t(info) : info}</Text>
+			<Text style={[styles.text, { color: themes[theme].fontHint, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(20) }]}>{translateInfo ? I18n.t(info) : info}</Text>
 		</View>
 	);
 });
diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
index 5a999e1a7a3..011a513c2d7 100644
--- a/app/containers/List/ListItem.tsx
+++ b/app/containers/List/ListItem.tsx
@@ -52,11 +52,9 @@ const styles = StyleSheet.create({
 	title: {
 		flex: 1,
 		flexShrink: 1,
-		fontSize: 16,
 		...sharedStyles.textMedium
 	},
 	subtitle: {
-		fontSize: 14,
 		...sharedStyles.textRegular
 	},
 	actionIndicator: {
@@ -132,7 +130,7 @@ const Content = React.memo(
 	}: IListItemContent) => {
 		'use memo';
 
-		const { fontScale } = useResponsiveLayout();
+		const { fontScale, scaleFontSize } = useResponsiveLayout();
 		const { colors } = useTheme();
 
 		const handleAcessibilityLabel = useMemo(() => {
@@ -182,7 +180,7 @@ const Content = React.memo(
 								<ListTitle
 									title={title}
 									color={color}
-									styleTitle={styleTitle}
+									styleTitle={[styleTitle, { fontSize: scaleFontSize(16) }]}
 									translateTitle={translateTitle}
 									numberOfLines={numberOfLines}
 								/>
@@ -192,7 +190,7 @@ const Content = React.memo(
 							) : null}
 						</View>
 						{subtitle ? (
-							<Text style={[styles.subtitle, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
+							<Text style={[styles.subtitle, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14) }]} numberOfLines={1}>
 								{translateSubtitle ? I18n.t(subtitle) : subtitle}
 							</Text>
 						) : null}
diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx
index bceb491a29b..0da8004cb06 100644
--- a/app/containers/MessageActions/Header.tsx
+++ b/app/containers/MessageActions/Header.tsx
@@ -12,6 +12,7 @@ import sharedStyles from '../../views/Styles';
 import { type IEmoji, type TAnyMessageModel } from '../../definitions';
 import Touch from '../Touch';
 import I18n from '../../i18n';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export interface IHeader {
 	handleReaction: (emoji: IEmoji | null, message: TAnyMessageModel) => void;
@@ -53,7 +54,6 @@ const styles = StyleSheet.create({
 	},
 	headerIcon: {
 		...sharedStyles.textAlignCenter,
-		fontSize: 20,
 		color: '#fff'
 	},
 	customEmoji: {
@@ -64,6 +64,7 @@ const styles = StyleSheet.create({
 
 const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => {
 	const { formatShortnameToUnicode } = useShortnameToUnicode();
+	const { scaleFontSize } = useResponsiveLayout();
 	const unicodeEmoji = formatShortnameToUnicode(`:${item}:`);
 	return (
 		<Touch
@@ -73,7 +74,7 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => {
 			onPress={() => onReaction({ emoji: item })}
 			style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}>
 			{typeof item === 'string' ? (
-				<Text style={styles.headerIcon}>{unicodeEmoji}</Text>
+				<Text style={[styles.headerIcon, { fontSize: scaleFontSize(20) }]}>{unicodeEmoji}</Text>
 			) : (
 				<CustomEmoji style={styles.customEmoji} emoji={item} />
 			)}
diff --git a/app/containers/MessageComposer/components/ComposerInput.tsx b/app/containers/MessageComposer/components/ComposerInput.tsx
index 178ca3b58b1..2a4f402fd6f 100644
--- a/app/containers/MessageComposer/components/ComposerInput.tsx
+++ b/app/containers/MessageComposer/components/ComposerInput.tsx
@@ -42,12 +42,14 @@ import { usePrevious } from '../../../lib/hooks/usePrevious';
 import { type ChatsStackParamList } from '../../../stacks/types';
 import { loadDraftMessage } from '../../../lib/methods/draftMessage';
 import useIOSBackSwipeHandler from '../hooks/useIOSBackSwipeHandler';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const defaultSelection: IInputSelection = { start: 0, end: 0 };
 
 export const ComposerInput = memo(
 	forwardRef<IComposerInput, IComposerInputProps>(({ inputRef }, ref) => {
 		const { colors, theme } = useTheme();
+		const { scaleFontSize } = useResponsiveLayout();
 		const { rid, tmid, sharing, action, selectedMessages, setQuotesAndText, room } = useRoomContext();
 		const focused = useFocused();
 		const { setFocused, setMicOrSend, setAutocompleteParams } = useMessageComposerApi();
@@ -366,7 +368,7 @@ export const ComposerInput = memo(
 
 		return (
 			<TextInput
-				style={[styles.textInput, { color: colors.fontDefault }]}
+				style={[styles.textInput, { color: colors.fontDefault, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(22) }]}
 				placeholder={placeholder}
 				placeholderTextColor={colors.fontAnnotation}
 				ref={component => {
@@ -397,9 +399,7 @@ const styles = StyleSheet.create({
 		maxHeight: MAX_HEIGHT,
 		paddingTop: 12,
 		paddingBottom: 12,
-		fontSize: 16,
 		textAlignVertical: 'center',
-		...sharedStyles.textRegular,
-		lineHeight: 22
+		...sharedStyles.textRegular
 	}
 });
diff --git a/app/containers/MessageComposer/components/EmojiSearchbar.tsx b/app/containers/MessageComposer/components/EmojiSearchbar.tsx
index a5eb8189373..0b6f67e1a78 100644
--- a/app/containers/MessageComposer/components/EmojiSearchbar.tsx
+++ b/app/containers/MessageComposer/components/EmojiSearchbar.tsx
@@ -15,6 +15,7 @@ import { PressableEmoji } from '../../EmojiPicker/PressableEmoji';
 import { EmojiSearch } from '../../EmojiPicker/EmojiSearch';
 import { EMOJI_BUTTON_SIZE } from '../../EmojiPicker/styles';
 import { useEmojiKeyboard } from '../hooks/useEmojiKeyboard';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const BUTTON_HIT_SLOP = { top: 4, right: 4, bottom: 4, left: 4 };
 
@@ -22,6 +23,7 @@ export const EmojiSearchbar = (): React.ReactElement | null => {
 	'use memo';
 
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const [searchText, setSearchText] = useState<string>('');
 	const { showEmojiSearchbar, closeEmojiSearchbar } = useEmojiKeyboard();
 	const { onEmojiSelected } = useContext(MessageInnerContext);
@@ -54,7 +56,7 @@ export const EmojiSearchbar = (): React.ReactElement | null => {
 				showsHorizontalScrollIndicator={false}
 				ListEmptyComponent={() => (
 					<View style={styles.emptyContainer} testID='no-results-found'>
-						<Text style={[styles.emptyText, { color: colors.fontHint }]}>{I18n.t('No_results_found')}</Text>
+						<Text style={[styles.emptyText, { color: colors.fontHint, fontSize: scaleFontSize(16) }]}>{I18n.t('No_results_found')}</Text>
 					</View>
 				)}
 				keyExtractor={item => (typeof item === 'string' ? item : item.name)}
@@ -103,8 +105,7 @@ const styles = StyleSheet.create({
 		justifyContent: 'center'
 	},
 	emptyText: {
-		...sharedStyles.textRegular,
-		fontSize: 16
+		...sharedStyles.textRegular
 	},
 	inputContainer: {
 		flex: 1
diff --git a/app/containers/MessageComposer/components/Quotes/Quote.tsx b/app/containers/MessageComposer/components/Quotes/Quote.tsx
index c5436f19938..791fd8be6ab 100644
--- a/app/containers/MessageComposer/components/Quotes/Quote.tsx
+++ b/app/containers/MessageComposer/components/Quotes/Quote.tsx
@@ -9,6 +9,7 @@ import { BaseButton } from '../Buttons';
 import { useMessage } from '../../hooks';
 import { useAppSelector } from '../../../../lib/hooks/useAppSelector';
 import { MarkdownPreview } from '../../../markdown';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export const Quote = ({ messageId }: { messageId: string }) => {
 	'use memo';
@@ -56,6 +57,7 @@ export const Quote = ({ messageId }: { messageId: string }) => {
 
 function useStyle() {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const style = {
 		root: {
 			backgroundColor: colors.surfaceTint,
@@ -75,22 +77,22 @@ function useStyle() {
 		username: {
 			...sharedStyles.textBold,
 			color: colors.fontTitlesLabels,
-			fontSize: 14,
-			lineHeight: 20,
+			fontSize: scaleFontSize(14),
+			lineHeight: scaleFontSize(20),
 			flexShrink: 1,
 			paddingRight: 4
 		},
 		time: {
 			...sharedStyles.textRegular,
 			color: colors.fontAnnotation,
-			fontSize: 12,
-			lineHeight: 16
+			fontSize: scaleFontSize(12),
+			lineHeight: scaleFontSize(16)
 		},
 		message: {
 			...sharedStyles.textRegular,
 			color: colors.fontDefault,
-			fontSize: 14,
-			lineHeight: 20
+			fontSize: scaleFontSize(14),
+			lineHeight: scaleFontSize(20)
 		}
 	} as const;
 	return [style, colors] as const;
diff --git a/app/containers/MessageComposer/components/RecordAudio/Duration.tsx b/app/containers/MessageComposer/components/RecordAudio/Duration.tsx
index 5f6130ac2f7..e6ec98c385f 100644
--- a/app/containers/MessageComposer/components/RecordAudio/Duration.tsx
+++ b/app/containers/MessageComposer/components/RecordAudio/Duration.tsx
@@ -5,6 +5,7 @@ import { type Audio } from 'expo-av';
 import sharedStyles from '../../../../views/Styles';
 import { useTheme } from '../../../../theme';
 import { formatTime } from './utils';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export interface IDurationRef {
 	onRecordingStatusUpdate: (status: Audio.RecordingStatus) => void;
@@ -30,10 +31,11 @@ export const Duration = forwardRef<IDurationRef>((_, ref) => {
 
 function useStyle() {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const styles = {
 		text: {
 			marginLeft: 12,
-			fontSize: 16,
+			fontSize: scaleFontSize(16),
 			...sharedStyles.textRegular,
 			color: colors.fontDefault,
 			fontVariant: ['tabular-nums'] as FontVariant[]
diff --git a/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx b/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx
index 80785a76fe7..d8e398e5427 100644
--- a/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx
+++ b/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx
@@ -22,9 +22,11 @@ import { Duration, type IDurationRef } from './Duration';
 import AudioPlayer from '../../../AudioPlayer';
 import { CancelButton } from './CancelButton';
 import i18n from '../../../../i18n';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export const RecordAudio = (): ReactElement | null => {
 	const [styles, colors] = useStyle();
+	const { scaleFontSize } = useResponsiveLayout();
 	const recordingRef = useRef<Audio.Recording | null>(null);
 	const durationRef = useRef<IDurationRef>({} as IDurationRef);
 	const numberOfTriesRef = useRef(0);
@@ -150,7 +152,7 @@ export const RecordAudio = (): ReactElement | null => {
 			<View style={styles.buttons}>
 				<CancelButton onPress={cancelRecording} cancelAndDelete />
 				<View accessible accessibilityLabel={i18n.t('Recording_audio_in_progress')} style={styles.recordingNote}>
-					<Text style={styles.recordingNoteText}>{i18n.t('Recording_audio_in_progress')}</Text>
+					<Text style={[styles.recordingNoteText, { fontSize: scaleFontSize(14) }]}>{i18n.t('Recording_audio_in_progress')}</Text>
 				</View>
 				<ReviewButton onPress={goReview} />
 			</View>
@@ -196,7 +198,6 @@ function useStyle() {
 			alignItems: 'center'
 		},
 		recordingNoteText: {
-			fontSize: 14,
 			...sharedStyles.textRegular,
 			color: colors.fontSecondaryInfo
 		}
diff --git a/app/containers/MessageComposer/components/SendThreadToChannel.tsx b/app/containers/MessageComposer/components/SendThreadToChannel.tsx
index e752e89c271..14f160f7ea9 100644
--- a/app/containers/MessageComposer/components/SendThreadToChannel.tsx
+++ b/app/containers/MessageComposer/components/SendThreadToChannel.tsx
@@ -14,6 +14,7 @@ import { useAppSelector } from '../../../lib/hooks/useAppSelector';
 import database from '../../../lib/database';
 import { compareServerVersion } from '../../../lib/methods/helpers';
 import { useEmojiKeyboard } from '../hooks/useEmojiKeyboard';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export const SendThreadToChannel = (): React.ReactElement | null => {
 	'use memo';
@@ -23,6 +24,7 @@ export const SendThreadToChannel = (): React.ReactElement | null => {
 	const { showEmojiSearchbar } = useEmojiKeyboard();
 	const { tmid } = useRoomContext();
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const subscription = useRef<Subscription | null>(null);
 	const alsoSendThreadToChannelUserPref = useAppSelector(state => state.login.user.alsoSendThreadToChannel);
 	const serverVersion = useAppSelector(state => state.server.version);
@@ -80,7 +82,7 @@ export const SendThreadToChannel = (): React.ReactElement | null => {
 				size={24}
 				color={alsoSendThreadToChannel ? colors.buttonBackgroundPrimaryDefault : colors.fontDefault}
 			/>
-			<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Message_composer_Send_to_channel')}</Text>
+			<Text style={[styles.text, { color: colors.fontDefault, fontSize: scaleFontSize(14) }]}>{I18n.t('Message_composer_Send_to_channel')}</Text>
 		</TouchableWithoutFeedback>
 	);
 };
@@ -92,7 +94,6 @@ const styles = StyleSheet.create({
 		marginBottom: 12
 	},
 	text: {
-		fontSize: 14,
 		marginLeft: 8,
 		...sharedStyles.textRegular
 	}
diff --git a/app/containers/MessageSeparator.tsx b/app/containers/MessageSeparator.tsx
index 6ba013755ae..2558bbbfdd5 100644
--- a/app/containers/MessageSeparator.tsx
+++ b/app/containers/MessageSeparator.tsx
@@ -6,6 +6,7 @@ import I18n from '../i18n';
 import sharedStyles from '../views/Styles';
 import { themes } from '../lib/constants/colors';
 import { useTheme } from '../theme';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -18,7 +19,6 @@ const styles = StyleSheet.create({
 		flex: 1
 	},
 	text: {
-		fontSize: 14,
 		...sharedStyles.textMedium
 	},
 	marginRight: {
@@ -31,6 +31,7 @@ const styles = StyleSheet.create({
 
 const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: boolean }): React.ReactElement | null => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	if (!ts && !unread) {
 		return null;
@@ -42,9 +43,9 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?:
 	if (ts && unread) {
 		return (
 			<View style={styles.container}>
-				<Text style={[styles.text, unreadText]}>{I18n.t('unread_messages')}</Text>
+				<Text style={[styles.text, unreadText, { fontSize: scaleFontSize(14) }]}>{I18n.t('unread_messages')}</Text>
 				<View style={[styles.line, unreadLine, styles.marginHorizontal]} />
-				<Text style={[styles.text, unreadText]}>{date}</Text>
+				<Text style={[styles.text, unreadText, { fontSize: scaleFontSize(14) }]}>{date}</Text>
 			</View>
 		);
 	}
@@ -52,14 +53,14 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?:
 		return (
 			<View style={styles.container}>
 				<View style={[styles.line, { backgroundColor: themes[theme].strokeLight }]} />
-				<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }, styles.marginHorizontal]}>{date}</Text>
+				<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo, fontSize: scaleFontSize(14) }, styles.marginHorizontal]}>{date}</Text>
 				<View style={[styles.line, { backgroundColor: themes[theme].strokeLight }]} />
 			</View>
 		);
 	}
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.text, unreadText, styles.marginRight]}>{I18n.t('unread_messages')}</Text>
+			<Text style={[styles.text, unreadText, styles.marginRight, { fontSize: scaleFontSize(14) }]}>{I18n.t('unread_messages')}</Text>
 			<View style={[styles.line, unreadLine]} />
 		</View>
 	);
diff --git a/app/containers/OrSeparator.tsx b/app/containers/OrSeparator.tsx
index 03fbf6a96b0..363dea7ace5 100644
--- a/app/containers/OrSeparator.tsx
+++ b/app/containers/OrSeparator.tsx
@@ -4,6 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import I18n from '../i18n';
 import sharedStyles from '../views/Styles';
 import { useTheme } from '../theme';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -16,7 +17,6 @@ const styles = StyleSheet.create({
 		flex: 1
 	},
 	text: {
-		fontSize: 16,
 		marginHorizontal: 12,
 		...sharedStyles.textMedium
 	}
@@ -24,13 +24,14 @@ const styles = StyleSheet.create({
 
 const OrSeparator = React.memo(() => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const line = { backgroundColor: colors.strokeLight };
 	const text = { color: colors.fontSecondaryInfo };
 
 	return (
 		<View accessible style={styles.container}>
 			<View style={[styles.line, line]} />
-			<Text style={[styles.text, text]}>{I18n.t('OR')}</Text>
+			<Text style={[styles.text, text, { fontSize: scaleFontSize(16) }]}>{I18n.t('OR')}</Text>
 			<View style={[styles.line, line]} />
 		</View>
 	);
diff --git a/app/containers/ReactionsList/AllTab.tsx b/app/containers/ReactionsList/AllTab.tsx
index 4b80940af42..0ab32c399c4 100644
--- a/app/containers/ReactionsList/AllTab.tsx
+++ b/app/containers/ReactionsList/AllTab.tsx
@@ -8,6 +8,7 @@ import { type TGetCustomEmoji } from '../../definitions/IEmoji';
 import I18n from '../../i18n';
 import styles from './styles';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IAllReactionsListItemProps {
 	getCustomEmoji: TGetCustomEmoji;
@@ -21,6 +22,7 @@ interface IAllTabProps {
 
 const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemProps) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const useRealName = useAppSelector(state => state.settings.UI_Use_Real_Name);
 	const username = useAppSelector(state => state.login.user.username);
 	const count = item.usernames.length;
@@ -46,15 +48,15 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
 		<View style={styles.listItemContainer}>
 			<Emoji
 				content={item.emoji}
-				standardEmojiStyle={styles.allTabStandardEmojiStyle}
+				standardEmojiStyle={{ ...styles.allTabStandardEmojiStyle, fontSize: scaleFontSize(30) }}
 				customEmojiStyle={styles.allTabCustomEmojiStyle}
 				getCustomEmoji={getCustomEmoji}
 			/>
 			<View style={styles.textContainer}>
-				<Text style={[styles.allListNPeopleReacted, { color: colors.fontDefault }]}>
+				<Text style={[styles.allListNPeopleReacted, { color: colors.fontDefault, fontSize: scaleFontSize(14) }]}>
 					{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
 				</Text>
-				<Text style={[styles.allListWhoReacted, { color: colors.fontSecondaryInfo }]}>{displayNames}</Text>
+				<Text style={[styles.allListWhoReacted, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14) }]}>{displayNames}</Text>
 			</View>
 		</View>
 	);
diff --git a/app/containers/ReactionsList/UsersList.tsx b/app/containers/ReactionsList/UsersList.tsx
index d366bbe8b12..ef7dbaa5b83 100644
--- a/app/containers/ReactionsList/UsersList.tsx
+++ b/app/containers/ReactionsList/UsersList.tsx
@@ -6,9 +6,11 @@ import { useTheme } from '../../theme';
 import { type IApplicationState } from '../../definitions';
 import Avatar from '../Avatar';
 import styles from './styles';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const UsersList = ({ emoji, usernames, names }: { emoji: string; usernames: string[]; names: string[] }): React.ReactElement => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const useRealName = useSelector((state: IApplicationState) => state.settings.UI_Use_Real_Name);
 
 	const users =
@@ -22,7 +24,7 @@ const UsersList = ({ emoji, usernames, names }: { emoji: string; usernames: stri
 			contentContainerStyle={styles.listContainer}
 			ListHeaderComponent={
 				<View style={styles.emojiNameContainer}>
-					<Text style={[styles.emojiName, { color: colors.fontSecondaryInfo }]} testID='usersListEmojiName'>
+					<Text style={[styles.emojiName, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14) }]} testID='usersListEmojiName'>
 						{emoji}
 					</Text>
 				</View>
@@ -31,7 +33,7 @@ const UsersList = ({ emoji, usernames, names }: { emoji: string; usernames: stri
 				<View style={styles.listItemContainer} testID='userItem'>
 					<Avatar text={item.username} size={36} />
 					<View style={styles.textContainer}>
-						<Text style={[styles.usernameText, { color: colors.fontDefault }]} numberOfLines={1}>
+						<Text style={[styles.usernameText, { color: colors.fontDefault, fontSize: scaleFontSize(16) }]} numberOfLines={1}>
 							{useRealName && item.name ? item.name : item.username}
 						</Text>
 					</View>
diff --git a/app/containers/ReactionsList/index.tsx b/app/containers/ReactionsList/index.tsx
index ab751de5b9a..8be05aa2e93 100644
--- a/app/containers/ReactionsList/index.tsx
+++ b/app/containers/ReactionsList/index.tsx
@@ -9,6 +9,7 @@ import AllTab from './AllTab';
 import UsersList from './UsersList';
 import { TabView } from '../TabView';
 import Emoji from '../message/Emoji';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IReactionsListProps {
 	getCustomEmoji: TGetCustomEmoji;
@@ -53,6 +54,7 @@ const useRoutes = (reactions: IReaction[] | undefined) => {
 
 const ReactionsList = ({ reactions, getCustomEmoji }: IReactionsListProps) => {
 	const { routes, sortedReactions } = useRoutes(reactions);
+	const { scaleFontSize } = useResponsiveLayout();
 
 	const renderScene = ({ route }: { route: IRoute }) => {
 		if (route.key === 'all') {
@@ -68,7 +70,7 @@ const ReactionsList = ({ reactions, getCustomEmoji }: IReactionsListProps) => {
 		if (tab.key === 'all') {
 			return (
 				<View style={styles.tabBarItem}>
-					<Text style={[styles.allTabItem, { color }]}>{I18n.t('All')}</Text>
+					<Text style={[styles.allTabItem, { color, fontSize: scaleFontSize(16) }]}>{I18n.t('All')}</Text>
 				</View>
 			);
 		}
@@ -77,7 +79,7 @@ const ReactionsList = ({ reactions, getCustomEmoji }: IReactionsListProps) => {
 				<View style={styles.tabBarItem}>
 					<Emoji
 						content={tab.emoji}
-						standardEmojiStyle={styles.standardEmojiStyle}
+						standardEmojiStyle={{ ...styles.standardEmojiStyle, fontSize: scaleFontSize(20) }}
 						customEmojiStyle={styles.customEmojiStyle}
 						getCustomEmoji={getCustomEmoji}
 					/>
diff --git a/app/containers/RoomItem/LastMessage.tsx b/app/containers/RoomItem/LastMessage.tsx
index 23ca3650658..354d0c949d0 100644
--- a/app/containers/RoomItem/LastMessage.tsx
+++ b/app/containers/RoomItem/LastMessage.tsx
@@ -7,14 +7,13 @@ import { isAndroid } from '../../lib/methods/helpers';
 import { useTheme } from '../../theme';
 import { MarkdownPreview } from '../markdown';
 import { type ILastMessageProps } from './interfaces';
-import styles from './styles';
 
 const arePropsEqual = (oldProps: any, newProps: any) => dequal(oldProps, newProps);
 
 const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username, alert, useRealName }: ILastMessageProps) => {
 	const { colors } = useTheme();
 	// Android has a bug with the text align on the markdown preview
-	const alignSelf: TextStyle = isAndroid ? { alignSelf: 'stretch' } : {};
+	const alignSelf: TextStyle = isAndroid ? { alignSelf: 'stretch', width: '100%' } : { width: '100%' };
 
 	return (
 		<MarkdownPreview
@@ -25,7 +24,7 @@ const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username,
 				username,
 				useRealName
 			})}
-			style={[styles.markdownText, { color: alert ? colors.fontDefault : colors.fontSecondaryInfo }, alignSelf]}
+			style={[{ color: alert ? colors.fontDefault : colors.fontSecondaryInfo }, alignSelf]}
 			numberOfLines={2}
 		/>
 	);
diff --git a/app/containers/RoomItem/RoomItem.stories.tsx b/app/containers/RoomItem/RoomItem.stories.tsx
index 28c8261f4a1..6e9bc9ba20a 100644
--- a/app/containers/RoomItem/RoomItem.stories.tsx
+++ b/app/containers/RoomItem/RoomItem.stories.tsx
@@ -29,7 +29,8 @@ const responsiveLayoutProviderValue = {
 	rowHeight: BASE_ROW_HEIGHT,
 	rowHeightCondensed: BASE_ROW_HEIGHT_CONDENSED,
 	width: 300,
-	height: 800
+	height: 800,
+	scaleFontSize: (size: number) => size
 };
 
 const RoomItem = (props: any) => (
diff --git a/app/containers/RoomItem/RoomItem.tsx b/app/containers/RoomItem/RoomItem.tsx
index 5939b0d583e..58b7111996b 100644
--- a/app/containers/RoomItem/RoomItem.tsx
+++ b/app/containers/RoomItem/RoomItem.tsx
@@ -107,7 +107,7 @@ const RoomItem = ({
 				sourceType={sourceType}>
 				{showLastMessage && displayMode === DisplayMode.Expanded ? (
 					<>
-						<View style={styles.titleContainer}>
+						<View style={[styles.titleContainer, styles.flex]}>
 							{showAvatar ? (
 								<TypeIcon
 									userId={userId}
@@ -125,14 +125,16 @@ const RoomItem = ({
 							{isLargeFontScale ? null : <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} />}
 						</View>
 						<View style={styles.row} testID='room-item-last-message-container'>
-							<LastMessage
-								lastMessage={lastMessage}
-								type={type}
-								showLastMessage={showLastMessage}
-								username={username || ''}
-								alert={alert && !hideUnreadStatus}
-								useRealName={useRealName}
-							/>
+							<View style={styles.flex}>
+								<LastMessage
+									lastMessage={lastMessage}
+									type={type}
+									showLastMessage={showLastMessage}
+									username={username || ''}
+									alert={alert && !hideUnreadStatus}
+									useRealName={useRealName}
+								/>
+							</View>
 							<UnreadBadge
 								unread={unread}
 								userMentions={userMentions}
diff --git a/app/containers/RoomItem/Tag.tsx b/app/containers/RoomItem/Tag.tsx
index 3156d10be20..aefee598886 100644
--- a/app/containers/RoomItem/Tag.tsx
+++ b/app/containers/RoomItem/Tag.tsx
@@ -3,6 +3,7 @@ import { Text, View } from 'react-native';
 
 import { themes } from '../../lib/constants/colors';
 import { useTheme } from '../../theme';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import styles from './styles';
 
 interface ITag {
@@ -12,10 +13,11 @@ interface ITag {
 
 const Tag = React.memo(({ name, testID }: ITag) => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	return (
 		<View style={[styles.tagContainer, { backgroundColor: themes[theme].strokeLight }]}>
-			<Text style={[styles.tagText, { color: themes[theme].fontHint }]} numberOfLines={1} testID={testID}>
+			<Text style={[styles.tagText, { color: themes[theme].fontHint, fontSize: scaleFontSize(13) }]} numberOfLines={1} testID={testID}>
 				{name}
 			</Text>
 		</View>
diff --git a/app/containers/RoomItem/Title.tsx b/app/containers/RoomItem/Title.tsx
index de00524be1d..3823e805b01 100644
--- a/app/containers/RoomItem/Title.tsx
+++ b/app/containers/RoomItem/Title.tsx
@@ -1,19 +1,24 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 
 import styles from './styles';
 import { type ITitleProps } from './interfaces';
 import { useTheme } from '../../theme';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const Title = React.memo(({ name, hideUnreadStatus, alert }: ITitleProps) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
-		<Text
-			style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: colors.fontTitlesLabels }]}
-			ellipsizeMode='tail'
-			numberOfLines={1}>
-			{name}
-		</Text>
+		<View style={styles.title}>
+			<Text
+				style={[styles.titleText, alert && !hideUnreadStatus && styles.alert, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(17) }]}
+				ellipsizeMode='tail'
+				numberOfLines={1}
+				adjustsFontSizeToFit={false}>
+				{name}
+			</Text>
+		</View>
 	);
 });
 
diff --git a/app/containers/RoomItem/UpdatedAt.tsx b/app/containers/RoomItem/UpdatedAt.tsx
index 3169f5887b2..cf45ae91eed 100644
--- a/app/containers/RoomItem/UpdatedAt.tsx
+++ b/app/containers/RoomItem/UpdatedAt.tsx
@@ -5,9 +5,11 @@ import styles from './styles';
 import { capitalize } from '../../lib/methods/helpers/room';
 import { type IUpdatedAtProps } from './interfaces';
 import { useTheme } from '../../theme';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const UpdatedAt = React.memo(({ date, hideUnreadStatus, alert }: IUpdatedAtProps) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	if (!date) {
 		return null;
@@ -17,7 +19,8 @@ const UpdatedAt = React.memo(({ date, hideUnreadStatus, alert }: IUpdatedAtProps
 			style={[
 				styles.date,
 				{
-					color: colors.fontDefault
+					color: colors.fontDefault,
+					fontSize: scaleFontSize(13)
 				},
 				alert &&
 					!hideUnreadStatus && [
diff --git a/app/containers/RoomItem/Wrapper.tsx b/app/containers/RoomItem/Wrapper.tsx
index 07671fbfa4b..fe2ab168927 100644
--- a/app/containers/RoomItem/Wrapper.tsx
+++ b/app/containers/RoomItem/Wrapper.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { DisplayMode } from '../../lib/constants/constantDisplayMode';
 import { useTheme } from '../../theme';
@@ -8,9 +8,11 @@ import { type IWrapperProps } from './interfaces';
 import styles from './styles';
 import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
+
 const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapperProps): React.ReactElement => {
 	const { colors } = useTheme();
 	const { rowHeight, rowHeightCondensed } = useResponsiveLayout();
+	const borderWidth = Math.max(StyleSheet.hairlineWidth || 0, 0.5);
 	return (
 		<View
 			style={[styles.container, { height: displayMode === DisplayMode.Condensed ? rowHeightCondensed : rowHeight }]}
@@ -22,7 +24,8 @@ const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapp
 				style={[
 					styles.centerContainer,
 					{
-						borderColor: colors.strokeLight
+						borderColor: colors.strokeLight,
+						borderBottomWidth: borderWidth
 					}
 				]}>
 				{children}
diff --git a/app/containers/RoomItem/styles.ts b/app/containers/RoomItem/styles.ts
index 674451fb18c..9978936e5fa 100644
--- a/app/containers/RoomItem/styles.ts
+++ b/app/containers/RoomItem/styles.ts
@@ -8,7 +8,8 @@ export const LONG_SWIPE = ACTION_WIDTH * 2.5;
 
 export default StyleSheet.create({
 	flex: {
-		flex: 1
+		flex: 1,
+		minWidth: 0
 	},
 	container: {
 		flexDirection: 'row',
@@ -17,13 +18,20 @@ export default StyleSheet.create({
 	},
 	centerContainer: {
 		flex: 1,
+		minWidth: 0,
 		paddingVertical: 10,
 		paddingRight: 14,
-		borderBottomWidth: StyleSheet.hairlineWidth
+		borderBottomWidth: StyleSheet.hairlineWidth,
+		overflow: 'hidden'
 	},
 	title: {
 		flex: 1,
-		fontSize: 17,
+		minWidth: 0,
+		justifyContent: 'center'
+	},
+	titleText: {
+		minWidth: 0,
+		flexShrink: 1,
 		...sharedStyles.textMedium
 	},
 	alert: {
@@ -32,20 +40,23 @@ export default StyleSheet.create({
 	row: {
 		flex: 1,
 		flexDirection: 'row',
-		alignItems: 'flex-start'
+		alignItems: 'flex-start',
+		minWidth: 0,
+		overflow: 'hidden'
 	},
 	wrapUpdatedAndBadge: {
 		alignItems: 'flex-end'
 	},
 	titleContainer: {
-		width: '100%',
+		flex: 1,
 		flexDirection: 'row',
 		alignItems: 'center',
-		justifyContent: 'center'
+		minWidth: 0,
+		overflow: 'hidden'
 	},
 	date: {
-		fontSize: 13,
 		marginLeft: 4,
+		flexShrink: 0,
 		...sharedStyles.textRegular
 	},
 	updateAlert: {
@@ -54,10 +65,11 @@ export default StyleSheet.create({
 	status: {
 		marginRight: 2
 	},
-	markdownText: {
+	lastMessageContainer: {
 		flex: 1,
-		fontSize: 14,
-		...sharedStyles.textRegular
+		minWidth: 0,
+		justifyContent: 'center',
+		overflow: 'hidden'
 	},
 	avatar: {
 		marginRight: 10
@@ -97,10 +109,10 @@ export default StyleSheet.create({
 		alignSelf: 'center',
 		alignItems: 'center',
 		borderRadius: 4,
-		marginHorizontal: 4
+		marginHorizontal: 4,
+		flexShrink: 0
 	},
 	tagText: {
-		fontSize: 13,
 		paddingHorizontal: 4,
 		...sharedStyles.textSemibold
 	},
diff --git a/app/containers/SearchHeader.tsx b/app/containers/SearchHeader.tsx
index a0e47bcc039..dfbb1b828a0 100644
--- a/app/containers/SearchHeader.tsx
+++ b/app/containers/SearchHeader.tsx
@@ -6,6 +6,7 @@ import { useTheme } from '../theme';
 import sharedStyles from '../views/Styles';
 import { themes } from '../lib/constants/colors';
 import { TextInput } from './TextInput';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -15,7 +16,6 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		...sharedStyles.textSemibold,
-		fontSize: 16,
 		paddingVertical: 6
 	}
 });
@@ -28,13 +28,14 @@ interface ISearchHeaderProps {
 
 const SearchHeader = ({ onSearchChangeText, testID, style }: ISearchHeaderProps): JSX.Element => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const isLight = theme === 'light';
 
 	return (
 		<View style={[styles.container, style]}>
 			<TextInput
 				autoFocus
-				style={[styles.title, isLight && { color: themes[theme].fontTitlesLabels }]}
+				style={[styles.title, isLight && { color: themes[theme].fontTitlesLabels }, { fontSize: scaleFontSize(16) }]}
 				placeholder={I18n.t('Search')}
 				onChangeText={onSearchChangeText}
 				testID={testID}
diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
index 046cdab1e35..86a5211ed74 100644
--- a/app/containers/TextInput/FormTextInput.tsx
+++ b/app/containers/TextInput/FormTextInput.tsx
@@ -20,12 +20,11 @@ import ActivityIndicator from '../ActivityIndicator';
 import { CustomIcon, type TIconsName } from '../CustomIcon';
 import { TextInput } from './TextInput';
 import { isIOS } from '../../lib/methods/helpers';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	error: {
-		...sharedStyles.textRegular,
-		lineHeight: 20,
-		fontSize: 14
+		...sharedStyles.textRegular
 	},
 	inputContainer: {
 		marginBottom: 10,
@@ -38,17 +37,13 @@ const styles = StyleSheet.create({
 		paddingVertical: 4
 	},
 	label: {
-		fontSize: 16,
-		lineHeight: 22,
 		...sharedStyles.textMedium
 	},
 	required: {
-		fontSize: 14,
 		...sharedStyles.textMedium
 	},
 	input: {
 		...sharedStyles.textRegular,
-		fontSize: 16,
 		paddingHorizontal: 16,
 		paddingVertical: 14,
 		borderWidth: 1,
@@ -122,6 +117,7 @@ export const FormTextInput = ({
 	...inputProps
 }: IRCTextInputProps): React.ReactElement => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const [showPassword, setShowPassword] = useState(false);
 	const showClearInput = onClearInput && value && value.length > 0;
 	const Input = bottomSheet ? BottomSheetTextInput : TextInput;
@@ -142,10 +138,10 @@ export const FormTextInput = ({
 			<A11y.Index index={1}>
 				<View style={[styles.inputContainer, containerStyle]}>
 					{label ? (
-						<Text accessible={false} style={[styles.label, { color: colors.fontTitlesLabels }]}>
+						<Text accessible={false} style={[styles.label, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(22) }]}>
 							{label}{' '}
 							{required && (
-								<Text style={[styles.required, { color: colors.fontSecondaryInfo }]}>{`(${i18n.t('Required')})`}</Text>
+								<Text style={[styles.required, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14) }]}>{`(${i18n.t('Required')})`}</Text>
 							)}
 						</Text>
 					) : null}
@@ -161,7 +157,8 @@ export const FormTextInput = ({
 								{
 									backgroundColor: colors.surfaceLight,
 									borderColor: colors.strokeMedium,
-									color: colors.fontTitlesLabels
+									color: colors.fontTitlesLabels,
+									fontSize: scaleFontSize(16)
 								},
 								inputError
 									? {
@@ -238,7 +235,7 @@ export const FormTextInput = ({
 					{showErrorMessage && inputError ? (
 						<View accessible={false} style={styles.errorContainer}>
 							<CustomIcon accessible={false} name='warning' size={16} color={colors.fontDanger} />
-							<Text accessible={false} style={{ ...styles.error, color: colors.fontDanger }}>
+							<Text accessible={false} style={{ ...styles.error, color: colors.fontDanger, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(20) }}>
 								{inputError}
 							</Text>
 						</View>
diff --git a/app/containers/ThreadDetails.tsx b/app/containers/ThreadDetails.tsx
index c2ae4216be1..a5303928001 100644
--- a/app/containers/ThreadDetails.tsx
+++ b/app/containers/ThreadDetails.tsx
@@ -8,6 +8,7 @@ import sharedStyles from '../views/Styles';
 import { useTheme } from '../theme';
 import { type TThreadModel } from '../definitions/IThread';
 import i18n from '../i18n';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -25,7 +26,6 @@ const styles = StyleSheet.create({
 		marginRight: 8
 	},
 	detailText: {
-		fontSize: 10,
 		marginLeft: 2,
 		...sharedStyles.textSemibold
 	},
@@ -53,6 +53,7 @@ interface IThreadDetails {
 
 const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IThreadDetails): JSX.Element => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	let count: string | number | undefined | null = item.tcount;
 	if (count && count >= 1000) {
 		count = '+999';
@@ -72,7 +73,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 					<CustomIcon name='threads' size={24} />
 					<Text
 						testID={`thread-count-${count}`}
-						style={[styles.detailText, { color: themes[theme].fontSecondaryInfo }]}
+						style={[styles.detailText, { color: themes[theme].fontSecondaryInfo, fontSize: scaleFontSize(10) }]}
 						numberOfLines={1}>
 						{count}
 					</Text>
@@ -80,7 +81,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 
 				<View style={styles.detailContainer}>
 					<CustomIcon name='user' size={24} />
-					<Text style={[styles.detailText, { color: themes[theme].fontSecondaryInfo }]} numberOfLines={1}>
+					<Text style={[styles.detailText, { color: themes[theme].fontSecondaryInfo, fontSize: scaleFontSize(10) }]} numberOfLines={1}>
 						{replies}
 					</Text>
 				</View>
diff --git a/app/containers/Toast.tsx b/app/containers/Toast.tsx
index 96852ed1f7d..b1747c55f67 100644
--- a/app/containers/Toast.tsx
+++ b/app/containers/Toast.tsx
@@ -8,6 +8,7 @@ import EventEmitter from '../lib/methods/helpers/events';
 import { useTheme } from '../theme';
 import sharedStyles from '../views/Styles';
 import { ALERT_DISPLAY_TYPE_PREFERENCES_KEY } from '../lib/constants/keys';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	toast: {
@@ -15,7 +16,6 @@ const styles = StyleSheet.create({
 		padding: 10
 	},
 	text: {
-		fontSize: 14,
 		...sharedStyles.textRegular,
 		...sharedStyles.textAlignCenter
 	}
@@ -28,6 +28,7 @@ let toast: EasyToast | null | undefined;
 
 const Toast = (): React.ReactElement => {
 	const { colors, theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const [alertDisplayType] = useUserPreferences<TAlertDisplayType>(ALERT_DISPLAY_TYPE_PREFERENCES_KEY, 'TOAST');
 
 	useEffect(() => {
@@ -56,7 +57,7 @@ const Toast = (): React.ReactElement => {
 			ref={getToastRef}
 			position='center'
 			style={[styles.toast, { backgroundColor: colors.surfaceDark }]}
-			textStyle={[styles.text, { color: theme === 'light' ? colors.fontWhite : colors.fontPureBlack }]}
+			textStyle={[styles.text, { color: theme === 'light' ? colors.fontWhite : colors.fontPureBlack, fontSize: scaleFontSize(14) }]}
 			opacity={0.9}
 		/>
 	);
diff --git a/app/containers/UnreadBadge/index.tsx b/app/containers/UnreadBadge/index.tsx
index b2c1d96554c..16478dc2410 100644
--- a/app/containers/UnreadBadge/index.tsx
+++ b/app/containers/UnreadBadge/index.tsx
@@ -4,6 +4,7 @@ import { type StyleProp, StyleSheet, Text, useWindowDimensions, View, type ViewS
 import sharedStyles from '../../views/Styles';
 import { getUnreadStyle } from './getUnreadStyle';
 import { useTheme } from '../../theme';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	unreadNumberContainerNormal: {
@@ -18,11 +19,9 @@ const styles = StyleSheet.create({
 		justifyContent: 'center'
 	},
 	unreadText: {
-		fontSize: 13,
 		...sharedStyles.textSemibold
 	},
 	textSmall: {
-		fontSize: 10
 	}
 });
 
@@ -67,6 +66,7 @@ const UnreadBadge = React.memo(
 	}: IUnreadBadge) => {
 		const { theme } = useTheme();
 		const { fontScale } = useWindowDimensions();
+		const { scaleFontSize } = useResponsiveLayout();
 
 		if ((!unread || unread <= 0) && !tunread?.length) {
 			return null;
@@ -118,7 +118,7 @@ const UnreadBadge = React.memo(
 					style
 				]}
 				testID={testId}>
-				<Text style={[styles.unreadText, small && styles.textSmall, { color }]} numberOfLines={1}>
+				<Text style={[styles.unreadText, small && styles.textSmall, { color, fontSize: small ? scaleFontSize(10) : scaleFontSize(13) }]} numberOfLines={1}>
 					{text}
 				</Text>
 			</View>
diff --git a/app/containers/UserGeneratedContentRules.tsx b/app/containers/UserGeneratedContentRules.tsx
index 6a7e90ea3e0..78c0b217b2c 100644
--- a/app/containers/UserGeneratedContentRules.tsx
+++ b/app/containers/UserGeneratedContentRules.tsx
@@ -6,6 +6,7 @@ import { useTheme } from '../theme';
 import openLink from '../lib/methods/helpers/openLink';
 import { useAppSelector } from '../lib/hooks/useAppSelector';
 import I18n from '../i18n';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	bottomContainer: {
@@ -16,8 +17,6 @@ const styles = StyleSheet.create({
 	},
 	bottomContainerText: {
 		...sharedStyles.textMedium,
-		fontSize: 14,
-		lineHeight: 22,
 		textAlign: 'center'
 	},
 	bottomContainerTextUnderline: {
@@ -27,6 +26,7 @@ const styles = StyleSheet.create({
 
 const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
 	const { colors, theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const { server } = useAppSelector(state => ({
 		server: state.server.server
 	}));
@@ -39,14 +39,14 @@ const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
 	};
 	return (
 		<View style={[styles.bottomContainer, styleContainer]}>
-			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Onboarding_agree_terms')}</Text>
+			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(22) }]}>{I18n.t('Onboarding_agree_terms')}</Text>
 			<Text
-				style={[styles.bottomContainerTextUnderline, styles.bottomContainerText, { color: colors.fontInfo }]}
+				style={[styles.bottomContainerTextUnderline, styles.bottomContainerText, { color: colors.fontInfo, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(22) }]}
 				onPress={() => openContract('terms-of-service')}>
 				{I18n.t('Terms_of_Service')}
 			</Text>
 			<Text
-				style={[styles.bottomContainerTextUnderline, styles.bottomContainerText, { color: colors.fontInfo }]}
+				style={[styles.bottomContainerTextUnderline, styles.bottomContainerText, { color: colors.fontInfo, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(22) }]}
 				onPress={() => openContract('privacy-policy')}>
 				{I18n.t('Privacy_Policy')}
 			</Text>
diff --git a/app/containers/UserItem.tsx b/app/containers/UserItem.tsx
index 5cb1dc1762c..b80054e0a00 100644
--- a/app/containers/UserItem.tsx
+++ b/app/containers/UserItem.tsx
@@ -7,6 +7,7 @@ import sharedStyles from '../views/Styles';
 import { isIOS } from '../lib/methods/helpers';
 import { useTheme } from '../theme';
 import i18n from '../i18n';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	button: {
@@ -26,7 +27,6 @@ const styles = StyleSheet.create({
 		marginRight: 15
 	},
 	name: {
-		fontSize: 16,
 		...sharedStyles.textMedium
 	},
 	icon: {
@@ -49,6 +49,7 @@ interface IUserItem {
 
 const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, iconColor, isChecked }: IUserItem) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	let label = `${name}`;
 	if (icon) {
 		label = `${name} ${isChecked ? i18n.t('Selected') : i18n.t('Unselected')}`;
@@ -69,7 +70,7 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, i
 			<View style={[styles.container, styles.button, style]}>
 				<Avatar text={username} size={30} style={styles.avatar} />
 				<View style={styles.textContainer}>
-					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
+					<Text style={[styles.name, { color: colors.fontDefault, fontSize: scaleFontSize(16) }]} numberOfLines={1}>
 						{name}
 					</Text>
 				</View>
diff --git a/app/containers/markdown/components/Heading.tsx b/app/containers/markdown/components/Heading.tsx
index 32c9f01d183..8ec1405428a 100644
--- a/app/containers/markdown/components/Heading.tsx
+++ b/app/containers/markdown/components/Heading.tsx
@@ -5,6 +5,7 @@ import { type Heading as HeadingProps } from '@rocket.chat/message-parser';
 import { themes } from '../../../lib/constants/colors';
 import styles from '../styles';
 import { useTheme } from '../../../theme';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IHeadingProps {
 	value: HeadingProps['value'];
@@ -13,10 +14,22 @@ interface IHeadingProps {
 
 const Heading = ({ value, level }: IHeadingProps) => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const textStyle = styles[`heading${level}`];
+	
+	// Map heading levels to base font sizes
+	const headingSizes: { [key: number]: number } = {
+		1: 24,
+		2: 22,
+		3: 20,
+		4: 18,
+		5: 16,
+		6: 14
+	};
+	const baseSize = headingSizes[level] || 16;
 
 	return (
-		<Text style={[textStyle, { color: themes[theme].fontDefault }]}>
+		<Text style={[textStyle, { color: themes[theme].fontDefault, fontSize: scaleFontSize(baseSize) }]}>
 			{value.map(block => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':
diff --git a/app/containers/markdown/components/InlineCode.tsx b/app/containers/markdown/components/InlineCode.tsx
index 0153bb70174..e1c8a61c4cc 100644
--- a/app/containers/markdown/components/InlineCode.tsx
+++ b/app/containers/markdown/components/InlineCode.tsx
@@ -5,6 +5,7 @@ import { type InlineCode as InlineCodeProps } from '@rocket.chat/message-parser'
 import styles from '../styles';
 import { themes } from '../../../lib/constants/colors';
 import { useTheme } from '../../../theme';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IInlineCodeProps {
 	value: InlineCodeProps['value'];
@@ -12,6 +13,7 @@ interface IInlineCodeProps {
 
 const InlineCode = ({ value }: IInlineCodeProps) => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	return (
 		<Text
@@ -20,7 +22,9 @@ const InlineCode = ({ value }: IInlineCodeProps) => {
 				{
 					color: themes[theme].fontDefault,
 					backgroundColor: themes[theme].surfaceNeutral,
-					borderColor: themes[theme].strokeLight
+					borderColor: themes[theme].strokeLight,
+					fontSize: scaleFontSize(16),
+					lineHeight: scaleFontSize(22)
 				}
 			]}>
 			{(block => {
diff --git a/app/containers/markdown/components/Paragraph.tsx b/app/containers/markdown/components/Paragraph.tsx
index 68ba9630353..76d4f0f7455 100644
--- a/app/containers/markdown/components/Paragraph.tsx
+++ b/app/containers/markdown/components/Paragraph.tsx
@@ -6,6 +6,7 @@ import Inline from './Inline';
 import styles from '../styles';
 import { useTheme } from '../../../theme';
 import { themes } from '../../../lib/constants/colors';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IParagraphProps {
 	value: ParagraphProps['value'];
@@ -14,6 +15,7 @@ interface IParagraphProps {
 const Paragraph = ({ value }: IParagraphProps) => {
 	let forceTrim = false;
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	if (
 		value?.[0]?.type === 'LINK' &&
 		// Need to update the @rocket.chat/message-parser to understand that the label can be a Markup | Markup[]
@@ -32,7 +34,7 @@ const Paragraph = ({ value }: IParagraphProps) => {
 		forceTrim = true;
 	}
 	return (
-		<Text style={[styles.text, { color: themes[theme].fontDefault }]}>
+		<Text style={[styles.text, { color: themes[theme].fontDefault, fontSize: scaleFontSize(16) }]}>
 			<Inline value={value} forceTrim={forceTrim} />
 		</Text>
 	);
diff --git a/app/containers/markdown/components/Plain.tsx b/app/containers/markdown/components/Plain.tsx
index cdc70f9476b..0724f553bed 100644
--- a/app/containers/markdown/components/Plain.tsx
+++ b/app/containers/markdown/components/Plain.tsx
@@ -4,6 +4,7 @@ import { type Plain as PlainProps } from '@rocket.chat/message-parser';
 
 import { useTheme } from '../../../theme';
 import styles from '../styles';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IPlainProps {
 	value: PlainProps['value'];
@@ -11,8 +12,9 @@ interface IPlainProps {
 
 const Plain = ({ value }: IPlainProps): React.ReactElement => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
-		<Text accessibilityLabel={value} style={[styles.plainText, { color: colors.fontDefault }]}>
+		<Text accessibilityLabel={value} style={[styles.plainText, { color: colors.fontDefault, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(22) }]}>
 			{value}
 		</Text>
 	);
diff --git a/app/containers/markdown/components/Preview.tsx b/app/containers/markdown/components/Preview.tsx
index cc48e6bbbfc..e2df38e00c6 100644
--- a/app/containers/markdown/components/Preview.tsx
+++ b/app/containers/markdown/components/Preview.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { Text, type TextStyle } from 'react-native';
+import { Text, View, type TextStyle } from 'react-native';
 
 import { themes } from '../../../lib/constants/colors';
 import { useTheme } from '../../../theme';
 import usePreviewFormatText from '../../../lib/hooks/usePreviewFormatText';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import styles from '../styles';
 
 interface IMarkdownPreview {
@@ -15,20 +16,28 @@ interface IMarkdownPreview {
 
 const MarkdownPreview = ({ msg, numberOfLines = 1, style = [], testID }: IMarkdownPreview) => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const formattedText = usePreviewFormatText(msg ?? '');
 
 	if (!msg) {
 		return null;
 	}
 	const m = formattedText;
+	const fontSize = scaleFontSize(18);
+	const lineHeight = fontSize * 1.375; // 16 * 1.375 = 22, scaled proportionally
+
 	return (
-		<Text
-			accessibilityLabel={m}
-			style={[styles.text, { color: themes[theme].fontDefault, lineHeight: undefined }, ...style]}
-			numberOfLines={numberOfLines}
-			testID={testID || `markdown-preview-${m}`}>
-			{m}
-		</Text>
+		<View style={{ flex: 1, minWidth: 0 }}>
+			<Text
+				accessibilityLabel={m}
+				style={[styles.text, { color: themes[theme].fontDefault, fontSize, lineHeight, flexShrink: 1 }, ...style]}
+				numberOfLines={numberOfLines}
+				ellipsizeMode='tail'
+				adjustsFontSizeToFit={false}
+				testID={testID || `markdown-preview-${m}`}>
+				{m}
+			</Text>
+		</View>
 	);
 };
 
diff --git a/app/containers/markdown/components/code/CodeLine.tsx b/app/containers/markdown/components/code/CodeLine.tsx
index 02abaf99b3c..bf40aae6f9d 100644
--- a/app/containers/markdown/components/code/CodeLine.tsx
+++ b/app/containers/markdown/components/code/CodeLine.tsx
@@ -4,6 +4,7 @@ import { Text } from 'react-native';
 
 import { useTheme } from '../../../../theme';
 import styles from '../../styles';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface ICodeLineProps {
 	value: CodeLineProps['value'];
@@ -11,11 +12,12 @@ interface ICodeLineProps {
 
 const CodeLine = ({ value }: ICodeLineProps): React.ReactElement | null => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	if (value.type !== 'PLAIN_TEXT') {
 		return null;
 	}
 
-	return <Text style={[styles.codeBlockText, { color: colors.fontDefault }]}>{value.value}</Text>;
+	return <Text style={[styles.codeBlockText, { color: colors.fontDefault, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(22) }]}>{value.value}</Text>;
 };
 
 export default CodeLine;
diff --git a/app/containers/markdown/components/inline/Link.tsx b/app/containers/markdown/components/inline/Link.tsx
index 76e8637ad61..a650598c5e4 100644
--- a/app/containers/markdown/components/inline/Link.tsx
+++ b/app/containers/markdown/components/inline/Link.tsx
@@ -12,6 +12,7 @@ import EventEmitter from '../../../../lib/methods/helpers/events';
 import { themes } from '../../../../lib/constants/colors';
 import MarkdownContext from '../../contexts/MarkdownContext';
 import styles from '../../styles';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface ILinkProps {
 	value: LinkProps['value'];
@@ -19,6 +20,7 @@ interface ILinkProps {
 
 const Link = ({ value }: ILinkProps) => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const { onLinkPress } = useContext(MarkdownContext);
 	const { src, label } = value;
 	const handlePress = () => {
@@ -37,7 +39,7 @@ const Link = ({ value }: ILinkProps) => {
 	};
 
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].fontInfo }]}>
+		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].fontInfo, fontSize: scaleFontSize(16) }]}>
 			{(block => {
 				const blockArray = Array.isArray(block) ? block : [block];
 				return blockArray.map(blockInArray => {
diff --git a/app/containers/markdown/components/mentions/AtMention.tsx b/app/containers/markdown/components/mentions/AtMention.tsx
index cf0779c0343..5477468ff73 100644
--- a/app/containers/markdown/components/mentions/AtMention.tsx
+++ b/app/containers/markdown/components/mentions/AtMention.tsx
@@ -8,6 +8,7 @@ import styles from '../../styles';
 import { events, logEvent } from '../../../../lib/methods/helpers/log';
 import { type IUserMention } from '../../interfaces';
 import { useUserPreferences } from '../../../../lib/methods/userPreferences';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IAtMention {
 	mention: string;
@@ -20,6 +21,7 @@ interface IAtMention {
 
 const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const [mentionsWithAtSymbol] = useUserPreferences<boolean>(USER_MENTIONS_PREFERENCES_KEY, false);
 	const preffix = mentionsWithAtSymbol ? '@' : '';
 	if (mention === 'all' || mention === 'here') {
@@ -28,7 +30,8 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 				style={[
 					styles.mention,
 					{
-						color: themes[theme].statusFontService
+						color: themes[theme].statusFontService,
+						fontSize: scaleFontSize(16)
 					},
 					...style
 				]}>
@@ -74,14 +77,14 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 
 		return (
 			// not enough information on mentions to navigate to team info, so we don't handle onPress
-			<Text style={[styles.mention, mentionStyle, ...style]} onPress={atMentioned?.type === 'team' ? undefined : handlePress}>
+			<Text style={[styles.mention, mentionStyle, { fontSize: scaleFontSize(16) }, ...style]} onPress={atMentioned?.type === 'team' ? undefined : handlePress}>
 				{preffix}
 				{text}
 			</Text>
 		);
 	}
 
-	return <Text style={[styles.text, { color: themes[theme].fontDefault }, ...style]}>{`@${mention}`}</Text>;
+	return <Text style={[styles.text, { color: themes[theme].fontDefault, fontSize: scaleFontSize(16) }, ...style]}>{`@${mention}`}</Text>;
 });
 
 export default AtMention;
diff --git a/app/containers/markdown/components/mentions/Hashtag.tsx b/app/containers/markdown/components/mentions/Hashtag.tsx
index c5d8ffff7ee..99ed758b755 100644
--- a/app/containers/markdown/components/mentions/Hashtag.tsx
+++ b/app/containers/markdown/components/mentions/Hashtag.tsx
@@ -14,6 +14,7 @@ import { useTheme } from '../../../../theme';
 import { sendLoadingEvent } from '../../../Loading';
 import { type IUserChannel } from '../../interfaces';
 import styles from '../../styles';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IHashtag {
 	hashtag: string;
@@ -24,6 +25,7 @@ interface IHashtag {
 
 const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IHashtag) => {
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const [roomsWithHashTagSymbol] = useUserPreferences<boolean>(ROOM_MENTIONS_PREFERENCES_KEY, false);
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 	const preffix = roomsWithHashTagSymbol ? '#' : '';
@@ -57,7 +59,8 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 				style={[
 					styles.mention,
 					{
-						color: themes[theme].fontInfo
+						color: themes[theme].fontInfo,
+						fontSize: scaleFontSize(16)
 					},
 					...style
 				]}
@@ -66,7 +69,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 			</Text>
 		);
 	}
-	return <Text style={[styles.text, { color: themes[theme].fontDefault }, ...style]}>{`#${hashtag}`}</Text>;
+	return <Text style={[styles.text, { color: themes[theme].fontDefault, fontSize: scaleFontSize(16) }, ...style]}>{`#${hashtag}`}</Text>;
 });
 
 export default Hashtag;
diff --git a/app/containers/markdown/styles.ts b/app/containers/markdown/styles.ts
index 72b5300e444..a319d3b4b5a 100644
--- a/app/containers/markdown/styles.ts
+++ b/app/containers/markdown/styles.ts
@@ -38,6 +38,7 @@ export default StyleSheet.create({
 	text: {
 		lineHeight: 22,
 		fontSize: 16,
+		minWidth: 0,
 		...sharedStyles.textRegular
 	},
 	textInfo: {
diff --git a/app/containers/message/Components/Attachments/CollapsibleQuote/index.tsx b/app/containers/message/Components/Attachments/CollapsibleQuote/index.tsx
index 073e5d7660d..50b86cb1a45 100644
--- a/app/containers/message/Components/Attachments/CollapsibleQuote/index.tsx
+++ b/app/containers/message/Components/Attachments/CollapsibleQuote/index.tsx
@@ -13,6 +13,7 @@ import Markdown from '../../../../markdown';
 import MessageContext from '../../../Context';
 import Touchable from '../../../Touchable';
 import { BUTTON_HIT_SLOP } from '../../../utils';
+import { useResponsiveLayout } from '../../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	button: {
@@ -36,12 +37,10 @@ const styles = StyleSheet.create({
 		paddingVertical: 10
 	},
 	fieldText: {
-		fontSize: 15,
 		padding: 10,
 		...sharedStyles.textRegular
 	},
 	fieldTitle: {
-		fontSize: 15,
 		...sharedStyles.textBold
 	},
 	marginTop: {
@@ -51,7 +50,6 @@ const styles = StyleSheet.create({
 		marginBottom: 4
 	},
 	title: {
-		fontSize: 16,
 		...sharedStyles.textMedium
 	},
 	touchableContainer: {
@@ -103,6 +101,7 @@ const Fields = React.memo(
 		'use memo';
 
 		const { theme } = useTheme();
+		const { scaleFontSize } = useResponsiveLayout();
 		const { user } = useContext(MessageContext);
 
 		if (!attachment.fields) {
@@ -113,7 +112,7 @@ const Fields = React.memo(
 			<>
 				{attachment.fields.map(field => (
 					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-						<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].fontDefault }]}>
+						<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].fontDefault, fontSize: scaleFontSize(15) }]}>
 							{field.title}
 						</Text>
 						<Markdown msg={field?.value || ''} username={user.username} getCustomEmoji={getCustomEmoji} />
@@ -130,6 +129,7 @@ const CollapsibleQuote = React.memo(
 		'use memo';
 
 		const { theme } = useTheme();
+		const { scaleFontSize } = useResponsiveLayout();
 		const [collapsed, setCollapsed] = useState(attachment?.collapsed);
 
 		if (!attachment) {
@@ -176,7 +176,7 @@ const CollapsibleQuote = React.memo(
 					<View style={styles.touchableContainer}>
 						<View style={styles.attachmentContainer}>
 							<View style={styles.authorContainer}>
-								<Text style={[styles.title, { color: fontSecondaryInfo }]}>{attachment.title}</Text>
+								<Text style={[styles.title, { color: fontSecondaryInfo, fontSize: scaleFontSize(16) }]}>{attachment.title}</Text>
 							</View>
 							{!collapsed && <AttText text={attachment.text} getCustomEmoji={getCustomEmoji} />}
 							{!collapsed && <Fields attachment={attachment} getCustomEmoji={getCustomEmoji} />}
diff --git a/app/containers/message/Components/Attachments/Reply.tsx b/app/containers/message/Components/Attachments/Reply.tsx
index eec13fe43c0..96df7d11518 100644
--- a/app/containers/message/Components/Attachments/Reply.tsx
+++ b/app/containers/message/Components/Attachments/Reply.tsx
@@ -16,6 +16,7 @@ import { Attachments } from './components';
 import MessageContext from '../../Context';
 import Touchable from '../../Touchable';
 import messageStyles from '../../styles';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import dayjs from '../../../../lib/dayjs';
 
 const styles = StyleSheet.create({
@@ -49,7 +50,6 @@ const styles = StyleSheet.create({
 		gap: 4
 	},
 	author: {
-		fontSize: 16,
 		...sharedStyles.textMedium,
 		flexShrink: 1
 	},
@@ -63,11 +63,9 @@ const styles = StyleSheet.create({
 		flexDirection: 'column'
 	},
 	fieldTitle: {
-		fontSize: 14,
 		...sharedStyles.textSemibold
 	},
 	fieldValue: {
-		fontSize: 14,
 		...sharedStyles.textRegular
 	},
 	marginTop: {
@@ -86,7 +84,6 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		flex: 1,
-		fontSize: 16,
 		...sharedStyles.textMedium
 	}
 });
@@ -103,16 +100,17 @@ const Title = React.memo(
 	({ attachment, timeFormat, theme }: { attachment: IAttachment; timeFormat?: string; theme: TSupportedThemes }) => {
 		'use memo';
 
+		const { scaleFontSize } = useResponsiveLayout();
 		const time = attachment.message_link && attachment.ts ? dayjs(attachment.ts).format(timeFormat) : null;
 		return (
 			<View style={styles.authorContainer}>
 				{attachment.author_name ? (
-					<Text numberOfLines={1} style={[styles.author, { color: themes[theme].fontHint }]}>
+					<Text numberOfLines={1} style={[styles.author, { color: themes[theme].fontHint, fontSize: scaleFontSize(16) }]}>
 						{attachment.author_name}
 					</Text>
 				) : null}
 				{time ? <Text style={[messageStyles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text> : null}
-				{attachment.title ? <Text style={[styles.title, { color: themes[theme].fontDefault }]}>{attachment.title}</Text> : null}
+				{attachment.title ? <Text style={[styles.title, { color: themes[theme].fontDefault, fontSize: scaleFontSize(16) }]}>{attachment.title}</Text> : null}
 			</View>
 		);
 	}
@@ -184,6 +182,7 @@ const Fields = React.memo(
 		'use memo';
 
 		const { user } = useContext(MessageContext);
+		const { scaleFontSize } = useResponsiveLayout();
 
 		if (!attachment.fields) {
 			return null;
@@ -193,7 +192,7 @@ const Fields = React.memo(
 			<View style={styles.fieldsContainer}>
 				{attachment.fields.map(field => (
 					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-						<Text style={[styles.fieldTitle, { color: themes[theme].fontDefault }]}>{field.title}</Text>
+						<Text style={[styles.fieldTitle, { color: themes[theme].fontDefault, fontSize: scaleFontSize(14) }]}>{field.title}</Text>
 						<Markdown msg={field?.value || ''} username={user.username} getCustomEmoji={getCustomEmoji} />
 					</View>
 				))}
diff --git a/app/containers/message/Components/Attachments/Video.tsx b/app/containers/message/Components/Attachments/Video.tsx
index c3c36d34f7f..fcf933cc497 100644
--- a/app/containers/message/Components/Attachments/Video.tsx
+++ b/app/containers/message/Components/Attachments/Video.tsx
@@ -18,6 +18,7 @@ import { useMediaAutoDownload } from '../../hooks/useMediaAutoDownload';
 import BlurComponent from '../OverlayComponent';
 import { type TDownloadState } from '../../../../lib/methods/handleMediaDownload';
 import messageStyles from '../../styles';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])];
 const isTypeSupported = (type: string) => SUPPORTED_TYPES.indexOf(type) !== -1;
@@ -29,8 +30,7 @@ const styles = StyleSheet.create({
 		right: 8
 	},
 	text: {
-		...sharedStyles.textRegular,
-		fontSize: 12
+		...sharedStyles.textRegular
 	}
 });
 
@@ -44,9 +44,10 @@ interface IMessageVideo {
 
 const CancelIndicator = () => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
 		<View style={styles.cancelContainer}>
-			<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{I18n.t('Cancel')}</Text>
+			<Text style={[styles.text, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(12) }]}>{I18n.t('Cancel')}</Text>
 		</View>
 	);
 };
diff --git a/app/containers/message/Message.stories.tsx b/app/containers/message/Message.stories.tsx
index 1f15cea13c4..943c2c2588c 100644
--- a/app/containers/message/Message.stories.tsx
+++ b/app/containers/message/Message.stories.tsx
@@ -47,7 +47,8 @@ const responsiveLayoutProviderLargeFontValue = (fontScale: number) => ({
 	rowHeight: BASE_ROW_HEIGHT * fontScale,
 	rowHeightCondensed: BASE_ROW_HEIGHT_CONDENSED * fontScale,
 	width: 350,
-	height: 800
+	height: 800,
+	scaleFontSize: (size: number) => size
 });
 
 const getCustomEmoji = (content: string) => {
diff --git a/app/containers/message/Reactions.tsx b/app/containers/message/Reactions.tsx
index d0ab1fde4c5..df694dd6fd2 100644
--- a/app/containers/message/Reactions.tsx
+++ b/app/containers/message/Reactions.tsx
@@ -10,6 +10,7 @@ import { themes } from '../../lib/constants/colors';
 import { type TSupportedThemes, useTheme } from '../../theme';
 import MessageContext from './Context';
 import { type TGetCustomEmoji } from '../../definitions/IEmoji';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IReaction {
 	_id: string;
@@ -54,6 +55,7 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 
 	const { onReactionPress, onReactionLongPress, user } = useContext(MessageContext);
 	const { fontScale } = useWindowDimensions();
+	const { scaleFontSize } = useResponsiveLayout();
 	const height = 28 * fontScale;
 	const reacted = reaction.usernames.findIndex((item: string) => item === user.username) !== -1;
 	return (
@@ -72,11 +74,11 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 				]}>
 				<Emoji
 					content={reaction.emoji}
-					standardEmojiStyle={styles.reactionEmoji}
+					standardEmojiStyle={{ ...styles.reactionEmoji, fontSize: scaleFontSize(13) }}
 					customEmojiStyle={styles.reactionCustomEmoji}
 					getCustomEmoji={getCustomEmoji}
 				/>
-				<Text style={[styles.reactionCount, { color: themes[theme].badgeBackgroundLevel2 }]}>{reaction.usernames.length}</Text>
+				<Text style={[styles.reactionCount, { color: themes[theme].badgeBackgroundLevel2, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(18) }]}>{reaction.usernames.length}</Text>
 			</View>
 		</Touchable>
 	);
diff --git a/app/containers/message/Time.tsx b/app/containers/message/Time.tsx
index 78ae7ab80f5..d6c96087d57 100644
--- a/app/containers/message/Time.tsx
+++ b/app/containers/message/Time.tsx
@@ -4,6 +4,7 @@ import { Text } from 'react-native';
 import dayjs from '../../lib/dayjs';
 import { useTheme } from '../../theme';
 import messageStyles from './styles';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IMessageTime {
 	ts?: Date;
@@ -14,10 +15,11 @@ const MessageTime = ({ timeFormat, ts }: IMessageTime) => {
 	'use memo';
 
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	const time = dayjs(ts).format(timeFormat);
 
-	return <Text style={[messageStyles.time, { color: colors.fontSecondaryInfo }]}>{time}</Text>;
+	return <Text style={[messageStyles.time, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(13), lineHeight: scaleFontSize(18) }]}>{time}</Text>;
 };
 
 export default MessageTime;
diff --git a/app/containers/message/Urls.tsx b/app/containers/message/Urls.tsx
index 717754f9c3b..b2f613879d9 100644
--- a/app/containers/message/Urls.tsx
+++ b/app/containers/message/Urls.tsx
@@ -16,6 +16,7 @@ import I18n from '../../i18n';
 import MessageContext from './Context';
 import { type IUrl } from '../../definitions';
 import { WidthAwareContext } from './Components/WidthAwareView';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -31,11 +32,9 @@ const styles = StyleSheet.create({
 		alignItems: 'flex-start'
 	},
 	title: {
-		fontSize: 16,
 		...sharedStyles.textMedium
 	},
 	description: {
-		fontSize: 16,
 		...sharedStyles.textRegular
 	},
 	loading: {
@@ -48,15 +47,16 @@ const UrlContent = ({ title, description }: { title: string; description: string
 	'use memo';
 
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
 		<View style={styles.textContainer}>
 			{title ? (
-				<Text style={[styles.title, { color: colors.fontInfo }]} numberOfLines={2}>
+				<Text style={[styles.title, { color: colors.fontInfo, fontSize: scaleFontSize(16) }]} numberOfLines={2}>
 					{title}
 				</Text>
 			) : null}
 			{description ? (
-				<Text style={[styles.description, { color: colors.fontSecondaryInfo }]} numberOfLines={2}>
+				<Text style={[styles.description, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(16) }]} numberOfLines={2}>
 					{description}
 				</Text>
 			) : null}
diff --git a/app/containers/message/User.tsx b/app/containers/message/User.tsx
index f24a65d849f..2b19e276450 100644
--- a/app/containers/message/User.tsx
+++ b/app/containers/message/User.tsx
@@ -24,12 +24,9 @@ const styles = StyleSheet.create({
 	},
 	username: {
 		flexShrink: 1,
-		fontSize: 16,
-		lineHeight: 22,
 		...sharedStyles.textSemibold
 	},
 	usernameInfoMessage: {
-		fontSize: 16,
 		...sharedStyles.textMedium
 	},
 	titleContainer: {
@@ -39,7 +36,6 @@ const styles = StyleSheet.create({
 		gap: 4
 	},
 	alias: {
-		fontSize: 14,
 		...sharedStyles.textRegular
 	}
 });
@@ -84,11 +80,11 @@ const User = React.memo(
 
 		const { user } = useContext(MessageContext);
 		const { colors } = useTheme();
-		const { isLargeFontScale } = useResponsiveLayout();
+		const { isLargeFontScale, scaleFontSize } = useResponsiveLayout();
 
 		if (isHeader) {
 			const username = (useRealName && author?.name) || author?.username;
-			const aliasUsername = alias ? <Text style={[styles.alias, { color: colors.fontSecondaryInfo }]}> @{username}</Text> : null;
+			const aliasUsername = alias ? <Text style={[styles.alias, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14) }]}> @{username}</Text> : null;
 			const itsMe = author?._id === user.id;
 
 			const onUserPress = () => {
@@ -108,7 +104,7 @@ const User = React.memo(
 
 			if (messageHaveAuthorName(type as MessageTypesValues)) {
 				return (
-					<Text style={[styles.usernameInfoMessage, { color: colors.fontTitlesLabels }]} onPress={onUserPress}>
+					<Text style={[styles.usernameInfoMessage, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16) }]} onPress={onUserPress}>
 						{textContent}
 					</Text>
 				);
@@ -117,7 +113,7 @@ const User = React.memo(
 			return (
 				<View style={styles.container}>
 					<TouchableOpacity testID={`username-header-${username}`} style={styles.titleContainer} onPress={onUserPress}>
-						<Text style={[styles.username, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
+						<Text style={[styles.username, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(22) }]} numberOfLines={1}>
 							{textContent}
 						</Text>
 						{isLargeFontScale ? null : <MessageTime timeFormat={timeFormat} ts={ts} />}
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index 20adc12eb90..1d2e9ff0640 100644
--- a/app/i18n/locales/en.json
+++ b/app/i18n/locales/en.json
@@ -355,12 +355,15 @@
   "Everyone_can_access_this_team": "Everyone can access this team",
   "Expanded": "Expanded",
   "Expiration_Days": "Expiration (days)",
+  "Extra_Large": "Extra Large",
   "Favorite": "Favorite",
   "Favorites": "Favorites",
   "Federation_Matrix_room_description_disabled": "Federation is currently disabled on this workspace",
   "Federation_Matrix_room_description_invalid_version": "This room was created by an old Federation version and it's blocked indeterminately.",
   "Federation_Matrix_room_description_missing_module": "Joining federated rooms is a Premium feature",
   "Fetch_image_from_URL": "Fetch image from URL",
+  "Font_Size": "Font Size",
+  "Font_Size_Description": "Adjust the font size for all text in the application",
   "Field_are_required": "{{field}} are required",
   "Field_is_required": "{{field}} is required",
   "File_description": "File description",
@@ -448,6 +451,7 @@
   "Label_Input_Two_Factor_Code": "Code",
   "Label_Input_Two_Factor_Password": "Password",
   "Language": "Language",
+  "Large": "Large",
   "last_message": "last message",
   "Last_owner_team_room": "You are the last owner of this channel. Once you leave the team, the channel will be kept inside the team but you will be managing it from outside.",
   "Last_updated": "Last updated",
@@ -568,6 +572,7 @@
   "Name": "Name",
   "Name_required": "Name required",
   "Never": "Never",
+  "Normal": "Normal",
   "New_chat_transfer": "New chat transfer: {{agent}} returned the chat to the queue",
   "New_Message": "New message",
   "New_Password": "New password",
@@ -767,6 +772,7 @@
   "SAVE": "SAVE",
   "Save": "Save",
   "Save_Changes": "Save changes",
+  "Small": "Small",
   "Save_Your_E2E_Password": "Save your E2E password",
   "Save_Your_Encryption_Password": "Save your encryption password",
   "Save_Your_Encryption_Password_info": "Notice that you lose your password, there is no way to recover it and you will lose access to your messages.",
diff --git a/app/lib/constants/keys.ts b/app/lib/constants/keys.ts
index 8c6dc1da7d2..165b96c42f0 100644
--- a/app/lib/constants/keys.ts
+++ b/app/lib/constants/keys.ts
@@ -20,6 +20,7 @@ export const USER_MENTIONS_PREFERENCES_KEY = 'RC_USER_MENTIONS_PREFERENCES_KEY';
 export const ROOM_MENTIONS_PREFERENCES_KEY = 'RC_ROOM_MENTIONS_PREFERENCES_KEY';
 export const AUTOPLAY_GIFS_PREFERENCES_KEY = 'RC_AUTOPLAY_GIFS_PREFERENCES_KEY';
 export const ALERT_DISPLAY_TYPE_PREFERENCES_KEY = 'RC_ALERT_DISPLAY_TYPE_PREFERENCES_KEY';
+export const FONT_SIZE_PREFERENCES_KEY = 'RC_FONT_SIZE_PREFERENCES_KEY';
 export const CRASH_REPORT_KEY = 'RC_CRASH_REPORT_KEY';
 export const ANALYTICS_EVENTS_KEY = 'RC_ANALYTICS_EVENTS_KEY';
 export const TOKEN_KEY = 'reactnativemeteor_usertoken';
diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 5582976299c..bfc837bbbf7 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -1,6 +1,9 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 
+import { FONT_SIZE_PREFERENCES_KEY } from '../../constants/keys';
+import userPreferences from '../../methods/userPreferences';
+
 interface IResponsiveLayoutContextData {
 	fontScale: number;
 	width: number;
@@ -9,6 +12,7 @@ interface IResponsiveLayoutContextData {
 	fontScaleLimited: number;
 	rowHeight: number;
 	rowHeightCondensed: number;
+	scaleFontSize: (size: number) => number;
 }
 
 interface IResponsiveFontScaleProviderProps {
@@ -20,19 +24,59 @@ export const ResponsiveLayoutContext = createContext({} as IResponsiveLayoutCont
 export const FONT_SCALE_LIMIT = 1.3;
 export const BASE_ROW_HEIGHT = 75;
 export const BASE_ROW_HEIGHT_CONDENSED = 60;
+export const BASE_ROW_HEIGHT_SMALL_FONT = 82;
+export const BASE_ROW_HEIGHT_CONDENSED_SMALL_FONT = 68;
+const SMALL_FONT_THRESHOLD = 0.9;
+
+// Font size options: Small (0.9), Normal (1.0), Large (1.1), Extra Large (1.2)
+export const FONT_SIZE_OPTIONS = {
+	SMALL: 0.9,
+	NORMAL: 1.0,
+	LARGE: 1.1,
+	EXTRA_LARGE: 1.2
+};
 
 const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => {
 	// `fontScale` is the current font scaling value of the device.
-	const { fontScale, width, height } = useWindowDimensions();
+	const { fontScale: systemFontScale, width, height } = useWindowDimensions();
+	const [updateTrigger, setUpdateTrigger] = useState(0);
+	
+	// Poll for font size changes (simple approach since MMKV doesn't have change listeners)
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setUpdateTrigger(prev => prev + 1);
+		}, 500); // Check every 500ms for font size changes
+		
+		return () => clearInterval(interval);
+	}, []);
+	
+	// Read custom font size directly from storage (MMKV is fast and synchronous)
+	// updateTrigger is used to force re-render when font size changes
+	const customFontSize = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY) || FONT_SIZE_OPTIONS.NORMAL.toString();
+	// Reference updateTrigger to ensure component re-renders when it changes
+	if (updateTrigger) {
+		// This ensures the value is re-read on each render when updateTrigger changes
+	}
+
+	// Use custom font size if set, otherwise use system font scale
+	const fontSizeMultiplier = customFontSize ? parseFloat(customFontSize) : 1.0;
+	const fontScale = systemFontScale * fontSizeMultiplier;
 	const isLargeFontScale = fontScale > FONT_SCALE_LIMIT;
 	// `fontScaleLimited` applies the `FONT_SCALE_LIMIT` to prevent layout issues on large font sizes.
 	const fontScaleLimited = isLargeFontScale ? FONT_SCALE_LIMIT : fontScale;
-	const rowHeight = BASE_ROW_HEIGHT * fontScale;
-	const rowHeightCondensed = BASE_ROW_HEIGHT_CONDENSED * fontScale;
+	// Use increased height only for smallest font sizes to prevent text cutting
+	const isSmallFont = fontScale < SMALL_FONT_THRESHOLD;
+	const baseRowHeight = isSmallFont ? BASE_ROW_HEIGHT_SMALL_FONT : BASE_ROW_HEIGHT;
+	const baseRowHeightCondensed = isSmallFont ? BASE_ROW_HEIGHT_CONDENSED_SMALL_FONT : BASE_ROW_HEIGHT_CONDENSED;
+	const rowHeight = baseRowHeight * fontScale;
+	const rowHeightCondensed = baseRowHeightCondensed * fontScale;
+
+	// Function to scale font sizes based on custom font size preference
+	const scaleFontSize = (size: number): number => size * fontSizeMultiplier;
 
 	return (
 		<ResponsiveLayoutContext.Provider
-			value={{ fontScale, width, height, isLargeFontScale, fontScaleLimited, rowHeight, rowHeightCondensed }}>
+			value={{ fontScale, width, height, isLargeFontScale, fontScaleLimited, rowHeight, rowHeightCondensed, scaleFontSize }}>
 			{children}
 		</ResponsiveLayoutContext.Provider>
 	);
diff --git a/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx b/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx
index c3c78054fb7..636b3495aaf 100644
--- a/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx
+++ b/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx
@@ -8,6 +8,7 @@ import I18n from '../../../i18n';
 import { useTheme } from '../../../theme';
 import sharedStyles from '../../Styles';
 import { type TAlertDisplayType } from '..';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	leftTitleContainer: {
@@ -51,6 +52,7 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	const OPTIONS: TOPTIONS = [
 		{
@@ -91,12 +93,12 @@ const ListPicker = ({
 			onPress={openOptions}
 			title={() => (
 				<View style={styles.leftTitleContainer}>
-					<Text style={[styles.leftTitle, { color: colors.fontDefault }]}>{title}</Text>
+					<Text style={[styles.leftTitle, { color: colors.fontDefault, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{title}</Text>
 				</View>
 			)}
 			right={() => (
 				<View style={styles.rightTitleContainer}>
-					<Text style={[styles.rightTitle, { color: colors.fontInfo }]}>{option?.label}</Text>
+					<Text style={[styles.rightTitle, { color: colors.fontInfo, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{option?.label}</Text>
 				</View>
 			)}
 			rightContainerStyle={styles.rightContainer}
diff --git a/app/views/AuthLoadingView.tsx b/app/views/AuthLoadingView.tsx
index 9321cd4cfbd..5accb092439 100644
--- a/app/views/AuthLoadingView.tsx
+++ b/app/views/AuthLoadingView.tsx
@@ -5,6 +5,7 @@ import I18n from '../i18n';
 import { useTheme } from '../theme';
 import sharedStyles from './Styles';
 import { useAppSelector } from '../lib/hooks/useAppSelector';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -23,12 +24,13 @@ const styles = StyleSheet.create({
 const AuthLoadingView = React.memo((): React.ReactElement => {
 	const text = useAppSelector(state => state.app.text);
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
 		<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
 			{text ? (
 				<>
 					<ActivityIndicator color={colors.fontSecondaryInfo} size='large' />
-					<Text style={[styles.text, { color: colors.fontDefault }]}>{`${text}\n${I18n.t('Please_wait')}`}</Text>
+					<Text style={[styles.text, { color: colors.fontDefault, fontSize: scaleFontSize(16) }]}>{`${text}\n${I18n.t('Please_wait')}`}</Text>
 				</>
 			) : null}
 		</View>
diff --git a/app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx b/app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
index 541cd07b926..4ff7d3512f1 100644
--- a/app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
+++ b/app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
@@ -6,6 +6,7 @@ import { useTheme } from '../../../theme';
 import Touch from '../../../containers/Touch';
 import { CustomIcon } from '../../../containers/CustomIcon';
 import sharedStyles from '../../Styles';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IDepartmentItemFilter {
 	currentDepartment: ILivechatDepartment;
@@ -32,12 +33,13 @@ const styles = StyleSheet.create({
 
 const DepartmentItemFilter = ({ currentDepartment, value, onPress }: IDepartmentItemFilter): JSX.Element => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const iconName = currentDepartment?._id === value?._id ? 'check' : null;
 
 	return (
 		<Touch onPress={() => onPress(value)} style={{ backgroundColor: colors.surfaceRoom }}>
 			<View style={styles.container}>
-				<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{value?.name}</Text>
+				<Text style={[styles.text, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(16) }]}>{value?.name}</Text>
 				{iconName ? <CustomIcon name={iconName} size={22} color={colors.fontSecondaryInfo} /> : null}
 			</View>
 		</Touch>
diff --git a/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx b/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
index 66d9c74f1b6..e4910cf3ae1 100644
--- a/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
+++ b/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
@@ -5,6 +5,7 @@ import I18n from '../../../i18n';
 import { useTheme } from '../../../theme';
 import sharedStyles from '../../Styles';
 import Switch from '../../../containers/Switch';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	switchContainer: {
@@ -38,12 +39,13 @@ export interface ISwitch extends SwitchProps {
 
 export const SwitchItem = ({ id, value, label, hint, onValueChange, disabled = false }: ISwitch) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	return (
 		<View style={[styles.switchContainer, { backgroundColor: colors.surfaceTint }]}>
 			<View accessible accessibilityLabel={`${I18n.t(label)}, ${I18n.t(hint)}`} style={styles.switchTextContainer}>
-				<Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t(label)}</Text>
-				<Text testID={`create-channel-${id}-hint`} style={[styles.hint, { color: colors.fontSecondaryInfo }]}>
+				<Text style={[styles.label, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{I18n.t(label)}</Text>
+				<Text testID={`create-channel-${id}-hint`} style={[styles.hint, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(20) }]}>
 					{I18n.t(hint)}
 				</Text>
 			</View>
diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx
index 3171154d7b1..caf2d6793e0 100644
--- a/app/views/DirectoryView/Options.tsx
+++ b/app/views/DirectoryView/Options.tsx
@@ -8,6 +8,7 @@ import I18n from '../../i18n';
 import styles from './styles';
 import Switch from '../../containers/Switch';
 import { useTheme } from '../../theme';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IDirectoryOptionsProps {
 	type: string;
@@ -25,6 +26,7 @@ const DirectoryOptions = ({
 	toggleWorkspace
 }: IDirectoryOptionsProps) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const insets = useSafeAreaInsets();
 
 	const renderItem = (itemType: string) => {
@@ -65,8 +67,8 @@ const DirectoryOptions = ({
 					<List.Separator />
 					<View style={[styles.filterItemContainer, styles.globalUsersContainer]}>
 						<View style={styles.globalUsersTextContainer}>
-							<Text style={[styles.filterItemText, { color: colors.fontHint }]}>{I18n.t('Search_global_users')}</Text>
-							<Text style={[styles.filterItemDescription, { color: colors.fontHint }]}>
+							<Text style={[styles.filterItemText, { color: colors.fontHint, fontSize: scaleFontSize(18) }]}>{I18n.t('Search_global_users')}</Text>
+							<Text style={[styles.filterItemDescription, { color: colors.fontHint, fontSize: scaleFontSize(14) }]}>
 								{I18n.t('Search_global_users_description')}
 							</Text>
 						</View>
diff --git a/app/views/DiscussionsView/DiscussionDetails.tsx b/app/views/DiscussionsView/DiscussionDetails.tsx
index 6622ee48bf7..255179bc93a 100644
--- a/app/views/DiscussionsView/DiscussionDetails.tsx
+++ b/app/views/DiscussionsView/DiscussionDetails.tsx
@@ -5,6 +5,7 @@ import { CustomIcon } from '../../containers/CustomIcon';
 import sharedStyles from '../Styles';
 import { useTheme } from '../../theme';
 import { type IMessageFromServer } from '../../definitions';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -36,6 +37,7 @@ interface IDiscussionDetails {
 
 const DiscussionDetails = ({ item, date }: IDiscussionDetails): React.ReactElement => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	let count: string | number | undefined = item.dcount;
 	if (count && count >= 1000) {
 		count = '+999';
@@ -46,14 +48,14 @@ const DiscussionDetails = ({ item, date }: IDiscussionDetails): React.ReactEleme
 			<View style={styles.detailsContainer}>
 				<View style={styles.detailContainer}>
 					<CustomIcon name={'discussions'} size={24} color={colors.fontSecondaryInfo} />
-					<Text style={[styles.detailText, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
+					<Text style={[styles.detailText, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(10) }]} numberOfLines={1}>
 						{count}
 					</Text>
 				</View>
 
 				<View style={styles.detailContainer}>
 					<CustomIcon name={'clock'} size={24} color={colors.fontSecondaryInfo} />
-					<Text style={[styles.detailText, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
+					<Text style={[styles.detailText, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(10) }]} numberOfLines={1}>
 						{date}
 					</Text>
 				</View>
diff --git a/app/views/ForgotPasswordView.tsx b/app/views/ForgotPasswordView.tsx
index 509701a1239..0dcb36e9537 100644
--- a/app/views/ForgotPasswordView.tsx
+++ b/app/views/ForgotPasswordView.tsx
@@ -16,6 +16,7 @@ import { useTheme } from '../theme';
 import { showErrorAlert } from '../lib/methods/helpers';
 import { events, logEvent } from '../lib/methods/helpers/log';
 import sharedStyles from './Styles';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const schema = yup.object().shape({
 	email: yup.string().email().required()
@@ -37,6 +38,7 @@ const ForgotPasswordView = (): React.ReactElement => {
 	const navigation = useNavigation<NativeStackNavigationProp<OutsideParamList, 'ForgotPasswordView'>>();
 	const { params } = useRoute<RouteProp<OutsideParamList, 'ForgotPasswordView'>>();
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	useLayoutEffect(() => {
 		navigation.setOptions({
@@ -67,10 +69,10 @@ const ForgotPasswordView = (): React.ReactElement => {
 	return (
 		<FormContainer testID='forgot-password-view'>
 			<FormContainerInner>
-				<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: colors.fontTitlesLabels, fontSize: 24 }]}>
+				<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(20), lineHeight: scaleFontSize(28) }]}>
 					{I18n.t('Reset_password')}
 				</Text>
-				<Text style={[sharedStyles.textMedium, { color: colors.fontTitlesLabels, lineHeight: 22, fontSize: 16 }]}>
+				<Text style={[sharedStyles.textMedium, { color: colors.fontTitlesLabels, lineHeight: scaleFontSize(20), fontSize: scaleFontSize(16) }]}>
 					{I18n.t('Email')}
 				</Text>
 				<ControlledFormTextInput
diff --git a/app/views/LoginView/UserForm.tsx b/app/views/LoginView/UserForm.tsx
index ce62127dc30..72f608edaf6 100644
--- a/app/views/LoginView/UserForm.tsx
+++ b/app/views/LoginView/UserForm.tsx
@@ -19,6 +19,7 @@ import UGCRules from '../../containers/UserGeneratedContentRules';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 import styles from './styles';
 import { handleLoginErrors } from './handleLoginErrors';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface ISubmit {
 	user: string;
@@ -32,6 +33,7 @@ const schema = yup.object().shape({
 
 const UserForm = () => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const dispatch = useDispatch();
 	const navigation = useNavigation<NativeStackNavigationProp<OutsideParamList, 'LoginView'>>();
 	const workspaceDomain = useWorkspaceDomain();
@@ -102,7 +104,7 @@ const UserForm = () => {
 
 	return (
 		<>
-			<Text style={[styles.title, sharedStyles.textBold, { color: colors.fontTitlesLabels }]}>{I18n.t('Login')}</Text>
+			<Text style={[styles.title, sharedStyles.textBold, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(22) }]}>{I18n.t('Login')}</Text>
 			<View style={styles.credentialsContainer}>
 				<ControlledFormTextInput
 					name='user'
@@ -140,7 +142,7 @@ const UserForm = () => {
 			<View style={styles.bottomContainer}>
 				{Accounts_PasswordReset && (
 					<View style={styles.bottomContainerGroup}>
-						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Forgot_password')}</Text>
+						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14) }]}>{I18n.t('Forgot_password')}</Text>
 						<Button
 							title={I18n.t('Reset_password')}
 							type='secondary'
@@ -151,13 +153,13 @@ const UserForm = () => {
 				)}
 				{showRegistrationButton ? (
 					<View style={styles.bottomContainerGroup}>
-						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
+						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14) }]}>
 							{I18n.t('You_dont_have_account')}
 						</Text>
 						<Button title={I18n.t('Create_account')} onPress={register} type='secondary' testID='login-view-register' />
 					</View>
 				) : (
-					<Text style={[styles.registerDisabled, { color: colors.fontSecondaryInfo }]}>
+					<Text style={[styles.registerDisabled, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(16) }]}>
 						{Accounts_RegistrationForm_LinkReplacementText}
 					</Text>
 				)}
diff --git a/app/views/MediaAutoDownloadView/ListPicker.tsx b/app/views/MediaAutoDownloadView/ListPicker.tsx
index b1980731f6d..f507a359da0 100644
--- a/app/views/MediaAutoDownloadView/ListPicker.tsx
+++ b/app/views/MediaAutoDownloadView/ListPicker.tsx
@@ -8,6 +8,7 @@ import I18n from '../../i18n';
 import { useTheme } from '../../theme';
 import sharedStyles from '../Styles';
 import { type MediaDownloadOption } from '../../lib/constants/mediaAutoDownload';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	leftTitleContainer: {
@@ -66,6 +67,7 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const insets = useSafeAreaInsets();
 	const option = OPTIONS.find(option => option.value === value) || OPTIONS[2];
 
@@ -93,12 +95,12 @@ const ListPicker = ({
 			onPress={() => showActionSheet({ children: getOptions() })}
 			title={() => (
 				<View style={styles.leftTitleContainer}>
-					<Text style={[styles.leftTitle, { color: colors.fontDefault }]}>{title}</Text>
+					<Text style={[styles.leftTitle, { color: colors.fontDefault, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{title}</Text>
 				</View>
 			)}
 			right={() => (
 				<View style={styles.rightTitleContainer}>
-					<Text style={[styles.rightTitle, { color: colors.fontHint }]}>{label}</Text>
+					<Text style={[styles.rightTitle, { color: colors.fontHint, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>{label}</Text>
 				</View>
 			)}
 			rightContainerStyle={styles.rightContainer}
diff --git a/app/views/NewServerView/components/ServersHistoryItem/ServersHistoryItem.stories.tsx b/app/views/NewServerView/components/ServersHistoryItem/ServersHistoryItem.stories.tsx
index c3435796f02..c93c7238c49 100644
--- a/app/views/NewServerView/components/ServersHistoryItem/ServersHistoryItem.stories.tsx
+++ b/app/views/NewServerView/components/ServersHistoryItem/ServersHistoryItem.stories.tsx
@@ -29,7 +29,8 @@ const responsiveLayoutProviderValue = {
 	rowHeight: BASE_ROW_HEIGHT,
 	rowHeightCondensed: BASE_ROW_HEIGHT_CONDENSED,
 	width: 350,
-	height: 800
+	height: 800,
+	scaleFontSize: (size: number) => size
 };
 
 const ServersHistoryItem = ({
diff --git a/app/views/NotificationPreferencesView/index.tsx b/app/views/NotificationPreferencesView/index.tsx
index 4d0bdd72dad..d2a696ec48d 100644
--- a/app/views/NotificationPreferencesView/index.tsx
+++ b/app/views/NotificationPreferencesView/index.tsx
@@ -19,6 +19,7 @@ import { useTheme } from '../../theme';
 import sharedStyles from '../Styles';
 import { OPTIONS } from './options';
 import Switch from '../../containers/Switch';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 type TOptions = keyof typeof OPTIONS;
 type TRoomNotifications = keyof IRoomNotifications;
@@ -42,6 +43,7 @@ const RenderListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	const pref = room[preference]
 		? OPTIONS[preference as TOptions].find(option => option.value === room[preference])
@@ -66,7 +68,7 @@ const RenderListPicker = ({
 			title={title}
 			testID={testID}
 			onPress={() => showActionSheet({ options })}
-			right={() => <Text style={[{ ...sharedStyles.textRegular, fontSize: 16 }, { color: colors.fontHint }]}>{label}</Text>}
+			right={() => <Text style={[{ ...sharedStyles.textRegular, fontSize: scaleFontSize(16) }, { color: colors.fontHint }]}>{label}</Text>}
 			additionalAccessibilityLabel={label}
 		/>
 	);
diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx
index c4075e61b9a..81b00ac38a1 100644
--- a/app/views/PickerView.tsx
+++ b/app/views/PickerView.tsx
@@ -12,6 +12,7 @@ import { type TNavigation } from '../stacks/stackType';
 import { useTheme } from '../theme';
 import { type IOptionsField } from './NotificationPreferencesView/options';
 import sharedStyles from './Styles';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	noResult: {
@@ -56,6 +57,7 @@ const PickerView = (): React.ReactElement => {
 	} = useAppRoute<TNavigation, 'PickerView'>();
 
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	const [data, setData] = useState(paramData);
 	const [total, setTotal] = useState(paramTotal ?? 0);
@@ -108,7 +110,7 @@ const PickerView = (): React.ReactElement => {
 				ListHeaderComponent={<RenderSearch onChangeText={onChangeText} />}
 				ListFooterComponent={List.Separator}
 				ListEmptyComponent={() => (
-					<Text style={[styles.noResult, { color: colors.fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text>
+					<Text style={[styles.noResult, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16) }]}>{I18n.t('No_results_found')}</Text>
 				)}
 			/>
 		</SafeAreaView>
diff --git a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
index 8f93ccc1b8f..69c58f02b67 100644
--- a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
+++ b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
@@ -17,17 +17,14 @@ import { ControlledFormTextInput } from '../../../../containers/TextInput';
 import { useActionSheet } from '../../../../containers/ActionSheet/Provider';
 import { events, logEvent } from '../../../../lib/methods/helpers/log';
 import { getTranslations } from './getTranslations';
+import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	subtitleText: {
-		...sharedStyles.textRegular,
-		fontSize: 16,
-		lineHeight: 24
+		...sharedStyles.textRegular
 	},
 	titleContainerText: {
 		...sharedStyles.textBold,
-		fontSize: 16,
-		lineHeight: 24,
 		paddingLeft: 12
 	},
 	titleContainer: {
@@ -44,6 +41,7 @@ const styles = StyleSheet.create({
 
 const DeleteAccountActionSheetContent = (): React.ReactElement => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const { hideActionSheet, showActionSheet } = useActionSheet();
 	const dispatch = useDispatch();
 	const {
@@ -93,11 +91,11 @@ const DeleteAccountActionSheetContent = (): React.ReactElement => {
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<View accessible accessibilityLabel={i18n.t('Are_you_sure_you_want_to_delete_your_account')} style={styles.titleContainer}>
 				<CustomIcon name={'warning'} size={32} color={colors.buttonBackgroundDangerDefault} />
-				<Text style={[styles.titleContainerText, { color: colors.fontDefault }]}>
+				<Text style={[styles.titleContainerText, { color: colors.fontDefault, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>
 					{i18n.t('Are_you_sure_you_want_to_delete_your_account')}
 				</Text>
 			</View>
-			<Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>
+			<Text style={[styles.subtitleText, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(24) }]}>
 				{i18n.t('For_your_security_you_must_enter_your_current_password_to_continue')}
 			</Text>
 
diff --git a/app/views/RegisterView/index.tsx b/app/views/RegisterView/index.tsx
index dd1ac096850..de8a7218300 100644
--- a/app/views/RegisterView/index.tsx
+++ b/app/views/RegisterView/index.tsx
@@ -28,6 +28,7 @@ import useVerifyPassword from '../../lib/hooks/useVerifyPassword';
 import CustomFields from '../../containers/CustomFields';
 import useParsedCustomFields from '../../lib/hooks/useParsedCustomFields';
 import styles from './styles';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IProps extends IBaseScreen<OutsideParamList, 'RegisterView'> {}
 
@@ -48,6 +49,7 @@ const RegisterView = ({ navigation, route }: IProps) => {
 
 	const dispatch = useDispatch();
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const { Accounts_CustomFields, Site_Url, Accounts_EmailVerification, Accounts_ManuallyApproveNewUsers, showLoginButton } =
 		useAppSelector(state => ({
 			...state.settings,
@@ -177,7 +179,7 @@ const RegisterView = ({ navigation, route }: IProps) => {
 			<FormContainerInner accessibilityLabel={I18n.t('Sign_Up')}>
 				<LoginServices separator />
 				<View accessible accessibilityLabel={I18n.t('Sign_Up')}>
-					<Text accessible accessibilityLabel={I18n.t('Sign_Up')} style={[styles.title, { color: colors.fontTitlesLabels }]}>
+					<Text accessible accessibilityLabel={I18n.t('Sign_Up')} style={[styles.title, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(24), lineHeight: scaleFontSize(36) }]}>
 						{I18n.t('Sign_Up')}
 					</Text>
 				</View>
@@ -294,7 +296,7 @@ const RegisterView = ({ navigation, route }: IProps) => {
 
 				{showLoginButton ? (
 					<View style={styles.bottomContainer}>
-						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
+						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(22) }]}>
 							{I18n.t('Already_have_an_account')}
 						</Text>
 						<Button title={I18n.t('Login')} type='secondary' onPress={login} style={styles.loginButton} />
diff --git a/app/views/RoomInfoView/Direct.tsx b/app/views/RoomInfoView/Direct.tsx
index 40d64c203e4..0f65961c08a 100644
--- a/app/views/RoomInfoView/Direct.tsx
+++ b/app/views/RoomInfoView/Direct.tsx
@@ -7,15 +7,17 @@ import CustomFields from './CustomFields';
 import Timezone from './Timezone';
 import styles from './styles';
 import { type IUser } from '../../definitions';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import { RoomInfoTag, RoomInfoTagContainer } from './components/RoomInfoTag';
 
 const Roles = ({ roles }: { roles?: string[] }) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	if (roles?.length) {
 		return (
 			<View style={styles.item} testID='user-roles'>
-				<Text style={[styles.itemLabel, { color: colors.fontTitlesLabels }]}>{I18n.t('Roles')}</Text>
+				<Text style={[styles.itemLabel, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(14) }]}>{I18n.t('Roles')}</Text>
 				<RoomInfoTagContainer>
 					{roles.map(role =>
 						role ? <RoomInfoTag name={role} key={role} testID={`user-role-${role.replace(/ /g, '-')}`} /> : null
diff --git a/app/views/RoomInfoView/Livechat.tsx b/app/views/RoomInfoView/Livechat.tsx
index 0c0e28bf26f..dff9156fb9d 100644
--- a/app/views/RoomInfoView/Livechat.tsx
+++ b/app/views/RoomInfoView/Livechat.tsx
@@ -11,6 +11,7 @@ import sharedStyles from '../Styles';
 import CustomFields from './CustomFields';
 import Item from './Item';
 import Timezone from './Timezone';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	title: {
@@ -22,7 +23,8 @@ const styles = StyleSheet.create({
 
 const Title = ({ title }: { title: string }) => {
 	const { colors } = useTheme();
-	return <Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{title}</Text>;
+	const { scaleFontSize } = useResponsiveLayout();
+	return <Text style={[styles.title, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16) }]}>{title}</Text>;
 };
 
 const Livechat = ({ room, roomUser }: { room: ISubscription; roomUser: ILivechatVisitorModified }): React.ReactElement => {
diff --git a/app/views/RoomInfoView/components/ItemLabel.tsx b/app/views/RoomInfoView/components/ItemLabel.tsx
index 50b5c872881..fcc3fe67596 100644
--- a/app/views/RoomInfoView/components/ItemLabel.tsx
+++ b/app/views/RoomInfoView/components/ItemLabel.tsx
@@ -2,6 +2,7 @@ import { Text } from 'react-native';
 
 import { useTheme } from '../../../theme';
 import styles from '../styles';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IItemLabel {
 	label: string;
@@ -10,8 +11,9 @@ interface IItemLabel {
 
 export const ItemLabel = ({ label, testID }: IItemLabel) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	return (
-		<Text accessibilityLabel={label} style={[styles.itemLabel, { color: colors.fontTitlesLabels }]} testID={testID}>
+		<Text accessibilityLabel={label} style={[styles.itemLabel, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(14) }]} testID={testID}>
 			{label}
 		</Text>
 	);
diff --git a/app/views/RoomInfoView/components/RoomInfoTag.tsx b/app/views/RoomInfoView/components/RoomInfoTag.tsx
index a68e27ab8d5..e59ac05221e 100644
--- a/app/views/RoomInfoView/components/RoomInfoTag.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoTag.tsx
@@ -5,14 +5,16 @@ import { useTheme } from '../../../theme';
 import styles from '../styles';
 import { CustomIcon } from '../../../containers/CustomIcon';
 import type { TIconsName } from '../../../containers/CustomIcon';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 export const RoomInfoTag = ({ name, icon, testID }: { name: string; icon?: TIconsName; testID?: string }) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	return (
 		<View style={[styles.roleBadge, { backgroundColor: colors.surfaceSelected }]} testID={testID}>
 			{icon ? <CustomIcon name={icon} size={16} /> : null}
-			<Text style={[styles.role, { color: colors.buttonFontSecondary }]}>{name}</Text>
+			<Text style={[styles.role, { color: colors.buttonFontSecondary, fontSize: scaleFontSize(14) }]}>{name}</Text>
 		</View>
 	);
 };
diff --git a/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx b/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx
index 036413c5860..712cc74db3a 100644
--- a/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx
@@ -11,6 +11,7 @@ import CollapsibleText from '../../../containers/CollapsibleText';
 import EventEmitter from '../../../lib/methods/helpers/events';
 import { LISTENER } from '../../../containers/Toast';
 import I18n from '../../../i18n';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 interface IRoomInfoViewTitle {
 	room?: ISubscription;
@@ -22,6 +23,7 @@ interface IRoomInfoViewTitle {
 
 const RoomInfoViewTitle = ({ room, name, username, statusText, type }: IRoomInfoViewTitle): React.ReactElement => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	const copyInfoToClipboard = (data: string) => {
 		Clipboard.setString(data);
@@ -34,21 +36,21 @@ const RoomInfoViewTitle = ({ room, name, username, statusText, type }: IRoomInfo
 				<Text
 					onLongPress={() => (name ? copyInfoToClipboard(name) : {})}
 					testID='room-info-view-name'
-					style={[styles.roomTitle, { color: colors.fontTitlesLabels }]}>
+					style={[styles.roomTitle, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16) }]}>
 					{name}
 				</Text>
 				{username && (
 					<Text
 						onLongPress={() => copyInfoToClipboard(username)}
 						testID='room-info-view-username'
-						style={[styles.roomUsername, { color: colors.fontSecondaryInfo }]}>{`@${username}`}</Text>
+						style={[styles.roomUsername, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14) }]}>{`@${username}`}</Text>
 				)}
 				{!!statusText && (
 					<View testID='room-info-view-custom-status'>
 						<CollapsibleText
 							linesToTruncate={2}
 							msg={statusText}
-							style={[styles.roomUsername, { color: colors.fontSecondaryInfo }]}
+							style={[styles.roomUsername, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14) }]}
 						/>
 					</View>
 				)}
@@ -65,7 +67,7 @@ const RoomInfoViewTitle = ({ room, name, username, statusText, type }: IRoomInfo
 				sourceType={room?.source}
 				abacAttributes={room?.abacAttributes}
 			/>
-			<Text testID='room-info-view-name' style={[styles.roomTitle, { color: colors.fontTitlesLabels }]} key='room-info-name'>
+			<Text testID='room-info-view-name' style={[styles.roomTitle, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16) }]} key='room-info-name'>
 				{getRoomTitle(room)}
 			</Text>
 		</View>
diff --git a/app/views/RoomView/JoinCode.tsx b/app/views/RoomView/JoinCode.tsx
index 4245d5cdcbc..22ce7f6c1ad 100644
--- a/app/views/RoomView/JoinCode.tsx
+++ b/app/views/RoomView/JoinCode.tsx
@@ -11,6 +11,7 @@ import { themes } from '../../lib/constants/colors';
 import { type IApplicationState } from '../../definitions';
 import { joinRoom } from '../../lib/services/restApi';
 import { type TSupportedThemes } from '../../theme';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -59,6 +60,7 @@ const JoinCode = React.memo(
 		const [visible, setVisible] = useState(false);
 		const [error, setError] = useState(false);
 		const [code, setCode] = useState('');
+		const { scaleFontSize } = useResponsiveLayout();
 
 		const show = () => setVisible(true);
 
@@ -85,7 +87,7 @@ const JoinCode = React.memo(
 							isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
 							{ backgroundColor: themes[theme].surfaceRoom }
 						]}>
-						<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Insert_Join_Code')}</Text>
+						<Text style={[styles.title, { color: themes[theme].fontTitlesLabels, fontSize: scaleFontSize(16) }]}>{I18n.t('Insert_Join_Code')}</Text>
 						<FormTextInput
 							value={code}
 							inputRef={(e: any) => {
diff --git a/app/views/RoomView/LoadMore/index.tsx b/app/views/RoomView/LoadMore/index.tsx
index 295871402ac..f606ff9c9ab 100644
--- a/app/views/RoomView/LoadMore/index.tsx
+++ b/app/views/RoomView/LoadMore/index.tsx
@@ -11,6 +11,7 @@ import sharedStyles from '../../Styles';
 import I18n from '../../../i18n';
 import { roomHistoryRequest } from '../../../actions/room';
 import { useAppSelector } from '../../../lib/hooks/useAppSelector';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	button: {
@@ -44,6 +45,7 @@ const LoadMore = React.memo(
 		showUnreadSeparator?: boolean;
 	}): React.ReactElement => {
 		const { colors } = useTheme();
+		const { scaleFontSize } = useResponsiveLayout();
 		const dispatch = useDispatch();
 		const loading = useAppSelector(state => state.room.historyLoaders.some(historyLoader => historyLoader === loaderId));
 
@@ -70,7 +72,7 @@ const LoadMore = React.memo(
 					{loading ? (
 						<ActivityIndicator color={colors.fontSecondaryInfo} />
 					) : (
-						<Text style={[styles.text, { color: colors.fontTitlesLabels }]}>{I18n.t(text)}</Text>
+						<Text style={[styles.text, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16) }]}>{I18n.t(text)}</Text>
 					)}
 				</Touch>
 			</>
diff --git a/app/views/RoomsListView/components/Header.tsx b/app/views/RoomsListView/components/Header.tsx
index 6d56a9582f0..bea81a7fb63 100644
--- a/app/views/RoomsListView/components/Header.tsx
+++ b/app/views/RoomsListView/components/Header.tsx
@@ -9,6 +9,7 @@ import { useAppSelector } from '../../../lib/hooks/useAppSelector';
 import { useTheme } from '../../../theme';
 import sharedStyles from '../../Styles';
 import ServersList from './ServersList';
+import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	container: {
@@ -41,6 +42,7 @@ const RoomsListHeaderView = ({ search, searchEnabled }: { search: (text: string)
 	const server = useAppSelector(state => state.server.server);
 	const { status: supportedVersionsStatus } = useAppSelector(state => state.supportedVersions);
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const { fontScale } = useWindowDimensions();
 
 	const onPress = () => {
@@ -68,14 +70,14 @@ const RoomsListHeaderView = ({ search, searchEnabled }: { search: (text: string)
 		<View style={styles.container} accessibilityLabel={`${serverName} ${subtitle}`} accessibilityRole='header' accessible>
 			<TouchableOpacity onPress={onPress} testID='rooms-list-header-servers-list-button'>
 				<View style={styles.button}>
-					<Text style={[styles.title, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
+					<Text style={[styles.title, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16) }]} numberOfLines={1}>
 						{serverName}
 					</Text>
 				</View>
 				{subtitle ? (
 					<Text
 						testID='rooms-list-header-server-subtitle'
-						style={[styles.subtitle, { color: colors.fontSecondaryInfo }]}
+						style={[styles.subtitle, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14) }]}
 						numberOfLines={1}>
 						{subtitle}
 					</Text>
diff --git a/app/views/SelectedUsersView/Header.tsx b/app/views/SelectedUsersView/Header.tsx
index cab1f99b804..981444301ab 100644
--- a/app/views/SelectedUsersView/Header.tsx
+++ b/app/views/SelectedUsersView/Header.tsx
@@ -9,6 +9,7 @@ import { useTheme } from '../../theme';
 import sharedStyles from '../Styles';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 import Chip from '../../containers/Chip';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	selectedText: {
@@ -34,6 +35,7 @@ const Header = ({
 }) => {
 	const flatlist = useRef<FlatList<ISelectedUser>>(null);
 	const { theme } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const { users } = useAppSelector(state => ({
 		users: state.selectedUsers.users
 	}));
@@ -45,7 +47,7 @@ const Header = ({
 			<SearchBox onChangeText={(text: string) => onChangeText(text)} testID='select-users-view-search' />
 			{users.length === 0 ? null : (
 				<View>
-					<Text style={[styles.selectedText, { color: themes[theme].fontHint }]}>
+					<Text style={[styles.selectedText, { color: themes[theme].fontHint, fontSize: scaleFontSize(12) }]}>
 						{I18n.t('N_Selected_members', { n: users.length })}
 					</Text>
 					<FlatList
diff --git a/app/views/SendEmailConfirmationView.tsx b/app/views/SendEmailConfirmationView.tsx
index 5b8e2444f41..4f6412ffd6a 100644
--- a/app/views/SendEmailConfirmationView.tsx
+++ b/app/views/SendEmailConfirmationView.tsx
@@ -81,4 +81,4 @@ const SendEmailConfirmationView = () => {
 		</FormContainer>
 	);
 };
-export default SendEmailConfirmationView;
+export default SendEmailConfirmationView;
\ No newline at end of file
diff --git a/app/views/SetUsernameView.tsx b/app/views/SetUsernameView.tsx
index 6e36da60f30..f8bcae9f774 100644
--- a/app/views/SetUsernameView.tsx
+++ b/app/views/SetUsernameView.tsx
@@ -21,6 +21,7 @@ import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
 import sharedStyles from './Styles';
 import { getUsernameSuggestion, saveUserProfile } from '../lib/services/restApi';
 import { useAppSelector } from '../lib/hooks/useAppSelector';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	loginTitle: {
@@ -49,6 +50,7 @@ const SetUsernameView = () => {
 	const [loading, setLoading] = useState(false);
 
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const dispatch = useDispatch();
 	const { server, user } = useAppSelector(state => ({
 		server: state.server.server,
@@ -94,10 +96,10 @@ const SetUsernameView = () => {
 		<KeyboardView backgroundColor={colors.surfaceHover}>
 			<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
 				<SafeAreaView testID='set-username-view'>
-					<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle, { color: colors.fontTitlesLabels }]}>
+					<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(20), lineHeight: scaleFontSize(28) }]}>
 						{I18n.t('Username')}
 					</Text>
-					<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: colors.fontTitlesLabels }]}>
+					<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(20) }]}>
 						{I18n.t('Set_username_subtitle')}
 					</Text>
 					<ControlledFormTextInput
@@ -116,7 +118,7 @@ const SetUsernameView = () => {
 							sharedStyles.loginTitle,
 							sharedStyles.textBold,
 							styles.loginTitle,
-							{ color: colors.fontTitlesLabels, marginBottom: 10 }
+							{ color: colors.fontTitlesLabels, marginBottom: 10, fontSize: scaleFontSize(20), lineHeight: scaleFontSize(28) }
 						]}>
 						{I18n.t('Name')}
 					</Text>
diff --git a/app/views/UserNotificationPreferencesView/ListPicker.tsx b/app/views/UserNotificationPreferencesView/ListPicker.tsx
index d6a6a6260a1..cc43c781597 100644
--- a/app/views/UserNotificationPreferencesView/ListPicker.tsx
+++ b/app/views/UserNotificationPreferencesView/ListPicker.tsx
@@ -8,6 +8,7 @@ import { useTheme } from '../../theme';
 import sharedStyles from '../Styles';
 import { OPTIONS } from './options';
 import { useActionSheet } from '../../containers/ActionSheet';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	pickerText: {
@@ -36,6 +37,7 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const option = value ? OPTIONS[preference].find(option => option.value === value) : OPTIONS[preference][0];
 	const insets = useSafeAreaInsets();
 
@@ -66,7 +68,7 @@ const ListPicker = ({
 			title={title}
 			testID={testID}
 			onPress={() => showActionSheet({ children: getOptions() })}
-			right={() => <Text style={[styles.pickerText, { color: colors.fontInfo }]}>{label}</Text>}
+			right={() => <Text style={[styles.pickerText, { color: colors.fontInfo, fontSize: scaleFontSize(16) }]}>{label}</Text>}
 			additionalAccessibilityLabel={label}
 		/>
 	);
diff --git a/app/views/UserPreferencesView/FontSizePicker.tsx b/app/views/UserPreferencesView/FontSizePicker.tsx
new file mode 100644
index 00000000000..63daa7e4417
--- /dev/null
+++ b/app/views/UserPreferencesView/FontSizePicker.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { type TActionSheetOptionsItem, useActionSheet } from '../../containers/ActionSheet';
+import { CustomIcon } from '../../containers/CustomIcon';
+import * as List from '../../containers/List';
+import I18n from '../../i18n';
+import { useTheme } from '../../theme';
+import sharedStyles from '../Styles';
+import { FONT_SIZE_PREFERENCES_KEY } from '../../lib/constants/keys';
+import { FONT_SIZE_OPTIONS, useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import { useUserPreferences } from '../../lib/methods/userPreferences';
+
+const styles = StyleSheet.create({
+	title: { ...sharedStyles.textRegular, fontSize: 16 }
+});
+
+const FONT_SIZE_LABELS = {
+	[FONT_SIZE_OPTIONS.SMALL]: 'Small',
+	[FONT_SIZE_OPTIONS.NORMAL]: 'Normal',
+	[FONT_SIZE_OPTIONS.LARGE]: 'Large',
+	[FONT_SIZE_OPTIONS.EXTRA_LARGE]: 'Extra_Large'
+};
+
+const FONT_SIZE_OPTIONS_ARRAY = [
+	{ label: FONT_SIZE_LABELS[FONT_SIZE_OPTIONS.SMALL], value: FONT_SIZE_OPTIONS.SMALL.toString() },
+	{ label: FONT_SIZE_LABELS[FONT_SIZE_OPTIONS.NORMAL], value: FONT_SIZE_OPTIONS.NORMAL.toString() },
+	{ label: FONT_SIZE_LABELS[FONT_SIZE_OPTIONS.LARGE], value: FONT_SIZE_OPTIONS.LARGE.toString() },
+	{ label: FONT_SIZE_LABELS[FONT_SIZE_OPTIONS.EXTRA_LARGE], value: FONT_SIZE_OPTIONS.EXTRA_LARGE.toString() }
+];
+
+interface IFontSizePickerProps {
+	title: string;
+	testID: string;
+}
+
+const FontSizePicker = ({ title, testID }: IFontSizePickerProps) => {
+	const { showActionSheet, hideActionSheet } = useActionSheet();
+	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
+	const [fontSize, setFontSize] = useUserPreferences<string>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL.toString());
+
+	// Derive option from fontSize directly instead of using state
+	const option = FONT_SIZE_OPTIONS_ARRAY.find(opt => opt.value === fontSize) || FONT_SIZE_OPTIONS_ARRAY[1];
+
+	const handleFontSizeChange = (value: string) => {
+		setFontSize(value);
+	};
+
+	const getOptions = (): TActionSheetOptionsItem[] =>
+		FONT_SIZE_OPTIONS_ARRAY.map(i => ({
+			title: I18n.t(i.label, { defaultValue: i.label }),
+			onPress: () => {
+				hideActionSheet();
+				handleFontSizeChange(i.value);
+			},
+			right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.fontHint} /> : undefined
+		}));
+
+	const label = option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label;
+
+	return (
+		<List.Item
+			title={title}
+			testID={testID}
+			onPress={() => showActionSheet({ options: getOptions() })}
+			right={() => <Text style={[styles.title, { color: colors.fontHint, fontSize: scaleFontSize(16) }]}>{label}</Text>}
+			additionalAccessibilityLabel={label}
+		/>
+	);
+};
+
+export default FontSizePicker;
diff --git a/app/views/UserPreferencesView/ListPicker.tsx b/app/views/UserPreferencesView/ListPicker.tsx
index e23c3f9f138..686ba6832c7 100644
--- a/app/views/UserPreferencesView/ListPicker.tsx
+++ b/app/views/UserPreferencesView/ListPicker.tsx
@@ -7,6 +7,7 @@ import * as List from '../../containers/List';
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
 import sharedStyles from '../Styles';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const styles = StyleSheet.create({
 	title: { ...sharedStyles.textRegular, fontSize: 16 }
@@ -49,6 +50,7 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 	const [option, setOption] = useState(
 		value ? OPTIONS[preference].find(option => option.value === value) : OPTIONS[preference][0]
 	);
@@ -71,7 +73,7 @@ const ListPicker = ({
 			title={title}
 			testID={testID}
 			onPress={() => showActionSheet({ options: getOptions() })}
-			right={() => <Text style={[styles.title, { color: colors.fontHint }]}>{label}</Text>}
+			right={() => <Text style={[styles.title, { color: colors.fontHint, fontSize: scaleFontSize(16) }]}>{label}</Text>}
 			additionalAccessibilityLabel={label}
 		/>
 	);
diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx
index 9b37c39e57b..c2b4408d281 100644
--- a/app/views/UserPreferencesView/index.tsx
+++ b/app/views/UserPreferencesView/index.tsx
@@ -13,6 +13,7 @@ import { type ProfileStackParamList } from '../../stacks/types';
 import { saveUserPreferences } from '../../lib/services/restApi';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 import ListPicker from './ListPicker';
+import FontSizePicker from './FontSizePicker';
 import Switch from '../../containers/Switch';
 import { type IUser } from '../../definitions';
 
@@ -116,6 +117,15 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 					/>
 					<List.Separator />
 				</List.Section>
+				<List.Section>
+					<List.Separator />
+					<FontSizePicker
+						title='Font_Size'
+						testID='preferences-view-font-size'
+					/>
+					<List.Separator />
+					<List.Info info='Font_Size_Description' />
+				</List.Section>
 			</List.Container>
 		</SafeAreaView>
 	);

From ab258a9e0523aa5a92203a7625925f4eb365c883 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sat, 10 Jan 2026 05:16:54 +0530
Subject: [PATCH 02/15] feat: Add font size scaling to channel header, actions
 page, and fix UI alignment

- Fix channel header text size scaling in RoomHeader component
- Add font size scaling to RoomActionsView (Actions page) title and description
- Fix vertical centering of room title and description in Actions page
- Add font size scaling to AudioPlayer components (Seek, PlaybackSpeed)
- Add font size scaling to SelectListView info text
- Fix List.Item rightContainer layout to display text and arrow horizontally
- Replace MarkdownPreview with direct Text component in RoomActionsView for better alignment
---
 app/containers/AudioPlayer/PlaybackSpeed.tsx |   4 +-
 app/containers/AudioPlayer/Seek.tsx          |   4 +-
 app/containers/List/ListItem.tsx             |   5 +-
 app/containers/RoomHeader/RoomHeader.tsx     |  10 +-
 app/views/FontSizePickerView/index.tsx       | 283 +++++++++++++++++++
 app/views/RoomActionsView/index.tsx          |  47 +--
 app/views/RoomActionsView/styles.ts          |  11 +-
 app/views/SelectListView.tsx                 |  19 +-
 app/views/UserPreferencesView/index.tsx      |  35 ++-
 9 files changed, 383 insertions(+), 35 deletions(-)
 create mode 100644 app/views/FontSizePickerView/index.tsx

diff --git a/app/containers/AudioPlayer/PlaybackSpeed.tsx b/app/containers/AudioPlayer/PlaybackSpeed.tsx
index 68fcc886bcb..2d62b2b1c65 100644
--- a/app/containers/AudioPlayer/PlaybackSpeed.tsx
+++ b/app/containers/AudioPlayer/PlaybackSpeed.tsx
@@ -7,10 +7,12 @@ import { useTheme } from '../../theme';
 import { AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS } from './constants';
 import { useUserPreferences } from '../../lib/methods/userPreferences';
 import NativeButton from '../NativeButton';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 const PlaybackSpeed = () => {
 	const [playbackSpeed, setPlaybackSpeed] = useUserPreferences<number>(AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS[1]);
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	const onPress = () => {
 		const speedIndex = AVAILABLE_SPEEDS.indexOf(playbackSpeed as number);
@@ -24,7 +26,7 @@ const PlaybackSpeed = () => {
 			accessibilityLabel={i18n.t('Playback_speed', { playbackSpeed: `${playbackSpeed} x` })}
 			onPress={onPress}
 			style={[styles.containerPlaybackSpeed, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
-			<Text style={[styles.playbackSpeedText, { color: colors.buttonFontSecondary }]}>{playbackSpeed}x</Text>
+			<Text style={[styles.playbackSpeedText, { color: colors.buttonFontSecondary, fontSize: scaleFontSize(14) }]}>{playbackSpeed}x</Text>
 		</NativeButton>
 	);
 };
diff --git a/app/containers/AudioPlayer/Seek.tsx b/app/containers/AudioPlayer/Seek.tsx
index eecd5d444e0..326499b2871 100644
--- a/app/containers/AudioPlayer/Seek.tsx
+++ b/app/containers/AudioPlayer/Seek.tsx
@@ -14,6 +14,7 @@ import Animated, {
 import styles from './styles';
 import { useTheme } from '../../theme';
 import { SEEK_HIT_SLOP, THUMB_SEEK_SIZE, ACTIVE_OFFSET_X, DEFAULT_TIME_LABEL } from './constants';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 Animated.addWhitelistedNativeProps({ text: true });
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
@@ -44,6 +45,7 @@ const formatTime = (ms: number) => {
 
 const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) => {
 	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
 
 	const maxWidth = useSharedValue(1);
 	const translateX = useSharedValue(0);
@@ -111,7 +113,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 				<AnimatedTextInput
 					defaultValue={DEFAULT_TIME_LABEL}
 					editable={false}
-					style={[styles.duration, { color: colors.fontDefault }]}
+					style={[styles.duration, { color: colors.fontDefault, fontSize: scaleFontSize(14) }]}
 					animatedProps={timeLabelAnimatedProps}
 				/>
 				<View style={styles.seek} onLayout={onLayout}>
diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
index 011a513c2d7..19cdd110d32 100644
--- a/app/containers/List/ListItem.tsx
+++ b/app/containers/List/ListItem.tsx
@@ -33,7 +33,10 @@ const styles = StyleSheet.create({
 		paddingRight: PADDING_HORIZONTAL
 	},
 	rightContainer: {
-		paddingLeft: PADDING_HORIZONTAL
+		paddingLeft: PADDING_HORIZONTAL,
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 8
 	},
 	disabled: {
 		opacity: 0.3
diff --git a/app/containers/RoomHeader/RoomHeader.tsx b/app/containers/RoomHeader/RoomHeader.tsx
index bd2a95d89d5..5f6536782ef 100644
--- a/app/containers/RoomHeader/RoomHeader.tsx
+++ b/app/containers/RoomHeader/RoomHeader.tsx
@@ -85,7 +85,8 @@ interface IRoomHeader {
 
 const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoomHeaderSubTitle) => {
 	const { colors } = useTheme();
-	const fontSize = getSubTitleSize(scale);
+	const { scaleFontSize } = useResponsiveLayout();
+	const fontSize = scaleFontSize(getSubTitleSize(scale));
 	// typing
 	if (usersTyping.length) {
 		let usersText;
@@ -117,9 +118,9 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
 
 const HeaderTitle = React.memo(({ title, tmid, prid, scale, testID }: TRoomHeaderHeaderTitle) => {
 	const { colors } = useTheme();
-	const { isLargeFontScale } = useResponsiveLayout();
+	const { isLargeFontScale, scaleFontSize } = useResponsiveLayout();
 
-	const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.fontTitlesLabels };
+	const titleStyle = { fontSize: scaleFontSize(TITLE_SIZE * scale), color: colors.fontTitlesLabels };
 	if (!tmid && !prid) {
 		return (
 			<Text style={[styles.title, titleStyle]} numberOfLines={isLargeFontScale ? 2 : 1} testID={testID}>
@@ -174,6 +175,7 @@ const Header = React.memo(
 			}
 		}
 
+		const { scaleFontSize } = useResponsiveLayout();
 		let renderFunc;
 		if (tmid) {
 			renderFunc = () => (
@@ -186,7 +188,7 @@ const Header = React.memo(
 						teamMain={teamMain}
 						abacAttributes={abacAttributes}
 					/>
-					<Text style={[styles.subtitle, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
+					<Text style={[styles.subtitle, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(getSubTitleSize(scale)) }]} numberOfLines={1}>
 						{parentTitle}
 					</Text>
 				</View>
diff --git a/app/views/FontSizePickerView/index.tsx b/app/views/FontSizePickerView/index.tsx
new file mode 100644
index 00000000000..4e4f894a228
--- /dev/null
+++ b/app/views/FontSizePickerView/index.tsx
@@ -0,0 +1,283 @@
+import React, { useState, useLayoutEffect } from 'react';
+import { StyleSheet, Text, View, ScrollView } from 'react-native';
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
+import Slider from '@react-native-community/slider';
+
+import I18n from '../../i18n';
+import { useTheme } from '../../theme';
+import SafeAreaView from '../../containers/SafeAreaView';
+import sharedStyles from '../Styles';
+import { FONT_SIZE_PREFERENCES_KEY } from '../../lib/constants/keys';
+import { FONT_SIZE_OPTIONS, ResponsiveLayoutContext, useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import { useUserPreferences } from '../../lib/methods/userPreferences';
+import Avatar from '../../containers/Avatar';
+import { useAppSelector } from '../../lib/hooks/useAppSelector';
+import { type ProfileStackParamList } from '../../stacks/types';
+
+const FONT_SIZE_OPTIONS_ARRAY = [
+	FONT_SIZE_OPTIONS.SMALL,
+	FONT_SIZE_OPTIONS.NORMAL,
+	FONT_SIZE_OPTIONS.LARGE,
+	FONT_SIZE_OPTIONS.EXTRA_LARGE
+];
+
+const FONT_SIZE_LABELS = {
+	[FONT_SIZE_OPTIONS.SMALL]: 'Small',
+	[FONT_SIZE_OPTIONS.NORMAL]: 'Normal',
+	[FONT_SIZE_OPTIONS.LARGE]: 'Large',
+	[FONT_SIZE_OPTIONS.EXTRA_LARGE]: 'Extra_Large'
+};
+
+interface IFontSizePickerViewProps {
+	navigation: NativeStackNavigationProp<ProfileStackParamList, 'FontSizePickerView'>;
+}
+
+const ExampleMessage = ({ previewFontSize }: { previewFontSize: number }) => {
+	const { colors } = useTheme();
+	const { fontScale: systemFontScale } = useResponsiveLayout();
+	const server = useAppSelector(state => state.server.server);
+	
+	const previewFontScale = systemFontScale * previewFontSize;
+	const previewScaleFontSize = (size: number) => size * previewFontSize;
+	
+	const previewContextValue = {
+		fontScale: previewFontScale,
+		width: 0,
+		height: 0,
+		isLargeFontScale: previewFontScale > 1.3,
+		fontScaleLimited: previewFontScale > 1.3 ? 1.3 : previewFontScale,
+		rowHeight: 75 * previewFontScale,
+		rowHeightCondensed: 60 * previewFontScale,
+		scaleFontSize: previewScaleFontSize
+	};
+
+	return (
+		<ResponsiveLayoutContext.Provider value={previewContextValue}>
+			<View style={styles.exampleMessageContainer}>
+				<View style={[styles.exampleMessage, { backgroundColor: colors.surfaceRoom }]}>
+					<View style={styles.avatarContainer}>
+						<Avatar
+							text='RC'
+							size={previewScaleFontSize(36)}
+							borderRadius={4}
+							server={server || 'https://open.rocket.chat'}
+						/>
+					</View>
+					<View style={styles.exampleMessageContent}>
+						<View style={styles.exampleMessageHeader}>
+							<Text style={[styles.exampleUsername, { color: colors.fontTitlesLabels, fontSize: previewScaleFontSize(16), lineHeight: previewScaleFontSize(22) }]}>
+								Rocket.Cat
+							</Text>
+							<Text style={[styles.exampleTime, { color: colors.fontSecondaryInfo, fontSize: previewScaleFontSize(12) }]}>
+								10:30 AM
+							</Text>
+						</View>
+						<Text style={[styles.exampleMessageText, { color: colors.fontDefault, fontSize: previewScaleFontSize(16), lineHeight: previewScaleFontSize(22) }]}>
+							{I18n.t('Font_Size_Example_Message', { defaultValue: 'This is an example message to preview how the text size will look.' }) || 'This is an example message to preview how the text size will look.'}
+						</Text>
+					</View>
+				</View>
+			</View>
+		</ResponsiveLayoutContext.Provider>
+	);
+};
+
+const FontSizePickerView = ({ navigation }: IFontSizePickerViewProps) => {
+	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
+	const [fontSize, setFontSize] = useUserPreferences<string>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL.toString());
+	const [previewFontSize, setPreviewFontSize] = useState(parseFloat(fontSize || FONT_SIZE_OPTIONS.NORMAL.toString()));
+
+	useLayoutEffect(() => {
+		navigation.setOptions({
+			title: I18n.t('Font_Size', { defaultValue: 'Font Size' })
+		});
+	}, [navigation]);
+
+	const currentIndex = FONT_SIZE_OPTIONS_ARRAY.findIndex(opt => opt.toString() === fontSize);
+	const sliderValue = currentIndex >= 0 ? currentIndex : 1;
+
+	const handleSliderChange = (value: number) => {
+		const index = Math.round(value);
+		const selectedFontSize = FONT_SIZE_OPTIONS_ARRAY[index];
+		setPreviewFontSize(selectedFontSize);
+	};
+
+	const handleSliderComplete = (value: number) => {
+		const index = Math.round(value);
+		const selectedFontSize = FONT_SIZE_OPTIONS_ARRAY[index];
+		setFontSize(selectedFontSize.toString());
+		setPreviewFontSize(selectedFontSize);
+	};
+
+	const fontSizeValue = fontSize || FONT_SIZE_OPTIONS.NORMAL.toString();
+	const currentLabel = FONT_SIZE_LABELS[parseFloat(fontSizeValue) as keyof typeof FONT_SIZE_LABELS] || 'Normal';
+	const primaryColor = colors.buttonBackgroundPrimaryDefault;
+	const trackColor = colors.strokeLight;
+
+	return (
+		<SafeAreaView testID='font-size-picker-view' style={{ backgroundColor: colors.surfaceTint }}>
+			<ScrollView
+				contentContainerStyle={styles.scrollContent}
+				showsVerticalScrollIndicator={false}
+			>
+				<View style={styles.container}>
+					<View style={styles.headerSection}>
+						<Text style={[styles.description, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(14), lineHeight: scaleFontSize(20) }]}>
+							{I18n.t('Font_Size_Description', { defaultValue: 'Adjust the font size for all text in the application.' }) || 'Adjust the font size for all text in the application.'}
+						</Text>
+					</View>
+
+					<ExampleMessage previewFontSize={previewFontSize} />
+
+					<View style={styles.sliderSection}>
+						<View style={styles.sliderLabels}>
+							<Text style={[styles.sliderLabelSmall, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(12) }]}>A</Text>
+							<Text style={[styles.sliderLabelLarge, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(20) }]}>A</Text>
+						</View>
+						<Slider
+							style={styles.slider}
+							minimumValue={0}
+							maximumValue={FONT_SIZE_OPTIONS_ARRAY.length - 1}
+							value={sliderValue}
+							step={1}
+							minimumTrackTintColor={primaryColor}
+							maximumTrackTintColor={trackColor}
+							thumbTintColor={primaryColor}
+							onValueChange={handleSliderChange}
+							onSlidingComplete={handleSliderComplete}
+							testID='font-size-picker-slider'
+						/>
+						<View style={styles.sliderSteps}>
+							{FONT_SIZE_OPTIONS_ARRAY.map((_, index) => (
+								<View
+									key={index}
+									style={[
+										styles.sliderStep,
+										{
+											backgroundColor: index === sliderValue ? primaryColor : trackColor,
+											width: index === sliderValue ? 8 : 4,
+											height: index === sliderValue ? 8 : 4,
+											borderRadius: index === sliderValue ? 4 : 2
+										}
+									]}
+								/>
+							))}
+						</View>
+						<View style={styles.currentSizeContainer}>
+							<Text style={[styles.currentSizeLabel, { color: colors.fontHint, fontSize: scaleFontSize(12) }]}>
+								{I18n.t('Current_Size', { defaultValue: 'Current size' })}: 
+							</Text>
+							<Text style={[styles.currentSizeValue, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(14) }]}>
+								{I18n.t(currentLabel || 'Normal', { defaultValue: currentLabel || 'Normal' }) ?? currentLabel}
+							</Text>
+						</View>
+					</View>
+				</View>
+			</ScrollView>
+		</SafeAreaView>
+	);
+};
+
+const styles = StyleSheet.create({
+	scrollContent: {
+		flexGrow: 1
+	},
+	container: {
+		flex: 1,
+		paddingHorizontal: 16,
+		paddingTop: 24,
+		paddingBottom: 32
+	},
+	headerSection: {
+		marginBottom: 32
+	},
+	description: {
+		...sharedStyles.textRegular,
+		textAlign: 'center'
+	},
+	exampleMessageContainer: {
+		marginBottom: 40,
+		paddingHorizontal: 4
+	},
+	exampleMessage: {
+		flexDirection: 'row',
+		padding: 16,
+		borderRadius: 12,
+		shadowColor: '#000',
+		shadowOffset: {
+			width: 0,
+			height: 1
+		},
+		shadowOpacity: 0.1,
+		shadowRadius: 2,
+		elevation: 2
+	},
+	avatarContainer: {
+		width: 36,
+		alignItems: 'flex-end',
+		marginRight: 10
+	},
+	exampleMessageContent: {
+		flex: 1
+	},
+	exampleMessageHeader: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginBottom: 6,
+		gap: 8
+	},
+	exampleUsername: {
+		...sharedStyles.textSemibold
+	},
+	exampleTime: {
+		...sharedStyles.textRegular
+	},
+	exampleMessageText: {
+		...sharedStyles.textRegular
+	},
+	sliderSection: {
+		paddingVertical: 16
+	},
+	sliderLabels: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		alignItems: 'center',
+		marginBottom: 12,
+		paddingHorizontal: 4
+	},
+	sliderLabelSmall: {
+		...sharedStyles.textRegular
+	},
+	sliderLabelLarge: {
+		...sharedStyles.textRegular
+	},
+	slider: {
+		width: '100%',
+		height: 44
+	},
+	sliderSteps: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		marginTop: 12,
+		paddingHorizontal: 6
+	},
+	sliderStep: {
+		alignSelf: 'center'
+	},
+	currentSizeContainer: {
+		flexDirection: 'row',
+		justifyContent: 'center',
+		alignItems: 'center',
+		marginTop: 24,
+		gap: 8
+	},
+	currentSizeLabel: {
+		...sharedStyles.textRegular
+	},
+	currentSizeValue: {
+		...sharedStyles.textSemibold
+	}
+});
+
+export default FontSizePickerView;
diff --git a/app/views/RoomActionsView/index.tsx b/app/views/RoomActionsView/index.tsx
index 70d06e16fd9..eeb451e6dcf 100644
--- a/app/views/RoomActionsView/index.tsx
+++ b/app/views/RoomActionsView/index.tsx
@@ -13,6 +13,7 @@ import Avatar from '../../containers/Avatar';
 import * as HeaderButton from '../../containers/Header/components/HeaderButton';
 import * as List from '../../containers/List';
 import { MarkdownPreview } from '../../containers/markdown';
+import usePreviewFormatText from '../../lib/hooks/usePreviewFormatText';
 import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import SafeAreaView from '../../containers/SafeAreaView';
 import Status from '../../containers/Status';
@@ -74,9 +75,35 @@ import CallSection from './components/CallSection';
 import { type TNavigation } from '../../stacks/stackType';
 import * as EncryptionUtils from '../../lib/encryption/utils';
 import Navigation from '../../lib/navigation/appNavigation';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
 type StackType = ChatsStackParamList & TNavigation;
 
+const RoomTitle = ({ children, theme }: { children: React.ReactNode; theme: string }) => {
+	const { scaleFontSize } = useResponsiveLayout();
+	return (
+		<Text style={[styles.roomTitle, { color: themes[theme as keyof typeof themes].fontTitlesLabels, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(22) }]} numberOfLines={1}>
+			{children}
+		</Text>
+	);
+};
+
+const RoomDescription = ({ msg, theme }: { msg: string; theme: string }) => {
+	const { scaleFontSize } = useResponsiveLayout();
+	const formattedText = usePreviewFormatText(msg ?? '');
+	if (!msg) {
+		return null;
+	}
+	return (
+		<Text
+			style={[styles.roomDescription, { color: themes[theme as keyof typeof themes].fontSecondaryInfo, fontSize: scaleFontSize(13), lineHeight: scaleFontSize(18) }]}
+			numberOfLines={1}
+			ellipsizeMode='tail'>
+			{formattedText}
+		</Text>
+	);
+};
+
 interface IOnPressTouch {
 	<T extends keyof StackType>(item: { route?: T; params?: StackType[T]; event?: Function }): void;
 }
@@ -785,9 +812,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 						</Avatar>
 						<View style={styles.roomTitleContainer}>
 							{room.t === 'd' ? (
-								<Text style={[styles.roomTitle, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
-									{room.fname}
-								</Text>
+								<RoomTitle theme={theme}>{room.fname}</RoomTitle>
 							) : (
 								<View style={styles.roomTitleRow}>
 									<RoomTypeIcon
@@ -797,21 +822,11 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 										sourceType={source}
 										abacAttributes={room.abacAttributes}
 									/>
-									<Text style={[styles.roomTitle, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
-										{getRoomTitle(room)}
-									</Text>
+									<RoomTitle theme={theme}>{getRoomTitle(room)}</RoomTitle>
 								</View>
 							)}
-							<MarkdownPreview
-								msg={t === 'd' ? `@${name}` : topic}
-								style={[styles.roomDescription, { color: themes[theme].fontSecondaryInfo }]}
-							/>
-							{room.t === 'd' && (
-								<MarkdownPreview
-									msg={member.statusText}
-									style={[styles.roomDescription, { color: themes[theme].fontSecondaryInfo }]}
-								/>
-							)}
+							<RoomDescription msg={t === 'd' ? `@${name}` : topic} theme={theme} />
+							{room.t === 'd' && <RoomDescription msg={member.statusText} theme={theme} />}
 						</View>
 						{isGroupChatHandler ? null : <List.Icon name='chevron-right' style={styles.actionIndicator} />}
 					</View>
diff --git a/app/views/RoomActionsView/styles.ts b/app/views/RoomActionsView/styles.ts
index a3bfcb2b537..b81695594b4 100644
--- a/app/views/RoomActionsView/styles.ts
+++ b/app/views/RoomActionsView/styles.ts
@@ -13,15 +13,20 @@ export default StyleSheet.create({
 		marginRight: PADDING_HORIZONTAL
 	},
 	roomTitleContainer: {
-		flex: 1
+		flex: 1,
+		justifyContent: 'center',
+		flexDirection: 'column'
 	},
 	roomTitle: {
 		fontSize: 16,
-		...sharedStyles.textMedium
+		...sharedStyles.textMedium,
+		includeFontPadding: false
 	},
 	roomDescription: {
 		fontSize: 13,
-		...sharedStyles.textRegular
+		...sharedStyles.textRegular,
+		includeFontPadding: false,
+		marginTop: 2
 	},
 	roomTitleRow: {
 		paddingRight: 16,
diff --git a/app/views/SelectListView.tsx b/app/views/SelectListView.tsx
index 2fe004dbab3..cce114df7a7 100644
--- a/app/views/SelectListView.tsx
+++ b/app/views/SelectListView.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
+import { type RouteProp } from '@react-navigation/native';
 import { type NativeStackNavigationOptions, type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { FlatList, StyleSheet, Text, View } from 'react-native';
 import { connect } from 'react-redux';
-import { type RouteProp } from '@react-navigation/native';
 
 import { type ChatsStackParamList } from '../stacks/types';
 import log from '../lib/methods/helpers/log';
@@ -18,10 +18,19 @@ import Radio from '../containers/Radio';
 import sharedStyles from './Styles';
 import { type IApplicationState } from '../definitions';
 import { type TDataSelect } from '../definitions/IDataSelect';
+import { useResponsiveLayout } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+
+const InfoText = ({ text, theme }: { text: string; theme: TSupportedThemes }) => {
+	const { scaleFontSize } = useResponsiveLayout();
+	return (
+		<View style={{ backgroundColor: themes[theme].surfaceRoom }}>
+			<Text style={[styles.buttonText, { color: themes[theme].fontDefault, fontSize: scaleFontSize(16) }]}>{I18n.t(text)}</Text>
+		</View>
+	);
+};
 
 const styles = StyleSheet.create({
 	buttonText: {
-		fontSize: 16,
 		margin: 16,
 		...sharedStyles.textRegular
 	}
@@ -98,11 +107,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 
 	renderInfoText = () => {
 		const { theme } = this.props;
-		return (
-			<View style={{ backgroundColor: themes[theme].surfaceRoom }}>
-				<Text style={[styles.buttonText, { color: themes[theme].fontDefault }]}>{I18n.t(this.infoText)}</Text>
-			</View>
-		);
+		return <InfoText text={this.infoText} theme={theme} />;
 	};
 
 	renderSearch = () => <SearchBox onChangeText={(text: string) => this.search(text)} testID='select-list-view-search' />;
diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx
index c2b4408d281..285ea3698ad 100644
--- a/app/views/UserPreferencesView/index.tsx
+++ b/app/views/UserPreferencesView/index.tsx
@@ -13,9 +13,14 @@ import { type ProfileStackParamList } from '../../stacks/types';
 import { saveUserPreferences } from '../../lib/services/restApi';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 import ListPicker from './ListPicker';
-import FontSizePicker from './FontSizePicker';
 import Switch from '../../containers/Switch';
 import { type IUser } from '../../definitions';
+import { FONT_SIZE_PREFERENCES_KEY } from '../../lib/constants/keys';
+import { FONT_SIZE_OPTIONS, useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import { useUserPreferences } from '../../lib/methods/userPreferences';
+import { Text, StyleSheet } from 'react-native';
+import sharedStyles from '../Styles';
+import { useTheme } from '../../theme';
 
 interface IUserPreferencesViewProps {
 	navigation: NativeStackNavigationProp<ProfileStackParamList, 'UserPreferencesView'>;
@@ -28,6 +33,19 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 	const serverVersion = useAppSelector(state => state.server.version);
 	const dispatch = useDispatch();
 	const convertAsciiEmoji = settings?.preferences?.convertAsciiEmoji;
+	const { colors } = useTheme();
+	const { scaleFontSize } = useResponsiveLayout();
+	const [fontSize] = useUserPreferences<string>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL.toString());
+	
+	const FONT_SIZE_LABELS = {
+		[FONT_SIZE_OPTIONS.SMALL]: 'Small',
+		[FONT_SIZE_OPTIONS.NORMAL]: 'Normal',
+		[FONT_SIZE_OPTIONS.LARGE]: 'Large',
+		[FONT_SIZE_OPTIONS.EXTRA_LARGE]: 'Extra_Large'
+	};
+	
+	const fontSizeValue = fontSize || FONT_SIZE_OPTIONS.NORMAL.toString();
+	const currentLabel = FONT_SIZE_LABELS[parseFloat(fontSizeValue) as keyof typeof FONT_SIZE_LABELS] || 'Normal';
 
 	useEffect(() => {
 		navigation.setOptions({
@@ -119,9 +137,16 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 				</List.Section>
 				<List.Section>
 					<List.Separator />
-					<FontSizePicker
+					<List.Item
 						title='Font_Size'
+						onPress={() => navigateToScreen('FontSizePickerView')}
+						showActionIndicator
 						testID='preferences-view-font-size'
+						right={() => (
+							<Text style={[styles.fontSizeLabel, { color: colors.fontHint, fontSize: scaleFontSize(16) }]}>
+								{I18n.t(currentLabel, { defaultValue: currentLabel }) ?? currentLabel}
+							</Text>
+						)}
 					/>
 					<List.Separator />
 					<List.Info info='Font_Size_Description' />
@@ -131,4 +156,10 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 	);
 };
 
+const styles = StyleSheet.create({
+	fontSizeLabel: {
+		...sharedStyles.textRegular
+	}
+});
+
 export default UserPreferencesView;

From 35d82e0c25ea3f3acae5889abd0c8853ec2c0c71 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 02:26:56 +0530
Subject: [PATCH 03/15] Fix font size not updating immediately in home screen

---
 app/containers/AudioPlayer/PlaybackSpeed.tsx  |   2 +-
 app/containers/Button/index.tsx               |   6 +-
 .../components/RecordAudio/Duration.tsx       |   2 +-
 app/containers/RoomItem/Wrapper.tsx           |   6 +-
 app/containers/RoomItem/styles.ts             |   3 +-
 .../useResponsiveLayout.tsx                   |  66 +++--
 app/stacks/InsideStack.tsx                    |   2 +
 app/stacks/MasterDetailStack/index.tsx        |   2 +
 app/stacks/MasterDetailStack/types.ts         |   1 +
 app/stacks/types.ts                           |   1 +
 app/views/RoomActionsView/index.tsx           |  17 +-
 app/views/RoomsListView/index.tsx             |  17 +-
 app/views/SelectedUsersView/Header.tsx        |   1 -
 .../UserPreferencesView/FontSizePicker.tsx    | 238 +++++++++++++++---
 app/views/UserPreferencesView/index.tsx       |   2 +-
 15 files changed, 276 insertions(+), 90 deletions(-)

diff --git a/app/containers/AudioPlayer/PlaybackSpeed.tsx b/app/containers/AudioPlayer/PlaybackSpeed.tsx
index 2d62b2b1c65..30911662f41 100644
--- a/app/containers/AudioPlayer/PlaybackSpeed.tsx
+++ b/app/containers/AudioPlayer/PlaybackSpeed.tsx
@@ -23,7 +23,7 @@ const PlaybackSpeed = () => {
 	return (
 		<NativeButton
 			accessible
-			accessibilityLabel={i18n.t('Playback_speed', { playbackSpeed: `${playbackSpeed} x` })}
+			accessibilityLabel={i18n.t('Playback_speed', { playbackSpeed: `${playbackSpeed}x` })}
 			onPress={onPress}
 			style={[styles.containerPlaybackSpeed, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
 			<Text style={[styles.playbackSpeedText, { color: colors.buttonFontSecondary, fontSize: scaleFontSize(14) }]}>{playbackSpeed}x</Text>
diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index d7d0d719385..e09b5ad8718 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -82,13 +82,13 @@ const Button: React.FC<IButtonProps> = ({
 	];
 
 	const textStyle = [
+		small ? styles.smallText : styles.text,
+		styleText,
 		{ 
 			color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, 
 			fontSize: small ? scaleFontSize(12) : scaleFontSize(fontSize),
 			lineHeight: small ? scaleFontSize(18) : undefined
-		},
-		small ? styles.smallText : styles.text,
-		styleText
+		}
 	];
 
 	return (
diff --git a/app/containers/MessageComposer/components/RecordAudio/Duration.tsx b/app/containers/MessageComposer/components/RecordAudio/Duration.tsx
index e6ec98c385f..77c94db081f 100644
--- a/app/containers/MessageComposer/components/RecordAudio/Duration.tsx
+++ b/app/containers/MessageComposer/components/RecordAudio/Duration.tsx
@@ -35,8 +35,8 @@ function useStyle() {
 	const styles = {
 		text: {
 			marginLeft: 12,
-			fontSize: scaleFontSize(16),
 			...sharedStyles.textRegular,
+			fontSize: scaleFontSize(16),
 			color: colors.fontDefault,
 			fontVariant: ['tabular-nums'] as FontVariant[]
 		}
diff --git a/app/containers/RoomItem/Wrapper.tsx b/app/containers/RoomItem/Wrapper.tsx
index fe2ab168927..5356cf2d17d 100644
--- a/app/containers/RoomItem/Wrapper.tsx
+++ b/app/containers/RoomItem/Wrapper.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 
 import { DisplayMode } from '../../lib/constants/constantDisplayMode';
 import { useTheme } from '../../theme';
@@ -12,7 +12,6 @@ import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResp
 const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapperProps): React.ReactElement => {
 	const { colors } = useTheme();
 	const { rowHeight, rowHeightCondensed } = useResponsiveLayout();
-	const borderWidth = Math.max(StyleSheet.hairlineWidth || 0, 0.5);
 	return (
 		<View
 			style={[styles.container, { height: displayMode === DisplayMode.Condensed ? rowHeightCondensed : rowHeight }]}
@@ -24,8 +23,7 @@ const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapp
 				style={[
 					styles.centerContainer,
 					{
-						borderColor: colors.strokeLight,
-						borderBottomWidth: borderWidth
+						borderColor: colors.strokeLight
 					}
 				]}>
 				{children}
diff --git a/app/containers/RoomItem/styles.ts b/app/containers/RoomItem/styles.ts
index 9978936e5fa..8807bf6567d 100644
--- a/app/containers/RoomItem/styles.ts
+++ b/app/containers/RoomItem/styles.ts
@@ -21,8 +21,7 @@ export default StyleSheet.create({
 		minWidth: 0,
 		paddingVertical: 10,
 		paddingRight: 14,
-		borderBottomWidth: StyleSheet.hairlineWidth,
-		overflow: 'hidden'
+		borderBottomWidth: StyleSheet.hairlineWidth
 	},
 	title: {
 		flex: 1,
diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index bfc837bbbf7..4a667a4d5b8 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -1,8 +1,8 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 
 import { FONT_SIZE_PREFERENCES_KEY } from '../../constants/keys';
-import userPreferences from '../../methods/userPreferences';
+import userPreferences, { initializeStorage } from '../../methods/userPreferences';
 
 interface IResponsiveLayoutContextData {
 	fontScale: number;
@@ -28,7 +28,6 @@ export const BASE_ROW_HEIGHT_SMALL_FONT = 82;
 export const BASE_ROW_HEIGHT_CONDENSED_SMALL_FONT = 68;
 const SMALL_FONT_THRESHOLD = 0.9;
 
-// Font size options: Small (0.9), Normal (1.0), Large (1.1), Extra Large (1.2)
 export const FONT_SIZE_OPTIONS = {
 	SMALL: 0.9,
 	NORMAL: 1.0,
@@ -39,52 +38,67 @@ export const FONT_SIZE_OPTIONS = {
 const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => {
 	// `fontScale` is the current font scaling value of the device.
 	const { fontScale: systemFontScale, width, height } = useWindowDimensions();
-	const [updateTrigger, setUpdateTrigger] = useState(0);
+	const [customFontSize, setCustomFontSize] = useState(
+		() => userPreferences.getString(FONT_SIZE_PREFERENCES_KEY) || FONT_SIZE_OPTIONS.NORMAL.toString()
+	);
 	
-	// Poll for font size changes (simple approach since MMKV doesn't have change listeners)
 	useEffect(() => {
-		const interval = setInterval(() => {
-			setUpdateTrigger(prev => prev + 1);
-		}, 500); // Check every 500ms for font size changes
+		const listener = initializeStorage.addOnValueChangedListener((changedKey: string) => {
+			if (changedKey === FONT_SIZE_PREFERENCES_KEY) {
+				const newFontSize = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY) || FONT_SIZE_OPTIONS.NORMAL.toString();
+				setCustomFontSize(newFontSize);
+			}
+		});
 		
-		return () => clearInterval(interval);
+		return () => listener.remove();
 	}, []);
-	
-	// Read custom font size directly from storage (MMKV is fast and synchronous)
-	// updateTrigger is used to force re-render when font size changes
-	const customFontSize = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY) || FONT_SIZE_OPTIONS.NORMAL.toString();
-	// Reference updateTrigger to ensure component re-renders when it changes
-	if (updateTrigger) {
-		// This ensures the value is re-read on each render when updateTrigger changes
-	}
 
-	// Use custom font size if set, otherwise use system font scale
 	const fontSizeMultiplier = customFontSize ? parseFloat(customFontSize) : 1.0;
 	const fontScale = systemFontScale * fontSizeMultiplier;
 	const isLargeFontScale = fontScale > FONT_SCALE_LIMIT;
 	// `fontScaleLimited` applies the `FONT_SCALE_LIMIT` to prevent layout issues on large font sizes.
 	const fontScaleLimited = isLargeFontScale ? FONT_SCALE_LIMIT : fontScale;
-	// Use increased height only for smallest font sizes to prevent text cutting
 	const isSmallFont = fontScale < SMALL_FONT_THRESHOLD;
 	const baseRowHeight = isSmallFont ? BASE_ROW_HEIGHT_SMALL_FONT : BASE_ROW_HEIGHT;
 	const baseRowHeightCondensed = isSmallFont ? BASE_ROW_HEIGHT_CONDENSED_SMALL_FONT : BASE_ROW_HEIGHT_CONDENSED;
 	const rowHeight = baseRowHeight * fontScale;
 	const rowHeightCondensed = baseRowHeightCondensed * fontScale;
 
-	// Function to scale font sizes based on custom font size preference
-	const scaleFontSize = (size: number): number => size * fontSizeMultiplier;
+	const scaleFontSize = useCallback((size: number): number => size * fontSizeMultiplier, [fontSizeMultiplier]);
 
-	return (
-		<ResponsiveLayoutContext.Provider
-			value={{ fontScale, width, height, isLargeFontScale, fontScaleLimited, rowHeight, rowHeightCondensed, scaleFontSize }}>
-			{children}
-		</ResponsiveLayoutContext.Provider>
+	const contextValue = useMemo(
+		() => ({
+			fontScale,
+			width,
+			height,
+			isLargeFontScale,
+			fontScaleLimited,
+			rowHeight,
+			rowHeightCondensed,
+			scaleFontSize
+		}),
+		[fontScale, width, height, isLargeFontScale, fontScaleLimited, rowHeight, rowHeightCondensed, scaleFontSize]
 	);
+
+	return <ResponsiveLayoutContext.Provider value={contextValue}>{children}</ResponsiveLayoutContext.Provider>;
 };
 
 export const useResponsiveLayout = () => {
 	const context = useContext(ResponsiveLayoutContext);
 
+	if (!context || Object.keys(context).length === 0) {
+		return {
+			fontScale: 1.0,
+			width: 0,
+			height: 0,
+			isLargeFontScale: false,
+			fontScaleLimited: 1.0,
+			rowHeight: BASE_ROW_HEIGHT,
+			rowHeightCondensed: BASE_ROW_HEIGHT_CONDENSED,
+			scaleFontSize: (size: number) => size
+		};
+	}
+
 	return context;
 };
 
diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index a314c801885..6732eaf1aed 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -37,6 +37,7 @@ import ProfileView from '../views/ProfileView';
 import UserPreferencesView from '../views/UserPreferencesView';
 import UserNotificationPrefView from '../views/UserNotificationPreferencesView';
 import ChangePasswordView from '../views/ChangePasswordView';
+import FontSizePickerView from '../views/FontSizePickerView';
 // Display Preferences View
 import DisplayPrefsView from '../views/DisplayPrefsView';
 // Settings Stack
@@ -173,6 +174,7 @@ const ProfileStackNavigator = () => {
 			<ProfileStack.Screen name='UserNotificationPrefView' component={UserNotificationPrefView} />
 			<ProfileStack.Screen name='PushTroubleshootView' component={PushTroubleshootView} />
 			<ProfileStack.Screen name='PickerView' component={PickerView} />
+			<ProfileStack.Screen name='FontSizePickerView' component={FontSizePickerView} />
 		</ProfileStack.Navigator>
 	);
 };
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index d4dd3ccc2fa..076ceb15640 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -46,6 +46,7 @@ import NewMessageView from '../../views/NewMessageView';
 import CreateChannelView from '../../views/CreateChannelView';
 import UserPreferencesView from '../../views/UserPreferencesView';
 import UserNotificationPrefView from '../../views/UserNotificationPreferencesView';
+import FontSizePickerView from '../../views/FontSizePickerView';
 import LegalView from '../../views/LegalView';
 import SecurityPrivacyView from '../../views/SecurityPrivacyView';
 import MediaAutoDownloadView from '../../views/MediaAutoDownloadView';
@@ -195,6 +196,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen name='E2EEnterYourPasswordView' component={E2EEnterYourPasswordView} />
 				<ModalStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
 				<ModalStack.Screen name='UserNotificationPrefView' component={UserNotificationPrefView} />
+				<ModalStack.Screen name='FontSizePickerView' component={FontSizePickerView} />
 				<ModalStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
 				<ModalStack.Screen name='MediaAutoDownloadView' component={MediaAutoDownloadView} />
 				<ModalStack.Screen name='E2EEncryptionSecurityView' component={E2EEncryptionSecurityView} />
diff --git a/app/stacks/MasterDetailStack/types.ts b/app/stacks/MasterDetailStack/types.ts
index 70f5726e6de..3bbed1fdc5c 100644
--- a/app/stacks/MasterDetailStack/types.ts
+++ b/app/stacks/MasterDetailStack/types.ts
@@ -187,6 +187,7 @@ export type ModalStackParamList = {
 	E2EEnterYourPasswordView: undefined;
 	UserPreferencesView: undefined;
 	UserNotificationPrefView: undefined;
+	FontSizePickerView: undefined;
 	SecurityPrivacyView: undefined;
 	MediaAutoDownloadView: undefined;
 	E2EEncryptionSecurityView: undefined;
diff --git a/app/stacks/types.ts b/app/stacks/types.ts
index c8afff63863..3e6772a962e 100644
--- a/app/stacks/types.ts
+++ b/app/stacks/types.ts
@@ -199,6 +199,7 @@ export type ProfileStackParamList = {
 		t?: SubscriptionType;
 	};
 	ChangePasswordView: undefined;
+	FontSizePickerView: undefined;
 };
 
 export type SettingsStackParamList = {
diff --git a/app/views/RoomActionsView/index.tsx b/app/views/RoomActionsView/index.tsx
index eeb451e6dcf..c49f37ba9f2 100644
--- a/app/views/RoomActionsView/index.tsx
+++ b/app/views/RoomActionsView/index.tsx
@@ -12,7 +12,6 @@ import { leaveRoom } from '../../actions/room';
 import Avatar from '../../containers/Avatar';
 import * as HeaderButton from '../../containers/Header/components/HeaderButton';
 import * as List from '../../containers/List';
-import { MarkdownPreview } from '../../containers/markdown';
 import usePreviewFormatText from '../../lib/hooks/usePreviewFormatText';
 import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import SafeAreaView from '../../containers/SafeAreaView';
@@ -31,7 +30,7 @@ import database from '../../lib/database';
 import protectedFunction from '../../lib/methods/helpers/protectedFunction';
 import { getUserSelector } from '../../selectors/login';
 import { type ChatsStackParamList } from '../../stacks/types';
-import { withTheme } from '../../theme';
+import { withTheme, type TSupportedThemes } from '../../theme';
 import { showConfirmationAlert, showErrorAlert } from '../../lib/methods/helpers/info';
 import log, { events, logEvent } from '../../lib/methods/helpers/log';
 import Touch from '../../containers/Touch';
@@ -79,24 +78,24 @@ import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResp
 
 type StackType = ChatsStackParamList & TNavigation;
 
-const RoomTitle = ({ children, theme }: { children: React.ReactNode; theme: string }) => {
+const RoomTitle = ({ children, theme }: { children: React.ReactNode; theme: TSupportedThemes }) => {
 	const { scaleFontSize } = useResponsiveLayout();
 	return (
-		<Text style={[styles.roomTitle, { color: themes[theme as keyof typeof themes].fontTitlesLabels, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(22) }]} numberOfLines={1}>
+		<Text style={[styles.roomTitle, { color: themes[theme].fontTitlesLabels, fontSize: scaleFontSize(16), lineHeight: scaleFontSize(22) }]} numberOfLines={1}>
 			{children}
 		</Text>
 	);
 };
 
-const RoomDescription = ({ msg, theme }: { msg: string; theme: string }) => {
+const RoomDescription = ({ msg, theme }: { msg: string | undefined; theme: TSupportedThemes }) => {
 	const { scaleFontSize } = useResponsiveLayout();
-	const formattedText = usePreviewFormatText(msg ?? '');
+	const formattedText = usePreviewFormatText(msg || '');
 	if (!msg) {
 		return null;
 	}
 	return (
 		<Text
-			style={[styles.roomDescription, { color: themes[theme as keyof typeof themes].fontSecondaryInfo, fontSize: scaleFontSize(13), lineHeight: scaleFontSize(18) }]}
+			style={[styles.roomDescription, { color: themes[theme].fontSecondaryInfo, fontSize: scaleFontSize(13), lineHeight: scaleFontSize(18) }]}
 			numberOfLines={1}
 			ellipsizeMode='tail'>
 			{formattedText}
@@ -825,8 +824,8 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 									<RoomTitle theme={theme}>{getRoomTitle(room)}</RoomTitle>
 								</View>
 							)}
-							<RoomDescription msg={t === 'd' ? `@${name}` : topic} theme={theme} />
-							{room.t === 'd' && <RoomDescription msg={member.statusText} theme={theme} />}
+							<RoomDescription msg={t === 'd' ? `@${name}` : topic || ''} theme={theme} />
+							{room.t === 'd' && member.statusText && <RoomDescription msg={member.statusText} theme={theme} />}
 						</View>
 						{isGroupChatHandler ? null : <List.Icon name='chevron-right' style={styles.actionIndicator} />}
 					</View>
diff --git a/app/views/RoomsListView/index.tsx b/app/views/RoomsListView/index.tsx
index 0ec091befb3..7d8ea749bb3 100644
--- a/app/views/RoomsListView/index.tsx
+++ b/app/views/RoomsListView/index.tsx
@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { memo, useContext, useEffect } from 'react';
+import React, { memo, useContext, useEffect, useMemo } from 'react';
 import { BackHandler, FlatList, RefreshControl } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { shallowEqual } from 'react-redux';
@@ -26,6 +26,7 @@ import { useGetItemLayout } from './hooks/useGetItemLayout';
 import { useHeader } from './hooks/useHeader';
 import { useRefresh } from './hooks/useRefresh';
 import { useSubscriptions } from './hooks/useSubscriptions';
+import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import styles from './styles';
 
 const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12;
@@ -50,6 +51,14 @@ const RoomsListView = memo(function RoomsListView() {
 	const changingServer = useAppSelector(state => state.server.changingServer);
 	const { refreshing, onRefresh } = useRefresh({ searching });
 	const supportedVersionsStatus = useAppSelector(state => state.supportedVersions.status);
+	const { rowHeight, rowHeightCondensed, fontScale } = useResponsiveLayout();
+
+	const extraData = useMemo(() => {
+		if (searchEnabled) {
+			return searchResults;
+		}
+		return [subscriptions, rowHeight, rowHeightCondensed, fontScale];
+	}, [searchEnabled, searchResults, subscriptions, rowHeight, rowHeightCondensed, fontScale]);
 
 	useEffect(() => {
 		const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
@@ -61,7 +70,7 @@ const RoomsListView = memo(function RoomsListView() {
 			return false;
 		});
 		return () => subscription.remove();
-	}, [searchEnabled]);
+	}, [searchEnabled, navigation, stopSearch]);
 
 	const onPressItem = (item = {} as IRoomItem) => {
 		if (!navigation.isFocused()) {
@@ -130,8 +139,8 @@ const RoomsListView = memo(function RoomsListView() {
 	return (
 		<FlatList
 			data={searchEnabled ? searchResults : subscriptions}
-			extraData={searchEnabled ? searchResults : subscriptions}
-			keyExtractor={item => `${item.rid}-${searchEnabled}`}
+			extraData={extraData}
+			keyExtractor={item => `${item.rid}-${searchEnabled}-${fontScale}`}
 			style={[styles.list, { backgroundColor: colors.surfaceRoom }]}
 			renderItem={renderItem}
 			ListHeaderComponent={ListHeader}
diff --git a/app/views/SelectedUsersView/Header.tsx b/app/views/SelectedUsersView/Header.tsx
index 981444301ab..3a7c7051bf3 100644
--- a/app/views/SelectedUsersView/Header.tsx
+++ b/app/views/SelectedUsersView/Header.tsx
@@ -15,7 +15,6 @@ const styles = StyleSheet.create({
 	selectedText: {
 		marginLeft: 16,
 		marginBottom: 12,
-		fontSize: 12,
 		...sharedStyles.textRegular
 	},
 	contentContainerList: {
diff --git a/app/views/UserPreferencesView/FontSizePicker.tsx b/app/views/UserPreferencesView/FontSizePicker.tsx
index 63daa7e4417..5d0d5c622b1 100644
--- a/app/views/UserPreferencesView/FontSizePicker.tsx
+++ b/app/views/UserPreferencesView/FontSizePicker.tsx
@@ -1,19 +1,22 @@
-import React from 'react';
-import { StyleSheet, Text } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Slider from '@react-native-community/slider';
 
-import { type TActionSheetOptionsItem, useActionSheet } from '../../containers/ActionSheet';
-import { CustomIcon } from '../../containers/CustomIcon';
-import * as List from '../../containers/List';
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
 import sharedStyles from '../Styles';
 import { FONT_SIZE_PREFERENCES_KEY } from '../../lib/constants/keys';
-import { FONT_SIZE_OPTIONS, useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import { FONT_SIZE_OPTIONS, ResponsiveLayoutContext, useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import { useUserPreferences } from '../../lib/methods/userPreferences';
+import Avatar from '../../containers/Avatar';
+import { useAppSelector } from '../../lib/hooks/useAppSelector';
 
-const styles = StyleSheet.create({
-	title: { ...sharedStyles.textRegular, fontSize: 16 }
-});
+const FONT_SIZE_OPTIONS_ARRAY = [
+	FONT_SIZE_OPTIONS.SMALL,
+	FONT_SIZE_OPTIONS.NORMAL,
+	FONT_SIZE_OPTIONS.LARGE,
+	FONT_SIZE_OPTIONS.EXTRA_LARGE
+];
 
 const FONT_SIZE_LABELS = {
 	[FONT_SIZE_OPTIONS.SMALL]: 'Small',
@@ -22,52 +25,211 @@ const FONT_SIZE_LABELS = {
 	[FONT_SIZE_OPTIONS.EXTRA_LARGE]: 'Extra_Large'
 };
 
-const FONT_SIZE_OPTIONS_ARRAY = [
-	{ label: FONT_SIZE_LABELS[FONT_SIZE_OPTIONS.SMALL], value: FONT_SIZE_OPTIONS.SMALL.toString() },
-	{ label: FONT_SIZE_LABELS[FONT_SIZE_OPTIONS.NORMAL], value: FONT_SIZE_OPTIONS.NORMAL.toString() },
-	{ label: FONT_SIZE_LABELS[FONT_SIZE_OPTIONS.LARGE], value: FONT_SIZE_OPTIONS.LARGE.toString() },
-	{ label: FONT_SIZE_LABELS[FONT_SIZE_OPTIONS.EXTRA_LARGE], value: FONT_SIZE_OPTIONS.EXTRA_LARGE.toString() }
-];
-
 interface IFontSizePickerProps {
 	title: string;
 	testID: string;
 }
 
+const ExampleMessage = ({ previewFontSize }: { previewFontSize: number }) => {
+	const { colors } = useTheme();
+	const { fontScale: systemFontScale } = useResponsiveLayout();
+	const server = useAppSelector(state => state.server.server);
+	
+	const previewFontScale = systemFontScale * previewFontSize;
+	const previewScaleFontSize = (size: number) => size * previewFontSize;
+	
+	const previewContextValue = {
+		fontScale: previewFontScale,
+		width: 0,
+		height: 0,
+		isLargeFontScale: previewFontScale > 1.3,
+		fontScaleLimited: previewFontScale > 1.3 ? 1.3 : previewFontScale,
+		rowHeight: 75 * previewFontScale,
+		rowHeightCondensed: 60 * previewFontScale,
+		scaleFontSize: previewScaleFontSize
+	};
+
+	return (
+		<ResponsiveLayoutContext.Provider value={previewContextValue}>
+			<View style={styles.exampleMessageContainer}>
+				<View style={styles.exampleMessage}>
+					<View style={styles.avatarContainer}>
+						<Avatar
+							text='RC'
+							size={previewScaleFontSize(36)}
+							borderRadius={4}
+							server={server || 'https://open.rocket.chat'}
+						/>
+					</View>
+					<View style={styles.exampleMessageContent}>
+						<View style={styles.exampleMessageHeader}>
+							<Text style={[styles.exampleUsername, { color: colors.fontTitlesLabels, fontSize: previewScaleFontSize(16), lineHeight: previewScaleFontSize(22) }]}>
+								Rocket.Cat
+							</Text>
+							<Text style={[styles.exampleTime, { color: colors.fontSecondaryInfo, fontSize: previewScaleFontSize(12) }]}>
+								10:30 AM
+							</Text>
+						</View>
+						<Text style={[styles.exampleMessageText, { color: colors.fontDefault, fontSize: previewScaleFontSize(16), lineHeight: previewScaleFontSize(22) }]}>
+							{I18n.t('Font_Size_Example_Message', { defaultValue: 'This is an example message to preview how the text size will look.' }) || 'This is an example message to preview how the text size will look.'}
+						</Text>
+					</View>
+				</View>
+			</View>
+		</ResponsiveLayoutContext.Provider>
+	);
+};
+
 const FontSizePicker = ({ title, testID }: IFontSizePickerProps) => {
-	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
 	const { scaleFontSize } = useResponsiveLayout();
 	const [fontSize, setFontSize] = useUserPreferences<string>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL.toString());
+	const [previewFontSize, setPreviewFontSize] = useState(parseFloat(fontSize || FONT_SIZE_OPTIONS.NORMAL.toString()));
 
-	// Derive option from fontSize directly instead of using state
-	const option = FONT_SIZE_OPTIONS_ARRAY.find(opt => opt.value === fontSize) || FONT_SIZE_OPTIONS_ARRAY[1];
+	const currentIndex = FONT_SIZE_OPTIONS_ARRAY.findIndex(opt => opt.toString() === fontSize);
+	const sliderValue = currentIndex >= 0 ? currentIndex : 1;
 
-	const handleFontSizeChange = (value: string) => {
-		setFontSize(value);
+	const handleSliderChange = (value: number) => {
+		const index = Math.round(value);
+		const selectedFontSize = FONT_SIZE_OPTIONS_ARRAY[index];
+		setPreviewFontSize(selectedFontSize);
 	};
 
-	const getOptions = (): TActionSheetOptionsItem[] =>
-		FONT_SIZE_OPTIONS_ARRAY.map(i => ({
-			title: I18n.t(i.label, { defaultValue: i.label }),
-			onPress: () => {
-				hideActionSheet();
-				handleFontSizeChange(i.value);
-			},
-			right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.fontHint} /> : undefined
-		}));
+	const handleSliderComplete = (value: number) => {
+		const index = Math.round(value);
+		const selectedFontSize = FONT_SIZE_OPTIONS_ARRAY[index];
+		setFontSize(selectedFontSize.toString());
+		setPreviewFontSize(selectedFontSize);
+	};
 
-	const label = option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label;
+	const fontSizeValue = fontSize || FONT_SIZE_OPTIONS.NORMAL.toString();
+	const currentLabel = FONT_SIZE_LABELS[parseFloat(fontSizeValue) as keyof typeof FONT_SIZE_LABELS] || 'Normal';
+	const primaryColor = colors.buttonBackgroundPrimaryDefault;
+	const trackColor = colors.strokeLight;
 
 	return (
-		<List.Item
-			title={title}
-			testID={testID}
-			onPress={() => showActionSheet({ options: getOptions() })}
-			right={() => <Text style={[styles.title, { color: colors.fontHint, fontSize: scaleFontSize(16) }]}>{label}</Text>}
-			additionalAccessibilityLabel={label}
-		/>
+		<View style={styles.container}>
+			<View style={styles.header}>
+				<Text style={[styles.title, { color: colors.fontTitlesLabels, fontSize: scaleFontSize(16) }]}>
+					{I18n.t(title, { defaultValue: title }) ?? title}
+				</Text>
+				<Text style={[styles.currentSize, { color: colors.fontHint, fontSize: scaleFontSize(14) }]}>
+					{I18n.t(currentLabel || 'Normal', { defaultValue: currentLabel || 'Normal' }) ?? currentLabel}
+				</Text>
+			</View>
+			<ExampleMessage previewFontSize={previewFontSize} />
+			<View style={styles.sliderContainer}>
+				<View style={styles.sliderLabels}>
+					<Text style={[styles.sliderLabel, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(12) }]}>A</Text>
+					<Text style={[styles.sliderLabel, { color: colors.fontSecondaryInfo, fontSize: scaleFontSize(20) }]}>A</Text>
+				</View>
+				<Slider
+					style={styles.slider}
+					minimumValue={0}
+					maximumValue={FONT_SIZE_OPTIONS_ARRAY.length - 1}
+					value={sliderValue}
+					step={1}
+					minimumTrackTintColor={primaryColor}
+					maximumTrackTintColor={trackColor}
+					thumbTintColor={primaryColor}
+					onValueChange={handleSliderChange}
+					onSlidingComplete={handleSliderComplete}
+					testID={`${testID}-slider`}
+				/>
+				<View style={styles.sliderSteps}>
+					{FONT_SIZE_OPTIONS_ARRAY.map((_, index) => (
+						<View
+							key={index}
+							style={[
+								styles.sliderStep,
+								{
+									backgroundColor: index === sliderValue ? primaryColor : trackColor,
+									width: index === sliderValue ? 8 : 4,
+									height: index === sliderValue ? 8 : 4,
+									borderRadius: index === sliderValue ? 4 : 2
+								}
+							]}
+						/>
+					))}
+				</View>
+			</View>
+		</View>
 	);
 };
 
+const styles = StyleSheet.create({
+	container: {
+		paddingVertical: 16,
+		paddingHorizontal: 16
+	},
+	header: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		alignItems: 'center',
+		marginBottom: 16
+	},
+	title: {
+		...sharedStyles.textSemibold
+	},
+	currentSize: {
+		...sharedStyles.textRegular
+	},
+	exampleMessageContainer: {
+		backgroundColor: 'transparent',
+		marginBottom: 24,
+		paddingVertical: 12
+	},
+	exampleMessage: {
+		flexDirection: 'row',
+		paddingHorizontal: 12
+	},
+	avatarContainer: {
+		width: 36,
+		alignItems: 'flex-end'
+	},
+	exampleMessageContent: {
+		flex: 1,
+		marginLeft: 10
+	},
+	exampleMessageHeader: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginBottom: 4,
+		gap: 8
+	},
+	exampleUsername: {
+		...sharedStyles.textSemibold
+	},
+	exampleTime: {
+		...sharedStyles.textRegular
+	},
+	exampleMessageText: {
+		...sharedStyles.textRegular
+	},
+	sliderContainer: {
+		paddingVertical: 8
+	},
+	sliderLabels: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		marginBottom: 8
+	},
+	sliderLabel: {
+		...sharedStyles.textRegular
+	},
+	slider: {
+		width: '100%',
+		height: 40
+	},
+	sliderSteps: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		marginTop: 8,
+		paddingHorizontal: 2
+	},
+	sliderStep: {
+		alignSelf: 'center'
+	}
+});
+
 export default FontSizePicker;
diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx
index 285ea3698ad..7a826f7091e 100644
--- a/app/views/UserPreferencesView/index.tsx
+++ b/app/views/UserPreferencesView/index.tsx
@@ -1,5 +1,6 @@
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import React, { useEffect } from 'react';
+import { Text, StyleSheet } from 'react-native';
 import { useDispatch } from 'react-redux';
 
 import { setUser } from '../../actions/login';
@@ -18,7 +19,6 @@ import { type IUser } from '../../definitions';
 import { FONT_SIZE_PREFERENCES_KEY } from '../../lib/constants/keys';
 import { FONT_SIZE_OPTIONS, useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import { useUserPreferences } from '../../lib/methods/userPreferences';
-import { Text, StyleSheet } from 'react-native';
 import sharedStyles from '../Styles';
 import { useTheme } from '../../theme';
 

From ae0a351310188e5e58394069ab0c6e7c169e4787 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 03:55:03 +0530
Subject: [PATCH 04/15] Fix font size preference handling

---
 app/containers/Button/index.tsx               |  5 ++--
 .../useResponsiveLayout.tsx                   | 24 ++++++++++++++-----
 app/stacks/MasterDetailStack/index.tsx        |  2 --
 app/views/FontSizePickerView/index.tsx        | 12 +++++-----
 .../UserPreferencesView/FontSizePicker.tsx    | 22 +++++++++--------
 5 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index e09b5ad8718..ec979259120 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -66,6 +66,7 @@ const Button: React.FC<IButtonProps> = ({
 	const { scaleFontSize } = useResponsiveLayout();
 	const isPrimary = type === 'primary';
 	const isDisabled = disabled || loading;
+	const disabledTextColor = isPrimary ? colors.buttonPrimaryDisabled : colors.buttonSecondaryDisabled;
 
 	const defaultBackgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundSecondaryDefault;
 	const disabledBackgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDisabled : colors.buttonBackgroundSecondaryDisabled;
@@ -84,8 +85,8 @@ const Button: React.FC<IButtonProps> = ({
 	const textStyle = [
 		small ? styles.smallText : styles.text,
 		styleText,
-		{ 
-			color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, 
+		{
+			color: isDisabled ? disabledTextColor : resolvedTextColor,
 			fontSize: small ? scaleFontSize(12) : scaleFontSize(fontSize),
 			lineHeight: small ? scaleFontSize(18) : undefined
 		}
diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 4a667a4d5b8..0cafe287e35 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -38,22 +38,34 @@ export const FONT_SIZE_OPTIONS = {
 const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => {
 	// `fontScale` is the current font scaling value of the device.
 	const { fontScale: systemFontScale, width, height } = useWindowDimensions();
-	const [customFontSize, setCustomFontSize] = useState(
-		() => userPreferences.getString(FONT_SIZE_PREFERENCES_KEY) || FONT_SIZE_OPTIONS.NORMAL.toString()
-	);
+	const [customFontSize, setCustomFontSize] = useState(() => {
+		const storedNumber = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
+		if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber)) {
+			return storedNumber;
+		}
+		const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
+		const parsed = storedString !== null ? Number(storedString) : undefined;
+		return !Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL;
+	});
 	
 	useEffect(() => {
 		const listener = initializeStorage.addOnValueChangedListener((changedKey: string) => {
 			if (changedKey === FONT_SIZE_PREFERENCES_KEY) {
-				const newFontSize = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY) || FONT_SIZE_OPTIONS.NORMAL.toString();
-				setCustomFontSize(newFontSize);
+				const newValue = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
+				if (typeof newValue === 'number' && !Number.isNaN(newValue)) {
+					setCustomFontSize(newValue);
+					return;
+				}
+				const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
+				const parsed = storedString !== null ? Number(storedString) : undefined;
+				setCustomFontSize(!Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL);
 			}
 		});
 		
 		return () => listener.remove();
 	}, []);
 
-	const fontSizeMultiplier = customFontSize ? parseFloat(customFontSize) : 1.0;
+	const fontSizeMultiplier = typeof customFontSize === 'number' && !Number.isNaN(customFontSize) ? customFontSize : 1.0;
 	const fontScale = systemFontScale * fontSizeMultiplier;
 	const isLargeFontScale = fontScale > FONT_SCALE_LIMIT;
 	// `fontScaleLimited` applies the `FONT_SCALE_LIMIT` to prevent layout issues on large font sizes.
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index 076ceb15640..d4dd3ccc2fa 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -46,7 +46,6 @@ import NewMessageView from '../../views/NewMessageView';
 import CreateChannelView from '../../views/CreateChannelView';
 import UserPreferencesView from '../../views/UserPreferencesView';
 import UserNotificationPrefView from '../../views/UserNotificationPreferencesView';
-import FontSizePickerView from '../../views/FontSizePickerView';
 import LegalView from '../../views/LegalView';
 import SecurityPrivacyView from '../../views/SecurityPrivacyView';
 import MediaAutoDownloadView from '../../views/MediaAutoDownloadView';
@@ -196,7 +195,6 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen name='E2EEnterYourPasswordView' component={E2EEnterYourPasswordView} />
 				<ModalStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
 				<ModalStack.Screen name='UserNotificationPrefView' component={UserNotificationPrefView} />
-				<ModalStack.Screen name='FontSizePickerView' component={FontSizePickerView} />
 				<ModalStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
 				<ModalStack.Screen name='MediaAutoDownloadView' component={MediaAutoDownloadView} />
 				<ModalStack.Screen name='E2EEncryptionSecurityView' component={E2EEncryptionSecurityView} />
diff --git a/app/views/FontSizePickerView/index.tsx b/app/views/FontSizePickerView/index.tsx
index 4e4f894a228..fd394efb2e4 100644
--- a/app/views/FontSizePickerView/index.tsx
+++ b/app/views/FontSizePickerView/index.tsx
@@ -85,8 +85,8 @@ const ExampleMessage = ({ previewFontSize }: { previewFontSize: number }) => {
 const FontSizePickerView = ({ navigation }: IFontSizePickerViewProps) => {
 	const { colors } = useTheme();
 	const { scaleFontSize } = useResponsiveLayout();
-	const [fontSize, setFontSize] = useUserPreferences<string>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL.toString());
-	const [previewFontSize, setPreviewFontSize] = useState(parseFloat(fontSize || FONT_SIZE_OPTIONS.NORMAL.toString()));
+	const [fontSize, setFontSize] = useUserPreferences<number>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL);
+	const [previewFontSize, setPreviewFontSize] = useState(fontSize ?? FONT_SIZE_OPTIONS.NORMAL);
 
 	useLayoutEffect(() => {
 		navigation.setOptions({
@@ -94,7 +94,7 @@ const FontSizePickerView = ({ navigation }: IFontSizePickerViewProps) => {
 		});
 	}, [navigation]);
 
-	const currentIndex = FONT_SIZE_OPTIONS_ARRAY.findIndex(opt => opt.toString() === fontSize);
+	const currentIndex = FONT_SIZE_OPTIONS_ARRAY.findIndex(opt => opt === fontSize);
 	const sliderValue = currentIndex >= 0 ? currentIndex : 1;
 
 	const handleSliderChange = (value: number) => {
@@ -106,12 +106,12 @@ const FontSizePickerView = ({ navigation }: IFontSizePickerViewProps) => {
 	const handleSliderComplete = (value: number) => {
 		const index = Math.round(value);
 		const selectedFontSize = FONT_SIZE_OPTIONS_ARRAY[index];
-		setFontSize(selectedFontSize.toString());
+		setFontSize(selectedFontSize);
 		setPreviewFontSize(selectedFontSize);
 	};
 
-	const fontSizeValue = fontSize || FONT_SIZE_OPTIONS.NORMAL.toString();
-	const currentLabel = FONT_SIZE_LABELS[parseFloat(fontSizeValue) as keyof typeof FONT_SIZE_LABELS] || 'Normal';
+	const fontSizeValue = fontSize ?? FONT_SIZE_OPTIONS.NORMAL;
+	const currentLabel = FONT_SIZE_LABELS[fontSizeValue as keyof typeof FONT_SIZE_LABELS] || 'Normal';
 	const primaryColor = colors.buttonBackgroundPrimaryDefault;
 	const trackColor = colors.strokeLight;
 
diff --git a/app/views/UserPreferencesView/FontSizePicker.tsx b/app/views/UserPreferencesView/FontSizePicker.tsx
index 5d0d5c622b1..cf95d67aba5 100644
--- a/app/views/UserPreferencesView/FontSizePicker.tsx
+++ b/app/views/UserPreferencesView/FontSizePicker.tsx
@@ -36,14 +36,16 @@ const ExampleMessage = ({ previewFontSize }: { previewFontSize: number }) => {
 	const server = useAppSelector(state => state.server.server);
 	
 	const previewFontScale = systemFontScale * previewFontSize;
-	const previewScaleFontSize = (size: number) => size * previewFontSize;
+	const previewFontScaleLimited = previewFontScale > 1.3 ? 1.3 : previewFontScale;
+	const previewScaleFontSize = (size: number) => size * (systemFontScale ? previewFontScaleLimited / systemFontScale : previewFontSize);
+	const previewAvatarSize = previewScaleFontSize(36);
 	
 	const previewContextValue = {
 		fontScale: previewFontScale,
 		width: 0,
 		height: 0,
 		isLargeFontScale: previewFontScale > 1.3,
-		fontScaleLimited: previewFontScale > 1.3 ? 1.3 : previewFontScale,
+		fontScaleLimited: previewFontScaleLimited,
 		rowHeight: 75 * previewFontScale,
 		rowHeightCondensed: 60 * previewFontScale,
 		scaleFontSize: previewScaleFontSize
@@ -53,10 +55,10 @@ const ExampleMessage = ({ previewFontSize }: { previewFontSize: number }) => {
 		<ResponsiveLayoutContext.Provider value={previewContextValue}>
 			<View style={styles.exampleMessageContainer}>
 				<View style={styles.exampleMessage}>
-					<View style={styles.avatarContainer}>
+					<View style={[styles.avatarContainer, { width: previewAvatarSize }]}>
 						<Avatar
 							text='RC'
-							size={previewScaleFontSize(36)}
+							size={previewAvatarSize}
 							borderRadius={4}
 							server={server || 'https://open.rocket.chat'}
 						/>
@@ -83,10 +85,10 @@ const ExampleMessage = ({ previewFontSize }: { previewFontSize: number }) => {
 const FontSizePicker = ({ title, testID }: IFontSizePickerProps) => {
 	const { colors } = useTheme();
 	const { scaleFontSize } = useResponsiveLayout();
-	const [fontSize, setFontSize] = useUserPreferences<string>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL.toString());
-	const [previewFontSize, setPreviewFontSize] = useState(parseFloat(fontSize || FONT_SIZE_OPTIONS.NORMAL.toString()));
+	const [fontSize, setFontSize] = useUserPreferences<number>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL);
+	const [previewFontSize, setPreviewFontSize] = useState(fontSize ?? FONT_SIZE_OPTIONS.NORMAL);
 
-	const currentIndex = FONT_SIZE_OPTIONS_ARRAY.findIndex(opt => opt.toString() === fontSize);
+	const currentIndex = FONT_SIZE_OPTIONS_ARRAY.findIndex(opt => opt === fontSize);
 	const sliderValue = currentIndex >= 0 ? currentIndex : 1;
 
 	const handleSliderChange = (value: number) => {
@@ -98,12 +100,12 @@ const FontSizePicker = ({ title, testID }: IFontSizePickerProps) => {
 	const handleSliderComplete = (value: number) => {
 		const index = Math.round(value);
 		const selectedFontSize = FONT_SIZE_OPTIONS_ARRAY[index];
-		setFontSize(selectedFontSize.toString());
+		setFontSize(selectedFontSize);
 		setPreviewFontSize(selectedFontSize);
 	};
 
-	const fontSizeValue = fontSize || FONT_SIZE_OPTIONS.NORMAL.toString();
-	const currentLabel = FONT_SIZE_LABELS[parseFloat(fontSizeValue) as keyof typeof FONT_SIZE_LABELS] || 'Normal';
+	const fontSizeValue = fontSize ?? FONT_SIZE_OPTIONS.NORMAL;
+	const currentLabel = FONT_SIZE_LABELS[fontSizeValue as keyof typeof FONT_SIZE_LABELS] || 'Normal';
 	const primaryColor = colors.buttonBackgroundPrimaryDefault;
 	const trackColor = colors.strokeLight;
 

From bb7ad01bf61ccd59875e9b80eb9bed1b0f699d1a Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 04:18:01 +0530
Subject: [PATCH 05/15] Fix button style ordering and apply font scale limit to
 row heights

---
 app/containers/Button/index.tsx                     |  4 ++--
 .../useResponsiveLayout/useResponsiveLayout.tsx     | 13 ++++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index ec979259120..d5c2d0396e6 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -84,12 +84,12 @@ const Button: React.FC<IButtonProps> = ({
 
 	const textStyle = [
 		small ? styles.smallText : styles.text,
-		styleText,
 		{
 			color: isDisabled ? disabledTextColor : resolvedTextColor,
 			fontSize: small ? scaleFontSize(12) : scaleFontSize(fontSize),
 			lineHeight: small ? scaleFontSize(18) : undefined
-		}
+		},
+		styleText
 	];
 
 	return (
diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 0cafe287e35..24d447c1da3 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -67,14 +67,17 @@ const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProp
 
 	const fontSizeMultiplier = typeof customFontSize === 'number' && !Number.isNaN(customFontSize) ? customFontSize : 1.0;
 	const fontScale = systemFontScale * fontSizeMultiplier;
-	const isLargeFontScale = fontScale > FONT_SCALE_LIMIT;
-	// `fontScaleLimited` applies the `FONT_SCALE_LIMIT` to prevent layout issues on large font sizes.
-	const fontScaleLimited = isLargeFontScale ? FONT_SCALE_LIMIT : fontScale;
 	const isSmallFont = fontScale < SMALL_FONT_THRESHOLD;
 	const baseRowHeight = isSmallFont ? BASE_ROW_HEIGHT_SMALL_FONT : BASE_ROW_HEIGHT;
 	const baseRowHeightCondensed = isSmallFont ? BASE_ROW_HEIGHT_CONDENSED_SMALL_FONT : BASE_ROW_HEIGHT_CONDENSED;
-	const rowHeight = baseRowHeight * fontScale;
-	const rowHeightCondensed = baseRowHeightCondensed * fontScale;
+	const scaledRowHeight = baseRowHeight * fontScale;
+	const scaledRowHeightCondensed = baseRowHeightCondensed * fontScale;
+	// Apply cap to prevent extreme scaling
+	const rowHeight = Math.min(scaledRowHeight, baseRowHeight * FONT_SCALE_LIMIT);
+	const rowHeightCondensed = Math.min(scaledRowHeightCondensed, baseRowHeightCondensed * FONT_SCALE_LIMIT);
+	const isLargeFontScale = fontScale > FONT_SCALE_LIMIT;
+	// `fontScaleLimited` applies the `FONT_SCALE_LIMIT` to prevent layout issues on large font sizes.
+	const fontScaleLimited = isLargeFontScale ? FONT_SCALE_LIMIT : fontScale;
 
 	const scaleFontSize = useCallback((size: number): number => size * fontSizeMultiplier, [fontSizeMultiplier]);
 

From f45f2f117596481967830d07e0a944d8272f14a2 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 04:29:41 +0530
Subject: [PATCH 06/15] Fix scaleFontSize to respect system accessibility
 settings

---
 app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 24d447c1da3..7c5ebbc1443 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -79,7 +79,7 @@ const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProp
 	// `fontScaleLimited` applies the `FONT_SCALE_LIMIT` to prevent layout issues on large font sizes.
 	const fontScaleLimited = isLargeFontScale ? FONT_SCALE_LIMIT : fontScale;
 
-	const scaleFontSize = useCallback((size: number): number => size * fontSizeMultiplier, [fontSizeMultiplier]);
+	const scaleFontSize = useCallback((size: number): number => size * fontScale, [fontScale]);
 
 	const contextValue = useMemo(
 		() => ({

From c65aa96807c886b534b972247350e73fc39931ac Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 04:36:29 +0530
Subject: [PATCH 07/15] Refactor: Extract duplicated font size storage reading
 logic into helper function

---
 .../useResponsiveLayout.tsx                   | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 7c5ebbc1443..44a0705536b 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -35,30 +35,25 @@ export const FONT_SIZE_OPTIONS = {
 	EXTRA_LARGE: 1.2
 };
 
+const getFontSizeFromStorage = (): number => {
+	const storedNumber = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
+	if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber)) {
+		return storedNumber;
+	}
+	const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
+	const parsed = storedString !== null ? Number(storedString) : undefined;
+	return !Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL;
+};
+
 const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => {
 	// `fontScale` is the current font scaling value of the device.
 	const { fontScale: systemFontScale, width, height } = useWindowDimensions();
-	const [customFontSize, setCustomFontSize] = useState(() => {
-		const storedNumber = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
-		if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber)) {
-			return storedNumber;
-		}
-		const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
-		const parsed = storedString !== null ? Number(storedString) : undefined;
-		return !Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL;
-	});
+	const [customFontSize, setCustomFontSize] = useState(() => getFontSizeFromStorage());
 	
 	useEffect(() => {
 		const listener = initializeStorage.addOnValueChangedListener((changedKey: string) => {
 			if (changedKey === FONT_SIZE_PREFERENCES_KEY) {
-				const newValue = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
-				if (typeof newValue === 'number' && !Number.isNaN(newValue)) {
-					setCustomFontSize(newValue);
-					return;
-				}
-				const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
-				const parsed = storedString !== null ? Number(storedString) : undefined;
-				setCustomFontSize(!Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL);
+				setCustomFontSize(getFontSizeFromStorage());
 			}
 		});
 		

From b8dea00da3230d3fabf75cd8934795c964f951d4 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 04:44:10 +0530
Subject: [PATCH 08/15] Standardize font size preference to numeric in
 UserPreferencesView

---
 app/views/UserPreferencesView/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx
index 7a826f7091e..5183bcfb0fd 100644
--- a/app/views/UserPreferencesView/index.tsx
+++ b/app/views/UserPreferencesView/index.tsx
@@ -35,7 +35,7 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 	const convertAsciiEmoji = settings?.preferences?.convertAsciiEmoji;
 	const { colors } = useTheme();
 	const { scaleFontSize } = useResponsiveLayout();
-	const [fontSize] = useUserPreferences<string>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL.toString());
+	const [fontSize] = useUserPreferences<number>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL);
 	
 	const FONT_SIZE_LABELS = {
 		[FONT_SIZE_OPTIONS.SMALL]: 'Small',
@@ -44,8 +44,8 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 		[FONT_SIZE_OPTIONS.EXTRA_LARGE]: 'Extra_Large'
 	};
 	
-	const fontSizeValue = fontSize || FONT_SIZE_OPTIONS.NORMAL.toString();
-	const currentLabel = FONT_SIZE_LABELS[parseFloat(fontSizeValue) as keyof typeof FONT_SIZE_LABELS] || 'Normal';
+	const fontSizeValue = fontSize ?? FONT_SIZE_OPTIONS.NORMAL;
+	const currentLabel = FONT_SIZE_LABELS[fontSizeValue as keyof typeof FONT_SIZE_LABELS] || 'Normal';
 
 	useEffect(() => {
 		navigation.setOptions({

From 3b7e879780b2e1d015f951f443cdcf9283c9332b Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 13:28:43 +0530
Subject: [PATCH 09/15] Normalize font size preference storage to numeric

---
 .../hooks/useResponsiveLayout/useResponsiveLayout.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 44a0705536b..38662ee8834 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -40,9 +40,18 @@ const getFontSizeFromStorage = (): number => {
 	if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber)) {
 		return storedNumber;
 	}
+
 	const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
 	const parsed = storedString !== null ? Number(storedString) : undefined;
-	return !Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL;
+	if (!Number.isNaN(parsed ?? NaN)) {
+		// Normalize storage to numeric to avoid mixed types across the app.
+		userPreferences.setNumber(FONT_SIZE_PREFERENCES_KEY, parsed as number);
+		return parsed as number;
+	}
+
+	// Default to normal size if nothing is set or parsing failed.
+	userPreferences.setNumber(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL);
+	return FONT_SIZE_OPTIONS.NORMAL;
 };
 
 const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => {

From e0de1f36845fe37aae5313e57485a95033a16eb6 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 15:51:54 +0530
Subject: [PATCH 10/15] Fix font size label display and storage consistency

- Use native number storage in useUserPreferences for numeric values
- Add findClosestOption to handle floating point precision in label lookup
- Apply fontScaleLimited to scaleFontSize to prevent unbounded scaling
- Fix current size label showing correctly in FontSizePickerView and UserPreferencesView
---
 .../useResponsiveLayout.tsx                   |  3 +-
 app/lib/methods/userPreferences.ts            | 56 +++++++++++++++----
 app/views/FontSizePickerView/index.tsx        | 16 +++++-
 app/views/UserPreferencesView/index.tsx       | 20 ++++++-
 4 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 38662ee8834..341c601ca0e 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -83,7 +83,8 @@ const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProp
 	// `fontScaleLimited` applies the `FONT_SCALE_LIMIT` to prevent layout issues on large font sizes.
 	const fontScaleLimited = isLargeFontScale ? FONT_SCALE_LIMIT : fontScale;
 
-	const scaleFontSize = useCallback((size: number): number => size * fontScale, [fontScale]);
+	// Use limited scale for text sizing to avoid unbounded compound scaling.
+	const scaleFontSize = useCallback((size: number): number => size * fontScaleLimited, [fontScaleLimited]);
 
 	const contextValue = useMemo(
 		() => ({
diff --git a/app/lib/methods/userPreferences.ts b/app/lib/methods/userPreferences.ts
index 8e9a605ee3c..c38485be49b 100644
--- a/app/lib/methods/userPreferences.ts
+++ b/app/lib/methods/userPreferences.ts
@@ -1,4 +1,4 @@
-import { MMKV, Mode, useMMKVString } from 'react-native-mmkv';
+import { MMKV, Mode, useMMKVString, useMMKVNumber } from 'react-native-mmkv';
 import type { Configuration } from 'react-native-mmkv';
 import { NativeModules } from 'react-native';
 
@@ -61,28 +61,62 @@ const getAppGroupPath = (): string => {
 const MMKV_INSTANCE = new MMKV(buildConfiguration());
 
 export const useUserPreferences = <T>(key: string, defaultValue?: T): [T | undefined, (value: T | undefined) => void] => {
-	const [storedValue, setStoredValue] = useMMKVString(key, MMKV_INSTANCE);
+	// Use native number storage for numbers to ensure consistency
+	const isNumberType = typeof defaultValue === 'number';
+	const [storedNumber, setStoredNumber] = useMMKVNumber(key, MMKV_INSTANCE);
+	const [storedString, setStoredString] = useMMKVString(key, MMKV_INSTANCE);
 
 	let value: T | undefined = defaultValue;
-	if (storedValue !== undefined) {
-		if (typeof defaultValue === 'string' || defaultValue === undefined) {
-			value = storedValue as T;
-		} else {
+	
+	if (isNumberType) {
+		// For numbers, use native number storage
+		if (storedNumber !== undefined && storedNumber !== null) {
+			value = storedNumber as T;
+		}
+		// Fallback: check if stored as JSON string (for migration)
+		else if (storedString !== undefined) {
 			try {
-				value = JSON.parse(storedValue) as T;
+				const parsed = JSON.parse(storedString);
+				if (typeof parsed === 'number') {
+					// Migrate to native number storage
+					setStoredNumber(parsed);
+					value = parsed as T;
+				}
 			} catch {
-				value = defaultValue;
+				// Ignore parse errors
+			}
+		}
+	} else {
+		// For non-numbers, use string storage
+		if (storedString !== undefined) {
+			if (typeof defaultValue === 'string' || defaultValue === undefined) {
+				value = storedString as T;
+			} else {
+				try {
+					value = JSON.parse(storedString) as T;
+				} catch {
+					value = defaultValue;
+				}
 			}
 		}
 	}
 
 	const setValue = (newValue: T | undefined) => {
 		if (newValue === undefined) {
-			setStoredValue(undefined);
+			if (isNumberType) {
+				setStoredNumber(undefined);
+			}
+			setStoredString(undefined);
+		} else if (isNumberType && typeof newValue === 'number') {
+			setStoredNumber(newValue);
+			// Also clear string storage if it exists (migration cleanup)
+			if (storedString !== undefined) {
+				setStoredString(undefined);
+			}
 		} else if (typeof newValue === 'string') {
-			setStoredValue(newValue);
+			setStoredString(newValue);
 		} else {
-			setStoredValue(JSON.stringify(newValue));
+			setStoredString(JSON.stringify(newValue));
 		}
 	};
 
diff --git a/app/views/FontSizePickerView/index.tsx b/app/views/FontSizePickerView/index.tsx
index fd394efb2e4..7dd90a193c1 100644
--- a/app/views/FontSizePickerView/index.tsx
+++ b/app/views/FontSizePickerView/index.tsx
@@ -94,7 +94,19 @@ const FontSizePickerView = ({ navigation }: IFontSizePickerViewProps) => {
 		});
 	}, [navigation]);
 
-	const currentIndex = FONT_SIZE_OPTIONS_ARRAY.findIndex(opt => opt === fontSize);
+	// Find the closest matching option to handle floating point precision issues
+	const findClosestOption = (value: number | undefined): number => {
+		if (value === undefined || value === null) {
+			return FONT_SIZE_OPTIONS.NORMAL;
+		}
+		const closest = FONT_SIZE_OPTIONS_ARRAY.reduce(
+			(prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)
+		);
+		return closest;
+	};
+
+	const normalizedFontSize = findClosestOption(fontSize);
+	const currentIndex = FONT_SIZE_OPTIONS_ARRAY.findIndex(opt => Math.abs(opt - normalizedFontSize) < 0.01);
 	const sliderValue = currentIndex >= 0 ? currentIndex : 1;
 
 	const handleSliderChange = (value: number) => {
@@ -110,7 +122,7 @@ const FontSizePickerView = ({ navigation }: IFontSizePickerViewProps) => {
 		setPreviewFontSize(selectedFontSize);
 	};
 
-	const fontSizeValue = fontSize ?? FONT_SIZE_OPTIONS.NORMAL;
+	const fontSizeValue = normalizedFontSize;
 	const currentLabel = FONT_SIZE_LABELS[fontSizeValue as keyof typeof FONT_SIZE_LABELS] || 'Normal';
 	const primaryColor = colors.buttonBackgroundPrimaryDefault;
 	const trackColor = colors.strokeLight;
diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx
index 5183bcfb0fd..c200ed4afd4 100644
--- a/app/views/UserPreferencesView/index.tsx
+++ b/app/views/UserPreferencesView/index.tsx
@@ -44,7 +44,25 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 		[FONT_SIZE_OPTIONS.EXTRA_LARGE]: 'Extra_Large'
 	};
 	
-	const fontSizeValue = fontSize ?? FONT_SIZE_OPTIONS.NORMAL;
+	const FONT_SIZE_OPTIONS_ARRAY = [
+		FONT_SIZE_OPTIONS.SMALL,
+		FONT_SIZE_OPTIONS.NORMAL,
+		FONT_SIZE_OPTIONS.LARGE,
+		FONT_SIZE_OPTIONS.EXTRA_LARGE
+	];
+	
+	// Find the closest matching option to handle floating point precision issues
+	const findClosestOption = (value: number | undefined): number => {
+		if (value === undefined || value === null) {
+			return FONT_SIZE_OPTIONS.NORMAL;
+		}
+		const closest = FONT_SIZE_OPTIONS_ARRAY.reduce((prev, curr) => {
+			return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
+		});
+		return closest;
+	};
+	
+	const fontSizeValue = findClosestOption(fontSize);
 	const currentLabel = FONT_SIZE_LABELS[fontSizeValue as keyof typeof FONT_SIZE_LABELS] || 'Normal';
 
 	useEffect(() => {

From 4defe2070cd902da60b1bc3265073ada9fbaab19 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 16:37:07 +0530
Subject: [PATCH 11/15] Simplify font size preference handling and use
 fontScale for scaling

---
 .../useResponsiveLayout.tsx                   | 41 ++++++--------
 app/lib/methods/userPreferences.ts            | 56 ++++---------------
 app/views/FontSizePickerView/index.tsx        | 16 +-----
 app/views/UserPreferencesView/index.tsx       | 24 +-------
 4 files changed, 34 insertions(+), 103 deletions(-)

diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 341c601ca0e..7c5ebbc1443 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -35,34 +35,30 @@ export const FONT_SIZE_OPTIONS = {
 	EXTRA_LARGE: 1.2
 };
 
-const getFontSizeFromStorage = (): number => {
-	const storedNumber = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
-	if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber)) {
-		return storedNumber;
-	}
-
-	const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
-	const parsed = storedString !== null ? Number(storedString) : undefined;
-	if (!Number.isNaN(parsed ?? NaN)) {
-		// Normalize storage to numeric to avoid mixed types across the app.
-		userPreferences.setNumber(FONT_SIZE_PREFERENCES_KEY, parsed as number);
-		return parsed as number;
-	}
-
-	// Default to normal size if nothing is set or parsing failed.
-	userPreferences.setNumber(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL);
-	return FONT_SIZE_OPTIONS.NORMAL;
-};
-
 const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => {
 	// `fontScale` is the current font scaling value of the device.
 	const { fontScale: systemFontScale, width, height } = useWindowDimensions();
-	const [customFontSize, setCustomFontSize] = useState(() => getFontSizeFromStorage());
+	const [customFontSize, setCustomFontSize] = useState(() => {
+		const storedNumber = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
+		if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber)) {
+			return storedNumber;
+		}
+		const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
+		const parsed = storedString !== null ? Number(storedString) : undefined;
+		return !Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL;
+	});
 	
 	useEffect(() => {
 		const listener = initializeStorage.addOnValueChangedListener((changedKey: string) => {
 			if (changedKey === FONT_SIZE_PREFERENCES_KEY) {
-				setCustomFontSize(getFontSizeFromStorage());
+				const newValue = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
+				if (typeof newValue === 'number' && !Number.isNaN(newValue)) {
+					setCustomFontSize(newValue);
+					return;
+				}
+				const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
+				const parsed = storedString !== null ? Number(storedString) : undefined;
+				setCustomFontSize(!Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL);
 			}
 		});
 		
@@ -83,8 +79,7 @@ const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProp
 	// `fontScaleLimited` applies the `FONT_SCALE_LIMIT` to prevent layout issues on large font sizes.
 	const fontScaleLimited = isLargeFontScale ? FONT_SCALE_LIMIT : fontScale;
 
-	// Use limited scale for text sizing to avoid unbounded compound scaling.
-	const scaleFontSize = useCallback((size: number): number => size * fontScaleLimited, [fontScaleLimited]);
+	const scaleFontSize = useCallback((size: number): number => size * fontScale, [fontScale]);
 
 	const contextValue = useMemo(
 		() => ({
diff --git a/app/lib/methods/userPreferences.ts b/app/lib/methods/userPreferences.ts
index c38485be49b..8e9a605ee3c 100644
--- a/app/lib/methods/userPreferences.ts
+++ b/app/lib/methods/userPreferences.ts
@@ -1,4 +1,4 @@
-import { MMKV, Mode, useMMKVString, useMMKVNumber } from 'react-native-mmkv';
+import { MMKV, Mode, useMMKVString } from 'react-native-mmkv';
 import type { Configuration } from 'react-native-mmkv';
 import { NativeModules } from 'react-native';
 
@@ -61,62 +61,28 @@ const getAppGroupPath = (): string => {
 const MMKV_INSTANCE = new MMKV(buildConfiguration());
 
 export const useUserPreferences = <T>(key: string, defaultValue?: T): [T | undefined, (value: T | undefined) => void] => {
-	// Use native number storage for numbers to ensure consistency
-	const isNumberType = typeof defaultValue === 'number';
-	const [storedNumber, setStoredNumber] = useMMKVNumber(key, MMKV_INSTANCE);
-	const [storedString, setStoredString] = useMMKVString(key, MMKV_INSTANCE);
+	const [storedValue, setStoredValue] = useMMKVString(key, MMKV_INSTANCE);
 
 	let value: T | undefined = defaultValue;
-	
-	if (isNumberType) {
-		// For numbers, use native number storage
-		if (storedNumber !== undefined && storedNumber !== null) {
-			value = storedNumber as T;
-		}
-		// Fallback: check if stored as JSON string (for migration)
-		else if (storedString !== undefined) {
+	if (storedValue !== undefined) {
+		if (typeof defaultValue === 'string' || defaultValue === undefined) {
+			value = storedValue as T;
+		} else {
 			try {
-				const parsed = JSON.parse(storedString);
-				if (typeof parsed === 'number') {
-					// Migrate to native number storage
-					setStoredNumber(parsed);
-					value = parsed as T;
-				}
+				value = JSON.parse(storedValue) as T;
 			} catch {
-				// Ignore parse errors
-			}
-		}
-	} else {
-		// For non-numbers, use string storage
-		if (storedString !== undefined) {
-			if (typeof defaultValue === 'string' || defaultValue === undefined) {
-				value = storedString as T;
-			} else {
-				try {
-					value = JSON.parse(storedString) as T;
-				} catch {
-					value = defaultValue;
-				}
+				value = defaultValue;
 			}
 		}
 	}
 
 	const setValue = (newValue: T | undefined) => {
 		if (newValue === undefined) {
-			if (isNumberType) {
-				setStoredNumber(undefined);
-			}
-			setStoredString(undefined);
-		} else if (isNumberType && typeof newValue === 'number') {
-			setStoredNumber(newValue);
-			// Also clear string storage if it exists (migration cleanup)
-			if (storedString !== undefined) {
-				setStoredString(undefined);
-			}
+			setStoredValue(undefined);
 		} else if (typeof newValue === 'string') {
-			setStoredString(newValue);
+			setStoredValue(newValue);
 		} else {
-			setStoredString(JSON.stringify(newValue));
+			setStoredValue(JSON.stringify(newValue));
 		}
 	};
 
diff --git a/app/views/FontSizePickerView/index.tsx b/app/views/FontSizePickerView/index.tsx
index 7dd90a193c1..fd394efb2e4 100644
--- a/app/views/FontSizePickerView/index.tsx
+++ b/app/views/FontSizePickerView/index.tsx
@@ -94,19 +94,7 @@ const FontSizePickerView = ({ navigation }: IFontSizePickerViewProps) => {
 		});
 	}, [navigation]);
 
-	// Find the closest matching option to handle floating point precision issues
-	const findClosestOption = (value: number | undefined): number => {
-		if (value === undefined || value === null) {
-			return FONT_SIZE_OPTIONS.NORMAL;
-		}
-		const closest = FONT_SIZE_OPTIONS_ARRAY.reduce(
-			(prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)
-		);
-		return closest;
-	};
-
-	const normalizedFontSize = findClosestOption(fontSize);
-	const currentIndex = FONT_SIZE_OPTIONS_ARRAY.findIndex(opt => Math.abs(opt - normalizedFontSize) < 0.01);
+	const currentIndex = FONT_SIZE_OPTIONS_ARRAY.findIndex(opt => opt === fontSize);
 	const sliderValue = currentIndex >= 0 ? currentIndex : 1;
 
 	const handleSliderChange = (value: number) => {
@@ -122,7 +110,7 @@ const FontSizePickerView = ({ navigation }: IFontSizePickerViewProps) => {
 		setPreviewFontSize(selectedFontSize);
 	};
 
-	const fontSizeValue = normalizedFontSize;
+	const fontSizeValue = fontSize ?? FONT_SIZE_OPTIONS.NORMAL;
 	const currentLabel = FONT_SIZE_LABELS[fontSizeValue as keyof typeof FONT_SIZE_LABELS] || 'Normal';
 	const primaryColor = colors.buttonBackgroundPrimaryDefault;
 	const trackColor = colors.strokeLight;
diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx
index c200ed4afd4..7a826f7091e 100644
--- a/app/views/UserPreferencesView/index.tsx
+++ b/app/views/UserPreferencesView/index.tsx
@@ -35,7 +35,7 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 	const convertAsciiEmoji = settings?.preferences?.convertAsciiEmoji;
 	const { colors } = useTheme();
 	const { scaleFontSize } = useResponsiveLayout();
-	const [fontSize] = useUserPreferences<number>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL);
+	const [fontSize] = useUserPreferences<string>(FONT_SIZE_PREFERENCES_KEY, FONT_SIZE_OPTIONS.NORMAL.toString());
 	
 	const FONT_SIZE_LABELS = {
 		[FONT_SIZE_OPTIONS.SMALL]: 'Small',
@@ -44,26 +44,8 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 		[FONT_SIZE_OPTIONS.EXTRA_LARGE]: 'Extra_Large'
 	};
 	
-	const FONT_SIZE_OPTIONS_ARRAY = [
-		FONT_SIZE_OPTIONS.SMALL,
-		FONT_SIZE_OPTIONS.NORMAL,
-		FONT_SIZE_OPTIONS.LARGE,
-		FONT_SIZE_OPTIONS.EXTRA_LARGE
-	];
-	
-	// Find the closest matching option to handle floating point precision issues
-	const findClosestOption = (value: number | undefined): number => {
-		if (value === undefined || value === null) {
-			return FONT_SIZE_OPTIONS.NORMAL;
-		}
-		const closest = FONT_SIZE_OPTIONS_ARRAY.reduce((prev, curr) => {
-			return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
-		});
-		return closest;
-	};
-	
-	const fontSizeValue = findClosestOption(fontSize);
-	const currentLabel = FONT_SIZE_LABELS[fontSizeValue as keyof typeof FONT_SIZE_LABELS] || 'Normal';
+	const fontSizeValue = fontSize || FONT_SIZE_OPTIONS.NORMAL.toString();
+	const currentLabel = FONT_SIZE_LABELS[parseFloat(fontSizeValue) as keyof typeof FONT_SIZE_LABELS] || 'Normal';
 
 	useEffect(() => {
 		navigation.setOptions({

From d37bba9ee1f731cfd347b36eb2a284f7c152fb09 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 16:52:14 +0530
Subject: [PATCH 12/15] Remove added comments

---
 app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 7c5ebbc1443..792b245b620 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -72,11 +72,9 @@ const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProp
 	const baseRowHeightCondensed = isSmallFont ? BASE_ROW_HEIGHT_CONDENSED_SMALL_FONT : BASE_ROW_HEIGHT_CONDENSED;
 	const scaledRowHeight = baseRowHeight * fontScale;
 	const scaledRowHeightCondensed = baseRowHeightCondensed * fontScale;
-	// Apply cap to prevent extreme scaling
 	const rowHeight = Math.min(scaledRowHeight, baseRowHeight * FONT_SCALE_LIMIT);
 	const rowHeightCondensed = Math.min(scaledRowHeightCondensed, baseRowHeightCondensed * FONT_SCALE_LIMIT);
 	const isLargeFontScale = fontScale > FONT_SCALE_LIMIT;
-	// `fontScaleLimited` applies the `FONT_SCALE_LIMIT` to prevent layout issues on large font sizes.
 	const fontScaleLimited = isLargeFontScale ? FONT_SCALE_LIMIT : fontScale;
 
 	const scaleFontSize = useCallback((size: number): number => size * fontScale, [fontScale]);

From 9b3ce1d39db981b062a1fc5d8007a465da24e769 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 17:25:10 +0530
Subject: [PATCH 13/15] Extract duplicated font size parsing logic into helper
 function

---
 .../useResponsiveLayout.tsx                   | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 792b245b620..1bf45151a41 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -35,30 +35,25 @@ export const FONT_SIZE_OPTIONS = {
 	EXTRA_LARGE: 1.2
 };
 
+const getFontSizeFromStorage = (): number => {
+	const storedNumber = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
+	if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber)) {
+		return storedNumber;
+	}
+	const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
+	const parsed = storedString !== null ? Number(storedString) : undefined;
+	return !Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL;
+};
+
 const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => {
 	// `fontScale` is the current font scaling value of the device.
 	const { fontScale: systemFontScale, width, height } = useWindowDimensions();
-	const [customFontSize, setCustomFontSize] = useState(() => {
-		const storedNumber = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
-		if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber)) {
-			return storedNumber;
-		}
-		const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
-		const parsed = storedString !== null ? Number(storedString) : undefined;
-		return !Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL;
-	});
+	const [customFontSize, setCustomFontSize] = useState(() => getFontSizeFromStorage());
 	
 	useEffect(() => {
 		const listener = initializeStorage.addOnValueChangedListener((changedKey: string) => {
 			if (changedKey === FONT_SIZE_PREFERENCES_KEY) {
-				const newValue = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
-				if (typeof newValue === 'number' && !Number.isNaN(newValue)) {
-					setCustomFontSize(newValue);
-					return;
-				}
-				const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
-				const parsed = storedString !== null ? Number(storedString) : undefined;
-				setCustomFontSize(!Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL);
+				setCustomFontSize(getFontSizeFromStorage());
 			}
 		});
 		

From 7eb016a9ad3df996159dc588a42c82155ef51606 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 17:37:02 +0530
Subject: [PATCH 14/15] Add validation to prevent invalid font size values

---
 app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 1bf45151a41..4911a15d88d 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -37,12 +37,15 @@ export const FONT_SIZE_OPTIONS = {
 
 const getFontSizeFromStorage = (): number => {
 	const storedNumber = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
-	if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber)) {
+	if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber) && Number.isFinite(storedNumber) && storedNumber > 0) {
 		return storedNumber;
 	}
 	const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
 	const parsed = storedString !== null ? Number(storedString) : undefined;
-	return !Number.isNaN(parsed ?? NaN) ? (parsed as number) : FONT_SIZE_OPTIONS.NORMAL;
+	if (parsed !== undefined && !Number.isNaN(parsed) && Number.isFinite(parsed) && parsed > 0) {
+		return parsed as number;
+	}
+	return FONT_SIZE_OPTIONS.NORMAL;
 };
 
 const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => {

From 6827e902826cd62c5cbe7183180b3879f1f98fa9 Mon Sep 17 00:00:00 2001
From: Deepak Bhagat <deepak988088@gmail.com>
Date: Sun, 11 Jan 2026 17:47:15 +0530
Subject: [PATCH 15/15] Refactor to useSyncExternalStore and add upper bound
 validation for font size

---
 .../useResponsiveLayout.tsx                   | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
index 4911a15d88d..315b90ee6a2 100644
--- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
+++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, useSyncExternalStore } from 'react';
 import { useWindowDimensions } from 'react-native';
 
 import { FONT_SIZE_PREFERENCES_KEY } from '../../constants/keys';
@@ -36,13 +36,14 @@ export const FONT_SIZE_OPTIONS = {
 };
 
 const getFontSizeFromStorage = (): number => {
+	const MAX_FONT_SIZE = 5.0;
 	const storedNumber = userPreferences.getNumber(FONT_SIZE_PREFERENCES_KEY);
-	if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber) && Number.isFinite(storedNumber) && storedNumber > 0) {
+	if (typeof storedNumber === 'number' && !Number.isNaN(storedNumber) && Number.isFinite(storedNumber) && storedNumber > 0 && storedNumber <= MAX_FONT_SIZE) {
 		return storedNumber;
 	}
 	const storedString = userPreferences.getString(FONT_SIZE_PREFERENCES_KEY);
 	const parsed = storedString !== null ? Number(storedString) : undefined;
-	if (parsed !== undefined && !Number.isNaN(parsed) && Number.isFinite(parsed) && parsed > 0) {
+	if (parsed !== undefined && !Number.isNaN(parsed) && Number.isFinite(parsed) && parsed > 0 && parsed <= MAX_FONT_SIZE) {
 		return parsed as number;
 	}
 	return FONT_SIZE_OPTIONS.NORMAL;
@@ -51,17 +52,19 @@ const getFontSizeFromStorage = (): number => {
 const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => {
 	// `fontScale` is the current font scaling value of the device.
 	const { fontScale: systemFontScale, width, height } = useWindowDimensions();
-	const [customFontSize, setCustomFontSize] = useState(() => getFontSizeFromStorage());
 	
-	useEffect(() => {
-		const listener = initializeStorage.addOnValueChangedListener((changedKey: string) => {
-			if (changedKey === FONT_SIZE_PREFERENCES_KEY) {
-				setCustomFontSize(getFontSizeFromStorage());
-			}
-		});
-		
-		return () => listener.remove();
-	}, []);
+	const customFontSize = useSyncExternalStore(
+		(callback) => {
+			const listener = initializeStorage.addOnValueChangedListener((changedKey: string) => {
+				if (changedKey === FONT_SIZE_PREFERENCES_KEY) {
+					callback();
+				}
+			});
+			return () => listener.remove();
+		},
+		() => getFontSizeFromStorage(),
+		() => getFontSizeFromStorage()
+	);
 
 	const fontSizeMultiplier = typeof customFontSize === 'number' && !Number.isNaN(customFontSize) ? customFontSize : 1.0;
 	const fontScale = systemFontScale * fontSizeMultiplier;