diff --git a/src/backup/BackupPhraseContainer.tsx b/src/backup/BackupPhraseContainer.tsx
index 9403253bf75..f802354e081 100644
--- a/src/backup/BackupPhraseContainer.tsx
+++ b/src/backup/BackupPhraseContainer.tsx
@@ -1,7 +1,7 @@
 import Clipboard from '@react-native-clipboard/clipboard'
 import * as React from 'react'
 import { WithTranslation } from 'react-i18next'
-import { StyleSheet, Text, TextInput, View, ViewStyle } from 'react-native'
+import { StyleSheet, Text, TextInput, View, ViewStyle, useWindowDimensions } from 'react-native'
 import { isValidBackupPhrase } from 'src/backup/utils'
 import Touchable from 'src/components/Touchable'
 import withTextInputPasteAware from 'src/components/WithTextInputPasteAware'
@@ -9,6 +9,7 @@ import { withTranslation } from 'src/i18n'
 import colors from 'src/styles/colors'
 import fontStyles from 'src/styles/fonts'
 import { vibrateInformative } from 'src/styles/hapticFeedback'
+import { Spacing } from 'src/styles/styles'
 import Logger from 'src/utils/Logger'
 
 const PhraseInput = withTextInputPasteAware(TextInput, { top: undefined, right: 12, bottom: 12 })
@@ -18,17 +19,23 @@ type TwelveWordTableProps = {
 }
 
 function TwelveWordTable({ words }: TwelveWordTableProps) {
+  const { fontScale } = useWindowDimensions()
   return (
-    <>
+    <View style={styles.twelveWordTable}>
       {words.map((word, index) => (
-        <View key={index} style={styles.indexWordContainer}>
-          <Text style={styles.indexText}>{index + 1}</Text>
-          <Text key={index} style={styles.wordText}>
+        <View
+          key={index}
+          style={[styles.wordContainer, fontScale > 1.5 ? { width: '50%' } : { width: '33%' }]}
+        >
+          <Text adjustsFontSizeToFit={true} style={styles.indexText}>
+            {index + 1}
+          </Text>
+          <Text numberOfLines={1} adjustsFontSizeToFit={true} style={styles.wordText} key={index}>
             {word}
           </Text>
         </View>
       ))}
-    </>
+    </View>
   )
 }
 
@@ -153,20 +160,20 @@ const styles = StyleSheet.create({
   indexText: {
     ...fontStyles.regular,
     color: colors.gray4,
-    marginRight: 8,
-    lineHeight: 24,
   },
-  wordText: {
-    ...fontStyles.regular,
-    lineHeight: 24,
+  twelveWordTable: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginHorizontal: Spacing.Small12,
   },
-  indexWordContainer: {
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: '30%',
+  wordContainer: {
     flexDirection: 'row',
+    gap: Spacing.Smallest8,
+    alignItems: 'center',
     marginVertical: 11,
-    marginLeft: '3%',
+  },
+  wordText: {
+    ...fontStyles.regular,
   },
   phraseContainer: {
     flexWrap: 'wrap',
diff --git a/src/backup/__snapshots__/BackupPhraseContainer.test.tsx.snap b/src/backup/__snapshots__/BackupPhraseContainer.test.tsx.snap
index 57b4a2863af..769431ecd77 100644
--- a/src/backup/__snapshots__/BackupPhraseContainer.test.tsx.snap
+++ b/src/backup/__snapshots__/BackupPhraseContainer.test.tsx.snap
@@ -122,458 +122,528 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
     <View
       style={
         {
-          "flexBasis": "30%",
           "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
+          "flexWrap": "wrap",
+          "marginHorizontal": 12,
         }
       }
     >
-      <Text
+      <View
         style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        1
-      </Text>
-      <Text
-        style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        prosper
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
+        >
+          1
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        2
-      </Text>
-      <Text
+        >
+          prosper
+        </Text>
+      </View>
+      <View
         style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        winner
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        3
-      </Text>
-      <Text
-        style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
+        >
+          2
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        find
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
+        >
+          winner
+        </Text>
+      </View>
+      <View
         style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        4
-      </Text>
-      <Text
-        style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        donate
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
+        >
+          3
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        5
-      </Text>
-      <Text
+        >
+          find
+        </Text>
+      </View>
+      <View
         style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        tape
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        6
-      </Text>
-      <Text
-        style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
+        >
+          4
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        history
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
+        >
+          donate
+        </Text>
+      </View>
+      <View
         style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        7
-      </Text>
-      <Text
-        style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        measure
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
+        >
+          5
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        8
-      </Text>
-      <Text
+        >
+          tape
+        </Text>
+      </View>
+      <View
         style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        umbrella
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        9
-      </Text>
-      <Text
-        style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
+        >
+          6
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
-        }
-      >
-        agent
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
+        >
+          history
+        </Text>
+      </View>
+      <View
         style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        10
-      </Text>
-      <Text
-        style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
+          }
+        >
+          7
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
+        >
+          measure
+        </Text>
+      </View>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        patrol
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
+        >
+          8
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
+          }
+        >
+          umbrella
+        </Text>
+      </View>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        11
-      </Text>
-      <Text
-        style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
+        >
+          9
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
+          }
+        >
+          agent
+        </Text>
+      </View>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        want
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "flexBasis": "30%",
-          "flexDirection": "row",
-          "flexGrow": 1,
-          "flexShrink": 1,
-          "marginLeft": "3%",
-          "marginVertical": 11,
-        }
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "#666666",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginRight": 8,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
+        >
+          10
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
+          }
+        >
+          patrol
+        </Text>
+      </View>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        12
-      </Text>
-      <Text
-        style={
-          {
-            "color": "#2E3338",
-            "fontFamily": "Inter-Regular",
-            "fontSize": 16,
-            "lineHeight": 24,
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
+          }
+        >
+          11
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
           }
+        >
+          want
+        </Text>
+      </View>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 8,
+              "marginVertical": 11,
+            },
+            {
+              "width": "50%",
+            },
+          ]
         }
       >
-        rhythm
-      </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          style={
+            {
+              "color": "#666666",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
+          }
+        >
+          12
+        </Text>
+        <Text
+          adjustsFontSizeToFit={true}
+          numberOfLines={1}
+          style={
+            {
+              "color": "#2E3338",
+              "fontFamily": "Inter-Regular",
+              "fontSize": 16,
+              "lineHeight": 22,
+            }
+          }
+        >
+          rhythm
+        </Text>
+      </View>
     </View>
   </View>
 </View>