diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index bab3514..d9c03e7 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -4,10 +4,11 @@ import {
   Alert,
   ScrollView,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
 } from "react-native";
+import { AppText as Text } from "@/src/components/common/AppText";
+import { useDynamicFontSize } from "@/src/hooks/useDynamicFontSize";
 
 import { sampleCourse } from "@/src/data/sampleCourse";
 import { useAppStore } from "@/src/store";
@@ -17,6 +18,7 @@ import { CourseCardSkeleton } from "@/src/components/mobile/CourseCardSkeleton";
 export default function HomeScreen() {
   const router = useRouter();
   const { isLoading, setLoading } = useAppStore();
+  const { scale } = useDynamicFontSize();
 
   const fetchHomeData = () => {
     setLoading(true);
@@ -74,7 +76,7 @@ export default function HomeScreen() {
     >
       {/* Header */}
       <View style={styles.headerSection}>
-        <Text style={styles.headerIcon}>? </Text>
+        <Text style={[styles.headerIcon, { fontSize: scale(60) }]}>? </Text>
         <Text style={styles.title}>Welcome to TeachLink</Text>
         <Text style={styles.subtitle}>
           Share and consume knowledge on the go
@@ -95,7 +97,7 @@ export default function HomeScreen() {
         accessibilityHint="Opens the course viewer with a sample lesson"
       >
         <View style={styles.buttonContent}>
-          <Text style={styles.buttonIcon}>? </Text>
+          <Text style={[styles.buttonIcon, { fontSize: scale(28) }]}>? </Text>
           <View style={styles.buttonTextContainer}>
             <Text style={styles.buttonTitle}>Start Learning</Text>
             <Text style={styles.buttonSubtitle}>Open course viewer</Text>
@@ -111,14 +113,14 @@ export default function HomeScreen() {
         accessibilityHint="Navigates to the search screen"
       >
         <View style={styles.secondaryButtonContent}>
-          <Text style={styles.secondaryIcon}>? </Text>
+          <Text style={[styles.secondaryIcon, { fontSize: scale(32) }]}>? </Text>
           <View style={styles.secondaryTextContainer}>
             <Text style={styles.secondaryTitle}>Search</Text>
             <Text style={styles.secondarySubtitle}>
               Find courses and lessons
             </Text>
           </View>
-          <Text style={styles.arrow}>{">"}</Text>
+          <Text style={[styles.arrow, { fontSize: scale(24) }]}>{">"}</Text>
         </View>
       </TouchableOpacity>
 
diff --git a/app/settings.tsx b/app/settings.tsx
index c929676..08e9c70 100644
--- a/app/settings.tsx
+++ b/app/settings.tsx
@@ -1,6 +1,7 @@
 import { useAppStore } from '@/src/store';
 import React from 'react';
-import { Switch, Text, View } from 'react-native';
+import { Switch, View } from 'react-native';
+import { AppText } from '@/src/components/common/AppText';
 
 export default function SettingsScreen() {
     const { theme, setTheme } = useAppStore();
@@ -8,14 +9,20 @@ export default function SettingsScreen() {
 
     return (
         <View className="flex-1 bg-white dark:bg-gray-900 p-4">
-            <Text className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
+            <AppText 
+                style={{ fontSize: 24 }}
+                className="font-bold text-gray-900 dark:text-white mb-6"
+            >
                 Settings
-            </Text>
+            </AppText>
 
             <View className="flex-row items-center justify-between mb-4">
-                <Text className="text-gray-900 dark:text-white text-lg">
+                <AppText 
+                    style={{ fontSize: 18 }}
+                    className="text-gray-900 dark:text-white"
+                >
                     Dark Mode
-                </Text>
+                </AppText>
                 <Switch
                     value={isDark}
                     onValueChange={(value) => setTheme(value ? 'dark' : 'light')}
diff --git a/components/themed-text.tsx b/components/themed-text.tsx
index d79d0a1..9ff5878 100644
--- a/components/themed-text.tsx
+++ b/components/themed-text.tsx
@@ -1,6 +1,7 @@
 import { StyleSheet, Text, type TextProps } from 'react-native';
 
 import { useThemeColor } from '@/hooks/use-theme-color';
+import { useDynamicFontSize } from '@/src/hooks/useDynamicFontSize';
 
 export type ThemedTextProps = TextProps & {
   lightColor?: string;
@@ -16,18 +17,33 @@ export function ThemedText({
   ...rest
 }: ThemedTextProps) {
   const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
+  const { scale } = useDynamicFontSize();
+
+  const getVariantStyle = () => {
+    switch (type) {
+      case 'title': return styles.title;
+      case 'subtitle': return styles.subtitle;
+      case 'defaultSemiBold': return styles.defaultSemiBold;
+      case 'link': return styles.link;
+      default: return styles.default;
+    }
+  };
+
+  const variantStyle = getVariantStyle();
+  const scaledStyle = {
+    ...variantStyle,
+    fontSize: scale(variantStyle.fontSize || 16),
+    lineHeight: variantStyle.lineHeight ? scale(variantStyle.lineHeight) : undefined,
+  };
 
   return (
     <Text
       style={[
         { color },
-        type === 'default' ? styles.default : undefined,
-        type === 'title' ? styles.title : undefined,
-        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
-        type === 'subtitle' ? styles.subtitle : undefined,
-        type === 'link' ? styles.link : undefined,
+        scaledStyle,
         style,
       ]}
+      allowFontScaling={false}
       {...rest}
     />
   );
diff --git a/src/components/common/AppText.tsx b/src/components/common/AppText.tsx
new file mode 100644
index 0000000..c629b9c
--- /dev/null
+++ b/src/components/common/AppText.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Text as RNText, TextProps, StyleSheet } from 'react-native';
+import { useDynamicFontSize } from '../../hooks/useDynamicFontSize';
+
+interface AppTextProps extends TextProps {
+  /**
+   * If true, the font size will NOT be scaled.
+   * Useful for elements that should remain at a fixed size regardless of system settings.
+   */
+  fixed?: boolean;
+}
+
+/**
+ * A wrapper around React Native's Text component that uses the useDynamicFontSize hook
+ * to ensure consistent scaling across the application.
+ */
+export const AppText: React.FC<AppTextProps> = ({ style, fixed = false, ...props }) => {
+  const { scale } = useDynamicFontSize();
+
+  // We flatten the style to easily extract and modify the fontSize
+  const flattenedStyle = StyleSheet.flatten(style) || {};
+  
+  const dynamicStyle = { ...flattenedStyle };
+
+  if (!fixed && flattenedStyle.fontSize) {
+    dynamicStyle.fontSize = scale(flattenedStyle.fontSize);
+    
+    // Also scale lineHeight if it exists to maintain proportions
+    if (flattenedStyle.lineHeight) {
+      dynamicStyle.lineHeight = scale(flattenedStyle.lineHeight);
+    }
+  }
+
+  return (
+    <RNText
+      {...props}
+      style={dynamicStyle}
+      // We set allowFontScaling to false because we are manually scaling
+      // via the dynamicStyle to have explicit control via our hook.
+      allowFontScaling={false}
+    />
+  );
+};
diff --git a/src/components/common/PrimaryButton.tsx b/src/components/common/PrimaryButton.tsx
index fe32fae..05960c6 100644
--- a/src/components/common/PrimaryButton.tsx
+++ b/src/components/common/PrimaryButton.tsx
@@ -9,6 +9,7 @@ import {
   StyleSheet,
 } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
+import { useDynamicFontSize } from '../../hooks/useDynamicFontSize';
 
 /**
  * Props for the PrimaryButton component
@@ -50,12 +51,28 @@ export default function PrimaryButton({
   accessibilityLabel,
 }: PrimaryButtonProps) {
   const isDisabled = loading || disabled;
+  const { scale } = useDynamicFontSize();
   const buttonLabel = accessibilityLabel ?? title;
 
   const sizeConfig = {
-    small: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8, fontSize: 14 },
-    medium: { paddingHorizontal: 24, paddingVertical: 12, borderRadius: 12, fontSize: 16 },
-    large: { paddingHorizontal: 32, paddingVertical: 16, borderRadius: 12, fontSize: 18 },
+    small: { 
+      paddingHorizontal: scale(12), 
+      paddingVertical: scale(8), 
+      borderRadius: 8, 
+      fontSize: scale(14) 
+    },
+    medium: { 
+      paddingHorizontal: scale(24), 
+      paddingVertical: scale(12), 
+      borderRadius: 12, 
+      fontSize: scale(16) 
+    },
+    large: { 
+      paddingHorizontal: scale(32), 
+      paddingVertical: scale(16), 
+      borderRadius: 12, 
+      fontSize: scale(18) 
+    },
   };
 
   const config = sizeConfig[size];
@@ -92,6 +109,7 @@ export default function PrimaryButton({
             <>
               {icon}
               <Text
+                allowFontScaling={false}
                 style={[
                   styles.buttonText,
                   { fontSize: config.fontSize, color: '#ffffff' },
@@ -135,6 +153,7 @@ export default function PrimaryButton({
           <>
             {icon}
             <Text
+              allowFontScaling={false}
               style={[
                 styles.buttonText,
                 { fontSize: config.fontSize, color: '#ffffff' },
@@ -179,6 +198,7 @@ export default function PrimaryButton({
         <>
           {icon}
           <Text
+            allowFontScaling={false}
             style={[
               styles.buttonText,
               { fontSize: config.fontSize, color: '#19c3e6' },
diff --git a/src/components/mobile/MobileCourseViewer.tsx b/src/components/mobile/MobileCourseViewer.tsx
index cd9d78e..7eaf65e 100644
--- a/src/components/mobile/MobileCourseViewer.tsx
+++ b/src/components/mobile/MobileCourseViewer.tsx
@@ -6,11 +6,12 @@ import {
   Modal,
   ScrollView,
   StyleSheet,
-  Text,
   TextInput,
   TouchableOpacity,
   View,
 } from "react-native";
+import { AppText as Text } from "../common/AppText";
+import { useDynamicFontSize } from "../../hooks/useDynamicFontSize";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useCourseProgress } from "../../hooks/useCourseProgress";
 import { RootStackParamList } from "../../navigation/types";
@@ -47,6 +48,7 @@ export default function MobileCourseViewer({
   onBack,
   navigation,
 }: MobileCourseViewerProps) {
+  const { scale } = useDynamicFontSize();
   const [viewMode, setViewMode] = useState<ViewMode>(
     initialViewMode || "lesson",
   );
@@ -393,7 +395,7 @@ export default function MobileCourseViewer({
         </View>
 
         {/* Progress Bar */}
-        <View style={styles.progressBarContainer}>
+        <View style={[styles.progressBarContainer, { height: scale(8) }]}>
           <View
             style={[styles.progressBar, { width: `${overallProgress}%` }]}
           />
diff --git a/src/components/mobile/MobileFormInput.tsx b/src/components/mobile/MobileFormInput.tsx
index cd0d74a..a363e1e 100644
--- a/src/components/mobile/MobileFormInput.tsx
+++ b/src/components/mobile/MobileFormInput.tsx
@@ -8,6 +8,8 @@ import {
   StyleSheet,
 } from 'react-native';
 import { Eye, EyeOff, AlertCircle } from 'lucide-react-native';
+import { AppText as Text } from '../common/AppText';
+import { useDynamicFontSize } from '../../hooks/useDynamicFontSize';
 
 /**
  * Props for the MobileFormInput component
@@ -48,6 +50,7 @@ export const MobileFormInput: React.FC<MobileFormInputProps> = ({
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
+  const { scale } = useDynamicFontSize();
   const isPassword = secureTextEntry === true;
 
   const borderColor = error
@@ -63,12 +66,12 @@ export const MobileFormInput: React.FC<MobileFormInputProps> = ({
   return (
     <View style={styles.container}>
       <View style={styles.labelRow}>
-        <Text style={[styles.label, { color: labelColor }]}>
+        <Text style={[styles.label, { color: labelColor, fontSize: scale(14) }]}>
           {label}
-          {required && <Text style={styles.required}> *</Text>}
+          {required && <Text style={[styles.required, { fontSize: scale(14) }]}> *</Text>}
         </Text>
         {hint && !error && (
-          <Text style={[styles.hint, { color: isDark ? '#475569' : '#94a3b8' }]}>
+          <Text style={[styles.hint, { color: isDark ? '#475569' : '#94a3b8', fontSize: scale(12) }]}>
             {hint}
           </Text>
         )}
@@ -80,7 +83,7 @@ export const MobileFormInput: React.FC<MobileFormInputProps> = ({
           {
             borderColor,
             backgroundColor: isDark ? '#1e293b' : '#fff',
-            minHeight: multiline ? 100 : 52,
+            minHeight: multiline ? scale(100) : scale(52),
           },
         ]}
       >
@@ -93,9 +96,10 @@ export const MobileFormInput: React.FC<MobileFormInputProps> = ({
             styles.input,
             {
               color: isDark ? '#f1f5f9' : '#1e293b',
-              paddingLeft: leftIcon ? 0 : 16,
+              paddingLeft: leftIcon ? 0 : scale(16),
               textAlignVertical: multiline ? 'top' : 'center',
-              paddingTop: multiline ? 14 : 0,
+              paddingTop: multiline ? scale(14) : 0,
+              fontSize: scale(15),
             },
           ]}
           placeholder={placeholder}
@@ -116,9 +120,9 @@ export const MobileFormInput: React.FC<MobileFormInputProps> = ({
             style={styles.rightIcon}
           >
             {showPassword ? (
-              <EyeOff size={20} color={isDark ? '#64748b' : '#94a3b8'} />
+              <EyeOff size={scale(20)} color={isDark ? '#64748b' : '#94a3b8'} />
             ) : (
-              <Eye size={20} color={isDark ? '#64748b' : '#94a3b8'} />
+              <Eye size={scale(20)} color={isDark ? '#64748b' : '#94a3b8'} />
             )}
           </TouchableOpacity>
         )}
@@ -126,8 +130,8 @@ export const MobileFormInput: React.FC<MobileFormInputProps> = ({
 
       {error && (
         <View style={styles.errorRow}>
-          <AlertCircle size={14} color="#ef4444" />
-          <Text style={styles.errorText}>{error}</Text>
+          <AlertCircle size={scale(14)} color="#ef4444" />
+          <Text style={[styles.errorText, { fontSize: scale(12) }]}>{error}</Text>
         </View>
       )}
     </View>
diff --git a/src/components/mobile/MobileHeader.tsx b/src/components/mobile/MobileHeader.tsx
index 1ba9672..c4694a7 100644
--- a/src/components/mobile/MobileHeader.tsx
+++ b/src/components/mobile/MobileHeader.tsx
@@ -2,9 +2,11 @@ import { DrawerNavigationProp } from '@react-navigation/drawer';
 import { useNavigation } from '@react-navigation/native';
 import { ArrowLeft, Bell, Menu } from 'lucide-react-native';
 import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { usePendingRequests } from '../../hooks/usePendingRequests';
 import { useSafeArea } from '../../hooks/useSafeArea';
+import { AppText } from '../common/AppText';
+import { useDynamicFontSize } from '../../hooks/useDynamicFontSize';
 
 /**
  * Props for the MobileHeader component
@@ -22,6 +24,7 @@ export const MobileHeader = ({ title, showBack = false, rightAction }: MobileHea
     const { top } = useSafeArea();
     const navigation = useNavigation<DrawerNavigationProp<any>>();
     const pendingCount = usePendingRequests();
+    const { scale } = useDynamicFontSize();
 
     return (
         <View
@@ -37,7 +40,7 @@ export const MobileHeader = ({ title, showBack = false, rightAction }: MobileHea
                         accessibilityRole="button"
                         accessibilityLabel="Go back"
                     >
-                        <ArrowLeft color="#1F2937" size={24} />
+                        <ArrowLeft color="#1F2937" size={scale(24)} />
                     </TouchableOpacity>
                 ) : (
                     <TouchableOpacity 
@@ -46,10 +49,15 @@ export const MobileHeader = ({ title, showBack = false, rightAction }: MobileHea
                         accessibilityRole="button"
                         accessibilityLabel="Open navigation drawer"
                     >
-                        <Menu color="#1F2937" size={24} />
+                        <Menu color="#1F2937" size={scale(24)} />
                     </TouchableOpacity>
                 )}
-                <Text className="text-lg font-bold text-gray-900">{title}</Text>
+                <AppText 
+                    style={{ fontSize: scale(18) }}
+                    className="font-bold text-gray-900"
+                >
+                    {title}
+                </AppText>
             </View>
 
             <View className="flex-row items-center">
@@ -60,13 +68,16 @@ export const MobileHeader = ({ title, showBack = false, rightAction }: MobileHea
                             accessibilityRole="button"
                             accessibilityLabel="View notifications"
                         >
-                            <Bell color="#4B5563" size={20} />
+                            <Bell color="#4B5563" size={scale(20)} />
                         </TouchableOpacity>
                         {pendingCount > 0 && (
                             <View className="absolute -top-1 -right-1 bg-red-500 rounded-full min-w-[18px] h-[18px] items-center justify-center">
-                                <Text className="text-white text-xs font-bold">
+                                <AppText 
+                                    style={{ fontSize: 12 }}
+                                    className="text-white font-bold"
+                                >
                                     {pendingCount > 99 ? '99+' : pendingCount}
-                                </Text>
+                                </AppText>
                             </View>
                         )}
                     </View>
diff --git a/src/components/mobile/MobileProfile.tsx b/src/components/mobile/MobileProfile.tsx
index da88553..53584cd 100644
--- a/src/components/mobile/MobileProfile.tsx
+++ b/src/components/mobile/MobileProfile.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import {
   View,
-  Text,
   ScrollView,
   TouchableOpacity,
   Image,
@@ -9,6 +8,7 @@ import {
   SafeAreaView,
   ActivityIndicator,
 } from 'react-native';
+import { AppText as Text } from '../common/AppText';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Skeleton } from '../ui/Skeleton';
 import {
@@ -236,12 +236,15 @@ interface MobileProfileProps {
   isLoading?: boolean;
 }
 
+import { useDynamicFontSize } from '../../hooks/useDynamicFontSize';
+
 export const MobileProfile: React.FC<MobileProfileProps> = ({
   userId: _userId,
   isDark = false,
   isLoading = false,
 }) => {
   const [profile, setProfile] = useState<ProfileData>(MOCK_PROFILE);
+  const { scale } = useDynamicFontSize();
 
   if (isLoading) {
     const bg = isDark ? '#0f172a' : '#f8fafc';
diff --git a/src/components/mobile/MobileSearch.tsx b/src/components/mobile/MobileSearch.tsx
index 6feaf3f..b5bbd20 100644
--- a/src/components/mobile/MobileSearch.tsx
+++ b/src/components/mobile/MobileSearch.tsx
@@ -9,6 +9,8 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
+import { AppText as Text } from '../common/AppText';
+import { useDynamicFontSize } from '../../hooks/useDynamicFontSize';
 import { Search, SlidersHorizontal } from 'lucide-react-native';
 import { VoiceSearch } from './VoiceSearch';
 import { SearchHistory } from './SearchHistory';
@@ -94,6 +96,7 @@ export function MobileSearch({
   const [filterValues, setFilterValues] = useState<FilterValues>({});
   const [results, setResults] = useState<SearchResultItem[]>([]);
   const [hasSearched, setHasSearched] = useState(false);
+  const { scale } = useDynamicFontSize();
 
   const suggestions = useMemo(() => {
     const q = query.trim().toLowerCase();
@@ -167,9 +170,9 @@ export function MobileSearch({
     >
       <View style={styles.searchRow}>
         <View style={styles.inputWrap}>
-          <Search size={20} color="#9CA3AF" style={styles.searchIcon} />
+          <Search size={scale(20)} color="#9CA3AF" style={styles.searchIcon} />
           <TextInput
-            style={styles.input}
+            style={[styles.input, { fontSize: scale(16) }]}
             placeholder={placeholder}
             placeholderTextColor="#9CA3AF"
             value={query}
@@ -189,7 +192,7 @@ export function MobileSearch({
             onPress={() => setFilterSheetVisible(true)}
             style={[styles.filterBtn, Object.keys(filterValues).length > 0 && styles.filterBtnActive]}
           >
-            <SlidersHorizontal size={20} color={Object.keys(filterValues).length > 0 ? '#fff' : '#6B7280'} />
+            <SlidersHorizontal size={scale(20)} color={Object.keys(filterValues).length > 0 ? '#fff' : '#6B7280'} />
           </TouchableOpacity>
         </View>
       </View>
@@ -209,7 +212,7 @@ export function MobileSearch({
               style={styles.suggestItem}
               onPress={() => handleSelectSuggestion(s)}
             >
-              <Search size={16} color="#9CA3AF" />
+              <Search size={scale(16)} color="#9CA3AF" />
               <Text style={styles.suggestText}>{s}</Text>
             </TouchableOpacity>
           ))}
diff --git a/src/components/mobile/MobileSettings.tsx b/src/components/mobile/MobileSettings.tsx
index 9f16842..189b9ea 100644
--- a/src/components/mobile/MobileSettings.tsx
+++ b/src/components/mobile/MobileSettings.tsx
@@ -34,6 +34,9 @@ import { NativeToggle } from './NativeToggle';
 import { SettingsPicker, PickerOption } from './SettingsPicker';
 import { SettingsSection } from './SettingsSection';
 
+import { AppText } from '../common/AppText';
+import { useDynamicFontSize } from '../../hooks/useDynamicFontSize';
+
 // ─── Shared row ────────────────────────────────────────────────────────────────
 
 /**
@@ -66,6 +69,8 @@ function SettingRow({
   destructive = false,
 }: SettingRowProps) {
   const Row = onPress ? TouchableOpacity : View;
+  const { scale } = useDynamicFontSize();
+
   return (
     <Row
       activeOpacity={0.7}
@@ -76,20 +81,24 @@ function SettingRow({
         {icon}
       </View>
       <View className="flex-1">
-        <Text
-          className={`text-[15px] font-medium ${
+        <AppText
+          style={{ fontSize: 15 }}
+          className={`font-medium ${
             destructive ? 'text-red-500' : 'text-gray-900 dark:text-white'
           }`}
         >
           {label}
-        </Text>
+        </AppText>
         {description ? (
-          <Text className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+          <AppText 
+            style={{ fontSize: 12 }}
+            className="text-gray-500 dark:text-gray-400 mt-0.5"
+          >
             {description}
-          </Text>
+          </AppText>
         ) : null}
       </View>
-      {right ?? (onPress ? <ChevronRight size={16} color="#9CA3AF" /> : null)}
+      {right ?? (onPress ? <ChevronRight size={scale(16)} color="#9CA3AF" /> : null)}
     </Row>
   );
 }
@@ -207,7 +216,7 @@ export function MobileSettings({
   return (
     <ScrollView
       className="flex-1 bg-gray-50 dark:bg-gray-900"
-      contentContainerStyle={{ paddingTop: 20, paddingBottom: 40 }}
+      contentContainerStyle={{ paddingTop: scale(20), paddingBottom: scale(40) }}
       showsVerticalScrollIndicator={false}
     >
       {/* ── Account ─────────────────────────────────────────── */}
@@ -242,13 +251,13 @@ export function MobileSettings({
         />
         <SettingRow
           iconBg="bg-blue-100 dark:bg-blue-900/50"
-          icon={<User size={18} color="#3b82f6" />}
+          icon={<User size={scale(18)} color="#3b82f6" />}
           label="Change Password"
           onPress={onChangePassword}
         />
         <SettingRow
           iconBg="bg-purple-100 dark:bg-purple-900/50"
-          icon={<Shield size={18} color="#8b5cf6" />}
+          icon={<Shield size={scale(18)} color="#8b5cf6" />}
           label="Linked Accounts"
           onPress={onLinkedAccounts}
         />
@@ -497,7 +506,7 @@ export function MobileSettings({
       <SettingsSection title="Account Actions">
         <SettingRow
           iconBg="bg-red-100 dark:bg-red-900/50"
-          icon={<LogOut size={18} color="#ef4444" />}
+          icon={<LogOut size={scale(18)} color="#ef4444" />}
           label="Sign Out"
           onPress={handleSignOut}
           destructive
diff --git a/src/components/mobile/SettingsSection.tsx b/src/components/mobile/SettingsSection.tsx
index 477f88f..06db799 100644
--- a/src/components/mobile/SettingsSection.tsx
+++ b/src/components/mobile/SettingsSection.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import { AppText } from '../common/AppText';
 
 interface SettingsSectionProps {
   /** Section header label displayed above the card (uppercase). */
@@ -27,9 +28,12 @@ export function SettingsSection({ title, footer, children }: SettingsSectionProp
   return (
     <View className="mb-6">
       {title ? (
-        <Text className="px-4 pb-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-widest">
+        <AppText 
+          style={{ fontSize: 12 }}
+          className="px-4 pb-2 font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-widest"
+        >
           {title}
-        </Text>
+        </AppText>
       ) : null}
 
       <View className="bg-white dark:bg-gray-800 mx-4 rounded-2xl overflow-hidden">
@@ -44,9 +48,12 @@ export function SettingsSection({ title, footer, children }: SettingsSectionProp
       </View>
 
       {footer ? (
-        <Text className="px-4 pt-2 text-xs text-gray-400 dark:text-gray-500 leading-4">
+        <AppText 
+          style={{ fontSize: 12, lineHeight: 16 }}
+          className="px-4 pt-2 text-gray-400 dark:text-gray-500"
+        >
           {footer}
-        </Text>
+        </AppText>
       ) : null}
     </View>
   );
diff --git a/src/hooks/useDynamicFontSize.ts b/src/hooks/useDynamicFontSize.ts
index 3efca39..426d9f7 100644
--- a/src/hooks/useDynamicFontSize.ts
+++ b/src/hooks/useDynamicFontSize.ts
@@ -1,25 +1,17 @@
-import { useState, useEffect } from 'react';
-import { PixelRatio } from 'react-native';
+import { useWindowDimensions } from 'react-native';
 
 /**
  * Hook to track and react to dynamic font scaling changes.
- * Returns the current font scale factor.
+ * Returns the current font scale factor and a scaling function.
+ * Uses useWindowDimensions to automatically update when system settings change.
  */
 export const useDynamicFontSize = () => {
-  const [fontScale, setFontScale] = useState(PixelRatio.getFontScale());
-
-  useEffect(() => {
-    // Note: PixelRatio.getFontScale() doesn't have an event listener in basic RN,
-    // but we can check it on mount or when the window dimensions change.
-    // In most cases, users don't change this while the app is running.
-    const currentScale = PixelRatio.getFontScale();
-    if (currentScale !== fontScale) {
-      setFontScale(currentScale);
-    }
-  }, []);
+  const { fontScale } = useWindowDimensions();
 
   /**
    * Scales a given size based on the current font scale.
+   * Useful for font sizes, but also for padding, margin, etc.
+   * that should scale with the text.
    */
   const scale = (size: number) => size * fontScale;
 
diff --git a/src/pages/mobile/MobileLogin.tsx b/src/pages/mobile/MobileLogin.tsx
index 7ac6778..5f11a56 100644
--- a/src/pages/mobile/MobileLogin.tsx
+++ b/src/pages/mobile/MobileLogin.tsx
@@ -26,6 +26,7 @@ import {
   AlertCircle,
 } from 'lucide-react-native';
 import { useBiometricAuth } from '../../hooks/useBiometricAuth';
+import { useDynamicFontSize } from '../../hooks/useDynamicFontSize';
 import { BiometricInlineButton, BiometricPrompt } from '../../components/mobile/BiometricPrompt';
 import mobileAuthService, { AuthResult } from '../../services/mobileAuth';
 import * as secureStorage from '../../services/secureStorage';
@@ -70,6 +71,9 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
     clearError: clearBiometricError,
   } = useBiometricAuth();
 
+  const { scale } = useDynamicFontSize();
+  const styles = createStyles(scale, isDark);
+
   // ── Load remembered email on mount ───────────────────────────────────────
   useEffect(() => {
     async function loadRemembered() {
@@ -186,10 +190,10 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
               end={{ x: 1, y: 1 }}
               style={styles.logoGradient}
             >
-              <BookOpen size={30} color="#fff" />
+              <BookOpen size={scale(30)} color="#fff" />
             </LinearGradient>
-            <Text style={[styles.appName, { color: textPrimary }]}>TeachLink</Text>
-            <Text style={[styles.tagline, { color: textSecondary }]}>
+            <Text allowFontScaling={false} style={[styles.appName, { color: textPrimary }]}>TeachLink</Text>
+            <Text allowFontScaling={false} style={[styles.tagline, { color: textSecondary }]}>
               Sign in to continue learning
             </Text>
           </View>
@@ -199,22 +203,23 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
             {/* Error banner */}
             {error && (
               <View style={styles.errorBanner}>
-                <AlertCircle size={14} color="#dc2626" />
-                <Text style={styles.errorText}>{error}</Text>
+                <AlertCircle size={scale(14)} color="#dc2626" />
+                <Text allowFontScaling={false} style={styles.errorText}>{error}</Text>
               </View>
             )}
 
             {/* Email */}
             <View style={styles.fieldWrap}>
-              <Text style={[styles.label, { color: textSecondary }]}>Email</Text>
+              <Text allowFontScaling={false} style={[styles.label, { color: textSecondary }]}>Email</Text>
               <View
                 style={[
                   styles.inputRow,
                   { borderColor: emailBorder, backgroundColor: isDark ? '#0f172a' : '#f8fafc' },
                 ]}
               >
-                <Mail size={18} color={emailFocused ? accentColor : textSecondary} />
+                <Mail size={scale(18)} color={emailFocused ? accentColor : textSecondary} />
                 <TextInput
+                  allowFontScaling={false}
                   style={[styles.input, { color: textPrimary }]}
                   value={email}
                   onChangeText={(v) => { setEmail(v); setError(null); }}
@@ -234,10 +239,10 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
             {/* Password */}
             <View style={styles.fieldWrap}>
               <View style={styles.labelRow}>
-                <Text style={[styles.label, { color: textSecondary }]}>Password</Text>
+                <Text allowFontScaling={false} style={[styles.label, { color: textSecondary }]}>Password</Text>
                 {onForgotPassword && (
                   <TouchableOpacity onPress={onForgotPassword}>
-                    <Text style={[styles.forgotLink, { color: accentColor }]}>
+                    <Text allowFontScaling={false} style={[styles.forgotLink, { color: accentColor }]}>
                       Forgot password?
                     </Text>
                   </TouchableOpacity>
@@ -249,8 +254,9 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
                   { borderColor: passwordBorder, backgroundColor: isDark ? '#0f172a' : '#f8fafc' },
                 ]}
               >
-                <Lock size={18} color={passwordFocused ? accentColor : textSecondary} />
+                <Lock size={scale(18)} color={passwordFocused ? accentColor : textSecondary} />
                 <TextInput
+                  allowFontScaling={false}
                   ref={passwordRef}
                   style={[styles.input, { color: textPrimary }]}
                   value={password}
@@ -269,9 +275,9 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
                   hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                 >
                   {showPassword ? (
-                    <EyeOff size={18} color={textSecondary} />
+                    <EyeOff size={scale(18)} color={textSecondary} />
                   ) : (
-                    <Eye size={18} color={textSecondary} />
+                    <Eye size={scale(18)} color={textSecondary} />
                   )}
                 </TouchableOpacity>
               </View>
@@ -286,7 +292,7 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
                 thumbColor="#fff"
                 ios_backgroundColor={borderColor}
               />
-              <Text style={[styles.rememberLabel, { color: textSecondary }]}>
+              <Text allowFontScaling={false} style={[styles.rememberLabel, { color: textSecondary }]}>
                 Remember me
               </Text>
             </View>
@@ -311,8 +317,8 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
                   <ActivityIndicator color="#fff" />
                 ) : (
                   <>
-                    <LogIn size={18} color="#fff" />
-                    <Text style={styles.loginBtnText}>Sign In</Text>
+                    <LogIn size={scale(18)} color="#fff" />
+                    <Text allowFontScaling={false} style={styles.loginBtnText}>Sign In</Text>
                   </>
                 )}
               </LinearGradient>
@@ -323,7 +329,7 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
               <>
                 <View style={styles.dividerRow}>
                   <View style={[styles.divider, { backgroundColor: borderColor }]} />
-                  <Text style={[styles.dividerText, { color: textSecondary }]}>or</Text>
+                  <Text allowFontScaling={false} style={[styles.dividerText, { color: textSecondary }]}>or</Text>
                   <View style={[styles.divider, { backgroundColor: borderColor }]} />
                 </View>
 
@@ -342,8 +348,8 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
                     onPress={() => handleSocialLogin('google')}
                     activeOpacity={0.7}
                   >
-                    <Chrome size={22} color="#4285F4" />
-                    <Text style={[styles.socialBtnText, { color: textSecondary }]}>Google</Text>
+                    <Chrome size={scale(22)} color="#4285F4" />
+                    <Text allowFontScaling={false} style={[styles.socialBtnText, { color: textSecondary }]}>Google</Text>
                   </TouchableOpacity>
 
                   {Platform.OS === 'ios' && (
@@ -352,8 +358,8 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
                       onPress={() => handleSocialLogin('apple')}
                       activeOpacity={0.7}
                     >
-                      <Apple size={22} color={isDark ? '#f1f5f9' : '#1e293b'} />
-                      <Text style={[styles.socialBtnText, { color: textSecondary }]}>Apple</Text>
+                      <Apple size={scale(22)} color={isDark ? '#f1f5f9' : '#1e293b'} />
+                      <Text allowFontScaling={false} style={[styles.socialBtnText, { color: textSecondary }]}>Apple</Text>
                     </TouchableOpacity>
                   )}
                 </View>
@@ -364,11 +370,11 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
           {/* ── Register link ── */}
           {onRegister && (
             <View style={styles.registerRow}>
-              <Text style={[styles.registerText, { color: textSecondary }]}>
+              <Text allowFontScaling={false} style={[styles.registerText, { color: textSecondary }]}>
                 Don't have an account?
               </Text>
               <TouchableOpacity onPress={onRegister}>
-                <Text style={[styles.registerLink, { color: accentColor }]}>
+                <Text allowFontScaling={false} style={[styles.registerLink, { color: accentColor }]}>
                   {' '}Sign up
                 </Text>
               </TouchableOpacity>
@@ -394,7 +400,9 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 
-const styles = StyleSheet.create({
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const createStyles = (scale: (size: number) => number, isDark: boolean) => StyleSheet.create({
   safe: {
     flex: 1,
   },
@@ -403,69 +411,69 @@ const styles = StyleSheet.create({
   },
   scroll: {
     flexGrow: 1,
-    paddingHorizontal: 20,
-    paddingBottom: 40,
+    paddingHorizontal: scale(20),
+    paddingBottom: scale(40),
     justifyContent: 'center',
   },
   // Header
   header: {
     alignItems: 'center',
-    paddingTop: 32,
-    paddingBottom: 28,
-    gap: 10,
+    paddingTop: scale(32),
+    paddingBottom: scale(28),
+    gap: scale(10),
   },
   logoGradient: {
-    width: 68,
-    height: 68,
-    borderRadius: 20,
+    width: scale(68),
+    height: scale(68),
+    borderRadius: scale(20),
     justifyContent: 'center',
     alignItems: 'center',
     shadowColor: '#20afe7',
-    shadowOffset: { width: 0, height: 8 },
+    shadowOffset: { width: 0, height: scale(8) },
     shadowOpacity: 0.35,
-    shadowRadius: 16,
+    shadowRadius: scale(16),
     elevation: 10,
   },
   appName: {
-    fontSize: 28,
+    fontSize: scale(28),
     fontWeight: '900',
     letterSpacing: -0.5,
   },
   tagline: {
-    fontSize: 14,
+    fontSize: scale(14),
   },
   // Card
   card: {
-    borderRadius: 20,
-    padding: 22,
+    borderRadius: scale(20),
+    padding: scale(22),
     borderWidth: 1,
-    gap: 4,
+    gap: scale(4),
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
+    shadowOffset: { width: 0, height: scale(4) },
     shadowOpacity: 0.07,
-    shadowRadius: 16,
+    shadowRadius: scale(16),
     elevation: 4,
   },
   errorBanner: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 8,
+    gap: scale(8),
     backgroundColor: '#fee2e2',
-    borderRadius: 10,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    marginBottom: 4,
+    borderRadius: scale(10),
+    paddingHorizontal: scale(14),
+    paddingVertical: scale(10),
+    marginBottom: scale(4),
   },
   errorText: {
     color: '#dc2626',
-    fontSize: 13,
+    fontSize: scale(13),
     fontWeight: '500',
     flex: 1,
   },
   // Fields
   fieldWrap: {
-    marginBottom: 12,
-    gap: 6,
+    marginBottom: scale(12),
+    gap: scale(6),
   },
   labelRow: {
     flexDirection: 'row',
@@ -473,89 +481,89 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    fontSize: 13,
+    fontSize: scale(13),
     fontWeight: '600',
   },
   forgotLink: {
-    fontSize: 13,
+    fontSize: scale(13),
     fontWeight: '600',
   },
   inputRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 10,
+    gap: scale(10),
     borderWidth: 1.5,
-    borderRadius: 12,
-    paddingHorizontal: 14,
-    paddingVertical: Platform.OS === 'ios' ? 13 : 10,
+    borderRadius: scale(12),
+    paddingHorizontal: scale(14),
+    paddingVertical: Platform.OS === 'ios' ? scale(13) : scale(10),
   },
   input: {
     flex: 1,
-    fontSize: 15,
+    fontSize: scale(15),
     paddingVertical: 0,
   },
   // Remember Me
   rememberRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 10,
-    paddingVertical: 4,
-    marginBottom: 4,
+    gap: scale(10),
+    paddingVertical: scale(4),
+    marginBottom: scale(4),
   },
   rememberLabel: {
-    fontSize: 14,
+    fontSize: scale(14),
     fontWeight: '500',
   },
   // Login button
   loginBtn: {
-    borderRadius: 14,
+    borderRadius: scale(14),
     overflow: 'hidden',
-    marginTop: 6,
+    marginTop: scale(6),
   },
   loginBtnGradient: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 8,
-    paddingVertical: 15,
+    gap: scale(8),
+    paddingVertical: scale(15),
   },
   loginBtnText: {
     color: '#fff',
-    fontSize: 16,
+    fontSize: scale(16),
     fontWeight: '700',
   },
   // Divider
   dividerRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 10,
-    marginVertical: 8,
+    gap: scale(10),
+    marginVertical: scale(8),
   },
   divider: {
     flex: 1,
     height: 1,
   },
   dividerText: {
-    fontSize: 13,
+    fontSize: scale(13),
     fontWeight: '500',
   },
   // Alt auth row
   altRow: {
     flexDirection: 'row',
-    gap: 10,
+    gap: scale(10),
   },
   socialBtn: {
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 6,
-    paddingVertical: 14,
-    borderRadius: 14,
+    gap: scale(6),
+    paddingVertical: scale(14),
+    borderRadius: scale(14),
     borderWidth: 1.5,
   },
   socialBtnText: {
-    fontSize: 12,
+    fontSize: scale(12),
     fontWeight: '600',
   },
   // Register
@@ -563,13 +571,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: 20,
+    marginTop: scale(20),
   },
   registerText: {
-    fontSize: 14,
+    fontSize: scale(14),
   },
   registerLink: {
-    fontSize: 14,
+    fontSize: scale(14),
     fontWeight: '700',
   },
 });
diff --git a/src/pages/mobile/PaymentHistory.tsx b/src/pages/mobile/PaymentHistory.tsx
index 71d02eb..7158270 100644
--- a/src/pages/mobile/PaymentHistory.tsx
+++ b/src/pages/mobile/PaymentHistory.tsx
@@ -10,6 +10,8 @@ import {
   ActivityIndicator,
   RefreshControl,
 } from 'react-native';
+import { AppText as Text } from '../../components/common/AppText';
+import { useDynamicFontSize } from '../../hooks/useDynamicFontSize';
 import { LinearGradient } from 'expo-linear-gradient';
 import {
   ArrowLeft,
@@ -73,6 +75,9 @@ const STATUS_CONFIG: Record<
   },
 };
 
+// ... inside component, use scale(14) for these icons if needed, but since they are constants,
+// we'll handle them inside the render.
+
 // ─── Component ────────────────────────────────────────────────────────────────
 
 interface PaymentHistoryProps {
@@ -84,6 +89,7 @@ export const PaymentHistory: React.FC<PaymentHistoryProps> = ({
   isDark = false,
   onBack,
 }) => {
+  const { scale } = useDynamicFontSize();
   const {
     purchaseHistory,
     currentTier,
@@ -299,6 +305,7 @@ export const PaymentHistory: React.FC<PaymentHistoryProps> = ({
 
   const renderTransaction = (record: PurchaseRecord) => {
     const statusCfg = STATUS_CONFIG[record.status];
+    const statusIcon = React.cloneElement(statusCfg.icon as React.ReactElement, { size: scale(14) });
 
     return (
       <View
@@ -356,7 +363,7 @@ export const PaymentHistory: React.FC<PaymentHistoryProps> = ({
             {mobilePaymentsService.formatPrice(record.amount, record.currency)}
           </Text>
           <View style={[styles.statusBadge, { backgroundColor: statusCfg.bg }]}>
-            {statusCfg.icon}
+            {statusIcon}
             <Text style={[styles.statusText, { color: statusCfg.color }]}>
               {statusCfg.label}
             </Text>
@@ -392,10 +399,10 @@ export const PaymentHistory: React.FC<PaymentHistoryProps> = ({
       <View style={[styles.header, { borderBottomColor: borderColor }]}>
         {onBack && (
           <TouchableOpacity onPress={onBack} style={styles.backBtn}>
-            <ArrowLeft size={22} color={textPrimary} />
+            <ArrowLeft size={scale(22)} color={textPrimary} />
           </TouchableOpacity>
         )}
-        <Text style={[styles.headerTitle, { color: textPrimary }]}>
+        <Text style={[styles.headerTitle, { color: textPrimary, fontSize: scale(18) }]}>
           Payment History
         </Text>
         <TouchableOpacity
@@ -406,7 +413,7 @@ export const PaymentHistory: React.FC<PaymentHistoryProps> = ({
           {isRestoring ? (
             <ActivityIndicator size="small" color="#19c3e6" />
           ) : (
-            <RefreshCw size={18} color="#19c3e6" />
+            <RefreshCw size={scale(18)} color="#19c3e6" />
           )}
         </TouchableOpacity>
       </View>
diff --git a/src/pages/mobile/Settings.tsx b/src/pages/mobile/Settings.tsx
index d63693f..663abac 100644
--- a/src/pages/mobile/Settings.tsx
+++ b/src/pages/mobile/Settings.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StatusBar } from 'react-native';
+import { View, TouchableOpacity, StatusBar } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { ArrowLeft, Settings as SettingsIcon } from 'lucide-react-native';
 import { useAppStore } from '../../store';
 import { MobileSettings } from '../../components/mobile/MobileSettings';
+import { AppText } from '../../components/common/AppText';
+import { useDynamicFontSize } from '../../hooks/useDynamicFontSize';
 
 interface SettingsPageProps {
   /** Callback for the back-navigation button in the header. */
@@ -29,6 +31,7 @@ export default function SettingsPage({
 }: SettingsPageProps) {
   const { theme } = useAppStore();
   const isDark = theme === 'dark';
+  const { scale } = useDynamicFontSize();
 
   return (
     <SafeAreaView className="flex-1 bg-gray-50 dark:bg-gray-900" edges={['top']}>
@@ -47,21 +50,27 @@ export default function SettingsPage({
             className="w-9 h-9 items-center justify-center rounded-full bg-white dark:bg-gray-800 mr-3"
             hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
           >
-            <ArrowLeft size={20} color={isDark ? '#e5e7eb' : '#374151'} />
+            <ArrowLeft size={scale(20)} color={isDark ? '#e5e7eb' : '#374151'} />
           </TouchableOpacity>
         ) : (
           <View className="w-9 h-9 items-center justify-center rounded-full bg-white dark:bg-gray-800 mr-3">
-            <SettingsIcon size={20} color={isDark ? '#19c3e6' : '#19c3e6'} />
+            <SettingsIcon size={scale(20)} color={isDark ? '#19c3e6' : '#19c3e6'} />
           </View>
         )}
 
         <View className="flex-1">
-          <Text className="text-xl font-bold text-gray-900 dark:text-white">
+          <AppText 
+            style={{ fontSize: 20 }}
+            className="font-bold text-gray-900 dark:text-white"
+          >
             Settings
-          </Text>
-          <Text className="text-xs text-gray-500 dark:text-gray-400">
+          </AppText>
+          <AppText 
+            style={{ fontSize: 12 }}
+            className="text-gray-500 dark:text-gray-400"
+          >
             Manage your account &amp; preferences
-          </Text>
+          </AppText>
         </View>
       </View>
 
diff --git a/tsconfig.json b/tsconfig.json
index 1280642..977bc5c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,8 @@
     "strict": true,
     "skipLibCheck": true,
     "jsx": "react-native",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
     "lib": ["ES2015", "ES2017", "DOM"],
     "paths": {