diff --git a/apps/browser-extension-wallet/.env.defaults b/apps/browser-extension-wallet/.env.defaults
index f31c60662..0296fc349 100644
--- a/apps/browser-extension-wallet/.env.defaults
+++ b/apps/browser-extension-wallet/.env.defaults
@@ -22,7 +22,6 @@ USE_HIDE_MY_BALANCE=true
 USE_ADA_HANDLE=true
 USE_DATA_CHECK=false
 USE_POSTHOG_ANALYTICS=true
-USE_COMBINED_PASSWORD_NAME_STEP_COMPONENT=false
 # TODO Remove redundant feature flags when Trezor and Ledger are supported (https://input-output.atlassian.net/browse/LW-9480)
 USE_MULTI_DELEGATION_STAKING_LEDGER=false
 USE_MULTI_DELEGATION_STAKING_TREZOR=false
diff --git a/apps/browser-extension-wallet/.env.developerpreview b/apps/browser-extension-wallet/.env.developerpreview
index 80566178a..402fe136f 100644
--- a/apps/browser-extension-wallet/.env.developerpreview
+++ b/apps/browser-extension-wallet/.env.developerpreview
@@ -23,7 +23,6 @@ USE_MULTI_DELEGATION_STAKING=true
 USE_ADA_HANDLE=false
 USE_DATA_CHECK=false
 USE_POSTHOG_ANALYTICS=true
-USE_COMBINED_PASSWORD_NAME_STEP_COMPONENT=false
 USE_MULTI_DELEGATION_STAKING_ACTIVITY=false
 
 USE_POSTHOG_ANALYTICS_FOR_OPTED_OUT=false
diff --git a/apps/browser-extension-wallet/.env.example b/apps/browser-extension-wallet/.env.example
index 740202ad9..358e8ed7b 100644
--- a/apps/browser-extension-wallet/.env.example
+++ b/apps/browser-extension-wallet/.env.example
@@ -25,7 +25,6 @@ USE_HANDLE_AB=false
 USE_DATA_CHECK=false
 USE_POSTHOG_ANALYTICS=true
 USE_POSTHOG_ANALYTICS_FOR_OPTED_OUT=false
-USE_COMBINED_PASSWORD_NAME_STEP_COMPONENT=false
 USE_MULTI_DELEGATION_STAKING_ACTIVITY=true
 USE_MULTI_DELEGATION_STAKING_GRID_VIEW=false
 USE_ROS_STAKING_COLUMN=false
diff --git a/apps/browser-extension-wallet/src/lib/translations/en.json b/apps/browser-extension-wallet/src/lib/translations/en.json
index 2596248f3..d5e5ef609 100644
--- a/apps/browser-extension-wallet/src/lib/translations/en.json
+++ b/apps/browser-extension-wallet/src/lib/translations/en.json
@@ -1283,10 +1283,20 @@
       "passphraseInfo3": "Find out more.",
       "passphraseError": "Make sure the words of your recovery phrase are in the right order and spelled correctly."
     },
