diff --git a/src/components/common/SocialSigner/PasswordRecovery.tsx b/src/components/common/SocialSigner/PasswordRecovery.tsx
index accd3d8c97..14f61bceae 100644
--- a/src/components/common/SocialSigner/PasswordRecovery.tsx
+++ b/src/components/common/SocialSigner/PasswordRecovery.tsx
@@ -1,15 +1,5 @@
 import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
-import {
-  Typography,
-  FormControlLabel,
-  Checkbox,
-  Button,
-  Box,
-  Divider,
-  Grid,
-  LinearProgress,
-  FormControl,
-} from '@mui/material'
+import { Typography, FormControlLabel, Checkbox, Button, Box, Divider, FormControl, Avatar } from '@mui/material'
 import { useState } from 'react'
 import Track from '@/components/common/Track'
 import { FormProvider, useForm } from 'react-hook-form'
@@ -60,60 +50,51 @@ export const PasswordRecovery = ({
   return (
     <FormProvider {...formMethods}>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <Grid container justifyContent="center" alignItems="center">
-          <Grid item xs={12} md={5} p={2}>
-            <Typography variant="h2" fontWeight="bold" mb={3}>
-              Verify your account
+        <Box>
+          <Box p={4}>
+            <Box display="flex" flexDirection="row" gap={1} alignItems="center" mb={0.5}>
+              <Avatar className={css.dot}>
+                <Typography variant="body2">{2}</Typography>
+              </Avatar>
+              <Typography variant="h6" fontWeight="bold">
+                Enter recovery password
+              </Typography>
+            </Box>
+            <Typography variant="body2" pl={'28px'}>
+              Please enter your recovery password.
             </Typography>
-            <Box bgcolor="background.paper" borderRadius={1}>
-              <LinearProgress
-                color="secondary"
-                sx={{ borderTopLeftRadius: '6px', borderTopRightRadius: '6px', opacity: isDisabled ? 1 : 0 }}
+          </Box>
+          <Divider />
+          <Box className={css.passwordWrapper}>
+            <FormControl fullWidth>
+              <PasswordInput
+                name="password"
+                label="Recovery password"
+                helperText={formState.errors['password']?.message}
+                disabled={isDisabled}
+                required
               />
-              <Box p={4}>
-                <Typography variant="h6" fontWeight="bold" mb={0.5}>
-                  Enter security password
-                </Typography>
-                <Typography>
-                  This browser is not registered with your Account yet. Please enter your recovery password to restore
-                  access to this Account.
-                </Typography>
-              </Box>
-              <Divider />
-              <Box className={css.passwordWrapper}>
-                <FormControl fullWidth>
-                  <PasswordInput
-                    name="password"
-                    label="Recovery password"
-                    helperText={formState.errors['password']?.message}
-                    disabled={isDisabled}
-                    required
-                  />
-                </FormControl>
-                <FormControlLabel
-                  disabled={isDisabled}
-                  control={
-                    <Checkbox checked={storeDeviceFactor} onClick={() => setStoreDeviceFactor((prev) => !prev)} />
-                  }
-                  label="Do not ask again on this device"
-                />
-                {error && <ErrorMessage className={css.loginError}>{error}</ErrorMessage>}
-              </Box>
+            </FormControl>
+            <FormControlLabel
+              disabled={isDisabled}
+              control={<Checkbox checked={storeDeviceFactor} onClick={() => setStoreDeviceFactor((prev) => !prev)} />}
+              label="Do not ask again on this device"
+            />
+            {error && <ErrorMessage className={css.loginError}>{error}</ErrorMessage>}
+          </Box>
 
-              <Divider />
-              <Box p={4} display="flex" justifyContent="space-between">
-                <Button variant="outlined" onClick={onBack}>
-                  Back
-                </Button>
-                <Track {...MPC_WALLET_EVENTS.RECOVER_PASSWORD}>
-                  <Button variant="contained" type="submit" disabled={isDisabled}>
-                    Submit
-                  </Button>
-                </Track>
-              </Box>
-            </Box>
-          </Grid>
-        </Grid>
+          <Divider />
+          <Box p={4} display="flex" justifyContent="space-between">
+            <Button variant="outlined" onClick={onBack}>
+              Back
+            </Button>
+            <Track {...MPC_WALLET_EVENTS.RECOVER_PASSWORD}>
+              <Button variant="contained" type="submit" disabled={isDisabled}>
+                Submit
+              </Button>
+            </Track>
+          </Box>
+        </Box>
       </form>
     </FormProvider>
   )
diff --git a/src/components/common/SocialSigner/SmsRecovery.tsx b/src/components/common/SocialSigner/SmsRecovery.tsx
index ff1e6b60fe..2641f2e3c0 100644
--- a/src/components/common/SocialSigner/SmsRecovery.tsx
+++ b/src/components/common/SocialSigner/SmsRecovery.tsx
@@ -1,5 +1,5 @@
 import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
-import { Typography, FormControlLabel, Checkbox, Button, Box, Divider, Grid, LinearProgress } from '@mui/material'
+import { Typography, FormControlLabel, Checkbox, Button, Box, Divider, Avatar } from '@mui/material'
 import { useCallback, useEffect, useState } from 'react'
 import Track from '@/components/common/Track'
 import { FormProvider, useForm } from 'react-hook-form'
@@ -8,6 +8,7 @@ import ErrorMessage from '@/components/tx/ErrorMessage'
 import css from './styles.module.css'
 import CodeInput from '../CodeInput'
 import CooldownButton from '../CooldownButton'
+import { obfuscateNumber } from '@/utils/phoneNumber'
 
 type SmsFormData = {
   code: string
@@ -18,11 +19,13 @@ export const SmsRecovery = ({
   sendSmsCode,
   onSuccess,
   onBack,
+  phoneNumber,
 }: {
   recoverFactorWithSms: (code: string, storeDeviceFactor: boolean) => Promise<void>
   sendSmsCode: () => Promise<void>
   onSuccess?: (() => void) | undefined
   onBack: () => void
+  phoneNumber: string | undefined
 }) => {
   const [storeDeviceFactor, setStoreDeviceFactor] = useState(false)
 
@@ -65,56 +68,49 @@ export const SmsRecovery = ({
   return (
     <FormProvider {...formMethods}>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <Grid container justifyContent="center" alignItems="center">
-          <Grid item xs={12} md={5} p={2}>
-            <Typography variant="h2" fontWeight="bold" mb={3}>
-              Verify your account
+        <Box>
+          <Box p={4}>
+            <Box display="flex" flexDirection="row" gap={1} alignItems="center" mb={0.5}>
+              <Avatar className={css.dot}>
+                <Typography variant="body2">{2}</Typography>
+              </Avatar>
+              <Typography variant="h6" fontWeight="bold">
+                Enter recovery code
+              </Typography>
+            </Box>
+            <Typography variant="body2" pl={'28px'}>
+              Please enter the recovery code sent to your phone.
             </Typography>
-            <Box bgcolor="background.paper" borderRadius={1}>
-              <LinearProgress
-                color="secondary"
-                sx={{ borderTopLeftRadius: '6px', borderTopRightRadius: '6px', opacity: isDisabled ? 1 : 0 }}
-              />
-              <Box p={4}>
-                <Typography variant="h6" fontWeight="bold" mb={0.5}>
-                  Enter recovery code
-                </Typography>
-                <Typography>
-                  This browser is not registered with your Account yet. Please enter the recovery code sent to your
-                  phone to recover your social signer.
-                </Typography>
-              </Box>
-              <Divider />
-              <Box className={css.passwordWrapper}>
-                <CodeInput length={6} onCodeChanged={handleCodeChange} />
+          </Box>
+          <Divider />
+          <Box className={css.passwordWrapper}>
+            <Typography className={css.phoneNumberDisplay}>{obfuscateNumber(phoneNumber)}</Typography>
 
-                <CooldownButton cooldown={60} onClick={sendSmsCode} startDisabled={true}>
-                  Resend code
-                </CooldownButton>
+            <CodeInput length={6} onCodeChanged={handleCodeChange} />
 
-                <FormControlLabel
-                  control={
-                    <Checkbox checked={storeDeviceFactor} onClick={() => setStoreDeviceFactor((prev) => !prev)} />
-                  }
-                  label="Do not ask again on this device"
-                />
-                {error && <ErrorMessage className={css.loginError}>{error}</ErrorMessage>}
-              </Box>
+            <CooldownButton cooldown={60} onClick={sendSmsCode} startDisabled={true}>
+              Resend code
+            </CooldownButton>
 
-              <Divider />
-              <Box p={4} display="flex" alignItems="center" justifyContent="space-between">
-                <Button variant="outlined" onClick={onBack}>
-                  Back
-                </Button>
-                <Track {...MPC_WALLET_EVENTS.RECOVER_PASSWORD}>
-                  <Button variant="contained" type="submit" disabled={isDisabled}>
-                    Submit
-                  </Button>
-                </Track>
-              </Box>
-            </Box>
-          </Grid>
-        </Grid>
+            <FormControlLabel
+              control={<Checkbox checked={storeDeviceFactor} onClick={() => setStoreDeviceFactor((prev) => !prev)} />}
+              label="Do not ask again on this device"
+            />
+            {error && <ErrorMessage className={css.loginError}>{error}</ErrorMessage>}
+          </Box>
+
+          <Divider />
+          <Box p={4} display="flex" alignItems="center" justifyContent="space-between">
+            <Button variant="outlined" onClick={onBack}>
+              Back
+            </Button>
+            <Track {...MPC_WALLET_EVENTS.RECOVER_PASSWORD}>
+              <Button variant="contained" type="submit" disabled={isDisabled}>
+                Submit
+              </Button>
+            </Track>
+          </Box>
+        </Box>
       </form>
     </FormProvider>
   )
diff --git a/src/services/mpc/SocialRecoveryModal.tsx b/src/components/common/SocialSigner/SocialRecoveryModal.tsx
similarity index 53%
rename from src/services/mpc/SocialRecoveryModal.tsx
rename to src/components/common/SocialSigner/SocialRecoveryModal.tsx
index f8cca509e8..f922219c5d 100644
--- a/src/services/mpc/SocialRecoveryModal.tsx
+++ b/src/components/common/SocialSigner/SocialRecoveryModal.tsx
@@ -4,8 +4,9 @@ import TxModalDialog from '@/components/common/TxModalDialog'
 import { IS_PRODUCTION } from '@/config/constants'
 import useSocialWallet, { useMfaStore } from '@/hooks/wallets/mpc/useSocialWallet'
 import ExternalStore from '@/services/ExternalStore'
-import { Box, Button, Divider, Grid, Typography } from '@mui/material'
-import { useCallback, useState } from 'react'
+import { Avatar, Box, Button, Divider, Grid, LinearProgress, Typography } from '@mui/material'
+import { type ReactNode, useCallback, useState } from 'react'
+import css from './styles.module.css'
 
 const { useStore: useCloseCallback, setStore: setCloseCallback } = new ExternalStore<() => void>()
 
@@ -22,6 +23,35 @@ export const close = () => {
   setCloseCallback(undefined)
 }
 
+const RecoveryFlow = ({
+  children,
+  progress,
+  isRecovering,
+}: {
+  children: ReactNode
+  progress: number
+  isRecovering: boolean
+}) => {
+  return (
+    <Grid container justifyContent="center" alignItems="center">
+      <Grid item xs={12} md={5} p={2}>
+        <Typography variant="h2" fontWeight="bold" mb={3}>
+          Verify your account
+        </Typography>
+        <Box bgcolor="background.paper" borderRadius={1}>
+          <LinearProgress
+            variant={isRecovering ? 'indeterminate' : 'determinate'}
+            color="secondary"
+            sx={{ borderTopLeftRadius: '6px', borderTopRightRadius: '6px' }}
+            value={progress}
+          />
+          {children}
+        </Box>
+      </Grid>
+    </Grid>
+  )
+}
+
 const RecoveryPicker = ({
   smsEnabled,
   passwordEnabled,
@@ -34,53 +64,49 @@ const RecoveryPicker = ({
   deleteAccount?: () => void
 }) => {
   return (
-    <Grid container justifyContent="center" alignItems="center">
-      <Grid item xs={12} md={5} p={2}>
-        <Typography variant="h2" fontWeight="bold" mb={3}>
-          Verify your account
-        </Typography>
-        <Box bgcolor="background.paper" borderRadius={1}>
-          <Box p={4}>
-            <Typography variant="h6" fontWeight="bold" mb={2}>
+    <Box>
+      <Box p={4}>
+        <Box display="flex" flexDirection="row" gap={1} alignItems="center" mb={0.5}>
+          <Avatar className={css.dot}>
+            <Typography variant="body2">{2}</Typography>
+          </Avatar>
+          <Box>
+            <Typography variant="h6" fontWeight="bold">
               Choose your recovery method
             </Typography>
-            <Typography>
-              This browser is not registered with your Account yet. Please proceed with one of your setup recovery
-              methods.
-            </Typography>
-          </Box>
-          <Divider />
-          <Box p={4} display="flex" gap={2} flexDirection="column">
-            <Button
-              size="large"
-              onClick={() => setRecoveryMethod(RecoveryMethod.SMS)}
-              disabled={!smsEnabled}
-              variant="outlined"
-            >
-              SMS
-            </Button>
-
-            <Button
-              size="large"
-              onClick={() => setRecoveryMethod(RecoveryMethod.PASSWORD)}
-              disabled={!passwordEnabled}
-              variant="outlined"
-              sx={{ pointerEvents: 'all' }}
-            >
-              Password
-            </Button>
-
-            {!IS_PRODUCTION && (
-              <>
-                <Button onClick={deleteAccount} variant="danger">
-                  Delete account
-                </Button>
-              </>
-            )}
           </Box>
         </Box>
-      </Grid>
-    </Grid>
+        <Typography variant="body2" pl={'28px'}>
+          How would you like to recovery your social login signer?
+        </Typography>
+      </Box>
+      <Divider />
+      <Box p={4} display="flex" gap={2} flexDirection="column">
+        <Button
+          sx={{ height: '64px' }}
+          onClick={() => setRecoveryMethod(RecoveryMethod.SMS)}
+          disabled={!smsEnabled}
+          variant="outlined"
+        >
+          SMS
+        </Button>
+
+        <Button
+          sx={{ height: '64px' }}
+          onClick={() => setRecoveryMethod(RecoveryMethod.PASSWORD)}
+          disabled={!passwordEnabled}
+          variant="outlined"
+        >
+          Password
+        </Button>
+
+        {!IS_PRODUCTION && (
+          <Button onClick={deleteAccount} variant="danger" sx={{ height: '64px' }}>
+            Delete account
+          </Button>
+        )}
+      </Box>
+    </Box>
   )
 }
 
@@ -88,6 +114,7 @@ const SocialRecoveryModal = () => {
   const socialWalletService = useSocialWallet()
   const mfaSetup = useMfaStore()
   const [recoveryMethod, setRecoveryMethod] = useState<RecoveryMethod>()
+  const [isRecovering, setIsRecovering] = useState(false)
   const closeCallback = useCloseCallback()
   const open = !!closeCallback
 
@@ -97,7 +124,12 @@ const SocialRecoveryModal = () => {
   const recoverPassword = async (password: string, storeDeviceFactor: boolean) => {
     if (!socialWalletService) return
 
-    await socialWalletService.recoverAccountWithPassword(password, storeDeviceFactor)
+    setIsRecovering(true)
+    try {
+      await socialWalletService.recoverAccountWithPassword(password, storeDeviceFactor)
+    } finally {
+      setIsRecovering(false)
+    }
   }
 
   const recoverSms = async (code: string, storeDeviceFactor: boolean) => {
@@ -107,7 +139,12 @@ const SocialRecoveryModal = () => {
     if (!number) {
       throw new Error('No recovery mobile number is set')
     }
-    await socialWalletService.recoverAccountWithSms(number, code, storeDeviceFactor)
+    setIsRecovering(true)
+    try {
+      await socialWalletService.recoverAccountWithSms(number, code, storeDeviceFactor)
+    } finally {
+      setIsRecovering(false)
+    }
   }
 
   const deleteAccount = () => {
@@ -137,16 +174,17 @@ const SocialRecoveryModal = () => {
     setRecoveryMethod(undefined)
   }
 
-  const RecoveryComponentMap: Record<RecoveryMethod, () => React.ReactElement> = {
-    [RecoveryMethod.PASSWORD]: () => (
+  const RecoveryComponentMap: Record<RecoveryMethod, React.ReactElement> = {
+    [RecoveryMethod.PASSWORD]: (
       <PasswordRecovery recoverFactorWithPassword={recoverPassword} onSuccess={handleClose} onBack={handleBack} />
     ),
-    [RecoveryMethod.SMS]: () => (
+    [RecoveryMethod.SMS]: (
       <SmsRecovery
         sendSmsCode={sendSmsCode}
         recoverFactorWithSms={recoverSms}
         onSuccess={handleClose}
         onBack={handleBack}
+        phoneNumber={mfaSetup?.sms?.number}
       />
     ),
   }
@@ -155,16 +193,18 @@ const SocialRecoveryModal = () => {
 
   return (
     <TxModalDialog open={open} onClose={handleClose} fullWidth sx={{ zIndex: '10000 !important', top: '0 !important' }}>
-      {recoveryMethod !== undefined ? (
-        RecoveryComponentMap[recoveryMethod]()
-      ) : (
-        <RecoveryPicker
-          passwordEnabled={passwordEnabled}
-          smsEnabled={smsEnabled}
-          setRecoveryMethod={setRecoveryMethod}
-          deleteAccount={deleteAccount}
-        />
-      )}
+      <RecoveryFlow progress={recoveryMethod ? 75 : 25} isRecovering={isRecovering}>
+        {recoveryMethod !== undefined ? (
+          RecoveryComponentMap[recoveryMethod]
+        ) : (
+          <RecoveryPicker
+            passwordEnabled={passwordEnabled}
+            smsEnabled={smsEnabled}
+            setRecoveryMethod={setRecoveryMethod}
+            deleteAccount={deleteAccount}
+          />
+        )}
+      </RecoveryFlow>
     </TxModalDialog>
   )
 }
diff --git a/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx b/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx
index c09c60184c..d7bea3cefa 100644
--- a/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx
+++ b/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx
@@ -9,7 +9,7 @@ import { fireEvent } from '@testing-library/react'
 import { type ISocialWalletService } from '@/services/mpc/interfaces'
 import { connectedWalletBuilder } from '@/tests/builders/wallet'
 import { chainBuilder } from '@/tests/builders/chains'
-import PasswordRecoveryModal from '@/services/mpc/SocialRecoveryModal'
+import PasswordRecoveryModal from '@/components/common/SocialSigner/SocialRecoveryModal'
 import { MultiFactorType, setMfaStore } from '@/hooks/wallets/mpc/useSocialWallet'
 
 const typeInFocusedElement = (text: string) => {
diff --git a/src/components/common/SocialSigner/index.tsx b/src/components/common/SocialSigner/index.tsx
index f833d0f787..f22ce01096 100644
--- a/src/components/common/SocialSigner/index.tsx
+++ b/src/components/common/SocialSigner/index.tsx
@@ -19,7 +19,7 @@ import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import madProps from '@/utils/mad-props'
 import { asError } from '@/services/exceptions/utils'
 import ErrorMessage from '@/components/tx/ErrorMessage'
-import { open } from '@/services/mpc/SocialRecoveryModal'
+import { open } from '@/components/common/SocialSigner/SocialRecoveryModal'
 
 export const _getSupportedChains = (chains: ChainInfo[]) => {
   return chains
diff --git a/src/components/common/SocialSigner/styles.module.css b/src/components/common/SocialSigner/styles.module.css
index a36db4bcf2..cc1fb999af 100644
--- a/src/components/common/SocialSigner/styles.module.css
+++ b/src/components/common/SocialSigner/styles.module.css
@@ -42,3 +42,17 @@
   width: 100%;
   margin: 0;
 }
+
+.dot {
+  width: 20px;
+  height: 20px;
+  background-color: var(--color-primary-main);
+}
+
+.phoneNumberDisplay {
+  font-size: 14px;
+  padding: var(--space-2);
+  background-color: var(--color-background-main);
+  border-radius: 6px;
+  margin-bottom: var(--space-1);
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 56b5c17bbc..ee1889b0ac 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,5 @@
 import useRehydrateSocialWallet from '@/hooks/wallets/mpc/useRehydrateSocialWallet'
-import PasswordRecoveryModal from '@/services/mpc/SocialRecoveryModal'
+import PasswordRecoveryModal from '@/components/common/SocialSigner/SocialRecoveryModal'
 import Sentry from '@/services/sentry' // needs to be imported first
 import type { ReactNode } from 'react'
 import { type ReactElement } from 'react'
diff --git a/src/services/mpc/SocialLoginModule.ts b/src/services/mpc/SocialLoginModule.ts
index 6ca1ce7464..71ceb82c8d 100644
--- a/src/services/mpc/SocialLoginModule.ts
+++ b/src/services/mpc/SocialLoginModule.ts
@@ -48,7 +48,7 @@ function MpcModule(chain: ChainInfo): WalletInit {
         const { _getMPCCoreKitInstance } = await import('@/hooks/wallets/mpc/useMPC')
         const { getSocialWalletService } = await import('@/hooks/wallets/mpc/useSocialWallet')
         const { COREKIT_STATUS } = await import('@web3auth/mpc-core-kit')
-        const { open } = await import('./SocialRecoveryModal')
+        const { open } = await import('../../components/common/SocialSigner/SocialRecoveryModal')
 
         const getMPCProvider = () => _getMPCCoreKitInstance()?.provider