From 41de07cc7fb165d5d7f92391d38a4bd2509a999f Mon Sep 17 00:00:00 2001
From: ieow <cwlee0@gmail.com>
Date: Fri, 9 May 2025 18:47:48 +0800
Subject: [PATCH 1/9] feat: new srp flow

Co-authored-by: smgv <gpatra1996@gmail.com>
---
 .../ButtonSecondary/ButtonSecondary.styles.ts |    8 +-
 .../ButtonSecondary/ButtonSecondary.tsx       |   11 +-
 .../ButtonSecondary/ButtonSecondary.types.ts  |    5 +-
 .../ModalMandatory/ModalMandatory.styles.ts   |   34 +-
 .../Modals/ModalMandatory/ModalMandatory.tsx  |   39 +-
 .../components/Texts/Text/Text.types.ts       |    1 +
 app/components/Nav/App/App.tsx                |   20 +
 app/components/Nav/Main/MainNavigator.js      |    6 +
 app/components/Nav/Main/index.js              |   23 +-
 app/components/UI/ActionView/index.js         |  136 ++-
 app/components/UI/BackupAlert/BackupAlert.tsx |    5 +-
 .../UI/BiometryButton/BiometryButton.tsx      |   51 +-
 app/components/UI/Carousel/constants.ts       |    1 +
 app/components/UI/Carousel/types.ts           |    3 +-
 app/components/UI/DeleteWalletModal/index.tsx |  206 ++--
 app/components/UI/DeleteWalletModal/styles.ts |   59 +-
 .../LoginOptionsSwitch/LoginOptionsSwitch.tsx |   55 +-
 app/components/UI/Navbar/index.js             |  107 +-
 .../UI/OnboardingScreenWithBg/index.tsx       |   20 +-
 app/components/UI/OptinMetrics/index.js       |  196 ++--
 .../SecurityOptionToggle.tsx                  |    2 +-
 .../UI/SecurityOptionToggle/styles.ts         |    3 +
 app/components/UI/SeedphraseModal/index.js    |  143 ++-
 .../UI/SkipAccountSecurityModal/index.js      |  173 +--
 .../UI/StyledButton/styledButtonStyles.ts     |   14 +-
 .../Views/AccountBackupStep1/index.js         |  247 ++--
 .../Views/AccountBackupStep1B/index.js        |   30 +-
 app/components/Views/ChoosePassword/index.js  |  477 ++++----
 .../ImportFromSecretRecoveryPhrase/index.js   | 1041 +++++++++++------
 .../ImportFromSecretRecoveryPhrase/styles.ts  |  217 ++--
 app/components/Views/Login/index.tsx          |  124 +-
 app/components/Views/Login/styles.ts          |   60 +-
 .../Views/ManualBackupStep1/index.js          |  292 +++--
 .../Views/ManualBackupStep1/styles.ts         |  154 +--
 .../Views/ManualBackupStep2/index.js          |  506 ++++----
 .../Views/ManualBackupStep2/styles.ts         |  194 ++-
 app/components/Views/Onboarding/index.js      |  360 ++++--
 .../Views/OnboardingCarousel/index.tsx        |  157 ++-
 .../Views/OnboardingSheet/index.tsx           |  198 ++++
 .../Views/OnboardingSuccess/index.styles.ts   |  179 ++-
 .../Views/OnboardingSuccess/index.tsx         |  353 ++++--
 app/components/Views/PasswordHint/index.tsx   |  182 +++
 app/components/Views/ResetPassword/index.js   |  329 ++++--
 .../RevealPrivateCredential.tsx               |    3 +-
 .../Views/RevealPrivateCredential/styles.ts   |    1 +
 .../ChangePassword/ChangePassword.tsx         |   15 +-
 .../Views/SuccessErrorSheet/index.styles.ts   |   40 +
 .../Views/SuccessErrorSheet/index.tsx         |  169 +++
 app/constants/navigation/Routes.ts            |   10 +
 app/constants/storage.ts                      |    2 +-
 app/styles/common.ts                          |   19 +
 app/util/termsOfUse/termsOfUse.ts             |   10 +-
 .../SecurityPrivacyView.selectors.js          |    1 +
 e2e/selectors/wallet/LoginView.selectors.js   |    1 +
 54 files changed, 4415 insertions(+), 2277 deletions(-)
 create mode 100644 app/components/Views/OnboardingSheet/index.tsx
 create mode 100644 app/components/Views/PasswordHint/index.tsx
 create mode 100644 app/components/Views/SuccessErrorSheet/index.styles.ts
 create mode 100644 app/components/Views/SuccessErrorSheet/index.tsx

diff --git a/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.styles.ts b/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.styles.ts
index be621e6e94bd..667127e9ed26 100644
--- a/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.styles.ts
+++ b/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.styles.ts
@@ -20,13 +20,17 @@ const styleSheet = (params: {
 }) => {
   const { vars, theme } = params;
   const { colors } = theme;
-  const { style, isDanger, pressed } = vars;
+  const { style, isDanger, pressed, overridePressedColor } = vars;
   const colorObj = isDanger ? colors.error : colors.primary;
 
+  const pressedColor = pressed
+    ? overridePressedColor || colorObj.alternative
+    : 'transparent';
+
   return StyleSheet.create({
     base: Object.assign(
       {
-        backgroundColor: pressed ? colorObj.alternative : 'transparent',
+        backgroundColor: pressedColor,
         borderWidth: 1,
         borderColor: colorObj.default,
       } as ViewStyle,
diff --git a/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.tsx b/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.tsx
index df5e9e426bdd..43bbd57c9c3e 100644
--- a/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.tsx
+++ b/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.tsx
@@ -26,6 +26,7 @@ const ButtonSecondary = ({
   onPressOut,
   isDanger = false,
   label,
+  overridePressedColor,
   ...props
 }: ButtonSecondaryProps) => {
   const [pressed, setPressed] = useState(false);
@@ -33,6 +34,7 @@ const ButtonSecondary = ({
     style,
     isDanger,
     pressed,
+    overridePressedColor,
   });
 
   const triggerOnPressedIn = useCallback(
@@ -72,9 +74,12 @@ const ButtonSecondary = ({
       label
     );
 
-    const renderLoading = () => (
-      <ActivityIndicator size="small" color={DEFAULT_BUTTONSECONDARY_LABEL_TEXTVARIANT} />
-    );
+  const renderLoading = () => (
+    <ActivityIndicator
+      size="small"
+      color={DEFAULT_BUTTONSECONDARY_LABEL_TEXTVARIANT}
+    />
+  );
 
   return (
     <Button
diff --git a/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.types.ts b/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.types.ts
index 1c9a7fea09f0..7480eda09a61 100644
--- a/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.types.ts
+++ b/app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.types.ts
@@ -4,7 +4,9 @@ import { ButtonBaseProps } from '../../foundation/ButtonBase';
 /**
  * ButtonSecondary component props.
  */
-export type ButtonSecondaryProps = Omit<ButtonBaseProps, 'labelColor'>;
+export type ButtonSecondaryProps = Omit<ButtonBaseProps, 'labelColor'> & {
+  overridePressedColor?: string;
+};
 
 /**
  * Style sheet input parameters.
@@ -15,4 +17,5 @@ export type ButtonSecondaryStyleSheetVars = Pick<
 > & {
   isDanger: boolean;
   pressed: boolean;
+  overridePressedColor?: string;
 };
diff --git a/app/component-library/components/Modals/ModalMandatory/ModalMandatory.styles.ts b/app/component-library/components/Modals/ModalMandatory/ModalMandatory.styles.ts
index eebea191314d..ce08e25c093d 100644
--- a/app/component-library/components/Modals/ModalMandatory/ModalMandatory.styles.ts
+++ b/app/component-library/components/Modals/ModalMandatory/ModalMandatory.styles.ts
@@ -1,9 +1,12 @@
 // Third party dependencies.
-import { StyleSheet, TextStyle, Dimensions } from 'react-native';
+import { StyleSheet, Dimensions, TextStyle } from 'react-native';
 import { Theme } from '../../../../util/theme/models';
 import { getFontFamily, TextVariant } from '../../Texts/Text';
+import { typography } from '@metamask/design-tokens';
 
 const screenHeight = Dimensions.get('window').height;
+// eslint-disable-next-line @metamask/design-tokens/color-no-hex
+const bgColor = '#ECEEFF';
 /**
  * Style sheet function for ModalConfirmation component.
  *
@@ -12,9 +15,10 @@ const screenHeight = Dimensions.get('window').height;
  * @param params.vars Inputs that the style sheet depends on.
  * @returns StyleSheet object.
  */
+
 const styleSheet = (params: { theme: Theme }) => {
   const { theme } = params;
-  const { colors, typography } = theme;
+  const { colors } = theme;
 
   return StyleSheet.create({
     screen: {
@@ -26,6 +30,11 @@ const styleSheet = (params: { theme: Theme }) => {
       padding: 16,
       marginHorizontal: 16,
     },
+    headerContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
     headerText: {
       color: colors.text.default,
       ...(typography.sHeadingMD as TextStyle),
@@ -33,10 +42,17 @@ const styleSheet = (params: { theme: Theme }) => {
       textAlign: 'center',
       marginBottom: 16,
     },
+    headerEmpty: {
+      width: 32,
+      height: 32,
+    },
     bodyContainer: { height: screenHeight / 2 },
     checkboxContainer: {
       flexDirection: 'row',
       marginTop: 16,
+      columnGap: 8,
+      marginRight: 16,
+      width: '90%',
     },
     checkboxText: {
       marginLeft: 8,
@@ -50,22 +66,20 @@ const styleSheet = (params: { theme: Theme }) => {
       width: '100%',
     },
     scrollToEndButton: {
-      width: 32,
-      height: 32,
-      borderRadius: 32 / 2,
-      backgroundColor: colors.background.default,
+      width: 40,
+      height: 40,
+      borderRadius: 40 / 2,
+      backgroundColor: bgColor,
       justifyContent: 'center',
       alignItems: 'center',
-      zIndex: 1,
+      zIndex: 10,
       position: 'absolute',
       bottom: 175,
       right: 32,
-      borderWidth: 1,
-      borderColor: colors.primary.default,
+      boxShadow: `0px 3px 8px ${bgColor}`,
     },
     footerHelpText: {
       marginTop: 16,
-      marginBottom: 4,
       textAlign: 'center',
       color: colors.text.alternative,
       ...(typography.sBodySM as TextStyle),
diff --git a/app/component-library/components/Modals/ModalMandatory/ModalMandatory.tsx b/app/component-library/components/Modals/ModalMandatory/ModalMandatory.tsx
index 443f2c137b17..15ecdb02d1c6 100644
--- a/app/component-library/components/Modals/ModalMandatory/ModalMandatory.tsx
+++ b/app/component-library/components/Modals/ModalMandatory/ModalMandatory.tsx
@@ -12,7 +12,7 @@ import { WebView } from '@metamask/react-native-webview';
 
 // External dependencies.
 import ButtonPrimary from '../../Buttons/Button/variants/ButtonPrimary';
-import Text from '../../Texts/Text';
+import Text, { TextVariant, TextColor } from '../../Texts/Text';
 import { useStyles } from '../../../hooks';
 import { useTheme } from '../../../../util/theme';
 import ReusableModal, {
@@ -21,7 +21,6 @@ import ReusableModal, {
 import Checkbox from '../../../../component-library/components/Checkbox';
 import { IconName } from '../../../../component-library/components/Icons/Icon';
 import ButtonIcon from '../../../../component-library/components/Buttons/ButtonIcon';
-
 // Internal dependencies
 import {
   WEBVIEW_SCROLL_END_EVENT,
@@ -122,14 +121,29 @@ const ModalMandatory = ({ route }: MandatoryModalProps) => {
     };
   }, []);
 
-  const renderHeader = () => (
-    <Text style={styles.headerText}>{headerTitle}</Text>
-  );
-
   const onPress = () => {
     modalRef.current?.dismissModal(onAccept);
   };
 
+  const onClose = () => {
+    modalRef.current?.dismissModal();
+  };
+
+  const renderHeader = () => (
+    <View style={styles.headerContainer}>
+      <View style={styles.headerEmpty} />
+      <Text variant={TextVariant.HeadingMD} color={TextColor.Default}>
+        {headerTitle}
+      </Text>
+      <ButtonIcon
+        testID={TermsOfUseModalSelectorsIDs.SCROLL_ARROW_BUTTON}
+        onPress={onClose}
+        iconName={IconName.Close}
+        hitSlop={12}
+      />
+    </View>
+  );
+
   const onMessage = (event: { nativeEvent: { data: string } }) => {
     if (event.nativeEvent.data === WEBVIEW_SCROLL_END_EVENT) {
       setIsScrollEnded(true);
@@ -152,6 +166,7 @@ const ModalMandatory = ({ route }: MandatoryModalProps) => {
         testID={TermsOfUseModalSelectorsIDs.SCROLL_ARROW_BUTTON}
         onPress={scrollToEnd}
         iconName={IconName.ArrowDown}
+        iconColor={colors.primary.default}
         hitSlop={12}
       />
     </View>
@@ -247,7 +262,9 @@ const ModalMandatory = ({ route }: MandatoryModalProps) => {
           testID={TermsOfUseModalSelectorsIDs.CHECKBOX}
         >
           <Checkbox onPress={handleSelect} isChecked={isCheckboxSelected} />
-          <Text style={styles.checkboxText}>{checkboxText}</Text>
+          <Text variant={TextVariant.BodySMMedium} color={TextColor.Default}>
+            {checkboxText}
+          </Text>
         </TouchableOpacity>
         <ButtonPrimary
           label={buttonText}
@@ -265,7 +282,13 @@ const ModalMandatory = ({ route }: MandatoryModalProps) => {
         />
         {isScrollToEndNeeded && renderScrollEndButton()}
         {footerHelpText ? (
-          <Text style={styles.footerHelpText}>{footerHelpText}</Text>
+          <Text
+            style={styles.footerHelpText}
+            variant={TextVariant.BodySM}
+            color={TextColor.Alternative}
+          >
+            {footerHelpText}
+          </Text>
         ) : null}
       </View>
     </ReusableModal>
diff --git a/app/component-library/components/Texts/Text/Text.types.ts b/app/component-library/components/Texts/Text/Text.types.ts
index e32d7daf3062..d821b882f2ba 100644
--- a/app/component-library/components/Texts/Text/Text.types.ts
+++ b/app/component-library/components/Texts/Text/Text.types.ts
@@ -37,6 +37,7 @@ export enum TextColor {
   ErrorAlternative = 'ErrorAlternative',
   Warning = 'Warning',
   Info = 'Info',
+  Link = 'Link',
 }
 
 export type FontWeight =
diff --git a/app/components/Nav/App/App.tsx b/app/components/Nav/App/App.tsx
index e6338b0ff5db..5b5332bdb8d0 100644
--- a/app/components/Nav/App/App.tsx
+++ b/app/components/Nav/App/App.tsx
@@ -134,6 +134,10 @@ import ImportNewSecretRecoveryPhrase from '../../Views/ImportNewSecretRecoveryPh
 import { SelectSRPBottomSheet } from '../../Views/SelectSRP/SelectSRPBottomSheet';
 ///: END:ONLY_INCLUDE_IF
 import NavigationService from '../../../core/NavigationService';
+import OnboardingSheet from '../../Views/OnboardingSheet';
+import SeedphraseModal from '../../UI/SeedphraseModal';
+import SkipAccountSecurityModal from '../../UI/SkipAccountSecurityModal';
+import SuccessErrorSheet from '../../Views/SuccessErrorSheet';
 import ConfirmTurnOnBackupAndSyncModal from '../../UI/Identity/ConfirmTurnOnBackupAndSyncModal/ConfirmTurnOnBackupAndSyncModal';
 import AddNewAccount from '../../Views/AddNewAccount';
 import SwitchAccountTypeModal from '../../Views/confirmations/components/modals/switch-account-type-modal';
@@ -334,6 +338,22 @@ const RootModalFlow = (
       name={Routes.MODAL.MODAL_MANDATORY}
       component={ModalMandatory}
     />
+    <Stack.Screen
+      name={Routes.SHEET.ONBOARDING_SHEET}
+      component={OnboardingSheet}
+    />
+    <Stack.Screen
+      name={Routes.SHEET.SEEDPHRASE_MODAL}
+      component={SeedphraseModal}
+    />
+    <Stack.Screen
+      name={Routes.SHEET.SKIP_ACCOUNT_SECURITY_MODAL}
+      component={SkipAccountSecurityModal}
+    />
+    <Stack.Screen
+      name={Routes.SHEET.SUCCESS_ERROR_SHEET}
+      component={SuccessErrorSheet}
+    />
     <Stack.Screen
       name={Routes.SHEET.ACCOUNT_SELECTOR}
       component={AccountSelector}
diff --git a/app/components/Nav/Main/MainNavigator.js b/app/components/Nav/Main/MainNavigator.js
index 2283808529f0..588d22955cc6 100644
--- a/app/components/Nav/Main/MainNavigator.js
+++ b/app/components/Nav/Main/MainNavigator.js
@@ -94,6 +94,7 @@ import { StakeModalStack, StakeScreenStack } from '../../UI/Stake/routes';
 import { AssetLoader } from '../../Views/AssetLoader';
 import { BridgeTransactionDetails } from '../../UI/Bridge/components/TransactionDetails/TransactionDetails';
 import { BridgeModalStack, BridgeScreenStack } from '../../UI/Bridge/routes';
+import PasswordHint from '../../Views/PasswordHint';
 import TurnOnBackupAndSync from '../../Views/Identity/TurnOnBackupAndSync/TurnOnBackupAndSync';
 
 const Stack = createStackNavigator();
@@ -388,6 +389,11 @@ const SettingsFlow = () => (
       component={ResetPassword}
       options={ResetPassword.navigationOptions}
     />
+    <Stack.Screen
+      name="PasswordHint"
+      component={PasswordHint}
+      options={PasswordHint.navigationOptions}
+    />
     <Stack.Screen
       name="AccountBackupStep1B"
       component={AccountBackupStep1B}
diff --git a/app/components/Nav/Main/index.js b/app/components/Nav/Main/index.js
index fb31bdca03f7..c2b7ebe1c79e 100644
--- a/app/components/Nav/Main/index.js
+++ b/app/components/Nav/Main/index.js
@@ -91,6 +91,7 @@ import { getGlobalEthQuery } from '../../../util/networks/global-network';
 import { selectIsEvmNetworkSelected } from '../../../selectors/multichainNetworkController';
 import { isPortfolioViewEnabled } from '../../../util/networks';
 import { useIdentityEffects } from '../../../util/identity/hooks/useIdentityEffects/useIdentityEffects';
+import Routes from '../../../constants/navigation/Routes';
 
 const Stack = createStackNavigator();
 
@@ -210,6 +211,20 @@ const Main = (props) => {
 
   const toggleRemindLater = () => {
     setShowRemindLaterModal(!showRemindLaterModal);
+    props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.SKIP_ACCOUNT_SECURITY_MODAL,
+      params: {
+        onConfirm: () => {
+          props.navigation.navigate('SetPasswordFlow', {
+            screen: 'AccountBackupStep1B',
+            params: { ...props.route.params },
+          });
+        },
+        onCancel: () => {
+          toggleRemindLater();
+        },
+      },
+    });
   };
 
   const toggleSkipCheckbox = () => {
@@ -435,21 +450,21 @@ const Main = (props) => {
         <Notification navigation={props.navigation} />
         <RampOrders />
         <SwapsLiveness />
-        <BackupAlert
+        {/* <BackupAlert
           onDismiss={toggleRemindLater}
           navigation={props.navigation}
-        />
+        /> */}
         {renderDeprecatedNetworkAlert(
           props.chainId,
           props.backUpSeedphraseVisible,
         )}
-        <SkipAccountSecurityModal
+        {/* <SkipAccountSecurityModal
           modalVisible={showRemindLaterModal}
           onCancel={skipAccountModalSecureNow}
           onConfirm={skipAccountModalSkip}
           skipCheckbox={skipCheckbox}
           toggleSkipCheckbox={toggleSkipCheckbox}
-        />
+        /> */}
         <ProtectYourWalletModal navigation={props.navigation} />
         <RootRPCMethodsUI navigation={props.navigation} />
       </View>
diff --git a/app/components/UI/ActionView/index.js b/app/components/UI/ActionView/index.js
index 9602454d7812..b760bd57bb0b 100644
--- a/app/components/UI/ActionView/index.js
+++ b/app/components/UI/ActionView/index.js
@@ -21,19 +21,36 @@ export const ConfirmButtonState = {
 
 const getStyles = (colors) =>
   StyleSheet.create({
+    root: {
+      flex: 1,
+    },
+    actionView: {
+      flexDirection: 'column',
+      flex: 1,
+      height: '100%',
+    },
+    container: {
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+    },
     actionContainer: {
-      flex: 0,
+      width: '100%',
       flexDirection: 'row',
-      paddingVertical: 16,
-      paddingHorizontal: 24,
+      justifyContent: 'flex-end',
+      marginBottom: 16,
+      paddingHorizontal: 16,
     },
     button: {
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
       flex: 1,
     },
     cancel: {
       marginRight: 8,
     },
     confirm: {
+      marginTop: 'auto',
       marginLeft: 8,
     },
     confirmButtonError: {
@@ -68,6 +85,7 @@ export default function ActionView({
   style = undefined,
   confirmButtonState = ConfirmButtonState.Normal,
   scrollViewTestID,
+  buttonContainerStyle,
   contentContainerStyle,
 }) {
   const { colors } = useTheme();
@@ -76,66 +94,68 @@ export default function ActionView({
   const styles = getStyles(colors);
 
   return (
-    <View style={baseStyles.flexGrow}>
+    <View style={[baseStyles.flexGrow, styles.actionView]}>
       <KeyboardAwareScrollView
-        style={[baseStyles.flexGrow, style]}
+        style={[baseStyles.flexGrow, style, styles.actionView]}
         resetScrollToCoords={{ x: 0, y: 0 }}
         keyboardShouldPersistTaps={keyboardShouldPersistTaps}
         testID={scrollViewTestID}
         contentContainerStyle={contentContainerStyle}
       >
-        <TouchableWithoutFeedback
-          style={baseStyles.flexGrow}
-          // eslint-disable-next-line react/jsx-no-bind
-          onPress={() => {
-            if (keyboardShouldPersistTaps === 'handled') {
-              Keyboard.dismiss();
-            }
-            onTouchablePress && onTouchablePress();
-          }}
-        >
-          {children}
-        </TouchableWithoutFeedback>
+        <View style={styles.container}>
+          <TouchableWithoutFeedback
+            style={[baseStyles.flexGrow, styles.actionView]}
+            // eslint-disable-next-line react/jsx-no-bind
+            onPress={() => {
+              if (keyboardShouldPersistTaps === 'handled') {
+                Keyboard.dismiss();
+              }
+              onTouchablePress && onTouchablePress();
+            }}
+          >
+            {children}
+          </TouchableWithoutFeedback>
 
-        <View style={styles.actionContainer}>
-          {showCancelButton && (
-            <StyledButton
-              testID={cancelTestID}
-              type={confirmButtonMode === 'sign' ? 'signingCancel' : 'cancel'}
-              onPress={onCancelPress}
-              containerStyle={[styles.button, styles.cancel]}
-              disabled={confirmed}
-            >
-              {cancelText}
-            </StyledButton>
-          )}
-          {showConfirmButton && (
-            <StyledButton
-              testID={confirmTestID}
-              type={confirmButtonMode}
-              onPress={onConfirmPress}
-              containerStyle={[
-                styles.button,
-                styles.confirm,
-                confirmButtonState === ConfirmButtonState.Error
-                  ? styles.confirmButtonError
-                  : {},
-                confirmButtonState === ConfirmButtonState.Warning
-                  ? styles.confirmButtonWarning
-                  : {},
-              ]}
-              disabled={confirmed || confirmDisabled || loading}
-            >
-              {confirmed || loading ? (
-                <ActivityIndicator
-                  size="small"
-                  color={colors.primary.default}
-                />
-              ) : (
-                confirmText
-              )}
-            </StyledButton>
-          )}
+          <View style={[styles.actionContainer, buttonContainerStyle]}>
+            {showCancelButton && (
+              <StyledButton
+                testID={cancelTestID}
+                type={confirmButtonMode === 'sign' ? 'signingCancel' : 'cancel'}
+                onPress={onCancelPress}
+                containerStyle={[styles.button, styles.cancel]}
+                disabled={confirmed}
+              >
+                {cancelText}
+              </StyledButton>
+            )}
+            {showConfirmButton && (
+              <StyledButton
+                testID={confirmTestID}
+                type={confirmButtonMode}
+                onPress={onConfirmPress}
+                containerStyle={[
+                  styles.button,
+                  styles.confirm,
+                  confirmButtonState === ConfirmButtonState.Error
+                    ? styles.confirmButtonError
+                    : {},
+                  confirmButtonState === ConfirmButtonState.Warning
+                    ? styles.confirmButtonWarning
+                    : {},
+                ]}
+                disabled={confirmed || confirmDisabled || loading}
+              >
+                {confirmed || loading ? (
+                  <ActivityIndicator
+                    size="small"
+                    color={colors.primary.default}
+                  />
+                ) : (
+                  confirmText
+                )}
+              </StyledButton>
+            )}
+          </View>
         </View>
       </KeyboardAwareScrollView>
     </View>
@@ -229,6 +249,10 @@ ActionView.propTypes = {
    * Optional TestID for the parent scroll View
    */
   scrollViewTestID: PropTypes.string,
+  /**
+   * Optional View styles. Applies to action container
+   */
+  buttonContainerStyle: PropTypes.object,
   /**
    * Optional View styles. Applies to scroll view
    */
diff --git a/app/components/UI/BackupAlert/BackupAlert.tsx b/app/components/UI/BackupAlert/BackupAlert.tsx
index 134de7ca2dff..3607da8a92a7 100644
--- a/app/components/UI/BackupAlert/BackupAlert.tsx
+++ b/app/components/UI/BackupAlert/BackupAlert.tsx
@@ -64,7 +64,7 @@ const BackupAlert = ({ navigation, onDismiss }: BackupAlertI) => {
   useEffect(() => {
     const isInBrowserView = currentRouteName === BROWSER_ROUTE;
     const blockedView =
-      BLOCKED_LIST.find((path) => currentRouteName.includes(path)) ||
+      BLOCKED_LIST.find((path) => currentRouteName?.includes(path)) ||
       currentRouteName === 'SetPasswordFlow';
 
     setInBrowserView(isInBrowserView);
@@ -74,7 +74,8 @@ const BackupAlert = ({ navigation, onDismiss }: BackupAlertI) => {
   const goToBackupFlow = () => {
     setIsVisible(false);
     navigation.navigate('SetPasswordFlow', {
-      screen: 'AccountBackupStep1',
+      screen: 'ManualBackupStep1',
+      params: { backupFlow: true },
     });
 
     trackEvent(
diff --git a/app/components/UI/BiometryButton/BiometryButton.tsx b/app/components/UI/BiometryButton/BiometryButton.tsx
index 1505e5463f7c..15087036c67d 100644
--- a/app/components/UI/BiometryButton/BiometryButton.tsx
+++ b/app/components/UI/BiometryButton/BiometryButton.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import { TouchableOpacity, Image as ImageRN, Platform } from 'react-native';
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
-import Ionicons from 'react-native-vector-icons/Ionicons';
 import { useTheme } from '../../../util/theme';
 import { BIOMETRY_TYPE } from 'react-native-keychain';
 import AUTHENTICATION_TYPE from '../../../constants/userProperties';
 import { createStyles } from './styles';
+import Icon, {
+  IconName,
+  IconSize,
+  IconColor,
+} from '../../../component-library/components/Icons/Icon';
 import { LoginViewSelectors } from '../../../../e2e/selectors/wallet/LoginView.selectors';
 
 /* eslint-disable @typescript-eslint/no-require-imports */
@@ -35,21 +38,23 @@ const BiometryButton = ({
     if (Platform.OS === 'ios') {
       if (type === BIOMETRY_TYPE.TOUCH_ID) {
         return (
-          <Ionicons
-            color={colors.text.default}
-            size={28}
+          <Icon
+            color={IconColor.Default}
+            size={IconSize.Lg}
             style={styles.fixCenterIcon}
-            name="finger-print"
+            name={IconName.ScanFocus}
+            // TODO name="ios-finger-print"
             testID={LoginViewSelectors.IOS_TOUCH_ID_ICON}
           />
         );
       } else if (type?.includes(AUTHENTICATION_TYPE.PASSCODE)) {
         return (
-          <Ionicons
-            color={colors.text.default}
-            size={28}
+          <Icon
+            color={IconColor.Default}
+            size={IconSize.Lg}
             style={styles.fixCenterIcon}
-            name="lock"
+            // TODO: check correct icon
+            name={IconName.Lock}
             testID={LoginViewSelectors.IOS_PASSCODE_ICON}
           />
         );
@@ -66,11 +71,12 @@ const BiometryButton = ({
     if (Platform.OS === 'android') {
       if (type === BIOMETRY_TYPE.FINGERPRINT) {
         return (
-          <MaterialIcon
-            color={colors.text.default}
+          <Icon
+            color={IconColor.Default}
             style={styles.fixCenterIcon}
-            size={28}
-            name="fingerprint"
+            size={IconSize.Lg}
+            name={IconName.Scan}
+            // name="fingerprint"
             testID={LoginViewSelectors.ANDROID_FINGERPRINT_ICON}
           />
         );
@@ -92,11 +98,11 @@ const BiometryButton = ({
         );
       } else if (type?.includes(AUTHENTICATION_TYPE.PASSCODE)) {
         return (
-          <MaterialIcon
-            color={colors.text.default}
+          <Icon
+            color={IconColor.Default}
             style={styles.fixCenterIcon}
-            size={28}
-            name="lock"
+            size={IconSize.Lg}
+            name={IconName.Lock}
             testID={LoginViewSelectors.ANDROID_PASSCODE_ICON}
           />
         );
@@ -104,11 +110,12 @@ const BiometryButton = ({
     }
 
     return (
-      <Ionicons
-        color={colors.text.default}
+      <Icon
+        color={IconColor.Default}
         style={styles.fixCenterIcon}
-        size={28}
-        name="finger-print"
+        size={IconSize.Lg}
+        // TODO: replace with name="finger-print"
+        name={IconName.Scan}
         testID={LoginViewSelectors.FALLBACK_FINGERPRINT_ICON}
       />
     );
diff --git a/app/components/UI/Carousel/constants.ts b/app/components/UI/Carousel/constants.ts
index d0fd7af1a1ca..efc84281c5e8 100644
--- a/app/components/UI/Carousel/constants.ts
+++ b/app/components/UI/Carousel/constants.ts
@@ -138,6 +138,7 @@ export const BANNER_IMAGES: Record<SlideId, ImageSourcePropType> = {
   ///: BEGIN:ONLY_INCLUDE_IF(multi-srp)
   multisrp: multiSrpImage,
   ///: END:ONLY_INCLUDE_IF
+  secure: cardImage,
   backupAndSync: backupAndSyncImage,
   ///: BEGIN:ONLY_INCLUDE_IF(solana)
   solana: solanaImage,
diff --git a/app/components/UI/Carousel/types.ts b/app/components/UI/Carousel/types.ts
index cb85d1e8d065..cff1d40aba16 100644
--- a/app/components/UI/Carousel/types.ts
+++ b/app/components/UI/Carousel/types.ts
@@ -1,13 +1,14 @@
 import { ViewStyle } from 'react-native';
-
 import { WalletClientType } from '../../../core/SnapKeyring/MultichainWalletSnapClient';
 import { CaipChainId } from '@metamask/utils';
+
 export type SlideId =
   | 'card'
   | 'fund'
   | 'cashout'
   | 'aggregated'
   | 'multisrp'
+  | 'secure'
   | 'backupAndSync'
   | 'solana';
 
diff --git a/app/components/UI/DeleteWalletModal/index.tsx b/app/components/UI/DeleteWalletModal/index.tsx
index abbbbc4964f5..41f9aa4d277a 100644
--- a/app/components/UI/DeleteWalletModal/index.tsx
+++ b/app/components/UI/DeleteWalletModal/index.tsx
@@ -1,23 +1,12 @@
 import React, { useState, useRef } from 'react';
-import {
-  View,
-  Text,
-  TouchableWithoutFeedback,
-  Keyboard,
-  InteractionManager,
-  UIManager,
-  LayoutAnimation,
-  Platform,
-} from 'react-native';
+import { View, InteractionManager, UIManager } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import {
-  OutlinedTextField,
-  TextFieldProps,
-} from 'react-native-material-textfield';
+import Icon, {
+  IconName,
+  IconSize,
+  IconColor,
+} from '../../../component-library/components/Icons/Icon';
 import { createStyles } from './styles';
-import ReusableModal, { ReusableModalRef } from '../ReusableModal';
-import WarningExistingUserModal from '../WarningExistingUserModal';
 import { useDeleteWallet } from '../../hooks/DeleteWallet';
 import { strings } from '../../../../locales/i18n';
 import { tlc } from '../../../util/general';
@@ -25,17 +14,32 @@ import { useTheme } from '../../../util/theme';
 import Device from '../../../util/device';
 import Routes from '../../../constants/navigation/Routes';
 import { DeleteWalletModalSelectorsIDs } from '../../../../e2e/selectors/Settings/SecurityAndPrivacy/DeleteWalletModal.selectors';
-import generateTestId from '../../../../wdio/utils/generateTestId';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { useDispatch, useSelector } from 'react-redux';
 import { clearHistory } from '../../../actions/browser';
 import CookieManager from '@react-native-cookies/cookies';
 import { RootState } from '../../../reducers';
+import BottomSheet, {
+  BottomSheetRef,
+} from '../../../component-library/components/BottomSheets/BottomSheet';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../component-library/components/Texts/Text';
+import TextField, {
+  TextFieldSize,
+} from '../../../component-library/components/Form/TextField';
+import Label from '../../../component-library/components/Form/Label';
+import Button, {
+  ButtonVariants,
+  ButtonSize,
+  ButtonWidthTypes,
+} from '../../../component-library/components/Buttons/Button';
 import { useSignOut } from '../../../util/identity/hooks/useAuthentication';
 import { setCompletedOnboarding } from '../../../actions/onboarding';
 
-const DELETE_KEYWORD = 'delete';
+const ERASE_KEYWORD = 'erase';
 
 if (Device.isAndroid() && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -47,9 +51,8 @@ const DeleteWalletModal = () => {
   const { trackEvent, createEventBuilder, isEnabled } = useMetrics();
   const styles = createStyles(colors);
 
-  const modalRef = useRef<ReusableModalRef>(null);
+  const modalRef = useRef<BottomSheetRef>(null);
 
-  const [showConfirm, setShowConfirm] = useState<boolean>(false);
   const [deleteText, setDeleteText] = useState<string>('');
   const [disableButton, setDisableButton] = useState<boolean>(true);
 
@@ -61,20 +64,20 @@ const DeleteWalletModal = () => {
 
   const { signOut } = useSignOut();
 
-  const showConfirmModal = () => {
-    setShowConfirm(true);
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  };
+  // const showConfirmModal = () => {
+  //   setShowConfirm(true);
+  //   LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+  // };
 
-  const isTextDelete = (text: string) => tlc(text) === DELETE_KEYWORD;
+  const isTextErase = (text: string) => tlc(text) === ERASE_KEYWORD;
 
-  const checkDelete = (text: string) => {
+  const checkErase = (text: string) => {
     setDeleteText(text);
-    setDisableButton(!isTextDelete(text));
+    setDisableButton(!isTextErase(text));
   };
 
   const dismissModal = (cb?: () => void): void =>
-    modalRef?.current?.dismissModal(cb);
+    modalRef?.current?.onCloseBottomSheet(cb);
 
   const triggerClose = (): void => dismissModal();
 
@@ -120,85 +123,84 @@ const DeleteWalletModal = () => {
   };
 
   return (
-    <ReusableModal ref={modalRef}>
-      {showConfirm ? (
-        <WarningExistingUserModal
-          warningModalVisible
-          cancelText={strings('login.delete_my')}
-          cancelTestID={DeleteWalletModalSelectorsIDs.DELETE_PERMANENTLY_BUTTON}
-          confirmTestID={DeleteWalletModalSelectorsIDs.DELETE_CANCEL_BUTTON}
-          cancelButtonDisabled={disableButton}
-          onCancelPress={deleteWallet}
-          onRequestClose={triggerClose}
-          onConfirmPress={triggerClose}
-        >
-          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-            <View style={styles.areYouSure}>
-              <Text style={[styles.heading, styles.delete]}>
-                {strings('login.type_delete', {
-                  [DELETE_KEYWORD]: DELETE_KEYWORD,
-                })}
-              </Text>
-              <OutlinedTextField
-                style={styles.input as TextFieldProps}
-                {...generateTestId(
-                  Platform,
-                  DeleteWalletModalSelectorsIDs.INPUT,
-                )}
-                autoFocus
-                returnKeyType={'done'}
-                onChangeText={checkDelete}
-                autoCapitalize="none"
-                value={deleteText}
-                baseColor={colors.border.default}
-                tintColor={colors.primary.default}
-                placeholderTextColor={colors.text.muted}
-                keyboardAppearance={themeAppearance}
-              />
-            </View>
-          </TouchableWithoutFeedback>
-        </WarningExistingUserModal>
-      ) : (
-        <WarningExistingUserModal
-          warningModalVisible
-          cancelText={strings('login.i_understand')}
-          onCancelPress={showConfirmModal}
-          onRequestClose={triggerClose}
-          onConfirmPress={triggerClose}
-          cancelTestID={DeleteWalletModalSelectorsIDs.CONTINUE_BUTTON}
-          confirmTestID={DeleteWalletModalSelectorsIDs.CANCEL_BUTTON}
+    <BottomSheet ref={modalRef}>
+      <View style={styles.container}>
+        <View
+          style={styles.areYouSure}
+          testID={DeleteWalletModalSelectorsIDs.CONTAINER}
         >
-          <View
-            style={styles.areYouSure}
-            testID={DeleteWalletModalSelectorsIDs.CONTAINER}
+          {
+            <Icon
+              style={styles.warningIcon}
+              size={IconSize.Xl}
+              color={IconColor.Error}
+              name={IconName.Danger}
+            />
+          }
+          <Text
+            style={styles.heading}
+            variant={TextVariant.HeadingMD}
+            color={TextColor.Default}
           >
-            {
-              <Icon
-                style={styles.warningIcon}
-                size={46}
-                color={colors.error.default}
-                name="exclamation-triangle"
-              />
-            }
-            <Text style={[styles.heading, styles.red]}>
-              {strings('login.are_you_sure')}
+            {strings('login.are_you_sure')}
+          </Text>
+          <View style={styles.warningTextContainer}>
+            <Text
+              style={styles.warningText}
+              variant={TextVariant.BodyMD}
+              color={TextColor.Default}
+            >
+              {strings('login.your_current_wallet')}{' '}
+              <Text
+                style={styles.warningText}
+                variant={TextVariant.BodyMDMedium}
+                color={TextColor.Default}
+              >
+                {strings('login.removed_from')}
+              </Text>{' '}
+              <Text variant={TextVariant.BodyMD} color={TextColor.Default}>
+                {strings('login.this_action')}
+              </Text>
             </Text>
             <Text style={styles.warningText}>
-              <Text>{strings('login.your_current_wallet')}</Text>
-              <Text style={styles.bold}>{strings('login.removed_from')}</Text>
-              <Text>{strings('login.this_action')}</Text>
-            </Text>
-            <Text style={[styles.warningText]}>
-              <Text>{strings('login.you_can_only')}</Text>
-              <Text style={styles.bold}>
-                {strings('login.recovery_phrase')}
-              </Text>
-              <Text>{strings('login.metamask_does_not')}</Text>
+              {strings('login.you_can_only')}
             </Text>
           </View>
-        </WarningExistingUserModal>
-      )}
-    </ReusableModal>
+          <View style={styles.inputContainer}>
+            <Label variant={TextVariant.BodyMDMedium} color={TextColor.Default}>
+              {strings('login.type_delete', {
+                [ERASE_KEYWORD]: ERASE_KEYWORD,
+              })}
+            </Label>
+            <TextField
+              size={TextFieldSize.Lg}
+              onChangeText={checkErase}
+              autoCapitalize="none"
+              value={deleteText}
+              keyboardAppearance={themeAppearance}
+            />
+          </View>
+          <View style={styles.buttonContainer}>
+            <Button
+              variant={ButtonVariants.Primary}
+              size={ButtonSize.Lg}
+              onPress={deleteWallet}
+              label={strings('login.erase_my')}
+              width={ButtonWidthTypes.Full}
+              isDanger
+              isDisabled={disableButton}
+            />
+            <Button
+              variant={ButtonVariants.Secondary}
+              size={ButtonSize.Lg}
+              onPress={triggerClose}
+              label={strings('login.cancel')}
+              width={ButtonWidthTypes.Full}
+            />
+          </View>
+        </View>
+      </View>
+    </BottomSheet>
   );
 };
 
diff --git a/app/components/UI/DeleteWalletModal/styles.ts b/app/components/UI/DeleteWalletModal/styles.ts
index b0a7e893a01a..eb197fafd1a9 100644
--- a/app/components/UI/DeleteWalletModal/styles.ts
+++ b/app/components/UI/DeleteWalletModal/styles.ts
@@ -1,48 +1,57 @@
 /* eslint-disable import/prefer-default-export */
 import { fontStyles } from '../../../styles/common';
 import { StyleSheet } from 'react-native';
-import Device from '../../../util/device';
+// import Device from '../../../util/device';
 
-const breakPoint = Device.getDeviceHeight() < 700;
+// const breakPoint = Device.getDeviceHeight() < 700;
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const createStyles = (colors: any) =>
   StyleSheet.create({
+    container: {
+      flexDirection: 'column',
+      rowGap: 24,
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      width: '100%',
+      paddingHorizontal: 16,
+    },
     bottomModal: {
       justifyContent: 'flex-end',
       margin: 0,
     },
     areYouSure: {
+      paddingVertical: 24,
       width: '100%',
-      padding: breakPoint ? 16 : 24,
       justifyContent: 'center',
       alignSelf: 'center',
+      flexDirection: 'column',
+      rowGap: 16,
     },
     warningIcon: {
       alignSelf: 'center',
-      color: colors.error.default,
-      marginVertical: 10,
     },
     heading: {
-      marginHorizontal: 6,
-      color: colors.text.default,
-      ...fontStyles.bold,
-      fontSize: 20,
       textAlign: 'center',
-      lineHeight: breakPoint ? 24 : 26,
+      width: '80%',
+      marginLeft: 'auto',
+      marginRight: 'auto',
     },
     red: {
       marginHorizontal: 24,
       color: colors.error.default,
     },
     warningText: {
-      ...fontStyles.normal,
-      textAlign: 'center',
-      fontSize: 14,
-      lineHeight: breakPoint ? 18 : 22,
-      color: colors.text.default,
-      marginTop: 20,
+      textAlign: 'left',
+      width: '100%',
+    },
+    warningTextContainer: {
+      flexDirection: 'column',
+      rowGap: 24,
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      width: '100%',
     },
     bold: {
       ...fontStyles.bold,
@@ -64,4 +73,22 @@ export const createStyles = (colors: any) =>
       marginTop: 10,
       color: colors.error.default,
     },
+    inputContainer: {
+      flexDirection: 'column',
+      rowGap: 2,
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      width: '100%',
+    },
+    buttonContainer: {
+      flexDirection: 'column',
+      rowGap: 16,
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      width: '100%',
+      marginTop: 24,
+    },
+    deleteButton: {
+      backgroundColor: colors.error.default,
+    },
   });
diff --git a/app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.tsx b/app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.tsx
index 0349eb3004e6..06bc82a1a315 100644
--- a/app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.tsx
+++ b/app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.tsx
@@ -1,11 +1,9 @@
 import React, { useCallback, useState } from 'react';
-import { Switch, Text, View } from 'react-native';
 import { strings } from '../../../../locales/i18n';
 import { AUTHENTICATION_TYPE, BIOMETRY_TYPE } from 'react-native-keychain';
-import { createStyles } from './styles';
 import { LoginViewSelectors } from '../../../../e2e/selectors/wallet/LoginView.selectors';
 import { useSelector } from 'react-redux';
-import { useTheme } from '../../../util/theme';
+import SecurityOptionToggle from '../SecurityOptionToggle/SecurityOptionToggle';
 
 interface Props {
   shouldRenderBiometricOption:
@@ -30,9 +28,6 @@ const LoginOptionsSwitch = ({
   onUpdateBiometryChoice,
   onUpdateRememberMe,
 }: Props) => {
-  const theme = useTheme();
-  const { colors } = theme;
-  const styles = createStyles(colors);
   const allowLoginWithRememberMe = useSelector(
     // TODO: Replace "any" with type
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -56,44 +51,22 @@ const LoginOptionsSwitch = ({
   // if both are disabled then this component returns null
   if (shouldRenderBiometricOption !== null) {
     return (
-      <View style={styles.container}>
-        <Text style={styles.label}>
-          {strings(
-            `biometrics.enable_${shouldRenderBiometricOption.toLowerCase()}`,
-          )}
-        </Text>
-        <Switch
-          onValueChange={onBiometryValueChanged}
-          value={biometryChoiceState}
-          style={styles.switch}
-          trackColor={{
-            true: colors.primary.default,
-            false: colors.border.muted,
-          }}
-          thumbColor={theme.brandColors.white}
-          ios_backgroundColor={colors.border.muted}
-        />
-      </View>
+      <SecurityOptionToggle
+        title={strings(
+          `biometrics.enable_${shouldRenderBiometricOption.toLowerCase()}`,
+        )}
+        value={biometryChoiceState}
+        onOptionUpdated={onBiometryValueChanged}
+      />
     );
   } else if (shouldRenderBiometricOption === null && allowLoginWithRememberMe) {
     return (
-      <View style={styles.container}>
-        <Text style={styles.label}>
-          {strings(`choose_password.remember_me`)}
-        </Text>
-        <Switch
-          onValueChange={onRememberMeValueChanged}
-          value={rememberMeEnabled}
-          style={styles.switch}
-          trackColor={{
-            true: colors.primary.default,
-            false: colors.border.muted,
-          }}
-          thumbColor={theme.brandColors.white}
-          ios_backgroundColor={colors.border.muted}
-          testID={LoginViewSelectors.REMEMBER_ME_SWITCH}
-        />
-      </View>
+      <SecurityOptionToggle
+        title={strings('choose_password.remember_me')}
+        value={rememberMeEnabled}
+        onOptionUpdated={onRememberMeValueChanged}
+        testId={LoginViewSelectors.REMEMBER_ME_SWITCH}
+      />
     );
   }
   return null;
diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js
index af4f97817f18..9e17a845356c 100644
--- a/app/components/UI/Navbar/index.js
+++ b/app/components/UI/Navbar/index.js
@@ -642,10 +642,12 @@ export function getModalNavbarOptions(title) {
  */
 export function getOnboardingNavbarOptions(
   route,
-  { headerLeft } = {},
+  { headerLeft, headerRight },
   themeColors,
+  showLogo = true,
 ) {
-  const headerLeftHide = headerLeft || route.params?.headerLeft;
+  const headerLeftHide = headerLeft || route.params?.headerLeft || <View />;
+  const headerRightHide = headerRight;
   const innerStyles = StyleSheet.create({
     headerStyle: {
       backgroundColor: themeColors.background.default,
@@ -661,17 +663,19 @@ export function getOnboardingNavbarOptions(
 
   return {
     headerStyle: innerStyles.headerStyle,
-    headerTitle: () => (
-      <View style={styles.metamaskNameTransparentWrapper}>
-        <Image
-          source={metamask_name}
-          style={innerStyles.metamaskName}
-          resizeMethod={'auto'}
-        />
-      </View>
-    ),
-    headerBackTitle: strings('navigation.back'),
-    headerRight: () => <View />,
+    headerTitle: showLogo
+      ? () => (
+          <View style={styles.metamaskNameTransparentWrapper}>
+            <Image
+              source={metamask_name}
+              style={innerStyles.metamaskName}
+              resizeMethod={'auto'}
+            />
+          </View>
+        )
+      : null,
+    // headerBackTitle: strings('navigation.back'),
+    headerRight: headerRightHide,
     headerLeft: headerLeftHide,
     headerTintColor: themeColors.primary.default,
   };
@@ -682,10 +686,54 @@ export function getOnboardingNavbarOptions(
  *
  * @returns {Object} - Corresponding navbar options containing headerTitle
  */
-export function getTransparentOnboardingNavbarOptions(themeColors) {
+export function getTransparentOnboardingNavbarOptions(
+  themeColors,
+  showLogo = true,
+  color,
+) {
   const innerStyles = StyleSheet.create({
     headerStyle: {
-      backgroundColor: themeColors.background.default,
+      backgroundColor: color || themeColors.background.default,
+      shadowColor: importedColors.transparent,
+      elevation: 0,
+    },
+    metamaskName: {
+      width: 70,
+      height: 35,
+      tintColor: themeColors.text.default,
+    },
+  });
+  return {
+    headerTitle: () =>
+      showLogo ? (
+        <View style={styles.metamaskNameTransparentWrapper}>
+          <Image
+            source={metamask_name}
+            style={innerStyles.metamaskName}
+            resizeMethod={'auto'}
+          />
+        </View>
+      ) : null,
+    headerLeft: () => <View />,
+    headerRight: () => <View />,
+    headerStyle: innerStyles.headerStyle,
+  };
+}
+
+/**
+ * Function that returns a Carousel navigation options for our onboarding screens.
+ *
+ * @returns {Object} - Corresponding navbar options containing headerTitle
+ * @param {Object} themeColors - The theme colors object
+ * @param {string} currentTabColor - The color of the current tab
+ */
+export function getOnboardingCarouselNavbarOptions(
+  themeColors,
+  currentTabColor,
+) {
+  const innerStyles = StyleSheet.create({
+    headerStyle: {
+      backgroundColor: currentTabColor,
       shadowColor: importedColors.transparent,
       elevation: 0,
     },
@@ -716,10 +764,10 @@ export function getTransparentOnboardingNavbarOptions(themeColors) {
  *
  * @returns {Object} - Corresponding navbar options containing headerTitle and a back button
  */
-export function getTransparentBackOnboardingNavbarOptions(themeColors) {
+export function getTransparentBackOnboardingNavbarOptions(themeColors, color) {
   const innerStyles = StyleSheet.create({
     headerStyle: {
-      backgroundColor: themeColors.background.default,
+      backgroundColor: color || themeColors.background.default,
       shadowColor: importedColors.transparent,
       elevation: 0,
     },
@@ -739,8 +787,9 @@ export function getTransparentBackOnboardingNavbarOptions(themeColors) {
         />
       </View>
     ),
-    headerBackTitle: strings('navigation.back'),
     headerRight: () => <View />,
+    headerBackTitle: strings('navigation.back'),
+    headerLeft: () => <View />,
     headerStyle: innerStyles.headerStyle,
     headerTintColor: themeColors.primary.default,
   };
@@ -752,7 +801,7 @@ export function getTransparentBackOnboardingNavbarOptions(themeColors) {
  *
  * @returns {Object} - Corresponding navbar options containing headerLeft
  */
-export function getOptinMetricsNavbarOptions(themeColors) {
+export function getOptinMetricsNavbarOptions(themeColors, showLogo = true) {
   const innerStyles = StyleSheet.create({
     headerStyle: {
       backgroundColor: themeColors.background.default,
@@ -766,17 +815,19 @@ export function getOptinMetricsNavbarOptions(themeColors) {
     },
   });
   return {
-    headerTitle: () => (
-      <View style={styles.metamaskNameTransparentWrapper}>
-        <Image
-          source={metamask_name}
-          style={innerStyles.metamaskName}
-          resizeMethod={'auto'}
-        />
-      </View>
-    ),
+    headerTitle: () =>
+      showLogo ? (
+        <View style={styles.metamaskNameTransparentWrapper}>
+          <Image
+            source={metamask_name}
+            style={innerStyles.metamaskName}
+            resizeMethod={'auto'}
+          />
+        </View>
+      ) : null,
     headerBackTitle: strings('navigation.back'),
     headerRight: () => <View />,
+    headerLeft: () => <View />,
     headerStyle: innerStyles.headerStyle,
     headerTintColor: themeColors.primary.default,
   };
diff --git a/app/components/UI/OnboardingScreenWithBg/index.tsx b/app/components/UI/OnboardingScreenWithBg/index.tsx
index 3fa42427ff40..ccf06c49c0fd 100644
--- a/app/components/UI/OnboardingScreenWithBg/index.tsx
+++ b/app/components/UI/OnboardingScreenWithBg/index.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import { StyleSheet, ImageBackground, View, ImageSourcePropType } from 'react-native';
+import {
+  StyleSheet,
+  ImageBackground,
+  View,
+  ImageSourcePropType,
+} from 'react-native';
 import { useTheme } from '../../../util/theme';
 import { Theme } from '@metamask/design-tokens';
 
@@ -48,16 +53,25 @@ interface OnboardingScreenWithBgProps {
    * or an Array with a combination of them
    */
   children: React.ReactNode;
+
+  /**
+   * Background color of the screen
+   */
+  backgroundColor?: string;
 }
 
-const OnboardingScreenWithBg: React.FC<OnboardingScreenWithBgProps> = ({ screen, children }) => {
+const OnboardingScreenWithBg: React.FC<OnboardingScreenWithBgProps> = ({
+  screen,
+  children,
+  backgroundColor,
+}) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
   const backgroundImage = images[screen];
 
   return (
-    <View style={styles.flex}>
+    <View style={[styles.flex, { backgroundColor }]}>
       {backgroundImage && (
         <ImageBackground
           source={backgroundImage}
diff --git a/app/components/UI/OptinMetrics/index.js b/app/components/UI/OptinMetrics/index.js
index f04904afa388..c1cc9c222435 100644
--- a/app/components/UI/OptinMetrics/index.js
+++ b/app/components/UI/OptinMetrics/index.js
@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
 import {
   View,
   SafeAreaView,
-  Text,
   StyleSheet,
   ScrollView,
   BackHandler,
@@ -12,7 +11,6 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { baseStyles, fontStyles } from '../../../styles/common';
-import Entypo from 'react-native-vector-icons/Entypo';
 import { getOptinMetricsNavbarOptions } from '../Navbar';
 import { strings } from '../../../../locales/i18n';
 import setOnboardingWizardStep from '../../../actions/wizard';
@@ -39,9 +37,16 @@ import Routes from '../../../constants/navigation/Routes';
 import generateDeviceAnalyticsMetaData, {
   UserSettingsAnalyticsMetaData as generateUserSettingsAnalyticsMetaData,
 } from '../../../util/metrics';
-import {
-  UserProfileProperty
-} from '../../../util/metrics/UserSettingsAnalyticsMetaData/UserProfileAnalyticsMetaData.types';
+import { UserProfileProperty } from '../../../util/metrics/UserSettingsAnalyticsMetaData/UserProfileAnalyticsMetaData.types';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../component-library/components/Texts/Text';
+import Icon, {
+  IconName,
+  IconSize,
+  IconColor,
+} from '../../../component-library/components/Icons/Icon';
 
 const createStyles = ({ colors }) =>
   StyleSheet.create({
@@ -49,65 +54,32 @@ const createStyles = ({ colors }) =>
       ...baseStyles.flexGrow,
       backgroundColor: colors.background.default,
     },
-    checkIcon: {
-      color: colors.success.default,
-    },
-    crossIcon: {
-      color: colors.error.default,
-    },
     checkbox: {
       display: 'flex',
       flexDirection: 'row',
-      alignItems: 'center',
-      gap: 15,
+      alignItems: 'flex-start',
+      gap: 16,
       marginRight: 25,
     },
-    icon: {
-      marginRight: 5,
-    },
     action: {
       flex: 0,
       flexDirection: 'row',
-      paddingVertical: 10,
-      alignItems: 'center',
-    },
-    title: {
-      ...fontStyles.bold,
-      color: colors.text.default,
-      fontSize: 22,
+      alignItems: 'flex-start',
+      gap: 16,
     },
     description: {
-      ...fontStyles.normal,
-      color: colors.text.default,
       flex: 1,
     },
-    descriptionBold: {
-      ...fontStyles.bold,
-    },
-    content: {
-      ...fontStyles.normal,
-      fontSize: 14,
-      color: colors.text.default,
-      paddingVertical: 10,
-    },
-    linkText: {
-      ...fontStyles.normal,
-      fontSize: 14,
-      color: colors.info.default,
-      paddingVertical: 10,
-    },
     wrapper: {
-      marginTop: 10,
       marginHorizontal: 20,
+      flex: 1,
+      flexDirection: 'column',
+      rowGap: 16,
     },
     privacyPolicy: {
       ...fontStyles.normal,
-      fontSize: 14,
+      fontSize: 12,
       color: colors.text.muted,
-      marginTop: 10,
-    },
-    link: {
-      textDecorationLine: 'underline',
     },
     actionContainer: {
       flexDirection: 'row',
@@ -128,6 +100,10 @@ const createStyles = ({ colors }) =>
     confirm: {
       marginLeft: 8,
     },
+    divider: {
+      height: 1,
+      backgroundColor: colors.border.muted,
+    },
   });
 
 /**
@@ -180,7 +156,7 @@ class OptinMetrics extends PureComponent {
     /**
      * Tracks the scroll view's height.
      */
-    scrollViewHeight: undefined
+    scrollViewHeight: undefined,
   };
 
   getStyles = () => {
@@ -190,29 +166,29 @@ class OptinMetrics extends PureComponent {
 
   actionsList = isPastPrivacyPolicyDate
     ? [1, 2, 3].map((value) => ({
-      action: value,
-      prefix: strings(`privacy_policy.action_description_${value}_prefix`),
-      description: strings(
-        `privacy_policy.action_description_${value}_description`,
-      ),
-    }))
-    : [1, 2, 3, 4, 5].map((value) => {
-      const actionVal = value <= 2 ? 0 : 1;
-      return {
-        action: actionVal,
-        prefix: actionVal
-          ? `${strings('privacy_policy.action_description_never_legacy')} `
-          : '',
+        action: value,
+        prefix: strings(`privacy_policy.action_description_${value}_prefix`),
         description: strings(
-          `privacy_policy.action_description_${value}_legacy`,
+          `privacy_policy.action_description_${value}_description`,
         ),
-      };
-    });
+      }))
+    : [1, 2, 3, 4, 5].map((value) => {
+        const actionVal = value <= 2 ? 0 : 1;
+        return {
+          action: actionVal,
+          prefix: actionVal
+            ? `${strings('privacy_policy.action_description_never_legacy')} `
+            : '',
+          description: strings(
+            `privacy_policy.action_description_${value}_legacy`,
+          ),
+        };
+      });
 
   updateNavBar = () => {
     const { navigation } = this.props;
     const colors = this.context.colors;
-    navigation.setOptions(getOptinMetricsNavbarOptions(colors));
+    navigation.setOptions(getOptinMetricsNavbarOptions(colors, false));
   };
 
   componentDidMount() {
@@ -224,8 +200,9 @@ class OptinMetrics extends PureComponent {
     // Update the navbar
     this.updateNavBar();
 
-    const { scrollViewContentHeight, isEndReached, scrollViewHeight } = this.state;
-    
+    const { scrollViewContentHeight, isEndReached, scrollViewHeight } =
+      this.state;
+
     // Only run this check if any of the relevant values have changed
     if (
       prevState.scrollViewContentHeight !== scrollViewContentHeight ||
@@ -233,7 +210,7 @@ class OptinMetrics extends PureComponent {
       prevState.scrollViewHeight !== scrollViewHeight
     ) {
       if (scrollViewContentHeight === undefined || isEndReached) return;
-      
+
       // Check if content fits view port of scroll view
       if (scrollViewHeight >= scrollViewContentHeight) {
         this.onScrollEndReached();
@@ -286,21 +263,25 @@ class OptinMetrics extends PureComponent {
     return (
       <View style={styles.action} key={i}>
         {action === 0 ? (
-          <Entypo
-            name="check"
-            size={20}
-            style={[styles.icon, styles.checkIcon]}
+          <Icon
+            name={IconName.CheckBold}
+            size={IconSize.Lg}
+            color={IconColor.Success}
           />
         ) : (
-          <Entypo
-            name="cross"
-            size={24}
-            style={[styles.icon, styles.crossIcon]}
+          <Icon
+            name={IconName.CircleX}
+            size={IconSize.Lg}
+            color={IconColor.Error}
           />
         )}
         <Text style={styles.description}>
-          <Text style={styles.descriptionBold}>{prefix}</Text>
-          {description}
+          <Text variant={TextVariant.BodyMDMedium} color={TextColor.Default}>
+            {prefix}
+          </Text>
+          <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+            {description}
+          </Text>
         </Text>
       </View>
     );
@@ -311,14 +292,18 @@ class OptinMetrics extends PureComponent {
 
     return (
       <View style={styles.action} key={i}>
-        <Entypo
-          name="check"
-          size={20}
-          style={[styles.icon, styles.checkIcon]}
+        <Icon
+          name={IconName.CheckBold}
+          size={IconSize.Lg}
+          color={IconColor.Success}
         />
         <Text style={styles.description}>
-          <Text style={styles.descriptionBold}>{prefix + ' '}</Text>
-          {description}
+          <Text variant={TextVariant.BodyMDMedium} color={TextColor.Default}>
+            {prefix + ' '}
+          </Text>
+          <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+            {description}
+          </Text>
         </Text>
       </View>
     );
@@ -375,7 +360,9 @@ class OptinMetrics extends PureComponent {
       metrics
         .createEventBuilder(MetaMetricsEvents.ANALYTICS_PREFERENCE_SELECTED)
         .addProperties({
-          [UserProfileProperty.HAS_MARKETING_CONSENT]: Boolean(isDataCollectionForMarketingEnabled),
+          [UserProfileProperty.HAS_MARKETING_CONSENT]: Boolean(
+            isDataCollectionForMarketingEnabled,
+          ),
           is_metrics_opted_in: true,
           location: 'onboarding_metametrics',
           updated_after_onboarding: false,
@@ -464,14 +451,16 @@ class OptinMetrics extends PureComponent {
     if (isPastPrivacyPolicyDate) {
       return (
         <View>
-          <Text style={styles.privacyPolicy}>
-            <Text>{strings('privacy_policy.fine_print_1') + ' '}</Text>
-            <Button
-              variant={ButtonVariants.Link}
-              label={strings('privacy_policy.privacy_policy_button')}
+          <Text variant={TextVariant.BodySM} color={TextColor.Alternative}>
+            {strings('privacy_policy.fine_print_1') + ' '}
+            <Text
+              color={TextColor.Primary}
+              variant={TextVariant.BodySM}
               onPress={this.openPrivacyPolicy}
-            />
-            <Text>{' ' + strings('privacy_policy.fine_print_2')}</Text>
+            >
+              {strings('privacy_policy.privacy_policy_button')}
+            </Text>
+            {' ' + strings('privacy_policy.fine_print_2')}
           </Text>
         </View>
       );
@@ -556,7 +545,8 @@ class OptinMetrics extends PureComponent {
    * @param {number} _
    * @param {number} height
    */
-  onContentSizeChange = (_, height) => (this.setState({ scrollViewContentHeight: height }));
+  onContentSizeChange = (_, height) =>
+    this.setState({ scrollViewContentHeight: height });
 
   /**
    * Layout event for the ScrollView.
@@ -611,13 +601,15 @@ class OptinMetrics extends PureComponent {
         >
           <View style={styles.wrapper}>
             <Text
-              style={styles.title}
+              variant={TextVariant.DisplayMD}
+              color={TextColor.Default}
               testID={MetaMetricsOptInSelectorsIDs.OPTIN_METRICS_TITLE_ID}
             >
               {strings('privacy_policy.description_title')}
             </Text>
             <Text
-              style={styles.content}
+              variant={TextVariant.BodyMD}
+              color={TextColor.Default}
               testID={
                 MetaMetricsOptInSelectorsIDs.OPTIN_METRICS_PRIVACY_POLICY_DESCRIPTION_CONTENT_1_ID
               }
@@ -628,16 +620,6 @@ class OptinMetrics extends PureComponent {
                   : 'privacy_policy.description_content_1_legacy',
               )}
             </Text>
-            <Text style={styles.linkText} onPress={this.handleLink}>
-              {strings('privacy_policy.description_content_3')}
-            </Text>
-            <Text style={styles.content}>
-              {strings(
-                isPastPrivacyPolicyDate
-                  ? 'privacy_policy.description_content_2'
-                  : 'privacy_policy.description_content_2_legacy',
-              )}
-            </Text>
             {this.actionsList.map((action, i) =>
               isPastPrivacyPolicyDate
                 ? this.renderAction(action, i)
@@ -663,11 +645,15 @@ class OptinMetrics extends PureComponent {
                     )
                   }
                 />
-                <Text style={styles.content}>
+                <Text
+                  variant={TextVariant.BodySMMedium}
+                  color={TextColor.Default}
+                >
                   {strings('privacy_policy.checkbox')}
                 </Text>
               </TouchableOpacity>
             ) : null}
+            <View style={styles.divider} />
             {this.renderPrivacyPolicy()}
           </View>
         </ScrollView>
diff --git a/app/components/UI/SecurityOptionToggle/SecurityOptionToggle.tsx b/app/components/UI/SecurityOptionToggle/SecurityOptionToggle.tsx
index 245a8b98d5d2..be8f03f8509c 100644
--- a/app/components/UI/SecurityOptionToggle/SecurityOptionToggle.tsx
+++ b/app/components/UI/SecurityOptionToggle/SecurityOptionToggle.tsx
@@ -40,7 +40,7 @@ const SecurityOptionToggle = ({
     [onOptionUpdated],
   );
   return (
-    <View>
+    <View style={styles.container}>
       <View style={styles.titleContainer}>
         <Text variant={TextVariant.BodyLGMedium} style={styles.title}>
           {title}
diff --git a/app/components/UI/SecurityOptionToggle/styles.ts b/app/components/UI/SecurityOptionToggle/styles.ts
index ea133e7c891d..73b35c8fcd8d 100644
--- a/app/components/UI/SecurityOptionToggle/styles.ts
+++ b/app/components/UI/SecurityOptionToggle/styles.ts
@@ -3,6 +3,9 @@ import { StyleSheet } from 'react-native';
 
 export const createStyles = () =>
   StyleSheet.create({
+    container: {
+      width: '100%',
+    },
     titleContainer: {
       flexDirection: 'row',
       alignItems: 'center',
diff --git a/app/components/UI/SeedphraseModal/index.js b/app/components/UI/SeedphraseModal/index.js
index bd96110bcc6e..93aaec4ee994 100644
--- a/app/components/UI/SeedphraseModal/index.js
+++ b/app/components/UI/SeedphraseModal/index.js
@@ -1,11 +1,14 @@
-import React from 'react';
-import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import React, { useRef } from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
 import { fontStyles } from '../../../styles/common';
 import { strings } from '../../../../locales/i18n';
-import ActionModal from '../../UI/ActionModal';
 import { useTheme } from '../../../util/theme';
+import ActionContent from '../ActionModal/ActionContent';
+import BottomSheet from '../../../component-library/components/BottomSheets/BottomSheet';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../component-library/components/Texts/Text';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -18,10 +21,15 @@ const createStyles = (colors) =>
     },
     modalNoBorder: {
       borderTopWidth: 0,
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+      width: '100%',
+      marginTop: 16,
+      marginBottom: Platform.OS === 'ios' ? 8 : 16,
     },
     modalContainer: {
       flex: 1,
-      padding: 27,
+      paddingTop: 24,
       flexDirection: 'column',
     },
     modalXButton: {
@@ -40,7 +48,7 @@ const createStyles = (colors) =>
     explanationText: {
       fontSize: 14,
       marginTop: 16,
-      textAlign: 'center',
+      textAlign: 'left',
       ...fontStyles.normal,
       color: colors.text.default,
       lineHeight: 20,
@@ -49,62 +57,87 @@ const createStyles = (colors) =>
       fontSize: 16,
       color: colors.text.default,
     },
+    listItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+    },
+    bullet: {
+      fontSize: 20,
+      marginRight: 10,
+    },
+    itemText: {
+      fontSize: 16,
+    },
+    listContainer: {
+      marginLeft: 10,
+    },
+    explanationTextContainer: {
+      flexDirection: 'column',
+      gap: 16,
+    },
   });
 
-const SeedphraseModal = ({
-  showWhatIsSeedphraseModal,
-  hideWhatIsSeedphrase,
-}) => {
+const SeedphraseModal = () => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
+  const bottomSheetRef = useRef(null);
+
+  const seedPhrasePoints = [
+    strings('account_backup_step_1.seedPhrase_point_1'),
+    strings('account_backup_step_1.seedPhrase_point_2'),
+    strings('account_backup_step_1.seedPhrase_point_3'),
+  ];
+
+  const hideWhatIsSeedphrase = () => {
+    bottomSheetRef.current?.onCloseBottomSheet?.();
+  };
 
   return (
-    <ActionModal
-      modalVisible={showWhatIsSeedphraseModal}
-      actionContainerStyle={styles.modalNoBorder}
-      displayConfirmButton={false}
-      displayCancelButton={false}
-      onRequestClose={hideWhatIsSeedphrase}
-    >
-      <View style={styles.modalContainer}>
-        <View style={styles.titleContainer}>
-          <View style={styles.auxCenterView} />
-          <Text style={styles.whatIsSeedphraseTitle}>
-            {strings('account_backup_step_1.what_is_seedphrase_title')}
-          </Text>
-          <TouchableOpacity
-            onPress={hideWhatIsSeedphrase}
-            style={styles.modalXButton}
-            hitSlop={{ top: 10, left: 10, bottom: 10, right: 10 }}
-          >
-            <Icon name="times" style={styles.modalXIcon} />
-          </TouchableOpacity>
-        </View>
-        <View>
-          <Text style={styles.explanationText}>
-            {strings('account_backup_step_1.what_is_seedphrase_text_1')}
-          </Text>
-          <Text style={styles.explanationText}>
-            {strings('account_backup_step_1.what_is_seedphrase_text_2')}
-          </Text>
-          <Text style={styles.explanationText}>
-            {strings('account_backup_step_1.what_is_seedphrase_text_3')}
-          </Text>
+    <BottomSheet ref={bottomSheetRef}>
+      <ActionContent
+        actionContainerStyle={styles.modalNoBorder}
+        displayCancelButton={false}
+        onRequestClose={hideWhatIsSeedphrase}
+        confirmText={strings(
+          'account_backup_step_1.what_is_seedphrase_confirm',
+        )}
+        confirmButtonMode={'blue'}
+        onConfirmPress={hideWhatIsSeedphrase}
+      >
+        <View style={styles.modalContainer}>
+          <View style={styles.titleContainer}>
+            <Text variant={TextVariant.HeadingMD} color={TextColor.Default}>
+              {strings('account_backup_step_1.what_is_seedphrase_title')}
+            </Text>
+          </View>
+          <View style={styles.explanationTextContainer}>
+            <Text variant={TextVariant.BodyMD} color={TextColor.Default}>
+              {strings('account_backup_step_1.what_is_seedphrase_text_1')}
+            </Text>
+            <View>
+              <Text variant={TextVariant.BodyMD} color={TextColor.Default}>
+                {strings('account_backup_step_1.what_is_seedphrase_text_4')}
+              </Text>
+              <View style={styles.listContainer}>
+                {seedPhrasePoints.map((point, index) => (
+                  <View style={styles.listItem} key={index}>
+                    <Text style={styles.bullet}>{'\u2022'}</Text>
+                    <Text
+                      variant={TextVariant.BodyMD}
+                      color={TextColor.Default}
+                    >
+                      {point}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+          </View>
         </View>
-      </View>
-    </ActionModal>
+      </ActionContent>
+    </BottomSheet>
   );
 };
 
-SeedphraseModal.propTypes = {
-  /**
-  /* Show or hide modal
-  */
-  showWhatIsSeedphraseModal: PropTypes.bool,
-  /**
-  /* Function to hide modal
-  */
-  hideWhatIsSeedphrase: PropTypes.func,
-};
-
 export default SeedphraseModal;
diff --git a/app/components/UI/SkipAccountSecurityModal/index.js b/app/components/UI/SkipAccountSecurityModal/index.js
index da47cd7dcb49..7ae3f74f892e 100644
--- a/app/components/UI/SkipAccountSecurityModal/index.js
+++ b/app/components/UI/SkipAccountSecurityModal/index.js
@@ -1,30 +1,37 @@
-import React from 'react';
-import ActionModal from '../../UI/ActionModal';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import {
-  View,
-  TouchableOpacity,
-  Text,
-  StyleSheet,
-  Platform,
-} from 'react-native';
+import React, { useState, useRef } from 'react';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
+import { View, StyleSheet, Platform } from 'react-native';
 import { strings } from '../../../../locales/i18n';
-import CheckBox from '@react-native-community/checkbox';
-import FeatherIcon from 'react-native-vector-icons/Feather';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../component-library/components/Texts/Text';
 import PropTypes from 'prop-types';
 import { fontStyles } from '../../../styles/common';
 import { useTheme } from '../../../util/theme';
 import generateTestId from '../../../../wdio/utils/generateTestId';
 import { SkipAccountSecurityModalSelectorsIDs } from '../../../../e2e/selectors/Onboarding/SkipAccountSecurityModal.selectors';
+import BottomSheet from '../../../component-library/components/BottomSheets/BottomSheet';
+import Checkbox from '../../../component-library/components/Checkbox';
+import Button, {
+  ButtonSize,
+  ButtonVariants,
+  ButtonWidthTypes,
+} from '../../../component-library/components/Buttons/Button';
 
 const createStyles = (colors) =>
   StyleSheet.create({
     imageWarning: {
       alignSelf: 'center',
       color: colors.error.default,
+      marginBottom: 16,
     },
     modalNoBorder: {
       borderTopWidth: 0,
+      paddingHorizontal: 0,
     },
     skipTitle: {
       fontSize: 24,
@@ -35,9 +42,12 @@ const createStyles = (colors) =>
       ...fontStyles.bold,
     },
     skipModalContainer: {
-      flex: 1,
-      margin: 24,
       flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingTop: 16,
+      width: '100%',
     },
     skipModalXButton: {
       alignItems: 'flex-end',
@@ -49,6 +59,8 @@ const createStyles = (colors) =>
     skipModalActionButtons: {
       flexDirection: 'row',
       alignItems: 'flex-start',
+      paddingHorizontal: 16,
+      marginTop: 16,
     },
     skipModalCheckbox: {
       height: 18,
@@ -64,73 +76,76 @@ const createStyles = (colors) =>
       paddingHorizontal: 10,
       color: colors.text.default,
     },
+    ctaContainer: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      gap: 16,
+      marginTop: 24,
+    },
+    button: {
+      flex: 1,
+    },
+    skipButton: {
+      flex: 1,
+      backgroundColor: colors.error.default,
+    },
   });
 
-const SkipAccountSecurityModal = ({
-  modalVisible,
-  onConfirm,
-  onCancel,
-  onPress,
-  toggleSkipCheckbox,
-  skipCheckbox,
-}) => {
+const SkipAccountSecurityModal = ({ route }) => {
+  const sheetRef = useRef(null);
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
+  const [skipCheckbox, setSkipCheckbox] = useState(false);
+
+  const toggleSkipCheckbox = () => {
+    setSkipCheckbox(!skipCheckbox);
+  };
+
+  const onConfirmAction = () => {
+    if (route && route.params && route.params.onConfirm) {
+      route.params.onConfirm();
+      // sheetRef.current?.onCloseBottomSheet?.();
+    }
+  };
+
+  const onCancelAction = () => {
+    if (route && route.params && route.params.onCancel) {
+      route.params.onCancel();
+      sheetRef.current?.onCloseBottomSheet?.();
+    }
+  };
+
   return (
-    <ActionModal
-      cancelTestID={SkipAccountSecurityModalSelectorsIDs.CANCEL_BUTTON}
-      confirmTestID={SkipAccountSecurityModalSelectorsIDs.SKIP_BUTTON}
-      confirmText={strings('account_backup_step_1.skip_button_confirm')}
-      cancelText={strings('account_backup_step_1.skip_button_cancel')}
-      confirmButtonMode={'confirm'}
-      cancelButtonMode={'normal'}
-      displayCancelButton
-      modalVisible={modalVisible}
-      actionContainerStyle={styles.modalNoBorder}
-      onCancelPress={onCancel}
-      confirmDisabled={!skipCheckbox}
-      onConfirmPress={onConfirm}
-    >
+    <BottomSheet ref={sheetRef}>
       <View style={styles.skipModalContainer}>
-        {onPress && (
-          <TouchableOpacity
-            onPress={onPress}
-            style={styles.skipModalXButton}
-            hitSlop={{ top: 10, left: 10, bottom: 10, right: 10 }}
-          >
-            <Icon name="times" style={styles.skipModalXIcon} />
-          </TouchableOpacity>
-        )}
-        <FeatherIcon
-          name="alert-triangle"
-          size={38}
+        <Icon
+          name={IconName.DangerSolid}
+          size={IconSize.Lg}
           style={styles.imageWarning}
           {...generateTestId(Platform, 'skip-backup-warning')}
         />
-        <Text style={styles.skipTitle}>
+
+        <Text variant={TextVariant.HeadingMD} color={TextColor.Default}>
           {strings('account_backup_step_1.skip_title')}
         </Text>
+
         <View
           style={styles.skipModalActionButtons}
           testID={SkipAccountSecurityModalSelectorsIDs.CONTAINER}
         >
-          <CheckBox
+          <Checkbox
             style={styles.skipModalCheckbox}
-            value={skipCheckbox}
-            onValueChange={toggleSkipCheckbox}
-            boxType={'square'}
-            tintColors={{
-              true: colors.primary.default,
-              false: colors.border.default,
-            }}
+            isChecked={skipCheckbox}
+            onPress={toggleSkipCheckbox}
             testID={
               SkipAccountSecurityModalSelectorsIDs.iOS_SKIP_BACKUP_BUTTON_ID
             }
           />
           <Text
             onPress={toggleSkipCheckbox}
-            style={styles.skipModalText}
+            variant={TextVariant.BodySM}
+            color={TextColor.Default}
             testID={
               SkipAccountSecurityModalSelectorsIDs.ANDROID_SKIP_BACKUP_BUTTON_ID
             }
@@ -138,26 +153,42 @@ const SkipAccountSecurityModal = ({
             {strings('account_backup_step_1.skip_check')}
           </Text>
         </View>
+
+        <View style={styles.ctaContainer}>
+          <Button
+            onPress={onCancelAction}
+            label={strings('account_backup_step_1.skip_button_cancel')}
+            type={ButtonVariants.Secondary}
+            size={ButtonSize.Lg}
+            variant={ButtonVariants.Secondary}
+            width={ButtonWidthTypes.Full}
+            style={styles.button}
+          />
+          <Button
+            onPress={onConfirmAction}
+            label={strings('account_backup_step_1.skip_button_confirm')}
+            type={ButtonVariants.Primary}
+            size={ButtonSize.Lg}
+            variant={ButtonVariants.Primary}
+            width={ButtonWidthTypes.Full}
+            style={styles.skipButton}
+            isDisabled={!skipCheckbox}
+          />
+        </View>
       </View>
-    </ActionModal>
+    </BottomSheet>
   );
 };
 
 const propTypes = {
-  modalVisible: PropTypes.bool.isRequired,
-  onConfirm: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  onPress: PropTypes.func,
-  toggleSkipCheckbox: PropTypes.func.isRequired,
-  skipCheckbox: PropTypes.bool.isRequired,
-};
-
-const defaultProps = {
-  modalVisible: false,
-  skipCheckbox: false,
+  route: PropTypes.shape({
+    params: PropTypes.shape({
+      onConfirm: PropTypes.func,
+      onCancel: PropTypes.func,
+    }),
+  }),
 };
 
 SkipAccountSecurityModal.propTypes = propTypes;
-SkipAccountSecurityModal.defaultProps = defaultProps;
 
 export default SkipAccountSecurityModal;
diff --git a/app/components/UI/StyledButton/styledButtonStyles.ts b/app/components/UI/StyledButton/styledButtonStyles.ts
index bf55b8bee8e3..27afdc057c63 100644
--- a/app/components/UI/StyledButton/styledButtonStyles.ts
+++ b/app/components/UI/StyledButton/styledButtonStyles.ts
@@ -47,7 +47,7 @@ const createStyles = (colors: Theme['colors']) =>
       color: colors.primary.default,
     },
     normal: {
-      backgroundColor: colors.background.default,
+      backgroundColor: importedColors.transparent,
       borderWidth: 1,
       borderColor: colors.primary.default,
     },
@@ -137,6 +137,14 @@ const createStyles = (colors: Theme['colors']) =>
     inverseText: {
       color: colors.primary.default,
     },
+    secondary: {
+      backgroundColor: colors.background.default,
+      borderWidth: 1,
+      borderColor: colors.border.default,
+    },
+    secondaryText: {
+      color: colors.text.default,
+    },
   });
 
 function getStyles(type: string, colors: Theme['colors']) {
@@ -217,6 +225,10 @@ function getStyles(type: string, colors: Theme['colors']) {
       fontStyle = styles.onOverlayText;
       containerStyle = styles.onOverlayBackground;
       break;
+    case 'secondary':
+      fontStyle = styles.secondaryText;
+      containerStyle = styles.secondary;
+      break;
     default:
       throw new Error('Unknown button type');
   }
diff --git a/app/components/Views/AccountBackupStep1/index.js b/app/components/Views/AccountBackupStep1/index.js
index 3950fe5bbdd2..bdb1e8d3035a 100644
--- a/app/components/Views/AccountBackupStep1/index.js
+++ b/app/components/Views/AccountBackupStep1/index.js
@@ -1,39 +1,45 @@
 import React, { useState, useEffect } from 'react';
 import {
   ScrollView,
-  TouchableOpacity,
-  Text,
   View,
   SafeAreaView,
   StyleSheet,
   BackHandler,
   Image,
+  TouchableOpacity,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { fontStyles } from '../../../styles/common';
-import StyledButton from '../../UI/StyledButton';
-import OnboardingProgress from '../../UI/OnboardingProgress';
 import { strings } from '../../../../locales/i18n';
 import AndroidBackHandler from '../AndroidBackHandler';
 import Device from '../../../util/device';
-import SeedphraseModal from '../../UI/SeedphraseModal';
 import { getOnboardingNavbarOptions } from '../../UI/Navbar';
 import scaling from '../../../util/scaling';
 import Engine from '../../../core/Engine';
 import { ONBOARDING_WIZARD } from '../../../constants/storage';
-import { CHOOSE_PASSWORD_STEPS } from '../../../constants/onboarding';
-import SkipAccountSecurityModal from '../../UI/SkipAccountSecurityModal';
 import { connect } from 'react-redux';
 import setOnboardingWizardStep from '../../../actions/wizard';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-
 import StorageWrapper from '../../../store/storage-wrapper';
 import { useTheme } from '../../../util/theme';
 import { ManualBackUpStepsSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ManualBackUpSteps.selectors';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 import Routes from '../../../../app/constants/navigation/Routes';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
-import SRPDesign from '../../../images/srp-lock-design.png';
+import SRPDesign from '../../../images/secure_wallet.png';
+import Button, {
+  ButtonVariants,
+  ButtonWidthTypes,
+  ButtonSize,
+} from '../../../component-library/components/Buttons/Button';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../component-library/components/Texts/Text';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -46,10 +52,7 @@ const createStyles = (colors) =>
     },
     wrapper: {
       flex: 1,
-      padding: 20,
-      paddingTop: 0,
-      paddingBottom: 0,
-      marginTop: 16,
+      paddingHorizontal: 16,
     },
     content: {
       alignItems: 'center',
@@ -58,16 +61,16 @@ const createStyles = (colors) =>
       marginBottom: 10,
     },
     title: {
-      fontSize: 24,
-      marginBottom: 24,
-      marginTop: 24,
-      color: colors.text.default,
-      textAlign: 'center',
-      ...fontStyles.bold,
+      textAlign: 'left',
+      alignSelf: 'flex-start',
+      marginBottom: 16,
     },
     text: {
       marginTop: 32,
       justifyContent: 'center',
+      alignSelf: 'flex-start',
+      flexDirection: 'column',
+      rowGap: 16,
     },
     label: {
       lineHeight: scaling.scale(20),
@@ -79,47 +82,17 @@ const createStyles = (colors) =>
     buttonWrapper: {
       flex: 1,
       justifyContent: 'flex-end',
-    },
-    bold: {
-      ...fontStyles.bold,
-    },
-    blue: {
-      color: colors.primary.default,
-    },
-    remindLaterText: {
-      textAlign: 'center',
-      fontSize: 15,
-      lineHeight: 20,
-      color: colors.primary.default,
-      ...fontStyles.normal,
-    },
-    remindLaterSubText: {
-      textAlign: 'center',
-      fontSize: 11,
-      lineHeight: 20,
-      color: colors.text.alternative,
-      ...fontStyles.normal,
-    },
-    startSubText: {
-      textAlign: 'center',
-      fontSize: 11,
-      marginTop: 12,
-      color: colors.text.alternative,
-      ...fontStyles.normal,
-    },
-    remindLaterContainer: {
-      marginBottom: 34,
-    },
-    remindLaterButton: {
-      elevation: 10,
-      zIndex: 10,
-    },
-    ctaContainer: {
-      marginBottom: 30,
+      flexDirection: 'column',
+      rowGap: 16,
+      marginBottom: 16,
     },
     srpDesign: {
-      width: 200,
-      height: 225,
+      width: 250,
+      height: 250,
+      marginHorizontal: 'auto',
+    },
+    headerLeft: {
+      marginLeft: 16,
     },
   });
 
@@ -129,9 +102,6 @@ const createStyles = (colors) =>
  */
 const AccountBackupStep1 = (props) => {
   const { navigation, route } = props;
-  const [showRemindLaterModal, setRemindLaterModal] = useState(false);
-  const [showWhatIsSeedphraseModal, setWhatIsSeedphraseModal] = useState(false);
-  const [skipCheckbox, setToggleSkipCheckbox] = useState(false);
   const [hasFunds, setHasFunds] = useState(false);
   const { colors } = useTheme();
   const styles = createStyles(colors);
@@ -146,13 +116,24 @@ const AccountBackupStep1 = (props) => {
     navigation.setOptions({
       ...getOnboardingNavbarOptions(
         route,
-        // eslint-disable-next-line react/display-name
-        { headerLeft: () => <View /> },
+        {
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => navigation.goBack()}>
+              <Icon
+                name={IconName.ArrowLeft}
+                size={IconSize.Lg}
+                color={colors.text.default}
+                style={styles.headerLeft}
+              />
+            </TouchableOpacity>
+          ),
+        },
         colors,
+        false,
       ),
       gesturesEnabled: false,
     });
-  }, [navigation, route, colors]);
+  }, [navigation, route, colors, styles.headerLeft]);
 
   useEffect(
     () => {
@@ -174,45 +155,44 @@ const AccountBackupStep1 = (props) => {
   );
 
   const goNext = () => {
-    props.navigation.navigate('AccountBackupStep1B', { ...props.route.params });
+    props.navigation.navigate('ManualBackupStep1', { ...props.route.params });
     track(MetaMetricsEvents.WALLET_SECURITY_STARTED);
   };
 
-  const showRemindLater = () => {
-    if (hasFunds) return;
-
-    setRemindLaterModal(true);
-    track(MetaMetricsEvents.WALLET_SECURITY_SKIP_INITIATED);
-  };
-
-  const toggleSkipCheckbox = () =>
-    skipCheckbox ? setToggleSkipCheckbox(false) : setToggleSkipCheckbox(true);
-
-  const hideRemindLaterModal = () => {
-    setToggleSkipCheckbox(false);
-    setRemindLaterModal(false);
-  };
-
-  const secureNow = () => {
-    hideRemindLaterModal();
-    goNext();
-  };
-
   const skip = async () => {
-    hideRemindLaterModal();
+    // eslint-disable-next-line no-console
+    console.log('skip');
     track(MetaMetricsEvents.WALLET_SECURITY_SKIP_CONFIRMED);
     // Get onboarding wizard state
     const onboardingWizard = await StorageWrapper.getItem(ONBOARDING_WIZARD);
     !onboardingWizard && props.setOnboardingWizardStep(1);
-    props.navigation.reset({
-      index: 1,
-      routes: [{ name: Routes.ONBOARDING.SUCCESS }],
+    props.navigation.navigate('OptinMetrics', {
+      onContinue: () => {
+        props.navigation.navigate('OnboardingSuccess', {
+          showPasswordHint: false,
+        });
+      },
     });
   };
 
-  const showWhatIsSeedphrase = () => setWhatIsSeedphraseModal(true);
+  const showRemindLater = () => {
+    if (hasFunds) return;
+
+    props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.SKIP_ACCOUNT_SECURITY_MODAL,
+      params: {
+        onConfirm: skip,
+        onCancel: goNext,
+      },
+    });
+    track(MetaMetricsEvents.WALLET_SECURITY_SKIP_INITIATED);
+  };
 
-  const hideWhatIsSeedphrase = () => setWhatIsSeedphraseModal(false);
+  const showWhatIsSeedphrase = () => {
+    props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.SEEDPHRASE_MODAL,
+    });
+  };
 
   return (
     <SafeAreaView style={styles.mainWrapper}>
@@ -222,78 +202,65 @@ const AccountBackupStep1 = (props) => {
         testID={ManualBackUpStepsSelectorsIDs.PROTECT_CONTAINER}
       >
         <View style={styles.wrapper}>
-          <OnboardingProgress steps={CHOOSE_PASSWORD_STEPS} currentStep={1} />
+          <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+            Step 2 of 3
+          </Text>
+          {/* <OnboardingProgress steps={CHOOSE_PASSWORD_STEPS} currentStep={1} /> */}
           <View style={styles.content}>
-            <Text style={styles.title}>
+            <Text
+              variant={TextVariant.DisplayMD}
+              color={TextColor.Default}
+              style={styles.title}
+            >
               {strings('account_backup_step_1.title')}
             </Text>
-
             <Image source={SRPDesign} style={styles.srpDesign} />
             <View style={styles.text}>
-              <Text style={styles.label}>
+              <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
                 {strings('account_backup_step_1.info_text_1_1')}{' '}
-                <Text style={styles.blue} onPress={showWhatIsSeedphrase}>
+                <Text
+                  variant={TextVariant.BodyMD}
+                  color={TextColor.Primary}
+                  onPress={showWhatIsSeedphrase}
+                >
                   {strings('account_backup_step_1.info_text_1_2')}
                 </Text>{' '}
                 {strings('account_backup_step_1.info_text_1_3')}{' '}
-                <Text style={styles.bold}>
-                  {strings('account_backup_step_1.info_text_1_4')}
-                </Text>
+              </Text>
+
+              <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+                {strings('account_backup_step_1.info_text_1_4')}
               </Text>
             </View>
           </View>
+
           <View style={styles.buttonWrapper}>
+            <View>
+              <Button
+                variant={ButtonVariants.Primary}
+                onPress={goNext}
+                label={strings('account_backup_step_1.cta_text')}
+                width={ButtonWidthTypes.Full}
+                size={ButtonSize.Lg}
+              />
+            </View>
             {!hasFunds && (
-              <View style={styles.remindLaterContainer}>
-                <TouchableOpacity
-                  style={styles.remindLaterButton}
+              <View>
+                <Button
+                  variant={ButtonVariants.Secondary}
                   onPress={showRemindLater}
-                  hitSlop={{ top: 10, left: 10, bottom: 10, right: 10 }}
-                >
-                  <Text
-                    style={styles.remindLaterText}
-                    testID={
-                      ManualBackUpStepsSelectorsIDs.REMIND_ME_LATER_BUTTON
-                    }
-                  >
-                    {strings('account_backup_step_1.remind_me_later')}
-                  </Text>
-                </TouchableOpacity>
-                <Text style={styles.remindLaterSubText}>
-                  {strings('account_backup_step_1.remind_me_later_subtext')}
-                </Text>
+                  label={strings('account_backup_step_1.remind_me_later')}
+                  width={ButtonWidthTypes.Full}
+                  size={ButtonSize.Lg}
+                />
               </View>
             )}
-            <View style={styles.ctaContainer}>
-              <StyledButton
-                containerStyle={styles.button}
-                type={'confirm'}
-                onPress={goNext}
-              >
-                {strings('account_backup_step_1.cta_text')}
-              </StyledButton>
-              <Text style={styles.startSubText}>
-                {strings('account_backup_step_1.cta_subText')}
-              </Text>
-            </View>
           </View>
         </View>
       </ScrollView>
       {Device.isAndroid() && (
         <AndroidBackHandler customBackPress={showRemindLater} />
       )}
-      <SkipAccountSecurityModal
-        modalVisible={showRemindLaterModal}
-        onCancel={secureNow}
-        onConfirm={skip}
-        skipCheckbox={skipCheckbox}
-        onPress={hideRemindLaterModal}
-        toggleSkipCheckbox={toggleSkipCheckbox}
-      />
-      <SeedphraseModal
-        showWhatIsSeedphraseModal={showWhatIsSeedphraseModal}
-        hideWhatIsSeedphrase={hideWhatIsSeedphrase}
-      />
     </SafeAreaView>
   );
 };
diff --git a/app/components/Views/AccountBackupStep1B/index.js b/app/components/Views/AccountBackupStep1B/index.js
index c7d030307c95..b8ad826c0cae 100644
--- a/app/components/Views/AccountBackupStep1B/index.js
+++ b/app/components/Views/AccountBackupStep1B/index.js
@@ -27,6 +27,7 @@ import { useTheme } from '../../../util/theme';
 import { ManualBackUpStepsSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ManualBackUpSteps.selectors';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
+import Routes from '../../../constants/navigation/Routes';
 
 const explain_backup_seedphrase = require('../../../images/explain-backup-seedphrase.png'); // eslint-disable-line
 
@@ -203,16 +204,26 @@ const createStyles = (colors) =>
 const AccountBackupStep1B = (props) => {
   const { navigation, route } = props;
   const [showWhySecureWalletModal, setWhySecureWalletModal] = useState(false);
-  const [showWhatIsSeedphraseModal, setWhatIsSeedphraseModal] = useState(false);
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
   useEffect(() => {
-    navigation.setOptions(getOnboardingNavbarOptions(route, {}, colors));
-  }, [navigation, route, colors]);
+    navigation.setOptions(
+      getOnboardingNavbarOptions(
+        route,
+        {
+          headerLeft: () => <View />,
+        },
+        colors,
+      ),
+    );
+  }, [navigation, route, colors, styles.headerLeft]);
 
   const goNext = () => {
-    props.navigation.navigate('ManualBackupStep1', { ...props.route.params });
+    props.navigation.navigate('ManualBackupStep1', {
+      ...props.route.params,
+      settingsBackup: true,
+    });
     trackOnboarding(
       MetricsEventBuilder.createEventBuilder(
         MetaMetricsEvents.WALLET_SECURITY_MANUAL_BACKUP_INITIATED,
@@ -236,8 +247,11 @@ const AccountBackupStep1B = (props) => {
   const showWhySecureWallet = () => setWhySecureWalletModal(true);
   const hideWhySecureWallet = () => setWhySecureWalletModal(false);
 
-  const showWhatIsSeedphrase = () => setWhatIsSeedphraseModal(true);
-  const hideWhatIsSeedphrase = () => setWhatIsSeedphraseModal(false);
+  const showWhatIsSeedphrase = () => {
+    props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.SEEDPHRASE_MODAL,
+    });
+  };
 
   return (
     <SafeAreaView style={styles.mainWrapper}>
@@ -377,10 +391,6 @@ const AccountBackupStep1B = (props) => {
           </View>
         </View>
       </ActionModal>
-      <SeedphraseModal
-        showWhatIsSeedphraseModal={showWhatIsSeedphraseModal}
-        hideWhatIsSeedphrase={hideWhatIsSeedphrase}
-      />
     </SafeAreaView>
   );
 };
diff --git a/app/components/Views/ChoosePassword/index.js b/app/components/Views/ChoosePassword/index.js
index 52eb87d2c1f2..5f16673dbe90 100644
--- a/app/components/Views/ChoosePassword/index.js
+++ b/app/components/Views/ChoosePassword/index.js
@@ -4,12 +4,10 @@ import {
   ActivityIndicator,
   Alert,
   View,
-  TextInput,
   SafeAreaView,
   StyleSheet,
-  Image,
+  TouchableOpacity,
 } from 'react-native';
-import CheckBox from '@react-native-community/checkbox';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import Text, {
   TextColor,
@@ -23,19 +21,15 @@ import {
   seedphraseNotBackedUp,
 } from '../../../actions/user';
 import { setLockTime } from '../../../actions/settings';
-import StyledButton from '../../UI/StyledButton';
 import Engine from '../../../core/Engine';
 import Device from '../../../util/device';
 import {
   passcodeType,
   updateAuthTypeStorageFlags,
 } from '../../../util/authentication';
-import { fontStyles } from '../../../styles/common';
 import { strings } from '../../../../locales/i18n';
 import { getOnboardingNavbarOptions } from '../../UI/Navbar';
-import Icon from 'react-native-vector-icons/FontAwesome';
 import AppConstants from '../../../core/AppConstants';
-import OnboardingProgress from '../../UI/OnboardingProgress';
 import zxcvbn from 'zxcvbn';
 import Logger from '../../../util/Logger';
 import { ONBOARDING, PREVIOUS_SCREEN } from '../../../constants/navigation';
@@ -52,7 +46,6 @@ import {
   MIN_PASSWORD_LENGTH,
 } from '../../../util/password';
 
-import { CHOOSE_PASSWORD_STEPS } from '../../../constants/onboarding';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { Authentication } from '../../../core';
 import AUTHENTICATION_TYPE from '../../../constants/userProperties';
@@ -63,6 +56,22 @@ import navigateTermsOfUse from '../../../util/termsOfUse/termsOfUse';
 import { ChoosePasswordSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ChoosePassword.selectors';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
+import Checkbox from '../../../component-library/components/Checkbox';
+import Button, {
+  ButtonVariants,
+  ButtonWidthTypes,
+  ButtonSize,
+} from '../../../component-library/components/Buttons/Button';
+import TextField from '../../../component-library/components/Form/TextField/TextField';
+import Label from '../../../component-library/components/Form/Label';
+import { TextFieldSize } from '../../../component-library/components/Form/TextField';
+import fox from '../../../animations/Searching_Fox.json';
+import LottieView from 'lottie-react-native';
+
 const createStyles = (colors) =>
   StyleSheet.create({
     mainWrapper: {
@@ -71,12 +80,10 @@ const createStyles = (colors) =>
     },
     wrapper: {
       flex: 1,
-      marginBottom: 10,
-      marginTop: 16,
     },
     scrollableWrapper: {
       flex: 1,
-      paddingHorizontal: 32,
+      paddingHorizontal: 16,
     },
     keyboardScrollableWrapper: {
       flexGrow: 1,
@@ -98,87 +105,23 @@ const createStyles = (colors) =>
       width: 80,
       height: 80,
     },
-    content: {
-      textAlign: 'center',
-      alignItems: 'center',
-    },
     title: {
-      marginTop: 20,
-      marginBottom: 20,
-      justifyContent: 'center',
-      textAlign: 'center',
+      justifyContent: 'flex-start',
+      textAlign: 'flex-start',
+      fontSize: 32,
     },
     subtitle: {
       textAlign: 'center',
     },
-    text: {
-      marginBottom: 10,
-      justifyContent: 'center',
-      ...fontStyles.normal,
-    },
-    checkboxContainer: {
-      marginTop: 10,
-      marginHorizontal: 10,
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexDirection: 'row',
-    },
-    checkbox: {
-      width: 18,
-      height: 18,
-      margin: 10,
-      marginTop: -5,
-    },
-    label: {
-      paddingHorizontal: 10,
-    },
-    learnMore: {
-      textDecorationLine: 'underline',
-      textDecorationColor: colors.primary.default,
-    },
     field: {
-      marginVertical: 5,
       position: 'relative',
-    },
-    input: {
-      borderWidth: 1,
-      borderColor: colors.border.default,
-      padding: 10,
-      borderRadius: 6,
-      fontSize: 14,
-      height: 50,
-      ...fontStyles.normal,
-      color: colors.text.default,
+      flexDirection: 'column',
+      gap: 8,
     },
     ctaWrapper: {
       flex: 1,
       marginTop: 20,
-      paddingHorizontal: 10,
-    },
-    biometrics: {
-      position: 'relative',
-      marginTop: 20,
-      marginBottom: 30,
-    },
-    biometryLabel: {
-      flex: 1,
-      fontSize: 16,
-      color: colors.text.default,
-      ...fontStyles.normal,
-    },
-    biometrySwitch: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-    },
-    passwordStrengthLabel: {
-      marginTop: 10,
-    },
-    showPassword: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
+      width: '100%',
     },
     // eslint-disable-next-line react-native/no-unused-styles
     strength_weak: {
@@ -192,11 +135,38 @@ const createStyles = (colors) =>
     strength_strong: {
       color: colors.success.default,
     },
-    showMatchingPasswords: {
-      position: 'absolute',
-      top: 36,
-      right: 10,
-      alignSelf: 'flex-end',
+    learnMoreContainer: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      gap: 8,
+      marginTop: 8,
+      marginBottom: 16,
+    },
+    learnMoreTextContainer: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      gap: 1,
+      width: '100%',
+      flexWrap: 'wrap',
+    },
+    headerLeft: {
+      marginLeft: 16,
+    },
+    headerRight: {
+      marginRight: 16,
+    },
+    passwordContainer: {
+      flexDirection: 'column',
+      gap: 16,
+      marginVertical: 16,
+    },
+    label: {
+      marginBottom: -4,
+    },
+    checkbox: {
+      alignItems: 'flex-start',
     },
   });
 
@@ -242,11 +212,13 @@ class ChoosePassword extends PureComponent {
     confirmPassword: '',
     secureTextEntry: true,
     biometryType: null,
-    biometryChoice: false,
+    biometryChoice: true,
     rememberMe: false,
     loading: false,
     error: null,
     inputWidth: { width: '99%' },
+    showPasswordIndex: [0, 1],
+    passwordInputContainerFocusedIndex: -1,
   };
 
   mounted = true;
@@ -264,7 +236,26 @@ class ChoosePassword extends PureComponent {
   updateNavBar = () => {
     const { route, navigation } = this.props;
     const colors = this.context.colors || mockTheme.colors;
-    navigation.setOptions(getOnboardingNavbarOptions(route, {}, colors));
+    const marginLeft = 16;
+    navigation.setOptions(
+      getOnboardingNavbarOptions(
+        route,
+        {
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => navigation.goBack()}>
+              <Icon
+                name={IconName.ArrowLeft}
+                size={IconSize.Lg}
+                color={colors.text.default}
+                style={{ marginLeft }}
+              />
+            </TouchableOpacity>
+          ),
+        },
+        colors,
+        false,
+      ),
+    );
   };
 
   termsOfUse = async () => {
@@ -548,8 +539,22 @@ class ChoosePassword extends PureComponent {
     });
   };
 
+  toggleShowPassword = (index) => {
+    const newShowPasswordIndex = this.state.showPasswordIndex.includes(index)
+      ? this.state.showPasswordIndex.filter((i) => i !== index)
+      : [...this.state.showPasswordIndex, index];
+    this.setState({ showPasswordIndex: newShowPasswordIndex });
+  };
+
   setConfirmPassword = (val) => this.setState({ confirmPassword: val });
 
+  isError = () => {
+    const { password, confirmPassword } = this.state;
+    return (
+      password !== '' && confirmPassword !== '' && password !== confirmPassword
+    );
+  };
+
   render() {
     const {
       isSelected,
@@ -574,10 +579,17 @@ class ChoosePassword extends PureComponent {
         {loading ? (
           <View style={styles.loadingWrapper}>
             <View style={styles.foxWrapper}>
-              <Image
+              {/* <Image
                 source={require('../../../images/branding/fox.png')}
                 style={styles.image}
                 resizeMethod={'auto'}
+              /> */}
+              <LottieView
+                style={styles.image}
+                autoPlay
+                loop
+                source={fox}
+                resizeMode="contain"
               />
             </View>
             <ActivityIndicator size="large" color={colors.text.default} />
@@ -597,166 +609,187 @@ class ChoosePassword extends PureComponent {
           </View>
         ) : (
           <View style={styles.wrapper}>
-            <OnboardingProgress steps={CHOOSE_PASSWORD_STEPS} />
+            {/* <OnboardingProgress steps={CHOOSE_PASSWORD_STEPS} /> */}
             <KeyboardAwareScrollView
               style={styles.scrollableWrapper}
               contentContainerStyle={styles.keyboardScrollableWrapper}
               resetScrollToCoords={{ x: 0, y: 0 }}
             >
               <View testID={ChoosePasswordSelectorsIDs.CONTAINER_ID}>
-                <View style={styles.content}>
-                  <Text variant={TextVariant.HeadingLG} style={styles.title}>
-                    {strings('choose_password.title')}
-                  </Text>
-                  <View style={styles.text}>
-                    <Text
-                      variant={TextVariant.HeadingSMRegular}
-                      style={styles.subtitle}
+                <Text
+                  variant={TextVariant.BodyMD}
+                  color={TextColor.Alternative}
+                >
+                  Step 1 of 3
+                </Text>
+
+                <Text variant={TextVariant.DisplayMD} color={TextColor.Default}>
+                  {strings('choose_password.title')}
+                </Text>
+
+                <View style={styles.passwordContainer}>
+                  <View style={styles.field}>
+                    <Label
+                      variant={TextVariant.BodyMDMedium}
+                      color={TextColor.Default}
+                      style={styles.label}
                     >
-                      {strings('choose_password.subtitle')}
-                    </Text>
-                  </View>
-                </View>
-                <View style={styles.field}>
-                  <Text variant={TextVariant.BodySM}>
-                    {strings('choose_password.password')}
-                  </Text>
-                  <Text
-                    variant={TextVariant.BodySM}
-                    onPress={this.toggleShowHide}
-                    style={styles.showPassword}
-                  >
-                    {strings(
-                      `choose_password.${secureTextEntry ? 'show' : 'hide'}`,
+                      {strings('choose_password.password')}
+                    </Label>
+                    <TextField
+                      placeholder={strings(
+                        'import_from_seed.use_at_least_8_characters',
+                      )}
+                      value={password}
+                      onChangeText={this.onPasswordChange}
+                      secureTextEntry={this.state.showPasswordIndex.includes(0)}
+                      placeholderTextColor={colors.text.muted}
+                      testID={ChoosePasswordSelectorsIDs.NEW_PASSWORD_INPUT_ID}
+                      onSubmitEditing={this.jumpToConfirmPassword}
+                      returnKeyType="next"
+                      autoCapitalize="none"
+                      keyboardAppearance={themeAppearance}
+                      size={TextFieldSize.Lg}
+                      endAccessory={
+                        <Icon
+                          name={
+                            this.state.showPasswordIndex.includes(0)
+                              ? IconName.EyeSolid
+                              : IconName.EyeSlashSolid
+                          }
+                          size={IconSize.Lg}
+                          color={colors.icon.default}
+                          onPress={() => this.toggleShowPassword(0)}
+                        />
+                      }
+                    />
+                    {password !== '' && (
+                      <Text variant={TextVariant.BodySM}>
+                        {strings('choose_password.password_strength')}
+                        <Text
+                          variant={TextVariant.BodySM}
+                          style={styles[`strength_${passwordStrengthWord}`]}
+                        >
+                          {' '}
+                          {strings(
+                            `choose_password.strength_${passwordStrengthWord}`,
+                          )}
+                        </Text>
+                      </Text>
                     )}
-                  </Text>
-                  <TextInput
-                    style={[styles.input, inputWidth]}
-                    value={password}
-                    onChangeText={this.onPasswordChange}
-                    secureTextEntry={secureTextEntry}
-                    placeholder=""
-                    placeholderTextColor={colors.text.muted}
-                    testID={ChoosePasswordSelectorsIDs.NEW_PASSWORD_INPUT_ID}
-                    onSubmitEditing={this.jumpToConfirmPassword}
-                    returnKeyType="next"
-                    autoCapitalize="none"
-                    keyboardAppearance={themeAppearance}
-                  />
-                  {(password !== '' && (
-                    <Text
-                      variant={TextVariant.BodySM}
-                      style={styles.passwordStrengthLabel}
+                  </View>
+
+                  <View style={styles.field}>
+                    <Label
+                      variant={TextVariant.BodyMDMedium}
+                      color={TextColor.Default}
+                      style={styles.label}
                     >
-                      {strings('choose_password.password_strength')}
+                      {strings('choose_password.confirm_password')}
+                    </Label>
+                    <TextField
+                      placeholder={strings(
+                        'import_from_seed.re_enter_password',
+                      )}
+                      value={confirmPassword}
+                      onChangeText={this.setConfirmPassword}
+                      secureTextEntry={this.state.showPasswordIndex.includes(1)}
+                      placeholderTextColor={colors.text.muted}
+                      testID={
+                        ChoosePasswordSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID
+                      }
+                      accessibilityLabel={
+                        ChoosePasswordSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID
+                      }
+                      onSubmitEditing={this.onPressCreate}
+                      returnKeyType={'done'}
+                      autoCapitalize="none"
+                      keyboardAppearance={themeAppearance}
+                      size={TextFieldSize.Lg}
+                      endAccessory={
+                        <Icon
+                          name={
+                            this.state.showPasswordIndex.includes(1)
+                              ? IconName.EyeSolid
+                              : IconName.EyeSlashSolid
+                          }
+                          size={IconSize.Lg}
+                          color={colors.icon.default}
+                          onPress={() => this.toggleShowPassword(1)}
+                        />
+                      }
+                    />
+                    {!this.isError() ? (
+                      password === '' || password !== confirmPassword ? (
+                        <Text
+                          variant={TextVariant.BodySM}
+                          color={TextColor.Alternative}
+                        >
+                          {strings('choose_password.must_be_at_least', {
+                            number: MIN_PASSWORD_LENGTH,
+                          })}
+                        </Text>
+                      ) : null
+                    ) : (
                       <Text
                         variant={TextVariant.BodySM}
-                        style={styles[`strength_${passwordStrengthWord}`]}
+                        color={TextColor.Error}
                       >
-                        {' '}
-                        {strings(
-                          `choose_password.strength_${passwordStrengthWord}`,
-                        )}
+                        {strings('choose_password.password_error')}
                       </Text>
-                    </Text>
-                  )) || (
-                    <Text
-                      variant={TextVariant.BodySM}
-                      style={styles.passwordStrengthLabel}
-                    />
-                  )}
-                </View>
-                <View style={styles.field}>
-                  <Text variant={TextVariant.BodySM}>
-                    {strings('choose_password.confirm_password')}
-                  </Text>
-                  <TextInput
-                    ref={this.confirmPasswordInput}
-                    style={[styles.input, inputWidth]}
-                    value={confirmPassword}
-                    onChangeText={this.setConfirmPassword}
-                    secureTextEntry={secureTextEntry}
-                    placeholder={''}
-                    placeholderTextColor={colors.text.muted}
-                    testID={
-                      ChoosePasswordSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID
-                    }
-                    accessibilityLabel={
-                      ChoosePasswordSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID
-                    }
-                    onSubmitEditing={this.onPressCreate}
-                    returnKeyType={'done'}
-                    autoCapitalize="none"
-                    keyboardAppearance={themeAppearance}
-                  />
-                  <View style={styles.showMatchingPasswords}>
-                    {passwordsMatch ? (
-                      <Icon
-                        name="check"
-                        size={16}
-                        color={colors.success.default}
-                      />
-                    ) : null}
+                    )}
                   </View>
-                  <Text
-                    variant={TextVariant.BodySM}
-                    style={styles.passwordStrengthLabel}
-                  >
-                    {strings('choose_password.must_be_at_least', {
-                      number: MIN_PASSWORD_LENGTH,
-                    })}
-                  </Text>
+
+                  {this.renderSwitch()}
                 </View>
-                <View>{this.renderSwitch()}</View>
-                <View style={styles.checkboxContainer}>
-                  <CheckBox
-                    value={isSelected}
-                    onValueChange={this.setSelection}
-                    style={styles.checkbox}
-                    tintColors={{
-                      true: colors.primary.default,
-                      false: colors.border.default,
-                    }}
-                    boxType="square"
+
+                <View style={styles.learnMoreContainer}>
+                  <Checkbox
+                    onPress={this.setSelection}
+                    isChecked={isSelected}
                     testID={
                       ChoosePasswordSelectorsIDs.IOS_I_UNDERSTAND_BUTTON_ID
                     }
                     accessibilityLabel={
                       ChoosePasswordSelectorsIDs.IOS_I_UNDERSTAND_BUTTON_ID
                     }
-                  />
-                  <Text
-                    style={styles.label}
-                    variant={TextVariant.BodySM}
-                    onPress={this.setSelection}
-                    testID={
-                      ChoosePasswordSelectorsIDs.ANDROID_I_UNDERSTAND_BUTTON_ID
+                    style={styles.checkbox}
+                    label={
+                      <View style={styles.learnMoreTextContainer}>
+                        <Text
+                          variant={TextVariant.BodySM}
+                          color={TextColor.Default}
+                          numberOfLines={2}
+                        >
+                          {strings('import_from_seed.learn_more')}{' '}
+                        </Text>
+                        <Text
+                          variant={TextVariant.BodySM}
+                          color={TextColor.Primary}
+                          onPress={this.learnMore}
+                        >
+                          {' ' + strings('reset_password.learn_more')}
+                        </Text>
+                      </View>
                     }
-                  >
-                    {strings('choose_password.i_understand')}{' '}
-                    <Text
-                      variant={TextVariant.BodySM}
-                      color={TextColor.Info}
-                      onPress={this.learnMore}
-                      style={styles.learnMore}
-                    >
-                      {strings('choose_password.learn_more')}
-                    </Text>
-                  </Text>
+                  />
                 </View>
 
+                {/* <View>{this.renderSwitch()}</View> */}
+
                 {!!error && <Text color={TextColor.Error}>{error}</Text>}
               </View>
 
               <View style={styles.ctaWrapper}>
-                <StyledButton
-                  type={'blue'}
+                <Button
+                  variant={ButtonVariants.Primary}
                   onPress={this.onPressCreate}
-                  testID={ChoosePasswordSelectorsIDs.SUBMIT_BUTTON_ID}
+                  label={strings('choose_password.confirm_cta')}
                   disabled={!canSubmit}
-                >
-                  {strings('choose_password.create_button')}
-                </StyledButton>
+                  width={ButtonWidthTypes.Full}
+                  size={ButtonSize.Lg}
+                  isDisabled={!canSubmit}
+                />
               </View>
             </KeyboardAwareScrollView>
           </View>
@@ -775,4 +808,8 @@ const mapDispatchToProps = (dispatch) => ({
   seedphraseNotBackedUp: () => dispatch(seedphraseNotBackedUp()),
 });
 
-export default connect(null, mapDispatchToProps)(ChoosePassword);
+const mapStateToProps = (state) => ({
+  oauth2LoginSuccess: state.user.oauth2LoginSuccess,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChoosePassword);
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
index 1900de12fec5..e20480689bb0 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
@@ -1,21 +1,25 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  useRef,
+  useContext,
+} from 'react';
 import PropTypes from 'prop-types';
 import {
-  ActivityIndicator,
   Alert,
-  TouchableOpacity,
-  Text,
   View,
   TextInput,
   SafeAreaView,
   Platform,
+  FlatList,
+  TouchableOpacity,
+  Keyboard,
 } from 'react-native';
 import { connect } from 'react-redux';
 import StorageWrapper from '../../../store/storage-wrapper';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import zxcvbn from 'zxcvbn';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { OutlinedTextField } from 'react-native-material-textfield';
 import Clipboard from '@react-native-clipboard/clipboard';
 import AppConstants from '../../../core/AppConstants';
 import Device from '../../../util/device';
@@ -32,17 +36,14 @@ import {
   MIN_PASSWORD_LENGTH,
 } from '../../../util/password';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-
 import { useTheme } from '../../../util/theme';
 import { passwordSet, seedphraseBackedUp } from '../../../actions/user';
 import { QRTabSwitcherScreens } from '../../../components/Views/QRTabSwitcher';
 import { setLockTime } from '../../../actions/settings';
 import setOnboardingWizardStep from '../../../actions/wizard';
 import { strings } from '../../../../locales/i18n';
-import TermsAndConditions from '../TermsAndConditions';
 import { getOnboardingNavbarOptions } from '../../UI/Navbar';
-import StyledButton from '../../UI/StyledButton';
-import { LoginOptionsSwitch } from '../../UI/LoginOptionsSwitch';
+// import { LoginOptionsSwitch } from '../../UI/LoginOptionsSwitch';
 import { ScreenshotDeterrent } from '../../UI/ScreenshotDeterrent';
 import {
   BIOMETRY_CHOICE_DISABLED,
@@ -51,7 +52,6 @@ import {
   PASSCODE_DISABLED,
 } from '../../../constants/storage';
 import Routes from '../../../constants/navigation/Routes';
-
 import createStyles from './styles';
 import { Authentication } from '../../../core';
 import AUTHENTICATION_TYPE from '../../../constants/userProperties';
@@ -64,6 +64,30 @@ import { ImportFromSeedSelectorsIDs } from '../../../../e2e/selectors/Onboarding
 import { ChoosePasswordSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ChoosePassword.selectors';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
+import { SecurityOptionToggle } from '../../UI/SecurityOptionToggle';
+import Checkbox from '../../../component-library/components/Checkbox';
+import Button, {
+  ButtonVariants,
+  ButtonWidthTypes,
+  ButtonSize,
+} from '../../../component-library/components/Buttons/Button';
+import Icon, {
+  IconName,
+  IconSize,
+  IconColor,
+} from '../../../component-library/components/Icons/Icon';
+import { ToastContext } from '../../../component-library/components/Toast/Toast.context';
+import { ToastVariants } from '../../../component-library/components/Toast/Toast.types';
+import TextField from '../../../component-library/components/Form/TextField/TextField';
+import Label from '../../../component-library/components/Form/Label';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../component-library/components/Texts/Text';
+import { TextFieldSize } from '../../../component-library/components/Form/TextField';
+import SeedphraseModal from '../../UI/SeedphraseModal';
+import { wordlist } from '@metamask/scure-bip39/dist/wordlists/english';
+import { LoginOptionsSwitch } from '../../UI/LoginOptionsSwitch';
 
 const MINIMUM_SUPPORTED_CLIPBOARD_VERSION = 9;
 
@@ -87,22 +111,49 @@ const ImportFromSecretRecoveryPhrase = ({
   const { colors, themeAppearance } = useTheme();
   const styles = createStyles(colors);
 
+  const seedPhraseInputRefs = useRef([]);
+  const { toastRef } = useContext(ToastContext);
+
+  const passwordInput = React.createRef();
+  const confirmPasswordInput = React.createRef();
+
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [passwordStrength, setPasswordStrength] = useState();
   const [seed, setSeed] = useState('');
   const [biometryType, setBiometryType] = useState(null);
   const [rememberMe, setRememberMe] = useState(false);
-  const [secureTextEntry, setSecureTextEntry] = useState(true);
-  const [biometryChoice, setBiometryChoice] = useState(false);
+  const [biometryChoice, setBiometryChoice] = useState(true);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [seedphraseInputFocused, setSeedphraseInputFocused] = useState(false);
-  const [inputWidth, setInputWidth] = useState({ width: '99%' });
+  const [error, setError] = useState('');
   const [hideSeedPhraseInput, setHideSeedPhraseInput] = useState(true);
-
-  const passwordInput = React.createRef();
-  const confirmPasswordInput = React.createRef();
+  const [seedPhrase, setSeedPhrase] = useState([]);
+  const [seedPhraseInputFocusedIndex, setSeedPhraseInputFocusedIndex] =
+    useState(-1);
+  const [showAllSeedPhrase, setShowAllSeedPhrase] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [learnMore, setLearnMore] = useState(false);
+  const [showPasswordIndex, setShowPasswordIndex] = useState([0, 1]);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [showWhatIsSeedPhraseModal, setWhatIsSeedPhraseModal] = useState(false);
+
+  const inputPadding = 4;
+  const numColumns = 3; // Number of columns
+
+  const seedPhraseLength = seedPhrase.filter((item) => item !== '').length;
+
+  const isSRPContinueButtonDisabled = () =>
+    seedPhraseLength !== 12 &&
+    seedPhraseLength !== 15 &&
+    seedPhraseLength !== 18 &&
+    seedPhraseLength !== 21 &&
+    seedPhraseLength !== 24;
+
+  // const hideWhatIsSeedPhrase = () => setWhatIsSeedPhraseModal(false);
+
+  const handleLayout = (event) => {
+    setContainerWidth(event.nativeEvent.layout.width);
+  };
 
   const track = (event, properties) => {
     const eventBuilder = MetricsEventBuilder.createEventBuilder(event);
@@ -110,13 +161,76 @@ const ImportFromSecretRecoveryPhrase = ({
     trackOnboarding(eventBuilder.build());
   };
 
+  const onQrCodePress = useCallback(() => {
+    let shouldHideSRP = true;
+    if (!hideSeedPhraseInput) {
+      shouldHideSRP = false;
+    }
+
+    setHideSeedPhraseInput(false);
+    navigation.navigate(Routes.QR_TAB_SWITCHER, {
+      initialScreen: QRTabSwitcherScreens.Scanner,
+      disableTabber: true,
+      onScanSuccess: ({ seed = undefined }) => {
+        if (seed) {
+          setSeedPhrase(seed);
+        } else {
+          Alert.alert(
+            strings('import_from_seed.invalid_qr_code_title'),
+            strings('import_from_seed.invalid_qr_code_message'),
+          );
+        }
+        setHideSeedPhraseInput(shouldHideSRP);
+      },
+      onScanError: (error) => {
+        setHideSeedPhraseInput(shouldHideSRP);
+      },
+    });
+  }, [hideSeedPhraseInput, navigation]);
+
+  const onBackPress = () => {
+    if (currentStep === 0) {
+      navigation.goBack();
+    } else {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
   const updateNavBar = () => {
-    navigation.setOptions(getOnboardingNavbarOptions(route, {}, colors));
+    navigation.setOptions(
+      getOnboardingNavbarOptions(
+        route,
+        {
+          headerLeft: () => (
+            <TouchableOpacity onPress={onBackPress}>
+              <Icon
+                name={IconName.ArrowLeft}
+                size={24}
+                color={colors.text.default}
+                style={styles.headerLeft}
+              />
+            </TouchableOpacity>
+          ),
+          headerRight: () => (
+            <TouchableOpacity onPress={onQrCodePress}>
+              <Icon
+                name={IconName.Scan}
+                size={24}
+                color={colors.text.default}
+                onPress={onQrCodePress}
+                style={styles.headerRight}
+              />
+            </TouchableOpacity>
+          ),
+        },
+        colors,
+        false,
+      ),
+    );
   };
 
   useEffect(() => {
     updateNavBar();
-
     const setBiometricsOption = async () => {
       const authData = await Authentication.getType();
       const previouslyDisabled = await StorageWrapper.getItem(
@@ -138,11 +252,11 @@ const ImportFromSecretRecoveryPhrase = ({
 
     setBiometricsOption();
     // Workaround https://github.com/facebook/react-native/issues/9958
-    setTimeout(() => {
-      setInputWidth({ width: '100%' });
-    }, 100);
+    // setTimeout(() => {
+    //   setInputWidth({ width: '100%' });
+    // }, 100);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [currentStep]);
 
   const termsOfUse = useCallback(async () => {
     if (navigation) {
@@ -182,11 +296,212 @@ const ImportFromSecretRecoveryPhrase = ({
     updateBiometryChoice(false);
   };
 
+  const clearSecretRecoveryPhrase = async (seed) => {
+    // get clipboard contents
+    const clipboardContents = await Clipboard.getString();
+    const parsedClipboardContents = parseSeedPhrase(clipboardContents);
+    if (
+      // only clear clipboard if contents isValidMnemonic
+      !failedSeedPhraseRequirements(parsedClipboardContents) &&
+      isValidMnemonic(parsedClipboardContents) &&
+      // only clear clipboard if the seed phrase entered matches what's in the clipboard
+      parseSeedPhrase(seed) === parsedClipboardContents
+    ) {
+      await Clipboard.clearString();
+    }
+  };
+
+  const onSeedWordsChange = useCallback(async (seed) => {
+    setSeed(seed);
+    // Only clear on android since iOS will notify users when we getString()
+    if (Device.isAndroid()) {
+      const androidOSVersion = parseInt(Platform.constants.Release, 10);
+      // This conditional is necessary to avoid an error in Android 8.1.0 or lower
+      if (androidOSVersion >= MINIMUM_SUPPORTED_CLIPBOARD_VERSION) {
+        await clearSecretRecoveryPhrase(seed);
+      }
+    }
+  }, []);
+
+  const onPasswordChange = (value) => {
+    const passInfo = zxcvbn(value);
+
+    setPassword(value);
+    setPasswordStrength(passInfo.score);
+  };
+
+  const onPasswordConfirmChange = (value) => {
+    setConfirmPassword(value);
+  };
+
+  const jumpToPassword = useCallback(() => {
+    const { current } = passwordInput;
+    current && current.focus();
+  }, [passwordInput]);
+
+  const jumpToConfirmPassword = () => {
+    const { current } = confirmPasswordInput;
+    current && current.focus();
+  };
+
+  const renderSwitch = () => {
+    const handleUpdateRememberMe = (rememberMe) => {
+      setRememberMe(rememberMe);
+    };
+    return (
+      <LoginOptionsSwitch
+        shouldRenderBiometricOption={biometryType}
+        biometryChoiceState={biometryChoice}
+        onUpdateBiometryChoice={updateBiometryChoice}
+        onUpdateRememberMe={handleUpdateRememberMe}
+      />
+    );
+  };
+
+  const passwordStrengthWord = getPasswordStrengthWord(passwordStrength);
+
+  const handleSeedPhraseChange = (text, index) => {
+    setError('');
+    if (text.includes(' ')) {
+      setSeedPhrase((prev) => {
+        // handle use pasting multiple words / whole seed phrase separated by spaces
+        const splitArray = text.trim().split(/\s+/); // split by any spaces
+        return [
+          ...prev.slice(0, index),
+          ...splitArray,
+          ...prev.slice(index + 1),
+        ]; // input the array into the correct index
+      });
+    } else {
+      setSeedPhrase((prev) => {
+        // update the word at the correct index
+        const newSeedPhrase = [...prev];
+        newSeedPhrase[index] = text.trim();
+        return newSeedPhrase;
+      });
+    }
+  };
+
+  const handleKeyPress = (e, index, enterPressed = false) => {
+    setError('');
+    const { key } = e.nativeEvent;
+    if (key === 'Backspace') {
+      if (index === 0 && seedPhrase.length === 1) {
+        setSeedPhrase(['']);
+      } else if (seedPhrase[index] === '') {
+        const newData = seedPhrase.filter((_, idx) => idx !== index);
+        setSeedPhrase(newData);
+        seedPhraseInputRefs.current[index - 1]?.focus();
+      } else {
+        const newData = [...seedPhrase];
+        newData[index] = '';
+        setSeedPhrase(newData);
+        seedPhraseInputRefs.current[index]?.focus();
+      }
+    }
+    if (
+      (key === ' ' || key === 'Enter' || key === 'return' || enterPressed) &&
+      index === seedPhrase.length - 1 &&
+      seedPhrase[index] !== ''
+    ) {
+      setSeedPhrase([...seedPhrase, '']);
+      seedPhraseInputRefs.current[index + 1]?.focus();
+    }
+    if (
+      (key === ' ' || key === 'Enter' || key === 'return' || enterPressed) &&
+      seedPhrase[index] !== ''
+    ) {
+      const firstList = seedPhrase.slice(0, index + 1);
+      const secondList = seedPhrase.slice(index + 1);
+      setSeedPhrase([...firstList, '', ...secondList]);
+      seedPhraseInputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handlePaste = async () => {
+    setError('');
+    const text = await Clipboard.getString(); // Get copied text
+    if (text.trim() !== '') {
+      const pastedData = text.split(' '); // Split by spaces
+      setSeedPhrase([...pastedData].filter((item) => item !== ''));
+      Keyboard.dismiss();
+      seedPhraseInputRefs.current[seedPhrase.length]?.focus();
+    }
+  };
+
+  const toggleShowAllSeedPhrase = () => {
+    setShowAllSeedPhrase((prev) => !prev);
+  };
+
+  const handleClear = () => {
+    setSeedPhrase([]);
+    setShowAllSeedPhrase(false);
+    setError('');
+  };
+
+  const validateSeedPhrase = () => {
+    const phrase = seedPhrase.filter((item) => item !== '').join(' ');
+    const seedPhraseLength = seedPhrase.length;
+    if (
+      seedPhraseLength !== 12 &&
+      seedPhraseLength !== 15 &&
+      seedPhraseLength !== 18 &&
+      seedPhraseLength !== 21 &&
+      seedPhraseLength !== 24
+    ) {
+      toastRef?.current?.showToast({
+        variant: ToastVariants.Icon,
+        labelOptions: [
+          { label: strings('import_from_seed.seed_phrase_length_error') },
+        ],
+        hasNoTimeout: false,
+        iconName: IconName.DangerSolid,
+        iconColor: IconColor.Error,
+      });
+      return false;
+    }
+
+    if (!isValidMnemonic(phrase)) {
+      setError(strings('import_from_seed.invalid_seed_phrase'));
+      return false;
+    }
+    return true;
+  };
+
+  const handleContinueImportFlow = () => {
+    if (!validateSeedPhrase()) {
+      return;
+    }
+    if (seedPhrase.length === 0) {
+      Alert.alert(
+        strings('import_from_seed.error'),
+        strings('import_from_seed.seed_phrase_required'),
+      );
+      return;
+    }
+    setCurrentStep(currentStep + 1);
+  };
+
+  const isContinueButtonDisabled = () =>
+    password === '' ||
+    confirmPassword === '' ||
+    password !== confirmPassword ||
+    !learnMore;
+
+  const toggleShowPassword = (index) => {
+    setShowPasswordIndex((prev) => {
+      if (prev.includes(index)) {
+        return prev.filter((item) => item !== index);
+      }
+      return [...prev, index];
+    });
+  };
+
   const onPressImport = async () => {
-    const vaultSeed = await parseVaultValue(password, seed);
-    const parsedSeed = parseSeedPhrase(vaultSeed || seed);
-    //Set the seed state with a valid parsed seed phrase (handle vault scenario)
-    setSeed(parsedSeed);
+    const vaultSeed = await parseVaultValue(password, seedPhrase.join(' '));
+    const parsedSeed = parseSeedPhrase(vaultSeed || seedPhrase.join(' '));
+    // //Set the seed state with a valid parsed seed phrase (handle vault scenario)
+    // setSeed(parsedSeed);
 
     if (loading) return;
     track(MetaMetricsEvents.WALLET_IMPORT_ATTEMPTED);
@@ -245,10 +560,24 @@ const ImportFromSecretRecoveryPhrase = ({
           new_wallet: false,
         });
         !onboardingWizard && setOnboardingWizardStep(1);
-        navigation.reset({
-          index: 1,
-          routes: [{ name: Routes.ONBOARDING.SUCCESS_FLOW }],
+        navigation.navigate('OptinMetrics', {
+          onContinue: () => {
+            navigation.reset({
+              index: 1,
+              routes: [
+                {
+                  name: Routes.ONBOARDING.SUCCESS_FLOW,
+                  params: { showPasswordHint: false },
+                },
+              ],
+            });
+          },
         });
+        // navigation.reset({
+        //   index: 1,
+        //   routes: [{ name: Routes.ONBOARDING.SUCCESS_FLOW }],
+        // });
+        // await importAdditionalAccounts();
       } catch (error) {
         // Should we force people to enable passcode / biometrics?
         if (error.toString() === PASSCODE_NOT_SET_ERROR) {
@@ -270,338 +599,382 @@ const ImportFromSecretRecoveryPhrase = ({
     }
   };
 
-  const clearSecretRecoveryPhrase = async (seed) => {
-    // get clipboard contents
-    const clipboardContents = await Clipboard.getString();
-    const parsedClipboardContents = parseSeedPhrase(clipboardContents);
-    if (
-      // only clear clipboard if contents isValidMnemonic
-      !failedSeedPhraseRequirements(parsedClipboardContents) &&
-      isValidMnemonic(parsedClipboardContents) &&
-      // only clear clipboard if the seed phrase entered matches what's in the clipboard
-      parseSeedPhrase(seed) === parsedClipboardContents
-    ) {
-      await Clipboard.clearString();
-    }
-  };
+  const isError =
+    password !== '' && confirmPassword !== '' && password !== confirmPassword;
 
-  const onSeedWordsChange = useCallback(async (seed) => {
-    setSeed(seed);
-    // Only clear on android since iOS will notify users when we getString()
-    if (Device.isAndroid()) {
-      const androidOSVersion = parseInt(Platform.constants.Release, 10);
-      // This conditional is necessary to avoid an error in Android 8.1.0 or lower
-      if (androidOSVersion >= MINIMUM_SUPPORTED_CLIPBOARD_VERSION) {
-        await clearSecretRecoveryPhrase(seed);
-      }
+  const isValidSeed = (text) => {
+    const isValid = wordlist.includes(text);
+    if (!isValid) {
+      setError(strings('import_from_seed.spellcheck_error'));
     }
-  }, []);
-
-  const onPasswordChange = (value) => {
-    const passInfo = zxcvbn(value);
-
-    setPassword(value);
-    setPasswordStrength(passInfo.score);
+    return isValid;
   };
 
-  const onPasswordConfirmChange = (value) => {
-    setConfirmPassword(value);
-  };
-
-  const jumpToPassword = useCallback(() => {
-    const { current } = passwordInput;
-    current && current.focus();
-  }, [passwordInput]);
-
-  const jumpToConfirmPassword = () => {
-    const { current } = confirmPasswordInput;
-    current && current.focus();
-  };
-
-  const renderSwitch = () => {
-    const handleUpdateRememberMe = (rememberMe) => {
-      setRememberMe(rememberMe);
-    };
-    return (
-      <LoginOptionsSwitch
-        shouldRenderBiometricOption={biometryType}
-        biometryChoiceState={biometryChoice}
-        onUpdateBiometryChoice={updateBiometryChoice}
-        onUpdateRememberMe={handleUpdateRememberMe}
-      />
-    );
-  };
-
-  const toggleShowHide = () => {
-    setSecureTextEntry(!secureTextEntry);
+  const showWhatIsSeedPhrase = () => {
+    navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.SEEDPHRASE_MODAL,
+    });
   };
 
-  const toggleHideSeedPhraseInput = useCallback(() => {
-    setHideSeedPhraseInput(!hideSeedPhraseInput);
-  }, [hideSeedPhraseInput]);
-
-  const onQrCodePress = useCallback(() => {
-    let shouldHideSRP = true;
-    if (!hideSeedPhraseInput) {
-      shouldHideSRP = false;
-    }
-
-    setHideSeedPhraseInput(false);
-    navigation.navigate(Routes.QR_TAB_SWITCHER, {
-      initialScreen: QRTabSwitcherScreens.Scanner,
-      disableTabber: true,
-      onScanSuccess: ({ seed = undefined }) => {
-        if (seed) {
-          setSeed(seed);
-        } else {
-          Alert.alert(
-            strings('import_from_seed.invalid_qr_code_title'),
-            strings('import_from_seed.invalid_qr_code_message'),
-          );
-        }
-        setHideSeedPhraseInput(shouldHideSRP);
-      },
-      onScanError: (error) => {
-        setHideSeedPhraseInput(shouldHideSRP);
+  const learnMoreLink = () => {
+    navigation.push('Webview', {
+      screen: 'SimpleWebview',
+      params: {
+        url: 'https://support.metamask.io/managing-my-wallet/resetting-deleting-and-restoring/how-can-i-reset-my-password/',
+        title: 'support.metamask.io',
       },
     });
-  }, [hideSeedPhraseInput, navigation]);
-
-  const passwordStrengthWord = getPasswordStrengthWord(passwordStrength);
-
-  const hiddenSRPInput = useCallback(
-    () => (
-      <OutlinedTextField
-        style={styles.input}
-        containerStyle={inputWidth}
-        inputContainerStyle={styles.padding}
-        placeholder={strings('import_from_seed.seed_phrase_placeholder')}
-        testID={ImportFromSeedSelectorsIDs.SEED_PHRASE_INPUT_ID}
-        placeholderTextColor={colors.text.muted}
-        returnKeyType="next"
-        autoCapitalize="none"
-        secureTextEntry={hideSeedPhraseInput}
-        onChangeText={onSeedWordsChange}
-        value={seed}
-        baseColor={colors.border.default}
-        tintColor={colors.primary.default}
-        onSubmitEditing={jumpToPassword}
-        keyboardAppearance={themeAppearance || 'light'}
-      />
-    ),
-    [
-      colors.border.default,
-      colors.primary.default,
-      colors.text.muted,
-      hideSeedPhraseInput,
-      inputWidth,
-      jumpToPassword,
-      onSeedWordsChange,
-      seed,
-      styles.input,
-      styles.padding,
-      themeAppearance,
-    ],
-  );
+  };
 
   return (
-    <SafeAreaView style={styles.mainWrapper}>
+    <SafeAreaView style={styles.root}>
       <KeyboardAwareScrollView
         style={styles.wrapper}
         resetScrollToCoords={{ x: 0, y: 0 }}
       >
         <View testID={ImportFromSeedSelectorsIDs.CONTAINER_ID}>
-          <Text
-            style={styles.title}
-            testID={ImportFromSeedSelectorsIDs.SCREEN_TITLE_ID}
-          >
-            {strings('import_from_seed.title')}
+          <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+            {strings('import_from_seed.step', {
+              currentStep: currentStep + 1,
+              totalSteps: 2,
+            })}
           </Text>
-          <View style={styles.fieldRow}>
-            <View style={styles.fieldCol}>
-              <Text style={styles.label}>
-                {strings('choose_password.seed_phrase')}
+          {currentStep === 0 && (
+            <>
+              <Text
+                variant={TextVariant.DisplayMD}
+                color={TextColor.Default}
+                testID={ImportFromSeedSelectorsIDs.SCREEN_TITLE_ID}
+              >
+                {strings('import_from_seed.title')}
               </Text>
-            </View>
-            <View style={[styles.fieldCol, styles.fieldColRight]}>
-              <TouchableOpacity onPress={toggleHideSeedPhraseInput}>
-                <Text style={styles.label}>
-                  {strings(
-                    `choose_password.${hideSeedPhraseInput ? 'show' : 'hide'}`,
-                  )}
-                </Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-          {hideSeedPhraseInput ? (
-            hiddenSRPInput()
-          ) : (
-            <TextInput
-              value={seed}
-              numberOfLines={3}
-              style={[
-                styles.seedPhrase,
-                inputWidth,
-                seedphraseInputFocused && styles.inputFocused,
-              ]}
-              secureTextEntry
-              multiline={!hideSeedPhraseInput}
-              placeholder={strings('import_from_seed.seed_phrase_placeholder')}
-              placeholderTextColor={colors.text.muted}
-              onChangeText={onSeedWordsChange}
-              blurOnSubmit
-              onSubmitEditing={jumpToPassword}
-              returnKeyType="next"
-              keyboardType={
-                (!hideSeedPhraseInput &&
-                  Device.isAndroid() &&
-                  'visible-password') ||
-                'default'
-              }
-              autoCapitalize="none"
-              autoCorrect={false}
-              onFocus={
-                (() =>
-                  !hideSeedPhraseInput &&
-                  setSeedphraseInputFocused(!seedphraseInputFocused)) || null
-              }
-              onBlur={
-                (() =>
-                  !hideSeedPhraseInput &&
-                  setSeedphraseInputFocused(!seedphraseInputFocused)) || null
-              }
-              keyboardAppearance={themeAppearance || 'light'}
-            />
-          )}
-          <TouchableOpacity style={styles.qrCode} onPress={onQrCodePress}>
-            <Icon name="qrcode" size={20} color={colors.icon.default} />
-          </TouchableOpacity>
-          <View style={styles.field}>
-            <View style={styles.fieldRow}>
-              <View style={styles.fieldCol}>
-                <Text style={styles.label}>
-                  {strings('import_from_seed.new_password')}
-                </Text>
-              </View>
-              <View style={[styles.fieldCol, styles.fieldColRight]}>
-                <TouchableOpacity onPress={toggleShowHide}>
-                  <Text style={styles.label}>
+              <View style={styles.container}>
+                <View style={styles.description}>
+                  <Text
+                    variant={TextVariant.BodyMD}
+                    color={TextColor.Alternative}
+                  >
                     {strings(
-                      `choose_password.${secureTextEntry ? 'show' : 'hide'}`,
+                      'import_from_seed.enter_your_secret_recovery_phrase',
                     )}
                   </Text>
-                </TouchableOpacity>
+                  <TouchableOpacity onPress={showWhatIsSeedPhrase}>
+                    <Icon
+                      name={IconName.Info}
+                      size={IconSize.Md}
+                      color={colors.icon.alternative}
+                    />
+                  </TouchableOpacity>
+                </View>
+                <View style={styles.seedPhraseRoot}>
+                  <View style={styles.seedPhraseContainer}>
+                    <View style={styles.seedPhraseInnerContainer}>
+                      {seedPhrase.length <= 1 ? (
+                        <TextInput
+                          textAlignVertical="top"
+                          label={strings('import_from_seed.srp')}
+                          placeholder={strings(
+                            'import_from_seed.srp_placeholder',
+                          )}
+                          value={seedPhrase?.[0] || ''}
+                          onChangeText={(text) =>
+                            handleSeedPhraseChange(text, 0)
+                          }
+                          style={styles.seedPhraseDefaultInput}
+                          placeholderTextColor={colors.text.alternative}
+                          placeholderStyle={
+                            styles.seedPhraseDefaultInputPlaceholder
+                          }
+                          multiline
+                          autoFocus
+                          onKeyPress={(e) => handleKeyPress(e, 0)}
+                          autoComplete="off"
+                          blurOnSubmit={false}
+                        />
+                      ) : (
+                        <View
+                          style={[styles.seedPhraseInputContainer]}
+                          onLayout={handleLayout}
+                        >
+                          <FlatList
+                            data={seedPhrase}
+                            numColumns={numColumns}
+                            keyExtractor={(_, index) => index.toString()}
+                            renderItem={({ item, index }) => (
+                              <View
+                                style={[
+                                  {
+                                    width: containerWidth / 3,
+                                    padding: inputPadding,
+                                  },
+                                ]}
+                              >
+                                <TextField
+                                  startAccessory={
+                                    <Text
+                                      variant={TextVariant.BodyMD}
+                                      color={TextColor.Alternative}
+                                      style={styles.inputIndex}
+                                    >
+                                      {index + 1}.
+                                    </Text>
+                                  }
+                                  value={
+                                    item &&
+                                    (showAllSeedPhrase
+                                      ? false
+                                      : seedPhraseInputFocusedIndex !==
+                                        index) &&
+                                    isValidSeed(item)
+                                      ? '***'
+                                      : item
+                                  }
+                                  secureTextEntry={
+                                    isValidSeed(item) &&
+                                    (showAllSeedPhrase
+                                      ? false
+                                      : seedPhraseInputFocusedIndex !== index)
+                                  }
+                                  onFocus={() =>
+                                    setSeedPhraseInputFocusedIndex(index)
+                                  }
+                                  onChangeText={(text) =>
+                                    handleSeedPhraseChange(text, index)
+                                  }
+                                  placeholderTextColor={colors.text.muted}
+                                  autoFocus={
+                                    showAllSeedPhrase
+                                      ? false
+                                      : index === seedPhrase.length - 1
+                                  }
+                                  onSubmitEditing={(e) => {
+                                    handleKeyPress(e, index, true);
+                                  }}
+                                  onKeyPress={(e) => handleKeyPress(e, index)}
+                                  size={TextFieldSize.Md}
+                                  style={[styles.input]}
+                                  autoComplete="off"
+                                  textAlignVertical="top"
+                                  showSoftInputOnFocus
+                                  blurOnSubmit={false}
+                                  isError={!isValidSeed(item)}
+                                />
+                              </View>
+                            )}
+                          />
+                        </View>
+                      )}
+                    </View>
+                    <View style={styles.seedPhraseContainerCta}>
+                      <Button
+                        variant={ButtonVariants.Link}
+                        style={styles.pasteButton}
+                        onPress={toggleShowAllSeedPhrase}
+                        label={
+                          showAllSeedPhrase
+                            ? strings('import_from_seed.hide_all')
+                            : strings('import_from_seed.show_all')
+                        }
+                        width={ButtonWidthTypes.Full}
+                      />
+                      <Button
+                        label={
+                          seedPhrase.length > 1
+                            ? strings('import_from_seed.clear_all')
+                            : strings('import_from_seed.paste')
+                        }
+                        variant={ButtonVariants.Link}
+                        style={styles.pasteButton}
+                        onPress={() => {
+                          if (seedPhrase.length > 1) {
+                            handleClear();
+                          } else {
+                            handlePaste();
+                          }
+                        }}
+                        width={ButtonWidthTypes.Full}
+                      />
+                    </View>
+                  </View>
+                  {error !== '' && (
+                    <Text
+                      variant={TextVariant.BodySMMedium}
+                      color={TextColor.Error}
+                    >
+                      {error}
+                    </Text>
+                  )}
+                </View>
+                <View style={styles.seedPhraseCtaContainer}>
+                  <Button
+                    variant={ButtonVariants.Primary}
+                    label={strings('import_from_seed.continue')}
+                    onPress={() => handleContinueImportFlow()}
+                    width={ButtonWidthTypes.Full}
+                    size={ButtonSize.Lg}
+                    isDisabled={isSRPContinueButtonDisabled() || Boolean(error)}
+                  />
+                </View>
               </View>
-            </View>
-            <OutlinedTextField
-              style={styles.input}
-              containerStyle={inputWidth}
-              testID={ChoosePasswordSelectorsIDs.NEW_PASSWORD_INPUT_ID}
-              placeholder={strings('import_from_seed.new_password')}
-              placeholderTextColor={colors.text.muted}
-              returnKeyType={'next'}
-              autoCapitalize="none"
-              secureTextEntry={secureTextEntry}
-              onChangeText={onPasswordChange}
-              value={password}
-              baseColor={colors.border.default}
-              tintColor={colors.primary.default}
-              onSubmitEditing={jumpToConfirmPassword}
-              keyboardAppearance={themeAppearance || 'light'}
-            />
-
-            {(password !== '' && (
+            </>
+          )}
+
+          {currentStep === 1 && (
+            <View style={styles.passwordContainer}>
               <Text
-                style={styles.passwordStrengthLabel}
-                testID={ImportFromSeedSelectorsIDs.PASSWORD_STRENGTH_ID}
+                variant={TextVariant.DisplayMD}
+                color={TextColor.Default}
+                testID={ImportFromSeedSelectorsIDs.SCREEN_TITLE_ID}
               >
-                {strings('choose_password.password_strength')}
-                <Text style={styles[`strength_${passwordStrengthWord}`]}>
-                  {' '}
-                  {strings(`choose_password.strength_${passwordStrengthWord}`)}
-                </Text>
+                {strings('import_from_seed.create_password')}
               </Text>
-            )) || <Text style={styles.passwordStrengthLabel} />}
-          </View>
-
-          <View style={styles.field}>
-            <Text style={styles.label}>
-              {strings('import_from_seed.confirm_password')}
-            </Text>
-            <OutlinedTextField
-              style={styles.input}
-              containerStyle={inputWidth}
-              testID={ChoosePasswordSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID}
-              onChangeText={onPasswordConfirmChange}
-              returnKeyType={'next'}
-              autoCapitalize="none"
-              secureTextEntry={secureTextEntry}
-              placeholder={strings('import_from_seed.confirm_password')}
-              value={confirmPassword}
-              baseColor={colors.border.default}
-              tintColor={colors.primary.default}
-              onSubmitEditing={onPressImport}
-              placeholderTextColor={colors.text.muted}
-              keyboardAppearance={themeAppearance || 'light'}
-            />
-
-            <View style={styles.showMatchingPasswords}>
-              {password !== '' && password === confirmPassword ? (
-                <Icon
-                  name="check"
-                  size={12}
-                  color={colors.success.default}
-                  testID={
-                    ImportFromSeedSelectorsIDs.CONFIRM_PASSWORD_CHECK_ICON_ID
+
+              <View style={styles.passwordContainer}>
+                <View style={styles.field}>
+                  <Label
+                    variant={TextVariant.BodyMDMedium}
+                    color={TextColor.Default}
+                    style={styles.label}
+                  >
+                    {strings('import_from_seed.new_password')}
+                  </Label>
+                  <TextField
+                    placeholder={strings(
+                      'import_from_seed.use_at_least_8_characters',
+                    )}
+                    size={TextFieldSize.Lg}
+                    value={password}
+                    onChangeText={onPasswordChange}
+                    secureTextEntry={showPasswordIndex.includes(0)}
+                    returnKeyType={'next'}
+                    autoCapitalize="none"
+                    keyboardAppearance={themeAppearance || 'light'}
+                    placeholderTextColor={colors.text.muted}
+                    onSubmitEditing={jumpToConfirmPassword}
+                    endAccessory={
+                      <Icon
+                        name={
+                          showPasswordIndex.includes(0)
+                            ? IconName.EyeSolid
+                            : IconName.EyeSlashSolid
+                        }
+                        size={IconSize.Lg}
+                        color={colors.icon.default}
+                        onPress={() => toggleShowPassword(0)}
+                      />
+                    }
+                    testID={ChoosePasswordSelectorsIDs.NEW_PASSWORD_INPUT_ID}
+                  />
+                  {password !== '' && (
+                    <Text
+                      style={styles.passwordStrengthLabel}
+                      testID={ImportFromSeedSelectorsIDs.PASSWORD_STRENGTH_ID}
+                    >
+                      {strings('choose_password.password_strength')}
+                      <Text style={styles[`strength_${passwordStrengthWord}`]}>
+                        {' '}
+                        {strings(
+                          `choose_password.strength_${passwordStrengthWord}`,
+                        )}
+                      </Text>
+                    </Text>
+                  )}
+                </View>
+
+                <View style={styles.field}>
+                  <Label
+                    variant={TextVariant.BodyMDMedium}
+                    color={TextColor.Default}
+                    style={styles.label}
+                  >
+                    {strings('import_from_seed.confirm_password')}
+                  </Label>
+                  <TextField
+                    placeholder={strings('import_from_seed.re_enter_password')}
+                    size={TextFieldSize.Lg}
+                    onChangeText={onPasswordConfirmChange}
+                    secureTextEntry={showPasswordIndex.includes(1)}
+                    returnKeyType={'next'}
+                    autoCapitalize="none"
+                    value={confirmPassword}
+                    placeholderTextColor={colors.text.muted}
+                    isError={isError}
+                    keyboardAppearance={themeAppearance || 'light'}
+                    endAccessory={
+                      <Icon
+                        name={
+                          showPasswordIndex.includes(1)
+                            ? IconName.EyeSolid
+                            : IconName.EyeSlashSolid
+                        }
+                        size={IconSize.Lg}
+                        color={colors.icon.default}
+                        onPress={() => toggleShowPassword(1)}
+                      />
+                    }
+                    testID={
+                      ImportFromSeedSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID
+                    }
+                  />
+                  {password === '' || password !== confirmPassword ? (
+                    <Text
+                      variant={TextVariant.BodySM}
+                      color={TextColor.Alternative}
+                    >
+                      {strings('choose_password.must_be_at_least', {
+                        number: MIN_PASSWORD_LENGTH,
+                      })}
+                    </Text>
+                  ) : null}
+                  {password === '' || password !== confirmPassword ? (
+                    <Text variant={TextVariant.BodySM} color={TextColor.Error}>
+                      {strings('import_from_seed.password_error')}
+                    </Text>
+                  ) : null}
+                </View>
+
+                {this.renderSwitch()}
+              </View>
+
+              <View style={styles.learnMoreContainer}>
+                <Checkbox
+                  onPress={() => setLearnMore(!learnMore)}
+                  isChecked={learnMore}
+                  label={
+                    <View style={styles.learnMoreTextContainer}>
+                      <Text
+                        variant={TextVariant.BodySM}
+                        color={TextColor.Default}
+                      >
+                        {strings('import_from_seed.learn_more')}{' '}
+                      </Text>
+                      <Text
+                        variant={TextVariant.BodySM}
+                        color={TextColor.Primary}
+                        onPress={learnMoreLink}
+                      >
+                        {' ' + strings('reset_password.learn_more')}
+                      </Text>
+                    </View>
                   }
                 />
-              ) : null}
-            </View>
-            <Text style={styles.passwordStrengthLabel}>
-              {strings('choose_password.must_be_at_least', {
-                number: MIN_PASSWORD_LENGTH,
-              })}
-            </Text>
-          </View>
-
-          {renderSwitch()}
-
-          {!!error && (
-            <Text
-              style={styles.errorMsg}
-              testID={
-                ImportFromSeedSelectorsIDs.INVALID_SEED_PHRASE_PLACE_HOLDER_TEXT
-              }
-            >
-              {error}
-            </Text>
-          )}
+              </View>
 
-          <View style={styles.ctaWrapper}>
-            <StyledButton
-              type={'blue'}
-              onPress={onPressImport}
-              testID={ImportFromSeedSelectorsIDs.SUBMIT_BUTTON_ID}
-              disabled={!(password !== '' && password === confirmPassword)}
-            >
-              {loading ? (
-                <ActivityIndicator
-                  size="small"
-                  color={colors.primary.inverse}
+              <View style={styles.seedPhraseCtaContainer}>
+                <Button
+                  width={ButtonWidthTypes.Full}
+                  variant={ButtonVariants.Primary}
+                  label={strings('import_from_seed.confirm')}
+                  onPress={onPressImport}
+                  disabled={isContinueButtonDisabled()}
+                  size={ButtonSize.Lg}
+                  isDisabled={isContinueButtonDisabled()}
                 />
-              ) : (
-                strings('import_from_seed.import_button')
-              )}
-            </StyledButton>
-          </View>
+              </View>
+            </View>
+          )}
         </View>
       </KeyboardAwareScrollView>
-      <View style={styles.termsAndConditions}>
-        <TermsAndConditions
-          navigation={navigation}
-          action={strings('import_from_seed.import_button')}
-        />
-      </View>
       <ScreenshotDeterrent enabled isSRP />
     </SafeAreaView>
   );
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
index 5addea7ac597..1a0f3ba13b76 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
@@ -1,92 +1,120 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Platform } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import { fontStyles } from '../../../styles/common';
-import Device from '../../../util/device';
+// import Device from '../../../util/device';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createStyles = (colors: any) =>
   StyleSheet.create({
-    mainWrapper: {
+    root: {
       backgroundColor: colors.background.default,
       flex: 1,
     },
     wrapper: {
       flex: 1,
-      paddingHorizontal: 32,
+      paddingHorizontal: 16,
     },
-    title: {
-      fontSize: Device.isAndroid() ? 20 : 25,
-      marginTop: 20,
-      marginBottom: 20,
-      color: colors.text.default,
-      justifyContent: 'center',
-      textAlign: 'center',
-      ...fontStyles.bold,
+    container: {
+      marginTop: 6,
     },
-    field: {
-      marginVertical: 5,
-      position: 'relative',
-    },
-    fieldRow: {
+    description: {
       flexDirection: 'row',
-      alignItems: 'flex-end',
-    },
-    fieldCol: {
-      width: '70%',
+      alignItems: 'center',
+      gap: 4,
     },
-    fieldColRight: {
-      flexDirection: 'row-reverse',
-      width: '30%',
+    seedPhraseRoot: {
+      flexDirection: 'column',
+      gap: 4,
+      marginBottom: 24,
     },
-    label: {
-      color: colors.text.default,
-      fontSize: 16,
-      marginBottom: 12,
-      ...fontStyles.normal,
+    seedPhraseContainer: {
+      paddingTop: 16,
+      backgroundColor: colors.background.muted,
+      borderRadius: 10,
+      marginTop: 16,
+      minHeight: 264,
     },
-    ctaWrapper: {
-      marginTop: 20,
+    seedPhraseInnerContainer: {
+      paddingHorizontal: 16,
+      paddingBottom: 16,
     },
-    errorMsg: {
-      color: colors.error.default,
-      textAlign: 'center',
+    seedPhraseDefaultInputPlaceholder: {
+      fontSize: 14,
       ...fontStyles.normal,
     },
-    seedPhrase: {
-      marginBottom: 10,
-      paddingTop: 20,
-      paddingBottom: 20,
-      paddingHorizontal: 20,
-      fontSize: 20,
-      borderRadius: 10,
-      minHeight: 110,
-      height: 'auto',
-      borderWidth: 1,
-      borderColor: colors.border.default,
-      backgroundColor: colors.background.default,
+    seedPhraseContainerCta: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      width: '100%',
+      marginTop: 'auto',
+      borderTopWidth: 1,
+      borderTopColor: colors.background.default,
+    },
+    seedPhraseDefaultInput: {
+      fontSize: 14,
+      color: colors.text.alternative,
+      borderWidth: 0,
+      outlineWidth: 0,
       ...fontStyles.normal,
-      color: colors.text.default,
+      backgroundColor: colors.background.muted,
+      paddingHorizontal: 0,
+      height: 66,
     },
-    padding: {
-      paddingRight: 46,
-    },
-    biometrics: {
-      alignItems: 'flex-start',
-      marginTop: 10,
+    seedPhraseInputContainer: {
+      flexDirection: 'row',
+      flexWrap: 'wrap', // Allows wrapping to new lines
+      justifyContent: 'center',
+      width: '100%',
     },
-    biometryLabel: {
+    inputContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      height: 40,
+      borderWidth: 1,
+      borderColor: colors.border.muted,
+      borderRadius: 8,
+      paddingHorizontal: 6,
+      paddingVertical: 4,
+      backgroundColor: colors.background.default,
+      margin: 2,
+      columnGap: 8,
+    },
+    inputNumber: {
+      color: colors.text.muted,
+      fontSize: 14,
+      ...fontStyles.medium,
+    },
+    seedPhraseInput: {
+      margin: 3,
+    },
+    clearButton: {
+      width: '100%',
+      borderWidth: 0,
+      color: colors.text.muted,
+      padding: 0,
+      paddingVertical: 0,
+      paddingHorizontal: 0,
+    },
+    pasteButton: {
+      paddingHorizontal: 16,
+      paddingVertical: 16,
       flex: 1,
-      fontSize: 16,
-      color: colors.text.default,
-      ...fontStyles.normal,
+      textAlign: 'center',
     },
-    biometrySwitch: {
-      marginTop: 10,
-      flex: 0,
+    seedPhraseInputFocused: {
+      borderColor: colors.primary.default,
+      borderWidth: 1,
     },
-    termsAndConditions: {
-      paddingVertical: 10,
+    seedPhraseCtaContainer: {
+      width: '100%',
+      flexDirection: 'column',
+      gap: 16,
+    },
+    field: {
+      position: 'relative',
+      flexDirection: 'column',
+      gap: 8,
     },
     passwordStrengthLabel: {
       height: 20,
@@ -106,32 +134,51 @@ const createStyles = (colors: any) =>
     strength_strong: {
       color: colors.success.default,
     },
-    showMatchingPasswords: {
-      position: 'absolute',
-      top: 52,
-      right: 17,
-      alignSelf: 'flex-end',
+    input: {
+      paddingVertical: Platform.OS === 'ios' ? 4 : 0,
+      paddingHorizontal: 8,
+      borderRadius: 8,
+      backgroundColor: colors.background.default,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      height: 40,
+      fontSize: 14,
+      color: colors.text.default,
+      ...fontStyles.normal,
+      width: '100%',
     },
-    qrCode: {
-      marginRight: 10,
-      borderWidth: 1,
-      borderRadius: 6,
-      borderColor: colors.text.muted,
-      paddingVertical: 4,
-      paddingHorizontal: 6,
-      marginTop: -50,
-      marginBottom: 30,
-      alignSelf: 'flex-end',
+    passwordContainer: {
+      flexDirection: 'column',
+      gap: 16,
     },
-    inputFocused: {
-      borderColor: colors.primary.default,
-      borderWidth: 2,
+    learnMoreContainer: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      gap: 8,
+      marginTop: 8,
+      marginBottom: 16,
     },
-    input: {
-      ...fontStyles.normal,
-      fontSize: 16,
-      paddingTop: 2,
-      color: colors.text.default,
+    learnMoreTextContainer: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      gap: 1,
+      width: '100%',
+      flexWrap: 'wrap',
+    },
+    headerLeft: {
+      marginLeft: 16,
+    },
+    headerRight: {
+      marginRight: 16,
+    },
+    inputIndex: {
+      marginRight: -4,
+    },
+    label: {
+      marginBottom: -4,
     },
   });
 
diff --git a/app/components/Views/Login/index.tsx b/app/components/Views/Login/index.tsx
index 03e841be16d0..4ca30ec933fa 100644
--- a/app/components/Views/Login/index.tsx
+++ b/app/components/Views/Login/index.tsx
@@ -11,6 +11,7 @@ import {
   TextInput,
 } from 'react-native';
 import Text, {
+  TextColor,
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
 import StorageWrapper from '../../../store/storage-wrapper';
@@ -36,6 +37,7 @@ import {
   ONBOARDING_WIZARD,
   TRUE,
   PASSCODE_DISABLED,
+  SEED_PHRASE_HINTS,
 } from '../../../constants/storage';
 import Routes from '../../../constants/navigation/Routes';
 import { passwordRequirementsMet } from '../../../util/password';
@@ -88,7 +90,10 @@ import stylesheet from './styles';
 import ReduxService from '../../../core/redux';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { BIOMETRY_TYPE } from 'react-native-keychain';
-import FOX_LOGO from '../../../images/branding/fox.png';
+import METAMASK_NAME from '../../../images/branding/metamask-name.png';
+import ConcealingFox from '../../../animations/Concealing_Fox.json';
+import SearchingFox from '../../../animations/Searching_Fox.json';
+import LottieView from 'lottie-react-native';
 
 /**
  * View where returning users can authenticate
@@ -113,9 +118,16 @@ const Login: React.FC = () => {
   const [biometryPreviouslyDisabled, setBiometryPreviouslyDisabled] =
     useState(false);
   const [hasBiometricCredentials, setHasBiometricCredentials] = useState(false);
+  const [showHint, setShowHint] = useState(false);
+  const [hintText, setHintText] = useState('');
   const navigation = useNavigation<StackNavigationProp<ParamListBase>>();
   const route =
-    useRoute<RouteProp<{ params: { locked: boolean } }, 'params'>>();
+    useRoute<
+      RouteProp<
+        { params: { locked: boolean; oauthLoginSuccess?: boolean } },
+        'params'
+      >
+    >();
   const {
     styles,
     theme: { colors, themeAppearance },
@@ -132,6 +144,17 @@ const Login: React.FC = () => {
     return false;
   };
 
+  const getHint = async () => {
+    const hint = await StorageWrapper.getItem(SEED_PHRASE_HINTS);
+    const parsedHints = await JSON.parse(hint);
+    setHintText(parsedHints?.manualBackup || '');
+  };
+
+  const toggleHint = () => {
+    setShowHint(!showHint);
+    getHint();
+  };
+
   useEffect(() => {
     trace({
       name: TraceName.LoginUserInteraction,
@@ -180,6 +203,8 @@ const Login: React.FC = () => {
 
     getUserAuthPreferences();
 
+    getHint();
+
     return () => {
       BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
     };
@@ -411,33 +436,61 @@ const Login: React.FC = () => {
           resetScrollToCoords={{ x: 0, y: 0 }}
           style={styles.wrapper}
         >
-          <View testID={LoginViewSelectors.CONTAINER}>
+          <View testID={LoginViewSelectors.CONTAINER} style={styles.container}>
+            <Image
+              source={METAMASK_NAME}
+              style={styles.metamaskName}
+              resizeMethod={'auto'}
+            />
+
             <TouchableOpacity
               style={styles.foxWrapper}
               delayLongPress={10 * 1000} // 10 seconds
               onLongPress={handleDownloadStateLogs}
               activeOpacity={1}
             >
-              <Image
-                source={FOX_LOGO}
+              <LottieView
                 style={styles.image}
-                resizeMethod={'auto'}
+                autoPlay
+                loop
+                source={password.length > 0 ? ConcealingFox : SearchingFox}
+                resizeMode="contain"
               />
             </TouchableOpacity>
 
-            <Text style={styles.title} testID={LoginViewSelectors.TITLE_ID}>
+            <Text
+              variant={TextVariant.DisplayMD}
+              color={TextColor.Default}
+              style={styles.title}
+              testID={LoginViewSelectors.TITLE_ID}
+            >
               {strings('login.title')}
             </Text>
+
             <View style={styles.field}>
-              <Label
-                variant={TextVariant.HeadingSMRegular}
-                style={styles.label}
-              >
-                {strings('login.password')}
-              </Label>
+              <View style={styles.labelContainer}>
+                <Label
+                  variant={TextVariant.BodyMDMedium}
+                  color={TextColor.Default}
+                >
+                  {strings('login.password')}
+                </Label>
+                {hintText && (
+                  <Button
+                    variant={ButtonVariants.Link}
+                    onPress={toggleHint}
+                    testID={LoginViewSelectors.SHOW_HINT_BUTTON}
+                    label={
+                      showHint
+                        ? strings('login.hide_hint')
+                        : strings('login.show_hint')
+                    }
+                  />
+                )}
+              </View>
               <TextField
                 size={TextFieldSize.Lg}
-                placeholder={strings('login.password')}
+                placeholder={strings('login.password_placeholder')}
                 placeholderTextColor={colors.text.muted}
                 testID={LoginViewSelectors.PASSWORD_INPUT}
                 returnKeyType={'done'}
@@ -451,28 +504,41 @@ const Login: React.FC = () => {
                   <BiometryButton
                     onPress={tryBiometric}
                     hidden={shouldHideBiometricAccessoryButton}
-                    biometryType={biometryType}
+                    biometryType={biometryType as BIOMETRY_TYPE}
                   />
                 }
                 keyboardAppearance={themeAppearance}
               />
             </View>
 
-            {renderSwitch()}
-
-            {!!error && (
-              <HelpText
-                severity={HelpTextSeverity.Error}
-                variant={TextVariant.BodyMD}
-                testID={LoginViewSelectors.PASSWORD_ERROR}
-              >
-                {error}
-              </HelpText>
-            )}
+            <View style={styles.helperTextContainer}>
+              {showHint && (
+                <Text
+                  variant={TextVariant.BodyMD}
+                  color={TextColor.Alternative}
+                  style={styles.hintText}
+                >
+                  {strings('login.hint', { hint: hintText })}
+                </Text>
+              )}
+
+              {!!error && (
+                <HelpText
+                  severity={HelpTextSeverity.Error}
+                  variant={TextVariant.BodyMD}
+                  testID={LoginViewSelectors.PASSWORD_ERROR}
+                >
+                  {error}
+                </HelpText>
+              )}
+            </View>
+
             <View
               style={styles.ctaWrapper}
               testID={LoginViewSelectors.LOGIN_BUTTON_ID}
             >
+              {renderSwitch()}
+
               <Button
                 variant={ButtonVariants.Primary}
                 width={ButtonWidthTypes.Full}
@@ -488,13 +554,9 @@ const Login: React.FC = () => {
                     strings('login.unlock_button')
                   )
                 }
+                isDisabled={password.length === 0}
               />
-            </View>
 
-            <View style={styles.footer}>
-              <Text variant={TextVariant.HeadingSMRegular} style={styles.cant}>
-                {strings('login.go_back')}
-              </Text>
               <Button
                 style={styles.goBack}
                 variant={ButtonVariants.Link}
diff --git a/app/components/Views/Login/styles.ts b/app/components/Views/Login/styles.ts
index 18f73479ab7a..29be3616e634 100644
--- a/app/components/Views/Login/styles.ts
+++ b/app/components/Views/Login/styles.ts
@@ -17,40 +17,47 @@ const styleSheet = (params: { theme: Theme }) => {
     },
     wrapper: {
       flex: 1,
-      paddingHorizontal: 32,
+      paddingHorizontal: 16,
+    },
+    container: {
+      flex: 1,
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      flexDirection: 'column',
+      width: '100%',
     },
     foxWrapper: {
       justifyContent: 'center',
       alignSelf: 'center',
-      width: Device.isIos() ? 130 : 100,
-      height: Device.isIos() ? 130 : 100,
-      marginTop: 100,
+      width: Device.isIos() ? 175 : 150,
+      height: Device.isIos() ? 175 : 150,
+      marginTop: 48,
     },
     image: {
       alignSelf: 'center',
-      width: Device.isIos() ? 130 : 100,
-      height: Device.isIos() ? 130 : 100,
+      width: Device.isIos() ? 175 : 150,
+      height: Device.isIos() ? 175 : 150,
     },
     title: {
-      fontSize: Device.isAndroid() ? 30 : 35,
-      lineHeight: Device.isAndroid() ? 35 : 40,
-      marginTop: 20,
-      marginBottom: 20,
-      color: colors.text.default,
-      justifyContent: 'center',
       textAlign: 'center',
-      ...fontStyles.bold,
+      marginVertical: 24,
     },
     field: {
-      flex: 1,
       marginBottom: Device.isAndroid() ? 0 : 10,
       flexDirection: 'column',
+      width: '100%',
+      rowGap: 2,
+      justifyContent: 'flex-start',
     },
     label: {
       marginBottom: 12,
     },
     ctaWrapper: {
-      marginTop: 20,
+      width: '100%',
+      flexDirection: 'column',
+      alignItems: 'center',
+      rowGap: 24,
+      marginTop: 24,
     },
     footer: {
       marginVertical: 40,
@@ -124,6 +131,29 @@ const styleSheet = (params: { theme: Theme }) => {
       marginTop: 10,
       color: colors.error.default,
     },
+    metamaskName: {
+      width: 80,
+      height: 40,
+      marginTop: 10,
+    },
+    input: {
+      width: '100%',
+    },
+    labelContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    hintText: {
+      textAlign: 'left',
+    },
+    helperTextContainer: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      rowGap: 2,
+      alignSelf: 'flex-start',
+    },
   });
 };
 
diff --git a/app/components/Views/ManualBackupStep1/index.js b/app/components/Views/ManualBackupStep1/index.js
index 2f50fcbcca80..6b490fa8bc04 100644
--- a/app/components/Views/ManualBackupStep1/index.js
+++ b/app/components/Views/ManualBackupStep1/index.js
@@ -1,23 +1,28 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import {
-  Text,
   View,
   SafeAreaView,
   ActivityIndicator,
-  TextInput,
   KeyboardAvoidingView,
   Appearance,
+  FlatList,
+  TouchableOpacity,
+  ImageBackground,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import FeatherIcons from 'react-native-vector-icons/Feather';
-import { BlurView } from '@react-native-community/blur';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
 import { wordlist } from '@metamask/scure-bip39/dist/wordlists/english';
 import Logger from '../../../util/Logger';
 import { baseStyles } from '../../../styles/common';
-import StyledButton from '../../UI/StyledButton';
-import OnboardingProgress from '../../UI/OnboardingProgress';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../component-library/components/Texts/Text';
 import { strings } from '../../../../locales/i18n';
 import ActionView from '../../UI/ActionView';
 import Engine from '../../../core/Engine';
@@ -32,12 +37,20 @@ import {
 import { useTheme } from '../../../util/theme';
 import { uint8ArrayToMnemonic } from '../../../util/mnemonic';
 import { createStyles } from './styles';
-
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { Authentication } from '../../../core';
 import { ManualBackUpStepsSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ManualBackUpSteps.selectors';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
+import Button, {
+  ButtonVariants,
+  ButtonWidthTypes,
+  ButtonSize,
+} from '../../../component-library/components/Buttons/Button';
+import Label from '../../../component-library/components/Form/Label';
+import { TextFieldSize } from '../../../component-library/components/Form/TextField';
+import TextField from '../../../component-library/components/Form/TextField/TextField';
+import Routes from '../../../constants/navigation/Routes';
 
 /**
  * View that's shown during the second step of
@@ -45,23 +58,41 @@ import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder
  */
 const ManualBackupStep1 = ({ route, navigation, appTheme }) => {
   const [seedPhraseHidden, setSeedPhraseHidden] = useState(true);
-
   const [password, setPassword] = useState(undefined);
   const [warningIncorrectPassword, setWarningIncorrectPassword] =
     useState(undefined);
   const [ready, setReady] = useState(false);
   const [view, setView] = useState(SEED_PHRASE);
   const [words, setWords] = useState([]);
-
   const { colors, themeAppearance } = useTheme();
-  const styles = createStyles(colors);
+  const styles = useMemo(() => createStyles(colors), [colors]);
+
+  const backupFlow = route?.params?.backupFlow || false;
+  const settingsBackup = route?.params?.settingsBackup || false;
 
-  const currentStep = 1;
   const steps = MANUAL_BACKUP_STEPS;
 
   const updateNavBar = useCallback(() => {
-    navigation.setOptions(getOnboardingNavbarOptions(route, {}, colors));
-  }, [colors, navigation, route]);
+    navigation.setOptions(
+      getOnboardingNavbarOptions(
+        route,
+        {
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => navigation.goBack()}>
+              <Icon
+                name={IconName.ArrowLeft}
+                size={IconSize.Lg}
+                color={colors.text.default}
+                style={styles.headerLeft}
+              />
+            </TouchableOpacity>
+          ),
+        },
+        colors,
+        false,
+      ),
+    );
+  }, [colors, navigation, route, styles.headerLeft]);
 
   const tryExportSeedPhrase = async (password) => {
     const { KeyringController } = Engine.context;
@@ -71,6 +102,12 @@ const ManualBackupStep1 = ({ route, navigation, appTheme }) => {
     return uint8ArrayToMnemonic(uint8ArrayMnemonic, wordlist).split(' ');
   };
 
+  const showWhatIsSeedphrase = () => {
+    navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.SEEDPHRASE_MODAL,
+    });
+  };
+
   useEffect(() => {
     const getSeedphrase = async () => {
       if (!words.length) {
@@ -109,6 +146,8 @@ const ManualBackupStep1 = ({ route, navigation, appTheme }) => {
     navigation.navigate('ManualBackupStep2', {
       words,
       steps,
+      backupFlow,
+      settingsBackup,
     });
   };
 
@@ -165,26 +204,29 @@ const ManualBackupStep1 = ({ route, navigation, appTheme }) => {
 
     return (
       <View style={styles.seedPhraseConcealerContainer}>
-        <BlurView blurType={blurType} blurAmount={5} style={styles.blurView} />
-        <View style={styles.seedPhraseConcealer}>
-          <FeatherIcons name="eye-off" size={24} style={styles.icon} />
-          <Text style={styles.reveal}>
-            {strings('manual_backup_step_1.reveal')}
-          </Text>
-          <Text style={styles.watching}>
-            {strings('manual_backup_step_1.watching')}
-          </Text>
-          <View style={styles.viewButtonWrapper}>
-            <StyledButton
-              type={'onOverlay'}
-              onPress={revealSeedPhrase}
-              testID={ManualBackUpStepsSelectorsIDs.VIEW_BUTTON}
-              containerStyle={styles.viewButtonContainer}
-            >
-              {strings('manual_backup_step_1.view')}
-            </StyledButton>
+        <TouchableOpacity
+          onPress={revealSeedPhrase}
+          style={styles.blurContainer}
+        >
+          <ImageBackground
+            source={require('../../../images/blur.png')}
+            style={styles.blurView}
+            resizeMode="cover"
+          />
+          <View style={styles.seedPhraseConcealer}>
+            <Icon
+              name={IconName.EyeSlashSolid}
+              size={IconSize.Xl}
+              color={colors.overlay.default}
+            />
+            <Text variant={TextVariant.BodyMDMedium} color={TextColor.Default}>
+              {strings('manual_backup_step_1.reveal')}
+            </Text>
+            <Text variant={TextVariant.BodySM} color={TextColor.Default}>
+              {strings('manual_backup_step_1.watching')}
+            </Text>
           </View>
-        </View>
+        </TouchableOpacity>
       </View>
     );
   };
@@ -197,107 +239,135 @@ const ManualBackupStep1 = ({ route, navigation, appTheme }) => {
       <KeyboardAwareScrollView style={baseStyles.flexGrow} enableOnAndroid>
         <View style={styles.confirmPasswordWrapper}>
           <View style={[styles.content, styles.passwordRequiredContent]}>
-            <Text style={styles.title}>
+            <Text variant={TextVariant.DisplayMD} color={TextColor.Default}>
               {strings('manual_backup_step_1.confirm_password')}
             </Text>
             <View style={styles.text}>
-              <Text style={styles.label}>
+              <Label variant={TextVariant.BodyMD} color={TextColor.Default}>
                 {strings('manual_backup_step_1.before_continiuing')}
-              </Text>
+              </Label>
+            </View>
+            <View style={styles.field}>
+              <TextField
+                placeholder={'Password'}
+                value={password}
+                onChangeText={onPasswordChange}
+                secureTextEntry
+                placeholderTextColor={colors.text.muted}
+                onSubmitEditing={tryUnlock}
+                testID={ManualBackUpStepsSelectorsIDs.CONFIRM_PASSWORD_INPUT}
+                keyboardAppearance={themeAppearance}
+                autoCapitalize="none"
+                size={TextFieldSize.Lg}
+                autoFocus
+              />
+              {warningIncorrectPassword && (
+                <Text style={styles.warningMessageText}>
+                  {warningIncorrectPassword}
+                </Text>
+              )}
             </View>
-            <TextInput
-              style={styles.input}
-              placeholder={'Password'}
-              placeholderTextColor={colors.text.muted}
-              onChangeText={onPasswordChange}
-              secureTextEntry
-              onSubmitEditing={tryUnlock}
-              testID={ManualBackUpStepsSelectorsIDs.CONFIRM_PASSWORD_INPUT}
-              keyboardAppearance={themeAppearance}
-              autoCapitalize="none"
-            />
-            {warningIncorrectPassword && (
-              <Text style={styles.warningMessageText}>
-                {warningIncorrectPassword}
-              </Text>
-            )}
           </View>
           <View style={styles.buttonWrapper}>
-            <StyledButton
-              containerStyle={styles.button}
-              type={'confirm'}
+            <Button
+              variant={ButtonVariants.Primary}
               onPress={tryUnlock}
+              label={strings('manual_backup_step_1.confirm')}
               testID={ManualBackUpStepsSelectorsIDs.SUBMIT_BUTTON}
-            >
-              {strings('manual_backup_step_1.confirm')}
-            </StyledButton>
+              width={ButtonWidthTypes.Full}
+              size={ButtonSize.Lg}
+              isDisabled={!password}
+            />
           </View>
         </View>
       </KeyboardAwareScrollView>
     </KeyboardAvoidingView>
   );
 
-  const renderSeedphraseView = () => {
-    const wordLength = words.length;
-    const half = wordLength / 2 || 6;
-
-    return (
-      <ActionView
-        confirmTestID={ManualBackUpStepsSelectorsIDs.CONTINUE_BUTTON}
-        confirmText={strings('manual_backup_step_1.continue')}
-        onConfirmPress={goNext}
-        confirmDisabled={seedPhraseHidden}
-        showCancelButton={false}
-        confirmButtonMode={'confirm'}
+  const renderSeedphraseView = () => (
+    <ActionView
+      confirmTestID={ManualBackUpStepsSelectorsIDs.CONTINUE_BUTTON}
+      confirmText={strings('manual_backup_step_1.continue')}
+      onConfirmPress={goNext}
+      confirmDisabled={seedPhraseHidden}
+      showCancelButton={false}
+      confirmButtonMode={'confirm'}
+      contentContainerStyle={styles.actionView}
+      buttonContainerStyle={styles.buttonContainer}
+    >
+      <View
+        style={styles.wrapper}
+        testID={ManualBackUpStepsSelectorsIDs.STEP_1_CONTAINER}
       >
-        <View
-          style={styles.wrapper}
-          testID={ManualBackUpStepsSelectorsIDs.STEP_1_CONTAINER}
-        >
-          <Text style={styles.action}>
-            {strings('manual_backup_step_1.action')}
-          </Text>
-          <View style={styles.infoWrapper}>
-            <Text style={styles.info}>
-              {strings('manual_backup_step_1.info')}
+        <Text variant={TextVariant.DisplayMD} color={TextColor.Default}>
+          {strings('manual_backup_step_1.action')}
+        </Text>
+        <View style={styles.infoWrapper}>
+          <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+            {strings('manual_backup_step_1.info-1')}{' '}
+            <Text
+              variant={TextVariant.BodyMD}
+              color={TextColor.Primary}
+              onPress={showWhatIsSeedphrase}
+            >
+              {strings('manual_backup_step_1.info-2')}{' '}
             </Text>
-          </View>
+            {strings('manual_backup_step_1.info-3')}{' '}
+            <Text
+              variant={TextVariant.BodyMDMedium}
+              color={TextColor.Alternative}
+            >
+              {strings('manual_backup_step_1.info-4')}
+            </Text>
+          </Text>
+        </View>
+        {seedPhraseHidden ? (
           <View style={styles.seedPhraseWrapper}>
-            {seedPhraseHidden ? (
-              renderSeedPhraseConcealer()
-            ) : (
-              <React.Fragment>
-                <View style={styles.wordColumn}>
-                  {words.slice(0, half).map((word, i) => (
-                    <View key={`word_${i}`} style={styles.wordWrapper}>
-                      <Text style={styles.word}>{`${i + 1}. ${word}`}</Text>
-                    </View>
-                  ))}
-                </View>
-                <View style={styles.wordColumn}>
-                  {words.slice(-half).map((word, i) => (
-                    <View key={`word_${i}`} style={styles.wordWrapper}>
-                      <Text style={styles.word}>{`${
-                        i + (half + 1)
-                      }. ${word}`}</Text>
-                    </View>
-                  ))}
-                </View>
-                <ScreenshotDeterrent enabled isSRP />
-              </React.Fragment>
-            )}
+            {renderSeedPhraseConcealer()}
           </View>
-        </View>
-      </ActionView>
-    );
-  };
+        ) : (
+          <View style={styles.seedPhraseContainer}>
+            <View style={styles.seedPhraseInputContainer}>
+              <FlatList
+                data={words}
+                numColumns={3}
+                keyExtractor={(_, index) => index.toString()}
+                renderItem={({ item, index }) => (
+                  <View style={[styles.inputContainer]}>
+                    <Text
+                      variant={TextVariant.BodyMD}
+                      color={TextColor.Alternative}
+                    >
+                      {index + 1}.
+                    </Text>
+                    <Text
+                      variant={TextVariant.BodyMD}
+                      color={TextColor.Default}
+                      key={index}
+                    >
+                      {item}
+                    </Text>
+                  </View>
+                )}
+              />
+            </View>
+          </View>
+        )}
+      </View>
+    </ActionView>
+  );
 
   return ready ? (
     <SafeAreaView style={styles.mainWrapper}>
-      <View style={styles.onBoardingWrapper}>
-        <OnboardingProgress currentStep={currentStep} steps={steps} />
+      <View style={[styles.container]}>
+        <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+          Step 2 of 3
+        </Text>
+        {view === SEED_PHRASE
+          ? renderSeedphraseView()
+          : renderConfirmPassword()}
       </View>
-      {view === SEED_PHRASE ? renderSeedphraseView() : renderConfirmPassword()}
+      <ScreenshotDeterrent hasNavigation enabled isSRP />
     </SafeAreaView>
   ) : (
     <View style={styles.loader}>
diff --git a/app/components/Views/ManualBackupStep1/styles.ts b/app/components/Views/ManualBackupStep1/styles.ts
index 5924fcbc12cd..a607d6f2c2f6 100644
--- a/app/components/Views/ManualBackupStep1/styles.ts
+++ b/app/components/Views/ManualBackupStep1/styles.ts
@@ -1,23 +1,26 @@
 /* eslint-disable import/prefer-default-export */
 import { StyleSheet } from 'react-native';
 import { fontStyles } from '../../../styles/common';
-import Device from '../../../util/device';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const createStyles = (colors: any) =>
   StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingHorizontal: 16,
+    },
     mainWrapper: {
       backgroundColor: colors.background.default,
       flex: 1,
-      marginTop: 16,
     },
     wrapper: {
       flex: 1,
-      paddingHorizontal: 32,
+      flexDirection: 'column',
+      gap: 16,
     },
-    onBoardingWrapper: {
-      paddingHorizontal: 20,
+    actionView: {
+      flex: 1,
     },
     loader: {
       backgroundColor: colors.background.default,
@@ -26,69 +29,44 @@ export const createStyles = (colors: any) =>
       justifyContent: 'center',
       alignItems: 'center',
     },
-    action: {
-      fontSize: 18,
-      marginVertical: 16,
-      color: colors.text.default,
-      justifyContent: 'center',
-      textAlign: 'center',
-      ...fontStyles.bold,
-    },
     infoWrapper: {
-      marginBottom: 16,
-      justifyContent: 'center',
-    },
-    info: {
-      fontSize: 14,
-      color: colors.text.default,
-      textAlign: 'center',
-      ...fontStyles.normal,
-      paddingHorizontal: 6,
+      justifyContent: 'flex-start',
     },
     seedPhraseConcealerContainer: {
       flex: 1,
       borderRadius: 8,
     },
     seedPhraseConcealer: {
-      backgroundColor: colors.overlay.alternative,
       alignItems: 'center',
       borderRadius: 8,
       paddingHorizontal: 24,
       paddingVertical: 45,
+      flexDirection: 'column',
+      rowGap: 16,
+      height: '100%',
+      flex: 1,
+      justifyContent: 'center',
     },
-    blurView: {
+    blurContainer: {
       position: 'absolute',
       top: 0,
       left: 0,
       bottom: 0,
       right: 0,
+      height: '100%',
       borderRadius: 8,
+      flex: 1,
     },
-    icon: {
-      width: 24,
-      height: 24,
-      color: colors.overlay.inverse,
-      textAlign: 'center',
-      marginBottom: 32,
-    },
-    reveal: {
-      fontSize: Device.isMediumDevice() ? 13 : 16,
-      ...fontStyles.bold,
-      color: colors.overlay.inverse,
-      lineHeight: 22,
-      marginBottom: 8,
-      textAlign: 'center',
-    },
-    watching: {
-      fontSize: Device.isMediumDevice() ? 10 : 12,
-      color: colors.overlay.inverse,
-      lineHeight: 17,
-      marginBottom: 32,
-      textAlign: 'center',
-    },
-    viewButtonContainer: {
-      width: 155,
-      padding: 12,
+    blurView: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      height: '100%',
+      borderRadius: 8,
+      flex: 1,
+      opacity: 0.5,
     },
     seedPhraseWrapper: {
       backgroundColor: colors.background.default,
@@ -96,37 +74,30 @@ export const createStyles = (colors: any) =>
       flexDirection: 'row',
       borderColor: colors.border.default,
       borderWidth: 1,
-      marginBottom: 64,
-      minHeight: 275,
+      minHeight: 230,
     },
-    wordColumn: {
-      flex: 1,
-      alignItems: 'center',
-      paddingHorizontal: Device.isMediumDevice() ? 18 : 24,
-      paddingVertical: 18,
-      justifyContent: 'space-between',
+    seedPhraseContainer: {
+      padding: 16,
+      backgroundColor: colors.background.muted,
+      borderRadius: 10,
+      minHeight: 232,
     },
-    wordWrapper: {
+    inputContainer: {
       flexDirection: 'row',
-    },
-    word: {
+      alignItems: 'center',
+      height: 40,
+      borderWidth: 1,
+      borderColor: colors.border.muted,
+      borderRadius: 8,
       paddingHorizontal: 8,
-      paddingVertical: 6,
-      fontSize: 14,
-      color: colors.text.default,
+      paddingVertical: 4,
       backgroundColor: colors.background.default,
-      borderColor: colors.primary.default,
-      borderWidth: 1,
-      borderRadius: 13,
-      textAlign: 'center',
-      textAlignVertical: 'center',
-      lineHeight: 14,
       flex: 1,
+      margin: 4,
+      columnGap: 6,
     },
     confirmPasswordWrapper: {
       flex: 1,
-      padding: 30,
-      paddingTop: 0,
     },
     passwordRequiredContent: {
       marginBottom: 20,
@@ -134,43 +105,17 @@ export const createStyles = (colors: any) =>
     content: {
       alignItems: 'flex-start',
     },
-    title: {
-      fontSize: 32,
-      marginTop: 20,
-      marginBottom: 10,
-      color: colors.text.default,
-      justifyContent: 'center',
-      textAlign: 'left',
-      ...fontStyles.normal,
-    },
     text: {
       marginBottom: 10,
       marginTop: 20,
       justifyContent: 'center',
     },
-    label: {
-      fontSize: 16,
-      lineHeight: 23,
-      color: colors.text.default,
-      textAlign: 'left',
-      ...fontStyles.normal,
-    },
     buttonWrapper: {
       flex: 1,
-      marginTop: 20,
+      marginTop: 0,
       justifyContent: 'flex-end',
     },
-    input: {
-      borderWidth: 2,
-      borderRadius: 5,
-      width: '100%',
-      borderColor: colors.border.default,
-      padding: 10,
-      height: 40,
-      color: colors.text.default,
-    },
     warningMessageText: {
-      paddingVertical: 10,
       color: colors.error.default,
       ...fontStyles.normal,
     },
@@ -178,5 +123,18 @@ export const createStyles = (colors: any) =>
       flex: 1,
       flexDirection: 'row',
       alignSelf: 'center',
+      marginBottom: 30,
+    },
+    field: {
+      position: 'relative',
+      flexDirection: 'column',
+      gap: 2,
+      width: '100%',
+    },
+    headerLeft: {
+      marginLeft: 16,
+    },
+    buttonContainer: {
+      paddingHorizontal: 0,
     },
   });
diff --git a/app/components/Views/ManualBackupStep2/index.js b/app/components/Views/ManualBackupStep2/index.js
index 9b79e49b6049..9fb107006284 100644
--- a/app/components/Views/ManualBackupStep2/index.js
+++ b/app/components/Views/ManualBackupStep2/index.js
@@ -2,134 +2,115 @@ import React, { useEffect, useState, useCallback } from 'react';
 import {
   InteractionManager,
   Alert,
-  Text,
   TouchableOpacity,
   View,
   SafeAreaView,
+  FlatList,
+  Dimensions,
 } from 'react-native';
 import PropTypes from 'prop-types';
-import OnboardingProgress from '../../UI/OnboardingProgress';
 import ActionView from '../../UI/ActionView';
 import { ScreenshotDeterrent } from '../../UI/ScreenshotDeterrent';
 import { strings } from '../../../../locales/i18n';
 import { connect } from 'react-redux';
 import { seedphraseBackedUp } from '../../../actions/user';
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { getOnboardingNavbarOptions } from '../../UI/Navbar';
-import { shuffle, compareMnemonics } from '../../../util/mnemonic';
+import { compareMnemonics } from '../../../util/mnemonic';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { useTheme } from '../../../util/theme';
 import createStyles from './styles';
 import { ManualBackUpStepsSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ManualBackUpSteps.selectors';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../component-library/components/Texts/Text';
+import Routes from '../../../constants/navigation/Routes';
 
 const ManualBackupStep2 = ({ navigation, seedphraseBackedUp, route }) => {
+  const words = route?.params?.words;
+  const backupFlow = route?.params?.backupFlow;
+  const settingsBackup = route?.params?.settingsBackup;
+
+  // eslint-disable-next-line no-console
+  console.log('settingsBackup', settingsBackup);
+
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
-  const [confirmedWords, setConfirmedWords] = useState([]);
-  const [wordsDict, setWordsDict] = useState({});
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [seedPhraseReady, setSeedPhraseReady] = useState(false);
-
-  const currentStep = 2;
-  const words =
-    process.env.JEST_WORKER_ID === undefined
-      ? shuffle(route.params?.words)
-      : route.params?.words;
-
-  const createWordsDictionary = () => {
-    const dict = {};
-    words.forEach((word, i) => {
-      dict[`${word},${i}`] = { currentPosition: undefined };
-    });
-    setWordsDict(dict);
-  };
+  const [showStatusBottomSheet, setShowStatusBottomSheet] = useState(false);
+  const [gridWords, setGridWords] = useState([]);
+  const [emptySlots, setEmptySlots] = useState([]);
+  const [missingWords, setMissingWords] = useState([]);
+  const [selectedSlot, setSelectedSlot] = useState(null);
+  const [sortedSlots, setSortedSlots] = useState([]);
 
   const updateNavBar = useCallback(() => {
-    navigation.setOptions(getOnboardingNavbarOptions(route, {}, colors));
-  }, [colors, navigation, route]);
-
-  useEffect(() => {
-    const wordsFromRoute = route.params?.words ?? [];
-    setConfirmedWords(
-      new Array(wordsFromRoute.length).fill({
-        word: undefined,
-        originalPosition: undefined,
-      }),
+    navigation.setOptions(
+      getOnboardingNavbarOptions(
+        route,
+        {
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => navigation.goBack()}>
+              <Icon
+                name={IconName.ArrowLeft}
+                size={IconSize.Lg}
+                color={colors.text.default}
+                style={styles.headerLeft}
+              />
+            </TouchableOpacity>
+          ),
+        },
+        colors,
+        false,
+      ),
     );
-    createWordsDictionary();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [colors, navigation, route, styles.headerLeft]);
 
   useEffect(() => {
     updateNavBar();
   }, [updateNavBar]);
 
-  const findNextAvailableIndex = useCallback(
-    () => confirmedWords.findIndex(({ word }) => !word),
-    [confirmedWords],
-  );
-
-  const selectWord = useCallback(
-    (word, i) => {
-      let tempCurrentIndex = currentIndex;
-      const tempWordsDict = wordsDict;
-      const tempConfirmedWords = confirmedWords;
-      if (wordsDict[`${word},${i}`].currentPosition !== undefined) {
-        tempCurrentIndex = wordsDict[`${word},${i}`].currentPosition;
-        tempWordsDict[`${word},${i}`].currentPosition = undefined;
-        tempConfirmedWords[currentIndex] = {
-          word: undefined,
-          originalPosition: undefined,
-        };
-      } else {
-        tempWordsDict[`${word},${i}`].currentPosition = currentIndex;
-        tempConfirmedWords[currentIndex] = { word, originalPosition: i };
-        tempCurrentIndex = findNextAvailableIndex();
-      }
-
-      setCurrentIndex(tempCurrentIndex);
-      setWordsDict(tempWordsDict);
-      setConfirmedWords(tempConfirmedWords);
-      setSeedPhraseReady(findNextAvailableIndex() === -1);
-    },
-    [confirmedWords, currentIndex, findNextAvailableIndex, wordsDict],
-  );
-
-  const clearConfirmedWordAt = (i) => {
-    const { word, originalPosition } = confirmedWords[i];
-    const currentIndex = i;
-    if (word && (originalPosition || originalPosition === 0)) {
-      wordsDict[[word, originalPosition]].currentPosition = undefined;
-      confirmedWords[i] = { word: undefined, originalPosition: undefined };
-    }
-
-    setCurrentIndex(currentIndex);
-    setWordsDict(wordsDict);
-    setConfirmedWords(confirmedWords);
-    setSeedPhraseReady(findNextAvailableIndex() === -1);
-  };
-
   const validateWords = useCallback(() => {
     const validWords = route.params?.words ?? [];
-    const proposedWords = confirmedWords.map(
-      (confirmedWord) => confirmedWord.word,
-    );
+    return compareMnemonics(validWords, gridWords);
+  }, [route.params?.words, gridWords]);
 
-    return compareMnemonics(validWords, proposedWords);
-  }, [confirmedWords, route.params?.words]);
+  const isAllWordsPlaced = useCallback(() => {
+    const validWords = route.params?.words ?? [];
+    return gridWords.filter((word) => word !== '').length === validWords.length;
+  }, [route.params?.words, gridWords]);
 
   const goNext = () => {
+    // eslint-disable-next-line no-console
+    console.log('goNext', validateWords());
     if (validateWords()) {
       seedphraseBackedUp();
       InteractionManager.runAfterInteractions(async () => {
-        const words = route.params?.words;
-        navigation.navigate('ManualBackupStep3', {
-          steps: route.params?.steps,
-          words,
-        });
+        if (backupFlow) {
+          navigation.navigate('OptinMetrics', {
+            onContinue: () => {
+              navigation.reset({ routes: [{ name: 'HomeNav' }] });
+            },
+          });
+        } else if (settingsBackup) {
+          navigation.navigate(Routes.ONBOARDING.SECURITY_SETTINGS);
+        } else {
+          navigation.navigate('OptinMetrics', {
+            steps: route.params?.steps,
+            words,
+            onContinue: () => {
+              navigation.navigate('OnboardingSuccess', {
+                showPasswordHint: true,
+              });
+            },
+          });
+        }
         trackOnboarding(
           MetricsEventBuilder.createEventBuilder(
             MetaMetricsEvents.WALLET_SECURITY_PHRASE_CONFIRMED,
@@ -144,135 +125,256 @@ const ManualBackupStep2 = ({ navigation, seedphraseBackedUp, route }) => {
     }
   };
 
-  const renderSuccess = () => {
-    const styles = createStyles(colors);
-
-    return (
-      <View style={styles.successRow}>
-        <MaterialIcon
-          name="check-circle"
-          size={15}
-          color={colors.success.default}
-        />
-        <Text style={styles.successText}>
-          {strings('manual_backup_step_2.success')}
-        </Text>
-      </View>
-    );
-  };
+  useEffect(() => {
+    if (showStatusBottomSheet) return;
 
-  const renderWordBox = (word, i) => {
-    const styles = createStyles(colors);
-
-    return (
-      <View key={`word_${i}`} style={styles.wordBoxWrapper}>
-        <Text style={styles.wordBoxIndex}>{i + 1}.</Text>
-        <TouchableOpacity
-          // eslint-disable-next-line react/jsx-no-bind
-          onPress={() => {
-            clearConfirmedWordAt(i);
-          }}
-          style={[
-            styles.wordWrapper,
-            i === currentIndex && styles.currentWord,
-            confirmedWords[i].word && styles.confirmedWord,
-          ]}
-        >
-          <Text style={styles.word}>{word}</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  };
+    const rows = [0, 1, 2, 3];
+    const randomRows = rows.sort(() => 0.5 - Math.random()).slice(0, 3);
+    const indexesToEmpty = randomRows.map((row) => {
+      const col = Math.floor(Math.random() * 3);
+      return row * 3 + col;
+    });
 
-  const renderWordSelectableBox = useCallback(
-    (key, i) => {
-      const [word] = key.split(',');
-      const selected = wordsDict[key].currentPosition !== undefined;
-      const styles = createStyles(colors);
-
-      return (
-        <TouchableOpacity
-          // eslint-disable-next-line react/jsx-no-bind
-          onPress={() => selectWord(word, i)}
-          style={[styles.selectableWord, selected && styles.selectedWord]}
-          key={`selectableWord_${i}`}
-        >
-          <Text
-            style={[
-              styles.selectableWordText,
-              selected && styles.selectedWordText,
-            ]}
-          >
-            {word}
-          </Text>
-        </TouchableOpacity>
-      );
+    const tempGrid = [...words];
+    const removed = [];
+
+    indexesToEmpty.forEach((i) => {
+      removed.push(tempGrid[i]);
+      tempGrid[i] = '';
+    });
+
+    setGridWords(tempGrid);
+    setMissingWords(removed);
+    setEmptySlots(indexesToEmpty);
+    const sortedIndexes = indexesToEmpty.sort((a, b) => a - b);
+    setSortedSlots(indexesToEmpty.filter((_, i) => i !== 0));
+    setSelectedSlot(sortedIndexes[0]);
+  }, [words, showStatusBottomSheet]);
+
+  const handleWordSelect = useCallback(
+    (word) => {
+      const updatedGrid = [...gridWords];
+      if (sortedSlots.length === 0) {
+        const indexesToEmpty = [...emptySlots];
+        const sortedIndexes = indexesToEmpty.sort((a, b) => a - b);
+        setSortedSlots(sortedIndexes);
+      }
+
+      // Step 1: Deselect if already placed
+      const existingIndex = updatedGrid.findIndex((w) => w === word);
+      if (existingIndex !== -1) {
+        updatedGrid[existingIndex] = '';
+        setGridWords(updatedGrid);
+
+        // Clear selection completely if this was the last word
+        const remaining = updatedGrid.filter((w) => w !== '');
+        setSelectedSlot(remaining.length === 0 ? null : null); // ← always reset for top-down behavior
+        return;
+      }
+
+      // Word must be one of the missing ones
+      if (!missingWords.includes(word)) return;
+
+      // Get empty slots top-down
+      const emptySlotsUpdated = updatedGrid
+        .map((val, idx) => (val === '' ? idx : null))
+        .filter((i) => i !== null);
+
+      //  If user clicked a slot manually, use it
+      let targetIndex = selectedSlot;
+
+      // FINAL GUARD: Always prefer top-down first empty slot
+      if (
+        targetIndex === null || // no slot selected
+        updatedGrid[targetIndex] !== '' || // slot already filled
+        !emptySlotsUpdated.includes(targetIndex) // invalid slot
+      ) {
+        targetIndex = emptySlotsUpdated[0]; // force top-down
+      }
+
+      if (targetIndex === undefined) return;
+
+      updatedGrid[targetIndex] = word;
+      setGridWords(updatedGrid);
+      setSelectedSlot(sortedSlots[0]); // reset selection after placing
+      setSortedSlots(sortedSlots.filter((_, i) => i !== 0));
+    },
+    [gridWords, missingWords, selectedSlot, sortedSlots, emptySlots],
+  );
+
+  const handleSlotPress = useCallback(
+    (index) => {
+      if (!emptySlots.includes(index)) return;
+
+      const isFilled = gridWords[index] !== '';
+      const word = gridWords[index];
+
+      const updated = [...gridWords];
+
+      if (isFilled) {
+        updated[index] = '';
+        setGridWords(updated);
+
+        const stillUsed = updated.includes(word);
+        if (!stillUsed) setSelectedSlot(index); // reselect same slot
+      } else {
+        setSelectedSlot(index); // highlight this for next word
+      }
     },
-    [colors, selectWord, wordsDict],
+    [emptySlots, gridWords],
   );
 
-  const renderWords = useCallback(
+  const innerWidth = Dimensions.get('window').width;
+
+  const renderGrid = useCallback(
+    () => (
+      <>
+        <View style={[styles.seedPhraseContainer]}>
+          <FlatList
+            data={gridWords}
+            numColumns={3}
+            keyExtractor={(_, index) => index.toString()}
+            renderItem={({ item, index }) => {
+              // eslint-disable-next-line no-console
+              const isEmpty = emptySlots.includes(index);
+              const isSelected = selectedSlot === index;
+
+              return (
+                <TouchableOpacity
+                  key={index}
+                  style={[
+                    styles.gridItem,
+                    isEmpty && styles.emptySlot,
+                    isSelected && styles.selectedSlotBox,
+                    { width: innerWidth / 3.8 },
+                  ]}
+                  onPress={() => handleSlotPress(index)}
+                >
+                  <Text style={styles.gridItemIndex}>{index + 1}.</Text>
+                  <Text style={styles.gridItemText}>
+                    {isEmpty ? item : '••••••'}
+                  </Text>
+                </TouchableOpacity>
+              );
+            }}
+          />
+        </View>
+      </>
+    ),
+    [
+      styles.seedPhraseContainer,
+      styles.gridItem,
+      styles.emptySlot,
+      styles.selectedSlotBox,
+      gridWords,
+      emptySlots,
+      selectedSlot,
+      innerWidth,
+      handleSlotPress,
+      styles.gridItemIndex,
+      styles.gridItemText,
+    ],
+  );
+
+  // const allPlaced = missingWords.every((word) => gridWords.includes(word));
+
+  const renderMissingWords = useCallback(
     () => (
-      <View style={styles.words}>
-        {Object.keys(wordsDict).map((key, i) =>
-          renderWordSelectableBox(key, i),
-        )}
+      <View style={styles.missingWords}>
+        {missingWords.map((word, i) => {
+          const isUsed = gridWords.includes(word);
+          return (
+            <TouchableOpacity
+              key={i}
+              style={[
+                styles.missingWord,
+                isUsed && styles.selectedWord,
+                { width: innerWidth / 3.9 },
+              ]}
+              onPress={() => handleWordSelect(word)}
+            >
+              <Text
+                variant={TextVariant.BodyMDMedium}
+                color={isUsed ? TextColor.Default : TextColor.Primary}
+              >
+                {word}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
       </View>
     ),
-    [renderWordSelectableBox, styles.words, wordsDict],
+    [
+      styles.missingWords,
+      styles.missingWord,
+      styles.selectedWord,
+      missingWords,
+      gridWords,
+      innerWidth,
+      handleWordSelect,
+    ],
   );
 
+  const validateSeedPhrase = () => {
+    navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.SUCCESS_ERROR_SHEET,
+      params: {
+        title: validateWords()
+          ? strings('manual_backup_step_2.success-title')
+          : strings('manual_backup_step_2.error-title'),
+        description: validateWords()
+          ? strings('manual_backup_step_2.success-description')
+          : strings('manual_backup_step_2.error-description'),
+        primaryButtonLabel: validateWords()
+          ? strings('manual_backup_step_2.success-button')
+          : strings('manual_backup_step_2.error-button'),
+        type: validateWords() ? 'success' : 'error',
+        onClose: () => setShowStatusBottomSheet((prev) => !prev),
+        onPrimaryButtonPress: validateWords()
+          ? goNext
+          : () => setShowStatusBottomSheet((prev) => !prev),
+        closeOnPrimaryButtonPress: !validateWords(),
+      },
+    });
+  };
+
   return (
     <SafeAreaView style={styles.mainWrapper}>
-      <View style={styles.onBoardingWrapper}>
-        <OnboardingProgress
-          currentStep={currentStep}
-          steps={route.params?.steps}
-        />
-      </View>
-      <ActionView
-        confirmTestID={ManualBackUpStepsSelectorsIDs.CONTINUE_BUTTON}
-        confirmText={strings('manual_backup_step_2.complete')}
-        onConfirmPress={goNext}
-        confirmDisabled={!seedPhraseReady || !validateWords()}
-        showCancelButton={false}
-        confirmButtonMode={'confirm'}
-      >
-        <View
-          style={styles.wrapper}
-          testID={ManualBackUpStepsSelectorsIDs.PROTECT_CONTAINER}
+      <View style={[styles.container]}>
+        <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+          Step 3 of 3
+        </Text>
+        <ActionView
+          confirmTestID={ManualBackUpStepsSelectorsIDs.CONTINUE_BUTTON}
+          confirmText={strings('manual_backup_step_2.continue')}
+          onConfirmPress={validateSeedPhrase}
+          confirmDisabled={!isAllWordsPlaced()}
+          showCancelButton={false}
+          confirmButtonMode={'confirm'}
+          buttonContainerStyle={styles.buttonContainer}
+          contentContainerStyle={styles.actionView}
         >
-          <Text style={styles.action}>
-            {strings('manual_backup_step_2.action')}
-          </Text>
-          <View style={styles.infoWrapper}>
-            <Text style={styles.info}>
-              {strings('manual_backup_step_2.info')}
-            </Text>
-          </View>
           <View
-            style={[
-              styles.seedPhraseWrapper,
-              seedPhraseReady && styles.seedPhraseWrapperError,
-              validateWords() && styles.seedPhraseWrapperComplete,
-            ]}
+            style={styles.wrapper}
+            testID={ManualBackUpStepsSelectorsIDs.PROTECT_CONTAINER}
           >
-            <View style={styles.colLeft}>
-              {confirmedWords
-                .slice(0, confirmedWords.length / 2)
-                .map(({ word }, i) => renderWordBox(word, i))}
-            </View>
-            <View style={styles.colRight}>
-              {confirmedWords
-                .slice(-confirmedWords.length / 2)
-                .map(({ word }, i) =>
-                  renderWordBox(word, i + confirmedWords.length / 2),
-                )}
+            <View style={styles.content}>
+              <Text variant={TextVariant.DisplayMD} color={TextColor.Default}>
+                {strings('manual_backup_step_2.action')}
+              </Text>
+
+              <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+                {strings('manual_backup_step_2.info')}
+              </Text>
+
+              <View style={styles.gridContainer}>
+                {renderGrid()}
+                {renderMissingWords()}
+              </View>
             </View>
           </View>
-          {validateWords() ? renderSuccess() : renderWords()}
-        </View>
-      </ActionView>
+        </ActionView>
+      </View>
       <ScreenshotDeterrent enabled isSRP />
     </SafeAreaView>
   );
diff --git a/app/components/Views/ManualBackupStep2/styles.ts b/app/components/Views/ManualBackupStep2/styles.ts
index f6f222fa3ace..a78e3962c087 100644
--- a/app/components/Views/ManualBackupStep2/styles.ts
+++ b/app/components/Views/ManualBackupStep2/styles.ts
@@ -1,146 +1,142 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Dimensions } from 'react-native';
 import { fontStyles } from '../../../styles/common';
-import Device from '../../../util/device';
+
+const { height } = Dimensions.get('window');
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createStyles = (colors: any) =>
   StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingHorizontal: 16,
+    },
     mainWrapper: {
       backgroundColor: colors.background.default,
       flex: 1,
-      marginTop: 16,
     },
     wrapper: {
       flex: 1,
-      paddingHorizontal: 32,
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      height: '100%',
+      rowGap: 16,
     },
-    onBoardingWrapper: {
-      paddingHorizontal: 20,
+    selectedWord: {
+      backgroundColor: colors.background.alternative,
+      borderWidth: 0,
     },
-    action: {
-      fontSize: 18,
-      marginBottom: 16,
+    selectedWordText: {
       color: colors.text.default,
-      justifyContent: 'center',
-      textAlign: 'center',
-      ...fontStyles.bold,
     },
-    infoWrapper: {
+    seedPhraseContainer: {
+      backgroundColor: colors.background.muted,
+      borderRadius: 10,
+      height: 'auto',
+      flexDirection: 'column',
       marginBottom: 16,
-      justifyContent: 'center',
+      padding: 16,
+      gap: 4,
     },
-    info: {
-      fontSize: 16,
-      color: colors.text.default,
-      textAlign: 'center',
-      ...fontStyles.normal,
-      paddingHorizontal: 6,
+    statusContainer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+      gap: 16,
+      padding: 16,
+      width: '100%',
     },
-    seedPhraseWrapper: {
+    emptySlot: {
       backgroundColor: colors.background.default,
-      borderRadius: 8,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
+      opacity: 1,
       borderColor: colors.border.default,
-      borderWidth: 1,
-      marginBottom: 24,
-    },
-    seedPhraseWrapperComplete: {
-      borderColor: colors.success.default,
-    },
-    seedPhraseWrapperError: {
-      borderColor: colors.error.default,
-    },
-    colLeft: {
-      paddingTop: 18,
-      paddingLeft: 27,
-      paddingBottom: 4,
-      alignItems: 'flex-start',
+      borderWidth: 2,
     },
-    colRight: {
-      paddingTop: 18,
-      paddingRight: 27,
-      paddingBottom: 4,
-      alignItems: 'flex-end',
+    selectedSlotBox: {
+      borderColor: colors.primary.default,
+      borderWidth: 2,
     },
-    wordBoxWrapper: {
+    missingWords: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      marginBottom: 14,
+      justifyContent: 'center',
+      flexWrap: 'wrap',
     },
-    wordWrapper: {
+    missingWord: {
+      paddingVertical: 4,
       paddingHorizontal: 8,
-      paddingVertical: 6,
-      width: Device.isMediumDevice() ? 75 : 95,
+      margin: 8,
+      borderRadius: 8,
       backgroundColor: colors.background.default,
-      borderColor: colors.border.default,
       borderWidth: 1,
-      borderRadius: 34,
-      borderStyle: 'dashed',
-      marginLeft: 4,
+      borderColor: colors.primary.default,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 40,
+      color: colors.primary.default,
     },
-    word: {
-      fontSize: 14,
+    missingWordText: {
+      color: colors.primary.default,
+    },
+    missingWordTextSelected: {
       color: colors.text.default,
-      lineHeight: 14,
-      textAlign: 'center',
     },
-    selectableWord: {
+    gridItem: {
+      paddingVertical: 4,
       paddingHorizontal: 8,
-      paddingVertical: 6,
-      color: colors.text.default,
-      width: 95,
+      borderRadius: 8,
       backgroundColor: colors.background.default,
-      borderColor: colors.primary.default,
       borderWidth: 1,
-      marginBottom: 6,
-      borderRadius: 13,
-      textAlign: 'center',
-    },
-    selectableWordText: {
-      textAlign: 'center',
+      borderColor: colors.border.muted,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap: 4,
+      height: 40,
       fontSize: 14,
-      lineHeight: 14,
       color: colors.text.default,
+      ...fontStyles.normal,
+      opacity: 0.5,
+      margin: 4,
     },
-    words: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: Device.isMediumDevice()
-        ? 'space-around'
-        : 'space-between',
+    gridContainer: {
+      flex: 1,
+      flexDirection: 'column',
+      gap: 4,
     },
-    successRow: {
-      flexDirection: 'row',
-      justifyContent: 'center',
-      alignItems: 'center',
+    gridItemIndex: {
+      color: colors.text.alternative,
+      ...fontStyles.normal,
+      fontSize: 14,
     },
-    successText: {
-      fontSize: 12,
-      color: colors.success.default,
-      marginLeft: 4,
+    gridItemText: {
+      fontSize: 14,
+      color: colors.text.default,
+      ...fontStyles.normal,
     },
-    selectedWord: {
-      backgroundColor: colors.icon.muted,
-      borderWidth: 1,
-      borderColor: colors.icon.muted,
+    content: {
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      rowGap: 16,
+      height: height - 290,
     },
-    selectedWordText: {
-      color: colors.text.default,
+    headerLeft: {
+      marginLeft: 16,
     },
-    currentWord: {
-      borderWidth: 1,
-      borderColor: colors.primary.default,
+    statusButton: {
+      width: '100%',
     },
-    confirmedWord: {
-      borderWidth: 1,
-      borderColor: colors.primary.default,
-      borderStyle: 'solid',
+    statusDescription: {
+      textAlign: 'left',
+      alignSelf: 'flex-start',
+      width: '100%',
     },
-    wordBoxIndex: {
-      color: colors.text.default,
+    actionView: {
+      flex: 1,
+    },
+    buttonContainer: {
+      paddingHorizontal: 0,
     },
   });
 
diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js
index f20f1c1caf44..4524d99e13ff 100644
--- a/app/components/Views/Onboarding/index.js
+++ b/app/components/Views/Onboarding/index.js
@@ -6,7 +6,6 @@ import {
   View,
   ScrollView,
   StyleSheet,
-  Image,
   InteractionManager,
   Animated,
   Easing,
@@ -15,14 +14,12 @@ import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
 import StorageWrapper from '../../../store/storage-wrapper';
-import StyledButton from '../../UI/StyledButton';
 import {
   fontStyles,
   baseStyles,
   colors as importedColors,
 } from '../../../styles/common';
 import { strings } from '../../../../locales/i18n';
-import Button from '@metamask/react-native-button';
 import { connect } from 'react-redux';
 import FadeOutOverlay from '../../UI/FadeOutOverlay';
 import {
@@ -32,7 +29,11 @@ import {
 import Device from '../../../util/device';
 import BaseNotification from '../../UI/Notification/BaseNotification';
 import ElevatedView from 'react-native-elevated-view';
-import { loadingSet, loadingUnset } from '../../../actions/user';
+import {
+  loadingSet,
+  loadingUnset,
+  UserActionType,
+} from '../../../actions/user';
 import { storePrivacyPolicyClickedOrClosed as storePrivacyPolicyClickedOrClosedAction } from '../../../reducers/legalNotices';
 import PreventScreenshot from '../../../core/PreventScreenshot';
 import WarningExistingUserModal from '../../UI/WarningExistingUserModal';
@@ -43,17 +44,28 @@ import { withMetricsAwareness } from '../../hooks/useMetrics';
 import { Authentication } from '../../../core';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import { OnboardingSelectorIDs } from '../../../../e2e/selectors/Onboarding/Onboarding.selectors';
-
 import Routes from '../../../constants/navigation/Routes';
 import { selectAccounts } from '../../../selectors/accountTrackerController';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
-import { trace, TraceName, TraceOperation } from '../../../util/trace';
+import LottieView from 'lottie-react-native';
+// import { trace, TraceName, TraceOperation } from '../../../util/trace';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
+import Button, {
+  ButtonVariants,
+  ButtonWidthTypes,
+  ButtonSize,
+} from '../../../component-library/components/Buttons/Button';
+
+import fox from '../../../animations/Searching_Fox.json';
+
+const pageBackgroundColor = '#EAC2FF';
+const brandColor = '#3D065F';
 
 const createStyles = (colors) =>
   StyleSheet.create({
     scroll: {
       flex: 1,
+      // marginTop: 100,
     },
     wrapper: {
       flex: 1,
@@ -61,34 +73,44 @@ const createStyles = (colors) =>
       paddingVertical: 30,
     },
     foxWrapper: {
-      width: Device.isIos() ? 90 : 45,
-      height: Device.isIos() ? 90 : 45,
+      width: 200,
+      height: 200,
       marginVertical: 20,
     },
     image: {
       alignSelf: 'center',
-      width: Device.isIos() ? 90 : 45,
-      height: Device.isIos() ? 90 : 45,
+      width: 200,
+      height: 200,
     },
     largeFoxWrapper: {
       alignItems: 'center',
-      marginVertical: 24,
+      marginVertical: 80,
     },
     foxImage: {
-      width: 125,
-      height: 125,
+      width: 145,
+      height: 145,
       resizeMode: 'contain',
     },
     title: {
+      fontSize: 40,
+      lineHeight: 40,
+      marginBottom: 28,
+      justifyContent: 'center',
       textAlign: 'center',
+      paddingHorizontal: 60,
+      fontFamily: 'MMSans-Regular',
+      marginTop: 80,
+      color: brandColor,
     },
     ctas: {
       flex: 1,
       position: 'relative',
+      width: '100%',
+      paddingHorizontal: 20,
     },
     footer: {
-      marginTop: -20,
-      marginBottom: 20,
+      marginTop: -40,
+      marginBottom: 40,
     },
     login: {
       fontSize: 18,
@@ -104,11 +126,21 @@ const createStyles = (colors) =>
     },
     createWrapper: {
       flex: 1,
+      flexDirection: 'column',
       justifyContent: 'flex-end',
-      marginBottom: 24,
+      rowGap: 16,
+      marginBottom: 16,
     },
     buttonWrapper: {
-      marginBottom: 16,
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+      gap: 16,
+      width: '100%',
+    },
+    buttonLabel: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      columnGap: 8,
     },
     loader: {
       marginTop: 180,
@@ -132,6 +164,41 @@ const createStyles = (colors) =>
       flexDirection: 'row',
       alignItems: 'flex-end',
     },
+    divider: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 10,
+    },
+    dividerLine: {
+      flex: 1,
+      height: 1,
+      backgroundColor: colors.border.muted,
+    },
+    bottomSheetContainer: {
+      padding: 16,
+      flexDirection: 'column',
+      rowGap: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    socialBtn: {
+      borderColor: colors.border.muted,
+      borderWidth: 1,
+      color: colors.text.default,
+    },
+    createWalletButton: {
+      borderRadius: 12,
+      color: importedColors.whiteTransparent,
+      backgroundColor: importedColors.btnBlack,
+    },
+    existingWalletButton: {
+      borderRadius: 12,
+      color: colors.text.default,
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: importedColors.btnBlack,
+    },
   });
 
 /**
@@ -168,12 +235,7 @@ class Onboarding extends PureComponent {
      * Object that represents the current route info like params passed to it
      */
     route: PropTypes.object,
-    /**
-     * Metrics injected by withMetricsAwareness HOC
-     */
-    metrics: PropTypes.object,
   };
-
   notificationAnimated = new Animated.Value(100);
   detailsYAnimated = new Animated.Value(0);
   actionXAnimated = new Animated.Value(0);
@@ -192,6 +254,10 @@ class Onboarding extends PureComponent {
     warningModalVisible: false,
     loading: false,
     existingUser: false,
+    createWallet: false,
+    existingWallet: false,
+    bottomSheetVisible: false,
+    errorSheetVisible: false,
   };
 
   seedwords = null;
@@ -224,12 +290,20 @@ class Onboarding extends PureComponent {
     const colors = this.context.colors || mockTheme.colors;
     navigation.setOptions(
       route.params?.delete
-        ? getTransparentOnboardingNavbarOptions(colors)
-        : getTransparentBackOnboardingNavbarOptions(colors),
+        ? getTransparentOnboardingNavbarOptions(
+            colors,
+            true,
+            pageBackgroundColor,
+          )
+        : getTransparentBackOnboardingNavbarOptions(
+            colors,
+            pageBackgroundColor,
+          ),
     );
   };
 
   componentDidMount() {
+    this.props.unsetLoading();
     this.updateNavBar();
     this.mounted = true;
     this.checkIfExistingUser();
@@ -285,22 +359,10 @@ class Onboarding extends PureComponent {
 
   onPressCreate = () => {
     const action = () => {
-      const { metrics } = this.props;
-      if (metrics.isEnabled()) {
-        this.props.navigation.navigate('ChoosePassword', {
-          [PREVIOUS_SCREEN]: ONBOARDING,
-        });
-        this.track(MetaMetricsEvents.WALLET_SETUP_STARTED);
-      } else {
-        this.props.navigation.navigate('OptinMetrics', {
-          onContinue: () => {
-            this.props.navigation.replace('ChoosePassword', {
-              [PREVIOUS_SCREEN]: ONBOARDING,
-            });
-            this.track(MetaMetricsEvents.WALLET_SETUP_STARTED);
-          },
-        });
-      }
+      this.props.navigation.navigate('ChoosePassword', {
+        [PREVIOUS_SCREEN]: ONBOARDING,
+      });
+      this.track(MetaMetricsEvents.WALLET_SETUP_STARTED);
     };
 
     this.handleExistingUser(action);
@@ -308,22 +370,10 @@ class Onboarding extends PureComponent {
 
   onPressImport = () => {
     const action = async () => {
-      const { metrics } = this.props;
-      if (metrics.isEnabled()) {
-        this.props.navigation.push(
-          Routes.ONBOARDING.IMPORT_FROM_SECRET_RECOVERY_PHRASE,
-        );
-        this.track(MetaMetricsEvents.WALLET_IMPORT_STARTED);
-      } else {
-        this.props.navigation.navigate('OptinMetrics', {
-          onContinue: () => {
-            this.props.navigation.replace(
-              Routes.ONBOARDING.IMPORT_FROM_SECRET_RECOVERY_PHRASE,
-            );
-            this.track(MetaMetricsEvents.WALLET_IMPORT_STARTED);
-          },
-        });
-      }
+      this.props.navigation.navigate(
+        Routes.ONBOARDING.IMPORT_FROM_SECRET_RECOVERY_PHRASE,
+      );
+      this.track(MetaMetricsEvents.WALLET_IMPORT_STARTED);
     };
     this.handleExistingUser(action);
   };
@@ -366,46 +416,49 @@ class Onboarding extends PureComponent {
     return (
       <View style={styles.ctas}>
         <View style={styles.largeFoxWrapper}>
-          <Image
-            source={require('../../../images/branding/fox.png')}
-            style={styles.foxImage}
-            resizeMethod={'auto'}
+          <LottieView
+            style={styles.image}
+            autoPlay
+            loop
+            source={fox}
+            resizeMode="contain"
           />
         </View>
+
         <Text
-          variant={TextVariant.HeadingLG}
+          variant={TextVariant.HeadingSMRegular}
           style={styles.title}
           testID={OnboardingSelectorIDs.SCREEN_TITLE}
         >
           {strings('onboarding.title')}
         </Text>
-        <View style={styles.importWrapper}>
-          <Text
-            style={styles.buttonDescription}
-            testID={OnboardingSelectorIDs.SCREEN_DESCRIPTION}
-          >
-            {strings('onboarding.import')}
-          </Text>
-        </View>
+
         <View style={styles.createWrapper}>
-          <View style={styles.buttonWrapper}>
-            <StyledButton
-              type={'normal'}
-              onPress={this.onPressImport}
-              testID={OnboardingSelectorIDs.IMPORT_SEED_BUTTON}
-            >
-              {strings('import_wallet.import_from_seed_button')}
-            </StyledButton>
-          </View>
-          <View style={styles.buttonWrapper}>
-            <StyledButton
-              type={'blue'}
-              onPress={this.onPressCreate}
-              testID={OnboardingSelectorIDs.NEW_WALLET_BUTTON}
-            >
-              {strings('onboarding.start_exploring_now')}
-            </StyledButton>
-          </View>
+          <Button
+            variant={ButtonVariants.Primary}
+            onPress={() => this.onPressCreate()}
+            testID={OnboardingSelectorIDs.NEW_WALLET_BUTTON}
+            label={strings('onboarding.start_exploring_now')}
+            width={ButtonWidthTypes.Full}
+            size={ButtonSize.Lg}
+            style={styles.createWalletButton}
+          />
+          <Button
+            variant={ButtonVariants.Secondary}
+            onPress={() => this.onPressImport()}
+            testID={OnboardingSelectorIDs.IMPORT_SEED_BUTTON}
+            width={ButtonWidthTypes.Full}
+            size={ButtonSize.Lg}
+            style={styles.existingWalletButton}
+            label={
+              <Text
+                variant={TextVariant.BodyMDMedium}
+                color={colors.text.default}
+              >
+                {strings('onboarding.have_existing_wallet')}
+              </Text>
+            }
+          />
         </View>
       </View>
     );
@@ -445,7 +498,7 @@ class Onboarding extends PureComponent {
 
     return (
       <View
-        style={baseStyles.flexGrow}
+        style={[baseStyles.flexGrow, { backgroundColor: pageBackgroundColor }]}
         testID={OnboardingSelectorIDs.CONTAINER_ID}
       >
         <ScrollView
@@ -455,20 +508,32 @@ class Onboarding extends PureComponent {
           <View style={styles.wrapper}>
             {loading && (
               <View style={styles.foxWrapper}>
-                <Image
+                {/* <Image
                   source={require('../../../images/branding/fox.png')}
                   style={styles.image}
                   resizeMethod={'auto'}
+                /> */}
+                <LottieView
+                  style={styles.image}
+                  autoPlay
+                  loop
+                  source={fox}
+                  resizeMode="contain"
                 />
               </View>
             )}
             {loading ? this.renderLoader() : this.renderContent()}
           </View>
+
           {existingUser && !loading && (
             <View style={styles.footer}>
-              <Button style={styles.login} onPress={this.onLogin}>
-                {strings('onboarding.unlock')}
-              </Button>
+              <Button
+                variant={ButtonVariants.Link}
+                onPress={this.onLogin}
+                label={strings('onboarding.unlock')}
+                width={ButtonWidthTypes.Full}
+                size={ButtonSize.Lg}
+              />
             </View>
           )}
         </ScrollView>
@@ -477,12 +542,119 @@ class Onboarding extends PureComponent {
 
         <View>{this.handleSimpleNotification()}</View>
 
-        <WarningExistingUserModal
+        {/* <WarningExistingUserModal
           warningModalVisible={this.state.warningModalVisible}
           onCancelPress={this.warningCallback}
           onRequestClose={this.toggleWarningModal}
           onConfirmPress={this.toggleWarningModal}
-        />
+        /> */}
+
+        {/* {this.state.bottomSheetVisible && (
+          <BottomSheet
+            shouldNavigateBack={false}
+            onClose={() =>
+              this.setState({
+                bottomSheetVisible: false,
+                existingWallet: false,
+                createWallet: false,
+              })
+            }
+          >
+            <View style={styles.bottomSheetContainer}>
+              <Text variant={TextVariant.HeadingMD} color={TextColor.Default}>
+                {strings('onboarding.bottom_sheet_title')}
+              </Text>
+              <View style={styles.buttonWrapper}>
+                <Button
+                  variant={ButtonVariants.Secondary}
+                  onPress={this.onPressContinueWithGoogle}
+                  testID={OnboardingSelectorIDs.NEW_WALLET_BUTTON}
+                  label={
+                    <View style={styles.buttonLabel}>
+                      <Icon
+                        name={IconName.Google}
+                        size={IconSize.Lg}
+                        color={TextColor.Default}
+                      />
+                      <Text
+                        variant={TextVariant.BodyMDMedium}
+                        color={TextColor.Default}
+                      >
+                        {this.state.createWallet
+                          ? strings('onboarding.continue_with_google')
+                          : strings('onboarding.sign_in_with_google')}
+                      </Text>
+                    </View>
+                  }
+                  width={ButtonWidthTypes.Full}
+                  size={ButtonSize.Lg}
+                  style={styles.socialBtn}
+                />
+                <Button
+                  variant={ButtonVariants.Secondary}
+                  onPress={this.onPressContinueWithApple}
+                  testID={OnboardingSelectorIDs.IMPORT_SEED_BUTTON}
+                  label={
+                    <View style={styles.buttonLabel}>
+                      <Icon
+                        name={IconName.Apple}
+                        size={IconSize.Lg}
+                        color={TextColor.Default}
+                      />
+                      <Text
+                        variant={TextVariant.BodyMDMedium}
+                        color={TextColor.Default}
+                      >
+                        {this.state.createWallet
+                          ? strings('onboarding.continue_with_apple')
+                          : strings('onboarding.sign_in_with_apple')}
+                      </Text>
+                    </View>
+                  }
+                  width={ButtonWidthTypes.Full}
+                  size={ButtonSize.Lg}
+                  style={styles.socialBtn}
+                />
+              </View>
+              <View style={styles.divider}>
+                <View style={styles.dividerLine} />
+                <Text
+                  variant={TextVariant.BodyLGMedium}
+                  color={TextColor.Muted}
+                >
+                  {strings('onboarding.or')}
+                </Text>
+                <View style={styles.dividerLine} />
+              </View>
+              <View style={styles.buttonWrapper}>
+                <Button
+                  variant={ButtonVariants.Secondary}
+                  onPress={
+                    this.state.createWallet
+                      ? this.onPressCreate
+                      : this.onPressImport
+                  }
+                  testID={OnboardingSelectorIDs.IMPORT_SEED_BUTTON}
+                  label={
+                    this.state.createWallet
+                      ? strings('onboarding.continue_with_srp')
+                      : strings('onboarding.import_srp')
+                  }
+                  width={ButtonWidthTypes.Full}
+                  size={ButtonSize.Lg}
+                />
+              </View>
+            </View>
+          </BottomSheet>
+        )} */}
+
+        {/* <ErrorSheet
+          open={this.state.errorSheetVisible}
+          onClose={() => this.setState({ errorSheetVisible: false })}
+          onNext={() => this.setState({ errorSheetVisible: false })}
+          errorTitle={strings('error_sheet.still_there_title')}
+          errorDescription={strings('error_sheet.still_there_description')}
+        /> */}
       </View>
     );
   }
diff --git a/app/components/Views/OnboardingCarousel/index.tsx b/app/components/Views/OnboardingCarousel/index.tsx
index 8f392af20920..66004cf922a2 100644
--- a/app/components/Views/OnboardingCarousel/index.tsx
+++ b/app/components/Views/OnboardingCarousel/index.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useContext, useCallback } from 'react';
 import {
-  Text,
   View,
   ScrollView,
   StyleSheet,
@@ -8,17 +7,25 @@ import {
   Dimensions,
   Platform,
 } from 'react-native';
-import type { ThemeColors } from '@metamask/design-tokens';
+import { type ThemeColors } from '@metamask/design-tokens';
 import { NavigationProp, ParamListBase } from '@react-navigation/native';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { ITrackingEvent } from '../../../core/Analytics/MetaMetrics.types';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
-import StyledButton from '../../UI/StyledButton';
-import { fontStyles, baseStyles } from '../../../styles/common';
+import Button, {
+  ButtonVariants,
+  ButtonWidthTypes,
+  ButtonSize,
+} from '../../../component-library/components/Buttons/Button';
+import {
+  baseStyles,
+  onboardingCarouselColors,
+  colors as constColors,
+} from '../../../styles/common';
 import { strings } from '../../../../locales/i18n';
 import FadeOutOverlay from '../../UI/FadeOutOverlay';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
-import { getTransparentOnboardingNavbarOptions } from '../../UI/Navbar';
+import { getOnboardingCarouselNavbarOptions } from '../../UI/Navbar';
 import OnboardingScreenWithBg from '../../UI/OnboardingScreenWithBg';
 import Device from '../../../util/device';
 import { connect } from 'react-redux';
@@ -34,6 +41,12 @@ import {
   saveOnboardingEvent as SaveEvent,
   OnboardingActionTypes,
 } from '../../../actions/onboarding';
+import navigateTermsOfUse from '../../../util/termsOfUse/termsOfUse';
+import { USE_TERMS } from '../../../constants/storage';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../component-library/components/Texts/Text';
 
 const IMAGE_RATIO = 250 / 200;
 const DEVICE_WIDTH = Dimensions.get('window').width;
@@ -52,38 +65,30 @@ const createStyles = (colors: ThemeColors) =>
       flexGrow: 1,
     },
     wrapper: {
-      paddingVertical: 30,
+      paddingTop: 30,
+      paddingBottom: 24,
       flex: 1,
     },
     title: {
-      fontSize: 24,
-      marginBottom: 12,
-      color: colors.text.default,
+      fontSize: 40,
+      lineHeight: 40,
+      marginBottom: 28,
       justifyContent: 'center',
       textAlign: 'center',
-      ...fontStyles.bold,
+      paddingHorizontal: 60,
+      fontFamily: 'MMSans-Regular',
     },
     subtitle: {
-      fontSize: 14,
-      lineHeight: 19,
-      marginTop: 12,
-      marginBottom: 25,
-      color: colors.text.alternative,
-      justifyContent: 'center',
       textAlign: 'center',
-      ...fontStyles.normal,
+      paddingHorizontal: 16,
     },
     ctas: {
-      paddingHorizontal: 40,
+      paddingHorizontal: 16,
       paddingBottom: Device.isIphoneX() ? 40 : 20,
       flexDirection: 'column',
     },
-    ctaWrapper: {
-      justifyContent: 'flex-end',
-    },
     carouselImage: {},
     carouselImage1: {
-      marginTop: 30,
       ...carouselSize,
     },
     carouselImage2: {
@@ -98,35 +103,33 @@ const createStyles = (colors: ThemeColors) =>
       alignItems: 'center',
       justifyContent: 'center',
     },
-    circle: {
-      width: 8,
-      height: 8,
-      borderRadius: 8 / 2,
+    bar: {
+      width: 10,
+      height: 2,
       backgroundColor: colors.icon.default,
       opacity: 0.4,
-      marginHorizontal: 8,
+      marginHorizontal: 2,
     },
-    solidCircle: {
+    solidBar: {
       opacity: 1,
     },
     progressContainer: {
       flexDirection: 'row',
       alignSelf: 'center',
-      marginVertical: 36,
+      marginTop: 47,
+      padding: 10,
     },
     tab: {
       marginHorizontal: 30,
     },
-    metricsWrapper: {
-      flex: 1,
-      marginTop: 12,
-      marginBottom: 25,
-    },
     metricsData: {
-      fontSize: 10,
-      color: colors.text.alternative,
       textAlign: 'center',
     },
+    gettingStartedButton: {
+      borderRadius: 12,
+      color: constColors.whiteTransparent,
+      backgroundColor: constColors.btnBlack,
+    },
   });
 
 const onboarding_carousel_1 = require('../../../images/onboarding-carousel-1.png'); // eslint-disable-line
@@ -165,7 +168,7 @@ export const OnboardingCarousel: React.FC<OnboardingCarouselProps> = ({
     [saveOnboardingEvent],
   );
 
-  const onPressGetStarted = () => {
+  const navigateToOnboarding = () => {
     navigation.navigate('Onboarding');
     track(
       MetricsEventBuilder.createEventBuilder(
@@ -174,6 +177,21 @@ export const OnboardingCarousel: React.FC<OnboardingCarouselProps> = ({
     );
   };
 
+  const termsOfUse = async () => {
+    if (navigation) {
+      await navigateTermsOfUse(navigation.navigate, navigateToOnboarding);
+    }
+  };
+
+  const onPressGetStarted = async () => {
+    const isTermsAccepted = await StorageWrapper.getItem(USE_TERMS);
+    if (!isTermsAccepted) {
+      await termsOfUse();
+    } else {
+      navigateToOnboarding();
+    }
+  };
+
   const renderTabBar = () => <View />;
 
   const onChangeTab = (obj: { i: number }) => {
@@ -191,9 +209,19 @@ export const OnboardingCarousel: React.FC<OnboardingCarouselProps> = ({
     );
   };
 
+  const getCurrentTabKey = useCallback(
+    () => (currentTab === 1 ? 'one' : currentTab === 2 ? 'two' : 'three'),
+    [currentTab],
+  );
+
   const updateNavBar = useCallback(() => {
-    navigation.setOptions(getTransparentOnboardingNavbarOptions(colors));
-  }, [navigation, colors]);
+    navigation.setOptions(
+      getOnboardingCarouselNavbarOptions(
+        colors,
+        onboardingCarouselColors[getCurrentTabKey()].background,
+      ),
+    );
+  }, [navigation, colors, getCurrentTabKey]);
 
   const initialize = useCallback(async () => {
     updateNavBar();
@@ -214,12 +242,20 @@ export const OnboardingCarousel: React.FC<OnboardingCarouselProps> = ({
     updateNavBar();
   }, [colors, updateNavBar]);
 
+  const getBackgroundColor = () => {
+    const key = currentTab === 1 ? 'one' : currentTab === 2 ? 'two' : 'three';
+    return onboardingCarouselColors[key].background;
+  };
+
   return (
     <View
       style={baseStyles.flexGrow}
       testID={OnboardingCarouselSelectorIDs.CONTAINER_ID}
     >
-      <OnboardingScreenWithBg screen={'carousel'}>
+      <OnboardingScreenWithBg
+        screen={'carousel'}
+        backgroundColor={getBackgroundColor()}
+      >
         <ScrollView
           style={baseStyles.flexGrow}
           contentContainerStyle={styles.scroll}
@@ -245,13 +281,12 @@ export const OnboardingCarousel: React.FC<OnboardingCarouselProps> = ({
                         WELCOME_SCREEN_CAROUSEL_TITLE_ID(key),
                       )}
                     >
-                      <Text style={styles.title}>
-                        {strings(`onboarding_carousel.title${key}`)}
-                      </Text>
                       {isTest && (
                         // This Text component is used to grab the App Start Time for our E2E test
                         // ColdStartToOnboardingScreen.feature
                         <Text
+                          variant={TextVariant.BodySM}
+                          color={TextColor.Alternative}
                           style={styles.metricsData}
                           testID={
                             OnboardingCarouselSelectorIDs.APP_START_TIME_ID
@@ -260,9 +295,6 @@ export const OnboardingCarousel: React.FC<OnboardingCarouselProps> = ({
                           {appStartTime}
                         </Text>
                       )}
-                      <Text style={styles.subtitle}>
-                        {strings(`onboarding_carousel.subtitle${key}`)}
-                      </Text>
                     </View>
                     <View style={styles.carouselImageWrapper}>
                       <Image
@@ -272,19 +304,29 @@ export const OnboardingCarousel: React.FC<OnboardingCarouselProps> = ({
                         testID={`carousel-${value}-image`}
                       />
                     </View>
+                    <Text
+                      variant={TextVariant.HeadingSMRegular}
+                      style={styles.title}
+                      color={onboardingCarouselColors[value].color}
+                    >
+                      {strings(`onboarding_carousel.title${key}`)}
+                    </Text>
+                    <Text
+                      variant={TextVariant.BodyMD}
+                      color={onboardingCarouselColors[value].color}
+                      style={styles.subtitle}
+                    >
+                      {strings(`onboarding_carousel.subtitle${key}`)}
+                    </Text>
                   </View>
                 );
               })}
             </ScrollableTabView>
-
             <View style={styles.progressContainer}>
               {[1, 2, 3].map((i) => (
                 <View
                   key={i}
-                  style={[
-                    styles.circle,
-                    currentTab === i ? styles.solidCircle : {},
-                  ]}
+                  style={[styles.bar, currentTab === i ? styles.solidBar : {}]}
                 />
               ))}
             </View>
@@ -294,11 +336,14 @@ export const OnboardingCarousel: React.FC<OnboardingCarouselProps> = ({
           style={styles.ctas}
           testID={OnboardingCarouselSelectorIDs.GET_STARTED_BUTTON_ID}
         >
-          <View style={styles.ctaWrapper}>
-            <StyledButton type={'normal'} onPress={onPressGetStarted}>
-              {strings('onboarding_carousel.get_started')}
-            </StyledButton>
-          </View>
+          <Button
+            variant={ButtonVariants.Primary}
+            label={strings('onboarding_carousel.get_started')}
+            onPress={onPressGetStarted}
+            style={styles.gettingStartedButton}
+            width={ButtonWidthTypes.Full}
+            size={ButtonSize.Lg}
+          />
         </View>
       </OnboardingScreenWithBg>
       <FadeOutOverlay />
diff --git a/app/components/Views/OnboardingSheet/index.tsx b/app/components/Views/OnboardingSheet/index.tsx
new file mode 100644
index 000000000000..fb4bd2dcb4c5
--- /dev/null
+++ b/app/components/Views/OnboardingSheet/index.tsx
@@ -0,0 +1,198 @@
+import React, { useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import BottomSheet, {
+  BottomSheetRef,
+} from '../../../component-library/components/BottomSheets/BottomSheet';
+import Button, {
+  ButtonVariants,
+  ButtonWidthTypes,
+  ButtonSize,
+} from '../../../component-library/components/Buttons/Button';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../component-library/components/Texts/Text';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
+import { strings } from '../../../../locales/i18n';
+import { useTheme } from '../../../util/theme';
+import { OnboardingSelectorIDs } from '../../../../e2e/selectors/Onboarding/Onboarding.selectors';
+
+export interface OnboardingSheetParams {
+  onPressCreate?: () => void;
+  onPressImport?: () => void;
+  onPressContinueWithGoogle?: (createWallet: boolean) => void;
+  onPressContinueWithApple?: (createWallet: boolean) => void;
+  createWallet?: boolean;
+}
+
+export interface OnboardingSheetProps {
+  route: {
+    params: OnboardingSheetParams;
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createStyles = (colors: any) =>
+  StyleSheet.create({
+    divider: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 10,
+    },
+    dividerLine: {
+      flex: 1,
+      height: 1,
+      backgroundColor: colors.border.muted,
+    },
+    bottomSheetContainer: {
+      padding: 16,
+      flexDirection: 'column',
+      rowGap: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    socialBtn: {
+      borderColor: colors.border.muted,
+      borderWidth: 1,
+      color: colors.text.default,
+    },
+    buttonWrapper: {
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+      gap: 16,
+      width: '100%',
+    },
+    buttonLabel: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      columnGap: 8,
+    },
+  });
+
+const OnboardingSheet = (props: OnboardingSheetProps) => {
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const {
+    onPressCreate,
+    onPressImport,
+    onPressContinueWithGoogle,
+    onPressContinueWithApple,
+    createWallet = false,
+  } = props.route.params;
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+
+  const onPressCreateAction = () => {
+    if (onPressCreate) {
+      onPressCreate();
+    }
+  };
+
+  const onPressImportAction = () => {
+    if (onPressImport) {
+      onPressImport();
+    }
+  };
+
+  const onPressContinueWithGoogleAction = () => {
+    if (onPressContinueWithGoogle) {
+      onPressContinueWithGoogle(createWallet);
+    }
+  };
+
+  const onPressContinueWithAppleAction = () => {
+    if (onPressContinueWithApple) {
+      onPressContinueWithApple(createWallet);
+    }
+  };
+
+  return (
+    <BottomSheet ref={sheetRef}>
+      <View style={styles.bottomSheetContainer}>
+        <Text variant={TextVariant.HeadingMD} color={TextColor.Default}>
+          {strings('onboarding.bottom_sheet_title')}
+        </Text>
+        <View style={styles.buttonWrapper}>
+          <Button
+            variant={ButtonVariants.Secondary}
+            overridePressedColor={colors.background.alternative}
+            onPress={onPressContinueWithGoogleAction}
+            testID={OnboardingSelectorIDs.NEW_WALLET_BUTTON}
+            label={
+              <View style={styles.buttonLabel}>
+                <Icon
+                  name={IconName.Google}
+                  size={IconSize.Lg}
+                  color={TextColor.Default}
+                />
+                <Text
+                  variant={TextVariant.BodyMDMedium}
+                  color={TextColor.Default}
+                >
+                  {createWallet
+                    ? strings('onboarding.continue_with_google')
+                    : strings('onboarding.sign_in_with_google')}
+                </Text>
+              </View>
+            }
+            width={ButtonWidthTypes.Full}
+            size={ButtonSize.Lg}
+            style={styles.socialBtn}
+          />
+          <Button
+            variant={ButtonVariants.Secondary}
+            overridePressedColor={colors.background.alternative}
+            onPress={onPressContinueWithAppleAction}
+            testID={OnboardingSelectorIDs.IMPORT_SEED_BUTTON}
+            label={
+              <View style={styles.buttonLabel}>
+                <Icon
+                  name={IconName.Apple}
+                  size={IconSize.Lg}
+                  color={TextColor.Default}
+                />
+                <Text
+                  variant={TextVariant.BodyMDMedium}
+                  color={TextColor.Default}
+                >
+                  {createWallet
+                    ? strings('onboarding.continue_with_apple')
+                    : strings('onboarding.sign_in_with_apple')}
+                </Text>
+              </View>
+            }
+            width={ButtonWidthTypes.Full}
+            size={ButtonSize.Lg}
+            style={styles.socialBtn}
+          />
+        </View>
+        <View style={styles.divider}>
+          <View style={styles.dividerLine} />
+          <Text variant={TextVariant.BodyLGMedium} color={TextColor.Muted}>
+            {strings('onboarding.or')}
+          </Text>
+          <View style={styles.dividerLine} />
+        </View>
+        <View style={styles.buttonWrapper}>
+          <Button
+            variant={ButtonVariants.Secondary}
+            onPress={createWallet ? onPressCreateAction : onPressImportAction}
+            testID={OnboardingSelectorIDs.IMPORT_SEED_BUTTON}
+            label={
+              createWallet
+                ? strings('onboarding.continue_with_srp')
+                : strings('onboarding.import_srp')
+            }
+            width={ButtonWidthTypes.Full}
+            size={ButtonSize.Lg}
+          />
+        </View>
+      </View>
+    </BottomSheet>
+  );
+};
+
+export default OnboardingSheet;
diff --git a/app/components/Views/OnboardingSuccess/index.styles.ts b/app/components/Views/OnboardingSuccess/index.styles.ts
index 9740f0ae4020..e0f889232f60 100644
--- a/app/components/Views/OnboardingSuccess/index.styles.ts
+++ b/app/components/Views/OnboardingSuccess/index.styles.ts
@@ -1,67 +1,118 @@
 import { StyleSheet } from 'react-native';
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-  contentWrapper: {
-    flex: 1,
-    paddingTop: 24,
-    padding: 24,
-  },
-  buttonWrapper: {
-    paddingHorizontal: 24,
-    paddingBottom: 50,
-  },
-  emoji: {
-    textAlign: 'center',
-    fontSize: 65,
-    marginBottom: 16,
-  },
-  title: {
-    paddingTop: 20,
-    fontSize: 24,
-    fontWeight: '700',
-    textAlign: 'center',
-  },
-  description: {
-    fontSize: 14,
-    textAlign: 'left',
-    marginTop: 14,
-    lineHeight: 22,
-    fontWeight: '400',
-  },
-  descriptionBold: {
-    fontSize: 14,
-    textAlign: 'left',
-    fontWeight: '700',
-  },
-  descriptionWrapper: {
-    width: '90%',
-  },
-  button: {
-    marginBottom: 16,
-  },
-  backButton: {
-    padding: 10,
-  },
-  footer: {
-    minHeight: 50,
-  },
-  iconWrapper: {
-    marginRight: 6,
-  },
-  linkWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 16,
-  },
-  footerText: {
-    fontSize: 12,
-    marginTop: 10,
-    lineHeight: 22,
-    fontWeight: '400',
-  },
-});
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createStyles = (colors: any) =>
+  StyleSheet.create({
+    root: {
+      flexGrow: 1,
+      paddingBottom: 32,
+    },
+    contentContainer: {
+      flexDirection: 'column',
+      flexGrow: 1,
+      justifyContent: 'space-between',
+      rowGap: 16,
+    },
+    contentWrapper: {
+      flex: 1,
+      paddingHorizontal: 16,
+    },
+    buttonWrapper: {
+      paddingHorizontal: 16,
+      marginTop: 'auto',
+      flex: 1,
+      justifyContent: 'flex-end',
+      height: '100%',
+      marginBottom: 16,
+    },
+    emoji: {
+      textAlign: 'center',
+      fontSize: 65,
+      marginBottom: 16,
+    },
+    title: {
+      paddingTop: 20,
+      fontSize: 24,
+      fontWeight: '700',
+      textAlign: 'left',
+    },
+    hintWrapper: {
+      flexDirection: 'column',
+      flexGrow: 1,
+      justifyContent: 'space-between',
+      rowGap: 16,
+      paddingHorizontal: 24,
+      marginBottom: 16,
+    },
+    hintContent: {
+      flexDirection: 'column',
+      gap: 16,
+    },
+    hintDescriptionWrapper: {
+      flexDirection: 'column',
+      rowGap: 20,
+    },
+    hintInput: {
+      borderRadius: 8,
+      padding: 16,
+    },
+    textTitle: {
+      marginBottom: 30,
+    },
+    walletReadyImage: {
+      marginHorizontal: 'auto',
+      alignSelf: 'center',
+      width: 200,
+      height: 200,
+    },
+    description: {
+      fontSize: 14,
+      textAlign: 'left',
+      marginTop: 14,
+      lineHeight: 22,
+      fontWeight: '400',
+    },
+    descriptionBold: {
+      fontSize: 14,
+      textAlign: 'left',
+      fontWeight: '700',
+    },
+    descriptionWrapper: {
+      width: '100%',
+      flexDirection: 'column',
+      rowGap: 16,
+      marginTop: 40,
+    },
+    footerWrapper: {
+      marginVertical: 24,
+      flexDirection: 'column',
+      rowGap: 16,
+    },
+    footer: {
+      backgroundColor: colors.background.muted,
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+      borderRadius: 8,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      columnGap: 12,
+    },
+    linkWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      columnGap: 12,
+    },
+    headerLeft: {
+      marginLeft: 16,
+    },
+    hintTextWrapper: {
+      flexDirection: 'column',
+      rowGap: 0,
+      justifyContent: 'flex-start',
+    },
+  });
 
-export default styles;
+export default createStyles;
diff --git a/app/components/Views/OnboardingSuccess/index.tsx b/app/components/Views/OnboardingSuccess/index.tsx
index 9498e7d9e688..eb0758b30f2f 100644
--- a/app/components/Views/OnboardingSuccess/index.tsx
+++ b/app/components/Views/OnboardingSuccess/index.tsx
@@ -1,25 +1,34 @@
-import React, { useCallback, useLayoutEffect, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
 import {
   ScrollView,
   View,
   Linking,
-  Keyboard,
   TouchableOpacity,
-  Text as RNText,
+  Image,
 } from 'react-native';
-import Button from '../../../component-library/components/Buttons/Button';
-import {
+import Button, {
   ButtonSize,
   ButtonVariants,
   ButtonWidthTypes,
-} from '../../../component-library/components/Buttons/Button/Button.types';
+} from '../../../component-library/components/Buttons/Button';
 import Text from '../../../component-library/components/Texts/Text';
-import { TextColor } from '../../../component-library/components/Texts/Text/Text.types';
-import { useNavigation } from '@react-navigation/native';
+import {
+  TextColor,
+  TextVariant,
+} from '../../../component-library/components/Texts/Text/Text.types';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { strings } from '../../../../locales/i18n';
 import Routes from '../../../constants/navigation/Routes';
-import { getTransparentOnboardingNavbarOptions } from '../../UI/Navbar';
-import HintModal from '../../UI/HintModal';
+import {
+  getOnboardingNavbarOptions,
+  getTransparentOnboardingNavbarOptions,
+} from '../../UI/Navbar';
 import { useTheme } from '../../../util/theme';
 import StorageWrapper from '../../../store/storage-wrapper';
 import { SEED_PHRASE_HINTS } from '../../../constants/storage';
@@ -30,11 +39,19 @@ import Icon, {
   IconSize,
 } from '../../../component-library/components/Icons/Icon';
 import AppConstants from '../../../core/AppConstants';
-import Emoji from 'react-native-emoji';
 import { OnboardingSuccessSelectorIDs } from '../../../../e2e/selectors/Onboarding/OnboardingSuccess.selectors';
-import styles from './index.styles';
+import { ToastContext } from '../../../component-library/components/Toast/Toast.context';
+import { ToastVariants } from '../../../component-library/components/Toast/Toast.types';
+import TextField, {
+  TextFieldSize,
+} from '../../../component-library/components/Form/TextField';
+
+const wallet_ready_image = require('../../../images/wallet-ready.png'); // eslint-disable-line
 import importAdditionalAccounts from '../../../util/importAdditionalAccounts';
 import { setCompletedOnboarding } from '../../../actions/onboarding';
+import createStyles from './index.styles';
+import CelebratingFox from '../../../animations/Celebrating_Fox.json';
+import LottieView from 'lottie-react-native';
 
 interface OnboardingSuccessProps {
   onDone: () => void;
@@ -48,14 +65,60 @@ const OnboardingSuccess = ({
   noSRP,
 }: OnboardingSuccessProps) => {
   const navigation = useNavigation();
-  const { colors } = useTheme();
+  const route = useRoute();
+  const { toastRef } = useContext(ToastContext);
+
   const dispatch = useDispatch();
   const [showHint, setShowHint] = useState(false);
   const [hintText, setHintText] = useState('');
+  const [savedHint, setSavedHint] = useState('');
+
+  const { colors, themeAppearance } = useTheme();
+  const styles = createStyles(colors);
+
+  const { showPasswordHint } = (useRoute()?.params as {
+    showPasswordHint?: boolean;
+  }) || { showPasswordHint: false };
+
+  const headerLeft = useCallback(
+    () => (
+      <TouchableOpacity onPress={() => setShowHint(false)}>
+        <Icon
+          name={IconName.ArrowLeft}
+          size={IconSize.Lg}
+          color={colors.text.default}
+          style={styles.headerLeft}
+        />
+      </TouchableOpacity>
+    ),
+    [colors, styles.headerLeft, setShowHint],
+  );
+
+  const headerRight = useCallback(() => <View />, []);
 
   useLayoutEffect(() => {
-    navigation.setOptions(getTransparentOnboardingNavbarOptions(colors));
-  }, [navigation, colors]);
+    navigation.setOptions(
+      showHint
+        ? getOnboardingNavbarOptions(
+            route,
+            {
+              headerLeft,
+              headerRight,
+            },
+            colors,
+            false,
+          )
+        : getTransparentOnboardingNavbarOptions(colors, false),
+    );
+  }, [
+    navigation,
+    colors,
+    route,
+    showHint,
+    styles.headerLeft,
+    headerLeft,
+    headerRight,
+  ]);
 
   const goToDefaultSettings = () => {
     navigation.navigate(Routes.ONBOARDING.SUCCESS_FLOW, {
@@ -67,6 +130,16 @@ const OnboardingSuccess = ({
     Linking.openURL(AppConstants.URLS.WHAT_IS_SRP);
   };
 
+  const fetchHintFromStorage = async () => {
+    const hints = await StorageWrapper.getItem(SEED_PHRASE_HINTS);
+    if (hints) {
+      const parsedHints = JSON.parse(hints);
+      setSavedHint(parsedHints?.manualBackup);
+    } else {
+      setSavedHint('');
+    }
+  };
+
   const handleOnDone = useCallback(() => {
     const onOnboardingSuccess = async () => {
       await importAdditionalAccounts();
@@ -88,48 +161,65 @@ const OnboardingSuccess = ({
         SEED_PHRASE_HINTS,
         JSON.stringify({ ...parsedHints, manualBackup: hintText }),
       );
+    } else {
+      await StorageWrapper.setItem(
+        SEED_PHRASE_HINTS,
+        JSON.stringify({ manualBackup: hintText }),
+      );
     }
+    toastRef?.current?.showToast({
+      variant: ToastVariants.Plain,
+      labelOptions: [
+        {
+          label: strings('onboarding_success.hint_saved_toast'),
+          isBold: true,
+        },
+      ],
+      hasNoTimeout: false,
+    });
+    fetchHintFromStorage();
   };
 
-  const toggleHint = () => {
-    setShowHint((hintVisible) => !hintVisible);
-  };
-
-  const renderHint = () => (
-    <HintModal
-      onConfirm={saveHint}
-      onCancel={toggleHint}
-      modalVisible={showHint}
-      onRequestClose={Keyboard.dismiss}
-      value={hintText}
-      onChangeText={setHintText}
-    />
-  );
+  useEffect(() => {
+    fetchHintFromStorage();
+  }, [showHint]);
 
   const renderContent = () => {
-    if (backedUpSRP) {
+    if (backedUpSRP && !showPasswordHint) {
       return (
         <>
-          <Emoji name="tada" style={styles.emoji} />
-          <Text style={styles.title}>
+          <Text variant={TextVariant.DisplayMD}>
             {strings('onboarding_success.title')}
           </Text>
+          <Image
+            source={wallet_ready_image}
+            resizeMethod={'auto'}
+            style={styles.walletReadyImage}
+          />
           <View style={styles.descriptionWrapper}>
-            <Text style={styles.description}>
+            <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
               {strings('onboarding_success.description')}
-              <Text style={styles.descriptionBold}>
+              <Text variant={TextVariant.BodyMDMedium}>
                 {strings('onboarding_success.description_bold')}
                 {'\n'}
                 {'\n'}
               </Text>
-              <Text color={TextColor.Info} onPress={() => setShowHint(true)}>
+              <Text
+                variant={TextVariant.BodyMDMedium}
+                color={TextColor.Info}
+                onPress={() => setShowHint(true)}
+              >
                 {strings('onboarding_success.leave_hint')}
                 {'\n'}
                 {'\n'}
               </Text>
-              <Text style={styles.description}>
+              <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
                 {strings('onboarding_success.description_continued')}
-                <Text color={TextColor.Info} onPress={handleLink}>
+                <Text
+                  variant={TextVariant.BodyMDMedium}
+                  color={TextColor.Info}
+                  onPress={handleLink}
+                >
                   {' '}
                   {strings('onboarding_success.learn_more')}
                 </Text>
@@ -138,21 +228,25 @@ const OnboardingSuccess = ({
           </View>
         </>
       );
-    } else if (noSRP) {
+    } else if (noSRP && !showPasswordHint) {
       return (
         <>
-          <RNText style={styles.emoji}>🔓</RNText>
-          <Text style={styles.title}>
-            {strings('onboarding_success.no_srp_title')}
+          <Text variant={TextVariant.DisplayMD}>
+            {strings('onboarding_success.remind_later')}
           </Text>
+          <Image
+            source={wallet_ready_image}
+            resizeMethod={'auto'}
+            style={styles.walletReadyImage}
+          />
           <View style={styles.descriptionWrapper}>
-            <Text style={styles.description}>
-              {strings('onboarding_success.no_srp_description')}
-              <Text style={styles.descriptionBold}>
-                {' '}
-                {strings('onboarding_success.description_bold')}
-                {'\n'}
-                {'\n'}
+            <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+              {strings('onboarding_success.remind_later_description')}
+            </Text>
+            <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+              {strings('onboarding_success.remind_later_description2')}
+              <Text variant={TextVariant.BodyMDMedium} onPress={handleLink}>
+                {' ' + strings('onboarding_success.setting_security_privacy')}
               </Text>
             </Text>
           </View>
@@ -161,72 +255,155 @@ const OnboardingSuccess = ({
     }
     return (
       <>
-        <RNText style={styles.emoji}>🎉</RNText>
-        <Text style={styles.title}>
+        <Text variant={TextVariant.DisplayMD} style={styles.textTitle}>
           {strings('onboarding_success.import_title')}
         </Text>
+
+        <LottieView
+          style={styles.walletReadyImage}
+          autoPlay
+          loop
+          source={CelebratingFox}
+          resizeMode="contain"
+        />
+
         <View style={styles.descriptionWrapper}>
-          <Text style={styles.description}>
+          <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
             {strings('onboarding_success.import_description')}
-            <Text style={styles.description}>
-              <Text color={TextColor.Info} onPress={handleLink}>
-                {strings('onboarding_success.learn_how')}{' '}
-              </Text>
-              {strings('onboarding_success.import_description2')}
+          </Text>
+
+          <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+            <Text color={TextColor.Primary} onPress={handleLink}>
+              {strings('onboarding_success.learn_how')}{' '}
             </Text>
+            {strings('onboarding_success.import_description2')}
           </Text>
         </View>
       </>
     );
   };
 
-  const renderFooter = () => {
-    const linkStyle = { paddingTop: backedUpSRP ? 20 : 10 };
-    return (
+  const renderFooter = () => (
+    <View style={styles.footerWrapper}>
+      {showPasswordHint && (
+        <View style={styles.footer}>
+          <TouchableOpacity
+            style={[styles.linkWrapper]}
+            onPress={() => setShowHint(true)}
+          >
+            <View style={styles.row}>
+              <Icon
+                name={IconName.AddSquare}
+                size={IconSize.Lg}
+                color={IconColor.Default}
+              />
+              <View style={styles.hintTextWrapper}>
+                <Text
+                  color={TextColor.Default}
+                  variant={TextVariant.BodyMDMedium}
+                >
+                  {strings('onboarding_success.create_hint')}
+                </Text>
+                {savedHint && (
+                  <Text
+                    variant={TextVariant.BodySM}
+                    color={TextColor.Alternative}
+                  >
+                    {savedHint}
+                  </Text>
+                )}
+              </View>
+            </View>
+            <Icon
+              name={IconName.ArrowRight}
+              size={IconSize.Lg}
+              color={IconColor.Alternative}
+            />
+          </TouchableOpacity>
+        </View>
+      )}
       <View style={styles.footer}>
         <TouchableOpacity
-          style={[styles.linkWrapper, linkStyle]}
+          style={[styles.linkWrapper]}
           onPress={goToDefaultSettings}
         >
-          <View style={styles.iconWrapper}>
+          <View style={styles.row}>
             <Icon
               name={IconName.Setting}
-              size={IconSize.Sm}
-              color={IconColor.Info}
+              size={IconSize.Lg}
+              color={IconColor.Default}
             />
+            <Text color={TextColor.Default} variant={TextVariant.BodyMDMedium}>
+              {strings('onboarding_success.manage_default_settings')}
+            </Text>
           </View>
-          <Text color={TextColor.Info}>
-            {strings('onboarding_success.manage_default_settings')}
-          </Text>
+          <Icon
+            name={IconName.ArrowRight}
+            size={IconSize.Lg}
+            color={IconColor.Alternative}
+          />
         </TouchableOpacity>
-        <Text style={styles.footerText}>
-          {strings('onboarding_success.default_settings_footer')}
-        </Text>
       </View>
-    );
-  };
+    </View>
+  );
 
   return (
     <ScrollView
-      style={styles.root}
+      contentContainerStyle={[styles.root]}
       testID={OnboardingSuccessSelectorIDs.CONTAINER_ID}
     >
-      <View style={styles.contentWrapper}>
-        {renderContent()}
-        {renderFooter()}
-      </View>
-
-      <View style={styles.buttonWrapper}>
-        <Button
-          testID={OnboardingSuccessSelectorIDs.DONE_BUTTON}
-          label={strings('onboarding_success.done')}
-          variant={ButtonVariants.Primary}
-          onPress={handleOnDone}
-          size={ButtonSize.Lg}
-          width={ButtonWidthTypes.Full}
-        />
-      </View>
-      {renderHint()}
+      {!showHint ? (
+        <View style={styles.contentContainer}>
+          <View style={styles.contentWrapper}>
+            {renderContent()}
+            {renderFooter()}
+          </View>
+          <View style={styles.buttonWrapper}>
+            <Button
+              testID={OnboardingSuccessSelectorIDs.DONE_BUTTON}
+              label={strings('onboarding_success.done')}
+              variant={ButtonVariants.Primary}
+              onPress={handleOnDone}
+              size={ButtonSize.Lg}
+              width={ButtonWidthTypes.Full}
+            />
+          </View>
+        </View>
+      ) : (
+        <View style={styles.hintWrapper}>
+          <View style={styles.hintContent}>
+            <Text variant={TextVariant.DisplayMD} color={TextColor.Default}>
+              {strings('onboarding_success.hint_title')}
+            </Text>
+            <View style={styles.hintDescriptionWrapper}>
+              <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+                {strings('onboarding_success.hint_description')}
+              </Text>
+              <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+                {strings('onboarding_success.hint_description2')}
+              </Text>
+            </View>
+            <TextField
+              style={styles.hintInput}
+              placeholder={strings('onboarding_success.hint_placeholder')}
+              value={hintText}
+              onChangeText={setHintText}
+              size={TextFieldSize.Lg}
+              placeholderTextColor={colors.text.muted}
+              autoFocus
+              keyboardAppearance={themeAppearance}
+            />
+          </View>
+          <Button
+            label={strings('onboarding_success.hint_saved')}
+            variant={ButtonVariants.Primary}
+            size={ButtonSize.Lg}
+            width={ButtonWidthTypes.Full}
+            onPress={saveHint}
+            isDisabled={!hintText}
+          />
+        </View>
+      )}
     </ScrollView>
   );
 };
diff --git a/app/components/Views/PasswordHint/index.tsx b/app/components/Views/PasswordHint/index.tsx
new file mode 100644
index 000000000000..9f0de441c971
--- /dev/null
+++ b/app/components/Views/PasswordHint/index.tsx
@@ -0,0 +1,182 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { View, StyleSheet, SafeAreaView } from 'react-native';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../component-library/components/Texts/Text';
+import { strings } from '../../../../locales/i18n';
+import { useNavigation } from '@react-navigation/native';
+import { getNavigationOptionsTitle } from '../../UI/Navbar';
+import { useTheme } from '../../../util/theme';
+import TextField, {
+  TextFieldSize,
+} from '../../../component-library/components/Form/TextField';
+import Button, {
+  ButtonVariants,
+  ButtonSize,
+  ButtonWidthTypes,
+} from '../../../component-library/components/Buttons/Button';
+import { SEED_PHRASE_HINTS } from '../../../constants/storage';
+import StorageWrapper from '../../../store/storage-wrapper';
+import { ToastVariants } from '../../../component-library/components/Toast/Toast.types';
+import { ToastContext } from '../../../component-library/components/Toast/Toast.context';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import HelpText, {
+  HelpTextSeverity,
+} from '../../../component-library/components/Form/HelpText';
+import Engine from '../../../core/Engine';
+
+const PasswordHint = () => {
+  const navigation = useNavigation();
+  const { colors } = useTheme();
+  const [savedHint, setSavedHint] = useState('');
+  const [hintError, setHintError] = useState<string | null>(null);
+  const { toastRef } = useContext(ToastContext);
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      flex: 1,
+    },
+    contentContainer: {
+      flex: 1,
+      padding: 16,
+      flexDirection: 'column',
+      rowGap: 16,
+    },
+    root: {
+      flex: 1,
+      flexDirection: 'column',
+      rowGap: 16,
+    },
+    textContainer: {
+      flexDirection: 'column',
+      rowGap: 32,
+    },
+    buttonContainer: {
+      marginTop: 'auto',
+      marginBottom: 16,
+    },
+  });
+
+  const fetchHintFromStorage = async () => {
+    const hints = await StorageWrapper.getItem(SEED_PHRASE_HINTS);
+    if (hints) {
+      const parsedHints = JSON.parse(hints);
+      setSavedHint(parsedHints?.manualBackup);
+    } else {
+      setSavedHint('');
+    }
+  };
+
+  useEffect(() => {
+    navigation.setOptions(
+      getNavigationOptionsTitle(
+        strings('password_hint.title'),
+        navigation,
+        false,
+        colors,
+      ),
+    );
+    fetchHintFromStorage();
+  }, [navigation, colors]);
+
+  const checkHintMatchesPassword = async (hint: string): Promise<boolean> => {
+    const { KeyringController } = Engine.context;
+    try {
+      await KeyringController.verifyPassword(hint);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const handleSave = async () => {
+    setHintError(null);
+
+    const hintMatches = await checkHintMatchesPassword(savedHint);
+    if (hintMatches) {
+      setHintError(strings('password_hint.error_matches_password'));
+      return;
+    }
+
+    const currentSeedphraseHints = await StorageWrapper.getItem(
+      SEED_PHRASE_HINTS,
+    );
+    if (currentSeedphraseHints) {
+      const parsedHints = JSON.parse(currentSeedphraseHints);
+      await StorageWrapper.setItem(
+        SEED_PHRASE_HINTS,
+        JSON.stringify({ ...parsedHints, manualBackup: savedHint }),
+      );
+    } else {
+      await StorageWrapper.setItem(
+        SEED_PHRASE_HINTS,
+        JSON.stringify({ manualBackup: savedHint }),
+      );
+    }
+
+    toastRef?.current?.showToast({
+      variant: ToastVariants.Plain,
+      labelOptions: [
+        {
+          label: strings('password_hint.saved_toast'),
+          isBold: true,
+        },
+      ],
+      hasNoTimeout: false,
+    });
+
+    navigation.goBack();
+  };
+
+  return (
+    <SafeAreaView style={styles.wrapper}>
+      <KeyboardAwareScrollView
+        contentContainerStyle={styles.contentContainer}
+        resetScrollToCoords={{ x: 0, y: 0 }}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.root}>
+          <Text variant={TextVariant.DisplayMD} color={TextColor.Default}>
+            {strings('password_hint.title')}
+          </Text>
+
+          <View style={styles.textContainer}>
+            <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+              {strings('password_hint.description')}
+            </Text>
+            <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+              {strings('password_hint.description2')}
+            </Text>
+          </View>
+
+          <TextField
+            placeholder={strings('password_hint.placeholder')}
+            size={TextFieldSize.Lg}
+            value={savedHint}
+            onChangeText={(text) => {
+              setSavedHint(text);
+              setHintError(null);
+            }}
+          />
+          {hintError && (
+            <HelpText severity={HelpTextSeverity.Error}>
+              {hintError}
+            </HelpText>
+          )}
+
+          <Button
+            label={strings('password_hint.saved')}
+            variant={ButtonVariants.Primary}
+            size={ButtonSize.Lg}
+            width={ButtonWidthTypes.Full}
+            onPress={handleSave}
+            style={styles.buttonContainer}
+          />
+        </View>
+      </KeyboardAwareScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default PasswordHint;
diff --git a/app/components/Views/ResetPassword/index.js b/app/components/Views/ResetPassword/index.js
index 26cfd8f92190..c3b7b0d7e935 100644
--- a/app/components/Views/ResetPassword/index.js
+++ b/app/components/Views/ResetPassword/index.js
@@ -13,7 +13,6 @@ import {
   Image,
   InteractionManager,
 } from 'react-native';
-import CheckBox from '@react-native-community/checkbox';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import Text, {
   TextColor,
@@ -23,13 +22,12 @@ import StorageWrapper from '../../../store/storage-wrapper';
 import { connect } from 'react-redux';
 import { passwordSet, seedphraseNotBackedUp } from '../../../actions/user';
 import { setLockTime } from '../../../actions/settings';
-import StyledButton from '../../UI/StyledButton';
 import Engine from '../../../core/Engine';
 import Device from '../../../util/device';
 import { fontStyles, baseStyles } from '../../../styles/common';
 import { strings } from '../../../../locales/i18n';
 import { getNavigationOptionsTitle } from '../../UI/Navbar';
-import Icon from 'react-native-vector-icons/FontAwesome';
+// import Icon from 'react-native-vector-icons/FontAwesome';
 import AppConstants from '../../../core/AppConstants';
 import zxcvbn from 'zxcvbn';
 import { ONBOARDING, PREVIOUS_SCREEN } from '../../../constants/navigation';
@@ -37,10 +35,12 @@ import {
   TRUE,
   BIOMETRY_CHOICE_DISABLED,
   PASSCODE_DISABLED,
+  BIOMETRY_CHOICE,
 } from '../../../constants/storage';
 import {
   getPasswordStrengthWord,
   passwordRequirementsMet,
+  MIN_PASSWORD_LENGTH,
 } from '../../../util/password';
 import NotificationManager from '../../../core/NotificationManager';
 import {
@@ -55,6 +55,23 @@ import { recreateVaultWithNewPassword } from '../../../core/Vault';
 import Logger from '../../../util/Logger';
 import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import { ChoosePasswordSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ChoosePassword.selectors';
+import TextField, {
+  TextFieldSize,
+} from '../../../component-library/components/Form/TextField';
+import Button, {
+  ButtonVariants,
+  ButtonSize,
+  ButtonWidthTypes,
+} from '../../../component-library/components/Buttons/Button';
+import Label from '../../../component-library/components/Form/Label';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
+import Routes from '../../../constants/navigation/Routes';
+import { SecurityOptionToggle } from '../../UI/SecurityOptionToggle';
+import NavigationService from '../../../core/NavigationService';
+import ReduxService from '../../../core/redux';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -82,16 +99,14 @@ const createStyles = (colors) =>
       color: colors.text.default,
     },
     confirm_label: {
-      textAlign: 'left',
-      ...fontStyles.normal,
+      marginBottom: 4,
     },
     wrapper: {
       flex: 1,
-      marginBottom: 10,
     },
     scrollableWrapper: {
       flex: 1,
-      paddingHorizontal: 32,
+      padding: 16,
     },
     keyboardScrollableWrapper: {
       flexGrow: 1,
@@ -114,7 +129,8 @@ const createStyles = (colors) =>
       height: 80,
     },
     passwordRequiredContent: {
-      marginBottom: 20,
+      flex: 1,
+      height: '100%',
     },
     content: {
       alignItems: 'flex-start',
@@ -164,6 +180,8 @@ const createStyles = (colors) =>
     },
     field: {
       position: 'relative',
+      flexDirection: 'column',
+      gap: 8,
     },
     input: {
       borderWidth: 1,
@@ -177,8 +195,7 @@ const createStyles = (colors) =>
     },
     ctaWrapper: {
       flex: 1,
-      marginTop: 20,
-      paddingHorizontal: 10,
+      marginTop: 24,
     },
     biometrics: {
       position: 'relative',
@@ -224,12 +241,14 @@ const createStyles = (colors) =>
     },
     confirmPasswordWrapper: {
       flex: 1,
-      padding: 30,
-      paddingTop: 0,
+      padding: 16,
+      flexDirection: 'column',
+      rowGap: 32,
+      justifyContent: 'space-between',
+      height: '100%',
     },
     buttonWrapper: {
       flex: 1,
-      marginTop: 20,
       justifyContent: 'flex-end',
     },
     warningMessageText: {
@@ -239,6 +258,29 @@ const createStyles = (colors) =>
       flex: 1,
       flexDirection: 'row',
       alignSelf: 'center',
+      height: '100%',
+    },
+    root: {
+      flex: 1,
+      height: '100%',
+    },
+    changePasswordContainer: {
+      width: '100%',
+      flexDirection: 'column',
+      gap: 16,
+      marginBottom: 16,
+    },
+    passwordLabel: {
+      marginBottom: -4,
+    },
+    warningButtonsWrapper: {
+      flexDirection: 'row',
+      gap: 16,
+      width: '100%',
+      marginTop: 16,
+    },
+    warningButton: {
+      flex: 1,
     },
   });
 
@@ -281,7 +323,7 @@ class ResetPassword extends PureComponent {
     confirmPassword: '',
     secureTextEntry: true,
     biometryType: null,
-    biometryChoice: false,
+    biometryChoice: true,
     rememberMe: false,
     loading: false,
     error: null,
@@ -289,6 +331,8 @@ class ResetPassword extends PureComponent {
     view: RESET_PASSWORD,
     originalPassword: null,
     ready: true,
+    showPasswordIndex: [0, 1],
+    showPasswordChangeWarning: false,
   };
 
   mounted = true;
@@ -308,6 +352,21 @@ class ResetPassword extends PureComponent {
     );
   };
 
+  unlockWithBiometrics = async () => {
+    // Try to use biometrics to unlock
+    const { availableBiometryType } = await Authentication.getType();
+    if (availableBiometryType) {
+      const biometryChoice = await StorageWrapper.getItem(BIOMETRY_CHOICE);
+      // if (biometryChoice !== '' && biometryChoice === availableBiometryType) {
+      if (biometryChoice) {
+        const credentials = await Authentication.getPassword();
+        if (credentials) {
+          this.tryUnlockWithPassword(credentials.password);
+        }
+      }
+    }
+  };
+
   async componentDidMount() {
     this.updateNavBar();
 
@@ -326,11 +385,13 @@ class ResetPassword extends PureComponent {
           passcodePreviouslyDisabled && passcodePreviouslyDisabled === TRUE
         ),
       });
-    else if (authData.availableBiometryType)
+    else if (authData.availableBiometryType) {
       this.setState({
         biometryType: authData.availableBiometryType,
         biometryChoice: !(previouslyDisabled && previouslyDisabled === TRUE),
       });
+      this.unlockWithBiometrics();
+    }
 
     this.setState(state);
 
@@ -368,7 +429,7 @@ class ResetPassword extends PureComponent {
     const passwordsMatch = password !== '' && password === confirmPassword;
     const canSubmit = passwordsMatch && isSelected;
 
-    if (!canSubmit) return;
+    // if (!canSubmit) return;
     if (loading) return;
     if (!passwordRequirementsMet(password)) {
       Alert.alert('Error', strings('choose_password.password_length_error'));
@@ -378,7 +439,7 @@ class ResetPassword extends PureComponent {
       return;
     }
     try {
-      this.setState({ loading: true });
+      this.setState({ loading: true, showPasswordChangeWarning: false });
 
       await this.recreateVault();
       // Set biometrics for new password
@@ -533,29 +594,30 @@ class ResetPassword extends PureComponent {
         style={styles.keyboardAvoidingView}
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
       >
-        <KeyboardAwareScrollView style={baseStyles.flexGrow} enableOnAndroid>
+        <KeyboardAwareScrollView
+          style={[baseStyles.flexGrow, styles.root]}
+          enableOnAndroid
+        >
           <View style={styles.confirmPasswordWrapper}>
             <View style={[styles.content, styles.passwordRequiredContent]}>
-              <Text
-                variant={TextVariant.DisplayMD}
-                style={styles.confirm_title}
-              >
+              {/* <Text variant={TextVariant.DisplayMD} color={TextColor.Default}>
                 {strings('manual_backup_step_1.confirm_password')}
-              </Text>
-              <View style={styles.text}>
-                <Text
-                  variant={TextVariant.BodyLGMedium}
-                  style={styles.confirm_label}
-                >
-                  {strings('manual_backup_step_1.before_continiuing')}
-                </Text>
-              </View>
-              <TextInput
-                style={styles.confirm_input}
+              </Text> */}
+
+              <Label
+                variant={TextVariant.BodyMDMedium}
+                color={TextColor.Default}
+                style={styles.confirm_label}
+              >
+                {strings('manual_backup_step_1.enter_current_password')}
+              </Label>
+              <TextField
+                size={TextFieldSize.Lg}
                 placeholder={'Password'}
                 placeholderTextColor={colors.text.muted}
                 onChangeText={this.onPasswordChange}
                 secureTextEntry
+                value={this.state.password}
                 onSubmitEditing={this.tryUnlock}
                 testID={ChoosePasswordSelectorsIDs.NEW_PASSWORD_INPUT_ID}
                 keyboardAppearance={themeAppearance}
@@ -567,14 +629,15 @@ class ResetPassword extends PureComponent {
               )}
             </View>
             <View style={styles.buttonWrapper}>
-              <StyledButton
-                containerStyle={styles.button}
-                type={'confirm'}
+              <Button
+                label={strings('manual_backup_step_1.confirm')}
+                variant={ButtonVariants.Primary}
+                size={ButtonSize.Lg}
+                width={ButtonWidthTypes.Full}
                 onPress={this.tryUnlock}
                 testID={ChoosePasswordSelectorsIDs.SUBMIT_BUTTON_ID}
-              >
-                {strings('manual_backup_step_1.confirm')}
-              </StyledButton>
+                isDisabled={!this.state.password}
+              />
             </View>
           </View>
         </KeyboardAwareScrollView>
@@ -582,6 +645,42 @@ class ResetPassword extends PureComponent {
     );
   }
 
+  toggleShowPassword = (index) => {
+    const newShowPasswordIndex = this.state.showPasswordIndex.includes(index)
+      ? this.state.showPasswordIndex.filter((i) => i !== index)
+      : [...this.state.showPasswordIndex, index];
+    this.setState({ showPasswordIndex: newShowPasswordIndex });
+  };
+
+  handleConfirmAction = (styles) => {
+    NavigationService.navigation?.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.SUCCESS_ERROR_SHEET,
+      params: {
+        title: strings('reset_password.warning_password_change_title'),
+        description: strings(
+          'reset_password.warning_password_change_description',
+        ),
+        type: 'error',
+        icon: IconName.RichDanger,
+        secondaryButtonLabel: strings(
+          'reset_password.warning_password_cancel_button',
+        ),
+        primaryButtonLabel: strings(
+          'reset_password.warning_password_change_button',
+        ),
+        onPrimaryButtonPress: this.onPressCreate,
+        closeOnPrimaryButtonPress: true,
+      },
+    });
+  };
+
+  isError = () => {
+    const { password, confirmPassword } = this.state;
+    return (
+      password !== '' && confirmPassword !== '' && password !== confirmPassword
+    );
+  };
+
   renderResetPassword() {
     const {
       isSelected,
@@ -601,6 +700,12 @@ class ResetPassword extends PureComponent {
     const previousScreen = this.props.route.params?.[PREVIOUS_SCREEN];
     const passwordStrengthWord = getPasswordStrengthWord(passwordStrength);
 
+    const isBtnDisabled =
+      password === '' ||
+      confirmPassword === '' ||
+      password !== confirmPassword ||
+      password.length < 8;
+
     return (
       <SafeAreaView style={styles.mainWrapper}>
         {loading ? (
@@ -631,8 +736,11 @@ class ResetPassword extends PureComponent {
               contentContainerStyle={styles.keyboardScrollableWrapper}
               resetScrollToCoords={{ x: 0, y: 0 }}
             >
-              <View testID={ChoosePasswordSelectorsIDs.CONTAINER_ID}>
-                <View style={styles.content}>
+              <View
+                testID={ChoosePasswordSelectorsIDs.CONTAINER_ID}
+                style={styles.changePasswordContainer}
+              >
+                {/* <View style={styles.content}>
                   <Text variant={TextVariant.HeadingLG} style={styles.title}>
                     {strings('reset_password.title')}
                   </Text>
@@ -644,35 +752,44 @@ class ResetPassword extends PureComponent {
                       {strings('reset_password.subtitle')}
                     </Text>
                   </View>
-                </View>
+                </View> */}
                 <View style={styles.field}>
-                  <Text variant={TextVariant.BodySM} style={styles.hintLabel}>
-                    {strings('reset_password.password')}
-                  </Text>
-                  <Text
-                    onPress={this.toggleShowHide}
-                    variant={TextVariant.BodySM}
-                    style={styles.showPassword}
+                  <Label
+                    variant={TextVariant.BodyMDMedium}
+                    color={TextColor.Default}
+                    style={styles.passwordLabel}
                   >
-                    {strings(
-                      `reset_password.${secureTextEntry ? 'show' : 'hide'}`,
-                    )}
-                  </Text>
-                  <TextInput
-                    style={[styles.input, inputWidth]}
+                    {strings('reset_password.password')}
+                  </Label>
+                  <TextField
+                    size={TextFieldSize.Lg}
                     value={password}
                     onChangeText={this.onPasswordChange}
-                    secureTextEntry={secureTextEntry}
-                    placeholder=""
+                    secureTextEntry={this.state.showPasswordIndex.includes(0)}
+                    placeholder={strings(
+                      'reset_password.new_password_placeholder',
+                    )}
                     placeholderTextColor={colors.text.muted}
                     testID={ChoosePasswordSelectorsIDs.NEW_PASSWORD_INPUT_ID}
                     onSubmitEditing={this.jumpToConfirmPassword}
                     returnKeyType="next"
                     autoCapitalize="none"
                     keyboardAppearance={themeAppearance}
+                    endAccessory={
+                      <Icon
+                        name={
+                          this.state.showPasswordIndex.includes(0)
+                            ? IconName.EyeSolid
+                            : IconName.EyeSlashSolid
+                        }
+                        size={IconSize.Lg}
+                        color={colors.icon.default}
+                        onPress={() => this.toggleShowPassword(0)}
+                      />
+                    }
                   />
-                  {(password !== '' && (
-                    <Text variant={TextVariant.BodySM} style={styles.hintLabel}>
+                  {password !== '' && (
+                    <Text variant={TextVariant.BodySM}>
                       {strings('reset_password.password_strength')}
                       <Text
                         variant={TextVariant.BodySM}
@@ -684,49 +801,67 @@ class ResetPassword extends PureComponent {
                         )}
                       </Text>
                     </Text>
-                  )) || (
-                    <Text
-                      variant={TextVariant.BodySM}
-                      style={styles.hintLabel}
-                    />
                   )}
                 </View>
                 <View style={styles.field}>
-                  <Text variant={TextVariant.BodySM} style={styles.hintLabel}>
+                  <Label
+                    variant={TextVariant.BodyMDMedium}
+                    color={TextColor.Default}
+                    style={styles.passwordLabel}
+                  >
                     {strings('reset_password.confirm_password')}
-                  </Text>
-                  <TextInput
+                  </Label>
+                  <TextField
+                    size={TextFieldSize.Lg}
                     ref={this.confirmPasswordInput}
-                    style={[styles.input, inputWidth]}
                     value={confirmPassword}
                     onChangeText={this.setConfirmPassword}
-                    secureTextEntry={secureTextEntry}
-                    placeholder={''}
+                    secureTextEntry={this.state.showPasswordIndex.includes(1)}
+                    placeholder={strings(
+                      'reset_password.confirm_password_placeholder',
+                    )}
                     placeholderTextColor={colors.text.muted}
                     testID={
                       ChoosePasswordSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID
                     }
-                    zasdfasfasf
                     onSubmitEditing={this.onPressCreate}
                     returnKeyType={'done'}
                     autoCapitalize="none"
                     keyboardAppearance={themeAppearance}
-                  />
-                  <View style={styles.showMatchingPasswords}>
-                    {passwordsMatch ? (
+                    endAccessory={
                       <Icon
-                        name="check"
-                        size={16}
-                        color={colors.success.default}
+                        name={
+                          this.state.showPasswordIndex.includes(1)
+                            ? IconName.EyeSolid
+                            : IconName.EyeSlashSolid
+                        }
+                        size={IconSize.Lg}
+                        color={colors.icon.default}
+                        onPress={() => this.toggleShowPassword(1)}
                       />
-                    ) : null}
-                  </View>
-                  <Text variant={TextVariant.BodySM} style={styles.hintLabel}>
-                    {strings('reset_password.must_be_at_least', { number: 8 })}
-                  </Text>
+                    }
+                  />
+                  {!this.isError() ? (
+                    password === '' || password !== confirmPassword ? (
+                      <Text
+                        variant={TextVariant.BodySM}
+                        color={TextColor.Alternative}
+                      >
+                        {strings('choose_password.must_be_at_least', {
+                          number: MIN_PASSWORD_LENGTH,
+                        })}
+                      </Text>
+                    ) : null
+                  ) : (
+                    <Text variant={TextVariant.BodySM} color={TextColor.Error}>
+                      {strings('choose_password.password_error')}
+                    </Text>
+                  )}
                 </View>
-                <View>{this.renderSwitch()}</View>
-                <View style={styles.checkboxContainer}>
+
+                {/* <View>{this.renderSwitch()}</View> */}
+
+                {/* <View style={styles.checkboxContainer}>
                   <CheckBox
                     value={isSelected}
                     onValueChange={this.setSelection}
@@ -757,20 +892,30 @@ class ResetPassword extends PureComponent {
                       {strings('reset_password.learn_more')}
                     </Text>
                   </Text>
-                </View>
+                </View> */}
 
                 {!!error && <Text color={TextColor.Error}>{error}</Text>}
               </View>
 
+              {this.state.biometryType && (
+                <SecurityOptionToggle
+                  title={strings('import_from_seed.unlock_with_face_id')}
+                  value={this.state.biometryChoice}
+                  onOptionUpdated={this.updateBiometryChoice}
+                />
+              )}
+
               <View style={styles.ctaWrapper}>
-                <StyledButton
-                  type={'blue'}
-                  onPress={this.onPressCreate}
+                <Button
+                  label={strings('reset_password.confirm_btn')}
+                  variant={ButtonVariants.Primary}
+                  size={ButtonSize.Lg}
+                  width={ButtonWidthTypes.Full}
+                  onPress={() => this.handleConfirmAction(styles)}
                   testID={ChoosePasswordSelectorsIDs.SUBMIT_BUTTON_ID}
-                  disabled={!canSubmit}
-                >
-                  {strings('reset_password.reset_button')}
-                </StyledButton>
+                  disabled={isBtnDisabled}
+                  isDisabled={isBtnDisabled}
+                />
               </View>
             </KeyboardAwareScrollView>
           </View>
diff --git a/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx b/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
index 7b300b8c6913..2110dca57bd4 100644
--- a/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
+++ b/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
@@ -597,7 +597,7 @@ const RevealPrivateCredential = ({
           <Text style={styles.warningMessageText}>
             {strings(
               `reveal_credential.${privCredentialName}_warning_explanation`,
-            )}
+            )}{' '}
           </Text>
         ) : (
           <Text style={styles.warningMessageText}>
@@ -648,6 +648,7 @@ const RevealPrivateCredential = ({
               renderSRPExplanation()
             )}
           </View>
+
           {renderWarning(credentialSlug)}
 
           <View style={[styles.rowWrapper, styles.stretch]}>
diff --git a/app/components/Views/RevealPrivateCredential/styles.ts b/app/components/Views/RevealPrivateCredential/styles.ts
index 417073733d5b..c82a9cace8ba 100644
--- a/app/components/Views/RevealPrivateCredential/styles.ts
+++ b/app/components/Views/RevealPrivateCredential/styles.ts
@@ -51,6 +51,7 @@ export const createStyles = (theme: Theme) =>
       borderRadius: 8,
       borderWidth: 1,
       borderColor: theme.colors.error.default,
+      color: theme.colors.error.default,
     },
     warningRowWrapper: {
       flex: 1,
diff --git a/app/components/Views/Settings/SecuritySettings/Sections/ChangePassword/ChangePassword.tsx b/app/components/Views/Settings/SecuritySettings/Sections/ChangePassword/ChangePassword.tsx
index 34be7738a84a..cedfa8f200f1 100644
--- a/app/components/Views/Settings/SecuritySettings/Sections/ChangePassword/ChangePassword.tsx
+++ b/app/components/Views/Settings/SecuritySettings/Sections/ChangePassword/ChangePassword.tsx
@@ -23,6 +23,10 @@ const ChangePassword = () => {
     navigation.navigate(Routes.SETTINGS.CHANGE_PASSWORD);
   };
 
+  const showPasswordHint = (): void => {
+    navigation.navigate(Routes.SETTINGS.PASSWORD_HINT);
+  };
+
   return (
     <View
       style={styles.setting}
@@ -40,13 +44,22 @@ const ChangePassword = () => {
       </Text>
       <Button
         label={strings('password_reset.change_password')}
-        variant={ButtonVariants.Secondary}
+        variant={ButtonVariants.Primary}
         onPress={resetPassword}
         style={styles.confirm}
         width={ButtonWidthTypes.Full}
         size={ButtonSize.Lg}
         testID={SecurityPrivacyViewSelectorsIDs.CHANGE_PASSWORD_BUTTON}
       />
+      <Button
+        label={strings('password_reset.password_hint')}
+        variant={ButtonVariants.Secondary}
+        onPress={showPasswordHint}
+        style={styles.confirm}
+        width={ButtonWidthTypes.Full}
+        size={ButtonSize.Lg}
+        testID={SecurityPrivacyViewSelectorsIDs.CHANGE_PASSWORD_BUTTON}
+      />
     </View>
   );
 };
diff --git a/app/components/Views/SuccessErrorSheet/index.styles.ts b/app/components/Views/SuccessErrorSheet/index.styles.ts
new file mode 100644
index 000000000000..ed75ec36d107
--- /dev/null
+++ b/app/components/Views/SuccessErrorSheet/index.styles.ts
@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  statusContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    gap: 16,
+    padding: 16,
+    width: '100%',
+  },
+  statusButton: {
+    flex: 1,
+  },
+  fullWidthButton: {
+    width: '100%',
+  },
+  description: {
+    textAlign: 'center',
+    alignSelf: 'center',
+    width: '100%',
+  },
+  title: {
+    textAlign: 'center',
+    alignSelf: 'center',
+    width: '70%',
+    marginHorizontal: 'auto',
+  },
+  ctaContainer: {
+    flexDirection: 'row',
+    gap: 16,
+    width: '100%',
+    marginTop: 16,
+  },
+  reverseCtaContainer: {
+    flexDirection: 'row-reverse',
+  },
+});
+
+export default styles;
diff --git a/app/components/Views/SuccessErrorSheet/index.tsx b/app/components/Views/SuccessErrorSheet/index.tsx
new file mode 100644
index 000000000000..2a3120e61f05
--- /dev/null
+++ b/app/components/Views/SuccessErrorSheet/index.tsx
@@ -0,0 +1,169 @@
+import React, { useRef } from 'react';
+import { View } from 'react-native';
+import Text from '../../../component-library/components/Texts/Text';
+import {
+  TextColor,
+  TextVariant,
+} from '../../../component-library/components/Texts/Text/Text.types';
+import { useTheme } from '../../../util/theme';
+import styles from './index.styles';
+import Button, {
+  ButtonVariants,
+  ButtonSize,
+  ButtonWidthTypes,
+} from '../../../component-library/components/Buttons/Button';
+import BottomSheet, {
+  BottomSheetRef,
+} from '../../../component-library/components/BottomSheets/BottomSheet';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
+export interface SuccessErrorSheetParams {
+  onClose?: () => void;
+  onButtonPress?: () => void;
+  title: string | React.ReactNode;
+  description: string | React.ReactNode;
+  customButton: React.ReactNode;
+  type: 'success' | 'error';
+  icon: IconName;
+  secondaryButtonLabel?: string;
+  onSecondaryButtonPress?: () => void;
+  primaryButtonLabel?: string;
+  onPrimaryButtonPress?: () => void;
+  closeOnPrimaryButtonPress?: boolean;
+  closeOnSecondaryButtonPress?: boolean;
+  reverseButtonOrder?: boolean;
+}
+
+export interface SuccessErrorSheetProps {
+  route: { params: SuccessErrorSheetParams };
+}
+
+const SuccessErrorSheet = ({ route }: SuccessErrorSheetProps) => {
+  const {
+    onClose,
+    title,
+    description,
+    customButton,
+    type = 'success',
+    icon,
+    secondaryButtonLabel,
+    onSecondaryButtonPress,
+    primaryButtonLabel,
+    onPrimaryButtonPress,
+    closeOnPrimaryButtonPress = false,
+    closeOnSecondaryButtonPress = true,
+    reverseButtonOrder = false,
+  } = route.params;
+
+  const { colors } = useTheme();
+  const sheetRef = useRef<BottomSheetRef>(null);
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const getIcon = () => {
+    if (icon) {
+      return icon;
+    }
+    return type === 'success' ? IconName.SuccessSolid : IconName.CircleX;
+  };
+
+  const handleSecondaryButtonPress = () => {
+    if (onSecondaryButtonPress) {
+      onSecondaryButtonPress();
+    }
+    closeOnSecondaryButtonPress && sheetRef.current?.onCloseBottomSheet();
+  };
+
+  const handlePrimaryButtonPress = () => {
+    if (onPrimaryButtonPress) {
+      onPrimaryButtonPress();
+    }
+    closeOnPrimaryButtonPress && sheetRef.current?.onCloseBottomSheet();
+  };
+
+  return (
+    <BottomSheet ref={sheetRef} onClose={handleClose}>
+      <View style={styles.statusContainer}>
+        <Icon
+          name={getIcon()}
+          size={IconSize.Xl}
+          color={
+            type === 'success' ? colors.success.default : colors.error.default
+          }
+        />
+
+        {typeof title === 'string' ? (
+          <Text
+            variant={TextVariant.HeadingMD}
+            color={TextColor.Default}
+            style={styles.title}
+          >
+            {title}
+          </Text>
+        ) : (
+          title
+        )}
+
+        {typeof description === 'string' ? (
+          <Text
+            variant={TextVariant.BodyMD}
+            color={TextColor.Default}
+            style={styles.description}
+          >
+            {description}
+          </Text>
+        ) : (
+          description
+        )}
+
+        {secondaryButtonLabel || primaryButtonLabel ? (
+          <View
+            style={[
+              styles.ctaContainer,
+              reverseButtonOrder && styles.reverseCtaContainer,
+            ]}
+          >
+            {secondaryButtonLabel && (
+              <Button
+                variant={ButtonVariants.Secondary}
+                label={secondaryButtonLabel}
+                width={ButtonWidthTypes.Full}
+                style={
+                  primaryButtonLabel && secondaryButtonLabel
+                    ? styles.statusButton
+                    : styles.fullWidthButton
+                }
+                onPress={handleSecondaryButtonPress}
+                size={ButtonSize.Lg}
+              />
+            )}
+            {primaryButtonLabel && (
+              <Button
+                variant={ButtonVariants.Primary}
+                label={primaryButtonLabel}
+                width={ButtonWidthTypes.Full}
+                style={
+                  primaryButtonLabel && secondaryButtonLabel
+                    ? styles.statusButton
+                    : styles.fullWidthButton
+                }
+                onPress={handlePrimaryButtonPress}
+                size={ButtonSize.Lg}
+              />
+            )}
+          </View>
+        ) : (
+          customButton
+        )}
+      </View>
+    </BottomSheet>
+  );
+};
+
+export default SuccessErrorSheet;
diff --git a/app/constants/navigation/Routes.ts b/app/constants/navigation/Routes.ts
index d1576586f81e..c52a8c6dbaf5 100644
--- a/app/constants/navigation/Routes.ts
+++ b/app/constants/navigation/Routes.ts
@@ -63,9 +63,12 @@ const Routes = {
     LOGIN: 'Login',
     NAV: 'OnboardingNav',
     MANUAL_BACKUP: {
+      STEP_1: 'ManualBackupStep1',
+      STEP_2: 'ManualBackupStep2',
       STEP_3: 'ManualBackupStep3',
     },
     IMPORT_FROM_SECRET_RECOVERY_PHRASE: 'ImportFromSecretRecoveryPhrase',
+    CHOOSE_PASSWORD: 'ChoosePassword',
   },
   SEND_FLOW: {
     SEND_TO: 'SendTo',
@@ -84,6 +87,7 @@ const Routes = {
     NOTIFICATIONS: 'NotificationsSettings',
     REVEAL_PRIVATE_CREDENTIAL: 'RevealPrivateCredentialView',
     SDK_SESSIONS_MANAGER: 'SDKSessionsManager',
+    PASSWORD_HINT: 'PasswordHint',
     BACKUP_AND_SYNC: 'BackupAndSyncSettings',
   },
   SHEET: {
@@ -119,6 +123,10 @@ const Routes = {
     ///: BEGIN:ONLY_INCLUDE_IF(multi-srp)
     SELECT_SRP: 'SelectSRP',
     ///: END:ONLY_INCLUDE_IF
+    ONBOARDING_SHEET: 'OnboardingSheet',
+    SEEDPHRASE_MODAL: 'SeedphraseModal',
+    SKIP_ACCOUNT_SECURITY_MODAL: 'SkipAccountSecurityModal',
+    SUCCESS_ERROR_SHEET: 'SuccessErrorSheet',
   },
   BROWSER: {
     HOME: 'BrowserTabHome',
@@ -204,6 +212,8 @@ const Routes = {
   },
   ///: END:ONLY_INCLUDE_IF
   FOX_LOADER: 'FoxLoader',
+  SEEDPHRASE_MODAL: 'SeedphraseModal',
+  SET_PASSWORD_FLOW: 'SetPasswordFlow',
   EDIT_ACCOUNT_NAME: 'EditAccountName',
 };
 
diff --git a/app/constants/storage.ts b/app/constants/storage.ts
index 92b5d8ac1f36..4f6be54aa1e5 100644
--- a/app/constants/storage.ts
+++ b/app/constants/storage.ts
@@ -41,7 +41,7 @@ export const ENCRYPTION_LIB = `${prefix}encryptionLib`;
 export const SEED_PHRASE_HINTS = 'seedphraseHints';
 
 export const TRUE = 'true';
-
+export const FALSE = 'false';
 export const AGREED = 'agreed';
 export const DENIED = 'denied';
 export const EXPLORED = 'explored';
diff --git a/app/styles/common.ts b/app/styles/common.ts
index a84dcd99ce31..9b84cbd322c8 100644
--- a/app/styles/common.ts
+++ b/app/styles/common.ts
@@ -18,6 +18,25 @@ export const colors = {
   // https://developer.apple.com/design/human-interface-guidelines/apple-pay
   applePayBlack: '#000000',
   applePayWhite: '#FFFFFF',
+  btnBlack: '#1C1E21',
+};
+
+export const onboardingCarouselColors: Record<
+  string,
+  { color: string; background: string }
+> = {
+  one: {
+    color: '#190066',
+    background: '#E5FFC3',
+  },
+  two: {
+    color: '#3D065F',
+    background: '#FFA680',
+  },
+  three: {
+    color: '#190066',
+    background: '#CCE7FF',
+  },
 };
 
 /**
diff --git a/app/util/termsOfUse/termsOfUse.ts b/app/util/termsOfUse/termsOfUse.ts
index f5d115fc35cf..26128a37393d 100644
--- a/app/util/termsOfUse/termsOfUse.ts
+++ b/app/util/termsOfUse/termsOfUse.ts
@@ -27,8 +27,11 @@ interface TermsOfUseParamsI {
   };
 }
 
-const onConfirmUseTerms = async () => {
+const onConfirmUseTerms = async (onAccept?: () => void) => {
   await StorageWrapper.setItem(USE_TERMS, TRUE);
+  if (onAccept) {
+    onAccept();
+  }
   MetaMetrics.getInstance().trackEvent(
     MetricsEventBuilder.createEventBuilder(
       MetaMetricsEvents.USER_TERMS_ACCEPTED,
@@ -46,6 +49,7 @@ const useTermsDisplayed = () => {
 
 export default async function navigateTermsOfUse(
   navigate: (key: string, params: TermsOfUseParamsI) => void,
+  onAccept?: () => void,
 ) {
   const isUseTermsAccepted = await StorageWrapper.getItem(USE_TERMS);
   if (!isUseTermsAccepted) {
@@ -54,12 +58,12 @@ export default async function navigateTermsOfUse(
       params: {
         containerTestId: TermsOfUseModalSelectorsIDs.CONTAINER,
         buttonTestId: TermsOfUseModalSelectorsIDs.ACCEPT_BUTTON,
-        buttonText: strings('terms_of_use_modal.accept_cta'),
+        buttonText: strings('terms_of_use_modal.agree_cta'),
         checkboxText: strings(
           'terms_of_use_modal.terms_of_use_check_description',
         ),
         headerTitle: strings('terms_of_use_modal.title'),
-        onAccept: onConfirmUseTerms,
+        onAccept: () => onConfirmUseTerms(onAccept),
         footerHelpText: strings('terms_of_use_modal.accept_helper_description'),
         body: {
           source: 'WebView',
diff --git a/e2e/selectors/Settings/SecurityAndPrivacy/SecurityPrivacyView.selectors.js b/e2e/selectors/Settings/SecurityAndPrivacy/SecurityPrivacyView.selectors.js
index dad94b581a5b..5949a53d95f2 100644
--- a/e2e/selectors/Settings/SecurityAndPrivacy/SecurityPrivacyView.selectors.js
+++ b/e2e/selectors/Settings/SecurityAndPrivacy/SecurityPrivacyView.selectors.js
@@ -13,6 +13,7 @@ export const SecurityPrivacyViewSelectorsIDs = {
   BIOMETRICS_TOGGLE: 'biometrics-option',
   DEVICE_PASSCODE_TOGGLE: 'device-passcode-option',
   CLEAR_PRIVACY_DATA_BUTTON: 'clear-privacy-data-button',
+  PROTECT_YOUR_WALLET: 'protect-your-wallet',
 };
 
 export const SecurityPrivacyViewSelectorsText = {
diff --git a/e2e/selectors/wallet/LoginView.selectors.js b/e2e/selectors/wallet/LoginView.selectors.js
index b0f91eed064b..702ad022c425 100644
--- a/e2e/selectors/wallet/LoginView.selectors.js
+++ b/e2e/selectors/wallet/LoginView.selectors.js
@@ -6,6 +6,7 @@ export const LoginViewSelectors = {
   TITLE_ID: 'login-title',
   REMEMBER_ME_SWITCH: 'login-with-remember-me-switch',
   PASSWORD_INPUT: 'login-password-input',
+  SHOW_HINT_BUTTON: 'show-hint-button',
   BIOMETRY_BUTTON: 'biometry-button',
   IOS_TOUCH_ID_ICON: 'ios-touch-id-icon',
   IOS_PASSCODE_ICON: 'ios-passcode-icon',

From 0c82ed6140e8a25eaa314906e52b4cdc7352c36c Mon Sep 17 00:00:00 2001
From: ieow <cwlee0@gmail.com>
Date: Fri, 9 May 2025 20:07:07 +0800
Subject: [PATCH 2/9] feat: ui fix #19

Co-authored-by: smgv <gpatra1996@gmail.com>
---
 .../ImportFromSecretRecoveryPhrase/index.js   |   9 +-
 .../ImportFromSecretRecoveryPhrase/styles.ts  |   6 +-
 .../Views/ManualBackupStep1/index.js          |  49 ++++----
 .../Views/ManualBackupStep1/styles.ts         |   3 +
 .../Views/ManualBackupStep2/index.js          |   5 +-
 .../Views/ManualBackupStep2/styles.ts         |   6 +-
 .../Views/OnboardingSuccess/index.tsx         |  90 +++++++-------
 .../RevealPrivateCredential.tsx               | 113 +++++++++++-------
 .../Views/RevealPrivateCredential/styles.ts   |  11 +-
 9 files changed, 170 insertions(+), 122 deletions(-)

diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
index e20480689bb0..078982d967be 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
@@ -398,6 +398,7 @@ const ImportFromSecretRecoveryPhrase = ({
         setSeedPhrase(newData);
         seedPhraseInputRefs.current[index]?.focus();
       }
+      return;
     }
     if (
       (key === ' ' || key === 'Enter' || key === 'return' || enterPressed) &&
@@ -406,6 +407,7 @@ const ImportFromSecretRecoveryPhrase = ({
     ) {
       setSeedPhrase([...seedPhrase, '']);
       seedPhraseInputRefs.current[index + 1]?.focus();
+      return;
     }
     if (
       (key === ' ' || key === 'Enter' || key === 'return' || enterPressed) &&
@@ -413,8 +415,9 @@ const ImportFromSecretRecoveryPhrase = ({
     ) {
       const firstList = seedPhrase.slice(0, index + 1);
       const secondList = seedPhrase.slice(index + 1);
-      setSeedPhrase([...firstList, '', ...secondList]);
+      setSeedPhrase([...firstList, ' ', ...secondList]);
       seedPhraseInputRefs.current[index + 1]?.focus();
+      return;
     }
   };
 
@@ -690,6 +693,7 @@ const ImportFromSecretRecoveryPhrase = ({
                           onKeyPress={(e) => handleKeyPress(e, 0)}
                           autoComplete="off"
                           blurOnSubmit={false}
+                          autoCapitalize="none"
                         />
                       ) : (
                         <View
@@ -754,10 +758,11 @@ const ImportFromSecretRecoveryPhrase = ({
                                   size={TextFieldSize.Md}
                                   style={[styles.input]}
                                   autoComplete="off"
-                                  textAlignVertical="top"
+                                  textAlignVertical="center"
                                   showSoftInputOnFocus
                                   blurOnSubmit={false}
                                   isError={!isValidSeed(item)}
+                                  autoCapitalize="none"
                                 />
                               </View>
                             )}
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
index 1a0f3ba13b76..bb758d6630c2 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
@@ -136,16 +136,16 @@ const createStyles = (colors: any) =>
     },
     input: {
       paddingVertical: Platform.OS === 'ios' ? 4 : 0,
-      paddingHorizontal: 8,
+      paddingHorizontal: 4,
       borderRadius: 8,
       backgroundColor: colors.background.default,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'flex-start',
       height: 40,
-      fontSize: 14,
+      fontSize: 10,
       color: colors.text.default,
-      ...fontStyles.normal,
+      ...fontStyles.medium,
       width: '100%',
     },
     passwordContainer: {
diff --git a/app/components/Views/ManualBackupStep1/index.js b/app/components/Views/ManualBackupStep1/index.js
index 6b490fa8bc04..44b5e07c53e5 100644
--- a/app/components/Views/ManualBackupStep1/index.js
+++ b/app/components/Views/ManualBackupStep1/index.js
@@ -327,30 +327,31 @@ const ManualBackupStep1 = ({ route, navigation, appTheme }) => {
           </View>
         ) : (
           <View style={styles.seedPhraseContainer}>
-            <View style={styles.seedPhraseInputContainer}>
-              <FlatList
-                data={words}
-                numColumns={3}
-                keyExtractor={(_, index) => index.toString()}
-                renderItem={({ item, index }) => (
-                  <View style={[styles.inputContainer]}>
-                    <Text
-                      variant={TextVariant.BodyMD}
-                      color={TextColor.Alternative}
-                    >
-                      {index + 1}.
-                    </Text>
-                    <Text
-                      variant={TextVariant.BodyMD}
-                      color={TextColor.Default}
-                      key={index}
-                    >
-                      {item}
-                    </Text>
-                  </View>
-                )}
-              />
-            </View>
+            <FlatList
+              data={words}
+              numColumns={3}
+              keyExtractor={(_, index) => index.toString()}
+              renderItem={({ item, index }) => (
+                <View style={[styles.inputContainer]}>
+                  <Text
+                    variant={TextVariant.BodyMD}
+                    color={TextColor.Alternative}
+                  >
+                    {index + 1}.
+                  </Text>
+                  <Text
+                    variant={TextVariant.BodyMD}
+                    color={TextColor.Default}
+                    key={index}
+                    ellipsizeMode="tail"
+                    numberOfLines={1}
+                    style={styles.word}
+                  >
+                    {item}
+                  </Text>
+                </View>
+              )}
+            />
           </View>
         )}
       </View>
diff --git a/app/components/Views/ManualBackupStep1/styles.ts b/app/components/Views/ManualBackupStep1/styles.ts
index a607d6f2c2f6..306a592ac370 100644
--- a/app/components/Views/ManualBackupStep1/styles.ts
+++ b/app/components/Views/ManualBackupStep1/styles.ts
@@ -82,6 +82,9 @@ export const createStyles = (colors: any) =>
       borderRadius: 10,
       minHeight: 232,
     },
+    word: {
+      flex: 1,
+    },
     inputContainer: {
       flexDirection: 'row',
       alignItems: 'center',
diff --git a/app/components/Views/ManualBackupStep2/index.js b/app/components/Views/ManualBackupStep2/index.js
index 9fb107006284..711e586a37c9 100644
--- a/app/components/Views/ManualBackupStep2/index.js
+++ b/app/components/Views/ManualBackupStep2/index.js
@@ -7,6 +7,7 @@ import {
   SafeAreaView,
   FlatList,
   Dimensions,
+  Platform,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import ActionView from '../../UI/ActionView';
@@ -246,7 +247,9 @@ const ManualBackupStep2 = ({ navigation, seedphraseBackedUp, route }) => {
                     styles.gridItem,
                     isEmpty && styles.emptySlot,
                     isSelected && styles.selectedSlotBox,
-                    { width: innerWidth / 3.8 },
+                    {
+                      width: innerWidth / (Platform.OS === 'ios' ? 3.75 : 3.8),
+                    },
                   ]}
                   onPress={() => handleSlotPress(index)}
                 >
diff --git a/app/components/Views/ManualBackupStep2/styles.ts b/app/components/Views/ManualBackupStep2/styles.ts
index a78e3962c087..3b8e14d0927b 100644
--- a/app/components/Views/ManualBackupStep2/styles.ts
+++ b/app/components/Views/ManualBackupStep2/styles.ts
@@ -1,4 +1,4 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet, Dimensions, Platform } from 'react-native';
 import { fontStyles } from '../../../styles/common';
 
 const { height } = Dimensions.get('window');
@@ -91,13 +91,13 @@ const createStyles = (colors: any) =>
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'flex-start',
-      gap: 4,
+      gap: Platform.OS === 'ios' ? 4 : 3,
       height: 40,
       fontSize: 14,
       color: colors.text.default,
       ...fontStyles.normal,
       opacity: 0.5,
-      margin: 4,
+      margin: Platform.OS === 'ios' ? 4 : 3,
     },
     gridContainer: {
       flex: 1,
diff --git a/app/components/Views/OnboardingSuccess/index.tsx b/app/components/Views/OnboardingSuccess/index.tsx
index eb0758b30f2f..c385aee270e8 100644
--- a/app/components/Views/OnboardingSuccess/index.tsx
+++ b/app/components/Views/OnboardingSuccess/index.tsx
@@ -5,13 +5,7 @@ import React, {
   useLayoutEffect,
   useState,
 } from 'react';
-import {
-  ScrollView,
-  View,
-  Linking,
-  TouchableOpacity,
-  Image,
-} from 'react-native';
+import { ScrollView, View, Linking, TouchableOpacity } from 'react-native';
 import Button, {
   ButtonSize,
   ButtonVariants,
@@ -51,6 +45,7 @@ import importAdditionalAccounts from '../../../util/importAdditionalAccounts';
 import { setCompletedOnboarding } from '../../../actions/onboarding';
 import createStyles from './index.styles';
 import CelebratingFox from '../../../animations/Celebrating_Fox.json';
+import SearchingFox from '../../../animations/Searching_Fox.json';
 import LottieView from 'lottie-react-native';
 
 interface OnboardingSuccessProps {
@@ -191,10 +186,12 @@ const OnboardingSuccess = ({
           <Text variant={TextVariant.DisplayMD}>
             {strings('onboarding_success.title')}
           </Text>
-          <Image
-            source={wallet_ready_image}
-            resizeMethod={'auto'}
+          <LottieView
             style={styles.walletReadyImage}
+            autoPlay
+            loop
+            source={SearchingFox}
+            resizeMode="contain"
           />
           <View style={styles.descriptionWrapper}>
             <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
@@ -234,10 +231,12 @@ const OnboardingSuccess = ({
           <Text variant={TextVariant.DisplayMD}>
             {strings('onboarding_success.remind_later')}
           </Text>
-          <Image
-            source={wallet_ready_image}
-            resizeMethod={'auto'}
+          <LottieView
             style={styles.walletReadyImage}
+            autoPlay
+            loop
+            source={SearchingFox}
+            resizeMode="contain"
           />
           <View style={styles.descriptionWrapper}>
             <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
@@ -285,43 +284,42 @@ const OnboardingSuccess = ({
 
   const renderFooter = () => (
     <View style={styles.footerWrapper}>
-      {showPasswordHint && (
-        <View style={styles.footer}>
-          <TouchableOpacity
-            style={[styles.linkWrapper]}
-            onPress={() => setShowHint(true)}
-          >
-            <View style={styles.row}>
-              <Icon
-                name={IconName.AddSquare}
-                size={IconSize.Lg}
-                color={IconColor.Default}
-              />
-              <View style={styles.hintTextWrapper}>
+      <View style={styles.footer}>
+        <TouchableOpacity
+          style={[styles.linkWrapper]}
+          onPress={() => setShowHint(true)}
+        >
+          <View style={styles.row}>
+            <Icon
+              name={IconName.AddSquare}
+              size={IconSize.Lg}
+              color={IconColor.Default}
+            />
+            <View style={styles.hintTextWrapper}>
+              <Text
+                color={TextColor.Default}
+                variant={TextVariant.BodyMDMedium}
+              >
+                {strings('onboarding_success.create_hint')}
+              </Text>
+              {savedHint && (
                 <Text
-                  color={TextColor.Default}
-                  variant={TextVariant.BodyMDMedium}
+                  variant={TextVariant.BodySM}
+                  color={TextColor.Alternative}
                 >
-                  {strings('onboarding_success.create_hint')}
+                  {savedHint}
                 </Text>
-                {savedHint && (
-                  <Text
-                    variant={TextVariant.BodySM}
-                    color={TextColor.Alternative}
-                  >
-                    {savedHint}
-                  </Text>
-                )}
-              </View>
+              )}
             </View>
-            <Icon
-              name={IconName.ArrowRight}
-              size={IconSize.Lg}
-              color={IconColor.Alternative}
-            />
-          </TouchableOpacity>
-        </View>
-      )}
+          </View>
+          <Icon
+            name={IconName.ArrowRight}
+            size={IconSize.Lg}
+            color={IconColor.Alternative}
+          />
+        </TouchableOpacity>
+      </View>
+
       <View style={styles.footer}>
         <TouchableOpacity
           style={[styles.linkWrapper]}
diff --git a/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx b/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
index 2110dca57bd4..fc29fe86b241 100644
--- a/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
+++ b/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
@@ -27,10 +27,10 @@ import Button, {
   ButtonSize,
   ButtonVariants,
 } from '../../../component-library/components/Buttons/Button';
-import Icon, {
-  IconSize,
-  IconName,
-} from '../../../component-library/components/Icons/Icon';
+// import Icon, {
+//   IconSize,
+//   IconName,
+// } from '../../../component-library/components/Icons/Icon';
 import InfoModal from '../../UI/Swaps/components/InfoModal';
 import { ScreenshotDeterrent } from '../../UI/ScreenshotDeterrent';
 import { showAlert } from '../../../actions/alert';
@@ -61,6 +61,18 @@ import { RevealSeedViewSelectorsIDs } from '../../../../e2e/selectors/Settings/S
 
 import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import { useMetrics } from '../../../components/hooks/useMetrics';
+import TextComp, {
+  TextColor,
+  TextVariant,
+} from '../../../component-library/components/Texts/Text';
+
+import Banner, {
+  BannerVariant,
+  BannerAlertSeverity,
+} from '../../../component-library/components/Banners/Banner';
+import TextField, {
+  TextFieldSize,
+} from '../../../component-library/components/Form/TextField';
 
 const PRIVATE_KEY = 'private_key';
 
@@ -458,18 +470,23 @@ const RevealPrivateCredential = ({
 
   const renderPasswordEntry = () => (
     <>
-      <Text style={styles.enterPassword}>
+      <TextComp
+        variant={TextVariant.BodyMDBold}
+        color={TextColor.Default}
+        style={styles.enterPassword}
+      >
         {strings('reveal_credential.enter_password')}
-      </Text>
-      <TextInput
+      </TextComp>
+      <TextField
         style={styles.input}
-        placeholder={'Password'}
+        placeholder={'Make sure nobody is looking'}
         placeholderTextColor={colors.text.muted}
         onChangeText={onPasswordChange}
         secureTextEntry
         onSubmitEditing={tryUnlock}
         keyboardAppearance={themeAppearance}
         testID={RevealSeedViewSelectorsIDs.PASSWORD_INPUT_BOX_ID}
+        size={TextFieldSize.Lg}
       />
       <Text
         style={styles.warningText}
@@ -563,51 +580,64 @@ const RevealPrivateCredential = ({
   );
 
   const renderSRPExplanation = () => (
-    <Text style={styles.normalText}>
+    <TextComp variant={TextVariant.BodySM} color={TextColor.Default}>
       {strings('reveal_credential.seed_phrase_explanation')[0]}{' '}
-      <Text
-        style={[styles.blueText, styles.link]}
+      <TextComp
+        variant={TextVariant.BodySM}
+        color={TextColor.Primary}
         onPress={() => Linking.openURL(SRP_GUIDE_URL)}
       >
         {strings('reveal_credential.seed_phrase_explanation')[1]}
-      </Text>{' '}
+      </TextComp>{' '}
       {strings('reveal_credential.seed_phrase_explanation')[2]}{' '}
-      <Text style={styles.boldText}>
+      <TextComp variant={TextVariant.BodySMBold} color={TextColor.Default}>
         {strings('reveal_credential.seed_phrase_explanation')[3]}
-      </Text>
+      </TextComp>
       {strings('reveal_credential.seed_phrase_explanation')[4]}{' '}
-      <Text
-        style={[styles.blueText, styles.link]}
+      <TextComp
+        variant={TextVariant.BodySM}
+        color={TextColor.Primary}
         onPress={() => Linking.openURL(NON_CUSTODIAL_WALLET_URL)}
       >
         {strings('reveal_credential.seed_phrase_explanation')[5]}{' '}
-      </Text>
+      </TextComp>
       {strings('reveal_credential.seed_phrase_explanation')[6]}{' '}
-      <Text style={styles.boldText}>
+      <TextComp variant={TextVariant.BodySMBold} color={TextColor.Default}>
         {strings('reveal_credential.seed_phrase_explanation')[7]}
-      </Text>
-    </Text>
+      </TextComp>
+    </TextComp>
   );
 
   const renderWarning = (privCredentialName: string) => (
-    <View style={styles.warningWrapper}>
-      <View style={[styles.rowWrapper, styles.warningRowWrapper]}>
-        <Icon style={styles.icon} name={IconName.EyeSlash} size={IconSize.Lg} />
-        {privCredentialName === PRIVATE_KEY ? (
-          <Text style={styles.warningMessageText}>
-            {strings(
-              `reveal_credential.${privCredentialName}_warning_explanation`,
-            )}{' '}
-          </Text>
-        ) : (
-          <Text style={styles.warningMessageText}>
-            {strings('reveal_credential.seed_phrase_warning_explanation')[0]}
-            <Text style={styles.boldText}>
-              {strings('reveal_credential.seed_phrase_warning_explanation')[1]}
-            </Text>
-          </Text>
-        )}
-      </View>
+    <View style={styles.warning}>
+      <Banner
+        variant={BannerVariant.Alert}
+        severity={BannerAlertSeverity.Error}
+        title={
+          privCredentialName === PRIVATE_KEY ? (
+            <TextComp variant={TextVariant.BodyMD} color={TextColor.Default}>
+              {strings(
+                `reveal_credential.${privCredentialName}_warning_explanation`,
+              )}{' '}
+            </TextComp>
+          ) : (
+            <TextComp variant={TextVariant.BodyMD} color={TextColor.Default}>
+              {strings('reveal_credential.seed_phrase_warning_explanation')[0]}
+              <TextComp
+                variant={TextVariant.BodyMDBold}
+                color={TextColor.Default}
+              >
+                {
+                  strings(
+                    'reveal_credential.seed_phrase_warning_explanation',
+                  )[1]
+                }
+              </TextComp>
+            </TextComp>
+          )
+        }
+        style={styles.warning}
+      />
     </View>
   );
 
@@ -636,14 +666,14 @@ const RevealPrivateCredential = ({
         scrollViewTestID={
           RevealSeedViewSelectorsIDs.REVEAL_CREDENTIAL_SCROLL_ID
         }
-        contentContainerStyle={styles.stretch}
+        buttonContainerStyle={styles.ctaContainer}
       >
         <>
           <View style={[styles.rowWrapper, styles.normalText]}>
             {isPrivateKey ? (
-              <Text style={styles.normalText}>
+              <TextComp variant={TextVariant.BodySM} color={TextColor.Default}>
                 {strings(`reveal_credential.private_key_explanation`)}
-              </Text>
+              </TextComp>
             ) : (
               renderSRPExplanation()
             )}
@@ -656,6 +686,7 @@ const RevealPrivateCredential = ({
           </View>
         </>
       </ActionView>
+
       {renderModal(isPrivateKey)}
 
       <ScreenshotDeterrent
diff --git a/app/components/Views/RevealPrivateCredential/styles.ts b/app/components/Views/RevealPrivateCredential/styles.ts
index c82a9cace8ba..a8bab8b86b87 100644
--- a/app/components/Views/RevealPrivateCredential/styles.ts
+++ b/app/components/Views/RevealPrivateCredential/styles.ts
@@ -88,8 +88,7 @@ export const createStyles = (theme: Theme) =>
       color: theme.colors.text.default,
     },
     enterPassword: {
-      marginBottom: 15,
-      color: theme.colors.text.default,
+      marginBottom: 4,
     },
     boldText: {
       color: theme.colors.text.default,
@@ -132,4 +131,12 @@ export const createStyles = (theme: Theme) =>
     stretch: {
       flex: 1,
     },
+    ctaContainer: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      marginTop: 'auto',
+    },
+    warning: {
+      paddingHorizontal: 16,
+    },
   });

From 78d42b3205462e5f25db1c9f5747d22c08063249 Mon Sep 17 00:00:00 2001
From: ieow <cwlee0@gmail.com>
Date: Fri, 9 May 2025 23:30:53 +0800
Subject: [PATCH 3/9] fix: renderSwitch

---
 app/components/Views/ImportFromSecretRecoveryPhrase/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
index 078982d967be..f321dd7b4d26 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
@@ -938,7 +938,7 @@ const ImportFromSecretRecoveryPhrase = ({
                   ) : null}
                 </View>
 
-                {this.renderSwitch()}
+                {renderSwitch()}
               </View>
 
               <View style={styles.learnMoreContainer}>

From 0d585a271add14c0f16dd5ede310f70631a7492d Mon Sep 17 00:00:00 2001
From: smgv <gpatra1996@gmail.com>
Date: Tue, 13 May 2025 09:27:24 +0530
Subject: [PATCH 4/9] Fix: 1. The phrase alignment is upper than the No number
 2. The Get started screen text is off to button

---
 .../Form/TextField/TextField.styles.ts        | 26 +++++++++----------
 .../ImportFromSecretRecoveryPhrase/index.js   |  3 ++-
 .../ImportFromSecretRecoveryPhrase/styles.ts  |  8 +++---
 app/components/Views/Onboarding/index.js      | 20 +++++---------
 4 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/app/component-library/components/Form/TextField/TextField.styles.ts b/app/component-library/components/Form/TextField/TextField.styles.ts
index 01863be6d321..9c63cbbca778 100644
--- a/app/component-library/components/Form/TextField/TextField.styles.ts
+++ b/app/component-library/components/Form/TextField/TextField.styles.ts
@@ -30,20 +30,18 @@ const styleSheet = (params: {
   }
 
   return StyleSheet.create({
-    base: Object.assign(
-      {
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: 8,
-        height: Number(size),
-        borderWidth: 1,
-        borderColor,
-        opacity: isDisabled ? 0.5 : 1,
-        paddingHorizontal: 16,
-        backgroundColor: theme.colors.background.default,
-      } as ViewStyle,
-      style,
-    ) as ViewStyle,
+    base: Object.assign({
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 8,
+      height: Number(size),
+      borderWidth: 1,
+      borderColor,
+      opacity: isDisabled ? 0.5 : 1,
+      paddingHorizontal: 16,
+      backgroundColor: theme.colors.background.default,
+      ...StyleSheet.flatten(style),
+    } as ViewStyle) as ViewStyle,
     startAccessory: {
       marginRight: 8,
     },
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
index f321dd7b4d26..9111ce18f80f 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
@@ -674,7 +674,7 @@ const ImportFromSecretRecoveryPhrase = ({
                     <View style={styles.seedPhraseInnerContainer}>
                       {seedPhrase.length <= 1 ? (
                         <TextInput
-                          textAlignVertical="top"
+                          textAlignVertical="center"
                           label={strings('import_from_seed.srp')}
                           placeholder={strings(
                             'import_from_seed.srp_placeholder',
@@ -763,6 +763,7 @@ const ImportFromSecretRecoveryPhrase = ({
                                   blurOnSubmit={false}
                                   isError={!isValidSeed(item)}
                                   autoCapitalize="none"
+                                  numberOfLines={1}
                                 />
                               </View>
                             )}
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
index bb758d6630c2..ffc4beea3b87 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
@@ -55,7 +55,6 @@ const createStyles = (colors: any) =>
       fontSize: 14,
       color: colors.text.alternative,
       borderWidth: 0,
-      outlineWidth: 0,
       ...fontStyles.normal,
       backgroundColor: colors.background.muted,
       paddingHorizontal: 0,
@@ -136,17 +135,18 @@ const createStyles = (colors: any) =>
     },
     input: {
       paddingVertical: Platform.OS === 'ios' ? 4 : 0,
-      paddingHorizontal: 4,
       borderRadius: 8,
       backgroundColor: colors.background.default,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'flex-start',
       height: 40,
-      fontSize: 10,
+      fontSize: 16,
       color: colors.text.default,
-      ...fontStyles.medium,
+      ...fontStyles.normal,
       width: '100%',
+      textAlignVertical: 'center',
+      paddingHorizontal: 8,
     },
     passwordContainer: {
       flexDirection: 'column',
diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js
index 4524d99e13ff..9a8c5d870190 100644
--- a/app/components/Views/Onboarding/index.js
+++ b/app/components/Views/Onboarding/index.js
@@ -73,18 +73,19 @@ const createStyles = (colors) =>
       paddingVertical: 30,
     },
     foxWrapper: {
-      width: 200,
-      height: 200,
+      width: Device.isLargeDevice() ? 200 : 175,
+      height: Device.isLargeDevice() ? 200 : 175,
       marginVertical: 20,
     },
     image: {
       alignSelf: 'center',
-      width: 200,
-      height: 200,
+      width: Device.isLargeDevice() ? 200 : 175,
+      height: Device.isLargeDevice() ? 200 : 175,
     },
     largeFoxWrapper: {
       alignItems: 'center',
-      marginVertical: 80,
+      paddingTop: Device.isLargeDevice() ? 60 : 40,
+      paddingBottom: Device.isLargeDevice() ? 100 : 40,
     },
     foxImage: {
       width: 145,
@@ -94,12 +95,10 @@ const createStyles = (colors) =>
     title: {
       fontSize: 40,
       lineHeight: 40,
-      marginBottom: 28,
       justifyContent: 'center',
       textAlign: 'center',
       paddingHorizontal: 60,
       fontFamily: 'MMSans-Regular',
-      marginTop: 80,
       color: brandColor,
     },
     ctas: {
@@ -507,12 +506,7 @@ class Onboarding extends PureComponent {
         >
           <View style={styles.wrapper}>
             {loading && (
-              <View style={styles.foxWrapper}>
-                {/* <Image
-                  source={require('../../../images/branding/fox.png')}
-                  style={styles.image}
-                  resizeMethod={'auto'}
-                /> */}
+              <View style={styles.largeFoxWrapper}>
                 <LottieView
                   style={styles.image}
                   autoPlay

From 862ecc6377a83c1a11785348dd56717ae719326c Mon Sep 17 00:00:00 2001
From: smgv <gpatra1996@gmail.com>
Date: Tue, 13 May 2025 16:04:15 +0530
Subject: [PATCH 5/9] Fix: removed commented code and removed const colors to
 common.ts file

---
 .../ModalMandatory/ModalMandatory.styles.ts   |   7 +-
 app/components/Nav/Main/index.js              |  11 --
 app/components/UI/DeleteWalletModal/index.tsx |   5 -
 app/components/UI/DeleteWalletModal/styles.ts |   3 -
 app/components/Views/ChoosePassword/index.js  |   8 --
 .../ImportFromSecretRecoveryPhrase/index.js   |  15 +-
 .../ImportFromSecretRecoveryPhrase/styles.ts  |   1 -
 .../Views/ManualBackupStep2/index.js          |   5 -
 app/components/Views/Onboarding/index.js      | 136 ++----------------
 app/components/Views/ResetPassword/index.js   |  57 --------
 .../RevealPrivateCredential.tsx               |   4 -
 app/styles/common.ts                          |   3 +
 12 files changed, 15 insertions(+), 240 deletions(-)

diff --git a/app/component-library/components/Modals/ModalMandatory/ModalMandatory.styles.ts b/app/component-library/components/Modals/ModalMandatory/ModalMandatory.styles.ts
index ce08e25c093d..1a86cf2232cc 100644
--- a/app/component-library/components/Modals/ModalMandatory/ModalMandatory.styles.ts
+++ b/app/component-library/components/Modals/ModalMandatory/ModalMandatory.styles.ts
@@ -3,10 +3,9 @@ import { StyleSheet, Dimensions, TextStyle } from 'react-native';
 import { Theme } from '../../../../util/theme/models';
 import { getFontFamily, TextVariant } from '../../Texts/Text';
 import { typography } from '@metamask/design-tokens';
+import { colors as commonColors } from '../../../../styles/common';
 
 const screenHeight = Dimensions.get('window').height;
-// eslint-disable-next-line @metamask/design-tokens/color-no-hex
-const bgColor = '#ECEEFF';
 /**
  * Style sheet function for ModalConfirmation component.
  *
@@ -69,14 +68,14 @@ const styleSheet = (params: { theme: Theme }) => {
       width: 40,
       height: 40,
       borderRadius: 40 / 2,
-      backgroundColor: bgColor,
+      backgroundColor: commonColors.modalScrollButton,
       justifyContent: 'center',
       alignItems: 'center',
       zIndex: 10,
       position: 'absolute',
       bottom: 175,
       right: 32,
-      boxShadow: `0px 3px 8px ${bgColor}`,
+      boxShadow: `0px 3px 8px ${commonColors.modalScrollButton}`,
     },
     footerHelpText: {
       marginTop: 16,
diff --git a/app/components/Nav/Main/index.js b/app/components/Nav/Main/index.js
index c2b7ebe1c79e..516df0387ac2 100644
--- a/app/components/Nav/Main/index.js
+++ b/app/components/Nav/Main/index.js
@@ -450,21 +450,10 @@ const Main = (props) => {
         <Notification navigation={props.navigation} />
         <RampOrders />
         <SwapsLiveness />
-        {/* <BackupAlert
-          onDismiss={toggleRemindLater}
-          navigation={props.navigation}
-        /> */}
         {renderDeprecatedNetworkAlert(
           props.chainId,
           props.backUpSeedphraseVisible,
         )}
-        {/* <SkipAccountSecurityModal
-          modalVisible={showRemindLaterModal}
-          onCancel={skipAccountModalSecureNow}
-          onConfirm={skipAccountModalSkip}
-          skipCheckbox={skipCheckbox}
-          toggleSkipCheckbox={toggleSkipCheckbox}
-        /> */}
         <ProtectYourWalletModal navigation={props.navigation} />
         <RootRPCMethodsUI navigation={props.navigation} />
       </View>
diff --git a/app/components/UI/DeleteWalletModal/index.tsx b/app/components/UI/DeleteWalletModal/index.tsx
index 41f9aa4d277a..c7109fea636b 100644
--- a/app/components/UI/DeleteWalletModal/index.tsx
+++ b/app/components/UI/DeleteWalletModal/index.tsx
@@ -64,11 +64,6 @@ const DeleteWalletModal = () => {
 
   const { signOut } = useSignOut();
 
-  // const showConfirmModal = () => {
-  //   setShowConfirm(true);
-  //   LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  // };
-
   const isTextErase = (text: string) => tlc(text) === ERASE_KEYWORD;
 
   const checkErase = (text: string) => {
diff --git a/app/components/UI/DeleteWalletModal/styles.ts b/app/components/UI/DeleteWalletModal/styles.ts
index eb197fafd1a9..ec6f72e0b1dd 100644
--- a/app/components/UI/DeleteWalletModal/styles.ts
+++ b/app/components/UI/DeleteWalletModal/styles.ts
@@ -1,9 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 import { fontStyles } from '../../../styles/common';
 import { StyleSheet } from 'react-native';
-// import Device from '../../../util/device';
-
-// const breakPoint = Device.getDeviceHeight() < 700;
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/app/components/Views/ChoosePassword/index.js b/app/components/Views/ChoosePassword/index.js
index 5f16673dbe90..e12b71d47c0f 100644
--- a/app/components/Views/ChoosePassword/index.js
+++ b/app/components/Views/ChoosePassword/index.js
@@ -579,11 +579,6 @@ class ChoosePassword extends PureComponent {
         {loading ? (
           <View style={styles.loadingWrapper}>
             <View style={styles.foxWrapper}>
-              {/* <Image
-                source={require('../../../images/branding/fox.png')}
-                style={styles.image}
-                resizeMethod={'auto'}
-              /> */}
               <LottieView
                 style={styles.image}
                 autoPlay
@@ -609,7 +604,6 @@ class ChoosePassword extends PureComponent {
           </View>
         ) : (
           <View style={styles.wrapper}>
-            {/* <OnboardingProgress steps={CHOOSE_PASSWORD_STEPS} /> */}
             <KeyboardAwareScrollView
               style={styles.scrollableWrapper}
               contentContainerStyle={styles.keyboardScrollableWrapper}
@@ -775,8 +769,6 @@ class ChoosePassword extends PureComponent {
                   />
                 </View>
 
-                {/* <View>{this.renderSwitch()}</View> */}
-
                 {!!error && <Text color={TextColor.Error}>{error}</Text>}
               </View>
 
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
index 9111ce18f80f..cf092eb69dcd 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
@@ -135,7 +135,6 @@ const ImportFromSecretRecoveryPhrase = ({
   const [learnMore, setLearnMore] = useState(false);
   const [showPasswordIndex, setShowPasswordIndex] = useState([0, 1]);
   const [containerWidth, setContainerWidth] = useState(0);
-  const [showWhatIsSeedPhraseModal, setWhatIsSeedPhraseModal] = useState(false);
 
   const inputPadding = 4;
   const numColumns = 3; // Number of columns
@@ -149,8 +148,6 @@ const ImportFromSecretRecoveryPhrase = ({
     seedPhraseLength !== 21 &&
     seedPhraseLength !== 24;
 
-  // const hideWhatIsSeedPhrase = () => setWhatIsSeedPhraseModal(false);
-
   const handleLayout = (event) => {
     setContainerWidth(event.nativeEvent.layout.width);
   };
@@ -251,10 +248,7 @@ const ImportFromSecretRecoveryPhrase = ({
     };
 
     setBiometricsOption();
-    // Workaround https://github.com/facebook/react-native/issues/9958
-    // setTimeout(() => {
-    //   setInputWidth({ width: '100%' });
-    // }, 100);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentStep]);
 
@@ -503,8 +497,6 @@ const ImportFromSecretRecoveryPhrase = ({
   const onPressImport = async () => {
     const vaultSeed = await parseVaultValue(password, seedPhrase.join(' '));
     const parsedSeed = parseSeedPhrase(vaultSeed || seedPhrase.join(' '));
-    // //Set the seed state with a valid parsed seed phrase (handle vault scenario)
-    // setSeed(parsedSeed);
 
     if (loading) return;
     track(MetaMetricsEvents.WALLET_IMPORT_ATTEMPTED);
@@ -576,11 +568,6 @@ const ImportFromSecretRecoveryPhrase = ({
             });
           },
         });
-        // navigation.reset({
-        //   index: 1,
-        //   routes: [{ name: Routes.ONBOARDING.SUCCESS_FLOW }],
-        // });
-        // await importAdditionalAccounts();
       } catch (error) {
         // Should we force people to enable passcode / biometrics?
         if (error.toString() === PASSCODE_NOT_SET_ERROR) {
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
index ffc4beea3b87..18155866d599 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
@@ -1,7 +1,6 @@
 import { StyleSheet, Platform } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import { fontStyles } from '../../../styles/common';
-// import Device from '../../../util/device';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/app/components/Views/ManualBackupStep2/index.js b/app/components/Views/ManualBackupStep2/index.js
index 711e586a37c9..b660295cf745 100644
--- a/app/components/Views/ManualBackupStep2/index.js
+++ b/app/components/Views/ManualBackupStep2/index.js
@@ -38,9 +38,6 @@ const ManualBackupStep2 = ({ navigation, seedphraseBackedUp, route }) => {
   const backupFlow = route?.params?.backupFlow;
   const settingsBackup = route?.params?.settingsBackup;
 
-  // eslint-disable-next-line no-console
-  console.log('settingsBackup', settingsBackup);
-
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
@@ -279,8 +276,6 @@ const ManualBackupStep2 = ({ navigation, seedphraseBackedUp, route }) => {
     ],
   );
 
-  // const allPlaced = missingWords.every((word) => gridWords.includes(word));
-
   const renderMissingWords = useCallback(
     () => (
       <View style={styles.missingWords}>
diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js
index 9a8c5d870190..e29049828f89 100644
--- a/app/components/Views/Onboarding/index.js
+++ b/app/components/Views/Onboarding/index.js
@@ -29,14 +29,9 @@ import {
 import Device from '../../../util/device';
 import BaseNotification from '../../UI/Notification/BaseNotification';
 import ElevatedView from 'react-native-elevated-view';
-import {
-  loadingSet,
-  loadingUnset,
-  UserActionType,
-} from '../../../actions/user';
+import { loadingSet, loadingUnset } from '../../../actions/user';
 import { storePrivacyPolicyClickedOrClosed as storePrivacyPolicyClickedOrClosedAction } from '../../../reducers/legalNotices';
 import PreventScreenshot from '../../../core/PreventScreenshot';
-import WarningExistingUserModal from '../../UI/WarningExistingUserModal';
 import { PREVIOUS_SCREEN, ONBOARDING } from '../../../constants/navigation';
 import { EXISTING_USER } from '../../../constants/storage';
 import { MetaMetricsEvents } from '../../../core/Analytics';
@@ -48,7 +43,6 @@ import Routes from '../../../constants/navigation/Routes';
 import { selectAccounts } from '../../../selectors/accountTrackerController';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 import LottieView from 'lottie-react-native';
-// import { trace, TraceName, TraceOperation } from '../../../util/trace';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
 import Button, {
   ButtonVariants,
@@ -58,9 +52,6 @@ import Button, {
 
 import fox from '../../../animations/Searching_Fox.json';
 
-const pageBackgroundColor = '#EAC2FF';
-const brandColor = '#3D065F';
-
 const createStyles = (colors) =>
   StyleSheet.create({
     scroll: {
@@ -99,7 +90,7 @@ const createStyles = (colors) =>
       textAlign: 'center',
       paddingHorizontal: 60,
       fontFamily: 'MMSans-Regular',
-      color: brandColor,
+      color: importedColors.gettingStartedTextColor,
     },
     ctas: {
       flex: 1,
@@ -292,11 +283,11 @@ class Onboarding extends PureComponent {
         ? getTransparentOnboardingNavbarOptions(
             colors,
             true,
-            pageBackgroundColor,
+            importedColors.gettingStartedPageBackgroundColor,
           )
         : getTransparentBackOnboardingNavbarOptions(
             colors,
-            pageBackgroundColor,
+            importedColors.gettingStartedPageBackgroundColor,
           ),
     );
   };
@@ -497,7 +488,10 @@ class Onboarding extends PureComponent {
 
     return (
       <View
-        style={[baseStyles.flexGrow, { backgroundColor: pageBackgroundColor }]}
+        style={[
+          baseStyles.flexGrow,
+          { backgroundColor: importedColors.gettingStartedPageBackgroundColor },
+        ]}
         testID={OnboardingSelectorIDs.CONTAINER_ID}
       >
         <ScrollView
@@ -535,120 +529,6 @@ class Onboarding extends PureComponent {
         <FadeOutOverlay />
 
         <View>{this.handleSimpleNotification()}</View>
-
-        {/* <WarningExistingUserModal
-          warningModalVisible={this.state.warningModalVisible}
-          onCancelPress={this.warningCallback}
-          onRequestClose={this.toggleWarningModal}
-          onConfirmPress={this.toggleWarningModal}
-        /> */}
-
-        {/* {this.state.bottomSheetVisible && (
-          <BottomSheet
-            shouldNavigateBack={false}
-            onClose={() =>
-              this.setState({
-                bottomSheetVisible: false,
-                existingWallet: false,
-                createWallet: false,
-              })
-            }
-          >
-            <View style={styles.bottomSheetContainer}>
-              <Text variant={TextVariant.HeadingMD} color={TextColor.Default}>
-                {strings('onboarding.bottom_sheet_title')}
-              </Text>
-              <View style={styles.buttonWrapper}>
-                <Button
-                  variant={ButtonVariants.Secondary}
-                  onPress={this.onPressContinueWithGoogle}
-                  testID={OnboardingSelectorIDs.NEW_WALLET_BUTTON}
-                  label={
-                    <View style={styles.buttonLabel}>
-                      <Icon
-                        name={IconName.Google}
-                        size={IconSize.Lg}
-                        color={TextColor.Default}
-                      />
-                      <Text
-                        variant={TextVariant.BodyMDMedium}
-                        color={TextColor.Default}
-                      >
-                        {this.state.createWallet
-                          ? strings('onboarding.continue_with_google')
-                          : strings('onboarding.sign_in_with_google')}
-                      </Text>
-                    </View>
-                  }
-                  width={ButtonWidthTypes.Full}
-                  size={ButtonSize.Lg}
-                  style={styles.socialBtn}
-                />
-                <Button
-                  variant={ButtonVariants.Secondary}
-                  onPress={this.onPressContinueWithApple}
-                  testID={OnboardingSelectorIDs.IMPORT_SEED_BUTTON}
-                  label={
-                    <View style={styles.buttonLabel}>
-                      <Icon
-                        name={IconName.Apple}
-                        size={IconSize.Lg}
-                        color={TextColor.Default}
-                      />
-                      <Text
-                        variant={TextVariant.BodyMDMedium}
-                        color={TextColor.Default}
-                      >
-                        {this.state.createWallet
-                          ? strings('onboarding.continue_with_apple')
-                          : strings('onboarding.sign_in_with_apple')}
-                      </Text>
-                    </View>
-                  }
-                  width={ButtonWidthTypes.Full}
-                  size={ButtonSize.Lg}
-                  style={styles.socialBtn}
-                />
-              </View>
-              <View style={styles.divider}>
-                <View style={styles.dividerLine} />
-                <Text
-                  variant={TextVariant.BodyLGMedium}
-                  color={TextColor.Muted}
-                >
-                  {strings('onboarding.or')}
-                </Text>
-                <View style={styles.dividerLine} />
-              </View>
-              <View style={styles.buttonWrapper}>
-                <Button
-                  variant={ButtonVariants.Secondary}
-                  onPress={
-                    this.state.createWallet
-                      ? this.onPressCreate
-                      : this.onPressImport
-                  }
-                  testID={OnboardingSelectorIDs.IMPORT_SEED_BUTTON}
-                  label={
-                    this.state.createWallet
-                      ? strings('onboarding.continue_with_srp')
-                      : strings('onboarding.import_srp')
-                  }
-                  width={ButtonWidthTypes.Full}
-                  size={ButtonSize.Lg}
-                />
-              </View>
-            </View>
-          </BottomSheet>
-        )} */}
-
-        {/* <ErrorSheet
-          open={this.state.errorSheetVisible}
-          onClose={() => this.setState({ errorSheetVisible: false })}
-          onNext={() => this.setState({ errorSheetVisible: false })}
-          errorTitle={strings('error_sheet.still_there_title')}
-          errorDescription={strings('error_sheet.still_there_description')}
-        /> */}
       </View>
     );
   }
diff --git a/app/components/Views/ResetPassword/index.js b/app/components/Views/ResetPassword/index.js
index c3b7b0d7e935..40c9636cb826 100644
--- a/app/components/Views/ResetPassword/index.js
+++ b/app/components/Views/ResetPassword/index.js
@@ -6,7 +6,6 @@ import {
   ActivityIndicator,
   Alert,
   View,
-  TextInput,
   SafeAreaView,
   StyleSheet,
   ScrollView,
@@ -27,7 +26,6 @@ import Device from '../../../util/device';
 import { fontStyles, baseStyles } from '../../../styles/common';
 import { strings } from '../../../../locales/i18n';
 import { getNavigationOptionsTitle } from '../../UI/Navbar';
-// import Icon from 'react-native-vector-icons/FontAwesome';
 import AppConstants from '../../../core/AppConstants';
 import zxcvbn from 'zxcvbn';
 import { ONBOARDING, PREVIOUS_SCREEN } from '../../../constants/navigation';
@@ -71,7 +69,6 @@ import Icon, {
 import Routes from '../../../constants/navigation/Routes';
 import { SecurityOptionToggle } from '../../UI/SecurityOptionToggle';
 import NavigationService from '../../../core/NavigationService';
-import ReduxService from '../../../core/redux';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -357,7 +354,6 @@ class ResetPassword extends PureComponent {
     const { availableBiometryType } = await Authentication.getType();
     if (availableBiometryType) {
       const biometryChoice = await StorageWrapper.getItem(BIOMETRY_CHOICE);
-      // if (biometryChoice !== '' && biometryChoice === availableBiometryType) {
       if (biometryChoice) {
         const credentials = await Authentication.getPassword();
         if (credentials) {
@@ -429,7 +425,6 @@ class ResetPassword extends PureComponent {
     const passwordsMatch = password !== '' && password === confirmPassword;
     const canSubmit = passwordsMatch && isSelected;
 
-    // if (!canSubmit) return;
     if (loading) return;
     if (!passwordRequirementsMet(password)) {
       Alert.alert('Error', strings('choose_password.password_length_error'));
@@ -600,10 +595,6 @@ class ResetPassword extends PureComponent {
         >
           <View style={styles.confirmPasswordWrapper}>
             <View style={[styles.content, styles.passwordRequiredContent]}>
-              {/* <Text variant={TextVariant.DisplayMD} color={TextColor.Default}>
-                {strings('manual_backup_step_1.confirm_password')}
-              </Text> */}
-
               <Label
                 variant={TextVariant.BodyMDMedium}
                 color={TextColor.Default}
@@ -740,19 +731,6 @@ class ResetPassword extends PureComponent {
                 testID={ChoosePasswordSelectorsIDs.CONTAINER_ID}
                 style={styles.changePasswordContainer}
               >
-                {/* <View style={styles.content}>
-                  <Text variant={TextVariant.HeadingLG} style={styles.title}>
-                    {strings('reset_password.title')}
-                  </Text>
-                  <View style={styles.text}>
-                    <Text
-                      variant={TextVariant.BodyLGMedium}
-                      style={styles.subtitle}
-                    >
-                      {strings('reset_password.subtitle')}
-                    </Text>
-                  </View>
-                </View> */}
                 <View style={styles.field}>
                   <Label
                     variant={TextVariant.BodyMDMedium}
@@ -859,41 +837,6 @@ class ResetPassword extends PureComponent {
                   )}
                 </View>
 
-                {/* <View>{this.renderSwitch()}</View> */}
-
-                {/* <View style={styles.checkboxContainer}>
-                  <CheckBox
-                    value={isSelected}
-                    onValueChange={this.setSelection}
-                    style={styles.checkbox}
-                    tintColors={{
-                      true: colors.primary.default,
-                      false: colors.border.default,
-                    }}
-                    boxType="square"
-                    testID={
-                      ChoosePasswordSelectorsIDs.IOS_I_UNDERSTAND_BUTTON_ID
-                    }
-                  />
-                  <Text
-                    variant={TextVariant.BodyMD}
-                    style={styles.label}
-                    onPress={this.setSelection}
-                    testID={
-                      ChoosePasswordSelectorsIDs.ANDROID_I_UNDERSTAND_BUTTON_ID
-                    }
-                  >
-                    {strings('reset_password.i_understand')}{' '}
-                    <Text
-                      color={TextColor.Info}
-                      onPress={this.learnMore}
-                      style={styles.learnMore}
-                    >
-                      {strings('reset_password.learn_more')}
-                    </Text>
-                  </Text>
-                </View> */}
-
                 {!!error && <Text color={TextColor.Error}>{error}</Text>}
               </View>
 
diff --git a/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx b/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
index fc29fe86b241..2126cdc6e96e 100644
--- a/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
+++ b/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
@@ -27,10 +27,6 @@ import Button, {
   ButtonSize,
   ButtonVariants,
 } from '../../../component-library/components/Buttons/Button';
-// import Icon, {
-//   IconSize,
-//   IconName,
-// } from '../../../component-library/components/Icons/Icon';
 import InfoModal from '../../UI/Swaps/components/InfoModal';
 import { ScreenshotDeterrent } from '../../UI/ScreenshotDeterrent';
 import { showAlert } from '../../../actions/alert';
diff --git a/app/styles/common.ts b/app/styles/common.ts
index 9b84cbd322c8..17dd6d11d8f8 100644
--- a/app/styles/common.ts
+++ b/app/styles/common.ts
@@ -19,6 +19,9 @@ export const colors = {
   applePayBlack: '#000000',
   applePayWhite: '#FFFFFF',
   btnBlack: '#1C1E21',
+  modalScrollButton: '#ECEEFF',
+  gettingStartedPageBackgroundColor: '#EAC2FF',
+  gettingStartedTextColor: '#3D065F',
 };
 
 export const onboardingCarouselColors: Record<

From 31f9a910036c29a11e3d391766da10b1c853f952 Mon Sep 17 00:00:00 2001
From: smgv <gpatra1996@gmail.com>
Date: Tue, 13 May 2025 16:15:16 +0530
Subject: [PATCH 6/9] Fix: ActionViewUI snapshot updated

---
 .../__snapshots__/index.test.tsx.snap         | 275 ++++++++++--------
 1 file changed, 153 insertions(+), 122 deletions(-)

diff --git a/app/components/UI/ActionView/__snapshots__/index.test.tsx.snap b/app/components/UI/ActionView/__snapshots__/index.test.tsx.snap
index 7addc06cab02..df11b1bf8353 100644
--- a/app/components/UI/ActionView/__snapshots__/index.test.tsx.snap
+++ b/app/components/UI/ActionView/__snapshots__/index.test.tsx.snap
@@ -3,9 +3,16 @@
 exports[`ActionView should render correctly 1`] = `
 <View
   style={
-    {
-      "flex": 1,
-    }
+    [
+      {
+        "flex": 1,
+      },
+      {
+        "flex": 1,
+        "flexDirection": "column",
+        "height": "100%",
+      },
+    ]
   }
 >
   <RCTScrollView
@@ -47,170 +54,194 @@ exports[`ActionView should render correctly 1`] = `
           "flex": 1,
         },
         undefined,
+        {
+          "flex": 1,
+          "flexDirection": "column",
+          "height": "100%",
+        },
       ]
     }
     update={[Function]}
     viewIsInsideTabBar={false}
   >
     <View>
-      <View
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessible={true}
-        focusable={true}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-      >
-        <Text>
-          Confirm
-        </Text>
-      </View>
       <View
         style={
           {
-            "flex": 0,
-            "flexDirection": "row",
-            "paddingHorizontal": 24,
-            "paddingVertical": 16,
+            "flex": 1,
+            "flexDirection": "column",
+            "justifyContent": "space-between",
           }
         }
       >
-        <TouchableOpacity
-          accessibilityRole="button"
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
-          activeOpacity={0.2}
-          disabled={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+        >
+          <Text>
+            Confirm
+          </Text>
+        </View>
+        <View
           style={
             [
-              [
-                {
-                  "borderRadius": 100,
-                  "justifyContent": "center",
-                  "padding": 15,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                  "borderColor": "#686e7d",
-                  "borderWidth": 1,
-                },
-                [
-                  {
-                    "flex": 1,
-                  },
-                  {
-                    "marginRight": 8,
-                  },
-                ],
-              ],
-              null,
+              {
+                "flexDirection": "row",
+                "justifyContent": "flex-end",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "width": "100%",
+              },
+              undefined,
             ]
           }
-          testID=""
         >
-          <Text
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessible={true}
+            activeOpacity={0.2}
+            disabled={false}
             style={
               [
-                {
-                  "color": "#007aff",
-                  "fontSize": 17,
-                  "fontWeight": "500",
-                  "textAlign": "center",
-                },
-                null,
                 [
                   {
-                    "fontFamily": "CentraNo1-Bold",
-                    "fontSize": 14,
-                    "fontWeight": "600",
-                    "textAlign": "center",
+                    "borderRadius": 100,
+                    "justifyContent": "center",
+                    "padding": 15,
                   },
                   {
-                    "color": "#686e7d",
+                    "backgroundColor": "#ffffff",
+                    "borderColor": "#686e7d",
+                    "borderWidth": 1,
                   },
-                  undefined,
+                  [
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "flex-end",
+                    },
+                    {
+                      "marginRight": 8,
+                    },
+                  ],
                 ],
                 null,
               ]
             }
+            testID=""
           >
-            Cancel
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          accessibilityRole="button"
-          accessible={true}
-          activeOpacity={0.2}
-          disabled={false}
-          style={
-            [
-              [
-                {
-                  "borderRadius": 100,
-                  "justifyContent": "center",
-                  "padding": 15,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                  "borderColor": "#4459ff",
-                  "borderWidth": 1,
-                },
+            <Text
+              style={
                 [
                   {
-                    "flex": 1,
-                  },
-                  {
-                    "marginLeft": 8,
+                    "color": "#007aff",
+                    "fontSize": 17,
+                    "fontWeight": "500",
+                    "textAlign": "center",
                   },
-                  {},
-                  {},
-                ],
-              ],
-              null,
-            ]
-          }
-          testID=""
-        >
-          <Text
+                  null,
+                  [
+                    {
+                      "fontFamily": "CentraNo1-Bold",
+                      "fontSize": 14,
+                      "fontWeight": "600",
+                      "textAlign": "center",
+                    },
+                    {
+                      "color": "#686e7d",
+                    },
+                    undefined,
+                  ],
+                  null,
+                ]
+              }
+            >
+              Cancel
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessible={true}
+            activeOpacity={0.2}
+            disabled={false}
             style={
               [
-                {
-                  "color": "#007aff",
-                  "fontSize": 17,
-                  "fontWeight": "500",
-                  "textAlign": "center",
-                },
-                null,
                 [
                   {
-                    "fontFamily": "CentraNo1-Bold",
-                    "fontSize": 14,
-                    "fontWeight": "600",
-                    "textAlign": "center",
+                    "borderRadius": 100,
+                    "justifyContent": "center",
+                    "padding": 15,
                   },
                   {
-                    "color": "#4459ff",
+                    "backgroundColor": "transparent",
+                    "borderColor": "#4459ff",
+                    "borderWidth": 1,
                   },
-                  undefined,
+                  [
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "flex-end",
+                    },
+                    {
+                      "marginLeft": 8,
+                      "marginTop": "auto",
+                    },
+                    {},
+                    {},
+                  ],
                 ],
                 null,
               ]
             }
+            testID=""
           >
-            Confirm
-          </Text>
-        </TouchableOpacity>
+            <Text
+              style={
+                [
+                  {
+                    "color": "#007aff",
+                    "fontSize": 17,
+                    "fontWeight": "500",
+                    "textAlign": "center",
+                  },
+                  null,
+                  [
+                    {
+                      "fontFamily": "CentraNo1-Bold",
+                      "fontSize": 14,
+                      "fontWeight": "600",
+                      "textAlign": "center",
+                    },
+                    {
+                      "color": "#4459ff",
+                    },
+                    undefined,
+                  ],
+                  null,
+                ]
+              }
+            >
+              Confirm
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
     </View>
   </RCTScrollView>

From 301aea9622f60392c13f26de0bdd4fcb535cd2f7 Mon Sep 17 00:00:00 2001
From: smgv <gpatra1996@gmail.com>
Date: Tue, 13 May 2025 16:17:33 +0530
Subject: [PATCH 7/9] Fix: AccountBackupStep1B Snapshot Updated

---
 .../__snapshots__/index.test.tsx.snap         | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/components/Views/AccountBackupStep1B/__snapshots__/index.test.tsx.snap b/app/components/Views/AccountBackupStep1B/__snapshots__/index.test.tsx.snap
index cbb197aa8548..169e40494785 100644
--- a/app/components/Views/AccountBackupStep1B/__snapshots__/index.test.tsx.snap
+++ b/app/components/Views/AccountBackupStep1B/__snapshots__/index.test.tsx.snap
@@ -106,7 +106,24 @@ exports[`AccountBackupStep1B should render correctly 1`] = `
               pointerEvents="box-none"
               style={
                 {
-                  "marginHorizontal": 16,
+                  "alignItems": "flex-start",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "top": 0,
+                }
+              }
+            >
+              <View />
+            </View>
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                {
+                  "marginHorizontal": 72,
                   "opacity": 1,
                 }
               }
@@ -133,23 +150,6 @@ exports[`AccountBackupStep1B should render correctly 1`] = `
                 />
               </View>
             </View>
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                {
-                  "alignItems": "flex-end",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <View />
-            </View>
           </View>
         </View>
       </View>

From e30598dac342164066d3b9c2ac9e032b02caa495 Mon Sep 17 00:00:00 2001
From: smgv <gpatra1996@gmail.com>
Date: Tue, 13 May 2025 16:34:48 +0530
Subject: [PATCH 8/9] Fix: Import SRP TextInput Overflow and SuccessErrorSheet
 Description Style changes to left align

---
 app/components/Views/ImportFromSecretRecoveryPhrase/index.js  | 2 +-
 app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts | 4 ++--
 app/components/Views/SuccessErrorSheet/index.styles.ts        | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
index cf092eb69dcd..5a0fa84e4c0f 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
@@ -136,7 +136,7 @@ const ImportFromSecretRecoveryPhrase = ({
   const [showPasswordIndex, setShowPasswordIndex] = useState([0, 1]);
   const [containerWidth, setContainerWidth] = useState(0);
 
-  const inputPadding = 4;
+  const inputPadding = Platform.OS === 'ios' ? 4 : 3;
   const numColumns = 3; // Number of columns
 
   const seedPhraseLength = seedPhrase.filter((item) => item !== '').length;
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
index 18155866d599..76e7ca726581 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
@@ -35,7 +35,7 @@ const createStyles = (colors: any) =>
       minHeight: 264,
     },
     seedPhraseInnerContainer: {
-      paddingHorizontal: 16,
+      paddingHorizontal: Platform.OS === 'ios' ? 16 : 14,
       paddingBottom: 16,
     },
     seedPhraseDefaultInputPlaceholder: {
@@ -143,7 +143,7 @@ const createStyles = (colors: any) =>
       fontSize: 16,
       color: colors.text.default,
       ...fontStyles.normal,
-      width: '100%',
+      flex: 1,
       textAlignVertical: 'center',
       paddingHorizontal: 8,
     },
diff --git a/app/components/Views/SuccessErrorSheet/index.styles.ts b/app/components/Views/SuccessErrorSheet/index.styles.ts
index ed75ec36d107..e922766909a7 100644
--- a/app/components/Views/SuccessErrorSheet/index.styles.ts
+++ b/app/components/Views/SuccessErrorSheet/index.styles.ts
@@ -16,8 +16,8 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   description: {
-    textAlign: 'center',
-    alignSelf: 'center',
+    textAlign: 'left',
+    alignSelf: 'flex-start',
     width: '100%',
   },
   title: {

From 6c0087ea9e3565bfac578166f9d853774ffb6285 Mon Sep 17 00:00:00 2001
From: smgv <gpatra1996@gmail.com>
Date: Tue, 13 May 2025 16:45:04 +0530
Subject: [PATCH 9/9] Fix: SRP TextInput Overflow

---
 app/components/Views/ManualBackupStep2/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Views/ManualBackupStep2/index.js b/app/components/Views/ManualBackupStep2/index.js
index b660295cf745..5142a1d4c149 100644
--- a/app/components/Views/ManualBackupStep2/index.js
+++ b/app/components/Views/ManualBackupStep2/index.js
@@ -245,7 +245,7 @@ const ManualBackupStep2 = ({ navigation, seedphraseBackedUp, route }) => {
                     isEmpty && styles.emptySlot,
                     isSelected && styles.selectedSlotBox,
                     {
-                      width: innerWidth / (Platform.OS === 'ios' ? 3.75 : 3.8),
+                      width: innerWidth / (Platform.OS === 'ios' ? 3.75 : 3.85),
                     },
                   ]}
                   onPress={() => handleSlotPress(index)}