diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index d8ce2b7..ec58eb2 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -2,11 +2,11 @@ import { useRouter } from 'expo-router';
 import { useEffect } from 'react';
 import { Alert, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 
-import { CourseCardSkeleton, Skeleton, AppText as Text } from '@/src/components';
-import { sampleCourse } from '@/src/data/sampleCourse';
-import { useDynamicFontSize, useAnalytics } from '@/src/hooks';
-import { useAppStore } from '@/src/store';
-import { AnalyticsEvent, ScreenName } from '@/src/utils/trackingEvents';
+import { CourseCardSkeleton, Skeleton, AppText as Text } from '@/components';
+import { sampleCourse } from '@/data/sampleCourse';
+import { useDynamicFontSize, useAnalytics } from '@/hooks';
+import { useAppStore } from '@/store';
+import { AnalyticsEvent, ScreenName } from '@/utils/trackingEvents';
 
 export default function HomeScreen() {
   const router = useRouter();
@@ -71,6 +71,7 @@ export default function HomeScreen() {
       className="flex-1 bg-gray-50 dark:bg-slate-800"
       contentContainerStyle={styles.scrollContent}
       showsVerticalScrollIndicator={false}
+      removeClippedSubviews={true}
     >
       {/* Header */}
       <View style={styles.headerSection}>
diff --git a/src/components/grid/AdvancedDataGrid.tsx b/src/components/grid/AdvancedDataGrid.tsx
index 49fa2e5..370a9e5 100644
--- a/src/components/grid/AdvancedDataGrid.tsx
+++ b/src/components/grid/AdvancedDataGrid.tsx
@@ -142,7 +142,7 @@ export const AdvancedDataGrid = <T extends GridRow = GridRow>({
         />
 
         {/* ── Scrollable grid area ─────────────────────────────────────────── */}
-        <ScrollView horizontal showsHorizontalScrollIndicator style={styles.horizontalScroll}>
+        <ScrollView horizontal showsHorizontalScrollIndicator style={styles.horizontalScroll} removeClippedSubviews={true}>
           <View style={{ width: totalWidth }}>
             {/* Column headers */}
             <HeaderRow
diff --git a/src/components/grid/GridFiltering.tsx b/src/components/grid/GridFiltering.tsx
index 0466dc9..f284a5b 100644
--- a/src/components/grid/GridFiltering.tsx
+++ b/src/components/grid/GridFiltering.tsx
@@ -51,6 +51,7 @@ export const GridFiltering = <T extends GridRow = GridRow>({
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.row}
         keyboardShouldPersistTaps="handled"
+        removeClippedSubviews={true}
       >
         {filterableColumns.map(col => {
           const currentValue = getFilterValue(col.key);
diff --git a/src/components/mobile/AchievementBadges.tsx b/src/components/mobile/AchievementBadges.tsx
index 462ee03..96437aa 100644
--- a/src/components/mobile/AchievementBadges.tsx
+++ b/src/components/mobile/AchievementBadges.tsx
@@ -199,6 +199,7 @@ export const AchievementBadges: React.FC<AchievementBadgesProps> = ({
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={styles.scrollContent}
           accessibilityLabel="Horizontal achievements list"
+          removeClippedSubviews={true}
         >
           {achievements.map(renderBadge)}
         </ScrollView>
diff --git a/src/components/mobile/BookmarkList.tsx b/src/components/mobile/BookmarkList.tsx
index 431fd23..bd205c6 100644
--- a/src/components/mobile/BookmarkList.tsx
+++ b/src/components/mobile/BookmarkList.tsx
@@ -26,7 +26,7 @@ export const BookmarkList = () => {
   }
 
   return (
-    <ScrollView contentContainerStyle={styles.list}>
+    <ScrollView contentContainerStyle={styles.list} removeClippedSubviews={true}>
       {bookmarks.map(item => (
         <SwipeableRow
           key={item.itemId}
diff --git a/src/components/mobile/ConnectionManager.tsx b/src/components/mobile/ConnectionManager.tsx
index a9272d4..867e0a8 100644
--- a/src/components/mobile/ConnectionManager.tsx
+++ b/src/components/mobile/ConnectionManager.tsx
@@ -63,6 +63,7 @@ export const ConnectionManager: React.FC<ConnectionManagerProps> = ({
           data={connections}
           renderItem={renderConnectionItem}
           keyExtractor={item => item.id}
+          removeClippedSubviews={true}
           style={styles.list}
         />
       ) : (
diff --git a/src/components/mobile/DownloadQueue.tsx b/src/components/mobile/DownloadQueue.tsx
index 1834f73..ae6ae41 100644
--- a/src/components/mobile/DownloadQueue.tsx
+++ b/src/components/mobile/DownloadQueue.tsx
@@ -55,6 +55,7 @@ export function DownloadQueue() {
       data={tasks}
       keyExtractor={item => item.id}
       renderItem={renderItem}
+      removeClippedSubviews={true}
       contentContainerStyle={{ paddingVertical: 8 }}
       ListHeaderComponent={() => (
         <AppText className="px-4 py-2 text-xs font-bold uppercase tracking-wider text-gray-400">
diff --git a/src/components/mobile/FilterSheet.tsx b/src/components/mobile/FilterSheet.tsx
index e80f565..a1ee9c2 100644
--- a/src/components/mobile/FilterSheet.tsx
+++ b/src/components/mobile/FilterSheet.tsx
@@ -154,6 +154,7 @@ export function FilterSheet({
             contentContainerStyle={styles.scrollContent}
             showsVerticalScrollIndicator={false}
             keyboardShouldPersistTaps="handled"
+            removeClippedSubviews={true}
           >
             {filters.map(field => (
               <FilterSection
diff --git a/src/components/mobile/LessonCarousel.tsx b/src/components/mobile/LessonCarousel.tsx
index d7d9ef4..353c4c5 100644
--- a/src/components/mobile/LessonCarousel.tsx
+++ b/src/components/mobile/LessonCarousel.tsx
@@ -206,6 +206,7 @@ export default function LessonCarousel({
         ref={scrollViewRef}
         horizontal
         pagingEnabled
+        removeClippedSubviews={true}
         showsHorizontalScrollIndicator={false}
         onScroll={handleScroll}
         onMomentumScrollEnd={handleMomentumScrollEnd}
@@ -221,6 +222,7 @@ export default function LessonCarousel({
               style={styles.lessonScrollView}
               contentContainerStyle={styles.lessonContent}
               showsVerticalScrollIndicator={true}
+              removeClippedSubviews={true}
             >
               {renderLessonContent(lesson)}
             </ScrollView>
diff --git a/src/components/mobile/MobileCourseViewer.tsx b/src/components/mobile/MobileCourseViewer.tsx
index 5fd27c6..30d6a43 100644
--- a/src/components/mobile/MobileCourseViewer.tsx
+++ b/src/components/mobile/MobileCourseViewer.tsx
@@ -284,7 +284,7 @@ export default function MobileCourseViewer({
 
       return (
         <View style={styles.lessonContentWrapper}>
-          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false} removeClippedSubviews={true}>
             {/* Lesson Content */}
             <View style={styles.lessonSection}>
               <Text style={styles.lessonText}>{lesson.content}</Text>
diff --git a/src/components/mobile/MobileProfile.tsx b/src/components/mobile/MobileProfile.tsx
index 70d75f9..aac9801 100644
--- a/src/components/mobile/MobileProfile.tsx
+++ b/src/components/mobile/MobileProfile.tsx
@@ -265,7 +265,7 @@ export const MobileProfile: React.FC<MobileProfileProps> = ({
 
     return (
       <SafeAreaView style={[styles.safe, { backgroundColor: bg }]}>
-        <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+        <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }} removeClippedSubviews={true}>
           <View>
             <Skeleton width="100%" height={120} borderRadius={0} />
             <View style={styles.avatarRow}>
@@ -431,7 +431,7 @@ export const MobileProfile: React.FC<MobileProfileProps> = ({
 
   return (
     <SafeAreaView style={[styles.safe, { backgroundColor: bg }]}>
-      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }} removeClippedSubviews={true}>
         {/* ── Profile Header ─────────────────────────────────────────────── */}
         <View>
           <LinearGradient
@@ -746,7 +746,7 @@ export const MobileProfile: React.FC<MobileProfileProps> = ({
                   <Text style={styles.streakEmoji}>🔥</Text>
                   <View>
                     <Text style={styles.streakValue}>{profile.stats.streak} Day Streak</Text>
-                    <Text style={styles.streakSub}>Keep it up! You're on fire.</Text>
+                    <Text style={styles.streakSub}>Keep it up! You&apos;re on fire.</Text>
                   </View>
                 </LinearGradient>
               </View>
diff --git a/src/components/mobile/MobileQuizManager/MobileQuestionCard.tsx b/src/components/mobile/MobileQuizManager/MobileQuestionCard.tsx
index 2c7b78f..7424d99 100644
--- a/src/components/mobile/MobileQuizManager/MobileQuestionCard.tsx
+++ b/src/components/mobile/MobileQuizManager/MobileQuestionCard.tsx
@@ -68,6 +68,7 @@ export default function MobileQuestionCard({
       style={styles.container}
       contentContainerStyle={styles.contentContainer}
       showsVerticalScrollIndicator={false}
+      removeClippedSubviews={true}
     >
       {/* Question Header */}
       <View style={styles.header}>
diff --git a/src/components/mobile/MobileQuizManager/QuizCarousel.tsx b/src/components/mobile/MobileQuizManager/QuizCarousel.tsx
index 192367c..7f1b271 100644
--- a/src/components/mobile/MobileQuizManager/QuizCarousel.tsx
+++ b/src/components/mobile/MobileQuizManager/QuizCarousel.tsx
@@ -98,6 +98,7 @@ export default function QuizCarousel({
         ref={scrollViewRef}
         horizontal
         pagingEnabled
+        removeClippedSubviews={true}
         showsHorizontalScrollIndicator={false}
         onScroll={handleScroll}
         onScrollBeginDrag={handleScrollBeginDrag}
diff --git a/src/components/mobile/MobileQuizManager/QuizResults.tsx b/src/components/mobile/MobileQuizManager/QuizResults.tsx
index f645c02..fa33be4 100644
--- a/src/components/mobile/MobileQuizManager/QuizResults.tsx
+++ b/src/components/mobile/MobileQuizManager/QuizResults.tsx
@@ -24,6 +24,7 @@ export default function QuizResults({ quiz, score, passed, onBack, onRetake }: Q
       style={styles.container}
       contentContainerStyle={styles.contentContainer}
       showsVerticalScrollIndicator={false}
+      removeClippedSubviews={true}
     >
       {/* Result Icon */}
       <View style={styles.iconContainer}>
diff --git a/src/components/mobile/MobileQuizManager/index.tsx b/src/components/mobile/MobileQuizManager/index.tsx
index 9100bed..3ad2ca7 100644
--- a/src/components/mobile/MobileQuizManager/index.tsx
+++ b/src/components/mobile/MobileQuizManager/index.tsx
@@ -134,6 +134,7 @@ export default function MobileQuizManager({
           style={styles.scrollView}
           contentContainerStyle={styles.scrollContent}
           showsVerticalScrollIndicator={false}
+          removeClippedSubviews={true}
         >
           {/* Header */}
           <View style={styles.header}>
diff --git a/src/components/mobile/MobileSearch.tsx b/src/components/mobile/MobileSearch.tsx
index b6a8608..77721e8 100644
--- a/src/components/mobile/MobileSearch.tsx
+++ b/src/components/mobile/MobileSearch.tsx
@@ -287,6 +287,7 @@ export const MobileSearch = ({
             renderItem={({ item }) => (
               <SearchResultCard item={item} onPress={() => onResultPress?.(item)} />
             )}
+            removeClippedSubviews={true}
             contentContainerStyle={styles.resultsList}
             ListEmptyComponent={
               <Text style={styles.emptyText}>Try a different query or adjust filters.</Text>
diff --git a/src/components/mobile/MobileSettings.tsx b/src/components/mobile/MobileSettings.tsx
index 9f1eaf9..8497597 100644
--- a/src/components/mobile/MobileSettings.tsx
+++ b/src/components/mobile/MobileSettings.tsx
@@ -1,420 +1,420 @@
-import React, { useState } from 'react';
-import {
-  Alert,
-  ActivityIndicator,
-  LayoutAnimation,
-  Platform,
-  ScrollView,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-
-import {
-  BarChart2,
-  Bell,
-  ChevronDown,
-  ChevronUp,
-  Download,
-  Eye,
-  Globe,
-  HardDrive,
-  Lock,
-  LogOut,
-  MapPin,
-  Play,
-  Settings2,
-  Shield,
-  Sun,
-  Trash2,
-  Type,
-  User,
-  Vibrate,
-  Wifi,
-  RefreshCw,
-  Fingerprint as FingerprintPattern,
-} from 'lucide-react-native';
-
-import { useAppStore } from '../../store';
-import { useNotificationStore } from '../../store/notificationStore';
-import { useSettingsStore } from '../../store/settingsStore';
-import { useBiometricAuth } from '../../hooks/useBiometricAuth';
-import { useDynamicFontSize } from '../../hooks';
-
-import { NativeToggle } from './NativeToggle';
-import { PickerOption, SettingsPicker } from './SettingsPicker';
-import { SettingsSection } from './SettingsSection';
-import { AppText } from '../common/AppText';
-
-// Enable LayoutAnimation on Android
-if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-// ─────────────────────────────────────────────────────────────
-// Shared Row
-// ─────────────────────────────────────────────────────────────
-
-interface SettingRowProps {
-  icon: React.ReactNode;
-  iconBg?: string;
-  label: string;
-  description?: string;
-  right?: React.ReactNode;
-  onPress?: () => void;
-  destructive?: boolean;
-}
-
-function SettingRow({
-  icon,
-  iconBg = 'bg-gray-100 dark:bg-gray-700',
-  label,
-  description,
-  right,
-  onPress,
-  destructive = false,
-}: SettingRowProps) {
-  const Row = onPress ? TouchableOpacity : View;
-  const { scale } = useDynamicFontSize();
-
-  return (
-    <Row activeOpacity={0.7} onPress={onPress} className="flex-row items-center px-4 py-3.5">
-      <View className={`mr-3 h-9 w-9 items-center justify-center rounded-xl ${iconBg}`}>
-        {icon}
-      </View>
-
-      <View className="flex-1">
-        <AppText
-          className={`font-medium ${
-            destructive ? 'text-red-500' : 'text-gray-900 dark:text-white'
-          }`}
-        >
-          {label}
-        </AppText>
-
-        {description && (
-          <AppText className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
-            {description}
-          </AppText>
-        )}
-      </View>
-
-      {right ?? (onPress ? <ChevronDown size={scale(16)} color="#9CA3AF" /> : null)}
-    </Row>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────
-// Options
-// ─────────────────────────────────────────────────────────────
-
-const VISIBILITY_OPTIONS: PickerOption[] = [
-  { label: 'Public', value: 'public' },
-  { label: 'Friends Only', value: 'friends_only' },
-  { label: 'Private', value: 'private' },
-];
-
-const THEME_OPTIONS: PickerOption[] = [
-  { label: 'Light', value: 'light' },
-  { label: 'Dark', value: 'dark' },
-];
-
-const QUALITY_OPTIONS: PickerOption[] = [
-  { label: 'Low', value: 'low' },
-  { label: 'Medium', value: 'medium' },
-  { label: 'High', value: 'high' },
-];
-
-const STORAGE_OPTIONS: PickerOption[] = [
-  { label: '1 GB', value: '1GB' },
-  { label: '2 GB', value: '2GB' },
-  { label: '5 GB', value: '5GB' },
-  { label: 'Unlimited', value: 'unlimited' },
-];
-
-const LANGUAGE_OPTIONS: PickerOption[] = [
-  { label: 'English', value: 'english' },
-  { label: 'Spanish', value: 'spanish' },
-  { label: 'French', value: 'french' },
-];
-
-const FONT_SIZE_OPTIONS: PickerOption[] = [
-  { label: 'Small', value: 'small' },
-  { label: 'Medium', value: 'medium' },
-  { label: 'Large', value: 'large' },
-];
-
-// ─────────────────────────────────────────────────────────────
-// AdvancedToggle – pill button for expanding advanced settings
-// ─────────────────────────────────────────────────────────────
-
-interface AdvancedToggleProps {
-  expanded: boolean;
-  onToggle: () => void;
-}
-
-function AdvancedToggle({ expanded, onToggle }: AdvancedToggleProps) {
-  return (
-    <TouchableOpacity
-      onPress={onToggle}
-      activeOpacity={0.7}
-      accessibilityRole="button"
-      accessibilityLabel={expanded ? 'Hide advanced settings' : 'Show advanced settings'}
-      accessibilityState={{ expanded }}
-      className="mx-4 my-3 flex-row items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 dark:border-gray-700 dark:bg-gray-800"
-    >
-      <View className="flex-row items-center gap-2">
-        <Settings2 size={16} color="#19c3e6" />
-        <AppText className="text-sm font-semibold text-cyan-500">
-          {expanded ? 'Hide Advanced Settings' : 'Advanced Settings'}
-        </AppText>
-      </View>
-      {expanded ? (
-        <ChevronUp size={16} color="#19c3e6" />
-      ) : (
-        <ChevronDown size={16} color="#19c3e6" />
-      )}
-    </TouchableOpacity>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────
-// Component
-// ─────────────────────────────────────────────────────────────
-
-export function MobileSettings({
-  onSignOut,
-  onChangePassword,
-  onLinkedAccounts,
-}: any) {
-  const { theme, setTheme } = useAppStore();
-  const { preferences, setPreference } = useNotificationStore();
-
-  // Progressive disclosure: advanced settings collapsed by default
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-
-  const {
-    profileVisibility,
-    setProfileVisibility,
-    twoFactorEnabled,
-    setTwoFactorEnabled,
-    dataSharing,
-    setDataSharing,
-    analyticsEnabled,
-    setAnalyticsEnabled,
-    locationServices,
-    setLocationServices,
-    downloadOverWifiOnly,
-    setDownloadOverWifiOnly,
-    autoDownload,
-    setAutoDownload,
-    downloadQuality,
-    setDownloadQuality,
-    storageLimit,
-    setStorageLimit,
-    language,
-    setLanguage,
-    fontSize,
-    setFontSize,
-    autoplay,
-    setAutoplay,
-    hapticFeedback,
-    setHapticFeedback,
-  } = useSettingsStore();
-
-  const {
-    isAvailable: biometricAvailable,
-    isEnabled: biometricEnabled,
-    biometricType,
-    enable: enableBiometric,
-    disable: disableBiometric,
-    isLoading: biometricLoading,
-  } = useBiometricAuth();
-
-  const { scale } = useDynamicFontSize();
-
-  const handleBiometricToggle = async (value: boolean) => {
-    if (value) {
-      const ok = await enableBiometric();
-      if (!ok) {
-        Alert.alert('Biometric Login', 'Enable failed. Check device settings.');
-      }
-    } else {
-      await disableBiometric();
-    }
-  };
-
-  const handleSignOut = () => {
-    Alert.alert('Sign Out', 'Are you sure?', [
-      { text: 'Cancel', style: 'cancel' },
-      { text: 'Sign Out', style: 'destructive', onPress: onSignOut },
-    ]);
-  };
-
-  const handleManualSync = async () => {
-    Alert.alert('Sync', 'Sync data with server?', [
-      { text: 'Cancel', style: 'cancel' },
-      {
-        text: 'Sync',
-        onPress: async () => {
-          try {
-            Alert.alert('Syncing...');
-            // await syncService.manualSync();
-            Alert.alert('Success');
-          } catch {
-            Alert.alert('Failed to sync');
-          }
-        },
-      },
-    ]);
-  };
-
-  const handleClearDownloads = () => {
-    Alert.alert('Clear Downloads', 'Remove all downloads?', [
-      { text: 'Cancel', style: 'cancel' },
-      { text: 'Clear', style: 'destructive' },
-    ]);
-  };
-
-  const handleToggleAdvanced = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setShowAdvancedSettings(prev => !prev);
-  };
-
-  return (
-    <ScrollView className="flex-1 bg-gray-50 dark:bg-gray-900">
-
-      {/* ── ESSENTIAL: ACCOUNT ─────────────────────────────── */}
-      <SettingsSection title="Account">
-        <SettingRow
-          icon={<Eye size={18} color="#6366f1" />}
-          label="Profile Visibility"
-          right={
-            <SettingsPicker
-              label="Visibility"
-              value={profileVisibility}
-              options={VISIBILITY_OPTIONS}
-              onValueChange={setProfileVisibility}
-            />
-          }
-        />
-
-        <SettingRow
-          icon={<Lock size={18} color="#10b981" />}
-          label="Two-Factor Auth"
-          right={<NativeToggle value={twoFactorEnabled} onValueChange={setTwoFactorEnabled} />}
-        />
-
-        {biometricAvailable && (
-          <SettingRow
-            icon={
-              biometricLoading ? (
-                <ActivityIndicator />
-              ) : (
-                <FingerprintPattern size={18} color="#06b6d4" />
-              )
-            }
-            label="Biometric Login"
-            description={biometricEnabled ? 'Enabled' : 'Disabled'}
-            right={
-              <NativeToggle
-                value={biometricEnabled}
-                onValueChange={handleBiometricToggle}
-                disabled={biometricLoading}
-              />
-            }
-          />
-        )}
-
-        <SettingRow icon={<User size={18} />} label="Change Password" onPress={onChangePassword} />
-      </SettingsSection>
-
-      {/* ── ESSENTIAL: APP ─────────────────────────────────── */}
-      <SettingsSection title="App">
-        <SettingRow
-          icon={<Sun size={18} />}
-          label="Theme"
-          right={
-            <SettingsPicker
-              label="Theme"
-              value={theme}
-              options={THEME_OPTIONS}
-              onValueChange={setTheme}
-            />
-          }
-        />
-      </SettingsSection>
-
-      {/* ── PROGRESSIVE DISCLOSURE: ADVANCED SETTINGS ──────── */}
-      <AdvancedToggle expanded={showAdvancedSettings} onToggle={handleToggleAdvanced} />
-
-      {showAdvancedSettings && (
-        <>
-          {/* PRIVACY */}
-          <SettingsSection title="Privacy">
-            <SettingRow
-              icon={<BarChart2 size={18} />}
-              label="Analytics"
-              right={<NativeToggle value={analyticsEnabled} onValueChange={setAnalyticsEnabled} />}
-            />
-          </SettingsSection>
-
-          {/* DOWNLOADS */}
-          <SettingsSection title="Downloads">
-            <SettingRow
-              icon={<Wifi size={18} />}
-              label="WiFi Only"
-              right={
-                <NativeToggle
-                  value={downloadOverWifiOnly}
-                  onValueChange={setDownloadOverWifiOnly}
-                />
-              }
-            />
-
-            <SettingRow
-              icon={<Download size={18} />}
-              label="Quality"
-              right={
-                <SettingsPicker
-                  label="Quality"
-                  value={downloadQuality}
-                  options={QUALITY_OPTIONS}
-                  onValueChange={setDownloadQuality}
-                />
-              }
-            />
-
-            <SettingRow
-              icon={<Trash2 size={18} color="red" />}
-              label="Clear Downloads"
-              onPress={handleClearDownloads}
-              destructive
-            />
-          </SettingsSection>
-
-          {/* SYNC */}
-          <SettingsSection title="Sync">
-            <SettingRow
-              icon={<RefreshCw size={18} />}
-              label="Manual Sync"
-              onPress={handleManualSync}
-            />
-          </SettingsSection>
-        </>
-      )}
-
-      {/* ── ESSENTIAL: ACCOUNT ACTIONS ─────────────────────── */}
-      <SettingsSection title="Account Actions">
-        <SettingRow
-          icon={<LogOut size={18} color="red" />}
-          label="Sign Out"
-          onPress={handleSignOut}
-          destructive
-        />
-      </SettingsSection>
-    </ScrollView>
-  );
-}
-
-export default MobileSettings;
+import React, { useState } from 'react';
+import {
+  Alert,
+  ActivityIndicator,
+  LayoutAnimation,
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native';
+
+import {
+  BarChart2,
+  Bell,
+  ChevronDown,
+  ChevronUp,
+  Download,
+  Eye,
+  Globe,
+  HardDrive,
+  Lock,
+  LogOut,
+  MapPin,
+  Play,
+  Settings2,
+  Shield,
+  Sun,
+  Trash2,
+  Type,
+  User,
+  Vibrate,
+  Wifi,
+  RefreshCw,
+  Fingerprint as FingerprintPattern,
+} from 'lucide-react-native';
+
+import { useAppStore } from '../../store';
+import { useNotificationStore } from '../../store/notificationStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import { useBiometricAuth } from '../../hooks/useBiometricAuth';
+import { useDynamicFontSize } from '../../hooks';
+
+import { NativeToggle } from './NativeToggle';
+import { PickerOption, SettingsPicker } from './SettingsPicker';
+import { SettingsSection } from './SettingsSection';
+import { AppText } from '../common/AppText';
+
+// Enable LayoutAnimation on Android
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+// ─────────────────────────────────────────────────────────────
+// Shared Row
+// ─────────────────────────────────────────────────────────────
+
+interface SettingRowProps {
+  icon: React.ReactNode;
+  iconBg?: string;
+  label: string;
+  description?: string;
+  right?: React.ReactNode;
+  onPress?: () => void;
+  destructive?: boolean;
+}
+
+function SettingRow({
+  icon,
+  iconBg = 'bg-gray-100 dark:bg-gray-700',
+  label,
+  description,
+  right,
+  onPress,
+  destructive = false,
+}: SettingRowProps) {
+  const Row = onPress ? TouchableOpacity : View;
+  const { scale } = useDynamicFontSize();
+
+  return (
+    <Row activeOpacity={0.7} onPress={onPress} className="flex-row items-center px-4 py-3.5">
+      <View className={`mr-3 h-9 w-9 items-center justify-center rounded-xl ${iconBg}`}>
+        {icon}
+      </View>
+
+      <View className="flex-1">
+        <AppText
+          className={`font-medium ${
+            destructive ? 'text-red-500' : 'text-gray-900 dark:text-white'
+          }`}
+        >
+          {label}
+        </AppText>
+
+        {description && (
+          <AppText className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+            {description}
+          </AppText>
+        )}
+      </View>
+
+      {right ?? (onPress ? <ChevronDown size={scale(16)} color="#9CA3AF" /> : null)}
+    </Row>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Options
+// ─────────────────────────────────────────────────────────────
+
+const VISIBILITY_OPTIONS: PickerOption[] = [
+  { label: 'Public', value: 'public' },
+  { label: 'Friends Only', value: 'friends_only' },
+  { label: 'Private', value: 'private' },
+];
+
+const THEME_OPTIONS: PickerOption[] = [
+  { label: 'Light', value: 'light' },
+  { label: 'Dark', value: 'dark' },
+];
+
+const QUALITY_OPTIONS: PickerOption[] = [
+  { label: 'Low', value: 'low' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'High', value: 'high' },
+];
+
+const STORAGE_OPTIONS: PickerOption[] = [
+  { label: '1 GB', value: '1GB' },
+  { label: '2 GB', value: '2GB' },
+  { label: '5 GB', value: '5GB' },
+  { label: 'Unlimited', value: 'unlimited' },
+];
+
+const LANGUAGE_OPTIONS: PickerOption[] = [
+  { label: 'English', value: 'english' },
+  { label: 'Spanish', value: 'spanish' },
+  { label: 'French', value: 'french' },
+];
+
+const FONT_SIZE_OPTIONS: PickerOption[] = [
+  { label: 'Small', value: 'small' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'Large', value: 'large' },
+];
+
+// ─────────────────────────────────────────────────────────────
+// AdvancedToggle – pill button for expanding advanced settings
+// ─────────────────────────────────────────────────────────────
+
+interface AdvancedToggleProps {
+  expanded: boolean;
+  onToggle: () => void;
+}
+
+function AdvancedToggle({ expanded, onToggle }: AdvancedToggleProps) {
+  return (
+    <TouchableOpacity
+      onPress={onToggle}
+      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityLabel={expanded ? 'Hide advanced settings' : 'Show advanced settings'}
+      accessibilityState={{ expanded }}
+      className="mx-4 my-3 flex-row items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 dark:border-gray-700 dark:bg-gray-800"
+    >
+      <View className="flex-row items-center gap-2">
+        <Settings2 size={16} color="#19c3e6" />
+        <AppText className="text-sm font-semibold text-cyan-500">
+          {expanded ? 'Hide Advanced Settings' : 'Advanced Settings'}
+        </AppText>
+      </View>
+      {expanded ? (
+        <ChevronUp size={16} color="#19c3e6" />
+      ) : (
+        <ChevronDown size={16} color="#19c3e6" />
+      )}
+    </TouchableOpacity>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────
+
+export function MobileSettings({
+  onSignOut,
+  onChangePassword,
+  onLinkedAccounts,
+}: any) {
+  const { theme, setTheme } = useAppStore();
+  const { preferences, setPreference } = useNotificationStore();
+
+  // Progressive disclosure: advanced settings collapsed by default
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
+
+  const {
+    profileVisibility,
+    setProfileVisibility,
+    twoFactorEnabled,
+    setTwoFactorEnabled,
+    dataSharing,
+    setDataSharing,
+    analyticsEnabled,
+    setAnalyticsEnabled,
+    locationServices,
+    setLocationServices,
+    downloadOverWifiOnly,
+    setDownloadOverWifiOnly,
+    autoDownload,
+    setAutoDownload,
+    downloadQuality,
+    setDownloadQuality,
+    storageLimit,
+    setStorageLimit,
+    language,
+    setLanguage,
+    fontSize,
+    setFontSize,
+    autoplay,
+    setAutoplay,
+    hapticFeedback,
+    setHapticFeedback,
+  } = useSettingsStore();
+
+  const {
+    isAvailable: biometricAvailable,
+    isEnabled: biometricEnabled,
+    biometricType,
+    enable: enableBiometric,
+    disable: disableBiometric,
+    isLoading: biometricLoading,
+  } = useBiometricAuth();
+
+  const { scale } = useDynamicFontSize();
+
+  const handleBiometricToggle = async (value: boolean) => {
+    if (value) {
+      const ok = await enableBiometric();
+      if (!ok) {
+        Alert.alert('Biometric Login', 'Enable failed. Check device settings.');
+      }
+    } else {
+      await disableBiometric();
+    }
+  };
+
+  const handleSignOut = () => {
+    Alert.alert('Sign Out', 'Are you sure?', [
+      { text: 'Cancel', style: 'cancel' },
+      { text: 'Sign Out', style: 'destructive', onPress: onSignOut },
+    ]);
+  };
+
+  const handleManualSync = async () => {
+    Alert.alert('Sync', 'Sync data with server?', [
+      { text: 'Cancel', style: 'cancel' },
+      {
+        text: 'Sync',
+        onPress: async () => {
+          try {
+            Alert.alert('Syncing...');
+            // await syncService.manualSync();
+            Alert.alert('Success');
+          } catch {
+            Alert.alert('Failed to sync');
+          }
+        },
+      },
+    ]);
+  };
+
+  const handleClearDownloads = () => {
+    Alert.alert('Clear Downloads', 'Remove all downloads?', [
+      { text: 'Cancel', style: 'cancel' },
+      { text: 'Clear', style: 'destructive' },
+    ]);
+  };
+
+  const handleToggleAdvanced = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setShowAdvancedSettings(prev => !prev);
+  };
+
+  return (
+    <ScrollView className="flex-1 bg-gray-50 dark:bg-gray-900">
+
+      {/* ── ESSENTIAL: ACCOUNT ─────────────────────────────── */}
+      <SettingsSection title="Account">
+        <SettingRow
+          icon={<Eye size={18} color="#6366f1" />}
+          label="Profile Visibility"
+          right={
+            <SettingsPicker
+              label="Visibility"
+              value={profileVisibility}
+              options={VISIBILITY_OPTIONS}
+              onValueChange={setProfileVisibility}
+            />
+          }
+        />
+
+        <SettingRow
+          icon={<Lock size={18} color="#10b981" />}
+          label="Two-Factor Auth"
+          right={<NativeToggle value={twoFactorEnabled} onValueChange={setTwoFactorEnabled} />}
+        />
+
+        {biometricAvailable && (
+          <SettingRow
+            icon={
+              biometricLoading ? (
+                <ActivityIndicator />
+              ) : (
+                <FingerprintPattern size={18} color="#06b6d4" />
+              )
+            }
+            label="Biometric Login"
+            description={biometricEnabled ? 'Enabled' : 'Disabled'}
+            right={
+              <NativeToggle
+                value={biometricEnabled}
+                onValueChange={handleBiometricToggle}
+                disabled={biometricLoading}
+              />
+            }
+          />
+        )}
+
+        <SettingRow icon={<User size={18} />} label="Change Password" onPress={onChangePassword} />
+      </SettingsSection>
+
+      {/* ── ESSENTIAL: APP ─────────────────────────────────── */}
+      <SettingsSection title="App">
+        <SettingRow
+          icon={<Sun size={18} />}
+          label="Theme"
+          right={
+            <SettingsPicker
+              label="Theme"
+              value={theme}
+              options={THEME_OPTIONS}
+              onValueChange={setTheme}
+            />
+          }
+        />
+      </SettingsSection>
+
+      {/* ── PROGRESSIVE DISCLOSURE: ADVANCED SETTINGS ──────── */}
+      <AdvancedToggle expanded={showAdvancedSettings} onToggle={handleToggleAdvanced} />
+
+      {showAdvancedSettings && (
+        <>
+          {/* PRIVACY */}
+          <SettingsSection title="Privacy">
+            <SettingRow
+              icon={<BarChart2 size={18} />}
+              label="Analytics"
+              right={<NativeToggle value={analyticsEnabled} onValueChange={setAnalyticsEnabled} />}
+            />
+          </SettingsSection>
+
+          {/* DOWNLOADS */}
+          <SettingsSection title="Downloads">
+            <SettingRow
+              icon={<Wifi size={18} />}
+              label="WiFi Only"
+              right={
+                <NativeToggle
+                  value={downloadOverWifiOnly}
+                  onValueChange={setDownloadOverWifiOnly}
+                />
+              }
+            />
+
+            <SettingRow
+              icon={<Download size={18} />}
+              label="Quality"
+              right={
+                <SettingsPicker
+                  label="Quality"
+                  value={downloadQuality}
+                  options={QUALITY_OPTIONS}
+                  onValueChange={setDownloadQuality}
+                />
+              }
+            />
+
+            <SettingRow
+              icon={<Trash2 size={18} color="red" />}
+              label="Clear Downloads"
+              onPress={handleClearDownloads}
+              destructive
+            />
+          </SettingsSection>
+
+          {/* SYNC */}
+          <SettingsSection title="Sync">
+            <SettingRow
+              icon={<RefreshCw size={18} />}
+              label="Manual Sync"
+              onPress={handleManualSync}
+            />
+          </SettingsSection>
+        </>
+      )}
+
+      {/* ── ESSENTIAL: ACCOUNT ACTIONS ─────────────────────── */}
+      <SettingsSection title="Account Actions">
+        <SettingRow
+          icon={<LogOut size={18} color="red" />}
+          label="Sign Out"
+          onPress={handleSignOut}
+          destructive
+        />
+      </SettingsSection>
+    </ScrollView>
+  );
+}
+
+export default MobileSettings;
diff --git a/src/components/mobile/MobileSyllabus.tsx b/src/components/mobile/MobileSyllabus.tsx
index 146b3c6..eaf9e6f 100644
--- a/src/components/mobile/MobileSyllabus.tsx
+++ b/src/components/mobile/MobileSyllabus.tsx
@@ -84,6 +84,7 @@ export default function MobileSyllabus({
       style={styles.container}
       contentContainerStyle={styles.contentContainer}
       showsVerticalScrollIndicator={false}
+      removeClippedSubviews={true}
     >
       {/* Header */}
       <View style={styles.header}>
diff --git a/src/components/mobile/NotificationSettings.tsx b/src/components/mobile/NotificationSettings.tsx
index 0b16df3..07b39d8 100644
--- a/src/components/mobile/NotificationSettings.tsx
+++ b/src/components/mobile/NotificationSettings.tsx
@@ -95,8 +95,7 @@ export function NotificationSettings() {
   };
 
   return (
-    <ScrollView className="flex-1 bg-gray-50 dark:bg-gray-900">
-      {/* Permission Status Banner */}
+    <ScrollView className="flex-1 bg-gray-50 dark:bg-gray-900" removeClippedSubviews={true}>
       {permissionStatus !== 'granted' && (
         <View className="mx-4 mt-4 rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-800 dark:bg-amber-900/30">
           <View className="mb-2 flex-row items-center">
diff --git a/src/components/mobile/SubscriptionManager.tsx b/src/components/mobile/SubscriptionManager.tsx
index f7d39b2..3e58448 100644
--- a/src/components/mobile/SubscriptionManager.tsx
+++ b/src/components/mobile/SubscriptionManager.tsx
@@ -326,7 +326,7 @@ export const SubscriptionManager: React.FC<SubscriptionManagerProps> = ({
         )}
       </View>
 
-      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scroll}>
+      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scroll} removeClippedSubviews={true}>
         {/* Current plan */}
         {renderCurrentPlan()}
 
diff --git a/src/pages/mobile/MobileLogin.tsx b/src/pages/mobile/MobileLogin.tsx
index bbe8bcb..9823eda 100644
--- a/src/pages/mobile/MobileLogin.tsx
+++ b/src/pages/mobile/MobileLogin.tsx
@@ -187,6 +187,7 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
           contentContainerStyle={styles.scroll}
           keyboardShouldPersistTaps="handled"
           showsVerticalScrollIndicator={false}
+          removeClippedSubviews={true}
         >
           {/* ── Header ── */}
           <View style={styles.header}>
@@ -377,7 +378,7 @@ export const MobileLogin: React.FC<MobileLoginProps> = ({
           {onRegister && (
             <View style={styles.registerRow}>
               <Text allowFontScaling={false} style={[styles.registerText, { color: textSecondary }]}>
-                Don't have an account?
+                Don&apos;t have an account?
               </Text>
               <TouchableOpacity onPress={onRegister}>
                 <Text allowFontScaling={false} style={[styles.registerLink, { color: accentColor }]}>
diff --git a/src/pages/mobile/MobileRegister.tsx b/src/pages/mobile/MobileRegister.tsx
index 21018ec..1ea15dc 100644
--- a/src/pages/mobile/MobileRegister.tsx
+++ b/src/pages/mobile/MobileRegister.tsx
@@ -109,6 +109,7 @@ export const MobileRegister: React.FC<MobileRegisterProps> = ({
           contentContainerStyle={styles.scroll}
           keyboardShouldPersistTaps="handled"
           showsVerticalScrollIndicator={false}
+          removeClippedSubviews={true}
         >
           <View style={styles.header}>
             <LinearGradient
diff --git a/src/pages/mobile/PaymentHistory.tsx b/src/pages/mobile/PaymentHistory.tsx
index 64bdb73..377e1e2 100644
--- a/src/pages/mobile/PaymentHistory.tsx
+++ b/src/pages/mobile/PaymentHistory.tsx
@@ -253,6 +253,7 @@ export const PaymentHistory: React.FC<PaymentHistoryProps> = ({
         horizontal
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.tabsRow}
+        removeClippedSubviews={true}
       >
         {tabs.map((tab) => (
           <TouchableOpacity
@@ -421,6 +422,7 @@ export const PaymentHistory: React.FC<PaymentHistoryProps> = ({
 
       <ScrollView
         showsVerticalScrollIndicator={false}
+        removeClippedSubviews={true}
         refreshControl={
           <RefreshControl
             refreshing={isRefreshing}