-    "walletSetupMnemonicIntroStep": {
+    "walletSetupMnemonicStepRevamp": {
+      "writePassphraseTitle": "Save your recovery phrase",
+      "enterPassphrase": "Enter your secret passphrase",
+      "enterPassphraseDescription": "Please enter each word of your recovery phrase in the right order to verify it and recover your wallet.",
+      "body": "Now let's check you've got the correct secret passphrase. Enter each word of your passphrase in the right order to verify it.",
+      "writePassphraseSubtitle1": "Consider your recovery phrase as the master key to your wallet.",
+      "writePassphraseSubtitle2": "Watch video.",
+      "passphraseError": "Make sure the words of your recovery phrase are in the right order and spelled correctly."
+    },
+    "mnemonicVideoPopupContent": {
       "title": "Keeping your wallet secure",
-      "description": "Consider your recovery phrase as the master key to your wallet, and the only way to access your funds.",
-      "link": "Read More."
+      "description": "Learn about what is a recovery phrase, and how to keep it safe from the video below.",
+      "link": "Read More.",
+      "closeButton": "Got it"
     },
     "walletSetupMnemonicVerificationStep": {
       "enterPassphrase": "Enter your secret passphrase"
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx
index eec47d192..dbc60ed77 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx
+++ b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx
@@ -9,7 +9,7 @@ import {
   WalletSetupCreationStep,
   WalletSetupFinalStep,
   WalletSetupLegalStep,
-  WalletSetupMnemonicIntroStep,
+  MnemonicVideoPopupContent,
   WalletSetupNamePasswordStep,
   WalletSetupPasswordStep,
   WalletSetupRecoveryPhraseLengthStep,
@@ -44,23 +44,12 @@ import { isScriptAddress } from '@cardano-sdk/wallet';
 import { filter, firstValueFrom } from 'rxjs';
 import { useWalletStore } from '@src/stores';
 
-const isCombinedPasswordNameStepEnabled = process.env.USE_COMBINED_PASSWORD_NAME_STEP_COMPONENT === 'true';
-const walletSetupWizardForABTest = {
-  ...walletSetupWizard,
-  [WalletSetupSteps.PreMnemonic]: { ...walletSetupWizard['pre-mnemonic'], prev: WalletSetupSteps.Register },
-  [WalletSetupSteps.RecoveryPhraseLength]: {
-    ...walletSetupWizard['recovery-phrase-length'],
-    prev: WalletSetupSteps.Register
-  },
-  [WalletSetupSteps.Mnemonic]: { ...walletSetupWizard.mnemonic, prev: WalletSetupSteps.Register }
-};
-
 const WalletSetupModeStep = React.lazy(() =>
   import('@lace/core').then((module) => ({ default: module.WalletSetupModeStep }))
 );
 
-const WalletSetupMnemonicStep = React.lazy(() =>
-  import('@lace/core').then((module) => ({ default: module.WalletSetupMnemonicStep }))
+const WalletSetupMnemonicStepRevamp = React.lazy(() =>
+  import('@lace/core').then((module) => ({ default: module.WalletSetupMnemonicStepRevamp }))
 );
 
 const WalletSetupMnemonicVerificationStep = React.lazy(() =>
@@ -145,14 +134,13 @@ export const WalletSetupWizard = ({
   };
 
   const walletSetupMnemonicStepTranslations = {
-    writePassphrase: t('core.walletSetupMnemonicStep.writePassphrase'),
-    body: t('core.walletSetupMnemonicStep.body'),
-    enterPassphrase: t('core.walletSetupMnemonicStep.enterPassphrase'),
-    enterPassphraseDescription: t('core.walletSetupMnemonicStep.enterPassphraseDescription'),
-    passphraseInfo1: t('core.walletSetupMnemonicStep.passphraseInfo1'),
-    passphraseInfo2: t('core.walletSetupMnemonicStep.passphraseInfo2'),
-    passphraseInfo3: t('core.walletSetupMnemonicStep.passphraseInfo3'),
-    passphraseError: t('core.walletSetupMnemonicStep.passphraseError')
+    writePassphraseTitle: t('core.walletSetupMnemonicStepRevamp.writePassphraseTitle'),
+    body: t('core.walletSetupMnemonicStepRevamp.body'),
+    enterPassphrase: t('core.walletSetupMnemonicStepRevamp.enterPassphrase'),
+    enterPassphraseDescription: t('core.walletSetupMnemonicStepRevamp.enterPassphraseDescription'),
+    writePassphraseSubtitle1: t('core.walletSetupMnemonicStepRevamp.writePassphraseSubtitle1'),
+    writePassphraseSubtitle2: t('core.walletSetupMnemonicStepRevamp.writePassphraseSubtitle2'),
+    passphraseError: t('core.walletSetupMnemonicStepRevamp.passphraseError')
   };
 
   const walletSetupModeStepTranslations = {
@@ -179,10 +167,11 @@ export const WalletSetupWizard = ({
     followDiscord: t('core.walletSetupFinalStep.followDiscord')
   };
 
-  const walletSetupMnemonicIntroStepTranslations = {
-    title: t('core.walletSetupMnemonicIntroStep.title'),
-    description: t('core.walletSetupMnemonicIntroStep.description'),
-    linkText: t('core.walletSetupMnemonicIntroStep.link')
+  const mnemonicVideoPopupContentTranslations = {
+    title: t('core.mnemonicVideoPopupContent.title'),
+    description: t('core.mnemonicVideoPopupContent.description'),
+    linkText: t('core.mnemonicVideoPopupContent.link'),
+    closeButton: t('core.mnemonicVideoPopupContent.closeButton')
   };
 
   const walletSetupRegisterStepTranslations = {
@@ -228,9 +217,7 @@ export const WalletSetupWizard = ({
   }, [currentStep, setCurrentStep]);
 
   const moveBack = () => {
-    const prevStep = isCombinedPasswordNameStepEnabled
-      ? walletSetupWizardForABTest[currentStep].prev
-      : walletSetupWizard[currentStep].prev;
+    const prevStep = walletSetupWizard[currentStep].prev;
 
     if (prevStep) {
       setCurrentStep(prevStep);
@@ -332,7 +319,7 @@ export const WalletSetupWizard = ({
 
   const createFlowPasswordNextStep = () => {
     setupType === SetupType.CREATE
-      ? skipTo(WalletSetupSteps.PreMnemonic)
+      ? skipTo(WalletSetupSteps.Mnemonic)
       : useDifferentMnemonicLengths
       ? skipTo(WalletSetupSteps.RecoveryPhraseLength)
       : skipTo(WalletSetupSteps.Mnemonic);
@@ -400,32 +387,25 @@ export const WalletSetupWizard = ({
     }
 
     return (
-      <WalletSetupMnemonicStep
+      <WalletSetupMnemonicStepRevamp
         mnemonic={mnemonic}
         onReset={(resetStage) => {
           setResetMnemonicStage(resetStage);
           setIsResetMnemonicModalOpen(true);
         }}
+        renderVideoPopupContent={({ onClose }) => (
+          <MnemonicVideoPopupContent
+            translations={mnemonicVideoPopupContentTranslations}
+            onClickVideo={() => {
+              // TODO: https://input-output.atlassian.net/browse/LW-9761 handle analytics here based on the stage argument
+            }}
+            videoSrc={process.env.YOUTUBE_RECOVERY_PHRASE_VIDEO_URL}
+            onClose={onClose}
+          />
+        )}
         onNext={moveForward}
-        onStepNext={(stage: MnemonicStage, step: number) => {
-          /* eslint-disable no-magic-numbers */
-          switch (step) {
-            case 0:
-              stage === 'input'
-                ? sendAnalytics(postHogOnboardingActions[setupType]?.ENTER_PASSPHRASE_01_NEXT_CLICK)
-                : sendAnalytics(postHogOnboardingActions[setupType]?.WRITE_PASSPHRASE_01_NEXT_CLICK);
-              break;
-            case 1:
-              stage === 'input'
-                ? sendAnalytics(postHogOnboardingActions[setupType]?.ENTER_PASSPHRASE_09_NEXT_CLICK)
-                : sendAnalytics(postHogOnboardingActions[setupType]?.WRITE_PASSPHRASE_09_NEXT_CLICK);
-              break;
-            case 2:
-              stage === 'input'
-                ? sendAnalytics(postHogOnboardingActions[setupType]?.ENTER_PASSPHRASE_17_NEXT_CLICK)
-                : sendAnalytics(postHogOnboardingActions[setupType]?.WRITE_PASSPHRASE_17_NEXT_CLICK);
-          }
-          /* eslint-enable no-magic-numbers */
+        onStepNext={() => {
+          // TODO: https://input-output.atlassian.net/browse/LW-9761 handle analytics here based on the stage argument
         }}
         translations={walletSetupMnemonicStepTranslations}
         suggestionList={wordList}
@@ -468,20 +448,6 @@ export const WalletSetupWizard = ({
           translations={walletSetupAnalyticsStepTranslations}
         />
       )}
-      {currentStep === WalletSetupSteps.PreMnemonic && (
-        <WalletSetupMnemonicIntroStep
-          onBack={moveBack}
-          onNext={() => {
-            analytics.sendEventToPostHog(postHogOnboardingActions[setupType]?.PASSPHRASE_INTRO_NEXT_CLICK);
-            moveForward();
-          }}
-          translations={walletSetupMnemonicIntroStepTranslations}
-          onClickVideo={() =>
-            analytics.sendEventToPostHog(postHogOnboardingActions[setupType]?.PASSPHRASE_INTRO_PLAY_VIDEO_CLICK)
-          }
-          videoSrc={process.env.YOUTUBE_RECOVERY_PHRASE_VIDEO_URL}
-        />
-      )}
       {currentStep === WalletSetupSteps.Mnemonic && (
         <Suspense fallback={<Fallback />}>{renderedMnemonicStep()}</Suspense>
       )}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 061156c40..838ed20bc 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -19,6 +19,7 @@ export * from '@ui/components/InfoWallet';
 export * from '@ui/components/OutputSummary';
 export * from '@ui/components/OutputSummaryList';
 export * from '@ui/components/WalletSetup';
+export * from '@ui/components/WalletSetupRevamp';
 export * from '@ui/components/ConnectedDapp';
 export * from '@ui/components/SendReceive';
 export * from '@ui/components/DappInfo';
diff --git a/packages/core/src/ui/components/WalletSetup/wallet-steps.common.ts b/packages/core/src/ui/components/WalletSetup/wallet-steps.common.ts
index b41208b11..feb5c94fe 100644
--- a/packages/core/src/ui/components/WalletSetup/wallet-steps.common.ts
+++ b/packages/core/src/ui/components/WalletSetup/wallet-steps.common.ts
@@ -2,7 +2,6 @@ export enum WalletSetupSteps {
   Legal = 'legal',
   Analytics = 'analytics',
   Mode = 'mode',
-  PreMnemonic = 'pre-mnemonic',
   Mnemonic = 'mnemonic',
   Register = 'register',
   Password = 'password',
diff --git a/packages/core/src/ui/components/WalletSetup/wallet-steps.ts b/packages/core/src/ui/components/WalletSetup/wallet-steps.ts
index 6e1e14cd1..c49ca7e67 100644
--- a/packages/core/src/ui/components/WalletSetup/wallet-steps.ts
+++ b/packages/core/src/ui/components/WalletSetup/wallet-steps.ts
@@ -20,12 +20,8 @@ export const walletSetupWizard: WalletSetupWizard = {
     prev: WalletSetupSteps.Password,
     next: WalletSetupSteps.Mnemonic
   },
-  [WalletSetupSteps.PreMnemonic]: {
-    prev: WalletSetupSteps.Password,
-    next: WalletSetupSteps.Mnemonic
-  },
   [WalletSetupSteps.Mnemonic]: {
-    prev: WalletSetupSteps.PreMnemonic,
+    prev: WalletSetupSteps.Password,
     next: WalletSetupSteps.Create
   },
   [WalletSetupSteps.Create]: {
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/MnemonicVideoPopupContent.module.scss b/packages/core/src/ui/components/WalletSetupRevamp/MnemonicVideoPopupContent.module.scss
new file mode 100644
index 000000000..4883ac80d
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/MnemonicVideoPopupContent.module.scss
@@ -0,0 +1,52 @@
+@import '../../../../../common/src/ui/styles/abstracts/typography';
+
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: size_unit(6);
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: size_unit(2);
+
+    .title {
+      @include text-heading;
+      color: var(--text-color-primary, #3d3b39);
+      margin: 0;
+    }
+
+    .description {
+      font-size: var(--body) !important;
+      line-height: size_unit(3) !important;
+      color: var(--text-color-primary, #3d3b39);
+      margin: 0;
+    }
+
+    .videoContainer {
+      position: relative;
+      height: 272px;
+      border-radius: 16px;
+      border: 1px solid #efefef;
+
+      .overlay {
+        z-index: 1;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 16px;
+        top: 0;
+        left: 0;
+        opacity: 0;
+      }
+
+      .video {
+        width: 100%;
+        height: 100%;
+        border-radius: 16px;
+        border: none;
+      }
+    }
+  }
+}
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/MnemonicVideoPopupContent.tsx b/packages/core/src/ui/components/WalletSetupRevamp/MnemonicVideoPopupContent.tsx
new file mode 100644
index 000000000..b3c003ebd
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/MnemonicVideoPopupContent.tsx
@@ -0,0 +1,55 @@
+import { Button } from '@lace/ui';
+import { TranslationsFor } from '@ui/utils/types';
+import { urls } from '@ui/utils/constants';
+import React, { ReactElement, useRef, useState } from 'react';
+import styles from './MnemonicVideoPopupContent.module.scss';
+
+type MnemonicVideoPopupContentProps = {
+  onClickVideo: () => void;
+  onClose: () => void;
+  translations: TranslationsFor<'title' | 'description' | 'linkText' | 'closeButton'>;
+  videoSrc: string;
+};
+
+export const MnemonicVideoPopupContent = ({
+  onClickVideo,
+  onClose,
+  translations,
+  videoSrc
+}: MnemonicVideoPopupContentProps): ReactElement => {
+  const [overlayVisible, setOverlayVisible] = useState(true);
+  const videoRef = useRef<HTMLIFrameElement>();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.content} data-testid="wallet-setup-step-header">
+        <h1 className={styles.title}>{translations.title}</h1>
+        <p className={styles.description}>
+          {translations.description}{' '}
+          <a href={urls.faq.secretPassphrase} target="_blank" data-testid="faq-secret-passphrase-url">
+            {translations.linkText}
+          </a>
+        </p>
+        <div
+          className={styles.videoContainer}
+          onClick={() => {
+            setOverlayVisible(false);
+            videoRef.current.src += '&autoplay=1';
+            onClickVideo();
+          }}
+        >
+          {overlayVisible && <div className={styles.overlay} />}
+          <iframe
+            ref={videoRef}
+            className={styles.video}
+            src={videoSrc}
+            title="YouTube video player"
+            allow="accelerometer; fullscreen; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            data-testid="mnemonic-intro-yt-video-frame"
+          />
+        </div>
+      </div>
+      <Button.CallToAction label={translations.closeButton} onClick={onClose} />
+    </div>
+  );
+};
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordContainerRevamp.module.scss b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordContainerRevamp.module.scss
new file mode 100644
index 000000000..37c1c37b0
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordContainerRevamp.module.scss
@@ -0,0 +1,54 @@
+@import '../../../styles/theme';
+@import '../../../../../../common/src/ui/styles/abstracts/typography';
+
+.mnemonicWordContainer,
+.active {
+  @include text-bodySmall-medium;
+
+  background: var(--light-mode-light-grey, var(--dark-mode-dark-grey));
+  border-radius: 100px;
+  padding: 0 size_unit(1.5);
+  display: flex;
+  gap: size_unit(1);
+  align-items: center;
+  justify-content: space-between;
+  color: var(--text-color-primary) !important;
+  height: size_unit(4.25);
+  border: 1px solid transparent;
+  width: size_unit(13);
+  .number {
+    @include text-bodySmall-semi-bold;
+    margin: 0;
+  }
+  &:hover {
+    background: var(--light-mode-light-grey-plus-56, var(--dark-mode-dark-grey));
+    border: 1px solid var(--light-mode-light-grey-plus, var(--dark-mode-grey));
+  }
+  &:active,
+  &:focus,
+  &::selection {
+    background: var(--light-mode-light-grey-plus-56, var(--dark-mode-dark-grey));
+    border: 1px solid transparent;
+  }
+  .active {
+    background: var(--light-mode-light-grey-plus-56, var(--dark-mode-dark-grey));
+    border: 1px solid transparent;
+  }
+  &:disabled {
+    background: var(--light-mode-light-grey, var(--dark-mode-dark-grey));
+    color: var(--light-mode-dark-grey, var(--dark-mode-light-grey));
+    .number {
+      color: var(--light-mode-dark-grey, var(--dark-mode-light-grey));
+      margin: 0;
+    }
+  }
+}
+
+.disabled {
+  cursor: not-allowed;
+
+  &:hover {
+    background: var(--light-mode-light-grey, var(--dark-mode-dark-grey));
+    border: 1px solid transparent;
+  }
+}
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordContainerRevamp.tsx b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordContainerRevamp.tsx
new file mode 100644
index 000000000..ef73293d3
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordContainerRevamp.tsx
@@ -0,0 +1,37 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-magic-numbers */
+import React, { forwardRef } from 'react';
+import styles from './MnemonicWordContainerRevamp.module.scss';
+import classnames from 'classnames';
+
+export interface MnemonicWordContainerProps {
+  children: React.ReactNode;
+  number: number;
+  active?: boolean;
+  onContextMenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const MnemonicWordContainerRevamp = forwardRef<HTMLDivElement, MnemonicWordContainerProps>(
+  ({ children, number, active, onContextMenu, disabled, className }, ref) => (
+    <div
+      data-testid="mnemonic-word-container"
+      ref={ref}
+      className={classnames(styles.mnemonicWordContainer, className, {
+        [styles.active]: active,
+        [styles.disabled]: disabled
+      })}
+      onCopy={(e) => {
+        e.preventDefault();
+        return false;
+      }}
+      onContextMenu={onContextMenu}
+    >
+      <p onContextMenu={onContextMenu} className={styles.number}>
+        {number}.
+      </p>
+      {children}
+    </div>
+  )
+);
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordsWritedownRevamp.module.scss b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordsWritedownRevamp.module.scss
new file mode 100644
index 000000000..c91122a22
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordsWritedownRevamp.module.scss
@@ -0,0 +1,24 @@
+@import '../../../styles/theme';
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  @media (max-width: $breakpoint-popup) {
+    padding-top: size_unit(4);
+  }
+}
+
+.wordContainer {
+  flex: 1 0 calc(25% - #{size_unit(2.25)});
+  justify-content: start !important;
+  gap: size_unit(0.75) !important;
+  margin: size_unit(2) size_unit(2) 0 0;
+}
+
+.blur {
+  filter: blur(size_unit(0.5));
+}
+
+.word {
+  margin: auto 0;
+}
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordsWritedownRevamp.tsx b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordsWritedownRevamp.tsx
new file mode 100644
index 000000000..b882beca8
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/MnemonicWordsWritedownRevamp.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import styles from './MnemonicWordsWritedownRevamp.module.scss';
+import { MnemonicWordContainerRevamp } from './MnemonicWordContainerRevamp';
+import classnames from 'classnames';
+import { simpleCipher } from '@ui/utils/simple-cipher';
+
+export interface MnemonicWordsWritedownProps {
+  words: string[];
+  fourColumnView?: boolean;
+  blurWords?: boolean;
+}
+
+export const stopContextMenuDisplays = (e: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
+  e.preventDefault();
+};
+
+export const MnemonicWordsWritedownRevamp = ({
+  words,
+  blurWords = false
+}: MnemonicWordsWritedownProps): React.ReactElement => (
+  <div className={styles.container}>
+    {words.map((word, index) => (
+      <MnemonicWordContainerRevamp
+        disabled
+        onContextMenu={stopContextMenuDisplays}
+        number={index + 1}
+        key={index}
+        className={classnames(styles.wordContainer, { [styles.blur]: blurWords })}
+      >
+        <p data-testid="mnemonic-word-writedown" onContextMenu={stopContextMenuDisplays} className={styles.word}>
+          {blurWords ? simpleCipher(word) : word}
+        </p>
+      </MnemonicWordContainerRevamp>
+    ))}
+  </div>
+);
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicStepRevamp.tsx b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicStepRevamp.tsx
new file mode 100644
index 000000000..617f65edd
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicStepRevamp.tsx
@@ -0,0 +1,127 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { WalletTimelineSteps } from '../../WalletSetup';
+import { MnemonicWordsWritedownRevamp } from './MnemonicWordsWritedownRevamp';
+import { MnemonicWordsConfirmInput } from '../../WalletSetup/MnemonicWordsConfirmInput';
+import { WalletSetupStepLayoutRevamp } from '../WalletSetupStepLayoutRevamp';
+import styles from '../../WalletSetup/WalletSetupOption.module.scss';
+import { TranslationsFor } from '@ui/utils/types';
+import { hasEmptyString } from '@ui/components/WalletSetup/WalletSetupMnemonicVerificationStep';
+import { Dialog } from '@lace/ui';
+
+export type MnemonicStage = 'writedown' | 'input';
+
+export interface WalletSetupMnemonicStepProps {
+  mnemonic: string[];
+  onReset: (mnemonicStage?: MnemonicStage) => void;
+  onNext: () => void;
+  onStepNext?: (currentStage: MnemonicStage) => void;
+  mnemonicWordsInStep?: number;
+  translations: TranslationsFor<
+    | 'writePassphraseTitle'
+    | 'body'
+    | 'enterPassphrase'
+    | 'writePassphraseSubtitle1'
+    | 'writePassphraseSubtitle2'
+    | 'passphraseError'
+  >;
+  suggestionList?: Array<string>;
+  passphraseInfoLink?: string;
+  renderVideoPopupContent: (params: { onClose: () => void }) => React.ReactNode;
+}
+
+export const WalletSetupMnemonicStepRevamp = ({
+  mnemonic,
+  onReset,
+  onNext,
+  onStepNext,
+  translations,
+  suggestionList,
+  renderVideoPopupContent
+}: WalletSetupMnemonicStepProps): React.ReactElement => {
+  const initialMnemonicWordsConfirm = useMemo(() => mnemonic.map(() => ''), [mnemonic]);
+  const [mnemonicStage, setMnemonicStage] = useState<MnemonicStage>('writedown');
+  const [mnemonicConfirm, setMnemonicWordsConfirm] = useState(initialMnemonicWordsConfirm);
+  const [isWriting, setIsWriting] = useState(false);
+  const [videoModalOpen, setVideoModalOpen] = useState(false);
+
+  // reset the state on mnemonic change
+  useEffect(() => {
+    setMnemonicStage('writedown');
+    setMnemonicWordsConfirm(initialMnemonicWordsConfirm);
+  }, [initialMnemonicWordsConfirm, mnemonic]);
+
+  const handleBack = () => {
+    onReset(mnemonicStage);
+  };
+
+  const handleNext = () => {
+    if (onStepNext) onStepNext(mnemonicStage);
+    if (mnemonicStage === 'input') {
+      onNext();
+      return;
+    }
+    setMnemonicStage('input');
+  };
+
+  const title = mnemonicStage === 'writedown' ? translations.writePassphraseTitle : translations.enterPassphrase;
+  const subtitle =
+    mnemonicStage === 'writedown' ? (
+      <>
+        {translations.writePassphraseSubtitle1}{' '}
+        <span onClick={() => setVideoModalOpen(true)} className={styles.link} data-testid="find-out-more-link">
+          {translations.writePassphraseSubtitle2}
+        </span>
+        <Dialog.Root open={videoModalOpen} setOpen={setVideoModalOpen}>
+          {renderVideoPopupContent({ onClose: () => setVideoModalOpen(false) })}
+        </Dialog.Root>
+      </>
+    ) : (
+      translations.body
+    );
+
+  const isNextEnabled = useMemo(() => {
+    if (mnemonicStage === 'writedown') return true;
+    return mnemonic.every((word, index) => mnemonicConfirm[index] === word);
+  }, [mnemonic, mnemonicStage, mnemonicConfirm]);
+
+  return (
+    <>
+      <WalletSetupStepLayoutRevamp
+        title={title}
+        description={subtitle}
+        onBack={handleBack}
+        onNext={handleNext}
+        isNextEnabled={isNextEnabled}
+        currentTimelineStep={WalletTimelineSteps.RECOVERY_PHRASE}
+      >
+        {mnemonicStage === 'writedown' ? (
+          <MnemonicWordsWritedownRevamp words={mnemonic} />
+        ) : (
+          <div className={styles.ContainerWordsConfirm}>
+            <MnemonicWordsConfirmInput
+              words={mnemonicConfirm}
+              onChange={(stepWords) => {
+                const newMnemonicWordsConfirm = [...mnemonicConfirm];
+
+                // eslint-disable-next-line unicorn/no-array-for-each
+                stepWords.forEach((word, index) => {
+                  newMnemonicWordsConfirm[index] = word;
+                });
+
+                setMnemonicWordsConfirm(newMnemonicWordsConfirm);
+              }}
+              onDropdownVisibleChange={(open) => setIsWriting(open)}
+              firstWordNumber={1}
+              suggestionList={suggestionList}
+            />
+            {!isNextEnabled && !hasEmptyString(mnemonicConfirm) && !isWriting && (
+              <div className={styles.errorMessage}>
+                <span data-testid="passphrase-error">{translations.passphraseError}</span>
+              </div>
+            )}
+          </div>
+        )}
+      </WalletSetupStepLayoutRevamp>
+    </>
+  );
+};
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/index.ts b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/index.ts
new file mode 100644
index 000000000..418cd6a26
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/index.ts
@@ -0,0 +1 @@
+export { WalletSetupMnemonicStepRevamp } from './WalletSetupMnemonicStepRevamp';
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.module.scss b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.module.scss
new file mode 100644
index 000000000..dde2cb705
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.module.scss
@@ -0,0 +1,75 @@
+@import '../../styles/theme.scss';
+@import '../../../../../common/src/ui/styles/abstracts/mixins';
+@import '../../../../../common/src/ui/styles/theme.scss';
+
+.walletSetupStepLayout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+  .sideTimelineContainer {
+    width: 206px;
+    border-right: 1px solid var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey));
+    margin: size_unit(5) 0;
+    .activeText {
+      @include text-bodySmall-semi-bold;
+    }
+  }
+
+  .title, .subtitle {
+    margin: 0
+  }
+
+  .container {
+    flex: 1;
+    height: 100%;
+    padding: size_unit(5) size_unit(2.75) size_unit(5) size_unit(2);
+    display: flex;
+    flex-direction: column;
+    gap: size_unit(2);
+
+    .header {
+      display: flex;
+      flex-direction: column;
+      gap: size_unit(3);
+
+      h1 {
+        @include text-heading;
+        padding-left: size_unit(5.5);
+        color: var(--text-color-primary, #3d3b39);
+      }
+
+      p {
+        font-size: var(--body) !important;
+        line-height: size_unit(3) !important;
+        color: var(--text-color-primary, #3d3b39);
+        margin-left: size_unit(5.5);
+      }
+    }
+
+    .content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 size_unit(2.25) 0 size_unit(5.5);
+      margin-right: -#{size_unit(1)};
+      @include scroll-bar-style;
+    }
+
+    .footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: size_unit(5.5);
+      margin-top: size_unit(2);
+      button {
+        min-width: 116px !important;
+      }
+      p {
+        font-weight: 600;
+        font-size: var(--bodySmall);
+        line-height: 20px;
+        color: var(--light-mode-dark-grey, var(--dark-mode-light-grey));
+      }
+    }
+  }
+}
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.tsx b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.tsx
new file mode 100644
index 000000000..14beb20b0
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.tsx
@@ -0,0 +1,175 @@
+import { Button, Timeline } from '@lace/common';
+import { useTranslate } from '@ui/hooks/useTranslate';
+import i18n from '@ui/lib/i18n';
+import { Tooltip } from 'antd';
+import cn from 'classnames';
+import React, { useRef } from 'react';
+import { urls } from '../../utils/constants';
+import { WalletSetupFlow, useWalletSetupFlow } from '../WalletSetup';
+import styles from './WalletSetupStepLayoutRevamp.module.scss';
+
+export enum WalletTimelineSteps {
+  LEGAL_AND_ANALYTICS,
+  WALLET_SETUP,
+  RECOVERY_PHRASE,
+  ALL_DONE,
+  CONNECT_WALLET,
+  NAME_WALLET
+}
+export interface WalletSetupStepLayoutProps {
+  title: React.ReactNode;
+  children?: React.ReactNode;
+  belowContentText?: React.ReactNode;
+  description?: React.ReactNode;
+  linkText?: React.ReactNode;
+  stepInfoText?: string;
+  onNext?: () => void;
+  onBack?: () => void;
+  onSkip?: () => void;
+  nextLabel?: string;
+  backLabel?: string;
+  skipLabel?: string;
+  isNextEnabled?: boolean;
+  isNextLoading?: boolean;
+  toolTipText?: string;
+  currentTimelineStep?: WalletTimelineSteps;
+  isHardwareWallet?: boolean;
+}
+
+const removeLegalAndAnalyticsStep = (
+  steps: {
+    key: WalletTimelineSteps;
+    name: string;
+  }[]
+) => {
+  steps.shift();
+};
+
+const getTimelineSteps = (currentStep: WalletTimelineSteps, isHardwareWallet: boolean, flow: WalletSetupFlow) => {
+  const inMemoryWalletSteps = [
+    { key: WalletTimelineSteps.LEGAL_AND_ANALYTICS, name: i18n.t('package.core.walletSetupStep.legalAndAnalytics') },
+    { key: WalletTimelineSteps.WALLET_SETUP, name: i18n.t('package.core.walletSetupStep.walletSetup') },
+    { key: WalletTimelineSteps.RECOVERY_PHRASE, name: i18n.t('package.core.walletSetupStep.recoveryPhrase') },
+    { key: WalletTimelineSteps.ALL_DONE, name: i18n.t('package.core.walletSetupStep.allDone') }
+  ];
+
+  const hardwareWalletSteps = [
+    { key: WalletTimelineSteps.LEGAL_AND_ANALYTICS, name: i18n.t('package.core.walletSetupStep.legalAndAnalytics') },
+    { key: WalletTimelineSteps.CONNECT_WALLET, name: i18n.t('package.core.walletSetupStep.connectWallet') },
+    { key: WalletTimelineSteps.NAME_WALLET, name: i18n.t('package.core.walletSetupStep.nameWallet') },
+    { key: WalletTimelineSteps.ALL_DONE, name: i18n.t('package.core.walletSetupStep.allDone') }
+  ];
+
+  const walletSteps = isHardwareWallet ? hardwareWalletSteps : inMemoryWalletSteps;
+
+  if (flow === WalletSetupFlow.ADD_WALLET) {
+    // remove legal and analytics step
+    removeLegalAndAnalyticsStep(walletSteps);
+  }
+
+  if (typeof currentStep !== 'undefined') {
+    const currentStepIndex = walletSteps.findIndex((step) => step.key === currentStep);
+    return walletSteps.map((step, index) => ({ ...step, active: index <= currentStepIndex }));
+  }
+
+  return walletSteps.map((step) => ({ ...step, active: false }));
+};
+
+export const WalletSetupStepLayoutRevamp = ({
+  children,
+  title,
+  description,
+  linkText,
+  stepInfoText,
+  belowContentText,
+  onNext,
+  onBack,
+  onSkip,
+  nextLabel,
+  backLabel,
+  skipLabel,
+  isNextEnabled = true,
+  isNextLoading = false,
+  toolTipText,
+  currentTimelineStep,
+  isHardwareWallet = false
+}: WalletSetupStepLayoutProps): React.ReactElement => {
+  const { t } = useTranslate();
+  const nextButtonContainerRef = useRef(null);
+  const flow = useWalletSetupFlow();
+
+  const defaultLabel = {
+    next: t('package.core.walletSetupStep.next'),
+    back: t('package.core.walletSetupStep.back'),
+    skip: t('package.core.walletSetupStep.skip')
+  };
+
+  const timelineSteps = getTimelineSteps(currentTimelineStep, isHardwareWallet, flow);
+
+  return (
+    <div className={styles.walletSetupStepLayout} data-testid="wallet-setup-step-layout">
+      <div className={styles.sideTimelineContainer}>
+        <Timeline>
+          {timelineSteps.map(({ name, key, active }) => (
+            <Timeline.Item key={key} active={active}>
+              <div className={cn({ [styles.activeText]: currentTimelineStep === key })}>{name}</div>
+            </Timeline.Item>
+          ))}
+        </Timeline>
+      </div>
+      <div className={styles.container}>
+        <div className={styles.header} data-testid="wallet-setup-step-header">
+          <h1 data-testid="wallet-setup-step-title" className={styles.title}>
+            {title}
+          </h1>
+          {description && (
+            <p data-testid="wallet-setup-step-subtitle" className={styles.subtitle}>
+              {description}{' '}
+              <a href={urls.faq.secretPassphrase} target="_blank" data-testid="faq-secret-passphrase-url">
+                {linkText}
+              </a>
+            </p>
+          )}
+        </div>
+        <div className={styles.content} data-testid="wallet-setup-step-content">
+          {children}
+        </div>
+        {belowContentText}
+        <div className={styles.footer} data-testid="wallet-setup-step-footer">
+          {onBack ? (
+            <Button color="secondary" onClick={onBack} data-testid="wallet-setup-step-btn-back">
+              {backLabel || defaultLabel.back}
+            </Button>
+          ) : (
+            <div />
+          )}
+          {stepInfoText && <p data-testid="step-info-text">{stepInfoText}</p>}
+          {onSkip && (
+            <Button variant="text" onClick={onSkip} data-testid="wallet-setup-step-btn-skip">
+              {skipLabel || defaultLabel.skip}
+            </Button>
+          )}
+          {onNext && (
+            <span ref={nextButtonContainerRef}>
+              <Tooltip
+                visible={!isNextEnabled && !!toolTipText}
+                title={!isNextEnabled && toolTipText}
+                getPopupContainer={() => nextButtonContainerRef.current}
+                autoAdjustOverflow={false}
+              >
+                <Button
+                  disabled={!isNextEnabled}
+                  onClick={onNext}
+                  loading={isNextLoading}
+                  data-testid="wallet-setup-step-btn-next"
+                >
+                  {nextLabel || defaultLabel.next}
+                </Button>
+              </Tooltip>
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/index.ts b/packages/core/src/ui/components/WalletSetupRevamp/index.ts
new file mode 100644
index 000000000..c4462115b
--- /dev/null
+++ b/packages/core/src/ui/components/WalletSetupRevamp/index.ts
@@ -0,0 +1,3 @@
+export { MnemonicVideoPopupContent } from './MnemonicVideoPopupContent';
+export { WalletSetupMnemonicStepRevamp } from './WalletSetupMnemonicStepRevamp';
+export { WalletSetupStepLayoutRevamp } from './WalletSetupStepLayoutRevamp';